/* ==========================================================================
   GICEA — Global Design System
   Palette: Deep Royal Navy (primary) + Soft Gray/White + Refined Gold (accent)
   Fonts: "Poppins" (headings/display) + "Inter" (body, sans)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* Core palette — deepened navy for richer contrast, royal-blue mid tones */
  --color-navy-950:#030814;
  --color-navy-900:#081633;
  --color-navy-800:#0d234c;
  --color-navy-700:#123067;
  --color-navy-600:#1a4088;
  --color-navy-500:#2657ad;

  --color-gold-600:#9c7519;
  --color-gold-500:#c8992c;
  --color-gold-400:#dcb95a;
  --color-gold-300:#ecd692;

  --color-white:#ffffff;
  --color-gray-50:#f7f8fa;
  --color-gray-100:#eef1f5;
  --color-gray-200:#e2e6ec;
  --color-gray-300:#cbd2dc;
  --color-gray-500:#8792a2;
  --color-gray-700:#4b5566;
  --color-gray-900:#1c2330;

  /* Semantic tokens */
  --color-primary:var(--color-navy-800);
  --color-primary-dark:var(--color-navy-950);
  --color-accent:var(--color-gold-500);
  --color-accent-dark:var(--color-gold-600);
  --color-bg:var(--color-white);
  --color-bg-alt:var(--color-gray-50);
  --color-text:var(--color-gray-900);
  --color-text-muted:var(--color-gray-700);
  --color-border:var(--color-gray-200);

  /* Typography */
  --font-heading:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Layout */
  --container-w:1200px;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --shadow-sm:0 2px 8px rgba(10,26,53,0.06);
  --shadow-md:0 8px 28px rgba(10,26,53,0.10);
  --shadow-lg:0 20px 50px rgba(10,26,53,0.16);
  --header-h:84px;
  --transition:0.3s cubic-bezier(.4,0,.2,1);
}

/* Dark theme support (viewer preference) */
@media (prefers-color-scheme: dark){
  :root{
    --color-bg:#0b1220;
    --color-bg-alt:#0f1a2e;
    --color-text:#e7ebf3;
    --color-text-muted:#aab4c6;
    --color-border:#22304a;
  }
}
:root[data-theme="dark"]{
  --color-bg:#0b1220;
  --color-bg-alt:#0f1a2e;
  --color-text:#e7ebf3;
  --color-text-muted:#aab4c6;
  --color-border:#22304a;
}
:root[data-theme="light"]{
  --color-bg:#ffffff;
  --color-bg-alt:var(--color-gray-50);
  --color-text:var(--color-gray-900);
  --color-text-muted:var(--color-gray-700);
  --color-border:var(--color-gray-200);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }
h1,h2,h3,h4{
  font-family:var(--font-heading);
  color:var(--color-primary-dark);
  line-height:1.25;
  margin:0 0 .6em;
  font-weight:700;
}
:root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3,:root[data-theme="dark"] h4{ color:var(--color-white); }
@media (prefers-color-scheme: dark){
  h1,h2,h3,h4{ color:var(--color-white); }
}
p{ margin:0 0 1em; color:var(--color-text-muted); }

/* ---------- Layout helpers ---------- */
.container{
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 24px;
}
.section{ padding:96px 0; }
.section-alt{ background:var(--color-bg-alt); }
.section-head{ text-align:center; max-width:720px; margin:0 auto 56px; }
.section-head .eyebrow{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.75rem;
  color:var(--color-accent-dark);
  margin-bottom:14px;
}
.section-head h2{ font-size:clamp(1.8rem,3vw,2.6rem); }
.section-head p{ font-size:1.05rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 30px;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.01em;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space:nowrap;
}
.btn-primary{ background:var(--color-accent); color:var(--color-navy-950); }
.btn-primary:hover{ background:var(--color-accent-dark); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,.55); color:var(--color-white); }
.btn-outline:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn-navy{ background:var(--color-primary); color:var(--color-white); }
.btn-navy:hover{ background:var(--color-navy-950); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-ghost{ background:transparent; border-color:var(--color-border); color:var(--color-primary); }
.btn-ghost:hover{ border-color:var(--color-accent); color:var(--color-accent-dark); }
.btn-sm{ padding:10px 20px; font-size:.85rem; }

/* ---------- Badges / tags ---------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 14px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--color-gray-100);
  color:var(--color-text-muted);
}
.badge-gold{ background:rgba(198,156,46,.14); color:var(--color-gold-600); }

/* ---------- Cards ---------- */
.card{
  background:var(--color-bg);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition), box-shadow var(--transition);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }

/* ---------- Reveal animation hook ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Back to top ---------- */
#back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--color-primary);
  color:var(--color-white);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:var(--shadow-md);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition), background var(--transition);
  z-index:900;
}
#back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
#back-to-top:hover{ background:var(--color-accent); color:var(--color-navy-950); }

/* ---------- Utility ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- Inner-page hero / banner ---------- */
.page-hero{
  position:relative;
  padding:calc(var(--header-h) + 76px) 0 68px;
  background:
    radial-gradient(circle at 85% 20%, rgba(198,153,44,.20), transparent 55%),
    linear-gradient(135deg, var(--color-navy-950), var(--color-navy-800) 60%, var(--color-navy-700));
  color:var(--color-white);
  overflow:hidden;
}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.5), transparent 75%);
  pointer-events:none;
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero .breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-bottom:18px;
  font-size:.82rem; font-weight:600;
  color:rgba(255,255,255,.65);
}
.page-hero .breadcrumb a{ color:rgba(255,255,255,.8); transition:color var(--transition); }
.page-hero .breadcrumb a:hover{ color:var(--color-gold-300); }
.page-hero .breadcrumb .sep{ opacity:.5; }
.page-hero .breadcrumb .current{ color:var(--color-gold-300); }
.page-hero .eyebrow{
  display:inline-block; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:.75rem; color:var(--color-gold-300); margin-bottom:14px;
}
.page-hero h1{ color:var(--color-white); font-size:clamp(2rem,4vw,3rem); margin-bottom:14px; max-width:800px; }
.page-hero p{ color:rgba(255,255,255,.82); font-size:1.05rem; max-width:660px; margin-bottom:0; }

/* ---------- Page-load spinner ---------- */
#page-loader{
  position:fixed; inset:0; z-index:5000;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-navy-950);
  transition:opacity .5s ease, visibility .5s ease;
}
#page-loader.is-hidden{ opacity:0; visibility:hidden; }
#page-loader .spinner{
  width:52px; height:52px;
  border-radius:50%;
  border:3px solid rgba(236,214,146,.2);
  border-top-color:var(--color-gold-400);
  animation:spin .8s linear infinite;
}

/* ---------- Breadcrumb-adjacent generic content blocks ---------- */
.prose{ font-size:1rem; color:var(--color-text-muted); }
.prose h3{ margin-top:2em; }
.prose ol, .prose ul{ list-style:decimal; padding-left:1.4em; margin-bottom:1.2em; }
.prose ul{ list-style:disc; }
.prose li{ margin-bottom:.6em; color:var(--color-text-muted); }

.info-card{
  background:var(--color-bg-alt);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:22px 26px;
  margin:24px 0;
}
.info-card h4{ margin-bottom:8px; }

/* Simple data table used across roster / archive pages */
.data-table-wrap{ overflow-x:auto; border-radius:var(--radius-md); border:1px solid var(--color-border); }
table.data-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
table.data-table th, table.data-table td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--color-border); }
table.data-table th{ background:var(--color-navy-900); color:var(--color-white); font-weight:600; letter-spacing:.02em; }
table.data-table tbody tr:hover{ background:var(--color-bg-alt); }

/* Generic content grid for staff/committee category cards */
.category-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin:32px 0; }
.category-card{ padding:26px; display:flex; gap:16px; align-items:flex-start; }
.category-card .num{
  flex:none; width:40px; height:40px; border-radius:50%;
  background:var(--color-navy-800); color:var(--color-gold-300);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:700;
}
.category-card h4{ margin-bottom:4px; }
.category-card p{ font-size:.9rem; margin:0; }

.two-col-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; }