/* ============================================================================
   RESPONSIVE.CSS
   ============================================================================
   Breakpoint overrides layered on top of structure.css and carousel.css.
   Three breakpoints in use: 1024px (tablet), 760px (mobile nav + stacked
   layout), and 480px (small phone heading size tweak).
   Loads AFTER structure.css and carousel.css in the enqueue order, so its
   rules win ties in the cascade at matching specificity — this file is
   meant to be the final word on responsive behavior.
   ============================================================================ */


/* ----------------------------------------------------------------------
   TABLET BREAKPOINT (≤1024px)
   Columns start stacking to 2-up here, ahead of the full 1-up mobile
   layout at 760px.
   ---------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {

    /* REVIEW: `--fontSize` (camelCase) used here, but structure.css
       consistently uses `--font-size` (kebab-case) everywhere else.
       If these are meant to be the same design token, this is a typo —
       a custom property with a different name/case is a DIFFERENT
       variable to the CSS engine, so `--fontSize` likely falls back to
       its default (or is invalid/unset if never declared), meaning this
       h1 rule may not be doing what's intended. Worth confirming which
       variable name is actually defined in settings.css. */
    h1 {
        font-size: calc(var(--fontSize) * 2.5);
    }

    /* Generic 2-up column stacking, applied broadly to ANY
       .wp-block-columns on the page at this breakpoint. */
    .wp-block-columns {
        flex-wrap: wrap !important;
        gap: var(--gutter);
    }

    .wp-block-columns > .wp-block-column {
        flex: 0 1 calc(50% - var(--gutter)) !important;
        flex-wrap: wrap !important;   /* REVIEW: `flex-wrap` on a flex ITEM
                                          (not a container) has no effect —
                                          flex-wrap only applies to the
                                          flex CONTAINER (.wp-block-columns
                                          above, which already has it).
                                          Dead declaration here. */
    }

    /* Section card grids also drop to 2-up at this breakpoint — note
       .pricing here is NOT prefixed with .wp-block-group like in
       structure.css; since .pricing is used as a plain class selector
       in structure.css too (`.challenges, .solutions, .values,
       .wp-block-group.pricing, .stories, .steps`), double check this
       matches consistently — if the block only ever renders with BOTH
       classes together this is fine, just worth confirming intent. */
    .challenges, .solutions, .values, .pricing, .stories {
        & > .wp-block-columns {
            & > * {
                flex: 0 0 calc(50% - var(--gutter)) !important;
            }
        }
    }

    /* Introduction section's heading/intro paragraph go full-width
       (12 columns) at tablet size, instead of the desktop 6-column
       constraint. */
    .wp-block-group.introduction {
        & h2, & h2 + p {
            width: var(--width-12-cols);
        }
    }
}


/* ----------------------------------------------------------------------
   MOBILE BREAKPOINT (≤760px)
   Main breakpoint: hides desktop nav, shows hamburger menu, stacks all
   columns to 1-up, and adjusts hero/carousel spacing for narrow screens.
   ---------------------------------------------------------------------- */
@media (max-width: 760px) {

    /* Hide desktop-only header elements; hamburger menu takes over. */
    .main-nav { display: none; }
    .account-actions { display: none; }
    .language-switcher { display: none; }

    .logo {
        padding-top: 1em;
    }

    .hamburger-menu {
        display: inline-flex;
        width: 3em;
        height: 4em;
        border: 0;
        cursor: pointer;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        padding: 8px;
    }

    /* The three lines that make up the hamburger icon; animated into an
       X shape via the [data-menu-open="true"] rules further below. */
    .hamburger-line {
        display: block;
        width: 2.5em;
        height: 3px;
        background-color: var(--houtskool);
        border-radius: 2px;
        margin: 3px 0;
        transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
        transform-origin: center;
    }

    .site-header {
        top: 1rem;   /* Header sits closer to the viewport top on mobile */
    }

    /* When the mobile menu is toggled open (via a JS-set data attribute
       on .site-header), the header pill grows to accommodate the menu
       list beneath it. */
    .site-header[data-menu-open="true"] .site-header-inner {
        flex-flow: row nowrap;
        padding-bottom: 20px;   /* extra space for menu */
    }
    .site-header[data-menu-open="true"] .mobile-nav {
        transform: translateX(-50%) translateY(6px);
        opacity: 1;
        pointer-events: auto;
    }

    /* Expands the header pill to near-full-viewport height when open,
       with a heavier blur for a proper full-screen mobile menu feel. */
    .site-header[data-menu-open="true"] {
        --header-extended-height: calc(var(--headerHeight) + 30vh);   /* REVIEW:
            `--headerHeight` (camelCase) here doesn't match `--header-height`
            (kebab-case) used everywhere else in both files — same pattern
            as the `--fontSize` issue above. Also note this custom property
            is declared but never actually USED anywhere else in either
            file, making the whole declaration dead code regardless of the
            naming mismatch. Safe to remove unless it's consumed by JS or
            an inline style elsewhere. */
        height: 90vh;
        backdrop-filter: blur(16px);
    }

    .site-header-inner {
        align-items: flex-start;
    }

    /* The dropdown/overlay panel containing mobile nav links — hidden by
       default (opacity 0, pointer-events none, slight upward offset),
       revealed via the [data-menu-open="true"] rules above. */
    .mobile-nav {
        position: absolute;
        top: calc(3em + var(--header-height));
        left: 50%;
        display: block;
        transform: translateX(-50%) translateY(-6px);
        width: 90%;
        padding-left: 10%;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--transition-speed) ease 0.1s, transform var(--transition-speed) ease;
        z-index: 1150;

        & ul {
            padding: 0;
            margin: 0;
        }
        & li {
            list-style: none;
        }
    }

    .mobile-menu {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--gutter);

        & a {
            color: var(--txt-color);
            text-decoration: none;
            font-size: 2em;
        }

        & .mobile-language-switcher {
            display: flex;
            flex-direction: column nowrap;   /* REVIEW: `flex-direction` doesn't
                                                 accept `nowrap` as a value —
                                                 `nowrap` belongs to `flex-wrap`,
                                                 not `flex-direction`. This value
                                                 is invalid CSS and will be
                                                 ignored by the browser, so
                                                 flex-direction falls back to
                                                 its default (`row`), which is
                                                 likely NOT what was intended
                                                 for a "column" language list.
                                                 Should probably just be
                                                 `flex-direction: column;`. */
            gap: var(--gutter);

            & li {
                list-style: none;
            }
        }
    }

    .mobile-account {
        display: flex;
        flex-flow: column nowrap;
        gap: 0.2em;
        width: fit-content;

        .btn {
            /* REVIEW: empty rule — no declarations. Remove if unused,
               or fill in the intended button styling. */
        }
    }

    /* Hamburger → X animation when the menu is open: top and bottom
       lines rotate into an X, middle line fades/collapses. */
    .site-header[data-menu-open="true"] .hamburger-menu .line-top {
        transform: translateY(9px) rotate(45deg);
    }
    .site-header[data-menu-open="true"] .hamburger-menu .line-middle {
        opacity: 0;
        transform: scaleX(0);
    }
    .site-header[data-menu-open="true"] .hamburger-menu .line-bottom {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* All column layouts collapse to single-column full-width at mobile
       size — this is the master "stack everything" rule for this
       breakpoint. */
    .wp-block-columns > .wp-block-column {
        flex: 0 1 calc(100%) !important;
        max-width: 100% !important;   /* safety for older browsers */
        flex-wrap: wrap !important;   /* REVIEW: same dead-declaration issue
                                          as at 1024px — flex-wrap has no
                                          effect on a flex item. */
    }

    .challenges, .solutions, .values, .pricing, .stories {
        & > .wp-block-columns {
            & > * {
                flex: 0 0 calc(100%) !important;
            }
        }
        & h2 + p {
            /* width: var(--width-10-cols); */   /* REVIEW: dead/commented —
                remove or restore if the constrained-width intro paragraph
                was intentionally disabled for mobile and this is a
                leftover note-to-self. */
        }

        & .intro {
            width: var(--width-10-cols);
        }
    }

    /* Mobile-specific override: pricing's intro paragraph loses its
       fixed --width-6-cols constraint (set in structure.css) so it can
       use the full available width on small screens instead. */
    .wp-block-group.pricing {
        & h2 + p {
            width: unset;
        }
    }

    /* Homepage hero: columns stack, image/logo overlay repositioned for
       the narrower viewport. */
    .home .hero .wp-block-columns > .wp-block-column {
        flex: 0 0 100% !important;
    }
    .home .hero .wp-block-column {
        &:first-child {
            padding-left: 0;
        }
    }
    .home .hero .wp-block-column {
        & .foon {
            left: 10%;
        }
    }

    /* Homepage section headings/intro paragraphs go full-width on
       mobile, overriding the desktop --width-6-cols constraint set in
       the `.home main > article > *` rule in structure.css. */
    .home main > article > * {
        > h2, > h2 + p {
            width: 100%;
        }
    }

    /* Hero carousel content cards lose their side-margin/max-width
       constraints on mobile so the frosted-glass card can use the full
       slide width instead of being pinned to one side. */
    .carousel-swiper .wp-block-cover__inner-container,
    .carousel-swiper .wp-block-cover:nth-child(2n) .wp-block-cover__inner-container {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    /* Only the first footer nav (legal links) shows on mobile; the
       second nav (main site links, already accessible via the mobile
       menu) is hidden to avoid duplicating navigation. */
    .footer-menu nav + nav {
        display: none;
    }
}


/* ----------------------------------------------------------------------
   SMALL PHONE BREAKPOINT (≤480px)
   Minimal — just a heading size reduction and some now-empty footer
   overrides.
   ---------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {

    /* REVIEW: `--fontSize` again (camelCase) — same likely-typo issue
       as the 1024px breakpoint above. If `--font-size` (kebab-case) is
       the real token, this h2 override is silently not working as
       intended. */
    h2 {
        font-size: calc(var(--fontSize) * 2) !important;
    }

    footer {
        /* padding: 0 var(--leftrightMargin); */   /* REVIEW: dead/commented,
            and also uses a third naming variant (`--leftrightMargin`) not
            seen elsewhere — likely an old/abandoned token name. Safe to
            remove this comment entirely if the padding override isn't
            needed at this breakpoint. */
    }

    footer .footer-menu {
        ul {
            height: unset;   /* Removes the fixed 7rem height set in
                                 structure.css so the menu can wrap
                                 naturally at this narrow width. */
        }
        li {
            width: 100%;   /* Stacks footer menu items to full-width rows */
        }
    }
}