/*
 * which-bin-is-it.co.uk
 *
 * Loaded after Tailwind and site.css, so it only states what changes.
 *
 * The idea: a wheelie bin lid is one of the few pieces of industrial design
 * every household in Britain owns, and the whole country already reads it as a
 * code. Blue is recycling, black is the one you always forget, brown is garden,
 * green is food. That code is the design system here. The masthead is the lid,
 * the answer is a band in the lid's own colour, and the reference section is a
 * council notice rather than four bordered boxes of equal weight.
 *
 * What it replaces: a centred column of white rounded cards on off-white, a
 * Title Case h1 with an icon after it, and a results panel set at the same size
 * as a section heading, in a gradient box, below the fold.
 *
 * Tailwind is loaded from the CDN and injects its utilities into the head at
 * runtime, which can land after this file. Overrides that fight a utility are
 * marked !important for that reason and no other.
 */

/* ------------------------------------------------------------------ type */

:root {
    /*
     * The house scale stops at 2.488rem, which is why the answer to the only
     * question anyone asks has been the same size as "Recycling Guide". The top
     * of the scale is extended rather than the 1.2 ratio changed.
     */
    --step-6: 3.4rem;
    --step-7: 5rem;

    /*
     * Bitter is already loaded for headings. It is a slab, which is what a rate
     * demand, a parking sign and a collection calendar are all set in, and it is
     * doing the municipal work here rather than being decorative.
     */
    --font-notice: 'Bitter', Georgia, serif;
    --font-plain: 'Source Sans 3', system-ui, sans-serif;

    /* Municipal green: darker than Tailwind's green-700, and committed to. */
    --council: #2E5A33;
    --council-deep: #1F3F23;

    --paper: #F4F2ED;
    --ink: #1A1D21;
    --ink-soft: #3C434B;
    /* 5.21:1 on the paper ground. The old grey was 4.24:1 and failed. */
    --muted: #5E666F;
    --rule: #DCD8D0;
    --rule-strong: #BDB8AE;

    /*
     * The lid code. Every one of these is a text colour somewhere, so every one
     * is checked against white: 7.09, 10.64, 6.27 and 7.77 to 1.
     */
    --lid-recycling: #1F5C8B;
    --lid-general: #3A3F44;
    --lid-food: #3F6B2B;
    --lid-garden: #6E4B2A;
}

body {
    background: var(--paper) !important;
    color: var(--ink);
    font-family: var(--font-plain);
}

h1, h2, h3,
.notice-label {
    font-family: var(--font-notice);
}

/*
 * Field names, section marks and anything that labels rather than says. One
 * mannerism, used consistently, doing the job the old design gave to bold 14px.
 */
.notice-label,
.section-mark,
.lid-band .lid-name,
.masthead-kicker {
    font-family: var(--font-plain);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-feature-settings: 'tnum';
}

/* --------------------------------------------------------------- the nav */

/*
 * A council notice has a masthead rule, not a row of pills. The pills also read
 * as buttons, which they are not.
 */
nav.sticky {
    background: var(--council) !important;
    border-bottom: 4px solid var(--council-deep) !important;
    padding: 0.6rem clamp(1rem, 4vw, 2rem) !important;
}

nav.sticky > a:first-child {
    color: #fff !important;
    font-family: var(--font-notice);
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    font-size: 1.05rem !important;
}

nav.sticky .flex a {
    color: #fff !important;
    border-radius: 0 !important;
    padding: 0.35rem 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.74rem !important;
    border-bottom: 2px solid transparent;
}

nav.sticky .flex a:hover {
    background: transparent !important;
    border-bottom-color: #fff;
}

nav.sticky a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

nav.sticky svg.icon {
    stroke: #fff;
}

/* -------------------------------------------------------------- masthead */

/*
 * Full bleed, because a bin lid has no margin. The lid photograph is greyscale
 * and multiplied over the green rather than laid on top of it, so it can only
 * darken: white type on this band measures 8.00:1 against the flat green in the
 * worst case and 13.15:1 over the mid tones of the texture. There is no lighting
 * condition in which the image makes the type harder to read.
 */
.masthead {
    background-color: var(--council);
    background-image: url('/img/bin-lid.webp');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    color: #fff;
    border-bottom: 5px solid var(--council-deep);
    padding-block: clamp(2.25rem, 6vw, 4rem) clamp(1.75rem, 4vw, 3rem);
}

.masthead-inner {
    max-width: 62rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.masthead-kicker {
    display: block;
    color: #fff;
    opacity: 0.8;
    margin-bottom: 1.1rem;
}

.masthead h1 {
    color: #fff !important;
    font-size: clamp(2.2rem, 6vw, var(--step-6)) !important;
    font-weight: 700 !important;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    max-width: 15ch;
    margin: 0 !important;
    text-wrap: balance;
}

.masthead-standfirst {
    margin-top: 1rem;
    max-width: 44ch;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #fff;
    opacity: 0.9;
}

/* ---------------------------------------------------------- the page body */

/*
 * The old page was one centred column with everything in it at the same width
 * and the same weight. This is an editorial grid: the margin column carries the
 * section mark, the main column carries a readable measure. Below 62rem the
 * mark sits above its section, which is where it reads anyway on a phone.
 */
.sheet {
    max-width: 62rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-block: clamp(1.75rem, 4vw, 3rem) 4rem;
}

.sheet-row {
    display: grid;
    gap: clamp(0.75rem, 2vw, 2rem);
}

@media (min-width: 62rem) {
    .sheet-row {
        grid-template-columns: 7rem minmax(0, 1fr);
        align-items: start;
    }
}

.section-mark {
    color: var(--council);
    padding-top: 0.4rem;
}

@media (min-width: 62rem) {
    .section-mark {
        text-align: right;
        border-top: 3px solid var(--council);
    }
}

.sheet-row + .sheet-row {
    margin-top: clamp(2rem, 5vw, 3.25rem);
    padding-top: clamp(2rem, 5vw, 3.25rem);
    border-top: 1px solid var(--rule);
}

/*
 * Fourteen class names in this estate resolved to the same white rounded box
 * with a soft shadow. They are retired here in one rule: the page is held
 * together by rules and space instead.
 */
.sheet .bg-white,
.sheet .bg-gray-50,
.sheet [class*='rounded-lg'],
.sheet [class*='rounded-2xl'],
.sheet [class*='shadow-md'],
.sheet [class*='shadow-lg'],
.sheet [class*='bg-gradient-to-br'] {
    background: none !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}

.sheet h2 {
    font-size: var(--step-4, 2.074rem) !important;
    font-weight: 700 !important;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--ink) !important;
    max-width: 26ch;
    margin: 0 0 0.6rem !important;
}

.sheet h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--ink) !important;
    margin: 1.4rem 0 0.3rem !important;
}

.sheet p,
.sheet li {
    color: var(--ink-soft) !important;
    max-width: 66ch;
}

/* ---------------------------------------------------------------- lookup */

/*
 * One field. It is the only reason the site exists, so it gets the width and
 * the weight, and it sits on a ruled baseline rather than in a rounded box.
 */
.lookup {
    border-top: 4px solid var(--council);
    padding-top: 1.25rem !important;
}

.lookup .notice-label {
    color: var(--council);
    display: block;
    margin-bottom: 0.75rem;
}

#collectionForm .flex {
    gap: 0 !important;
    flex-wrap: wrap;
    align-items: stretch;
}

#postcode {
    flex: 1 1 12rem;
    border: 0 !important;
    border-bottom: 3px solid var(--rule-strong) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0.4rem 0 0.5rem !important;
    font-family: var(--font-notice);
    font-size: clamp(1.6rem, 5vw, 2.4rem) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink);
    box-shadow: none !important;
}

/*
 * Lighter and smaller than the value it stands in for. At the input's own size
 * and weight the example postcode read as a filled field, so people arrived at
 * a form that looked already answered. The visible label above carries the
 * accessible name, so this only has to hint.
 */
#postcode::placeholder {
    color: color-mix(in srgb, var(--muted) 62%, transparent);
    font-size: 0.62em;
    letter-spacing: 0.06em;
    font-weight: 400;
    letter-spacing: 0.02em;
}

#postcode:hover {
    border-bottom-color: var(--ink-soft) !important;
}

/*
 * The rule takes the accent on focus, and the outline stays as well: a colour
 * change on its own is not a focus indicator for anyone who cannot see it.
 */
#postcode:focus,
#postcode:focus-visible {
    border-bottom-color: var(--council) !important;
    outline: 3px solid var(--council) !important;
    outline-offset: 3px;
}

#checkBtn {
    flex: 0 0 auto;
    align-self: flex-end;
    background: var(--council) !important;
    color: #fff !important;
    border-radius: 0 !important;
    padding: 0.85rem 1.5rem !important;
    font-family: var(--font-plain);
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-left: 1rem;
}

#checkBtn:hover {
    background: var(--council-deep) !important;
}

#checkBtn:focus-visible {
    outline: 3px solid var(--council) !important;
    outline-offset: 3px;
}

#checkBtn:disabled {
    background: var(--muted) !important;
    cursor: wait;
}

#postcodeError {
    color: #8E2A1C !important;
    font-weight: 600;
    margin-top: 0.6rem !important;
}

/* ---------------------------------------------------------- the answer */

/*
 * The reason anyone is here. Previously a 3xl heading inside a gradient card,
 * below a fold, the same size as the recycling guide above it. Now the bin name
 * is the largest thing on the page and the day is second.
 */
#collectionResults {
    margin-top: 2.5rem !important;
}

.lid-band {
    border-top: 1px solid var(--rule-strong);
    border-left: 10px solid var(--rule-strong);
    padding: 1.1rem 0 1.3rem 1.1rem;
    background: #fff;
}

.lid-band + .lid-band {
    margin-top: 0.75rem;
}

.lid-band .lid-name {
    display: block;
    color: var(--muted);
    margin-bottom: 0.25rem;
}

.lid-band .lid-bin {
    display: block;
    font-family: var(--font-notice);
    font-size: clamp(1.9rem, 6vw, var(--step-6));
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.lid-band .lid-when {
    display: block;
    margin-top: 0.35rem;
    font-size: 1.05rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

/*
 * Which bin it is is carried by the name, the rule colour and the label, never
 * by the colour alone: the four lid colours are indistinguishable to some
 * people and identical in a black and white print.
 */
.lid-band.is-recycling { border-left-color: var(--lid-recycling); }
.lid-band.is-recycling .lid-name { color: var(--lid-recycling); }
.lid-band.is-general { border-left-color: var(--lid-general); }
.lid-band.is-general .lid-name { color: var(--lid-general); }
.lid-band.is-food { border-left-color: var(--lid-food); }
.lid-band.is-food .lid-name { color: var(--lid-food); }
.lid-band.is-garden { border-left-color: var(--lid-garden); }
.lid-band.is-garden .lid-name { color: var(--lid-garden); }

#collectionCouncil {
    font-family: var(--font-notice);
    font-size: 1.3rem !important;
    font-weight: 700;
    color: var(--ink) !important;
}

#collectionPostcode {
    color: var(--muted) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.75rem !important;
    font-weight: 700;
}

#apiNote,
#noCollections,
#councilLink {
    border-left: 4px solid var(--rule-strong) !important;
    padding: 0.75rem 0 0.75rem 0.9rem !important;
    margin-top: 1.25rem !important;
}

#apiNote p,
#noCollections p {
    color: var(--ink-soft) !important;
    font-size: 0.92rem;
}

#errorResults {
    border-left: 6px solid #8E2A1C !important;
    padding: 1rem 0 1rem 1.1rem !important;
}

#errorResults h3 {
    color: #8E2A1C !important;
    margin-top: 0 !important;
}

/* ------------------------------------------------------- the lid guide */

/*
 * Four bordered boxes shouting at the same volume become four ruled columns of
 * a single table. The yes and no lists are what people actually read, so they
 * get the space and the rule does the separating.
 */
.lid-guide {
    display: grid;
    gap: 1.75rem;
}

@media (min-width: 46rem) {
    .lid-guide {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 68rem) {
    .lid-guide {
        grid-template-columns: repeat(4, 1fr);
    }
}

.lid-guide > div {
    border-top: 6px solid var(--rule-strong);
    padding-top: 0.9rem !important;
}

.lid-guide > div:nth-child(1) { border-top-color: var(--lid-recycling); }
.lid-guide > div:nth-child(2) { border-top-color: var(--lid-general); }
.lid-guide > div:nth-child(3) { border-top-color: var(--lid-food); }
.lid-guide > div:nth-child(4) { border-top-color: var(--lid-garden); }

.lid-guide h3 {
    margin: 0 0 0.6rem !important;
    font-size: 1.05rem !important;
}

.lid-guide > div:nth-child(1) h3 { color: var(--lid-recycling) !important; }
.lid-guide > div:nth-child(2) h3 { color: var(--lid-general) !important; }
.lid-guide > div:nth-child(3) h3 { color: var(--lid-food) !important; }
.lid-guide > div:nth-child(4) h3 { color: var(--lid-garden) !important; }

.lid-guide ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.88rem;
}

.lid-guide li {
    padding: 0.3rem 0;
    border-top: 1px solid var(--rule);
}

.lid-guide svg.icon {
    display: none;
}

/* ------------------------------------------------------------ countdown */

#countdownSection {
    border-top: 4px solid var(--council);
    padding-top: 1.25rem !important;
}

#countdownDisplay {
    text-align: left !important;
    font-family: var(--font-notice);
    font-size: clamp(1.6rem, 5vw, var(--step-5, 2.488rem));
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
}

/* --------------------------------------------------------- saved places */

#savedPostcodesSection .notice-label {
    color: var(--council);
}

#savedPostcodesList {
    gap: 0 !important;
    display: block !important;
}

#savedPostcodesList > * {
    border-top: 1px solid var(--rule);
    padding: 0.55rem 0 !important;
    background: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#savedPostcodesSection button,
.sheet button:not(#checkBtn) {
    background: transparent !important;
    color: var(--ink) !important;
    border: 1px solid var(--rule-strong) !important;
    border-radius: 0 !important;
    padding: 0.45rem 0.9rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#savedPostcodesSection button:hover,
.sheet button:not(#checkBtn):hover {
    border-color: var(--council) !important;
    color: var(--council) !important;
}

#savedPostcodesSection button:focus-visible,
.sheet button:not(#checkBtn):focus-visible {
    outline: 3px solid var(--council) !important;
    outline-offset: 2px;
}

/* ------------------------------------------------------- interior pages */

/*
 * The set's most telling failure was a homepage with a voice and eleven interior
 * pages without one. Interior pages get the same masthead, the same grid and the
 * same rules; only the band is shallower, because they are not the front page.
 */
.masthead.masthead-interior {
    padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem);
}

.masthead.masthead-interior h1 {
    font-size: clamp(1.8rem, 5vw, var(--step-5, 2.488rem)) !important;
    max-width: 22ch;
}

.breadcrumb {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted) !important;
    margin-bottom: 1.5rem !important;
}

.breadcrumb a {
    color: var(--council) !important;
}

.breadcrumb a:focus-visible {
    outline: 2px solid var(--council);
    outline-offset: 2px;
}

/* The FAQ was a stack of shadowed boxes. It is a list of questions. */
.faq-list > div,
.qa > div {
    border-top: 1px solid var(--rule);
    padding-block: 1.1rem !important;
}

.qa > div:last-child {
    border-bottom: 1px solid var(--rule);
}

/* ------------------------------------------------------------- footer */

footer {
    border-top: 5px solid var(--council-deep);
    background: var(--council) !important;
    color: #fff !important;
    margin-top: clamp(2rem, 5vw, 4rem);
    padding-block: clamp(1.75rem, 4vw, 2.5rem) !important;
}

footer a {
    color: #fff !important;
}

footer a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- print */

/*
 * People print the collection days and stick them inside a kitchen cupboard,
 * which is the entire point of the site. The answer prints; the chrome does not.
 */
@media print {
    nav.sticky,
    #savedPostcodesSection,
    .lid-guide,
    footer,
    .book-plug,
    .adsbygoogle {
        display: none !important;
    }

    .masthead {
        background: none !important;
        color: #000 !important;
        border-bottom: 2px solid #000;
    }

    .masthead h1,
    .masthead-kicker,
    .masthead-standfirst {
        color: #000 !important;
        opacity: 1;
    }

    .lid-band {
        border-left-color: #000;
        break-inside: avoid;
    }
}

/* --------------------------------- the pages that never got Tailwind */

/*
 * Contact, terms, privacy and 404 are built on site.css rather than Tailwind,
 * which is why they already looked like a different website. They get the same
 * masthead and the same rules so the set reads as one thing.
 *
 * This is also where site.css collapses fourteen class names into a single
 * white 10px-radius box with a soft shadow. Retired in one rule.
 */
.site-nav {
    background: var(--council) !important;
    border-bottom: 4px solid var(--council-deep) !important;
}

.site-nav .nav-brand {
    color: #fff !important;
    font-family: var(--font-notice);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.site-nav .nav-links a {
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.74rem;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    border-radius: 0;
}

.site-nav .nav-links a:hover,
.site-nav .nav-links a[aria-current='page'] {
    background: transparent !important;
    border-bottom-color: #fff;
}

.site-nav a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.site-nav svg.icon {
    stroke: #fff;
}

.content-card,
.info-card,
.article-card,
.blog-card,
.faq-card,
.card,
.result-box,
.history-item,
.email-box,
.contact-box,
.faq-section,
.summary-card,
.balance-card {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body > .container {
    max-width: 62rem;
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-block: clamp(1.75rem, 4vw, 3rem) 4rem;
}

body > .container h1 {
    font-family: var(--font-notice);
    font-size: var(--step-5, 2.488rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    max-width: 20ch;
}

body > .container h2 {
    font-family: var(--font-notice);
    font-size: var(--step-3, 1.728rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 2rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--rule);
    max-width: 28ch;
}

body > .container p,
body > .container li {
    max-width: 66ch;
    color: var(--ink-soft);
}

.back-link {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--council) !important;
}

.back-link:focus-visible,
.email-link:focus-visible {
    outline: 3px solid var(--council);
    outline-offset: 2px;
}

.email-link {
    font-family: var(--font-notice);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--council) !important;
}

/* ------------------------------------------- the margin column, in CSS */

/*
 * The editorial grid's margin column. The marks are numbering, not content, so
 * they are generated rather than written into the markup: a screen reader gets
 * the heading it came for instead of "zero three" in front of it.
 */
.sheet {
    counter-reset: section-mark;
}

.sheet > section,
.sheet > .lookup,
.sheet > #collectionResults {
    counter-increment: section-mark;
    display: grid;
    gap: 0.5rem clamp(0.75rem, 2vw, 2rem);
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: 0 !important;
    border-top: 1px solid var(--rule);
}

.sheet > .lookup {
    border-top: 4px solid var(--council);
}

.sheet > section::before,
.sheet > .lookup::before,
.sheet > #collectionResults::before {
    content: counter(section-mark, decimal-leading-zero);
    font-family: var(--font-plain);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--council);
    font-feature-settings: 'tnum';
}

@media (min-width: 62rem) {
    .sheet > section,
    .sheet > .lookup,
    .sheet > #collectionResults {
        grid-template-columns: 7rem minmax(0, 1fr);
        align-items: start;
    }

    .sheet > section > *,
    .sheet > .lookup > *,
    .sheet > #collectionResults > * {
        grid-column: 2;
    }

    .sheet > section::before,
    .sheet > .lookup::before,
    .sheet > #collectionResults::before {
        grid-column: 1;
        grid-row: 1 / -1;
        text-align: right;
        border-top: 3px solid var(--council);
        padding-top: 0.4rem;
        margin-top: -0.4rem;
    }
}

/* Hidden sections must stay hidden: display:grid would otherwise reveal them. */
.sheet > section.hidden,
.sheet > #collectionResults.hidden,
.sheet > section[style*='display: none'],
.sheet > section[style*='display:none'] {
    display: none !important;
}

/* ------------------------------------------------------- the one field */

/*
 * The label is visible, not hidden. This field takes a postcode in a specific
 * format and the placeholder that used to carry that hint disappeared the
 * moment anyone typed, which is exactly when they still needed it.
 */
.postcode-label {
    display: block;
    flex: 1 0 100%;
    font-family: var(--font-plain);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.3rem;
}

.result-head {
    color: var(--muted) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
}

/* --------------------------------------------------------------- focus */

/*
 * site.css:740 drops the outline on every focused field and replaces it with a
 * 3px ring in --accent-tint, which is a near-white on a near-white ground. The
 * outline comes back here for anything that takes focus.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--council) !important;
    outline-offset: 2px;
}

.masthead a:focus-visible,
nav.sticky a:focus-visible,
.site-nav a:focus-visible,
footer a:focus-visible {
    outline-color: #fff !important;
}

/*
 * A placeholder is a hint, not a value.
 *
 * The fields on these pages were enlarged so the figure people type is legible
 * at the scale of the answer. At that size a placeholder set in the input's own
 * colour and weight reads as a filled field, and somebody arrives at a form that
 * looks already answered. Every field here carries a visible label, so the
 * placeholder is free to recede.
 */
input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, currentColor 38%, transparent);
    font-size: 0.66em;
    font-weight: 400;
    letter-spacing: 0.04em;
    opacity: 1;
}

/* placeholder specificity */
input[type="text"]::placeholder,
input[type="number"]::placeholder,
input[type="search"]::placeholder {
    color: color-mix(in srgb, currentColor 38%, transparent);
    font-size: 0.66em;
    font-weight: 400;
    letter-spacing: 0.04em;
    opacity: 1;
}

/* ------------------------------------------------- non-visual text */

/*
 * The lid lists carried their yes and no entirely in a tick or a cross, which
 * a screen reader reads as "check mark" or not at all. The glyph stays; the
 * word sits beside it for anyone not looking at the page.
 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* An empty live region must stay in the document to be announced when filled. */
#savedPostcodesStatus:empty {
    margin: 0;
    padding: 0;
    border: 0;
}

#savedPostcodesStatus {
    margin-top: 0.75rem;
    font-weight: 600;
    color: var(--council, #2A5029);
}

.saved-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.saved-controls .saved-label-field {
    display: flex;
    flex-direction: column;
    flex: 1 1 12rem;
    min-width: 0;
}

.saved-controls .saved-label-field .postcode-label {
    flex: none;
    margin-bottom: 0.2rem;
}

#savedLabel {
    width: 100%;
    border: 0 !important;
    border-bottom: 2px solid var(--rule-strong) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0.35rem 0 !important;
    font-family: var(--font-notice);
    font-size: 1.1rem !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink);
    box-shadow: none !important;
}

#savedLabel:focus,
#savedLabel:focus-visible {
    border-bottom-color: var(--council) !important;
    outline-offset: 4px;
}

/* ------------------------------------------------------------ brand mark */

/*
 * The mark is not an icon from the shared set and never will be, so it does
 * not carry svg.icon: the design build refreshes those from a registry and
 * would rewrite this one back to whatever it holds. Same sizing and weight,
 * its own class.
 */
.brand-mark {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.135em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

.brand-mark-lg {
    width: 1.35em;
    height: 1.35em;
}


/* ------------------------------------------------------------- skip link */

/*
 * There was no way past the nav from a keyboard: the same links came before
 * the content on every page, which is SC 2.4.1 at level A.
 */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: #2E5A33;
    color: #fff;
    padding: 0.75rem 1.25rem;
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}