/* =====================================================
   STYLES.CSS (PAGE + LEGACY LAYER)

   Rules:
   - No primitives (use components-v2.css for that)
   - No duplicate UI systems
   - Page-specific styling only
   - Legacy classes gradually reduced over time

   Depends on:
   - tokens.css
   - layout.css
   - components-v2.css
===================================================== */

/* =====================================================
   LEGACY BRIDGE (TEMPORARY)
   Map old systems → new system conceptually
===================================================== */

.package-btn { }
.option-card { }
.control-card { }
.control-tab { }
.guest-option { }
.date-btn { }
.tab-btn { }
.estimator-toggle { }
.result-box { }

/* =====================================================
   PAGE STRUCTURE
===================================================== */

.page {
  width: 100%;
  min-height: 100vh;
}

/* =========================================
   EYEBROW LABEL TEXT
   Purpose:
   - Small uppercase section label styling
   - Used above headings and content sections
========================================= */
p.eyebrow,
span.eyebrow,
.eyebrow {
  color: var(--eyebrow-color);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
}
.eyebrow--caps {
  font-size: 0.9rem;  
  text-transform: uppercase;
}

/* FULL-BLEED BACKGROUND SECTION
   - Breaks out of centered container
   - Extends edge-to-edge
*/
.bleed-section {
  padding: 15px 15px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: var(--surface-lavender);   /* was #f2f2f2 */
}

/* Optional background helper */
.bleed-section--lavender-light {
  background: var(--surface-lavender-light);   /* was #f9f9f9 */
}
.bleed-section--secondary {
  background: var(--surface-accent-light);
}  /* was #111 */
.bleed-section--border {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);  
}


/* =====================================================
   


/* =====================================================
   Add “no-crop / full image” variant
===================================================== */
.img--contain {
  aspect-ratio: auto;
}

.img--contain > img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* =====================================================
   UTILITIES
===================================================== */

.hidden {
  display: none !important;
}

.text-center {
  text-align: center;
}

.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }


/* =====================================================
   TEMPLATE SYSTEM
===================================================== */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page__content {
  flex: 1;
}



/* =====================================================
   FOOTER
===================================================== */

.footer {
  padding: var(--space-7) 0;
  background: var(--surface-alt);
}

.footer__inner {
  width: min(1200px, 92%);
  margin: 0 auto;
  display: grid;
  gap: var(--space-3);
}


   /* NORMALIZED HEADER CSS (REPLACES ALL chateau-* SYSTEMS) */
.header {
  width: 100%;
  position: relative;
  z-index: 50;
}

.header__topbar {
  width: 100%;
  background: var(--surface-accent);
  color: var(--text-inverse);
  padding: 10px 0;
}

.header__inner {
  width: min(1400px, 92%);
  margin: 0 auto;

  display: grid;
  grid-template-columns: 220px 1fr 320px;
  align-items: center;
  gap: var(--space-5);
}

.header__logo img {
  max-width: 200px;
  height: auto;
  display: block;
}

.header__center {
  text-align: center;
}

.header__right {
  text-align: right;
}

.nav-wrapper {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);

  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__item {
  position: relative;
}

.nav__link {
  display: inline-flex;
  padding: 10px 12px;

  text-decoration: none;
  color: var(--text);
  font-weight: 500;

  transition: color 0.2s ease;
}

.nav__link:hover {
  color: var(--accent);
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;

  min-width: 220px;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);

  box-shadow: var(--shadow-md);

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);

  transition: all 0.2s ease;

  z-index: 1000;
}

.nav__item:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text);
}

.nav__dropdown a:hover {
  background: var(--surface-lavender-light);
  color: var(--brand-700);
}

@media (max-width: 900px) {

  .header__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-3);
  }

  .header__right {
    display: none;
  }

  .nav {
    flex-wrap: wrap;
    gap: 6px;
  }
}

.progress-container {
  width: 100%;
  height: 10px;
  background: var(--surface-alt);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background: var(--accent);
  transition: width 0.3s ease;
}

/* SCROLL TO TOP BUTTON */
.scroll-top-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--surface-accent);        /* was #499FAF */
  color: var(--text-inverse);    /* was #fff */
  font-size: 18px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  z-index: 9999;
}

.scroll-top-btn.show {
  opacity: 1;
  visibility: visible;
}

/* =========================
   NEW DESIGN SYSTEM TOKENS
   (safe to add, non-breaking)
   ========================= */

:root {

  /* =========================
     1. BASE COLOR TOKENS
     (raw palette — never used directly in components)
     ========================= */

  /* Sage */
  --color-sage: rgba(107, 143, 113, 1);
  --color-sage-light: rgba(127, 165, 138, 1);
  --color-sage-dark: rgba(79, 111, 88, 1);

  --color-sage-bg-subtle: rgba(107, 143, 113, 0.08);
  --color-sage-bg-hover: rgba(107, 143, 113, 0.14);

  /* Purple */
  --color-purple: rgba(109, 91, 166, 1);
  --color-purple-light: rgba(138, 123, 190, 1);
  --color-purple-dark: rgba(75, 63, 122, 1);

  --color-purple-bg-subtle: rgba(109, 91, 166, 0.08);
  --color-purple-bg-hover: rgba(109, 91, 166, 0.14);

  /* Neutrals */
  --color-surface: rgba(244, 241, 236, 1);
  --color-surface-dark: rgba(31, 27, 36, 1);

  --color-text: rgba(31, 27, 36, 1);
  --color-text-inverse: rgba(244, 241, 236, 1);

  --color-border: rgba(31, 27, 36, 0.12);



  /* =========================
     2. SEMANTIC TOKENS
     (what components SHOULD use)
     ========================= */

  --surface: var(--color-surface);
  --surface-dark: var(--color-surface-dark);

  --text: var(--color-text);
  --text-inverse: var(--color-text-inverse);

  --primary: var(--color-sage);
  --primary-hover: var(--color-sage-dark);

  --secondary: var(--color-purple);

  --border: var(--color-border);
}


/* =========================
     MOBILE
     (what components SHOULD use)
     ========================= */
@media (max-width: 480px) {

  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

}

@media (max-width: 480px) {

  .header-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 480px) {

  .site-nav__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

}

@media (max-width: 480px) {

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 768px) {

  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-4);
  }

}

@media (max-width: 768px) {

  .site-header__logo {
    max-width: 220px;
    width: 100%;
    height: auto;
  }

}

@media (max-width: 768px) {

  .site-header__trustline {
    font-size: 0.875rem;
    line-height: 1.4;
  }

}

@media (max-width: 768px) {

  .site-nav__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    justify-items: center;
  }

}

@media (max-width: 768px) {

  .c-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }

}

.media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .site-nav__list {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;

    gap: var(--space-5);

    white-space: nowrap;
  }
}

@media (max-width: 768px) {

  .site-nav__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--space-2);

    justify-items: center;

    padding: var(--space-2);
  }

  .site-nav__item {
    width: 100%;
    justify-content: center;
  }

}

@media (max-width: 768px) {

  .site-nav__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: var(--space-2);

    justify-items: center;

    padding: var(--space-2);
  }

  .site-nav__item {
    width: 100%;
    justify-content: center;
  }

}

.site-header__inner {
  width: min(1400px, 92%);

  display: grid;

  grid-template-columns:
    220px
    1fr
    320px;
}

@media (max-width: 768px) {

  .site-header__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .site-header__left,
  .site-header__center,
  .site-header__right {
    align-items: center;
  }

}

@media (max-width: 768px) {

  .c-grid--6,
  .c-grid--5,
  .c-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 768px) {

  .site-header__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .site-header__left,
  .site-header__center,
  .site-header__right {
    align-items: center;
  }

  .site-nav__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    white-space: normal;
    flex-wrap: wrap;
  }

}

.media,
figure {
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .c-grid--6,
  .c-grid--5,
  .c-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}