/**
Theme Name: Bernardus child theme
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bernardus-child-theme
Template: astra
*/

/* ============================================
   SV Bernardus Design System — v1.0
   2026-03-19
   ============================================ */

/* --- Design Tokens --- */
:root {
  /* Colours — unified brand orange (was #F47920, aligned to #E87722 on 2026-05-11) */
  --color-primary:       #E87722;
  --color-primary-dark:  #c4621c;
  --color-primary-light: #FDE8D4;
  --color-primary-tint:  rgba(232, 119, 34, 0.12);
  --color-border-muted:  #d8d4ca;
  --color-dark:          #2D2D2D;
  --color-dark-mid:      #4A4A4A;
  --color-white:         #FFFFFF;
  --color-neutral-light: #F7F7F7;
  --color-neutral-mid:   #E0E0E0;
  --color-neutral-dark:  #757575;
  --color-accent:        #FFC107;
  --color-error:         #A14A0E;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:    0 4px 6px rgba(0,0,0,0.08);
  --shadow-lg:    0 10px 15px rgba(0,0,0,0.10);
  --shadow-hover: 0 10px 15px rgba(0,0,0,0.15);

  /* Typography */
  --font-primary: 'Roboto', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
}

/* --- Base --- */
body {
  font-family: var(--font-primary);
  color: var(--color-dark);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}
a:visited {
  color: var(--color-error);
}

/* --- Headings --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  color: var(--color-dark);
  line-height: 1.2;
}

/* --- Buttons — unified action pill spec (md size). --- */
.ast-btn,
button[type="submit"],
input[type="submit"],
.wp-block-button__link,
.elementor-button {
  font-family: var(--font-primary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.2 !important;
  border-radius: var(--radius-full) !important;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
  cursor: pointer !important;
}

/* Primary (filled orange) */
.ast-btn,
button[type="submit"],
input[type="submit"] {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
  border: 2px solid var(--color-primary) !important;
  padding: 13px 28px !important;
}
.ast-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  color: var(--color-white) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(232, 119, 34, 0.25) !important;
  text-decoration: none !important;
}

/* --- Navigation --- */
.main-header-menu .menu-item > a {
  font-family: var(--font-primary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-dark);
  transition: color 0.15s ease;
}
.main-header-menu .menu-item > a:hover,
.main-header-menu .menu-item.current-menu-item > a,
.main-header-menu .menu-item.current-menu-ancestor > a {
  color: var(--color-primary) !important;
  text-decoration: none;
}

/* Dropdown */
.main-header-menu .sub-menu {
  border-top: 2px solid var(--color-primary) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}
.main-header-menu .sub-menu .menu-item > a:hover {
  color: var(--color-primary) !important;
  padding-left: 24px !important;
  transition: padding 0.15s ease, color 0.15s ease !important;
}

/* --- Cards --- */
.bernardus-card {
  background: var(--color-white);
  border: 1px solid var(--color-neutral-mid);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.bernardus-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* --- Forms --- */
/* The /aanmelden/ Sportlink form (.sp-aanmelden__*) is excluded: its styling
   lives in the aanmelden-form-styles.php mu-plugin and these !important
   globals would override it. */
input[type="text"]:not(.sp-aanmelden__input),
input[type="email"]:not(.sp-aanmelden__input),
input[type="tel"]:not(.sp-aanmelden__input),
input[type="number"]:not(.sp-aanmelden__input),
input[type="password"]:not(.sp-aanmelden__input),
input[type="url"]:not(.sp-aanmelden__input),
select:not(.sp-aanmelden__select),
textarea:not(.sp-aanmelden__textarea) {
  border: 1px solid var(--color-neutral-mid) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px !important;
  font-family: var(--font-primary) !important;
  font-size: 16px !important;
  color: var(--color-dark) !important;
  background: var(--color-white) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
input:focus:not(.sp-aanmelden__input):not(.sp-aanmelden__checkbox),
select:focus:not(.sp-aanmelden__select),
textarea:focus:not(.sp-aanmelden__textarea) {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(244, 121, 32, 0.15) !important;
  outline: none !important;
}
input:not(.sp-aanmelden__input)::placeholder,
textarea:not(.sp-aanmelden__textarea)::placeholder {
  color: var(--color-neutral-dark) !important;
}

/* --- Footer --- */
.site-footer,
#colophon,
.footer-widget-area,
.footer-bar {
  background: var(--color-dark) !important;
  color: var(--color-neutral-mid) !important;
  border-top: 4px solid var(--color-primary) !important;
}
.site-footer a,
.footer-widget-area a,
.footer-bar a {
  color: var(--color-neutral-mid) !important;
  text-decoration: none !important;
}
.site-footer a:hover,
.footer-widget-area a:hover,
.footer-bar a:hover {
  color: var(--color-white) !important;
}
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
  color: var(--color-white) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 14px;
}

/* --- Section helpers --- */
.bernardus-section--light  { background: var(--color-neutral-light); }
.bernardus-section--dark   { background: var(--color-dark); color: var(--color-white); }
.bernardus-section--orange { background: var(--color-primary); color: var(--color-white); }

/* --- Page Hero (reusable for all inner pages) --- */
.bernardus-hero {
  background: var(--color-primary) !important;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.bernardus-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(180,60,0,0.45) 0%, transparent 65%),
    radial-gradient(ellipse at 85% 15%, rgba(255,255,255,0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.bernardus-hero > * { position: relative; z-index: 1; }
.bernardus-hero h1 {
  color: var(--color-white) !important;
  font-weight: 900 !important;
  font-size: 3.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: 4px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.15);
  margin-bottom: 8px !important;
}
.bernardus-hero h2,
.bernardus-hero h3 {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

/* Hero crest circle (add via HTML widget) */
.bernardus-hero-crest {
  width: 72px;
  height: 72px;
  background: rgba(255,255,255,0.15);
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--color-white);
  margin: 0 auto 20px;
  backdrop-filter: blur(4px);
  letter-spacing: 1px;
}

/* --- Loop Grid card overrides (universal for all loop grids) --- */
.e-loop-item .bernardus-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.e-loop-item .bernardus-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* --- Mobile typography --- */
@media (max-width: 768px) {
  h1 { font-size: 2.074rem !important; }
  h2 { font-size: 1.728rem !important; }
  h3 { font-size: 1.44rem  !important; }
  h4 { font-size: 1.2rem   !important; }
  .bernardus-hero h1 { font-size: 2.5rem !important; letter-spacing: 2px !important; }
}
@media (max-width: 600px) {
  .bernardus-hero h1 { font-size: 2rem !important; }
}

/* ============================================
   Header Fix — Unified Sitewide Header
   Non-transparent-header pages: white menu text on dark bg
   Homepage (transparent header) is NOT affected.
   2026-03-31
   ============================================ */

/*
 * 1. Force white text on top-level menu items for NON-homepage pages.
 *    Uses :not(.ast-theme-transparent-header) so homepage is untouched.
 *    High specificity + !important to override Astra inline styles and
 *    the child theme's .main-header-menu .menu-item > a rule above.
 */
body:not(.ast-theme-transparent-header) .main-header-menu .menu-item > a,
body:not(.ast-theme-transparent-header) .ast-builder-menu-1 .menu-item > .menu-link,
body:not(.ast-theme-transparent-header) .ast-builder-menu-1 .menu-item > .ast-menu-toggle {
  color: var(--color-dark, #1a1a1a) !important; /* white nav (brief 2026-07-09): dark text on white bar */
}

/*
 * 2. Keep dropdown sub-menu items DARK text on white background.
 *    Sub-menus have white bg by default — dark text must remain readable.
 */
body:not(.ast-theme-transparent-header) .main-header-menu .sub-menu .menu-item > a,
body:not(.ast-theme-transparent-header) .ast-builder-menu-1 .sub-menu .menu-item > .menu-link {
  color: var(--color-dark, #2d2d2d) !important;
}

/*
 * 3. Hover & active states → orange for top-level items.
 */
body:not(.ast-theme-transparent-header) .main-header-menu .menu-item > a:hover,
body:not(.ast-theme-transparent-header) .main-header-menu .menu-item.current-menu-item > a,
body:not(.ast-theme-transparent-header) .main-header-menu .menu-item.current-menu-ancestor > a,
body:not(.ast-theme-transparent-header) .ast-builder-menu-1 .menu-item > .menu-link:hover,
body:not(.ast-theme-transparent-header) .ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
body:not(.ast-theme-transparent-header) .ast-builder-menu-1 .menu-item.current-menu-ancestor > .menu-link {
  color: #f47920 !important;
}

/*
 * 4. Hover & active for sub-menu items → orange (on white bg).
 */
body:not(.ast-theme-transparent-header) .main-header-menu .sub-menu .menu-item > a:hover,
body:not(.ast-theme-transparent-header) .main-header-menu .sub-menu .menu-item.current-menu-item > a,
body:not(.ast-theme-transparent-header) .ast-builder-menu-1 .sub-menu .menu-item > .menu-link:hover,
body:not(.ast-theme-transparent-header) .ast-builder-menu-1 .sub-menu .menu-item.current-menu-item > .menu-link {
  color: #f47920 !important;
}

/*
 * 5. Force header background to black on non-homepage pages.
 *    Astra uses #2d2d29 by default; we want solid black.
 */
body:not(.ast-theme-transparent-header) .ast-primary-header-bar,
body:not(.ast-theme-transparent-header) #ast-desktop-header .ast-primary-header-bar,
body:not(.ast-theme-transparent-header) .ast-primary-header-bar .site-primary-header-wrap {
  background-color: var(--color-white, #fff) !important; /* white nav (brief 2026-07-09) */
}

/*
 * 6. Fix match detail page — remove white article wrapper that bleeds
 *    into header area. Only affects single sportlink_match pages.
 */
body.single-sportlink_match .ast-separate-container .ast-article-single {
  background-color: transparent !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/*
 * 7. Mobile menu — ensure hamburger/toggle icon is white on dark header.
 */
body:not(.ast-theme-transparent-header) .ast-mobile-menu-trigger-minimal,
body:not(.ast-theme-transparent-header) .ast-button-wrap .ast-mobile-menu-trigger-minimal,
body:not(.ast-theme-transparent-header) .ast-builder-menu-1 .ast-mobile-menu-trigger-fill,
body:not(.ast-theme-transparent-header) .menu-toggle .ast-mobile-svg {
  color: var(--color-dark, #1a1a1a) !important; /* white nav (brief 2026-07-09) */
  fill: var(--color-dark, #1a1a1a) !important;
}

/*
 * 8. Mobile off-canvas/slide menu — keep dark text on light background.
 *    Don't override mobile menu panel colors.
 */

/* ============================================
   Transparent Header (Homepage) — Sub-menu Fix
   White dropdown bg, dark text, orange hover.
   Main nav hover: off-white instead of orange.
   2026-03-31
   ============================================ */

/*
 * 1. Main nav hover — subtle off-white, not orange.
 */
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item:hover > .menu-link,
.ast-theme-transparent-header .main-header-menu .menu-item:hover > .menu-link {
  color: #f5f5f5 !important;
}

/*
 * 2. Sub-menu container — white background with proper shadow.
 */
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .sub-menu,
.ast-theme-transparent-header .main-header-menu .sub-menu {
  background-color: #ffffff !important;
}

/*
 * 3. Sub-menu items — dark text on white background.
 */
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .sub-menu .menu-item > .menu-link,
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-item > .menu-link,
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-item > a,
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .menu-item .sub-menu .menu-link {
  color: #2d2d29 !important;
  background-color: #ffffff !important;
}

/*
 * 4. Sub-menu hover — orange text.
 */
.ast-theme-transparent-header .ast-builder-menu .main-header-menu .sub-menu .menu-item:hover > .menu-link,
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-item:hover > .menu-link,
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-item:hover > a,
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link,
.ast-theme-transparent-header .main-header-menu .sub-menu .menu-item.current-menu-item > a {
  color: #f47920 !important;
}

/* ============================================
   CTA "Lid worden" — text-only, bold orange
   Regular nav item style but in orange + bold.
   2026-03-31
   ============================================ */

/*
 * CTA "Lid worden" — LEGACY text-only rules (superseded by desktop pill below).
 * These generic selectors still serve as a minimal fallback for contexts
 * outside the desktop header (e.g. widgets, mobile Astra builder menu).
 * Desktop pill overrides are in the @media (min-width: 922px) block at the
 * bottom of this file under "DESKTOP CTA BUTTON".
 */
.menu-cta-button > a,
.menu-cta-button > .menu-link {
  font-weight: 700 !important;
}
.ast-theme-transparent-header .menu-cta-button > a,
.ast-theme-transparent-header .menu-cta-button > .menu-link {
  font-weight: 700 !important;
}

/* ============================================
   Content Page Background Fix
   Astra's ast-separate-container gives #f5f5f5
   background. Override to white for Elementor
   full-width content pages (sp-content-page).
   Sitewide fix — applies to all sp-content pages.
   2026-03-31
   ============================================ */

/*
 * 1. White background on the body/site-content when an
 *    Elementor full-width page is used (elementor_header_footer).
 *    Targets the page-builder template specifically.
 */
.ast-separate-container.elementor-template-full-width,
.ast-separate-container.elementor-template-full-width .site-content,
.ast-separate-container.elementor-template-full-width #primary {
  background-color: #ffffff !important;
}

/*
 * 2. Also remove the article box styling Astra adds
 *    (white card with padding) on full-width template pages.
 */
.ast-separate-container.elementor-template-full-width .ast-article-single {
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* ============================================
   Aanmelden Form
   All .sp-aanmelden styling lives in the
   aanmelden-form-styles.php mu-plugin (page 2821
   scoped). The legacy !important overrides that
   used the old #F47920 palette were removed
   2026-06-10 — they fought the mu-plugin cascade.
   ============================================ */

/* ========================================
   WPForms Button Sizing Fix
   Match site design system button style
   ======================================== */
.wpforms-container .wpforms-submit {
    padding: 12px 28px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    border-radius: var(--radius-full, 9999px) !important;
    background-color: #F47920 !important;
    border: 1px solid #F47920 !important;
    color: #FFFFFF !important;
    font-family: 'Roboto', sans-serif !important;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    width: auto !important;
    display: inline-block !important;
}
.wpforms-container .wpforms-submit:hover,
.wpforms-container .wpforms-submit:focus {
    background-color: #d86413 !important;
    border-color: #d86413 !important;
    color: #FFFFFF !important;
}

/* ========================================
   Form Alignment Fix — Both Forms
   Aanmelden & Hummelvoetbal forms:
   LEFT-aligned, matching width
   2026-03-31
   ======================================== */

/*
 * (Sportlink Aanmelden alignment rules removed 2026-06-10 —
 *  the mu-plugin owns .sp-aanmelden layout now.)
 *
 * Ensure WPForms takes the full container width.
 */
.wpforms-container {
    max-width: 100% !important;
}

/*
 * 3. Make WPForms inputs full-width to match Sportlink form
 *    WPForms defaults to 60% for medium fields
 */
.wpforms-container .wpforms-field-medium,
.wpforms-container input.wpforms-field-medium,
.wpforms-container select.wpforms-field-medium,
.wpforms-container textarea.wpforms-field-medium {
    max-width: 100% !important;
}

/* ========================================
   Hide Sportlink aanmelden widget header
   (page has its own sp-content-page hero)
   ======================================== */
.sp-content-page .sp-aanmelden__header {
    display: none !important;
}

/* ============================================
   Mobile: Disable Transparent Header on Homepage
   Makes homepage header solid dark on mobile,
   identical to all other pages.
   2026-03-31
   ============================================ */
@media (max-width: 921px) {

  /* 1. Position: relative so header takes up space (not overlay) */
  .ast-theme-transparent-header #masthead {
    position: relative !important;
  }

  /* 2. Solid dark background instead of transparent */
  .ast-theme-transparent-header .main-header-bar,
  .ast-theme-transparent-header.ast-header-break-point .main-header-bar,
  .ast-theme-transparent-header .ast-primary-header-bar,
  .ast-theme-transparent-header.ast-header-break-point .ast-primary-header-bar {
    background-color: #2d2d29 !important;
    background-image: none !important;
  }

  /* 3. Clear menu bg override from transparent header CSS */
  .ast-theme-transparent-header .ast-builder-menu .main-header-menu,
  .ast-theme-transparent-header .ast-builder-menu .main-header-menu .sub-menu,
  .ast-theme-transparent-header.ast-header-break-point .ast-builder-menu .main-header-bar-wrap .main-header-menu {
    background-color: transparent !important;
  }
}

/* =============================================
   MOBILE MENU — Menu Mobiel (flat 8-item list)
   ============================================= */

/* Hide mobile nav on desktop */
.sv-mobile-nav {
    display: none;
}

@media (max-width: 921px) {
    /* Show our mobile nav inside the off-canvas/popup menu */
    .sv-mobile-nav {
        display: block;
        padding: 1rem 0;
    }

    /* Hide the ENTIRE desktop builder menu inside mobile header content */
    /* This targets the ast-builder-menu-1 (ast-builder-menu) which contains 46+ items */
    .ast-mobile-header-content .ast-builder-menu-1,
    .ast-mobile-header-content .ast-builder-menu,
    .ast-mobile-header-content .site-navigation,
    .ast-mobile-header-content .main-header-bar-navigation,
    .ast-mobile-header-content .main-navigation,
    .ast-mobile-header-content .site-header-focus-item,
    .ast-mobile-popup-drawer .main-header-menu,
    .ast-mobile-popup-drawer .ast-builder-menu-1,
    #ast-mobile-popup .main-header-menu {
        display: none !important;
    }

    /* Mobile menu list */
    .sv-mobile-menu-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .sv-mobile-menu-list li {
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .sv-mobile-menu-list li:last-child {
        border-bottom: none;
    }

    .sv-mobile-menu-list li a {
        display: block;
        padding: 14px 20px;
        color: #ffffff;
        text-decoration: none;
        font-family: 'Roboto', sans-serif;
        font-size: 16px;
        font-weight: 400;
        min-height: 48px;
        line-height: 20px;
    }

    .sv-mobile-menu-list li a:hover,
    .sv-mobile-menu-list li a:active {
        color: #F47920;
        background: rgba(244, 121, 32, 0.1);
    }

    /* CTA button - Lid worden - FORCE ORANGE BUTTON STYLING */
    .sv-mobile-nav .sv-mobile-menu-list li.menu-cta-button > a,
    .sv-mobile-nav .sv-mobile-menu-list li.menu-cta-button > .menu-link,
    #sv-mobile-menu .sv-mobile-menu-list li.menu-cta-button a.menu-link,
    .sv-mobile-menu-list li.menu-cta-button a,
    .sv-mobile-menu-list li.menu-cta-button .menu-link {
        display: inline-block !important;
        background-color: #F47920 !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        padding: 10px 24px !important;
        border-radius: var(--radius-full, 9999px) !important;
        margin: 12px 20px !important;
        font-size: 14px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        min-height: auto !important;
        text-align: center !important;
        line-height: 1.2 !important;
    }
    .sv-mobile-nav .sv-mobile-menu-list li.menu-cta-button > a:hover,
    .sv-mobile-nav .sv-mobile-menu-list li.menu-cta-button > a:active,
    .sv-mobile-nav .sv-mobile-menu-list li.menu-cta-button > .menu-link:hover,
    .sv-mobile-nav .sv-mobile-menu-list li.menu-cta-button > .menu-link:active,
    .sv-mobile-menu-list li.menu-cta-button a:hover,
    .sv-mobile-menu-list li.menu-cta-button a:active,
    .sv-mobile-menu-list li.menu-cta-button .menu-link:hover,
    .sv-mobile-menu-list li.menu-cta-button .menu-link:active {
        background-color: #d86413 !important;
        color: #ffffff !important;
    }
    .sv-mobile-nav .sv-mobile-menu-list li.menu-cta-button,
    .sv-mobile-menu-list li.menu-cta-button {
        border-bottom: none !important;
        padding: 8px 0 !important;
        background: transparent !important;
    }

    /* =============================================
       MOBILE POPUP DRAWER — Force Dark Background
       Override Astra's grey (--ast-global-color-5).
       Use dark #2d2d29 for entire popup area.
       ============================================= */
    .ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
    .ast-mobile-header-wrap .ast-mobile-header-content,
    .ast-mobile-popup-content,
    .ast-mobile-popup-drawer,
    .ast-mobile-popup-drawer.active {
        background-color: #2d2d29 !important;
    }

    /* =============================================
       TRANSPARENT HEADER — Disable on mobile
       Make header solid dark on mobile homepage
       ============================================= */
    .ast-theme-transparent-header #masthead,
    .ast-theme-transparent-header .ast-primary-header-bar {
        position: relative !important;
        background-color: #2d2d29 !important;
        background-image: none !important;
    }

    .ast-theme-transparent-header .main-header-bar,
    .ast-theme-transparent-header .ast-header-break-point .main-header-bar,
    .ast-theme-transparent-header .ast-header-break-point .ast-primary-header-bar {
        background-color: #2d2d29 !important;
        background-image: none !important;
    }

    /* Ensure content doesn't overlap with header on homepage mobile */
    .ast-theme-transparent-header .site-content {
        margin-top: 0 !important;
    }

    /* =============================================
       Fix 3: Hamburger icon stripes — pure white
       ============================================= */
    [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
        fill: #ffffff !important;
    }
    [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-fill {
        color: #ffffff !important;
    }
    /* Also target the lines/bars directly */
    .ast-mobile-menu-trigger-fill .ast-mobile-svg,
    .ast-button-wrap .ast-mobile-svg {
        fill: #ffffff !important;
    }

    /* =============================================
       Fix 4: Smaller logo in mobile header bar
       Reduce from 100px to 70px for breathing room
       ============================================= */
    .ast-header-break-point .site-branding img,
    .ast-header-break-point .custom-logo-link img,
    .ast-header-break-point .site-logo-img .custom-mobile-logo-link img,
    .ast-theme-transparent-header #masthead .site-logo-img .transparent-custom-logo img {
        max-width: 70px !important;
        width: 70px !important;
    }
}

/* =============================================
   DESKTOP CTA BUTTON — Lid Worden
   Desktop only (min-width: 922px)
   Filled variant of the site's 10px-radius button
   design system. Vertically centred via Astra's
   flex <li> + height:auto on the <a>.
   2026-03-31
   ============================================= */
@media (min-width: 922px) {

  /*
   * Astra's <li> is display:flex; flex-direction:column; justify-content:center.
   * That keeps the item vertically centred in the header row.
   *
   * The fix: override the <a>'s height:100% (which fills the full header bar)
   * to height:auto so the link shrinks to content size. The <li> still
   * participates in the header flex row → alignment stays correct.
   * border-radius is now visible because the background no longer spans
   * the full 70px header height.
   */

  /* 1. Button link — override Astra's full-height stretch */
  .ast-builder-menu-2 .menu-cta-button > .menu-link,
  .ast-builder-menu-2 .menu-cta-button > a {
    height: auto !important;
    background-color: #F47920 !important;
    border: 1px solid #F47920 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    line-height: 1.3 !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
    white-space: nowrap !important;
  }

  /* 2. Hover state */
  .ast-builder-menu-2 .menu-cta-button > .menu-link:hover,
  .ast-builder-menu-2 .menu-cta-button > a:hover {
    background-color: #D86413 !important;
    border-color: #D86413 !important;
    color: #ffffff !important;
    text-decoration: none !important;
  }

  /* 3. Override transparent header colour rules — keep white text + orange bg */
  .ast-theme-transparent-header .ast-builder-menu-2 .menu-cta-button > .menu-link,
  .ast-theme-transparent-header .ast-builder-menu-2 .menu-cta-button > a,
  .ast-theme-transparent-header [CLASS*="ast-builder-menu-"] .menu-cta-button > .menu-link {
    color: #ffffff !important;
    background-color: #F47920 !important;
    border-color: #F47920 !important;
  }
  .ast-theme-transparent-header .ast-builder-menu-2 .menu-cta-button > .menu-link:hover,
  .ast-theme-transparent-header .ast-builder-menu-2 .menu-cta-button > a:hover,
  .ast-theme-transparent-header [CLASS*="ast-builder-menu-"] .menu-cta-button > .menu-link:hover {
    color: #ffffff !important;
    background-color: #D86413 !important;
    border-color: #D86413 !important;
  }

  /* 4. Override non-transparent header (dark bg pages) — keep white text + orange bg */
  body:not(.ast-theme-transparent-header) .ast-builder-menu-2 .menu-cta-button > .menu-link,
  body:not(.ast-theme-transparent-header) .ast-builder-menu-2 .menu-cta-button > a {
    color: #ffffff !important;
    background-color: #F47920 !important;
    border-color: #F47920 !important;
  }
  body:not(.ast-theme-transparent-header) .ast-builder-menu-2 .menu-cta-button > .menu-link:hover,
  body:not(.ast-theme-transparent-header) .ast-builder-menu-2 .menu-cta-button > a:hover {
    color: #ffffff !important;
    background-color: #D86413 !important;
    border-color: #D86413 !important;
  }

  /* 5. Small left margin to separate from preceding menu item */
  .ast-builder-menu-2 .menu-cta-button {
    margin-left: 8px !important;
  }
}

/* ============================================
   Simpele Pagina (pagina CPT) — Full-Width + Shell Fix
   Matches /clubhistorie/ (elementor_header_footer page)
   blueprint for all pagina CPT single views.

   Root cause: pagina CPT uses Elementor 'Single'
   template 2836, not elementor_header_footer, so
   it gets wrapped in Astra's constrained
   ast-separate-container layout with grey bg.

   Architecture note: Elementor 'single' template type
   cannot bypass Astra's #primary / main / ast-article-single
   wrapper hierarchy the way elementor_header_footer does.
   These CSS overrides are therefore the correct minimal fix —
   they cannot be replaced by Elementor settings alone.

   NORMALIZATION STATUS (2026-04-16):
   The pagina CPT Single template (2836) now uses the same
   sp-section-header shortcode pattern as Clubhistorie.
   Rules #5 and #6 (legacy .elementor-heading-title overrides)
   were REMOVED 2026-04-16 — header is fully handled by
   .sp-section-header__title via sportlink-design-system.css.
   Only the 4 irreducible Astra wrapper/layout rules remain.

   2026-04-16
   ============================================ */

/*
 * 1. White background — body, site-content, and primary area.
 *    Mirrors the existing .elementor-template-full-width fix
 *    but scoped to body.single-pagina.
 *    WHY: Astra's ast-separate-container gives the body/site a
 *    #f2f2f2 (--ast-global-color-4) grey background that bleeds
 *    around the Elementor content block. Elementor single templates
 *    cannot set elementor_header_footer which would bypass this.
 */
body.single-pagina.ast-separate-container,
body.single-pagina.ast-separate-container .site-content,
body.single-pagina.ast-separate-container #primary {
  background-color: #ffffff !important;
}

/*
 * 2. Remove Astra's ast-article-single box styling
 *    (grey bg, padding, box-shadow) on pagina CPT single view.
 *    WHY: Astra applies a card-like box (--ast-global-color-5 bg,
 *    padding 2.14em, box-shadow) to .ast-article-single. On pagina
 *    CPT pages the Elementor location-single div also carries this
 *    class, so the Elementor template content ends up boxed.
 */
body.single-pagina.ast-separate-container .ast-article-single,
body.single-pagina.ast-separate-container .ast-article-single:not(.ast-related-post) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/*
 * 3. Remove max-width constraint from .ast-container on pagina CPT pages.
 *    WHY: On elementor_header_footer pages the ast-container displays
 *    as a block with no max-width restriction. For single-pagina pages
 *    the Astra separate-container layout constrains the ast-container
 *    (typically 1240px desktop), preventing the Elementor full-width
 *    containers from bleeding to the viewport edge.
 */
body.single-pagina.ast-separate-container #content > .ast-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/*
 * 4. Make #primary (content area) full-width — no flex side column.
 *    WHY: Astra separate-container puts #primary inside a flex row
 *    (site-content .ast-container { display:flex }) which is designed
 *    for sidebar+content layouts. Without a sidebar Astra still applies
 *    a max-width column via .ast-separate-container #primary.
 */
body.single-pagina.ast-separate-container #primary {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/*
 * 5. [REMOVED 2026-04-16 — rule 5 was: font-family fix for .elementor-heading-title]
 *    Reason: pagina Single template (2836) now uses [sp_section_header title="auto"]
 *    which renders .sp-section-header__title (Charlly Sans via design-system.css).
 *    No Elementor heading widget is used in the header area, so no override needed.
 *
 * 6. [REMOVED 2026-04-16 — rule 6 was: font-size/transform fix for .elementor-heading-title]
 *    Reason: same as above — sp-section-header handles size (36px page-title),
 *    uppercase, letter-spacing and responsive sizing via sportlink-design-system.css.
 *    The sp-content-page__header-area heading widget is gone from the template.
 *
 * Verified 2026-04-16: /gedragsregels/, /commissies/, /lid-worden/,
 * /clubhistorie-cpt-vergelijking/ all render correct headers via sp-section-header.
 */

/* ============================================
   Pagina CPT — Content Width Harmonization
   PLAN: 03-content-migration/11-pagina-content-width-harmonization
   2026-04-16

   Root cause: Elementor's frontend.min.css loads AFTER
   sportlink-design-system.css and overrides the 780px max-width
   on .sp-content-page with max-width: min(100%, var(--width)) = 100%.
   On pagina pages we also removed ast-container padding (rule #3/#4)
   so the container is viewport-wide, making prose feel too wide.

   Fix: Reinstate max-width: 780px on .sp-content-page for single-pagina
   pages via child theme (which loads last and can win with !important).
   Margin auto centres the block within the white background area.
   Padding provides comfortable gutter on both sides.

   Scope: body.single-pagina only — does not affect clubhistorie
   or any other page type. Targets the shared inner content container.
   Does NOT reopen outer shell (ast-article-single / ast-container).
   ============================================ */

/*
 * Re-constrain the sp-content-page inner container to 780px.
 * This matches the design-system intent (.sp-content-page { max-width: 780px })
 * and matches the comfortable reading width of /clubhistorie/ at full viewport.
 * !important is required because elementor/assets/css/frontend.min.css
 * (loaded after design-system) sets max-width: min(100%, var(--width))
 * which overrides the design-system 780px without !important.
 */
body.single-pagina .sp-content-page {
    max-width: 780px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* =============================================
   HOMEPAGE WIDGET SPACING & TYPOGRAPHY TWEAKS
   Task: Typography & Spacing for Homepage Widgets
   2026-03-31
   ============================================= */

/* 1. Spacing: "Laatste nieuws" heading → more bottom margin */
.elementor-540 .elementor-element-2fa8427 {
    margin-bottom: 32px !important;
}

/* 2. "Volgende Wedstrijd" section — more top padding */
.elementor-540 .elementor-element-d300d18 {
    padding-top: 56px !important;
}

/* ============================================
   Nieuwsbericht — crop featured images from the top
   (portrait photos keep heads; default object-position is centre)
   2026-06-12
   ============================================ */
body.single-nieuws .elementor-widget-image img {
    object-position: center top;
}

/* ============================================
   Nieuwsbericht detail — Option A redesign
   2026-06-12
   ============================================ */
.nieuws-detail {
    width: 100%;
    flex: 1 1 auto;
    align-self: stretch;
}
.nieuws-detail__inner {
    max-width: 920px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 3.5rem;
}
.nieuws-detail__crumb {
    font-size: 12px;
    letter-spacing: .04em;
    color: #8a8a8a;
    margin-bottom: 1.6rem;
    text-align: center;
}
.nieuws-detail__crumb a { color: #8a8a8a; text-decoration: none; }
.nieuws-detail__crumb a:hover { color: #E87722; }
.nieuws-detail__crumb span { margin: 0 .4em; }

/* Centered top-banner hero — consistent with the wedstrijdverslag layout */
.nieuws-detail__hero {
    display: block;
    text-align: center;
}
.nieuws-detail__media {
    margin: 0 0 1.8rem;
}
.nieuws-detail__media img {
    display: block;
    width: auto;
    max-width: 720px;
    max-height: 560px;
    margin: 0 auto;
    border-radius: 8px;
}
.nieuws-detail__head { max-width: 760px; margin: 0 auto; }
.nieuws-detail__cat {
    display: inline-block;
    background: #FBEAD9;
    color: #9c4a12;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 12px;
    border-radius: 20px;
}
.nieuws-detail__title {
    font-family: "Charlly Sans", "Inter", sans-serif;
    text-transform: uppercase;
    font-size: 2.25rem;
    line-height: 1.16;
    font-weight: 400;
    color: #1a1a1a;
    margin: .9rem 0 0;
}
.nieuws-detail__rule {
    display: block;
    width: 54px;
    height: 4px;
    background: #E7620B;
    border-radius: 2px;
    margin: 1rem auto .9rem;
}
.nieuws-detail__meta { font-size: .9rem; color: #8a8a8a; }
.nieuws-detail__body {
    max-width: 720px;
    margin: 2.5rem auto 0;
    line-height: 1.7;
    color: #33322f;
    text-align: left;
}
.nieuws-detail__body p { margin: 0 0 1rem; }
.nieuws-detail__more {
    border-top: 1px solid #e2ded5;
    margin-top: 3rem;
    padding-top: 1.6rem;
}
.nieuws-detail__more-title {
    font-family: "Charlly Sans", "Inter", sans-serif;
    text-transform: uppercase;
    font-size: 1.1rem;
    color: #1a1a1a;
    letter-spacing: .03em;
    margin: 0 0 1rem;
}
.nieuws-detail__more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.nieuws-detail__more-card { text-decoration: none; display: block; }
.nieuws-detail__more-thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center top;
    border-radius: 6px;
    display: block;
}
.nieuws-detail__more-name {
    display: block;
    margin-top: .5rem;
    font-size: .9rem;
    line-height: 1.35;
    color: #33322f;
}
.nieuws-detail__more-card:hover .nieuws-detail__more-name { color: #E87722; }

@media (max-width: 782px) {
    .nieuws-detail__media { margin-bottom: 1.4rem; }
    .nieuws-detail__media img { max-height: 380px; }
    .nieuws-detail__title { font-size: 1.6rem; }
    .nieuws-detail__body { max-width: none; margin-top: 1.8rem; }
    .nieuws-detail__more-grid { grid-template-columns: 1fr; }
}

/* ============================================
   Contact page (id 8) — content-width consistency (2026-07-08)
   .sp-content-page renders ~960px here (Elementor min(100%, var(--width))),
   narrower than + misaligned with the homepage/footer (1140px). Contact is a
   form + info page, not long-form text, so widen it to the site-standard
   1140px boxed width to match the rest of the site.
   ============================================ */
body.page-id-8 .sp-content-page {
    width: 100% !important;
    max-width: 1140px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================================================
   SV BERNARDUS — DESIGN SYSTEM v2.0 promotion  (2026-07-08)
   Extends v1.0 (does not replace). Brings the live site up to the Claude Design
   handover: Charlly-Sans display headings, warm neutrals + photo treatment,
   warm hero scrim, 12px cards, and a documented content-width system.
   Palette stays orange + warm neutrals — NO GREEN (hard brand rule).
   ============================================================================ */
:root {
  /* Display face — formalises the ad-hoc Charlly usage into one token */
  --font-display: 'Charlly Sans', 'Oswald', 'Arial Narrow', sans-serif;
  /* Warm neutrals (v2.0) */
  --sp-text-muted: #6e6156;
  --sp-surface-soft: #f7f5f0;
  --sp-surface-warm: #FFF8F0;
  --sp-border-warm: #d8d4ca;
  /* Photography treatment */
  --sp-img-warmte: saturate(1.04) contrast(1.02);
  --sp-scrim-warm: linear-gradient(180deg, rgba(26,18,12,.12) 0%, rgba(45,29,16,.60) 100%);
  /* Content-width system */
  --sp-container: 1140px;         /* site standard — aligns with header/footer */
  --sp-container-narrow: 860px;   /* reading measure for long-form text pages  */
}

/* --- 1. DISPLAY TYPOGRAPHY — Charlly Sans, uppercase, on section titles ----- */
h1, h2,
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.sp-section-header__title {
  font-family: var(--font-display) !important;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.08;
}
/* keep card / loop / form-header titles in the body font (not display) */
.e-loop-item h1, .e-loop-item h2, .e-loop-item .elementor-heading-title,
.sp-card__title, .sp-card__title *,
.sp-aanmelden__header, .sp-aanmelden__header * {
  font-family: var(--font-primary) !important;
  text-transform: none;
  letter-spacing: normal;
}

/* --- 2. WARM PHOTO TREATMENT on content imagery ---------------------------- */
.elementor-widget-image img,
.e-loop-item img,
.elementor-widget-theme-post-featured-image img,
.sp-content-page .wp-post-image {
  filter: var(--sp-img-warmte);
}

/* --- 3. CARDS → 12px radius (v2.0) ----------------------------------------- */
.bernardus-card,
.e-loop-item .bernardus-card { border-radius: 12px; }

/* --- 4. CONTENT-WIDTH SYSTEM ----------------------------------------------- */
/* Standard: align every .sp-content-page with the 1140px header/footer width. */
.sp-content-page {
  width: 100% !important;
  max-width: var(--sp-container) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Long-form reading measure — Over Bernardus (genuine long text).
   Clubhistorie (2830) is now a timeline layout: hero+timeline at 1140, intro/quote via .sp-narrow. */
body.page-id-2827 .sp-content-page { max-width: var(--sp-container-narrow) !important; }
/* (single-pagina CPT keeps its own 780px rule above; page-id specifics win.) */

/* --- 5. HOMEPAGE (id 540) — hero warm scrim + news-card polish -------------- */
/* Green sponsor band + cool match-centre surface are fixed in Elementor data. */
body.page-id-540 .elementor-element-2cb5f4f { position: relative; }
body.page-id-540 .elementor-element-2cb5f4f > .e-con-inner { position: relative; z-index: 2; }
body.page-id-540 .elementor-element-2cb5f4f::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--sp-scrim-warm);
}
body.page-id-540 .elementor-element-4c9a043 .e-loop-item {
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: box-shadow .25s ease, transform .25s ease;
}
body.page-id-540 .elementor-element-4c9a043 .e-loop-item:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.12); transform: translateY(-4px);
}

/* --- 6. NO-GREEN cleanup — bestuur avatars + jeugdbestuur category dot ------ */
/* sportlink-design-system.css uses #1B3A2D (green) here — brand-forbidden.    */
.sp-bestuur-initials { color: var(--color-primary) !important; }              /* orange, matches --vacature */
.sp-bestuur-card--cat-jeugdbestuur .sp-bestuur-cat-dot { background: var(--color-dark) !important; } /* warm-dark, distinct from bestuur=orange / commissie=grey */

/* --- 7. WARM PHOTO EMPTY-STATE — homepage "Volgende wedstrijd" (off-season) --- */
/* Scoped to the homepage next-match section so match-centre empties stay plain. */
body.page-id-540 .elementor-element-d300d18 .sp-hero--empty {
  position: relative;
  min-height: 260px;
  display: flex; align-items: center; justify-content: center;
  background-image: linear-gradient(rgba(45,29,16,.52), rgba(45,29,16,.72)),
                    url('/wp-content/uploads/2026/07/sportpark-hoofdveld.jpg');
  background-size: cover; background-position: center 45%;
  border-radius: 12px; overflow: hidden; text-align: center; padding: 2rem;
}
body.page-id-540 .elementor-element-d300d18 .sp-hero__empty {
  color: #fff; font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem); letter-spacing: .02em; margin: 0; line-height: 1.15;
}
body.page-id-540 .elementor-element-d300d18 .sp-hero__empty::after {
  content: "Begin augustus rolt de bal weer op De Rijndijk.";
  display: block; margin-top: .55rem;
  font-family: var(--font-primary); text-transform: none; letter-spacing: normal;
  font-size: .95rem; font-weight: 400; color: rgba(255,255,255,.9);
}

/* ============================================================================
   Per-page mockup component classes (Design System v2.0) — added 2026-07-08
   Namespaced .sp-*/.contact-item; used by the 1-by-1 page builds. Additive.
   ============================================================================ */
.sp-kicker { display:inline-block; font-family:var(--font-primary); font-size:.8125rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--color-primary); margin:0 0 .5rem; }
.sp-lead { font-size:1.125rem; color:var(--sp-text-muted,#6e6156); max-width:60ch; }

/* label + value contact rows */
.contact-item { display:flex; gap:.85rem; align-items:baseline; margin:0 0 1rem; font-size:1rem; line-height:1.5; }
.contact-item strong { min-width:120px; flex:0 0 120px; color:var(--color-dark); font-weight:700; }
.contact-item > span { color:var(--sp-text-muted,#6e6156); }

/* side photo (Elementor image widget: add class sp-photo) */
.sp-photo img { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--sp-img-radius,12px); filter:var(--sp-img-warmte); display:block; }
.sp-photo figcaption, .sp-photo .widget-image-caption { font-size:.875rem !important; color:var(--color-neutral-dark,#757575) !important; margin-top:.5rem !important; text-align:left !important; }

/* form card wrapper (styles around the untouched WPForms form) */
.sp-form-card { background:#fff; border:1px solid var(--sp-border,#eef0f2); border-radius:var(--sp-radius-card,12px); box-shadow:var(--sp-shadow-card,0 2px 8px rgba(0,0,0,.08)); padding:clamp(1.25rem,3vw,2rem); margin-top:1.5rem; }
.sp-form-card > .elementor-widget:last-child { margin-bottom:0; }

/* map embed */
.sp-map { border-radius:12px; overflow:hidden; aspect-ratio:4/3; box-shadow:var(--sp-shadow-card,0 2px 8px rgba(0,0,0,.08)); }
.sp-map iframe { width:100%; height:100%; border:0; display:block; }

/* --- Clubhistorie / content components (timeline, pull-quote, band CTA, helpers) --- */
.sp-narrow { max-width:760px; margin-left:auto; margin-right:auto; }
.sp-section-head { max-width:640px; margin-bottom:2rem; }
.sp-lead { font-size:1.125rem; color:var(--sp-text-muted,#6e6156); }

/* pill buttons used in mockup markup (raw <a class="sp-btn">) */
.sp-btn { display:inline-block; padding:.7rem 1.6rem; border:none; border-radius:9999px; font-family:var(--font-primary); font-size:.9rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; text-decoration:none; transition:background .2s ease, transform .2s ease, box-shadow .2s ease; }
.sp-btn--primary { background:var(--color-primary); color:#fff; box-shadow:0 4px 14px rgba(232,119,34,.28); }
.sp-btn--primary:hover { background:var(--color-primary-dark,#c4621c); color:#fff; transform:translateY(-2px); text-decoration:none; }

/* photo timeline */
.sp-timeline { position:relative; padding-left:2rem; }
.sp-timeline::before { content:""; position:absolute; left:8px; top:6px; bottom:6px; width:3px; background:linear-gradient(180deg,var(--color-primary),var(--color-border-muted,#d8d4ca)); border-radius:2px; }
.sp-tl-item { position:relative; padding-bottom:3rem; }
.sp-tl-item:last-child { padding-bottom:0; }
.sp-tl-item::before { content:""; position:absolute; left:calc(-2rem + 1px); top:6px; width:17px; height:17px; border-radius:50%; background:#fff; border:4px solid var(--color-primary); }
.sp-tl-item__year { font-family:var(--font-display); font-size:clamp(1.6rem,3.5vw,2.4rem); color:var(--color-primary); line-height:1; margin-bottom:.4rem; text-transform:uppercase; }
.sp-tl-item__title { font-size:1.25rem; font-weight:700; margin:0 0 .6rem; }
.sp-tl-item__body { color:var(--sp-text-muted,#6e6156); max-width:62ch; }
.sp-tl-item__body p { margin:0 0 .8rem; }
.sp-tl-item__body blockquote { border-left:4px solid var(--color-border-muted,#d8d4ca); margin:1rem 0; padding:.4rem 0 .4rem 1.1rem; font-style:italic; color:var(--color-neutral-dark,#757575); }
.sp-tl-item__media { margin-top:1.1rem; max-width:560px; }
.sp-tl-item__media img { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:12px; filter:var(--sp-img-warmte); display:block; }
.sp-tl-item__caption { font-size:.85rem; color:var(--color-neutral-dark,#757575); margin-top:.5rem; }
@media (min-width:900px){
  .sp-timeline { padding-left:3rem; }
  .sp-tl-item::before { left:calc(-3rem + 1px); }
  .sp-tl-item--media-right { display:grid; grid-template-columns:1fr 420px; gap:2rem; align-items:start; }
  .sp-tl-item--media-right .sp-tl-item__media { margin-top:0; grid-column:2; grid-row:1 / span 3; }
}

/* pull-quote + archive call-out */
.sp-pullquote { border-left:4px solid var(--color-primary); background:var(--sp-surface-warm,#FFF8F0); border-radius:0 12px 12px 0; padding:1.5rem 2rem; margin:0 auto; font-family:var(--font-display); font-size:clamp(1.25rem,2.5vw,1.6rem); text-transform:uppercase; line-height:1.25; max-width:760px; }
.sp-pullquote cite { display:block; margin-top:.6rem; font-family:var(--font-primary); font-style:normal; font-size:.85rem; text-transform:none; color:var(--sp-text-muted,#6e6156); }
.sp-oproep { background:var(--sp-surface-warm,#FFF8F0); border:1px solid var(--sp-border-warm,#d8d4ca); border-radius:12px; padding:1.5rem 1.8rem; margin-top:2.5rem; }
.sp-oproep blockquote { margin:0; font-size:1.05rem; line-height:1.55; }
.sp-oproep figcaption { margin-top:.7rem; color:var(--sp-text-muted,#6e6156); font-size:.9rem; }

/* closing band CTA (bern-band) */
.bern-band__cta { display:inline-block; margin-top:1rem; }

/* ============================================================================
   HEADER → WHITE nav (brief 2026-07-09 §1). Overrides the older black/transparent
   "Header Fix": white bar + dark uppercase nav → orange, on ALL pages incl. home.
   Astra HFB header; emblem stays centred, menu clustered left/right, CTA right.
   ============================================================================ */
/* 1. white bar everywhere (content + homepage transparent) */
.ast-primary-header-bar,
#ast-desktop-header .ast-primary-header-bar,
.ast-primary-header-bar .site-primary-header-wrap,
body:not(.ast-theme-transparent-header) .ast-primary-header-bar,
body:not(.ast-theme-transparent-header) #ast-desktop-header .ast-primary-header-bar,
body.ast-theme-transparent-header .ast-primary-header-bar,
body.ast-theme-transparent-header #ast-desktop-header .ast-primary-header-bar {
  background-color: var(--color-white,#fff) !important;
  border-bottom: 1px solid var(--sp-border,#eef0f2) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) !important;
}
/* 2. top-level nav: dark, Roboto 600 13px uppercase .08em */
.main-header-menu .menu-item > a,
.ast-builder-menu-1 .menu-item > .menu-link,
body:not(.ast-theme-transparent-header) .main-header-menu .menu-item > a,
body:not(.ast-theme-transparent-header) .ast-builder-menu-1 .menu-item > .menu-link,
body.ast-theme-transparent-header .main-header-menu .menu-item > .menu-link,
body.ast-theme-transparent-header .ast-builder-menu-1 .menu-item > .menu-link {
  color: var(--color-dark,#1a1a1a) !important;
  font-family: var(--font-primary) !important;
  font-weight: 600 !important; font-size: 13px !important;
  text-transform: uppercase !important; letter-spacing: .08em !important;
}
/* 3. hover / active → orange (all pages) */
.main-header-menu .menu-item > a:hover,
.main-header-menu .menu-item.current-menu-item > a,
.main-header-menu .menu-item.current-menu-ancestor > a,
.ast-builder-menu-1 .menu-item > .menu-link:hover,
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .menu-item.current-menu-ancestor > .menu-link,
.ast-theme-transparent-header .main-header-menu .menu-item:hover > .menu-link,
.ast-theme-transparent-header .ast-builder-menu-1 .menu-item:hover > .menu-link {
  color: var(--color-primary,#E87722) !important;
}
/* 4. dropdowns: white bg, orange top border, dark sentence-case items → orange */
.main-header-menu .sub-menu,
.ast-builder-menu-1 .sub-menu {
  background: #fff !important;
  border-top: 2px solid var(--color-primary) !important;
  box-shadow: var(--shadow-lg,0 10px 15px rgba(0,0,0,.10)) !important;
}
.main-header-menu .sub-menu .menu-item > a,
.ast-builder-menu-1 .sub-menu .menu-item > .menu-link {
  color: var(--color-dark,#1a1a1a) !important;
  text-transform: none !important; letter-spacing: normal !important;
  font-weight: 500 !important; font-size: 14px !important;
}
.main-header-menu .sub-menu .menu-item > a:hover,
.ast-builder-menu-1 .sub-menu .menu-item > .menu-link:hover {
  color: var(--color-primary,#E87722) !important;
}
/* 5. hamburger dark on white */
.ast-mobile-menu-trigger-minimal,
.ast-button-wrap .ast-mobile-menu-trigger-minimal,
.ast-builder-menu-1 .ast-mobile-menu-trigger-fill,
.menu-toggle .ast-mobile-svg,
body:not(.ast-theme-transparent-header) .ast-mobile-menu-trigger-minimal,
body.ast-theme-transparent-header .ast-mobile-menu-trigger-minimal {
  color: var(--color-dark,#1a1a1a) !important; fill: var(--color-dark,#1a1a1a) !important;
}

/* white nav — cover BOTH Astra menu widgets (ast-builder-menu-1 right, -2 left) via shared .ast-builder-menu */
.ast-hfb-header .ast-builder-menu .menu-item > .menu-link,
.ast-builder-menu .menu-item > .menu-link {
  color: var(--color-dark,#1a1a1a) !important;
  font-family: var(--font-primary) !important; font-weight:600 !important; font-size:13px !important;
  text-transform:uppercase !important; letter-spacing:.08em !important;
}
.ast-builder-menu .menu-item > .menu-link:hover,
.ast-builder-menu .menu-item.current-menu-item > .menu-link,
.ast-builder-menu .menu-item.current-menu-ancestor > .menu-link {
  color: var(--color-primary,#E87722) !important;
}
.ast-builder-menu .sub-menu .menu-item > .menu-link {
  color: var(--color-dark,#1a1a1a) !important; text-transform:none !important; letter-spacing:normal !important;
  font-weight:500 !important; font-size:14px !important;
}
.ast-builder-menu .sub-menu .menu-item > .menu-link:hover,
.ast-builder-menu .sub-menu .menu-item.current-menu-item > .menu-link { color: var(--color-primary,#E87722) !important; }

/* ============================================================
   RECOVERY: re-applied 2026-07-10 additions (child style.css was
   truncated to 524B & redeployed; base restored from 07-09 backup,
   these blocks re-appended). Appended = wins by source order.
   ============================================================ */

/* --- DESIGN-AUDIT FIXES (Claude Design audit P0/P1/P2) --- */
#cmplz-cookiebanner-container .cmplz-cookiebanner{
  position:fixed!important;inset:auto 0 0 0!important;top:auto!important;
  width:100%!important;max-width:none!important;margin:0!important;
  border-radius:12px 12px 0 0!important;box-shadow:0 -8px 30px rgba(0,0,0,.18)!important;transform:none!important;
}
@media (min-width:900px){
  #cmplz-cookiebanner-container .cmplz-cookiebanner{
    inset:auto 1.5rem 1.5rem auto!important;left:auto!important;
    max-width:420px!important;width:auto!important;border-radius:12px!important;box-shadow:0 8px 30px rgba(0,0,0,.18)!important;
  }
}
#cmplz-cookiebanner-container .cmplz-btn{border-radius:var(--sp-radius-pill,9999px)!important;font-weight:700!important}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept{background:var(--sp-orange,#E87722)!important;border-color:var(--sp-orange,#E87722)!important;color:#fff!important}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover{background:var(--sp-orange-hover,#c4621c)!important;border-color:var(--sp-orange-hover,#c4621c)!important}
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences{background:transparent!important;border:2px solid var(--sp-border-warm,#e7e0d8)!important;color:var(--sp-text,#2d2d2d)!important}

.elementor-widget-sportlink_club_programma p.sp-empty{
  display:flex;align-items:center;justify-content:center;text-align:center;min-height:220px;
  background:var(--sp-surface-soft,#f7f5f0);border:1px solid var(--sp-border-warm,#e7e0d8);
  border-radius:var(--sp-radius-card,12px);padding:2.5rem 1.5rem;font-size:0;line-height:0;color:transparent;
}
.elementor-widget-sportlink_club_programma p.sp-empty::before{
  content:"Zodra de competitie begint, vind je hier alle wedstrijden — live uit Sportlink.";
  font-size:1.075rem;line-height:1.6;color:var(--sp-text-muted,#6b6b6b);max-width:44ch;font-family:var(--font-primary,'Roboto');
}

.sp-error{
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--sp-surface-soft,#f7f5f0)!important;border:1px solid var(--sp-border-warm,#e7e0d8)!important;
  border-radius:var(--sp-radius-card,12px);padding:2rem 1.5rem;min-height:120px;font-size:0!important;line-height:0;color:transparent!important;
}
.sp-error::before{content:"Deze informatie volgt zodra er wedstrijddata beschikbaar is.";font-size:1rem;line-height:1.6;color:var(--sp-text-muted,#6b6b6b);font-family:var(--font-primary,'Roboto');}

.sp-bestuur-photo{background:linear-gradient(160deg,#fdf3e7 0%,#f7ead9 100%)!important}
.sp-bestuur-initials{color:rgba(232,119,34,.45)!important;font-family:var(--font-display)!important;font-weight:400!important}

.sp-news-card__title,.sp-news-card__title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;}
.sp-news-filter [aria-pressed="true"],.sp-news-filter .active,.sp-nieuws-filters .active{background:var(--sp-orange,#E87722)!important;border-color:var(--sp-orange,#E87722)!important;color:#fff!important;font-weight:700}

.sp-hero--injected .sp-kicker,.sp-hero--injected .sp-hero__title,.sp-hero--injected .sp-hero__sub{text-shadow:0 1px 14px rgba(26,18,12,.45);}

.match-tab:focus-visible,.leden-card:focus-visible,.sto-card:focus-visible,.sp-btn:focus-visible,.bern-card a:focus-visible,.sp-gallery a:focus-visible,.sp-news-filter button:focus-visible,.team-group:focus-visible{outline:3px solid var(--sp-orange,#E87722);outline-offset:2px;border-radius:var(--sp-radius-pill,9999px);}
.leden-card:focus-visible,.sto-card:focus-visible,.sp-gallery a:focus-visible,.bern-card a:focus-visible{border-radius:var(--sp-radius-card,12px)}

.entry-content table,.sp-content-page table{width:100%;border-collapse:collapse}
.entry-content table td:last-child,.entry-content table th:last-child,.sp-content-page table td:last-child,.sp-content-page table th:last-child{text-align:right;font-weight:700}

.site-footer .ast-builder-social-element:hover svg,.site-footer a:hover .ahfb-svg{fill:var(--sp-orange,#E87722)!important;transition:fill .2s ease}

.bern-band--plain{background:linear-gradient(160deg,#3a2e24 0%,#2d241c 60%,#4a2f18 130%)}
.bern-band--plain .bern-band__scrim{display:none}

/* Variant C info-head */
.sp-head-c{position:relative;overflow:hidden;text-align:center;padding:clamp(2.5rem,6vw,3.5rem) 1.25rem;background:var(--sp-surface-soft,#f7f5f0);width:100vw;margin-left:calc(50% - 50vw);margin-bottom:var(--space-7,48px)}
.sp-head-c__bg{position:absolute;inset:0}
.sp-head-c__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.04) contrast(1.02);opacity:.2}
.sp-head-c__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,248,240,.55),rgba(247,245,240,.85))}
.sp-head-c>*:not(.sp-head-c__bg){position:relative;z-index:2}
.sp-head-c .sp-kicker{color:var(--sp-orange-hover,#c4621c)}
.sp-head-c h1{font-family:var(--font-display);text-transform:uppercase;color:var(--sp-text,#2d2d2d);margin:.25rem 0;font-size:clamp(1.9rem,4vw,2.6rem)}
.sp-head-c__sub{color:var(--sp-text-muted,#6b6b6b);max-width:52ch;margin:0 auto}
.sp-head-c p.sp-head-c__sub{margin:0 auto!important}
.sp-head-c__rule{display:inline-block;width:56px;height:4px;border-radius:2px;background:var(--sp-orange,#E87722);margin-top:1rem}

/* --- Homepage empty-state copy (Even zomerstop) --- */
body.page-id-540 .elementor-element-d300d18 .sp-hero__empty{font-size:0!important}
body.page-id-540 .elementor-element-d300d18 .sp-hero__empty::before{content:"Even zomerstop";display:block;font-size:clamp(1.15rem,2.6vw,1.7rem)}
body.page-id-540 .elementor-element-d300d18 .sp-hero__empty::after{content:"Het veld ligt er klaar voor — begin september rolt de bal weer. Tot dan!";display:block;margin-top:.55rem;font-family:var(--font-primary,'Roboto');text-transform:none;letter-spacing:normal;font-size:.95rem;font-weight:400;color:rgba(255,255,255,.9)}

/* --- Homepage: hide Bernardus 1 + Komende activiteiten blocks --- */
body.page-id-540 .elementor-element-b1sec02{display:none!important}
body.page-id-540 .elementor-element-evtsec01{display:none!important}

/* --- HOMEPAGE-SLOT: Contact "Hoe vind je ons" --- */
.hs-container{max-width:1200px;margin-inline:auto;padding-inline:1.25rem}
@media (min-width:1240px){.hs-container{padding-inline:0}}
.hs-contact{display:grid;grid-template-columns:1fr;gap:32px;align-items:center;padding-top:72px;padding-bottom:64px}
@media (min-width:900px){.hs-contact{grid-template-columns:.85fr 1.15fr;gap:56px}}
.hs-kicker{display:block;font-family:var(--font-primary,'Roboto');font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.14em;color:var(--sp-orange,#E87722)}
.hs-title{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2rem,3.5vw,2.5rem);color:var(--sp-text,#2d2d2d);margin:.35rem 0 0;line-height:1.05}
.hs-rule{display:inline-block;width:56px;height:4px;border-radius:2px;background:var(--sp-orange,#E87722);margin-top:14px}
.hs-address{font-style:normal;margin-top:20px;color:var(--sp-text-muted,#6b6b6b);line-height:1.9;font-family:var(--font-primary,'Roboto')}
.hs-address strong{display:block;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:1.25rem;color:var(--sp-text,#2d2d2d);margin-bottom:4px;letter-spacing:.01em}
.hs-cta{margin-top:22px}
.hs-map{border-radius:14px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 8px 24px rgba(0,0,0,.10);background:var(--sp-surface-soft,#f7f5f0)}
.hs-map iframe{width:100%;height:100%;border:0;display:block}
.hs-map .cmplz-placeholder-parent{position:relative;height:100%;display:block;background-image:linear-gradient(rgba(45,29,16,.18),rgba(45,29,16,.34)),url('/wp-content/uploads/2026/07/sportpark-hoofdveld.jpg');background-size:cover;background-position:center 45%;}
.hs-map .cmplz-placeholder-parent::before{content:"";position:absolute;left:50%;top:42%;width:34px;height:34px;transform:translate(-50%,-100%);background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E87722' stroke='white' stroke-width='1'%3E%3Cpath d='M12 2C7.9 2 4.5 5.4 4.5 9.5c0 5.6 7.5 12.5 7.5 12.5s7.5-6.9 7.5-12.5C19.5 5.4 16.1 2 12 2z'/%3E%3Ccircle cx='12' cy='9.5' r='2.6' fill='white' stroke='none'/%3E%3C/svg%3E");filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));pointer-events:none;z-index:1;}

/* --- CTA "Lid worden" pill = white text (base catch-all recolours it dark) --- */
body.ast-hfb-header .main-header-menu .menu-cta-button > a,
body.ast-hfb-header .main-header-menu .menu-cta-button > .menu-link,
body.ast-hfb-header:not(.ast-theme-transparent-header) .main-header-menu .menu-cta-button > a,
body.ast-hfb-header:not(.ast-theme-transparent-header) .main-header-menu .menu-cta-button > .menu-link,
body.ast-hfb-header .ast-builder-menu .menu-cta-button > a,
body.ast-hfb-header .ast-builder-menu .menu-cta-button > .menu-link,
body.ast-hfb-header .main-header-menu .menu-cta-button > a:hover,
body.ast-hfb-header .main-header-menu .menu-cta-button > .menu-link:hover{color:#ffffff!important;}

/* --- /aanmelden/: 2-card grid + Sportlink form labels = Roboto --- */
.bern-cards--two{max-width:760px;margin-inline:auto}
@media (min-width:700px){.bern-cards--two{grid-template-columns:repeat(2,1fr)}}
.sp-aanmelden__label,.sp-aanmelden__required,.sp-aanmelden__checkbox-label{font-family:var(--font-primary,'Roboto')!important}

/* ============================================================
   RECONSTRUCTED 2026-07-15: Wedstrijden sub-nav pills (.match-tabs/.match-tab).
   Base rules were lost in the 2026-07-10 style.css truncation (no backup held
   them); rebuilt to match the site filter-pill language. aria-current="page"
   marks the active section.
   ============================================================ */
.match-tabs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 28px;padding:0;list-style:none;}
.match-tab{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.55rem 1.15rem;border-radius:var(--sp-radius-pill,9999px);
  border:2px solid var(--sp-border-warm,#e7e0d8);background:#fff;
  font-family:var(--font-primary,'Roboto');font-weight:700;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--sp-text,#2d2d2d);
  text-decoration:none;line-height:1;white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.match-tab:hover{border-color:var(--sp-orange,#E87722);color:var(--sp-orange-hover,#c4621c);}
.match-tab[aria-current="page"],.match-tab.is-active{background:var(--sp-orange,#E87722);border-color:var(--sp-orange,#E87722);color:#fff;}

/* --- Clubhistorie (2830): centered ~760 article column to match Kennismaken (Option A, 2026-07-15).
   Was a 1140 box with left-pinned text + one media-right photo → lopsided. --- */
body.page-id-2830 .elementor-element-c30intro > .e-con-inner,
body.page-id-2830 .elementor-element-c30tl > .e-con-inner{max-width:760px!important;margin-left:auto!important;margin-right:auto!important}
body.page-id-2830 .elementor-element-c30intro .sp-lead{max-width:none!important}
body.page-id-2830 .sp-tl-item__body{max-width:none!important}
body.page-id-2830 .sp-tl-item--media-right{display:block!important}
body.page-id-2830 .sp-tl-item--media-right .sp-tl-item__media{margin-top:1.25rem!important;width:100%!important;max-width:100%!important}