/*
 * Custom component styles for Squash Romandie.
 *
 * Rapatrié depuis les "global styles" éditésen prod dans l'admin WordPress
 * (table wp_global_styles, taxonomie twentytwentyfour) lors du passage du
 * thème enfant au thème autonome. Ces règles ciblent des classes présentes
 * dans le contenu éditorial :
 *   - .regArticle / .regText / .regssArticle : articles du CPT reglement
 *   - .menu-right / .menu-right-link        : sidebar sticky
 *   - .arraySubvention                      : tableaux de subventions
 *
 * NOTE : une partie sera probablement réécrite lors du redesign Figma.
 */

.regArticle summary {
    font-variant: small-caps !important;
    background-color: #E8E8E8 !important;
    padding: 2px 2px !important;
    border-radius: 5px !important;
    font-size: 1.0rem !important;
    font-weight: bold !important;
}
.regArticle details {
    padding: 2px 10px !important;
}
.regssArticle {
    font-size: 1.2rem !important;
    font-weight: bold !important;
}
.regText {
    font-size: 0.9rem !important;
}
.regArticleSubBlock summary {
    font-variant: small-caps !important;
    background-color: #e8e8e8 !important;
    color: #aaaaaa !important;
    padding: 2px 10px !important;
    border-radius: 5px !important;
    font-size: 1.0rem !important;
    font-weight: bold !important;
}

/*
 * Note : l'ancien en-tête "héros" (.entry-header.has-background + overlay)
 * a été remplacé par un bloc Cover natif dans les templates page-reglement /
 * page-association. Le CSS correspondant a donc été retiré ici.
 */

.menu-right-link a {
    text-decoration: none !important;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.menu-right-link a:hover {
    color: #007BC2;
    text-decoration: none !important;
}

.menu-right {
position: sticky;
    top: 40px; /* Distance par rapport au haut de l'écran */
    align-self: flex-start; /* Empêche le menu de s'étirer */
    border: 1px solid #ddd; /* Cadre avec couleur grise claire */
    border-radius: 8px; /* Bords arrondis */
}

table.arraySubvention td,
table.arraySubvention th
{
    font-size: 1.2rem !important;
}
.arraySubvention td:first-child,
.arraySubvention th:first-child {
    font-weight: bold;
    background-color: #f0f0f0;
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Logo (header + footer)
 * ---------------------------------------------------------------------- */

/*
 * The logo is a theme SVG, 112x45 as in the mockup — the header uses logo-sr.svg,
 * the footer the inverted variant (the navy is unreadable on black). Bounding the
 * height keeps each bar at its intended height regardless of the file's aspect
 * ratio, and drops the figure's default margin.
 */
:root :where(.sr-logo) {
    margin: 0;
}

:root :where(.sr-logo img) {
    max-height: 45px;
    width: auto;
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */

/*
 * The right column is empty for now: it will hold the visual (a carousel) with
 * the player ranking layered over it. In the mockup, the ranking (484px) is what
 * gives the hero its height, so reserve it — otherwise the hero collapses to the
 * height of the text alone and every later section shifts.
 */
:root :where(.sr-hero__visual) {
    min-height: 484px;
}

/* -------------------------------------------------------------------------
 * Header navigation
 * ---------------------------------------------------------------------- */

/*
 * Both bars come from the `Header` component on the Composants canvas of the
 * Figma file. Typography, colours and gaps are carried by the block markup in
 * patterns/header.php; what needs CSS is what block supports cannot express:
 * the bar height, the per-item padding, and the active tab underline.
 */

:root :where(.sr-header__main) {
    --sr-header-bar: 80px;
}

/*
 * The mockup stretches each tab to the full height of the bar, which is what
 * puts the active underline flush with the bottom of the header. Stretching the
 * <li> from the outside would mean forcing `align-items` down five levels of the
 * navigation block's responsive wrappers — so the tab sets its own height
 * instead, and the bar only guarantees a floor.
 */
:root :where(.sr-header__bar) {
    min-height: var(--sr-header-bar);
}

/* The logo keeps its own size, centred against the taller tabs. */
:root :where(.sr-header__bar) > .sr-logo {
    display: flex;
    align-items: center;
}

/*
 * Below 600px the navigation block swaps to its overlay, where full-height tabs
 * and an underline make no sense. There is no mobile header in the Figma file,
 * so the overlay keeps its default appearance until one is drawn.
 */
@media (min-width: 600px) {
    :root :where(.sr-nav-main) .wp-block-navigation-item {
        position: relative;
    }

    /*
     * Tabs have no gap between them in the mockup: the 16px of breathing room on
     * each side is the tab's own padding, so two neighbours touch. That is also
     * what lets the underline span the full width of the tab.
     */
    :root :where(.sr-nav-main) .wp-block-navigation-item__content {
        display: flex;
        align-items: center;
        min-height: var(--sr-header-bar);
        padding: 0 1rem;
        line-height: 1.375; /* 22px on 16px */
    }

    /*
     * Active tab: accent label plus a 2px rule pinned to the bottom of the bar.
     * The `current-menu-item` class is not something WordPress adds to custom
     * navigation links on its own — squash_romandie_mark_current_nav_item() in
     * functions.php puts it there by matching the request path.
     *
     * The specificity has to clear 0-1-1: the navigation block's own
     * `elements.link` support emits `.wp-elements-N a:where(:not(...))`, which
     * would otherwise win over a `:where()`-wrapped rule.
     */
    :root :where(.sr-nav-main) .current-menu-item > a {
        color: var(--wp--preset--color--primary);
    }

    :root :where(.sr-nav-main) .current-menu-item::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 2px;
        background-color: var(--wp--preset--color--primary);
    }
}

/* Top bar: 12px on a 16px line, with the mockup's slight negative tracking. */
:root :where(.sr-nav-top) .wp-block-navigation-item__content {
    line-height: 1.3333; /* 16px on 12px */
    letter-spacing: -0.12px;
}