/**
 * main.css — Psi Sigma Phi Multicultural Fraternity, Inc.
 *
 * The single compiled stylesheet for the entire PSP theme.
 * Enqueued globally via inc/enqueue.php as 'psp-main'.
 * Google Fonts are loaded via @import below — not via wp_enqueue_style.
 *
 * ─────────────────────────────────────────────────────────────────────────
 * TABLE OF CONTENTS
 * ─────────────────────────────────────────────────────────────────────────
 *
 *  1.  Google Fonts Import
 *  2.  Design Tokens (CSS Custom Properties)
 *  3.  Reset and Base
 *  4.  Typography
 *  5.  Layout Utilities (.container, .sidebar-card)
 *  6.  Global Image Treatment + Founders Photo Exemption
 *  7.  Accessibility — Hidden SEO H1 Pattern
 *  8.  Buttons (.btn-primary, .btn-secondary, .text-link)
 *  9.  Utility Bar (announcement strip above header)
 * 10.  Header and Primary Navigation
 * 11.  Search Overlay
 * 12.  Mobile Navigation Drawer
 * 13.  Breadcrumb
 * 14.  Page Hero (inner pages)
 * 15.  Homepage Hero (full-bleed, Ken Burns)
 * 16.  Homepage Video Facade
 * 17.  Flexible Content — Layout Partials (template-parts/flexible/)
 * 18.  About Page (psp_about_fields — no page builder)
 * 19.  Our History Page
 * 20.  President's Message Page
 * 21.  In Memoriam Page
 * 22.  Leadership Page and Profile
 * 23.  Our Chapters and Chapter Detail
 * 24.  News Listing and News Article
 * 25.  Events Listing and Event Detail
 * 26.  Announcements
 * 27.  Media Center
 * 28.  Join Landing, Eligibility, Why PSP, For Parents
 * 29.  SQUIRE Program Page
 * 30.  Apply and Contact Pages
 * 31.  Foundation Page
 * 32.  Community Landing (feature card grid)
 * 33.  Community Gallery
 * 34.  Brothers in Business
 * 35.  Privacy Policy and Terms (legal pages)
 * 36.  404 Page
 * 37.  Phiman Corner — Gate Page
 * 38.  Phiman Corner — Inner Navigation Bar
 * 39.  Phiman Corner — Membership Dues
 * 40.  Phiman Corner — Chapter Resources
 * 41.  Search Results Page
 * 42.  Footer
 * 43.  Responsive Breakpoints
 *
 * ─────────────────────────────────────────────────────────────────────────
 * DESIGN SYSTEM NOTES FOR DEVELOPERS
 * ─────────────────────────────────────────────────────────────────────────
 *
 * TOKEN INCONSISTENCY (resolved here):
 *   Phiman Corner HTML files built in an earlier session used
 *   --black-2: #232323 and --black-3: #343434 (old values).
 *   Theme spec v4.1 Section 7 confirms canonical values are:
 *   --black-2: #141414 and --black-3: #1c1c1c
 *   This file uses ONLY the canonical values. Do not reintroduce the old ones.
 *
 * IMAGE TREATMENT:
 *   All <img> elements receive grayscale(100%) contrast(1.05) via a global rule.
 *   ONE exception: .founders-photo img uses filter: none (colour photo).
 *   Logo marks (.logo-mark, .footer-logo-mark) also exempt via filter: none.
 *
 * SEO H1 PATTERN:
 *   Every page template outputs a hidden <h1 class="seo-h1"> for search engines
 *   and a visible <p class="hero-headline" aria-hidden="true"> for users.
 *   Never style bare h1 elements — always use .hero-headline or .section-heading.
 *
 * @package   psi-sigma-phi
 * @version   1.0.0
 */


/* ==========================================================================
   1. GOOGLE FONTS IMPORT
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,700;0,800;0,900;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');


/* ==========================================================================
   2. DESIGN TOKENS (CSS CUSTOM PROPERTIES)

   Single source of truth for all colours, type, and motion.
   Every component references these variables — never use raw hex or pixel
   values outside this block except for base resets and opacities.
   ========================================================================== */

:root {

  /* ── Blacks ─────────────────────────────────────────────────────────────
     Three levels of near-black create surface depth without using
     shadows, which are reserved for the header scroll state only.      */
  --black: #0a0a0a;
  /* Page background */
  --black-2: #141414;
  /* Cards, sidebars, elevated surfaces */
  --black-3: #1c1c1c;
  /* Hover states on cards, dropdown menus */
  --black-4: #232323;

  /* ── Silver Scale ────────────────────────────────────────────────────── */
  --silver: #c8c8c8;
  /* Body text, nav links */
  --silver-dark: #7d7d7d;
  /* Labels, meta, placeholders, de-emphasised */
  --silver-light: #f5f5f5;
  /* High-contrast text on dark backgrounds */
  --white: #ffffff;
  /* Buttons, active borders, bold headings */
  --light-card: #d4d4d4;
  --light-hover: #dcdcdc;
  --grid-gap:    #b0b0b0;
  /* forms */
  --form-card:    #232323;
  --input-border: rgba(184, 184, 184, 0.35);
  --input-focus: rgba(184, 184, 184, 0.75);

  /* ── Silver Gradient ─────────────────────────────────────────────────────
     Applied via background-clip: text to italic headline fragments.
     Produces the metallic sheen on Playfair Display italic moments.    */
  --silver-grad: linear-gradient(135deg, #ededed 0%, #9a9a9a 50%, #ededed 100%);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-pad: 40px;
  /* Reduced to 20px at ≤600px — see Section 43 */

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease-fast: 0.15s ease;
  --ease-base: 0.2s ease;
  --ease-slow: 0.3s ease;
  --ease-spring: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

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


/* ==========================================================================
   3. RESET AND BASE
   ========================================================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  background-color: var(--black);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

a {
  color: inherit;
}

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

ul,
ol {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

/* ==========================================================================
   4. TYPOGRAPHY

   Use class-based selectors — never bare h1-h6 — to avoid specificity
   conflicts with the hidden SEO H1 pattern (see Section 7).
   ========================================================================== */


/* Section headings — inner page titles and layout block headings */
.section-heading {
  font-family: var(--serif);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--white);
}

/* Eyebrow — small uppercase label above main headline */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--silver);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--silver);
  display: inline-block;
  flex-shrink: 0;
}

/* Italic gradient — applied to <em class="italic"> inside headlines.
   The gradient clips to text, producing the silver metallic effect.   */
.italic,
em.italic {
  font-style: italic;
  font-weight: 500;
  background: var(--silver-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Editorial body — long-form prose in history, article, and legal pages */
.editorial-body {
  font-size: 17px;
  color: var(--silver);
  line-height: 1.85;
  font-weight: 300;
  max-width: 760px;
}

.editorial-body h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 800;
  color: var(--white);
  margin: 48px 0 16px;
  line-height: 1.2;
}

.editorial-body h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin: 32px 0 12px;
}

.editorial-body p {
  margin-bottom: 20px;
}

.editorial-body strong {
  color: var(--silver-light);
  font-weight: 600;
}

.editorial-body a {
  color: var(--silver-light);
  border-bottom: 1px solid rgba(184, 184, 184, 0.3);
}

.editorial-body blockquote {
  border-left: 2px solid rgba(184, 184, 184, 0.3);
  padding-left: 24px;
  margin: 32px 0;
  font-style: italic;
  color: var(--silver-light);
}


/* ==========================================================================
   5. LAYOUT UTILITIES
   ========================================================================== */

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

/* Sidebar card — reusable info panel in dues, contact, chapter detail */
.sidebar-card {
  background: var(--black-2);
  border: 1px solid rgba(184, 184, 184, 0.1);
  padding: 24px;
}

.sidebar-card+.sidebar-card {
  border-top: none;
}

.sidebar-card .card-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver-dark);
  margin-bottom: 12px;
}

.sidebar-card h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}

.sidebar-card p {
  font-size: 13px;
  color: var(--silver);
  line-height: 1.7;
  font-weight: 300;
}

.sidebar-card a:not(.sidebar-link) {
  color: var(--silver);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 184, 184, 0.2);
  transition: color var(--ease-base);
}

.sidebar-card a:not(.sidebar-link):hover {
  color: var(--white);
}

/* SKIP NAVIGATION */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 14px 28px;
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--silver);
  transition: top 0.2s ease;
  outline: none;
}

.skip-nav:focus {
  top: 0;
}

/* ==========================================================================
     IMAGE UTLITY TREATMENT
  ========================================================================== */

.is-grayscale,
.is-grayscale img {
  filter: grayscale(100%) contrast(1.05);
}

/* Founders photo — colour, no filter */
.founders-photo img {
  filter: none !important;
}

/* Logo marks — exempt from greyscale */
.logo-mark img,
.logo-mark svg,
.footer-logo-mark img,
.footer-logo-mark svg {
  filter: none;
}


/* ==========================================================================
   7. ACCESSIBILITY — HIDDEN SEO H1 PATTERN

   Every page uses a dual-headline approach:
     <h1 class="seo-h1">Keyword phrase for Google</h1>
     <p class="hero-headline" aria-hidden="true">Brand headline for users</p>

   .seo-h1 is visually hidden using the W3C accessible technique.
   Never use display:none or visibility:hidden — search engines ignore those.

   SPECIFICITY WARNING:
   If any scoped CSS rule targets h1 inside a section (e.g. .hero h1),
   it will have higher specificity (0,1,1) than .seo-h1 (0,1,0) and
   could override the hidden styles. The !important rules below cover
   the known container classes. Add new ones here if you add new sections.
   ========================================================================== */

.seo-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Scoped overrides — prevents higher-specificity container rules leaking in */
.page-hero h1.seo-h1,
.hero h1.seo-h1,
.search-hero h1.seo-h1,
.gate-hero h1.seo-h1,

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

/* Hero headline — ALL brand styling goes here, never on a bare h1 */
.hero-headline {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 24px;
  color: var(--white);
}


/* ==========================================================================
   8. BUTTONS

   Two primary button styles. Both use sharp corners (no border-radius) —
   a deliberate design system decision that carries across all UI elements.
   ========================================================================== */

/* Primary — white fill, inverts on hover */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: var(--white);
    color: var(--black);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--white);
    transition: background 0.25s, color 0.25s, transform 0.2s;
}

.btn-primary:hover {
  background: var(--black);
  color: var(--white);
}

.btn-primary svg {
  transition: transform var(--ease-base);
}

.btn-primary:hover svg {
  transform: translateX(4px);
}

/* Secondary — ghost style, border dims to white on hover */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: transparent;
  color: var(--silver);
  border: 1px solid rgba(184, 184, 184, 0.3);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--ease-base), color var(--ease-base);
  cursor: pointer;
}

.btn-secondary:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.06);
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 28px;
    background: transparent;
    color: var(--silver);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(184, 184, 184, 0.3);
    transition: border-color 0.25s, color 0.25s;
}

.btn-ghost:hover {
    border-color: var(--silver);
    color: var(--white);
}

/* Text link — inline contextual links within editorial prose */
.text-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 184, 184, 0.25);
  transition: color var(--ease-base), border-color var(--ease-base);
}

.text-link:hover {
  color: var(--white);
  border-color: rgba(184, 184, 184, 0.6);
}

/* ==========================================================================
  SCROLLBARS
   ========================================================================== */

html {
  scrollbar-color: var(--silver) var(--black-2);
  scrollbar-width: thin;
}

/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--black-2);
  /* #141414 */
}

::-webkit-scrollbar-thumb {
  background: var(--silver-dark);
  /* #7d7d7d */
  border-radius: 6px;
  border: 2px solid var(--black-2);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--silver);
  /* #c8c8c8 */
}

/* ==========================================================================
   9. UTILITY BAR

   Thin light-coloured announcement strip above the sticky header.
   Conditionally rendered — only when announcement_active ACF Options
   field is true (see site-header.php).
   Hidden at ≤900px — see Section 43.
   ========================================================================== */

.top-bar {
  background: #f4f4f4;
  color: #111;
  padding: 11px 0;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid #ddd;
}

.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  gap: 32px;
}

.top-bar-banner {
  flex: 1;
  color: #222;
  font-weight: 500;
}

.top-bar-banner strong {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-right: 10px;
}

.top-bar-right {
  display: flex;
  gap: 28px;
  align-items: center;
}

.top-bar a {
  text-decoration: none;
  color: #111;
  font-weight: 500;
  font-size: 13px;
  transition: color var(--ease-base);
}

.top-bar a:hover {
  color: #000;
  text-decoration: underline;
}

.top-bar .util-gated {
  color: #000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
}


/* ==========================================================================
   10. HEADER AND PRIMARY NAVIGATION

   Sticky with backdrop blur. Desktop: full nav + CTA.
   Mobile (≤900px): collapses to hamburger + search icon only.
   .is-scrolled class applied by navigation.js when scrollY > 40.
   ========================================================================== */

header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(10, 10, 10, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(184, 184, 184, 0.08);
  transition: box-shadow var(--ease-base);
}

header.is-scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--container-pad);
  max-width: var(--container-max);
  margin: 0 auto;
  min-height: 96px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  padding: 14px 0;
}

.logo-mark {
  width: 56px;
  height: 68px;
  flex-shrink: 0;
}

.logo-text {
  border-left: 1px solid rgba(184, 184, 184, 0.25);
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.logo-text .greek {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.logo-text .sub {
  font-size: 9px;
  letter-spacing: 0.28em;
  color: var(--silver);
  text-transform: uppercase;
  margin-top: 5px;
  font-weight: 500;
}

.logo-text .since {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: var(--silver-light);
  letter-spacing: 0.15em;
  margin-top: 3px;
}

/* Desktop nav links */
.nav-links {
  display: flex;
  gap: 30px;
  align-items: center;
}

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

.nav-links a {
  color: var(--silver-light);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color var(--ease-base);
  padding: 28px 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-links a:hover {
  color: var(--white);
}

.nav-caret {
  width: 8px;
  height: 8px;
  opacity: 0.5;
  transition: transform var(--ease-base), opacity var(--ease-base);
}

.nav-links>li:hover .nav-caret {
  opacity: 1;
  transform: rotate(180deg);
}

/* Dropdown */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 260px;
  background: var(--black-3);
  border: 1px solid rgba(184, 184, 184, 0.15);
  border-top: 2px solid var(--white);
  padding: 14px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--ease-base), transform var(--ease-base), visibility var(--ease-base);
  z-index: 110;
}

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

.nav-dropdown a {
  display: block;
  padding: 11px 26px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--silver-light);
  font-weight: 500;
  text-transform: uppercase;
  transition: background var(--ease-fast), color var(--ease-fast), padding var(--ease-base);
}

.nav-dropdown a:hover {
  background: var(--black-3);
  color: var(--white);
  padding-left: 30px;
}

/* Search button, CTA, hamburger */
.nav-right-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-search-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--silver);
  border: 1px solid transparent;
  transition: color var(--ease-base), border-color var(--ease-base);
}

.nav-search-btn:hover {
  color: var(--white);
  border-color: rgba(184, 184, 184, 0.2);
}

.nav-cta {
  background: var(--white);
  color: var(--black);
  padding: 14px 30px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  border: 1px solid var(--white);
  transition: background var(--ease-slow), color var(--ease-slow), transform var(--ease-base);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--black);
  color: var(--white);
  transform: translateY(-2px);
}

/* Hamburger — hidden at desktop, shown at ≤900px via Section 43 */
.hamburger {
  display: none;
  background: transparent;
  border: 1px solid rgba(184, 184, 184, 0.35);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  transition: border-color var(--ease-base);
}

.hamburger:hover {
  border-color: var(--white);
}

.hamburger-lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hamburger-lines span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--white);
  transition: transform 0.3s, opacity 0.3s;
}

.hamburger.is-open .hamburger-lines span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.hamburger.is-open .hamburger-lines span:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open .hamburger-lines span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}


/* ==========================================================================
   11. SEARCH OVERLAY

   Full-screen modal triggered by #search-trigger (navigation.js adds
   .is-open). Submits to /search/?s= (WordPress is_search() route).
   Popular chips loop the search_popular_chips ACF Options repeater.
   ========================================================================== */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 120px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ease-slow), visibility var(--ease-slow);
}

.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

body.search-open {
  overflow: hidden;
}

.search-overlay-close {
  position: absolute;
  top: 28px;
  right: 36px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(184, 184, 184, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--silver);
  transition: border-color var(--ease-base), color var(--ease-base);
  cursor: pointer;
}

.search-overlay-close:hover {
  border-color: var(--white);
  color: var(--white);
}

.search-overlay-inner {
  width: 100%;
  max-width: 760px;
  padding: 0 var(--container-pad);
  transform: translateY(-16px);
  transition: transform var(--ease-spring);
}

.search-overlay.is-open .search-overlay-inner {
  transform: translateY(0);
}

.search-overlay-label {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.search-overlay-label::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--silver-dark);
  display: inline-block;
}

.search-overlay-form {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(184, 184, 184, 0.4);
  transition: border-color var(--ease-base);
}

.search-overlay-form:focus-within {
  border-bottom-color: var(--white);
}

.search-overlay-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--serif);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 500;
  color: var(--white);
  padding: 12px 0 20px;
  caret-color: var(--silver);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.search-overlay-input::placeholder {
  color: rgba(200, 200, 200, 0.22);
}

.search-overlay-submit {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--silver-dark);
  padding: 0 0 20px 24px;
  display: inline-flex;
  align-items: flex-end;
  transition: color var(--ease-base), transform var(--ease-base);
  flex-shrink: 0;
}

.search-overlay-submit:hover {
  color: var(--white);
  transform: translateX(3px);
}

.search-overlay-form:focus-within .search-overlay-submit {
  color: var(--silver);
}

/* Popular chips — driven by ACF Options, not hardcoded */
.search-overlay-hints {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.search-overlay-hints-label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
}

.search-overlay-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.search-chip {
  font-size: 12px;
  color: var(--silver-dark);
  border: 1px solid rgba(184, 184, 184, 0.18);
  padding: 7px 14px;
  background: transparent;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: border-color var(--ease-base), color var(--ease-base), background var(--ease-base);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}

.search-chip:hover {
  border-color: rgba(184, 184, 184, 0.5);
  color: var(--white);
  background: rgba(255, 255, 255, 0.03);
}


/* ==========================================================================
   12. MOBILE NAVIGATION DRAWER

   Full-screen drawer. Accordion submenus toggled by navigation.js.
   Sits behind header (z-index 99 vs header z-index 100).
   ========================================================================== */

.mobile-menu {
  display: block;
  position: fixed;
  top: 72px;
  /* matches min-height of mobile header */
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--black);
  z-index: 99;
  padding: 32px 24px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--ease-slow), transform var(--ease-slow), visibility var(--ease-slow);
  border-top: 1px solid rgba(184, 184, 184, 0.15);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.mobile-menu-open {
  overflow: hidden;
}

.mobile-menu>ul>li {
  border-bottom: 1px solid rgba(184, 184, 184, 0.15);
}

.mobile-menu>ul>li>a,
.mobile-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  color: var(--white);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
}

.mobile-menu-caret {
  width: 10px;
  height: 10px;
  opacity: 0.6;
  transition: transform var(--ease-base);
}

.mobile-menu-toggle.is-expanded .mobile-menu-caret {
  transform: rotate(180deg);
  opacity: 1;
}

.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ease-slow);
}

.mobile-submenu.is-expanded {
  max-height: 600px;
  padding-bottom: 16px;
}

.mobile-submenu li a {
  display: block;
  padding: 10px 0 10px 20px;
  font-size: 13px;
  color: var(--silver);
  text-decoration: none;
  letter-spacing: 0.05em;
  border-left: 1px solid rgba(184, 184, 184, 0.15);
  transition: color var(--ease-base), border-color var(--ease-base);
}

.mobile-submenu li a:hover {
  color: var(--white);
  border-color: var(--white);
}

/* Phiman Corner — lock icon treatment */
.mobile-gated {
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: var(--silver) !important;
}

.mobile-cta-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  margin-top: 24px;
  background: var(--white);
  color: var(--black);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--white);
  transition: background var(--ease-base), color var(--ease-base);
}

.mobile-cta-btn:hover {
  background: var(--black);
  color: var(--white);
}

.mobile-menu-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(184, 184, 184, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 11px;
  color: var(--silver);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
}

.mobile-menu-footer a {
  color: var(--silver);
  text-decoration: none;
}


/* ==========================================================================
   13. BREADCRUMB

   Rendered by psp_breadcrumb() in functions.php on all inner pages.
   Scrollable horizontally on mobile without showing a scrollbar.
   ========================================================================== */

.breadcrumb {
  background: #1e1e1e;
  border-bottom: 1px solid rgba(184, 184, 184, 0.12);
}

.breadcrumb-inner {
  display: flex;
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: 48px;
  overflow-x: auto;
  white-space: nowrap;
}

.breadcrumb-inner::-webkit-scrollbar {
  display: none;
}

.breadcrumb-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: rgba(184, 184, 184, 0.1);
  border: 1px solid rgba(184, 184, 184, 0.15);
  border-radius: 50%;
  margin-right: 12px;
  transition: background var(--ease-base);
  text-decoration: none;
  color: var(--silver);
}

.breadcrumb-home:hover {
  background: rgba(184, 184, 184, 0.2);
}

.breadcrumb-sep {
  color: rgba(184, 184, 184, 0.3);
  margin: 0 10px;
  user-select: none;
}

.breadcrumb-inner a {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--ease-base);
  flex-shrink: 0;
}

.breadcrumb-inner a:hover {
  color: var(--silver-light);
  text-decoration: underline;
}

.breadcrumb-current {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}


/* ==========================================================================
   PAGE HERO (INNER PAGES)
   Standard hero used on all inner page templates. 
   ========================================================================== */

.page-hero {
  padding: 100px 0;
  /* border-bottom: 1px solid rgba(184, 184, 184, 0.1); */
  position: relative;
  overflow: hidden;
  background-color: var(--black);
  background-size: contain;
  background-position: center right;
  background-repeat: repeat;
  background-image: var(--page-hero-image, url('/wp-content/themes/psi-sigma-phi/assets/images/hero-bg-geometric-texture.jpg'));
  background-image: var(--page-hero-image, image-set(
    url('/wp-content/themes/psi-sigma-phi/assets/images/hero-bg-geometric-texture.webp') type("image/webp"),
    url('/wp-content/themes/psi-sigma-phi/assets/images/hero-bg-geometric-texture.jpg') type("image/jpeg")
  ));
}
.page-hero::before {
  /* Ghosted section watermark — content set per template via data attribute or pseudo */
  font-family: var(--serif);
  font-size: clamp(120px, 16vw, 220px);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(184, 184, 184, 0.05);
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}

.page-hero .eyebrow::before {
  background: var(--silver);
}

.page-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.95) 35%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.2) 100%
  );
}

.page-hero-lead,
.page-hero .lead {
  font-size: 17px;
  color: var(--silver-light);
  max-width: 640px;
  line-height: 1.65;
  font-weight: 300;
  margin-top: 12px;
}
.page-hero .container{
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   15. HOMEPAGE HERO

   Full-bleed hero. Optional Ken Burns background animation on .hero--animated.
   Animation uses a separate .hero-bg layer so text is unaffected.
   prefers-reduced-motion: disables the Ken Burns animation.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--black);
}

/* Background image — separate layer so Ken Burns doesn't scale the text */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* filter: grayscale(100%) contrast(1.08); */
}

.hero--animated .hero-bg {
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  animation: kenburns 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes kenburns {
  0% {
    transform: scale(1) translate(0, 0);
  }

  33% {
    transform: scale(1.04) translate(-1%, 0.5%);
  }

  66% {
    transform: scale(1.06) translate(0.5%, -1%);
  }

  100% {
    transform: scale(1.03) translate(-0.5%, 0.5%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--animated .hero-bg {
    animation: none;
  }
}

/* Dark gradient overlay — always present */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.55) 55%, rgba(10, 10, 10, 0.35) 100%);
  pointer-events: none;
}

/* Fade to black at the bottom — blends hero into the next section */
.hero-overlay::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--black));
}

/* Homepage Hero content — positioned above both layers */
.home .hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  width: 100%;
}

/* Hero headline — larger scale than inner page headlines */
.home .hero .hero-headline {
  font-size: clamp(52px, 7vw, 94px);
  line-height: 100%;
  margin-bottom: 32px;
}

.hero .hero-headline .italic {
  display: block;
}

.hero-lead {
  font-size: 17px;
  color: var(--silver-light);
  line-height: 1.7;
  font-weight: 300;
  max-width: 680px;
  margin-bottom: 44px;
}

.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-body {
  font-size: 17px;
  color: var(--silver-light);
  max-width: 600px;
  margin-bottom: 44px;
  line-height: 1.65;
  font-weight: 300;
}

@media (max-width: 900px) {
  .hero-body {
    font-size: 16px;
  }
   .page-hero-lead, .hero-lead    { font-size: 16px; }
}

/* Founding date meta strip */
.hero-meta {
  position: absolute;
  bottom: 48px;
  left: 40px;
  right: 40px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 3;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--silver);
  font-weight: 500;
}

.hero-meta .line {
  width: 80px;
  height: 1px;
  background: rgba(184, 184, 184, 0.4);
  display: inline-block;
  vertical-align: middle;
  margin-left: 16px;
}

.hero-meta .founded {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--silver-light);
  text-transform: none;
}


/* ==========================================================================
   17. FLEXIBLE CONTENT — LAYOUT PARTIALS

   Each ACF page builder layout maps to a file in template-parts/flexible/.
   Shared section spacing — all layout partials use .layout-section as wrapper.
   ========================================================================== */

.layout-section {
  padding: 80px 0;
}


/* ==========================================================================
   Section: The Four Pillars
   Layout: layout-pillars.php
   Classes: .pillars / .pillars-grid / .pillar
   ========================================================================== */

/* --- Section wrapper --- */
.pillars {
  background: var(--black-2);
  padding: 80px 0;
  border-bottom: 1px solid rgba(184, 184, 184, 0.08);
  position: relative;
  z-index: 3;
}

/* --- Optional intro block (eyebrow + heading + lead copy) --- */
/* Only rendered when pillars_eyebrow, pillars_heading, or pillars_intro are set. */
.pillars-intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px;
}

.pillars-lead {
  font-size: 15px;
  color: var(--silver);
  line-height: 1.7;
  margin-top: 12px;
}

/* --- Four-column heraldic grid --- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

/* --- Individual pillar card --- */
.pillar {
  padding: 0 28px;
  border-right: 1px solid rgba(184, 184, 184, 0.12);
  text-align: center;
}

.pillar:first-child {
  padding-left: 0;
}

.pillar:last-child {
  padding-right: 0;
  border-right: none;
}

/* --- Icon --- */
.pillar-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 20px;
  color: var(--silver-light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pillar-icon img,
.pillar-icon svg {
  width: 44px;
  height: 44px;
  display: block;
}

/* --- Heraldic implement label (e.g. "Our Sword") --- */
.pillar-eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--silver-dark);
  margin-bottom: 6px;
}

/* --- Pillar title --- */
.pillar h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}

/* --- Pillar description --- */
.pillar p {
  font-size: 13px;
  color: var(--silver);
  line-height: 1.6;
}

/* --- Optional detail page link --- */
.pillar-detail-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.pillar-detail-link:hover {
  opacity: 0.75;
}

/* --- Optional section-level CTA (conditional on pillars_include_cta) --- */
.pillars-cta {
  text-align: center;
  margin-top: 48px;
}


/* ==========================================================================
   Section 07: The Four Pillars — Responsive
   Breakpoint: max-width 900px (matches global mobile breakpoint)
   ========================================================================== */

@media (max-width: 900px) {

  /* Stack to single column so description copy has full breathing room */
  .pillars {
    padding: 56px 0;
  }

  .pillars-intro {
    margin-bottom: 40px;
  }

  .pillars-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Switch vertical dividers to horizontal rules */
  .pillar,
  .pillar:first-child,
  .pillar:last-child {
    padding: 32px 0 0;
    border-right: none;
    border-top: 1px solid rgba(184, 184, 184, 0.12);
  }

  /* First card has no top rule — nothing sits above it */
  .pillar:first-child {
    border-top: none;
    padding-top: 0;
  }

  /* Normalize odd/even padding from desktop column gutters */
  .pillar:nth-child(odd),
  .pillar:nth-child(even) {
    padding-left: 0;
    padding-right: 0;
  }

  .pillar-icon {
    margin: 0 auto 16px;
    width: 44px;
    height: 44px;
  }

  .pillar-icon img,
  .pillar-icon svg {
    width: 36px;
    height: 36px;
  }

  .pillar h3 {
    font-size: 20px;
  }

}


/* ==========================================================================
   Section: Mission Statement
   Layout: layout-mission.php
   Classes: .mission / .mission-watermark / .mission-grid / .mission-img /
            .mission-quote / .mission-body / .mission-copy
   ========================================================================== */

/* --- Section wrapper --- */
.mission {
  padding: 140px 0;
  position: relative;
  overflow: hidden;
}

/* --- ΨΣΦ watermark — decorative, not readable --- */
.mission-watermark {
  position: absolute;
  right: -120px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: 420px;
  font-weight: 900;
  color: rgba(184, 184, 184, 0.025);
  line-height: 1;
  letter-spacing: -0.05em;
  pointer-events: none;
  z-index: 0;
}

/* --- Two-column grid: copy left, visual right --- */
.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 96px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* --- Left column: editorial copy --- */
/* .mission-copy is a semantic wrapper — no standalone styles needed.
   All type rules target child elements directly. */

.mission h2 {
  font-size: clamp(40px, 5vw, 62px);
  line-height: 1.02;
  margin-bottom: 36px;
  font-weight: 800;
}

.mission h2 .italic {
  font-style: italic;
  font-weight: 500;
  color: var(--silver);
}

/* --- Body copy block --- */
.mission-body {
  font-size: 17px;
  color: var(--silver-light);
  line-height: 1.8;
  font-weight: 300;
}

.mission-body p {
  margin-bottom: 22px;
}

/* Lead paragraph — larger, white, normal weight */
.mission-body .lead {
  font-size: 20px;
  color: var(--white);
  font-weight: 400;
}

/* Bold text inside body copy */
.mission-body strong {
  color: var(--white);
  font-weight: 500;
}

/* --- Right column: image + pull quote --- */
.mission-visual {
  position: relative;
}

/* Photo panel — ACF image rendered as CSS background-image via inline style.
   The ::before and ::after pseudo-elements create the decorative corner marks. */
.mission-img {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(184, 184, 184, 0.15);
  position: relative;
}

/* Fallback state when no image is supplied (pull quote only) */
.mission-img--empty {
  aspect-ratio: unset;
  min-height: 200px;
  background: none;
  border: none;
}

/* Top-left corner mark */
.mission-img::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -12px;
  width: 80px;
  height: 80px;
  border-top: 2px solid var(--silver);
  border-left: 2px solid var(--silver);
}

/* Bottom-right corner mark */
.mission-img::after {
  content: "";
  position: absolute;
  bottom: -12px;
  right: -12px;
  width: 80px;
  height: 80px;
  border-bottom: 2px solid var(--silver);
  border-right: 2px solid var(--silver);
}

/* Skip corner marks on the empty placeholder */
.mission-img--empty::before,
.mission-img--empty::after {
  display: none;
}

/* --- Pull quote — overlaps the image on desktop --- */
.mission-quote {
  position: absolute;
  bottom: 40px;
  left: -60px;
  background: var(--black-2);
  border: 1px solid rgba(184, 184, 184, 0.2);
  padding: 32px 36px;
  max-width: 340px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.4;
  color: var(--silver-light);
}

.mission-quote cite {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: 18px;
  font-weight: 600;
}

/* En-dash rule before cite text */
.mission-quote cite::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--silver);
  vertical-align: middle;
  margin-right: 12px;
}


/* ==========================================================================
   Section 08: Mission Statement — Responsive
   Breakpoint: max-width 900px (matches global mobile breakpoint)
   ========================================================================== */

@media (max-width: 900px) {

  .mission {
    padding: 80px 0;
  }

  /* Stack columns; image goes below copy */
  .mission-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .mission h2 {
    font-size: clamp(32px, 8vw, 44px);
  }

  .mission-body {
    font-size: 15px;
  }

  .mission-body .lead {
    font-size: 17px;
  }

  /* Shrink watermark so it doesn't overflow narrow viewports */
  .mission-watermark {
    font-size: 240px;
    right: -60px;
  }

  /* Pull quote exits the absolute-positioned overlay and flows below the image */
  .mission-quote {
    position: static;
    margin-top: 24px;
    max-width: none;
    left: auto;
    padding: 24px;
    font-size: 16px;
  }

}


/* ==========================================================================
   Section: Video Break
   Layout: layout-video_facade.php  (ACF layout key: video_facade)
   Classes: .video-break / .video-poster / .video-overlay / .play-btn /
            .video-caption / .video-iframe
   JS: assets/js/video-facade.js — handles play click, YouTube inject, is-playing state
   ========================================================================== */

/* --- Section wrapper --- */
.video-section {
  padding: 0;
}

.video-break {
  height: 600px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid rgba(184, 184, 184, 0.1);
  border-bottom: 1px solid rgba(184, 184, 184, 0.1);
  overflow: hidden;
  background: #0a0a0a;
}

/* --- Poster image --- */
/* background-image applied inline via ACF video_poster_image field */
.video-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%) contrast(1.05);
  transition: transform 0.6s ease;
}

.video-break:hover .video-poster {
  transform: scale(1.02);
}

/* --- Dark overlay on top of poster --- */
.video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(10, 10, 10, 0.45), rgba(10, 10, 10, 0.6));
}

/* --- Hover caption (film title with flanking rules) --- */
.video-caption {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}

.video-break:hover .video-caption {
  opacity: 1;
}

.video-caption span {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* Flanking hairline rules generated via pseudo-elements */
.video-caption::before,
.video-caption::after {
  content: "";
  width: 40px;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
}

/* --- Play button --- */
.play-btn {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s, background 0.3s;
  position: relative;
  z-index: 2;
  border: none;
  outline: none;
}

.play-btn:hover {
  background: var(--silver);
  transform: scale(1.08);
}

.play-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

/* Inner pulse ring */
.play-btn::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: pulse-ring 2.4s ease-out infinite;
}

/* Outer pulse ring */
.play-btn::after {
  content: "";
  position: absolute;
  inset: -28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  animation: pulse-ring 2.4s ease-out infinite 0.4s;
}

/* SVG play triangle nudged right to optically centre */
.play-btn svg {
  margin-left: 6px;
}

/* Pulse ring keyframes */
@keyframes pulse-ring {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  80% {
    opacity: 0;
    transform: scale(1.15);
  }

  100% {
    opacity: 0;
  }
}

/* --- Playing state (JS adds .is-playing to .video-break on click) --- */
.video-break.is-playing .video-poster,
.video-break.is-playing .video-overlay,
.video-break.is-playing .play-btn,
.video-break.is-playing .video-caption {
  display: none;
}

.video-break.is-playing {
  background: #000;
}

/* --- YouTube iframe (hidden until .is-playing) --- */
.video-iframe {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-break.is-playing .video-iframe {
  display: block;
}

/* ==========================================================================
   NEWS PREVIEW SECTION
   Extracted from homepage design (section.news) and adapted for WP markup.
   Class mapping documented above — do not rename without updating both.
   ========================================================================== */

.news-preview-section {
  padding: 140px 0;
  background: var(--black-2);
  border-top: 1px solid rgba(184, 184, 184, 0.08);
}

/*
 * Header layout fix:
 * The design uses a single .news-header flex row to span left + right header
 * content. Our markup outputs .news-preview-header and .news-preview-header-right
 * as siblings. We recreate the two-column header using a scoped grid on the
 * container so the PHP template doesn't need to change.
 */
.news-preview-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "header  header-right"
    "grid    grid";
  column-gap: 48px;
  row-gap: 72px;
}

.news-preview-header        { grid-area: header; }
.news-preview-header-right  { grid-area: header-right; }
.news-preview-grid          { grid-area: grid; }

/* Align header-right to the bottom of its cell, matching the design's
   align-items: flex-end on the original flex row */
.news-preview-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
  gap: 16px;
}

/* ── HEADER TYPOGRAPHY ───────────────────────────────────────────────────── */

/* .eyebrow is a global class in the design — include here if not already
   defined in a shared stylesheet */
.news-preview-section .eyebrow {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--silver);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.news-preview-section .eyebrow::before {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--silver);
  display: inline-block;
}

.news-preview-section .news-preview-heading {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 800;
  line-height: 1.02;
  color: var(--white);
}

/* Description text sitting above the CTA in the header-right block */
.news-preview-section .news-preview-header-right > div,
.news-preview-section .news-preview-header-right > p {
  font-size: 14px;
  color: var(--silver);
  font-weight: 300;
  line-height: 1.6;
  max-width: 360px;
  text-align: right;
}

/* "View all stories" CTA link */
.news-preview-section .news-preview-all {
  color: var(--silver-light);
  text-decoration: none;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--silver);
  transition: color 0.2s, gap 0.2s;
}

.news-preview-section .news-preview-all:hover {
  color: var(--white);
  gap: 14px;
}

/* ── GRID ─────────────────────────────────────────────────────────────────── */

.news-preview-section .news-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── CARD ─────────────────────────────────────────────────────────────────── */

.news-card {
  background: var(--black);
  border: 1px solid rgba(184, 184, 184, 0.3);
  overflow: hidden;
  transition: transform 0.3s, border-color 0.3s;
  color: inherit;
  display: block;
  text-decoration: none;
}

.news-card:hover {
  transform: translateY(-6px);
  border-color: var(--silver);
}

/* Image block — background-image set inline by PHP */
.news-card-img {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  filter: grayscale(100%) contrast(1.05);
  background-image: url('/wp-content/themes/psi-sigma-phi/assets/images/news-preview-card.png');
}

/* Gradient fade at the bottom of the image */
.news-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(10, 10, 10, 0.6) 100%);
  pointer-events: none;
}

/* Category tag — absolutely positioned over the image.
   Adapted from .news-card-tag in the design. Element changed from
   <p> in body to <span> inside .news-card-img. */
.news-card-cat {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--silver);
  color: var(--black-2);
  padding: 7px 14px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  border: 1px solid rgba(184, 184, 184, 0.3);
  z-index: 1;
}

/* No featured image fallback — dark placeholder keeps card height consistent */
.news-card.no-image .news-card-img {
  background-color: var(--black-3);
  aspect-ratio: 16 / 10;
}

/* Card body */
.news-card-body {
  padding: 28px 28px 32px;
}

/* Meta sits first in the DOM now, matching design order without flex hacks */
.news-card-meta {
  font-size: 11px;
  color: var(--silver);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}

.news-card-title {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 14px;
  font-weight: 700;
  color: var(--white);
}

.news-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.news-card-title a:hover {
  color: var(--silver-light);
}

.news-card-excerpt {
  font-size: 14px;
  color: var(--silver);
  line-height: 1.6;
  margin: 0;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .news-preview-section .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "header-right"
      "grid";
    row-gap: 24px;
  }

  .news-preview-header-right {
    align-items: flex-start;
    text-align: left;
  }

  .news-preview-header-right > div,
  .news-preview-header-right > p {
    text-align: left;
  }
}

@media (max-width: 900px) {
  .news-preview-section { padding: 80px 0; }
  .news-preview-heading { font-size: clamp(32px, 8vw, 44px); }
  .news-preview-grid { grid-template-columns: 1fr; gap: 20px; }
  .news-card-title { font-size: 19px; }
}

/* ==========================================================================
   Section: Stats Bar
   Layout: layout-stats.php  (ACF layout key: stats)
   Classes: .stats / .stats-intro / .stats-grid / .stat /
            .stat-num / .stat-label / .stat-sub
   ========================================================================== */

/* --- Section wrapper --- */
.stats {
  padding: 120px 0;
  background: var(--black);
  position: relative;
  overflow: hidden;
}

/* Subtle radial glow texture — purely decorative */
.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(184, 184, 184, 0.06), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(184, 184, 184, 0.04), transparent 45%);
  pointer-events: none;
}

/* --- Optional intro block (eyebrow + heading) --- */
.stats-intro {
  text-align: center;
  margin-bottom: 72px;
  position: relative;
}

.stats-intro .eyebrow {
  justify-content: center;
}

.stats-intro h2 {
  font-size: clamp(36px, 4.5vw, 54px);
  font-weight: 800;
  line-height: 1.05;
  max-width: 820px;
  margin: 0 auto;
}

.stats-intro h2 .italic {
  font-style: italic;
  font-weight: 500;
  color: var(--silver);
}

/* --- Four-column stat grid ---
   gap: 1px + silver-tinted background creates hairline dividers between cells
   without adding actual borders to each cell. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(184, 184, 184, 0.15);
  position: relative;
  border: 1px solid rgba(184, 184, 184, 0.15);
}

/* --- Individual stat card --- */
.stat {
  background: var(--black);
  padding: 56px 24px;
  text-align: center;
  position: relative;
  transition: background 0.3s;
}

.stat:hover {
  background: var(--black-2);
}

/* --- Big number --- */
/* Uses the silver gradient and background-clip to render the shimmer effect. */
.stat-num {
  font-family: var(--serif);
  font-size: 82px;
  font-weight: 800;
  line-height: 1;
  background: var(--silver-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}

/* --- Stat label (e.g. "Chapters Nationwide") --- */
.stat-label {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--silver);
  font-weight: 600;
  line-height: 1.4;
}

/* --- Optional sub-label (e.g. "one brotherhood") --- */
.stat-sub {
  font-size: 12px;
  color: var(--silver-dark);
  margin-top: 8px;
  font-style: italic;
  font-family: var(--serif);
}


/* ==========================================================================
   Sections: Video Break + Stats Bar — Responsive
   Breakpoint 1: max-width 900px
   Breakpoint 2: max-width 420px (small phones)
   ========================================================================== */

@media (max-width: 900px) {

  /* Video */
  .video-break {
    height: 320px;
  }

  .video-caption {
    display: none;
  }

  /* caption too cramped on touch */
  .play-btn {
    width: 76px;
    height: 76px;
  }

  /* Stats */
  .stats {
    padding: 72px 0;
  }

  .stats-intro {
    margin-bottom: 40px;
  }

  .stats-intro h2 {
    font-size: clamp(28px, 7vw, 40px);
  }

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

  .stat {
    padding: 36px 16px;
  }

  .stat-num {
    font-size: 56px;
    margin-bottom: 10px;
  }

  .stat-label {
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  .stat-sub {
    font-size: 11px;
  }

}

@media (max-width: 420px) {

  /* Stats — single column on the smallest phones */
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat {
    padding: 28px 16px;
  }

}



/* ── 17d. CTA Banner layout ──────────────────────────────────────────── */

.cta-banner-section {
  padding: 80px 0;
  background: var(--black-2);
  border-top: 1px solid rgba(184, 184, 184, 0.08);
  border-bottom: 1px solid rgba(184, 184, 184, 0.08);
  text-align: center;
}

.cta-banner-heading {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
}

.cta-banner-body {
  font-size: 16px;
  color: var(--silver);
  line-height: 1.7;
  font-weight: 300;
  max-width: 560px;
  margin: 0 auto 32px;
}

.cta-banner-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── 17e. Accordion layout ───────────────────────────────────────────── */

.accordion-item {
  border-bottom: 1px solid rgba(184, 184, 184, 0.1);
}

.accordion-item:first-child {
  border-top: 1px solid rgba(184, 184, 184, 0.1);
}

.accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 22px 0;
  background: none;
  border: none;
  color: var(--silver-light);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  gap: 16px;
}

.accordion-toggle svg {
  flex-shrink: 0;
  color: var(--silver-dark);
  transition: transform var(--ease-base);
}

.accordion-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.accordion-body {
  padding: 0 0 22px;
  font-size: 15px;
  color: var(--silver);
  line-height: 1.75;
  font-weight: 300;
}


/* ── 17h. Partners Grid layout ───────────────────────────────────────── */

.partners-grid-section {
  padding: 80px 0;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 32px;
  align-items: center;
  margin-top: 40px;
}

.partners-grid img {
  width: auto;
  opacity: 0.8;
  transition: opacity var(--ease-base);
}

.partners-grid img:hover {
  opacity: 1;
}

/* ── 17i. Media Grid layout ──────────────────────────────────────────── */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px;
  background: rgba(184, 184, 184, 0.08);
}

/* ============================================================
   Layout: Join — Pathway Steps (.section-join-steps)
   Schema: psi-sigma-phi-acf-schema-v3.2, Layout 18
   ============================================================ */

/* ── Section wrapper ── */
.section-join-steps {
  padding: 120px 0;
  background: rgba(184, 184, 184, 0.15);
  position: relative;
}

.section-join-steps.has-divider {
  border-bottom: 1px solid rgba(184, 184, 184, 0.08);
}

/* Background style modifiers */
.section-join-steps--dark {
  background: var(--black-2);
}

.section-join-steps--darker {
  background: var(--black);
}

.section-join-steps--light {
  background: var(--silver-light);
  color: var(--black);
}

/* ── Intro block ── */
.join-steps-intro {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 72px;
}

.join-steps-intro .eyebrow {
  justify-content: center;
  margin-bottom: 24px;
}

.join-steps-heading {
  font-family: var(--serif);
  font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 800;
  line-height: 1.02;
  margin-bottom: 26px;
  color: var(--white);
}

.section-join-steps--light .join-steps-heading {
  color: var(--black);
}

.join-steps-heading .italic {
  font-style: italic;
  font-weight: 500;
  background: var(--silver-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.join-steps-lead {
  font-size: 19px;
  color: var(--silver-light);
  line-height: 1.7;
  font-weight: 300;
  max-width: 620px;
  margin: 0 auto;
}

.section-join-steps--light .join-steps-lead {
  color: var(--black-2);
}

/* ── Step grid ── */
.join-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--black-2);
  margin-bottom: 56px;
}

/* 4-column auto when 4 steps are present */
.join-steps-grid:has(.join-step:nth-child(4)) {
  grid-template-columns: repeat(4, 1fr);
}

/* 5-column auto when 5 steps are present */
.join-steps-grid:has(.join-step:nth-child(5)) {
  grid-template-columns: repeat(5, 1fr);
}

/* ── Individual step card ── */
.join-step {
  padding: 40px 32px;
  background: var(--black-4);
  transition: background 0.25s ease;
}

.section-join-steps--darker .join-step {
  background: var(--black);
}

.section-join-steps--light .join-step {
  background: var(--white);
}

.join-step:hover {
  background: var(--black-3);
}

.section-join-steps--light .join-step:hover {
  background: #f0f0f0;
}

/* Step numeral */
.join-step__num {
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 20px;
  background: var(--silver-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em;
}

/* Step title */
.join-step__title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.2;
}

.section-join-steps--light .join-step__title {
  color: var(--black);
}

.join-step__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.join-step__title a:hover {
  color: var(--silver-light);
}

.section-join-steps--light .join-step__title a:hover {
  color: var(--black-2);
}

/* Step body */
.join-step__body {
  font-size: 14px;
  color: var(--silver);
  line-height: 1.65;
  margin: 0;
  font-weight: 300;
}

.section-join-steps--light .join-step__body {
  color: var(--black-2);
}

/* ── CTA row ── */
.join-steps-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Responsive ── */

/* Tablet: collapse to single column grid */
@media (max-width: 1100px) {
  .join-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .join-steps-grid:has(.join-step:nth-child(4)) {
    grid-template-columns: repeat(2, 1fr);
  }

  .join-steps-grid:has(.join-step:nth-child(5)) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 900px) {
  .section-join-steps {
    padding: 80px 0;
  }

  .join-steps-intro {
    margin-bottom: 40px;
  }

  .join-steps-heading {
    font-size: clamp(36px, 9vw, 52px);
  }

  .join-steps-lead {
    font-size: 16px;
  }

  .join-steps-grid {
    grid-template-columns: 1fr;
    gap: 1px;
    margin-bottom: 40px;
  }

  /* Override all has() selectors on mobile */
  .join-steps-grid:has(.join-step:nth-child(4)),
  .join-steps-grid:has(.join-step:nth-child(5)) {
    grid-template-columns: 1fr;
  }

  .join-step {
    padding: 28px 24px;
  }

  .join-step__num {
    font-size: 42px;
    margin-bottom: 14px;
  }

  .join-steps-cta {
    flex-direction: column;
    align-items: center;
  }
}

/* Small phones */
@media (max-width: 420px) {

  .join-steps-cta .btn-primary,
  .join-steps-cta .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   REMAINING INNER PAGES

   Leadership, Chapters, News, Events, Announcements, SQUIRE, Apply,
   Contact, Foundation, Community, Gallery, Brothers in Business.
   Page-specific rules only — global resets and card styles are above.
   ========================================================================== */

/* Leadership grid */
.leader-card {
  background: var(--black);
  padding: 32px 24px;
}

.leader-card-headshot {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  margin-bottom: 20px;
}

.leader-card-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 4px;
}

.leader-card-title {
  font-size: 12px;
  color: var(--silver-dark);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
}

.leader-card-link {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 184, 184, 0.2);
}

/* Chapter cards */
.chapter-card {
  background: var(--black);
  padding: 32px 28px;
}

.chapter-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver);
  font-weight: 600;
  margin-bottom: 12px;
}

.chapter-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--silver);
  flex-shrink: 0;
}

.chapter-status.is-inactive .chapter-status-dot {
  background: rgba(184, 184, 184, 0.3);
}

.chapter-status.is-inactive {
  color: var(--silver-dark);
}

.chapter-card-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 6px;
}

.chapter-card-uni {
  font-size: 14px;
  color: var(--silver);
  margin-bottom: 4px;
}

.chapter-card-location,
.chapter-card-president {
  font-size: 12px;
  color: var(--silver-dark);
}

.chapter-card-link {
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 184, 184, 0.2);
}

/* Article prose (news single) */
.article-prose {
  font-size: 17px;
  color: var(--silver);
  line-height: 1.85;
  font-weight: 300;
  max-width: 760px;
}

.article-prose h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 800;
  color: var(--white);
  margin: 48px 0 16px;
}

.article-prose h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin: 32px 0 12px;
}

.article-prose p {
  margin-bottom: 20px;
}

.article-prose strong {
  color: var(--silver-light);
}

.article-prose a {
  color: var(--silver-light);
  border-bottom: 1px solid rgba(184, 184, 184, 0.3);
}

/* Auto TOC (generated by news-toc.js when news_toc ACF field = true) */
.article-toc {
  background: var(--black-2);
  border: 1px solid rgba(184, 184, 184, 0.1);
  border-left: 2px solid rgba(184, 184, 184, 0.3);
  padding: 24px 28px;
  margin-bottom: 48px;
}

.toc-item {
  margin-bottom: 10px;
}

.toc-h3 {
  padding-left: 16px;
}

.toc-item a {
  font-size: 13px;
  color: var(--silver-dark);
  text-decoration: none;
  transition: color var(--ease-base);
}

.toc-item a.is-active,
.toc-item a:hover {
  color: var(--white);
}

/* Event cards */
.event-card {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  align-items: center;
  background: var(--black-2);
  border: 1px solid rgba(184, 184, 184, 0.08);
  padding: 28px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--ease-base);
}

.event-card:hover {
  border-color: rgba(184, 184, 184, 0.3);
}

.event-card.is-past {
  opacity: 0.6;
}

.event-card-date {
  text-align: center;
  border-right: 1px solid rgba(184, 184, 184, 0.1);
  padding-right: 24px;
}

.event-card-day {
  display: block;
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 900;
  color: var(--white);
  line-height: 1;
}

.event-card-month {
  display: block;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
}

.event-card-type {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
  margin-bottom: 6px;
}

.event-card-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
}

.event-card-title a {
  color: inherit;
  text-decoration: none;
}

.event-card-location {
  font-size: 13px;
  color: var(--silver-dark);
}

.event-card-rsvp {
  display: inline-block;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 184, 184, 0.2);
}

/* Announcements */
.announcement-card {
  padding: 36px 0;
  border-bottom: 1px solid rgba(184, 184, 184, 0.08);
}

.announcement-card.is-pinned {
  border-left: 2px solid var(--silver);
  padding-left: 24px;
}

.announcement-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.ann-badge {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--silver);
  border: 1px solid rgba(184, 184, 184, 0.2);
  padding: 4px 12px;
}

.ann-badge--pinned {
  color: var(--white);
  border-color: rgba(184, 184, 184, 0.35);
}

.ann-date {
  font-size: 11px;
  color: var(--silver-dark);
  margin-left: auto;
}

.announcement-card-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
  line-height: 1.25;
}

.announcement-card-excerpt {
  font-size: 15px;
  color: var(--silver);
  line-height: 1.75;
  font-weight: 300;
}

.announcement-card-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--silver);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 184, 184, 0.2);
}

/* SQUIRE step cards */
.squire-step {
  background: var(--black-2);
  border: 1px solid rgba(184, 184, 184, 0.1);
  padding: 40px;
  margin-bottom: 2px;
}

.squire-step-num {
  font-family: var(--serif);
  font-size: 80px;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(184, 184, 184, 0.12);
  line-height: 1;
  margin-bottom: 12px;
}

.squire-step-tag {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
  margin-bottom: 12px;
}

.squire-step-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.1;
}

.squire-step-body {
  font-size: 15px;
  color: var(--silver);
  line-height: 1.75;
  font-weight: 300;
}




/* ==========================================================================
   31b. TESTIMONIALS LAYOUT (layout-testimonials.php)

   Three-column grid of brother quotes. Used on the Join page and any
   page using the testimonials ACF flexible content layout.
   Collapses to single column at ≤600px — see Section 43.

   Note: .testimonial-mark renders the opening " character visually.
   The HTML entity &ldquo; is also present in the markup for
   accessibility — aria-hidden="true" on the visual element.
   ========================================================================== */

.testimonials {
  padding: 140px 0;
  background: var(--black-2);
  border-bottom: 1px solid rgba(184, 184, 184, 0.08);
}

.testimonials-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}

.testimonials-header .eyebrow {
  justify-content: center;
}

.testimonials-header .eyebrow::before {
  display: none;
}

/* centred eyebrow — no left line */

.testimonials-header .section-heading {
  font-size: clamp(36px, 4.5vw, 52px);
  line-height: 1.05;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial {
  background: var(--black);
  border: 1px solid rgba(184, 184, 184, 0.12);
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0;
  /* reset blockquote margin */
}

/* Opening quotation mark — visual only, aria-hidden in markup */
.testimonial-mark {
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 800;
  color: var(--silver);
  line-height: 0.7;
  margin-bottom: 8px;
  height: 32px;
  overflow: hidden;
  user-select: none;
}

.testimonial-quote {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
  font-style: italic;
  font-weight: 500;
  margin-bottom: 28px;
  flex: 1;
}

.testimonial-attribution {
  padding-top: 20px;
  border-top: 1px solid rgba(184, 184, 184, 0.15);
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Optional circular headshot */
.testimonial-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonial-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--white);
}

.testimonial-meta {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
  margin-top: 5px;
  font-weight: 600;
}

/* ==========================================================================
   32. COMMUNITY LANDING PAGE (feature card grid)
   ========================================================================== */

.community-section {
  padding: 72px 0 100px;
}

.community-intro {
  max-width: 760px;
  margin: 0 auto 72px;
  text-align: center;
}

.community-intro h2 {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 20px;
  line-height: 1.15;
}

.community-intro p {
  font-size: 16px;
  color: var(--silver-dark);
  line-height: 1.75;
  font-weight: 300;
}

/* Two-column feature card grid */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: rgba(184, 184, 184, 0.1);
  border: 1px solid rgba(184, 184, 184, 0.1);
  margin-bottom: 80px;
}

.feature-card {
  background: var(--black-2);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background var(--ease-slow);
  text-decoration: none;
  color: inherit;
}

.feature-card:hover {
  background: var(--black-3);
}

/* Left accent bar — grows on hover */
.feature-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(184, 184, 184, 0.2);
  transition: width var(--ease-slow), background var(--ease-slow);
  z-index: 1;
}

.feature-card:hover::before {
  width: 3px;
  background: var(--silver);
}

/* Watermark numeral */
.feature-card-num {
  position: absolute;
  bottom: -20px;
  right: -10px;
  font-family: var(--serif);
  font-size: clamp(100px, 12vw, 180px);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(184, 184, 184, 0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.feature-card-image {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.feature-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(10, 10, 10, 0.6));
  pointer-events: none;
}

.feature-card-image-placeholder {
  width: 100%;
  height: 100%;
  background: var(--black-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(184, 184, 184, 0.08);
}

.feature-card-inner {
  padding: 52px 52px 48px;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
  z-index: 1;
}

.feature-card-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
  margin-bottom: 20px;
  transition: color var(--ease-base);
}

.feature-card-tag::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--silver-dark);
  display: inline-block;
  transition: width var(--ease-slow), background var(--ease-slow);
}

.feature-card:hover .feature-card-tag::before {
  width: 36px;
  background: var(--silver);
}

.feature-card:hover .feature-card-tag {
  color: var(--silver);
}

.feature-card-title {
  font-family: var(--serif);
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 18px;
}

.feature-card-desc {
  font-size: 14px;
  color: var(--silver-dark);
  line-height: 1.75;
  font-weight: 300;
  flex: 1;
  margin-bottom: 40px;
  transition: color var(--ease-base);
}

.feature-card:hover .feature-card-desc {
  color: var(--silver);
}

.feature-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--silver-dark);
  transition: color var(--ease-base);
  align-self: flex-start;
}

.feature-card:hover .feature-card-cta {
  color: var(--white);
}

.feature-card-cta svg {
  transition: transform var(--ease-base);
}

.feature-card:hover .feature-card-cta svg {
  transform: translateX(5px);
}

/* Section divider rule */
.section-rule {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 64px;
}

.section-rule::before,
.section-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(184, 184, 184, 0.1);
}

.section-rule-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
  white-space: nowrap;
}

/* Closing CTA block */
.community-cta {
  background: var(--black-2);
  border: 1px solid rgba(184, 184, 184, 0.1);
  border-top: 2px solid rgba(184, 184, 184, 0.2);
  padding: 64px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}

.community-cta h2 {
  font-family: var(--serif);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 12px;
  line-height: 1.2;
}

.community-cta p {
  font-size: 14px;
  color: var(--silver-dark);
  line-height: 1.65;
  font-weight: 300;
  max-width: 520px;
}


/* ==========================================================================
   33. COMMUNITY GALLERY
   ========================================================================== */

.gallery-grid {
  columns: 3;
  gap: 2px;
}

.gallery-item {
  margin: 0 0 2px;
  break-inside: avoid;
}

.gallery-item-caption {
  padding: 10px 12px;
  background: var(--black-2);
  font-size: 12px;
  color: var(--silver-dark);
}

.gallery-item-meta {
  font-size: 11px;
  color: var(--silver-dark);
}

/* Lightbox — generated by gallery.js */
#gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 10, 10, 0.97);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ease-slow), visibility var(--ease-slow);
}

#gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

body.lightbox-open {
  overflow: hidden;
}

.lightbox-img {
  max-height: 80vh;
  max-width: 100%;
  object-fit: contain;
  filter: none;
}

.lightbox-caption {
  margin-top: 20px;
  font-size: 14px;
  color: var(--silver-dark);
  text-align: center;
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(184, 184, 184, 0.25);
  background: transparent;
  color: var(--silver);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--ease-base), color var(--ease-base);
}

.lightbox-close:hover {
  border-color: var(--white);
  color: var(--white);
}

/* ==========================================================================
   35. LEGAL PAGES (PRIVACY, TERMS)

   Draft notice shown when privacy_draft_notice or terms_draft_notice
   ACF field is true — removed by editor once legal review is complete.
   ========================================================================== */

.legal-body {
  font-size: 16px;
  color: var(--silver);
  line-height: 1.85;
  font-weight: 300;
}

.legal-body h2,
.legal-body h3 {
  font-family: var(--serif);
  color: var(--white);
  margin: 40px 0 16px;
}

.legal-body p {
  margin-bottom: 16px;
}

.legal-draft-notice {
  background: var(--black-2);
  border: 1px solid rgba(184, 184, 184, 0.2);
  border-left: 3px solid rgba(184, 184, 184, 0.5);
  padding: 16px 20px;
  margin-bottom: 40px;
  font-size: 13px;
  color: var(--silver-dark);
}


/* ==========================================================================
   36. 404 PAGE
   ========================================================================== */

.error-hero {
  padding: 120px 0 100px;
}



/* ==========================================================================
   41. SEARCH RESULTS PAGE
   ========================================================================== */

.search-hero {
  background: var(--black-2);
  border-bottom: 1px solid rgba(184, 184, 184, 0.1);
  padding: 64px 0 56px;
}

.search-hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.search-hero .hero-headline {
  font-size: clamp(36px, 5vw, 56px);
  margin-bottom: 36px;
}

/* Inline search form */
.search-form-wrap {
  display: flex;
  max-width: 720px;
}

.search-input-wrap {
  flex: 1;
  position: relative;
}

.search-input-wrap svg {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--silver-dark);
  pointer-events: none;
}

.search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(184, 184, 184, 0.25);
  border-right: none;
  color: var(--white);
  font-family: var(--sans);
  font-size: 15px;
  padding: 18px 20px 18px 52px;
  outline: none;
  transition: border-color var(--ease-base), background var(--ease-base);
}

.search-input::placeholder {
  color: var(--silver-dark);
}

.search-input:focus {
  border-color: rgba(184, 184, 184, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

.search-btn {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--white);
  padding: 18px 32px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--ease-base);
  white-space: nowrap;
}

.search-btn:hover {
  background: var(--silver-light);
}

/* Type tabs */
.search-tabs {
  margin-top: 32px;
  display: flex;
  border-bottom: 1px solid rgba(184, 184, 184, 0.12);
}

.search-tab {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--silver-dark);
  padding: 12px 20px 14px;
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--ease-base), border-color var(--ease-base);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
}

.search-tab.active {
  color: var(--white);
  border-bottom-color: var(--white);
}

.search-tab:hover:not(.active) {
  color: var(--silver);
}

.search-tab-count {
  font-size: 10px;
  color: var(--silver-dark);
  background: rgba(184, 184, 184, 0.1);
  border-radius: 2px;
  padding: 2px 6px;
  letter-spacing: 0.05em;
}

.search-tab.active .search-tab-count {
  color: var(--silver);
}

/* Results body */
.search-body {
  padding: 64px 0 120px;
}

.search-body-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  align-items: start;
}

/* Sidebar filters */
.search-filters {
  position: sticky;
  top: 160px;
}

.filter-section {
  margin-bottom: 40px;
}

.filter-label {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
  margin-bottom: 16px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.filter-option input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--white);
  cursor: pointer;
}

.filter-option-label {
  font-size: 13px;
  color: var(--silver-light);
  font-weight: 400;
  cursor: pointer;
  transition: color var(--ease-base);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.filter-option:hover .filter-option-label {
  color: var(--white);
}

.filter-count {
  font-size: 11px;
  color: var(--silver-dark);
}

.filter-divider {
  height: 1px;
  background: rgba(184, 184, 184, 0.1);
  margin: 24px 0;
}

/* Results header */
.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(184, 184, 184, 0.1);
}

.results-count {
  font-size: 13px;
  color: var(--silver-dark);
}

.results-count strong {
  color: var(--silver);
  font-weight: 600;
}

.results-sort {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--silver-dark);
}

.results-sort select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(184, 184, 184, 0.2);
  color: var(--silver-light);
  font-family: var(--sans);
  font-size: 12px;
  padding: 8px 12px;
  outline: none;
  cursor: pointer;
}

/* Quick Answer block */
.quick-answer {
  background: var(--black-2);
  border: 1px solid rgba(184, 184, 184, 0.15);
  border-left: 3px solid rgba(184, 184, 184, 0.4);
  padding: 28px 32px;
  margin-bottom: 40px;
}

.quick-answer-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
  margin-bottom: 12px;
}

.quick-answer p {
  font-size: 16px;
  color: var(--silver-light);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 16px;
}

.quick-answer-source {
  font-size: 12px;
  color: var(--silver-dark);
}

.quick-answer-source a {
  color: var(--silver);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 184, 184, 0.2);
}

/* Result cards */
.result-card {
  padding: 32px 0;
  border-bottom: 1px solid rgba(184, 184, 184, 0.08);
  transition: border-color var(--ease-base);
}

.result-card:first-child {
  padding-top: 0;
}

.result-card:hover {
  border-bottom-color: rgba(184, 184, 184, 0.2);
}

/* Featured (top) result */
.result-card.featured {
  padding: 32px;
  background: var(--black-2);
  border: 1px solid rgba(184, 184, 184, 0.12);
  margin-bottom: 2px;
}

.result-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--silver-dark);
  margin-bottom: 12px;
}

.result-card-inner {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.result-icon {
  width: 44px;
  height: 44px;
  background: var(--black-2);
  border: 1px solid rgba(184, 184, 184, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--silver-dark);
}

.result-type {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
  margin-bottom: 8px;
}

.result-title {
  display: block;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  line-height: 1.25;
  margin-bottom: 10px;
  transition: color var(--ease-base);
}

.result-title:hover {
  color: var(--silver-light);
}

/* <mark> highlighting — added by psp_highlight_search_terms() in functions.php */
.result-title mark,
.result-excerpt mark {
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  padding: 0 2px;
  border-radius: 2px;
}

.result-excerpt {
  font-size: 14px;
  color: var(--silver);
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 14px;
}

.result-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--silver-dark);
}

.result-meta a {
  color: var(--silver);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.result-meta-dot {
  width: 3px;
  height: 3px;
  background: rgba(184, 184, 184, 0.3);
  border-radius: 50%;
  display: inline-block;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 4px;
  margin-top: 64px;
  flex-wrap: wrap;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(184, 184, 184, 0.15);
  color: var(--silver);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background var(--ease-base), color var(--ease-base), border-color var(--ease-base);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

/* No results state */
.no-results {
  padding: 64px 0;
  text-align: center;
}

.no-results h2 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 16px;
}

.no-results p {
  font-size: 16px;
  color: var(--silver);
  line-height: 1.7;
}


/* ==========================================================================
   42. FOOTER

   Four-column grid: 320px brand column + 3 equal nav columns.
   Desktop social icons in brand column. Mobile social row appears
   below the grid and is hidden at desktop.
   All content driven by ACF Options — Footer Settings sub-page.
   ========================================================================== */

footer {
  background: #080808;
  border-top: 1px solid rgba(184, 184, 184, 0.1);
  padding: 64px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 320px repeat(3, 1fr);
  gap: 64px;
  margin-bottom: 56px;
}

/* Brand column */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-logo-mark {
  width: 80px;
  height: 98px;
  flex-shrink: 0;
}

.footer-logo-text {
  border-left: 1px solid rgba(184, 184, 184, 0.25);
  padding-left: 18px;
}

.footer-logo-text .greek {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: 0.06em;
  display: block;
  text-transform: uppercase;
}

.footer-logo-text .sub {
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--silver);
  text-transform: uppercase;
  margin-top: 6px;
  font-weight: 500;
  display: block;
}

.footer-brand>p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--silver);
  line-height: 1.7;
  font-weight: 300;
}

.footer-socials {
  display: flex;
  gap: 12px;
}

.footer-socials a {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(184, 184, 184, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--silver);
  text-decoration: none;
  transition: border-color var(--ease-base), color var(--ease-base);
}

.footer-socials a:hover {
  border-color: var(--silver);
  color: var(--white);
}

/* Nav columns */
.footer-col h5 {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--silver);
  font-weight: 600;
  margin-bottom: 24px;
}

.footer-col li {
  margin-bottom: 12px;
}

.footer-col a {
  color: var(--silver-light);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--ease-base);
  font-weight: 300;
}

.footer-col a:hover {
  color: var(--white);
}

/* Copyright bar */
.footer-bottom {
  padding-top: 36px;
  border-top: 1px solid rgba(184, 184, 184, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--silver-dark);
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom a {
  color: var(--silver-dark);
  text-decoration: none;
  transition: color var(--ease-base);
}

.footer-bottom a:hover {
  color: var(--white);
}

/* Mobile social (hidden at desktop, shown at ≤900px — see Section 43) */
.footer-mobile-social {
  display: none;
}

.footer-mobile-social span {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
  display: block;
  margin-bottom: 16px;
}

.footer-mobile-social-icons {
  display: flex;
  gap: 12px;
}

.footer-mobile-social-icons a {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(184, 184, 184, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--silver);
  text-decoration: none;
}


/* ==========================================================================
   43. RESPONSIVE BREAKPOINTS

   Three breakpoints. Desktop-first (max-width) because the HTML designs
   were all built desktop-first.

   1100px — Tablet: two-column layouts collapse, type scales down
    900px — Mobile: header becomes hamburger, single-column
    600px — Small: container pad reduces, further layout simplification
   ========================================================================== */

/* ── 1100px TABLET ─────────────────────────────────────────────────────── */
@media (max-width: 1100px) {

  .nav-links {
    gap: 22px;
  }

  .nav-links a {
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  .logo-text .sub {
    font-size: 8px;
  }

  .hero .hero-headline {
    font-size: clamp(44px, 8vw, 76px);
  }

  /* Two-column layouts collapse */
  .text-image-grid,
  .about-origin-grid,
  .president-preview-grid,
  .nmgc-grid,
  .hero-inner,
  .eligibility-grid,
  .parents-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

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

  /* Phiman Corner */

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

  .res-cats {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
  }

  .res-cat-btn {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: 8px 12px;
  }

  .res-cat-btn.active {
    border-bottom-color: var(--white);
    border-left: none;
  }

  /* Search */
  .search-body-inner {
    grid-template-columns: 1fr;
  }

  .search-filters {
    position: static;
  }
}

/* ── 900px MOBILE ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* Utility bar hidden */
  .top-bar {
    display: none;
  }

  /* Header collapses to hamburger */
  header nav {
    padding: 0 20px;
    min-height: 72px;
  }

  .logo-mark {
    width: 44px;
    height: 54px;
  }

  .logo-text .greek {
    font-size: 16px;
  }

  .logo-text .since {
    display: none;
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .hamburger {
    display: inline-flex;
  }

  /* Breadcrumb padding */
  .breadcrumb-inner {
    padding: 0 20px;
  }

  /* Page hero */
  .page-hero {
    padding: 56px 0 48px;
  }

  .page-hero::before {
    display: none;
  }

  /* Homepage hero */
  .hero {
    min-height: 85vh;
  }

  .hero .hero-headline {
    font-size: clamp(40px, 10vw, 64px);
  }

  .hero-meta {
    display: none;
  }

  /* About page */
  .about-anchors {
    top: 72px;
  }

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

  .founders-photo figcaption {
    flex-direction: column;
    gap: 4px;
  }

  /* Pillars */
  .eligibility {
    padding: 72px 0;
  }

  .parents {
    padding: 72px 0;
  }

  .parents-pillars {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .parents-visual {
    max-width: 420px;
    margin: 0 auto;
  }

  /* Community */
  .feature-card-inner {
    padding: 36px 28px 32px;
  }

  .community-cta {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 28px;
  }

  .section-rule {
    margin-bottom: 40px;
  }

  /* Gallery */
  .gallery-grid {
    columns: 2;
  }

  /* Phiman Corner hero watermarks */
  .dues-period-card {
    flex-wrap: wrap;
    gap: 16px;
  }

  /* Gate */
  .gate-hero {
    min-height: auto;
    padding: 60px 20px;
  }

  .gate-hero::before {
    font-size: clamp(140px, 30vw, 240px);
  }

  .gate-card {
    padding: 40px 28px;
  }

  .gate-features {
    grid-template-columns: 1fr 1fr;
  }

  /* Footer collapses */
  footer {
    padding: 48px 0 24px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 0;
  }

  .footer-col {
    display: none;
  }

  .footer-socials {
    display: none;
  }

  .footer-mobile-social {
    display: block;
    padding: 28px 0 4px;
    border-top: 1px solid rgba(184, 184, 184, 0.08);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}

/* ── 600px SMALL MOBILE ────────────────────────────────────────────────── */
@media (max-width: 600px) {

  :root {
    --container-pad: 20px;
  }

  .hero .hero-headline {
    font-size: clamp(36px, 10vw, 54px);
  }

  .hero-lead {
    font-size: 12px;
  }

  /* Single column */
  .feature-grid,
  .gate-features,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .testimonials {
    padding: 72px 0;
  }

  .testimonial {
    padding: 28px 24px;
  }

  .gallery-grid {
    columns: 1;
  }

  /* Stacked search form */
  .search-form-wrap {
    flex-direction: column;
  }

  .search-input {
    border-right: 1px solid rgba(184, 184, 184, 0.25);
  }

  /* Card padding reduce */
  .dues-period-card {
    padding: 20px;
  }

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



/* ==========================================================================
   GLOBAL COMPONENTS — BUCKET A ADDITIONS
   Components appearing on 3 or more page templates.
   These must be in main.css. All other template-specific classes are
   documented in the README and extracted by the developer per-template
   from the corresponding HTML design file in design/html/.
   ========================================================================== */

/* ── .mobile-drawer-cta ───────────────────────────────────────────────────
   Wrapper div that pads the .mobile-cta-btn inside the mobile drawer.
   Appears on every page that uses the mobile nav (i.e. all of them).
   The inner .mobile-cta-btn is already in Section 12.
   ──────────────────────────────────────────────────────────────────────── */

.mobile-drawer-cta {
  display: block;
  padding: 16px 24px 4px;
}


/* ── .page-nav / .page-nav-inner ─────────────────────────────────────────
   Prev / Next page navigation strip used at the bottom of inner pages
   (History, Presidents Message, Chapter Detail, Leadership Profile,
   SQUIRE, Eligibility, etc.). Two-column grid: ← Prev | Next →.
   Both columns are <a> tags pointing to adjacent section pages.

   Usage in templates:
     <nav class="page-nav" aria-label="Section navigation">
       <div class="page-nav-inner">
         <a href="/prev-page/" class="page-nav-item">
           <span class="page-nav-direction">← Previous</span>
           <span class="page-nav-title">Page title</span>
         </a>
         <a href="/next-page/" class="page-nav-item page-nav-item--next">
           <span class="page-nav-direction">Next →</span>
           <span class="page-nav-title">Page title</span>
         </a>
       </div>
     </nav>
   ──────────────────────────────────────────────────────────────────────── */

.page-nav {
  background: var(--black-2);
  border-top: 1px solid rgba(184, 184, 184, 0.1);
}

.page-nav-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--container-max);
  margin: 0 auto;
}

.page-nav-item {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  transition: background var(--ease-base);
  border-right: 1px solid rgba(184, 184, 184, 0.1);
}

.page-nav-item:hover {
  background: var(--black-3);
}

.page-nav-item:last-child {
  border-right: none;
  align-items: flex-end;
}

.page-nav-item--empty:hover {
  opacity: 1;
  background-color: transparent;
  cursor: default;
}

/* "Next" item — direction label reversed right-to-right */
.page-nav-item--next .page-nav-direction {
  flex-direction: row-reverse;
}

.page-nav-direction {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-nav-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
}


/* ── .page-anchors / .page-anchors-inner / .anchor-link ──────────────────
   Sticky in-page anchor navigation strip used on long single-template
   pages (SQUIRE, Eligibility, History, Mission, Leadership).
   Similar to .about-anchors (Section 18) but applied to non-about pages
   and uses .anchor-link instead of .about-anchor-link.

   Sticky offset: top: 96px matches desktop header height.
   JS: about.js handles the active state via IntersectionObserver.
   The same script works here — it targets any [href^="#"] anchor link
   inside .page-anchors.
   ──────────────────────────────────────────────────────────────────────── */

.page-anchors {
  background: var(--black);
  border-bottom: 1px solid rgba(184, 184, 184, 0.12);
  position: sticky;
  top: 96px;
  z-index: 50;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.page-anchors-inner {
  display: flex;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.page-anchors-inner::-webkit-scrollbar {
  display: none;
}

.anchor-link {
  padding: 18px 0;
  margin-right: 36px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--ease-base), border-color var(--ease-base);
  position: relative;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  flex-shrink: 0;
}

.anchor-link:hover {
  color: var(--white);
}

.anchor-link.is-active {
  color: var(--white);
  border-color: var(--white);
}


/* ── .footer-bottom-links ────────────────────────────────────────────────
   Utility link row inside the footer bottom bar.
   Appears on pages where the footer includes Privacy / Terms / Contact
   as a separate grouped link cluster — distinct from the inline
   .footer-bottom a links which are individual.

   On mobile, the flex-direction mirrors the .footer-bottom column layout.
   ──────────────────────────────────────────────────────────────────────── */

.footer-bottom-links {
  display: flex;
  gap: 24px;
}

.footer-bottom-links a {
  color: var(--silver-dark);
  text-decoration: none;
  font-size: 12px;
  transition: color var(--ease-base);
}

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


/* ── .section-label / .sub-section-label ─────────────────────────────────
   Small uppercase label used to introduce a sub-section within a larger
   template section. Used on Leadership (board sub-sections), Chapter
   Detail (officer roles), Event Detail (schedule days), etc.

   .section-label    — inline within content flow
   .sub-section-label — adds top margin for spacing after a grid/list
   ──────────────────────────────────────────────────────────────────────── */

.section-label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.section-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--silver-dark);
  display: inline-block;
  flex-shrink: 0;
}

.sub-section-label {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
  margin: 48px 0 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.sub-section-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: rgba(184, 184, 184, 0.2);
  display: inline-block;
  flex-shrink: 0;
}


/* ── .sidebar-card-label ─────────────────────────────────────────────────
   Heading label inside a .sidebar-card block. Smaller and more
   de-emphasised than the sidebar-card h3. Used on Apply, FAQs,
   Leadership Profile, Chapter Detail, and Event Detail.
   ──────────────────────────────────────────────────────────────────────── */

.sidebar-card-label {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ==========================================================================
   PULL QUOTE — rendered directly by the template (not via shortcode)
   Note: if [psp_pull_quote] shortcode is used in other WYSIWYG fields,
   these same rules should also live in main.css. The shortcode relies on
   this selector being available globally.
   ========================================================================== */

.pull-quote {
  margin: 48px 0;
  padding: 36px 40px;
  border-left: 3px solid var(--silver);
  background: #141414;
}

.pull-quote p {
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 24px);
  font-style: italic;
  color: var(--silver-light);
  line-height: 1.5;
  margin: 0 !important;
  font-weight: 500;
}

/* Attribution line — rendered when cite="" is passed to the shortcode */
.pull-quote cite {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--silver-dark);
  font-weight: 600;
}

/* ── PSP CALLOUT SHORTCODE ── */
.psp-callout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #141414;
  border: 1px solid rgba(184, 184, 184, 0.1);
  border-left-width: 3px;
  padding: 28px 32px;
  margin: 32px 0;
}

/* Left border weight communicates severity */
.psp-callout--info    { border-left-color: var(--silver); }
.psp-callout--warning { border-left-color: var(--white); }
.psp-callout--note    { border-left-color: var(--silver-dark); }

.psp-callout__icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--silver-dark);
}
.psp-callout--warning .psp-callout__icon { color: var(--silver); }

.psp-callout__body {
  font-size: 14px;
  color: var(--silver);
  line-height: 1.7;
  font-weight: 300;
}
.psp-callout__body strong { color: var(--silver-light); font-weight: 600; }
.psp-callout__body a      { color: var(--silver-light); text-decoration: underline;
                             text-underline-offset: 3px; }
.psp-callout__body a:hover { color: var(--white); }

@media (max-width: 900px) {
  .psp-callout { padding: 20px 24px; gap: 16px; }
}

/* ─── Profile completion prompt ─────────────────────────────────────────────  */

.psp-profile-prompt {
	border: 1px solid rgba(200, 140, 40, 0.4);
	background: rgba(200, 140, 40, 0.06);
	padding: 20px 24px;
	margin: 24px;
}

.psp-profile-prompt__message {
	font-family: var(--sans);
	font-size: 14px;
	color: var(--black-3);
	margin: 0 0 16px;
}

.psp-profile-prompt__cta {
	display: inline-block;
	padding: 10px 24px;
	background: var(--white);
	color: var(--black);
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid var(--silver);
	transition: background 0.2s, color 0.2s;
}

.psp-profile-prompt__cta:hover {
	background: var(--black);
	color: var(--white);
}

/* --- form notice */
/* Field error states — uses existing design tokens */
.field-error {
    display: block;
    font-size: 12px;
    color: var(--error);
    margin-top: 5px;
    min-height: 16px; /* stops layout jump when error appears */
}

.form-input.is-invalid,
.form-textarea.is-invalid {
    border-color: var(--error);
    outline-color: var(--error);
}

/* Notice block */
.form-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 4px;
    border-left: 3px solid transparent;
    margin-bottom: 24px;
}
.form-notice--ok  { background: rgba(76,175,125,0.1);  border-left-color: var(--success); color: var(--success); }
.form-notice--err { background: rgba(224,85,85,0.1);   border-left-color: var(--error);   color: var(--error); }
.form-notice-icon { flex-shrink: 0; margin-top: 1px; }
.form-notice-text { color: var(--silver-light); font-size: 14px; line-height: 1.55; }
.form-notice-text strong { color: inherit; font-weight: 600; display: block; margin-bottom: 2px; }

/* ==========================================================================
   END OF main.css — Psi Sigma Phi Theme v1.0.0
   ========================================================================== */