/*
 * Location  : assets/css/main.css
 * File      : main.css
 * Function  : Global design system – alternating white/black zones,
 *             large parallax images, WCAG 2.2 AA, typography
 * Version   : 2.0.0
 * Generated : 2026-03-17
 * Changelog :
 *   1.0.0 (2026-03-17) – Initial (gold palette)
 *   1.1.0 (2026-03-17) – Stage photo palette
 *   2.0.0 (2026-03-17) – Full rewrite: alternating white/black zones,
 *                         full-viewport hero photo, large B&W parallax dividers
 */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,300&display=swap');

/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════════════════ */
:root {
  /* ── Photo-derived palette ─────────────────────────────
   *  Stage blue  #3d7fff  →  dominant light wash
   *  Violet      #8b5cf6  →  rim/shadow accent
   *  Skin        #c08060  →  human warmth / CTA
   *  Contrast on --zone-dark bg:  blue 5.4:1 ✓  violet 4.6:1 ✓
   * ─────────────────────────────────────────────────────── */
  --clr-accent:      #3d7fff;
  --clr-accent-h:    #6fa3ff;
  --clr-accent-glow: rgba(61,127,255,.22);
  --clr-violet:      #8b5cf6;
  --clr-skin:        #c08060;
  --clr-skin-h:      #d4997a;

  /* ── Zone colours ──────────────────────────────────────
   *  DARK zones: near-black bg, light text
   *  LIGHT zones: white bg, dark text
   * ─────────────────────────────────────────────────────── */
  /* Dark zone */
  --zone-dark:       #080c14;
  --zone-dark-2:     #0d1220;
  --zone-dark-card:  #0f1520;
  --zone-dark-border:#1e2a42;
  --zone-dark-text:  #f0f2f8;   /* 15:1 on dark ✓ */
  --zone-dark-muted: #9aa8c8;   /*  6:1 on dark ✓ */
  --zone-dark-sub:   #4a5870;

  /* Light zone */
  --zone-light:      #ffffff;
  --zone-light-2:    #f4f5f8;
  --zone-light-card: #ffffff;
  --zone-light-border:#dde2ec;
  --zone-light-text: #0d1220;   /* 18:1 on white ✓ */
  --zone-light-muted:#4a5870;   /*  5.5:1 on white ✓ */
  --zone-light-sub:  #8a96ab;

  /* ── Typography ────────────────────────────────────────  */
  --font-display: 'Bebas Neue','Arial Narrow',sans-serif;
  --font-body:    'Barlow','Helvetica Neue',sans-serif;

  --fs-xs:   .75rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-hero: clamp(3rem, 7vw, 7rem);

  /* ── Spacing ───────────────────────────────────────────  */
  --sp-xs:  .5rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.5rem;
  --sp-xl:  4rem;
  --sp-2xl: 6rem;
  --sp-3xl: 9rem;

  /* ── Layout ────────────────────────────────────────────  */
  --container:  1200px;
  --r-sm: 4px; --r-md: 10px; --r-lg: 20px;

  /* ── Motion ────────────────────────────────────────────  */
  --ease:    cubic-bezier(.25,0,.25,1);
  --ease-out:cubic-bezier(0,0,.2,1);
  --fast: 150ms; --base: 300ms; --slow: 600ms;

  /* ── Shadows ───────────────────────────────────────────  */
  --sh-blue:  0 0 40px rgba(61,127,255,.2);
  --sh-card:  0 4px 32px rgba(0,0,0,.12);
  --sh-lg:    0 12px 56px rgba(0,0,0,.22);
}

/* ══════════════════════════════════════════════════════════
   RESET
══════════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body { font-family:var(--font-body); font-size:var(--fs-base); line-height:1.7; overflow-x:hidden; background:var(--zone-dark); }
img  { display:block; max-width:100%; height:auto; }

/* ══════════════════════════════════════════════════════════
   ACCESSIBILITY
══════════════════════════════════════════════════════════ */
.skip-link {
  position:absolute; top:-100%; left:1rem;
  padding:.75rem 1.5rem; background:var(--clr-accent); color:#fff;
  font-weight:600; font-size:var(--fs-sm); border-radius:var(--r-md);
  z-index:9999; text-decoration:none;
}
.skip-link:focus { top:1rem; outline:3px solid #fff; outline-offset:2px; }
:focus-visible { outline:3px solid var(--clr-accent); outline-offset:3px; border-radius:var(--r-sm); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ══════════════════════════════════════════════════════════
   ZONE SYSTEM
   .zone-dark  = black bg, white text
   .zone-light = white bg, dark text
   Sections alternate: dark → light → dark → light …
══════════════════════════════════════════════════════════ */

/* ── Dark zone ─────────────────────────────────────────── */
.zone-dark {
  background: var(--zone-dark);
  color: var(--zone-dark-text);
}
.zone-dark h1,.zone-dark h2,.zone-dark h3,.zone-dark h4 { color: #fff; }
.zone-dark .eyebrow   { color: var(--clr-accent); }
.zone-dark .rule      { background: linear-gradient(90deg,var(--clr-accent),var(--clr-violet)); }
.zone-dark .intro     { color: var(--zone-dark-muted); }
.zone-dark .card-wrap { background:var(--zone-dark-card); border-color:var(--zone-dark-border); }
.zone-dark a:not(.btn) { color:var(--clr-accent); }
.zone-dark a:not(.btn):hover { color:var(--clr-accent-h); }

/* ── Light zone ────────────────────────────────────────── */
.zone-light {
  background: var(--zone-light);
  color: var(--zone-light-text);
}
.zone-light h1,.zone-light h2,.zone-light h3,.zone-light h4 { color: var(--zone-light-text); }
.zone-light .eyebrow  { color: var(--clr-accent); }
.zone-light .rule     { background: linear-gradient(90deg,var(--clr-accent),var(--clr-violet)); }
.zone-light .intro    { color: var(--zone-light-muted); }
.zone-light .card-wrap{ background:var(--zone-light-card); border-color:var(--zone-light-border); box-shadow:var(--sh-card); }
.zone-light .text-muted { color:var(--zone-light-muted); }
.zone-light a:not(.btn) { color:var(--clr-accent); }
.zone-light a:not(.btn):hover { color:var(--clr-accent-h); }
/* Form controls in light zone */
.zone-light .form-control {
  background:#f4f5f8; border-color:var(--zone-light-border); color:var(--zone-light-text);
}
.zone-light .form-label { color:var(--zone-light-muted); }
.zone-light .form-hint  { color:var(--zone-light-sub); }

/* ── Alternate light variant ───────────────────────────── */
.zone-light-alt { background: var(--zone-light-2); color: var(--zone-light-text); }
.zone-light-alt h1,.zone-light-alt h2,.zone-light-alt h3,.zone-light-alt h4 { color:var(--zone-light-text); }
.zone-light-alt .eyebrow { color:var(--clr-accent); }
.zone-light-alt .rule    { background:linear-gradient(90deg,var(--clr-accent),var(--clr-violet)); }
.zone-light-alt .intro   { color:var(--zone-light-muted); }
.zone-light-alt .text-muted { color:var(--zone-light-muted); }

/* ══════════════════════════════════════════════════════════
   PARALLAX DIVIDER
   Full-viewport B&W photo stripe between sections.
   .parallax-divider wraps the scrolling image layer.
   Height configurable via --pd-height custom prop.
══════════════════════════════════════════════════════════ */
.parallax-divider {
  position: relative;
  overflow: hidden;
  height: var(--pd-height, 70vh);
  min-height: 380px;
  isolation: isolate;
}

/* The full-bleed scrolling photo */
.parallax-divider__img {
  position: absolute;
  inset: -20% 0;              /* overshoot so parallax never shows edges */
  background-attachment: fixed;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  filter: grayscale(1) brightness(0.55) contrast(1.15);
  will-change: transform;
  z-index: 0;
}

/* Dark overlay – readable text if any */
.parallax-divider::before {
  content:''; position:absolute; inset:0; z-index:1;
  background: linear-gradient(
    180deg,
    rgba(8,12,20,.45) 0%,
    rgba(8,12,20,.20) 50%,
    rgba(8,12,20,.45) 100%
  );
  pointer-events:none;
}

/* Optional centered text label inside divider */
.parallax-divider__label {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: var(--sp-sm);
  text-align: center;
  color: #fff;
}
.parallax-divider__label h2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem,6vw,6rem);
  letter-spacing: .1em;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.parallax-divider__label p {
  font-size: var(--fs-md);
  color: rgba(255,255,255,.7);
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
  margin: 0;
}

/* Blue/violet accent bar at bottom of divider */
.parallax-divider::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:4px; z-index:3;
  background: linear-gradient(90deg,var(--clr-accent),var(--clr-violet));
}

/* Disable fixed bg on mobile */
@media (max-width:768px) {
  .parallax-divider__img { background-attachment:scroll; inset:0; }
}
@media (prefers-reduced-motion:reduce) {
  .parallax-divider__img { background-attachment:scroll; inset:0; }
}

/* ══════════════════════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════════════════════ */
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:400; line-height:1.05; letter-spacing:.04em; }
h1 { font-size:var(--fs-hero); }
h2 { font-size:var(--fs-3xl); }
h3 { font-size:var(--fs-xl); }
h4 { font-size:var(--fs-lg); }
p  { margin-bottom:1em; }
p:last-child { margin-bottom:0; }

.eyebrow {
  display:inline-block;
  font-family:var(--font-body); font-size:var(--fs-xs); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--clr-accent); margin-bottom:var(--sp-sm);
}
.rule {
  display:block; width:60px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--clr-accent),var(--clr-violet));
  margin:var(--sp-sm) 0;
}
.intro { font-size:var(--fs-md); max-width:640px; line-height:1.8; }
.text-muted { opacity:.7; }

/* ══════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════ */
.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--sp-md); }
.section    { padding:var(--sp-3xl) 0; }

/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.875rem 2.25rem;
  font-family:var(--font-display); font-size:var(--fs-md);
  letter-spacing:.08em; line-height:1;
  border:none; border-radius:var(--r-sm);
  cursor:pointer; text-decoration:none;
  transition:background var(--base) var(--ease-out),
             color var(--base) var(--ease-out),
             transform var(--fast) var(--ease-out),
             box-shadow var(--base) var(--ease-out);
}
.btn:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.btn--primary { background:var(--clr-accent); color:#fff; }
.btn--primary:hover { background:var(--clr-accent-h); transform:translateY(-2px); box-shadow:0 8px 28px rgba(61,127,255,.4); }
.btn--primary:active { transform:translateY(0); }
.btn--dark { background:var(--zone-dark); color:#fff; border:1.5px solid var(--zone-dark-border); }
.btn--dark:hover { background:var(--zone-dark-2); transform:translateY(-2px); }
.btn--outline-dark { background:transparent; color:var(--zone-dark); border:1.5px solid var(--zone-dark); }
.btn--outline-dark:hover { background:var(--zone-dark); color:#fff; }
.btn--outline-light { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.6); }
.btn--outline-light:hover { background:rgba(255,255,255,.12); border-color:#fff; }
.btn--cta { background:var(--clr-skin); color:#fff; }
.btn--cta:hover { background:var(--clr-skin-h); transform:translateY(-2px); box-shadow:0 8px 28px rgba(192,128,96,.38); }

/* ══════════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════════ */
.form-group  { margin-bottom:var(--sp-md); }
.form-label  { display:block; font-size:var(--fs-sm); font-weight:500; margin-bottom:.4rem; letter-spacing:.04em; }
.form-label .required { color:var(--clr-accent); margin-left:2px; }
.form-control {
  width:100%; padding:.8rem 1rem;
  background:var(--zone-dark-2); border:1.5px solid var(--zone-dark-border);
  border-radius:var(--r-sm); color:var(--zone-dark-text);
  font-family:var(--font-body); font-size:var(--fs-base); line-height:1.5;
  transition:border-color var(--fast), box-shadow var(--fast);
  appearance:none;
}
.form-control::placeholder { color:var(--zone-dark-sub); }
.form-control:focus { outline:none; border-color:var(--clr-accent); box-shadow:0 0 0 3px rgba(61,127,255,.18); }
.form-control[aria-invalid="true"] { border-color:#e05555; }
.form-select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233d7fff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem; cursor:pointer;
}
textarea.form-control { resize:vertical; min-height:130px; }
.form-error { display:block; font-size:var(--fs-xs); color:#e05555; margin-top:.3rem; }
.form-hint  { display:block; font-size:var(--fs-xs); opacity:.6; margin-top:.3rem; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-md); }

/* ══════════════════════════════════════════════════════════
   CARD WRAP (neutral card shell, zone-adaptive)
══════════════════════════════════════════════════════════ */
.card-wrap {
  border-radius:var(--r-md); border:1px solid;
  transition:border-color var(--base), box-shadow var(--base);
  overflow:hidden;
}
.zone-dark .card-wrap:hover   { border-color:rgba(61,127,255,.35); box-shadow:var(--sh-blue); }
.zone-light .card-wrap:hover  { border-color:rgba(61,127,255,.3); box-shadow:var(--sh-card); }
.zone-light-alt .card-wrap    { background:var(--zone-light-card); border-color:var(--zone-light-border); box-shadow:var(--sh-card); }
.zone-light-alt .card-wrap:hover { border-color:rgba(61,127,255,.3); box-shadow:var(--sh-blue); }

/* ══════════════════════════════════════════════════════════
   PHOTO CELL  (B&W → colour on hover)
══════════════════════════════════════════════════════════ */
.photo-cell {
  position:relative; overflow:hidden; border-radius:var(--r-md);
  background:var(--zone-dark-2);
}
.photo-cell img {
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) brightness(.6) contrast(1.08);
  transition:filter var(--slow) var(--ease-out), transform var(--slow) var(--ease-out);
  transform:scale(1.04);
}
.photo-cell:hover img { filter:grayscale(0) brightness(.88) contrast(1.0); transform:scale(1.09); }
.photo-cell::after {
  content:''; position:absolute; inset:0;
  box-shadow:inset 0 0 0 2px rgba(61,127,255,0);
  border-radius:var(--r-md);
  transition:box-shadow var(--base);
  pointer-events:none;
}
.photo-cell:hover::after { box-shadow:inset 0 0 0 2px rgba(61,127,255,.45); }
.photo-cell__caption {
  position:absolute; inset:auto 0 0;
  background:linear-gradient(transparent,rgba(8,12,20,.88));
  padding:2rem 1rem .8rem;
  font-size:var(--fs-xs); color:rgba(255,255,255,.75);
  transform:translateY(100%);
  transition:transform var(--base) var(--ease-out);
  border-radius:0 0 var(--r-md) var(--r-md);
}
.photo-cell:hover .photo-cell__caption { transform:translateY(0); }

/* ══════════════════════════════════════════════════════════
   MISC UTILITIES
══════════════════════════════════════════════════════════ */
.divider { border:none; border-top:1px solid; margin:var(--sp-xl) 0; opacity:.15; }
.alert { padding:1rem 1.5rem; border-radius:var(--r-md); font-size:var(--fs-sm); margin-bottom:var(--sp-md); border:1px solid; }
.alert--success { background:rgba(61,127,255,.08); border-color:var(--clr-accent); color:var(--clr-accent-h); }
.alert--error   { background:rgba(224,85,85,.10); border-color:#e05555; color:#ef9a9a; }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  .section { padding:var(--sp-2xl) 0; }
  .form-row { grid-template-columns:1fr; }
  h2 { font-size:var(--fs-2xl); }
}
@media (max-width:480px) {
  :root { --sp-md:1rem; }
  h2 { font-size:var(--fs-xl); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html { scroll-behavior:auto; }
}

/* ══════════════════════════════════════════════════════════
   LOGO WRAPPER SYSTEM
   .logo-wrapper   = outer div (holds context + anim classes)
   .logo-dark      → white letters (#fff)
   .logo-light     → dark letters (#0d1220)
   .logo-accent    → blue letters (#3d7fff)
   .logo-transparent → white letters (used over photos)
   Sizes are controlled by the parent element (width/height on wrapper)
══════════════════════════════════════════════════════════ */
.logo-wrapper {
  display: block;
  line-height: 0;
}
.logo-wrapper svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Colour modes ─────────────────────────────────────────── */
.logo-dark .madison-letter path,
.logo-transparent .madison-letter path {
  fill: #ffffff;
}
.logo-light .madison-letter path {
  fill: var(--zone-light-text);
}
.logo-accent .madison-letter path {
  fill: var(--clr-accent);
}

/* ── Disco ball base colour (always near-black, JS handles flash) ─ */
.logo-wrapper .madison-discoball ellipse {
  fill: hsl(0, 0%, 8%);
}

/* ── Hover: subtle opacity pulse on letters ─────────────── */
.logo-wrapper:not(.logo-anim-off) .madison-letter {
  transition: opacity var(--base) var(--ease);
}
.logo-wrapper:not(.logo-anim-off):hover .madison-letter {
  opacity: 0.88;
}
.logo-wrapper:not(.logo-anim-off):hover #letter-m { opacity: 1; }

/* ── Reduced motion: kill all SVG transitions ───────────── */
@media (prefers-reduced-motion: reduce) {
  .logo-wrapper .madison-discoball ellipse,
  .logo-wrapper .madison-letter path {
    transition: none !important;
    animation: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   BOOTSTRAP 5 INTEGRATION OVERRIDES
   These selectively override Bootstrap defaults to match
   our design system. Only touch what Bootstrap would break.
══════════════════════════════════════════════════════════ */

/* Reset Bootstrap's body colour to ours */
body { color: var(--zone-dark-text); background-color: var(--zone-dark); }

/* Bootstrap h* reset – our font-display takes priority */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: .04em;
}

/* Bootstrap .container max-width override */
.container-xl  { max-width: var(--container); }
.container-xxl { max-width: 1400px; }

/* Bootstrap link reset */
a { color: var(--clr-accent); text-underline-offset: 3px; }
a:hover { color: var(--clr-accent-h, var(--clr-accent)); }

/* Bootstrap form-control reset – our styles take over */
.form-control:focus { box-shadow: 0 0 0 3px rgba(61,127,255,.18); border-color: var(--clr-accent); }

/* Bootstrap button reset – all .btn styling from our system */
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: none; }

/* Bootstrap p margin – preserve ours */
p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* Ensure Bootstrap .row gutter doesn't create horizontal scroll */
.row { --bs-gutter-x: 1.5rem; }
@media (max-width: 576px) { .row { --bs-gutter-x: 1rem; } }

/* ratio helper (Bootstrap) for video embeds */
.ratio iframe { border: 0; }