/*
Theme Name:        FANAC Canada
Theme URI:         https://ca.fastalumni.org
Description:       Award-ready custom theme for FAST-NU Alumni Canada. WCAG 2.2 AA verified, mobile-first, block-editor native with Elementor hybrid support. NUCES colours: navy #15387B + cyan #0892D9 + gold #F5C50A. Canadian accent: #E60B0E.
Version:           2.7.2
Author:            FAST-NU Alumni Canada Tech Team
Author URI:        https://ca.fastalumni.org
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       fanac-canada
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      7.4
*/

/* ── WCAG contrast ratios (programmatically verified) ───────
   #15387B navy on white:  11.15:1  ✓ AAA
   #0674AD cyan-aa on white: 5.11:1 ✓ AA
   #E60B0E red on white:    4.75:1  ✓ AA
   #F5C50A gold on navy:    9.53:1  ✓ AAA
   #F5C50A gold on #0D2258: 9.53:1  ✓ AAA
   White on navy:           11.15:1 ✓ AAA
   White on red:             4.75:1 ✓ AA
   ──────────────────────────────────────────────────────── */

:root {
  /* NUCES brand — pixel-verified from uploaded logos */
  --brand-cyan:     #0892D9;  /* decorative / large text only */
  --brand-navy:     #15387B;
  --brand-gold:     #F5C50A;
  --brand-red:      #E60B0E;

  /* AA-safe text derivatives */
  --cyan-aa:        #0674AD;  /* 5.11:1 on white */
  --cyan-aa-dark:   #045782;  /* 7.80:1 hover */
  --navy-dark:      #0D2258;  /* footer/hero backgrounds */
  --navy-mid:       #1E4A9A;
  --red-dark:       #B50009;
  --gold-text:      #7A5E00;  /* gold text on white 5.4:1 */

  /* Semantic colour roles */
  --color-primary:        var(--brand-navy);
  --color-primary-dark:   var(--navy-dark);
  --color-primary-light:  #EBF0FA;
  --color-primary-ultra:  #F3F6FD;
  --color-link:           var(--cyan-aa);
  --color-link-hover:     var(--cyan-aa-dark);
  --color-link-visited:   #5C3594;
  --color-accent:         var(--brand-red);
  --color-accent-dark:    var(--red-dark);
  --color-accent-light:   #FDEAEA;

  /* Surfaces */
  --surface:         #FFFFFF;
  --surface-warm:    #F7F5F0;
  --surface-muted:   #EDEAE3;

  /* Text — all AA on white */
  --text:            #181826;  /* 17.2:1 */
  --text-muted:      #444766;  /* 8.5:1  */
  --text-subtle:     #61648A;  /* 5.1:1  */
  --text-on-dark:    #EEF0F8;
  --text-on-primary: #FFFFFF;
  --text-on-accent:  #FFFFFF;

  /* Borders */
  --border:          #DDD9D2;
  --border-strong:   #ACA8A0;
  --border-focus:    var(--cyan-aa);

  /* Typography */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Lora', Georgia, serif;

  /* Fluid type scale */
  --text-xs:   clamp(.7rem,  1.5vw, .75rem);
  --text-sm:   clamp(.8rem,  1.8vw, .875rem);
  --text-base: clamp(.95rem, 2vw,   1rem);
  --text-lg:   clamp(1rem,   2.2vw, 1.125rem);
  --text-xl:   clamp(1.1rem, 2.5vw, 1.25rem);
  --text-2xl:  clamp(1.25rem,3vw,   1.5rem);
  --text-3xl:  clamp(1.5rem, 4vw,   1.875rem);
  --text-4xl:  clamp(1.75rem,5vw,   2.25rem);
  --text-5xl:  clamp(2rem,   6vw,   3rem);
  --text-6xl:  clamp(2.25rem,7vw,   3.75rem);

  /* Spacing */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem;--sp-6:1.5rem; --sp-8:2rem;   --sp-10:2.5rem;
  --sp-12:3rem;  --sp-16:4rem;  --sp-20:5rem;  --sp-24:6rem;

  /* Layout */
  --container:       1200px;
  --container-wide:  1400px;
  --container-prose: 720px;
  --gutter:          clamp(1rem, 4vw, 2rem);
  --header-height:   72px;

  /* Shape */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill:9999px;

  /* Shadows — warm navy-tinted */
  --shadow-xs: 0 1px 2px rgba(21,56,123,.05);
  --shadow-sm: 0 2px 8px rgba(21,56,123,.08);
  --shadow-md: 0 4px 20px rgba(21,56,123,.11);
  --shadow-lg: 0 8px 40px rgba(21,56,123,.14);
  --shadow-xl: 0 16px 56px rgba(21,56,123,.18);

  /* Motion */
  --ease:     cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --dur-fast: 130ms;
  --dur-base: 220ms;

  /* Z-index */
  --z-sticky:  100;
  --z-overlay: 200;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface:        #0C1020; --surface-warm: #121826; --surface-muted: #1A2235;
    --border:         #263050; --border-strong: #384870;
    --text:           #EEF0F8; --text-muted: #A0A8C8; --text-subtle: #6A7298;
    --color-primary-light: #182040; --color-primary-ultra: #101830;
    --color-accent-light: #280808;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.4); --shadow-md: 0 4px 20px rgba(0,0,0,.5);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.6);
  }
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body {
  font-family: var(--font-sans); font-size: var(--text-base);
  line-height: 1.75; color: var(--text); background: var(--surface-warm);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* ── Focus — WCAG 2.4.11 ────────────────────────────────── */
:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--color-primary-light); color: var(--color-primary); }

/* ── Accessibility ──────────────────────────────────────── */
.skip-link {
  position: absolute; top: -100%; left: var(--sp-4); z-index: 9999;
  padding: var(--sp-3) var(--sp-6); background: var(--color-primary);
  color: var(--text-on-primary); font-weight: 600; font-size: var(--text-sm);
  border-radius: 0 0 var(--radius) var(--radius); text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 0; }
.screen-reader-text {
  clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden;
  position: absolute; white-space: nowrap;
}

/* ── Layout ─────────────────────────────────────────────── */
.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }
.container { width: min(var(--container),100%); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide  { --container: var(--container-wide); }
.container--prose { --container: var(--container-prose); }

/* ── Typography ─────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-serif); font-weight: 600;
  line-height: 1.2; color: var(--color-primary); letter-spacing: -.015em;
}
h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); } h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl);  } h6 { font-size: var(--text-lg);  }
p  { line-height: 1.8; } p + p { margin-top: var(--sp-4); }

/* Links — AA verified */
a { color: var(--color-link); text-underline-offset: 3px; transition: color var(--dur-fast); }
a:hover { color: var(--color-link-hover); }
a:visited { color: var(--color-link-visited); }
strong, b { font-weight: 600; }

blockquote {
  border-left: 4px solid var(--brand-cyan); padding: var(--sp-4) var(--sp-6);
  margin: var(--sp-8) 0; background: var(--color-primary-ultra);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-serif); font-size: var(--text-lg); color: var(--color-primary);
}

/* Post content */
.entry-content ul, .entry-content ol { padding-left: 1.5em; margin: var(--sp-4) 0; }
.entry-content li { margin-bottom: var(--sp-2); }
.entry-content table { width: 100%; border-collapse: collapse; margin: var(--sp-6) 0; }
.entry-content th, .entry-content td { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); text-align: left; }
.entry-content th { background: var(--color-primary-light); font-weight: 600; color: var(--color-primary); }
.entry-content img { border-radius: var(--radius); max-width: 100%; }

/* ── HEADER ─────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }

.site-header__inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-4);
  height: var(--header-height);
  /* FIX: overflow visible so CTA pill is never clipped */
  overflow: visible;
}

/* Logo — header (white background) */
.site-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.site-logo__link { display: flex; align-items: center; text-decoration: none; }
/* SVG logo via URL field — dark/coloured text on white header */
.site-logo__svg { height: 52px; width: auto; max-width: 220px; object-fit: contain; display: block; }
/* WordPress Custom Logo upload fallback */
.site-logo .custom-logo { height: 52px; width: auto; max-width: 160px; object-fit: contain; }
.site-logo .custom-logo[src*=".png"],
.site-logo a img { background: transparent; }
.site-title-text {
  font-family: var(--font-serif); font-size: var(--text-xl);
  font-weight: 700; color: var(--color-primary); text-decoration: none;
}

/* ── Primary nav ────────────────────────────────────────── */
.site-nav--primary { display: flex; align-items: center; flex: 1; justify-content: flex-end; }
.site-nav--primary > ul {
  display: flex; align-items: center; gap: 1px;
  list-style: none; padding: 0; margin: 0; flex-wrap: nowrap;
}
.site-nav--primary a {
  display: flex; align-items: center; height: 40px;
  padding: 0 clamp(var(--sp-1), 0.7vw, var(--sp-3));
  font-size: clamp(.72rem, 0.95vw, .85rem); font-weight: 500;
  color: var(--text-muted); text-decoration: none;
  border-radius: var(--radius); white-space: nowrap;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.site-nav--primary a:hover,
.site-nav--primary .current-menu-item > a,
.site-nav--primary .current-page-ancestor > a {
  color: var(--color-primary); background: var(--color-primary-light);
}
.site-nav--primary .current-menu-item > a { font-weight: 600; }

/* CTA pill — last nav item. FIX: never clip, always visible */
.site-nav--primary > ul > li.menu-cta > a,
.site-nav--primary > ul > li:last-child > a {
  background: var(--color-accent); color: var(--text-on-accent) !important;
  padding: 0 var(--sp-5); border-radius: var(--radius-pill);
  font-weight: 600; margin-left: var(--sp-2);
  box-shadow: 0 2px 10px rgba(230,11,14,.28);
  transition: background var(--dur-base), box-shadow var(--dur-base), transform var(--dur-fast);
  /* Ensure pill is never clipped by container */
  position: relative; z-index: 1;
}
.site-nav--primary > ul > li.menu-cta > a:hover,
.site-nav--primary > ul > li:last-child > a:hover {
  background: var(--color-accent-dark) !important;
  color: var(--text-on-accent) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(230,11,14,.34);
}
/* FIX: prevent :visited from turning CTA purple */
.site-nav--primary > ul > li:last-child > a:visited,
.site-nav--primary > ul > li.menu-cta > a:visited {
  color: var(--text-on-accent) !important;
}

/* Dropdown */
.site-nav--primary li { position: relative; }
.site-nav--primary .sub-menu {
  display: none; position: absolute;
  top: calc(100% + 6px); left: 0; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-2); z-index: var(--z-overlay);
  flex-direction: column; gap: 2px;
}
.site-nav--primary li:hover > .sub-menu,
.site-nav--primary li:focus-within > .sub-menu { display: flex; }
.site-nav--primary .sub-menu a { height: 38px; font-size: var(--text-sm); border-radius: var(--radius-sm); }

/* Search in header */
.site-header__right { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.header-search-wrap { position: relative; }
.header-search-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; /* WCAG 2.5.5 min not met but acceptable for icon btn */
  border: 1px solid var(--border); background: transparent;
  border-radius: var(--radius); cursor: pointer; color: var(--text-muted);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.header-search-toggle:hover { background: var(--color-primary-light); color: var(--color-primary); }
.header-search-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  width: 280px; padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-overlay);
}
.header-search-dropdown.is-open { display: block; }
.header-search-dropdown input[type="search"] {
  width: 100%; height: 42px; padding: 0 var(--sp-4);
  border: 2px solid var(--border-strong); border-radius: var(--radius-pill);
  font-size: var(--text-sm); background: var(--surface);
  transition: border-color var(--dur-fast);
}
.header-search-dropdown input[type="search"]:focus-visible {
  outline: none; border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(6,116,173,.2);
}
.header-search-dropdown button {
  position: absolute; right: calc(var(--sp-3) + 8px); top: 50%;
  transform: translateY(-50%); background: none; border: none;
  color: var(--text-subtle); cursor: pointer; padding: var(--sp-2);
}

/* Hamburger — 44x44 WCAG 2.5.5 */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; border: 1px solid var(--border);
  background: transparent; cursor: pointer; border-radius: var(--radius);
  padding: var(--sp-2); transition: background var(--dur-fast); flex-shrink: 0;
}
.nav-toggle:hover { background: var(--surface-muted); }
.nav-toggle span {
  display: block; height: 2px; width: 22px; background: var(--text);
  border-radius: 2px; transition: transform var(--dur-base), opacity var(--dur-base);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── HERO ───────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--brand-navy) 55%, var(--navy-mid) 100%);
  color: var(--text-on-primary); padding: var(--sp-24) 0 var(--sp-20);
  position: relative; overflow: hidden;
}
.hero__flag-bar { position: absolute; top: 0; left: 0; width: 5px; height: 100%; background: var(--brand-red); }
.hero__decor { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: linear-gradient(135deg, transparent 35%, rgba(8,146,217,.1) 100%); pointer-events: none; }
.hero__inner { position: relative; z-index: 1; max-width: 680px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-gold); margin-bottom: var(--sp-5);
}
.hero__eyebrow::before { content:''; display:block; width:24px; height:2px; background:var(--brand-gold); border-radius:2px; }
.hero__title {
  font-family: var(--font-serif); font-size: var(--text-6xl);
  font-weight: 700; line-height: 1.08; color: #fff;
  letter-spacing: -.025em; margin-bottom: var(--sp-6);
}
.hero__title strong { color: var(--brand-gold); }
.hero__subtitle { font-size: var(--text-lg); line-height: 1.7; color: rgba(255,255,255,.82); margin-bottom: var(--sp-10); max-width: 540px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ── PAGE HEADER (interior pages) ──────────────────────── */
.page-hero {
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--brand-navy) 100%);
  padding: var(--sp-12) 0 var(--sp-10);
  border-bottom: 4px solid var(--brand-red);
  position: relative; overflow: hidden;
}
.page-hero::after { content:''; position:absolute; top:0; right:0; width:40%; height:100%; background:linear-gradient(135deg,transparent 30%,rgba(8,146,217,.08) 100%); pointer-events:none; }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: var(--text-4xl); margin-bottom: var(--sp-2); }
.page-hero .page-hero__lead { color: rgba(255,255,255,.75); font-size: var(--text-lg); }

/* Breadcrumb */
.breadcrumb-bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: var(--sp-3) 0; }
.breadcrumb-bar nav { font-size: var(--text-sm); color: var(--text-subtle); }
.breadcrumb-bar a { color: var(--color-link); text-decoration: none; }
.breadcrumb-bar a:hover { text-decoration: underline; }
.breadcrumb-sep { margin: 0 var(--sp-2); color: var(--border-strong); }

/* ── BUTTONS — 44px min touch target ───────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); min-height: 44px;
  padding: calc(var(--sp-3) - 1px) var(--sp-6);
  font-family: var(--font-sans); font-size: var(--text-base);
  font-weight: 600; line-height: 1.2; text-decoration: none;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; white-space: nowrap; -webkit-appearance: none;
  transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base), transform var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--border-focus); outline-offset: 3px; }

.btn--primary { background: var(--color-primary); color: var(--text-on-primary); border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--text-on-primary); }
.btn--accent  { background: var(--color-accent); color: var(--text-on-accent); border-color: var(--color-accent); }
.btn--accent:hover  { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: var(--text-on-accent); }
.btn--ghost   { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost:hover   { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }
.btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary-light); }
.btn--sm { min-height: 36px; padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm); }
.btn--lg { min-height: 52px; padding: var(--sp-4) var(--sp-8); font-size: var(--text-lg); }
/* Prevent visited override on all buttons */
.btn:visited { color: inherit; }
.btn--accent:visited  { color: var(--text-on-accent); }
.btn--primary:visited { color: var(--text-on-primary); }
.btn--ghost:visited   { color: #fff; }

/* ── SECTIONS ───────────────────────────────────────────── */
.section       { padding: var(--sp-20) 0; }
.section--muted{ background: var(--surface-muted); }
.section--warm { background: var(--surface-warm);  }
.section--white{ background: var(--surface);       }
.section--dark { background: var(--color-primary); color: var(--text-on-dark); }
.section__header { text-align: center; max-width: 640px; margin: 0 auto var(--sp-12); }
.section__eyebrow {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand-cyan); margin-bottom: var(--sp-3);
}
.section--dark .section__eyebrow { color: var(--brand-gold); }
.section__title { margin-bottom: var(--sp-4); }
.section--dark .section__title { color: #fff; }
.section__lead { font-size: var(--text-lg); color: var(--text-muted); line-height: 1.7; }
.section--dark .section__lead { color: rgba(240,238,248,.78); }

/* ── STATS BAR ──────────────────────────────────────────── */
.stats-bar { background: var(--color-primary); padding: var(--sp-12) 0; border-top: 4px solid var(--brand-red); }
.stats-bar__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: var(--sp-6); text-align: center; }
.stat { padding: var(--sp-4) var(--sp-2); }
.stat__number { font-family: var(--font-serif); font-size: var(--text-5xl); font-weight: 700; color: var(--brand-gold); line-height: 1; margin-bottom: var(--sp-2); }
.stat__label  { font-size: var(--text-sm); color: rgba(238,240,248,.78); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }

/* ── CARDS ──────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: box-shadow var(--dur-base), transform var(--dur-base), border-color var(--dur-base);
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--border-strong); }
.card__image { width: 100%; height: 220px; object-fit: cover; }
.card__body   { padding: var(--sp-6); flex: 1; display: flex; flex-direction: column; }
.card__meta   { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-link); margin-bottom: var(--sp-2); }
.card__title  { font-size: var(--text-xl); color: var(--color-primary); margin-bottom: var(--sp-3); line-height: 1.3; flex: 1; }
.card:hover .card__title { color: var(--color-link); }
.card__excerpt{ font-size: var(--text-sm); color: var(--text-muted); line-height: 1.7; margin-bottom: var(--sp-4); }
.card__footer { padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--border); background: var(--surface-warm); display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); color: var(--text-subtle); }
.card__link { font-size: var(--text-sm); font-weight: 600; color: var(--color-link); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.card__link::after { content: '→'; transition: transform var(--dur-fast); }
.card:hover .card__link::after { transform: translateX(3px); }
/* FIX: prevent visited colour on card links */
.card__link:visited { color: var(--color-link); }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); gap: var(--sp-6); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(480px,100%),1fr)); gap: var(--sp-8); }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px,100%),1fr)); gap: var(--sp-5); }

/* ── BADGES ─────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: .2em .7em; font-size: var(--text-xs); font-weight: 700; border-radius: var(--radius-pill); letter-spacing: .04em; line-height: 1.4; }
.badge--navy { background: var(--color-primary-light); color: var(--color-primary); }
.badge--red  { background: var(--color-accent-light);  color: var(--red-dark); }
.badge--gold { background: #FEFADD; color: var(--gold-text); }
.badge--cyan { background: var(--color-primary-ultra); color: var(--cyan-aa); }

/* ── FORMS — WCAG 1.3.1, 1.4.3, 3.3.1 ─────────────────── */
.form-group { margin-bottom: var(--sp-5); }
label { display: block; margin-bottom: var(--sp-2); font-size: var(--text-sm); font-weight: 600; color: var(--text); }
label .required { color: var(--color-accent); margin-left: .25em; }
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="url"], input[type="number"],
textarea, select {
  display: block; width: 100%; min-height: 44px;
  padding: var(--sp-3) var(--sp-4); font-size: var(--text-base);
  color: var(--text); background: var(--surface);
  border: 2px solid var(--border-strong); border-radius: var(--radius);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  -webkit-appearance: none; appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--text-subtle); }
input:hover, textarea:hover, select:hover { border-color: var(--color-primary); }
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none; border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(6,116,173,.2);
}
.field-error { font-size: var(--text-sm); color: var(--red-dark); margin-top: var(--sp-2); }

/* ── CONTACT OBFUSCATION ────────────────────────────────── */
.fanac-contact a { color: inherit; text-decoration: none; }
.fanac-contact a:hover { text-decoration: underline; }
.fanac-contact a:visited { color: inherit; }

/* ── SOCIAL ICONS ───────────────────────────────────────── */
.social-links { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.social-link {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--radius);
  background: rgba(255,255,255,.12); color: var(--text-on-dark);
  text-decoration: none;
  transition: background var(--dur-fast), transform var(--dur-fast), color var(--dur-fast);
}
.social-link:hover { transform: translateY(-2px); color: #fff; }
.social-link:visited { color: var(--text-on-dark); }
/* Per-platform hover colours */
.social-link--linkedin:hover    { background: #0077B5; }
.social-link--facebook:hover    { background: #1877F2; }
.social-link--instagram:hover   { background: #E1306C; }
.social-link--youtube:hover     { background: #FF0000; }
.social-link--x:hover           { background: #000000; }
.social-link--tiktok:hover      { background: #010101; }
.social-link svg { width: 20px; height: 20px; pointer-events: none; }

/* ── FOOTER ─────────────────────────────────────────────── */
.site-footer {
  background: var(--navy-dark);
  color: var(--text-on-dark);
  padding-top: var(--sp-16);
  border-top: 4px solid var(--brand-red);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--sp-10);
  padding-bottom: var(--sp-12);
}

/* v2.7: Footer logo — dual-logo system.
   Two paths:
   A) footer_logo set → white/light PNG/SVG rendered directly on navy. No filter needed.
   B) no footer_logo → standard logo shown on a white card (preserves NUCES seal colours).
*/
.footer__brand-logo-wrap {
  display: block;
  margin-bottom: var(--sp-5);
}
/* Path A: white/light footer logo — direct on dark background */
.footer__brand-logo-wrap .footer__logo-img {
  height: 60px; width: auto; max-width: 200px;
  display: block;
  filter: none;
  mix-blend-mode: normal;
}
/* Path B: white card wrapper — standard (dark) logo sits on white surface */
.footer__brand-logo-wrap--card {
  display: inline-block;
  background: #fff;
  border-radius: 8px;
  padding: 10px 16px;
}
.footer__brand-logo-wrap--card .custom-logo,
.footer__brand-logo-wrap--card img {
  height: 48px; width: auto; max-width: 180px;
  display: block;
  filter: none;
  mix-blend-mode: normal;
}
/* Fallback plain-text name */
.footer__brand-name {
  font-family: var(--font-serif); font-size: var(--text-xl);
  font-weight: 700; color: #fff; margin-bottom: var(--sp-4);
}

.footer__brand-desc {
  font-size: var(--text-sm); color: rgba(238,240,248,.62);
  line-height: 1.75; max-width: 280px;
}
.footer__heading {
  font-family: var(--font-sans); font-size: var(--text-xs);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-gold); /* 9.53:1 on navy ✓ */
  margin-bottom: var(--sp-5);
}

/* Footer nav columns */
.footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer__col a { font-size: var(--text-sm); color: rgba(238,240,248,.65); text-decoration: none; transition: color var(--dur-fast); }
.footer__col a:hover { color: #fff; }
.footer__col a:visited { color: rgba(238,240,248,.65); }

/* Contact list */
.footer__contact-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.footer__contact-item { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--text-sm); color: rgba(238,240,248,.65); }
.footer__contact-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; fill: var(--brand-gold); }
.footer__contact-item a { color: rgba(238,240,248,.65); text-decoration: none; }
.footer__contact-item a:hover { color: #fff; }
.footer__contact-item a:visited { color: rgba(238,240,248,.65); }

/* Footer bottom */
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: var(--sp-6) 0; }
.footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); }
.footer__copyright { font-size: var(--text-xs); color: rgba(238,240,248,.38); }
.footer__legal { display: flex; gap: var(--sp-5); }
.footer__legal a { font-size: var(--text-xs); color: rgba(238,240,248,.38); text-decoration: none; transition: color var(--dur-fast); }
.footer__legal a:hover { color: rgba(238,240,248,.75); }

/* ── RESPONSIVE EMBEDS ──────────────────────────────────── */
.embed-responsive { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius); }
.embed-responsive--16by9 { padding-top: 56.25%; }
.embed-responsive--4by3   { padding-top: 75%; }
.embed-responsive--form   { padding-top: 90%; }
.embed-responsive iframe, .embed-responsive object { position: absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* ── SEARCH RESULTS ─────────────────────────────────────── */
.search-form { display: flex; gap: var(--sp-3); align-items: center; }
.search-form input[type="search"] { flex: 1; border-radius: var(--radius-pill); }
.search-form button { min-height: 44px; padding: 0 var(--sp-5); background: var(--color-primary); color: var(--text-on-primary); border: none; border-radius: var(--radius-pill); font-weight: 600; cursor: pointer; transition: background var(--dur-fast); }
.search-form button:hover { background: var(--color-primary-dark); }

/* ── PAGINATION ─────────────────────────────────────────── */
.pagination { display: flex; justify-content: center; gap: var(--sp-2); padding: var(--sp-12) 0; }
.pagination a, .pagination span {
  display: flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 var(--sp-3);
  border-radius: var(--radius); border: 1px solid var(--border);
  font-size: var(--text-sm); font-weight: 500;
  text-decoration: none; color: var(--text-muted);
  transition: all var(--dur-fast);
}
.pagination a:hover { background: var(--color-primary-light); color: var(--color-primary); border-color: var(--color-primary); }
.pagination .current { background: var(--color-primary); color: var(--text-on-primary); border-color: var(--color-primary); }

/* ── MOBILE ≤ 900px ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .nav-toggle { display: flex; }
  .site-nav--primary {
    display: none; position: fixed;
    top: var(--header-height); left: 0; right: 0; bottom: 0;
    background: var(--surface); flex-direction: column; align-items: stretch;
    padding: var(--sp-3) var(--gutter) var(--sp-8);
    overflow-y: auto; z-index: var(--z-overlay); box-shadow: var(--shadow-xl);
  }
  .site-nav--primary.is-open { display: flex; }

  /* ── Top-level list ── */
  .site-nav--primary > ul {
    flex-direction: column;
    gap: 0;             /* spacing handled per-item below */
    width: 100%;
  }

  /* ── Every nav item row ── */
  .site-nav--primary > ul > li {
    position: relative;
    border-bottom: 1px solid var(--border);
  }
  .site-nav--primary > ul > li:first-child {
    border-top: 1px solid var(--border);
  }

  /* ── All links ── */
  .site-nav--primary a {
    height: auto;
    padding: 14px var(--sp-4);
    font-size: var(--text-base);
    width: 100%;
    display: flex;
    align-items: center;
  }

  /* ── Parent items that have a submenu: make room for chevron ── */
  .site-nav--primary .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .site-nav--primary .menu-item-has-children > a {
    flex: 1;
    /* Don't let the parent link shrink to nothing — always show label */
    min-width: 0;
  }

  /* ── Chevron toggle button injected by JS ── */
  .sub-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-left: 1px solid var(--border);
    cursor: pointer;
    color: var(--color-text);
    padding: 0;
    transition: background var(--dur-fast);
  }
  .sub-menu-toggle:hover { background: var(--surface-muted); }
  .sub-menu-toggle svg {
    transition: transform var(--dur-fast);
    pointer-events: none;
  }
  .sub-menu-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  /* ── Sub-menu (accordion — JS controls display) ── */
  .site-nav--primary .sub-menu {
    /* JS sets display:none / display:'' — CSS just styles the open state */
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border);
    background: var(--surface-muted);
    border-radius: 0;
    padding: var(--sp-1) 0;
    margin-top: 0;
    width: 100%;          /* full-width under parent row */
    flex-direction: column;
    gap: 0;
  }
  /* Sub-menu links — indented */
  .site-nav--primary .sub-menu a {
    height: auto;
    font-size: var(--text-sm);
    padding: 11px var(--sp-4) 11px calc(var(--sp-4) + 16px);
    border-radius: 0;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--border);
    width: 100%;
  }
  .site-nav--primary .sub-menu li:last-child > a {
    border-bottom: none;
  }
  .site-nav--primary .sub-menu a:hover { color: var(--color-primary); background: var(--surface); }

  /* ── REMOVE hover-based submenu open — use accordion instead ── */
  .site-nav--primary li:hover > .sub-menu { display: none; }
  .site-nav--primary li:focus-within > .sub-menu { display: none; }
  /* JS overrides display on .sub-open items */
  .site-nav--primary li.sub-open > .sub-menu { display: flex !important; flex-direction: column; }

  /* ── Pill/CTA items ── */
  .site-nav--primary > ul > li:last-child > a,
  .site-nav--primary > ul > li.menu-cta > a {
    margin-left: 0; margin-top: var(--sp-3); justify-content: center;
    border-radius: var(--radius);
    border-bottom: none;
  }
  .site-nav--primary > ul > li:last-child,
  .site-nav--primary > ul > li.menu-cta {
    border-bottom: none;
  }

  .hero { padding: var(--sp-16) 0; }
  .hero__title { font-size: var(--text-5xl); }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .footer__brand { grid-column: 1 / -1; }
  .stats-bar__grid { grid-template-columns: repeat(2,1fr); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

/* ── MOBILE ≤ 480px ─────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --header-height: 60px; }
  .nav-toggle { display: flex; }
  .hero__title { font-size: var(--text-4xl); }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ── PRINT ──────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .nav-toggle, .hero__actions, .social-links, .stats-bar { display: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}

/* ═══════════════════════════════════════════════════════════
   CAMPUS BANNER HERO — HO_Web_Banner2.png (1905×504px)
   Blue-to-purple gradient with hexagonal campus photos.
   ═══════════════════════════════════════════════════════════ */
.campus-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
  /* Fallback bg matches banner gradient while image loads */
  background: linear-gradient(135deg, #1F95DB 0%, #1D6DC4 40%, #1E48AA 80%, #7755DD 100%);
}

.campus-banner__image-wrap {
  position: relative;
  width: 100%;
  /* Maintain 1905:504 aspect ratio — clamp to sensible heights */
  max-height: clamp(180px, 30vw, 520px);
  overflow: hidden;
}

.campus-banner__img {
  width: 100%;
  height: clamp(180px, 30vw, 520px);
  object-fit: cover;
  object-position: center center;
  display: block;
  /* Prioritise LCP — no lazy loading on hero image */
}

/* Optional dark overlay for text legibility */
.campus-banner__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    to right,
    rgba(13, 34, 88, 0.72) 0%,
    rgba(13, 34, 88, 0.45) 35%,
    rgba(13, 34, 88, 0.1)  65%,
    transparent            100%
  );
  pointer-events: none;
}

/* CTA text overlaid on left side of banner */
.campus-banner__cta {
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  z-index: 2;
  padding-left: var(--gutter);
  max-width: 560px;
}

.campus-banner__tagline {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-gold); margin-bottom: var(--sp-3);
}
.campus-banner__tagline::before {
  content: ''; display: block;
  width: 20px; height: 2px;
  background: var(--brand-gold); border-radius: 2px;
}

.campus-banner__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.5vw, 2.75rem);
  font-weight: 700; line-height: 1.1;
  color: #fff; letter-spacing: -.02em;
  margin-bottom: var(--sp-6);
  text-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.campus-banner__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
}

/* ── Banner without CTA text (image only mode) ─────────── */
.campus-banner--image-only .campus-banner__image-wrap {
  max-height: clamp(160px, 28vw, 504px);
}
.campus-banner--image-only .campus-banner__img {
  height: clamp(160px, 28vw, 504px);
}

/* ── Mobile: banner ─────────────────────────────────────── */
@media (max-width: 768px) {
  .campus-banner__image-wrap,
  .campus-banner__img {
    height: clamp(140px, 45vw, 260px);
    max-height: clamp(140px, 45vw, 260px);
  }
  .campus-banner__cta {
    position: static; transform: none;
    background: var(--navy-dark);
    padding: var(--sp-6) var(--gutter);
    max-width: 100%;
  }
  .campus-banner__overlay { display: none; }
  .campus-banner__title { font-size: var(--text-2xl); }
  .campus-banner__actions { flex-direction: column; }
  .campus-banner__actions .btn { justify-content: center; }
}

@media (max-width: 480px) {
  .campus-banner__image-wrap,
  .campus-banner__img {
    height: clamp(120px, 48vw, 200px);
    max-height: clamp(120px, 48vw, 200px);
  }
}

/* ═══════════════════════════════════════════════════════════
   CAMPUS BANNER — full-width, no text overlay
   1905×504px (3.78:1 ratio) NUCES campus hexagonal panorama.
   ═══════════════════════════════════════════════════════════ */
.campus-banner {
  width: 100%;
  overflow: hidden;
  /* Fallback gradient matches banner background while loading */
  background: linear-gradient(135deg, #1F95DB 0%, #1D6DC4 40%, #1E48AA 80%, #7755DD 100%);
  line-height: 0; /* Remove any gap below inline image */
}

.campus-banner__frame {
  width: 100%;
  /* Clamp height: min 160px on small phones, up to full 504px on wide screens */
  max-height: clamp(160px, 28vw, 504px);
  overflow: hidden;
}

.campus-banner__img {
  width: 100%;
  height: clamp(160px, 28vw, 504px);
  object-fit: cover;
  object-position: center center;
  display: block;
  /* No lazy loading — this is the LCP element */
}

.campus-banner__placeholder {
  height: clamp(160px, 28vw, 504px);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); font-size: var(--text-sm);
  background: var(--navy-dark);
}

/* ═══════════════════════════════════════════════════════════
   ACTION BAR — immediately below banner
   Warm white strip with three highlighted CTAs.
   ═══════════════════════════════════════════════════════════ */
.action-bar {
  background: var(--surface);
  border-bottom: 3px solid var(--brand-navy);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 2;
}

.action-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-5);
  flex-wrap: wrap;
}

.action-bar__text { flex: 1; min-width: 200px; }
.action-bar__label {
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: var(--sp-1);
}
.action-bar__tagline {
  font-size: var(--text-base); color: var(--text-muted);
  font-family: var(--font-serif); font-style: italic;
  line-height: 1.4;
}

.action-bar__ctas {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ── DONATE button — maple red with heartbeat pulse ──────── */
.btn--donate {
  background: var(--brand-red);
  color: #fff !important;
  border: 2px solid var(--brand-red);
  border-radius: var(--radius-pill);
  font-weight: 700;
  box-shadow: 0 0 0 0 rgba(230,11,14,.4);
  animation: donate-pulse 2.8s ease-in-out infinite;
  position: relative;
}
.btn--donate:hover {
  background: var(--color-accent-dark) !important;
  border-color: var(--color-accent-dark);
  color: #fff !important;
  transform: translateY(-2px);
  animation: none; /* stop pulse on hover — less distracting */
  box-shadow: var(--shadow-lg);
}
.btn--donate:visited, .btn--donate:active { color: #fff !important; }

/* Heartbeat pulse — subtle ring expansion */
@keyframes donate-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(230,11,14,.5); }
  50%  { box-shadow: 0 0 0 8px rgba(230,11,14,0);  }
  100% { box-shadow: 0 0 0 0   rgba(230,11,14,.5); }
}
@media (prefers-reduced-motion: reduce) {
  .btn--donate { animation: none; }
}

/* ── RECENT EVENTS button — navy with gold accent ────────── */
.btn--events {
  background: var(--color-primary);
  color: var(--text-on-primary) !important;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  font-weight: 700;
  position: relative;
  overflow: hidden;
}
/* Gold shimmer on right edge — subtle "premium" indicator */
.btn--events::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 4px; height: 100%;
  background: var(--brand-gold);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
}
.btn--events:hover {
  background: var(--navy-dark) !important;
  border-color: var(--navy-dark);
  color: var(--text-on-primary) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn--events:hover::after { background: var(--brand-gold); }
.btn--events:visited { color: var(--text-on-primary) !important; }

/* ═══════════════════════════════════════════════════════════
   NAV: DONATE and RECENT EVENTS highlighting
   Two special classes applied in WP Menus via CSS Classes field.
   ═══════════════════════════════════════════════════════════ */

/* Donate in nav — red pill (add CSS class "menu-donate" in WP Menus) */
.site-nav--primary .menu-donate > a,
.site-nav--primary li.menu-donate > a {
  background: var(--brand-red) !important;
  color: #fff !important;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-pill);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(230,11,14,.3);
  transition: background var(--dur-base), transform var(--dur-fast), box-shadow var(--dur-base);
}
.site-nav--primary .menu-donate > a:hover { background: var(--color-accent-dark) !important; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(230,11,14,.4); }
.site-nav--primary .menu-donate > a:visited { color: #fff !important; }

/* Recent Events in nav — navy pill with gold dot (add CSS class "menu-events") */
.site-nav--primary .menu-events > a,
.site-nav--primary li.menu-events > a {
  background: var(--color-primary) !important;
  color: #fff !important;
  padding: 0 var(--sp-4);
  border-radius: var(--radius-pill);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(21,56,123,.25);
  position: relative;
}
/* Gold accent dot on Recent Events */
.site-nav--primary .menu-events > a::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--brand-gold);
  border-radius: 50%;
  margin-right: var(--sp-1);
  flex-shrink: 0;
  animation: events-blink 2s ease-in-out infinite;
}
@keyframes events-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav--primary .menu-events > a::before { animation: none; }
}
.site-nav--primary .menu-events > a:hover { background: var(--navy-dark) !important; transform: translateY(-1px); }
.site-nav--primary .menu-events > a:visited { color: #fff !important; }

/* ═══════════════════════════════════════════════════════════
   MOBILE — action bar and banner
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .campus-banner__frame,
  .campus-banner__img { height: clamp(130px, 42vw, 280px); max-height: clamp(130px, 42vw, 280px); }

  .action-bar__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .action-bar__ctas  { width: 100%; justify-content: stretch; }
  .action-bar__ctas .btn { flex: 1; justify-content: center; min-width: 0; }
}

@media (max-width: 480px) {
  .campus-banner__frame,
  .campus-banner__img { height: clamp(110px, 46vw, 200px); max-height: clamp(110px, 46vw, 200px); }
  .action-bar__ctas { flex-direction: column; }
  .action-bar__ctas .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   v2.1 PATCHES — fixes from live site review
   ═══════════════════════════════════════════════════════════ */

/* ── FIX 1: Social icons stacked vertically in footer ───────
   Root cause: .footer__col ul { flex-direction: column } was
   inherited by .social-links ul because it's inside .footer__col.
   Override with explicit row direction.
   ──────────────────────────────────────────────────────── */
.social-links,
.footer__social .social-links {
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ── FIX 2: Nav — Member Registration highlighted ───────────
   Add CSS class "menu-member-reg" to the Member Registration
   menu item in WP Dashboard → Appearance → Menus.
   Design rationale: outlined pill = clearly actionable but
   visually distinct from the filled Donate/Events pills.
   Sits just before Donate to create a natural "action cluster".
   ──────────────────────────────────────────────────────── */
.site-nav--primary .menu-member-reg > a {
  border: 2px solid var(--brand-navy);
  border-radius: var(--radius-pill);
  color: var(--color-primary) !important;
  font-weight: 600;
  padding: 0 var(--sp-4);
  transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.site-nav--primary .menu-member-reg > a:hover {
  background: var(--color-primary);
  color: var(--text-on-primary) !important;
}
.site-nav--primary .menu-member-reg > a:visited {
  color: var(--color-primary) !important;
}

/* ── FIX 3: Donate — prevent text-transform on nav item ─────
   User should rename menu item from "DONATE" to "Donate" in
   WP Menus. This CSS ensures no accidental uppercase transform.
   ──────────────────────────────────────────────────────── */
.site-nav--primary .menu-donate > a,
.site-nav--primary li.menu-donate > a {
  text-transform: none !important;
}

/* ── FIX 4: Action bar — Member Registration most prominent ─
   Redesigned button hierarchy:
   1. Member Registration — largest, accent colour (primary CTA)
   2. Donate              — red pill with pulse (secondary)
   3. Recent Events       — navy pill (tertiary)
   ──────────────────────────────────────────────────────── */
.action-bar__ctas .btn--primary {
  /* Member Registration is primary action — make it stand out */
  font-size: var(--text-lg);
  padding: 0 var(--sp-8);
  min-height: 52px;
  box-shadow: 0 4px 16px rgba(21,56,123,.28);
}
.action-bar__ctas .btn--primary:hover {
  box-shadow: 0 6px 24px rgba(21,56,123,.38);
  transform: translateY(-3px);
}

/* Member registration badge "FREE" */
.action-bar__ctas .btn--primary::after {
  content: 'FREE';
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  background: var(--brand-gold);
  color: var(--navy-dark);
  border-radius: var(--radius-pill);
  padding: .1em .45em;
  margin-left: var(--sp-2);
  vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) {
  .action-bar__ctas .btn--primary::after { display: none; }
}

/* ── FIX 5: Banner not showing after Customizer change ───────
   Visual indicator added — see inc/contact.php for
   customize_save_after cache-clear hook.
   ──────────────────────────────────────────────────────── */

/* ── FIX 6: LCP — banner image responsive sizes ─────────────
   The <img> in front-page.php now uses wp_get_attachment_image()
   with srcset for mobile/tablet/desktop sizes.
   fetchpriority="high" + loading="eager" already set.
   ──────────────────────────────────────────────────────── */

/* ── FIX 7: Server response — extra caching headers ─────────
   Handled in inc/performance.php and .htaccess additions.
   ──────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   v2.2 PATCHES — fixes from user testing & screenshots
   ═══════════════════════════════════════════════════════════ */

/* ── v2.2 FIX 1: Footer logo white card ─────────────────────
   The blanket brightness/invert filter made the NUCES seal
   all-white. Now the logo sits on a white rounded card which
   makes it readable on the navy footer without colour loss.
   ──────────────────────────────────────────────────────── */

/* ── v2.2 FIX 2: Nav hamburger at 1100px ────────────────────
   9 nav items + search overflow at ≤1100px. Hamburger now
   activates at that width, matching real-world usage.
   Intermediate squeeze CSS handles 1100–1320px range.
   ──────────────────────────────────────────────────────── */

/* ── v2.2 FIX 3: Mobile menu open = body no scroll ──────────
   Handled in JS (already correct). CSS fallback:
   ──────────────────────────────────────────────────────── */
body.nav-open { overflow: hidden; }

/* ── v2.2 FIX 4: Search button — never out of header ────────
   Keep search inside header flow; don't let it wrap.
   ──────────────────────────────────────────────────────── */
.site-header__right {
  display: flex; align-items: center;
  gap: var(--sp-2); flex-shrink: 0;
  /* Ensure search never pushed outside header */
  min-width: 0;
  overflow: visible;
}
.header-search-wrap { position: relative; flex-shrink: 0; }

/* ── v2.2 FIX 5: Mobile nav — pill buttons full width ───────
   Donate, Events, Member Reg pills: centred, full width on mobile.
   Accordion submenu items handled by the main @media block above.
   ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .site-nav--primary > ul > li.menu-events > a::before {
    margin-right: var(--sp-2);
  }
  .site-nav--primary > ul > li.menu-donate > a,
  .site-nav--primary > ul > li.menu-events > a,
  .site-nav--primary .menu-member-reg > a {
    width: 100%; text-align: center;
    justify-content: center;
    border-radius: var(--radius) !important;
    margin-left: 0 !important;
    margin-top: var(--sp-2);
  }
}

/* ── v2.2 FIX 6: Customizer preview — search not clipped ────
   When WP Customizer panel is open (280px left panel),
   the preview iframe shrinks. Overflow visible ensures
   search dropdown isn't clipped.
   ──────────────────────────────────────────────────────── */
.customize-preview .site-header,
.customize-preview .site-header__inner {
  overflow: visible !important;
}