/* 
 * Ingrid's Music Lessons - Color Scheme & Font Overrides
 * Integrates Ingrid's red color scheme and serif fonts with Monica template
 */

/* Import Ingrid's fonts */
@import url('https://fonts.googleapis.com/css2?family=Book+Antiqua:ital,wght@0,400;0,700;1,400&display=swap');

/* Override Monica's color scheme with Ingrid's red theme */
:root {
  /* Primary colors - override Monica's orange with Ingrid's red */
  --color-1: #DC2626;  /* Primary red */
  --color-1-lightest: #FEE2E2;
  --color-1-lighter: #FECACA;
  --color-1-light: #F87171;
  --color-1-dark: #B91C1C;
  --color-1-darker: #991B1B;
  --color-1-darkest: #7F1D1D;
  
  /* Secondary colors - keep Monica's dark green but adjust slightly */
  --color-2: #1F2937;  /* Dark text color */
  --color-2-lightest: #6B7280;
  --color-2-lighter: #4B5563;
  --color-2-light: #374151;
  --color-2-dark: #111827;
  --color-2-darker: #030712;
  
  /* Background colors - warmer tones */
  --color-3: #FEF7F0;  /* Warm cream background */
  --color-3-light: #FEFCFB;  /* Warm white */
  --color-3-dark: #F3E8D8;
  --color-3-darker: #E8D5C4;
  
  /* Font overrides */
  --font-1: 'Book Antiqua', 'Times New Roman', Georgia, serif;
  --font-2: 'Book Antiqua', 'Times New Roman', Georgia, serif;
}

/* Typography overrides for serif fonts */
body {
  font-family: var(--font-1);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-2);
  font-weight: 700;
}

/* Logo styling */
.s-header__logo .logo {
  font-family: var(--font-2);
  font-weight: 700;
  color: var(--color-1) !important;
  text-decoration: none;
  font-size: 1.5rem;
}

/* Navigation styling */
.s-header__menu-links a {
  font-family: var(--font-1);
}

/* Hero avatar styling */
.hero-avatar-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid var(--color-1);
  object-fit: cover;
  box-shadow: 0 8px 32px rgba(220, 38, 38, 0.2);
}

/* Button styling with red theme */
.btn--primary {
  background: linear-gradient(135deg, var(--color-1), var(--color-1-dark));
  color: white;
  border: none;
}

.btn--primary:hover {
  background: linear-gradient(135deg, var(--color-1-dark), var(--color-1-darker));
  transform: translateY(-2px);
}

.btn--stroke {
  border: 2px solid var(--color-1);
  color: var(--color-1);
}

.btn--stroke:hover {
  background: var(--color-1);
  color: white;
}

/* Pricing CTA styling */
.pricing-cta {
  background: var(--color-3);
  padding: 2rem;
  border-radius: 12px;
  border: 2px solid var(--color-1-lightest);
}

.pricing-cta h3 {
  color: var(--color-1);
  margin-bottom: 1rem;
}

/* Footer contact links */
.s-footer__contact a {
  color: var(--color-1);
  text-decoration: none;
}

.s-footer__contact a:hover {
  color: var(--color-1-dark);
  text-decoration: underline;
}

/* Section backgrounds */
.s-about {
  background: var(--color-3-light);
  color: var(--color-2-dark);
}

.s-expertise {
  background: white;
}

.s-clients {
  background: var(--color-3);
}

/* Improve About section contrast */
.s-about .text-display-title,
.s-about .text-pretitle,
.s-about__content-main p,
.s-about .lead {
  color: var(--color-2-dark);
}

/* Make background stripes in About more subtle */
.s-about__content-imgbg {
  opacity: 0.15;
}

/* Ensure the About button contrasts on light background */
.s-about__content-btn {
  --color-btn-stroke: var(--color-1);
  --color-btn-stroke-text: var(--color-1);
  --color-btn-stroke-hover: var(--color-1);
  --color-btn-stroke-hover-text: #ffffff;
}

/* Scroll icon color */
.scroll-icon svg {
  stroke: #ffffff !important;
}

/* Link colors */
a {
  color: var(--color-1);
}

a:hover {
  color: var(--color-1-dark);
}

/* Text colors */
.text-pretitle {
  color: var(--color-1);
  font-weight: 600;
}

/* Hero colors to white */
.s-intro {
  background: #ffffff;
}

.s-intro__content-pretitle,
.s-intro__content-title,
.s-intro__scroll-down a {
  color: var(--color-2-dark) !important;
}

.s-intro__scroll-down svg {
  stroke: var(--color-1) !important;
}

/* White accent line before hero pretitle */
.s-intro__content-pretitle::before {
  background: #ffffff !important;
}

/* Soften hero decorative lines */
.s-intro__content-media .lines,
.s-intro__content-media .lines::before,
.s-intro__content-media .lines::after,
.s-intro__content-media .lines span {
  opacity: 0.25;
}

/* Enforce circular hero image */
.hero-avatar-img {
  width: clamp(200px, 24vw, 360px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-avatar-img {
    width: 150px;
  }
  
  .s-header__logo .logo {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .hero-avatar-img {
    width: 120px;
  }
  
  .s-header__logo .logo {
    font-size: 1.2rem;
  }
}

/* Replace dark navy backgrounds with white */
/* Mobile/overlay navigation panel */
.s-header__nav {
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Page header (section banners) */
.s-pageheader {
  background-color: #ffffff !important;
}

/* CTA section */
.s-cta {
  background-color: #ffffff !important;
  color: var(--color-2-dark) !important;
}

/* Increase contrast for specific headings */
/* Contact and Pricing page titles */
.s-pageheader .page-title {
  color: var(--color-2-dark) !important;
}

/* Home CTA title */
.s-cta .text-display-title {
  color: var(--color-2-dark) !important;
}

/* Subtle nav emphasis for selected page */
.s-header__menu-links li.current > a {
  color: var(--color-1) !important;
  font-weight: 700;
  position: relative;
}

.s-header__menu-links li.current > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: var(--color-1);
  border-radius: 2px;
  opacity: 0.85;
}

/* Ensure nav links readable on white overlay */
.s-header__nav a:not(.btn) {
  color: var(--color-2-dark) !important;
}

/* Contact form separation & card styling */
.contact-form-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  padding: 2rem;
  margin-top: var(--vspace-1);
}

.contact-cta p {
  margin-bottom: var(--vspace-0_75);
}

.contact-form .form-field {
  margin-bottom: var(--vspace-0_75);
}

.contact-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--color-2);
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  background: #ffffff;
  color: var(--color-2-dark);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0.9rem 1rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--color-1);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Client-side validation styles */
.contact-form input:required:invalid,
.contact-form textarea:required:invalid {
  border-color: var(--color-1-light);
  background: var(--color-1-lightest);
}

.contact-form input:required:valid,
.contact-form textarea:required:valid {
  border-color: #10b98133; /* subtle green */
}

.hidden { display: none !important; }

  @media (max-width: 600px) {
    .contact-form-card {
      padding: 1.25rem;
      border-radius: 10px;
    }
  }

/* Improve visibility of mobile menu toggle (hamburger) */
.s-header__menu-toggle span {
  /* Use dark text color for strong contrast on light headers */
  background-color: var(--color-2-dark) !important;
}

/* Ensure the "X" state also uses the high-contrast color */
.s-header__menu-toggle.is-clicked span::before,
.s-header__menu-toggle.is-clicked span::after {
  background-color: var(--color-2-dark) !important;
}