/* =============================================================================
   BaselineLifestyle — Canonical Header CSS (single-file)
   Purpose:
   - Banner (system chooser) + Hero header + Tabs
   - Header typography + header layout containment
   - Safe fallbacks if other CSS files fail to load
   Notes:
   - Colours come from per-page CSS variables (e.g. --accent, --border, --muted, --hero-bg).
   - This file intentionally avoids setting global colour themes.
   ============================================================================= */

/* --------------------------
   Tokens + safe fallbacks
   -------------------------- */
:root{
  /* Banner height */
  --homebar-h: 56px;

  /* Shared geometry (override per page if needed) */
  --bl-maxw: 1500px;
  --bl-gutter: 24px;
  --bl-gutter-lg: 64px;

  /* Header paddings */
  --bl-hero-pad-y: 16px;
  --bl-hero-pad-x: 12px;

  /* Typography fallbacks (pages can supply --font / --font-soft) */
  --bl-font-sans: var(--font, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial);
  --bl-font-soft: var(--font-soft, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif);

  /* Default text scales (pages can override) */
  --bl-title: 30px;
  /* Subtitle matches baseline body text scale (prevents “too small” headers). */
  --bl-subtitle: 18px;

  /* Default surfaces (pages can override) */
  --hero-bg: var(--hero-bg, transparent);
}

/* Ensure the banner does not get hidden behind fixed backgrounds */
.bl-homebar,
.hero{ isolation:isolate; }

/* Banner uses fixed positioning.
   We scroll inside .bl-scroll so the scrollbar starts *below* the banner (no underlay). */
html, body{ height:100%; }
body{
  padding-top: 0 !important;
  overflow: hidden;
}

.bl-scroll{
  position: fixed;
  top: calc(var(--homebar-h) + env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* --------------------------
   Banner (home bar)
   -------------------------- */
.bl-homebar{
  height: var(--homebar-h);
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;

  display:flex;
  align-items:center;
  justify-content:center;

  padding: 10px 14px;

  background: var(--homebar-bg, var(--accent));
  border-bottom: 1px solid var(--homebar-border, rgba(0,0,0,.10));

  font-family: var(--bl-font-sans);
  font-size: 16px;
  line-height: 1;
}

.bl-homebar-inner{
  width: min(var(--bl-maxw), calc(100% - var(--bl-gutter)));
  margin-left:auto;
  margin-right:auto;

  display:flex;
  align-items:center;
  justify-content:center;
}

/* --------------------------
   Hero header (in-flow)
   -------------------------- */
.hero{
  position:relative;
  z-index: 50;

  background: var(--hero-bg);
  border-bottom: 1px solid var(--border, rgba(0,0,0,.10));

  backdrop-filter: saturate(120%) blur(10px);
  box-shadow: 0 14px 30px -28px rgba(35,23,19,0.35);
}

.hero-inner{
  width: min(var(--bl-maxw), calc(100% - var(--bl-gutter)));
  margin-left:auto;
  margin-right:auto;

  padding: var(--bl-hero-pad-y) var(--bl-hero-pad-x);

  display:flex;
  align-items:center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Header typography (scoped to header classes) */
.title{
  font-family: var(--bl-font-soft);
  font-size: var(--bl-title);
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.15;
  margin: 0;
}
.subtitle{
  font-family: var(--bl-font-sans);
  font-size: var(--bl-subtitle);
  line-height: 1.35;
  color: var(--muted, rgba(0,0,0,.65));
  margin: 0;
}

/* --------------------------
   Tabs row geometry
   -------------------------- */
.tabs{
  width: min(var(--bl-maxw), calc(100% - var(--bl-gutter)));
  margin: 10px auto 0;
  padding: 0 var(--bl-hero-pad-x) 12px;

  background: transparent;
  border-bottom: 1px solid var(--border, rgba(0,0,0,.10));

  display:flex;
  gap: 8px;
  overflow: auto;
}

/* Compact header mode (optional hook) */
.hero.compact .hero-inner{ padding: 10px 20px; gap: 10px; }
.hero.compact .title{ font-size: 24px; }
.hero.compact .subtitle,
.hero.compact .care-line{ display:none; }
.hero.compact .tabs{ padding-bottom: 8px; }
.hero.compact .tab{ padding: 9px 14px; font-size: 16px; }

/* Desktop geometry */
@media (min-width: 900px){
  :root{ --bl-gutter: var(--bl-gutter-lg); }
  .hero-inner{ padding: 24px 20px; }
  .tabs{ padding-left: 20px; padding-right: 20px; }
}

/* --------------------------
   System chooser (banner dropdown)
   If pages also define these, this acts as a safe fallback.
   -------------------------- */
.bl-system-wrap{ position: relative; display:flex; align-items:center; }

.bl-system-toggle{
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--showall-border, rgba(0,0,0,.18));
  background: var(--showall-bg, rgba(255,255,255,.18));
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--accent-2, var(--ink, #1b0b09));
  position: relative;
  z-index: 10001;
}

.bl-system-toggle .caret{
  font-weight: 900;
  opacity: .9;
  transform: translateY(-1px);
}

.bl-system-toggle:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,0,0,.18), 0 14px 30px -26px rgba(35,23,19,.28);
}

.bl-system-menu{
  z-index: 10000;
  position:absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);

  min-width: 260px;
  max-width: min(92vw, 380px);

  border-radius: 16px;
  padding: 10px;

  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.92);

  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 22px 56px -38px rgba(0,0,0,.55);

  color: var(--ink, #111);
}

.bl-system-menu a{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;

  font-weight: 820;
  color: var(--ink, #111);
  text-decoration: none;
}

.bl-system-menu a:hover{
  background: rgba(0,0,0,.06);
}

.bl-system-menu .small{
  display:block;
  font-size: 16px;
  font-weight: 650;
  color: var(--muted, rgba(0,0,0,.65));
  margin-top: 3px;
}

.bl-system-menu .divider{
  height: 1px;
  margin: 10px 6px;
  background: rgba(0,0,0,.10);
  pointer-events: none;
}