/* ============================================================================
   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); }
/* 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; }
}
@media (max-width: 639px) {
    .fwre-site-footer-grid { grid-template-columns: 1fr; }
}