/**
 * Finishes reference page
 *
 * Design intent: this page exists so someone can judge a color. The swatch
 * captions stay neutral ink so nothing tints how a wood tone reads; the brand
 * colors are spent only on navigation, which sits away from the material.
 *
 * The structure follows a physical finish sample board, which is the thing this
 * page replaces: the species is stamped at the top with its range, and the
 * chips sit below it under printed labels.
 *
 * ON SPECIFICITY AND !important
 * -----------------------------
 * The active theme styles every <button> as an uppercase brand-blue pill at
 * weight 700, italicises figure captions, and — most damagingly — sets the
 * inherited body color to #b3b0ac, which is 1.9:1 on white. An earlier version
 * of this file inherited that color and muted it further with opacity, which is
 * why the page rendered washed out.
 *
 * So: colors are declared outright rather than inherited, and the properties the
 * theme actively sets are forced. Both selectors and !important follow the
 * convention already used in call-for-pricing.css, which fights the same rules.
 *
 * @package Viztech_Finishes
 */

.viztech-finishes {
    /* Brand values, taken from the site header and used in call-for-pricing.css. */
    --vzf-brand: #45506c;        /* nav bar blue   — 7.6:1 on white */
    --vzf-brand-deep: #54405e;   /* call button    — 9.4:1 on white */

    /* Neutral ink for anything sitting beside a swatch. */
    --vzf-ink: #33302f;          /* 11.8:1 */
    --vzf-ink-soft: #5d5854;     /* 6.6:1  */
    --vzf-ink-quiet: #6b6560;    /* 5.3:1  */

    --vzf-rule: #e4dfd9;
    --vzf-rule-strong: #c9c2ba;
    --vzf-swatch-edge: #767676;  /* 4.54:1 — outlines light swatches */

    --vzf-gap: 10px;
    --vzf-swatch-min: 128px;

    color: var( --vzf-ink );
}

/* ---------------------------------------------------------------- Tabs --- */

/*
 * Tabs read as text with a rule beneath, not as pills. The theme would render
 * them identically to the filter chips below, which makes two different
 * controls look like one.
 */
.viztech-finishes .viztech-finishes__tabs {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 2rem;
    border-bottom: 1px solid var( --vzf-rule );
}

.viztech-finishes .viztech-finishes__tab {
    min-height: 44px;
    padding: 0.75rem 1.5rem 0.875rem !important;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    margin: 0 0 -1px;
    background: none !important;
    background-color: transparent !important;
    color: var( --vzf-ink-soft ) !important;
    font-family: inherit;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3;
    opacity: 1;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease;
}

.viztech-finishes .viztech-finishes__tab:hover,
.viztech-finishes .viztech-finishes__tab:focus-visible {
    color: var( --vzf-brand ) !important;
}

.viztech-finishes .viztech-finishes__tab.is-active {
    color: var( --vzf-brand-deep ) !important;
    font-weight: 700 !important;
    border-bottom-color: var( --vzf-brand-deep ) !important;
}

/* ------------------------------------------------------------ Metadata --- */

/*
 * The supplier credit is a stated requirement, not a footnote, so it leads the
 * panel as an eyebrow rather than trailing the intro copy.
 */
.viztech-finishes .viztech-finishes__supplier {
    margin: 0 0 0.75rem;
    color: var( --vzf-ink-soft );
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 1;
}

.viztech-finishes .viztech-finishes__supplier strong {
    color: var( --vzf-brand-deep );
    font-weight: 700;
}

.viztech-finishes .viztech-finishes__intro {
    max-width: 60ch;
    margin: 0 0 1.75rem;
    color: var( --vzf-ink-soft );
    font-size: 1.0625rem;
    line-height: 1.6;
    opacity: 1;
}

.viztech-finishes .viztech-finishes__notice {
    padding: 0.875rem 1.125rem;
    margin: 0 0 1.5rem;
    border-left: 3px solid var( --vzf-brand );
    background: #f4f2ef;
    color: var( --vzf-ink );
    font-size: 0.9375rem;
    line-height: 1.55;
    opacity: 1;
}

.viztech-finishes .viztech-finishes__empty {
    padding: 2rem 0;
    color: var( --vzf-ink-soft );
    font-size: 1rem;
}

/* --------------------------------------------------------------- Chips --- */

.viztech-finishes .viztech-finishes__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 2.5rem;
}

/*
 * Pills, because the theme's own buttons are pills and this page should not
 * argue with the site. What changes is the state logic: the theme renders the
 * selected chip lighter than the unselected ones, which reads as disabled.
 * Selected is now solid, unselected is outlined.
 */
.viztech-finishes .viztech-finishes__chip {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1.0625rem !important;
    border: 1px solid var( --vzf-rule-strong ) !important;
    border-radius: 999px !important;
    background: #fff !important;
    background-color: #fff !important;
    color: var( --vzf-brand ) !important;
    font-family: inherit;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3;
    opacity: 1;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.viztech-finishes .viztech-finishes__chip:hover,
.viztech-finishes .viztech-finishes__chip:focus-visible {
    border-color: var( --vzf-brand ) !important;
    background-color: #f2f4f8 !important;
}

.viztech-finishes .viztech-finishes__chip.is-active {
    border-color: var( --vzf-brand ) !important;
    background: var( --vzf-brand ) !important;
    background-color: var( --vzf-brand ) !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* --------------------------------------------------------------- Board --- */

.viztech-finishes .viztech-finishes__board-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.875rem;
    padding: 0 0 0.75rem;
    margin: 0 0 1.25rem;
    border-bottom: 2px solid var( --vzf-rule );
}

.viztech-finishes .viztech-finishes__board-title {
    margin: 0;
    color: var( --vzf-brand-deep );
    font-size: 1.875rem;
    font-weight: 700 !important;
    font-style: normal !important;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: none;
}

/*
 * The range, set in the same tabular face as the color codes: this is a
 * measurement of the board, so it reads as data rather than as a subheading.
 */
.viztech-finishes .viztech-finishes__board-meta {
    color: var( --vzf-ink-quiet );
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.75rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 1;
}

/* ---------------------------------------------------------------- Grid --- */

.viztech-finishes .viztech-finishes__grid {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( var( --vzf-swatch-min ), 1fr ) );
    gap: var( --vzf-gap );
}

/*
 * No tile surface: the photograph is the chip, and the caption hangs beneath it
 * as a printed label would.
 */
.viztech-finishes .viztech-finishes__swatch {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.viztech-finishes .viztech-finishes__swatch-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    box-sizing: border-box;
    border: 1px solid var( --vzf-swatch-edge );
    border-radius: 2px;
}

/* The theme italicises figure captions; finish names are not asides. */
.viztech-finishes .viztech-finishes__swatch-name {
    padding: 0.5rem 0 0;
    margin: 0;
    color: var( --vzf-ink );
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    font-style: normal !important;
    line-height: 1.3;
    text-align: left;
    opacity: 1;
}

/*
 * Poly colours carry no vendor code, so the name is the last line in the tile.
 * Without this the name sits hard against the next row of swatches.
 */
.viztech-finishes .viztech-finishes__swatch-name:last-child {
    padding-bottom: 0.375rem;
}

/*
 * The vendor's own reference number, set the way it appears on a printed color
 * card: tabular, tracked out, quiet.
 */
.viztech-finishes .viztech-finishes__swatch-code {
    display: block;
    padding: 0.125rem 0 0;
    color: var( --vzf-ink-quiet );
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.6875rem;
    font-style: normal !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    opacity: 1;
}

/* ------------------------------------------------------- Accessibility --- */

.viztech-finishes .viztech-finishes__tab:focus-visible,
.viztech-finishes .viztech-finishes__chip:focus-visible {
    outline: 2px solid var( --vzf-brand-deep ) !important;
    outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
    .viztech-finishes .viztech-finishes__tab,
    .viztech-finishes .viztech-finishes__chip {
        transition: none;
    }
}

/* -------------------------------------------------------------- Mobile --- */

@media ( max-width: 600px ) {
    .viztech-finishes {
        --vzf-swatch-min: 96px;
        --vzf-gap: 8px;
    }

    .viztech-finishes .viztech-finishes__tab {
        flex: 1 1 auto;
        padding: 0.75rem 0.5rem 0.875rem !important;
        font-size: 1rem !important;
        text-align: center;
    }

    .viztech-finishes .viztech-finishes__board-title {
        font-size: 1.5rem;
    }

    .viztech-finishes .viztech-finishes__intro {
        font-size: 1rem;
    }

    /*
     * Twelve wood species wrap to six rows on a phone and push the swatches off
     * screen entirely. One scrolling row keeps the material in view. The
     * container scrolls, never the body.
     */
    .viztech-finishes .viztech-finishes__chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-bottom: 2rem;
        padding-bottom: 0.5rem;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .viztech-finishes .viztech-finishes__chip {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
}