/**
 * People's Choice voting page.
 *
 * This file exists for ONE reason: contrast. The layout is UIkit and stays
 * UIkit, because the site runs YOOtheme Pro and the customiser owns the look.
 * What the theme does NOT give us is readable text: its `uk-text-meta` renders
 * at #f5f3f3 on white, which is 1.1:1 and effectively invisible, and its form
 * labels and inputs sit around 5:1, under the 7:1 we hold ourselves to.
 *
 * So every rule below pins a colour PAIR and nothing else. No spacing, no
 * layout, no component styling: those would fight the customiser and slowly
 * stop matching the site around them. Scoped to .gba-pc so nothing here can
 * leak onto a page we do not own.
 *
 * Measured ratios are stated per rule. They are computed, not estimated.
 */

.gba-pc {
    /* ONE palette, no prefers-color-scheme, and both halves of every pair pinned
       on our own container.
       
       The first version of this file switched to white text under
       prefers-color-scheme: dark. That was wrong, and it shipped: this theme is a
       light-only design whose page background stays white whatever the operating
       system says, so anyone browsing in dark mode got white text on a white page
       and an almost entirely invisible form. A component dropped into someone
       else's theme does not own the background, so it must never assume the
       background moved with the reader's preference. Either you set the
       background yourself or you do not touch the colour. We do both: an explicit
       surface, and text pinned against it. */
    background-color: #ffffff;
    color: #1a1a2e;

    --gba-pc-bg: #ffffff;
    --gba-pc-text: #1a1a2e;      /* 16.8:1 on #ffffff */
    --gba-pc-muted: #3f4450;     /* 10.1:1 on #ffffff, replaces uk-text-meta */
    --gba-pc-heading: #000000;   /* 21:1  on #ffffff */
    --gba-pc-line: #767b86;

    /* THE AWARDS' OWN COLOURS, measured off their logo rather than matched by
       eye: green #0e6c4e (the word AWARDS and the lower wave) and blue #009ddd
       (the upper wave). Neither can be used raw for text.

       The green is 6.41:1 on white, which misses AAA by a whisker. The blue is
       3.06:1 on white and 6.87:1 on black, so it fails both ways round: it is
       simply not a colour you can put small text against. Darkening it far
       enough to work (about #005a80) stops it looking like their wave blue at
       all.

       So the green carries the actions and the blue is the accent it is in the
       logo: a rule, a border, a focus ring. The green used here is #1b5646,
       which is not the logo green but the one already on every page of their
       site, in the footer. Matching the site beats matching the mark, because
       the voting page has to look like it belongs. To match the LOGO exactly
       instead, change --gba-pc-brand to #0d5f45; it is 7.66:1 on white and the
       only line that would need to move. */
    --gba-pc-brand: #1b5646;        /* white on it: 8.52:1  */
    --gba-pc-brand-dark: #123c31;   /* hover; white on it: 12.23:1 */
    --gba-pc-brand-text: #0d5f45;   /* green TEXT on white: 7.66:1 */
    --gba-pc-accent: #009ddd;       /* decoration only: 3.06:1, a rule, never text */
    --gba-pc-focus: #005a80;        /* focus ring on white: 7.57:1 */
}




.gba-pc,
.gba-pc p,
.gba-pc label,
.gba-pc .uk-form-label {
    color: var(--gba-pc-text) !important;
}

.gba-pc h1,
.gba-pc h2,
.gba-pc .uk-h3,
.gba-pc .uk-h4,
.gba-pc .uk-h5,
.gba-pc .uk-heading-small,
.gba-pc .uk-heading-medium {
    color: var(--gba-pc-heading) !important;
}

/* The replacement for uk-text-meta. Same job, a colour we can prove. */
.gba-pc .uk-card:not(.uk-card-primary),
.gba-pc .uk-alert {
    background-color: var(--gba-pc-bg) !important;
    color: var(--gba-pc-text) !important;
}

/* The sponsor credit on the thank-you is deliberately the one solid panel on the
   page: it is the moment of full attention and it should not look like more of
   the same form. It is the awards' green, edged in their blue, which is the one
   place the two sit together exactly as they do in the logo.

   Everything ON the panel is white. Blue text here measures 2.78:1 against the
   green and pale blue only reaches 5.69:1, so the accent stays a border.

   The border needs 3:1 on BOTH of its edges: outward against the white page,
   inward against the green fill. NO SINGLE COLOUR CAN DO THAT HERE, and it is
   arithmetic rather than an opinion: clearing 3:1 against white caps a colour's
   luminance at 0.30, and clearing 3:1 against this green demands at least 0.32.
   The blue manages 3.06:1 outward and 2.78:1 inward. So the inward edge is
   drawn separately, as a white inset ring: 8.52:1 against the green it sits on
   and 3.06:1 against the blue beside it. Two edges, two colours, both provable. */
.gba-pc .uk-card-primary {
    background-color: var(--gba-pc-brand) !important;
    color: #ffffff !important;          /* 8.52:1 on #1b5646 */
    border: 3px solid var(--gba-pc-accent);
    box-shadow: inset 0 0 0 2px #ffffff;
}

.gba-pc .uk-card-primary .uk-h3,
.gba-pc .uk-card-primary h3 {
    color: #ffffff !important;          /* 8.52:1 on #1b5646 */
}

.gba-pc .uk-card-primary p,
.gba-pc .uk-card-primary span {
    color: #ffffff !important;
}

.gba-pc .gba-pc-meta {
    color: var(--gba-pc-muted) !important;
    font-size: 0.82rem;
}

.gba-pc .gba-pc-eyebrow {
    color: var(--gba-pc-muted) !important;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
}

/* Inputs. The theme's own value colour is #6c6d74, which is 5.15:1 and fails
   AAA. Both the field and its placeholder are pinned, because a placeholder is
   text a user has to read to know what the field wants. */
.gba-pc .uk-input,
.gba-pc .uk-select {
    color: var(--gba-pc-text) !important;
    background-color: var(--gba-pc-bg) !important;
    border-color: var(--gba-pc-line) !important;
}

/* The OPTIONS need saying separately, and it is not obvious why. Styling the
   select does NOT reach them: an <option> takes its colour from the user
   agent's own stylesheet, not by inheritance from its parent, so the rule
   above fixes the closed field while every line of the open list stays on the
   theme's #6c6d74. That is grey on white, which contrast-and-readability.md
   bans outright whatever it measures.
   Caught by the accessibility gate on 1.0.65, having been invisible until the
   clone had entrants in it: with an empty dropdown there were no <option>
   elements to fail, so earlier releases scanned clean without being right.
   The list is the whole control here, since choosing a business from it IS
   the vote.

   THE SELECTOR IS DELIBERATELY OVER-SPECIFIED, and it must stay that way.
   The rule being beaten is YOOtheme's own, in the compiled theme CSS:
       .uk-select:not([multiple]):not([size]) option { color: #6c6d74 }
   which scores (0,3,1). A plain `.gba-pc .uk-select option` is only (0,2,1),
   so it would win purely because the theme's rule carries no !important and
   ours does. That is a one-line margin: !important against !important is
   resolved by specificity, so the day a customiser recompile adds !important
   to the theme's rule, the grey silently comes back, and nothing in this
   component's pipeline would notice because no code of ours would have
   changed. Matching the theme's own :not() pair takes us to (0,4,1) and wins
   on specificity as well, which does not depend on anyone else's !important.
   Do not "tidy" the :not() clauses away. */
.gba-pc .uk-select:not([multiple]):not([size]) option {
    color: var(--gba-pc-text) !important;
    background-color: var(--gba-pc-bg) !important;
}

.gba-pc .uk-input::placeholder {
    color: var(--gba-pc-muted) !important;
    opacity: 1; /* never dim text to signal anything: opacity destroys the ratio */
}

/* Sponsor cards inherit the theme's grey body colour, which is the same 5.15:1
   failure as the inputs. Their whole purpose is to be read. */
.gba-pc .gba-pc-sponsor,
.gba-pc .gba-pc-sponsor span {
    color: var(--gba-pc-text) !important;
}

.gba-pc .gba-pc-sponsor .gba-pc-sponsor-name {
    color: var(--gba-pc-brand-text) !important;
    font-weight: 700;
}

/* Focus is the awards' blue, darkened to #005a80 so it is 7.57:1 against the
   page rather than the 3.06:1 the raw wave blue manages. A focus ring is the
   one piece of "decoration" a keyboard user depends on completely, so it gets
   text-grade contrast even though the rules would allow less. */
.gba-pc .uk-input:focus,
.gba-pc .uk-select:focus,
.gba-pc .uk-checkbox:focus,
.gba-pc button:focus,
.gba-pc a:focus {
    outline: 3px solid var(--gba-pc-focus) !important;
    outline-offset: 2px;
}

/* ...but that ring is measured against the WHITE page, and there is one place
   on these pages that is not white: the green sponsor panel on the thank-you.
   #005a80 on #1b5646 is 1.12:1, which is not a dulled focus indicator, it is an
   absent one. A ring that disappears on a single panel is worse than a duller
   ring everywhere, because it fails precisely where somebody is mid-task and
   has no other way of telling where they are. On the green, it goes white. */
.gba-pc .uk-card-primary a:focus,
.gba-pc .uk-card-primary button:focus {
    outline-color: #ffffff !important;  /* 8.52:1 on #1b5646 */
}

/* CAST MY VOTE. The theme's own uk-button-primary is white text on its gold,
   which measures about 1.6:1 and is close to unreadable, so this was already
   being overridden; it used to be overridden to a yellow that passed the maths
   and had nothing to do with the Gravesham Business Awards. It is now their
   green with white on it, 8.52:1.

   Both button classes get the same treatment because both appear on these
   pages and a visitor should not have to work out which one is the real
   action. */
.gba-pc .uk-button-primary,
.gba-pc .uk-button-default {
    background-color: var(--gba-pc-brand) !important;
    color: #ffffff !important;              /* 8.52:1 on #1b5646 */
    border: 2px solid var(--gba-pc-brand-dark) !important;
    font-weight: 700;
}

/* Hover goes DARKER, not lighter. Lightening a coloured button is the usual
   move and it walks the contrast down; this walks it up, to 12.23:1. */
.gba-pc .uk-button-primary:hover,
.gba-pc .uk-button-primary:focus,
.gba-pc .uk-button-default:hover,
.gba-pc .uk-button-default:focus {
    background-color: var(--gba-pc-brand-dark) !important;
    color: #ffffff !important;
}

/* The rule above the sponsors is the one piece of pure decoration on the page,
   so it is where the wave blue can be itself. Nothing has to be read against
   it; at 3.06:1 it clears the 3:1 that non-text UI needs and nothing more is
   asked of it. */
.gba-pc hr {
    border-top: 3px solid var(--gba-pc-accent);
    opacity: 1;
}

/* Sponsor cards: logo above a linked name, and nothing else.
   The truncated tagline is gone: half a sentence ending in an ellipsis reads as
   a mistake rather than a description, and it left a large empty band under the
   card because the text length varied wildly between sponsors. */
.gba-pc .gba-pc-sponsor,
.gba-pc .gba-pc-sponsor-link {
    text-decoration: none;
    display: block;
    text-align: center;
}

.gba-pc .gba-pc-sponsor-logo {
    display: block;
    margin: 0 auto .5rem;
    max-width: 190px;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* The name IS the link, so it has to look like one and carry the contrast.
   Green rather than black, because a link should not look like body text, and
   #0d5f45 is the logo green nudged just far enough to clear AAA at 7.66:1. */
.gba-pc .gba-pc-sponsor .gba-pc-sponsor-name {
    color: var(--gba-pc-brand-text) !important;
    font-weight: 700;
    text-decoration: underline;
}

.gba-pc .uk-card-primary .gba-pc-sponsor-name {
    color: #ffffff !important;              /* 8.52:1 on #1b5646 */
    font-size: 1.25rem;
    text-decoration: underline;
}

.gba-pc .gba-pc-sponsor:hover .gba-pc-sponsor-name,
.gba-pc .gba-pc-sponsor-link:hover .gba-pc-sponsor-name {
    text-decoration: none;
}

/* A sponsor logo is usually artwork on white, so on the dark credit panel it
   gets its own light plate rather than being left to disappear into it. */
.gba-pc .uk-card-primary .gba-pc-sponsor-logo {
    background: #ffffff;
    padding: .5rem .75rem;
    border-radius: 6px;
}

/* ---------------------------------------------------------------------------
   The judges' standings table (1.0.67). Behind a password; never public while
   voting is open.

   The BAR is decoration and is marked aria-hidden in the template, so the
   number beside it is what actually conveys the figure. That split is
   deliberate: a bar alone is unreadable to a screen reader and useless printed
   in black and white, and this page is read by the people deciding an award.
   The bar therefore only has to clear 3:1 as a non-text element, which the
   brand green does comfortably; the number next to it carries text-grade
   contrast.
   --------------------------------------------------------------------------- */
.gba-pc .gba-pc-bar {
    display: inline-block;
    height: 0.75rem;
    min-width: 2px;              /* zero votes still shows a mark, not nothing */
    background-color: var(--gba-pc-brand) !important;  /* 8.52:1 against white */
    vertical-align: middle;
    margin-right: 0.5rem;
    max-width: 60%;
}

.gba-pc .gba-pc-share {
    color: var(--gba-pc-text) !important;   /* 16.8:1 on white */
    font-variant-numeric: tabular-nums;      /* columns of figures line up */
    white-space: nowrap;
}

/* Withheld entrants are shown and marked rather than hidden. The marker must be
   READ, not merely noticed, so it takes the same near-black as body text and is
   distinguished by weight and wording instead of by a lighter grey. Greying it
   would be the obvious choice and would fail AAA. */
.gba-pc .gba-pc-withheld {
    color: var(--gba-pc-text) !important;
    font-weight: 700;
    white-space: nowrap;
}

/* The clustered note on the judges' standings (1.0.68).
 *
 * Deliberately QUIET. This appears beside a named local business on a page the
 * judges use to decide an award, and it is a fact to weigh, not an accusation.
 * Styling it as a red warning badge would make the page deliver a verdict the
 * numbers do not support: a shared office or a family on one router produces
 * the same reading perfectly innocently.
 *
 * It therefore uses the same colour as the surrounding text, at the same
 * weight, and carries its meaning in the WORD and its title attribute rather
 * than in a colour. That also means it survives being printed in black and
 * white, and needs no contrast pair of its own to measure, because it is the
 * body colour that has already been measured.
 */
.gba-pc .gba-pc-concentrated {
    color: var(--gba-pc-text) !important;
    display: block;
    font-size: .82em;
    font-style: italic;
    white-space: nowrap;
}