/* =====================================================================
   site_chrome.css — the shared header and footer, site-wide

   Founder ruling 2026-08-22 (bmad-output/redesign-home-b/decisions.md §1):
   the Homepage B design's header and footer become base_landing.html's, so
   every marketing page wears them. Values are renderVals() from
   dc/Wayfable-Homepage-B.dc.html, mobile first, desktop from 768px.

   ⛔ EVERY SELECTOR NAMES AN sc- CLASS (contract §4.6), and the sheet sets no
   background on either bar: the design's chrome is transparent and shows
   the page behind it — #FDF8F0 on /, each page's own cream elsewhere.
   ⛔ NO CUSTOM PROPERTIES (contract §1.6).
   ===================================================================== */

/* --- Header ------------------------------------------------------------ */
/* The design's root sets no line-height (renders `normal`); styles.css gives
   body 1.6. Both bars reset it so nav links, the CTA pill and footer links
   stand as drawn (goal 08 diff, D1). */
.sc-header, .sc-mobile-nav, .sc-footer { line-height: normal; }
.sc-header {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #E9E0CF;
    font-family: Inter, system-ui, sans-serif;
}
.sc-logo-link { display: flex; align-items: center; }
.sc-logo { display: block; width: 150px; height: auto; }
.sc-nav { display: none; }
.sc-nav-link { font-size: 15px; color: #55503F; text-decoration: none; white-space: nowrap; }
/* Log in is an account control sharing the nav's row, not a sixth marketing
   link: a little more air separates the two groups without a divider, which
   the system has no vocabulary for (goal 20, ruling 11). */
.sc-nav-login { margin-left: 6px; }
/* The current page, in both bars (goal 19). Forest plus weight, never an
   underline: colour alone would be the only indicator, and the underline is
   the hover affordance. The weight bump cannot shift layout because the
   active link does not change without a navigation. */
.sc-nav-link[aria-current="page"],
.sc-mobile-link[aria-current="page"] { color: #1F5540; font-weight: 600; }
.sc-nav-cta {
    background: #2D6A4F;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    padding: 11px 20px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    display: none;
}
/* The design shows the header's CTA on mobile only while the menu is open
   (same style object as the one inside the menu). */
.sc-header.open .sc-nav-cta { display: inline-block; }
.sc-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
}
.sc-bar { display: block; height: 2px; width: 22px; border-radius: 2px; background: #2C2418; }
.sc-mobile-nav { display: none; font-family: Inter, system-ui, sans-serif; }
.sc-mobile-nav.open {
    display: flex;
    flex-direction: column;
    /* Was 14px, when each row was bare 16px text. The rows now carry their own
       44px box, so the gap shrinks to keep the menu's pitch close to what it
       was (goal 19). */
    gap: 4px;
    padding: 16px 20px 20px;
    border-bottom: 1px solid #E9E0CF;
    align-items: flex-start;
}
/* §3 accessibility: hit targets at or above 44px. Bare 16px text gives a
   ~19px target, so the box carries the rest. Five links make that miss worse
   than three did, which is why goal 19 closes it. */
.sc-mobile-link {
    font-size: 16px;
    color: #55503F;
    text-decoration: none;
    display: flex;
    align-items: center;
    min-height: 44px;
}
.sc-mobile-nav.open .sc-nav-cta { display: inline-block; margin-top: 10px; }

/* --- Footer ------------------------------------------------------------ */
.sc-footer {
    padding: 40px 20px 56px;
    border-top: 1px solid #E9E0CF;
    font-family: Inter, system-ui, sans-serif;
    color: #2C2418;
}
.sc-footer-top { display: grid; grid-template-columns: 1fr; gap: 28px; padding-bottom: 28px; }
.sc-footer-brand { font-family: Lora, Georgia, serif; font-size: 19px; font-weight: 600; color: #2D6A4F; margin: 0 0 4px; }
.sc-footer-slogan { font-size: 14px; color: #6E6555; margin: 0; }
.sc-footer-label {
    font-size: 12px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #6E6555;
    margin: 0 0 10px;
}
.sc-footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.sc-footer-links a { color: #55503F; }
.sc-footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 14px;
    padding-top: 24px;
    border-top: 1px solid #E9E0CF;
}
.sc-footer-legal a { color: #55503F; }
.sc-footer-copy { color: #6E6555; }
.sc-footer-small { font-size: 13px; line-height: 1.6; color: #6E6555; margin: 16px 0 0; }
.sc-footer-small + .sc-footer-small { margin: 8px 0 0; }

@media (min-width: 768px) {
    .sc-footer { padding: 56px 56px 72px; }
    .sc-footer-top { grid-template-columns: 0.9fr 1fr 1.1fr 1.1fr; gap: 40px; }
}

/* ⚠ THE HEADER SWITCHES LATER THAN THE FOOTER (goal 19). Five nav links plus
   the account controls do not clear the 190px logo at 768: the bar runs about
   900px of content, so the desktop layout waits for 940 and tablets keep the
   hamburger. The footer keeps its own 768 breakpoint above, untouched, because
   the footer is out of this goal's scope. Splitting the block is what keeps
   those two independent. */
@media (min-width: 940px) {
    .sc-header { padding: 20px 56px; }
    .sc-logo { width: 190px; }
    .sc-nav { display: flex; gap: 26px; margin-left: auto; margin-right: 8px; }
    .sc-nav-cta { display: inline-block; }
    .sc-hamburger { display: none; }
    .sc-mobile-nav, .sc-mobile-nav.open { display: none; }
}