/* ── CBC Portal — shared header / footer styles ──────────────────────────────
   Loaded by every index.html in the portal tree.
   Page-specific CSS lives in each page's own <style> block.
──────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand color tokens — fallback CBC palette.
     Overridden at build time by the brand token block baked into each
     report's <head> by report_common.py (from brand_config.xlsx).
     Variable names mirror brand_config column names exactly. */
  --color-primary:     #9105a4;
  --color-dark:        #570263;
  --color-accent:      #D4477B;
  --color-primary-rgb: 145, 5, 164;
  --color-accent-rgb:  212, 71, 123;

  /* Structural / layout tokens — not brand-driven */
  --deep:        #7c048c;
  --plum:        #7B2049;
  --bg:          #FAFAFA;
  --surface:     #ffffff;
  --border:      #d4c8e2;
  --cream:       #f3eef8;
  --text:        #1a1030;
  --text3:       #5a4e6e;
  --meta:        #808080;
  --content-pad: max(16px, calc((100% - 1280px) / 2));
  /* --nav-bg: structural chrome — not brand-driven.
     Set here as the single source of truth for the client-header background.
     Only override in brand_config.xlsx "nav-background-override" if a client
     explicitly requires a different nav color. */
  --nav-bg:      #1a1a1a;

  /* Header-stack tokens — govern the visual relationship between the
     client-header (.top-nav) and the brand-header (.hero). Set
     --header-seam-width: 0 for a fully seamless stack; raise it to reveal
     a configurable accent divider. Both bars share --content-pad so inner
     content aligns across the seam. */
  --header-seam-width: 2px;
  --header-seam-color: var(--color-primary);
  --header-stack-bg:   #1a1a1a;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── TOP NAV (client-header) ──
   Sits flush on top of .hero (brand-header), separated only by the
   configurable accent seam. Both bars share --content-pad so inner
   content lines up across the seam. */
.top-nav {
  background: var(--nav-bg, var(--header-stack-bg, #000));
  padding: 0 var(--content-pad);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: var(--header-seam-width, 2px) solid var(--header-seam-color, var(--color-primary));
  flex-shrink: 0;
  margin: 0;
}
.nav-left { display: flex; align-items: center; gap: 16px; }
.nav-logo-slot {
  /* Width auto-sizes to the image's natural aspect ratio;
     height is capped so the nav stays at 60px. */
  width: auto; height: 42px;
  max-width: 240px;           /* prevent excessively wide logos */
  border-radius: 8px;
  background: none;
  border: none;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}
.nav-logo-slot img {
  height: 100%; width: auto;  /* natural width, fixed height */
  object-fit: contain; display: block; border-radius: 8px;
}
/* nav-logo-slot::after tint removed — not needed for wide/transparent logos */
.nav-brand {
  font-size: 1.05rem; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--nav-text, #fff);
  font-family: Consolas, "Courier New", monospace;
}
.nav-brand .nav-accent {
  color: var(--color-accent, var(--nav-text, #fff));
}
.nav-tag {
  font-size: 1.05rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  color: var(--nav-text, #fff); font-family: Consolas, "Courier New", monospace;
}

/* ── HERO (brand-header) ──
   Single shared shell for both the brand index and every report page.
   Stacks directly beneath .top-nav with no gap. The gradient begins at
   --header-stack-bg so the dark nav flows into the hero continuously;
   the seam is the only visual break between the two.

   Layout: CSS grid inside .hero-grid —
     col 1 = logo width (auto)   col 2 = title/sub (rest)
     row 1 = eyebrow spanning both columns
     row 2 = logo (spans rows 2–3) | title
     row 3 = logo (spans rows 2–3) | subtitle

   The brand index sets the eyebrow to "Analytics Portal - Social Media" (static label).
   Reports set it to a "<Brand> › <Report Name>" breadcrumb link.
   Same styling, same dimensions, different content. */
.hero {
  background: linear-gradient(135deg, var(--header-stack-bg, #000) 0%, var(--color-dark) 40%, var(--color-primary) 75%, var(--color-accent) 100%);
  padding: 4px var(--content-pad) 10px;
  position: relative; overflow: hidden;
  margin: 0;
}
.hero::before {
  content: ""; position: absolute; top: -60px; right: -60px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--color-primary-rgb), 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; bottom: -40px; left: 20%;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--color-accent-rgb), 0.20) 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 14px;
  position: relative; z-index: 1;
}
.hero-eyebrow {
  grid-column: 1 / 3;
  grid-row: 1;
  font-size: calc(0.85rem + 2px); font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; color: var(--color-accent);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding-bottom: 1.5px;
  white-space: nowrap;
}
.hero-eyebrow a { color: var(--color-accent); text-decoration: none; }
.hero-eyebrow a:hover { text-decoration: underline; }
.hero-logo {
  grid-column: 1;
  grid-row: 2 / 4;
  height: 68px; width: auto; border-radius: 8px;
  display: block;
}
.hero-title {
  grid-column: 2;
  grid-row: 2;
  font-size: 2.6rem; font-weight: 900; color: #fff;
  line-height: 1.1; letter-spacing: -1px;
  align-self: end;
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(90deg, var(--color-accent), #fff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub {
  grid-column: 2;
  grid-row: 3;
  font-size: 0.88rem; color: rgba(255,255,255,0.55);
  align-self: start;
  padding-top: 2px;
}

/* ── FOOTER ── */
footer {
  background: #000;
  border-top: 1px solid #1b1b1b;
  padding: 28px var(--content-pad);
  display: flex; align-items: center; justify-content: space-between;
}
.footer-brand {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 2.5px;
  text-transform: uppercase; color: #888888;
  font-family: Consolas, "Courier New", monospace;
}
.footer-note { font-size: 0.65rem; color: #7a7a7a; font-family: Consolas, "Courier New", monospace; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .hero-title { font-size: 1.9rem; }
  .hero-sub { font-size: 0.82rem; }
  footer { flex-direction: column; gap: 6px; text-align: center; }
}
