/*
 * Site-wide mobile layout fixes. Kept as a small standalone stylesheet for
 * the same reason as booking-dates.css: the theme's SCSS sources and its
 * compiled style.css are currently out of sync, so recompiling style.css
 * would pull in unrelated changes. Loaded on every page (functions.php).
 */

/*
 * Horizontal page scroll on mobile: `.hero` is a flex container with a
 * single child, `.hero__content` (see _heading.scss). Without min-width: 0,
 * a flex item defaults to a minimum width based on its content's longest
 * unbreakable word - here the page <h1> - so a long one-word title (e.g.
 * "evenementenagenda" on /marktagenda/) at the hero's large font-size forces
 * .hero__content wider than the viewport and the whole page scrolls
 * sideways. min-width: 0 lets it shrink and wrap normally; overflow-wrap is
 * a second safety net in case an even longer single word shows up later
 * (e.g. a long place name in a market title).
 */
.hero__content {
    min-width: 0;
    overflow-wrap: break-word;
}

/*
 * The hamburger menu and account/cart buttons are `position: fixed` in the
 * bottom corners below 1024px (see _header.scss, --header-bottom-bar-height
 * is defined for exactly this but was never applied as spacing). Nothing
 * reserved room for them, so they sat on top of whatever content happened
 * to be at the bottom of a section/page. This adds that reserved space back
 * so the last button/line of text can be scrolled clear of them.
 */
@media (max-width: 1023px) {
    body {
        padding-bottom: calc(var(--header-bottom-bar-height, 4rem) + var(--card-spacing, 1.5rem));
    }
}

/*
 * Visually-hidden accessibility text (WordPress core's standard rule). Not
 * mobile-specific, kept here because it's the general "small CSS additions
 * that don't fit the SCSS/style.css build right now" file. This theme never
 * defined .screen-reader-text, so every screen-reader-text span WordPress
 * core and WooCommerce output rendered fully visible - most visibly
 * wc_format_price_range()'s "Prijsklasse: X tot Y" suffix on the event cards'
 * price line, which ran straight into the visible price and overflowed the
 * card on narrow screens.
 */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, .6);
    clip: auto !important;
    clip-path: none;
    color: #13274B;
    display: block;
    font-size: 1rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/*
 * The event-card info list (kramen/opbouwtijd/datum/locatie/prijs, see
 * twig/woo/card-product.twig) reuses the generic .flex-list utility, which
 * is white-space: nowrap by design (fine for short values like "250
 * kramen"). One item's value is product.get_name() though - an
 * arbitrary-length market title/location - so on a long name that single
 * item couldn't wrap at all and ran straight past the card's edge instead
 * of breaking onto a new line.
 */
.card__body__flex-list .flex-list__item {
    white-space: normal;
    overflow-wrap: break-word;
}

/*
 * Same class of bug as .hero__content above, but in CSS Grid instead of
 * flexbox: `.wrapper` (see _sections.scss) is `display: grid;
 * grid-template-columns: 1fr;` on mobile. A grid column still won't shrink
 * narrower than its item's content-based minimum by default, so long
 * content in `.wrapper__col--left`/`--right` (e.g. the "Welkom bij
 * DonEvents" text block, or its photo) could push that column - and the
 * whole page - wider than the screen. Reported as still broken on a real
 * iPhone after the .hero__content fix above; not reproduced in this
 * session's headless-Chrome testing, but this is the same well-established
 * fix applied defensively.
 */
.wrapper__col--left,
.wrapper__col--right {
    min-width: 0;
}

/*
 * Gravity Forms ships its own "Orbital" theme with a generic blue
 * (#204ce5) submit button, set via an inline <style> block GF prints per
 * form. The theme never themed the footer newsletter form's button, so it
 * rendered in GF's default blue, square-cornered and narrow instead of
 * matching the site's pill-shaped, full-width, red CTA buttons
 * (.btn.btn--primary.btn--full). !important is needed to beat GF's inline
 * styles. Scoped to the footer newsletter form specifically, not every
 * Gravity Forms button site-wide.
 */
.footer__col3 .gform_button {
    display: flex !important;
    flex: 1 1 100% !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    height: auto;
    border-radius: 1rem !important;
    border: 3px solid #E51C20 !important;
    background-color: #E51C20 !important;
    color: #fff !important;
    font-weight: 600;
    line-height: 1;
}

.footer__col3 .gform_button:hover {
    background-color: #fff !important;
    color: #E51C20 !important;
}

/*
 * Hamburger menu: was `position: fixed` bottom-left, floating over page
 * content (see _header.scss). Moved to the traditional top-right spot,
 * vertically centered in the fixed logo bar.
 */
@media (max-width: 1023px) {
    .header__btn-menu {
        top: calc(var(--header-height, 5.5rem) / 2) !important;
        bottom: auto !important;
        left: auto !important;
        right: calc(var(--card-spacing, 1.5rem) * 0.5) !important;
        transform: translateY(-50%);
    }
}

/*
 * Phone/e-mail/social icons (see .header__top in header.twig) were
 * display:none below 1024px (_header.scss), so this contact info simply
 * didn't exist anywhere on mobile. Duplicated into a new
 * .header__mobile-contact block, placed below the menu links inside the
 * full-screen mobile nav (.header__main__nav in header.twig) - it fades in
 * together with the rest of that overlay, no extra work needed there. Only
 * shown below the desktop breakpoint; .header__top already covers desktop.
 */
@media (max-width: 1023px) {
    .header__main__nav {
        flex-direction: column;
        gap: calc(var(--card-spacing) * 1.5);
        overflow-y: auto;
    }

    .header__mobile-contact {
        align-items: center;
        width: 100%;
        flex-shrink: 0;
    }

    .header__mobile-contact .social-links {
        /*
         * Without an explicit width, this flex item (ul, itself
         * display:flex;flex-wrap:wrap) was resolving its cross-axis size to
         * the full 382px available width instead of shrinking to its
         * 3-icons-wide content, so every icon wrapped onto its own row
         * instead of sitting in one row like on desktop.
         */
        width: fit-content;
        margin-left: 0;
        justify-content: center;
    }

    /*
     * Same story one level down: each <li> (no dedicated CSS rule of its
     * own at all - .social-links only styles the ul and the __item__link
     * anchor) was still claiming the full row width as a flex item instead
     * of sizing to its icon, so even inside the now-fit-content ul each
     * icon still forced a wrap onto its own line.
     */
    .header__mobile-contact .social-links__item {
        width: auto;
        flex: 0 0 auto;
    }

    /*
     * .icon > svg { width: 100%; height: 100% } (_general.scss) resolves to
     * 0x0 for these specific icons here - confirmed via CDP that it's the
     * only matching rule (no override), yet the used value comes out 0
     * despite the .icon parent having a real, definite 32x32 box. Same
     * markup works fine in the desktop .header__top. Rather than chase the
     * percentage-resolution edge case through this flex/column nesting,
     * sidestep it with an absolute size.
     */
    .header__mobile-contact .social-links__item__link svg {
        width: var(--icon-size, 1.5rem);
        height: var(--icon-size, 1.5rem);
    }

    /*
     * .header__top itself (phone/e-mail/socials) is supposed to be
     * display:none below 1024px (_header.scss) - that's the whole premise
     * .header__mobile-contact above was built on. Confirmed live it wasn't
     * actually hidden: the element also carries the generic ".flex-list"
     * utility class (class="header__top flex-list flex-list--wrap" in
     * header.twig), and `.flex-list { display: flex }` in the separately-
     * loaded style.css has the exact same specificity as `.header__top {
     * display: none }` in the inline critical CSS. Since style.css loads
     * after the inline critical CSS, its `display: flex` silently won the
     * tie on every page, so the real .header__top was rendering on top of
     * (and pushing down) the .header__mobile-contact duplicate. !important
     * needed here to reliably win regardless of that load-order accident.
     */
    .header__top {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .header__mobile-contact {
        display: none;
    }
}

/*
 * Structural fix for mobile horizontal scroll, requested after a manual
 * audit found several 100vw/negative-margin patterns. An automated
 * Playwright sweep (Chromium + WebKit, 320-414px, cookie-banner/menu-open
 * states) found no *current* scrollWidth > clientWidth on this staging
 * environment - `100vw` only overshoots the visible viewport when a
 * scrollbar reserves space, which doesn't happen on touch/mobile. These are
 * still fragile patterns (real devices can behave differently with
 * accessibility text-size settings, RTL, etc.), so hardening them anyway
 * rather than leaving the risk in place.
 */

/*
 * .cookie-banner.card.card__body (_cookies-banner.scss) is
 * `position:fixed; left:0; width:100vw;` with `max-width:550px`. Anchoring
 * the right edge instead of declaring a vw-based width sidesteps the
 * scrollbar-inclusion issue entirely and is equivalent everywhere it
 * matters (mobile: fills to the right edge same as 100vw would; desktop
 * media queries below already override `left` to 3rem, `right:0` still
 * caps it at max-width:550px there).
 */
@media (max-width: 1023px) {
    .cookie-banner.card.card__body {
        width: auto;
        right: 0;
    }
}

/*
 * .header__main__nav (_header.scss) was also `width:100vw; height:100vh;`
 * on top of `left:0; top:0;`. `inset:0` replaces all four and is exact by
 * construction (fills the fixed-position containing block, no viewport
 * unit involved). Height kept as an explicit vh-then-dvh pair per the
 * fixed-position full-screen-overlay convention, so iOS Safari's dynamic
 * toolbar doesn't leave a gap/overshoot at the bottom.
 */
@media (max-width: 1023px) {
    .header__main__nav {
        inset: 0;
        width: auto;
        height: 100vh;
        height: 100dvh;
    }
}

/*
 * .wrapper (_sections.scss) had `max-width: 100vw` alongside horizontal
 * padding. 100% of the normal containing block is what was actually
 * wanted here and sidesteps the same scrollbar-inclusion class of issue;
 * unscoped since it's equally correct on desktop.
 */
.wrapper {
    max-width: 100%;
}

/*
 * .social-links (_general.scss) has `margin-left: -0.5rem` site-wide - a
 * visual-alignment trick (compensating for the icon svgs' own padding) that
 * only has room to "absorb" safely when there's enough padding on its
 * left in the surrounding layout. Currently harmless in every context that
 * renders on mobile (checked live: footer social links sit at 16px from
 * the edge, absorbing the -8px fine) but removing it below the desktop
 * breakpoint removes the risk outright rather than relying on every
 * current and future mobile container happening to have enough padding.
 */
@media (max-width: 1023px) {
    .social-links {
        margin-left: 0;
    }
}

/*
 * .btn-group already wraps (`flex-wrap: wrap`), but an individual .btn is
 * `white-space: nowrap`, so one button with a long label could still be
 * wider than a very narrow (~320px and under) screen and overflow on its
 * own regardless of the group wrapping. Letting the label wrap and the
 * button shrink below that width is a defensive fallback for that case.
 */
@media (max-width: 320px) {
    .btn-group .btn {
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        flex-shrink: 1;
    }
}

/*
 * Safety net: catches any remaining or future 1-2px horizontal overshoot
 * without hiding legitimate vertical overflow or breaking position:sticky
 * (which `overflow: hidden` would - `clip` doesn't create a new scroll
 * container). Also on `html`, not just `body`: iOS Safari ignores
 * `overflow-x` set only on `body`.
 */
/*
 * Product card photos (twig/woo/card-product.twig, e.g. /marktagenda/,
 * rendered via product-list-items.twig with is_landscape:true - so every
 * card on that listing carries .card--product-landscape, which below
 * $bp-lg only affects margins, not layout direction) had no height rule at
 * all for .img-wrap/.img-wrap__img - only .content-media .img-wrap
 * {aspect-ratio:1/1} exists, for an unrelated ACF block. Each card
 * rendered at its own photo's natural aspect ratio, so card heights varied
 * with whatever photo happened to be uploaded.
 *
 * Applies at every width, including the $bp-lg row layout: there,
 * .card--product-landscape .card__header (3 classes, style.css) already
 * pins both width and height to 100% at higher specificity than this
 * 2-class rule, so aspect-ratio has nothing left to resolve and is
 * harmlessly inert - only object-fit: cover on the image itself still
 * applies there, which can only help.
 */
.card--product .card__header {
    position: relative;
    overflow: hidden;
}

.card--product .card__header .img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.card--product .card__header .img-wrap__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*
 * Desktop row layout only (.card--product-landscape at $bp-lg,
 * _cards.scss): .card__header there is explicitly height:100%/width:100%
 * to fill the row, but .img-wrap itself was never given a matching
 * height - without one, aspect-ratio: 16/9 above resolved from
 * .img-wrap's height (auto-stretched to match .card__header's 100% row
 * height as a flex item) instead of its width, computing a width far
 * wider than the 303px column it's actually in (measured: 1005px wide in
 * a 303px box). .card__header's overflow: hidden then clipped that
 * oversized box at a square edge - the left rounded corner is real
 * (.img-wrap's own corner, inside the visible slice), the right one
 * never was (just where the square clip happened to cut, ~700px into an
 * image that isn't rounded there at all). Reported: right side needed
 * the same rounding as the left, desktop only. Height: 100% here removes
 * the ambiguity so .img-wrap matches .card__header exactly - both
 * corners are then real, rounded, and the existing
 * .card.card--product-landscape .card__header .img-wrap{border-radius:
 * var(--radius) !important} rule (style.css) shows correctly on all
 * four. Not present below $bp-lg, so mobile (which relies on the
 * aspect-ratio-driven height here to size .card__header itself) is
 * unaffected.
 */
@media (min-width: 1024px) {
    .card--product-landscape .card__header .img-wrap {
        height: 100%;
    }
}

/*
 * Country badge on the market card photo (twig/woo/card-product.twig,
 * new .country ACF select field on the product). A 2-letter code in a
 * small pill instead of a flag emoji: flag-sequence emoji render
 * inconsistently across platforms (Windows in particular shows the raw
 * letter pair instead of an actual flag glyph for most fonts), so a
 * styled badge looks the same and intentional everywhere rather than
 * looking "right" on some devices and broken on others.
 */
.card__country-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 2;

    padding: 0.25rem 0.65rem;
    border-radius: 999px;

    background-color: #fff;
    border: var(--border-w, 3px) solid #E51C20;
    color: #13274B;

    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.03em;
}

html,
body {
    overflow-x: clip;
}

/*
 * Hero H1 (.hero__content h1, e.g. product/page titles): --fs-h1 is a
 * fluid clamp() (vw-based), so it scales with viewport width but not with
 * word length. A single long word that doesn't fit the line at that size
 * (e.g. "evenementenagenda" on /marktagenda/, 18 chars) falls back to
 * overflow-wrap: break-word, which chops it at an arbitrary character
 * position ("evenementenage-\nnda") instead of a real syllable boundary -
 * looks broken rather than intentional. Home's title happened not to
 * trigger this (its longest word barely fits), which is why only some
 * pages showed it. hyphens: auto (html lang="nl-NL" is already set, so the
 * browser has what it needs for Dutch hyphenation) inserts a proper
 * hyphen at a real break point instead; break-word stays as the fallback
 * for anything the hyphenation dictionary can't place (e.g. place names).
 * Scoped below the desktop breakpoint only - desktop is untouched.
 */
@media (max-width: 1023px) {
    .hero__content h1 {
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

/*
 * Homepage preference: no hyphenation for this hero's title specifically.
 * Unlike other hero titles - where a single long word (e.g.
 * "evenementenagenda") is what hyphens: auto above exists to fix - this
 * page's sentence-style title already wraps cleanly between whole words,
 * so hyphenating it here was a pure look-and-feel preference, not a fix
 * for anything broken.
 */
@media (max-width: 1023px) {
    body.home .hero__content h1 {
        hyphens: manual;
        -webkit-hyphens: manual;
    }
}

/*
 * Hero CTA buttons ("Markten vinden om te exposeren" / "Bekijk de
 * evenementenkalender") overlapped the featured-product card next to them
 * with no gap at all. First fix (flex-wrap: wrap) removed the overlap but
 * stacked the buttons instead of keeping them side by side, which wasn't
 * wanted. Replaced: buttons stay on one row (nowrap), but each one is
 * allowed to wrap its own text and shrink to an equal share of the row
 * (flex: 1 1 0) instead of demanding its full-text width - two lines
 * inside a narrower button rather than spilling into the card's space.
 * The card's own leftward bleed (.hero__media__card, left: -10%) is also
 * capped at -40px (max(-10%, -8px)) - a flat -10% grows more negative
 * (more overlap) at wider viewports since it's relative to .hero__media's
 * own width, so capping it keeps the remaining gap predictable instead of
 * shrinking again on very wide screens. !important needed to beat
 * style.css (compiled style.css is out of sync with the SCSS source,
 * where these are already updated, see functions.php enqueue).
 */
@media (min-width: 1024px) {
    .hero__content .btn-group {
        flex-wrap: nowrap !important;
        gap: calc(var(--card-spacing) * 0.25) calc(var(--card-spacing) * 0.5) !important;
    }

    .hero__content .btn-group .btn-group__btn {
        flex: 1 1 0 !important;
        white-space: normal !important;
        text-align: left !important;
    }

    .hero__media__card {
        left: max(-10%, -8px) !important;
    }
}

/*
 * WYSIWYG bulleted lists (.wysiwyg ul li): the bullet is an inline
 * ::before, meant to sit right before inline text on the same line - but
 * pasted/editor content very often wraps each item's text in its own <p>
 * (e.g. <li><p>Datum en tijd</p></li>, seen on multiple pages, not just
 * one), and a block-level element after an inline one always starts a new
 * line. That pushed the text below the dot instead of beside it,
 * everywhere this content pattern occurs - not a one-off, so fixed at the
 * CSS layer rather than hunting down and editing every affected page's
 * content. Making the <li> a flex row sidesteps it regardless of what's
 * inside (p, plain text, anything else).
 */
.wysiwyg ul li {
    display: flex;
    align-items: flex-start;
}

.wysiwyg ul li::before {
    flex: 0 0 auto;
    margin-top: 0.55em;
}

/*
 * Button hover states. First attempt (full solid-color invert + the
 * icon shrinking/fading away while the label slid over to fill the gap)
 * was reported as too much movement/contrast for a hover. Replaced with
 * a much lighter touch: a soft, low-opacity tint of the button's own
 * color, no text/icon color inversion, no icon animation at all. .btn
 * already transitions background-color/color (base rule, .3s) so this
 * fades in smoothly with no extra CSS needed for that.
 */
.btn--primary:not(.btn--light, .btn--full):hover {
    background-color: rgba(229, 28, 32, 0.08);
}

.btn--primary.btn--full:hover {
    background-color: #c8171b;
}

.btn--secondary:not(.btn--light, .btn--full):hover {
    background-color: rgba(19, 39, 75, 0.08);
}

.btn--secondary.btn--full:hover {
    background-color: #0d1c38;
}

.btn--white:not(.btn--light, .btn--full):hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.btn--white.btn--full:hover {
    background-color: #f0f0f0;
}

/*
 * The decorative SVG (deco-svg.svg, card-product.twig, included right
 * before .hero__media__card when is_hero_fp) is position:absolute with no
 * z-index, bleeding upward out of the card (.card--product > svg {
 * bottom: calc(100% - ...) }, see _cards.scss). Below $bp-lg, .hero isn't
 * a grid yet - content and media stack as normal block siblings, so that
 * absolutely positioned SVG (a few levels down inside .hero__media)
 * painted on top of the hero CTA button group regardless of DOM order:
 * positioned elements paint after non-positioned ones in the same
 * stacking context. Reported: the "Bekijk de evenementenkalender" button
 * was visible *through* the SVG. Giving the group its own position +
 * z-index makes it the one that wins instead. Desktop ($bp-lg+, .hero
 * becomes a 2-column grid, content and media don't visually overlap
 * there) is untouched.
 */
@media (max-width: 1023px) {
    .hero__content .btn-group {
        position: relative;
        z-index: 1;
    }
}

/*
 * Cart page on mobile: the card was wider than the viewport ("Totaal",
 * the checkout button and the address were cut off on the right).
 * .flex-list sets white-space: nowrap, so the long address in
 * .cart-item__content__details could not wrap and stretched the whole
 * .cart-form past the screen. Let the detail rows wrap, let the flex/card
 * children shrink (min-width: 0), and let the "Totaal" row wrap instead of
 * forcing the price (min-width 150px) off-screen.
 */
.cart-form,
.cart-form__footer,
.cart-form__footer__totals,
.order-review__list,
.cart-item,
.cart-item__content,
.cart-item__content__details,
.cart-item__content__details .flex-list__item {
    min-width: 0;
    max-width: 100%;
}

.cart-item__content__details.flex-list {
    white-space: normal;
}

.cart-item__content__details .flex-list__item > span:not(.icon) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cart-item__content__details .flex-list__item > .icon {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .cart-form__footer__totals {
        flex-wrap: wrap;
    }

    .cart-form__footer .price {
        min-width: 0;
    }

    .cart-form__footer__btn {
        white-space: normal;
        font-size: var(--fs-h4, 1.25rem);
    }
}