/* ============================================================================
   site.css: the Official design's SITE CHROME (stand-restructure-spec.md).

   Styles the design-owned site header / breadcrumbs / footer views
   (addons/official/views/site/*). Everything references design-tokens.css
   (type + spacing scales, palette incl. the round-3 amber/navy); no raw hex.
   Ports with the design to Joomla/WP; the CI4 stand toolbar is NOT here
   (demo-stand.css, stand-only).
   ============================================================================ */

/* Shared page shell width (header rows, breadcrumbs, footer grid). */
.fwre-site-shell { max-width: 1280px; margin: 0 auto; padding: 0 var(--fwre-space-20); }

/* ── Utility bar ── */
.fwre-site-utility {
    /* Reference header draws NO border lines: the grey utility bar meets the white
       brandbar bare, and the brandbar meets the page bare (round 20 owner review). */
    background: var(--fwre-grey-light);
    font-size: var(--fwre-text-sm);
    line-height: var(--fwre-lh-sm);
    font-family: var(--fwre-font);
}
.fwre-site-utility-row { display: flex; align-items: center; justify-content: space-between; gap: var(--fwre-space-16); min-height: 32px; }
.fwre-site-utility-contacts { display: flex; align-items: center; gap: var(--fwre-space-18); }
.fwre-site-utility-contacts a { display: inline-flex; align-items: center; gap: var(--fwre-space-5); color: var(--fwre-grey-dark-deep); text-decoration: none; }
.fwre-site-utility-contacts a:hover { color: var(--fwre-green); }
.fwre-site-utility-social { display: flex; align-items: center; gap: var(--fwre-space-10); }
.fwre-site-utility-social a { color: var(--fwre-grey); display: inline-flex; }
.fwre-site-utility-social a:hover { color: var(--fwre-green); }

/* ── Brand row + menu ── */
/* Reference header metrics (PNG-sampled, round 21): utility bar 32px, brandbar 88px,
   and a soft ~14px shadow fading below the header instead of a border line. The header
   needs its own stacking context or the following main's opaque background paints over
   the shadow. */
.fwre-site-header {
    background: var(--fwre-white);
    font-family: var(--fwre-font);
    position: relative; z-index: 2;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .07);
}
.fwre-site-brandbar { display: flex; align-items: center; justify-content: space-between; gap: var(--fwre-space-20); min-height: 88px; }
.fwre-site-brand { display: inline-flex; align-items: center; gap: var(--fwre-space-10); text-decoration: none; color: var(--fwre-black); flex-shrink: 0; }
.fwre-site-brand-logo { width: 42px; height: 42px; border-radius: var(--fwre-radius-lg); display: block; }
.fwre-site-brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.fwre-site-brand-name { font-size: var(--fwre-text-3xl); font-weight: var(--fwre-weight-semibold); letter-spacing: -0.01em; }
.fwre-site-brand-tagline { font-size: var(--fwre-text-sm); color: var(--fwre-grey-dark-deep); }

.fwre-site-menu > li > a {
    font-size: var(--fwre-text-md);
    font-weight: var(--fwre-weight-medium);
    color: var(--fwre-black);
    text-transform: none;
    min-height: 72px;
}
.fwre-site-menu > li > a:hover,
.fwre-site-menu > li.fwk-active > a { color: var(--fwre-green); }
/* Closed by default (FOUC guard, docs/engineering-gotchas.md "FOUC"): fwk-navbar-dropdown carries no
   .fwk-drop class, so it never inherited fw-uikit's baseline .fwk-drop{display:none} -- it rendered
   fully expanded (every dropdown panel open at once) for one paint before the fwk-navbar JS component
   attached and added .fwk-open (the class it actually toggles). Same root cause + fix as .fwre-ms-drop/
   .demo-stand-about/.fwre-social-dropdown/.demo-atb-dd-menu. */
.fwre-site-menu .fwk-navbar-dropdown { display: none; }
.fwre-site-menu .fwk-navbar-dropdown.fwk-open { display: block; font-family: var(--fwre-font); border-radius: var(--fwre-radius-card); box-shadow: var(--fwre-shadow); }
/* Flat single-column dropdowns (e.g. "FW Real Estate") get no fwk-navbar-dropdown-width-N class
   from fwre_render_navbar(), so they fall back to the foundation's fixed 200px while their
   nowrap items are wider - let the panel grow to its content instead. Multi-column dropdowns
   keep their width classes untouched. */
.fwre-site-menu .fwk-navbar-dropdown:not([class*="fwk-navbar-dropdown-width-"]) { width: max-content; min-width: 200px; max-width: 340px; }
/* Design captions in the Showcases dropdown: official green (distinct from the black links). */
.fwre-site-menu .fwk-nav-header { color: var(--fwre-menu-caption); font-size: var(--fwre-text-xs); font-weight: var(--fwre-weight-semibold); }
.fwre-site-menu .fwk-navbar-dropdown-nav > li > a { color: var(--fwre-black); font-size: var(--fwre-text-base); white-space: nowrap; }
.fwre-site-menu .fwk-nav-header { white-space: nowrap; }
.fwre-site-menu .fwk-navbar-dropdown-nav > li > a:hover,
.fwre-site-menu .fwk-navbar-dropdown-nav > li.fwk-active > a { color: var(--fwre-green); }

/* The amber Download CTA (menu button). The li must be a flex container for the pill to
   center on the menu line (align-self on the anchor is inert against a block li). */
.fwre-site-menu > li { display: flex; align-items: center; }
.fwre-site-menu .fwre-nav-cta,
.fwre-nav-cta {
    display: inline-flex;
    align-items: center;
    align-self: center;
    padding: var(--fwre-space-8) var(--fwre-space-20);
    margin-left: var(--fwre-space-8);
    background: var(--fwre-amber);
    color: var(--fwre-on-amber) !important;
    font-size: var(--fwre-text-md);
    font-weight: var(--fwre-weight-semibold);
    border-radius: var(--fwre-radius-cta);
    text-transform: none;
    min-height: 0;
    transition: filter var(--fwre-fast) var(--fwre-ease);
}
.fwre-nav-cta:hover { filter: brightness(1.06); text-decoration: none; }

.fwre-site-menu-toggle { background: none; border: 0; color: var(--fwre-black); cursor: pointer; padding: var(--fwre-space-6); }
.fwre-site-offcanvas { font-family: var(--fwre-font); }

/* ── Page body ──
   The product site is LIGHT-FIXED this chunk (the Figma dark variant rides the dark-theme
   token group chunk); the stand's theme toggle themes the toolbar, not the site. */
.fwre-site-main { background: var(--fwre-white); color: var(--fwre-black); font-family: var(--fwre-font); padding-bottom: var(--fwre-space-40); }
.fwre-site-page { padding-top: var(--fwre-space-6); padding-bottom: var(--fwre-space-40); }
.fwre-page-title {
    font-size: var(--fwre-text-hero);
    line-height: var(--fwre-lh-hero);
    font-weight: var(--fwre-weight-semibold);
    color: var(--fwre-black);
    letter-spacing: -0.02em;
    margin: var(--fwre-space-10) 0 var(--fwre-space-18);
}
/* Under the stand the page IS the plain white product page (like live): the demo-stage
   card chrome (border/shadow/radius/padding from demo-pages.css + design-theme.css)
   neutralizes; the stage remains only as the product container element. */
body.demo-stand-layout .demo-stage,
body.demo-stand-layout .demo-stage.ds-skin,
body.demo-stand-layout .demo-stage:has(#fwre) { /* :has(#fwre) matches design-theme.css's ID-weight selector */
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
}

/* ── Breadcrumbs ── */
.fwre-site-crumbbar { background: var(--fwre-white); }   /* part of the light site, not the stand body */
.fwre-site-breadcrumbs { margin: 0; padding: var(--fwre-space-14) 0 var(--fwre-space-28); font-family: var(--fwre-font); font-size: var(--fwre-text-sm); }
.fwre-site-breadcrumbs a { color: var(--fwre-grey-dark-deep); }
.fwre-site-breadcrumbs a:hover { color: var(--fwre-green); text-decoration: none; }
.fwre-site-breadcrumbs > li > span { color: var(--fwre-black); }

/* ── Footer (the official reference dark grey, pixel-sampled #5A5A5A from the
   "FWRE official design" PNGs 2026-07-14; supersedes the Figma navy round) ── */
/* No margin above the footer: it would expose the stand's dark body background as a black
   bar (round 20). The white gap the reference shows comes from .fwre-site-main's padding. */
.fwre-site-footer { background: var(--fwre-footer-bg); color: var(--fwre-footer-ink); font-family: var(--fwre-font); font-size: var(--fwre-text-base); line-height: var(--fwre-lh-base); }
.fwre-site-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(2, 1fr); gap: var(--fwre-space-26); padding-top: var(--fwre-space-40); padding-bottom: var(--fwre-space-30); } /* refit P3: brand + the 2 nav-derived columns (Buy / Explore) */
.fwre-site-footer-brand { display: inline-flex; align-items: center; gap: var(--fwre-space-8); font-size: var(--fwre-text-xl); font-weight: var(--fwre-weight-semibold); color: var(--fwre-footer-heading); margin-bottom: var(--fwre-space-12); }
.fwre-site-footer-brand img { width: 30px; height: 30px; border-radius: var(--fwre-radius); }
.fwre-site-footer-about p { color: var(--fwre-footer-ink); margin: 0; }
.fwre-site-footer-about a { color: var(--fwre-footer-heading); }
.fwre-site-footer-col h4 { color: var(--fwre-footer-heading); font-size: var(--fwre-text-md); font-weight: var(--fwre-weight-semibold); margin: 0 0 var(--fwre-space-12); }
.fwre-site-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fwre-space-6); }
.fwre-site-footer-col a { color: var(--fwre-footer-ink); text-decoration: none; }
.fwre-site-footer-col a:hover { color: var(--fwre-footer-heading); }
.fwre-site-footer-contact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--fwre-space-6); }
.fwre-site-footer-contact li { display: flex; align-items: baseline; gap: var(--fwre-space-8); color: var(--fwre-footer-ink); }
.fwre-site-footer-contact a { color: var(--fwre-footer-ink); text-decoration: none; }
.fwre-site-footer-contact a:hover { color: var(--fwre-footer-heading); }
.fwre-site-footer-contact [fwk-icon] { color: var(--fwre-footer-ink); flex-shrink: 0; }
.fwre-site-footer-social { display: flex; flex-wrap: wrap; gap: var(--fwre-space-10); align-content: flex-start; margin-top: var(--fwre-space-16); }
.fwre-site-footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fwre-footer-social); color: var(--fwre-white); transition: background var(--fwre-fast) var(--fwre-ease); }
.fwre-site-footer-social a:hover { background: var(--fwre-green); color: var(--fwre-white); }
.fwre-site-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .15); padding: var(--fwre-space-14) 0; color: var(--fwre-footer-ink); font-size: var(--fwre-text-sm); }
.fwre-site-footer-bottom-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--fwre-space-8) var(--fwre-space-26); flex-wrap: wrap; }
.fwre-site-footer-bottom-row a { color: var(--fwre-footer-heading); }
/* refit P3: the compliance line (Equal Housing mark + listing disclaimer) under the copyright row */
.fwre-site-footer-compliance { display: flex; justify-content: space-between; align-items: center; gap: var(--fwre-space-8) var(--fwre-space-26); flex-wrap: wrap; margin-top: var(--fwre-space-8); opacity: .85; }
.fwre-site-footer-eho { display: inline-flex; align-items: center; gap: var(--fwre-space-8); }
.fwre-eho-mark { flex-shrink: 0; }

/* ── Responsive ── */
@media (max-width: 959px) {
    .fwre-site-nav { display: none; }           /* menu moves to the off-canvas toggle */
    .fwre-site-utility { display: none; }
    .fwre-site-brandbar { min-height: 60px; }
    .fwre-site-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
    .fwre-site-footer-grid { grid-template-columns: 1fr; }
    /* The native UIkit slider's `fwk-slider-container-offset` bleeds negative horizontal margin
       past its own box (shadow/depth room for the card elevation on hover) - harmless on desktop
       where the page has side margin to absorb it, but on a narrow viewport with little outer
       margin left it pushed the document past the viewport edge. Keep the vertical bleed (still
       needed for the card shadow), drop the horizontal bleed on mobile. */
    .fwre-mod-latest-slider .fwk-slider-container-offset { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}