/**
 * Front-end styles for Spring Core.
 *
 * This sheet is a *consumer* of the active theme's design tokens, never an
 * author of them. Geometry for fields and buttons (height, padding, radius,
 * border, focus) is defined once in spring-curtains/theme.json and applied once
 * in the theme's app.css; what remains here is only what is specific to these
 * components — their layout, their tone variants and their copy hierarchy.
 *
 * Every token is read with a literal fallback so the plugin still renders
 * sensibly if it is activated alongside a theme that does not define them.
 */

:root {
    /* Palette */
    --spring-ink: var( --wp--preset--color--ink, #1a1a1a );
    --spring-ink-soft: var( --wp--preset--color--ink-soft, #242424 );
    --spring-gold: var( --wp--preset--color--gold, #2f4b35 );
    --spring-gold-2: var( --wp--preset--color--gold-2, #9dbba5 );
    --spring-sand: var( --wp--preset--color--sand, #f3f0ea );
    --spring-sand-2: var( --wp--preset--color--sand-2, #f7f5f0 );
    --spring-muted: var( --wp--preset--color--muted, #666 );
    --spring-base: var( --wp--preset--color--base, #fff );
    --spring-danger: var( --wp--preset--color--danger, #a3341f );

    /* Geometry, inherited from the theme's control contract */
    --spring-radius: var( --wp--custom--control--radius, 2px );
    --spring-control-h: var( --wp--custom--control--height, 3rem );
    --spring-line: var( --wp--custom--line--base, #e3ded4 );
    --spring-line-control: var( --wp--custom--line--control, #8f897e );
    --spring-on-dark-muted: var( --wp--custom--on-dark--muted, rgba( 255, 255, 255, 0.78 ) );
    --spring-on-dark-faint: var( --wp--custom--on-dark--faint, rgba( 255, 255, 255, 0.62 ) );
    --spring-on-dark-line: var( --wp--custom--on-dark--line, rgba( 255, 255, 255, 0.18 ) );

    /* Rhythm */
    --spring-gap-xs: var( --wp--preset--spacing--05, 0.5rem );
    --spring-gap-sm: var( --wp--preset--spacing--10, 1rem );
    --spring-gap-md: var( --wp--preset--spacing--15, 1.5rem );
    --spring-gap-lg: var( --wp--preset--spacing--20, 1.75rem );
    --spring-gap-xl: var( --wp--preset--spacing--30, 3rem );

    /* Motion */
    --spring-duration: var( --wp--custom--motion--duration, 0.18s );
    --spring-ease: var( --wp--custom--motion--ease, cubic-bezier( 0.2, 0.7, 0.3, 1 ) );
}

/* -------------------------------------------------- Lead form */

.spring-lead {
    background-color: var( --spring-sand-2 );
    color: var( --spring-ink );
    padding: var( --wp--preset--spacing--40, clamp( 2rem, 5vw, 4rem ) );
    /* Clears the sticky header when the quote links jump to this anchor. */
    scroll-margin-top: var( --wp--preset--spacing--50, 6rem );
}

.spring-lead.is-tone-dark {
    background-color: var( --spring-ink );
    color: var( --spring-on-dark-muted );
}

.spring-lead__intro {
    margin-block-end: var( --spring-gap-xl );
}

/*
 * From tablet up the panel splits: the pitch and the hotline stay on the left
 * while the fields take the right. Stacked, the form was a narrow column in a
 * wide band and the closing section of every page read as the least considered
 * one. The intro spans every row so the split holds whether or not a status
 * notice is being shown above the form.
 */
@media ( min-width: 1024px ) {
    .spring-lead {
        align-items: start;
        column-gap: var( --wp--preset--spacing--50, 6rem );
        display: grid;
        grid-template-columns: minmax( 0, 0.85fr ) minmax( 0, 1.15fr );
    }

    .spring-lead__intro {
        grid-column: 1;
        grid-row: 1 / -1;
        margin-block-end: 0;
    }

    .spring-lead > :not( .spring-lead__intro ) {
        grid-column: 2;
    }
}

.spring-lead__title {
    font-family: var( --wp--preset--font-family--heading, inherit );
    font-size: var( --wp--preset--font-size--xx-large, clamp( 1.75rem, 3.4vw, 2.6rem ) );
    font-weight: 400;
    line-height: var( --wp--custom--type--heading-line-height, 1.333 );
    margin: 0 0 var( --spring-gap-xs );
}

.spring-lead.is-tone-dark .spring-lead__title {
    color: var( --wp--custom--on-dark--text, #f7f5f0 );
}

.spring-lead__subtitle {
    color: var( --spring-muted );
    font-size: var( --wp--preset--font-size--medium, 1.05rem );
    line-height: 1.7;
    margin: 0 0 var( --spring-gap-xs );
}

.spring-lead.is-tone-dark .spring-lead__subtitle {
    color: var( --spring-on-dark-muted );
}

.spring-lead__hotline {
    font-size: var( --wp--preset--font-size--small, 0.95rem );
    letter-spacing: 0.02em;
    margin: 0;
}

.spring-lead__hotline a {
    color: var( --spring-gold );
    font-weight: 600;
    text-decoration: none;
}

.spring-lead.is-tone-dark .spring-lead__hotline a {
    color: var( --spring-gold-2 );
}

.spring-lead__hotline a:hover,
.spring-lead__hotline a:focus-visible {
    text-decoration: underline;
}

.spring-lead__notice {
    border-inline-start: 3px solid var( --spring-gold );
    font-size: var( --wp--preset--font-size--small, 0.98rem );
    margin: 0 0 var( --spring-gap-lg );
    padding: var( --spring-gap-sm ) var( --spring-gap-md );
}

.spring-lead__notice.is-success {
    background-color: var( --wp--custom--state--success-surface, rgba( 47, 75, 53, 0.12 ) );
}

.spring-lead__notice.is-error {
    background-color: var( --wp--custom--state--danger-surface, rgba( 163, 52, 31, 0.1 ) );
    border-inline-start-color: var( --spring-danger );
}

/*
 * The grid, the field boxes and the controls themselves are all governed by the
 * theme's control contract (.spring-lead__grid / .spring-lead__field are picked
 * up by the shared form-layout rules in app.css). Only the label voice and the
 * dark-tone overrides are component-specific.
 */

.spring-lead__field label {
    font-size: var( --wp--preset--font-size--x-small, 0.85rem );
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-transform: uppercase;
}

.spring-lead__field label span {
    color: var( --spring-gold );
}

.spring-lead.is-tone-dark .spring-lead__field label span {
    color: var( --spring-gold-2 );
}

.spring-lead__trap {
    height: 0;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    width: 0;
}

.spring-lead__actions {
    margin: var( --spring-gap-xl ) 0 0;
}

/* The submit button's box comes from the theme's button contract; only the
   inverted hover of the outlined-on-hover treatment lives here. */
.spring-lead__submit:hover,
.spring-lead__submit:focus-visible {
    background-color: transparent;
    border-color: var( --spring-gold );
    color: var( --spring-gold );
}

.spring-lead.is-tone-dark .spring-lead__submit:hover,
.spring-lead.is-tone-dark .spring-lead__submit:focus-visible {
    border-color: var( --spring-gold-2 );
    color: var( --spring-gold-2 );
}

.spring-lead__note {
    color: var( --spring-muted );
    font-size: var( --wp--preset--font-size--x-small, 0.85rem );
    line-height: 1.6;
    margin: var( --spring-gap-md, 1.25rem ) 0 0;
    max-width: 34ch;
}

.spring-lead.is-tone-dark .spring-lead__note {
    color: var( --spring-on-dark-faint );
}

/* -------------------------------------------------- Showroom list */

.spring-branches {
    display: grid;
    gap: var( --spring-gap-md );
    list-style: none;
    margin: 0;
    padding: 0;
}

.spring-branches__item {
    border-top: 1px solid var( --spring-on-dark-line );
    display: flex;
    flex-direction: column;
    gap: var( --spring-gap-xs );
    padding-top: var( --spring-gap-sm );
}

.spring-branches__name {
    font-size: var( --wp--preset--font-size--x-small, 0.82rem );
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.spring-branches__address {
    color: var( --spring-on-dark-muted );
    line-height: 1.65;
}

.spring-branches__phone,
.spring-branches__map {
    color: var( --spring-gold-2 );
    font-size: var( --wp--preset--font-size--small, 0.92rem );
    text-decoration: none;
    width: fit-content;
}

.spring-branches__phone:hover,
.spring-branches__map:hover {
    text-decoration: underline;
}

/* -------------------------------------------------- Catalogue price */

.spring-price {
    color: var( --spring-ink );
    font-size: var( --wp--preset--font-size--medium, 1.05rem );
    font-weight: 600;
    letter-spacing: 0.01em;
}

/*
 * "Liên hệ báo giá" is the absence of a number, so it must not outrank the
 * cards that have one. In moss caps at 500 it was the loudest thing in the
 * loop: the six products without a price shouted while twenty-four real prices
 * whispered. It now reads as the quiet, secondary state it is.
 */
.spring-price--contact {
    color: var( --spring-muted );
    font-size: var( --wp--preset--font-size--small, 0.95rem );
    font-weight: 400;
}

.spring-price__prefix,
.spring-price__unit {
    color: var( --spring-muted );
    font-size: var( --wp--preset--font-size--x-small, 0.85rem );
    font-weight: 400;
}

/* -------------------------------------------------- Product & loop CTAs */

/* Boxes come from the theme's button contract; this only places the row. */
.spring-product-cta {
    margin: var( --spring-gap-xl ) 0 var( --spring-gap-sm );
}

.spring-product-cta__note {
    color: var( --spring-muted );
    font-size: var( --wp--preset--font-size--x-small, 0.88rem );
    line-height: 1.6;
    margin: 0 0 var( --spring-gap-lg );
    max-width: var( --wp--custom--measure--intro, 58ch );
}

/* The loop CTA is a text link, not a button: it must not inherit the button
   contract, or every product card would carry a 48px block of green. */
.spring-loop-cta {
    color: var( --spring-muted );
    display: inline-block;
    font-size: var( --wp--preset--font-size--x-small, 0.82rem );
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color var( --spring-duration ) ease;
    width: fit-content;
}

.spring-loop-cta::after {
    content: " \2192";
}

.spring-loop-cta:hover,
.spring-loop-cta:focus-visible {
    color: var( --spring-gold );
}

/* -------------------------------------------------- Sticky contact bar */

.spring-sticky {
    background-color: var( --spring-ink );
    bottom: 0;
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    inset-inline: 0;
    position: fixed;
    z-index: 999;
}

.spring-sticky__item {
    align-items: center;
    color: var( --wp--custom--on-dark--text, #f7f5f0 );
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    justify-content: center;
    padding: 0.7rem 0.5rem calc( 0.7rem + env( safe-area-inset-bottom ) );
    text-align: center;
    text-decoration: none;
    transition:
        background-color var( --spring-duration ) var( --spring-ease ),
        color var( --spring-duration ) var( --spring-ease ),
        transform var( --spring-duration ) var( --spring-ease );
}

/*
 * This bar is the whole point of the site on a phone, and every one of its
 * three targets hands the visitor to another app — the dialler, Zalo, or a jump
 * to the form. That handover takes a moment during which nothing on screen has
 * changed, so the press answers for it.
 */
.spring-sticky__item:active {
    transform: scale( 0.97 );
}

.spring-sticky__item + .spring-sticky__item {
    border-inline-start: 1px solid var( --spring-on-dark-line );
}

.spring-sticky__item--form {
    background-color: var( --spring-gold );
    color: var( --spring-base );
}

.spring-sticky__item:hover,
.spring-sticky__item:focus-visible {
    background-color: var( --spring-gold-2 );
    color: var( --spring-ink );
}

.spring-sticky__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.spring-sticky__icon {
    display: flex;
}

@media ( min-width: 782px ) {

    :root {

        /*
         * The stack's footprint, published so the page that has to make room
         * for it does not have to re-derive it. min-height on the pill below
         * makes this a stated figure rather than one measured back out of the
         * padding, so changing the padding cannot silently invalidate it.
         */
        --spring-sticky-pill-height: 2.85rem;
        --spring-sticky-clearance: calc(
            3 * var( --spring-sticky-pill-height ) + 2 * var( --spring-gap-xs ) + var( --spring-gap-lg )
        );
    }

    .spring-sticky {
        background-color: transparent;
        bottom: var( --spring-gap-lg );
        display: flex;
        flex-direction: column;
        gap: var( --spring-gap-xs );
        inset-inline: auto var( --spring-gap-md );
    }

    .spring-sticky__item {
        background-color: var( --spring-ink );
        border-radius: var( --wp--custom--surface--pill-radius, 999px );
        box-shadow: var( --wp--preset--shadow--soft, 0 6px 22px rgba( 0, 0, 0, 0.22 ) );
        flex-direction: row;
        gap: 0.55rem;
        min-height: var( --spring-sticky-pill-height );
        padding: 0.8rem 1.35rem;
    }

    .spring-sticky__item + .spring-sticky__item {
        border-inline-start: 0;
    }

    /* The rule above resets every pill to ink, which left the quote button with
       dark text on a dark background — restore its gold fill. */
    .spring-sticky__item--form {
        background-color: var( --spring-gold );
    }
}

@media ( max-width: 781px ) {

    /*
     * Room for the fixed bar, so it never covers the end of a page.
     *
     * Only the phone layout can be answered from here. There the bar is a
     * full-width strip, so pushing the whole page up by its height clears it
     * and the strip it opens sits below a bar that is itself opaque. From
     * 782px the bar is a column of pills in the bottom-right corner, and the
     * same padding would open a band of body background under a full-bleed
     * footer — so that clearance belongs to whichever band ends the page, and
     * is published as --spring-sticky-clearance above for it to consume.
     */
    body {
        padding-bottom: 4.5rem;
    }
}