/* Google Fonts are loaded conditionally via Joomla's Web Asset Manager in index.php.
   Toggle: Admin → System → Site Template Styles → tmpl_sparklabs → Branding → Load Google Fonts */

/* ============================================================
   Community Makerspace — Industrial Modern Dark Theme
   template.css
   ============================================================

   TABLE OF CONTENTS
   ─────────────────
    1. Design Tokens (CSS Custom Properties)
    2. Reset & Base
    3. Typography
    4. Buttons
    5. Forms
    6. Layout
    7. Header & Navigation
    8. Hero Section
    9. Inner Page Layout
   10. Feature Cards
   11. Pricing Cards
   12. Events Section
   13. Footer
   14. Sidebar
   15. Modules
   16. Utility
   17. Responsive
   18. Print
   19. Home — What We Offer
   20. Home — Mission Split
   21. Home — CTA Strip
   22. Home — Get Involved
   23. Responsive — Homepage New Sections
   24. Accessibility Improvements (WCAG 2.1 AA)
   25. Mobile Fixes — 2026-03-07
   28. Error Page (404 / 403 / 500)
   29. com_contact — Contact Page
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Colours */
  --color-bg-primary:    #18181b;   /* zinc-900 */
  --color-bg-secondary:  #27272a;   /* zinc-800 */
  --color-bg-tertiary:   #3f3f46;   /* zinc-700 */
  --color-bg-card:       #1f1f23;
  --color-surface:       #2c2c30;

  --color-orange:        #f97316;   /* orange-500 */
  --color-orange-light:  #fb923c;   /* orange-400 */
  --color-orange-dark:   #ea580c;   /* orange-600 */
  --color-orange-glow:   rgba(249, 115, 22, 0.15);

  --color-text-primary:  #fafafa;   /* zinc-50 */
  --color-text-secondary:#a1a1aa;   /* zinc-400 */
  --color-text-muted:    #71717a;   /* zinc-500 */
  --color-text-link:     #fb923c;

  --color-border:        #3f3f46;   /* zinc-700 */
  --color-border-light:  #52525b;   /* zinc-600 */

  --color-success:       #22c55e;
  --color-error:         #ef4444;

  /* Typography */
  --font-sans:   'DM Sans', system-ui, -apple-system, sans-serif;
  --font-display:'Barlow Condensed', 'DM Sans', sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   900;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Borders */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.5);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.6);
  --shadow-orange: 0 0 30px rgba(249, 115, 22, 0.3);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* Layout */
  --max-width:         1280px;
  --section-padding-y: var(--space-20);
  --section-padding-x: var(--space-6);
  --header-height:     72px;
  --sidebar-width:     280px;
}

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

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

body.mkr-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Focus ring — applied to all keyboard-focusable elements */
*:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-orange);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  z-index: 10000;
  font-weight: 600;
  border-radius: 0 0 var(--radius-md) 0;
  transition: top var(--transition-fast);
}
.skip-link:focus {
  top: 0;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--color-text-primary);
}
h1 { font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl)); }
h2 { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl), 2vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-orange-light); text-decoration: underline; }

ul, ol { padding-left: 1.5rem; }
li { color: var(--color-text-secondary); margin-bottom: var(--space-2); }

strong, b { color: var(--color-text-primary); font-weight: var(--weight-semibold); }
em, i { font-style: italic; }
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
}
pre {
  font-family: var(--font-mono);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
}

/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.625rem 1.25rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--color-orange);
  color: #fff;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 0 var(--color-orange-glow);
}
.btn-primary:hover {
  background: var(--color-orange-dark);
  border-color: var(--color-orange-dark);
  box-shadow: var(--shadow-orange);
  color: #fff;
}

.btn-outline {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-light);
}
.btn-outline:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
  background: var(--color-orange-glow);
}

.btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: var(--text-base);
}

/* ============================================================
   5. FORMS
   ============================================================ */
.form-group { margin-bottom: var(--space-4); }
.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}
.form-control {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}
.form-control::placeholder { color: var(--color-text-muted); }
.form-control:focus {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.18);
  outline: none;
}

.page-highlight-list li {
  position: relative;
  padding-left: 1.1rem;
}

/* ============================================================
   6. LAYOUT
   ============================================================ */
.section-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-padding-y) var(--section-padding-x);
}
.section {
  position: relative;
}
.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}
.section-label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: var(--space-3);
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: var(--weight-black);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}
.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 640px;
  margin: 0 auto;
}
.grid {
  display: grid;
  gap: var(--space-6);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   7. HEADER & NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(24, 24, 27, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
  display: flex;
  align-items: center;
}
.header-inner {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--section-padding-x);
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.site-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.brand-link:hover { text-decoration: none; }
.site-logo {
  display: block;
  height: 40px;
  width: auto;
}
.brand-text {
  display: flex;
  flex-direction: column;
}
.brand-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
}
.brand-tagline {
  font-size: var(--text-xs);
  color: var(--color-text-secondary); /* upgraded from muted for WCAG AA contrast */
  line-height: 1.2;
}

/* ── Primary Navigation ── */
.primary-nav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.primary-nav ul,
.primary-nav .nav,
.primary-nav .mod-menu,
.primary-nav .mod-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.primary-nav ul li,
.primary-nav .nav-item {
  position: relative;
}
.primary-nav ul li a,
.primary-nav .nav-item a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: color var(--transition-fast), background var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
}
.primary-nav ul li a:hover,
.primary-nav .nav-item a:hover,
.primary-nav ul li.active > a,
.primary-nav .nav-item.current > a,
.primary-nav .nav-item.active > a {
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
}
.mkr-nav a:focus-visible {
  color: var(--color-orange-light);
  background: var(--color-orange-glow);
}
.primary-nav ul li a[aria-current="page"],
.primary-nav .nav-item a[aria-current="page"] {
  color: var(--color-orange);
}

/* Dropdown support */
.primary-nav ul ul,
.primary-nav .nav-item > ul {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  padding: var(--space-2) 0;
  flex-direction: column;
  z-index: 100;
}
.primary-nav ul ul li a,
.primary-nav .nav-item > ul li a {
  padding: var(--space-2) var(--space-4);
  border-radius: 0;
}
.primary-nav ul li:hover > ul,
.primary-nav ul li:focus-within > ul,
.primary-nav .nav-item:hover > ul {
  display: flex;
}
.primary-nav ul li:focus-within > ul {
  display: flex;
}
.primary-nav .nav-item:focus-within > ul {
  display: flex;
}
.primary-nav ul li:focus-within > ul {
  display: flex;
}
.primary-nav .nav-item:hover > ul,
.primary-nav ul li:hover > ul {
  display: flex;
}
.primary-nav .nav-item > ul,
.primary-nav .nav-item > ul li a {
  flex-direction: column;
}
.primary-nav .nav-item:focus-within > ul,
.primary-nav ul li:focus-within > ul {
  display: flex;
}
.primary-nav ul li:focus-within > ul {
  display: flex;
}
.primary-nav .nav-item:focus-within .nav-item > ul,
.primary-nav ul li:focus-within li > ul {
  display: none;
}
.primary-nav ul li li:hover > ul,
.primary-nav ul li li:focus-within > ul {
  display: flex;
}
.primary-nav ul li:hover > ul {
  display: flex;
}
.primary-nav ul li:focus-within > ul {
  display: flex;
}
.primary-nav ul.mod-list li:hover > ul,
.primary-nav ul.mod-list li:focus-within > ul {
  display: flex;
}
.primary-nav ul li:hover > ul,
.primary-nav .primary-nav ul li:focus-within > ul {
  display: flex;
}
.primary-nav ul li ul li {
  width: 100%;
}
.primary-nav .nav-item:hover > ul,
.primary-nav .nav-item:focus-within > ul {
  display: flex !important;
}

/* ── Mobile Menu Toggle ── */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
}
.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-text-primary);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   8. HERO SECTION
   ============================================================ */
.hero-section {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24) var(--section-padding-x);
  overflow: hidden;
  text-align: center;
}
.hero-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-noise {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
.hero-glow-left {
  position: absolute;
  top: 20%;
  left: -10%;
  width: 50%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(249, 115, 22, 0.08) 0%, transparent 70%);
}
.hero-glow-right {
  position: absolute;
  bottom: 10%;
  right: -10%;
  width: 40%;
  height: 50%;
  background: radial-gradient(ellipse, rgba(249, 115, 22, 0.05) 0%, transparent 70%);
}
.hero-grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(249, 115, 22, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249, 115, 22, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}
.hero-content {
  position: relative;
  max-width: 900px;
  width: 100%;
  z-index: 1;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
}
.hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-orange);
  box-shadow: 0 0 8px var(--color-orange);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(0.85); }
}
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-5xl), 10vw, var(--text-7xl));
  font-weight: var(--weight-black);
  line-height: 1.0;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
}
.hero-hl-accent {
  color: var(--color-orange);
  display: block;
}
.hero-subtext {
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
  color: var(--color-text-secondary);
  max-width: 580px;
  margin: 0 auto var(--space-8);
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}
.btn-icon { flex-shrink: 0; }

/* Hero stats */
.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}
.hero-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  color: var(--color-text-primary);
  line-height: 1;
}
.hero-stat-unit {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-left: var(--space-1);
}
.hero-stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hero-stat-divider {
  width: 1px;
  height: 40px;
  background: var(--color-border);
}

/* ============================================================
   9. INNER PAGE LAYOUT
   ============================================================ */
.page-content-section {
  padding-top: var(--space-16);
}
.page-content-grid { align-items: start; }
.page-bottom-cta {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Page editor content: render article HTML nicely */
.page-editor-content h2,
.page-editor-content h3,
.page-editor-content h4 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
}
.page-editor-content h2 { font-size: var(--text-2xl); }
.page-editor-content h3 { font-size: var(--text-xl); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-2); }
.page-editor-content h4 { font-size: var(--text-lg); }
.page-editor-content p  { margin-bottom: var(--space-4); }
.page-editor-content ul,
.page-editor-content ol {
  margin-bottom: var(--space-4);
  padding-left: var(--space-6);
}
.page-editor-content li { margin-bottom: var(--space-2); }
.page-editor-content a  { color: var(--color-text-link); }
.page-editor-content a:hover { color: var(--color-orange-light); }
.page-editor-content strong { color: var(--color-text-primary); }
.page-editor-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
}
.page-editor-content th,
.page-editor-content td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  text-align: left;
}
.page-editor-content th {
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-weight: var(--weight-semibold);
}
.page-editor-content blockquote {
  border-left: 3px solid var(--color-orange);
  padding-left: var(--space-4);
  color: var(--color-text-secondary);
  font-style: italic;
  margin: var(--space-6) 0;
}

/* ============================================================
   10. FEATURE CARDS
   ============================================================ */
.feature-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}
.feature-card:hover {
  border-color: var(--color-orange);
  box-shadow: var(--shadow-orange);
}
.feature-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  color: var(--color-orange);
}
.feature-card-icon svg { width: 24px; height: 24px; }
.feature-card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.feature-card-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.feature-card-link {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-orange);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.feature-card-link:hover { color: var(--color-orange-light); }

/* Sidebar card */
.page-info-card { height: auto; }
.page-action-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ============================================================
   11. PRICING CARDS
   ============================================================ */
.pricing-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.pricing-card:hover {
  border-color: var(--color-orange);
  box-shadow: var(--shadow-orange);
}
.pricing-card--featured {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 1px var(--color-orange), var(--shadow-orange);
  position: relative;
}
.pricing-card--featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-orange);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
}
.pricing-tier-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-orange);
}
.pricing-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.pricing-amount {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  color: var(--color-text-primary);
  line-height: 1;
}
.pricing-period {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.pricing-description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-feature-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: var(--color-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pricing-feature-check svg { width: 10px; height: 10px; color: #fff; }

/* ============================================================
   12. EVENTS SECTION
   ============================================================ */
.events-section { background: var(--color-bg-secondary); }
.event-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  transition: border-color var(--transition-normal);
}
.event-card:hover { border-color: var(--color-orange); }
.event-date-badge {
  flex-shrink: 0;
  width: 56px;
  text-align: center;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
}
.event-date-month {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-orange);
}
.event-date-day {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  color: var(--color-text-primary);
  line-height: 1;
}
.event-info { flex: 1; }
.event-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.event-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.event-description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ============================================================
   13. NEWSLETTER SECTION
   Full-width signup band between main content and footer.
   Badge + headline are editable via AcyMailing module "Intro
   text" field (Module 120, Advanced tab) — no file edits needed.
   ============================================================ */

/* ── Section shell ── */
.newsletter-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1c1008 0%, var(--color-bg-primary) 45%, #0c1a10 100%);
  border-top: 1px solid rgba(249, 115, 22, 0.35);
  border-bottom: 1px solid rgba(249, 115, 22, 0.15);
  padding: var(--space-16) 0;
}

/* Orange radial glow — left atmospheric light */
.newsletter-section::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -5%;
  width: 55%;
  height: 200%;
  background: radial-gradient(ellipse at center,
    rgba(249, 115, 22, 0.14) 0%,
    rgba(249, 115, 22, 0.04) 40%,
    transparent 65%);
  pointer-events: none;
}

/* Glowing top border bar */
.newsletter-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(249, 115, 22, 0.6) 25%,
    #f97316 50%,
    rgba(249, 115, 22, 0.6) 75%,
    transparent 100%
  );
}

/* ── Inner layout: centered column ── */
.newsletter-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* AcyMailing intro text wrapper — contains badge + headline.
   Rendered by AcyMailing as .acym_introtext (no underscore).
   Sits inside <form> but is styled to appear above the form card. */
.newsletter-section .acym_introtext {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  width: 100%;
  padding-bottom: var(--space-5);
}

/* Badge — editable via AcyMailing module "Intro text" field */
.newsletter-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-orange);
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.85rem;
}

/* Headline — editable via AcyMailing module "Intro text" field */
.newsletter-headline {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: var(--color-text-primary);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
}

/* ── Form outer wrapper — transparent flex column ── */
.newsletter-section form {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
}

/* ── Form card — wraps only the input fields and button ── */
.newsletter-section .acym_form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(249, 115, 22, 0.18);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow:
    0 0 40px rgba(249, 115, 22, 0.07),
    0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Input field labels */
.newsletter-section label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.3rem;
}

/* Text & email inputs */
.newsletter-section input[type="email"],
.newsletter-section input[type="text"] {
  width: 100%;
  padding: 0.8rem var(--space-4);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.newsletter-section input[type="email"]::placeholder,
.newsletter-section input[type="text"]::placeholder {
  color: var(--color-text-muted);
}
.newsletter-section input[type="email"]:focus,
.newsletter-section input[type="text"]:focus {
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2);
}

/* Submit button */
.newsletter-section input[type="submit"],
.newsletter-section button[type="submit"],
.newsletter-section .acym_submit_sub {
  width: 100%;
  padding: 0.9rem var(--space-5);
  background: var(--color-orange);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  margin-top: var(--space-1);
}
.newsletter-section input[type="submit"]:hover,
.newsletter-section button[type="submit"]:hover,
.newsletter-section .acym_submit_sub:hover {
  background: var(--color-orange-dark);
  box-shadow: 0 0 24px rgba(249, 115, 22, 0.45);
  transform: translateY(-1px);
}

/* AcyMailing privacy / small print */
.newsletter-section small,
.newsletter-section .acym_optin {
  display: block;
  font-size: 0.73rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.5;
  margin-top: var(--space-1);
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .newsletter-section {
    padding: var(--space-12) 0;
  }
  .newsletter-section form {
    padding: var(--space-6);
  }
}

/* ============================================================
   14. FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding: var(--space-16) var(--section-padding-x) var(--space-8);
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}
.footer-brand-col { display: flex; flex-direction: column; gap: var(--space-4); }
.footer-logo { height: 36px; width: auto; }
.footer-logo-wrap { display: flex; align-items: center; gap: var(--space-3); }
.footer-brand-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  font-size: var(--text-lg);
}
.footer-org-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.footer-social {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.footer-social-link {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.footer-social-link:hover {
  color: var(--color-orange);
  border-color: var(--color-orange);
  background: var(--color-orange-glow);
}
.footer-social-link svg { width: 18px; height: 18px; }
.footer-col-heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-links li a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary); /* upgraded from muted for WCAG AA contrast */
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-links li a:hover { color: var(--color-text-primary); }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.footer-contact-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--color-orange);
  margin-top: 3px;
}
.footer-contact-text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary); /* upgraded from muted for WCAG AA contrast */
  line-height: 1.5;
}
.footer-contact-text a {
  color: var(--color-text-link);
  text-decoration: none;
}
.footer-contact-text a:hover { color: var(--color-orange-light); text-decoration: underline; }
.footer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-copyright {
  font-size: var(--text-sm);
  color: var(--color-text-secondary); /* upgraded from muted for WCAG AA contrast */
}
.footer-bottom-links {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.footer-bottom-links a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary); /* upgraded from muted for WCAG AA contrast */
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-bottom-links a:hover { color: var(--color-text-primary); }
.footer-nonprofit-note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-secondary); /* upgraded from muted for WCAG AA contrast */
  line-height: 1.5;
}

/* ============================================================
   14. SIDEBAR
   ============================================================ */
.has-sidebar .main-content-area {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--space-8);
  align-items: start;
}
.sidebar-area { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
.sidebar-module {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.sidebar-module-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================
   15. MODULES
   ============================================================ */
/* Login module */
.mod-login {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mod-login .form-group { margin-bottom: 0; }
.input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.input-group .form-control {
  border: none;
  border-radius: 0;
  flex: 1;
}
.input-group .form-control:focus {
  box-shadow: none;
  outline: none;
}
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  border-left: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.input-group:focus-within {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.18);
}
.input-password-toggle {
  background: var(--color-bg-secondary);
  border: none;
  border-left: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 0 var(--space-3);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.input-password-toggle:hover { color: var(--color-text-primary); }
.mod-login__submit { width: 100%; }
.mod-login__forgot { text-align: center; }
.mod-login__forgot a { font-size: var(--text-sm); color: var(--color-text-muted); }
.mod-login__forgot a:hover { color: var(--color-text-primary); }
.remember-me-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.form-check { display: flex; align-items: center; gap: var(--space-2); }
.form-check-input { margin: 0; accent-color: var(--color-orange); }
.form-check-label { font-size: var(--text-sm); color: var(--color-text-secondary); }
.form-check-input:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

/* Alerts */
.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  border: 1px solid transparent;
}
.alert-warning { background: rgba(249,115,22,0.1); border-color: var(--color-orange); color: var(--color-text-primary); }
.alert-danger  { background: rgba(239,68,68,0.1);  border-color: var(--color-error);  color: var(--color-text-primary); }
.alert-success { background: rgba(34,197,94,0.1);  border-color: var(--color-success); color: var(--color-text-primary); }

/* ============================================================
   16. UTILITY
   ============================================================ */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.text-center { text-align: center; }
.text-muted   { color: var(--color-text-muted); }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.w-100 { width: 100%; }
.fw-bold { font-weight: var(--weight-bold); }
.small { font-size: var(--text-sm); }
.row { display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--space-3)); }
.col-12 { width: 100%; padding: 0 var(--space-3); }
.g-4 { gap: var(--space-4); }

@media (min-width: 992px) {
  .col-lg-8 { width: 66.6667%; }
  .col-lg-4 { width: 33.3333%; }
}

/* ============================================================
   17. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --section-padding-y: var(--space-12);
    --section-padding-x: var(--space-4);
  }
  .mobile-menu-toggle { display: flex; }
  .primary-nav {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4);
    z-index: 999;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul,
  .primary-nav .nav,
  .primary-nav .mod-menu,
  .primary-nav .mod-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }
  .primary-nav ul li a,
  .primary-nav .nav-item a {
    padding: var(--space-3) var(--space-4);
  }
  .hero-section { min-height: 80vh; padding-top: var(--space-16); }
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .has-sidebar .main-content-area { grid-template-columns: 1fr; }
  .sidebar-area { position: static; }
}

@media (max-width: 480px) {
  :root {
    --section-padding-x: var(--space-4);
  }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-stats { gap: var(--space-4); }
}

/* ============================================================
   18. PRINT STYLES
   ============================================================ */
@media print {
  .site-header,
  .site-footer,
  .mobile-menu-toggle,
  .hero-section,
  .features-section,
  .pricing-section,
  .events-section {
    display: none !important;
  }
  .main-content-area {
    max-width: 100% !important;
    padding: 0 !important;
  }
  body.mkr-body {
    background: #fff !important;
    color: #000 !important;
  }
  .main-content-area h1,
  .main-content-area h2,
  .main-content-area h3 { color: #000 !important; }
  .main-content-area p,
  .main-content-area li  { color: #333 !important; }
  a { color: #000 !important; text-decoration: underline !important; }
}

/* ============================================================
   19. HOME — WHAT WE OFFER
   ============================================================ */
.home-offer-section {
  background: var(--color-bg-secondary);
}
.home-offer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  gap: var(--space-4);
}
.home-offer-all-link {
  flex-shrink: 0;
  align-self: flex-end;
}
.home-offer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.home-offer-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}
.home-offer-card:hover {
  border-color: var(--color-orange);
  box-shadow: var(--shadow-orange);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.home-offer-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  color: var(--color-orange);
}
.home-offer-card__icon svg { width: 22px; height: 22px; }
.home-offer-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.home-offer-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.55;
  flex: 1;
  margin-bottom: var(--space-4);
}
.home-offer-card__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-orange);
  align-self: flex-start;
}
.home-offer-card:hover .home-offer-card__link {
  color: var(--color-orange-light);
}

/* ============================================================
   20. HOME — MISSION SPLIT
   ============================================================ */
.home-mission-section {
  background: var(--color-bg-primary);
}
.home-mission-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.home-mission-text {
  display: flex;
  flex-direction: column;
}
.home-mission-body {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}
.home-mission-values {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.home-value-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.home-value-icon {
  color: var(--color-orange);
  font-size: var(--text-sm);
  margin-top: 3px;
  flex-shrink: 0;
}
.home-value-item strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.home-value-item span {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.home-mission-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
}
.home-mission-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.home-mission-card--top  { transform: translateX(-var(--space-4)); }
.home-mission-card--mid  { transform: translateX(var(--space-4)); }
.home-mission-card--bot  { transform: translateX(-var(--space-2)); }
.home-mission-card__icon {
  width: 40px;
  height: 40px;
  background: var(--color-orange-glow);
  border: 1px solid var(--color-orange);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-orange);
  flex-shrink: 0;
}
.home-mission-card__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  color: var(--color-text-primary);
  line-height: 1;
}
.home-mission-card__label {
  font-size: var(--text-xs);
  color: var(--color-text-secondary); /* upgraded from muted for WCAG AA contrast */
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================================
   21. HOME — CTA STRIP
   ============================================================ */
.home-cta-strip {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.home-cta-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.home-cta-strip__headline {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  font-weight: var(--weight-black);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.home-cta-strip__sub {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}
.home-cta-strip__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* ============================================================
   22. HOME — GET INVOLVED
   ============================================================ */
.home-involve-section {
  background: var(--color-bg-primary);
}
.home-involve-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.home-involve-modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.home-involve-card {
  height: 100%;
}

/* ============================================================
   23. RESPONSIVE — HOMEPAGE NEW SECTIONS
   ============================================================ */
@media (max-width: 1024px) {
  .home-offer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .home-mission-split {
    grid-template-columns: 1fr;
  }
  .home-mission-visual {
    display: none;
  }
  .home-involve-grid {
    grid-template-columns: 1fr;
  }
  .home-involve-modules {
    grid-template-columns: 1fr;
  }
  .home-cta-strip__inner {
    text-align: center;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .home-offer-grid {
    grid-template-columns: 1fr;
  }
  .home-offer-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-stats {
    gap: 1.5rem;
  }
  .hero-stat-divider {
    display: none;
  }
}

/* ============================================================
   24. ACCESSIBILITY IMPROVEMENTS (WCAG 2.1 AA)
   Added: 2026-03-06
   ============================================================ */
.btn-primary {
  background: #c2410c;
  border-color: #c2410c;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: #9a3412;
  border-color: #9a3412;
}
.form-control:focus,
.form-control:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 0px;
  box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.25);
}
.btn.input-password-toggle:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}
.nonprofit-notice {
  background: #fff7ed;
  border-left: 4px solid #c2410c;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 6px 6px 0;
  color: #1c1917;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.skip-link:focus-visible {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.home-offer-card:focus-visible,
.feature-card-link:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

/* ============================================================
   25. MOBILE FIXES — 2026-03-07
   ============================================================ */

/* Footer credit visibility is now controlled by the PHP template param
   show_joomla_credit — no CSS override needed here. */

/* Inner page mobile padding is handled by .page-content-wrap
   in section 27 — no override needed here. */

/* On narrow mobile the 4 hero stats wrap 3+1.
   Force a clean 2x2 grid at 540px and below. */
@media (max-width: 540px) {
  .hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    justify-items: center;
  }
  .hero-stat-divider {
    display: none;
  }
}

/* cache-bust: 2026-03-07-mobile */

/* ============================================================
   26. INNER PAGE — CENTER CONTENT & HIDE BROKEN PLACEHOLDERS
   Added: 2026-03-09
   ============================================================ */

/* On no-sidebar pages at desktop, center the content card instead of
   leaving it hard-left with an empty right column. */
@media (min-width: 992px) {
  body.no-sidebar .page-content-grid {
    justify-content: center;
  }
}

/* Hide broken hero-image placeholders from deprecated source.unsplash CDN. */
.page-hero-image-wrap:has(img[src*="source.unsplash"]) {
  display: none;
}
img[src*="source.unsplash.com"],
img[src*="source.unsplash"] {
  display: none;
}

/* cache-bust: 2026-03-09-centering */

/* ============================================================
   26. MISSION SECTION — CTA ROW FIX
   The .home-mission-text container is flex-column, which
   stretches any block children to full width. Wrap buttons in
   .mission-cta-row to restore inline/auto sizing.
   ============================================================ */
.mission-cta-row {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-8);
}

/* Offer header: headline sits beside the "See all" link — no extra bottom gap */
.home-offer-header .section-title {
  margin-bottom: 0;
}

/* Involve modules fallback cards: link/button spacing without inline styles */
.home-involve-modules .feature-card-link,
.home-involve-modules .feature-card .btn {
  margin-top: var(--space-4);
}

/* ============================================================
   27. JOOMLA COMPONENT OUTPUT — INNER PAGE STYLES
   Added: 2026-03-15
   Targets the output of <jdoc:include type="component" />
   on inner pages (articles, com_contact, etc.)
   ============================================================ */

/* ── Inner page main wrapper ─────────────────────────────────
   <main> wraps .page-content-wrap on inner pages (no class).
   Ensure a minimum height so short-content pages don't look
   broken and the footer doesn't float up. */
body.is-inner-page main {
  min-height: 60vh;
  background-color: var(--color-bg-primary);
}

/* ── Inner page content wrapper ─────────────────────────────
   .page-content-wrap is the ONLY structural container for all
   inner page output (<jdoc:include type="component" />).
   Width, centering, and padding are defined HERE — not on
   .section-container — so every inner page is correctly
   centered regardless of what Joomla renders inside it.
   No per-component CSS patches required. */
.page-content-wrap {
  max-width: 960px;
  margin:    0 auto;
  padding:   var(--space-10) var(--section-padding-x) var(--space-20);
  width:     100%;
}

/* ── Breadcrumb (mod_breadcrumbs) ────────────────────────────
   Joomla outputs an <ol> with Bootstrap utility class names
   (px-3, py-2, breadcrumb). Bootstrap isn't loaded here, so
   we reset and re-style it to match the template. */
.mod-breadcrumbs__wrapper {
  margin-bottom: var(--space-8);
}

.mod-breadcrumbs {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    center;
  list-style:     none;
  padding:        0;
  margin:         0;
  font-size:      var(--text-sm);
  color:          var(--color-text-muted);
}

/* Hide the "You are here:" label item — redundant on-screen */
.mod-breadcrumbs li:first-child {
  display: none;
}

/* Chevron separator between items */
.mod-breadcrumbs li + li::before {
  content:  "›";
  margin:   0 var(--space-2);
  color:    var(--color-text-muted);
}

/* Breadcrumb links */
.mod-breadcrumbs a {
  color:           var(--color-text-link);
  text-decoration: none;
  transition:      color var(--transition-fast);
}
.mod-breadcrumbs a:hover {
  color:           var(--color-orange-light);
  text-decoration: underline;
}

/* Current page crumb (last item, plain text) */
.mod-breadcrumbs li:last-child,
.mod-breadcrumbs .active {
  color: var(--color-text-secondary);
}

/* ── Article page-header (h1 block) ──────────────────────────
   Joomla wraps the article title in <div class="page-header">.
   Add a divider and tighten the h1 size for inner pages so
   it's proportional alongside body text. */
.com-content-article .page-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.com-content-article .page-header h1 {
  font-family:   var(--font-display);
  font-size:     clamp(2rem, 5vw, var(--text-5xl));
  font-weight:   var(--weight-bold);
  color:         var(--color-text-primary);
  margin:        0;
  line-height:   1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* ── Article metadata — hide ─────────────────────────────────
   Joomla renders a <dl class="article-info"> containing
   "Details" (dt) and "Category: Uncategorised" (dd) directly
   below the h1. Hide it — this template doesn't surface
   article admin metadata to end users. */
.com-content-article .article-info {
  display: none;
}

/* ── Article body typography ─────────────────────────────────
   Target Joomla 6's .com-content-article__body wrapper which
   contains all article content (p, h2, ul, etc.). */
.com-content-article__body {
  color:      var(--color-text-secondary);
  font-size:  var(--text-base);
  line-height: 1.75;
  /* max-width now comes from the .com-content-article container (960px) */
}

.com-content-article__body p {
  margin-top:    0;
  margin-bottom: var(--space-5);
}

.com-content-article__body h2 {
  font-family:   var(--font-display);
  font-size:     var(--text-2xl);
  font-weight:   var(--weight-bold);
  color:         var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-top:    var(--space-10);
  margin-bottom: var(--space-4);
  line-height:   1.2;
}

.com-content-article__body h3 {
  font-size:     var(--text-xl);
  font-weight:   var(--weight-semibold);
  color:         var(--color-text-primary);
  margin-top:    var(--space-8);
  margin-bottom: var(--space-3);
  line-height:   1.3;
}

.com-content-article__body h4 {
  font-size:     var(--text-lg);
  font-weight:   var(--weight-semibold);
  color:         var(--color-text-primary);
  margin-top:    var(--space-6);
  margin-bottom: var(--space-2);
}

.com-content-article__body ul,
.com-content-article__body ol {
  margin-bottom: var(--space-5);
  padding-left:  var(--space-6);
}

.com-content-article__body li {
  margin-bottom: var(--space-2);
}

.com-content-article__body a {
  color:                var(--color-text-link);
  text-decoration:      underline;
  text-underline-offset: 2px;
  transition:           color var(--transition-fast);
}
.com-content-article__body a:hover {
  color: var(--color-orange-light);
}

.com-content-article__body strong,
.com-content-article__body b {
  font-weight: var(--weight-bold);
  color:       var(--color-text-primary);
}

.com-content-article__body em,
.com-content-article__body i {
  font-style: italic;
}

.com-content-article__body blockquote {
  border-left:   3px solid var(--color-orange);
  margin:        var(--space-6) 0;
  padding:       var(--space-4) var(--space-6);
  background:    rgba(249, 115, 22, 0.06);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color:         var(--color-text-secondary);
  font-style:    italic;
}

.com-content-article__body code {
  font-family:      var(--font-mono);
  font-size:        0.875em;
  background:       var(--color-bg-secondary);
  color:            var(--color-orange-light);
  padding:          0.1em 0.4em;
  border-radius:    var(--radius-sm);
}

.com-content-article__body pre {
  background:    var(--color-bg-secondary);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-5);
  overflow-x:    auto;
  margin-bottom: var(--space-5);
}

.com-content-article__body pre code {
  background: transparent;
  padding:    0;
  color:      var(--color-text-secondary);
}

/* ── Prev / next article navigation — hide ───────────────────
   SparkLabs articles are standalone pages, not a blog stream.
   Hide Joomla's built-in prev/next pagination. */
.com-content-article .pagenavigation {
  display: none;
}

/* ── Responsive adjustments ──────────────────────────────────*/
@media (max-width: 768px) {
  .page-content-wrap {
    padding-top:    var(--space-6);
    padding-bottom: var(--space-12);
  }

  .com-content-article .page-header h1 {
    font-size: clamp(1.75rem, 8vw, var(--text-4xl));
  }

  .com-content-article__body {
    font-size: var(--text-base);
  }
}

/* cache-bust: 2026-03-15-inner-page */


/* ============================================================
   28. ERROR PAGE (404 / 403 / 500)
   ============================================================ */

/* ── Full-page layout ────────────────────────────────────────*/
.error-page {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.error-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
  overflow: hidden;
}

/* ── Background atmosphere (matches hero) ────────────────────*/
.error-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(249, 115, 22, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249, 115, 22, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.error-bg-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;
  max-width: 800px;
  height: 70vw;
  max-height: 800px;
  background: radial-gradient(ellipse, rgba(249, 115, 22, 0.07) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Content card ────────────────────────────────────────────*/
.error-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

/* ── Brand mark (text, matches site header) ──────────────────*/
.error-brand-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  margin-bottom: var(--space-4);
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}
.error-brand-link:hover,
.error-brand-link:focus-visible {
  opacity: 1;
  text-decoration: none;
}
.error-brand-link:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ── Big error code ──────────────────────────────────────────*/
.error-code {
  font-family:  var(--font-display);
  font-size:    clamp(8rem, 25vw, 16rem);
  font-weight:  var(--weight-black);
  line-height:  0.85;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-light) 60%, #fbbf24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none; /* gradient uses clip — shadow not applicable */
  filter: drop-shadow(0 0 40px rgba(249, 115, 22, 0.35));
  user-select: none;
  margin-bottom: calc(-1 * var(--space-4));
}

/* ── Divider scratch line ────────────────────────────────────*/
.error-content::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--color-orange);
  border-radius: var(--radius-full);
  margin: calc(-1 * var(--space-2)) auto 0;
  order: 3; /* sits between code and title */
}

/* ── Heading & description ───────────────────────────────────*/
.error-title {
  font-family:  var(--font-display);
  font-size:    clamp(var(--text-3xl), 6vw, var(--text-5xl));
  font-weight:  var(--weight-bold);
  color:        var(--color-text-primary);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height:  1.1;
  margin: 0;
}

.error-desc {
  font-size:   var(--text-lg);
  color:       var(--color-text-secondary);
  line-height: 1.65;
  max-width:   480px;
  margin: 0 auto;
}

/* ── Action buttons ──────────────────────────────────────────*/
.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ── Quick-nav links ─────────────────────────────────────────*/
.error-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  width: 100%;
}

.error-nav-link {
  font-size:   var(--text-sm);
  color:       var(--color-text-muted);
  text-decoration: none;
  transition:  color var(--transition-fast);
}
.error-nav-link:hover,
.error-nav-link:focus-visible {
  color: var(--color-orange-light);
}
.error-nav-link:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.error-nav span[aria-hidden] {
  color: var(--color-border);
  font-size: var(--text-xs);
}

/* ── Debug panel (JDEBUG only) ───────────────────────────────*/
.error-debug {
  width: 100%;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: left;
  margin-top: var(--space-4);
}
.error-debug summary {
  font-family:  var(--font-mono);
  font-size:    var(--text-sm);
  color:        var(--color-orange);
  cursor:       pointer;
  user-select:  none;
  letter-spacing: 0.05em;
}
.error-debug summary:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.error-debug-content {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  color:       var(--color-text-secondary);
}
.error-debug-content pre {
  white-space: pre-wrap;
  word-break:  break-all;
  background:  var(--color-bg-primary);
  border:      1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:     var(--space-4);
  margin-top:  var(--space-3);
  overflow-x:  auto;
  max-height:  320px;
  overflow-y:  auto;
}

/* ── Responsive ──────────────────────────────────────────────*/
@media (max-width: 480px) {
  .error-code {
    font-size: clamp(6rem, 30vw, 9rem);
  }
  .error-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .error-actions .btn {
    justify-content: center;
    text-align: center;
  }
}

/* ── Reduced motion ──────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .error-bg-orb,
  .error-code {
    filter: none;
  }
}


/* ============================================================
   29. COM_CONTACT — Contact Page
   ============================================================ */

/* ── Page heading ────────────────────────────────────────────*/

/* Visually hide the contact record h1 (org name) but keep it in the
   accessibility tree so WCAG page-has-heading-one is satisfied */
.com-contact .page-header {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Contact Form" h2 — redundant; legend already labels the form */
.com-contact.contact > h2 {
  display: none;
}

/* "Contact" — the visible page title; match article page header style */
.com-contact__container > h2 {
  font-family:    var(--font-display);
  font-size:      clamp(var(--text-4xl), 7vw, var(--text-6xl));
  font-weight:    var(--weight-bold);
  color:          var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height:    1.1;
  margin:         0 0 var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom:  2px solid var(--color-border);
}

/* ── Form card — override Bootstrap .well ────────────────────*/
.com-contact .well,
.com-contact .contact-form.well {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-8);
  box-shadow:    var(--shadow-md);
  margin:        0;
}

/* ── Fieldset — strip browser default border ─────────────────*/
.com-contact fieldset {
  border:  none;
  padding: 0;
  margin:  0;
}

/* ── Legend — restyle as orange section label ────────────────*/
.com-contact legend {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-semibold);
  color:          var(--color-orange);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding:        0;
  margin-bottom:  var(--space-6);
  border:         none;
  width:          auto;
  float:          none;
}

/* ── "* Required field" notice ───────────────────────────────*/
.com-contact .control-group.field-spacer .text {
  font-size: var(--text-xs);
  color:     var(--color-text-muted);
  display:   block;
  margin:    0 0 var(--space-4);
}

/* ── Override Bootstrap .form-horizontal layout ──────────────*/
/* Reset floated labels and indented controls back to vertical */
.com-contact .form-horizontal .control-label,
.com-contact .form-horizontal label {
  float:       none;
  width:       auto;
  text-align:  left;
  padding-top: 0;
}
.com-contact .form-horizontal .controls {
  margin-left: 0;
}

/* ── Field groups ────────────────────────────────────────────*/
.com-contact .control-group {
  margin-bottom: var(--space-5);
}

/* Spacer rows need minimal spacing, not full field spacing */
.com-contact .control-group.field-spacer {
  margin-bottom: var(--space-2);
}

/* ── Labels ──────────────────────────────────────────────────*/
.com-contact .control-label,
.com-contact .control-group label {
  display:       block;
  font-size:     var(--text-sm);
  font-weight:   var(--weight-medium);
  color:         var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* Required field star — orange, not red */
.com-contact .required .star,
.com-contact .control-label .star,
.com-contact label .star {
  color:       var(--color-orange);
  margin-left: var(--space-1);
}

/* ── Controls container ──────────────────────────────────────*/
.com-contact .controls {
  float:  none;
  width:  100%;
  margin: 0;
}

/* ── Inputs & textarea ───────────────────────────────────────*/
/* .form-control is already styled globally; add contact specificity */
.com-contact .form-control {
  width: 100%;
}

.com-contact textarea.form-control {
  min-height: 150px;
  resize:     vertical;
}

/* ── Submit button ───────────────────────────────────────────*/
.com-contact .btn-primary {
  margin-top: var(--space-4);
  min-width:  160px;
}

/* ── Contact info / address block ────────────────────────────*/
/* Shown when the contact record has address/phone/email filled in */
.com-contact__info {
  margin-bottom: var(--space-8);
}

.com-contact__address.dl-horizontal {
  margin:     0;
  padding:    var(--space-6);
  background: var(--color-bg-card);
  border:     1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Reset Bootstrap's floated dt */
.com-contact__address dt {
  float:         none;
  width:         auto;
  clear:         none;
  font-size:     var(--text-sm);
  font-weight:   var(--weight-semibold);
  color:         var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
  margin-top:    var(--space-4);
}
.com-contact__address dt:first-child {
  margin-top: 0;
}

.com-contact__address dd {
  margin-left:   0;
  font-size:     var(--text-base);
  color:         var(--color-text-secondary);
  margin-bottom: 0;
}

/* ── Hide contact info block when empty (no address/phone/email in contact record) */
/* Automatically reappears if you add address data in Components → Contacts → Contacts */
.com-contact__info:not(:has(dt)) {
  display: none;
}

/* ── Responsive ──────────────────────────────────────────────*/
@media (max-width: 640px) {
  .com-contact .well,
  .com-contact .contact-form.well {
    padding: var(--space-5);
  }
  .com-contact__container > h2 {
    font-size: clamp(var(--text-3xl), 10vw, var(--text-4xl));
  }
}

/* ============================================================
   30. ACYMAILING SUBSCRIPTION FORM
   ============================================================ */

/* Card wrapper — applies to ALL AcyMailing forms using acym-newsletter-form class */
.acym_module.acym-newsletter-form {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-orange);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  max-width: 520px;
  margin: var(--space-6) 0;
  box-shadow: var(--shadow-md);
}

/* Remove default form bottom margin inside the card */
.acym_module.acym-newsletter-form form {
  margin-bottom: 0;
}

/* Each field row */
.acym_module.acym-newsletter-form .onefield {
  margin-bottom: var(--space-5);
}

/* Label wrapper — AcyMailing puts the label text (span) AND input both inside <label> */
.acym_module.acym-newsletter-form label.cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: 0;
  font-weight: normal;
  color: var(--color-text-primary);
}

/* The visible label text */
.acym_module.acym-newsletter-form .acym__users__creation__fields__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Text and email inputs */
.acym_module.acym-newsletter-form input.cell[type="text"],
.acym_module.acym-newsletter-form input.cell[type="email"] {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.acym_module.acym-newsletter-form input.cell[type="text"]:focus,
.acym_module.acym-newsletter-form input.cell[type="email"]:focus {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
  outline: none;
}

/* Privacy/Terms consent row */
.acym_module.acym-newsletter-form .fieldacyterms {
  margin-bottom: var(--space-5);
}

.acym_module.acym-newsletter-form .fieldacyterms label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: var(--weight-normal);
  cursor: pointer;
  margin-bottom: 0;
  line-height: 1.5;
}

.acym_module.acym-newsletter-form .fieldacyterms input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-orange);
  cursor: pointer;
}

/* Subscribe button row */
.acym_module.acym-newsletter-form .acysubbuttons {
  margin-top: 0;
  margin-bottom: 0;
}

.acym_module.acym-newsletter-form .acysubbuttons .subbutton {
  width: 100%;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.025em;
}

/* Error messages */
.acym_module.acym-newsletter-form .acym__field__error__block {
  font-size: var(--text-sm);
  color: var(--color-error);
  margin-top: var(--space-1);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .acym_module.acym-newsletter-form {
    padding: var(--space-6);
    max-width: 100%;
  }
}