/* ============================================================
   Rove — Brand tokens
   Master + secondary palette per Staburn/Rove brand guidelines PDF.
   Note: the homepage hero/card greens below are carried forward
   exactly from Hayden's approved mockup (#1B3629 / #7A9A8B / #2D5A45),
   which read slightly brighter than the PDF's PMS 627 (#11322C) —
   flagging for a quick brand sign-off, not blocking on it.
   ============================================================ */
:root {
  /* Mockup-approved greens (hero, nav, cards) */
  --brand-forest: #1b3629;
  --brand-sage: #7a9a8b;
  --brand-sage-light: #ebf0ed;
  --brand-accent: #2d5a45;
  --bg-light: #f6f8f7;

  /* Full brand PDF palette — available for new sections (Location, Developer, etc.) */
  --brand-pms627: #11322c; /* Forest (PDF master) */
  --brand-pms359: #7ec579; /* Bright green (PDF master) */
  --brand-pms557: #85ae9a; /* Sage (PDF master) */
  --brand-sand: #c8bc9f; /* PMS 453 */
  --brand-terracotta: #a05229; /* PMS 7586 */
  --brand-slate: #577180; /* PMS 5405 */
  --brand-walnut: #7e6956; /* PMS 7531 */
  --brand-tint: #e3d5cd; /* PMS 7604 */

  --ink: #1d1d1f;
  --ink-muted: #6e6e73;

  /* Typography
     Cabernet and Helvetica are both pending a webfont license (see
     Rove_Content_Tracker.xlsx > Homepage & Brand Assets). Rather than
     self-hosting a substitute font file — which this build environment
     can't download anyway — the placeholders below lean on fonts already
     installed on the visitor's device: Georgia (accent/editorial serif,
     standing in for Cabernet) and the system UI sans stack (body, standing
     in for Helvetica — note Helvetica/Arial are listed as OS fallbacks
     here, not embedded, so there's no licensing question). Swap these two
     variables for real self-hosted fonts the moment licensing clears;
     nothing else in the CSS needs to change. */
  --font-display: 'Walkway Black', Georgia, serif;
  --font-heading: 'Walkway Bold', Georgia, serif;
  --font-condensed: 'Walkway Condensed Bold', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-accent: Georgia, 'Times New Roman', serif;

  /* Motion — short, physical, never gratuitous */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;

  /* Shared left/right inset for every full-bleed section (nav, hero,
     .container) so their content lines up at any viewport width. Same
     math .container already does via max-width:1320px + margin:auto —
     expressed here as a single padding value so full-bleed backgrounds
     (nav bar, hero) can use it directly without an extra wrapper div.
     Below 1320px+40px of viewport width it's just the 20px edge padding;
     above that it grows to keep content centered in the 1320px column. */
  --content-inset: max(20px, calc((100% - 1320px) / 2 + 20px));
}

/* ============================================================
   Self-hosted brand fonts (cleared: fsType 0, unrestricted)
   ============================================================ */
@font-face {
  font-family: 'Walkway Black';
  src: url('../fonts/Walkway-Black.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Walkway Bold';
  src: url('../fonts/Walkway-Bold.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Walkway Condensed Bold';
  src: url('../fonts/Walkway-CondensedBold.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}

/* ============================================================
   Reset & base
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-light);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding-inline: 20px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #fff;
  color: var(--brand-forest);
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* ============================================================
   Scroll reveal — subtle fade/slide, respects reduced motion.
   JS toggles .is-visible; see BaseLayout's inline script.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-standard),
    transform var(--duration-slow) var(--ease-standard);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Shared nav — every page uses one of two variants:
   - .nav-bar--overlay: transparent/gradient, absolutely positioned
     over a full-bleed hero (homepage, unit pages with hero media).
     Must be nested inside a position:relative hero container.
   - .nav-bar--solid: opaque brand-forest bar, sits in normal flow
     (floorplan-type pages, or any page without a full hero).
   ============================================================ */
.nav-bar {
  width: 100%;
  padding-block: 30px;
  /* Was a flat 80px — matched the page's headings only around the
     ~1360-1440px sweet spot. On anything wider (logo sat well left of
     "Shop The Homes" etc.) or narrower (logo sat right of them) it drifted
     out of alignment. --content-inset is the same math .container already
     uses, so the logo now lines up with every heading at any width. */
  padding-inline: var(--content-inset);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}
.nav-bar--overlay {
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(15, 30, 23, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
}
.nav-bar--solid {
  position: relative;
  background: var(--brand-forest);
}
.brand-logo-wrap {
  display: block;
  /* Was 96px — that matched the old logo file, which had a large built-in
     transparent margin around the wordmark. Once that margin was cropped
     off (so the logo aligns flush with the page headings), the same
     pixel height rendered the actual glyph much bigger. Halved to land
     back at the intended visual size. */
  height: 48px;
  text-decoration: none;
}
.brand-logo-img {
  height: 100%;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-link {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.nav-link:hover {
  color: #fff;
}
.nav-cta {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--duration-base) var(--ease-standard);
}
.nav-cta:hover {
  background: #fff;
  color: var(--brand-forest);
}

/* ---------------- MOBILE NAV (hamburger + dropdown) ----------------
   Hidden entirely above 640px — .nav-links shows the real nav inline
   there. Below 640px, .nav-link items are hidden (existing rule further
   down) and this toggle button + dropdown panel take over instead, so
   Floorplans/Location/Developer stay reachable on mobile. */
.nav-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-menu-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}
.nav-menu-toggle[aria-expanded='true'] .nav-menu-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-menu-toggle[aria-expanded='true'] .nav-menu-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-menu-toggle[aria-expanded='true'] .nav-menu-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
.nav-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  background: var(--brand-forest);
  padding: 4px 24px 12px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
  z-index: 20;
}
.nav-mobile-link {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.nav-mobile-link:hover {
  color: #fff;
}
.nav-mobile-link--cta {
  color: var(--brand-forest);
  background: #fff;
  border-top: none;
  border-radius: 30px;
  text-align: center;
  font-weight: 600;
  padding: 12px 0;
  margin-top: 12px;
}
.nav-mobile-link--cta:hover {
  color: var(--brand-forest);
  background: var(--brand-sage-light);
}

/* ============================================================
   Shared footer
   ============================================================ */
.site-footer {
  background: var(--brand-forest);
  color: rgba(255, 255, 255, 0.75);
  padding: 60px 20px 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 32px;
  align-items: start;
  max-width: 1320px;
  margin: 0 auto;
}
.footer-logo-link {
  display: block;
  width: fit-content;
}
.footer-logo-img {
  display: block;
  /* Was 72px — halved for the same reason as .brand-logo-wrap above. */
  height: 36px;
  width: auto;
  margin-bottom: 12px;
}
.footer-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-info-block p {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.footer-info-block a {
  color: inherit;
  text-decoration: none;
}
.footer-info-block a:hover {
  color: #fff;
  text-decoration: underline;
}
.footer-info-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 4px;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 14px;
}
.footer-links a:hover {
  color: #fff;
}
.footer-disclaimer {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}
.footer-partner-logos {
  max-width: 1320px;
  margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  gap: 40px;
}
.footer-partner-logos img {
  /* Both logos matched to the same height regardless of their own source
     file's aspect ratio, so they read as equally weighted — same idea as
     .footer-logo-img / .brand-logo-img above. */
  height: 22px;
  width: auto;
  display: block;
}

/* ============================================================
   Shared section header + breadcrumb (used on floorplan/unit pages)
   ============================================================ */
.section-header {
  text-align: center;
  margin-bottom: 56px;
}
.section-header h2 {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  color: var(--brand-forest);
  letter-spacing: 0.28em;
}
.section-header p {
  font-size: 19px;
  color: var(--ink-muted);
  margin-top: 8px;
}
.breadcrumb {
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 16px;
}
.breadcrumb a {
  color: var(--brand-accent);
  text-decoration: none;
  font-weight: 600;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

/* ============================================================
   Status badges — shared across cards, unit headers, filter bars
   ============================================================ */
.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  background-color: var(--brand-sage-light);
  color: var(--brand-forest);
  white-space: nowrap;
  display: inline-block;
}
.badge.low-stock {
  background-color: #fef2f2;
  color: #991b1b;
}
.badge.sold {
  background-color: #f0f0f0;
  color: #6e6e73;
}

/* ============================================================
   Media placeholder block — used anywhere real photography/video
   isn't loaded yet. Never a broken <img>/<video> tag.
   ============================================================ */
.media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: var(--brand-sage-light);
  color: var(--brand-sage);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 15px;
}

/* ============================================================
   Shared responsive rules (nav + footer, used on every page)
   ============================================================ */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .nav-bar {
    padding: 20px 24px;
  }
  .nav-links {
    gap: 14px;
  }
  .nav-link {
    display: none;
  }
  /* Contact Us moves into the hamburger menu below — a second standalone
     button next to the toggle just clogs up the mobile header. */
  .nav-cta {
    display: none;
  }
  .nav-menu-toggle {
    display: flex;
  }
  .nav-mobile-menu.is-open {
    display: flex;
  }
}

/* ============================================================
   Shared solid button — for CTAs on light backgrounds (floorplan
   and unit pages). The homepage hero has its own .btn-primary/
   .btn-secondary in home.css, tuned for its dark video background.
   ============================================================ */
.btn-forest {
  display: inline-block;
  background: var(--brand-forest);
  color: #fff;
  padding: 16px 32px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.btn-forest:hover {
  transform: scale(1.02);
  background: var(--brand-accent);
}

/* ============================================================
   Cookie consent banner — see partials.mjs (renderCookieBanner) for the
   markup and script.js for the show/hide + remembered-choice logic.
   Rendered on every page via layout.mjs, so this lives in global.css
   rather than a page-specific stylesheet.
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  background: var(--brand-forest);
  color: #fff;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}
.cookie-banner[hidden] {
  display: none;
}
.cookie-banner-text {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  max-width: 640px;
  margin: 0;
}
.cookie-banner-text a {
  color: #fff;
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
.cookie-banner-decline,
.cookie-banner-accept {
  border-radius: 30px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.cookie-banner-decline {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.cookie-banner-decline:hover {
  background: rgba(255, 255, 255, 0.2);
}
.cookie-banner-accept {
  background: #fff;
  color: var(--brand-forest);
}
.cookie-banner-accept:hover {
  transform: scale(1.02);
  background: var(--brand-sage-light);
}
@media (max-width: 640px) {
  .cookie-banner {
    justify-content: flex-start;
    text-align: left;
    padding: 18px 20px;
  }
  .cookie-banner-actions {
    width: 100%;
  }
  .cookie-banner-decline,
  .cookie-banner-accept {
    flex: 1;
    text-align: center;
  }
}