/* Custom styles for Miss Ingrid's Music Lessons */

/* Font imports for custom typography */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Roboto+Slab:wght@300;400;500&display=swap');

:root {
  --brand-brown: #8B4513;
  --brand-copper: #D2691E;
  --brand-copper-light: #CD853F;
  --brand-cream: #FAF3E7;
}

/* Local font-face declarations to use preloaded assets */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/SpaceGrotesk_wght__2FXqrSM6Qb5IUNmO8wuzl.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/DMSans-VariableFont_opsz_wght__6AYEf42h6baL3cdAc77f.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Global reset and base styles for consistent scaling */
* {
  box-sizing: border-box !important;
}

html {
  font-size: 16px !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Contact form background - warm theme matching site colors */
.contact-form-bg {
  background: linear-gradient(135deg, #f4f1eb 0%, #ede4d3 100%) !important;
  border: 2px solid var(--brand-copper) !important;
  border-radius: 12px !important;
  padding: 2.5rem !important;
  box-shadow: 0 8px 25px rgba(210, 105, 30, 0.15) !important;
  color: #5d4037 !important;
}

/* Extra specificity to beat builder classes */
.w-box.contact-form-bg { background: linear-gradient(135deg, #f4f1eb 0%, #ede4d3 100%) !important; }

.contact-form-bg::before,
.contact-form-bg::after {
  content: none !important;
  display: none !important;
}

/* Contact form text styling */
.contact-form-bg .w-label,
.contact-form-bg label {
  color: #8B4513 !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  font-size: 1rem !important;
}

.contact-form-bg .w-text-input,
.contact-form-bg input,
.contact-form-bg textarea {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #5d4037 !important;
  border: 2px solid #CD853F !important;
  border-radius: 8px !important;
  padding: 0.875rem !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
}

.contact-form-bg ::placeholder {
  color: #8b6b5a !important;
  opacity: 0.85 !important;
}

.contact-form-bg .w-text-input:focus,
.contact-form-bg input:focus,
.contact-form-bg textarea:focus {
  border-color: #D2691E !important;
  box-shadow: 0 0 0 0.25rem rgba(210, 105, 30, 0.2) !important;
  background-color: white !important;
}

/* Hide "Built with Webstudio" badge robustly */
a[href*="webstudio.is"],
a[href*="webstudio" i],
[aria-label*="webstudio" i],
[data-ws-badge],
.ws--badge,
a[href*="webstudio"]:where([style*="position:fixed"][style*="bottom"][style*="right"]) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Typography overrides with stronger selectors */
.header-text,
h1.header-text,
h2.header-text,
h3.header-text,
.w-heading.header-text,
.w-heading h1,
.w-heading h2,
.w-heading h3 {
  font-family: 'Space Grotesk', 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
}

.emphasis-text,
.w-text.emphasis-text,
b.emphasis-text {
  font-family: 'Crimson Text', serif !important;
  font-weight: 600 !important;
  font-style: italic !important;
}

.body-text, 
.footer-text,
.w-text.body-text,
.w-paragraph.body-text,
p.body-text,
div.body-text {
  font-family: 'Roboto Slab', serif !important;
  font-weight: 400 !important;
}

/* Force typography on all headings and text elements */
.w-heading {
  font-family: 'Space Grotesk', 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
}

.w-text, .w-paragraph {
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/* Override with preserved fonts where specified */
.header-text {
  font-family: 'Space Grotesk', 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

.body-text {
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
}

/* Semantic heading scale (consistent across pages) */
h1, h1.w-heading {
  font-family: 'Space Grotesk', 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.875rem, 1.1rem + 2.4vw, 3rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
}

h2, h2.w-heading {
  font-family: 'Space Grotesk', 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem) !important;
  line-height: 1.2 !important;
}

h3, h3.w-heading {
  font-family: 'Space Grotesk', 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(1.25rem, 0.9rem + 1vw, 1.75rem) !important;
  line-height: 1.25 !important;
}

p, .w-text, .w-paragraph {
  font-size: clamp(1rem, 0.2vw + 0.95rem, 1.125rem) !important;
  line-height: 1.6 !important;
}

/* Header consistency - fixed height and responsive scaling */
header {
  height: 70px !important;
  background: transparent !important;
  border-bottom: none !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
}

header > .w-box {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  height: 70px !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important; /* logo | nav | cta */
  align-items: center !important;
  column-gap: 1rem !important;
}

/* Apply accessible deeper light red gradient to nav bar */
header > .w-box {
  background: linear-gradient(135deg, #f6b3bb 0%, #ea8d9c 100%) !important; /* deeper yet light red */
  border: 2px solid #b74c5c !important; /* stronger edge for definition */
  border-radius: 28px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  overflow: hidden !important; /* ensure rounded corners render consistently */
  position: relative !important; /* anchor pseudo overlay */
  display: grid !important;
  grid-template-columns: auto 1fr auto !important; /* logo | nav (center) | cta */
}

/* Ensure the very first inner wrapper gets the pill on pages where extra wrappers exist (e.g., /contact/) */
header > .w-box:first-child {
  background: linear-gradient(135deg, #f6b3bb 0%, #ea8d9c 100%) !important;
  border: 2px solid #b74c5c !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Use an overlay to guarantee consistent gradient even if inline styles exist */
header > .w-box::before,
header > .w-box:first-child::before,
header > .w-box.w-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f6b3bb 0%, #ea8d9c 100%) !important;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

/* Place actual content above overlay */
header > .w-box > * { position: relative; z-index: 1; }

/* Prevent overflow issues in header grid */
header > .w-box > * { min-width: 0 !important; }

/* Logo styling */
header .w-link[href="/"] {
  font-family: 'Space Grotesk', 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-size: clamp(1rem, 1.2vw + 0.8rem, 1.25rem) !important;
  font-weight: 600 !important;
  color: #5c0b16 !important; /* dark wine for contrast */
  text-decoration: none !important;
  justify-self: start !important;
}

/* Strengthen link color specificity inside the pill to override page-level styles */
header > .w-box a.w-link,
header > .w-box .w-menu-list a.w-link {
  color: #5c0b16 !important;
}

/* Hide hamburger menu completely */
header button[aria-label="Open mobile menu"],
.w-button[aria-label="Open mobile menu"] {
  display: none !important;
}

/* Center navigation */
header nav {
  position: static !important;
  left: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  justify-self: center !important;
}

/* Ensure nav menu uses a single row and centers items */
.w-navigation-menu,
.w-menu-list {
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.5rem, 1vw, 0.9rem) !important;
  justify-content: center !important;
}

header nav a {
  color: #5c0b16 !important; /* dark wine for contrast on light red */
  text-decoration: none !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 4px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  font-size: clamp(0.9rem, 0.4vw + 0.8rem, 1rem) !important;
}

/* Subtle underline animation */
header nav a { position: relative !important; }
header nav a::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  background: transparent;
  transition: background-color .2s ease;
}
header nav a:hover::after { background: rgba(92, 11, 22, 0.35); }

header nav a:hover {
  background-color: rgba(92, 11, 22, 0.08) !important;
}

/* Remove pill/gradient backgrounds in header areas from the builder (but do NOT reset the main pill container) */
header nav,
header nav .w-box,
header .w-navigation-menu,
header .w-menu-list {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Explicit grid placement to keep consistent layout across pages */
header > .w-box > a.w-link[href="/"] {
  grid-column: 1 !important;
  justify-self: start !important;
}

header > .w-box > nav[aria-label="main"],
header > .w-box > nav[aria-label="Main"] {
  grid-column: 2 !important;
  justify-self: center !important;
}

header > .w-box > .cx7wr1k,
header > .w-box > .w-box.c9r9mrl {
  grid-column: 3 !important;
  justify-self: end !important;
}

/* Contact page and builder variant: inner wrapper carries the actual items */
header > .w-box > .w-box {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: 1rem !important;
  /* Clear any builder-injected background so the outer pill gradient is consistent */
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

header > .w-box > .w-box > a.w-link[href="/"] { grid-column: 1 !important; justify-self: start !important; }
header > .w-box > .w-box > nav[aria-label="main"],
header > .w-box > .w-box > nav[aria-label="Main"] { grid-column: 2 !important; justify-self: center !important; }
header > .w-box > .w-box > .cx7wr1k,
header > .w-box > .w-box > .w-box.c9r9mrl { grid-column: 3 !important; justify-self: end !important; }

/* Stronger specificity to ensure the pill bar is applied on all pages (including /contact/) */
header > .w-box.w-box {
  background: linear-gradient(135deg, #f6b3bb 0%, #ea8d9c 100%) !important;
  border: 2px solid #b74c5c !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  overflow: hidden !important;
}

/* Force centered nav area across all pages */
header nav {
  justify-self: center !important;
  margin: 0 auto !important;
  align-self: center !important;
}

/* Ensure CTA area aligns to the right consistently */
header .cx7wr1k,
header .w-box.c9r9mrl { /* builder variations */
  justify-self: end !important;
}

/* Contact page: target the exact inner header wrapper provided to normalize look */
header > .w-box.czqp0ty.c68lcfz.c1u7vjz5.c17o56ah.c1t5ubv3.c1pp8ew3.cfbot7s.c1gnlphr.cqjjpl5.c1w52c10.c89kci7.c1irb2qz.cqmszsm.c113bk1q.c93yxrb.c1gkt8su.c1gyurpw.co4n1fn.c1pxvbpn.c1c7l5p1.cb9lu69.cc5zgu1.c17oxcpk.c6lvel7.cixw8g3.c1fppp70.c1bybuce {
  background: linear-gradient(135deg, #f6b3bb 0%, #ea8d9c 100%) !important;
  border: 2px solid #b74c5c !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  overflow: hidden !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: 1rem !important;
}

/* Ultra-specific backup in case the wrapper is not a direct child (any depth under header) */
header .w-box.czqp0ty.c68lcfz.c1u7vjz5.c17o56ah.c1t5ubv3.c1pp8ew3.cfbot7s.c1gnlphr.cqjjpl5.c1w52c10.c89kci7.c1irb2qz.cqmszsm.c113bk1q.c93yxrb.c1gkt8su.c1gyurpw.co4n1fn.c1pxvbpn.c1c7l5p1.cb9lu69.cc5zgu1.c17oxcpk.c6lvel7.cixw8g3.c1fppp70.c1bybuce {
  background: linear-gradient(135deg, #f6b3bb 0%, #ea8d9c 100%) !important;
  border: 2px solid #b74c5c !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Ensure text/link color inside the contact pill is high-contrast */
header .w-box.czqp0ty.c68lcfz.c1u7vjz5.c17o56ah.c1t5ubv3.c1pp8ew3.cfbot7s.c1gnlphr.cqjjpl5.c1w52c10.c89kci7.c1irb2qz.cqmszsm.c113bk1q.c93yxrb.c1gkt8su.c1gyurpw.co4n1fn.c1pxvbpn.c1c7l5p1.cb9lu69.cc5zgu1.c17oxcpk.c6lvel7.cixw8g3.c1fppp70.c1bybuce a.w-link {
  color: #5c0b16 !important;
}

/* Hero heading normalization */
main .header-text,
main .w-heading {
  line-height: 1.15 !important;
  letter-spacing: .2px !important;
}

/* Footer normalization */
footer > .w-box {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 2rem !important;
}

/* Apply the same footer container sizing when footer is built with wrapper (.cenasxz) */
.cenasxz > .w-box {
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 2rem !important;
}

/* Footer formatting (centered content & link row) */
footer > .w-box > .w-box { 
  display: flex !important; 
  flex-direction: column !important; 
  align-items: center !important; 
  gap: 1rem !important; 
  text-align: center !important; 
}
/* Same formatting for wrapper-based footer */
.cenasxz > .w-box > .w-box { 
  display: flex !important; 
  flex-direction: column !important; 
  align-items: center !important; 
  gap: 1rem !important; 
  text-align: center !important; 
}
footer .w-box.cdpfl26, 
footer .w-box.c1tyvckp { 
  display: flex !important; 
  gap: 1rem !important; 
  flex-wrap: wrap !important; 
  justify-content: center !important; 
}
/* Wrapper-based footer link rows */
.cenasxz .w-box.cdpfl26, 
.cenasxz .w-box.c1tyvckp { 
  display: flex !important; 
  gap: 1rem !important; 
  flex-wrap: wrap !important; 
  justify-content: center !important; 
}
footer .w-box.cdpfl26 a, 
footer .w-box.c1tyvckp a { 
  text-decoration: none !important; 
}
/* Wrapper-based footer links */
.cenasxz .w-box.cdpfl26 a, 
.cenasxz .w-box.c1tyvckp a { 
  text-decoration: none !important; 
}

footer a,
footer .w-text,
footer .w-paragraph {
  font-family: 'Roboto Slab', serif !important;
  color: var(--brand-brown) !important;
}
/* Wrapper-based footer typography */
.cenasxz a,
.cenasxz .w-text,
.cenasxz .w-paragraph {
  font-family: 'Roboto Slab', serif !important;
  color: var(--brand-brown) !important;
}

/* Contact button styling */
header .w-link[href="/contact"] {
  background: linear-gradient(135deg, #D2691E, #CD853F) !important;
  color: white !important;
  padding: 0.5rem 1.5rem !important;
  border-radius: 25px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: transform 0.2s ease !important;
}

header .w-link[href="/contact"]:hover {
  transform: translateY(-1px) !important;
}

/* Ensure the right-side CTA container aligns right */
header .cx7wr1k { justify-self: end !important; }

/* Pricing section - responsive layout with proper spacing */
.pricing-section {
  padding: 4rem 0 !important;
  background: #fafafa !important;
  min-height: 60vh !important;
}

.pricing-container {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 2rem !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
}

.pricing-card {
  flex: 1 !important;
  max-width: 450px !important;
  min-width: 350px !important;
  background: white !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 12px !important;
  padding: 2.5rem !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  flex-direction: column !important;
}

.pricing-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
  border-color: #D2691E !important;
}

.pricing-card h3 {
  color: #8B4513 !important;
  font-size: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}

.pricing-card .w-text {
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #D2691E !important;
  margin-bottom: 1rem !important;
}

.pricing-card .w-paragraph {
  color: #666 !important;
  margin-bottom: 1.5rem !important;
  line-height: 1.6 !important;
}

.pricing-card .w-list {
  flex-grow: 1 !important;
  margin-bottom: 2rem !important;
}

.pricing-card .w-list-item {
  color: #555 !important;
  margin-bottom: 0.75rem !important;
  padding-left: 1rem !important;
  position: relative !important;
}

.pricing-card .w-list-item:before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  color: #D2691E !important;
  font-weight: bold !important;
}

/* Target specific pricing card classes */
.w-box.czqp0ty.cxserry.cfnuqhr.c1cxclol.c561zl0.c1w52c10.c89kci7.c1irb2qz.cqmszsm.cb4cymk.c6lvel7.chveqhr.pricing-card {
  margin: 0 !important;
}

/* Responsive pricing layout */
@media (max-width: 768px) {
  .pricing-container {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  
  .pricing-card {
    min-width: auto !important;
    max-width: none !important;
  }
}

.pricing-cta {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin-top: 1.5rem !important;
  text-align: center !important;
}

/* Stronger pricing CTA selectors */
.pricing-card .pricing-cta,
.pricing-card .w-box.pricing-cta,
div[class*="pricing-cta"] {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

/* Ensure pricing cards have proper spacing and layout */
.pricing-container .pricing-card {
  margin: 0 !important;
  padding: 2rem !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  background: white !important;
  border: 1px solid #e0e0e0 !important;
}

/* Use simple bullets (no checkmarks) in pricing lists */
.pricing-card .w-list,
.pricing-card ul.w-list {
  list-style: disc !important;
  padding-left: 1.25rem !important;
}
.pricing-card .w-list .w-list-item,
.pricing-card .w-list li.w-list-item {
  list-style: disc !important;
  display: list-item !important;
  position: static !important;
  padding-left: 0 !important;
}
.pricing-card .w-list .w-list-item::before,
.pricing-card .w-list li.w-list-item::before {
  content: none !important;
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* Nuke any icon elements that might be injected in list items */
.pricing-card .w-list .w-list-item svg,
.pricing-card .w-list .w-list-item [class*="icon"],
.pricing-card .w-list .w-list-item i {
  display: none !important;
}

/* Ensure marker is visible as a simple bullet */
.pricing-card .w-list .w-list-item::marker {
  color: var(--brand-brown) !important;
}

/* Pricing page layout fixes */
.pricing-section {
  padding: 2rem 1rem !important;
}

.pricing-container {
  max-width: 1100px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  gap: 1.5rem !important;
  align-items: stretch !important;
}

@media (max-width: 900px) {
  .pricing-container {
    grid-template-columns: 1fr !important;
  }
}

.pricing-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.pricing-card .pricing-cta,
.pricing-card .w-box.pricing-cta {
  margin-top: auto !important;
}

/* Pricing hero centering (heading + subtext) */
.pricing-hero { 
  text-align: center !important; 
}
.pricing-hero > .w-box, 
.pricing-hero .w-box.c1thxzld { 
  display: grid !important; 
  place-items: center !important; 
  text-align: center !important; 
}
.pricing-hero h1 { 
  margin: 0 0 .5rem 0 !important; 
}
.pricing-hero .w-text { 
  max-width: 60ch !important; 
}

/* Typography updates */
.header-text {
  font-family: 'Space Grotesk', 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.emphasis-text {
  font-family: 'Crimson Text', serif;
  font-weight: 600;
  font-style: italic;
}

.body-text, .footer-text {
  font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
}

/* Hover effects for links */
.nav-link:hover {
  color: #d4a574;
  transition: color 0.3s ease;
  text-decoration: underline;
  text-decoration-color: #d4a574;
  text-underline-offset: 4px;
}

.footer-link:hover {
  color: #b8860b;
  transition: color 0.3s ease;
  opacity: 0.8;
}

/* Mobile responsive navigation */
@media (max-width: 768px) {
  /* Hide hamburger menu */
  .w-button[aria-label="Open mobile menu"] {
    display: none !important;
  }
  
  /* Ensure navigation is visible and properly sized */
  .w-navigation-menu {
    display: block !important;
  }
  
  /* Make title smaller on mobile to give space for navigation */
  .w-link[href="/"] {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
  }
  
  /* Ensure pricing link is visible */
  .w-menu-list {
    display: flex !important;
    flex-wrap: wrap !important;
  }
  
  .w-menu-item {
    display: block !important;
  }
  
  .w-menu-item a {
    font-size: 0.9rem !important;
    padding: 0.5rem !important;
    white-space: nowrap !important;
  }
  
  .pricing-container {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .pricing-card {
    min-width: 100%;
  }
}

/* CTA buttons */
.cta-button,
.pricing-cta a {
  background: linear-gradient(135deg, var(--brand-copper), var(--brand-copper-light)) !important;
  color: #fff !important;
  border: none !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 24px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.cta-button:hover,
.pricing-cta a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Main page layout improvements */
main {
  min-height: calc(100vh - 70px) !important;
}

/* Ensure consistent page structure */
.w-body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

footer {
  margin-top: auto !important;
  background: var(--brand-cream) !important;
  padding: 2rem 0 !important;
  border-top: 1px solid #e5e5e5 !important;
}

/* Pages whose footer is built with a wrapper (home/contact) */
.cenasxz {
  background: var(--brand-cream) !important;
  border-top: 1px solid #e5e5e5 !important;
}

/* Re-apply accessible deeper light red gradient AFTER builder resets */
header > .w-box:not(nav):not(.w-navigation-menu):not(.w-menu-list) {
  background: linear-gradient(135deg, #f6b3bb 0%, #ea8d9c 100%) !important;
  border: 2px solid #b74c5c !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
}

/* Stable nav styling using a dedicated class present on all pages */
header > .site-nav {
  background: linear-gradient(135deg, #f6b3bb 0%, #ea8d9c 100%) !important;
  border: 2px solid #b74c5c !important;
  border-radius: 28px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
  overflow: hidden !important;
  position: relative !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 2rem !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: 1rem !important;
}

header > .site-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #f6b3bb 0%, #ea8d9c 100%) !important;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}

header > .site-nav > * { position: relative; z-index: 1; }

/* Clear builder backgrounds inside nav on all pages */
header > .site-nav > .w-box {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  column-gap: 1rem !important;
}

/* Grid placement inside stable nav */
header > .site-nav > a.w-link[href="/"] { grid-column: 1 !important; justify-self: start !important; }
header > .site-nav > nav[aria-label="main"],
header > .site-nav > nav[aria-label="Main"] { grid-column: 2 !important; justify-self: center !important; }
header > .site-nav > .cx7wr1k,
header > .site-nav > .w-box.c9r9mrl { grid-column: 3 !important; justify-self: end !important; }

/* Link color inside stable nav */
header > .site-nav a.w-link,
header > .site-nav .w-menu-list a.w-link { color: #5c0b16 !important; }

/* Focus visibility for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--brand-copper) !important;
  outline-offset: 2px !important;
  border-radius: 6px !important;
}