/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Custom styles for Material UI website */

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  background-color: #fafafa;
}

/* Top app bar adjustments */
.mdc-top-app-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

/* Add top margin to body to account for fixed navbar */
body {
  padding-top: 64px;
}

/* Card hover effects */
.mdc-card {
  transition: all 0.3s ease;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mdc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Button styling */
.mdc-button {
  border-radius: 4px;
  text-transform: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.mdc-button--raised {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mdc-button--raised:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Text field styling */
.mdc-text-field {
  margin-bottom: 16px;
}

.mdc-text-field--outlined {
  border-radius: 4px;
}

/* Material icons styling */
.material-icons {
  vertical-align: middle;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  body {
    padding-top: 56px;
  }
  
  .mdc-top-app-bar__title {
    font-size: 1.1rem;
  }
  
  h1 {
    font-size: 2rem !important;
  }
  
  .mdc-card {
    margin: 10px;
  }
}

/* Animation for page load */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mdc-card {
  animation: fadeInUp 0.6s ease-out;
}

/* Social media icons hover effect */
.material-icons[style*="cursor: pointer"]:hover {
  opacity: 1 !important;
  transform: scale(1.1);
  transition: all 0.2s ease;
}

/* Footer link hover effects */
footer a:hover {
  text-decoration: underline !important;
  opacity: 1 !important;
}

/* Hero section gradient animation */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.mdc-card[style*="linear-gradient"] {
  background-size: 200% 200% !important;
  animation: gradientShift 3s ease infinite;
}