/* ============================================================================
   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 the packaged hosts; the 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); }
/* Keep every menu item on ONE line and inside the panel. The labels are translated, so a language can
   easily produce a much longer string than the English the column widths were sized for (Spanish
   "Modulo de diseno en cualquier lugar" ran past the panel's right edge). `overflow`/`text-overflow`
   need a block box to act on - they do nothing on an inline <a> - hence display:block; and min-width:0
   lets the item shrink inside the flex/grid column instead of forcing it wider. */
.fwre-site-menu .fwk-navbar-dropdown-nav > li > a {
    color: var(--fwre-black);
    font-size: var(--fwre-text-base);
    white-space: nowrap;
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fwre-site-menu .fwk-navbar-dropdown-nav > li { min-width: 0; }
.fwre-site-menu .fwk-nav-header { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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(4, 1fr); gap: var(--fwre-space-26); padding-top: var(--fwre-space-40); padding-bottom: var(--fwre-space-30); }
.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); }

/* ── 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; }
    /* Below this width the brandbar carries exactly two things -- the brand and the menu button -- and
       the brand must yield to the button rather than the other way round. `flex-shrink: 0` above is
       right where there is room; at 320px the brand measured 276px inside a 280px content box, so the
       button hung 8px past the viewport, and the site header is the first block on every page, so that
       widens the DOCUMENT and every page scrolls sideways (the same failure as the stand's, #781, one
       layer down). `min-width: 0` is the part that actually works: flex-shrink alone does nothing
       against a text node that cannot wrap, on the brand or on the column inside it. The button keeps
       `flex-shrink: 0` so it is the brand that gives, and it is what the visitor needs to reach the
       menu at all. */
    .fwre-site-brand { flex-shrink: 1; min-width: 0; }
    .fwre-site-brand-text { min-width: 0; }
    .fwre-site-brand-name,
    .fwre-site-brand-tagline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fwre-site-brand-logo { flex-shrink: 0; }
    .fwre-site-menu-toggle { flex-shrink: 0; }
}
@media (max-width: 639px) {
    .fwre-site-footer-grid { grid-template-columns: 1fr; }
}