/* ========================================================================
   SITE CHROME — the shared navbar and footer, and nothing else.
   ------------------------------------------------------------------------
   One stylesheet for the two pieces of markup every public page shares:
   includes/navbar.html (injected at runtime by js/navbar-include.js) and
   includes/footer.html (stamped in at build time by build.js through
   site-chrome.js). Every page that carries the shared navbar gets this
   file from the build, linked straight after css/tepuy.css when the page
   loads it, otherwise before the page's own styles.

   Why a file of its own (S09, navbar consistency, Oct 2026): these rules
   used to live in css/tepuy.css (sections 2 and 11). Three pages that load
   no shared stylesheet by decision (calculators/beat-the-asx,
   calculators/buy-vs-rent-australia and the eight-city article) therefore
   could not show the standard navbar, and each carried its own copied
   header instead. Moving the rules here, unchanged, lets those pages load
   the chrome without loading tepuy.css.

   Self-contained on purpose. The rules read only --chrome-* tokens, which
   are declared below with css/tepuy.css's own values (pinned equal by
   test/site_chrome.test.js), and the chrome sets its own font, size and
   line-height. A page that redefines --text, --ink or its body font
   (macroeconomics did: its navbar links rendered 14px in --ink) can no
   longer restyle the navbar or the footer.
   ======================================================================== */
:root {
  --chrome-ink:         #0E1512;  /* = tepuy.css --ink */
  --chrome-clay:        #C97A3A;  /* = tepuy.css --clay */
  --chrome-bone:        #F3F1E7;  /* = tepuy.css --bone */
  --chrome-text:        #0b1f16;  /* = tepuy.css --text (and --text-dark) */
  --chrome-surface:     #ffffff;  /* = tepuy.css --surface */
  --chrome-brand:       #1f4c3b;  /* = tepuy.css --brand (--brand-green) */
  --chrome-brand-light: #d4ede1;  /* = tepuy.css --brand-green-light */
  --chrome-content-max: 1200px;   /* = tepuy.css --content-max */
  --chrome-font: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
                 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* The base a page without tepuy.css would otherwise not give the chrome
   (tepuy.css's body font, its 1.45 line-height, box-sizing, and its
   `a { text-decoration: none }` / `a:hover { underline }` pair). Same
   values as tepuy.css, so pages that load it render exactly as before. */
.navbar, .ts-footer {
  font-family: var(--chrome-font);
  line-height: 1.45;
  text-align: left;
}
.navbar { font-size: 1rem; }
/* Class-scoped, not :where(): an exempt page's own `* { margin: 0 }` or
   `a { ... }` reset comes after this file and would win a specificity tie. */
.navbar, .navbar *, .ts-footer, .ts-footer * { box-sizing: border-box; }
.navbar a, .ts-footer a { text-decoration: none; border-bottom: 0; }
.navbar a:hover, .ts-footer a:hover { text-decoration: underline; }
.ts-footer p { margin: 0 0 1em; color: inherit; }
/* The menu button's padding is the browser's default for a <button>
   (1px 6px), which an exempt page's `* { padding: 0 }` would remove. */
.navbar .hamburger { padding: 1px 6px; }

/* ========================================================================
   2) NAVBAR
   ------------------------------------------------------------------------ */
/* Canonical fixed navbar — position: fixed, compensated by body's own
   padding-top below (search "padding-top: 64px"). Every page gets this
   unopposed. If a page's navbar isn't staying visible while scrolling,
   look for a higher-specificity override elsewhere fighting `position`
   here — that's exactly what broke property_vs_shares.html's navbar
   until 2026-08 (see css/PvS_style.css EXCEPTION 2 for the postmortem:
   a bare `header:not(.page-head)` element selector was quietly winning
   at (0,1,1) specificity against this rule's (0,1,0)). */
.navbar {
  width: 100%; position: fixed; top: 0; z-index: 1100;
}
.navbar .navbar-inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 64px; max-width: none; margin: 0 auto; padding: 0 16px;
  box-sizing: border-box;
  width: 100%;
  margin: 0;                /* no centering wrapper */
  padding-inline: clamp(12px, 2vw, 24px);  /* keep breathing room */


}

/* Transparent/blurred glass treatment (santos.com/itradelite-style) —
   replaces the old opaque solid-fill bar. No backdrop-filter opacity/blur
   values were iterated on; these match the one glass treatment already
   used elsewhere on the site (methodology.html's .method-hero:
   blur + translucent fill) scaled up slightly for a bar that has to stay
   legible over much more varied content underneath it while scrolling.

   Default (light-content pages: calculators, blog, about, contact, etc.):
   a warm, mostly-transparent --bone tint + dark text — --clay/--moss brand
   identity now lives in the tint's warmth and the border hairline, not as
   a solid block. --nav-bg/--nav-text/--nav-border are set here so the
   mobile nav-links panel and hamburger below can reuse the exact same
   values instead of duplicating the color-mix expressions. */
.navbar {
  --nav-bg:       color-mix(in srgb, var(--chrome-bone) 82%, transparent);
  /* Solid counterpart to --nav-bg — used by the mobile dropdown panel below,
     which (unlike the slim desktop bar) covers many rows of page content and
     needs to fully opaque it out rather than glass-blur over it. */
  --nav-bg-solid: var(--chrome-bone);
  --nav-text:   var(--chrome-text);
  --nav-border: color-mix(in srgb, var(--chrome-clay) 18%, transparent);
  color: var(--nav-text);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

/* Palette redesign (2026-08), scope change: no page keeps a dark navbar
   any longer. This used to hold a dark moss/ink tint for body.home
   (explicitly deferred through Batches 1-3 as "separate scope"); the
   for_professionals.html variant was already dropped in Batch 3. Now
   removed entirely — body.home falls through to the default light glass
   rule above, same as every other page. */

.navbar .logo { height: 36px; width: auto; margin-right: 10px; }
.navbar .logo-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.1rem; color: inherit; white-space: nowrap;
}
/* The wordmark is a brand mark, not a text link — the site-wide a:hover
   underline rule shouldn't apply to it. */
.navbar .logo-title:hover,
.navbar .logo-title:focus-visible {
  text-decoration: none;
}

/* Links row */
.navbar .nav-links { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.navbar .nav-links a { color: inherit; font-weight: 600; padding: 8px 10px; border-radius: 6px; }

/* Focus rings — currentColor so the ring stays visible against both the
   light glass (dark text) and dark glass (light text) treatments, instead
   of the old hardcoded white that would vanish on the light variant. */
.navbar .nav-links a:focus-visible, .navbar .sub-toggle:focus-visible {
  outline: none; box-shadow: 0 0 0 2px currentColor;
}
.navbar .sub-menu a:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--chrome-brand);
}

/* =========================================================
   Navbar CTA Button
   Palette redesign (2026-08): was a near-black gradient with a neon-green
   glow/pulse animation — the last near-black surface left in the navbar,
   present on every page via includes/navbar.html. Rebuilt on --clay to
   match .btn-clay's marketing CTA elsewhere (same --ink text, same
   4.69:1 AA-passing pair), with a plain hover lift instead of a
   continuous pulse animation — a persistent glow reads busy against the
   otherwise-quiet light chrome the rest of the palette pass aims for.
   ========================================================= */
.navbar .cta-button {
  background: linear-gradient(145deg, var(--chrome-clay), color-mix(in srgb, var(--chrome-clay) 82%, black));
  border: 1px solid color-mix(in srgb, var(--chrome-clay) 55%, transparent);
  color: var(--chrome-ink);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--chrome-clay) 25%, transparent);
  margin-left: 8px;
}

.navbar .cta-button:hover,
.navbar .cta-button:focus {
  background: linear-gradient(145deg, color-mix(in srgb, var(--chrome-clay) 90%, white), var(--chrome-clay));
  color: var(--chrome-ink);
  border-color: var(--chrome-clay);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--chrome-clay) 35%, transparent);
  transform: translateY(-2px);
}

.navbar .cta-button:active {
  background: color-mix(in srgb, var(--chrome-clay) 82%, black);
  transform: translateY(1px);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--chrome-clay) 30%, transparent);
}

/* Hide CTA on small screens to prevent nav break */
@media (max-width: 768px) {
  .navbar .cta-button {
    display: none;
  }
}



/* Dropdown */
.navbar .has-sub { position: relative; }
.navbar .sub-toggle {
  background: none; border: none; color: inherit; font: inherit; font-weight: 600;
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
}
/* currentColor-based tint instead of a hardcoded white highlight — reads
   correctly whether the active text color is light (dark-hero pages) or
   dark (light-content pages). */
@media (hover: hover) {
  .navbar .has-sub:hover > .sub-toggle { background: color-mix(in srgb, currentColor 12%, transparent); }
}
.navbar .sub-menu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 220px;
  background: var(--chrome-surface); border: 1px solid rgba(0,0,0,.06); border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.15); padding: 8px 0; z-index: 1200;
}
.navbar .has-sub::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; pointer-events: none;
}
.navbar .sub-menu a {
  display: block; color: var(--chrome-text); padding: 10px 16px; white-space: nowrap;
}
.navbar .sub-menu a:hover { background: var(--chrome-brand-light); }

.navbar .has-sub:hover .sub-menu,
.navbar .has-sub:focus-within .sub-menu,
.navbar .has-sub.open .sub-menu { display: block; } /* mobile: JS toggles .open */

/* Hamburger */
.navbar .hamburger {
  display: none; font-size: 1.8rem; background: none; border: none; color: inherit;
  cursor: pointer; margin-left: 4px; line-height: 1;
}

/* ===== Mobile / Tablet ===== */
@media (max-width: 768px) {
  .navbar .navbar-inner { display: flex; align-items: center; flex-wrap: wrap; position: relative; }

  /* currentColor-based, not hardcoded white — the mobile panel now
     inherits --nav-text same as the desktop bar, so it can be light OR
     dark text depending on page type. */
  .navbar .nav-links .sub-menu a { color: inherit !important; font-weight: 600; padding: 12px 28px; }
  .navbar .nav-links .sub-menu a:hover,
  .navbar .nav-links .sub-menu a:focus-visible { background: color-mix(in srgb, currentColor 12%, transparent); }

  .navbar .logo-title { order: 1; }
  .navbar .hamburger { order: 2; display: block; margin-left: auto; }



  /* Unlike the slim desktop bar, this panel drops down over many rows of
     page content, so the translucent glass treatment (--nav-bg) left the
     menu text hard to read with content bleeding through underneath.
     Use the solid --nav-bg-solid counterpart instead so the panel fully
     opaques out the page behind it; --nav-text/--nav-border are still
     inherited from .navbar so this stays in sync with whichever page-type
     variant (light/dark) is active automatically. */
  .navbar .nav-links {
    order: 3; display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 1200;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--nav-bg-solid);
    margin: 0; padding: 8px 0 12px; border-top: 1px solid var(--nav-border);
    box-shadow: 0 8px 20px rgba(0,0,0,.10); text-align: left;
  }
  .navbar .nav-links.show { display: flex; }

  .navbar .nav-links a,
  .navbar .sub-toggle { display: block; width: 100%; padding: 14px 16px; margin: 0; border-radius: 0; text-align: left; }

  .navbar .has-sub { width: 100%; }
  .navbar .sub-menu { position: static; background: color-mix(in srgb, currentColor 8%, transparent); box-shadow: none; border-radius: 0; padding: 0; margin: 0; }



}

/* Active state. js/navbar-include.js marks the link for the current page
   with aria-current="page"; the Simulators toggle takes the same tint when
   the current page is one of its items. */
.navbar .nav-links a[aria-current="page"],
.navbar .has-sub:has(.sub-menu a[aria-current="page"]) > .sub-toggle {
  background: color-mix(in srgb, var(--chrome-clay) 16%, transparent);
}
.navbar .sub-menu a[aria-current="page"] { font-weight: 700; }

/* ========================================================================
   11) FOOTER — Card style (matches Summary/Insights)
   ------------------------------------------------------------------------ */
/* --content-max already set in the canonical :root (1200px, same value) */

/* Transparent/blurred treatment, same principle as the navbar above — no
   more solid branded block competing with the page content above it.
   Footer is a normal in-flow element (not fixed), so there's no scrolling
   content to blur "through" the way the navbar has; a mostly-transparent
   tint that just picks up whatever the page's own background already is
   at that point is the equivalent technique here. No backdrop-filter
   needed for the same reason — nothing is stacked behind a static
   end-of-document element for it to blur. */
.ts-footer{
  color: var(--chrome-text);
  background: color-mix(in srgb, var(--chrome-bone) 45%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--chrome-clay) 16%, transparent);
  text-align: left;
  font-size: .95rem;
  margin-top: 0;
}

/* Palette redesign (2026-08), scope change: dark footer removed entirely
   — see the matching .navbar note above. body.home now falls through to
   the default light .ts-footer styling like every other page. */

.ts-footer__inner{
  max-width: var(--chrome-content-max);
  margin: 0 auto;
  padding: 20px 16px 22px;
}

.footer-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 20px;
  align-items: start;
  justify-items: center;   /* NEW */
  text-align: center;      /* NEW */
}

/* h2, was h4: an h4 straight after a page's h1/h2 failed axe heading-order
   on every page with the footer (S09). Same size and weight as before. */
.ts-footer h2{
  margin: 0 0 8px;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .2px;
  color: inherit;
  text-transform: uppercase;
}

.footer-links{ list-style: none; margin: 0; padding: 0; }
.footer-links li{ margin: 6px 0; }

/* Links follow whichever text color .ts-footer resolves to (light or dark
   per page type above) via opacity steps instead of a hardcoded white —
   consolidated from three separate, duplicate light/dark-footer color
   overrides that used to exist here and below, back when the footer was
   always dark and never needed to adapt. */
.ts-footer a{ color: inherit; opacity: .78; }
.ts-footer a:hover{ opacity: 1; }
.ts-footer a:focus-visible{ text-decoration: underline; outline: none; }

.footer-cta{ text-align: center; }
.footer-cta .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  font-size: .95rem;
}

/* legal row */
.footer-legal-links{
  margin-top: 10px;
  display: none;
  gap: 12px;
  justify-content: center;
  font-size: .88rem;
  color: inherit;
  opacity: .65;
}
.footer-legal-links a{ color: inherit; opacity: .9; }

.ts-footer .tiny{
  margin-top: 12px;
  font-size: .90rem;
  opacity: .85;
  text-align: center;
}

/* small screens */
@media (max-width: 768px){
  .footer-grid{ grid-template-columns: 1fr; text-align: center; }
  .ts-footer__inner{ padding: 18px 12px 22px; }
}
/* The footer's current-page link (aria-current, set by the build). */
.ts-footer a[aria-current="page"] { opacity: 1; font-weight: 700; }

/* ≥1024px: keep navbar/footer container widths consistent (was in
   tepuy.css section 12, after the footer block; same order here). */
@media (min-width: 1024px) {
  .navbar .navbar-inner,
  .ts-footer__inner {
    max-width: none;
    margin: 0 auto;
  }
}

@media print {
  .navbar, .hamburger { display: none !important; }
}