/* ============================================================================
   Red Devils — Design System
   Loaded site-wide by reddevils-design-system.php.

   The visual language is lifted from the Game Schedule block (.gsb-*) and
   re-applied to standard WordPress and Genesis components so that every page
   of the site reads as one thing.

   Scope: everything is anchored on .site-inner, the Genesis wrapper that sits
   between the site header and the site footer on every template (page, post,
   archive). Header, nav and footer are deliberately untouched — they are
   hand-written HTML with inline styles.

   This file does not depend on the Game Schedule plugin, and that plugin
   does not depend on this file. The two are kept independent on purpose.

   WooCommerce IS included: the product loop and the shop buttons. Disabled
   button states are styled explicitly — see the note in that section.

   NOTE when editing: never write an angle bracket followed by a letter
   anywhere in this file, comments included. WordPress validates pasted
   Additional CSS with preg_match( '#</?\w+#', $css ) and rejects the whole
   stylesheet with "Markup is not allowed in CSS."

   ========================================================================= */


/* ---------------------------------------------------------------------------
   PART A — Design tokens
   The whole visual language of the match cards, in 15 values.
   Change a value here and every card on the site follows.
   ------------------------------------------------------------------------ */

:root {
    /* Brand */
    --rd-red:          #c8102e;   /* accent: our team, rules, vs label   */
    --rd-ink:          #141414;   /* dark header strip, strong numbers   */

    /* Neutrals */
    --rd-surface:      #fff;      /* card background                     */
    --rd-line:         #e9e9e9;   /* card border                         */
    --rd-muted:        #9aa0a6;   /* small uppercase captions            */
    --rd-muted-soft:   #b6bbc1;   /* de-emphasised numbers               */
    --rd-hairline:     #d5d5d5;   /* separators, dashes                  */

    /* Shape */
    --rd-radius:       12px;
    --rd-radius-pill:  999px;
    --rd-gap:          16px;      /* vertical rhythm between cards       */
    --rd-accent-bar:   3px;       /* red rule under every card header    */

    /* Depth */
    --rd-shadow:       0 1px 4px rgba(0, 0, 0, 0.06);
    --rd-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.10);
    --rd-lift:         translateY(-2px);
    --rd-ease:         0.15s ease;

    /* Type */
    /* These are the block's own values, not new ones. Keeping them
       identical is the whole point — a card here and a match card must
       read at the same size.                                             */
    --rd-head-size:    0.78rem;   /* = .gsb-card-top                     */
    --rd-head-track:   0.04em;    /* = .gsb-date                         */
    --rd-body-size:    0.85rem;   /* = .gsb-team-name                    */
    --rd-pill-size:    0.68rem;   /* = .gsb-phase                        */
    --rd-caption-size: 0.65rem;   /* = .gsb-team-side                    */
}


/* ---------------------------------------------------------------------------
   PART B — Reusable primitives
   Apply these by hand in the block editor:
   select a block → sidebar → Advanced → "Additional CSS class(es)" → rd-card
   ------------------------------------------------------------------------ */

/* The card shell — same recipe as .gsb-card */
.rd-card {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    overflow: hidden;
    box-shadow: var(--rd-shadow);
    transition: transform var(--rd-ease), box-shadow var(--rd-ease);
    margin: 0 0 var(--rd-gap);
}

.rd-card:hover {
    transform: var(--rd-lift);
    box-shadow: var(--rd-shadow-hover);
}

/* Static card: keeps the frame, drops the hover lift (good for text panels) */
.rd-card.rd-static:hover {
    transform: none;
    box-shadow: var(--rd-shadow);
}

/* The dark header strip — same recipe as .gsb-card-top */
.rd-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    margin: 0;
    background: var(--rd-ink);
    color: #fff;
    border-bottom: var(--rd-accent-bar) solid var(--rd-red);
    font-size: var(--rd-head-size);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: var(--rd-head-track);
}

.rd-card-body {
    padding: 20px 16px;
    font-size: var(--rd-body-size);
    line-height: 1.5;
}

/* Small uppercase caption — same recipe as .gsb-team-side */
.rd-caption {
    display: block;
    font-size: var(--rd-caption-size);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-muted);
}

/* Pill — same recipe as .gsb-phase / .gsb-badge */
.rd-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--rd-radius-pill);
    background: rgba(0, 0, 0, 0.06);
    font-size: var(--rd-pill-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.rd-pill-on-dark { background: rgba(255, 255, 255, 0.14); color: #fff; }
.rd-pill-win     { background: #e3f2e8; color: #1e7a3c; }
.rd-pill-loss    { background: #fdeaea; color: #c5221f; }
.rd-pill-red     { background: var(--rd-red); color: #fff; }

/* Push an element to the right end of a .rd-card-head (like .gsb-phase) */
.rd-push-right { margin-left: auto; }

/* Accent text */
.rd-accent { color: var(--rd-red); font-weight: 800; }


/* ---------------------------------------------------------------------------
   PART C — Automatic mapping onto the blocks already used on the site
   No editor changes needed: these rules re-skin existing content.
   ------------------------------------------------------------------------ */

/* --- Genesis Blocks "Notice" → match card ------------------------------- */
/* Used on /organisation/ for Comité, Direction Technique, etc.
   The block writes inline styles, so background/border need !important.    */

.gb-block-notice {
    background: var(--rd-surface) !important;
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    overflow: hidden;
    box-shadow: var(--rd-shadow);
    transition: transform var(--rd-ease), box-shadow var(--rd-ease);
    margin: 0 0 var(--rd-gap);
}

.gb-block-notice:hover {
    transform: var(--rd-lift);
    box-shadow: var(--rd-shadow-hover);
}

.gb-block-notice .gb-notice-title {
    background: var(--rd-ink);
    color: #fff !important;
    border-bottom: var(--rd-accent-bar) solid var(--rd-red);
    border-radius: 0;
    padding: 10px 16px;
    font-size: var(--rd-head-size);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: var(--rd-head-track);
}

.gb-block-notice .gb-notice-title p {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    margin: 0;
}

.gb-block-notice .gb-notice-text {
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    padding: 18px 16px;
    font-size: var(--rd-body-size);
    line-height: 1.5;
}

/* The block ships a gb-font-size-NN utility that sets the paragraph size at
   div[class*=wp-block-genesis].gb-font-size-18.gb-block-notice p — (0,3,2).
   This selector is (0,4,1) so it wins on its own merits rather than on
   source order or !important. Without it the card body renders at the
   theme's 18-20px while a match card renders at 0.85rem.                 */
.site-inner .gb-block-notice[class*="gb-font-size"] .gb-notice-text p {
    font-size: var(--rd-body-size);
    line-height: 1.5;
}

/* Names in bold read as the "team name" line; the role below as a caption */
.gb-block-notice .gb-notice-text strong {
    font-weight: 700;
    color: var(--rd-ink);
}

/* --- Section title: the red accent rule (OPT-IN) ------------------------ */
/* Deliberately NOT applied to every h2/h3. Two reasons, both learned the
   hard way on /le-club/:
     1. CSS cannot read text-align. Headings on this site are centred by the
        theme without carrying .has-text-align-center, so an automatic rule
        anchored left sat under the left margin of a centred heading.
     2. Empty headings (h3 elements used as spacers) got a bar with
        nothing above it.
   So it is a class you add where you want it: select the heading in the
   editor, Advanced -> Additional CSS class(es) -> rd-section-title.
   The bar is centred by default, because that is how headings are set on
   this site; the alignment classes below override it.                     */

.site-inner .rd-section-title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: var(--rd-gap);
}

.site-inner .rd-section-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: 56px;
    height: var(--rd-accent-bar);
    background: var(--rd-red);
}

.site-inner .rd-section-title.has-text-align-left::after {
    right: auto;
    margin-inline: 0;
}

.site-inner .rd-section-title.has-text-align-right::after {
    left: auto;
    margin-inline: 0;
}

/* Never draw a bar under an empty heading */
.site-inner .rd-section-title:empty { padding-bottom: 0; }
.site-inner .rd-section-title:empty::after { content: none; }

/* --- Images in columns (sponsor logos) → framed card -------------------- */
/* Note the figure. prefix. A sponsor logo is figure.wp-block-image, but an
   image resized in the editor (the social icons on the home page) is
   div.wp-block-image wrapping its own figure. Matching bare .wp-block-image
   framed those icons in white cards too.                                  */

.site-inner .gb-block-layout-column-inner > figure.wp-block-image,
.site-inner .wp-block-column > figure.wp-block-image {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    overflow: hidden;
    box-shadow: var(--rd-shadow);
    transition: transform var(--rd-ease), box-shadow var(--rd-ease);
    margin: 0 0 var(--rd-gap);
    /* logos of unequal height centre themselves in an equal-height frame */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: calc(100% - var(--rd-gap));
}

.site-inner .gb-block-layout-column-inner > figure.wp-block-image:hover,
.site-inner .wp-block-column > figure.wp-block-image:hover {
    transform: var(--rd-lift);
    box-shadow: var(--rd-shadow-hover);
}

.site-inner .gb-block-layout-column-inner > figure.wp-block-image img,
.site-inner .wp-block-column > figure.wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Caption below a framed image behaves like .gsb-team-side */
.site-inner .gb-block-layout-column-inner > figure.wp-block-image figcaption,
.site-inner .wp-block-column > figure.wp-block-image figcaption {
    margin: 0;
    padding: 8px 12px;
    font-size: var(--rd-caption-size);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-muted);
    text-align: center;
}

/* --- Core Table block → card ------------------------------------------- */

.site-inner .wp-block-table {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    overflow: hidden;
    box-shadow: var(--rd-shadow);
    margin: 0 0 var(--rd-gap);
}

.site-inner .wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
}

.site-inner .wp-block-table thead th {
    background: var(--rd-ink);
    color: #fff;
    border: 0;
    border-bottom: var(--rd-accent-bar) solid var(--rd-red);
    padding: 10px 16px;
    text-align: left;
    font-size: var(--rd-head-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--rd-head-track);
}

.site-inner .wp-block-table td {
    border: 0;
    border-bottom: 1px solid var(--rd-line);
    padding: 12px 16px;
    font-size: 0.9rem;
}

.site-inner .wp-block-table tr:last-child td { border-bottom: 0; }
.site-inner .wp-block-table tbody tr:hover  { background: #fafafa; }

/* Numbers line up like the scores do */
.site-inner .wp-block-table td.rd-num,
.site-inner .wp-block-table th.rd-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* --- Core Button block → brand button ---------------------------------- */

.wp-block-button__link {
    background: var(--rd-red);
    color: #fff;
    border: 0;
    border-radius: var(--rd-radius-pill);
    padding: 10px 24px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: var(--rd-shadow);
    transition: transform var(--rd-ease), box-shadow var(--rd-ease);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
    color: #fff;
    transform: var(--rd-lift);
    box-shadow: var(--rd-shadow-hover);
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--rd-red);
    border: 1px solid var(--rd-red);
    box-shadow: none;
}

/* --- Quote / Separator -------------------------------------------------- */

.site-inner .wp-block-quote {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-left: var(--rd-accent-bar) solid var(--rd-red);
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow);
    padding: 18px 20px;
    margin: 0 0 var(--rd-gap);
}

.site-inner .wp-block-quote cite {
    display: block;
    margin-top: 8px;
    font-size: var(--rd-caption-size);
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-muted);
}

.site-inner .wp-block-separator {
    border: 0;
    height: var(--rd-accent-bar);
    width: 56px;
    background: var(--rd-red);
    margin: 24px 0;
}

.site-inner .wp-block-separator.is-style-wide,
.site-inner .wp-block-separator.alignwide {
    width: 100%;
    height: 1px;
    background: var(--rd-line);
}


/* --- News cards: Genesis post grid (home) ------------------------------- */
/* The homepage news blocks. Each item becomes a match card.               */

.gb-block-post-grid .gb-post-grid-items article,
.gb-block-post-grid article {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    overflow: hidden;
    box-shadow: var(--rd-shadow);
    transition: transform var(--rd-ease), box-shadow var(--rd-ease);
    margin-bottom: var(--rd-gap);
}

.gb-block-post-grid article:hover {
    transform: var(--rd-lift);
    box-shadow: var(--rd-shadow-hover);
}

.gb-block-post-grid .gb-block-post-grid-image { margin: 0; }

.gb-block-post-grid .gb-block-post-grid-image img {
    display: block;
    width: 100%;
    height: auto;
}

.gb-block-post-grid .gb-block-post-grid-text { padding: 18px 16px; }

.gb-block-post-grid .gb-block-post-grid-title {
    /* No font-size here on purpose: the theme's Oswald scale already reads
       as part of the same system. Spacing only.                           */
    line-height: 1.25;
    margin: 0 0 8px;
}

.gb-block-post-grid .gb-block-post-grid-byline {
    font-size: var(--rd-caption-size);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-muted);
}

.gb-block-post-grid .gb-block-post-grid-more-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-red);
}

/* --- News cards: Genesis archive entries (/news/, categories, search) --- */
/* Scoped to listing templates only: on a single post or page the whole
   article also carries .entry, and must NOT become a card.                */

body.blog .site-inner article.entry,
body.archive .site-inner article.entry,
body.search .site-inner article.entry {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    overflow: hidden;
    box-shadow: var(--rd-shadow);
    transition: transform var(--rd-ease), box-shadow var(--rd-ease);
    margin-bottom: var(--rd-gap);
    padding: 0;
}

body.blog .site-inner article.entry:hover,
body.archive .site-inner article.entry:hover,
body.search .site-inner article.entry:hover {
    transform: var(--rd-lift);
    box-shadow: var(--rd-shadow-hover);
}

body.blog .site-inner article.entry .entry-image,
body.archive .site-inner article.entry .entry-image,
body.search .site-inner article.entry .entry-image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

body.blog .site-inner article.entry .entry-container,
body.archive .site-inner article.entry .entry-container,
body.search .site-inner article.entry .entry-container { padding: 18px 16px; }

body.blog .site-inner article.entry .entry-title,
body.archive .site-inner article.entry .entry-title,
body.search .site-inner article.entry .entry-title {
    /* No font-size here on purpose — see the post grid note above.        */
    line-height: 1.25;
    margin: 0 0 8px;
}

body.blog .site-inner article.entry .entry-meta,
body.archive .site-inner article.entry .entry-meta,
body.search .site-inner article.entry .entry-meta {
    font-size: var(--rd-caption-size);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rd-muted);
}

/* --- Shop: WooCommerce product loop ------------------------------------ */
/* Only paint: no width, float or margin, so the shop keeps its layout.    */

.woocommerce ul.products li.product {
    background: var(--rd-surface);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius);
    overflow: hidden;
    box-shadow: var(--rd-shadow);
    transition: transform var(--rd-ease), box-shadow var(--rd-ease);
    padding-bottom: 16px;
    text-align: center;
}

.woocommerce ul.products li.product:hover {
    transform: var(--rd-lift);
    box-shadow: var(--rd-shadow-hover);
}

.woocommerce ul.products li.product img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 12px;
    border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: 0 12px;
    font-weight: 600;
    line-height: 1.25;
}

.woocommerce ul.products li.product .price {
    display: block;
    padding: 0 12px 8px;
    color: var(--rd-ink);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.woocommerce ul.products li.product .onsale {
    background: var(--rd-red);
    border-radius: var(--rd-radius-pill);
    font-size: var(--rd-pill-size);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --- Shop: buttons ------------------------------------------------------ */
/* Same pill as the core Button block.                                     */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background: var(--rd-red);
    color: #fff;
    border-radius: var(--rd-radius-pill);
    padding: 10px 24px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: transform var(--rd-ease), box-shadow var(--rd-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--rd-red);
    color: #fff;
    transform: var(--rd-lift);
    box-shadow: var(--rd-shadow-hover);
}

/* A disabled button must LOOK disabled. WooCommerce disables the add-to-cart
   button on a variable product until a variation is chosen (classes
   .disabled + .wc-variation-selection-needed) and keeps cursor: not-allowed
   on it. Painting it full-strength red without this made a dead button look
   perfectly live.

   The .alt variants are not optional. WooCommerce styles the disabled state
   at .woocommerce button.button.alt.disabled, and since :where() adds no
   specificity that is (0,4,1); a rule without .alt is (0,4,0) here and loses,
   leaving the button WooCommerce purple. Matching .alt ties the specificity,
   and this stylesheet is enqueued after WooCommerce so the tie falls our
   way — the same load-order contract the core Button rules rely on.       */

.woocommerce button.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
.woocommerce a.button.disabled,
.woocommerce input.button.disabled,
.woocommerce input.button:disabled,
.woocommerce button.button.alt.disabled,
.woocommerce button.button.alt:disabled,
.woocommerce button.button.alt[disabled],
.woocommerce a.button.alt.disabled,
.woocommerce input.button.alt.disabled {
    background: var(--rd-muted-soft);
    color: #fff;
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

.woocommerce button.button.disabled:hover,
.woocommerce button.button:disabled:hover,
.woocommerce button.button[disabled]:hover,
.woocommerce a.button.disabled:hover,
.woocommerce input.button.disabled:hover,
.woocommerce input.button:disabled:hover,
.woocommerce button.button.alt.disabled:hover,
.woocommerce button.button.alt:disabled:hover,
.woocommerce button.button.alt[disabled]:hover,
.woocommerce a.button.alt.disabled:hover,
.woocommerce input.button.alt.disabled:hover {
    background: var(--rd-muted-soft);
    transform: none;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   PART D — Optional card grids
   Add the class to the PARENT block (Group / Columns / a Genesis columns
   wrapper) via Advanced → Additional CSS class(es). Its direct children —
   notices, groups, .rd-card, images — then lay out side by side with the
   same 16px gutter the schedule uses.
   ------------------------------------------------------------------------ */

.rd-grid-2 > *,
.rd-grid-3 > * { margin-bottom: 0; }

.rd-grid-2,
.rd-grid-3 {
    display: grid;
    gap: var(--rd-gap);
    margin: 0 0 var(--rd-gap);
}

.rd-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rd-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Equal-height cards inside a grid */
.rd-grid-2 > .gb-block-notice,
.rd-grid-3 > .gb-block-notice,
.rd-grid-2 > .rd-card,
.rd-grid-3 > .rd-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rd-grid-2 > .gb-block-notice .gb-notice-text,
.rd-grid-3 > .gb-block-notice .gb-notice-text,
.rd-grid-2 > .rd-card .rd-card-body,
.rd-grid-3 > .rd-card .rd-card-body { flex: 1; }


/* ---------------------------------------------------------------------------
   PART E — Small screens
   Same breakpoint and same reductions as the schedule block.
   ------------------------------------------------------------------------ */

@media (max-width: 782px) {
    .rd-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    :root {
        /* Header size is already small; only the rhythm tightens. */
        --rd-gap: 12px;
    }

    .rd-grid-2,
    .rd-grid-3 { grid-template-columns: minmax(0, 1fr); }

    .rd-card-body,
    .gb-block-notice .gb-notice-text { padding: 16px 12px; }

    .rd-card-head,
    .gb-block-notice .gb-notice-title { padding: 10px 12px; }

    .site-inner .wp-block-table td,
    .site-inner .wp-block-table thead th { padding: 10px 12px; }
}