/*!
 * Wir hier Tutzing — site theme overrides
 *
 * Loaded AFTER layout.css only on the wirhiertutzing site (site-conditional
 * TypoScript include). Defines the WHT palette as CSS custom property
 * overrides; the compiled layout.css references these via var() with the
 * AKP-site hex values as fallback, so the main site stays unchanged.
 *
 * Unchanged from main site (fallback continues to apply):
 *   --akp-bg-darkblue     (darkblue keyword, used in heroslider accents)
 *   --akp-bg-lightgrey    (#eeeeee, neutral section background)
 *
 * Changed for WHT:
 */

/* Manrope (self-hosted woff2) — declared here so the WHT site actually loads
   the typeface. The main akp site references "Manrope" in layout.css but
   has no matching @font-face, so it falls back to system sans-serif (kept
   as-is for now per project decision). Paths are relative to this CSS file
   in Resources/Public/Css/ → up one to Resources/Public/ then into Fonts/. */
@font-face {
    font-display: swap;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200;
    src: url('../Fonts/manrope-v15-latin/manrope-v15-latin-200.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 300;
    src: url('../Fonts/manrope-v15-latin/manrope-v15-latin-300.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    src: url('../Fonts/manrope-v15-latin/manrope-v15-latin-regular.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    src: url('../Fonts/manrope-v15-latin/manrope-v15-latin-500.woff2') format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    src: url('../Fonts/manrope-v15-latin/manrope-v15-latin-600.woff2') format('woff2');
}

:root {
    /* Primary brand color — headlines, links, CTAs, footer bg, buttons */
    --akp-darkblue: #125f82;

    /* Accent color — nav background, heroslider background block */
    --akp-lightblue: #07afef;

    /* Pale section-background tint matching the WHT primary (hue ~201°,
       sat ~55%, lightness ~89% — same "tint strength" as the main-site #DAE3F3) */
    --akp-bg-lightblue: #D3E8F2;

    /* Pink accent — new addition to the palette system for WHT only.
       Not yet wired into any SCSS selector; use via Mask element inline
       styles or add SCSS usage when a specific component needs it. */
    --akp-accent-pink: #b870ad;

    /* Footer Caritas logo display width (main site uses the 150px
       fallback in layout.css; WHT wants a larger 280px rendering) */
    --akp-footer-caritas-width: 280px;

    /* Standard (un-scrolled) navbar logo height. WHT wants ~25% larger
       than the main site default (180px). Width stays auto so the
       aspect ratio is preserved. Smaller scrolled-state logo unchanged. */
    --akp-navbar-logo-height: 225px;

    /* Tighter gap below the hero slider before the first content
       section. Main site default is 80px desktop / 40px mobile. */
    --akp-heroslider-margin-bottom: 30px;
    --akp-heroslider-margin-bottom-mobile: 20px;

    /* Testimonial opening-quote color: brand teal on WHT (main site
       defaults to red #c00). */
    --akp-testimonial-quote-color: var(--akp-darkblue);
}

/* WHT renders section headlines in Manrope SemiBold (600) instead of the
   main-site default 500. Same selector + specificity as `.module
   .section-headline` in layout.css; this rule wins by cascade order
   because theme-wirhiertutzing.css is loaded after layout.css. */
.module .section-headline {
    font-weight: 600;
}

/* WHT forms (Forms/Wirhiertutzing/*.form.yaml): thin divider line
   above the Pflichtfeld legend (kept in its native position above
   the submit button). The form framework renders the StaticText as
   <div class="clearfix"><p>...</p></div> as a direct child of the
   <form>, so we target it via the direct-child selector. The
   Anmerkungen-intro StaticText is nested inside a fieldset and is
   therefore not matched. */
form[id^="wir-hier-tutzing-"] > .clearfix {
    margin-top: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid #ccc;
    font-size: 0.875rem;
    font-style: italic;
    color: #666;
}
form[id^="wir-hier-tutzing-"] > .clearfix > p {
    margin: 0;
}

/* Stack footer columns vertically on narrow viewports (≤580px). The
   shared footer.scss uses flex-wrap with min-width: 200px per column,
   which produces an uneven 2-up grid on small phones; force a clean
   single column instead. WHT-only via this stylesheet's
   site-conditional load. */
@media (max-width: 580px) {
    .footer-container {
        flex-direction: column;
    }
    .footer-column {
        flex: none;
        margin: 0 0 1.5rem;
    }
    .footer-column:last-child {
        margin-bottom: 0;
    }
}

/* Hero slider: when "Kein Overlay" is chosen (empty shape value), the
   <li> has no overlay_* class but the .hero-text div is still rendered.
   On mobile, layout.css turns every .hero-text into a 20vh dark block
   below the image — producing an empty dark band for no-overlay slides.
   Hide it for no-overlay slides on mobile only; desktop is fine because
   .hero-text there is just a transparently-positioned text container. */
@media (max-width: 768px) {
    .heroslider .splide__slide:not(.overlay_blue):not(.overlay_orange):not(.overlay_green) .hero-text {
        display: none;
    }
}

/* Spalten module: editor-inserted column-break-before/break-before
   inside the rich text still triggers a column break even when the
   module is rendering as a single column (mobile or .single-col
   toggle), which spawns an off-viewport second column. Neutralize
   break properties whenever the container is effectively single-
   column so the editor's break instructions become no-ops there. */
.module-columns .content.single-col,
.module-columns .content.single-col * {
    break-before: auto !important;
    break-after: auto !important;
    -webkit-column-break-before: auto !important;
    -webkit-column-break-after: auto !important;
}
@media (max-width: 768px) {
    .module-columns .content,
    .module-columns .content * {
        break-before: auto !important;
        break-after: auto !important;
        -webkit-column-break-before: auto !important;
        -webkit-column-break-after: auto !important;
    }
}