/* ===========================================================================
   "Airfield" - the Howden title-sponsor theme for the public site.

   Palette measured from howdeninsurance.co.uk computed styles: moss green
   #173f35 is the brand ink, mint #96e6dc the secondary, brass #998542 the
   accent used for status and links. There is no blue in the Howden brand.

   Loaded by templates/base.html only when Competition.theme == 'howden', and
   every rule is scoped to body.theme-howden so it cannot reach a vanilla page.
   The admin never extends base.html, so it cannot be reached at all.

   Deliberately NOT redefined here: --warn-*, --notam-*, --dht-* and the
   airspace panel. Those colours are read as a caution about flight safety, and
   a sponsor palette has no business changing them. See main.css.
   =========================================================================== */
body.theme-howden {
    /* brand and links */
    --brand: #173f35;
    --brand-hover: #0f2c25;
    --brand-ink: #ffffff;
    --brand-focus-ring: rgba(23, 63, 53, .22);
    --link: #8d741e;

    /* surfaces and text */
    --ink: #16241f;
    --page-bg: #ffffff;
    --surface: #ffffff;
    --muted: #4a5f58;
    --muted-soft: #7d918a;

    /* tables: a mint header band with moss text, and a very pale mint zebra */
    --th-bg: #96e6dc;
    --th-fg: #173f35;
    --row-alt: #f2fbf9;
    --row-hover: #d9f5ef;
    --border: #e3ede9;

    /* forms */
    --border-input: #e3ede9;

    /* the day info bar reads as a quiet panel rather than a blue notice */
    --info-bg: #f2fbf9;
    --info-line: #e3ede9;
    --info-fg: #4a5f58;

    /* the live dot: decoration for a state the page also spells out in words,
       so it can take the brand's brightest tone */
    --live: #7ce0d3;

    /* score status in brass rather than amber-on-cream */
    --badge-prelim-bg: #998542;
    --badge-prelim-fg: #ffffff;
    --badge-prelim-edge: #8d741e;
    --badge-final-bg: #d9f5ef;
    --badge-final-fg: #173f35;
    --badge-unofficial-bg: #f2fbf9;
    --badge-unofficial-fg: #4a5f58;
    --badge-hc-bg: #e3ede9;
    --badge-hc-fg: #4a5f58;

    /* Brass, not red. A penalty is a fact about the score, not an alert to act
       on, so it needs to be findable rather than loud. */
    --pen: #998542;
    --pen-none: #7d918a;

    /* tooling chrome */
    --tool-bg: #173f35;
    --tool-bg-hover: #0f2c25;
    --tooltip-bg: #16241f;
    --tooltip-fg: #ffffff;
}

/* Howden pair a serif display with a grotesk body, and that pairing carries
   more of the brand than the colours do. This is a stand-in stack: swap in the
   licensed GT Ultra Median when Howden supply the webfonts. */
body.theme-howden h1,
body.theme-howden h2,
body.theme-howden h3 {
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua',
                 Georgia, serif;
    font-weight: 500;
    letter-spacing: -.015em;
}

/* Numbers in a results column should line up, whatever the theme. */
body.theme-howden table { font-variant-numeric: tabular-nums; }

/* The mint header band needs a hairline under it, because mint on white has
   too little contrast at the table edge to read as a boundary on its own. */
body.theme-howden th { border-bottom: 1px solid #7ce0d3; }

/* ---------------------------------------------------------------------------
   Title-sponsor band.

   Sits directly under the nav so the mark is above the fold on every page, and
   on a FLAT colour: the wordmark's letters are knocked out of a solid block, so
   anything textured behind it shows through them. Never place it over a photo.
   --------------------------------------------------------------------------- */
body.theme-howden .sponsor-band {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: .62rem 2rem;
    background: #96e6dc;
    color: #173f35;
}
body.theme-howden .sponsor-band__label {
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
}
body.theme-howden .sponsor-band__rule {
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .25;
    min-width: 10px;
}
/* 25px was too timid -- at that size the wordmark reads as a caption rather
   than a sponsor. Scales with the viewport so it keeps presence on a phone. */
body.theme-howden .sponsor-band__logo {
    height: clamp(28px, 3.4vw, 42px);
    width: auto;
    display: block;
    flex: none;
}
/* The lockup links out to the sponsor. The anchor is now the flex child, so it
   carries flex:none; line-height:0 stops the inline image adding a stray baseline
   gap under the band. Opacity is the only hover affordance -- the wordmark's
   letters are transparent knock-outs, so anything that alters the background
   shows through them. */
body.theme-howden .sponsor-band__link {
    display: block;
    flex: none;
    line-height: 0;
    transition: opacity .15s ease-in-out;
}
body.theme-howden .sponsor-band__link:hover { opacity: .82; }
body.theme-howden .sponsor-band__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Competition hero. Replaces the plain header, so it carries the back link, the
   name and the venue/dates. Full-bleed: it sits inside .container, so negative
   margins pull it back out to the page edges.
   --------------------------------------------------------------------------- */
/* --bleed MUST equal .container's padding, at the same breakpoint.
   Every themed template drops `.container { padding: .75rem }` at max-width
   1000px, so this switches there too.

   Both full-bleed elements derive from this single value because hardcoding it
   twice is what broke the page: the hero and banner both said -2rem and were
   corrected to -.75rem only at 700px, while the container changed at 1000px.
   The 300px gap between the two breakpoints produced two visible bugs at once --
   the hero over-bled 20px per side and made the whole page scroll sideways, and
   its 20px of excess top pull dragged it over the sponsor band and sliced the
   Howden logo in half on a phone. */
body.theme-howden {
    --bleed: 2rem;
}
@media (max-width: 1000px) {
    body.theme-howden {
        --bleed: .75rem;
    }
}
body.theme-howden .comp-hero {
    position: relative;
    overflow: hidden;
    background: #d9f5ef;
    /* Negative top is deliberate here, unlike .comp-banner: the hero replaces the
       page header, so it has to sit flush under the sponsor band. It is only safe
       while it cancels the container's padding EXACTLY -- any excess lands on the
       band above. */
    margin: calc(-1 * var(--bleed)) calc(-1 * var(--bleed)) 1.4rem;
}
body.theme-howden .comp-hero__img {
    display: block;
    width: 100%;
    height: clamp(200px, 26vw, 340px);
    object-fit: cover;
    object-position: center 46%;
}
/* Short and steep. These are pale skies; a long soft scrim turns the frame
   olive and throws away the photograph. */
body.theme-howden .comp-hero__copy {
    position: absolute;
    inset: auto 0 0 0;
    padding: 1.4rem clamp(1rem, 3vw, 2rem);
    background: linear-gradient(transparent, rgba(15, 44, 37, .62) 42%,
                                rgba(15, 44, 37, .93));
    color: #ffffff;
}
body.theme-howden .comp-hero__copy h1 {
    color: #ffffff;
    margin: 0;
    font-size: clamp(1.5rem, 3.6vw, 2.5rem);
}
body.theme-howden .comp-hero__back { margin: 0 0 .3rem; font-size: .82rem; }
body.theme-howden .comp-hero__back a { color: #96e6dc; }
body.theme-howden .comp-hero__meta {
    margin: .35rem 0 0;
    color: #d9f5ef;
    font-size: .88rem;
}

/* ---------------------------------------------------------------------------
   Slim photo band for the day-results and standings pages, which had no imagery
   at all. Short deliberately: these pages are read for numbers, so this is a
   strip of context above the table, never a hero that pushes results off the
   screen. Full-bleed the same way the hero is.
   --------------------------------------------------------------------------- */
body.theme-howden .comp-banner {
    overflow: hidden;
    background: #d9f5ef;
    /* No negative top margin. -1rem tucked the strip up under .page-header and
       covered the sibling-class links, which are the only navigation off this
       page. Only the sides are pulled out, to match the hero's full bleed. */
    margin: .4rem calc(-1 * var(--bleed)) 1.2rem;
}
body.theme-howden .comp-banner img {
    display: block;
    width: 100%;
    height: clamp(86px, 11vw, 150px);
    object-fit: cover;
    object-position: center 48%;
}

/* ---------------------------------------------------------------------------
   "From the airfield". Static theme assets, so the captions stay generic --
   nothing here claims to be from the competition being viewed.
   --------------------------------------------------------------------------- */
body.theme-howden .comp-gallery-wrap { margin-top: 2.2rem; }
body.theme-howden .comp-gallery__eyebrow {
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: #8d741e;
    margin: 0 0 .7rem;
}
body.theme-howden .comp-gallery {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .5rem;
}
body.theme-howden .comp-gallery figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #d9f5ef;
}
body.theme-howden .comp-gallery img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
body.theme-howden .comp-gallery figure:hover img { transform: scale(1.06); }
body.theme-howden .comp-gallery figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: .5rem .5rem .35rem;
    font-size: .63rem;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(transparent, rgba(15, 44, 37, .88));
}
@media (max-width: 760px) {
    body.theme-howden .comp-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    body.theme-howden .comp-gallery img { transition: none; }
}

/* ---------------------------------------------------------------------------
   "Flying now" strip. Moss ground so it reads as a band of live state rather
   than another card, with the brand's brightest tone on the pulse.
   --------------------------------------------------------------------------- */
body.theme-howden .live-strip {
    display: flex;
    align-items: center;
    gap: .3rem .8rem;
    flex-wrap: wrap;
    background: #173f35;
    color: #d9f5ef;
    padding: .6rem 1rem;
    border-radius: 8px;
    margin: 0 0 1.1rem;
    font-size: .88rem;
}
body.theme-howden .live-strip strong { color: #ffffff; font-weight: 600; }
body.theme-howden .live-strip a { color: #96e6dc; }
body.theme-howden .live-strip__item + .live-strip__item::before {
    content: '';
}
body.theme-howden .live-strip__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #7ce0d3;
    flex: none;
    animation: howden-pulse 2.4s ease-out infinite;
}
@keyframes howden-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(124, 224, 211, .65); }
    70%  { box-shadow: 0 0 0 9px rgba(124, 224, 211, 0); }
    100% { box-shadow: 0 0 0 0 rgba(124, 224, 211, 0); }
}
/* The dot is decoration; "Flying now" is the message. Stop the animation and
   nothing is lost. */
@media (prefers-reduced-motion: reduce) {
    body.theme-howden .live-strip__dot { animation: none; }
}

/* ---------------------------------------------------------------------------
   Task panel: the day's parameters as a labelled grid rather than a run of
   bullet-separated fragments. Same fields the vanilla info bar carries, plus a
   finisher count that reuses the competition page's rule.
   --------------------------------------------------------------------------- */
body.theme-howden .task-panel {
    background: #f2fbf9;
    border: 1px solid #e3ede9;
    border-radius: 8px;
    padding: 1rem 1.2rem 1.1rem;
    margin: 0 0 1rem;
}
body.theme-howden .task-panel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}
/* Day details and the Task link sit together on the left; baseline-aligned so
   the link reads as part of the heading rather than floating above or below it. */
body.theme-howden .task-panel__title {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
}
body.theme-howden .task-panel__head h2 {
    margin: 0;
    font-size: 1.15rem;
    color: #173f35;
}
/* Styled like every other link on the page, which means specifying almost
   nothing: main.css already gives `a` the --link colour, bold weight, no
   underline, and an underline on hover, and this theme sets --link. Only the
   size is set here, so it sits with the date rather than at body size.

   The first version was uppercase, letter-spaced, dark green and permanently
   underlined, which read as a different kind of control rather than a link. */
body.theme-howden .task-panel__tasklink {
    font-size: .875rem;
}
body.theme-howden .task-panel__head h2 span {
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-weight: 400;
    font-size: .82rem;
    color: #4a5f58;
    letter-spacing: 0;
}
/* One row, always. This was `grid-template-columns: repeat(auto-fit,
   minmax(9.5rem, 1fr))`, which wrapped: a day with 8 facts needs 8 x 9.5rem
   plus gaps -- about 1330px -- and the container is nearer 1100px, so it broke
   into 5 + 3 and the panel became two rows deep.

   Flex with `nowrap` and `flex: 1 1 0` lets the columns shrink to whatever is
   available instead of forcing a minimum and wrapping. `min-width: 0` is
   load-bearing: a flex item's default `min-width: auto` refuses to shrink below
   its content, which silently reinstates the overflow this is meant to remove.
   The type sizes below came down slightly at the same time so 8 facts fit
   without ellipsis at normal desktop widths. */
body.theme-howden .facts {
    display: flex;
    flex-wrap: nowrap;
    gap: .85rem 1rem;
    margin: 0;
}
body.theme-howden .fact {
    flex: 1 1 0;
    min-width: 0;
}
body.theme-howden .fact dt {
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7d918a;
    font-weight: 700;
    margin-bottom: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.theme-howden .fact dd {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    color: #173f35;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.theme-howden .fact dd small {
    font-weight: 400;
    font-size: .72rem;
    color: #4a5f58;
}
/* Wrap below this width instead of ellipsising. Measured, not guessed: with 8
   facts the labels start clipping at about an 870px container and are clean from
   roughly 1020px, so the cutover sits just above that -- a 1050px viewport is a
   ~970px container. Deliberately NOT the 700px breakpoint used elsewhere in this
   file, which would leave 700-1050px showing a single row of truncated labels,
   i.e. one line at the cost of not being readable. */
@media (max-width: 1050px) {
    body.theme-howden .facts {
        flex-wrap: wrap;
    }
    body.theme-howden .fact {
        flex: 1 1 8rem;
    }
}
body.theme-howden .task-panel__note {
    margin: .9rem 0 0;
    font-size: .82rem;
    color: #8d741e;
}

/* ---------------------------------------------------------------------------
   Position-by-day track on the standings table. A total says who is winning;
   this says who is climbing. Built in competitions/position_track.py, which
   shares one y scale across the whole class so two sparklines side by side can
   be read against each other.
   --------------------------------------------------------------------------- */
body.theme-howden .track {
    width: 74px;
    height: 20px;
    display: block;
    overflow: visible;
}
body.theme-howden .track polyline {
    fill: none;
    stroke: #173f35;
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}
/* The endpoint is the latest day, which is the one being asked about. */
body.theme-howden .track circle { fill: #998542; }

body.theme-howden .sponsor-footer {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    background: #96e6dc;
    color: #173f35;
    padding: 1.7rem 2rem;
    margin-top: 2.5rem;
}
body.theme-howden .sponsor-footer__logo { height: 34px; width: auto; }
body.theme-howden .sponsor-footer__note {
    margin-left: auto;
    font-size: .78rem;
    opacity: .85;
}

@media (max-width: 700px) {
    body.theme-howden .sponsor-band { flex-wrap: wrap; gap: .5rem; padding: .55rem 1rem; }
    body.theme-howden .sponsor-band__label { white-space: normal; font-size: .62rem; }
    body.theme-howden .sponsor-band__rule { display: none; }
    body.theme-howden .sponsor-footer { padding: 1.2rem 1rem; }
    body.theme-howden .sponsor-footer__note { margin-left: 0; }
}