/* ---------------------------------------------------------------------------
   THE ATTESTATION WALL (§7.1).

   The first page most visitors see, and until 2026-08-18 the only one drawn by
   a handful of inline styles in the plugin that renders it: a default fieldset,
   default checkboxes and a square button, on a site whose every other surface
   is a card with a rule and a pill. It read as a different site standing in
   front of this one.

   ITS OWN STYLESHEET, ON ITS OWN PAGE. It began in marketing.css, which was
   then served on every page — and tests/playwright/launch.spec.ts holds a
   public page to a stylesheet budget that 5KB of wall styling immediately
   broke. The division is the same one storefront.css already makes for the same
   reason: the wall renders on one route and its CSS is loaded on that route.
   The same measurement is what moved the shared chrome into style.css and made
   marketing.css conditional, so this page now loads the chrome and this, and
   nothing built for a landing page.

   The theme does not decide when. `Access\WallView` raises the
   `gpc_attestation_wall` filter before it calls get_header(), and functions.php
   enqueues this if the filter is true — the plugin knows whether a request is
   being walled, and the theme knows what a wall looks like.
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   TWO COLUMNS WHEN THERE IS A PHOTOGRAPH, ONE WHEN THERE IS NOT (2026-08-23).

   `--illustrated` is set by WallView only when the `gpc_wall_media` filter is
   answered, so the single-column rules below remain the real fallback rather
   than a dead branch: a theme that supplies no image gets exactly the wall that
   shipped before this, centred and unbroken.

   WHY THE PAGE CHANGED AT ALL. This is the first page most visitors see, and
   for anyone scanning the QR on a vial it is often the only page they see
   before deciding whether GPC is a real supplier or another operator with a
   disclaimer. It was a legal interstitial on an empty ground. The form is
   untouched — same three confirmations, same order, same wording — and
   everything added sits around it.
   --------------------------------------------------------------------------- */
.gpc-wall {
    width: min(100%, 40rem);
    margin-inline: auto;
    padding-block: var(--wp--preset--spacing--gpc-xxl);
    padding-inline: var(--wp--preset--spacing--gpc-md);
}

.gpc-wall--illustrated {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    min-height: 40rem;
    background: var(--wp--preset--color--gpc-navy-deep);
    isolation: isolate;
}

.gpc-wall__media {
    position: relative;
    overflow: hidden;
}

.gpc-wall__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* THE GRADE IS CSS, NOT BAKED PIXELS. The photograph stays a photograph and the
   brand colour stays a token, so retuning navy or teal in theme.json retunes
   this too. The second layer feathers the image into the panel beside it so the
   two columns read as one surface rather than a picture stuck to a form. */
.gpc-wall__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, var(--wp--preset--color--gpc-navy-clear), var(--wp--preset--color--gpc-navy-scrim)),
        linear-gradient(90deg, var(--wp--preset--color--gpc-navy-clear) 55%, var(--wp--preset--color--gpc-navy-deep) 96%);
}

.gpc-wall__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--wp--preset--spacing--gpc-md);
    padding: var(--wp--preset--spacing--gpc-xxl) clamp(1.25rem, 3.4vw, 3.25rem);
}

.gpc-wall__title {
    margin: 0 0 var(--wp--preset--spacing--gpc-sm);
    font-family: var(--wp--preset--font-family--gpc-display);
    font-size: var(--wp--preset--font-size--gpc-xxl);
    color: var(--wp--preset--color--gpc-navy);
}

.gpc-wall__intro {
    margin: 0 0 var(--wp--preset--spacing--gpc-lg);
    color: var(--wp--preset--color--gpc-muted);
}

/* On the dark panel the ink-on-wash defaults above invert. Scoped to
   `--illustrated` so the fallback wall keeps its original light treatment. */
.gpc-wall--illustrated .gpc-wall__title {
    margin: 0;
    color: var(--wp--preset--color--gpc-white);
}

.gpc-wall--illustrated .gpc-wall__intro {
    margin: 0;
    max-width: 52ch;
    color: var(--wp--preset--color--gpc-ice);
}

/* Red is the border and the heading, never the body text: an error message set
   in the warning colour is the message that is hardest to read. */
.gpc-wall__alert {
    margin-block: var(--wp--preset--spacing--gpc-lg);
    padding: var(--wp--preset--spacing--gpc-md) var(--wp--preset--spacing--gpc-lg);
    border: 1px solid var(--wp--preset--color--gpc-line);
    border-left: 3px solid var(--wp--preset--color--gpc-red-maple);
    border-radius: var(--wp--custom--radius--field);
    background: var(--wp--preset--color--gpc-ice);
}

.gpc-wall__alert p { margin: 0; }

.gpc-wall__alert-title {
    margin: 0 0 var(--wp--preset--spacing--gpc-xs);
    font-family: var(--wp--preset--font-family--gpc-display);
    font-size: var(--wp--preset--font-size--gpc-lg);
    color: var(--wp--preset--color--gpc-navy);
}

.gpc-wall__alert ul {
    margin: 0;
    padding-left: var(--wp--preset--spacing--gpc-md);
}

/* NAVY, NOT THE ACTION TEAL. Every error link here sits on the alert's tinted
   ground, where teal-action measures 4.23:1 and WCAG AA wants 4.5:1 — and this
   is the one list on the site a visitor reads because something went wrong. */
.gpc-wall__alert a {
    color: var(--wp--preset--color--gpc-navy);
}

.gpc-wall__fields {
    margin: 0;
    padding: var(--wp--preset--spacing--gpc-lg);
    border: 1px solid var(--wp--preset--color--gpc-line-strong);
    border-radius: var(--wp--custom--radius--field);
    background: var(--wp--preset--color--gpc-wash);
}

.gpc-wall__legend {
    padding: 0 var(--wp--preset--spacing--gpc-xs);
    margin-left: calc(var(--wp--preset--spacing--gpc-xs) * -1);
    font-family: var(--wp--preset--font-family--gpc-mono);
    font-size: var(--wp--preset--font-size--gpc-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--preset--color--gpc-blue);
}

/* THE BOX AND ITS SENTENCE ON ONE GRID, so a label that wraps to three lines
   stays indented under itself instead of running back beneath the control. */
.gpc-wall__confirm {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--wp--preset--spacing--gpc-sm);
    align-items: start;
    margin: 0;
    padding-block: var(--wp--preset--spacing--gpc-sm);
}

.gpc-wall__confirm + .gpc-wall__confirm {
    border-top: 1px solid var(--wp--preset--color--gpc-line);
}

/* A 13px default checkbox is a small target for the one control on the page
   that has to be operated. `accent-color` keeps the native control — and its
   focus ring, its keyboard behaviour and its high-contrast rendering — while
   painting the checked state in the brand's own colour. */
.gpc-wall__confirm input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.1rem 0 0;
    accent-color: var(--wp--preset--color--gpc-teal-action);
}

.gpc-wall__confirm label {
    line-height: 1.5;
    color: var(--wp--preset--color--gpc-ink);
    cursor: pointer;
}

.gpc-wall__error {
    display: block;
    grid-column: 2;
    font-size: var(--wp--preset--font-size--gpc-sm);
    color: var(--wp--preset--color--gpc-red-maple);
}

.gpc-wall__actions {
    margin: var(--wp--preset--spacing--gpc-lg) 0 0;
}

.gpc-wall__cookies {
    margin-top: var(--wp--preset--spacing--gpc-lg);
    font-size: var(--wp--preset--font-size--gpc-sm);
    color: var(--wp--preset--color--gpc-ink);
}

.gpc-wall__cookies p { margin-block: var(--wp--preset--spacing--gpc-sm); }
.gpc-wall__cookies a { color: inherit; }

.gpc-wall__forget {
    padding: var(--wp--preset--spacing--gpc-xs) 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.gpc-wall--illustrated .gpc-wall__cookies,
.gpc-wall--illustrated .gpc-wall__forget {
    color: var(--wp--preset--color--gpc-ice);
}

.gpc-wall__submit {
    padding: var(--wp--preset--spacing--gpc-sm) var(--wp--preset--spacing--gpc-xl);
    border: 0;
    border-radius: var(--wp--custom--radius--pill);
    background: var(--wp--preset--color--gpc-teal-action);
    font-family: var(--wp--preset--font-family--gpc-display);
    font-size: var(--wp--preset--font-size--gpc-sm);
    font-weight: 650;
    color: var(--wp--preset--color--gpc-white);
    cursor: pointer;
    transition: background-color 180ms ease;
}

.gpc-wall__submit:hover {
    background: var(--wp--preset--color--gpc-navy);
}

.gpc-wall__submit:focus-visible {
    outline: 2px solid var(--wp--preset--color--gpc-navy);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   THE DARK PANEL. Every rule below is scoped to `--illustrated`, so the
   single-column fallback above is untouched by any of it.
   --------------------------------------------------------------------------- */
.gpc-wall--illustrated .gpc-wall__fields {
    border-color: var(--wp--preset--color--gpc-line-dark);
    background: var(--wp--preset--color--gpc-teal-glow);
}

.gpc-wall--illustrated .gpc-wall__legend {
    color: var(--wp--preset--color--gpc-teal);
}

.gpc-wall--illustrated .gpc-wall__confirm label {
    color: var(--wp--preset--color--gpc-ice);
}

.gpc-wall--illustrated .gpc-wall__confirm + .gpc-wall__confirm {
    border-top-color: var(--wp--preset--color--gpc-line-dark);
}

/* WHITE, NOT THE ACTION COLOUR, for the same reason the alert links are navy on
   the light wall — the action colour does not clear 4.5:1 on this ground, and
   these three links are the documents a visitor confirms they have read. */
.gpc-wall--illustrated .gpc-wall__confirm label a {
    color: var(--wp--preset--color--gpc-white);
}

/* Teal fill with the deep navy sitting on it, which measures far higher than
   white-on-teal-action and reads as the one thing on the page to press. */
.gpc-wall--illustrated .gpc-wall__submit {
    width: 100%;
    background: var(--wp--preset--color--gpc-teal);
    color: var(--wp--preset--color--gpc-navy-deep);
}

.gpc-wall--illustrated .gpc-wall__submit:hover {
    background: var(--wp--preset--color--gpc-white);
    color: var(--wp--preset--color--gpc-navy-deep);
}

.gpc-wall--illustrated .gpc-wall__submit:focus-visible {
    outline-color: var(--wp--preset--color--gpc-teal);
}

.gpc-wall--illustrated .gpc-wall__alert {
    border-color: var(--wp--preset--color--gpc-line-dark);
    background: var(--wp--preset--color--gpc-navy);
}

.gpc-wall--illustrated .gpc-wall__alert-title,
.gpc-wall--illustrated .gpc-wall__alert a {
    color: var(--wp--preset--color--gpc-white);
}

.gpc-wall--illustrated .gpc-wall__alert p,
.gpc-wall--illustrated .gpc-wall__alert li {
    color: var(--wp--preset--color--gpc-ice);
}

/* THE INLINE FIELD ERROR, WHICH THE DARK PANEL BROKE. Red Maple is the brand's
   red and is right on the light wall it was chosen for; on this ground axe
   measured it at 1.87:1 against a required 4.5:1, on the one message a visitor
   only ever reads because something went wrong. Same warning, legible weight.
   Colour is not the only channel either way — the message sits under its own
   field and says what to do. */
.gpc-wall--illustrated .gpc-wall__error {
    color: var(--wp--preset--color--gpc-red-light);
}

/* THE TRUST SIGNALS. A list, because that is what it is — four independent
   facts with no order between them. Below the form deliberately: the
   confirmations are the control this page exists for and stay the first thing. */
.gpc-wall__signals {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--gpc-md) var(--wp--preset--spacing--gpc-lg);
    margin: 0;
    padding: var(--wp--preset--spacing--gpc-lg) 0 0;
    list-style: none;
    border-top: 1px solid var(--wp--preset--color--gpc-line-dark);
}

.gpc-wall__signals strong {
    display: block;
    margin-bottom: 0.2rem;
    font-family: var(--wp--preset--font-family--gpc-mono);
    font-size: var(--wp--preset--font-size--gpc-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wp--preset--color--gpc-teal);
}

.gpc-wall__signals span {
    display: block;
    font-size: var(--wp--preset--font-size--gpc-sm);
    line-height: 1.5;
    color: var(--wp--preset--color--gpc-ice);
}

/* ONE COLUMN BEFORE THE COLUMNS GET NARROW ENOUGH TO WRAP THE LABELS. The
   photograph leads on a phone, then the form; nothing is set over the image. */
@media (max-width: 56rem) {
    .gpc-wall--illustrated {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .gpc-wall__media {
        min-height: 13rem;
        max-height: 34vh;
    }

    .gpc-wall__media::after {
        background: linear-gradient(
            180deg,
            var(--wp--preset--color--gpc-navy-clear) 40%,
            var(--wp--preset--color--gpc-navy-deep) 98%
        );
    }

    .gpc-wall__panel {
        padding-block: var(--wp--preset--spacing--gpc-xl);
    }

    .gpc-wall__signals {
        grid-template-columns: 1fr;
    }
}