/*
Theme Name: FC Barreirense
Description: The FC Barreirense club site on Blank theme: news by sport, the match center and full schedule, sponsors and the club's red brand on a dark club shell. Fixtures and Sponsors come from the ACF import in acf-import/.
Version: 2.1
Template: blank-theme
Author: David Costa Mano
Author URI: https://dcm-works.com
Text Domain: blank-theme-child
Domain Path: /languages
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =============================================================================
   The club's look, loaded after the parent's includes/css/theme.css.
   =============================================================================
   A dark club shell - header, hero, title bands, sponsor wall, footer and
   the photo cards - that stays dark in both color modes, one accent color
   (the club red) and bold, italic, uppercase type. The content areas follow
   the color mode (the OS preference or the light/dark switch).

   1. Tokens: the club red, the shell, the content neutrals in every mode
   2. Base and buttons
   3. Crest and brand lockup
   4. Header
   5. Front page: hero, sections, membership banner
   6. Title band and page titles
   7. Fixture cards and the countdown
   8. News: photo cards, filter strip, article
   9. Sponsor wall
   10. Footer
   11. Single fixture and 404

   Site components follow the parent's rules: no gap, grids as row >
   .custom-column > .inner-column > content, spacing on 4px steps, colors
   from the tokens, classic properties only (see AGENTS.md).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. TOKENS - the club red is the brand in every mode, so buttons, focus
   rings, active menu items and the pagination turn red. The brand and the
   neutrals are declared like the parent's: the :root values plus three
   override blocks (body.dark, the prefers-color-scheme query, body.light),
   because var() inside a custom property resolves where it is declared. The shell tokens never flip.
   -------------------------------------------------------------------------- */

:root {
    /* The system face, like the club's printed material */
    --headings-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --body-font:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;

    /* The club red and its deep shade (banner gradient) */
    --club:       #DA291C;   --club-rgb: 218, 41, 28;
    --brand-deep: #8F130B;

    /* The ink drawn on the red, and the shade under photos and shadows */
    --on-brand:     #FFFFFF;   --on-brand-rgb: 255, 255, 255;
    --shade-rgb:    0, 0, 0;

    /* The dark club shell: header, hero, title bands, sponsors, footer and
       the photo cards, the same in both modes */
    --shell:        #0B0D10;   --shell-rgb:     11, 13, 16;
    --shell-raised: #232830;
    --shell-deep:   #0E1014;
    --shell-ink:    #FFFFFF;   --shell-ink-rgb: 255, 255, 255;
    --shell-soft:   #C9CED5;
    --shell-muted:  #99A0AA;
    --shell-line:   rgba(255, 255, 255, .1);

    /* Shape */
    --radius:    6px;
    --radius-lg: 10px;

    /* Content neutrals - light mode */
    --white:  #FFFFFF;   --white-rgb:  255, 255, 255;
    --light:  #F2F4F7;   --light-rgb:  242, 244, 247;
    --silver: #E4E7EC;   --silver-rgb: 228, 231, 236;
    --gray:   #66707E;   --gray-rgb:   102, 112, 126;
    --dark:   #39404B;   --dark-rgb:   57, 64, 75;
    --black:  #15181D;   --black-rgb:  21, 24, 29;

    --brand:     var(--club);
    --brand-rgb: var(--club-rgb);
    --border:    rgba(16, 24, 40, .12);
    --field:     #FFFFFF;
    --logo-plate: transparent;
}

@media (prefers-color-scheme: dark) {
    :root {
        --white:  #101216;   --white-rgb:  16, 18, 22;
        --light:  #181B21;   --light-rgb:  24, 27, 33;
        --silver: #262B33;   --silver-rgb: 38, 43, 51;
        --gray:   #99A0AA;   --gray-rgb:   153, 160, 170;
        --dark:   #D8DCE1;   --dark-rgb:   216, 220, 225;
        --black:  #F5F6F7;   --black-rgb:  245, 246, 247;

        --brand:     var(--club);
        --brand-rgb: var(--club-rgb);
        --border:    rgba(255, 255, 255, .08);
        --field:     #181B21;
        --logo-plate: transparent;
    }
}

body.dark {
    --white:  #101216;   --white-rgb:  16, 18, 22;
    --light:  #181B21;   --light-rgb:  24, 27, 33;
    --silver: #262B33;   --silver-rgb: 38, 43, 51;
    --gray:   #99A0AA;   --gray-rgb:   153, 160, 170;
    --dark:   #D8DCE1;   --dark-rgb:   216, 220, 225;
    --black:  #F5F6F7;   --black-rgb:  245, 246, 247;

    --brand:     var(--club);
    --brand-rgb: var(--club-rgb);
    --border:    rgba(255, 255, 255, .08);
    --field:     #181B21;
    --logo-plate: transparent;
}

body.light {
    --white:  #FFFFFF;   --white-rgb:  255, 255, 255;
    --light:  #F2F4F7;   --light-rgb:  242, 244, 247;
    --silver: #E4E7EC;   --silver-rgb: 228, 231, 236;
    --gray:   #66707E;   --gray-rgb:   102, 112, 126;
    --dark:   #39404B;   --dark-rgb:   57, 64, 75;
    --black:  #15181D;   --black-rgb:  21, 24, 29;

    --brand:     var(--club);
    --brand-rgb: var(--club-rgb);
    --border:    rgba(16, 24, 40, .12);
    --field:     #FFFFFF;
    --logo-plate: transparent;
}

/* -----------------------------------------------------------------------------
   2. BASE AND BUTTONS - the page sits on --white; buttons are solid club
   red with uppercase labels, darkened on hover
   -------------------------------------------------------------------------- */

body {
    background: var(--white);
}

/* The club sections carry their own spacing, so the templates that use
   them start right under the header */
.content.club-content {
    padding-top: 0;
    padding-bottom: 0;
}

button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    padding: 12px 20px;
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--on-brand);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .08em;
    text-transform: uppercase;
}

button:not([disabled]):hover,
.button:not([disabled]):hover,
input[type="submit"]:not([disabled]):hover,
input[type="button"]:not([disabled]):hover,
input[type="reset"]:not([disabled]):hover {
    background-image: linear-gradient(rgba(var(--shade-rgb), .22), rgba(var(--shade-rgb), .22));
}

/* Quiet outline button on the content areas (secondary actions) */
button.button-alt,
.button.button-alt {
    border-color: var(--border);
    background: transparent;
    color: var(--dark);
}

button.button-alt:not([disabled]):hover,
.button.button-alt:not([disabled]):hover {
    border-color: var(--gray);
    background-image: linear-gradient(rgba(var(--black-rgb), .05), rgba(var(--black-rgb), .05));
}

/* Outline button on the dark shell (the hero) */
.button.button-ghost {
    border-color: rgba(var(--shell-ink-rgb), .5);
    background: transparent;
    color: var(--shell-ink);
}

.button.button-ghost:not([disabled]):hover {
    border-color: var(--shell-ink);
    background-image: linear-gradient(rgba(var(--shell-ink-rgb), .12), rgba(var(--shell-ink-rgb), .12));
}

/* White button on the red membership banner */
.button.button-light {
    border-color: var(--on-brand);
    background: var(--on-brand);
    color: var(--brand);
}

.button.button-light:not([disabled]):hover {
    background-image: linear-gradient(rgba(var(--brand-rgb), .12), rgba(var(--brand-rgb), .12));
}

.wp-block-button__link {
    color: var(--on-brand);
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* The pagination's current page keeps white ink in both modes */
.nav-links .page-numbers,
.pagination .page-numbers {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.nav-links a.page-numbers:hover,
.pagination a.page-numbers:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.nav-links .page-numbers.current,
.pagination .current {
    color: var(--on-brand);
}

/* -----------------------------------------------------------------------------
   3. CREST AND BRAND - the drawn crest (a red shield with the crest
   letters) or the Site Logo, sized by height wherever it appears, and the
   lockup of badge, name and motto in the header and the footer
   -------------------------------------------------------------------------- */

.club-crest {
    display: block;
    width: auto;
    height: 48px;
}

.club-crest-shield {
    fill: var(--brand);
    stroke: var(--on-brand);
    stroke-width: 3;
}

.club-crest-line {
    fill: none;
    stroke: var(--on-brand);
    stroke-width: 2.5;
}

.club-crest-letters {
    fill: var(--on-brand);
    font-family: var(--headings-font);
    font-size: 16px;
    font-weight: 800;
}

img.club-crest-logo {
    object-fit: contain;
}

.club-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    color: var(--shell-ink);
    text-decoration: none;
}

.club-brand .club-brand-crest {
    flex: 0 0 auto;
    height: 40px;
    margin-inline-end: 12px;
}

@media (min-width: 768px) {
    .club-brand .club-brand-crest {
        height: 48px;
    }
}

.club-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
}

/* The club name stays on one line: it ends in an ellipsis on the narrowest
   phones instead of breaking */
.club-brand-name {
    overflow: hidden;
    font-family: var(--headings-font);
    font-size: .9375rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .club-brand-name {
        font-size: 1.125rem;
    }
}

.club-brand-motto {
    overflow: hidden;
    color: var(--shell-muted);
    font-size: .625rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* -----------------------------------------------------------------------------
   4. HEADER - the dark club bar with a red edge: the lockup, the uppercase
   menu and the membership button. They share the navigation column:
   stacked in the phone menu, one row from 768px.
   -------------------------------------------------------------------------- */

.header {
    position: relative;
    z-index: 50;
    border-bottom: 2px solid var(--brand);
    background: var(--shell);
    color: var(--shell-ink);
    box-shadow: 0 2px 12px rgba(var(--shade-rgb), .4);
}

.header nav a {
    color: var(--shell-ink);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* The page the visitor is on, and the link under the pointer, are
   underlined in the club red */
.header nav .current-menu-item > a,
.header nav .current_page_item > a,
.header nav .current-menu-ancestor > a,
.header nav .current_page_ancestor > a,
.header li a:hover {
    color: var(--shell-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--brand);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

/* Dropdown sub-menus sit on the dark shell with a red top edge */
@media (min-width: 768px) {
    .header li > ul {
        border: 1px solid var(--shell-line);
        border-top: 2px solid var(--brand);
        border-radius: 0 0 var(--radius) var(--radius);
    }

    .header li > ul::before {
        background: var(--shell);
    }

    .header li > ul > li > a {
        position: relative;
        z-index: 1;
    }
}

.header-navigation .header-cta {
    margin-bottom: 16px;
}

@media (min-width: 768px) {
    .header-navigation {
        display: flex;
        align-items: center;
    }

    .header-navigation nav {
        margin-inline-end: 24px;
    }

    .header-navigation .header-cta {
        margin-bottom: 0;
        white-space: nowrap;
    }
}

/* The phone menu button: a quiet outline on the shell */
.header .header-menu-button {
    padding: 8px 12px;
    border: 1px solid var(--shell-line);
    border-radius: var(--radius);
    background: transparent;
    color: var(--shell-ink);
    font-size: .75rem;
}

.header .header-menu-button:not([disabled]):hover {
    background-image: none;
    border-color: rgba(var(--shell-ink-rgb), .5);
}

/* -----------------------------------------------------------------------------
   5. FRONT PAGE - the hero is one full-width "photo": the front page's
   featured image, or a dark club-red gradient without one, cut by a red
   diagonal slash with the crest pinned on it and a shade at the bottom
   under the slanted headline. The sections under it alternate white and
   the --light band.
   -------------------------------------------------------------------------- */

.club-hero {
    position: relative;
    overflow: hidden;
    background: var(--shell);
    color: var(--shell-ink);
}

.club-hero-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(90% 120% at 85% 10%, rgba(var(--club-rgb), .55) 0%, rgba(var(--club-rgb), 0) 55%),
        radial-gradient(60% 80% at 20% 100%, rgba(var(--shell-ink-rgb), .07) 0%, rgba(var(--shell-ink-rgb), 0) 60%),
        linear-gradient(160deg, var(--shell-raised) 0%, var(--shell) 70%);
}

.club-hero-photo img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    opacity: .6;
}

/* The diagonal slash across the hero - the club's graphic language */
.club-hero-photo::after {
    content: "";
    position: absolute;
    top: -20%;
    right: 18%;
    width: 2.5%;
    height: 140%;
    background: rgba(var(--club-rgb), .5);
    transform: skewX(-16deg);
}

/* The shade at the bottom keeps the headline legible over any photo */
.club-hero::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 65%;
    background: linear-gradient(rgba(var(--shell-rgb), 0), rgba(var(--shell-rgb), .88));
}

/* The crest pinned on the slash (right: 18% plus half the slash's 2.5%),
   from 1024px */
.club-hero-crest {
    display: none;
}

@media (min-width: 1024px) {
    .club-hero-crest {
        display: block;
        position: absolute;
        top: 50%;
        right: 19.25%;
        z-index: 1;
        transform: translate(50%, -50%);
    }

    .club-hero-crest .club-crest {
        height: 240px;
    }
}

@media (min-width: 1280px) {
    .club-hero-crest .club-crest {
        height: 280px;
    }
}

.club-hero .custom-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 440px;
    padding-top: 72px;
    padding-bottom: 56px;
}

@media (min-width: 768px) {
    .club-hero .custom-container {
        min-height: 560px;
    }
}

.club-hero-tag {
    display: inline-block;
    align-self: flex-start;
    margin-top: 0;
    margin-bottom: 16px;
    padding: 4px 12px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* The landing headline: larger than the other page titles, slanted and
   uppercase, clear of the crest on wide screens. It is the page title, or
   the first block of the front page's content (.club-hero-text) when the
   page has content. */
.club-hero .custom-container > h1,
.club-hero-text > :first-child {
    max-width: 720px;
    margin-top: 0;
    margin-bottom: 12px;
    color: var(--shell-ink);
    font-size: 2rem;
    font-weight: 800;
    font-style: italic;
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    text-shadow: 0 2px 24px rgba(var(--shade-rgb), .5);
    overflow-wrap: break-word;
}

@media (min-width: 768px) {
    .club-hero .custom-container > h1,
    .club-hero-text > :first-child {
        font-size: 3rem;
    }
}

@media (min-width: 1024px) {
    .club-hero .custom-container > h1,
    .club-hero-text > :first-child {
        max-width: 600px;
        font-size: 4rem;
    }
}

@media (min-width: 1280px) {
    .club-hero .custom-container > h1,
    .club-hero-text > :first-child {
        max-width: 720px;
    }
}

/* The lead under the headline: the page's excerpt, or the blocks of the
   front page's content after its first */
.club-hero .landing-lead,
.club-hero-text > * {
    max-width: 560px;
    margin-top: 0;
    margin-bottom: 8px;
    color: rgba(var(--shell-ink-rgb), .82);
    font-size: 1rem;
}

.club-hero-text > * a {
    color: var(--shell-ink);
}

.club-hero .landing-actions .button {
    margin-inline-end: 12px;
}

/* A club section: generous vertical space, on white or on the --light band */
.club-section .custom-container {
    padding-top: 40px;
    padding-bottom: 40px;
}

@media (min-width: 768px) {
    .club-section .custom-container {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

.club-section-alt {
    background: var(--light);
}

/* Section titles: slanted uppercase with a skewed red bar in front, the
   link to the full listing in red on the right (under the title on
   phones) */
.landing-section-header {
    align-items: baseline;
}

.landing-section-header h2 {
    display: flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 800;
    font-style: italic;
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .landing-section-header h2 {
        font-size: 1.5rem;
    }
}

.landing-section-header h2::before {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 1.4em;
    margin-inline-end: 16px;
    background: var(--brand);
    transform: skewX(-16deg);
}

.section-link {
    display: inline-block;
    margin-top: 8px;
    color: var(--brand);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.section-link::after {
    content: "\2192";
    margin-inline-start: 8px;
}

.section-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (min-width: 768px) {
    .section-link {
        margin-top: 0;
    }
}

/* The members section: a red band from the brand to its deep shade with a
   pale slash on its end edge, its title and line, then three cards - join,
   season seats, update your details - on the band. One card a row on
   phones, three from 1024px. */
.club-banner {
    position: relative;
    overflow: hidden;
    background: linear-gradient(115deg, var(--brand) 0%, var(--brand-deep) 100%);
    color: var(--on-brand);
}

.club-banner::after {
    content: "";
    position: absolute;
    top: -30%;
    right: -6%;
    width: 26%;
    height: 160%;
    background: rgba(var(--on-brand-rgb), .08);
    transform: skewX(-16deg);
}

.club-banner .custom-container {
    position: relative;
    z-index: 1;
    padding-top: 40px;
    padding-bottom: 40px;
}

@media (min-width: 768px) {
    .club-banner .custom-container {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

.club-banner-head {
    margin-bottom: 24px;
}

.club-banner h2 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--on-brand);
    font-size: 1.75rem;
    font-weight: 800;
    font-style: italic;
    line-height: 1.15;
    text-transform: uppercase;
}

@media (min-width: 768px) {
    .club-banner h2 {
        font-size: 2rem;
    }
}

.club-banner p {
    max-width: 560px;
    margin: 0;
    color: rgba(var(--on-brand-rgb), .88);
}

/* The cards: a pale glass on the red, the grid's own row > column > inner
   column, every card the height of the tallest in its row with its
   buttons at the bottom */
.club-member-grid {
    margin: -8px;
}

@media (min-width: 768px) {
    .club-member-grid > .custom-column {
        flex: 0 0 100%;
        width: 100%;
    }
}

@media (min-width: 1024px) {
    .club-member-grid > .custom-column {
        flex: 0 0 33.333%;
        width: 33.333%;
    }
}

.card-grid > .custom-column > .inner-column > .club-member-card {
    display: flex;
    flex-direction: column;
    border-color: rgba(var(--on-brand-rgb), .24);
    background: rgba(var(--shade-rgb), .16);
    box-shadow: none;
    color: var(--on-brand);
}

.club-member-kicker {
    margin-bottom: 8px;
    color: rgba(var(--on-brand-rgb), .72);
    font-size: .6875rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.club-member-card h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--on-brand);
    font-size: 1.25rem;
    font-weight: 800;
    font-style: italic;
    line-height: 1.2;
    text-transform: uppercase;
}

.club-banner .club-member-card p {
    max-width: none;
}

/* The buttons sit at the bottom of the card and wrap onto new lines */
.club-member-actions {
    display: flex;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 16px;
}

.club-member-actions .button {
    margin-top: 8px;
    margin-inline-end: 8px;
}

/* The outline buttons on the red: white ink and edge */
.club-banner .button.button-ghost {
    border-color: rgba(var(--on-brand-rgb), .6);
    color: var(--on-brand);
}

.club-banner .button.button-ghost:not([disabled]):hover {
    border-color: var(--on-brand);
    background-image: linear-gradient(rgba(var(--on-brand-rgb), .14), rgba(var(--on-brand-rgb), .14));
}

/* -----------------------------------------------------------------------------
   6. TITLE BAND AND PAGE TITLES - every page title is slanted and
   uppercase at the parent's one size; archives, pages and fixtures open
   with a compact dark band holding the title (with the skewed red bar) and
   the lead line
   -------------------------------------------------------------------------- */

.custom-container > h1,
.post-hero h1 {
    font-weight: 800;
    font-style: italic;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.page-head {
    border-bottom: 1px solid var(--shell-line);
    background: var(--shell);
    color: var(--shell-ink);
}

.page-head .custom-container {
    padding-top: 40px;
    padding-bottom: 40px;
}

.page-head .custom-container > h1 {
    display: flex;
    align-items: center;
    margin: 0;
}

.page-head .custom-container > h1::before {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 1.2em;
    margin-inline-end: 16px;
    background: var(--brand);
    transform: skewX(-16deg);
}

.page-lead {
    max-width: 640px;
    margin-top: 0;
    margin-bottom: 24px;
    color: var(--gray);
    font-size: 1.125rem;
    line-height: 1.6;
}

.page-head .page-lead {
    margin-top: 12px;
    margin-bottom: 0;
    color: var(--shell-muted);
    font-size: 1rem;
}

/* The back link: a small uppercase label above the title */
.post-back {
    margin-bottom: 12px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.page-head .post-back {
    color: var(--shell-muted);
}

.page-head .post-back:hover {
    color: var(--shell-ink);
}

/* -----------------------------------------------------------------------------
   7. FIXTURE CARDS - a card of the parent's grid on the --light surface:
   the uppercase meta rows, the two teams with their scores, the countdown
   on the next match (which carries a red top edge) and the link at the
   bottom
   -------------------------------------------------------------------------- */

/* A lone fixture keeps its column width */
@media (min-width: 768px) {
    .fixture-grid > .custom-column {
        flex-grow: 0;
    }
}

/* The schedule's "Resultados" (the grid and its page links) keeps its
   distance from the "Próximos jogos" title under it */
.schedule-block {
    margin-bottom: 40px;
}

@media (min-width: 768px) {
    .schedule-block {
        margin-bottom: 56px;
    }
}

.card-grid > .custom-column > .inner-column > .fixture-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: var(--light);
    box-shadow: none;
}

.club-section-alt .card-grid > .custom-column > .inner-column > .fixture-card {
    background: var(--white);
}

.card-grid > .custom-column > .inner-column > .fixture-card.is-featured {
    border-top: 4px solid var(--brand);
}

.fixture-meta {
    margin-top: 0;
    margin-bottom: 24px;
    color: var(--gray);
    font-size: .6875rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.fixture-meta-row {
    display: block;
}

.fixture-meta-row + .fixture-meta-row {
    margin-top: 8px;
}

.fixture-sport {
    color: var(--brand);
}

.fixture-season {
    font-weight: 700;
    opacity: .7;
}

.fixture-sport + .fixture-season::before,
.fixture-season + .fixture-season::before,
.fixture-when-part + .fixture-when-part::before {
    content: "\00b7";
    margin-inline-start: 8px;
    margin-inline-end: 8px;
}

/* The team, competition and other tags as small square outlined chips */
.fixture-tags {
    display: flex;
    flex-wrap: wrap;
}

.fixture-tag {
    margin-top: 4px;
    margin-inline-end: 8px;
    padding: 4px 8px;
    border: 1px solid rgba(var(--gray-rgb), .35);
    color: var(--dark);
    font-size: .625rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .08em;
}

/* Live: the kickoff row turns red with a blinking dot */
.fixture-live {
    color: var(--brand);
}

.fixture-when-part + .fixture-live {
    margin-inline-start: 8px;
}

.fixture-live::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-inline-end: 8px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 0;
    animation: club-live-blink 1.2s ease-in-out infinite;
}

@keyframes club-live-blink {
    50% {
        opacity: .2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fixture-live::before {
        animation: none;
    }
}

.fixture-teams {
    flex: 1 1 auto;
}

.fixture-team {
    display: flex;
    align-items: center;
}

.fixture-team + .fixture-team {
    margin-top: 12px;
}

.fixture-team .fixture-badge {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-inline-end: 12px;
}

.fixture-badge-opponent {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--silver);
    color: var(--dark);
    font-size: .6875rem;
    font-weight: 800;
}

.fixture-team-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: .9375rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fixture-score {
    flex: 0 0 auto;
    margin-inline-start: 12px;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.fixture-teams .is-winner .fixture-score {
    color: var(--brand);
}

/* Countdown to kickoff: compact cells spaced by sibling margins */
.countdown {
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;
}

.countdown-cell {
    flex: 0 0 auto;
    min-width: 56px;
    padding: 8px;
    border-radius: var(--radius);
    background: var(--silver);
    text-align: center;
}

.countdown-cell + .countdown-cell {
    margin-inline-start: 8px;
}

.countdown-value {
    display: block;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.countdown-unit {
    display: block;
    color: var(--gray);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.countdown-started {
    margin: 0;
    color: var(--brand);
    font-weight: 800;
    text-transform: uppercase;
}

/* The link sits at the bottom, so the links of a row line up; the button
   of the next match takes the card's width */
.fixture-action {
    margin-top: auto;
    padding-top: 16px;
}

.fixture-action .button {
    display: block;
    text-align: center;
}

.fixture-link {
    color: var(--brand);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.fixture-link::after {
    content: "\2192";
    margin-inline-start: 8px;
}

.fixture-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* -----------------------------------------------------------------------------
   8. NEWS - photo cards with the headline over the featured image (or the
   crest as a watermark on the dark gradient), part of the shell in both
   modes; the filter strip of the news archives; the article
   -------------------------------------------------------------------------- */

.card-grid > .custom-column > .inner-column > .news-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 260px;
    overflow: hidden;
    padding: 0;
    border: 1px solid var(--shell-line);
    background:
        radial-gradient(80% 100% at 80% 0%, rgba(var(--club-rgb), .35) 0%, rgba(var(--club-rgb), 0) 60%),
        linear-gradient(160deg, var(--shell-raised) 0%, var(--shell-deep) 85%);
    color: var(--shell-ink);
    text-decoration: none;
    box-shadow: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.card-grid > .custom-column > .inner-column > .news-card:hover {
    border-color: rgba(var(--club-rgb), .5);
    box-shadow: 0 12px 32px rgba(var(--shade-rgb), .35);
    transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
    .card-grid > .custom-column > .inner-column > .news-card:hover {
        transform: none;
    }
}

.news-card-media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* The crest watermark of a card without a photo: the drawn crest faint, an
   uploaded logo softened just enough that the headline owns the card */
.news-card .news-card-crest {
    position: absolute;
    top: 16px;
    left: 16px;
    height: 112px;
    opacity: .16;
}

.news-card img.news-card-crest {
    opacity: .45;
}

/* The shade under the headline */
.news-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(rgba(var(--shell-rgb), 0), rgba(var(--shell-rgb), .9));
}

.news-card-body {
    position: relative;
    z-index: 1;
    display: block;
    padding: 16px 20px;
}

.news-tag {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 12px;
    background: var(--brand);
    color: var(--on-brand);
    font-size: .625rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.news-card .news-card-title {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--shell-ink);
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.news-date {
    display: block;
    color: rgba(var(--shell-ink-rgb), .6);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* The featured news: a full-width card above the grid, taller, with a
   bigger headline and the excerpt */
.featured-grid {
    margin-bottom: 8px;
}

.post-grid.featured-grid > .custom-column {
    flex: 0 0 100%;
    width: 100%;
}

.card-grid > .custom-column > .inner-column > .news-card.news-card-featured {
    min-height: 340px;
}

.news-card-featured .news-card-crest {
    height: 160px;
}

.news-card-featured .news-card-body {
    padding: 24px;
}

.news-card.news-card-featured .news-card-title {
    font-size: 1.5rem;
    line-height: 1.15;
}

.news-card-excerpt {
    display: block;
    max-width: 60ch;
    margin-bottom: 12px;
    color: rgba(var(--shell-ink-rgb), .8);
    font-size: .9375rem;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .card-grid > .custom-column > .inner-column > .news-card.news-card-featured {
        min-height: 420px;
    }

    .news-card-featured .news-card-body {
        padding: 32px 40px;
    }

    .news-card.news-card-featured .news-card-title {
        font-size: 2.25rem;
    }
}

/* The filter strip: square uppercase chips, the current one filled red;
   the tag row smaller and quieter */
.term-nav {
    margin-bottom: 24px;
}

.term-nav-row {
    display: flex;
    flex-wrap: wrap;
}

.term-chip {
    display: inline-block;
    margin-inline-end: 8px;
    margin-bottom: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(var(--brand-rgb), .4);
    color: var(--black);
    font-size: .6875rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.term-nav-tags .term-chip {
    padding: 8px 12px;
    border-color: var(--border);
    color: var(--gray);
    font-size: .625rem;
}

.term-chip:hover,
.term-chip.is-active,
.term-nav-tags .term-chip:hover,
.term-nav-tags .term-chip.is-active {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--on-brand);
}

/* The article: the back link, the sport tag and date, the slanted title
   and the lead photo, cropped to a wide frame on the dark gradient */
.custom-container.club-article {
    padding-top: 40px;
}

.post-hero .post-back {
    color: var(--gray);
}

.post-hero .post-back:hover {
    color: var(--black);
}

.post-hero .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}

.post-meta .news-tag {
    margin-bottom: 0;
    margin-inline-end: 12px;
}

.post-meta .news-date {
    color: var(--gray);
}

.post-hero h1 {
    max-width: 820px;
    margin-bottom: 0;
}

.post-featured-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--shell-line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(80% 100% at 80% 0%, rgba(var(--club-rgb), .4) 0%, rgba(var(--club-rgb), 0) 60%),
        linear-gradient(160deg, var(--shell-raised) 0%, var(--shell-deep) 85%);
}

@media (min-width: 768px) {
    .post-featured-image {
        aspect-ratio: 21 / 9;
    }
}

.post-featured-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    object-fit: cover;
}

/* Article and page text: quiet uppercase subheads, red links and a red
   quote bar */
.post-single .post-content > p,
.post-single .post-content > ul,
.post-single .post-content > ol {
    color: var(--dark);
    font-size: 1rem;
    line-height: 1.7;
}

.post-single .post-content > p a,
.post-single .post-content > ul > li a,
.post-single .post-content > ol > li a {
    color: var(--brand);
    text-decoration-color: rgba(var(--brand-rgb), .4);
}

.post-single .post-content > p a:hover,
.post-single .post-content > ul > li a:hover,
.post-single .post-content > ol > li a:hover {
    text-decoration-color: var(--brand);
}

.post-single .post-content > h2,
.post-single .post-content > h3,
.post-single .post-content > h4 {
    margin-top: 32px;
    margin-bottom: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.post-single .post-content > h2 {
    font-size: 1.125rem;
}

.post-single .post-content > h3 {
    font-size: 1rem;
}

.post-single .post-content > h4 {
    font-size: .875rem;
}

.post-content > blockquote {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-inline-start: 20px;
    border-inline-start-color: var(--brand);
    color: var(--black);
    font-size: 1.125rem;
    font-weight: 700;
    font-style: italic;
}

.post-content > blockquote cite {
    display: block;
    margin-top: 8px;
    color: var(--gray);
    font-size: .75rem;
    font-style: normal;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* On a page the lead photo sits between the title band and the content */
.custom-container > .post-featured-image {
    margin: 0 0 32px;
}

/* -----------------------------------------------------------------------------
   9. SPONSOR WALL - the dark band of sponsor tiles: two to a row on phones,
   four from 768px, a partial last row starting at the start edge
   -------------------------------------------------------------------------- */

.club-sponsors {
    background: var(--shell);
    color: var(--shell-ink);
}

.club-sponsors .custom-container {
    padding-top: 48px;
    padding-bottom: 48px;
}

.club-sponsors-title {
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--shell-muted);
    font-size: .6875rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.sponsor-grid {
    margin: -8px;
}

.sponsor-grid > .custom-column {
    display: flex;
    flex: 0 0 50%;
    width: 50%;
}

@media (min-width: 768px) {
    .sponsor-grid > .custom-column {
        flex-basis: 25%;
        width: 25%;
    }
}

.sponsor-grid > .custom-column > .inner-column {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px;
}

.sponsor-grid .sponsor-tile {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 72px;
    padding: 12px 16px;
    border: 1px solid var(--shell-line);
    border-radius: var(--radius);
    background: transparent;
    color: var(--shell-muted);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}

a.sponsor-tile:hover {
    border-color: rgba(var(--shell-ink-rgb), .3);
    color: var(--shell-ink);
}

.sponsor-tile img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 40px;
}

.sponsor-name {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

/* -----------------------------------------------------------------------------
   10. FOOTER - the dark shell with a red edge: the about column, the Club
   links and the newsletter on one row from 768px, and the bottom bar with
   the copyright line and the legal links. The parent's footer rules place
   a single row's two columns; the club footer's rows set their own order
   and spacing.
   -------------------------------------------------------------------------- */

.club-footer {
    border-top: 2px solid var(--brand);
    background: var(--shell);
    color: var(--shell-ink);
}

.club-footer .custom-container {
    padding-top: 48px;
    padding-bottom: 16px;
}

.club-footer .footer-main,
.club-footer .footer-bottom {
    align-items: flex-start;
    margin-left: -8px;
    margin-right: -8px;
}

.club-footer.footer .footer-main > .custom-column,
.club-footer.footer .footer-bottom > .custom-column {
    order: 0;
    margin-bottom: 0;
}

.club-footer .footer-main > .custom-column > .inner-column {
    padding: 8px 8px 32px;
}

.club-footer .footer-bottom {
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid var(--shell-line);
}

.club-footer .footer-bottom > .custom-column > .inner-column {
    padding: 8px;
}

@media (min-width: 768px) {
    .club-footer .footer-main > .footer-about {
        flex: 0 0 50%;
        width: 50%;
    }

    .club-footer .footer-main > .footer-links,
    .club-footer .footer-main > .footer-newsletter {
        flex: 0 0 25%;
        width: 25%;
    }
}

.club-footer p {
    color: var(--shell-muted);
    font-size: .875rem;
}

.footer-title {
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--shell-ink);
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.club-footer .footer-contact {
    margin-top: 16px;
}

.club-footer a:not(.button):not(.social-link):not(.club-brand) {
    color: var(--shell-soft);
    font-size: .875rem;
}

.club-footer a:not(.button):not(.social-link):not(.club-brand):hover {
    color: var(--shell-ink);
    text-decoration: underline;
    text-decoration-color: var(--brand);
    text-underline-offset: 4px;
}

.footer-separator {
    margin-inline-start: 8px;
    margin-inline-end: 8px;
}

.club-footer .social-links {
    margin-top: 16px;
}

.club-footer .social-links li {
    flex: 0 0 auto;
    margin: 0;
    margin-inline-end: 8px;
    margin-bottom: 8px;
}

.social-link {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid var(--shell-line);
    border-radius: var(--radius);
    color: var(--shell-soft);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.social-link:hover {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--on-brand);
}

/* The Club links stack in a column at every width */
.club-footer .footer-links li {
    flex: 0 0 100%;
    margin: 0;
    margin-bottom: 12px;
}

.footer-widget + .footer-widget {
    margin-top: 16px;
}

.footer-widget p {
    margin-bottom: 12px;
}

/* Newsletter fields on the dark footer (plugin forms included) */
.club-footer input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]) {
    border-color: rgba(var(--shell-ink-rgb), .2);
    background: rgba(var(--shell-ink-rgb), .06);
    color: var(--shell-ink);
}

.club-footer input::placeholder {
    color: rgba(var(--shell-ink-rgb), .4);
}

.club-footer .footer-bottom p,
.club-footer .footer-bottom a:not(.button):not(.social-link):not(.club-brand) {
    color: var(--shell-muted);
    font-size: .75rem;
}

@media (min-width: 768px) {
    .club-footer .footer-bottom > .custom-column:last-child:not(:first-child) {
        text-align: end;
    }
}

/* -----------------------------------------------------------------------------
   11. SINGLE FIXTURE AND 404
   -------------------------------------------------------------------------- */

.fixture-single-grid {
    margin-bottom: 24px;
}

.card-grid.fixture-single-grid > .custom-column {
    flex: 0 0 100%;
    width: 100%;
    max-width: 496px;
}

.club-not-found {
    text-align: center;
}

.club-not-found .custom-container {
    padding-top: 64px;
    padding-bottom: 64px;
}

@media (min-width: 768px) {
    .club-not-found .custom-container {
        padding-top: 96px;
        padding-bottom: 96px;
    }
}

.club-error-code {
    margin: 0;
    color: var(--brand);
    font-size: 6rem;
    font-weight: 800;
    font-style: italic;
    line-height: 1;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .club-error-code {
        font-size: 9rem;
    }
}

.club-not-found .page-lead {
    margin-left: auto;
    margin-right: auto;
}

.club-not-found .landing-actions {
    justify-content: center;
}

.club-not-found .landing-actions .button {
    margin-inline-start: 4px;
    margin-inline-end: 4px;
}