/*
 * Ruhaniat Design System
 * Core colors, spacing, typography, and reusable components
 */

/* ========================================
   COLOR SYSTEM
   ======================================== */

/* Override Bootstrap's CSS custom properties */
:root {
  /* Core Brand Colors */
  --color-dark: #1d1d1d !important;
  --color-light-text: #8a857b !important;
  --color-white: #ffffff !important;
  --color-sand: #f8f6f1 !important;

  /* Extended Palette */
  --color-gold: #ffc33a !important;
  --color-maroon: #800001 !important;
  --color-light-gold: #fefbf3 !important;
  --color-dark-gold: #ad8f5a !important;
  --color-dark-ui-gold: #927F5E !important;
  --color-hard-shadow: #d5ccbd !important;
  --color-dark-sand: #d5ccbd !important;
  --color-soft-shadow: rgba(213, 204, 189, 0.2) !important;

  /* Home Promo Card Tags (spec 2026-08-31) */
  --promo-tag-event: #DFBFBF;
  --promo-tag-class: #FFC33A;
  --promo-tag-book: #D7E6EC;
  --promo-tag-series: #CDD9C6;

  /* Semantic Colors - Override Bootstrap's --bs-primary etc */
  --color-secondary: var(--color-light-text) !important;
  --color-background: var(--color-white) !important;
  --color-background-alt: var(--color-sand) !important;
  --color-accent: var(--color-gold) !important;
  --color-accent-alt: var(--color-maroon) !important;
  --color-border: var(--color-hard-shadow) !important;
  --color-border-light: var(--color-soft-shadow) !important;

  /* Override Bootstrap's theme colors with your design system */
  --bs-primary: var(--color-dark) !important;
  --bs-secondary: var(--color-light-text) !important;
  --bs-success: var(--color-gold) !important;
  --bs-warning: var(--color-gold) !important;
  --bs-danger: var(--color-maroon) !important;
  --bs-info: var(--color-dark-gold) !important;
  --bs-light: var(--color-sand) !important;
  --bs-dark: var(--color-dark) !important;

  /* Navigation Spacing */
  --nav-padding-x: 50px;
  --nav-padding-y: 20px;
  --nav-item-gap: 20px;
}

/* ========================================
   TYPOGRAPHY SYSTEM
   ======================================== */

:root {
  /* Font Families (from fonts.css) */
  --font-primary: "Maison Neue", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "MADE Awelier", Georgia, "Times New Roman", Times, serif;
  --font-display: "Hoefler Titling", Georgia, "Times New Roman", Times, serif;
  --font-mono: "Maison Neue Mono", "SF Mono", Monaco, Consolas, monospace;
  
  /* Font Sizes - Mobile First (Base) */
  --text-body-caption: 0.875rem;   /* 14px - body/xs */
  --text-body-small: 0.9375rem;    /* 15px - body/small */
  --text-body-default: 1.0625rem;       /* 16px - body/default */
  --text-body-large: 1.125rem;     /* 18px - body/large */
  --text-ui-button: 1.0rem;     /* 15px - ui/button */
  --text-ui-tag: 0.8125rem;        /* 13px - ui/tag */
  --text-heading-6: 0.9375rem;     /* 14px - heading/h6 */
  --text-heading-5: 1.125rem;      /* 18px - heading/h5 */
  --text-heading-4: 1.4rem;      /* 26px - heading/h4 */
  --text-heading-3: 1.6rem;          /* 32px - heading/h3 */
  --text-heading-2: 1.8rem;       /* 36px - heading/h2 */
  --text-heading-1: 2.0rem;      /* 46px - heading/h1 */
  --text-quote: 1.25rem;           /* 20px - specialty/quote */
  --text-code: 1rem;               /* 16px - specialty/mono */
  
  /* Line Heights - Matching Figma Specifications */
  --leading-body-default: 1.4;     /* body/default */
  --leading-body-text: 1.3;        /* body/small, body/large, body/xs */
  --leading-heading-1: 1;          /* heading/h1 */
  --leading-heading-2: 1.2;        /* heading/h2 */
  --leading-heading-345: 1.1;      /* heading/h3, h4, h5 */
  --leading-heading-6: 1.1;        /* heading/h6 */
  --leading-quote: 1.5;            /* specialty/quote */
  --leading-ui: 1;                 /* ui/button, ui/tag, specialty/mono */
}

/* Responsive Font Sizes - Tablet (768px+) */
@media (min-width: 768px) {
  :root {
    --text-body-caption: 0.875rem;   /* 14px - body/xs */
    --text-body-small: 0.9375rem;    /* 15px - body/small */
    --text-body-default: 1.125rem;       /* 16px - body/default */
    --text-body-large: 1.125rem;     /* 18px - body/large */
    --text-ui-button: 1.0rem;     /* 15px - ui/button */
    --text-ui-tag: 0.8125rem;        /* 13px - ui/tag */
    --text-heading-6: 0.875rem;      /* 14px - heading/h6 */
    --text-heading-5: 1.125rem;      /* 18px - heading/h5 */
    --text-heading-4: 1.625rem;      /* 26px - heading/h4 */
    --text-heading-3: 2rem;          /* 32px - heading/h3 */
    --text-heading-2: 2.25rem;       /* 36px - heading/h2 */
    --text-heading-1: 2.875rem;      /* 46px - heading/h1 */
    --text-quote: 1.25rem;           /* 20px - specialty/quote */
    --text-code: 1rem;               /* 16px - specialty/mono */
  }
}

/* Responsive Font Sizes - Desktop (1200px+) */
@media (min-width: 1200px) {
  :root {
    --text-body-caption: 0.875rem;   /* 14px - body/xs */
    --text-body-small: 0.9375rem;    /* 15px - body/small */
    --text-body-default: 1.125rem;       /* 16px - body/default */
    --text-body-large: 1.125rem;     /* 18px - body/large */
    --text-ui-button: 1.0rem;     /* 15px - ui/button */
    --text-ui-tag: 0.8125rem;        /* 13px - ui/tag */
    --text-heading-6: 1.0rem;        /* 17px - heading/h6 */
    --text-heading-5: 1.5rem;        /* 20px - heading/h5 */
    --text-heading-4: 1.625rem;      /* 26px - heading/h4 */
    --text-heading-3: 2rem;          /* 32px - heading/h3 */
    --text-heading-2: 2.25rem;       /* 36px - heading/h2 */
    --text-heading-1: 2.875rem;      /* 46px - heading/h1 */
    --text-quote: 1.375rem;           /* 20px - specialty/quote */
    --text-code: 1rem;               /* 16px - specialty/mono */
  }
}

/* ========================================
   RESPONSIVE LAYOUT SYSTEM
   ======================================== */

:root {
  /* Bootstrap-aligned Breakpoints */
  --breakpoint-tablet: 768px;   /* >=768px - Tablet */
  --breakpoint-desktop: 992px;  /* >=992px - Desktop */

  /* Layout Dimensions */
  --layout-max-width: 1400px;
  --layout-bottom-padding: 100px;

  /* Responsive Margin System - Based on Figma Designs */
  /* Mobile (<768px) */
  --margin-x-mobile: 20px;      /* Start/end margins */
  --margin-top-mobile: 25px;    /* Module top margins */
  --margin-bottom-mobile: 25px; /* Module bottom margins */
  --margin-bottom-mobile-short: 15px; /* Module bottom margins */

  /* Tablet (768px - 991px) - Split the difference */
  --margin-x-tablet: 35px;      /* Start/end margins */
  --margin-top-tablet: 37px;    /* Module top margins */
  --margin-bottom-tablet: 75px; /* Module bottom margins */
  --margin-bottom-tablet-short: 25px; /* Module bottom margins */

  /* Desktop (>=992px) */
  --margin-x-desktop: 50px;     /* Start/end margins */
  --margin-top-desktop: 50px;   /* Module top margins */
  --margin-bottom-desktop: 75px;  /* Module bottom margins */
  --margin-bottom-desktop-short: 35px; /* Module bottom margins */
}

/* Base Layout Container */
.site-wrapper {
  min-height: 100vh;
  padding-bottom: var(--layout-bottom-padding);
}

/* Background Pattern and Padding (visible from 768px up) */
@media (min-width: 768px) {
  .site-wrapper {
    padding: 0 40px;
    padding-bottom: var(--layout-bottom-padding);
  }
}

/* Main Site Container */
.site-container {
  width: 100%;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  background-color: var(--color-background);
  min-height: calc(100vh - var(--layout-bottom-padding));
}

/* Drop Shadow from 768px up */
@media (min-width: 768px) {
  .site-container {
    box-shadow: var(--shadow-xl);
  }
}

/* ========================================
   SPACING SYSTEM
   ======================================== */

:root {
  /* Spacing Scale */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-image-gap: 1.5rem; /* 24px — gap between rich-text images and surrounding copy */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */
  
  /* Component Spacing */
  --spacing-section: var(--space-20);     /* 80px section padding */
  --spacing-card: var(--space-8);         /* 32px card padding */
  --spacing-element: var(--space-6);      /* 24px element spacing */
}

/* ========================================
   BORDER RADIUS SYSTEM
   ======================================== */

:root {
  --radius-sm: 0.5rem;    /* 8px - Small elements */
  --radius-md: 1rem;      /* 16px - Cards, images */
  --radius-lg: 1.25rem;   /* 20px - Event cards */
  --radius-xl: 1.5rem;    /* 24px - Large components */
}

/* ========================================
   BORDER SYSTEM
   ======================================== */

:root {
  --border-card: 3px solid var(--color-soft-shadow);
  --border-hard: 0.5px solid var(--color-hard-shadow);
  --border-primary: 1px solid var(--color-dark);
}

/* ========================================
   SHADOW SYSTEM
   ======================================== */

:root {
  --shadow-sm: 0 1px 2px rgba(29, 29, 29, 0.05);
  --shadow-md: 0 4px 6px rgba(29, 29, 29, 0.07);
  --shadow-lg: 0 8px 25px rgba(29, 29, 29, 0.1);
  --shadow-xl: 0 25px 50px rgba(29, 29, 29, 0.15);
}

/* ========================================
   COMPONENT CLASSES
   ======================================== */

@media (min-width: 992px) {
  .homepage-content .user-content,
  .homepage-content .homepage-cta {
    max-width: 800px;
    margin: 0 auto;
  }
}

/* ========================================
   RESPONSIVE ASPECT RATIOS
   ======================================== */

/* Hero image aspect ratios */
.hero-image-responsive {
  position: relative;
  overflow: hidden;
  border-radius: 1rem; /* rounded-3 equivalent */
}

/* Mobile: 8:7 aspect ratio (more square) */
.hero-image-responsive::before {
  content: '';
  display: block;
  padding-top: 87.5%; /* 7/8 = 0.875 */
}

/* Tablet and Desktop: 16:9 aspect ratio (1920x1080 equivalent) */
@media (min-width: 768px) {
  .hero-image-responsive::before {
    padding-top: 56.25%; /* 9/16 = 0.5625 */
  }
}

.hero-image-responsive img,
.hero-image-responsive .hero-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crop on mobile for 8:7 aspect */
}

/* Desktop: use cover since we're providing the correct 16:9 crop */
@media (min-width: 768px) {
  .hero-image-responsive img {
    object-fit: cover; /* Use the 16:9 cropped version */
    object-position: center;
  }
}

/* ========================================
   STRUCTURED TYPOGRAPHY SYSTEM
   ======================================== */

/* Body Font Family (Maison Neue) - 14-18pt range */
.text-body-caption {
  font-family: var(--font-primary);
  font-size: var(--text-body-caption);
  font-weight: 400;
  line-height: var(--leading-body-text);
  letter-spacing: 0.03em;
}

.text-body-small {
  font-family: var(--font-primary);
  font-size: var(--text-body-small);
  font-weight: 400;
  line-height: var(--leading-body-text);
  letter-spacing: 0.03em;
}

.text-body-default {
  font-family: var(--font-primary);
  font-size: var(--text-body-default);
  font-weight: 400;
  line-height: var(--leading-body-default);
}

.text-body-large {
  font-family: var(--font-primary);
  font-size: var(--text-body-large);
  font-weight: 400;
  line-height: var(--leading-body-text);
  letter-spacing: 0.03em;
}

/* UI Text (Maison Neue Demi) */
.text-ui-label {
  font-family: var(--font-primary);
  font-size: var(--text-body-default);
  font-weight: 600; /* Demi weight */
  line-height: var(--leading-ui);
}

.text-ui-button {
  font-family: var(--font-primary);
  font-size: var(--text-ui-button);
  font-weight: 600; /* Demi weight */
  line-height: var(--leading-ui);
}

.text-ui-tag {
  font-family: var(--font-primary);
  font-size: var(--text-ui-tag);
  font-weight: 600; /* Demi weight */
  line-height: var(--leading-ui);
}

/* Heading Font Family (MADE Awelier serif) - 16-46pt range */
.text-heading-1 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-1);
  font-weight: 400;
  line-height: var(--leading-heading-1);
}

.text-heading-2 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-2);
  font-weight: 400;
  line-height: var(--leading-heading-2);
}

.text-heading-3 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-3);
  font-weight: 400;
  line-height: var(--leading-heading-345);
}

.text-heading-4 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-4);
  font-weight: 400;
  line-height: var(--leading-heading-345);
}

.text-heading-5 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-5);
  font-weight: 500; /* Medium weight per Figma */
  line-height: var(--leading-heading-345);
}

.text-heading-6 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-6);
  font-weight: 400;
  line-height: var(--leading-heading-6);
}

/* Quote Font Family (Hoefler Titling all-caps) */
.text-quote {
  font-family: var(--font-display);
  font-size: var(--text-quote);
  font-weight: 400;
  line-height: var(--leading-quote);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Mono Font Family (Maison Neue Mono) */
.text-code {
  font-family: var(--font-mono);
  font-size: var(--text-code);
  font-weight: 400;
  line-height: var(--leading-ui);
}

/* Color Utilities (can be combined with any text class) */
.text-prime { color: var(--color-dark); }
.text-second { color: var(--color-secondary); }
.text-muted { color: var(--color-light-text); }
.text-accent { color: var(--color-accent); }
.text-white { color: var(--color-white); }

/* Font Family Utilities (legacy support) */
.font-primary { font-family: var(--font-primary); }
.font-serif { font-family: var(--font-serif); }
.font-display { font-family: var(--font-display); }
.font-mono { font-family: var(--font-mono); }

/* ========================================
   CKEDITOR COMPATIBILITY CLASSES
   These classes inherit from the primary text classes above and add
   CKEditor-specific formatting (margins, etc.)
   ======================================== */

/* CKEditor Body Text Classes - Inherit base styles */
.body-xs {
  font-family: var(--font-primary);
  font-size: var(--text-body-caption);
  font-weight: 400;
  line-height: var(--leading-body-text);
  letter-spacing: 0.03em;
}

.body-small {
  font-family: var(--font-primary);
  font-size: var(--text-body-small);
  font-weight: 400;
  line-height: var(--leading-body-text);
  letter-spacing: 0.03em;
}

.body-default {
  font-family: var(--font-primary);
  font-size: var(--text-body-default);
  font-weight: 400;
  line-height: var(--leading-body-default);
}

.body-large {
  font-family: var(--font-primary);
  font-size: var(--text-body-large);
  font-weight: 400;
  line-height: var(--leading-body-text);
  letter-spacing: 0.03em;
}

/* CKEditor Heading Classes - Inherit base heading styles + add margins */
.heading-h1 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-1);
  font-weight: 400;
  line-height: var(--leading-heading-1);
  margin: 1.5rem 0 1rem 0;
}

.heading-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-2);
  font-weight: 400;
  line-height: var(--leading-heading-2);
  margin: 1.25rem 0 0.75rem 0;
}

.heading-h3 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-3);
  font-weight: 400;
  line-height: var(--leading-heading-345);
  margin: 1rem 0 0.5rem 0;
}

.heading-h4 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-4);
  font-weight: 400;
  line-height: var(--leading-heading-345);
  margin: 0.875rem 0 0.5rem 0;
}

.heading-h5 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-5);
  font-weight: 500;
  line-height: var(--leading-heading-345);
  margin: 0.75rem 0 0.375rem 0;
}

.heading-h6 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-6);
  font-weight: 400;
  line-height: var(--leading-heading-6);
  margin: 0.5rem 0 0.25rem 0;
}

/* CKEditor Quote Style */
.specialty-quote {
  font-family: var(--font-display);
  font-size: var(--text-quote);
  font-weight: 400;
  line-height: var(--leading-quote);
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--color-dark);
  margin: 1.5rem 0;
  padding: 1rem 0;
  font-style: normal;
}

/* Note: The main difference between .text-* and CKEditor classes is that
   CKEditor classes include margin spacing for editor context */

/* Background Components */
.bg-primary { background-color: var(--color-dark); }
.bg-sand { background-color: var(--color-sand); }
.bg-light-gold { background-color: var(--color-light-gold); }
.bg-white { background-color: var(--color-white); }
.bg-accent { background-color: var(--color-accent); }

/* Border Components */
.border-soft { border: var(--border-card); }
.border-card { border: var(--border-card); }
.border-hard { border: var(--border-hard); }
.border-primary { border: var(--border-primary); }

/* Button Components */
.btn-ruhaniat {
  background-color: var(--color-sand);
  color: var(--color-dark);
  font-family: var(--font-primary);
  font-weight: 600; /* Demi weight */
  font-size: var(--text-ui-button);
  line-height: var(--leading-ui);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-sm);
  border: none;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s ease-in-out;
}

.btn-ruhaniat:hover {
  background-color: var(--color-hard-shadow);
  color: var(--color-dark);
  transform: translateY(-1px);
}

.btn-ruhaniat:active {
  transform: translateY(0);
}

/* Card Components */
.card-ruhaniat {
  background-color: var(--color-white);
  border: 3px solid var(--color-soft-shadow);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: all 0.2s ease-in-out;
}

.card-ruhaniat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Class Card Component — same layout at every breakpoint:
   header row (160×180 image + meta column), then type/title/description/CTA.
   All gaps 15px, image 10px radius. Boxed by default (white, 20px padding,
   20px radius — pairs with the event card in the home page Featured grid);
   the learning index list strips the box via .rog-classes-grid .class-card. */
.class-card {
  background-color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  border-radius: var(--radius-lg);
}

/* Header row: image beside the meta column */
.class-card-header {
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.class-card-image {
  width: 160px;
  height: 180px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

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

.class-card-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8e4df 0%, #d5ccbd 100%);
}

.class-card-image-placeholder i {
  width: 48px;
  height: 48px;
  color: var(--color-light-text);
}

/* Meta column beside the image: stats, characteristics, teachers */
.class-card-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
  min-width: 0;
}

/* Class card characteristics - stacked list, 14px icons/text, no gap */
.class-card-characteristics {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
}

.class-card-characteristics .icon-text {
  margin-bottom: 0 !important; /* icon-text ships with Bootstrap's mb-2 */
}

.class-card-characteristics .icon-text-icon {
  width: 14px;
  height: 14px;
  margin-top: 0;
}

.class-card-characteristics .icon-text-content {
  font-size: 14px;
}

/* CTA button sits below the description, natural width */
.class-card > .cta-button-primary,
.class-card > .cta-button-secondary {
  align-self: flex-start;
}

/* Class type label */
.class-card-type {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-dark);
  margin: 0;
}

/* Class title */
.class-card-title {
  font-family: var(--font-serif);
  font-size: var(--text-heading-4);
  line-height: var(--leading-heading-345);
  letter-spacing: 0.78px;
  color: var(--color-dark);
  margin: 0;
}

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

.class-card-title a:hover {
  color: var(--color-dark-gold);
}

/* Teacher list in class cards */
.class-card-teachers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
}

.class-card-teachers .person-avatar {
  padding: 0; /* the 10px flex gap is the whole spacing */
}

.class-card-teachers .person-avatar-name {
  line-height: 1;
}

/* ========================================
   PERSON AVATAR COMPONENT
   ======================================== */

/* Base avatar styles */
.person-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}

.person-avatar-image {
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.person-avatar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8e4df 0%, #d5ccbd 100%);
}

.person-avatar-name {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-dark);
  text-decoration: none;
}

.person-avatar-name:hover {
  color: var(--color-dark-gold);
}

/* Size: Small (30px) - default */
.person-avatar-sm .person-avatar-image {
  width: 30px;
  height: 30px;
}

.person-avatar-sm .person-avatar-placeholder i {
  width: 16px;
  height: 16px;
  color: var(--color-light-text);
}

/* Size: Medium (40px) */
.person-avatar-md .person-avatar-image {
  width: 40px;
  height: 40px;
}

.person-avatar-md .person-avatar-placeholder i {
  width: 20px;
  height: 20px;
  color: var(--color-light-text);
}

.person-avatar-md .person-avatar-name {
  font-size: 15px;
}

/* Size: Large (80px) */
.person-avatar-lg .person-avatar-image {
  width: 80px;
  height: 80px;
}

.person-avatar-lg .person-avatar-placeholder i {
  width: 32px;
  height: 32px;
  color: var(--color-light-text);
}

.person-avatar-lg .person-avatar-name {
  font-size: 16px;
}

/* Class stats */
.class-card-stats {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-dark);
  margin: 0;
}

/* Class description */
.class-card-description {
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-light-text);
  margin: 0;
}

/* Front-end login card (pages/login.twig) */
.login-card {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.login-title {
  font-family: var(--font-serif);
  margin: 0;
}

/* Signup tracker email-gate forms (pages/signup-tracker.twig) */
.signup-gate-form {
  max-width: 24rem;
}

.login-label {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: calc(-1 * var(--space-2));
}

.login-error {
  color: var(--color-maroon);
  font-weight: 600;
  margin: 0;
}

.login-notice {
  color: var(--color-dark);
  background: var(--color-sand);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin: 0;
  font-size: 14px;
}

.login-code-input {
  font-size: 24px;
  letter-spacing: 8px;
  text-align: center;
  font-family: var(--font-mono, monospace);
}

.login-resend {
  margin: 0;
}

.login-link-button {
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-dark-gold);
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
}

.login-alt {
  font-size: 14px;
  margin: 0;
}

/* Quote Components */
.quote-ruhaniat {
  font-family: var(--font-display);
  font-size: var(--text-quote);
  font-weight: 400;
  line-height: var(--leading-quote);
  color: var(--color-dark);
  text-align: center;
  letter-spacing: 0.01em;
  font-style: normal;
}

/* Section Components */
.section-ruhaniat {
  padding: var(--spacing-section) 0;
}

.section-sand {
  background-color: var(--color-sand);
}

.section-light-gold {
  background-color: var(--color-light-gold);
}

/* Container Components */
.container-ruhaniat {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

@media (min-width: 768px) {
  .container-ruhaniat {
    padding: 0 var(--space-5);
  }
}

/* Icon Components */
.icon-ruhaniat {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icon-muted {
  fill: var(--color-light-text);
}

/* Icon-Text Component */
.icon-text {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icon-text-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: -0.2rem;
}

.icon-text-content {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--text-body-small);
  line-height: 1.3;
}

/* Lucide icon inside a .cta-button-* (buttons are inline-flex with gap) */
.cta-button-icon {
  width: 16px;
  height: 16px;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Containers inside page content carry no gutters of their own — horizontal
   spacing comes solely from the module margin utilities (20/35/50px), so every
   header and module shares the same left edge at each breakpoint */
.page-content .container,
.page-content .container-fluid,
.person-page .container,
.site-footer .container,
.site-footer .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* Responsive Module Spacing Utilities */
.module-margins {
  margin-left: var(--margin-x-mobile);
  margin-right: var(--margin-x-mobile);
  margin-top: var(--margin-top-mobile);
  margin-bottom: var(--margin-bottom-mobile);
}

/* Page-title variant: half the bottom margin of a standard module */
.module-margins-title {
  margin-left: var(--margin-x-mobile);
  margin-right: var(--margin-x-mobile);
  margin-top: var(--margin-top-mobile);
  margin-bottom: calc(var(--margin-bottom-mobile) / 2);
}

@media (min-width: 768px) {
  .module-margins-title {
    margin-left: var(--margin-x-tablet);
    margin-right: var(--margin-x-tablet);
    margin-bottom: calc(var(--margin-bottom-tablet) / 2);
  }
}

@media (min-width: 1200px) {
  .module-margins-title {
    margin-left: var(--margin-x-desktop);
    margin-right: var(--margin-x-desktop);
    margin-bottom: calc(var(--margin-bottom-desktop) / 2);
  }
}

@media (min-width: 768px) {
  .module-margins {
    margin-left: var(--margin-x-tablet);
    margin-right: var(--margin-x-tablet);
    margin-top: var(--margin-top-mobile);
    margin-bottom: var(--margin-bottom-tablet);
  }
}

@media (min-width: 992px) {
  .module-margins {
    margin-left: var(--margin-x-desktop);;
    margin-right: var(--margin-x-desktop);
    margin-top: var(--margin-top-mobile);
    margin-bottom: var(--margin-bottom-desktop);
  }
}

@media (min-width: 1200px) {
  .module-margins {
    margin-left: var(--margin-x-desktop);
    margin-right: var(--margin-x-desktop);
    margin-top: var(--margin-top-mobile);
    margin-bottom: var(--margin-bottom-desktop);
  }
}

/* People module with the headline hidden (plain image grid): no top spacing; the
   normal module bottom margin stays. Compound selector outranks the breakpoint
   rules above, so no !important needed. */
.module-margins.module-people--no-headline {
  margin-top: 0;
}
.module-people--no-headline .people-grid-col {
  padding-top: 0;
}

/* Individual responsive margin utilities */
.mx-module {
  margin-left: var(--margin-x-mobile);
  margin-right: var(--margin-x-mobile);
}

.mt-module {
  margin-top: var(--margin-top-mobile);
}

.mb-module {
  margin-bottom: var(--margin-bottom-mobile);
}

.mb-module-short {
  margin-bottom: var(--margin-bottom-mobile-short);
}

/* Full-width on mobile, margins on tablet+ */
.breakout-mobile {
  margin-left: 0;
  margin-right: 0;
}

/* Remove border radius on mobile for breakout content */
.breakout-mobile .hero-image-responsive,
.breakout-mobile .rounded,
.breakout-mobile .rounded-1,
.breakout-mobile .rounded-2,
.breakout-mobile .rounded-3,
.breakout-mobile .rounded-4,
.breakout-mobile .rounded-5 {
  border-radius: 0 !important;
}

@media (min-width: 768px) {
  .mx-module {
    margin-left: var(--margin-x-tablet);
    margin-right: var(--margin-x-tablet);
  }

  .mt-module {
    margin-top: var(--margin-top-tablet);
  }

  .mb-module {
    margin-bottom: var(--margin-bottom-tablet);
  }

  .mb-module-short {
    margin-bottom: var(--margin-bottom-tablet-short);
  }

  .breakout-mobile {
    margin-left: var(--margin-x-tablet);
    margin-right: var(--margin-x-tablet);
  }

  /* Restore border radius on tablet+ for breakout content */
  .breakout-mobile .hero-image-responsive {
    border-radius: 1rem !important; /* rounded-3 equivalent */
  }

  .breakout-mobile .rounded {
    border-radius: 0.375rem !important; /* Bootstrap default */
  }

  .breakout-mobile .rounded-1 {
    border-radius: 0.25rem !important;
  }

  .breakout-mobile .rounded-2 {
    border-radius: 0.375rem !important;
  }

  .breakout-mobile .rounded-3 {
    border-radius: 0.5rem !important;
  }

  .breakout-mobile .rounded-4 {
    border-radius: 0.75rem !important;
  }

  .breakout-mobile .rounded-5 {
    border-radius: 1rem !important;
  }
}

@media (min-width: 992px) {
  .mx-module {
    margin-left: var(--margin-x-desktop);
    margin-right: var(--margin-x-desktop);
  }

  .mt-module {
    margin-top: var(--margin-top-desktop);
  }

  .mb-module {
    margin-bottom: var(--margin-bottom-desktop);
  }

  .mb-module-short {
    margin-bottom: var(--margin-bottom-desktop-short);
  }

  .breakout-mobile {
    margin-left: var(--margin-x-desktop);
    margin-right: var(--margin-x-desktop);
  }

  /* Restore border radius on desktop for breakout content */
  .breakout-mobile .hero-image-responsive {
    border-radius: 1rem !important; /* rounded-3 equivalent */
  }

  .breakout-mobile .rounded {
    border-radius: 0.375rem !important; /* Bootstrap default */
  }

  .breakout-mobile .rounded-1 {
    border-radius: 0.25rem !important;
  }

  .breakout-mobile .rounded-2 {
    border-radius: 0.375rem !important;
  }

  .breakout-mobile .rounded-3 {
    border-radius: 0.5rem !important;
  }

  .breakout-mobile .rounded-4 {
    border-radius: 0.75rem !important;
  }

  .breakout-mobile .rounded-5 {
    border-radius: 1rem !important;
  }
}

/* Legacy Spacing Utilities */
.p-ruhaniat { padding: var(--spacing-card); }
.py-ruhaniat { padding-top: var(--spacing-section); padding-bottom: var(--spacing-section); }
.px-ruhaniat { padding-left: var(--space-4); padding-right: var(--space-4); }
.mb-ruhaniat { margin-bottom: var(--spacing-element); }

/* Layout Utilities */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* Responsive Utilities */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
  
  .hide-desktop {
    display: none;
  }
}

/* ========================================
   NAVIGATION STYLES
   ======================================== */

/* Desktop Navigation */
.top-nav-desktop {
  border-top: 2px solid var(--color-gold);
  padding-left: var(--nav-padding-x);
  padding-right: var(--nav-padding-x);
  padding-top: var(--nav-padding-y);
  padding-bottom: var(--nav-padding-y);
}

/* Mobile Navigation */
.top-nav-mobile {
  border-top: 2px solid var(--color-gold);
  padding-left: var(--margin-x-mobile);
  padding-right: var(--margin-x-mobile);
  padding-top: var(--nav-padding-y);
  padding-bottom: var(--nav-padding-y);
}

@media (min-width: 768px) {
  .top-nav-mobile {
    padding-left: var(--margin-x-tablet);
    padding-right: var(--margin-x-tablet);
  }
}

@media (min-width: 992px) {
  .top-nav-mobile {
    padding-left: var(--margin-x-desktop);
    padding-right: var(--margin-x-desktop);
  }
}

.top-nav-desktop .container-fluid,
.top-nav-mobile .container-fluid {
  max-width: none;
  position: relative;
}

/* Navigation Items */
.nav-item-link {
  font-family: var(--font-serif) !important;
  font-size: var(--text-heading-6);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  color: var(--color-dark);
  text-decoration: none;
}

.nav-item-link:hover {
  color: var(--color-dark-gold);
}

.nav-item-wrapper .chevron-down {
  flex-shrink: 0;
}

/* No dropdown: keep the chevron's width so the nav rhythm stays even */
.nav-item-wrapper .chevron-down.is-placeholder {
  opacity: 0;
  pointer-events: none;
}

/* Logo Styles */
.logo-desktop {
  height: 85px;
  width: auto;
}

.logo-mobile {
  height: 85px;
  width: auto;
}

.logo-mobile-nav {
  height: 85px;
  width: auto;
}

/* Search Input */
/* Standard inner padding for all search/input fields */
.search-input {
  padding: 0.75rem;
}

.search-input-wrapper .search-input {
  border: 1px solid var(--color-dark-sand) !important;
  border-radius: 10px;
  background-color: white;
  max-width: 350px;
}

.search-input input {
  font-family: var(--font-primary);
  font-size: var(--text-body);
  color: var(--color-dark);
}

.search-input input::placeholder {
  color: var(--color-dark-sand) !important;
}

.search-input:focus-within {
  border-color: var(--color-dark-gold);
}

/* Donate Button */
.donate-button {
  background-color: var(--color-gold);
  color: var(--color-dark);
  font-family: var(--font-primary);
  font-weight: 600; /* Demi */
  font-size: 15px;
  border-radius: 8px;
  border: none;
  transition: all 0.2s ease-in-out;
  max-height: 44px;
}

.donate-button:hover {
  background-color: var(--color-dark-gold);
  color: var(--color-white);
  transform: translateY(-1px);
}

/* Mobile Navigation */
.top-nav-mobile .mobile-menu-toggle {
  border: none;
  background: transparent;
  color: var(--color-dark);
  padding: 8px;
}

.top-nav-mobile .mobile-menu-toggle:hover {
  color: var(--color-dark-gold);
}

/* Mobile Navigation Overlay — slides in below the persistent mobile header
   (top/height set in main.js from the header's measured bottom edge) */
/* Double class beats Bootstrap's .offcanvas.offcanvas-start width: 400px;
   anchoring both edges (not a computed width) keeps it flush with the viewport */
.offcanvas.mobile-nav-overlay {
  background-color: white;
  left: 0;
  right: 0;
  width: auto;
  height: 100vh;
  border: 0;
}

/* Mobile Nav Items */
/* Panel content carries the site's 20px mobile side margins */
.mobile-nav-content {
  padding-left: var(--margin-x-mobile);
  padding-right: var(--margin-x-mobile);
}

.mobile-nav-item {
  border: none;
  background: transparent;
  /* 12.5px top + bottom = 25px between headers; sides come from the content wrapper */
  padding: 12.5px 0;
  width: 100%;
  text-align: left;
}

.mobile-nav-item-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.78px;
  line-height: 1.6;
  color: var(--color-dark);
}

.mobile-nav-item .chevron-right {
  color: var(--color-dark);
}

.mobile-nav-item:hover .mobile-nav-item-title {
  color: var(--color-dark-gold);
}

/* Mobile Nav Sub-panels */
.mobile-nav-items {
  display: grid;
  overflow: hidden;
}

/* Stack panels so both are visible while sliding */
.mobile-nav-panel {
  grid-area: 1 / 1;
  transition: transform 250ms ease-out;
}

.mobile-nav-subheader {
  padding: 24px 0 8px;
  gap: 8px;
}

.mobile-nav-back {
  color: var(--color-dark);
  line-height: 0;
}

.mobile-nav-back:hover {
  color: var(--color-dark-gold);
}

.mobile-nav-section-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.78px;
  line-height: 1.6;
  color: var(--color-dark);
  text-decoration: none;
}

.mobile-nav-section-title:hover {
  color: var(--color-dark-gold);
}

.mobile-nav-subsections {
  padding: 0 0 40px 28px;
}

.mobile-nav-subsection {
  display: flex;
  flex-direction: column;
  padding-top: 16px;
}

.mobile-nav-subsection-header {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-dark);
  text-decoration: none;
  padding: 8px 0;
}

a.mobile-nav-subsection-header:hover {
  color: var(--color-dark-gold);
}

.mobile-nav-page-link {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-dark);
  text-decoration: none;
  padding: 8px 0;
}

.mobile-nav-page-link:hover {
  color: var(--color-dark-gold);
}

/* Mobile Nav Search */
.mobile-nav-search {
  border-top: 1px solid var(--color-dark-sand);
  margin-top: 20px;
}

.mobile-nav-search .search-input,
.footer-search .search-input {
  border: 1px solid var(--color-dark-sand);
  border-radius: 10px;
  background-color: white;
}

/* Footer search form (mobile footer header) */
.footer-search {
  max-width: 400px;
  width: 100%;
}

/* Mobile Nav Footer */
.mobile-footer-link {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 400;
  line-height: 2;
  color: var(--color-dark);
  text-decoration: none;
}

.mobile-footer-link:hover {
  color: var(--color-dark-gold);
}

/* Padding utility for navigation */
.px-module {
  padding-left: var(--margin-x-mobile);
  padding-right: var(--margin-x-mobile);
}

@media (min-width: 768px) {
  .px-module {
    padding-left: var(--margin-x-tablet);
    padding-right: var(--margin-x-tablet);
  }
}

@media (min-width: 992px) {
  .px-module {
    padding-left: var(--margin-x-desktop);
    padding-right: var(--margin-x-desktop);
  }
}

/* ========================================
   MEGA NAVIGATION STYLES
   ======================================== */

/* Mega nav dropdown container */
.mega-nav {
  position: absolute;
  top: 100%;
  left: 0; /* JavaScript will override this */
  transform: translateY(0px); /* JavaScript manages this */
  background-color: var(--color-white);
  padding: 20px 50px 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  z-index: 1000;
  box-shadow: var(--shadow-lg);
  width: max-content;
  min-width: 760px; /* 3 columns × 240px + 2 gaps × 20px + padding */
}

/* Show mega nav on hover - opacity/visibility only, transform handled by JS */
.nav-item-wrapper:hover .mega-nav,
.mega-nav:hover {
  opacity: 1;
  visibility: visible;
}

/* Mega nav container - holds columns */
.mega-nav-container {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Individual column in mega nav */
.mega-nav-column {
  width: 240px;
  flex-shrink: 0;
}

/* Sub-section header (bold, not clickable) */
.mega-nav-header {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-dark);
  margin-bottom: 13px;
}

/* List of pages under each sub-section */
.mega-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-nav-item {
  margin-bottom: 13px;
}

.mega-nav-item:last-child {
  margin-bottom: 0;
}

/* Page links in mega nav */
.mega-nav-link {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-dark);
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
}

.mega-nav-link:hover {
  color: var(--color-dark-gold);
}

/* External link icon in mega nav */
.mega-nav-link .external-link-icon {
  margin-left: 4px;
  font-size: 12px;
}

/* Nav item wrapper positioning for mega nav */
.nav-item-wrapper {
  position: relative;
}

/* ========================================
   SIDEBAR NAVIGATION
   ======================================== */

/* Sidebar container with transition */
.sidebar-nav {
  transition: width 500ms ease;
  overflow: hidden;
}

/* Toggle button */
.sidebar-toggle-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: left;
  justify-content: left;
  flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
  opacity: 0.7;
}

.sidebar-toggle-icon {
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

/* Sidebar content wrapper */
.sidebar-content {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Collapsed state */
.sidebar-nav[data-sidebar-state="collapsed"] {
  width: 110px !important;
}

.sidebar-nav[data-sidebar-state="collapsed"] .sidebar-content {
  opacity: 0;
  pointer-events: none;
}

/* Sidebar nav header */
.sidebar-nav-header {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-dark);
  margin-bottom: 0.3rem;
}

/* Sidebar nav list */
.sidebar-nav-list {
  padding-left: 0;
  margin-bottom: 0;
}

/* Sidebar nav links */
.sidebar-nav-link {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  color: var(--color-dark);
  background-color: transparent;
  padding: 12px 15px 14px 15px;
  border-radius: 10px;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.sidebar-nav-link:hover {
  color: var(--color-dark-gold);
}

.sidebar-nav-link.active {
  background-color: var(--color-sand);
  color: var(--color-dark);
}

/* External link icon in sidebar */
.sidebar-nav-link .external-link-icon {
  font-size: 12px;
  margin-left: 4px;
}

/* Sidebar section header (serif font) */
.sidebar-section-header {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.54px;
  color: var(--color-dark);
  padding: 20px 15px 10px 15px;
  margin: 0;
}

/* Sidebar section - groups header + items */
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* Sidebar items container */
.sidebar-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* Sidebar search input */
.sidebar-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.75rem;
  border: 1px solid var(--color-hard-shadow);
  border-radius: 10px;
  background-color: var(--color-white);
  width: 100%;
}

.sidebar-search-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-hard-shadow);
}

.sidebar-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-dark);
  outline: none;
}

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

.sidebar-search:focus-within {
  border-color: var(--color-dark-gold);
}

/* Sidebar dropdown button */
.sidebar-dropdown {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 30px 12px 10px;
  background-color: var(--color-sand);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  position: relative;
}

.sidebar-dropdown-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-dark-gold);
}

.sidebar-dropdown-text {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-dark);
}

.sidebar-dropdown:hover {
  background-color: var(--color-hard-shadow);
}

/* Keyboard focus ring: the inner select has outline: none, so show it on the wrapper */
.sidebar-dropdown:focus-within {
  outline: 2px solid var(--color-dark-gold);
  outline-offset: 2px;
}

/* Sidebar dropdown wrapper (for positioning) */
.sidebar-dropdown-wrapper {
  padding: 0 10px;
  width: 100%;
}

/* Native-select variant of the sidebar dropdown (search results sort) */
.sidebar-select-wrapper {
  margin-bottom: 0;
}

.sidebar-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-dark);
  flex-grow: 1;
}

.sidebar-select:focus {
  outline: none;
}

/* Step nav — previous / dropdown / next bar (Physicians of the Heart names,
   Bowl of Saki days). Pair with .sidebar-dropdown for the select; the select
   navigates via main.js `select[data-nav-select]`. */
.step-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.step-nav-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 46px;
  border-radius: 8px;
  background-color: var(--color-sand);
  color: var(--color-dark-gold);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.step-nav-btn:hover {
  background-color: var(--color-hard-shadow);
  color: var(--color-dark);
}

.step-nav-btn svg {
  width: 20px;
  height: 20px;
}

.step-nav-select {
  flex: 0 0 250px;
  width: 250px;
  margin: 0;
  justify-content: center;   /* icon + text sit centred as a group */
  padding-left: 12px;
  padding-right: 12px;
}

.step-nav-select .sidebar-select {
  flex-grow: 0;              /* size to the widest option, not the whole box */
  text-align: center;
  text-align-last: center;
}

/* the dropdown takes the remaining width; its longest option must not widen the page */
@media (max-width: 991.98px) {
  .step-nav-select {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .step-nav-select .sidebar-select {
    width: 100%;
    min-width: 0;
  }
}

/* Search Results Page */
.search-side-nav {
  padding-bottom: 25px;
}

/* Persistent mobile search field above the results header */
.search-mobile-form {
  padding: 20px 0;
}

.search-mobile-form .search-input {
  border: 1px solid var(--color-dark-sand) !important;
  border-radius: 10px;
  background-color: white;
}

.search-results-count {
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--color-light-text);
  margin-bottom: var(--space-8);
}

.search-results {
  max-width: 830px;
}

.search-result + .search-result {
  margin-top: var(--space-8);
}

.search-result-title {
  font-family: var(--font-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 6px;
}

.search-result-title a {
  color: var(--color-dark);
  text-decoration: none;
}

.search-result-title a:hover {
  color: var(--color-dark-gold);
}

.search-result-meta {
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--color-dark);
  margin-bottom: 10px;
}

.search-result-meta-divider {
  color: var(--color-light-text);
  margin: 0 6px;
}

.search-result-excerpt {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-dark);
  margin-bottom: 0;
}

.search-result-contact {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-dark);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-result-contact a {
  color: var(--color-dark-gold);
  text-decoration: none;
}

.search-result-contact a:hover {
  text-decoration: underline;
}

.search-results-divider {
  border-top: 1px solid var(--color-dark-sand);
  opacity: 1;
  margin-top: var(--space-10);
  margin-bottom: var(--space-8);
  max-width: 830px;
}


/* Checkbox Component */
.checkbox-component {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 7px 13px 8px 13px;
  border-radius: 10px;
  transition: background-color 0.2s ease;
  margin: 0;
}

.checkbox-component:hover {
  background-color: var(--color-sand);
}

/* Hide native checkbox */
.checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 0;
  height: 0;
}

/* Custom checkbox box - 30x30px hit area with 5px padding */
.checkbox-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  padding: 5px;
}

/* Checkbox outer border - 20x20px */
.checkbox-box::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-dark-ui-gold);
  border-radius: 3px;
  background-color: white;
  transition: all 0.2s ease;
}

/* Checkbox inner fill - 12x12px (hidden by default) */
.checkbox-inner {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 12px;
  height: 12px;
  background-color: var(--color-dark-ui-gold);
  border-radius: 2px;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s ease;
}

/* Show inner fill when checked */
.checkbox-input:checked ~ .checkbox-box .checkbox-inner {
  opacity: 1;
  transform: scale(1);
}

/* Checkbox label text */
.checkbox-label {
  font-family: var(--font-primary);
  font-size: var(--text-body-small);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--color-dark);
  transition: font-weight 0.2s ease;
}

/* Bold label when checked */
.checkbox-input:checked ~ .checkbox-label {
  font-weight: 600;
}

/* Focus state for accessibility */
.checkbox-input:focus ~ .checkbox-box::before {
  outline: 2px solid var(--color-sand);
  outline-offset: 2px;
}

/* ========================================
   PAGINATION
   ======================================== */

.pagination-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 30px 0;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 28px;
}

.pagination-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.pagination-arrow:hover {
  opacity: 0.6;
  color: var(--color-dark);
}

.pagination-arrow.disabled {
  color: var(--color-hard-shadow);
  cursor: not-allowed;
}

.pagination-arrow i,
.pagination-arrow svg {
  width: 22px;
  height: 22px;
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: 28px;
}

.pagination-page {
  display: inline-flex;
  justify-content: center;
  padding: 0 2px 6px;
  font-family: var(--font-primary);
  font-size: 17px;
  font-weight: 400;
  color: var(--color-dark);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: opacity 0.2s ease;
}

.pagination-page:hover {
  opacity: 0.6;
  color: var(--color-dark);
}

.pagination-page.active {
  font-weight: 700;
  border-bottom-color: var(--color-dark);
}

.pagination-ellipsis {
  font-family: var(--font-primary);
  font-size: 17px;
  color: var(--color-dark);
  padding-bottom: 6px;
}

.pagination-count {
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--color-light-text);
}

@media (max-width: 767px) {
  .pagination-controls,
  .pagination-pages {
    gap: 16px;
  }
}

/* ========================================
   RIVER OF GUIDANCE / LEARNING
   ======================================== */

/* Hero Banner - Image with title at top */
.rog-hero {
  position: relative;
  width: 100%;
  height: 170px;
  overflow: hidden;
  border-radius: 5px;
  margin-bottom: var(--space-10);
  background-color: var(--color-sand);
}

.rog-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.rog-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 30px;
}

.rog-hero-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 400;
  color: var(--color-dark);
  text-align: center;
  margin: 0;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .rog-hero {
    height: 332px;
    border-radius: var(--radius-xl);
  }

  .rog-hero-overlay {
    padding-top: 40px;
  }

  .rog-hero-title {
    font-size: 3rem;
  }
}

/* Classes Grid - 2 columns on desktop */
.rog-classes-grid {
  display: grid;
  /* minmax(0, …): a bare 1fr track has an `auto` minimum, so a card's
     min-content (fixed image column + unbreakable meta) can push the track
     wider than the grid on small screens */
  grid-template-columns: minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 0; /* vertical rhythm comes from the cards' 20px top/bottom padding */
}

/* 1px sand rule between cards (none after the last), drawn with ::after
   so it stays a straight full-width line. */
.rog-classes-grid .class-card {
  position: relative;
  padding: 20px 0;
  border-radius: 0;
}

.rog-classes-grid .class-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid var(--color-sand);
}

.rog-classes-grid > .class-card:last-child::after {
  content: none;
}

@media (min-width: 992px) {
  .rog-classes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }
}

/* Series landing page (spec 2026-08-30) */
.program-intro { max-width: 46rem; margin: var(--space-8) 0; }
.program-section-heading { margin: var(--space-10) 0 var(--space-6); }
.program-featured-list { display: flex; flex-direction: column; gap: var(--space-6); }
.course-featured-card {
  display: flex; gap: var(--space-6); align-items: stretch;
  border: var(--border-card); border-radius: var(--radius-lg);
  background: var(--color-white); overflow: hidden;
}
.course-featured-image { flex: 0 0 320px; }
.course-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.course-featured-body { padding: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.course-featured-status { color: var(--color-gold); font-weight: 700; margin: 0; }
.course-featured-title { margin: 0; }
.course-featured-title a { text-decoration: none; color: inherit; }
.course-featured-teachers { color: var(--color-light-text); margin: 0; }
.course-featured-summary { margin: 0 0 var(--space-2); }
@media (max-width: 799.98px) {
  .course-featured-card { flex-direction: column; }
  .course-featured-image { flex-basis: auto; max-height: 220px; }
}


/* Home promo cards (spec 2026-08-31) */
.promo-card { display: flex; flex-direction: column; align-items: flex-start; background: var(--color-white); border-radius: var(--radius-lg); padding: var(--space-4); }
.promo-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px 1px; border-radius: 5px; margin-bottom: var(--space-2); color: var(--color-dark); }
.promo-tag-event { background: var(--promo-tag-event); }
.promo-tag-class { background: var(--promo-tag-class); }
.promo-tag-book { background: var(--promo-tag-book); }
.promo-tag-series { background: var(--promo-tag-series); }
.promo-card-columns { display: flex; gap: var(--space-6); align-items: flex-start; width: 100%; }
.promo-card-left { flex: 0 0 130px; display: flex; flex-direction: column; gap: var(--space-3); }
.promo-card-media { width: 100%; aspect-ratio: 130 / 178; border-radius: 10px; overflow: hidden; background: var(--color-dark-sand); }
.promo-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-card-media-contain img { object-fit: contain; }
.promo-card-media-wide { aspect-ratio: auto; height: 160px; width: 100%; }
.promo-card-btn { display: inline-block; min-width: 130px; background: var(--color-sand); border: 0; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); text-decoration: none; color: var(--color-dark); font-weight: 600; text-align: center; }
.promo-card-left .promo-card-btn { width: 100%; }
.promo-card-btn:hover { background: var(--color-dark-sand); color: var(--color-dark); }
.promo-card-main { flex: 1; min-width: 0; }
.promo-card-kicker { font-weight: 700; font-size: 0.85rem; margin: 0 0 var(--space-1); }
.promo-card-title { margin: 0 0 var(--space-2); }
.promo-card-title a { color: inherit; text-decoration: none; }
.promo-card-person { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: 0.9rem; margin: 0 0 var(--space-2); }
.promo-card-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.promo-card-author { font-style: italic; color: var(--color-light-text); margin: 0 0 var(--space-2); }
.promo-card-copy { color: var(--color-light-text); margin: 0 0 var(--space-3); }
.promo-card-rule { margin: var(--space-3) 0; border-color: var(--color-dark-sand); opacity: 1; }
.promo-card-meta { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-2); }
.promo-card-meta i, .promo-card-meta svg { width: 18px; height: 18px; color: var(--color-light-text); flex-shrink: 0; margin-top: 2px; }
.promo-card-stacked .promo-card-body { padding-top: var(--space-3); }
/* Split View page module (2026-08-31): no side margins, 20px gap; stacks on mobile */
.module-split-view .split-grid { display: grid; gap: 20px; }
@media (min-width: 992px) {
    .split-grid.split-67-33 { grid-template-columns: 2fr 1fr; }
    .split-grid.split-50-50 { grid-template-columns: 1fr 1fr; }
    .split-grid.split-33-67 { grid-template-columns: 1fr 2fr; }
}

/* Featured strip grid: two cards + gap capped at 1060px; 60px center gap,
   narrowed to 20px between lg and xl (992-1199px). Cards hug their content. */
.featured-content .content-grid { max-width: 1060px; }
@media (min-width: 1200px) {
    .featured-content .content-grid { margin-left: auto; margin-right: auto; }
    .featured-content .content-grid .row { --bs-gutter-x: 60px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .featured-content .content-grid .row { --bs-gutter-x: 20px; }
}
@media (max-width: 575.98px) {
    .promo-card-columns { gap: var(--space-4); }
    .promo-card-left { flex-basis: 110px; }
}

/* Mobile filters — persistent search + "Advanced filters" sheet
   (shown below xl, where the sidebar is hidden; media-center pattern).
   Shared by calendar.twig (.mobile-filters/.filter-sheet*). */
.mobile-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.filter-sheet-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  font-weight: 600;
  background: var(--color-sand);
  border: 1px solid var(--color-sand);
  border-radius: 10px;
}

.filter-sheet-toggle i {
  width: 18px;
  height: 18px;
}

.filter-sheet {
  display: none;
}

.filter-sheet.is-open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: var(--color-white);
  padding: var(--space-6) var(--space-5);
  overflow-y: auto;
}

.filter-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: var(--space-2);
}

/* the persistent box is the search — hide the form's own copy in the sheet */
.filter-sheet .sidebar-search {
  display: none;
}

/* ========================================
   PERSON PAGE
   ======================================== */

/* Person page title */
.person-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  color: var(--color-dark);
}

/* Person about content on desktop has border bottom */
@media (min-width: 992px) {
  .person-about {
    padding-bottom: 25px;
  }
}

/* Person sidebar */
.person-sidebar {
  display: flex;
  flex-direction: column;
}

/* Person image */
.person-image img {
  width: 100%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
/* Phones/tablets (the stacked layout): centered, a little smaller */
@media (max-width: 991.98px) {
  .person-image img {
    display: block;
    max-width: 275px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Person section titles */
.person-section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--color-dark);
  margin-bottom: 10px;
  padding-top: 20px;
}

/* Person section spacing */
.person-section {
  margin-bottom: 0;
}

/* Person links container */
.person-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Individual person link */
.person-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background-color: var(--color-sand);
  border-radius: 8px;
  color: var(--color-dark);
  text-decoration: none;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  transition: opacity 0.2s ease;
}

.person-link:hover {
  opacity: 0.7;
  color: var(--color-dark);
}

/* Person link icon */
.person-link-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-light-text);
}

/* ========================================
   PEOPLE GRID
   ======================================== */

/* Person card link - only clickable when it's an anchor */
a.person-card {
  cursor: pointer;
}

/* Person card name */
.person-card-name {
  font-family: var(--font-primary);
  font-weight: 400;
  color: var(--color-dark);
  transition: color 0.2s ease;
}

/* Hover state - change name color to dark-gold (only for links) */
a.person-card:hover .person-card-name {
  color: var(--color-dark-gold);
}

/* ========================================
   FOOTER STYLES
   ======================================== */

/* Footer Layout */
.site-footer {
  background-color: var(--color-white);
  color: var(--color-dark);
  /* Gutterless containers let row negative margins overhang the edges — clip them */
  overflow-x: hidden;
}

.footer-cta-section {
  padding: var(--margin-top-mobile) var(--margin-x-mobile) var(--margin-top-mobile) var(--margin-x-mobile);
  padding-bottom: var(--margin-bottom-mobile);
}

.footer-nav-section {
  padding: 0 0 100px 0;
  padding-left: var(--margin-x-mobile);
  padding-right: var(--margin-x-mobile);
}

.footer-copyright {
  padding: 0 0 50px 0;
  padding-left: var(--margin-x-mobile);
  padding-right: var(--margin-x-mobile);
}

@media (min-width: 768px) {
  .footer-cta-section {
    padding: var(--margin-top-tablet) var(--margin-x-tablet);
    padding-bottom: var(--margin-bottom-tablet);
  }

  .footer-nav-section {
    padding-left: var(--margin-x-tablet);
    padding-right: var(--margin-x-tablet);
  }

  .footer-copyright {
    padding-left: var(--margin-x-tablet);
    padding-right: var(--margin-x-tablet);
  }
}

@media (min-width: 1200px) {
  .footer-cta-section {
    padding: var(--margin-top-desktop) var(--margin-x-desktop);
    padding-bottom: var(--margin-bottom-desktop);
  }

  .footer-nav-section {
    padding-left: var(--margin-x-desktop);
    padding-right: var(--margin-x-desktop);
  }

  .footer-copyright {
    padding-left: var(--margin-x-desktop);
    padding-right: var(--margin-x-desktop);
  }
}

/* Newsletter Signup Styling */
.newsletter-signup .h3 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-3);
  line-height: var(--leading-heading-345);
  color: var(--color-dark);
}

.newsletter-input {
  border: 1px solid var(--color-hard-shadow);
  border-radius: 8px;
  padding: 0.75rem;
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--color-dark);
}

.newsletter-input:focus {
  border-color: var(--color-dark-gold);
  box-shadow: none;
  outline: none;
}

.newsletter-input::placeholder {
  color: var(--color-dark-sand);
}

/* Formie Field Styling for Newsletter */
.newsletter-form .fui-field-container {
  margin-bottom: 0;
}

/* Each input's own Formie label sits above it in one style, with a maroon *
   on required fields. The instruction text and the Country field's heading
   would repeat the labels, so they're hidden */
.newsletter-form .fui-label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-primary);
  font-size: var(--text-body-default);
  color: var(--color-light-text);
}

.newsletter-form .fui-required {
  color: var(--color-maroon);
}

.newsletter-form .fui-instructions,
.newsletter-form .fui-type-address > .fui-fieldset > .fui-legend {
  display: none;
}

.newsletter-form .fui-input,
.newsletter-form .fui-select {
  border: 1px solid var(--color-hard-shadow);
  border-radius: 8px;
  padding: 0.75rem;
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--color-dark);
  width: 100%;
}

.newsletter-form .fui-input:focus,
.newsletter-form .fui-select:focus {
  border-color: var(--color-dark-gold);
  box-shadow: none;
  outline: none;
}

.newsletter-form .fui-input::placeholder {
  color: var(--color-dark-sand);
}

/* Dropdowns: room for Formie's arrow; the empty "Country" prompt reads as a placeholder */
.newsletter-form .fui-select {
  padding-right: 2.5rem;
}

.newsletter-form .fui-select:has(option[value=""]:checked) {
  color: var(--color-dark-sand);
}

.newsletter-form .fui-select option {
  color: var(--color-dark);
}

/* Formie Name field - make subfields display as row on desktop */
.newsletter-form .fui-type-name .fui-subfield-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.newsletter-form .fui-type-name .fui-subfield {
  flex: 1;
}

/* Desktop: Name fields in a row */
@media (min-width: 768px) {
  .newsletter-form .fui-type-name .fui-subfield-wrapper {
    flex-direction: row;
  }
}

/* Donate CTA Styling */
.donate-cta .h3 {
  font-family: var(--font-serif);
  font-size: var(--text-heading-3);
  line-height: var(--leading-heading-345);
  color: var(--color-dark);
}

/* CTA Button Styling */
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-gold);
  color: var(--color-dark);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--text-ui-button);
  line-height: 1;
  border: none;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  text-decoration: none !important;
}

.cta-button:hover,
.cta-button:focus {
  background-color: var(--color-dark-gold);
  color: var(--color-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(173, 143, 90, 0.3);
}

.cta-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-gold);
  color: var(--color-dark);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--text-ui-button);
  line-height: 1;
  border: none;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  text-decoration: none !important;
}

.cta-button-primary:hover,
.cta-button-primary:focus {
  background-color: var(--color-dark-gold);
  color: var(--color-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(173, 143, 90, 0.3);
}

.cta-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-sand);
  color: var(--color-dark);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--text-ui-button);
  line-height: 1;
  border: none;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  text-decoration: none !important;
}

.cta-button-secondary:hover,
.cta-button-secondary:focus {
  background-color: var(--color-hard-shadow);
  color: var(--color-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(213, 204, 189, 0.3);
}

/* Footer Navigation Flexbox Layout */
.footer-nav-desktop {
  gap: 20px;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}

.footer-nav-desktop .footer-logo-section {
  flex-shrink: 0;
  width: 200px;
  min-width: 0;
}

.footer-nav-desktop .footer-nav-columns {
  gap: 20px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.footer-nav-desktop .footer-nav-columns > div {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.footer-nav-tablet .footer-nav-columns {
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}

.footer-nav-tablet .footer-nav-columns > div {
  flex: 1 1 calc(25% - 15px);
  min-width: 0;
  max-width: calc(25% - 15px);
  overflow-wrap: break-word;
}

.footer-nav-mobile .footer-nav-columns {
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}

.footer-nav-mobile .footer-nav-columns > div {
  flex: 1 1 calc(50% - 10px);
  min-width: 0;
  max-width: calc(50% - 10px);
  overflow-wrap: break-word;
}

/* Footer Navigation Styling */
.footer-nav .footer-logo-img {
  max-width: 150px;
  height: auto;
}

.footer-nav .footer-org-name .h5 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--text-heading-5);
  line-height: var(--leading-heading-345);
  color: var(--color-dark);
  letter-spacing: 0.54px;
}

.footer-nav-title {
  font-family: var(--font-serif);
  font-size: var(--text-heading-4);
  line-height: var(--leading-heading-345);
  color: var(--color-dark);
  letter-spacing: 0.78px;
  margin-bottom: 15px;
}

.footer-nav-group-title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--text-body-caption);
  line-height: var(--leading-body-text);
  color: var(--color-dark);
  margin-bottom: 13px;
}

.footer-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav-list li {
  margin-bottom: 13px;
}

.footer-nav-list li:last-child {
  margin-bottom: 0;
}

.footer-nav-list a {
  color: var(--color-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-nav-list a:hover {
  color: var(--color-dark-gold);
}

.footer-utility-links a {
  color: var(--color-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-utility-links a:hover {
  color: var(--color-dark-gold);
}

/* Formie forms inside content modules (module-form) — design system styling */
.module-form .fui-input,
.module-form .fui-select {
  border: 1px solid var(--color-hard-shadow);
  border-radius: 8px;
  padding: 0.75rem;
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--color-dark);
  background-color: var(--color-white);
}

.module-form .fui-input:focus,
.module-form .fui-select:focus {
  border-color: var(--color-dark-gold);
  box-shadow: none;
  outline: none;
}

.module-form .fui-input::placeholder {
  color: var(--color-dark-sand);
}

.module-form .fui-label {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.module-form .fui-instructions {
  font-family: var(--font-primary);
  font-size: 14px;
  color: var(--color-light-text);
}

/* Stripe payment element container matches input treatment */
.module-form .fui-type-payment .fui-input-container {
  border-radius: 8px;
}

/* Submit button mirrors .cta-button-primary */
.module-form .fui-btn.fui-submit,
.module-form button[type="submit"].fui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background-color: var(--color-gold);
  color: var(--color-dark);
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--text-ui-button);
  line-height: 1;
  border: none;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  text-decoration: none !important;
}

.module-form .fui-btn.fui-submit:hover,
.module-form .fui-btn.fui-submit:focus,
.module-form button[type="submit"].fui-btn:hover,
.module-form button[type="submit"].fui-btn:focus {
  background-color: var(--color-dark-gold);
  color: var(--color-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(173, 143, 90, 0.3);
}

/* Formie: event intake form (calendar/submit-event — `.intake-form` via formie-form.twig formClass)
   Sits inside `.module-form` for input/submit styling; these rules only do layout. */
/* Field wrappers carry no gutter of their own, so text fields and Date
   subfields (a nested .fui-field inside a .fui-field) line up identically */
.intake-form .fui-field {
  padding: 0;
  border: 0;
}

/* Vertical rhythm: one token between rows (Formie's --fui-field-gutter is 1rem
   but the wrapper padding used to add 24px more) */
.intake-form .fui-row:not(.fui-row-empty):not(:last-child) {
  margin-bottom: var(--space-4);
}

.intake-form .fui-heading {
  margin: var(--space-6) 0 var(--space-2);
}

.intake-form .fui-page-row:first-child .fui-heading {
  margin-top: 0;
}

/* Section dividers: the following heading already carries the top space */
.intake-form .fui-type-section .fui-hr {
  margin: var(--space-2) 0;
}

.intake-form .fui-repeater-row {
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

/* Rich-text editor (Formie's Tiptap): taller by default and user-resizable.
   Formie sets min-height:10rem plus a 50px top padding for the toolbar. */
/* Formie positions the toolbar absolutely and pads the content 50px to clear
   it — which breaks as soon as the toolbar wraps to two rows (narrow columns),
   and `.module-form .fui-input` had overridden that padding anyway. Put the
   toolbar in normal flow so the content always starts below it. */
.intake-form .fui-rich-text {
  border: 1px solid var(--color-hard-shadow);
  border-radius: 8px;
  background-color: var(--color-white);
  overflow: hidden; /* clips the content's corners to the wrapper radius */
}
.intake-form .fui-rich-text-toolbar {
  position: static;
  border-bottom: 1px solid var(--color-hard-shadow);
  background-color: var(--color-sand);
}
.intake-form .fui-rich-text-content {
  min-height: 22rem;
  padding-top: 0.75rem;
  border: 0;
  border-radius: 0;
  resize: vertical;
  overflow: auto;
}
.intake-form .fui-rich-text-content:focus {
  box-shadow: none;
}

/* Sessions repeater (and every other multi-column row): stack on small screens */
@media (max-width: 768px) {
  .intake-form .fui-row {
    grid-template-columns: 1fr;
  }

  .intake-form .fui-repeater-remove-btn {
    right: var(--space-2);
  }
}

/* Footer Divider */
.footer-divider {
  border: none;
  height: 1px;
  background-color: var(--color-hard-shadow);
  margin: 0;
}

/* Tighter vertical rhythm between stacked footer CTA blocks on mobile */
@media (max-width: 991px) {
  .footer-cta-section .row {
    --bs-gutter-y: 2rem;
  }
}

/* ========================================
   USER CONTENT STYLING
   ======================================== */

/* Apply default body styling to spans without classes in user content */
.user-content span:not([class]) {
  font-family: var(--font-primary);
  font-size: var(--text-body-default);
  font-weight: 400;
  line-height: var(--leading-body-default);
  color: var(--color-dark);
}

/* ========================================
   COMMUNITY CONTACTS
   ======================================== */

/* Country Header */
.div-header {
  background-color: var(--color-hard-shadow);
  padding: 12px 24px;
  margin-bottom: var(--space-6);
  margin-top: var(--space-8);
}

.div-header:first-child {
  margin-top: 0;
}

.div-header-title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-dark);
  margin: 0;
}

/* State Title */
.state-title {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--color-dark);
  margin-bottom: var(--space-6);
  margin-top: 0;
}

/* City Cards Grid */
.city-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 992px) {
  .city-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* City Card */
.city-card {
  background-color: var(--color-sand);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
}

.city-card-title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-dark);
  margin-bottom: var(--space-3);
}

.city-card-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Contact Card */
.contact-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background-color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-dark);
  cursor: pointer;
  transition: all 0.2s ease;
}

.contact-card:hover {
  background-color: var(--color-gold);
}

.contact-card-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-dark-gold);
}

.contact-card-title {
  font-weight: 400;
}

/* Contact Modal */
.contact-modal .modal-content {
  border: none;
  border-radius: var(--radius-lg);
}

.contact-modal .modal-header {
  border-bottom: none;
  padding: var(--space-6);
}

.contact-modal .modal-title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-dark);
}

.contact-modal .modal-body {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

.contact-modal .modal-footer {
  border-top: none;
  padding: var(--space-4) var(--space-6);
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-detail-label {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-dark);
}

.contact-detail-value {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-dark);
}

.contact-detail-value a {
  color: var(--color-dark-gold);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-detail-value a:hover {
  color: var(--color-dark);
  text-decoration: underline;
}

/* Community Filter Section */
.community-filter-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

@media (min-width: 992px) {
  .community-filter-section {
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
  }
}

.community-filter-header h1 {
  font-family: var(--font-serif);
  color: var(--color-dark);
  margin-bottom: var(--space-4);
}

.community-filter-header p {
  font-family: var(--font-primary);
  color: var(--color-dark);
  margin-bottom: 0;
}

.community-filter-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.community-filter-input {
  width: 100%;
  padding: 12px 16px;
  border: var(--border-card);
  border-radius: var(--radius-sm);
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-dark);
  background-color: white;
  transition: border-color 0.2s ease;
}

.community-filter-input:focus {
  outline: none;
  border-color: var(--color-dark-gold);
}

.community-filter-checkboxes {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}

.community-filter-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
}

.community-filter-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--color-dark-gold);
}

.community-filter-checkbox label {
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-dark);
  cursor: pointer;
  margin-bottom: 0;
}

/* Map Stub */
.community-map-stub {
  width: 100%;
  height: 400px;
  background-color: var(--color-hard-shadow);
  border: var(--border-card);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-8);
}

.community-map-stub p {
  font-family: var(--font-primary);
  font-size: 16px;
  color: var(--color-light-text);
  margin: 0;
}

.event-page-description img {
  max-width: 100% !important;
  height: auto;
}
/* ============================================
   LEARNING TREE NAV (course pages)
   ============================================ */

.learning-tree {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.learning-tree-back {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 12px 15px 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.45px;
  color: var(--color-dark);
  text-decoration: none;
}

.learning-tree-back i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.learning-tree-back:hover {
  color: var(--color-dark-gold);
}

.learning-tree-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.learning-tree-item {
  display: block;
  padding: 12px 15px 14px;
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.45px;
  color: var(--color-dark);
  text-decoration: none;
}

.learning-tree-item:hover {
  background-color: var(--color-soft-shadow);
  color: var(--color-dark);
}

.learning-tree-item.is-active {
  background-color: var(--color-sand);
}

/* ============================================
   COURSE PAGE (teaser + lessons)
   ============================================ */

.course-hero {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  border-bottom: 1px solid var(--color-sand);
  padding-bottom: 25px;
}

.course-hero-copy {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  min-width: 0;
}

.course-hero-title {
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 1;
  color: var(--color-dark);
  margin: 0;
}

.course-hero-image {
  width: 233px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.course-hero-image img {
  width: 100%;
  height: auto;
  display: block;
}

.course-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.course-meta-item {
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  padding: 5px 15px;
  border-left: 1px solid var(--color-light-text);
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  color: var(--color-dark);
  white-space: nowrap;
}

.course-meta-item:first-child {
  border-left: 0;
  padding-left: 0;
}

.course-meta-item i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-dark);
}

.course-section-title {
  font-family: var(--font-serif);
  font-size: 32px;
  line-height: 1.1;
  color: var(--color-dark);
  margin: 0 0 10px;
}

.course-columns {
  display: flex;
  gap: 50px;
  align-items: flex-start;
}

.course-columns-main {
  flex: 1;
  min-width: 0;
}

.course-columns-aside {
  width: 515px;
  max-width: 100%;
  flex-shrink: 0;
}

.course-preview-card {
  background-color: var(--color-sand);
  border-radius: var(--radius-xl);
  padding: 20px;
  width: 360px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.signup-full-notice {
  background-color: var(--color-sand);
  border-radius: var(--radius-xl);
  padding: 20px;
}

.signup-full-notice p {
  font-family: var(--font-primary);
  color: var(--color-dark);
  margin: 0 0 var(--space-2);
}

.signup-full-notice p:last-child {
  margin-bottom: 0;
}

.signup-full-notice a {
  color: var(--color-gold);
}

.course-preview-card video {
  width: 100%;
  border-radius: var(--radius-sm);
  display: block;
}

.course-preview-title {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.11;
  letter-spacing: 0.78px;
  color: var(--color-dark);
  margin: 0;
}

.course-preview-description {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-light-text);
  margin: 0;
}

@media (max-width: 1199px) {
  .course-columns {
    flex-direction: column;
  }

  .course-columns-aside {
    width: 100%;
  }

  .course-hero {
    flex-direction: column-reverse;
  }

  .course-hero-title {
    font-size: var(--text-heading-1);
  }
}

/* Course content view: class accordions */

.course-accordion {
  border-bottom: 1px solid var(--color-sand);
  padding: 20px 0;
}

.course-accordion-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.course-accordion-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--color-dark);
}

.course-accordion-toggle i {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.course-accordion-toggle[aria-expanded="false"] i {
  transform: rotate(-90deg);
}

.course-meta-button {
  background-color: var(--color-sand);
  border: 0;
  border-left: 0 !important;
  border-radius: var(--radius-sm);
  padding: 10px 15px;
  cursor: pointer;
}

.course-meta-button:hover {
  background-color: var(--color-dark-sand);
}

.course-note {
  background-color: var(--color-sand);
  border-radius: var(--radius-md);
  padding: 20px;
  margin: 20px 0 0;
}

.lesson-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-top: 20px;
}

@media (max-width: 1399px) {
  .lesson-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .lesson-grid {
    grid-template-columns: 1fr;
  }
}

.lesson-card {
  background-color: var(--color-sand);
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lesson-card-thumb {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-dark-sand);
}

.lesson-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lesson-card-thumb[role="button"] {
  cursor: pointer;
}

.lesson-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lesson-card-play i {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  color: var(--color-dark);
}

.lesson-card-title {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.11;
  letter-spacing: 0.78px;
  color: var(--color-dark);
  margin: 0;
}

.lesson-card-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Class-level downloads inside a course accordion body, above the lesson grid */
.course-class-materials {
  margin: var(--space-2) 0 var(--space-4);
}

.lesson-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 5px 0;
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  color: var(--color-dark);
  text-decoration: none;
  cursor: pointer;
}

.lesson-card-chip i {
  width: 20px;
  height: 20px;
  color: var(--color-light-text);
}

.lesson-card-chip:hover {
  color: var(--color-dark-gold);
}

/* Documents list on a lesson / media card; tag chips on an archive media page */
.lesson-card-docs li {
  margin-bottom: .25rem;
}

.lesson-card-docs i {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

.media-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.lesson-card-description {
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-light-text);
}

.lesson-modal .modal-content {
  border-radius: var(--radius-md);
}

.lesson-modal-audio {
  padding: 10px 0;
}

/* Simple sand rule between page sections */
.divider-sand {
  border: 0;
  border-top: 1px solid var(--color-sand);
  opacity: 1;
  margin: 0;
}

/* Bookshop grid: 30px row gap on mobile, 50px on larger screens */
.book-grid {
  row-gap: 30px;
}

@media (min-width: 768px) {
  .book-grid {
    row-gap: 50px;
  }
}

/* Rich-text (editor-content) images
   Editor-set pixel sizes (width attributes / inline styles) act as caps only —
   images always shrink to fit their container so they never break mobile.
   Spacing is directional, from alignment and position (mirrored for the
   editor in config/ckeditor/Full.css):
     floated left  → gap on the right (text side)
     floated right → gap on the left (text side)
     every image   → gap above and below; first thing in the field → below only,
                     last thing → above only */
.editor-content img {
  max-width: 100%;
  height: auto;
}

.editor-content figure.image {
  max-width: 100%;
  margin: 0;
}

/* Centered block images (and bare inline images that fill their paragraph) */
.editor-content figure.image:not(.float-start):not(.float-end),
.editor-content p > img:not(.float-start):not(.float-end):only-child {
  display: block;
  margin: var(--space-image-gap) auto;
  text-align: center;
}
.editor-content > :first-child > img:only-child,
.editor-content figure.image:not(.float-start):not(.float-end):first-child {
  margin-top: 0;
}
.editor-content > :last-child > img:only-child,
.editor-content figure.image:not(.float-start):not(.float-end):last-child {
  margin-bottom: 0;
}

/* Floated images: gap on the inner edge (text side), plus the same
   position-based vertical gap as centered images — first in the field →
   below only, last → above only, otherwise both */
.editor-content figure.image.float-start,
.editor-content img.float-start {
  float: left;
  margin: var(--space-image-gap) var(--space-image-gap) var(--space-image-gap) 0;
}
.editor-content figure.image.float-end,
.editor-content img.float-end {
  float: right;
  margin: var(--space-image-gap) 0 var(--space-image-gap) var(--space-image-gap);
}
.editor-content figure.image.float-start:first-child,
.editor-content figure.image.float-end:first-child,
.editor-content > :first-child > img.float-start:only-child,
.editor-content > :first-child > img.float-end:only-child {
  margin-top: 0;
}
.editor-content figure.image.float-start:last-child,
.editor-content figure.image.float-end:last-child,
.editor-content > :last-child > img.float-start:only-child,
.editor-content > :last-child > img.float-end:only-child {
  margin-bottom: 0;
}

/* Editor-chosen image sizes (class from the |richText filter, one per CKEditor
   transform). Desktop caps: X-Small 100, Small / Small-Float 250, Medium 450,
   Large 800, X-Large full width. On phones X-Small shrinks to 80px and
   Small-Float floats at half width (both keep their float); Small, Medium,
   Large and X-Large become full-width blocks. */
/* Caps go on the <figure> as well as the <img>: a floated figure's shrink-to-fit
   width is taken from the image's width attribute, not its capped CSS width. */
.editor-content .img-size-xsmall,
.editor-content figure.image:has(> .img-size-xsmall) {
  max-width: min(100%, 100px);
}
.editor-content .img-size-small,
.editor-content .img-size-smallfloat,
.editor-content figure.image:has(> .img-size-small),
.editor-content figure.image:has(> .img-size-smallfloat) {
  max-width: min(100%, 250px);
}
.editor-content .img-size-medium,
.editor-content figure.image:has(> .img-size-medium) {
  max-width: min(100%, 450px);
}
.editor-content .img-size-large,
.editor-content figure.image:has(> .img-size-large) {
  max-width: min(100%, 800px);
}
.editor-content .img-size-xl {
  width: 100%;
  max-width: 100%;
}
@media (max-width: 767.98px) {
  .editor-content figure.image:has(> .img-size-small),
  .editor-content figure.image:has(> .img-size-medium),
  .editor-content figure.image:has(> .img-size-large),
  .editor-content figure.image:has(> .img-size-xl) {
    float: none !important; /* Bootstrap's .float-start/.float-end are !important */
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .editor-content .img-size-small,
  .editor-content .img-size-medium,
  .editor-content .img-size-large,
  .editor-content .img-size-xl {
    width: 100%;
    max-width: 100%;
  }
  .editor-content .img-size-xsmall,
  .editor-content figure.image:has(> .img-size-xsmall) {
    max-width: min(100%, 80px);
  }
  .editor-content figure.image.float-start:has(> .img-size-smallfloat),
  .editor-content figure.image.float-end:has(> .img-size-smallfloat),
  .editor-content img.img-size-smallfloat.float-start,
  .editor-content img.img-size-smallfloat.float-end {
    max-width: 50%;
  }
  .editor-content figure.image:has(> .img-size-smallfloat) > img {
    width: 100%;
  }
}

/* Plyr (site-wide audio/video player) — brand colours; markup gets .js-plyr, main.js wraps it */
:root {
  --plyr-color-main: var(--color-dark-gold);
  --plyr-audio-controls-background: var(--color-sand);
  --plyr-audio-control-color: var(--color-dark);
  --plyr-font-family: var(--font-primary);
  --plyr-control-radius: var(--radius-md);
}
.plyr { border-radius: var(--radius-md); }
.plyr--video { border-radius: var(--radius-lg); overflow: hidden; }
.plyr--audio .plyr__controls { border-radius: var(--radius-md); }
/* Under 800px: mute/unmute toggle only, no volume slider (audio and video) */
@media (max-width: 799.98px) {
  .plyr__volume input[data-plyr="volume"] { display: none; }
  .plyr__volume { min-width: 0; width: auto; max-width: none; }
}

/* Rich-text blocks inserted from the editor's + menu (Jotform / Video / Audio):
   same vertical rhythm as images */
.editor-content .editor-embed {
  margin: var(--space-image-gap) 0;
  max-width: 100%;
}
.editor-content .editor-embed:first-child { margin-top: 0; }
.editor-content .editor-embed:last-child { margin-bottom: 0; }
.editor-content .editor-embed-video video,
.editor-content .editor-embed-video img {
  display: block;
  width: 100%;
  max-width: 800px;
  height: auto;
}
.editor-content .editor-embed-audio {
  max-width: 500px;
}
.editor-content .editor-embed-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-dark-gold);
  text-decoration: none;
  font-weight: 500;
}
.editor-content .editor-embed-link-label { display: block; margin-top: var(--space-2); }
.editor-content .editor-embed-link i { width: 20px; height: 20px; }

.editor-content figcaption {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-light-text);
  padding: var(--space-2) 0 0;
  text-align: left;
}

/* Nav headers act as links to their section's first page */
.mega-nav-header-link,
.footer-nav-title a,
.footer-nav-group-title a {
  color: inherit;
  text-decoration: none;
}

.mega-nav-header-link:hover,
.footer-nav-title a:hover,
.footer-nav-group-title a:hover {
  color: var(--color-dark-gold);
}

/* Pagination as buttons (JS-driven pagers, e.g. calendar list view) */
button.pagination-page,
button.pagination-arrow {
  background: none;
  border: 0;
  cursor: pointer;
}

/* ==========================================================================
   Schedule: viewer-local time
   ========================================================================== */
/* The "(… your time)" note main.js localizeTimes() appends to hybrid schedule lines (spec 2026-09-03 §11) */
.time-local {
  color: var(--color-light-text);
  font-weight: 400;
  white-space: nowrap;
}