/* ═══════════════════════════════════════════════════════════════════════
   BUDGET CHALLENGE — bc-common.css
   ─────────────────────────────────────────────────────────────────────
   Shared CSS layer for every Budget Challenge page skin.

   What this file owns:
     1. Canonical brand variables (:root).  Every page reads from here.
        Pages MUST NOT redeclare any --bc-* token in their own :root.
     2. Universal resets that apply site-wide (* / body / a / a:hover).
        This file is the EXCEPTION to the "no bare element selectors"
        rule in PAGE_BUILD_CONVENTIONS.md — bc-common.css owns the
        site-wide resets so page CSS doesn't have to declare them.
     3. Shared @keyframes for animations used on more than one page
        (pulse, shimmer sweep).
     4. Generic reusable utility classes that recur across pages
        (.bc-shimmer-btn, .bc-pulse, .bc-eyebrow, .bc-live-badge).
     5. Shared section-wrapper layout patterns used by 2+ pages
        (.bc-ss-cta, .bc-ss-hero with modifier classes, .bc-trophy-grid).
        Extracted from the cross-page CSS audit on 2026-05-12: these
        patterns were reinvented per page with near-identical bodies.

   What this file does NOT own:
     - Page-specific layout (leaderboard rows, audience tiles, comparison
       block animation, vchart, week grid, state map, etc.)
       → those live in <Page>.css and are SCOPED under .bc-<page>2026.
     - Bootstrap-owned utility names (.container, .row, .col, .btn-*,
       .badge, .panel, .modal, .hero, .lead, .table, etc.)
       → page CSS must not redefine these.
     - .site-header / .site-footer / .site-header nav a — these come
       from the DNN base skin via includes/header.ascx and
       includes/footer.ascx. Page CSS overrides for these belong
       scoped under .bc-<page>2026 only when truly page-specific.

   Load order required by DNN:
     1. bootstrap.css      (base Budget skin, ~1171 rules)
     2. default_mod.css    (base Budget skin, ~440 rules)
     3. init.css           (base Budget skin)
     4. start.css          (base Budget skin)
     5. bc-common.css      ← THIS FILE
     6. <Page>.css         ← page-specific CSS, scoped under .bc-<page>2026

   In .ascx, this file is loaded via:
     <dnn:DnnCssInclude id="BcCommonCSS" runat="server"
       FilePath="bc-common.css" PathNameAlias="SkinPath" Priority="40" />
   And the page-specific CSS uses Priority="50" so it loads after.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand palette (Brand_Foundation.md §6) ──
     ONLY these blues/greens/oranges/purples/golds are brand canonical.
     Page-specific colors (e.g., Standards-page map fill, week-grid green,
     trophy gold) are NOT brand tokens and live in their page's own CSS. */
  --bc-blue:           #4070B8;  /* Primary Blue — links, primary buttons, nav, CTAs */
  --bc-blue-dark:      #1A4E8A;  /* Derived hover shade of --bc-blue. NOT a brand color */
  --bc-green:          #70B840;  /* Secondary buttons, success states, highlights */
  --bc-green-bright:   #8BD44E;  /* Hover state of --bc-green */
  --bc-orange:         #EC971F;  /* Warning/attention, Outcomes thread, Evidence thread */
  --bc-purple:         #4C40B8;  /* Internal/auth pages, dashboards, student UI */
  --bc-gold:           rgb(211, 175, 55);   /* Live leaderboard gold-tier badge */
  --bc-silver:         rgb(192, 192, 192);  /* Live leaderboard silver-tier badge */

  /* ── Text neutrals (Brand_Foundation.md §6) ── */
  --bc-text:           #414141;  /* Headings (H1-H5) — "Heading Text Dark Gray" */
  --bc-text-body:      #727171;  /* Body copy — "Body Text Medium Gray" */
  --bc-text-secondary: #555555;  /* Supporting text, captions */
  --bc-text-light:     #999999;  /* Tertiary text, labels, captions */
  --bc-text-dark: rgb(65, 65, 65);

  /* ── Background neutrals ── */
  --bc-bg-white:       #FFFFFF;  /* Primary page background */
  --bc-bg-light:       #F5F5F5;  /* Section alternation, soft fills (Brand Foundation) */
  --bc-bg-stripe:      #F9F9F9;  /* Table stripe + DNN gray bands */

  /* ── Borders ── */
  --bc-border-light:   #E0E0E0;  /* Subtle dividers, card borders */
  --bc-border-card:    #CCCCCC;  /* Stronger card outlines (live leaderboard table border) */

  /* ── Footer dark band ── */
  --bc-footer-dark:    #343434;  /* Brand Foundation "Charcoal" */

  /* ── Shared animation tokens ── */
  --bc-shimmer-cycle:  5.5s;     /* Master cycle for shimmer-button + text shimmers */
  --bc-shimmer-slow:   11s;      /* Half-rate variant (blue-banner sweep) */
}

/* ═══════════════════════════════════════════════════════════════════════
   UNIVERSAL RESETS — site-wide defaults
   ─────────────────────────────────────────────────────────────────────
   These bare selectors are deliberate: this file is the single canonical
   owner of element-level defaults for Budget Challenge pages. The
   cross-page CSS audit (2026-05-12) found these declared independently
   in 3-4 of the 5 page CSS files with near-identical bodies; consolidating
   here removes ~600 bytes of duplication and prevents future drift.

   Page CSS must NOT redeclare these bare selectors at top level — that
   rule (in PAGE_BUILD_CONVENTIONS.md §3) applies to page CSS only,
   not to this file.
   ═══════════════════════════════════════════════════════════════════════ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Open Sans', Arial, sans-serif;
  color: var(--bc-text-body);
  background: var(--bc-bg-white);
  line-height: 1.5;
  font-size: 16px;
}

a {
  color: var(--bc-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════
   SHARED KEYFRAMES — generic animations used on more than one page
   ═══════════════════════════════════════════════════════════════════════ */

/* Pulse — green dot inside the hero LIVE COMPETITION badge */
@keyframes bcPulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0   rgba(112, 184, 64, 0.6); }
  50%      { opacity: 0.8; box-shadow: 0 0 0 8px rgba(112, 184, 64, 0);   }
}

/* Shimmer sweep — diagonal white streak across a colored button.
   Sweep occupies ~9%→48% of the cycle (1.9s of 5.5s), then parks off-right
   for the remainder. Matches every per-page shimmer pattern in the codebase.
   Used by .bc-shimmer-btn (below). */
@keyframes bcShimmerSweep {
  0%   { left: -100%; }
  9%   { left: -100%; }
  48%  { left: 100%;  }
  100% { left: 100%;  }
}

/* Slow shimmer sweep — 11s, used on full-width brand-blue banners only.
   Defined here so any page that needs the same effect picks it up for free. */
@keyframes bcShimmerSweepSlow {
  0%   { left: -100%; }
  9%   { left: -100%; }
  48%  { left: 100%;  }
  100% { left: 100%;  }
}

/* ═══════════════════════════════════════════════════════════════════════
   SHARED UTILITY CLASSES — recur across more than one page
   ─────────────────────────────────────────────────────────────────────
   All class names use the .bc-* namespace prefix so they cannot collide
   with Bootstrap or DNN base CSS.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── .bc-pulse — the green pulsing dot inside the LIVE COMPETITION badge ── */
.bc-pulse {
  width: 8px;
  height: 8px;
  background: var(--bc-green);
  border-radius: 50%;
  animation: bcPulse 2s infinite;
  display: inline-block;
}
@media (prefers-reduced-motion: reduce) {
  .bc-pulse { animation: none; }
}

/* ── .bc-live-badge — the rounded green badge surrounding the pulse dot ── */
.bc-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(112, 184, 64, 0.1);
  border: 1px solid rgba(112, 184, 64, 0.3);
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--bc-green);
}

/* ── .bc-eyebrow — small uppercase labels (PREMIER NATIONAL SPONSOR, etc.) ── */
.bc-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--bc-text-light);
  font-weight: 600;
}
.bc-eyebrow.is-gold  { color: var(--bc-gold);   letter-spacing: 3px; }
.bc-eyebrow.is-blue  { color: var(--bc-blue); }
.bc-eyebrow.is-green { color: var(--bc-green); }

/* ── .bc-shimmer-btn — the colored CTA with diagonal white-streak sweep.
       Used on every page in some form. Color modifiers swap background:
       .is-blue / .is-green / .is-amber / .is-gold. ── */
.bc-shimmer-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  color: white;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.bc-shimmer-btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
  color: white;
}
.bc-shimmer-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.45) 50%, transparent 62%);
  animation: bcShimmerSweep var(--bc-shimmer-cycle) ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .bc-shimmer-btn::before { animation: none; }
}
.bc-shimmer-btn .arrow {
  transition: transform 0.18s ease;
}
.bc-shimmer-btn:hover .arrow {
  transform: translateX(3px);
}

/* Color modifiers — pick one. */
.bc-shimmer-btn.is-blue  { background: var(--bc-blue);   box-shadow: 0 2px 6px rgba(64,112,184,0.25);  }
.bc-shimmer-btn.is-blue:hover  { background: var(--bc-blue-dark); box-shadow: 0 4px 12px rgba(64,112,184,0.35);  }
.bc-shimmer-btn.is-green { background: var(--bc-green);  box-shadow: 0 2px 6px rgba(112,184,64,0.25);  }
.bc-shimmer-btn.is-green:hover { background: #5DA033;           box-shadow: 0 4px 12px rgba(112,184,64,0.35);  }
.bc-shimmer-btn.is-amber { background: var(--bc-orange); box-shadow: 0 2px 6px rgba(236,151,31,0.25); }
.bc-shimmer-btn.is-amber:hover { background: #D4810E;           box-shadow: 0 4px 12px rgba(236,151,31,0.35); }
.bc-shimmer-btn.is-gold  { background: var(--bc-gold);   box-shadow: 0 2px 6px rgba(211,175,55,0.25);  }
.bc-shimmer-btn.is-gold:hover  { background: #B89530;           box-shadow: 0 4px 12px rgba(211,175,55,0.35);  }

/* ── .bc-section + .bc-ss-* — full-width section wrappers.
       Defined in the DNN-only overrides block of each page's CSS today;
       the convention is captured here for visibility but the per-section
       background/padding still lives in the page CSS so it stays bound
       to the page's own visual rhythm. Most pages won't need to touch
       these; they're shared structurally, not visually. ── */
.bc-section {
  width: 100%;
}

/* ── .bc-smooth-scroll — opt-in smooth scroll for in-page anchor jumps ── */
html.bc-smooth-scroll { scroll-behavior: smooth; }

/* ═══════════════════════════════════════════════════════════════════════
   SHARED SECTION PATTERNS — full-width section wrappers used on 2+ pages
   ─────────────────────────────────────────────────────────────────────
   Extracted from the cross-page CSS audit on 2026-05-12. Each pattern
   has a sensible default body, plus modifier classes (.is-tall, .is-large,
   .is-small, .is-compact, .is-italic) for the per-page variations.

   Usage from .ascx panes:
     <section class="bc-section bc-ss-hero is-tall">
       <div class="container">
         <h1>...<span class="accent">...</span></h1>
         <p class="subhead">...</p>
       </div>
     </section>

   Pages may layer additional rules SCOPED under .bc-<page>2026 if a
   page-unique override is genuinely needed — but the goal is to land
   on these canonical defaults whenever possible.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── .bc-ss-hero — full-width hero section wrapper ──
     Default: 64px top padding, 48px bottom, light-gray bg.
     Modifiers:
       .is-tall      → 72px / 56px (use for Program-style heroes)
       .is-flat      → no padding (use when the inner content controls
                       its own padding, e.g., a hero with a complex
                       inner gradient layout like the Homepage) */
.bc-ss-hero {
  background: var(--bc-bg-light);
  padding: 64px 0 48px;
}
.bc-ss-hero.is-tall {
  padding: 72px 0 56px;
}
.bc-ss-hero.is-flat {
  padding: 0;
}

/* Hero H1 — default 46px / 700, tightened letter-spacing.
   Modifiers on the parent .bc-ss-hero:
     .is-large h1   → 52px / 800 (Program — most prominent)
     .is-small h1   → 42px / 700 (Sponsor — quieter intro)
   The .accent span is brand blue across every page that uses it. */
.bc-ss-hero h1 {
  font-size: 46px;
  font-weight: 700;
  margin: 0 0 18px;
  letter-spacing: -0.5px;
  line-height: 1.12;
  color: var(--bc-text);
}
.bc-ss-hero.is-large h1 {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.05;
}
.bc-ss-hero.is-small h1 {
  font-size: 42px;
  line-height: 1.15;
  margin-bottom: 16px;
}
.bc-ss-hero h1 .accent {
  color: var(--bc-blue);
}

/* Hero lede (italicized intro line, smaller) and subhead (normal weight).
   Pages typically use one or the other, not both. */
.bc-ss-hero .lede {
  font-size: 16px;
  color: var(--bc-text-body);
  max-width: 720px;
  margin: 8px auto 0;
  line-height: 1.55;
}
.bc-ss-hero .lede.is-italic {
  font-style: italic;
}
.bc-ss-hero .subhead {
  font-size: 19px;
  color: var(--bc-text-body);
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.55;
}

/* ── .bc-ss-cta — full-width brand-blue CTA banner.
       Used by Program + Sponsor today with effectively the same body.
       Pages add their own .container > h2/p inside. ── */
.bc-ss-cta {
  background: var(--bc-blue);
  padding: 56px 0;
  color: white;
}
.bc-ss-cta h2 {
  color: white;
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 12px;
}
.bc-ss-cta p {
  font-size: 16px;
  margin: 0 auto 24px;
  max-width: 700px;
  opacity: 0.95;
  line-height: 1.6;
}

/* ── .bc-trophy-grid — 3-column grid used by Effectiveness + Program.
       Default gap 24px; .is-compact = 16px (Program's tighter version). ── */
.bc-trophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.bc-trophy-grid.is-compact {
  gap: 16px;
}
@media (max-width: 760px) {
  .bc-trophy-grid {
    grid-template-columns: 1fr;
  }
}