/* ==========================================================================
   GSG Site Styles (Bootstrap 5 base) — Light/Dark, ADA-friendly
   ========================================================================== */

/* ========== Theme tokens (light/dark) ========== */
:root{
  --cl-orange:#F56600;           /* Clemson Orange */
  --cl-purple:#522D80;           /* Clemson Purple */
  --ink:#0B0F19;                 /* body text */
  --surface:#F6F7FB;             /* page background */
  --card:#ffffff;                /* card surface */
  --border: rgba(0,0,0,.12);     /* subtle border */
  --section-alt-bg:#f0f2f7;      /* alternate section background */
  --cta-fg:#ffffff;              /* CTA text */
  --cta-bg: linear-gradient(120deg,#522D80 0%,#6a3aa7 50%,#F56600 100%);
  --cta-overlay: radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 40%);
  --brand-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

html[data-bs-theme="dark"]{
  --ink:#E9ECEF;
  --surface:#151822;
  --card:#1B202C;
  --border: rgba(255,255,255,.12);
  --section-alt-bg:#12151f;
  --cta-fg:#ffffff;
  --cta-bg: linear-gradient(120deg,#3d2260 0%,#5a3391 50%,#b24a00 100%);
  --cta-overlay: radial-gradient(circle at 20% 20%, rgba(255,255,255,.08), transparent 45%);
}

/* ========== Base ========== */
html, body { height:100%; }
body{
  background: var(--surface);
  color: var(--ink);
  font-family: var(--brand-font);
}
.bg-surface{ background: var(--surface); }

/* Content wrapper to clear fixed navbar */
.content-wrap{ padding-top: 5.5rem; }
section.my-4, section.my-5{ scroll-margin-top: 6rem; }
@media (min-width: 992px){
  section.my-4{ margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }
  section.my-5{ margin-top: 3rem !important; margin-bottom: 3rem !important; }
}

/* Alternate section surface (apply class="section-alt" to a parent <section>) */
.section-alt{
  background: var(--section-alt-bg);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
}
@media (min-width: 768px){ .section-alt{ padding: 1.75rem; } }

/* Slightly roomier grid inside a wrapper with class="spacious" */
.spacious .row{ --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }

/* ========== Navbar (glassy) ========== */
.navbar-glass{
  backdrop-filter: saturate(1.2) blur(8px);
  background: color-mix(in srgb, var(--card) 85%, transparent);
  border-bottom: 1px solid var(--border);
}
.navbar-glass .navbar-brand .brand-logo{ width:28px; height:28px; border-radius:6px; object-fit:cover; }
.navbar-glass .brand-text{ font-weight:700; letter-spacing:.2px; }
.navbar .nav-link{ font-weight:500; }
.navbar .nav-link:hover, .navbar .dropdown-item:hover{ color: var(--cl-orange); }
.navbar .dropdown-menu{ border:1px solid var(--border); }

/* ========== Cards / visual containers ========== */
.card-glow{
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border-radius: 1rem;
}
.card-stripe-top{ border-top: 4px solid var(--cl-orange); border-radius: 1rem 1rem .75rem .75rem; }

/* Section headers */
.section-title{ display:flex; align-items:center; gap:.5rem; }
.section-title .bar{ width:18px; height:4px; background: var(--cl-orange); border-radius:2px; display:inline-block; }
.section-title h2{ margin:0; color: var(--cl-purple); }
html[data-bs-theme="dark"] .section-title h2{ color:#c9b6e6; }

/* ========== Hero banner ========== */
.hero-bleed{ min-height: 380px; border-radius: 1rem; }
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.02); filter:saturate(1.05); }
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(120deg, rgba(82,45,128,.85), rgba(245,102,0,.65)); }

/* ========== Avatars / people cards ========== */
.person-card .avatar{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:.75rem; }
.avatar-lg{ width:84px; height:84px; object-fit:cover; border-radius:.75rem; }

/* ========== CTA band ========== */
.cta-band{
  background: var(--cta-bg);
  color: var(--cta-fg);
  border: 1px solid var(--border);
  border-radius: 1rem;
}
.cta-band .cta-overlay{ position:absolute; inset:0; background: var(--cta-overlay); }
.cta-band h2, .cta-band p, .cta-band a{ color: var(--cta-fg); }

/* Buttons */
.btn-cta{ background: var(--cl-orange); border-color: var(--cl-orange); color:#fff; }
.btn-cta:hover{ background:#D15900; border-color:#D15900; color:#fff; }
.btn-contrast{
  background: transparent;
  border: 1px solid rgba(255,255,255,.85);
  color: var(--cta-fg);
}
.btn-contrast:hover{ background: rgba(255,255,255,.12); color: #fff; }

/* ========== Pills / tabs ========== */
.nav-pills .nav-link{ border: 1px solid var(--border); }
.nav-pills .nav-link.active{
  background: var(--cl-purple);
  border-color: var(--cl-purple);
}

/* ========== Utilities & accessibility ========== */
.skip-link{
  position:absolute; top:-40px; left:0;
  background:#fff; color:#000; padding:.5rem 1rem; z-index:1000;
}
.skip-link:focus{ top:0; }

/* Strong, visible focus rings (ADA) */
:where(a,button,.nav-link,.dropdown-item,.form-control):focus-visible{
  outline: 3px solid var(--cl-orange);
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior:auto !important; }
}

/* ========== Footer (if you use it) ========== */
.site-footer{
  border-top: 1px solid var(--border);
  background: var(--card);
}
.site-footer a{ text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }


/* ===== Hero inner left padding + readable line length ===== */
.hero-inner{ max-width: 70ch; }            /* cap text width for readability */
@media (min-width: 992px){
  .hero-inner{ padding-left: 3rem; }       /* extra left padding on large screens */
}

/* Rebalance overlay (still AA contrast over white text) */
.hero-overlay{
  background: linear-gradient(120deg, rgba(82,45,128,.78), rgba(245,102,0,.58)) !important;
}

/* Reusable header-with-actions pattern */
.section-header .actions .btn{
  white-space: nowrap;
}

/* Optional: a touch more gap in dense rows site-wide (keeps things airy) */
.row.g-4{ --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }

/* Reader-friendly paragraphs anywhere */
.measure{ max-width: 70ch; }


/* Filled brand button (Clemson purple) */
.btn-brand{
  background: var(--cl-purple);
  border-color: var(--cl-purple);
  color: #fff;
}
.btn-brand:hover{
  background: #3f2366; /* darker for hover */
  border-color: #3f2366;
  color: #fff;
}