/* ==========================================================================
   0. FONTS
   ========================================================================== */
@font-face { font-display: swap; font-family: 'Playpen Sans'; font-style: normal; font-weight: 100; src: url('../fonts/playpen-sans-v22-latin_latin-ext-100.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Playpen Sans'; font-style: normal; font-weight: 400; src: url('../fonts/playpen-sans-v22-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Playpen Sans'; font-style: normal; font-weight: 600; src: url('../fonts/playpen-sans-v22-latin_latin-ext-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Playpen Sans'; font-style: normal; font-weight: 800; src: url('../fonts/playpen-sans-v22-latin_latin-ext-800.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Josefin Sans'; font-style: normal; font-weight: 200; src: url('../fonts/josefin-sans-v34-latin_latin-ext-200.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Josefin Sans'; font-style: normal; font-weight: 400; src: url('../fonts/josefin-sans-v34-latin_latin-ext-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Josefin Sans'; font-style: normal; font-weight: 700; src: url('../fonts/josefin-sans-v34-latin_latin-ext-700.woff2') format('woff2'); }

/* ==========================================================================
   1. GLOBAL & LAYOUT
   ========================================================================== */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 1rem !important;
    background-color: #ffffff;
}

h3 {color: lightcoral;}

#page-wrapper, #body-wrapper, .container {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

#body-wrapper.blog-listing > .container {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
    box-sizing: border-box;
}

@media (max-width: 879px) {
    #body-wrapper.blog-listing > .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* ==========================================================================
   2. HEADER & LOGO
   ========================================================================== */
#header, header.navbar {
    position: absolute !important;
    top: 20;
    left: 0;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    z-index: 1000 !important;
    padding: 10px 30px 10px 40px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
}

/* The header's inner Spectre "container" inherits its max-width from
   theme_var('grid-size'), which is defined by the parent theme (now Quark2,
   not the original Quark). Force it to the header's own full width so the
   nav row isn't constrained to a narrower, parent-defined container and
   doesn't overflow/clip on the right. */
#header .container {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.navbar { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; }

.navbar-section.logo, .navbar-section.desktop-menu, .off-canvas-toggle {
    pointer-events: auto !important;
}

/* padding-top set so the total top gap (header's own 10px + this) roughly
   matches the total left gap (header's own 40px padding-left), i.e. 10+30=40. */
.navbar-section.logo { flex: 0 0 auto !important; padding-top: 30px !important; }

#header .navbar-section.logo img, .navbar-brand img {
    height: 140px !important;
    width: auto !important;
}

/* Intermediate step between full desktop and the <=939px mobile sizing below.
   Without this, the logo stayed full-size all the way down to the mobile
   breakpoint and started overlapping the hero's tagline banner at widths
   just above it. */
@media (max-width: 1200px) {
    #header .navbar-section.logo img, .navbar-brand img {
        height: 100px !important;
    }
    .navbar-section.logo {
        padding-top: 30px !important;
    }
}

/* ==========================================================================
   3. DESKTOP MENU
   ========================================================================== */
.navbar-section.desktop-menu { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; padding-top: 10px !important; }

.navbar-section.desktop-menu ul { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }

/* Every top-level nav item (including menu-category-parent, which also
   contains a hidden dropdown <ul>) is centered explicitly, rather than
   relying on the plain <li><a> items happening to render fine by default. */
.navbar-section.desktop-menu ul.navigation > li {
    display: flex;
    align-items: center;
}

#header .navbar-section ul li a,
#header .navbar-section ul li button.menu-category-trigger {
    font-family: 'Josefin Sans' !important;
    font-weight: 700;
    background-color: white !important;
    color: #000000 !important;
    padding: 8px 20px !important;
    font-size: 14px;
    text-decoration: none;
    border: none;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* Anchor the dropdown to its own trigger <li>, not to the nearest positioned
   ancestor up the tree (#header, which is position:absolute). Without this,
   the dropdown was popping up near #header's own origin instead of directly
   under "Trip agenda". */
.navbar-section.desktop-menu .menu-category-parent {
    position: relative;
}

.navbar-section.desktop-menu .menu-category-parent ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    flex-direction: column;
    gap: 0;
    z-index: 1001;
}

.navbar-section.desktop-menu .menu-category-parent:hover ul,
.navbar-section.desktop-menu .menu-category-parent:focus-within ul {
    display: flex;
}

/* ==========================================================================
   4. HERO SECTIE & BREADCRUMBS
   ========================================================================== */
.modular-hero {
    z-index: 1 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Hero Hoogte Variaties */
.hero-container-main.hero-medium { min-height: 80vh; }
.hero-container-main.hero-small { min-height: 40vh; }
.hero-container-main.hero-full { min-height: 100vh; }

@media (max-width: 879px) {
    .hero-container-main.hero-small { min-height: 30vh; }
}

.tagline-row, .tagline-banner { display: none !important; }
h1,h2, h3, h4, .hero-main-title, .playpen { font-family: 'Playpen Sans', sans-serif !important; }

.breadcrumb {
    color: white !important;
    font-family: 'Playpen Sans' !important;
}

.breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.breadcrumb li {
    display: inline-flex;
    align-items: center;
}

.breadcrumb li a, .breadcrumb li span {
    color: white !important;
    text-decoration: none;
}

.breadcrumb li:not(:first-child)::before {
    content: ">>" !important;
    display: inline-block;
    color: white !important;
    padding: 0 10px !important;
    font-size: 0.9em;
}

/* ==========================================================================
   5. MOBILE MENU
   ========================================================================== */

/* Hamburger button: hidden by default at all widths, shown only <=939px below */
.mobile-menu {
    display: none;
}

/* Off-canvas panel: hidden by default at ALL widths until explicitly opened.
   Previously this had no default state outside the @media block below, so on
   wide viewports it rendered inline as normal content (the "duplicated menu"
   bug). This makes the child theme fully self-contained: it no longer relies
   on the parent Quark2 theme's CSS/JS to hide/show this panel. */
.mobile-container {
    position: fixed;
    inset: 0;
    z-index: 4000;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

body.mobile-nav-open .mobile-container {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 939px) {

    .mobile-menu,
    .off-canvas-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .mobile-menu {
        position: fixed !important;
        top: 25px !important;
        right: 25px !important;
        z-index: 5000 !important;
        pointer-events: auto !important;
        cursor: pointer;
    }

    /* Hamburger visibility.
       #toggle and its three bars previously had no explicit width/height/
       display anywhere, so the empty <span> bars rendered with zero size and
       the button itself collapsed to nothing - only the box-shadow halo was
       visible, giving a small blank "square" with no real clickable area. */
	#toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 30px !important;
        height: 22px !important;
        padding: 6px !important;
        box-sizing: content-box !important;
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.85) !important;
        border-radius: 6px !important;
        background-color: rgba(255, 255, 255, 0.85) !important;
        border: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        cursor: pointer;
    }

    #toggle .top,
    #toggle .middle,
    #toggle .bottom {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        border-radius: 2px !important;
        background-color: #000000 !important;
    }

    .navbar-section.desktop-menu ul { display: none !important; }
    #header .navbar-section.logo img { height: 80px !important; }
    .navbar-section.logo { padding-top: 15px !important; }

    .mobile-container .menu-category-parent > a,
    .mobile-container .menu-category-parent > button { display: none !important; }
    .mobile-container .menu-category-parent ul {
        display: block !important;
        position: static !important;
        padding: 0 !important;
    }

    /* Remove bullet artifacts */
    .mobile-container ul,
    .mobile-container .overlay-menu ul {
        list-style: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    .mobile-container .menu-category-child { display: block !important; }
    .mobile-container .mobile-logo { display: none !important; }

    .mobile-container .overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow-y: auto !important;
        padding: 80px 32px 48px !important;
        box-sizing: border-box !important;
        background: #000000 !important;
        z-index: 4000 !important;
    }

    .off-canvas-close {
        display: block !important;
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 5000 !important;
        color: #ffffff !important;
        font-size: 2.5rem !important;
        line-height: 1 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* When mobile nav is open, suppress hero stacking context */
    body.mobile-nav-open #page-wrapper {
        position: relative !important;
        z-index: 0 !important;
    }

    body.mobile-nav-open .hero-bar-mobile {
        position: static !important;
        z-index: auto !important;
    }
}

.mobile-container ul li a {
    display: block;
    color: #ffffff !important;
    background: transparent !important;
    font-family: 'Josefin Sans' !important;
    font-size: 1.2rem !important;
    padding: 0.6rem 0;
}

#mobile-close {
        position: fixed !important;
        top: 20px !important;
        right: 25px !important;
        z-index: 5000 !important;
        color: #ffffff !important;
        font-size: 2.5rem !important;
        cursor: pointer !important;
        line-height: 1 !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        font-family: inherit;
    }

/* ==========================================================================
   6. MODULAR SECTIONS STANDAARD
   ========================================================================== */
.modular-standard { margin: 30px auto !important; overflow: hidden; }
.section-main-title {
    font-family: 'Playpen Sans', sans-serif !important;
    font-weight: 800;
    font-size: 2.5rem;
    text-align: left;
    margin-bottom: 40px;
    color: inherit;
}

.grid-row { display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 20px; }
.grid-col { box-sizing: border-box; display: flex; flex-direction: column; }
.grid-col.full { flex: 0 0 100%; }
.grid-col.half { flex: 0 0 50%; }

.styled-block {
    padding: 40px;
    box-sizing: border-box;
    background: rgba(var(--bg-rgb, 255, 255, 255), var(--op, 0.8));
    line-height: 1.6;
}

.bg-light { --bg-rgb: 240, 242, 242; }
.bg-dark { --bg-rgb: 40, 40, 40; }
.bg-blue { --bg-rgb: 58, 83, 155; }
.bg-green { --bg-rgb: 46, 125, 50; }
.bg-warm { --bg-rgb: 121, 85, 72; }
.bg-transparent { background: transparent !important; }

.op-40 { --op: 0.4; }
.op-60 { --op: 0.6; }
.op-80 { --op: 0.8; }
.op-100 { --op: 1.0; }

.text-dark, .text-dark p, .text-dark strong, .text-dark h1 { color: #222 !important; }
.text-light, .text-light p, .text-light strong, .text-light h1 { color: #fff !important; }

@media (max-width: 879px) {
    .grid-col.half { flex: 0 0 100%; }
    .modular-standard { margin: 30px auto !important; width: 95% !important; }
    .styled-block { padding: 25px; }
    .section-main-title { font-size: 1.8rem; }
}

/* Moved out of modular/standard.html.twig's per-section inline <style>
   block, where it used to be repeated verbatim in every single section on
   a page (4 copies on the homepage alone - identical every time, nothing
   here is actually per-section). Only the section's padding, its image's
   focus point, and its title color genuinely vary per section; those 3
   rules stay inline in the twig file since they need page-specific
   values. Everything below is static and only needs to exist once. */
.has-bg-image .grid-row { display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 30px !important; gap: 30px; align-items: stretch; }
.has-bg-image .grid-col.half { flex: 0 0 calc(50% - 15px); width: calc(50% - 15px); }
.has-bg-image .col-content { padding: 40px 40px 13px 40px; }
.no-bg-image .grid-row { display: flex; flex-wrap: wrap; width: 100%; margin-bottom: 0 !important; gap: 0; align-items: stretch; }
.no-bg-image .grid-col.half { flex: 0 0 50%; width: 50%; }
.no-bg-image .col-content { padding: 40px; height: 100%; }
.col-content { box-sizing: border-box; display: block; }
.title-has-bg { background-color: rgba(255, 255, 255, 0.9); display: inline-block; padding: 10px 30px; margin-left: -30px; }
.modular-standard:has(.typewriter-block) .col-content { padding-top: 0px !important; padding-bottom: 0px !important; line-height: 0.5 !important; }

@media (max-width: 879px) {
    /* !important needed here specifically: .has-bg-image/.no-bg-image
       .grid-col.half (two-class selectors, above) outrank the plain
       .grid-col.half rule already in this file's mobile breakpoint
       (section 6, a few lines up) on specificity alone, so that plain
       version can't override them at this width without this. */
    .grid-col.half { flex: 0 0 100% !important; width: 100% !important; }
    .no-bg-image .grid-row { margin-bottom: 0 !important; }
    .grid-col { justify-content: flex-start !important; }
}

/* ==========================================================================
   7. MODULAR SECTIONS DETAILS
   ========================================================================== */
.detail-label { font-size: 0.8rem !important; color: #777; margin-bottom: 2px; display: block; }
.detail-value { font-size: 0.95rem !important; font-weight: normal !important; line-height: 1.4; color: #444; }
.detail-value p { display: inline; margin: 0; font-weight: inherit; }

/* ==========================================================================
   8. BUTTONS
   ========================================================================== */
.button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
}

.btn-crazy,
.btn-crazy-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    font-family: inherit;
    line-height: 1.3;
    border-radius: 999px !important;
    transition: all 0.2s ease;
    cursor: pointer;
    box-sizing: border-box;

    /* tekst mag wrappen */
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;

    /* knop groeit mee in hoogte */
    height: auto !important;
    min-height: 0;

    /* nette meerregelige centrering */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.btn-crazy {
    background: #f68d1f !important;
    color: #ffffff !important;
    border: 3px solid #f68d1f !important;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    min-width: 320px;
    max-width: 100%;
    font-size: 1.2rem;
    font-weight: 700;
}

.btn-crazy-outline {
    background: #fff;
    color: #f68d1f !important;
    border: 3px solid #f68d1f !important;
    padding-left: 2rem;
    padding-right: 2rem;
    min-width: 260px;
    max-width: 100%;
    font-size: 1rem;
    font-weight: 700;
}

@media (max-width: 879px) {
    .button-row {
        gap: 0.75rem;
    }

    .btn-crazy,
    .btn-crazy-outline {
        width: 100%;
        min-width: 0;
        font-size: 1rem !important;
    }
}

/* ==========================================================================
   9. ACCORDION & SPECIAL BLOCKS
   ========================================================================== */
.faq-accordion { margin: 1rem 0; border: 1px solid #ddd; border-radius: 6px; padding: 0.75rem 1rem; background: #fff; opacity: 0.8; }
.faq-accordion summary { cursor: pointer; font-weight: 600; list-style: none; }
.faq-accordion summary::before { content: "▸"; display: inline-block; margin-right: 0.5rem; transition: transform 0.2s ease; }
.faq-accordion[open] summary::before { transform: rotate(90deg); }

.typewriter-block { font-family: 'Courier New', Courier, monospace !important; font-size: 1em; white-space: pre-wrap; line-height: 1.2em !important;}
.modular-standard:has(.typewriter-block) { padding-top: 0px !important; padding-bottom: 0px !important; }

#back-to-top {
    position: fixed; bottom: 30px; right: 30px; width: 45px; height: 45px;
    background-color: #d67a5a; color: #ffffff; text-align: center; line-height: 45px;
    z-index: 1000; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s;
}
#back-to-top.show { opacity: 1; visibility: visible; }

/* ==========================================================================
   10. BLOG & LINKS
   ========================================================================== */
.card-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Small gap between the thumbnail and the title link, on Articles /
   Upcoming trips / Past trips. .card-image itself (not just the <img>,
   already display:block above) comes from the Quark2 parent theme, not
   this file - whatever it's doing (likely just an inline-block/line-height
   default leaving room for an inline "descender" gap under its contents)
   isn't visible here to fix at the source, so removing it defensively at
   the wrapper level instead. */
.card-image {
    margin: 0;
    padding: 0;
    line-height: 0;
}

.btn-crazy::after, .btn-crazy-outline::after, .btn::after { content: "" !important; margin: 0 !important; }

a.internal-link { display:inline-block; background:url("../images/click.png") center right no-repeat; padding-right:16px; }
.external-link { display:inline-block; background:url("../images/x.png") center right no-repeat; padding-right:16px; text-decoration: underline; }

.navbar a.internal-link, .navbar a.external-link, #header a.internal-link, #header a.external-link { background: none !important; padding-right: 0 !important; }

/* No link icons on overview pages */
#body-wrapper.blog-listing a.internal-link,
#body-wrapper.blog-listing a.external-link {
    background: none !important;
    padding-right: 0 !important;
}

/* Footer Image Spans */
span.aa { background-image:url("../images/vardas2.png"); background-repeat: no-repeat; padding-left: 123px; }
span.na { background-image:url("../images/vardas1.png"); background-repeat: no-repeat; padding-left: 100px; }
span.am { background-image:url("../images/vardas3.png"); background-repeat: no-repeat; padding-left: 130px; }

/* Stretched card link */
.card { position: relative; }
.stretched-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ==========================================================================
   11. IFRAME BLOCK (Safari-proof Fix)
   ========================================================================== */
.modular-iframeblock { width: 100% !important; margin: 0 !important; padding: 40 !important; }
.modular-iframeblock .iframe-wrapper {
    width: 100%; height: var(--iframe-height-desktop, 900px); overflow: auto;
    -webkit-overflow-scrolling: touch; position: relative;
}
.modular-iframeblock .iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 879px) {
    .modular-iframeblock .iframe-wrapper { height: 70vh; height: var(--iframe-height-mobile, 70svh); }
}

/* ==========================================================================
   12. COLUMN LAYOUTS
   ========================================================================== */
.two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.three-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }

@media (max-width: 879px) {
    .two-columns,
    .three-columns {
        grid-template-columns: 1fr;
    }
}

/* ===================== */
.hero-small .hero-content-cluster {
    padding-top: 140px !important;
    padding-bottom: 40px !important;
}

@media (max-width: 879px) {
    .hero-small .hero-content-cluster {
        padding-top: 100px !important;
    }
}

/* ==========================================================================
   13. HYPERLINKS (Wereldwijde regie)
   ========================================================================== */
.styled-block a,
.modular-standard a,
.modular-join-wrapper a,
.col-content a,
.col-content a.external-link,
.col-content a.internal-link,
.col-content a:visited,
.col-content a.external-link:visited,
.col-content a.internal-link:visited {
    color: inherit !important;
    text-decoration: underline !important;
}

.styled-block a:hover,
.modular-standard a:hover,
.modular-join-wrapper a:hover,
.col-content a:hover,
.col-content a.external-link:hover,
.col-content a.internal-link:hover {
    color: inherit !important;
    text-decoration: underline !important;
    opacity: 0.7;
}

.navbar a,
.btn,
.btn-crazy,
.btn-crazy-outline {
    text-decoration: none !important;
}

a.internal-link {
    display: inline-block;
    background: url("../images/click.png") center right no-repeat;
    padding-right: 16px;
}

a.external-link {
    display: inline-block;
    background: url("../images/x.png") center right no-repeat;
    padding-right: 16px;
}

.navbar a.internal-link,
.navbar a.external-link,
#header a.internal-link,
#header a.external-link {
    background: none !important;
    padding-right: 0 !important;
}

/* SCREEN-READER-ONLY TEXT ====================
   Visually hidden but still readable by assistive tech - unlike
   display:none (removes from accessibility tree too) or CSS generated
   content (unreliably exposed, see the captcha fix earlier). Used to add
   the "(opens in a new tab)" warning on external links - see the bottom
   <script> in base.html.twig, which appends a span with this class. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* FORM FIELDS ================================*/
.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  width: 100%;
  max-width: 48rem;
}

.form-field textarea {
  min-height: 12rem;
}

/* CAPTCHA ====================================*/
.form-field .captcha,
.form-field .basic-captcha {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Instruction text now comes from the field's real `description:` in
   modular.md (rendered by the form plugin as a genuine <span
   class="form-description">), not CSS generated content - so it's real
   DOM text a screen reader always gets, not something that vanishes if
   CSS fails to load or isn't reliably exposed to the accessibility tree. */
.form-field .captcha .form-description,
.form-field .basic-captcha .form-description {
  display: block;
  margin: 0.5rem 0 0.5rem;
  font-size: 0.95rem;
}

.form-field .captcha > div,
.form-field .basic-captcha > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.form-field .captcha input,
.form-field .basic-captcha input,
.form-field input[name="data[captcha]"] {
  display: block;
  width: 100%;
  max-width: 24rem;
  margin-top: 0.25rem;
}

#contact-form .form-data.basic-captcha .form-input-wrapper {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#contact .container {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

#contact-form .buttons {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

/* CAL.COM FORMULIER ===============================*/
div.flex.items-start.justify-start.text-sm.text-default {
  display: none !important;
}

/* ==========================================================================
   14. HERO BACKGROUND & PILL
   The photo itself is now a real <img class="hero-bg-image"> (or, on
   carousel pages, stacked <img class="hero-carousel-layer">s) rendered by
   partials/hero.html.twig, not a CSS background-image - so it can carry
   real alt text. --hero-focus-x/-y are still set per-page as CSS custom
   properties (each page's filepicker-driven focus point), consumed below
   via object-position instead of the old background-position.
   ========================================================================== */
.hero-container-main {
    min-height: 80vh;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    width: 100%;
    background-color: #333; /* fallback visible only if the <img> fails to load */
    overflow: hidden;
}

.hero-bg-image,
.hero-carousel-mobile,
.hero-carousel-desktop .hero-carousel-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-focus-x, 50%) var(--hero-focus-y, 50%);
    z-index: 0;
}

/* Same pattern, for modular/standard.html.twig's section background image
   (.section-bg-image). Its object-position is set per-section inline
   (that file's own <style> block, since each section has its own focus
   point) - this rule only needs the shared positioning/cropping. */
.section-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-pill-wrapper-desktop { display: none; }
@media (min-width: 940px) {
    .hero-pill-wrapper-desktop { display: block; position: absolute; top: 135px; left: 50%; transform: translateX(-50%); z-index: 40; }
    .hero-pill-desktop { background-color: #e67e22; color: #fff; padding: 8px 30px; border-radius: 50px; font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 14px; white-space: nowrap; }
}

.hero-content-cluster { z-index: 30; text-align: center; padding: 0 20px; }
.hero-main-title { color: #fff; font-family: 'Playpen Sans', sans-serif; font-weight: 800; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); font-size: 3.5rem; line-height: 1.1; }
.breadcrumb { list-style: none; display: flex; justify-content: center; margin-top: 20px; color: #fff; font-weight: 600; padding: 0; }
.breadcrumb li a { color: #fff; text-decoration: none; }
.hero-bar-mobile { display: none; }

@media (max-width: 939px) {
    .hero-main-title { font-size: 2.2rem; }
    .hero-bar-mobile { display: block; background-color: #e67e22; color: #fff; padding: 15px; text-align: center; font-weight: 600; position: relative; z-index: 50; }
}

/* ===== TRIAL: HERO TITLE HIGHLIGHT BOX — delete this whole block to revert =====
   Replaces the soft text-shadow above with a solid highlight box hugging the
   title text (via box-decoration-break, so it wraps per line instead of one
   full-width bar). Guarantees contrast against any photo instead of hoping
   the shadow is enough. `.hero-title-highlight` is a span already present in
   hero.html.twig - harmless/invisible on its own, so no template change is
   needed to revert, only this CSS block.
   Deleting this block restores the original look automatically: the
   `.hero-main-title` text-shadow/font-size/line-height rules above are
   untouched and take back over as soon as nothing here overrides them.

   font-size and line-height are overridden here too (not just left at the
   3.5rem/1.1 above) - at the original size, a long title wrapped to 3 lines
   inside the 800px cap and the tight 1.1 line-height gave each line's box
   no room to breathe, so consecutive lines' boxes visually overlapped each
   other. Smaller text + a looser line-height fixes both: fits in 2 lines
   instead of 3, and leaves a real gap between stacked boxes. */
.hero-main-title {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-size: 2.75rem;
    line-height: 1.7;
}
@media (max-width: 939px) {
    .hero-main-title {
        font-size: 1.8rem;
    }
}
.hero-title-highlight {
    text-shadow: none;
    background: rgba(0, 0, 0, 0.88);
    padding: 0.02em 0.25em;
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
/* ===== END TRIAL: HERO TITLE HIGHLIGHT BOX ===== */

/* ==========================================================================
   15. TEXT-WITH-IMAGE PAGE TYPE (templates/text.html.twig)
   Self-contained flex layout - deliberately not reusing Quark's old
   ".columns"/".align-left"/".align-right" Spectre-grid classes, since we
   can't verify those still behave the same way under the Quark2 parent.
   ========================================================================== */
.text-with-image {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
    padding: 60px 5%;
    box-sizing: border-box;
}

.text-with-image__media { flex: 0 0 340px; max-width: 340px; }
.text-with-image__media img { width: 100%; height: auto; display: block; border-radius: 8px; }

.text-with-image__content { flex: 1 1 400px; min-width: 280px; }

/* image_align: right -> media column swaps to the right-hand side */
.text-with-image-right { flex-direction: row-reverse; }

@media (max-width: 939px) {
    .text-with-image { flex-direction: column !important; gap: 20px; padding: 30px 5%; }
    .text-with-image__media { flex: 0 0 auto; max-width: 100%; }
    /* .text-with-image__content's flex-basis (400px) targets width in the
       desktop row layout. In column direction the main axis is vertical, so
       that same value gets read as a preferred height - reserving ~400px of
       empty space under short text-only blocks (e.g. no image). Reset the
       basis to the content's natural height here, and drop min-width since
       width is now the cross-axis. */
    .text-with-image__content { flex: 1 1 auto; min-width: 0; }
}

/* ==========================================================================
   16. RESPONSIVE CONTENT IMAGES
   Markdown-embedded images (e.g. ![](...) inside module/page body text)
   have no width constraint by default - an image wider than its column
   renders at full native pixel width and breaks out of it. Scoped to known
   text-content wrappers, plus a zero-specificity :where(#body-wrapper)
   catch-all so it never outranks fixed-size images that already have their
   own rule (e.g. .detail-icon's 70x70px).
   ========================================================================== */
.col-content img,
.text-with-image__content img,
.styled-block img,
:where(#body-wrapper) img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   17. ARTICLE/BLOG CARD GRID (templates/blog.html.twig)
   Replaces the old Bricklayer masonry library (theme://css/bricklayer.css +
   theme://js/bricklayer.min.js), neither of which exist in this child
   theme - without them, .card items just stacked full-width. Plain CSS
   Grid needs no JS and no dependency on whatever Quark2 still ships.
   ========================================================================== */
.bricklayer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    align-items: stretch;
}

.bricklayer .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1.5rem;
}

.bricklayer .card-body {
    flex: 1 1 auto;
}

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

/* ==========================================================================
   18. REDUCED MOTION SAFETY NET
   The homepage hero carousel already checks prefers-reduced-motion in
   custom.js before it starts rotating. This is the same signal applied as
   a blanket CSS rule, so it also covers everything else that animates or
   transitions (button hovers, the FAQ accordion arrow, the back-to-top
   button, and anything added later) without needing a JS check per case.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   19. HERO CAROUSEL (homepage only)
   Activated via hero_carousel: true in user/pages/home/01._hero/hero.md.
   Every other hero page keeps using section 14 above unchanged.

   Desktop: 3 stacked layers (.hero-carousel-layer), crossfaded by toggling
   .is-active - custom.js swaps the class every rotation interval. The
   crossfade duration is the one styling knob for that: change
   --hero-carousel-fade below. (The rotation interval itself is a JS
   constant, ROTATION_INTERVAL_MS, in custom.js.)

   Mobile (<940px): no carousel, no JS timer - just one static seasonal
   image (.hero-carousel-mobile), same breakpoint as section 14.

   Season order (winter-first Sept-Feb, summer-first Mar-Aug) and which
   layer starts as .is-active are both decided server-side in
   partials/hero.html.twig, so the first paint is already correct with
   zero JS and no flash.
   ========================================================================== */
:root {
    --hero-carousel-fade: 1.5s; /* crossfade duration - the easy-to-tweak knob for this value */
}

/* .hero-carousel-mobile and .hero-carousel-layer (inside .hero-carousel-desktop)
   get their position/inset/object-fit/object-position/z-index from the
   shared rule in section 14 now - they're real <img> elements, not
   background-image divs, so the same positioning rule that handles the
   simple-path .hero-bg-image covers these too. */

.hero-carousel-desktop { display: none; }

@media (min-width: 940px) {
    .hero-carousel-mobile { display: none; }
    .hero-carousel-desktop { display: block; }
}

.hero-carousel-layer {
    opacity: 0;
    transition: opacity var(--hero-carousel-fade) ease;
}

.hero-carousel-layer.is-active {
    opacity: 1;
}

/* Respect reduced motion, and low-stimuli mode: custom.js already stops
   the rotation timer in both cases, so the current layer just stays put -
   these rules make sure the (now permanent) crossfade transition itself
   doesn't animate either. */
@media (prefers-reduced-motion: reduce) {
    .hero-carousel-layer {
        transition: none;
    }
}

[data-mode="low-stimuli"] .hero-carousel-layer {
    transition: none;
}

/* ==========================================================================
   21. LOW-STIMULI MODE PAYLOAD
   Everything below is scoped under [data-mode="low-stimuli"] (set on
   <html> by the resolver script, item 9, or the toggle, item 10) instead
   of a body class, per the original plan. No template changes - this
   reuses the exact same markup as standard mode, just re-flows/mutes it.

   Covers the 5 things item 11 called for: hero/section images shown as a
   real block above the text instead of overlaid (reusing item 6's real
   <img>s), no colored .col-content panels, no text-shadow, a single font
   family, and flattened buttons. A few things below aren't on that list
   directly but are necessary consequences of un-overlaying the images
   (e.g. the hero title needs a readable color again now that it's not
   sitting on a photo, and the carousel's inactive layers need to stop
   reserving blank vertical space) - flagged inline where that's the case.
   ========================================================================== */

/* --- Single font family everywhere (was Playpen Sans for headings/hero
   title/breadcrumb, Josefin Sans for body text - now just one, matching
   the original "less typographic variation" brief). --- */
[data-mode="low-stimuli"] h1,
[data-mode="low-stimuli"] h2,
[data-mode="low-stimuli"] h3,
[data-mode="low-stimuli"] h4,
[data-mode="low-stimuli"] .hero-main-title,
[data-mode="low-stimuli"] .playpen,
[data-mode="low-stimuli"] .section-main-title,
[data-mode="low-stimuli"] .breadcrumb {
    font-family: 'Josefin Sans', sans-serif !important;
}

/* The site's one global heading-color accent (section 1: h3 {color:
   lightcoral}, unconditional, every h3 site-wide - blog card excerpt
   headings, the "Upcoming events" heading, article intro headings, all
   of it) - flattened to the same neutral dark used everywhere else in
   this mode, consistent with "less typographic/visual variation". */
[data-mode="low-stimuli"] h3 {
    color: #222222 !important;
}

/* The typewriter-styled text block (section 9) keeps its own fixed-width
   monospace font unconditionally otherwise. */
[data-mode="low-stimuli"] .typewriter-block {
    font-family: 'Josefin Sans', sans-serif !important;
}

/* --- Hero: image becomes a normal block image, not an overlaid
   background. DOM order in hero.html.twig already puts the <img>/
   <picture> before .hero-content-cluster, so switching from absolute
   positioning to normal flow is enough to get "image, then text" with
   zero template changes. --- */
[data-mode="low-stimuli"] .hero-container-main {
    display: block !important;
    min-height: 0 !important;
    background-color: #ffffff !important;
}

[data-mode="low-stimuli"] .hero-bg-image,
[data-mode="low-stimuli"] .hero-carousel-mobile,
[data-mode="low-stimuli"] .hero-carousel-desktop .hero-carousel-layer.is-active {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: 80vh !important;
    object-fit: cover !important;
}

/* Partial desaturation - the photos were the one remaining high-intensity
   visual element left untouched by this mode (every colored panel/accent
   elsewhere has already been flattened/neutralized above). Not full
   grayscale - keeps some warmth/color rather than reading as clinical -
   just noticeably muted. */
[data-mode="low-stimuli"] .hero-bg-image,
[data-mode="low-stimuli"] .hero-carousel-mobile,
[data-mode="low-stimuli"] .hero-carousel-desktop .hero-carousel-layer,
[data-mode="low-stimuli"] .section-bg-image {
    filter: saturate(0.4);
}

/* Carousel: rotation is already stopped in this mode (js/custom.js), so
   only the one .is-active layer should render at all - without this, the
   other stacked layers would go from "invisible via opacity" to "static
   block taking up real vertical space" the moment position:absolute is
   removed above, leaving blank gaps. */
[data-mode="low-stimuli"] .hero-carousel-desktop .hero-carousel-layer:not(.is-active) {
    display: none !important;
}

/* The darkening layer that used to sit between the photo and the text is
   no longer needed - nothing sits on top of the photo anymore. */
[data-mode="low-stimuli"] .image-overlay {
    display: none !important;
}

/* The absolutely-positioned tagline pill only makes sense overlaid on the
   photo. Reuse .hero-bar-mobile instead (same tagline, same treatment
   already shipped for narrow viewports) rather than inventing a second
   presentation just for this mode. */
[data-mode="low-stimuli"] .hero-pill-wrapper-desktop {
    display: none !important;
}
/* .hero-bar-mobile's own padding/background/color/text-align/font-weight
   only exist inside the @media (max-width: 939px) block in section 14 -
   forcing display:block wider than that breakpoint (below) showed the
   text with none of that styling: no padding, no background, flush to
   the edge. Repeating the visual rules here, unconditionally, fixes it
   for every width while in this mode. */
[data-mode="low-stimuli"] .hero-bar-mobile {
    display: block !important;
    background-color: transparent !important;
    color: #000000 !important;
    padding: 15px !important;
    text-align: center !important;
    font-weight: 600 !important;
}

[data-mode="low-stimuli"] .hero-content-cluster {
    padding: 30px 20px !important;
}

/* Title: no text-shadow, and needs an actual readable color now that
   it's not floating on a photo (default is white, for contrast against a
   photo - invisible against this mode's plain white background). The
   solid highlight box from item 7 is exactly the kind of "colored panel"
   this mode avoids, and is redundant once the text isn't overlaid
   anything, so it's neutralized here too rather than left as a leftover
   black box around plain-background text. */
[data-mode="low-stimuli"] .hero-main-title {
    color: #222 !important;
    text-shadow: none !important;
}
[data-mode="low-stimuli"] .hero-title-highlight {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    text-shadow: none !important;
}

/* --- Modular standard sections: same image-becomes-a-block treatment as
   the hero. standard.html.twig already renders the <picture>/<img>
   before the content div, so this alone gets "image, then text". --- */
[data-mode="low-stimuli"] .section-bg-image {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: 80vh !important;
    object-fit: cover !important;
}

/* No colored .col-content panels: each row's background-color/color are
   set inline per-page (editor-chosen bg_color_id/text_color_id), which
   needs !important to override here - a plain rule can't beat an inline
   style, but !important always beats a non-!important inline style
   regardless of specificity. Text forced to a single readable dark color
   rather than `inherit`, since the original per-row text color was often
   chosen to work specifically against that row's now-removed background
   (e.g. white text meant for a dark panel would be invisible on white). */
[data-mode="low-stimuli"] .col-content {
    background: transparent !important;
    color: #222 !important;
}

/* Same idea for the white "pill" some section titles get behind them. */
[data-mode="low-stimuli"] .title-has-bg {
    background: transparent !important;
    padding: 0 !important;
    margin-left: 0 !important;
}

/* Two more colored panels, both outside modular/standard.html.twig so
   .col-content's rule above doesn't reach them: the "Upcoming events"
   widget (its own inline <style> block in partials/events-widget.html.twig,
   lightyellow cards) included near the footer on every page, and the
   orange legal-links bar in footer.html.twig itself (inline
   style="background-color: orange", given a stable .footer-legal-bar
   class specifically so this rule has something to target). !important
   needed for both: the widget's <style> tag renders later in the page
   than this stylesheet so a plain rule would lose on source order, and
   the footer bar's color comes from an inline style attribute, which
   only !important can override. */
[data-mode="low-stimuli"] .events-widget__item {
    background-color: transparent !important;
    border: 1px solid #cccccc !important;
}
[data-mode="low-stimuli"] .footer-legal-bar {
    background-color: transparent !important;
}

/* Spacer rows (modular/standard.html.twig, row_type: spacer) get an
   editor-chosen pixel height per-page - often a large one (100px+),
   because in standard mode it was inflating the section's overall height
   to give the absolutely-positioned background image more room to
   breathe behind the overlaid text. Now that the image is a normal block
   with its own natural height instead (this section, above), that same
   height is just dead blank space stacked on top of it - collapsed to a
   small fixed gap instead, since none of these pages need the old
   per-page tuning anymore. Needs the .grid-row-spacer class added in the
   twig file (was a bare, unclassed <div style="height:...">) - !important
   still required either way, since the height comes from an inline style
   attribute. */
[data-mode="low-stimuli"] .grid-row-spacer {
    height: 0 !important;
}

/* Kill the remaining fixed gaps around each row/section too - the 30px
   .has-bg-image row margin and the 30px top+bottom .modular-standard
   margin are both unconditional (not tied to the old overlaid-image
   design), so they were quietly adding back exactly the kind of dead
   space this mode is supposed to remove. */
[data-mode="low-stimuli"] .has-bg-image .grid-row {
    margin-bottom: 0 !important;
}
[data-mode="low-stimuli"] .modular-standard {
    margin: 0 auto !important;
}

/* Found the bigger source of blank space: page.header.title_spacer, an
   inline margin-bottom (up to 400px on some pages) on .section-main-title
   - same root cause as the spacer rows above, just a different field.
   Standard mode used it to push the title (and everything after it) down
   to a specific point on the old tall overlaid background image; now
   that the image is a normal block above the text, it's just blank
   space under the heading. Inline style, so !important is what beats it
   here (not extra specificity - .section-main-title alone is already
   enough once !important is added). */
[data-mode="low-stimuli"] .section-main-title {
    margin-bottom: 1rem !important;
}

/* Third and biggest source of blank space, found via live DevTools box-
   model inspection: every has_bg section's own #section-{id} rule
   (modular/standard.html.twig) hardcodes `padding: 100px 5% !important` -
   an ID selector + !important, which no class-based rule here can ever
   beat on specificity, regardless of !important on this side too (same
   importance level, so it comes down to specificity, and ID always wins
   over class). The only way to influence it from here is a CSS custom
   property: the twig file now emits `padding: var(--section-padding-v,
   100px) 5% !important`, so setting --section-padding-v on <html> cascades
   the actual value down into that rule without needing to out-specificity
   it. Applies to every has_bg section at once, no per-section changes
   needed. */
[data-mode="low-stimuli"] {
    --section-padding-v: 0.5rem;
}

/* One more colored panel, this time hand-typed directly into article
   body content rather than coming from any template: the "But... it's
   natural..." aside in articles/a-vegan-retreat, a bare
   <div style="background: lightgrey;"> with no class to target - added
   one (.callout-block) purely so this rule has something to hook into,
   no content change. Checked the rest of user/pages for the same
   inline-background pattern: only one other hit, a third-party
   CleverReach newsletter-signup embed (12.newsletter/_subscribe) with
   its own extensive inline <style> blocks - left alone deliberately,
   since that's a functional embedded form widget with its own
   third-party styling/branding, not a decorative panel, and restyling it
   risks breaking the actual signup functionality. */
[data-mode="low-stimuli"] .callout-block {
    background: transparent !important;
    border: 1px solid #cccccc !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
}

/* Event pages' "join" section (modular/join.html.twig) - its own colored
   panel, entirely separate from modular/standard.html.twig, so untouched
   by every rule above. Background/text/link colors are per-page dynamic
   values (bg_color_id/text_color_id) rendered in that template's own
   inline <style> block; the two status messages further down are plain
   inline-styled <div>s that had no class at all until now (added
   .join-status-confirmed/.join-status-pending purely so this rule has
   something to target, no content change). .btn-crazy/.btn-crazy-outline
   inside this section already pick up the flattened-button rules above -
   nothing extra needed for those. */
[data-mode="low-stimuli"] .modular-join-wrapper {
    background: transparent !important;
    color: #222222 !important;
}
[data-mode="low-stimuli"] .modular-join-wrapper a:not(.button):not(.btn-crazy):not(.btn-crazy-outline) {
    color: #222222 !important;
}
[data-mode="low-stimuli"] .join-status-confirmed {
    color: #222222 !important;
}
[data-mode="low-stimuli"] .join-status-pending {
    opacity: 1 !important;
    color: #222222 !important;
}

/* Event pages' "details" block (modular/details.html.twig, e.g. Date/
   Location/Fee grid) - a separate template from modular/standard.html.twig,
   so nothing above reaches it. Its grey panel background comes from a
   per-page ID-selector rule in its own inline <style> block (no !important
   there, so a plain !important class rule beats it despite the ID); the
   label/value text colors are set as inline style="color:..." on each
   <span> instead, needing !important for the same inline-style reason as
   .col-content elsewhere. Added the stable .details-section class to the
   template so this doesn't have to target the per-page dynamic ID. */
[data-mode="low-stimuli"] .details-section {
    background-color: transparent !important;
}
[data-mode="low-stimuli"] .detail-label,
[data-mode="low-stimuli"] .detail-value,
[data-mode="low-stimuli"] .detail-footer {
    color: #222222 !important;
}

/* --- Flattened buttons: small radius instead of a full pill, no hover
   transition, and the bright orange swapped for a plain high-contrast
   dark/white pair (still passes contrast, just not a saturated accent
   color). --- */
[data-mode="low-stimuli"] .btn-crazy,
[data-mode="low-stimuli"] .btn-crazy-outline {
    border-radius: 4px !important;
    transition: none !important;
    box-shadow: none !important;
}
[data-mode="low-stimuli"] .btn-crazy {
    background: #222222 !important;
    border-color: #222222 !important;
    color: #ffffff !important;
}
[data-mode="low-stimuli"] .btn-crazy-outline {
    background: #ffffff !important;
    border-color: #222222 !important;
    color: #222222 !important;
}

/* ==========================================================================
   20. ACCESSIBILITY MODE TOGGLE (Standard <> Low-stimuli, high contrast)
   Always visible on every page — unlike #back-to-top, this is never
   hidden/faded based on scroll position. Initial state comes from the
   inline resolver script in base.html.twig's <head> (item 9), which sets
   data-mode on <html> before paint; this button just reflects and updates
   that same attribute + localStorage on click (see base.html.twig's
   bottom script block).
   ========================================================================== */
#a11y-mode-toggle {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.88);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 0.6em 1em;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

#a11y-mode-toggle:hover,
#a11y-mode-toggle:focus-visible {
    background-color: #000000;
}

#a11y-mode-toggle:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

@media (max-width: 600px) {
    #a11y-mode-toggle {
        bottom: 16px;
        left: 16px;
        font-size: 0.75rem;
        padding: 0.5em 0.8em;
    }
}

/* ==========================================================================
   22. NEWSLETTER SIGNUP EMBED (CleverReach, on 12.newsletter/_subscribe)
   Moved here from that page's own markdown content (col_a) - Grav's
   markdown processor escapes/neutralizes <style> tags even when general
   raw HTML is otherwise passed through (a common markdown-parser security
   convention, same category of treatment as <script>), so this CSS was
   rendering as inert literal text on the page instead of ever being
   applied. The <form>...</form> HTML itself was untouched by this and
   stays in the page content as before - only the styling needed to move.

   Two rules from the original embed were dropped/rescoped rather than
   copied verbatim: a bare `body{background-color:#F1F5F7}` and
   `a{color:#15C}` - both meant for an email-client rendering context
   (this whole snippet is CleverReach's email-embed code, reused here for
   the web form), and both would have recolored the entire site's page
   background and every link everywhere if applied unscoped on an actual
   page. The background rule is dropped outright (meaningless outside
   email - the section's own background already applies); the link-color
   rule is scoped to `#section-subscribe`, which only exists on this one
   page/section, instead of `a` globally. A third rule (an "autogenerated
   google-fixes" block targeting `u+#body`, an Outlook/Gmail-specific
   selector) is dropped entirely - meaningless in a browser context, would
   never match anything on this page anyway.
   ========================================================================== */
#section-subscribe .bgcolor-1, #section-subscribe .bgcolor-1-outlook { background-color: #F1F5F7; }
#section-subscribe .color-1 { color: #082137; }
#section-subscribe .bgcolor-2, #section-subscribe .bgcolor-2-outlook { background-color: #FFF; }
#section-subscribe .color-2 { color: #082137; }
#section-subscribe .aux-color-1 { color: #00282E; }
#section-subscribe .aux-bgcolor-1 { background-color: #00282E; }
#section-subscribe .aux-color-2 { color: #15C; }
#section-subscribe .aux-bgcolor-2 { background-color: #15C; }
#section-subscribe a { color: #15C; }
#section-subscribe .cr-web-row { width: 100%; max-width: 600px; box-sizing: border-box; }
#section-subscribe .cr-maxwidth { max-width: 600px; }

#section-subscribe .cr-text { font-family: Verdana, Geneva, sans-serif; font-size: 14px; }

#section-subscribe .cr-nope { display: none !important; }
#section-subscribe .cr-web-wrapper { display: flex; justify-content: center; }
#section-subscribe .cr-web-row ul, #section-subscribe .cr-web-row li { gap: 4px; flex-direction: row; }
#section-subscribe .cr-web-row ul { padding: 0 8px; margin: 0; list-style-type: none; flex-direction: column; }
#section-subscribe .cr-web-row option { min-height: 2em; white-space: normal; }
#section-subscribe .cr-web-form { display: flex; flex-direction: column; }
#section-subscribe .cr-web-form input,
#section-subscribe .cr-web-form select,
#section-subscribe .cr-web-form button { padding: 8px 12px; border-radius: 4px; border-style: solid; border-width: 1px; }
#section-subscribe .cr-web-form label, #section-subscribe .cr-web-label { font-weight: 500; padding: 8px 0 8px 0; font-style: normal; line-height: normal; }
#section-subscribe .cr-web-form button { font-size: 1em; font-weight: 700; color: #fff; font-style: normal; border-style: solid; border-color: #fff0; border-radius: 4px; cursor: pointer; }
#section-subscribe .cr-web-form label.required:after { content: ' *'; width: 10px; height: 100%; font-size: 1.1em; line-height: inherit; }
#section-subscribe .cr-web-label.required:after { content: ' *'; }
#section-subscribe .cr-web-form label.required .cred-html-wrapper,
#section-subscribe .cr-web-form label.required .cred-html { display: inline-block !important; }

#section-subscribe .cr-consent-required { display: block; margin-left: 24px; padding: 0 !important; }
#section-subscribe .cr-consent-required:after { content: ' *'; }

#section-subscribe .cr-consent-wrapper { display: flex; align-items: start; }
#section-subscribe .cr-consent-wrapper input { display: block; width: auto; }

@media only screen and (max-width: 768px) {
    #section-subscribe .cr-web-row { width: 75vw; }
}