/*
Theme Name: Alumni Legacy
Theme URI: https://example.com/alumni-legacy
Author: Alumni Association
Author URI: https://example.com
Description: A prestigious, elegant WordPress theme designed for Alumni Associations. Features event management, member directories, news, donation sections with customizable "Stay Informed" section, blog page template, fully editable membership tier cards (names, descriptions, prices, periods) via Customizer, clickable membership tiers with customizable link URL, widgetized footer with three customizable widget areas with properly positioned contact icons and clean styling, enhanced navigation with properly disabled auto-add pages to all menus, widgetized hero with customizable vh height and crisp button rendering, fully customizable legacy section with adjustable vh height, customizable subtext color, and editable statistics in ALL locations that save properly, reduced padding, hero-aligned content, and custom full-width hero slider with prev/next navigation and gradient transitions.
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alumni-legacy
Tags: education, alumni, association, responsive, custom-colors, featured-images
*/

/* ==========================================
   CSS CUSTOM PROPERTIES
   ========================================== */
:root {
  --color-navy: #0D1B2A;
  --color-navy-light: #1A2D45;
  --color-gold: #C9952A;
  --color-gold-light: #E8B84B;
  --color-gold-pale: #F5E6C4;
  --color-cream: #FAF7F2;
  --color-white: #FFFFFF;
  --color-gray-100: #F5F3EF;
  --color-gray-200: #E8E4DC;
  --color-gray-400: #A89E8E;
  --color-gray-600: #6B5F52;
  --color-gray-800: #3D3428;
  --color-text: #2A2118;
  --color-text-muted: #7A6E62;

  --font-serif: 'Playfair Display', 'Georgia', serif;
  --font-sans: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-ui: 'Jost', 'Helvetica Neue', sans-serif;

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 6rem;

  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;

  --shadow-sm: 0 2px 8px rgba(13,27,42,0.08);
  --shadow-md: 0 8px 24px rgba(13,27,42,0.12);
  --shadow-lg: 0 20px 60px rgba(13,27,42,0.18);
  --shadow-gold: 0 4px 20px rgba(201,149,42,0.25);

  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  --container-width: 1280px;
  --container-padding: 2rem;
}

/* ==========================================
   RESET & BASE
   ========================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-ui);
  color: var(--color-text);
  background-color: var(--color-cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
}

h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h4 { font-size: 1.375rem; }
h5 { font-size: 1.125rem; }

p {
  font-size: 1.0625rem;
  color: var(--color-gray-600);
  line-height: 1.8;
}

.label {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.lead {
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  line-height: 1.6;
  color: var(--color-gray-600);
}

/* ==========================================
   LAYOUT
   ========================================== */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.container--narrow {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section {
  padding: var(--spacing-2xl) 0;
}

.section--alt {
  background-color: var(--color-gray-100);
}

.section--dark {
  background-color: var(--color-navy);
  color: var(--color-white);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
  color: var(--color-white);
}

.section--dark p {
  color: rgba(255,255,255,0.75);
}

.section-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.section-header .label {
  display: block;
  margin-bottom: var(--spacing-sm);
}

.section-header h2 {
  margin-bottom: var(--spacing-md);
}

.section-header p {
  max-width: 600px;
  margin: 0 auto;
}

/* Gold divider */
.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
}

.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-gold);
  opacity: 0.4;
}

.divider--center {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
  margin: 1rem auto 1.5rem;
  display: block;
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
  color: var(--color-navy);
  box-shadow: var(--shadow-gold);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(201,149,42,0.4);
}

.btn-secondary {
  background: transparent;
  color: var(--color-navy);
  border: 1.5px solid var(--color-navy);
}

.btn-secondary:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

.btn-outline-gold {
  background: transparent;
  color: var(--color-gold-light);
  border: 1.5px solid var(--color-gold);
}

.btn-outline-gold:hover {
  background: var(--color-gold);
  color: var(--color-navy);
}

.btn-white {
  background: var(--color-white);
  color: var(--color-navy);
}

.btn-white:hover {
  background: var(--color-gold-pale);
}

.btn-donate {
  background: transparent;
  color: var(--color-gold-light);
  border: 1.5px solid var(--color-gold);
  font-size: 0.8125rem;
  padding: 0.625rem 1.25rem;
}

.btn-donate:hover {
  background: var(--color-gold);
  color: var(--color-navy);
  transform: translateY(-1px);
  box-shadow: var(--shadow-gold);
}

.btn-donate i {
  font-size: 0.875rem;
}

@media (max-width: 480px) {
  .btn-donate span,
  .btn-donate {
    font-size: 0.75rem;
    padding: 0.5rem 0.875rem;
  }
}

/* ==========================================
   PAGE MAIN OFFSET (clears fixed header)
   ========================================== */
.page-main {
  padding-top: 68px; /* matches fixed header height */
}

@media (max-width: 490px) {
  .page-main {
    padding-top: 60px;
  }
}

/* ==========================================
   NAVIGATION
   ========================================== */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: var(--transition);
}

#site-header.scrolled {
  background: rgba(13, 27, 42, 0.97);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

.header-top {
  background: var(--color-gold);
  padding: 0.375rem 0;
}

.header-top .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-top-text {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-navy);
}

.header-top-links {
  display: flex;
  gap: 1.5rem;
}

.header-top-links a {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: 0.05em;
}

.header-top-links a:hover {
  opacity: 0.7;
}

.header-main {
  background: var(--color-navy);
  padding: 0.875rem 0;
  height: 68px;
  display: flex;
  align-items: center;
}

.header-main .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

/* Custom logo image uploaded via Customizer */
.site-logo--custom {
  gap: 0;
}

.site-logo--custom .custom-logo {
  display: block;
  max-height: 52px;
  width: auto;
  object-fit: contain;
}

@media (max-width: 490px) {
  .site-logo--custom .custom-logo {
    max-height: 36px;
  }
}

.logo-emblem {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}

.logo-emblem::before {
  content: '⚜';
  font-size: 1.5rem;
  color: var(--color-navy);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logo-text {
  color: var(--color-white);
}

.logo-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.logo-subtitle {
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-top: 0.2rem;
}

.main-nav {
  flex: 1;
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.nav-menu > li {
  position: relative;
}

.nav-menu > li > a {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  white-space: nowrap;
}

.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a {
  color: var(--color-gold-light);
  background: rgba(201,149,42,0.1);
}

/* Dropdown */
.nav-menu .dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 220px;
  background: var(--color-navy-light);
  border-top: 2px solid var(--color-gold);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: var(--transition);
  z-index: 100;
}

.nav-menu li:hover > .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li a {
  display: block;
  padding: 0.75rem 1.25rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.8);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: var(--transition);
}

.dropdown-menu li a:hover {
  color: var(--color-gold-light);
  background: rgba(201,149,42,0.08);
  padding-left: 1.5rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* On desktop, donate button sits inline before header-actions */
.btn-donate {
  flex-shrink: 0;
}

/* Mobile nav toggle */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  color: white;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-white);
  transition: var(--transition);
}

/* ==========================================
   HERO SECTION
   ========================================== */
.hero {
  min-height: 35vh;
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--color-navy);
  overflow: hidden;
}

/* Gradient overlay at bottom of hero */
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, 
    transparent 0%, 
    rgba(13,27,42,0.3) 20%,
    rgba(13,27,42,0.6) 50%,
    rgba(13,27,42,0.85) 75%,
    rgba(13,27,42,0.95) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(13,27,42,0.92) 50%, rgba(13,27,42,0.6) 100%),
    url('images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
}

.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(201,149,42,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(201,149,42,0.05) 0%, transparent 50%);
}

/* Decorative dots pattern */
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(201,149,42,0.15) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.4;
}

.hero .container {
  position: relative;
  z-index: 1;
  padding-top: 8rem;
  padding-bottom: 6rem;
}

.hero-content {
  max-width: 680px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(201,149,42,0.15);
  border: 1px solid rgba(201,149,42,0.3);
  color: var(--color-gold-light);
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  border-radius: 2px;
  animation: fadeInDown 0.8s ease both;
}

.hero h1 {
  color: var(--color-white);
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.8s 0.2s ease both;
}

.hero h1 span {
  color: var(--color-gold-light);
  display: block;
}

.hero .lead {
  color: rgba(255,255,255,0.75);
  margin-bottom: 2.5rem;
  animation: fadeInUp 0.8s 0.4s ease both;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  animation: fadeInUp 0.8s 0.6s ease both;
}

.hero-stats {
  display: flex;
  gap: 3rem;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  animation: fadeInUp 0.8s 0.8s ease both;
}

.hero-stat-number {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-gold-light);
  line-height: 1;
}

.hero-stat-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 0.25rem;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.4);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  animation: bounce 2s infinite;
}

.scroll-indicator::after {
  content: '';
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);
}

/* ==========================================
   LEGACY SECTION (Connect With Your Legacy)
   ========================================== */
.legacy-section {
  background: var(--color-cream);
  padding: 2rem 0;
  position: relative;
  min-height: 35vh;
  display: flex;
  align-items: center;
}

.legacy-section > .container {
  width: 100%;
}

/* Gradient overlay at top of legacy section */
.legacy-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(to bottom,
    rgba(13,27,42,0.15) 0%,
    rgba(13,27,42,0.08) 25%,
    rgba(13,27,42,0.03) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.legacy-content {
  max-width: 680px;
  margin: 0;
  text-align: left;
  position: relative;
  z-index: 2;
}

.legacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(201,149,42,0.15);
  border: 1px solid rgba(201,149,42,0.3);
  color: var(--color-gold);
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  border-radius: 2px;
}

.legacy-section h1 {
  color: var(--color-navy);
  margin-bottom: 1.5rem;
}

.legacy-section h1 span {
  color: var(--color-gold);
  display: inline;
}

.legacy-section .lead {
  color: var(--color-text-muted);
  margin-bottom: 2.5rem;
}

.legacy-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}

.legacy-stats {
  display: flex;
  gap: 3rem;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-gray-200);
}

.legacy-stat-number {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1;
}

.legacy-stat-label {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

/* ==========================================
   ABOUT STRIP
   ========================================== */
.about-strip {
  background: var(--color-gold);
  padding: 1.25rem 0;
}

.about-strip .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.about-strip-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-navy);
  letter-spacing: 0.05em;
}

.about-strip-item svg {
  width: 20px;
  height: 20px;
  opacity: 0.8;
}

/* ==========================================
   WELCOME SECTION
   ========================================== */
.welcome-section {
  padding: var(--spacing-2xl) 0;
}

.welcome-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.welcome-image-wrapper {
  position: relative;
}

.welcome-image-main {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius-sm);
  position: relative;
  z-index: 1;
}

.welcome-image-accent {
  position: absolute;
  bottom: -2rem;
  right: -2rem;
  width: 55%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 6px solid var(--color-cream);
  z-index: 2;
  box-shadow: var(--shadow-lg);
}

.welcome-image-badge {
  position: absolute;
  top: 2rem;
  left: -2rem;
  background: var(--color-gold);
  color: var(--color-navy);
  padding: 1rem 1.5rem;
  z-index: 3;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-sm);
}

.welcome-image-badge .year {
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.welcome-image-badge .text {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.welcome-content .label {
  margin-bottom: 0.75rem;
}

.welcome-content h2 {
  margin-bottom: 1.25rem;
}

.welcome-content p {
  margin-bottom: 1.5rem;
}

.welcome-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2rem 0;
}

.welcome-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.welcome-feature-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-gold-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.welcome-feature-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.4;
}

/* ==========================================
   STATS SECTION
   ========================================== */
.stats-section {
  background: linear-gradient(135deg, var(--color-navy) 0%, #162A42 100%);
  padding: var(--spacing-xl) 0;
  position: relative;
  overflow: hidden;
}

.stats-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 1px solid rgba(201,149,42,0.1);
}

.stats-section::after {
  content: '';
  position: absolute;
  bottom: -50%;
  left: -5%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  border: 1px solid rgba(201,149,42,0.08);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  position: relative;
  z-index: 1;
}

.stat-item {
  text-align: center;
  padding: 2.5rem 2rem;
  background: transparent;
  transition: var(--transition);
}

.stat-item:hover {
  background: rgba(201,149,42,0.06);
}

.stat-number {
  display: block;
  font-family: var(--font-serif);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--color-gold-light);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ==========================================
   EVENTS SECTION
   ========================================== */
.events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.event-featured {
  grid-column: 1 / -1;
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 2fr 1fr;
  min-height: 320px;
}

.event-featured-image {
  position: relative;
  overflow: hidden;
}

.event-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.event-featured:hover .event-featured-image img {
  transform: scale(1.05);
}

.event-featured-content {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.event-date-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-gold);
  color: var(--color-navy);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  width: fit-content;
  margin-bottom: 1.25rem;
}

.event-date-badge .day {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.event-date-badge .month {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.event-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  border-bottom: 3px solid transparent;
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-bottom-color: var(--color-gold);
}

.event-card-image {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.event-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.event-card:hover .event-card-image img {
  transform: scale(1.05);
}

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

.event-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.event-type {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.event-date-text {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.event-card h4 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  transition: var(--transition);
}

.event-card:hover h4 {
  color: var(--color-gold);
}

.event-card p {
  font-size: 0.875rem;
  line-height: 1.6;
}

.event-card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.event-location {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* ==========================================
   NEWS SECTION
   ========================================== */
.news-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
}

.news-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.news-card--featured .news-card-image {
  aspect-ratio: 16/9;
}

.news-card-image {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}

.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.news-card:hover .news-card-image img {
  transform: scale(1.05);
}

.news-category {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--color-gold);
  color: var(--color-navy);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
}

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

.news-date {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.news-card h3, 
.news-card h4 {
  margin-bottom: 0.75rem;
  transition: var(--transition);
}

.news-card:hover h3,
.news-card:hover h4 {
  color: var(--color-gold);
}

.news-card p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.read-more {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  transition: var(--transition);
}

.read-more::after {
  content: '→';
  transition: transform 0.3s ease;
}

.read-more:hover::after {
  transform: translateX(4px);
}

/* ==========================================
   ALUMNI SPOTLIGHT
   ========================================== */
.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.spotlight-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: var(--transition);
  position: relative;
  border-top: 3px solid transparent;
}

.spotlight-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-top-color: var(--color-gold);
}

.spotlight-quote {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--color-gray-600);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  position: relative;
}

.spotlight-quote::before {
  content: '"';
  font-size: 4rem;
  color: var(--color-gold);
  opacity: 0.3;
  line-height: 0;
  position: absolute;
  top: 1rem;
  left: -0.5rem;
}

.spotlight-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  border: 3px solid var(--color-gold-pale);
}

.spotlight-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.25rem;
}

.spotlight-class {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: 600;
}

/* ==========================================
   MEMBERSHIP SECTION
   ========================================== */
.membership-section {
  background: linear-gradient(135deg, var(--color-navy) 0%, #0D2236 100%);
  position: relative;
  overflow: hidden;
}

.membership-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(rgba(201,149,42,0.06) 1px, transparent 1px);
  background-size: 50px 50px;
}

.membership-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.membership-content h2 {
  color: var(--color-white);
  margin-bottom: 1rem;
}

.membership-content p {
  color: rgba(255,255,255,0.7);
  margin-bottom: 2rem;
}

.membership-benefits {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.membership-benefit {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(255,255,255,0.85);
  font-size: 0.9375rem;
}

.membership-benefit-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(201,149,42,0.2);
  border: 1px solid rgba(201,149,42,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.875rem;
}

.membership-tiers {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tier-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.tier-card:hover {
  background: rgba(201,149,42,0.08);
  border-color: rgba(201,149,42,0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.tier-card--featured {
  background: rgba(201,149,42,0.12);
  border-color: var(--color-gold);
}

.tier-card--featured:hover {
  background: rgba(201,149,42,0.18);
  border-color: var(--color-gold-light);
}

.tier-name {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-white);
}

.tier-desc {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.55);
  margin-top: 0.2rem;
}

.tier-price {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gold-light);
}

.tier-price span {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255,255,255,0.4);
}

/* ==========================================
   GALLERY SECTION
   ========================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 1rem;
}

.gallery-item {
  overflow: hidden;
  border-radius: var(--radius-sm);
  position: relative;
}

.gallery-item:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,27,42,0.6), transparent);
  opacity: 0;
  transition: var(--transition);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* ==========================================
   CTA SECTION
   ========================================== */
.cta-section {
  background: linear-gradient(135deg, var(--color-gold) 0%, #D4A032 100%);
  padding: var(--spacing-xl) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -2rem;
  right: -2rem;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}

.cta-section::after {
  content: '';
  position: absolute;
  bottom: -3rem;
  left: -1rem;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
}

.cta-section .container {
  position: relative;
  z-index: 1;
}

.cta-section h2 {
  color: var(--color-navy);
  margin-bottom: 1rem;
}

.cta-section p {
  color: rgba(13,27,42,0.75);
  max-width: 560px;
  margin: 0 auto 2.5rem;
  font-size: 1.0625rem;
}

.cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================
   FOOTER
   ========================================== */
#site-footer {
  background: var(--color-navy);
  color: rgba(255,255,255,0.7);
}

.footer-main {
  padding: var(--spacing-2xl) 0 var(--spacing-xl);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
}

.footer-about .site-logo {
  margin-bottom: 1.5rem;
}

.footer-about p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1.5rem;
}

.footer-social {
  display: flex;
  gap: 0.75rem;
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  transition: var(--transition);
  color: rgba(255,255,255,0.6);
}

.social-link:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy);
}

.footer-col h5,
.footer-col .widget-title {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 1.25rem;
  font-family: var(--font-sans);
  border: none;
  padding: 0;
}

.footer-links,
.footer-col .widget ul {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links a,
.footer-col .widget ul a,
.footer-col .widget a {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  text-decoration: none;
}

.footer-links a:hover,
.footer-col .widget ul a:hover,
.footer-col .widget a:hover {
  color: var(--color-gold-light);
  padding-left: 0.25rem;
}

.footer-col .widget li {
  margin: 0;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1.25rem;
}

.footer-contact-item i {
  color: var(--color-gold);
  margin-top: 0.2rem;
  font-size: 1rem;
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
}

.footer-contact-item > div {
  flex: 1;
}

.footer-contact-item strong {
  color: rgba(255,255,255,0.8);
  display: block;
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.footer-contact-item a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact-item a:hover {
  color: var(--color-gold-light);
}

/* Footer Widget Specific Styles */
.footer-col .widget {
  color: rgba(255,255,255,0.5);
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.footer-col .widget p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.75rem;
  background: none;
}

.footer-col .widget .textwidget {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  background: none;
  border: none;
  padding: 0;
}

/* Remove all widget backgrounds in footer */
.footer-col .widget,
.footer-col .widget * {
  background-color: transparent !important;
  background-image: none !important;
}

/* Ensure text inputs and textareas don't have white backgrounds */
.footer-col .widget input[type="text"],
.footer-col .widget input[type="email"],
.footer-col .widget input[type="url"],
.footer-col .widget input[type="search"],
.footer-col .widget textarea,
.footer-col .widget select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
}

.footer-col .widget input::placeholder,
.footer-col .widget textarea::placeholder {
  color: rgba(255,255,255,0.3);
}

/* Footer widget buttons */
.footer-col .widget .btn,
.footer-col .widget button,
.footer-col .widget input[type="submit"] {
  margin-top: 1rem;
}

/* Ensure outline buttons work properly in footer */
.footer-col .widget .btn-outline-gold {
  background: transparent;
  border: 1.5px solid var(--color-gold);
  color: var(--color-gold);
  transition: color 0.3s ease;
}

.footer-col .widget .btn-outline-gold:hover {
  background: transparent;
  color: var(--color-gold-light);
  border-color: var(--color-gold);
}

/* Generic button styling for footer widgets */
.footer-col .widget .btn:not(.btn-outline-gold) {
  background: transparent;
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  transition: color 0.3s ease;
}

.footer-col .widget .btn:not(.btn-outline-gold):hover {
  background: transparent;
  color: var(--color-gold-light);
}

/* Footer widget lists */
.footer-col .widget ul ul {
  margin-left: 1rem;
  margin-top: 0.5rem;
}

/* Navigation Menu Widget in Footer */
.footer-col .widget_nav_menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: none;
}

.footer-col .widget_nav_menu li {
  margin-bottom: 0.625rem;
  background: none;
}

/* Text widget in footer */
.footer-col .widget_text a {
  color: rgba(255,255,255,0.7);
  background: none;
}

.footer-col .widget_text a:hover {
  color: var(--color-gold-light);
}

/* Recent Posts widget in footer */
.footer-col .widget_recent_entries ul {
  list-style: none;
  padding: 0;
  background: none;
}

.footer-col .widget_recent_entries li {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: none;
}

.footer-col .widget_recent_entries li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.footer-col .widget_recent_entries a {
  color: rgba(255,255,255,0.7);
  font-size: 0.875rem;
  background: none;
}

.footer-col .widget_recent_entries .post-date {
  display: block;
  font-size: 0.75rem;
  color: var(--color-gold);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  background: none;
}

/* Remove borders and backgrounds from all footer widgets */
.footer-col .widget,
.footer-col .widget > *,
.footer-col .widget div,
.footer-col .widget span {
  border: none !important;
  box-shadow: none !important;
}

.footer-bottom {
  padding: 1.5rem 0;
}

.footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.copyright {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.35);
}

.footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}

.footer-bottom-links a {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.35);
  transition: var(--transition);
}

.footer-bottom-links a:hover {
  color: var(--color-gold-light);
}

/* ==========================================
   ANIMATIONS
   ========================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ==========================================
   SIDEBAR
   ========================================== */
.content-sidebar-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
  align-items: start;
}

.widget {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--color-gold);
}

.widget-title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: var(--color-navy);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-gray-200);
}

/* ==========================================
   FORMS
   ========================================== */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-white);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  transition: var(--transition);
  outline: none;
}

.form-control:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(201,149,42,0.1);
}

.form-control::placeholder {
  color: var(--color-gray-400);
}

/* ==========================================
   SEARCH FORM
   ========================================== */
.search-form {
  position: relative;
}

.search-form input {
  padding-right: 3rem;
}

.search-submit {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-gold);
  font-size: 1.125rem;
}

/* ==========================================
   PAGINATION
   ========================================== */
.pagination {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3rem;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-navy);
  border: 1.5px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.page-numbers:hover,
.page-numbers.current {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-navy);
}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 1024px) {
  .welcome-grid,
  .membership-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .news-grid {
    grid-template-columns: 1fr 1fr;
  }

  .news-card--featured {
    grid-column: 1 / -1;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 1.25rem;
    --spacing-2xl: 4rem;
    --spacing-xl: 2.5rem;
  }

  .header-top {
    display: none;
  }

  /* Mobile nav: hidden by default, slides in when .is-open is added */
  .main-nav {
    display: none;
    position: fixed;
    top: var(--nav-top, 68px); /* dynamically updated by JS */
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    background: var(--color-navy);
    padding: 1rem 1.5rem 2rem;
    border-top: 2px solid var(--color-gold);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 999;
  }

  .main-nav.is-open {
    display: block;
  }

  /* Top-level items */
  .nav-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .nav-menu > li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .nav-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 0;
    font-size: 1rem;
    width: 100%;
    border-bottom: none;
  }

  /* Override white-space for mobile nav items */
  .nav-menu > li > a {
    white-space: normal !important;
    word-break: break-word;
  }

  /* Dropdown toggle arrow for mobile */
  .nav-menu > li.menu-item-has-children > a .fa-chevron-down {
    transition: transform 0.3s ease;
  }

  .nav-menu > li.menu-item-has-children.is-open > a .fa-chevron-down {
    transform: rotate(180deg);
  }

  /* Mobile dropdowns: collapsed by default, expand on .is-open */
  .nav-menu .dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: rgba(255,255,255,0.05);
    border-top: 1px solid rgba(201,149,42,0.3);
    border-left: 2px solid var(--color-gold);
    box-shadow: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
    margin-left: 0.75rem;
  }

  .nav-menu li.is-open > .dropdown-menu {
    max-height: 500px;
  }

  .dropdown-menu li a {
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }

  .dropdown-menu li a:hover {
    padding-left: 1.25rem;
  }

  .menu-toggle {
    display: flex;
  }

  .hero-stats {
    gap: 2rem;
    flex-wrap: wrap;
  }

  .events-grid,
  .spotlight-grid,
  .news-grid {
    grid-template-columns: 1fr;
  }

  .event-featured {
    grid-template-columns: 1fr;
    grid-column: 1;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }

  .gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 1;
    height: 200px;
  }

  .content-sidebar-layout {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom .container {
    flex-direction: column;
    text-align: center;
  }

  .welcome-image-accent,
  .welcome-image-badge {
    display: none;
  }
}

/* ==========================================
   EXTRA SMALL SCREENS ( < 490px )
   ========================================== */
@media (max-width: 490px) {

  /* --- Spacing & root --- */
  :root {
    --container-padding: 1rem;
    --spacing-2xl: 3rem;
    --spacing-xl: 2rem;
    --spacing-lg: 1.5rem;
  }

  /* --- Header --- */
  .header-main {
    height: auto;
    padding: 0.5rem 0;
  }

  /* ---- Two-row header layout on xs ----
     Row 1: [logo]  [donate]
     Row 2:         [join now]  [☰]
     ------------------------------------ */

  .header-main {
    height: auto;
    padding: 0.5rem 0;
  }

  .header-main .container {
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
  }

  /* Row 1 — logo stretches left, donate hugs right */
  .site-logo {
    flex: 1 1 auto;
    min-width: 0;
    order: 1;
  }

  .btn-donate {
    order: 2;
    flex: 0 0 auto;
    padding: 0.4rem 0.75rem;
    font-size: 0.7rem;
    gap: 0.25rem;
  }

  /* Row 2 — header-actions takes full width, forcing a new line */
  .header-actions {
    order: 3;
    flex: 0 0 100%;
    display: flex !important;          /* override any hidden state */
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.375rem 0 0.25rem;
    margin-top: 0.375rem;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  /* Make sure Join Now button is visible */
  .header-actions .btn-primary {
    display: inline-flex !important;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    gap: 0.3rem;
  }

  /* Make sure hamburger is visible */
  .menu-toggle {
    display: flex !important;
    flex-shrink: 0;
  }

  .header-actions .btn i {
    font-size: 0.75rem;
  }

  .logo-emblem {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
  }

  .logo-emblem::before {
    font-size: 1rem;
  }

  .logo-name {
    font-size: 0.95rem;
  }

  .logo-subtitle {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
  }

  /* Mobile nav top: dynamically set by JS (updateNavTop) */
  .main-nav {
    top: var(--nav-top, 105px);
  }

  /* --- Hero --- */
  .hero .container {
    padding-top: 5.5rem;
    padding-bottom: 3.5rem;
  }

  .hero-badge {
    font-size: 0.65rem;
    padding: 0.3rem 0.75rem;
    margin-bottom: 1rem;
  }

  .hero h1 {
    margin-bottom: 1rem;
  }

  .hero .lead {
    font-size: 1rem;
    margin-bottom: 1.75rem;
  }

  .hero-actions {
    flex-direction: column;
    gap: 0.75rem;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-stats {
    gap: 1.25rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    flex-wrap: wrap;
  }

  .hero-stat-number {
    font-size: 1.75rem;
  }

  .hero-stat-label {
    font-size: 0.65rem;
  }

  /* --- Legacy Section --- */
  .legacy-section {
    padding: var(--spacing-xl) 0;
  }

  .legacy-badge {
    font-size: 0.65rem;
    padding: 0.3rem 0.75rem;
    margin-bottom: 1rem;
  }

  .legacy-section h1 {
    font-size: 1.875rem;
    margin-bottom: 1rem;
  }

  .legacy-section .lead {
    font-size: 1rem;
    margin-bottom: 1.75rem;
  }

  .legacy-actions {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
  }

  .legacy-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .legacy-stats {
    gap: 1.25rem;
    margin-top: 0;
    padding-top: 1.5rem;
    flex-wrap: wrap;
  }

  .legacy-stat-number {
    font-size: 1.75rem;
  }

  .legacy-stat-label {
    font-size: 0.65rem;
  }

  /* --- About strip --- */
  .about-strip .container {
    flex-direction: column;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 1rem;
  }

  .about-strip-item {
    font-size: 0.8rem;
  }

  /* --- Section headers --- */
  .section-header h2 {
    font-size: 1.625rem;
  }

  .section-header p {
    font-size: 0.9rem;
  }

  /* --- Stats grid --- */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }

  .stat-item {
    padding: 1.5rem 1rem;
  }

  .stat-number {
    font-size: 2.25rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }

  /* --- Welcome section --- */
  .welcome-features {
    grid-template-columns: 1fr;
  }

  .welcome-content h2 {
    font-size: 1.75rem;
  }

  /* --- Event cards --- */
  .event-featured-content {
    padding: 1.5rem;
  }

  .event-featured-content h3 {
    font-size: 1.25rem;
  }

  .event-card-body {
    padding: 1.125rem;
  }

  .event-card-footer {
    padding: 0.875rem 1.125rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* --- News cards --- */
  .news-card-body {
    padding: 1.125rem;
  }

  /* --- Spotlight cards --- */
  .spotlight-card {
    padding: 1.5rem 1.25rem;
  }

  /* --- Membership tiers --- */
  .tier-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1.25rem;
  }

  .membership-tiers {
    gap: 0.75rem;
  }

  /* --- Gallery --- */
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .gallery-item:first-child {
    grid-column: span 1;
    height: 200px;
  }

  /* --- CTA section --- */
  .cta-section {
    padding: 3rem 0;
  }

  .cta-section h2 {
    font-size: 1.625rem;
  }

  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-actions .btn {
    justify-content: center;
  }

  /* --- Footer --- */
  .footer-main {
    padding: 3rem 0 2rem;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.25rem;
  }

  /* --- Buttons (general) --- */
  .btn {
    white-space: normal;
    text-align: center;
  }

  /* --- Widgets --- */
  .widget {
    padding: 1.25rem;
  }

  /* --- Single post / page header padding --- */
  main[id="primary"] > div[style*="padding-top:110px"],
  main[id="primary"][style*="padding-top:110px"] {
    padding-top: 80px !important;
  }

  /* Inline padding-top overrides for inner page headers */
  .section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

/* ==========================================
   WORDPRESS DEFAULT CLASSES
   ========================================== */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }

.wp-caption {
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  padding: 0.5rem;
  max-width: 100%;
  border-radius: var(--radius-sm);
}

.wp-caption img { display: block; }

.wp-caption p.wp-caption-text {
  font-size: 0.8125rem;
  text-align: center;
  color: var(--color-text-muted);
  margin: 0.5rem 0 0;
}

.sticky { background: var(--color-gold-pale); padding: 1rem; border-radius: var(--radius-md); }
.gallery-caption { }
.bypostauthor { }

/* Screen reader text */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-navy);
  color: white;
  padding: 0.5rem 1rem;
  z-index: 9999;
  transition: top 0.3s ease;
}

.skip-link:focus {
  top: 0;
}
/* ==========================================
   SUB-SUB MENU (THIRD LEVEL) - RIGHT SIDE FIX
   Add this code to the END of your style.css file
   ========================================== */

/* Desktop only - third level menus appear on the right */
@media (min-width: 769px) {
  
  /* Make second-level menu items position context for their children */
  .nav-menu .dropdown-menu li {
    position: relative;
  }
  
  /* Override positioning for third-level dropdown menus */
  /* (dropdown-menu inside dropdown-menu) */
  .nav-menu .dropdown-menu .dropdown-menu {
    position: absolute;
    top: 0 !important; /* Align with parent item vertically */
    left: 100% !important; /* Position to the right of parent (default) */
    right: auto;
    margin-left: 0; /* No gap - appears directly next to parent */
    transform: translateX(-8px); /* Slide in from right */
  }

  /* Show third-level menu on hover - slide from right */
  .nav-menu .dropdown-menu li:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  
  /* FLIP TO LEFT when .flip-left class is added (via JavaScript) */
  .nav-menu .dropdown-menu .dropdown-menu.flip-left {
    left: auto !important;
    right: 100% !important; /* Position to the left of parent */
    margin-left: 0;
    margin-right: 0;
    transform: translateX(8px); /* Slide in from left */
  }
  
  .nav-menu .dropdown-menu li:hover > .dropdown-menu.flip-left {
    transform: translateX(0);
  }

  /* Add right arrow indicator for second-level items that have sub-menus */
  .nav-menu .dropdown-menu .menu-item-has-children > a {
    position: relative;
    padding-right: 2.5rem; /* Make room for arrow */
  }

  /* Right arrow icon (default) */
  .nav-menu .dropdown-menu .menu-item-has-children > a::after {
    content: '\f054'; /* Font Awesome chevron-right */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.625rem;
    color: var(--color-gold);
    opacity: 0.6;
    transition: all 0.2s ease;
  }
  
  /* Change to left arrow when menu is flipped */
  .nav-menu .dropdown-menu .menu-item-has-children > a.flip-left::after,
  .nav-menu .dropdown-menu li:has(> .dropdown-menu.flip-left) > a::after {
    content: '\f053'; /* Font Awesome chevron-left */
  }

  /* Animate arrow on hover */
  .nav-menu .dropdown-menu .menu-item-has-children > a:hover::after {
    opacity: 1;
    right: 1rem;
  }
  
  /* Ensure third level has higher z-index than second level */
  .nav-menu .dropdown-menu .dropdown-menu {
    z-index: 101;
  }
}

/* Mobile adjustments - keep nested menus stacked */
@media (max-width: 768px) {
  
  /* Third level menus stack vertically on mobile */
  .nav-menu .dropdown-menu .dropdown-menu {
    position: relative;
    top: auto;
    left: auto;
    margin-left: 0;
    padding-left: 1rem; /* Indent to show hierarchy */
    border-left: 2px solid var(--color-gold); /* Visual separator */
    border-top: none;
    box-shadow: none;
    transform: none;
  }
  
  /* Add down arrow indicator for mobile */
  .nav-menu .dropdown-menu .menu-item-has-children > a {
    position: relative;
    padding-right: 2rem;
  }
  
  .nav-menu .dropdown-menu .menu-item-has-children > a::after {
    content: '\f078'; /* Font Awesome chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.625rem;
    color: var(--color-gold);
    opacity: 0.6;
    transition: all 0.2s ease;
  }
  
  /* Rotate arrow when submenu is open */
  .nav-menu .dropdown-menu .menu-item-has-children.is-open > a::after {
    transform: translateY(-50%) rotate(180deg);
  }
}