/*
 Theme Name:    Racket House Brand Store
 Description:   CustomerScale - Racket House child theme
 Author:        CustomerScale
 Version:       1.13
 Template:      zerv-wptheme
 Update URI: https://updates.customerscale.net/rackethouse-brand
 GitHub Theme URI: https://github.com/CustomerScale/rackethouse-brand-wptheme
 Primary Branch: main
 License: GNU General Public License v3
*/

/*
 * Header - Racket House.
 *
 * The parent theme's Tailwind build only scans zerv-wptheme, so any utility class that does
 * not already appear in the parent is never compiled and would silently do nothing here.
 * Anything the brand-site header needs beyond the parent's existing vocabulary lives in this
 * file instead, under an rh- prefix.
 *
 * The accent colour (menu active state, rule under the menu) is not set here - it comes from
 * brand-primary in theme.json, which is what the parent's bg-brand-primary resolves to.
 */

/*
 * Header - Racket House.
 *
 * Layout is Tailwind in the templates. What stays here are the heights, which are derived from
 * each other, and the sizing of the injected logo SVG.
 */
.rh-header {
    position: relative;

    /* Grey strip height. The logo plate matches it, so both are declared once here. */
    --rh-strip-h: 3rem;

    /* White row under the strip. */
    --rh-main-h: 6rem;
}

.rh-header__strip {
    height: var(--rh-strip-h);
}

.rh-header__main-inner {
    height: var(--rh-main-h);

    /* Containing block for the fixed-state logo below. */
    position: relative;
}

/*
 * The logo plate is exactly as tall as the grey strip, because the parent's skewed-bg-* wedges
 * are height:100% and would otherwise paint grey triangles down over the white row. The logo
 * itself overflows below the plate onto that row, which reads as one continuous white shape.
 */
.rh-header__logo {
    height: var(--rh-strip-h);

    /*
     * position stays here rather than being an `absolute` utility. The plate also carries the
     * parent's skewed-bg-left/right, and those declare position: relative in the parent's
     * stylesheet - which beats Tailwind's .absolute on order, so the utility silently lost and
     * the plate dropped back into the flow, making the header 48px taller. The inset, z-index
     * and centring are utilities; only the property that is contested lives here.
     */
    position: absolute;
}

/*
 * The mark sits optically centred across the strip and the white row together, rather than
 * inside the 3rem plate. Derived from both heights and the logo's own, so it stays correct if
 * any of the three changes - which is why it is calc() here and not a literal utility.
 */
.rh-header__logo > * {
    position: relative;
    z-index: 1;
    margin-top: calc((var(--rh-strip-h) + var(--rh-main-h) - 4.75rem) / 2);
}

/*
 * The logo SVG carries a viewBox but no width/height, so it has no intrinsic size for
 * max-height to work against - browsers fall back to 300x150. An explicit height with width
 * following the viewBox ratio is what actually constrains it.
 */
.rh-header__logo-svg,
.rh-header__logo img,
.rh-header__logo svg {
    display: block;
    height: 4.75rem;
    width: auto;
    max-width: 100%;
}

/*
 * Sticky menu. The parent uses Tailwind arbitrary values for this; the offset below is the menu
 * height plus the accent rule, so it is kept beside the fixed state it compensates for.
 */
.rh-header__sticky {
    background: #fff;
    transition: none;
}

.rh-header__sticky--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
}

/*
 * The mark the white row shows once the header is fixed, standing in for the skewed plate,
 * which stays behind with the grey strip. Smaller than the plate's logo on purpose: the row is
 * the whole header at that point, so the mark reads as a badge rather than a masthead. Matches
 * the h-12 the parent theme uses for the same swap in its middle bar.
 *
 * Absolutely centred rather than left to the row's justify-between, which would put it midway
 * between the tagline and the B2B link - not the middle of the page, and so not in line with
 * the plate it replaces.
 */
.rh-header__logo-fixed {
    position: absolute;
    left: 0;
    right: 0;
    width: max-content;
    margin-inline: auto;
}

.rh-header__logo-fixed-svg {
    display: block;
    height: 3rem;
    width: auto;
}

/*
 * What the fixed header takes out of the flow: the menu and accent rule, and now the white row
 * as well. Compensates for the height the sticky block occupied at rest, which is not the same
 * as its height once fixed - the logo it shows there is smaller, but nothing else moves.
 */
.rh-header--offset {
    margin-bottom: calc(var(--rh-main-h) + 3.875rem);
}

/*
 * Brands page (template-brands.php).
 *
 * The layout is Tailwind in the template. What is left here is the three things this Tailwind
 * version cannot express - see the note in each rule.
 */

/*
 * The accent rule under each shop panel. The colour is a per-shop CSS variable set inline on
 * the element, so only the colour lives here; the 4px width is border-b-4 in the template.
 */
.rh-brands__panel {
    border-bottom-color: var(--rh-accent, #134e4a);
}

/*
 * Two columns once there is room, but only for panels that actually have an image - a panel
 * without one should keep its text full width. That needs :has(), which arrived in Tailwind
 * 3.4, and a 900px breakpoint, which is neither a configured screen nor expressible as
 * min-[900px]: before 3.2. This build is on 3.0.2, so the rule stays CSS.
 */
@media (min-width: 900px) {
    .rh-brands__panel-inner:has(> div > img) {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
}

/*
 * Full-width buttons while the panel is still one column.
 *
 * 900px, the same boundary as the panel above, so the buttons stop spanning at the moment the
 * text stops being the full width of the card. Written here rather than as w-full + a
 * breakpoint variant because 900 is not one of Tailwind's, and this build is 3.0.2 - arbitrary
 * variants like min-[900px]: arrived in 3.2 and would compile to nothing.
 */
@media (max-width: 899px) {
    .rh-brands__actions > a {
        width: 100%;
    }
}

/*
 * Shop logos arrive as injected SVG or an <img> from the importer, so there is no element here
 * to put a class on - it has to be a descendant selector.
 */
.rh-brands__panel-logo svg,
.rh-brands__panel-logo img {
    max-width: 230px;
    max-height: 64px;
    width: auto;
    height: auto;
}

/*
 * Close the gap above the footer.
 *
 * header.php opens a page wrapper with pb-12 that footer.php closes, leaving 48px of padding
 * between the last section and the footer. The wrapper has no background, so on this site it
 * reads as a white band between the grey page content and the tricolour rule. Content sections
 * carry their own bottom padding already, so the wrapper's is just a seam.
 *
 * Three classes deep so it outranks Tailwind's single-class .pb-12, and specific enough that
 * it only ever matches that one wrapper.
 */
.relative.w-full.pb-12 {
    padding-bottom: 0;
}

/*
 * Footer.
 *
 * The rule across the top is the three sport colours in equal thirds - the same red / blue /
 * green used for the front page shop cards and the Brands page accents.
 */
/*
 * Footer - Racket House.
 *
 * The layout is Tailwind in the template. These are the rules that cannot be utilities.
 */

/*
 * The line under the last accordion.
 *
 * The parent draws a border-top on every accordion and means to close the run with
 * .gb-block-accordion:last-of-type. That rule cannot match: :last-of-type is the last <div>
 * among its siblings, and on these pages a button follows the accordions - so the button is the
 * last div and the run is left open at the bottom.
 *
 * Matching on "no accordion after me" instead closes it wherever the run ends, whatever
 * follows. #E5E5E5 is the parent's border-gray, written out because this file is plain CSS
 * rather than a Tailwind source.
 */
.gb-block-accordion:not(:has(+ .gb-block-accordion)) {
    border-bottom: 1px solid #E5E5E5;
}

/*
 * One slide, no dots, no room reserved for them.
 *
 * The parent's mobile slider is a fixed 475px: 410px of image and the rest for the indicator
 * strip. The strip is hidden when there is nothing to page through, but its height lives in a
 * class on the container and stays behind as white space. Only the height is overridden - the
 * layout inside depends on that container being positioned, and on the text being pulled up
 * over the image.
 */
.rh-hero-mobile--single > div {
    height: 410px;
}

/*
 * Language switcher.
 *
 * top: 100% and the shadow are here rather than as utilities: top-full and shadow-lg are not in
 * the parent's compiled CSS, so both would have done nothing.
 *
 * The strip the switcher sits in is only 3rem tall, so the menu has to escape it - which it
 * does on z-index alone, since nothing on the way up clips overflow.
 */
.rh-langswitch__menu {
    top: 100%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* Tricolour rule. Hard colour stops, which Tailwind's from/via/to gradients cannot express. */
.rh-footer__rule {
    height: 0.5rem;
    background: linear-gradient(
        to right,
        #e84b4a 0 33.3333%,
        #21459f 33.3333% 66.6666%,
        #17a700 66.6666% 100%
    );
}

/* The newsletter column's width. Stays a property so the grid below reads as one rule. */
.rh-footer {
    --rh-footer-aside: 24rem;
}

/*
 * Three columns: the company details sized to their own content, the logo taking whatever is
 * left, and the newsletter card at a fixed width.
 *
 * The middle column is what centres the logo. It used to sit in the left column and be pushed
 * across with a padding derived from the aside and the gutter, which put it near the middle of
 * the page but tied it to two values it had nothing to do with - change the card's width and
 * the logo moved. A column of its own centres it against whatever space remains.
 */
@media (min-width: 1024px) {
    .rh-footer__inner {
        grid-template-columns: minmax(0, auto) minmax(0, 1fr) var(--rh-footer-aside);
    }
}

/*
 * Stacked, the logo goes back on top - it is the brand mark, and the first thing the footer
 * should say. order rather than a utility: order-first is not in the parent's compiled CSS.
 */
@media (max-width: 1023px) {
    .rh-footer__brand {
        order: -1;
        justify-content: flex-start;
    }
}

/* The logo is injected SVG or an <img>, so there is no element here to put a class on. */
.rh-footer__logo-svg,
.rh-footer__logo img,
.rh-footer__logo svg {
    display: block;
    height: 5rem;
    width: auto;
    max-width: 100%;
}

/* Larger once it has a column to itself rather than sitting above the address. */
@media (min-width: 1024px) {
    .rh-footer__logo-svg,
    .rh-footer__logo img,
    .rh-footer__logo svg {
        height: 7rem;
    }
}

/* Only spaced when the newsletter embed actually rendered. :not(:empty) has no variant here. */
.rh-footer__newsletter-form:not(:empty) {
    margin-top: 1.5rem;
}

/* Mobile header. */
/*
 * Store cards (.rh-storecard).
 *
 * Applied to the white columns on the front page via the block's "Additional CSS class(es)".
 * Deliberately a class rather than per-block padding/border values: three cards that must
 * match, one definition, and it lives in git instead of inside post content.
 *
 * Plain CSS rather than Tailwind utilities, because the parent's Tailwind build scans only
 * theme PHP - never post content - so a utility typed into the editor only works if some
 * template happens to use it already.
 */
/*
 * Side space is left to the browser rather than pinned to a value: one grid column sized to the
 * content, centred, so the leftover width splits evenly - the auto-margin result, but applied to
 * the column as a whole so the heading, address and button keep a common left edge. Centring
 * each child individually would let their left edges drift apart.
 *
 * minmax(0, max-content) rather than plain max-content so the column can shrink below its
 * content width on a narrow card instead of overflowing it.
 */
.rh-storecard {
    --rh-storecard-pad-y: 2.5rem;

    display: grid;
    grid-template-columns: minmax(0, max-content);
    justify-content: center;
    padding-block: var(--rh-storecard-pad-y);
    padding-inline: 1.5rem;
}

/*
 * Map pin before a heading.
 *
 * .rh-pin is the reusable form: put it in a heading block's "Additional CSS class(es)" and the
 * marker appears before the text. Used on the shops page, where only the shop-name heading gets
 * one and the "Kontakt" heading below it must not.
 *
 * The store cards share the same pin, so the image is declared once for both. Sizes differ: the
 * cards pin a fixed 1.4x2rem to match their own heading, while .rh-pin is sized in em so it
 * scales with whatever heading it is added to.
 */
.rh-storecard :where(h2, h3) {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/*
 * Card typography stays on the card. .rh-pin deliberately carries no type styling - it is added
 * to headings that already have their own size and weight, and imposing the card's would change
 * them silently.
 */
.rh-storecard :where(h2, h3) {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

/*
 * Map pin, inlined as a data URI. The theme ships no pin icon, and this keeps it to CSS - no
 * new asset and no change to the markup editors work with.
 */
.rh-pin::before,
.rh-storecard :where(h2, h3)::before {
    content: "";
    flex: none;

    /*
     * viewBox is cropped to the path's own bounds (x 5-19, y 2-22) instead of the nominal
     * 0 0 24 24. The pin only fills the middle of that square, and background-size: contain
     * scales the empty margin along with it - which reads as stray padding to the left of the
     * marker. The box below matches the cropped 14:20 ratio so contain has nothing to letterbox.
     */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 2 14 20' fill='%23111'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/*
 * The marker hangs in a gutter to the left, and everything in the block indents past it, so the
 * heading, address and button share one left edge - an inline marker only moves the heading's own
 * text and leaves the rest of the block sticking out to its left.
 *
 * The gutter goes on whatever element directly contains the pinned heading, found with :has() so
 * only one class has to be added in the editor. :has(> ...) matches the immediate parent only, so
 * this cannot indent some larger ancestor by accident.
 */
:has(> .rh-pin) {
    padding-left: var(--rh-pin-gutter, 2rem);
}

/*
 * Media text sets its own 8% inset on the content column, at a specificity the bare :has() above
 * cannot beat - so without this the marker would only fit because that 8% happens to be wider
 * than the gutter, and would hang outside the card on a narrower column. Stating both keeps the
 * block's normal inset and adds the gutter on top, so the marker always lands on the inset edge.
 */
.wp-block-media-text__content:has(> .rh-pin) {
    padding-left: calc(var(--rh-pin-inset, 12%) + var(--rh-pin-gutter, 2.25rem));
}

/*
 * Stacked media-text needs room between the picture and the text under it.
 *
 * Side by side the two are separated by the content's own horizontal padding, so nothing was
 * ever needed above it; stacked, that padding is beside the wrong axis and the text sits
 * straight under the image.
 *
 * 768px, not the 600px core stacks at: the parent theme re-declares the stacking rules at its
 * own breakpoint (blocks.css), so between 601 and 768 the block is stacked while core thinks
 * it is not. Matching the parent is what keeps the gap and the stacking in step.
 *
 * Grid items do not collapse margins with their children, so this adds to the heading's own
 * 2rem rather than disappearing into it: 2.5rem here reads as 4.5rem above the first line.
 */
@media (max-width: 768px) {
    .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content {
        margin-top: 2.5rem;
    }
}

/*
 * Reverse a stacked media-text: text first, picture under it. Add rh-stack-reverse in the
 * block's "Additional CSS class(es)".
 *
 * Core has no setting for this. Whichever side the media is on, the stacking rules pin it to
 * row 1 and the content to row 2, so a block that reads text-then-picture across the page
 * turns into picture-then-text on a phone.
 *
 * The gap moves with the order: the picture takes the top margin the content has when it comes
 * second. 1.5rem, not 2.5, because the content already carries a 1rem bottom margin from the
 * parent theme and grid items do not collapse against each other - the two add up to the same
 * 2.5rem the block has the other way round.
 *
 * The content keeps a top margin of its own even though it is now first. A picture sitting
 * flush against the top of a .white-box reads as deliberate; a heading sitting 1rem from it -
 * the box's own padding on mobile - just reads as cramped. 1.5rem here puts the first line
 * 2.5rem down, in step with everything else in this stack.
 */
@media (max-width: 768px) {
    .wp-block-media-text.is-stacked-on-mobile.rh-stack-reverse > .wp-block-media-text__content {
        grid-row: 1;
        margin-top: 1.5rem;
    }

    .wp-block-media-text.is-stacked-on-mobile.rh-stack-reverse > .wp-block-media-text__media {
        grid-row: 2;
        margin-top: 1.5rem;
    }
}

/*
 * Absolute rather than inline, so the marker sits outside the text flow and the heading keeps its
 * normal wrapping and line breaks - flex would lay a heading containing a <br> out side by side,
 * and an inline marker would indent only the first line.
 */
.rh-pin {
    position: relative;

    /* Marker height; the width follows the cropped viewBox's 0.7:1 ratio. */
    --rh-pin-size: 1.25em;
}

.rh-pin::before {
    position: absolute;
    left: calc(var(--rh-pin-gutter, 2.25rem) * -1);

    /*
     * Centred on the heading's first line rather than its box, so it stays put when the heading
     * wraps. The em value is the fallback, correct for this theme's 1.5 heading line-height; the
     * lh version derives it from the actual line box wherever that unit is supported.
     */
    top: 0.125em;
    top: calc((1lh - var(--rh-pin-size)) / 2);

    width: calc(var(--rh-pin-size) * 0.7);
    height: var(--rh-pin-size);
}

.rh-storecard :where(h2, h3)::before {
    width: 1.4rem;
    height: 2rem;
}

.rh-storecard p {
    margin: 1.5rem 0 0;
    line-height: 1.7;
}

/*
 * zerv/button ships with my-4, which puts 16px under the anchor on top of the card's own
 * 40px padding. Override both sides: the gap from the address above is set here, and the
 * bottom margin is dropped so the card's padding is the only space beneath the button.
 */
.rh-storecard .wp-block-zerv-button > a {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

/*
 * Space around the card row inside the cover block. Selected with :has() rather than a second
 * editor class so the row keeps whatever markup the block editor produces - the cards already
 * carry rh-storecard, and this reaches their columns wrapper from that.
 *
 * The top gap collapses against the intro text's own 50px margin-bottom, so 4rem wins by 14px.
 * The bottom has no collapsing sibling: 6rem plus the cover's 16px padding.
 */
.wp-block-columns:has(> .wp-block-column.rh-storecard) {
    margin-top: 4rem;
    margin-bottom: 6rem;
}

@media (max-width: 767px) {
    .rh-storecard {
        --rh-storecard-pad-y: 1.75rem;

        padding-inline: 1.25rem;
    }

    .wp-block-columns:has(> .wp-block-column.rh-storecard) {
        margin-top: 3rem;
        margin-bottom: 4rem;
    }

    /*
     * Side gutter for the whole cover section on mobile.
     *
     * Set on the cover rather than on the columns row: the cover already contributes 16px of
     * its own, so padding the row would stack on top of that and come out at 48px. Putting the
     * value here makes the gutter literally 2rem, and the heading and intro above the cards
     * pick up the same alignment instead of running wider than them.
     */
    .wp-block-cover:has(.rh-storecard) {
        padding-inline: 2rem;
    }
}

/*
 * Media box (.rh-mediabox).
 *
 * The white card on the front page holding a photo on the left and copy on the right. The
 * photo bleeds to the card's left, top and bottom edges rather than floating inside padding.
 *
 * Getting there means moving the padding rather than removing it: the columns block's own
 * padding is zeroed so the image can reach the edges, and the same space is put back on the
 * text column, which still needs it. The column gap goes to 0 for the same reason - it would
 * otherwise hold the image off the text column's padding and double the gutter.
 *
 * The image stretches to the full height of the card, which is set by the taller text column,
 * so object-fit: cover is what keeps it from distorting. That crops the photo's top and bottom
 * slightly - unavoidable when a fixed-ratio image has to fill a text-driven height.
 */
.rh-mediabox {
    padding: 0;
    gap: 0;
    align-items: stretch;
}

.rh-mediabox > .wp-block-column:first-child {
    display: flex;
    align-self: stretch;
}

.rh-mediabox > .wp-block-column:first-child .wp-block-image {
    margin: 0;
    width: 100%;
}

.rh-mediabox > .wp-block-column:first-child img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rh-mediabox > .wp-block-column:last-child {
    padding: 3rem;
}

/*
 * Stacked, the image no longer has a text column to match, so it keeps its own aspect ratio
 * and only the text column carries padding.
 */
@media (max-width: 781px) {
    .rh-mediabox > .wp-block-column:first-child img {
        height: auto;
    }

    .rh-mediabox > .wp-block-column:last-child {
        padding: 1.75rem;
    }
}

/*
 * Hero slider.
 *
 * Full-bleed image with the text overlaid in a skewed translucent panel, rather than the
 * parent theme's contained white-panel-beside-image split.
 */
.rh-hero {
    position: relative;
    overflow: hidden;
    background: #0a121a;

    /*
     * Prev/next size and the gap the text keeps from them. The text indent is derived from
     * these, so the two cannot drift apart if the buttons are ever resized.
     */
    --rh-nav-size: 3rem;
    --rh-nav-gap: 6rem;
}

/*
 * No scroll-behavior: smooth here. The parent's carousel component pages by assigning
 * $refs.slider.scrollLeft directly, and that assignment is silently dropped while smooth
 * scrolling is active - the dots would advance while the track never moved. Every other
 * site in the network relies on the same instant assignment.
 */
.rh-hero__track {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rh-hero__track::-webkit-scrollbar {
    display: none;
}

/*
 * overflow: hidden is load-bearing. The panel backdrop below deliberately starts well off the
 * slide's left edge so only its right-hand slant is visible, which means it also overhangs the
 * slide by that amount - without clipping, the next slide's backdrop bleeds in as a stray dark
 * wedge on the right of the current one.
 */
.rh-hero__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    overflow: hidden;
}

/*
 * Hero height. Slide art is ~2.1:1 (e.g. 2560x1205), so a full-bleed hero always crops
 * vertically - these heights trade how much of the image survives against how much of the
 * page it pushes below the fold. The extra tier at 1920 stops very wide screens cropping
 * the art to a letterbox.
 */
.rh-hero__image {
    display: block;
    width: 100%;
    height: 26rem;
    object-fit: cover;
}

@media (min-width: 768px) {
    .rh-hero__image { height: 30rem; }
}

@media (min-width: 1024px) {
    .rh-hero__image { height: 36rem; }
}

@media (min-width: 1280px) {
    .rh-hero__image { height: 40rem; }
}

@media (min-width: 1920px) {
    .rh-hero__image { height: 44rem; }
}

/* Slide with no image set: keeps the hero's height so the text panel still lands correctly. */
.rh-hero__image--empty {
    background: #0a121a;
}

/*
 * The panel spans the full width so its inner container lines up with the rest of the page;
 * the dark shape is drawn by the pseudo-element and stops partway across.
 */
.rh-hero__panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/*
 * Skewed backdrop. It starts well off the left edge so only the right-hand edge's slant is
 * ever visible - the same trick the parent uses for its skewed slider seam.
 */
.rh-hero__panel::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -25rem;
    right: 50%;
    background: rgba(10, 18, 26, 0.68);
    transform: skewX(-15deg);
}

@media (max-width: 767px) {
    .rh-hero__panel::before {
        right: 0;
        transform: none;
        /* Slightly stronger: the panel covers the whole width on mobile, so the text sits
           over more of the image and needs the extra contrast. */
        background: rgba(10, 18, 26, 0.72);
    }
}

/*
 * Breathing room inside the dark panel. The panel is sized by its content, so this padding
 * is what separates the text and button from its top and bottom edges.
 */
.rh-hero__panel-inner {
    position: relative;
    z-index: 1;
    padding-top: 4rem;
    padding-bottom: 4rem;
    color: #fff;
}

@media (max-width: 767px) {
    .rh-hero__panel-inner {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/*
 * Indented past the prev button, which shares the container's left edge. Derived from the
 * button size so the clearance holds if that changes.
 */
.rh-hero__panel-text {
    padding-left: calc(var(--rh-nav-size) + var(--rh-nav-gap));
}

.rh-hero__label {
    display: block;
    font-size: clamp(1.125rem, 1.6vw, 1.75rem);
    line-height: 1.1;
    margin-bottom: 0.25rem;
}

.rh-hero__title {
    font-size: clamp(2rem, 4.6vw, 4.5rem);
    line-height: 1.02;
    margin: 0;
    max-width: 14ch;
}

.rh-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
    padding: 0.8125rem 1.75rem;
    background: var(--wp--preset--color--green, #17a700);
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
}

/*
 * The same green on the mobile slider, which is the parent theme's markup included wholesale -
 * its call to action carries bg-button-color and there is no way to put a class on it from
 * here without overriding the template, which is exactly what this file avoids.
 *
 * Overriding the class rather than redefining --wp--preset--color--button-color on the
 * wrapper: the variable would recolour anything inside the slider that happens to use the
 * button colour, where this says only what it means.
 */
.rh-hero-mobile .bg-button-color {
    background-color: var(--wp--preset--color--green, #17a700);
}

.rh-hero__cta-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

/*
 * Prev / next.
 *
 * Laid out on the page container rather than pinned to the viewport, so on wide screens they
 * stay within the page width instead of drifting out to the edges. The overlay covers the
 * hero but ignores pointer events; only the buttons re-enable them.
 */
.rh-hero__controls {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.rh-hero__controls-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.rh-hero__nav {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--rh-nav-size);
    height: 4.25rem;
    background: rgba(255, 255, 255, 0.78);
    color: #111;
}

.rh-hero__nav:hover {
    background: #fff;
}

.rh-hero__nav svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Slide indicator: white skewed plate with upright bars, matching the network's styling. */
.rh-hero__dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) skewX(-15deg);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: #fff;
}

.rh-hero__dot {
    width: 0;
    height: 1rem;
    border-left: 2px solid #d3d3d3;
    transform: skewX(15deg);
}

.rh-hero__dot.is-active {
    height: 1.5rem;
    border-left-color: #000;
}

/*
 * Hero slider - the parent's template, which now renders below md only (see slider.php).
 *
 * Two differences from the parent: the text panel's white background becomes a dim dark layer
 * over the image, and the panel text goes white to read against it. Everything is scoped to
 * max-width 767px because that is exactly where the parent's markup is visible - above it this
 * theme's own full-bleed hero takes over and these selectors would match hidden elements.
 *
 * The slanted right edge needs the dim layer painted once, not twice. The parent fakes the
 * edge by butting a 30px white bar against a white panel (.skewed-slider-text::after in
 * styles.css); recolouring that bar would stack two translucent layers across their 15px
 * overlap and draw a darker band down the seam. So the panel's own background goes transparent
 * and the pseudo-element is stretched across the whole panel plus the overhang, with the slant
 * cut by clip-path instead. z-index keeps it behind the content, which the panel's z-10
 * already scopes to its own stacking context.
 *
 * These override Tailwind utilities at equal or higher specificity, which works because this
 * stylesheet is enqueued after the parent's - see the 'zerv-style' dependency in functions.php.
 */
@media (max-width: 767px) {
    .skewed-slider-text {
        background-color: transparent;
        color: #fff;
    }

    .skewed-slider-text .label,
    .skewed-slider-text h2 {
        color: #fff;
    }

    .skewed-slider-text::after {
        left: 0;
        right: -15px;
        width: auto;
        background: rgba(10, 18, 26, 0.72);
        transform: none;
        clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
        z-index: -1;
    }
}

/*
 * Brand panel copy, now that it comes from a rich editor and arrives as its own paragraphs.
 * A child selector, so not something a utility class on the wrapper can do.
 */
.rh-brands__text > :first-child {
    margin-top: 0;
}

.rh-brands__text > :last-child {
    margin-bottom: 0;
}

.rh-brands__text p {
    margin: 0 0 1rem;
}

.rh-brands__text ul,
.rh-brands__text ol {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}

.rh-brands__text li {
    margin-bottom: 0.25rem;
}

.rh-brands__text a {
    text-decoration: underline;
}