/* chrome.css -- the parts of every public page that must NOT follow the page's theme:
   the top bar, the chat button's glow, and where a season page lands.
   Loaded on every landing page, after the season and design sheets, so it has the last word.

   THE TOP BAR (Joseph, 2026-09-21/22):
     "the top bar should be consistant between pages, with the logo and the accented 'Get a Quote'
      button being the only elements to change."
     "it should be the same structurally ... the layout (button placement, button radius, etc) is
      identical. and the top bar should not follow the theme of the page fully, it should be styled in
      a way that meshes visually with all of the themes but doesn't fully commit to one or another ...
      Try to create a version where everything else is fully static, and a version where things like
      colors DO change minimally as needed to not stand out too much."

   So: one neutral bar, near-black with no hue of its own (every theme has a dark ground, so a neutral
   dark sits with all of them), the system font (the monospace is the blueprint design's, not the
   bar's), fixed sizes and radii. The ground and hairline take a small share of the page's own colours
   (the "tint" version). Joseph picked tint over the fully static version on 2026-09-22; the static
   version and its dev knob are deleted. Every raw value lives in the token block below. */

:root {
  --tb-ground:      rgba(17, 19, 23, 0.94);   /* neutral near-black, no hue */
  --tb-line:        rgba(255, 255, 255, 0.10);
  --tb-text:        #eef0f3;
  --tb-text-dim:    #b8bcc3;   /* P18: was #a3a9b1, 6.1:1 under the 9.5 px phone labels; 7:1 floor for small text (the held CF-3 line, re-decided: lighter, not --mnm-muted) */
  --tb-pill:        rgba(255, 255, 255, 0.05);
  --tb-pill-line:   rgba(255, 255, 255, 0.12);
  --tb-pill-hover:  rgba(255, 255, 255, 0.09);
  --tb-icon:        rgba(255, 255, 255, 0.12);
  --tb-font:        'Segoe UI', system-ui, sans-serif;
  --tb-radius:      6px;      /* pills and Get a Quote alike */
  --tb-height:      60px;

  /* The page's own colours, used only by the tint version and by the chat glow. */
  --tb-page:        #0f172a;  /* summer's slate */
  --tb-accent:      var(--mat-brick-avg);
  --tb-tint-share:  24%;      /* how much of the page's ground the tint version mixes in */
  --tb-line-share:  35%;      /* how much of the page's accent reaches the hairline */

  /* The chat button glows in the page's accent: the same colour as its Get a Quote. */
  --mnm-glow:       var(--tb-accent);
}
html[data-season="winter"]      { --tb-page: #060c16; --tb-accent: var(--mat-brass-avg); }
html[data-season="chimney"]     { --tb-page: #17161a; --tb-accent: var(--mat-silver-avg); --mnm-glow: #ffffff; }  /* white, his word */
html[data-design="blueprint"]   { --tb-page: #071d33; --tb-accent: var(--bp-accent); }

/* ---- the bar ---------------------------------------------------------------------------------- */
html .topnav {
  height: var(--tb-height);
  background: var(--tb-ground);
  border-bottom: 1px solid var(--tb-line);
  backdrop-filter: blur(8px);
}
html .topnav::before { content: none; }   /* nothing hangs off the bar in any season */
html .topnav-brand span { color: var(--tb-text); font-family: var(--tb-font); font-size: 17px; font-weight: 700; }

html .topnav a.topnav-phone[href] { font-family: var(--tb-font); }
html .topnav-phone {
  background: var(--tb-pill);
  border: 1px solid var(--tb-pill-line);
  border-radius: var(--tb-radius);
}
html .topnav-phone:hover { background: var(--tb-pill-hover); border-color: var(--tb-pill-line); }
html .topnav-phone.is-ai .pi,
html .topnav-phone.is-office .pi,
html .topnav-phone.is-admin .pi { background: var(--tb-icon); color: var(--tb-text); border-radius: var(--tb-radius); }
html .topnav-phone .pt .pl { font-family: var(--tb-font); color: var(--tb-text-dim); }
html .topnav-phone .pt .pn { font-family: var(--tb-font); color: var(--tb-text); font-variant-numeric: tabular-nums; }
html .topnav > div > a:not(.topnav-cta):not(.topnav-phone) { color: var(--tb-text-dim) !important; font-family: var(--tb-font); }
html .topnav > div > a:not(.topnav-cta):not(.topnav-phone):hover { color: var(--tb-text) !important; }

/* Get a Quote: its SHAPE is the bar's (identical on every page); only its fill comes from the theme. */
html .topnav-cta {
  border-radius: var(--tb-radius);
  padding: 8px 18px;
  font-family: var(--tb-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  border-width: 1px;
  border-style: solid;
}
html[data-design="blueprint"] .topnav-cta { border-color: var(--bp-accent); }

/* ---- the tint: same bar, a small share of the page's own colour (Joseph's pick, 2026-09-22) ------ */
/* Same specificity as the base rule above and later in the file, so it wins on every page, dev or live. */
html .topnav {
  background: color-mix(in srgb, var(--tb-ground) calc(100% - var(--tb-tint-share)), var(--tb-page));
  border-bottom-color: color-mix(in srgb, var(--tb-line) calc(100% - var(--tb-line-share)), var(--tb-accent));
}

/* ---- where a season page lands ------------------------------------------------------------------ */
/* A raw URL or an advert gets the full-screen splash; the main page's season cards link to #services,
   which lands already scrolled to booking, clear of the sticky bar. */
html:not([data-design="blueprint"]) section.hero {
  min-height: calc(100svh - var(--tb-height));
}
#services { scroll-margin-top: var(--tb-height); }

/* ---- the hero map sits in the SAME place on every page ------------------------------------------ */
/* Joseph, 2026-09-22: "if the user visits the page by inputting the URL ... and the map is the only element that renders
   ... each page would be pixel-perfect identical ... the map asset should be identically placed."
   The map used to stretch over the whole hero (inset: 0), so a hero whose content ran past the first screen (the main page
   on a phone: 967px against 784px) drew a bigger map in a different place. Its box is now the first screen under the bar,
   whatever the hero holds; it is a viewport height, not a percentage, so an auto-height hero cannot collapse it to zero
   (the trap landing.html's comment on .hero-up-map describes). Colour and opacity stay per page; geometry is global. */
html .hero .hero-up-map {
  top: 0; left: 0; right: 0; bottom: auto;
  height: calc(100svh - var(--tb-height));
}