/* ============================================================
   CSA Lehigh Valley — Central Stylesheet
   Official Brand Palette: CSA Blue (#00549F) · White · CSA Orange (#F98526)
   Source: official chapter logo + badge files (Resources/Branding)
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --blue-900:   #021b33;
  --blue-800:   #04305c;
  --blue-700:   #063f73;
  --blue-600:   #0a4d8c;
  --blue-500:   #00549f;
  --accent-600:   #cc6a1f;
  --accent-500:   #f98526;
  --accent-400:   #fa9b4f;
  --accent-300:   #fbc28c;
  --accent-100:   #fde4c9;
  --badge-gray:  #bccdd8;
  --linkedin:   #0077B5;
  --white:      #ffffff;
  --gray-50:    #f8fafc;
  --gray-100:   #f1f5f9;
  --gray-200:   #e2e8f0;
  --gray-600:   #475569;
  --gray-700:   #334155;
  --text-dark:  #0f172a;
  --text-mid:   #1e293b;
  --text-muted: #64748b;
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --shadow-sm:  0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.14);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.18);
  --transition: .22s ease;
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text-mid);
  background: var(--white);
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
}

a { color: var(--accent-500); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-400); }

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

/* ── Navbar ─────────────────────────────────────────────────── */
.csa-navbar {
  background: var(--blue-800);
  border-bottom: 2px solid var(--accent-400);
  padding: .75rem 0;
}

.csa-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  color: var(--white) !important;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -.01em;
}

.csa-navbar .nav-link {
  color: rgba(255,255,255,.82) !important;
  font-size: .875rem;
  font-weight: 500;
  padding: .35rem .7rem !important;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.csa-navbar .nav-link:hover,
.csa-navbar .nav-link.active {
  color: var(--white) !important;
  background: rgba(250,155,79,.15);
}
.csa-navbar .nav-link.active {
  color: var(--accent-300) !important;
}

/* ── Hero Sections ──────────────────────────────────────────── */
.hero-section {
  background: linear-gradient(135deg, var(--blue-900) 0%, var(--blue-700) 60%, var(--blue-600) 100%);
  position: relative;
  overflow: hidden;
  padding: 5rem 0 4rem;
  color: var(--white);
}

.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 70% 40%, rgba(250,155,79,.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(249,133,38,.08) 0%, transparent 50%);
  pointer-events: none;
}

/* Animated grid overlay for "high-tech" feel */
.hero-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(250,155,79,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,155,79,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  opacity: .6;
}

.hero-section .container { position: relative; z-index: 2; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  height: 1.85rem;
  line-height: 1;
  gap: .4rem;
  background: rgba(250,155,79,.18);
  border: 1px solid rgba(250,155,79,.35);
  color: var(--accent-300);
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 0 .75rem;
  border-radius: 20px;
  margin-bottom: 1.25rem;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}

.hero-title .accent { color: var(--accent-400); }

.hero-lead {
  font-size: 1.05rem;
  color: rgba(255,255,255,.78);
  max-width: 560px;
  margin-bottom: 2rem;
}

.hero-stats {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
}

.hero-stat-item {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.hero-stat-item .stat-num {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent-400);
  line-height: 1;
  white-space: nowrap;
}
.hero-stat-item .stat-label {
  font-size: .75rem;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Section Shared ─────────────────────────────────────────── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--accent-500);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .5rem;
}

.section-title {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--text-dark);
}

.section-divider {
  width: 48px; height: 4px;
  background: linear-gradient(90deg, var(--accent-500), var(--accent-300));
  border-radius: 2px;
  margin: .75rem 0 1.5rem;
}

.bg-navy { background: var(--blue-800); }

/* ── Cards ──────────────────────────────────────────────────── */
.csa-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  overflow: hidden;
}
.csa-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card-header-stripe {
  height: 5px;
  background: linear-gradient(90deg, var(--accent-600), var(--accent-400));
}

/* ── LinkedIn Section ───────────────────────────────────────── */
.linkedin-section {
  background: linear-gradient(180deg, var(--blue-800) 0%, var(--blue-900) 100%);
  padding: 4rem 0;
}

.linkedin-section .section-title { color: var(--white); }
.linkedin-section .section-label { color: var(--accent-300); }
.linkedin-section .section-divider { background: linear-gradient(90deg, var(--accent-400), transparent); }

.linkedin-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  transition: box-shadow var(--transition), transform var(--transition);
}
.linkedin-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,.35);
}

.linkedin-card-header {
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.linkedin-card-header.page-header { background: linear-gradient(135deg, #0077B5, #005f91); }
.linkedin-card-header.group-header { background: linear-gradient(135deg, var(--accent-600), var(--accent-500)); }

.linkedin-icon-wrap {
  width: 52px; height: 52px;
  background: rgba(255,255,255,.15);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  color: var(--white);
  flex-shrink: 0;
}

.linkedin-card-body {
  padding: 1.5rem;
}

.linkedin-channel-badge {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .2rem .6rem;
  border-radius: 12px;
  background: rgba(255,255,255,.25);
  color: var(--white);
  display: inline-block;
  margin-bottom: .5rem;
}

.linkedin-card-header .channel-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: .2rem;
}
.linkedin-card-header .channel-sub {
  font-size: .78rem;
  color: rgba(255,255,255,.72);
}

.linkedin-feature-list {
  list-style: none;
  padding: 0; margin: 0 0 1.5rem;
}
.linkedin-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  color: rgba(255,255,255,.82);
  font-size: .875rem;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.linkedin-feature-list li:last-child { border-bottom: none; }
.linkedin-feature-list .feat-icon {
  color: var(--accent-400);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: .05rem;
}
.linkedin-feature-list .feat-icon.page-icon { color: #70c7f0; }

.btn-linkedin-page {
  background: #0077B5;
  color: var(--white);
  border: none;
  padding: .6rem 1.4rem;
  border-radius: 24px;
  font-size: .875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all var(--transition);
  text-decoration: none;
}
.btn-linkedin-page:hover { background: #005f91; color: var(--white); transform: translateY(-1px); }

.btn-linkedin-group {
  background: var(--accent-500);
  color: var(--white);
  border: none;
  padding: .6rem 1.4rem;
  border-radius: 24px;
  font-size: .875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all var(--transition);
  text-decoration: none;
}
.btn-linkedin-group:hover { background: var(--accent-400); color: var(--white); transform: translateY(-1px); }

/* ── Event Cards ────────────────────────────────────────────── */
.event-card {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
}
.event-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.event-card-date {
  background: var(--blue-700);
  color: var(--white);
  text-align: center;
  padding: .75rem;
  min-width: 64px;
  flex-shrink: 0;
}
.event-card-date .date-month { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-300); }
.event-card-date .date-day   { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.event-card-date .date-year  { font-size: .65rem; color: rgba(255,255,255,.6); }

.event-highlight-card {
  background: linear-gradient(135deg, var(--blue-700), var(--blue-600));
  border: 1px solid var(--accent-400);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.event-highlight-card::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(250,155,79,.2), transparent 70%);
  pointer-events: none;
}

/* ── Forms ──────────────────────────────────────────────────── */
.csa-form label {
  font-size: .825rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: .3rem;
}

.csa-form .form-control,
.csa-form .form-select {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  padding: .6rem .9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.csa-form .form-control:focus,
.csa-form .form-select:focus {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(249,133,38,.15);
  outline: none;
}

.csa-form .form-check-input:checked {
  background-color: var(--accent-500);
  border-color: var(--accent-500);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn-csa-primary {
  background: linear-gradient(135deg, var(--accent-600), var(--accent-500));
  color: var(--white);
  border: none;
  padding: .7rem 1.8rem;
  border-radius: 24px;
  font-weight: 600;
  font-size: .9rem;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: all var(--transition);
  text-decoration: none;
}
.btn-csa-primary:hover { background: linear-gradient(135deg, var(--accent-500), var(--accent-400)); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(249,133,38,.35); }

.btn-csa-outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255,255,255,.5);
  padding: .7rem 1.65rem;
  border-radius: 24px;
  font-weight: 600;
  font-size: .9rem;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: all var(--transition);
  text-decoration: none;
}
.btn-csa-outline:hover { border-color: var(--white); color: var(--white); background: rgba(255,255,255,.08); }

.btn-csa-navy {
  background: var(--blue-700);
  color: var(--white);
  border: none;
  padding: .65rem 1.6rem;
  border-radius: 24px;
  font-weight: 600;
  font-size: .9rem;
  display: inline-flex; align-items: center; gap: .5rem;
  transition: all var(--transition);
  text-decoration: none;
}
.btn-csa-navy:hover { background: var(--blue-600); color: var(--white); transform: translateY(-1px); }

/* ── Board Cards ────────────────────────────────────────────── */
.board-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: center;
  transition: box-shadow var(--transition), transform var(--transition);
}
.board-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.board-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  font-weight: 800;
  color: white;
  margin: 2rem auto 1rem;
  position: relative;
}
.board-avatar::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent-400);
  opacity: .5;
}
.board-role-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .2rem .7rem;
  border-radius: 12px;
  background: rgba(249,133,38,.1);
  color: var(--accent-600);
  margin-bottom: .5rem;
}
.board-cert-pill {
  display: inline-block;
  font-size: .62rem;
  font-weight: 600;
  padding: .15rem .5rem;
  border-radius: 8px;
  background: var(--gray-100);
  color: var(--gray-700);
  margin: .1rem;
}

.committee-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--gray-100);
  transition: background var(--transition);
}
.committee-row:last-child { border-bottom: none; }
.committee-row:hover { background: var(--gray-50); }
.committee-avatar-sm {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

/* ── Sponsorship Tier Cards (sponsors.html) ──────────────────── */
.tier-card {
  border-radius: var(--radius-md);
  border: 2px solid var(--gray-200);
  overflow: hidden;
  transition: box-shadow var(--transition), transform var(--transition);
  background: white;
}
.tier-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.tier-card.tier-featured { border-color: var(--accent-500); }
.tier-card-header { padding: 1.75rem 1.5rem; text-align: center; }
.tier-card-header.gold   { background: linear-gradient(135deg, #92400e, #b45309); }
.tier-card-header.silver { background: linear-gradient(135deg, #374151, #6b7280); }
.tier-card-header.bronze { background: linear-gradient(135deg, #7c2d12, #9a3412); }
.tier-card-header.community { background: linear-gradient(135deg, var(--blue-700), var(--accent-600)); }
.tier-price {
  font-size: 2.25rem;
  font-weight: 900;
  color: white;
  line-height: 1;
}
.tier-name {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.9);
  margin-bottom: .25rem;
}
.tier-price-sub {
  font-size: .72rem;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tier-feature-list {
  list-style: none;
  padding: 0; margin: 0;
}
.tier-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .5rem 0;
  font-size: .845rem;
  color: var(--text-mid);
  border-bottom: 1px solid var(--gray-100);
}
.tier-feature-list li:last-child { border-bottom: none; }
.tier-feature-list .check { color: var(--accent-500); flex-shrink: 0; }

/* ── Sponsor Grid ───────────────────────────────────────────── */
.sponsor-tier-badge {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .2rem .7rem;
  border-radius: 12px;
}
.tier-gold    { background: #fef3c7; color: #92400e; }
.tier-silver  { background: #f1f5f9; color: #475569; }
.tier-bronze  { background: #fef0e7; color: #9a3412; }
.tier-community { background: rgba(250,155,79,.1); color: var(--accent-600); }

.sponsor-slot {
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-md);
  min-height: 100px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: .875rem;
  transition: all var(--transition);
  text-align: center;
  padding: 1.5rem;
}
.sponsor-slot:hover { border-color: var(--accent-400); color: var(--accent-500); background: rgba(250,155,79,.04); }

/* ── Eventbrite Embed (events.html) ────────────────────────── */
.eventbrite-embed-wrap {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-md);
  min-height: 520px;
  position: relative;
}
.eventbrite-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  min-height: 380px;
  background: linear-gradient(135deg, var(--gray-50), var(--white));
  border: 2px dashed var(--gray-200);
  border-radius: var(--radius-md);
}

/* ── Footer ─────────────────────────────────────────────────── */
.csa-footer {
  background: var(--blue-900);
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.65);
  padding: 3rem 0 1.5rem;
}

.csa-footer a { color: rgba(255,255,255,.65); transition: color var(--transition); }
.csa-footer a:hover { color: var(--accent-400); }

.footer-heading {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--accent-300);
  margin-bottom: 1rem;
}

.footer-divider {
  border-color: rgba(255,255,255,.1);
  margin: 2rem 0 1.5rem;
}

.footer-legal {
  font-size: .75rem;
  color: rgba(255,255,255,.4);
  text-align: center;
}

.social-icon-link {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.08);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  font-size: .95rem;
  transition: all var(--transition);
  text-decoration: none;
}
.social-icon-link:hover { background: var(--accent-500); color: var(--white); transform: translateY(-2px); }

/* ── Zeffy / Embed Containers ───────────────────────────────── */
.embed-container {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-md);
}

/* ── Notification Toast ─────────────────────────────────────── */
.csa-toast-wrap {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
}

/* ── Utility ────────────────────────────────────────────────── */
.text-teal  { color: var(--accent-500) !important; }
.text-navy  { color: var(--blue-700) !important; }
.bg-gray-50 { background: var(--gray-50) !important; }

/* Hover-tint card used for hero quick-action links (dark background) */
.quick-action-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  transition: background var(--transition);
}
.quick-action-card:hover { background: rgba(250,155,79,.12); }

/* Hover-border card used for resource/link lists on white backgrounds */
.resource-link-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  transition: border-color var(--transition);
}
.resource-link-card:hover { border-color: var(--accent-400); }

/* ── Responsive adjustments ─────────────────────────────────── */
@media (max-width: 767.98px) {
  .hero-section { padding: 3.5rem 0 3rem; }
  .hero-stats   { gap: 1.25rem; }
  .linkedin-section { padding: 2.5rem 0; }
}

/* ── Accessible Focus States ────────────────────────────────── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.nav-link:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Scroll-Reveal (progressive enhancement, vanilla JS) ──────
   js/reveal.js toggles .reveal-in once an element enters view.
   Degrades gracefully: elements are fully visible if JS is
   disabled or prefers-reduced-motion is set. */
.reveal-init {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-init.reveal-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-init {
    opacity: 1;
    transform: none;
    transition: none;
  }
}