/* ============================================
   Kadence Child Theme — Custom CSS v1.6.23
   Prof Chris L. de Wet
   Bento Grid, Outfit typography, classical watermarks
   ============================================ */

/* ============================================
   CSS Custom Properties — Refined Classical Palette
   ============================================ */
:root {
    --parchment: #F7F7F8;          /* was cream page bg */
    --parchment-dark: #E8E8EC;
    --terracotta: #5B4B8A;         /* restrained purple primary */
    --terracotta-light: #7A6BA0;
    --gold: #4A3B73;               /* deeper purple for accents/buttons */
    --gold-light: #8B7DB5;
    --ink-dark: #111111;
    --ink-body: #2A2A2A;
    --cream: #FFFFFF;
    --warm-gray: #D0D0D6;
    --stone: #555555;

    --bento-radius: 12px;
    --bento-gap: 0.85rem;
    --bento-bg: rgba(255, 255, 255, 0.72);
    --bento-border: rgba(17, 17, 17, 0.08);
    --bento-shadow: 0 2px 16px rgba(17, 17, 17, 0.06);
    --bento-shadow-hover: 0 8px 32px rgba(17, 17, 17, 0.10);
}

/* ============================================
   OUTFIT — Modern Sans for Headings
   Outfit + DM Sans via Google Fonts CDN.
   Kinetic scaling: weight shifts on scroll via CSS.
   ============================================ */
/* Headings use Outfit */
h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading,
.site-title,
.newsletter-form__heading,
.magic-login__heading,
.sermon-media-heading,
.video-grid__title,
.sermon-audio__title,
.premium-cta-heading,
.pmpro_card_title,
.widget-title {
    font-family: "Outfit", system-ui, sans-serif !important;
}

/* Kinetic weight animation removed — Outfit is static-weight */

/* ============================================
   BENTO GRID — Homepage layout
   Targets the actual rendered HTML structure:
     .wp-block-group > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column
   Custom classes (bento-grid, bento-card) are stripped by WordPress block editor,
   so we select by structure instead.
   ============================================ */

/* The outer group that wraps the 4-card section.
   We identify it as the SECOND .wp-block-group on the homepage
   (first is the hero).  We use :nth-of-type to be specific,
   but the styles are scoped enough that they won't leak. */
body.home .wp-block-group:nth-of-type(2) > .wp-block-group__inner-container > .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bento-gap);
    width: 100%;
    margin: 1.25rem 0;
}

/* Each column becomes a bento card */
body.home .wp-block-group:nth-of-type(2) > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
    flex-grow: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    min-width: 0;
    background: var(--bento-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--bento-border);
    border-radius: var(--bento-radius);
    padding: 1.15rem;
    box-shadow: var(--bento-shadow);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
    will-change: transform;
    position: relative;
    overflow: hidden;
}

/* Magnetic hover: subtle scale + lift */
body.home .wp-block-group:nth-of-type(2) > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--bento-shadow-hover);
    border-color: rgba(74, 59, 115, 0.25);
}

/* Glass variant for the cards */
body.home .wp-block-group:nth-of-type(2) > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Card heading styling */
body.home .wp-block-group:nth-of-type(2) h3.wp-block-heading {
    font-family: "Outfit", system-ui, sans-serif !important;
    font-size: 1.15rem;
    color: var(--ink-dark);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

/* Card link styling */
body.home .wp-block-group:nth-of-type(2) a[href^="/"] {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--terracotta);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.2s, gap 0.2s;
}
body.home .wp-block-group:nth-of-type(2) a[href^="/"]:hover {
    color: var(--gold);
}
body.home .wp-block-group:nth-of-type(2) a[href^="/"]::after {
    content: " →";
    display: inline;
    transition: margin-left 0.2s;
}
body.home .wp-block-group:nth-of-type(2) a[href^="/"]:hover::after {
    margin-left: 4px;
}

/* Responsive Bento Grid */
@media (max-width: 1024px) {
    body.home .wp-block-group:nth-of-type(2) > .wp-block-group__inner-container > .wp-block-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    body.home .wp-block-group:nth-of-type(2) > .wp-block-group__inner-container > .wp-block-columns {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ARTICLE CARDS — Blog archive hover effect
   Same magnetic lift as homepage bento cards
   ============================================ */
.loop-entry {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease !important;
    will-change: transform;
}
.loop-entry:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--bento-shadow-hover) !important;
    border-color: rgba(74, 59, 115, 0.25) !important;
}

/* ============================================
   Parchment Background Class
   ============================================ */
.bg-parchment {
    background-color: var(--parchment) !important;
}

/* ============================================
   Watermark Class — for rows / sections
   Usage: add class "has-watermark" to any group/row
   ============================================ */
.has-watermark {
    position: relative;
    overflow: visible;
}
.has-watermark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}
.has-watermark > * {
    position: relative;
    z-index: 1;
}

/* Christ mosaic watermark (reuse existing reference) */
.has-watermark-christ::before {
    background-image: url('/wp-content/uploads/2026/06/mosaic-christ.jpg');
    opacity: 0.04;
}

/* ============================================
   PER-PAGE HERO WATERMARKS — Early Christian Iconography
   Each page gets a unique subtle watermark under its hero heading.
   Applied via body classes from the MU plugin.
   Uses background-image directly on .entry-hero (not ::before)
   so it cannot be covered by child elements.
   ============================================ */

/* Shared watermark base */
.watermark-fish-loaves .entry-hero,
.watermark-good-shepherd .entry-hero,
.watermark-codex .entry-hero,
.watermark-chi-rho .entry-hero,
.watermark-dove .entry-hero,
.watermark-anchor .entry-hero,
.watermark-ichthys .entry-hero,
.watermark-peacocks .entry-hero,
.watermark-scroll .entry-hero {
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    background-blend-mode: normal !important;
    filter: brightness(1.12) contrast(1.02);
}

/* 1. Artikels / Articles — Fish and Loaves (Eucharist, Catacomb of Callistus)
   The earliest Christian symbol: two fish with five loaves = the Eucharist */
.watermark-fish-loaves .entry-hero {
    background-image: linear-gradient(rgba(247, 247, 248, 0.28), rgba(247, 247, 248, 0.28)),
                      url('/wp-content/uploads/2026/06/watermark-fish-loaves.jpg');
}

/* 2. Preke en Praatjies / Sermons & Talks — Good Shepherd (Mausoleum of Galla Placidia)
   Christ as shepherd = the preaching voice of the church */
.watermark-good-shepherd .entry-hero {
    background-image: linear-gradient(rgba(247, 247, 248, 0.28), rgba(247, 247, 248, 0.28)),
                      url('/wp-content/uploads/2026/06/watermark-good-shepherd.jpg');
}

/* 3. Publikasies / Publications — Ancient Codex / Open Book
   The written tradition: scholarly publications as modern codices */
.watermark-codex .entry-hero {
    background-image: linear-gradient(rgba(247, 247, 248, 0.28), rgba(247, 247, 248, 0.28)),
                      url('/wp-content/uploads/2026/06/watermark-codex.jpg');
}

/* 4. Biografie / Biography — Chi-Rho (☧) Christogram
   The first two letters of Christ's name in Greek — personal identity in Christ */
.watermark-chi-rho .entry-hero {
    background-image: linear-gradient(rgba(247, 247, 248, 0.28), rgba(247, 247, 248, 0.28)),
                      url('/wp-content/uploads/2026/06/watermark-chi-rho.jpg');
}

/* 5. Kursusse / Courses — Dove with Olive Branch
   The Holy Spirit / peace — teaching and learning in the Spirit */
.watermark-dove .entry-hero {
    background-image: linear-gradient(rgba(247, 247, 248, 0.28), rgba(247, 247, 248, 0.28)),
                      url('/wp-content/uploads/2026/06/watermark-dove.jpg');
}

/* 6. Kontak / Contact — Anchor (Hope)
   "Hope we have as an anchor of the soul" (Hebrews 6:19) — catacomb symbol */
.watermark-anchor .entry-hero {
    background-image: linear-gradient(rgba(247, 247, 248, 0.28), rgba(247, 247, 248, 0.28)),
                      url('/wp-content/uploads/2026/06/watermark-anchor.jpg');
}

/* 7. Lidmaatskap / Membership — Ichthys (Jesus Fish)
   The most recognisable early Christian symbol — membership in the body of Christ */
.watermark-ichthys .entry-hero {
    background-image: linear-gradient(rgba(247, 247, 248, 0.28), rgba(247, 247, 248, 0.28)),
                      url('/wp-content/uploads/2026/06/watermark-ichthys.jpg');
}

/* 8. Login / Account — Peacocks (Eternal Life / Paradise)
   Early Christian symbol of immortality — the account that never fades */
.watermark-peacocks .entry-hero {
    background-image: linear-gradient(rgba(247, 247, 248, 0.28), rgba(247, 247, 248, 0.28)),
                      url('/wp-content/uploads/2026/06/watermark-peacocks.jpg');
}

/* 9. Single Posts — Scroll / Papyrus (Biblical text)
   The written Word — each article as a scroll of wisdom */
.watermark-scroll .entry-hero {
    background-image: linear-gradient(rgba(247, 247, 248, 0.28), rgba(247, 247, 248, 0.28)),
                      url('/wp-content/uploads/2026/06/watermark-scroll.jpg');
}

/* Parchment texture watermark (pure CSS) */
.has-watermark-parchment {
    background-color: var(--parchment);
    position: relative;
}
.has-watermark-parchment::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(91, 75, 138, 0.04) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(74, 59, 115, 0.03) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.has-watermark-parchment > * {
    position: relative;
    z-index: 1;
}

/* ============================================
   Classical Accent Elements
   ============================================ */
/* Gold top border for featured sections */
.section-classical {
    border-top: 3px solid var(--gold);
    padding-top: 1.4rem;
    margin-top: 1.4rem;
}

/* Terracotta blockquote accent */
blockquote {
    border-left: 3px solid var(--gold) !important;
    background: var(--parchment) !important;
}

/* ============================================
   NEWSLETTER FORM — Footer Signup
   ============================================ */
.newsletter-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 0.5rem 0;
}
.newsletter-form__heading {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1rem;
    color: var(--ink-dark);
    margin: 0 0 0.3rem 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.newsletter-form__description {
    font-size: 0.85rem;
    color: var(--ink-body);
    margin: 0 0 0.8rem 0;
    line-height: 1.5;
    text-wrap: pretty;
}
.newsletter-form__fields {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.newsletter-form__input {
    flex: 1;
    min-width: 180px;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--parchment-dark);
    border-radius: 2px;
    background: #FFFFFF;
    color: var(--ink-body);
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.85rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.newsletter-form__input::placeholder {
    color: var(--warm-gray);
    opacity: 1;
}
.newsletter-form__input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(74, 59, 115, 0.15);
}
.newsletter-form__button {
    padding: 0.6rem 1.2rem;
    background: #4A3B73;
    color: #ffffff;
    border: none;
    border-radius: 2px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.newsletter-form__button:hover {
    background: var(--terracotta-light);
}

/* Newsletter success message */
.newsletter-success {
    background: rgba(74, 59, 115, 0.35);
    border: 1px solid var(--gold);
    color: var(--ink-dark);
    padding: 0.8rem 1rem;
    border-radius: 2px;
    font-size: 0.9rem;
    text-align: center;
    max-width: 400px;
    margin: 0.5rem auto;
    font-weight: 600;
}

/* ============================================
   PREKE & PRAATJIES — Multimedia Grid
   ============================================ */

/* Responsive video grid */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.video-grid__item {
    background: var(--cream);
    border: 1px solid var(--parchment-dark);
    border-radius: 3px;
    overflow: visible;
    transition: box-shadow 0.2s, transform 0.2s;
}
.video-grid__item:hover {
    box-shadow: 0 4px 20px rgba(17, 17, 17, 0.12);
    transform: translateY(-2px);
}

.video-grid__thumbnail {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: var(--parchment-dark);
    overflow: visible;
}
.video-grid__thumbnail iframe,
.video-grid__thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.video-grid__info {
    padding: 1rem 1.2rem 1.2rem;
}
.video-grid__title {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1rem;
    color: var(--ink-dark);
    margin: 0 0 0.3rem 0;
    line-height: 1.3;
}
.video-grid__date {
    font-size: 0.8rem;
    color: var(--stone);
    font-family: "DM Sans", system-ui, sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 0.5rem 0;
}
.video-grid__excerpt {
    font-size: 0.9rem;
    color: var(--ink-body);
    line-height: 1.5;
    margin: 0;
}
.video-grid__play {
    display: inline-block;
    margin-top: 0.6rem;
    color: var(--terracotta);
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s;
}
.video-grid__play:hover {
    color: var(--gold);
    text-decoration: underline;
}

/* ============================================
   HTML5 Audio Player Styling
   ============================================ */
.sermon-audio {
    background: var(--cream);
    border: 1px solid var(--parchment-dark);
    border-radius: 3px;
    padding: 1.2rem 1.5rem;
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.sermon-audio__info {
    flex: 1;
    min-width: 150px;
}
.sermon-audio__title {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1rem;
    color: var(--ink-dark);
    margin: 0 0 0.2rem 0;
}
.sermon-audio__meta {
    font-size: 0.8rem;
    color: var(--stone);
    font-family: "DM Sans", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

/* Custom audio player styling */
.sermon-audio audio {
    width: 100%;
    max-width: 400px;
    height: 40px;
    border-radius: 2px;
}

/* Audio player fallback for browsers that support it */
.sermon-audio audio::-webkit-media-controls-panel {
    background: var(--parchment);
}
.sermon-audio audio::-webkit-media-controls-timeline {
    color: var(--terracotta);
}
.sermon-audio audio::-webkit-media-controls-current-time-display,
.sermon-audio audio::-webkit-media-controls-time-remaining-display {
    color: var(--ink-body);
    font-family: "DM Sans", system-ui, sans-serif;
}

/* Download link */
.sermon-audio__download {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--terracotta);
    font-family: "DM Sans", system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    margin-top: 0.3rem;
}
.sermon-audio__download:hover {
    color: var(--gold);
    text-decoration: underline;
}

/* ============================================
   Language Switcher
   ============================================ */
.lang-switcher,
.lang-switcher-header,
.lang-switcher-footer {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.lang-switcher ul,
.lang-switcher-header ul,
.lang-switcher-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.3rem;
}
.lang-switcher li,
.lang-switcher-header li,
.lang-switcher-footer li {
    margin: 0;
}
.lang-switcher a,
.lang-switcher-header a,
.lang-switcher-footer a {
    display: inline-block;
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-dark) !important;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: all 0.2s;
}
.lang-switcher a:hover,
.lang-switcher-header a:hover,
.lang-switcher-footer a:hover {
    border-color: var(--gold);
    color: var(--gold) !important;
    background: transparent;
}
.lang-switcher .current-lang a,
.lang-switcher-header .current-lang a,
.lang-switcher-footer .current-lang a {
    border-color: var(--terracotta);
    color: var(--terracotta) !important;
    font-weight: 700 !important;
}

/* Footer language switcher */
.lang-switcher-footer {
    text-align: center;
    padding: 0.5rem 0;
}
.lang-switcher-footer ul {
    justify-content: center;
}
.lang-switcher-footer a {
    color: var(--warm-gray) !important;
}
.lang-switcher-footer a:hover {
    color: var(--gold) !important;
    border-color: var(--gold);
}
.lang-switcher-footer .current-lang a {
    color: var(--gold) !important;
    border-color: var(--gold);
}

/* ============================================
   Footer Newsletter Section
   ============================================ */
.footer-newsletter {
    padding: 2rem 0 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1.5rem;
    text-align: center;
}

/* ============================================
   Kadence Footer Widget Area Overrides
   ============================================ */
.site-footer .footer-widget-area {
    background: transparent !important;
}
.site-footer .footer-widget-area .widget-title {
    color: var(--cream);
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* ============================================
   Responsive: Audio player on mobile
   ============================================ */
@media (max-width: 600px) {
    .sermon-audio {
        flex-direction: column;
        align-items: stretch;
    }
    .sermon-audio audio {
        max-width: 100%;
    }
    .video-grid {
        grid-template-columns: 1fr;
    }
    .newsletter-form__fields {
        flex-direction: column;
    }
    .newsletter-form__input {
        min-width: auto;
    }
}

/* ============================================
   SUBMENU — Dropdown styling
   ============================================ */
.wp-block-navigation__submenu-container,
.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.submenu {
    background: var(--cream) !important;
    border: 1px solid var(--parchment-dark) !important;
    border-top: 2px solid var(--gold) !important;
    box-shadow: 0 4px 24px rgba(17, 17, 17, 0.10) !important;
    padding: 0.5rem 0 !important;
}

.header-navigation .header-menu-container ul ul li.menu-item > a,
.header-navigation .header-menu-container ul ul li.menu-item > a {
    font-size: 0.85rem !important;
    color: var(--ink-body) !important;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.header-navigation .header-menu-container ul ul li.menu-item > a:hover,
.header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
    background: var(--parchment) !important;
    border-left-color: var(--gold);
    color: var(--ink-dark) !important;
}

/* Primary nav submenu link styling */
.header-navigation .header-menu-container ul ul li.menu-item a {
    letter-spacing: 0.02em;
    border-bottom: 1px solid transparent;
}
.header-navigation .header-menu-container ul ul li.menu-item:last-child a {
    border-bottom: none;
}

/* ============================================
   LANGUAGE SWITCHER — Nav menu style
   ============================================ */
.menu-item.lang-switcher {
    display: inline-flex !important;
    align-items: center;
    margin-left: 0.8rem !important;
    padding-left: 0.8rem !important;
    border-left: 1px solid var(--warm-gray);
    gap: 0.15rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.menu-item.lang-switcher a {
    font-weight: 400 !important;
    color: var(--stone) !important;
    padding: 0.2rem 0.1rem !important;
    font-size: 0.75rem !important;
    transition: color 0.2s;
    border: none !important;
    background: none !important;
}

.menu-item.lang-switcher a:hover,
.menu-item.lang-switcher a.lang-active {
    color: var(--terracotta) !important;
    font-weight: 700 !important;
}

.lang-sep {
    color: var(--warm-gray);
    font-size: 0.7rem;
    padding: 0 0.1rem;
    user-select: none;
}

/* On mobile, align properly */
@media (max-width: 1024px) {
    .menu-item.lang-switcher {
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
        padding: 0.5rem 0;
    }
}
/* ============================================
   LOGIN / PROFILE — Nav menu items
   ============================================ */
body .header-navigation .menu-item-login a,
body .menu-item-login a,
body .main-navigation .primary-menu-container > ul > li.menu-item.menu-item-login > a {
    font-weight: 600 !important;
    color: var(--terracotta) !important;
    padding: 0.4rem 0.8rem !important;
    border: 1px solid var(--terracotta) !important;
    border-radius: 2px;
    transition: all 0.2s;
}

body .header-navigation .menu-item-login a:hover,
body .menu-item-login a:hover,
body .main-navigation .primary-menu-container > ul > li.menu-item.menu-item-login > a:hover {
    background: var(--terracotta) !important;
    color: #fff !important;
    border-color: var(--terracotta) !important;
}

/* Password toggle — style like "Onthou my" checkbox label */
.pmpro_form_field-password-toggle {
    margin-top: 0.25rem;
}
body .pmpro_form_field-password-toggle button.pmpro_btn {
    display: inline !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: var(--stone) !important;
    font-size: 0.85rem !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: none !important;
    line-height: 1.5 !important;
}
body .pmpro_form_field-password-toggle button.pmpro_btn:hover {
    color: var(--terracotta) !important;
    text-decoration: underline !important;
    background: none !important;
}
body .pmpro_form_field-password-toggle .pmpro_icon {
    display: none !important;
}

.menu-item-logout a {
    font-size: 0.8rem !important;
    opacity: 0.7;
}
.menu-item-logout a:hover {
    opacity: 1;
}

@media (max-width: 1024px) {
    .menu-item-login a {
        border: none !important;
        padding: 0.5rem 0 !important;
    }
}



/* ============================================
   MEMBER MEDIA — Video & Audio player styling
   ============================================ */
.member-video {
    max-width: 100%;
    border-radius: 3px;
    box-shadow: 0 2px 12px rgba(17, 17, 17, 0.12);
    margin: 1.5rem 0;
    background: #000;
}
.member-audio {
    margin: 1rem 0;
    border-radius: 2px;
}
.member-audio::-webkit-media-controls-panel {
    background: var(--parchment);
}

/* ============================================
   VIDEO MODAL — Lightbox-style popup player
   ============================================ */
.video-modal-overlay {
    display: none;
    position: fixed;
    z-index: 99999;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.video-modal-overlay.open {
    display: flex;
    opacity: 1;
}
.video-modal-container {
    position: relative;
    width: 75vw;
    max-width: 1200px;
    max-height: 75vh;
    background: #000;
    border-radius: 6px;
    overflow: visible;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
.video-modal-overlay.open .video-modal-container {
    transform: scale(1);
}
.video-modal-container video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 75vh;
    outline: none;
}
button.video-modal-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    background: var(--cream);
    border: 2px solid var(--ink-dark);
    color: var(--ink-dark);
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999999;
    padding: 0;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
    font-family: "Outfit", system-ui, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
button.video-modal-close:hover {
    background: var(--terracotta);
    color: var(--cream);
    border-color: var(--terracotta);
    transform: none;
}
button.video-modal-close:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(74, 59, 115, 0.5);
}

/* Make video grid items clickable */
.video-grid__item {
    cursor: pointer;
}
/* Play button overlay on thumbnail */
.video-grid__thumbnail {
    position: relative;
}
.video-grid__play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background: rgba(74, 59, 115, 0.78);
    border: 3px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.video-grid__play-icon svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: #fff;
}
.video-grid__item:hover .video-grid__play-icon {
    background: var(--terracotta);
    transform: translate(-50%, -50%) scale(1.12);
    border-color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ============================================
   UPLOAD PROGRESS BAR — Admin page
   ============================================ */
.upload-progress-wrap {
    display: none;
    margin-top: 0.8rem;
}
.upload-progress-bar-bg {
    width: 100%;
    height: 24px;
    background: var(--parchment-dark);
    border-radius: 3px;
    overflow: visible;
    position: relative;
}
.upload-progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold), var(--terracotta));
    transition: width 0.3s ease;
    border-radius: 3px;
}
.upload-progress-text {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ink-dark);
    font-family: "DM Sans", system-ui, sans-serif;
    letter-spacing: 0.05em;
}
.upload-status-msg {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    .video-modal-container {
        width: 95vw;
        max-height: 60vh;
    }
    .video-modal-container video {
        max-height: 60vh;
    }
}

/* ── Header nav: fix invisible text on white background ── */
.site-main-header-wrap .site-header-row-container-inner {
    background-color: var(--global-palette8) !important;
}
.main-navigation .primary-menu-container > ul > li.menu-item > a {
    color: var(--global-palette3) !important;
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
    color: var(--global-palette1) !important;
}
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
    color: var(--global-palette1) !important;
}
.mobile-toggle-open-container .menu-toggle-open {
    color: var(--global-palette3) !important;
}

/* Fix: add horizontal padding inside boxed content */
.entry-content-wrap {
    padding: 2rem !important;
}

/* ============================================================
   Sermon Media: video grid & audio list
   Auto-generated from uploaded media files (shortcode [sermon_media])
   ============================================================ */

/* --- Video Grid --- */
.video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 2rem 0;
}
@media (min-width: 720px) {
    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1025px) {
    .video-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.video-grid__item {
    background: var(--global-palette9, #fff);
    border: 1px solid var(--global-gray-400, #CBD5E0);
    border-radius: 4px;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.video-grid__player {
    background: #000;
    line-height: 0;
}
.video-grid__player video {
    display: block;
    width: 100%;
    max-height: 240px;
    object-fit: contain;
}

.video-grid__info {
    padding: 1rem 1.25rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.video-grid__title {
    font-size: 1.1rem;
    margin: 0 0 0.25rem;
    color: var(--global-palette3, #1A202C);
}

.video-grid__date {
    font-size: 0.85rem;
    color: var(--global-palette5, #718096);
    margin: 0 0 0.5rem;
}

.video-grid__excerpt {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 0.75rem;
    color: var(--global-palette4, #2D3748);
    flex: 1;
}

.video-grid__play {
    display: inline-block;
    padding: 0.4em 1em;
    background: var(--global-palette-btn-bg, #e53e3e);
    color: #fff !important;
    text-decoration: none;
    border-radius: 3px;
    font-size: 0.9rem;
    align-self: flex-start;
    transition: background 0.2s;
}
.video-grid__play:hover {
    background: var(--global-palette-btn-bg-hover, #c53030);
    color: #fff !important;
}

/* --- Audio List --- */
.sermon-audio-list {
    margin: 2rem 0;
}

.sermon-audio {
    background: var(--global-palette9, #fff);
    border: 1px solid var(--global-gray-400, #CBD5E0);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.sermon-audio__info {
    margin-bottom: 0.5rem;
}

.sermon-audio__title {
    font-size: 1.05rem;
    margin: 0 0 0.15rem;
    color: var(--global-palette3, #1A202C);
}

.sermon-audio__meta {
    font-size: 0.85rem;
    color: var(--global-palette5, #718096);
    margin: 0;
}

.sermon-audio audio {
    width: 100%;
    margin: 0.5rem 0;
}

.sermon-audio__download {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: var(--global-palette-highlight, #e53e3e);
    text-decoration: underline;
}
.sermon-audio__download:hover {
    color: var(--global-palette-highlight-alt, #c53030);
}

/* --- Empty state --- */
.sermon-media-empty {
    text-align: center;
    font-style: italic;
    color: var(--global-palette5, #718096);
    padding: 3rem 1rem;
}

/* ============================================================
   Hero Newsletter — Minimalist inline email capture
   ============================================================ */
.hero-newsletter {
    margin-top: 1.5rem;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid var(--parchment-dark);
    border-radius: 3px;
}
.hero-newsletter__fields {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.hero-newsletter__input {
    flex: 1;
    min-width: 140px;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--parchment-dark);
    border-radius: 2px;
    background: #FFFFFF;
    color: var(--ink-body);
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.85rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.hero-newsletter__input::placeholder {
    color: var(--warm-gray);
    opacity: 1;
}
.hero-newsletter__input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(74, 59, 115, 0.15);
}
.hero-newsletter__button {
    padding: 0.5rem 1rem;
    background: var(--gold);
    color: var(--cream);
    border: none;
    border-radius: 2px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
.hero-newsletter__button:hover {
    background: var(--terracotta-light);
}

/* ============================================================
   Magic Login — Passwordless login form
   ============================================================ */
.magic-login {
    max-width: 440px;
    margin: 2rem auto;
    padding: 1.5rem;
    background: var(--cream);
    border: 1px solid var(--parchment-dark);
    border-radius: 3px;
}
.magic-login__heading {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 1.1rem;
    color: var(--ink-dark);
    margin: 0 0 0.3rem 0;
}
.magic-login__description {
    font-size: 0.85rem;
    color: var(--ink-body);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}
.magic-login__fields {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.magic-login__input {
    flex: 1;
    min-width: 200px;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--parchment-dark);
    border-radius: 2px;
    background: #FFFFFF;
    color: var(--ink-body);
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 0.85rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.magic-login__input::placeholder {
    color: var(--warm-gray);
    opacity: 1;
}
.magic-login__input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(74, 59, 115, 0.15);
}
.magic-login__button {
    padding: 0.6rem 1.2rem;
    background: var(--terracotta);
    color: var(--cream);
    border: none;
    border-radius: 2px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}
.magic-login__button:hover {
    background: var(--ink-dark);
}
.magic-login__button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.magic-login__message {
    margin-top: 0.8rem;
    font-size: 0.85rem;
    line-height: 1.4;
    padding: 0.5rem 0.8rem;
    border-radius: 2px;
}
.magic-login__success {
    background: rgba(46, 125, 50, 0.12);
    border: 1px solid rgba(46, 125, 50, 0.3);
    color: #1b5e20;
}
.magic-login__error {
    background: rgba(198, 40, 40, 0.10);
    border: 1px solid rgba(198, 40, 40, 0.2);
    color: #b71c1c;
}
.magic-login__already {
    text-align: center;
    font-size: 0.9rem;
    color: var(--ink-body);
    padding: 1rem;
}

/* Mobile: stack fields */
@media (max-width: 600px) {
    .hero-newsletter__fields {
        flex-direction: column;
    }
    .hero-newsletter__input {
        min-width: auto;
        width: 100%;
    }
    .magic-login__fields {
        flex-direction: column;
    }
    .magic-login__input {
        min-width: auto;
        width: 100%;
    }
}

/* ============================================================
   Smart Sticky Header — hide on scroll down, show on scroll up
   position:fixed + top set by JS (handles admin-bar offset)
   ============================================================ */
#masthead.header-hidden {
    transform: translateY(-100%);
}

/* ============================================================
   COURSES & WORKSHOPS — Main page cards
   ============================================================ */

.courses-intro {
    text-align: center;
    margin-bottom: 2.5rem;
}
.courses-intro .lead {
    font-size: 1.1rem;
    color: var(--ink-body);
    max-width: 700px;
    margin: 0.75rem auto 0;
    line-height: 1.6;
}
.courses-intro hr {
    border: none;
    border-top: 2px solid var(--gold);
    width: 60px;
    margin: 1.5rem auto 0;
}

/* Category sections */
.course-category {
    margin-bottom: 3rem;
}
.course-category__title {
    font-size: 1.5rem;
    color: var(--ink-dark);
    margin-bottom: 0.25rem;
}
.course-category__desc {
    font-size: 0.95rem;
    color: var(--stone);
    margin-bottom: 1.25rem;
    font-style: italic;
}

/* Card grid — responsive 3 columns */
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--bento-gap);
}

/* Individual card */
.course-card {
    background: var(--cream);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--bento-radius);
    overflow: hidden;
    box-shadow: var(--bento-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.course-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bento-shadow-hover);
}

/* Card image */
.course-card__image {
    position: relative;
    overflow: hidden;
    height: 200px;
}
.course-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.course-card__badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--terracotta);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25em 0.65em;
    border-radius: 6px;
    font-family: "Outfit", system-ui, sans-serif;
}

/* Card body */
.course-card__body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.course-card__tag {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--terracotta);
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.course-card__title {
    font-size: 1.15rem;
    color: var(--ink-dark);
    margin: 0 0 0.75rem;
    line-height: 1.3;
}
.course-card__link {
    display: inline-block;
    margin-top: auto;
    padding-top: 0.75rem;
    color: var(--terracotta);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s;
}
.course-card__link:hover {
    color: var(--terracotta-light);
    text-decoration: underline;
}

/* CTA section at bottom of main page */
.courses-cta {
    text-align: center;
    padding: 2rem 1rem;
    margin-top: 1rem;
}

/* ============================================================
   COURSE SUBPAGE — Single course layout
   ============================================================ */

.course-single {
    margin-bottom: 2rem;
}
.course-single__header {
    margin-bottom: 1.5rem;
}
.course-single__category {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--terracotta);
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.course-single__lead {
    font-size: 1.05rem;
    color: var(--ink-body);
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Meta row (Duur, Formaat, Vlak) */
.course-single__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1rem;
    background: var(--parchment);
    border-radius: var(--bento-radius);
    border: 1px solid var(--parchment-dark);
}
.course-meta__item {
    display: flex;
    flex-direction: column;
}
.course-meta__label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--stone);
    font-weight: 600;
}
.course-meta__value {
    font-size: 0.95rem;
    color: var(--ink-dark);
    font-weight: 500;
}

/* Course navigation sidebar / inline nav */
.course-nav {
    background: var(--parchment);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--bento-radius);
    padding: 1.25rem;
    margin-bottom: 2rem;
}
.course-nav__title {
    font-size: 1rem;
    margin: 0 0 0.75rem;
    color: var(--ink-dark);
}
.course-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.course-nav__item {
    margin-bottom: 0.35rem;
}
.course-nav__item a {
    color: var(--terracotta);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}
.course-nav__item a:hover {
    color: var(--terracotta-light);
    text-decoration: underline;
}
.course-nav__item.active a {
    font-weight: 700;
    color: var(--ink-dark);
}

/* Course module sections */
.course-module {
    background: var(--cream);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--bento-radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
}
.course-module__header {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--parchment-dark);
}
.course-module__number {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--terracotta);
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.course-module__content {
    line-height: 1.7;
    color: var(--ink-body);
}
.course-module__content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.course-module__content ul {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}
.course-module__content li {
    margin-bottom: 0.35rem;
}

/* Media placeholder */
.course-module__media {
    margin: 1.5rem 0;
}
.media-placeholder {
    background: var(--parchment);
    border: 2px dashed var(--warm-gray);
    border-radius: var(--bento-radius);
    padding: 2rem;
    text-align: center;
}
.media-placeholder__icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.media-placeholder__title {
    font-weight: 600;
    color: var(--ink-dark);
    margin-bottom: 0.25rem;
}
.media-placeholder__note {
    font-size: 0.85rem;
    color: var(--stone);
}

/* Reading assignment */
.course-module__reading {
    background: var(--parchment);
    border-left: 4px solid var(--gold);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 0 var(--bento-radius) var(--bento-radius) 0;
}
.course-module__reading h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

/* Quiz */
.course-module__quiz {
    margin-top: 1.5rem;
}
.course-module__quiz h3 {
    margin-bottom: 0.75rem;
}
.quiz-container {
    background: var(--parchment);
    border: 1px solid var(--parchment-dark);
    border-radius: var(--bento-radius);
    padding: 1.25rem;
}
.quiz-question {
    margin-bottom: 1.25rem;
}
.quiz-question__text {
    font-weight: 600;
    color: var(--ink-dark);
    margin-bottom: 0.75rem;
}
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.quiz-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--cream);
    border: 1px solid var(--parchment-dark);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.quiz-option:hover {
    border-color: var(--terracotta);
    background: #fff;
}
.quiz-option input[type="radio"] {
    accent-color: var(--terracotta);
}
.quiz-result {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    font-weight: 600;
}
.quiz-result.correct {
    background: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.quiz-result.incorrect {
    background: #fce4ec;
    color: #c62828;
    border: 1px solid #ef9a9a;
}
.quiz-submit {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.6em 1.5em;
    background: var(--terracotta);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    font-family: "Outfit", system-ui, sans-serif;
    transition: background 0.2s;
}
.quiz-submit:hover {
    background: var(--terracotta-light);
}

/* Hide quiz feedback until user clicks submit */
.quiz-feedback {
    display: none;
}
.quiz-feedback__correct,
.quiz-feedback__incorrect {
    display: none;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
}
.quiz-feedback__correct {
    background: #e8f5e9;
    color: #2e7d32;
}
.quiz-feedback__incorrect {
    background: #fce4ec;
    color: #c62828;
}

/* Course subpage responsive */
@media (max-width: 768px) {
    .course-grid {
        grid-template-columns: 1fr;
    }
    .course-single__meta {
        flex-direction: column;
        gap: 0.75rem;
    }
    .course-module {
        padding: 1.25rem;
    }
}
@media (max-width: 600px) {
    .course-card__image {
        height: 160px;
    }
}

/* ============================================================
   LEAKY PAYWALL — Premium content teaser + blur + CTA box
   Used on posts that require Premium membership.
   ============================================================ */
.premium-paywall {
    position: relative;
    margin: 2em 0;
}

.premium-blur-content {
    filter: blur(6px);
    opacity: 0.4;
    user-select: none;
    pointer-events: none;
    max-height: 360px;
    overflow: hidden;
}

.premium-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 240px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--global-palette9, #fff) 100%);
    pointer-events: none;
    z-index: 1;
}

.premium-cta-box {
    position: relative;
    z-index: 2;
    max-width: 480px;
    margin: -40px auto 0;
    padding: 2.5em 2em;
    text-align: center;
    background: var(--cream);
    border: 2px solid var(--gold);
    border-radius: var(--bento-radius);
    box-shadow: var(--bento-shadow-hover);
}

.premium-cta-lock {
    color: var(--gold);
    margin-bottom: 0.5em;
}
.premium-cta-lock svg {
    display: inline-block;
}

.premium-cta-heading {
    font-size: 1.3rem;
    margin: 0 0 0.5em;
    color: var(--ink-dark);
    font-family: "Outfit", system-ui, sans-serif !important;
}

.premium-cta-message {
    font-size: 1rem;
    color: var(--ink-body);
    margin: 0 0 1.2em;
    line-height: 1.5;
}

.premium-cta-button {
    display: inline-block;
    padding: 0.8em 2em;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: var(--terracotta);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    font-family: "Outfit", system-ui, sans-serif !important;
}
.premium-cta-button:hover {
    background: var(--terracotta-light);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.premium-cta-login {
    font-size: 0.9rem;
    color: var(--stone);
    margin: 1em 0 0;
}
.premium-cta-login a {
    color: var(--terracotta);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .premium-cta-box {
        padding: 1.5em 1.2em;
        margin-top: -20px;
    }
    .premium-blur-content {
        max-height: 240px;
    }
    .premium-fade-overlay {
        height: 160px;
    }
}

/* ============================================================
   PMPro — Classical palette theming
   ============================================================ */
body .pmpro .pmpro_card {
    background: var(--cream);
    border: 1px solid var(--parchment-dark);
    border-top: 3px solid var(--gold);
    border-radius: var(--bento-radius);
    box-shadow: var(--bento-shadow);
}

body .pmpro .pmpro_card_title {
    font-family: "Outfit", system-ui, sans-serif !important;
    color: var(--ink-dark);
}

body .pmpro .pmpro_btn {
    background: var(--terracotta) !important;
    color: #fff !important;
    border-radius: 6px !important;
    font-family: "Outfit", system-ui, sans-serif !important;
    font-weight: 600 !important;
    transition: background 0.2s, transform 0.2s !important;
}
body .pmpro .pmpro_btn:hover {
    background: var(--terracotta-light) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Fix PMPro login button hover — PMPro default makes text invisible */
body .pmpro .login-submit .button:hover,
body .pmpro .login-submit .button:focus {
    background: var(--terracotta-light) !important;
    color: #fff !important;
    border-color: var(--terracotta-light) !important;
}

body .pmpro input[type="text"],
body .pmpro input[type="email"],
body .pmpro input[type="password"] {
    border-color: var(--parchment-dark) !important;
    border-radius: 4px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
body .pmpro input:focus {
    border-color: var(--gold) !important;
    box-shadow: 0 0 0 2px rgba(74, 59, 115, 0.15) !important;
    outline: none !important;
}

body .pmpro .pmpro_content_message a:not(.pmpro_btn) {
    color: var(--terracotta) !important;
}
body .pmpro .pmpro_content_message a:not(.pmpro_btn):hover {
    color: var(--terracotta-light) !important;
    text-decoration: underline;
}

/* Fix "Teken in" / "Sign in" link in paywall card actions */
body .pmpro .pmpro_card_actions a {
    color: var(--terracotta) !important;
}
body .pmpro .pmpro_card_actions a:hover {
    color: var(--terracotta-light) !important;
    text-decoration: underline;
}

/* ============================================================
   Kadence theme heading overrides for Outfit
   ============================================================ */
.kt-blocks-info-box-title,
.wp-block-kadence-infobox .kt-blocks-info-box-title,
.wp-block-kadence-rowlayout .kt-row-column-wrap h2,
.wp-block-kadence-rowlayout .kt-row-column-wrap h3 {
    font-family: "Outfit", system-ui, sans-serif !important;
}

/* Kadence theme heading font override — hero page titles */
.entry-hero {
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--parchment, #F7F7F8);
}
.entry-hero .entry-hero-container-inner {
    background: #ffffff !important;
    max-width: 36rem;
    margin: 0 auto;
    padding: 1.5rem 2rem !important;
    border: 1px solid rgba(17,17,17,0.08);
    border-radius: 2px;
    box-shadow: 0 2px 16px rgba(17,17,17,0.06);
    width: auto;
}

/* White title rectangle; keep frames (::before/::after) inside */
.entry-hero .entry-header,
.entry-hero .hero-section-title {
  text-align: center;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background: transparent;
}
.entry-hero h1.entry-title,
.entry-hero h1.page-title {
    font-family: "Outfit", system-ui, sans-serif !important;
    font-size: clamp(1.8rem, 5vw, 3.2rem);
    position: relative;
    display: inline-block;
    padding: 0.85rem 1.5rem;
    margin: 0 auto;
    color: #111111 !important;
    text-shadow: none;
    text-align: center;
    line-height: 1.15;
    letter-spacing: -0.01em;
    z-index: 1;
}

/* Home: no white title box on decorative strip */
.home .entry-hero .entry-hero-container-inner {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: none;
  padding: 0 !important;
}
.entry-hero h1.entry-title::before,
.entry-hero h1.entry-title::after,
.entry-hero h1.page-title::before,
.entry-hero h1.page-title::after {
  content: "";
  display: block;
  width: min(14rem, 55vw);
  height: 2px;
  margin: 0.65rem auto;
  background: linear-gradient(90deg, transparent, var(--terracotta, #5B4B8A), transparent);
}
.entry-hero h1.entry-title::before,
.entry-hero h1.page-title::before {
  margin-top: 0;
  margin-bottom: 0.85rem;
}
.entry-hero h1.entry-title::after,
.entry-hero h1.page-title::after {
  margin-top: 0.85rem;
  margin-bottom: 0;
}

/* ============================================================
   Drop cap styling — Outfit
   ============================================================ */
.has-drop-cap:not(:focus)::first-letter {
    font-family: "Outfit", system-ui, sans-serif !important;
    font-size: 4em !important;
    color: var(--ink-dark);
    float: left;
    line-height: 0.8;
    margin: 0.1em 0.15em 0 0;
    padding: 0.1em 0.15em 0 0;
}

/* ============================================
   HOMEPAGE "OOR MY" SECTION — Chi-Rho Watermark Block
   The "Oor my" section gets a solid white text block
   with the Chi-Rho watermark visible behind it.
   ============================================ */

/* The outer group — Chi-Rho watermark fills this section only */
body.home .entry-content > .wp-block-group:nth-of-type(3) {
    position: relative;
    background-image: linear-gradient(rgba(247, 247, 248, 0.85), rgba(247, 247, 248, 0.85)),
                      url('/wp-content/uploads/2026/06/watermark-chi-rho.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* The inner container — solid white block for readability */
body.home .entry-content > .wp-block-group:nth-of-type(3) > .wp-block-group__inner-container {
    background: rgba(255, 255, 255, 0.92);
    padding: 1.75rem 1.4rem;
    border-radius: 4px;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* "Oor My" heading styling */
body.home .entry-content > .wp-block-group:nth-of-type(3) h3 {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--ink-dark);
    margin-top: 0;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Paragraphs inside the "Oor my" block */
body.home .entry-content > .wp-block-group:nth-of-type(3) p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink-body);
    margin-bottom: 1rem;
}

body.home .entry-content > .wp-block-group:nth-of-type(3) p:last-child {
    margin-bottom: 0;
}

/* ============================================
   CONTACT PAGE — Hover Cards (Skakel my / Contact me)
   Same magnetic hover effect as homepage bento cards.
   ============================================ */

/* Contact page columns — card styling */
body.page-id-20 .entry-content > .wp-block-group:nth-of-type(2) .wp-block-column,
body.page-id-57 .entry-content > .wp-block-group:nth-of-type(2) .wp-block-column {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--bento-radius, 8px);
    padding: 1.15rem;
    box-shadow: var(--bento-shadow, 0 2px 8px rgba(0,0,0,0.06));
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
    will-change: transform;
    position: relative;
    overflow: hidden;
}

/* Magnetic hover */
body.page-id-20 .entry-content > .wp-block-group:nth-of-type(2) .wp-block-column:hover,
body.page-id-57 .entry-content > .wp-block-group:nth-of-type(2) .wp-block-column:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--bento-shadow-hover, 0 8px 24px rgba(0,0,0,0.1));
    border-color: rgba(74, 59, 115, 0.25);
}

/* Contact page card headings */
body.page-id-20 .entry-content > .wp-block-group:nth-of-type(2) h3.wp-block-heading,
body.page-id-57 .entry-content > .wp-block-group:nth-of-type(2) h3.wp-block-heading {
    font-family: "Outfit", system-ui, sans-serif !important;
    font-size: 1.15rem;
    color: var(--ink-dark);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

/* ============================================
   MOBILE MENU — Light theme to match desktop
   Changes the dark mobile drawer to use the
   same light/parchment color scheme as desktop.
   ============================================ */

/* Mobile drawer background — warm cream/parchment */
.popup-drawer .drawer-inner {
    background: var(--cream, #fdf8f0) !important;
    color: var(--ink-dark, #111111) !important;
}

/* Mobile drawer full-width variant */
.popup-drawer-layout-fullwidth .drawer-inner,
.popup-drawer-layout-fullwidth.popup-drawer-animation-slice .pop-portion-bg,
#mobile-drawer.popup-drawer-layout-fullwidth.popup-drawer-animation-slice.pop-animated .drawer-inner {
    background: var(--cream, #fdf8f0) !important;
}

/* Close button — dark to contrast with light background */
.popup-drawer .drawer-header .drawer-toggle {
    color: var(--ink-dark, #111111) !important;
}

/* Navigation items in mobile drawer */
.popup-drawer .drawer-content .menu-item a {
    color: var(--terracotta, #5B4B8A) !important;
}

/* Sub-menu items — slightly darker background for contrast */
.popup-drawer .drawer-content .sub-menu a {
    color: var(--ink-dark, #111111) !important;
}

/* Sub-menu toggle buttons */
.popup-drawer .drawer-content .drawer-sub-toggle {
    color: var(--ink-dark, #111111) !important;
}

/* Nav drop title wraps */
.popup-drawer .drawer-content .nav-drop-title-wrap {
    color: var(--terracotta, #5B4B8A) !important;
}

/* Drawer overlay — lighter */
.popup-drawer .drawer-overlay {
    background: rgba(0, 0, 0, 0.2) !important;
}

/* ============================================
   FOOTER TEXT — Lighten for readability
   The dark brown footer background needs lighter
   text to maintain good contrast.
   ============================================ */

/* Footer text and links */
.site-footer .footer-widget-area,
.site-footer .site-info {
    color: var(--cream, #FFFFFF) !important;
}

/* Footer copyright / text content */
.site-footer .footer-widget-area p,
.site-footer .site-info p,
.site-footer .footer-widget-area span,
.site-footer .site-info span,
.site-footer .footer-widget-area div,
.site-footer .site-info div {
    color: var(--cream, #FFFFFF) !important;
}

/* Footer links */
.site-footer .footer-widget-area a,
.site-footer .site-info a {
    color: var(--gold-light, #8B7DB5) !important;
}

.site-footer .footer-widget-area a:hover,
.site-footer .site-info a:hover {
    color: var(--gold, #4A3B73) !important;
    text-decoration: underline;
}

/* Home: decorative stained-glass strip under header, above content H1 */
.home .entry-hero {
  display: block !important;
  min-height: 160px;
  max-height: 220px;
  margin: 0;
  border: none;
  pointer-events: none;
}
.home .entry-hero .entry-header,
.home .entry-hero .entry-title,
.home .entry-hero .entry-hero-container-inner .entry-header {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
.home .entry-hero .entry-hero-container-inner {
  padding: 0 !important;
  min-height: 160px;
}
/* Keep content H1 visible; only hide duplicate hero title above */
.home .entry-header .entry-title:not(.entry-hero .entry-title) {
  /* no-op: content titles stay visible */
}
.primary-navigation .menu-item-has-children > .dropdown-nav-toggle,
.primary-navigation .menu-item-has-children > button,
.primary-menu .menu-item-has-children > .dropdown-nav-toggle,
.primary-menu .menu-item-has-children > button {
  display: none !important;
}


/* Home decorative loodglas strip (injected via PHP — no entry-hero on title-hide layout) */
.home-loodglas-strip {
  width: 100%;
  height: 180px;
  background-image: linear-gradient(rgba(247,247,248,0.40), rgba(247,247,248,0.40)),
    url('/wp-content/uploads/2026/06/watermark-chi-rho.jpg');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  filter: brightness(1.12) contrast(1.02);
}

/* Primary nav denser — fit items on one row (desktop) */
@media (min-width: 1025px) {
  .header-navigation .primary-menu-container > ul > li > a,
  .main-navigation .primary-menu-container > ul > li > a,
  #main-header .header-menu-container .menu > li > a,
  .header-navigation .header-menu-container > ul > li > a {
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.02em;
  }
}



/* ============================================================
   Pantokrator band (homepage)
   ============================================================ */
.pantokrator-band {
    width: 100%;
    max-width: 100%;
    margin: 0.5rem 0 1.5rem;
    padding: 0;
}
.pantokrator-band .pantokrator-image {
    margin: 0;
    text-align: center;
}
.pantokrator-image img {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    margin: 0 auto;
    border-radius: 0.35rem;
    object-fit: cover;
    max-height: 320px;
    object-position: center 20%;
}
.pantokrator-caption {
    margin: 0.65rem auto 0;
    max-width: 40rem;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--ink-muted, #5a5a5a);
    font-style: italic;
    text-align: center;
}

/* ============================================================
   Bento free / members badges
   ============================================================ */
.bento-badge {
    display: inline-block;
    margin: 0 0 0.65rem;
    padding: 0.2rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0.25rem;
    line-height: 1.3;
}
.bento-badge--free {
    background: rgba(46, 125, 50, 0.12);
    color: #1b5e20;
}
.bento-badge--members {
    background: rgba(121, 85, 72, 0.14);
    color: #4e342e;
}


/* ============================================================
   Bento grid class-based 2x2 (v1.6.21)
   ============================================================ */
.bento-grid .wp-block-columns,
.bento-grid.wp-block-columns,
.home .bento-grid > .wp-block-columns,
.home .bento-grid > .wp-block-group__inner-container > .wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bento-gap, 0.85rem);
  align-items: stretch;
}
.bento-grid .wp-block-column {
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
.bento-grid .wp-block-column > p:last-child {
  margin-top: auto;
}
@media (max-width: 767px) {
  .bento-grid .wp-block-columns,
  .bento-grid.wp-block-columns,
  .home .bento-grid > .wp-block-columns,
  .home .bento-grid > .wp-block-group__inner-container > .wp-block-columns {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Kursus promo block (homepage)
   ============================================================ */
.kursus-promo {
  margin: 2rem auto 2.5rem;
  padding: 1.75rem 1rem;
  max-width: 56rem;
  text-align: center;
}
.kursus-promo h2 {
  font-family: "Outfit", system-ui, sans-serif !important;
  margin-bottom: 0.65rem;
}
.kursus-promo > p,
.kursus-promo .has-text-align-center {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--ink-body, #333);
}
.kursus-promo__photos,
.kursus-promo .kursus-promo__photos.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 1.25rem 0 1.5rem;
  align-items: stretch;
}
.kursus-promo__photos .wp-block-column {
  width: 100% !important;
  margin: 0 !important;
}
.kursus-promo__photos img,
.kursus-promo__photos figure img {
  display: block;
  width: 100%;
  height: 180px;
  max-height: 180px;
  object-fit: cover;
  border-radius: 0.5rem;
}
@media (max-width: 767px) {
  .kursus-promo__photos,
  .kursus-promo .kursus-promo__photos.wp-block-columns {
    grid-template-columns: 1fr;
  }
  .kursus-promo__photos img,
  .kursus-promo__photos figure img {
    height: 160px;
  }
}

/* ============================================================
   Kursus banner carousel (v1.6.23)
   ============================================================ */
.kursus-banner {
  margin: 2rem auto 2.5rem;
  max-width: 1100px;
  background: #f7f7f8;
  border: 1px solid rgba(17,17,17,0.08);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(17,17,17,0.05);
}
.kursus-banner__slides {
  position: relative;
}
.kursus-banner__slide {
  display: none;
  grid-template-columns: 45% 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 280px;
}
.kursus-banner__slide.is-active {
  display: grid;
}
.kursus-banner__media {
  background: #e8e6ef;
  min-height: 240px;
}
.kursus-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kursus-banner__copy {
  padding: 1.75rem 2rem;
  color: #111111;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
}
.kursus-banner__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5B4B8A;
  font-weight: 600;
}
.kursus-banner__title {
  margin: 0 0 0.75rem;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  line-height: 1.2;
  color: #111111;
}
.kursus-banner__desc {
  margin: 0 0 0.85rem;
  color: #333;
  line-height: 1.55;
}
.kursus-banner__bullets {
  margin: 0 0 1.1rem;
  padding-left: 1.15rem;
  color: #333;
}
.kursus-banner__bullets li {
  margin-bottom: 0.25rem;
}
.kursus-banner__cta {
  display: inline-block;
  background: #5B4B8A;
  color: #fff !important;
  text-decoration: none !important;
  padding: 0.65rem 1.25rem;
  border-radius: 3px;
  font-weight: 600;
}
.kursus-banner__cta:hover {
  background: #4A3B73;
  color: #fff !important;
}
.kursus-banner__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem 1rem;
  background: #ffffff;
  border-top: 1px solid rgba(17,17,17,0.06);
}
.kursus-banner__prev,
.kursus-banner__next {
  border: 1px solid rgba(91,75,138,0.35);
  background: #fff;
  color: #5B4B8A;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}
.kursus-banner__prev:hover,
.kursus-banner__next:hover {
  background: #5B4B8A;
  color: #fff;
}
.kursus-banner__dots {
  display: flex;
  gap: 0.4rem;
}
.kursus-banner__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  border: none;
  background: rgba(91,75,138,0.28);
  cursor: pointer;
  padding: 0;
}
.kursus-banner__dot.is-active,
.kursus-banner__dot[aria-selected="true"] {
  background: #5B4B8A;
}
@media (max-width: 768px) {
  .kursus-banner__slide.is-active {
    display: block;
  }
  .kursus-banner__media {
    min-height: 180px;
    max-height: 220px;
  }
  .kursus-banner__copy {
    padding: 1.25rem 1.25rem 0.5rem;
  }
}

/* Pricing comparison table */
.pricing-compare {
  width: 100%;
  max-width: 720px;
  margin: 1.5rem auto 2rem;
  border-collapse: collapse;
  font-size: 0.98rem;
  background: #fff;
  border: 1px solid rgba(17,17,17,0.08);
}
.pricing-compare th,
.pricing-compare td {
  padding: 0.75rem 1rem;
  text-align: center;
  border-bottom: 1px solid rgba(17,17,17,0.08);
  vertical-align: middle;
}
.pricing-compare thead th {
  background: #5B4B8A;
  color: #fff;
  font-family: "Outfit", system-ui, sans-serif;
  font-weight: 600;
}
.pricing-compare tbody th {
  text-align: left;
  font-weight: 500;
  color: #111;
  background: #fafafa;
}
.pricing-compare .pc-yes {
  color: #2f6b4f;
  font-weight: 700;
  font-size: 1.15rem;
}
.pricing-compare .pc-no {
  color: #999;
  font-weight: 500;
}
.pricing-compare tbody tr:hover td,
.pricing-compare tbody tr:hover th {
  background: rgba(91,75,138,0.04);
}