/*
 Theme Name:   Astra Promotie
 Theme URI:    https://www.svpromotie.nl
 Description:  Child theme voor Schaakvereniging Promotie Zoetermeer
 Author:       SV Promotie
 Template:     astra
 Version:      1.2.1
 Text Domain:  astra-promotie
*/

/* ── Invoerformulier uitslagen (senioren) en jeugdberichten ──────────────── */
#svp-uitslag-wrap,
#svp-jeugd-wrap {
    margin: 1.5em 0 2em;
}
#svp-uitslag-form,
#svp-jeugd-form {
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1.25em 1.5em;
    margin-top: 1em;
}
#svp-uitslag-form h3,
#svp-jeugd-form h3 {
    margin-top: 0;
}
#svp-uitslag-tekst,
#svp-jeugd-tekst {
    width: 100%;
    font-family: monospace;
    font-size: 0.85em;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0.5em;
    box-sizing: border-box;
    margin-bottom: 0.75em;
    resize: vertical;
}
#svp-uitslag-feedback,
#svp-jeugd-feedback {
    margin: 0.5em 0;
    font-weight: 500;
    color: #333;
}
#svp-uitslag-annuleer,
#svp-jeugd-annuleer {
    margin-left: 0.75em;
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    text-decoration: underline;
}

.entry-title,
.wp-block-post-title {
    font-size: 1.625rem;
}

.site-title,
.site-title a {
    line-height: 1;
}

.site-title .title-prefix,
.site-title .title-main {
    display: block;
}

.main-header-menu {
    align-items: flex-start;
}

/* ── Menu verticale witruimte: 40% gereduceerd ───────────────────────────── */

/* Desktop dropdown items: 0.9em → 0.54em */
.main-header-menu .sub-menu .menu-link {
    padding-top: 0.54em !important;
    padding-bottom: 0.54em !important;
}

/* Hamburger menu items: line-height 3 → 1.8 (40% minder), padding 10px → 6px */
.ast-header-break-point .main-header-bar-navigation,
.ast-header-break-point .main-header-bar .main-header-bar-navigation,
.ast-header-break-point .ast-nav-menu .sub-menu,
.ast-header-break-point .main-header-bar .main-header-bar-navigation .sub-menu {
    line-height: 1.4 !important;
}

@media (max-width: 921px) {
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
}

/* ── Hamburgermenu: nav-panel in flow zodat content naar beneden schuift ──────
   Astra zet .ast-mobile-header-content op position:absolute zodat het menu
   over de content zweeft. Door het static te maken groeit de sticky header mee
   en schuift de pagina-inhoud naar beneden. display:none (gesloten) blijft
   gewoon werken — de override heeft alleen effect als het panel zichtbaar is. */
.ast-header-break-point .ast-mobile-header-content {
    position: static !important;
    top: auto !important;
}

/* ── Sticky header ───────────────────────────────────────────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--ast-global-color-4, #fff);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Het geopende hamburgermenu staat in de flow van deze sticky header (zie de
   regel hierboven bij .ast-mobile-header-content), dus de header wordt dan zo
   hoog als logobalk + menu samen. Op een klein toestel is dat meer dan het
   scherm: gemeten 580px in een venster van 480px. Een sticky element op top:0
   schuift niet mee, en het menupaneel heeft van zichzelf geen schuifbalk, dus
   die onderste regels waren op geen enkele manier te bereiken.
   Daarom hier een eigen schuifbalk zodra de header niet meer past. */
.ast-header-break-point.ast-main-header-nav-open .site-header {
    max-height: 100vh;
    /* 100vh telt op mobiel de strook achter de URL-balk mee; dvh niet. Safari
       12 kent dvh niet, negeert deze regel en houdt de 100vh hierboven. */
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Anker-links onder de sticky header ──────────────────────────────────────
   De browser zet het doel-element op y=0; de sticky header hierboven (±120 px)
   dekte dat vervolgens af, waardoor je bij b.v. #lid_worden de vólgende sectie
   bovenaan zag. scroll-padding houdt die strook vrij bij élke ankersprong,
   inclusief #top en de terug-naar-boven-knop. */
:target {
    scroll-margin-top: 130px;
    scroll-snap-margin-top: 130px; /* oude Safari (iOS 12) kent scroll-margin nog niet */
}

@media (max-width: 921px) {
    :target {
        scroll-margin-top: 120px;
        scroll-snap-margin-top: 120px;
    }
}


.site-title .title-prefix {
    font-size: 1.3rem;
    font-weight: 400;
    opacity: 0.7;
    line-height: 1.4;
}

.site-title .title-main {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.site-description {
    display: none !important;
}

@media (max-width: 600px) {
    .site-title .title-prefix { font-size: 1rem; }
    .site-title .title-main  { font-size: 1.9rem; }
}

@media (max-width: 390px) {
    .site-title .title-prefix { font-size: 0.95rem; }
    .site-title .title-main  { font-size: 1.65rem; }
}

@media (max-width: 921px) {
    header .custom-logo-link img,
    .site-logo img {
        max-width: 60px !important;
        width: 60px !important;
        height: auto !important;
    }
}

.nieuws-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .nieuws-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .nieuws-search-form {
        width: 100%;
    }
    .nieuws-search-input {
        width: 100%;
    }
}

.nieuws-toolbar-pagination {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nieuws-toolbar-pagination .prev.page-numbers,
.nieuws-toolbar-pagination .next.page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
}

.nieuws-search-form {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.nieuws-search-input {
    flex: 1;
    padding: 8px 12px;
    font-size: 1rem;
    border: 1px solid var(--ast-global-color-3);
    border-radius: 4px;
}

.nieuws-search-button {
    padding: 10px 20px;
    font-size: 0.75rem;
    cursor: pointer;
    border: 1px solid var(--ast-global-color-3);
    border-radius: 4px;
    background: var(--ast-global-color-4);
    color: var(--ast-global-color-2);
}

/* Top bar: search left, pagination right */
.nieuws-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.nieuws-top-bar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nieuws-top-bar .nieuws-search-form {
    flex: 0 1 300px;
}

.nieuws-wis-btn {
    font-size: 0.8rem;
    white-space: nowrap;
    text-decoration: none;
    opacity: 0.6;
}
.nieuws-wis-btn:hover {
    opacity: 1;
    text-decoration: underline;
}

.nieuws-top-bar .nieuws-search-input {
    padding: 6px 10px;
    font-size: 0.875rem;
}

.nieuws-top-bar .nieuws-search-button {
    padding: 6px 14px;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Bottom bar: count left, pagination right */
.nieuws-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--ast-global-color-3);
    flex-wrap: wrap;
    gap: 12px;
}

.nieuws-count {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ast-global-color-2);
    opacity: 0.65;
}

@media (max-width: 600px) {
    .nieuws-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .nieuws-top-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    .nieuws-top-bar .nieuws-search-form {
        width: 100%;
        flex: unset;
    }
    .nieuws-top-bar .nieuws-search-input {
        width: 100%;
    }
}

.site-header .site-description {
    font-size: 1.3rem;
}

.search-results .ast-article-post {
    width: 100%;
}

/* SS3 CTA buttons: brand colour, larger padding, hover lift */
.svp-banner-wrap a.n2-ow {
    background-color: #1535A8 !important;
    padding: 14px 20px !important;
    border-radius: 25px !important;
    box-shadow: 0 2px 10px rgba(21, 53, 168, 0.30) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

/* CTA button: smaller on mobile */
@media (max-width: 600px) {
    .svp-banner-wrap a.n2-ow {
        padding: 10px 22px !important;
    }

    /* De negatieve marge die hier de lege JS-hoogte (~106px) onderaan de slider
       wegnam is vervallen: de sliderhoogte staat nu op 420 en de lege rij onder
       de foto is uit de slides gehaald, dus die loze ruimte is er niet meer. */
    .svp-doelgroep-bar,
    .content-area {
        position: relative;
        z-index: 1;
    }
}

/* Slider arrows: inset from screen edges */
.svp-banner-wrap .n2-ss-slider-controls-absolute-left-center {
    left: 15px !important;
    right: 15px !important;
}

/* 750–1100px: keep left arrow within the text column (left 40%), out of the image */
@media (min-width: 750px) and (max-width: 1100px) {
    .svp-banner-wrap .n2-ss-slider-controls-absolute-left-center {
        width: 40% !important;
        right: auto !important;
    }
    .svp-banner-wrap .n2-ss-slider-controls-absolute-right-center {
        width: 40% !important;
        right: auto !important;
    }
}
/* 900–1099px: clip image column that overflows the slider frame by ~10px.
   Smart Slider JS fixes column positions in px, so padding-right cannot shift
   the image inward; overflow:hidden on the wrapper is the reliable clip.
   Upper bound is 1099.9px (not 1099px) to survive sub-pixel DPR rounding. */
@media (min-width: 900px) and (max-width: 1099.9px) {
    .svp-banner-wrap {
        overflow: hidden;
    }
}

/* White space under header: reduce internal slider section padding */
.svp-banner-wrap .n2-ss-section-main-content {
    padding-top: 0 !important;
}
.svp-banner-wrap .n2-ss-layer-row {
    padding-top: 0 !important;
}

/* Banner columns 750–1100px: tekst 52%, foto 48% (gelijk aan de slide-instelling
   13/25 – 12/25, zodat de foto ook hier 70% van haar oude formaat is) */
@media (min-width: 750px) and (max-width: 1100px) {
    .svp-banner-wrap .n2-ss-layer-row-inner > [data-sstype="col"]:first-child {
        width: 52% !important;
        flex: 0 0 52% !important;
        max-width: 52% !important;
    }
    .svp-banner-wrap .n2-ss-layer-row-inner > [data-sstype="col"]:last-child {
        width: 48% !important;
        flex: 0 0 48% !important;
        max-width: 48% !important;
    }
}

/* Responsive banner: scale text, line-heights and gaps at intermediate widths.
   All font sizes (180%/120%/130%) and em-based spacing are relative to the
   slider base font-size, so one rule scales everything proportionally. */
@media (min-width: 1000px) and (max-width: 1080px) {
    .svp-banner-wrap #n2-ss-5 {
        font-size: 14.4px !important; /* 16px × 0.90 — 10% smaller */
    }
}
@media (min-width: 900px) and (max-width: 999px) {
    .svp-banner-wrap #n2-ss-5 {
        font-size: 12.8px !important; /* 16px × 0.80 — 20% smaller */
    }
}

.svp-banner-wrap a.n2-ow:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(21, 53, 168, 0.45) !important;
    background-color: #1030c0 !important;
}

.ast-container:has(.svp-banner-wrap),
body.tribe-events-page-template #content .ast-container {
    flex-wrap: wrap;
}

body.tribe-events-page-template #masthead .site-title,
body.tribe-events-page-template #masthead .ast-site-title-wrap {
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.svp-banner-wrap {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 0;
}

.ast-container:has(.svp-banner-wrap) > .content-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.nieuws-post-list {
    display: flex;
    flex-direction: column;
}

.nieuws-post-list article.ast-article-single {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Thumbnail links in nieuwslijst — desktop: grid met thumb links, kop+tekst rechts */
.nieuws-post-inner {
    display: grid;
    grid-template-columns: 156px 1fr;
    grid-template-areas:
        "thumb title"
        "thumb meta"
        "thumb body";
    gap: 0 18px;
    align-items: start;
}

.nieuws-post-thumb {
    grid-area: thumb;
    display: block;
    border-radius: 6px;
    align-self: flex-start;
}

.nieuws-post-thumb img {
    width: auto;
    max-width: 156px;
    height: auto;
    display: block;
    border-radius: 6px;
}

.nieuws-post-title {
    grid-area: title;
    margin-top: 0;
}

.nieuws-post-meta {
    grid-area: meta;
}

/* Categorie • Auteur • Datum mag afbreken op smalle schermen */
.nieuws-post-meta .wp-block-group {
    flex-wrap: wrap;
}

.nieuws-post-body {
    grid-area: body;
    min-width: 0;
}

/* Mobiel: kop → meta → foto (gecentreerd) → uittreksel */
@media (max-width: 480px) {
    .nieuws-post-inner {
        display: flex;
        flex-direction: column;
    }
    .nieuws-post-title  { order: 1; }
    .nieuws-post-meta   { order: 2; }
    .nieuws-post-thumb  { order: 3; width: 156px; align-self: center; }
    .nieuws-post-body   { order: 4; }
    .nieuws-post-thumb--leeg { display: none; }
}

.nieuws-toolbar-pagination .page-numbers {
    margin-right: 4px;
}

.nieuws-toolbar-pagination .nav-symbol,
.nieuws-toolbar-pagination .first-page,
.nieuws-toolbar-pagination .last-page {
    font-size: 1.5rem;
    line-height: 1;
}

@media (max-width: 600px) {
    .nieuws-toolbar-pagination .nav-text {
        display: none;
    }
}

/* ── Doelgroep-toggle ─────────────────────────────────────────────────────────
   Persistente balk direct onder de header — altijd zichtbaar, inclusief 320px.
   ─────────────────────────────────────────────────────────────────────────── */

.svp-doelgroep-bar {
    background: transparent;
    padding: 0 20px 8px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.svp-doelgroep-inner {
    max-width: var(--ast-content-width, 1200px);
    margin: 0 auto;
}

/* Segmented control */
.svp-doelgroep-toggle {
    display: inline-flex;
    gap: 3px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50px;
    padding: 3px;
}

.svp-toggle-btn {
    padding: 4px 14px;
    font-size: 0.75rem;
    font-weight: 500;
    border: none;
    border-radius: 50px;
    background: transparent;
    color: var(--ast-global-color-2);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    line-height: 1.4;
    min-height: 32px;
}

.svp-toggle-btn:hover:not(.is-active) {
    background: rgba(21, 53, 168, 0.08);
}

.svp-toggle-btn.is-active {
    background: rgba(21, 53, 168, 0.12);
    color: #1535A8;
}

/* Wijs menu-items toe aan een doelgroep via de CSS-klassen
   'senioren-only' of 'jeugd-only' in het WordPress navigatiemenu. */
.doelgroep-senioren .jeugd-only    { display: none; }
.doelgroep-jeugd    .senioren-only { display: none; }

/* 320px+: compactere padding, zelfde toggle past ruim binnen de breedte */
@media (max-width: 600px) {
    .svp-doelgroep-bar {
        padding: 0 12px 6px;
    }
    .svp-toggle-btn {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

/* ── Compacte tabellen in post-content ──────────────────────── */
.entry-content table {
    font-size: 0.9em;
    border-collapse: collapse;
}
.entry-content table td,
.entry-content table th {
    padding: 0.2em 0.5em;
    line-height: 1.35;
    vertical-align: middle;
}
.entry-content table td p,
.entry-content table th p {
    margin: 0;
}

/* ── Jeugduitslagen: opmaak van de oude site (svpromotie.nl/oud) ────────── */
/*
 * De jeugdleider plakt de HTML van het toernooiprogramma en die blijft intact:
 * die tabellen zijn de layout. De oude site zette er Verdana 12px omheen en
 * verder niets - geen randen, geen celvulling op 1px na, geen volle breedte.
 * Gemeten op de lokale kopie, http://localhost:8080/index.php?pagina=intern.
 *
 * Staat bewust na de compacte-tabellenregels hierboven: die zijn even specifiek
 * (.entry-content table td), dus alleen de volgorde geeft hier de doorslag.
 */
.svp-jeugd-uitslag {
    font-family: Verdana, Tahoma, sans-serif, Helvetica, Arial;
    font-size: 12px;
    line-height: normal;
    color: #000;
    /* #DDEEFF is de achtergrond van body, .content en table op de oude
       jeugdsite; de 10px is de padding van .content daar. */
    background-color: #DDEEFF;
    padding: 10px;
    overflow-x: auto;
}
.svp-jeugd-uitslag p {
    font-size: 12px;
    line-height: normal;
    margin: 12px 0;
}
.svp-jeugd-uitslag table {
    width: auto;
    margin: 0;
    font-size: 12px;
    background: none;
    border: 0;
    border-collapse: separate;
    border-spacing: 2px;
}
.svp-jeugd-uitslag table th,
.svp-jeugd-uitslag table td {
    font-size: 12px;
    font-weight: normal;
    line-height: normal;
    color: inherit;
    background: none;
    border: 0;
    padding: 1px;
    vertical-align: middle;
    letter-spacing: normal;
    text-transform: none;
}
/* Zonder deze regels wint Astra's text-align van het align-attribuut. */
.svp-jeugd-uitslag table th[align="left"],
.svp-jeugd-uitslag table td[align="left"] {
    text-align: left;
}
.svp-jeugd-uitslag table th[align="right"],
.svp-jeugd-uitslag table td[align="right"] {
    text-align: right;
}
.svp-jeugd-uitslag table th[align="center"],
.svp-jeugd-uitslag table td[align="center"] {
    text-align: center;
}

/* Single post: bredere contentkolom op desktop */
body.single-post.ast-narrow-container .site-content > .ast-container {
    max-width: 1000px !important;
}

/* ── Terug naar nieuws pill-knop boven post-content ─────────── */
.svp-terug-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    margin-bottom: 1.25rem;
    padding: 0.35em 0.9em;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ast-global-color-0, #1a1a1a);
    opacity: 0.65;
    transition: opacity 0.15s;
}
/* Wijd de content-kolom op voor column-posts met een embedded PDF */
.svp-column-single.ast-narrow-container .ast-container {
    max-width: 1200px !important;
}
.svp-column-single.ast-narrow-container article.ast-article-single {
    max-width: 100% !important;
}

.column-pdf-embed {
    display: block;
    margin-top: 1.5rem;
    border: 1px solid var(--ast-global-color-3);
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    height: 85vh;
    min-height: 600px;
    max-height: 1200px;
}

.column-pdf-embed [role="region"] {
    height: 100%;
}

.column-pdf-embed .pdfjs-iframe {
    display: block;
    width: 100% !important;
    height: 100% !important;
    border: none;
}

.svp-terug-btn:hover {
    opacity: 1;
    text-decoration: none;
}

/* ── Columns split-pane layout ───────────────────────────────────────────────*/

.svp-columns-layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 0;
    align-items: start;
    border: 1px solid var(--ast-global-color-3, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
}

/* Left panel: sticky sidebar with its own scroll */
.svp-columns-toc {
    position: sticky;
    top: 80px;
    height: calc(100vh - 100px);
    overflow-y: auto;
    border-right: 1px solid var(--ast-global-color-3, #e0e0e0);
    background: var(--ast-global-color-5, #f9f9f9);
}

.svp-columns-filters {
    padding: 12px 12px 8px;
    border-bottom: 1px solid var(--ast-global-color-3, #e0e0e0);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.svp-columns-filters .nieuws-search-form {
    display: flex;
    gap: 6px;
}

.svp-columns-filters .nieuws-search-input {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    padding: 5px 8px;
}

.svp-columns-filters .nieuws-search-button {
    font-size: 0.8rem;
    padding: 5px 10px;
    white-space: nowrap;
}

.svp-columns-filters .nieuws-wis-btn {
    font-size: 0.75rem;
    align-self: flex-start;
}

/* TOC list */
.svp-toc-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.svp-toc-item {
    border-bottom: 1px solid var(--ast-global-color-3, #e8e8e8);
}

.svp-toc-item:last-child {
    border-bottom: none;
}

.svp-toc-btn {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    padding: 8px 12px;
    line-height: 1.3;
    transition: background 0.1s;
}

.svp-toc-btn:hover {
    background: rgba(21, 53, 168, 0.06);
}

.svp-toc-item.svp-toc-active {
    background: rgba(21, 53, 168, 0.15);
    border-left: 3px solid #1535A8;
    border-radius: 0;
}

.svp-toc-item.svp-toc-active .svp-toc-btn {
    border-radius: 0;
    padding-left: 9px;
}

.svp-toc-title {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ast-global-color-0, #1a1a1a);
    margin-bottom: 2px;
}

.svp-toc-meta {
    display: block;
    font-size: 0.72rem;
    color: var(--ast-global-color-2, #666);
}

.svp-toc-sep {
    opacity: 0.5;
}

.svp-toc-sentinel {
    height: 1px;
}

/* Right panel: column viewer */
.svp-columns-viewer {
    padding: 1.75rem 2rem 2rem;
    min-height: 400px;
    overflow-wrap: break-word;
}

.svp-viewer-title {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 0.4rem;
    line-height: 1.25;
}

.svp-viewer-meta {
    font-size: 0.85rem;
    color: var(--ast-global-color-2, #666);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.3em;
    flex-wrap: wrap;
}

.svp-viewer-content {
    font-size: 0.95rem;
    line-height: 1.7;
}

.svp-viewer-empty {
    color: var(--ast-global-color-2, #666);
    padding: 2rem 0;
}

/* Responsive: stack below 768px */
@media (max-width: 768px) {
    .svp-columns-layout {
        grid-template-columns: 1fr;
    }

    .svp-columns-toc {
        position: static;
        height: auto;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--ast-global-color-3, #e0e0e0);
    }

    .svp-columns-viewer {
        padding: 1.25rem 1rem 1.5rem;
    }
}

/* ── Rating-pagina ───────────────────────────────────────────────────────────── */

.svp-rating-wrap {
    max-width: 680px;
}

.svp-rating-periode {
    color: var(--ast-global-color-2, #5a6a80);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.svp-rating-laden {
    font-style: italic;
    color: var(--ast-global-color-2, #5a6a80);
}

.svp-rating-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.svp-rating-table th,
.svp-rating-table td {
    padding: 6px 10px;
    border: 1px solid var(--ast-global-color-3, #e0e0e0);
    vertical-align: middle;
}

.svp-rating-table thead tr {
    background-color: #1535A8;
    color: #ffffff;
    font-weight: bold;
}

.svp-rating-table thead th {
    text-align: left;
}

.svp-rating-table tbody tr:nth-child(even) {
    background-color: #eef1fb;
}

.svp-rating-table tbody tr:hover {
    background-color: #d8dff5;
}

.svp-col-nr     { width: 36px; text-align: center; }
.svp-col-rating { width: 80px; text-align: center; }
.svp-col-fide   { width: 80px; text-align: center; }

.svp-rating-bron {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--ast-global-color-2, #5a6a80);
}

.svp-rating-fout {
    color: #8B1C24;
    font-style: italic;
}

/* De Promoot 2 - compacte alinea-afstand */
.page-id-13568 .entry-content p {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

/* Contactgegevens - contributietabel zelfde stijl als rating */
.page-id-8667 .wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9em;
}
.page-id-8667 .wp-block-table th,
.page-id-8667 .wp-block-table td {
    padding: 6px 10px;
    border: 1px solid var(--ast-global-color-3, #e0e0e0);
    text-align: left;
}
.page-id-8667 .wp-block-table thead tr {
    background-color: #1535A8;
    color: #ffffff;
    font-weight: bold;
}
.page-id-8667 .wp-block-table tbody tr:nth-child(even) {
    background-color: #eef1fb;
}
.page-id-8667 .wp-block-table tbody tr:hover {
    background-color: #d8dff5;
}

/* De Promoot 2 - ruimte voor tabel */
.page-id-13568 .entry-content table {
    margin-top: 1em;
}

/* De Promoot 2 - ruimte boven Jubileumboeken */
.page-id-13568 .svp-jubileum-heading {
    margin-top: 0.8em;
}

/* De Promoot (origineel) - zelfde compacte opmaak als De Promoot 2 */
.page-id-13449 .entry-content p {
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}
.page-id-13449 .entry-content table {
    margin-top: 1em;
}
.page-id-13449 .svp-jubileum-heading {
    margin-top: 0.8em;
}

/* ── Feedbackformulier ───────────────────────────────────────────────────────── */

.svp-feedback-form {
    max-width: 600px;
    margin-top: 1.5rem;
}

.svp-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 1.25rem;
}

.svp-field label {
    font-weight: 600;
    font-size: 0.9rem;
}

.svp-required {
    color: #c0392b;
}

.svp-optional {
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--ast-global-color-2, #666);
}

.svp-feedback-form input[type="text"],
.svp-feedback-form input[type="email"],
.svp-feedback-form textarea {
    width: 100%;
    padding: 9px 12px;
    font-size: 0.95rem;
    border: 1px solid var(--ast-global-color-3, #ccc);
    border-radius: 4px;
    background: #fff;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.svp-feedback-form input:focus,
.svp-feedback-form textarea:focus {
    outline: none;
    border-color: #1535A8;
    box-shadow: 0 0 0 2px rgba(21, 53, 168, 0.15);
}

.svp-feedback-form textarea {
    resize: vertical;
    min-height: 130px;
}

.svp-field--submit {
    margin-top: 0.5rem;
}

.svp-feedback-btn {
    padding: 10px 28px;
    font-size: 0.95rem;
    cursor: pointer;
}

.svp-feedback-notice {
    max-width: 600px;
    padding: 14px 18px;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.svp-feedback-notice p {
    margin: 0;
}

.svp-feedback-success {
    background: #eaf6ee;
    border: 1px solid #6dbf84;
    color: #1e5c30;
}

.svp-feedback-error {
    background: #fdf0f0;
    border: 1px solid #e08080;
    color: #8b1c24;
}

.svp-feedback-list {
    max-width: 600px;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--ast-global-color-3, #e0e0e0);
}

.svp-feedback-list-title {
    font-size: 1.1rem;
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.svp-feedback-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.svp-feedback-item {
    background: var(--ast-global-color-5, #f9f9f9);
    border: 1px solid var(--ast-global-color-3, #e0e0e0);
    border-radius: 6px;
    padding: 14px 16px;
}

.svp-feedback-item-meta {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.svp-feedback-item-naam {
    font-size: 0.9rem;
}

.svp-feedback-item-datum {
    font-size: 0.78rem;
    color: var(--ast-global-color-2, #666);
}

.svp-feedback-item-bericht {
    font-size: 0.9rem;
    line-height: 1.6;
}

.svp-feedback-item-bericht p:last-child {
    margin-bottom: 0;
}

.svp-feedback-login-msg {
    font-size: 0.95rem;
    color: var(--ast-global-color-2, #666);
    margin-top: 1rem;
}

.svp-login-notice {
    width: 100%;
}

.svp-login-notice::before {
    content: '🔒';
    font-family: sans-serif;
    margin-right: 0.3em;
    font-size: 0.9em;
}

/* De Promoot - NB noten en lijst */
.page-id-13449 .entry-content ul {
    margin: 0.4em 0 0.6em 1.5em;
    padding: 0;
}
.page-id-13449 .entry-content ul li {
    margin-bottom: 0.15em;
}
.page-id-13449 .svp-nb {
    margin-top: 0.35em;
    margin-bottom: 0;
    font-size: 0.92em;
    color: #444;
}

/* ── Verwijder-knop per uitslagenpost ───────────────────────────────────────── */
.svp-post-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 0;
}

.svp-post-header-row h2.wp-block-post-title {
    margin-bottom: 0;
}

.svp-verwijder-wrap {
    flex-shrink: 0;
}

.svp-verwijder-btn.ast-button,
.svp-wijzig-btn.ast-button {
    font-size: 0.82rem;
    padding: 0.25em 0.9em;
    line-height: 1.6;
}

/* ── Login/logout menu-item ─────────────────────────────────────────────────── */
.svp-account-item {
    display: flex;
    align-items: center;
    padding: 0 10px;
}

.svp-account-item a {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    opacity: 0.55;
    font-size: 0.88em;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}
.svp-account-item a:hover {
    opacity: 1;
}
.svp-logged-in a {
    font-style: italic;
}

/* ── Login/logout in hamburgermenu ──────────────────────────────────────────── */
.svp-mobile-account {
    border-top: 1px solid var(--ast-global-color-3, #e0e0e0) !important;
    margin-top: 4px;
}

.svp-mobile-account > a {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4em;
    opacity: 0.65;
}

.svp-mobile-account > a:hover {
    opacity: 1;
}

.svp-mobile-account.svp-logged-in > a {
    font-style: italic;
}

/* ── Agenda lijst: compacte eenregelige layout ───────────────────────────────*/

.tribe-events-calendar-list__list-item.svp-agenda-row,
.svp-agenda-row {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

.tribe-events .svp-agenda-event,
article.svp-agenda-event {
    display: flex !important;
    align-items: baseline;
    gap: 0;
    padding: 0.1rem 0;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.svp-agenda-event .svp-agenda-datetime {
    flex: 0 0 220px;
    min-width: 220px;
    white-space: nowrap;
    font-size: 0.875em;
    color: var(--ast-global-color-1, #555);
}

.svp-agenda-event .svp-agenda-title {
    flex: 1;
    margin: 0 !important;
    padding: 0;
    font-size: 0.875em;
    font-weight: normal;
    line-height: inherit;
}

.svp-agenda-event .svp-agenda-title a {
    color: inherit;
}

/* TEC-archief krijgt altijd ast-two-container van Astra, ongeacht sidebar-instelling */
body.tribe-events-page-template #primary.content-area {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Verwijder TEC container top-padding en verberg TEC header-balk */
.tribe-events-l-container {
    padding-top: 0 !important;
}

.tribe-events-header {
    display: none !important;
}

/* Categorie-badge: pill-shape, subtiele tint, kleur per categorie */
.svp-agenda-event .svp-agenda-category {
    flex: 0 0 80px;
    min-width: 80px;
    margin-right: 10px;
    font-size: 0.72em;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    border-radius: 50px;
    padding: 2px 8px;
    color: #555;
    background: rgba(0, 0, 0, 0.08);
    align-self: center;
}

article.cat_senioren .svp-agenda-category {
    background: rgba(21, 53, 168, 0.12);
    color: var(--ast-global-color-0, #1535A8);
}

article.cat_jeugd .svp-agenda-category {
    background: rgba(26, 107, 58, 0.12);
    color: var(--ast-global-color-1, #1A6B3A);
}

article.cat_algemeen .svp-agenda-category {
    background: rgba(0, 0, 0, 0.07);
    color: #666;
}

@media (max-width: 600px) {
    .tribe-events .svp-agenda-event,
    article.svp-agenda-event {
        flex-wrap: wrap !important;
    }
    .svp-agenda-event .svp-agenda-datetime {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .svp-agenda-event .svp-agenda-title {
        flex: 0 0 100% !important;
        padding-top: 2px !important;
    }
}

/* ── Fix dubbele header (iOS 12 / wp_is_mobile) ─────────────────────────────
   Astra zet .ast-header-break-point server-side op <body> zodra wp_is_mobile()
   waar is (dus ook op een iPad). Normaal verwijdert frontend.js die class weer
   boven 921px, maar op oude Safari (iOS 12) draait dat script niet -> zowel de
   desktop- als de mobiele header zichtbaar in liggende stand.                */
@media (min-width: 922px) {
    .ast-header-break-point #ast-mobile-header { display: none !important; }
}

/* ── Fallback typografie voor oude Safari (iOS 12) ──────────────────────────
   Astra en WordPress schrijven selectors als `.entry-content :where(h1), h1`.
   Safari 12 kent :where()/:is()/:has() niet en gooit dan de HELE regel weg —
   62 regels op deze site. Gevolg: alle koppen en de sitetitel verliezen hun
   lettertype, grootte, regelhoogte en kleur en vallen terug op de standaard
   browserstijl.

   De ES5-shim in functions.php zet de class .svp-legacy-css op <html> zodra de
   browser geen optional chaining kent (exact dezelfde browsers waar Astra's
   frontend.js niet draait). Onderstaande regels gelden dus uitsluitend daar en
   veranderen niets voor moderne browsers.

   LET OP: dit zijn kopieën van de Astra-typografie. Wijzig je de typografie in
   de Customizer, pas deze waarden dan mee aan.                               */

.svp-legacy-css h1,
.svp-legacy-css h2,
.svp-legacy-css h3,
.svp-legacy-css h4,
.svp-legacy-css h5,
.svp-legacy-css h6 {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    color: var(--ast-global-color-2);
}

.svp-legacy-css .site-title,
.svp-legacy-css .site-title a {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
}

.svp-legacy-css h1 { font-size: 3.55556rem;  line-height: 1.4em;  }
.svp-legacy-css h2 { font-size: 2.66667rem;  line-height: 1.3em;  }
.svp-legacy-css h3 { font-size: 1.33333rem;  line-height: 1.3em;  }
.svp-legacy-css h4 { font-size: 1.11111rem;  line-height: 1.2em;  }
.svp-legacy-css h5 { font-size: 1rem;        line-height: 1.2em;  }
.svp-legacy-css h6 { font-size: 0.833333rem; line-height: 1.25em; }

.svp-legacy-css .entry-content h1,
.svp-legacy-css .entry-content h2,
.svp-legacy-css .entry-content h3,
.svp-legacy-css .entry-content h4,
.svp-legacy-css .entry-content h5,
.svp-legacy-css .entry-content h6 {
    margin-bottom: 20px;
    clear: none;
}

/* WordPress-core regel die eveneens sneuvelt: blokinhoud blijft anders niet
   gecentreerd binnen de contentbreedte. */
.svp-legacy-css .is-layout-constrained > :not(.alignleft):not(.alignright):not(.alignfull) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── Layout-fallback voor oude Safari (iOS 12), vervolg ─────────────────────
   Deze child-theme regel sneuvelt op Safari 12 omdat er :has() in staat:

       .ast-container:has(.svp-banner-wrap),
       body.tribe-events-page-template #content .ast-container { flex-wrap: wrap }

   Zonder die flex-wrap komt de content-area náást de banner te staan en valt
   hij volledig buiten beeld (op 1024px stond hij op x=1269). :has() is niet na
   te bootsen in CSS, dus de shim in functions.php zet zelf de class
   .svp-has-banner op de juiste .ast-container. Let op: het tweede deel van de
   selector (tribe-events) bevat zelf geen :has(), maar sneuvelt mee omdat
   Safari 12 de héle regel weggooit — daarom hieronder apart herhaald.        */

.svp-legacy-css .ast-container.svp-has-banner {
    flex-wrap: wrap;
}

.svp-legacy-css .ast-container.svp-has-banner > .content-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.svp-legacy-css body.tribe-events-page-template #content .ast-container {
    flex-wrap: wrap;
}

/* Astra's `.ast-desktop:not(:has(.ast-header-sticked)) …` sneuvelt eveneens;
   deze site gebruikt geen sticky header, dus de waarde kan onvoorwaardelijk. */
.svp-legacy-css .ast-desktop .ast-primary-header-bar .main-header-menu > .menu-item {
    line-height: 110px;
}

/* ── Hamburgermenu: ouder-items niet aanklikbaar ─────────────────────────────
   De ouder-items (Jeugd, Senioren, De Club en de subniveaus Intern/Extern) zijn
   custom links met href="#". Een tik op het label navigeerde daardoor naar
   https://svpromotie2.nl/# én sloot het hamburgermenu, zonder het submenu te
   openen. Oplossing: het label krijgt pointer-events:none, en de losse
   toggle-knop (die Astra absoluut rechts positioneert) wordt over de hele
   menuregel uitgerekt. Een tik ergens op de regel klapt het submenu dus open of
   dicht; navigeren gebeurt niet meer.

   Let op: de knop wordt alleen over de eígen regel uitgerekt (bottom:auto), niet
   over het geopende submenu. De z-index op .sub-menu is een vangnet voor de
   ~0,8px die de knop door afronding onderaan overloopt, zodat submenu-links
   altijd klikbaar blijven.

   De [href="#"] in de eerste selector zorgt dat een ouder-item dat later een
   échte pagina-URL krijgt gewoon aanklikbaar blijft. Krijgt zo'n item een echte
   URL, pas dan ook de tweede selector aan — de uitgerekte knop zou de link
   anders afdekken. */

.ast-header-break-point #ast-hf-mobile-menu .menu-item-has-children > .menu-link[href="#"] {
    pointer-events: none;
}

.ast-header-break-point #ast-hf-mobile-menu .menu-item-has-children > .ast-menu-toggle {
    top: 0;
    right: 0;
    left: 0;
    bottom: auto;
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 4px 15px 4px 0;
}

.ast-header-break-point #ast-hf-mobile-menu .menu-item-has-children > .sub-menu {
    position: relative;
    z-index: 1;
}