/* ==========================================================================
   Pensacola High FBLA: global stylesheet
   Design system follows the SummitFBLA chapter template and fbla.org:
   navy utility bar, white header, navy hero, light-blue callouts, pill
   buttons, white footer with a navy bottom strip.
   ========================================================================== */

/* ==========================================================================
   Fonts: Apercu Pro (FBLA primary typeface) + Gelasio, loaded from local files.
   WOFF2 first for size, OTF as the fallback.
   ========================================================================== */
@font-face {
  font-family: 'Apercu Pro';
  src: url("../fonts/Apercu Pro/Apercu Pro Light.otf") format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Apercu Pro';
  src: url("../fonts/Apercu Pro/woff2/Apercu-Pro-Regular.woff2") format('woff2'),
       url("../fonts/Apercu Pro/Apercu Pro Regular.otf") format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Apercu Pro';
  src: url("../fonts/Apercu Pro/woff2/Apercu-Pro-Italic.woff2") format('woff2'),
       url("../fonts/Apercu Pro/Apercu Pro Italic.otf") format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Apercu Pro';
  src: url("../fonts/Apercu Pro/woff2/Apercu-Pro-Medium.woff2") format('woff2'),
       url("../fonts/Apercu Pro/Apercu Pro Medium.otf") format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Apercu Pro';
  src: url("../fonts/Apercu Pro/Apercu Pro Medium Italic.otf") format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Apercu Pro';
  src: url("../fonts/Apercu Pro/woff2/Apercu-Pro-Bold.woff2") format('woff2'),
       url("../fonts/Apercu Pro/Apercu Pro Bold.otf") format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Apercu Pro';
  src: url("../fonts/Apercu Pro/woff2/Apercu-Pro-Bold-Italic.woff2") format('woff2'),
       url("../fonts/Apercu Pro/Apercu Pro Bold Italic.otf") format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Gelasio';
  src: url("../fonts/Gelasio/Gelasio-Regular.ttf") format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gelasio';
  src: url("../fonts/Gelasio/Gelasio-MediumItalic.ttf") format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Gelasio';
  src: url("../fonts/Gelasio/Gelasio-SemiBold.ttf") format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Gelasio';
  src: url("../fonts/Gelasio/Gelasio-Bold.ttf") format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ==========================================================================
   Design tokens (FBLA Brand Center, "no exceptions")
   ========================================================================== */
:root {
  /* Primary */
  --navy:   #0a2e7f;
  --navy-rgb: 10 46 127;
  --blue:   #1d52bc;
  --gold:   #f4ab19;
  /* Secondary */
  --cobalt: #226add;
  --white:  #ffffff;
  --black:  #2d2b2b;

  /* UI tints derived from the palette (surfaces and lines only) */
  --blue-50:  #eef3fc;
  --blue-100: #e3ebfa;
  --line:     #dde3ee;
  --text-muted: #5b6275;
  --gold-hover: #ffbd3a;

  /* Aliases used by page-level styles, signin.css and the admin theme */
  --primary: var(--navy);
  --accent:  var(--gold);
  --bg:      var(--white);
  --surface: var(--blue-50);
  --ink:     var(--black);
  --text:    var(--black);
  --border:  var(--line);
  --gold-bright: var(--gold-hover);

  --font-body:    'Apercu Pro', Arial, sans-serif;
  --font:         var(--font-body);
  --font-head:    var(--font-body);
  --font-display: var(--font-body);

  --container: 1200px;
  --gutter: 24px;
  --section-space: 96px;
  --header-height: 96px;
  --marquee-height: 64px;
  --radius: 12px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgb(var(--navy-rgb) / 0.06), 0 8px 24px rgb(var(--navy-rgb) / 0.08);
  --shadow-lg: 0 2px 4px rgb(var(--navy-rgb) / 0.06), 0 16px 40px rgb(var(--navy-rgb) / 0.14);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 200ms;
  --transition: var(--duration) var(--ease);
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --section-space: 64px;
    --header-height: 76px;
    --marquee-height: 52px;
  }
}

/* State Theme ("Ticket to Success"), switched in admin > Site-wide.
   Muted plum takes navy's place and lavender takes cobalt's. Links, icons
   and small labels move from blue to a deep lavender that holds contrast
   on white; FBLA blue stays in the logo and focus rings. */
html[data-design="state"] {
  --navy:     #4e3678;
  --navy-rgb: 78 54 120;
  --blue:     #6f58a8;
  --cobalt:   #c3b1e9;
  --lavender: #c3b1e9;
  --blue-50:  #f6f2fd;
  --blue-100: #ece4f9;
  --line:     #e5ddf1;
  --text-muted: #5f5873;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keeps anchor targets clear of the header when it reveals. */
  scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open { overflow: hidden; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

a { color: inherit; text-decoration: none; }

svg { flex-shrink: 0; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

::selection { background: var(--gold); color: var(--navy); }

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
main {
  flex: 1;
  opacity: 1;
  transition: opacity var(--transition);
}
main.fading { opacity: 0; }

.container,
.section-inner {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Sections already pad the inner container, so it only centres there. */
.section { padding: var(--section-space) 0; }
.section--tight { padding-top: 0; }
.section-alt,
.section--tint { background: var(--blue-50); }

.page { max-width: 1100px; margin: 0 auto; padding: 2.5rem var(--gutter) 4rem; }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 40px;
}
.section__head .lead { max-width: 560px; }

/* ==========================================================================
   Typography
   ========================================================================== */
/* Brand guide: Medium, uppercase for subheads */
.eyebrow,
.section-eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.display {
  font-size: clamp(2.5rem, 5.6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.h2,
.section-title {
  font-size: clamp(1.875rem, 3.6vw, 2.75rem);
  line-height: 1.15;
}
.section-title { margin-bottom: 32px; }
.section__head .section-title,
.section__head .h2 { margin-bottom: 0; }

.h3 { font-size: 1.25rem; line-height: 1.25; }

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: var(--text-muted);
}

/* Short gold rule; kept for pages that still place one under a title. */
.section-line {
  width: 56px;
  height: 4px;
  margin: -16px 0 32px;
  border-radius: 4px;
  background: var(--gold);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-weight: 700;
}
.text-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.text-link svg { width: 18px; height: 18px; transition: transform var(--transition); }
.text-link:hover svg { transform: translateX(3px); }

/* ==========================================================================
   Buttons (pill buttons, as on fbla.org)
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition),
    color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}
.btn:disabled { opacity: .6; cursor: not-allowed; }

.btn--gold,
.btn-primary { background: var(--gold); color: var(--navy); }
.btn--gold:hover,
.btn-primary:hover { background: var(--gold-hover); box-shadow: 0 6px 18px rgba(244, 171, 25, 0.35); }

.btn--navy,
.btn-navy { background: var(--navy); color: var(--white); }
.btn--navy:hover,
.btn-navy:hover { background: var(--blue); color: var(--white); }

.btn--outline { border-color: var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--white); }

/* Outline on navy (hero, CTA band) */
.btn--outline-light,
.btn-outline { border-color: rgba(255, 255, 255, 0.7); background: transparent; color: var(--white); }
.btn--outline-light:hover,
.btn-outline:hover { border-color: var(--white); background: var(--white); color: var(--navy); }

.btn--soft {
  border-color: var(--line);
  background: var(--white);
  color: var(--navy);
  font-weight: 500;
  box-shadow: 0 1px 2px rgb(var(--navy-rgb) / 0.06);
}
.btn--soft:hover { border-color: var(--blue); color: var(--blue); }

.btn-danger { background: #c62828; color: var(--white); }

.btn--sm { min-height: 40px; padding: 8px 20px; font-size: 14px; }
.btn-full { width: 100%; justify-content: center; }

.btn .arrow { transition: transform var(--transition); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-row,
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   Header / navbar
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  box-shadow: 0 1px 0 var(--line);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1), box-shadow var(--transition);
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--line), 0 6px 20px rgb(var(--navy-rgb) / 0.08);
}

/* Slides out of view while scrolling down, back in on scroll up (see
   initHeaderScroll in site.js). */
.site-header.header-hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
  .site-header.header-hidden { transform: none; }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-height);
}

/* Logo: 168px wide, so brand clear space (1/6 of width) is 28px. */
.logo-area {
  display: flex;
  align-items: center;
  gap: 28px;
  color: var(--navy);
}
.logo-img { width: 168px; height: auto; }

.logo-chapter {
  display: flex;
  flex-direction: column;
  padding-left: 28px;
  border-left: 1px solid var(--line);
  color: var(--navy);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.logo-chapter .chapter-school { font-weight: 700; }

#main-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 15px;
  font-weight: 500;
}

#main-nav a:not(.btn) {
  position: relative;
  padding: 8px 0;
  color: var(--black);
  transition: color var(--transition);
}
#main-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--transition);
}
#main-nav a:not(.btn):hover,
#main-nav a.active:not(.btn) { color: var(--navy); }
#main-nav a:not(.btn):hover::after,
#main-nav a.active:not(.btn)::after { transform: scaleX(1); }
#main-nav a.active:not(.btn) { font-weight: 700; }
#main-nav .btn.active { box-shadow: 0 0 0 3px var(--blue-100); }

.hamburger {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  cursor: pointer;
}
.hamburger span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger span:nth-child(1) { top: 14px; }
.hamburger span:nth-child(2) { top: 21px; }
.hamburger span:nth-child(3) { top: 28px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1023px) {
  #main-nav { gap: 24px; }
  .logo-area { gap: 20px; }
  .logo-chapter { padding-left: 20px; }
}

@media (max-width: 900px) and (min-width: 768px) {
  .logo-chapter { display: none; }
}

@media (max-width: 767px) {
  .logo-img { width: 132px; }
  .logo-area { gap: 16px; }
  .logo-chapter { padding-left: 16px; font-size: 11px; }

  .hamburger { display: block; }

  /* Positioned against the header (not the viewport) because the header's
     hide-on-scroll transform makes it the containing block. */
  #main-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 32px;
    overflow-y: auto;
    border-top: 1px solid var(--line);
    background: var(--white);
    font-size: 22px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--duration);
  }
  #main-nav.open { opacity: 1; visibility: visible; }

  #main-nav a:not(.btn) {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }
  #main-nav a:not(.btn)::after { display: none; }
  #main-nav a.active:not(.btn) { color: var(--blue); }
  #main-nav .btn { width: 100%; min-height: 56px; margin-top: 24px; font-size: 17px; }
}

@media (max-width: 480px) {
  .logo-chapter .chapter-tag { display: none; }
}

@media (max-width: 340px) {
  .logo-chapter { display: none; }
}

/* ==========================================================================
   Home: hero (navy panel, SERVICE / EDUCATION / PROGRESS like fbla.org)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--white);
}

/* Blue + gold bars share the delta's rising angle and cut across the
   bottom-right corner. Blue sits in the corner so the gold stripe never
   touches the gold results band below. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  right: -240px;
  width: 900px;
  transform: rotate(-30deg);
  transform-origin: right center;
  pointer-events: none;
}
.hero::before { bottom: 250px; height: 64px; background: var(--blue); }
.hero::after  { bottom: 336px; height: 14px; background: var(--gold); }

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 64px;
  /* Header + hero (+ results band when shown) fill the first screen. */
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  padding-top: 104px;
  padding-bottom: 112px;
}
.hero:has(+ .results-marquee) .hero__inner {
  min-height: calc(100vh - var(--header-height) - var(--marquee-height));
  min-height: calc(100svh - var(--header-height) - var(--marquee-height));
}
.hero__inner--single { grid-template-columns: minmax(0, 1fr); }

.hero__title {
  margin-bottom: 28px;
  color: var(--white);
}
.hero__title span { display: block; }
.hero__title-main {
  max-width: 12ch;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero__title-sub {
  margin-top: 16px;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

/* Brand guide: Medium for body copy on dark backgrounds */
.hero__lead {
  max-width: 46ch;
  margin-bottom: 40px;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.55;
}

/* Stacked tagline, as on the fbla.org home slider */
.hero__words {
  display: grid;
  gap: 2px;
  padding-left: 28px;
  border-left: 4px solid var(--gold);
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero__words span:nth-child(3n+1) { color: var(--white); }
/* Cobalt lifted toward white so it holds contrast on navy */
.hero__words span:nth-child(3n+2) { color: #8fb4f0; }
.hero__words span:nth-child(3n)   { color: var(--gold); }

/* ==========================================================================
   Home: section-by-section scrolling
   Desktop pointers only; phones and tablets keep free scrolling. Each
   top-level section stops the scroll at its start; quick links don't get
   their own stop when an announcement leads them. Sections taller than the
   viewport still scroll freely inside.
   ========================================================================== */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html.snap-sections {
    scroll-snap-type: y mandatory;
    /* Sections carry their own top padding, which the header covers when it
       reveals; the hero offsets by the header so it stops at the page top. */
    scroll-padding-top: 0;
  }
  .snap-sections :is(.hero, main > .section, .announcement-section) {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .snap-sections .hero { scroll-margin-top: var(--header-height); }
  /* The next-event block has no top padding of its own, so it stops a
     section's worth of space above its heading, matching the others. */
  .snap-sections main > .section--tight { scroll-margin-top: var(--section-space); }
  .snap-sections .announcement-section + .section { scroll-snap-align: none; }
  .snap-sections .site-footer { scroll-snap-align: end; }
}

/* ==========================================================================
   Page banner (sub-page header)
   ========================================================================== */
.page-banner {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 9vw, 104px) 0;
  background: var(--navy);
  color: var(--white);
}
.page-banner::before,
.page-banner::after {
  content: "";
  position: absolute;
  right: -80px;
  width: 420px;
  border-radius: 24px;
  transform: rotate(-30deg);
  pointer-events: none;
}
.page-banner::before { top: -60px; height: 120px; background: var(--cobalt); opacity: 0.55; }
.page-banner::after  { bottom: -30px; height: 44px; background: var(--gold); }

.page-banner .container { position: relative; z-index: 1; }
.page-banner .eyebrow { color: var(--gold); }
.page-banner .display { max-width: 16ch; color: var(--white); }
.page-banner p {
  max-width: 620px;
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 500;
}

@media (max-width: 767px) {
  .page-banner::before,
  .page-banner::after { right: -260px; }
  .hero::before { bottom: 171px; height: 36px; }
  .hero::after  { bottom: 235px; height: 8px; }
}

/* ==========================================================================
   Results marquee (gold band under the hero)
   The track holds two identical groups and translates -50% per loop, so the
   animation wraps seamlessly. Hover pauses; reduced-motion shows it static.
   ========================================================================== */
/* Fixed height so the hero above can size itself to fill the first screen. */
.results-marquee {
  display: flex;
  align-items: center;
  height: var(--marquee-height);
  overflow: hidden;
  background: var(--gold);
}
.results-track {
  display: flex;
  flex-shrink: 0;
  width: max-content;
  animation: results-scroll 60s linear infinite;
}
.results-marquee:hover .results-track { animation-play-state: paused; }
.results-group { display: flex; align-items: center; flex-shrink: 0; }
.result-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
.result-chip::before {
  content: '';
  align-self: center;
  width: 6px;
  height: 6px;
  margin: 0 32px;
  background: var(--navy);
  opacity: .45;
  transform: rotate(45deg);
  flex-shrink: 0;
}
.result-value {
  color: var(--navy);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.result-label {
  color: var(--navy);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
@keyframes results-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .results-track { animation: none; }
}

/* ==========================================================================
   Callout band (light blue, rounded, as on fbla.org)
   ========================================================================== */
.callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px 48px;
  padding: 48px 56px;
  border-radius: var(--radius);
  background: var(--blue-100);
}
.callout .eyebrow { margin-bottom: 12px; }
.callout .h2 {
  margin-bottom: 12px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.callout p { max-width: 720px; color: var(--black); }

.announcement-section { padding-top: 56px; }

/* ==========================================================================
   Quick links (icon tiles)
   ========================================================================== */
.quick-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
}
.quick-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 32px 16px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  text-align: center;
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.quick-link svg {
  width: 44px;
  height: 44px;
  color: var(--blue);
  transition: transform var(--transition);
}
.quick-link:hover { border-color: transparent; background: var(--blue-50); }
.quick-link:hover svg { transform: translateY(-3px); }

/* ==========================================================================
   Feature (Save the Date: next event)
   ========================================================================== */
.feature__title { max-width: 26ch; margin-bottom: 40px; }

.feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 48px;
}

/* Navy date panel standing in for the event photo */
.feature__date {
  position: relative;
  display: grid;
  place-content: center;
  gap: 4px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white);
  text-align: center;
  overflow: hidden;
}
.feature__date::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -18px;
  width: 220px;
  height: 36px;
  border-radius: 18px;
  background: var(--gold);
  transform: rotate(-30deg);
}
.feature__date-month {
  color: var(--gold);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.feature__date-day {
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.feature__body {
  display: grid;
  gap: 20px;
  justify-items: start;
}
.feature__body p { color: var(--text-muted); }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  color: var(--navy);
  font-weight: 700;
}
.meta span { display: inline-flex; align-items: center; gap: 8px; }
.meta svg { width: 18px; height: 18px; color: var(--blue); }

/* ==========================================================================
   Events (date tile rows)
   ========================================================================== */
.event-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.event {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.event__date {
  display: grid;
  place-content: center;
  width: 76px;
  height: 76px;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--navy);
  line-height: 1;
  text-align: center;
}
.event__date span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.event__date strong {
  display: block;
  margin-top: 4px;
  font-size: 28px;
  letter-spacing: -0.02em;
}
.event__date--range strong { font-size: 19px; }
.event__date--raw strong { font-size: 14px; letter-spacing: 0; }

.event__title { font-size: 1.1875rem; line-height: 1.25; }
.event__desc {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.5;
}

.event-redacted { display: flex; flex-direction: column; gap: 4px; }
.redact-bar {
  display: inline-block;
  width: fit-content;
  padding: 0 3px;
  border-radius: 3px;
  background: var(--black);
  color: transparent;
  font-size: .88em;
  line-height: 1.45;
  user-select: none;
}

.events-empty {
  padding: 28px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--text-muted);
  text-align: center;
}

/* ==========================================================================
   Embedded calendar
   ========================================================================== */
.embeds-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 880px) {
  .embeds-grid.two-col { grid-template-columns: 1fr 1fr; }
}
.embed-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.embed-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font-weight: 700;
}
.embed-card-head svg { color: var(--blue); }
.embed-frame {
  display: block;
  width: 100%;
  height: 520px;
  border: 0;
  background: var(--blue-50);
}

/* Chapter photo slideshow (home page) */
.slideshow {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.slideshow__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--navy);
}
.slideshow__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 800ms var(--ease);
}
.slideshow__img:not([src]) { visibility: hidden; }
.slideshow__img.is-active { opacity: 1; }
.slideshow__status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--white);
  font-weight: 600;
}
.slideshow__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
}
.slideshow__caption {
  flex: 1 1 200px;
  min-height: 1.5em;
  margin: 0;
  color: var(--navy);
  font-weight: 700;
}
.slideshow__controls { display: flex; gap: 8px; }
.slideshow__controls[hidden],
.slideshow__status[hidden] { display: none; }
.slideshow__btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.slideshow__btn:hover { background: var(--blue-50); border-color: var(--blue); }
.slideshow__link { font-weight: 600; white-space: nowrap; }
@media (max-width: 600px) {
  .slideshow__stage { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .slideshow__img { transition: none; }
}

/* ==========================================================================
   CTA band (navy)
   ========================================================================== */
.cta-banner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding: 56px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white);
}
.cta-banner::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -22px;
  width: 300px;
  height: 40px;
  border-radius: 20px;
  background: var(--gold);
  transform: rotate(-30deg);
  pointer-events: none;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color: var(--white); font-size: clamp(1.625rem, 3vw, 2.25rem); }
.cta-banner p {
  max-width: 560px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 500;
}

/* ==========================================================================
   About: officers (modeled on the SummitFBLA officer cards)
   ========================================================================== */
.officers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.officer {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.officer:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-2px); }

/* Headshots are already cut to circles, so they sit inset on a light tint. */
.officer-avatar {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 20px;
  overflow: hidden;
  background: var(--blue-50);
}
.officer-avatar img,
.officer-avatar > span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
/* Initials badge when there's no photo, or it fails to load */
.officer-avatar > span {
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--gold);
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.officer-body {
  padding: 18px 20px 22px;
  border-top: 4px solid var(--gold);
}
.officer-role {
  color: var(--blue);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.officer-name {
  margin-top: 6px;
  font-size: 1.1875rem;
}

/* Adviser: full-width card, photo beside the text */
.officer--adviser {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-column: 1 / -1;
}
.officer--adviser .officer-avatar { padding: 24px; }
.officer--adviser .officer-body {
  align-self: center;
  padding: 28px 32px;
  border-top: 0;
  border-left: 4px solid var(--gold);
}
.officer--adviser .officer-name { font-size: 1.5rem; }
/* Adviser sits between the section heading and the officer grid */
.officers--adviser { margin-bottom: 24px; }

/* ==========================================================================
   Split layout (heading beside content)
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 64px;
}
.split .lead { margin-top: 16px; }
.split .h2 { margin: 0; }

/* ==========================================================================
   Password page (study + archive)
   ========================================================================== */
.password-page {
  max-width: 460px;
  margin: 0 auto;
  padding: 72px var(--gutter) 96px;
}

.password-card {
  position: relative;
  overflow: hidden;
  padding: 44px 36px 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  text-align: center;
}
.password-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gold);
}

.password-card .lock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--navy);
}

.password-card h2 {
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 1.625rem;
}
.password-card p {
  margin-bottom: 24px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.password-input-wrap { position: relative; margin-bottom: 16px; }
.password-input-wrap input {
  width: 100%;
  padding: 14px 44px 14px 18px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.password-input-wrap input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29, 82, 188, .15);
}
.password-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transform: translateY(-50%);
}

.error-msg {
  display: none;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid #ffcdd2;
  border-radius: 8px;
  background: #fff0f0;
  color: #c62828;
  font-size: 14px;
}
.error-msg.show { display: block; }

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border: 2.5px solid rgb(var(--navy-rgb) / .3);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Study page
   ========================================================================== */
.study-content { max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 56px var(--gutter) 96px; }

.study-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 32px;
  padding: 14px 18px;
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  background: #fff6e3;
  color: var(--black);
  font-size: 15px;
  line-height: 1.5;
}
.study-warning svg { flex-shrink: 0; margin-top: 2px; color: #b57800; }

/* Light-blue callout, as on fbla.org */
.study-events-cta {
  margin-bottom: 40px;
  padding: 40px 48px;
  border-radius: var(--radius);
  background: var(--blue-100);
}
.study-events-cta-title {
  margin-bottom: 10px;
  color: var(--navy);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
}
.study-events-cta-desc {
  max-width: 760px;
  margin-bottom: 20px;
  color: var(--black);
  line-height: 1.65;
}
.study-events-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  transition: background-color var(--transition);
}
.study-events-cta-link:hover { background: var(--blue); }
.study-events-cta-link svg { flex-shrink: 0; }

.study-fbla-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}
.study-fbla-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border: 2px solid var(--navy);
  border-radius: var(--radius-pill);
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  transition: background-color var(--transition), color var(--transition);
}
.study-fbla-link:hover { background: var(--navy); color: var(--white); }
.study-fbla-link svg { flex-shrink: 0; }

.study-accordion { display: grid; gap: 12px; }
.study-section {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.study-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  color: var(--navy);
  font-size: 1.125rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  transition: background-color var(--transition);
}
.study-section summary::-webkit-details-marker { display: none; }
.study-section summary:hover { background: var(--blue-50); }
.study-section-chevron {
  flex-shrink: 0;
  box-sizing: content-box;
  padding: 7px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue);
  transition: transform var(--transition);
}
.study-section[open] .study-section-chevron { transform: rotate(180deg); }
.study-section-body {
  padding: 4px 24px 24px;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.6;
}
.study-section-empty { color: var(--text-muted); font-style: italic; }
.study-block { padding-top: 20px; border-top: 1px solid var(--line); }
.study-block + .study-block { margin-top: 20px; }
.study-block-header {
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 1.125rem;
}
.study-block-desc {
  margin-bottom: 8px;
  color: var(--black);
  line-height: 1.65;
}
.study-block-desc:last-child { margin-bottom: 0; }
.study-block-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
}
.study-block-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 700;
}
.study-block-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.study-block-links svg { flex-shrink: 0; }

.study-events {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 155px;
  margin-bottom: 48px;
  padding-right: 6px;
  overflow-y: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
}
.study-events.at-bottom { -webkit-mask-image: none; mask-image: none; }

.events-search-wrap { position: relative; margin-bottom: 20px; }
.events-search-wrap svg {
  position: absolute;
  top: 50%;
  left: 16px;
  color: var(--text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.events-search {
  width: 100%;
  padding: 12px 18px 12px 44px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.events-search:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29, 82, 188, .15);
}

.event-card-tag {
  display: inline-block;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--blue-100);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.event-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.event-row:hover { border-color: transparent; box-shadow: var(--shadow); }
.event-row-info { flex: 1; min-width: 0; }
.event-row-info h4 { margin-bottom: 2px; color: var(--navy); font-size: 1rem; }
.event-row-info p { color: var(--text-muted); font-size: 14px; line-height: 1.45; }
.event-row-actions { display: flex; flex-shrink: 0; align-items: center; gap: 14px; }
.event-row-actions a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.event-row-actions a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .event-row { flex-direction: column; align-items: stretch; }
  .event-row-actions { justify-content: space-between; }
}

/* ==========================================================================
   Chatbot (study assistant)
   ========================================================================== */
.chatbot-section {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--blue-50);
  box-shadow: var(--shadow);
}

.chatbot-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 4px solid var(--gold);
  background: var(--navy);
  color: var(--white);
}
.chatbot-avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold);
}
.chatbot-header .bot-name { font-size: 15px; font-weight: 700; }
.chatbot-header .bot-sub { color: rgba(255, 255, 255, .75); font-size: 12px; }
.chatbot-status {
  width: 9px;
  height: 9px;
  margin-left: auto;
  border-radius: 50%;
  background: #4cde80;
  box-shadow: 0 0 6px #4cde80;
}

.chatbot-messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.message { max-width: 82%; animation: msgIn .25s ease forwards; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.message.user { align-self: flex-end; }
.message.bot  { align-self: flex-start; }

.msg-bubble {
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.6;
}
.message.user .msg-bubble {
  border-bottom-right-radius: 4px;
  background: var(--navy);
  color: var(--white);
}
.message.bot .msg-bubble {
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  background: var(--white);
  color: var(--black);
}
.msg-name {
  margin-bottom: 3px;
  padding: 0 4px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: var(--white);
}
.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: typingBounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}

.chatbot-input-area {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  background: var(--white);
}
.chatbot-input-area textarea {
  flex: 1;
  max-height: 120px;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--blue-50);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  transition: border-color var(--transition);
}
.chatbot-input-area textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(29, 82, 188, .12);
}

.send-btn {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  cursor: pointer;
  transition: background-color var(--transition), box-shadow var(--transition);
}
.send-btn:hover { background: var(--gold-hover); box-shadow: 0 6px 18px rgba(244, 171, 25, 0.35); }
.send-btn:disabled { background: #d9d9d9; color: #999; box-shadow: none; cursor: not-allowed; }

/* Launcher + sidebar */
.chat-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 24px 0 18px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 10px 26px rgb(var(--navy-rgb) / .35);
  cursor: pointer;
  transition: background-color var(--transition), box-shadow var(--transition), opacity .2s ease, transform .2s ease;
}
.chat-fab-label { font-family: var(--font-body); font-size: 15px; font-weight: 700; white-space: nowrap; }
.chat-fab:hover { background: var(--blue); box-shadow: 0 14px 32px rgb(var(--navy-rgb) / .45); }
.chat-fab.hidden { opacity: 0; pointer-events: none; transform: scale(.6); }

.chat-overlay {
  position: fixed;
  inset: 0;
  z-index: 1250;
  background: rgba(10, 20, 45, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.chat-overlay.show { opacity: 1; pointer-events: auto; }

.chat-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  width: 400px;
  max-width: 92vw;
  height: 100%;
  background: var(--blue-50);
  box-shadow: -8px 0 32px rgba(0, 0, 0, .22);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.chat-sidebar.open { transform: translateX(0); }
.chat-sidebar .chatbot-header { flex-shrink: 0; border-radius: 0; }
.chat-sidebar .chatbot-input-area { flex-shrink: 0; }

.chat-close {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 8px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--transition);
}
.chat-close:hover { background: rgba(255, 255, 255, .28); }

@media (max-width: 480px) {
  .chat-fab { right: 16px; bottom: 16px; height: 50px; padding: 0 20px 0 16px; }
}

/* ==========================================================================
   Access denied
   ========================================================================== */
.denied { padding: 128px var(--gutter); text-align: center; }
.denied h2 { margin-bottom: 12px; color: var(--navy); font-size: 2rem; }
.denied p { margin-bottom: 24px; color: var(--text-muted); }

/* ==========================================================================
   Footer (white, as in the SummitFBLA template, with a navy bottom strip)
   ========================================================================== */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: var(--white);
}

.footer__main {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: 48px;
  padding-top: 64px;
  padding-bottom: 56px;
}

/* Full-name logo, 264px wide: 44px clear space below */
.footer-logo { width: 264px; height: auto; margin-bottom: 44px; }

.footer-location {
  margin-bottom: 8px;
  color: var(--navy);
  font-weight: 700;
}
.footer-location .dot { margin: 0 6px; opacity: .55; }

.footer__tagline {
  max-width: 340px;
  color: var(--text-muted);
  font-size: 15px;
}

.insta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 8px 18px 8px 8px;
  border-radius: var(--radius-pill);
  background: var(--blue-50);
  color: var(--navy);
  font-size: 15px;
  font-weight: 500;
  transition: background-color var(--transition), color var(--transition);
}
.insta-link .insta-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  transition: background-color var(--transition), color var(--transition);
}
.insta-link:hover { background: var(--navy); color: var(--white); }
.insta-link:hover .insta-icon { background: var(--gold); color: var(--navy); }

.footer__heading {
  margin-bottom: 16px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer__list {
  display: grid;
  gap: 10px;
  color: var(--black);
  font-size: 15px;
  list-style: none;
}
.footer__list a:hover {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__bottom {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}
.footer__bottom .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 18px;
  padding-bottom: 18px;
}
.footer__bottom-right { display: flex; align-items: center; gap: 24px; }

.footer-tag {
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer-tag strong { color: var(--gold); font-weight: 500; }

.footer-admin {
  color: rgba(255, 255, 255, .55);
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color var(--transition);
}
.footer-admin:hover { color: var(--gold); }

/* ==========================================================================
   Utility
   ========================================================================== */
.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim   { animation: fadeUp .5s var(--ease) both; }
.anim-1 { animation-delay: .05s; }
.anim-2 { animation-delay: .12s; }
.anim-3 { animation-delay: .19s; }
.anim-4 { animation-delay: .26s; }

/* ==========================================================================
   Quiz (study page)
   ========================================================================== */
.quiz-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: 4px;
  padding: 7px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--gold);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition);
}
.quiz-btn:hover { background: var(--blue); }

.quiz-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 20, 45, .55);
  animation: qFadeIn .2s ease;
}
@keyframes qFadeIn { from { opacity: 0; } to { opacity: 1; } }

.quiz-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.quiz-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--navy);
  color: var(--white);
}
.quiz-title { flex: 1; font-size: 1rem; font-weight: 700; }
.quiz-meta { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.quiz-timer {
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .18);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.quiz-timer.warning { background: rgba(198, 40, 40, .9); animation: timerPulse .8s infinite; }
@keyframes timerPulse { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }

.quiz-progress-bar { flex-shrink: 0; height: 4px; background: var(--blue-100); }
.quiz-progress-fill { height: 100%; background: var(--gold); transition: width .35s ease; }

.quiz-body { flex: 1; padding: 28px 24px; }
.quiz-question-num {
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.quiz-question-text {
  margin-bottom: 20px;
  color: var(--black);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
}
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.quiz-option:hover:not(:disabled) { border-color: var(--blue); background: var(--blue-50); }
.opt-letter {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  transition: background-color .15s, border-color .15s, color .15s;
}
.quiz-option.correct { border-color: #2e7d32; background: #f1f8e9; }
.quiz-option.correct .opt-letter { border-color: #2e7d32; background: #2e7d32; color: #fff; }
.quiz-option.wrong { border-color: #c62828; background: #fff5f5; }
.quiz-option.wrong .opt-letter { border-color: #c62828; background: #c62828; color: #fff; }
.quiz-option:disabled { cursor: default; }

.quiz-next-btn {
  width: 100%;
  min-height: 48px;
  margin-top: 18px;
  padding: 12px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition);
}
.quiz-next-btn:hover { background: var(--blue); }

.quiz-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 56px 32px;
  text-align: center;
}
.quiz-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--blue-100);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: qSpin .8s linear infinite;
}
@keyframes qSpin { to { transform: rotate(360deg); } }

.quiz-score-screen { padding: 32px 24px; text-align: center; }
.quiz-score-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 118px;
  height: 118px;
  margin: 0 auto 20px;
  border: 6px solid var(--gold);
  border-radius: 50%;
}
.quiz-score-pct { color: var(--navy); font-size: 2rem; font-weight: 700; line-height: 1; }
.quiz-score-lbl { margin-top: 2px; color: var(--text-muted); font-size: 12px; }

.quiz-score-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px;
  margin-bottom: 24px;
}
.quiz-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.quiz-stat-val { font-size: 1.3rem; font-weight: 700; }
.quiz-stat-key { color: var(--text-muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }

.quiz-review { padding-top: 20px; border-top: 1px solid var(--line); text-align: left; }
.quiz-review h3 { margin-bottom: 14px; color: var(--navy); font-size: 1rem; }
.review-item {
  margin-bottom: 10px;
  padding: 14px 16px;
  border-left: 3px solid #c62828;
  border-radius: var(--radius);
  background: var(--blue-50);
}
.review-item .rq { margin-bottom: 6px; font-size: 15px; font-weight: 500; line-height: 1.45; }
.review-item .ra { color: var(--text-muted); font-size: 14px; line-height: 1.6; }

.quiz-score-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.quiz-history-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.quiz-history-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.quiz-history-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.qhi-event { flex: 1; min-width: 140px; font-size: 15px; font-weight: 700; }
.qhi-score { font-size: 1.1rem; font-weight: 700; }
.qhi-meta  { color: var(--text-muted); font-size: 13px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1023px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .quick-links,
  .officers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-list { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 32px; }

  .footer__main { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .hero__inner { padding-top: 64px; padding-bottom: 96px; }
  .hero__words { padding-left: 20px; }

  .result-value { font-size: 1.375rem; }
  .result-chip::before { margin: 0 20px; }

  .callout {
    grid-template-columns: 1fr;
    padding: 32px 24px;
  }
  .announcement-section { padding-top: 40px; }

  .quick-links { gap: 8px; }
  .quick-link { padding: 20px 8px; font-size: 15px; }
  .quick-link svg { width: 36px; height: 36px; }

  .feature__grid { grid-template-columns: 1fr; gap: 28px; }

  .event { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .event__date { width: 64px; height: 64px; }
  .event__date strong { font-size: 24px; }
  .event__date--range strong { font-size: 16px; }

  .officers { gap: 12px; }
  .officer-avatar { padding: 12px; }
  .officer-body { padding: 14px 14px 16px; }
  .officer-name { font-size: 1rem; }
  .officer-role { font-size: 11px; letter-spacing: 0.08em; }
  .officer--adviser { grid-template-columns: 1fr; }
  .officer--adviser .officer-body {
    padding: 20px;
    border-top: 4px solid var(--gold);
    border-left: 0;
  }

  .cta-banner { padding: 36px 24px; }
  .study-events-cta { padding: 28px 24px; }
  .study-content { padding-top: 40px; }

  .footer__main { grid-template-columns: 1fr; gap: 36px; padding-top: 48px; }
  .footer__bottom .container { flex-direction: column; align-items: flex-start; }
  .footer__bottom-right { flex-wrap: wrap; gap: 8px 20px; }
}

/* ==========================================================================
   State Theme: tickets
   Everything here is scoped to html[data-design="state"]; Classic never
   sees it. The hero ticket is the one bold element; date tiles and the
   results band borrow its perforations quietly.
   ========================================================================== */
/* No corner bars in the State Theme: the ticket fills that corner */
[data-design="state"] .hero::before,
[data-design="state"] .hero::after { display: none; }

[data-design="state"] .page-banner::before { opacity: 0.9; }

/* The header, the hero ticket and the results band keep the classic FBLA
   navy and blue in the State Theme: blue print on gold, not plum. */
[data-design="state"] :is(.site-header, .hero__ticket, .results-marquee, .hero .btn--gold) {
  --navy: #0a2e7f;
  --navy-rgb: 10 46 127;
  --blue: #1d52bc;
}
/* Every navbar link in FBLA navy, not just the current page */
[data-design="state"] #main-nav a:not(.btn) { color: var(--navy); }

/* Hero: one oversized golden ticket behind the headline, tilted and running
   off the right edge. The ticket is two pieces, stub and body, each with
   concave corners; where they meet, the corners form the punched notches
   either side of the perforation. The stub faces the headline so it stays
   on screen. Sizes inside the ticket use cqw (the ticket's width). */
.hero__ticket {
  position: absolute;
  z-index: 1; /* above the corner bars */
  top: 50%;
  left: 53%;
  width: max(760px, 58vw);
  translate: 0 -50%;
  rotate: -9deg;
  animation: ticket-in 1s var(--ease) .15s both;
  pointer-events: none;
}
.ticket {
  --notch: 30px;
  display: grid;
  grid-template-columns: 19% minmax(0, 1fr);
  width: 100%;
  container-type: inline-size;
  color: var(--navy);
}
.ticket__body,
.ticket__stub {
  position: relative;
  overflow: hidden;
  background: var(--gold);
  -webkit-mask:
    radial-gradient(circle var(--notch) at 0 0,       #0000 98%, #000) 0 0       / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 0,    #0000 98%, #000) 100% 0    / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 0 100%,    #0000 98%, #000) 0 100%    / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) 100% 100% / 51% 51% no-repeat;
          mask:
    radial-gradient(circle var(--notch) at 0 0,       #0000 98%, #000) 0 0       / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 0,    #0000 98%, #000) 100% 0    / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 0 100%,    #0000 98%, #000) 0 100%    / 51% 51% no-repeat,
    radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) 100% 100% / 51% 51% no-repeat;
}
.ticket__stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 56px 0;
  /* Perforation on the stub's right edge, drawn short of the notches */
  background:
    linear-gradient(rgb(var(--navy-rgb) / 0.45) 50%, transparent 0) 100% 50% / 3px 14px repeat-y,
    var(--gold);
}
.ticket__stub span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.ticket__admit {
  font-size: max(16px, 2.8cqw);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ticket__year {
  font-size: max(12px, 1.7cqw);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.ticket__body {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 56px 64px 52px;
}
/* Printed frame, inset past the corner notches */
.ticket__body::before {
  content: "";
  position: absolute;
  inset: 18px 18px 18px 14px;
  border: 1.5px solid rgb(var(--navy-rgb) / 0.3);
  border-radius: 4px;
  pointer-events: none;
}
.ticket__school {
  max-width: 9em;
  font-size: 7.8cqw;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.ticket__org {
  font-size: max(15px, 2.3cqw);
  font-weight: 500;
  line-height: 1.3;
}
.ticket__words {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin-top: 1.6cqw;
  padding-top: 1.8cqw;
  border-top: 1.5px solid rgb(var(--navy-rgb) / 0.3);
  font-size: max(12px, 1.6cqw);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ticket__words span { display: inline-flex; align-items: center; }
/* Small dot between each tagline word */
.ticket__words span + span::before {
  content: "";
  width: 0.36em;
  height: 0.36em;
  margin: 0 0.95em;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* Rises into place the way a ticket is handed over */
@keyframes ticket-in {
  from { opacity: 0; transform: translateY(40px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Next up: the date panel becomes a purple ticket stub */
[data-design="state"] .feature__date {
  border-radius: 0;
  -webkit-mask:
    radial-gradient(circle 18px at 0 50%,    #0000 98%, #000) 0 0    / 51% 100% no-repeat,
    radial-gradient(circle 18px at 100% 50%, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
          mask:
    radial-gradient(circle 18px at 0 50%,    #0000 98%, #000) 0 0    / 51% 100% no-repeat,
    radial-gradient(circle 18px at 100% 50%, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
}
[data-design="state"] .feature__date::before {
  content: "";
  position: absolute;
  inset: 14px 30px;
  border: 1.5px dashed rgb(195 177 233 / 0.55);
  border-radius: 6px;
  pointer-events: none;
}

/* Event list: gold date tiles become torn-off stubs */
[data-design="state"] .event__date {
  border-radius: 6px;
  -webkit-mask:
    radial-gradient(circle 7px at 0 50%,    #0000 98%, #000) 0 0    / 51% 100% no-repeat,
    radial-gradient(circle 7px at 100% 50%, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
          mask:
    radial-gradient(circle 7px at 0 50%,    #0000 98%, #000) 0 0    / 51% 100% no-repeat,
    radial-gradient(circle 7px at 100% 50%, #0000 98%, #000) 100% 0 / 51% 100% no-repeat;
}

/* Results band: a roll of tickets, each result torn at a perforation */
[data-design="state"] .results-marquee {
  box-shadow: inset 0 3px 0 rgb(var(--navy-rgb) / 0.12), inset 0 -3px 0 rgb(var(--navy-rgb) / 0.12);
}
/* The perforation overruns the chip and is clipped by the band, so it runs
   edge to edge while the numbers keep their baseline. */
[data-design="state"] .result-chip { position: relative; padding-left: 66px; }
[data-design="state"] .result-chip::before {
  position: absolute;
  top: -40px;
  bottom: -40px;
  left: 32px;
  align-self: stretch;
  width: 0;
  height: auto;
  margin: 0;
  border-left: 2px dashed rgb(var(--navy-rgb) / 0.4);
  background: none;
  opacity: 1;
  transform: none;
}

@media (max-width: 1023px) {
  /* The ticket drops below the text and crops off the right and bottom */
  .hero--ticket {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100vh - var(--header-height) - var(--marquee-height));
    min-height: calc(100svh - var(--header-height) - var(--marquee-height));
  }
  .hero--ticket .hero__inner,
  .hero--ticket:has(+ .results-marquee) .hero__inner { min-height: 0; padding-bottom: 40px; }
  .hero__ticket {
    position: relative;
    top: auto;
    left: auto;
    width: min(128%, 820px);
    margin: 0 0 -36px var(--gutter);
    translate: none;
    rotate: -7deg;
  }
}
@media (max-width: 767px) {
  .hero--ticket .hero__inner { padding-top: 48px; }
  .hero__ticket { margin-top: 8px; }
  .ticket { --notch: 16px; }
  .ticket__body { gap: 10px; padding: 30px 28px 34px; }
  .ticket__stub { gap: 16px; padding: 30px 0; }
  [data-design="state"] .result-chip { padding-left: 42px; }
  [data-design="state"] .result-chip::before { left: 20px; }
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .anim { animation: none; }
  .hero__ticket { animation: none; }
}