/* Football Rwanda - joined theme styles (31 files). Built automatically, do not edit. */

/* ---- fonts.css ---- */
/* Inter (variable, latin) — self-hosted, no Google Fonts request */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('https://footballtalentsdata.com/wp-content/themes/football-rwanda-v4-nettoye/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Saira (variable weight + width, latin) — display face: titles and match numerals.
   SIL Open Font License 1.1, see assets/fonts/LICENSE-Saira.txt. Only downloaded
   by pages that use it. */
@font-face {
    font-family: 'Saira';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 50% 125%;
    font-display: swap;
    src: url('https://footballtalentsdata.com/wp-content/themes/football-rwanda-v4-nettoye/assets/fonts/saira-latin-wdth-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---- variables.css ---- */
/* ======================================================
   Football Rwanda Design System v1.0
====================================================== */

:root{

    /* COLORS */

    --fr-primary:#009879;
    --fr-primary-dark:#007863;

    --fr-secondary:#F4B400;

    --fr-blue:#1E88E5;

    --fr-danger:#E53935;

    --fr-warning:#FFC107;

    --fr-success:#43A047;

    /* BACKGROUND */

    --fr-bg:#F5F7FA;

    --fr-card:#FFFFFF;

    /* TEXT */

    --fr-text:#222;

    --fr-text-light:#666;

    --fr-border:#E5E5E5;

    /* TYPOGRAPHY */

    --fr-font:'Inter',sans-serif;

    /* SPACING */

    --fr-radius:16px;

    --fr-shadow:0 8px 24px rgba(0,0,0,.08);

    --fr-transition:.3s;

    --fr-container:1400px;

}

/* ---- global.css ---- */
/* ==========================================================
   Football Rwanda
   Global Styles
========================================================== */

/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    padding:0;

    font-family:'Inter',sans-serif;

    font-size:16px;

    line-height:1.7;

    color:#334155;

    background:#f8fafc;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/* ==========================================================
   CONTAINER
========================================================== */

.fr-container{

    max-width:1200px;

    margin:auto;

    padding:20px 20px;

}

/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    margin-top:0;

    margin-bottom:15px;

    color:#0f172a;

    font-weight:700;

    line-height:1.3;

}

h1{

    font-size:42px;

}

h2{

    font-size:32px;

}

h3{

    font-size:24px;

}

h4{

    font-size:20px;

}

p{

    margin:0 0 18px;

}

/* ==========================================================
   LINKS
========================================================== */

a{

    color:#2563eb;

    text-decoration:none;

    transition:.25s;

}

a:hover{

    color:#1d4ed8;

}

/* ==========================================================
   IMAGES
========================================================== */

img{

    max-width:100%;

    height:auto;

    display:block;

}

/* ==========================================================
   LISTS
========================================================== */

ul,
ol{

    margin:0 0 20px;

    padding-left:20px;

}

li{

    margin-bottom:8px;

}

/* ==========================================================
   BUTTONS
========================================================== */

button,
input[type="submit"]{

    cursor:pointer;

    transition:.30s;

}

/* ==========================================================
   FORMS
========================================================== */

input,
select,
textarea{

    width:100%;

    padding:12px 15px;

    border:1px solid #d1d5db;

    border-radius:10px;

    font-size:15px;

    transition:.25s;

}

input:focus,
select:focus,
textarea:focus{

    outline:none;

    border-color:#2563eb;

    box-shadow:0 0 0 3px rgba(37,99,235,.15);

}

/* ==========================================================
   TABLES
========================================================== */

table{

    width:100%;

    border-collapse:collapse;

}

th{

    background:#f1f5f9;

    text-align:left;

    padding:14px;

}

td{

    padding:14px;

    border-bottom:1px solid #e5e7eb;

}

/* ==========================================================
   UTILITIES
========================================================== */

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.text-left{

    text-align:left;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mt-40{

    margin-top:40px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-40{

    margin-bottom:40px;

}

.hidden{

    display:none;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){

    h1{

        font-size:36px;

    }

    h2{

        font-size:28px;

    }

}

@media(max-width:768px){

    .fr-container{

        padding:25px 15px;

    }

    h1{

        font-size:30px;

    }

    h2{

        font-size:24px;

    }

}

/* ==========================================================
   HEADER
========================================================== */

.fr-header{

    background:#ffffff;

    border-bottom:1px solid #e5e7eb;

    position:sticky;

    top:0;

    z-index:999;

}

.fr-header-inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:80px;

}

.fr-logo{

    font-size:28px;

    font-weight:800;

    color:var(--fr-primary);

}

.fr-main{

    min-height:70vh;

}

/* ==========================================================
   FOOTER
========================================================== */

.fr-footer{

    background:#0f172a;

    color:#fff;

    margin-top:80px;

}

.fr-footer h3,
.fr-footer h4{

    color:#fff;

}

.fr-footer ul{

    list-style:none;

    margin:0;

    padding:0;

}

.fr-footer li{

    margin-bottom:12px;

}

.fr-footer a{

    color:#cbd5e1;

}

.fr-footer a:hover{

    color:#fff;

}

/* ---------- BK Pro League logo (card + home table) ---------- */
html body .fr-competition-image .fr-competition-logo-img {
    display: block;
    width: auto;
    max-width: 70%;
    height: 130px;
    margin: 0 auto;
    object-fit: contain;
    padding: 0;
    background: none;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
}


/* ---- components.css ---- */
/*
==========================================================
FOOTBALL RWANDA
COMPONENTS
File: components.css
==========================================================
*/

/*
 * Shared component styles will be added here.
 *
 * Page Header styles are handled separately by:
 * components/page-header.css
 */

/* ---- header.css ---- */
/* ==========================================================
   FOOTBALL RWANDA
   GLOBAL HEADER / NAVIGATION
   Final clean version
   ========================================================== */


/* ==========================================================
   1. HEADER
   ========================================================== */

.fr-header {
    position: sticky;
    top: 0;
    z-index: 9999;

    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #e7edf3;

    box-sizing: border-box;
}


/* WordPress Admin Bar
   Keep the site header below the admin bar for logged-in users. */

body.admin-bar .fr-header {
    top: 32px;
}


/* ==========================================================
   2. HEADER INNER
   ========================================================== */

.fr-header-inner {
    width: 100%;
    min-width: 0;
    min-height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
    box-sizing: border-box;
}


/* ==========================================================
   3. BRANDING
   ========================================================== */

.fr-branding {
    flex: 0 0 auto;
    min-width: 0;

    display: flex;
    align-items: center;
}

.fr-branding a {
    display: flex;
    align-items: center;

    text-decoration: none;
}

.fr-branding .custom-logo-link {
    display: flex;
    align-items: center;
}

.fr-branding .custom-logo,
.fr-branding img {
    display: block;

    width: auto;
    max-width: 155px;
    max-height: 54px;

    object-fit: contain;
}


/* ==========================================================
   4. TEXT LOGO FALLBACK
   ========================================================== */

.fr-logo {
    display: inline-flex;
    align-items: center;

    color: var(--fr-primary, #009f83);
    text-decoration: none;

    font-size: 26px;
    line-height: 1;
    font-weight: 800;

    white-space: nowrap;
}

.fr-logo:hover {
    color: var(--fr-primary, #009f83);
}

.fr-logo-image {
    display: block;

    width: auto;
    height: 54px;
    max-width: 220px;

    object-fit: contain;

    transition: opacity 0.2s ease;
}

.fr-logo:hover .fr-logo-image {
    opacity: 0.9;
}


/* ==========================================================
   5. PRIMARY NAVIGATION
   ========================================================== */

.fr-navigation {
    flex: 0 1 auto;
    min-width: 0;

    margin-left: auto;

    display: flex;
    align-items: center;
}

.fr-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 4px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.fr-menu > li {
    position: relative;

    margin: 0;
    padding: 0;
}

.fr-menu > li > a {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 72px;
    padding: 0 12px;

    color: var(--fr-navy, #0f1f35);

    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;
    white-space: nowrap;

    border-radius: 8px;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.fr-menu > li > a:hover {
    color: var(--fr-green, #009b84);
}


/* ==========================================================
   6. ACTIVE MENU ITEM
   ========================================================== */

.fr-menu > li.current-menu-item > a,
.fr-menu > li.current-menu-parent > a,
.fr-menu > li.current-menu-ancestor > a {
    color: var(--fr-green, #009b84);
}

.fr-menu > li.current-menu-item > a::before,
.fr-menu > li.current-menu-parent > a::before,
.fr-menu > li.current-menu-ancestor > a::before {
    content: "";

    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;

    height: 3px;

    background: var(--fr-green, #009b84);
    border-radius: 3px 3px 0 0;
}


/* ==========================================================
   7. DROPDOWN
   ========================================================== */

.fr-menu .sub-menu {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;

    min-width: 220px;

    margin: 0;
    padding: 8px;

    list-style: none;

    background: #ffffff;
    border: 1px solid #e5ebf0;
    border-radius: 0 0 10px 10px;

    box-shadow: 0 12px 30px rgba(15, 31, 53, 0.12);

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;

    z-index: 10000;
}

.fr-menu > li:hover > .sub-menu,
.fr-menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* Dropdown links */

.fr-menu .sub-menu li {
    margin: 0;
    padding: 0;
}

.fr-menu .sub-menu a {
    display: block;

    padding: 11px 14px;

    color: #24364d;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;

    text-decoration: none;

    border-radius: 7px;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

.fr-menu .sub-menu a:hover {
    color: var(--fr-green, #009b84);
    background: #f0f8f6;
}


/* Dropdown arrow */

.fr-menu > .menu-item-has-children > a::after {
    content: "⌄";

    margin-left: 7px;

    font-size: 12px;
    line-height: 1;

    transition: transform 0.2s ease;
}

.fr-menu > .menu-item-has-children:hover > a::after,
.fr-menu > .menu-item-has-children:focus-within > a::after {
    transform: rotate(180deg);
}


/* ==========================================================
   8. MOBILE TOGGLE
   ========================================================== */

.fr-menu-toggle {
    display: none;

    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    padding: 8px;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.fr-menu-toggle span {
    display: block;

    width: 100%;
    height: 3px;

    margin: 6px 0;

    background: #111827;
    border-radius: 20px;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


/* ==========================================================
   9. MOBILE MENU
   ========================================================== */

@media (max-width: 1080px) {

    .fr-header-inner {
        min-height: 72px;
        gap: 16px;
    }

    .fr-navigation {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        display: none;

        width: 100%;
        min-width: 0;

        margin: 0;
        padding: 18px 24px;

        box-sizing: border-box;

        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;

        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    }

    .fr-navigation.is-open {
        display: block;
    }

    .fr-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        width: 100%;
        gap: 0;
    }

    .fr-menu > li {
        width: 100%;
    }

    .fr-menu > li > a {
        min-height: auto;
        width: 100%;

        padding: 13px 0;

        font-size: 16px;
        line-height: 1.3;

        border-radius: 0;
    }

    .fr-menu > li.current-menu-item > a::before,
    .fr-menu > li.current-menu-parent > a::before,
    .fr-menu > li.current-menu-ancestor > a::before {
        display: none;
    }

    .fr-menu > li.current-menu-item > a,
    .fr-menu > li.current-menu-parent > a,
    .fr-menu > li.current-menu-ancestor > a {
        background: transparent;
    }

    .fr-menu .sub-menu {
        position: static;

        display: none;

        min-width: 0;

        padding: 0 0 6px;

        border: 0;
        border-radius: 0;

        box-shadow: none;

        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .fr-menu > li:hover > .sub-menu,
    .fr-menu > li:focus-within > .sub-menu {
        display: block;
    }

    .fr-menu .sub-menu a {
        padding: 10px 12px;

        font-size: 14px;
        background: #f7fafb;
    }

    .fr-menu > .menu-item-has-children > a::after {
        margin-left: auto;
    }

    .fr-menu-toggle {
        display: block;
    }
}


/* ==========================================================
   10. TABLET / NARROW DESKTOP
   ========================================================== */

@media (max-width: 1299px) and (min-width: 1081px) {

    .fr-header-inner {
        gap: 14px;
    }

    .fr-menu {
        gap: 0;
    }

    .fr-menu > li > a {
        min-height: 78px;
        padding: 0 9px;

        font-size: 14px;
    }

    .fr-branding .custom-logo,
    .fr-branding img {
        max-width: 140px;
        max-height: 60px;
    }

    .fr-logo-image {
        height: 58px;
        max-width: 200px;
    }
}


/* ==========================================================
   11. MOBILE LOGO
   ========================================================== */

@media (max-width: 1080px) {

    .fr-branding .custom-logo,
    .fr-branding img {
        max-width: 140px;
        max-height: 58px;
    }

    .fr-logo-image {
        height: 52px;
        max-width: 200px;
    }
}


/* ==========================================================
   12. SMALL MOBILE
   ========================================================== */

@media (max-width: 576px) {

    .fr-header-inner {
        min-height: 68px;
        gap: 10px;
    }

    .fr-branding .custom-logo,
    .fr-branding img {
        max-width: 120px;
        max-height: 50px;
    }

    .fr-logo {
        font-size: 22px;
    }

    .fr-logo-image {
        height: 45px;
        max-width: 175px;
    }

    .fr-navigation {
        padding: 14px 20px;
    }

    .fr-menu-toggle {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
}


/* ==========================================================
   13. WORDPRESS ADMIN BAR — MOBILE
   ========================================================== */

@media (max-width: 782px) {

    body.admin-bar .fr-header {
        top: 46px;
    }
}


/* ==========================================================
   14. MOBILE TOGGLE ACTIVE STATE
   ========================================================== */

.fr-menu-toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.fr-menu-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.fr-menu-toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}


/* ==========================================================
   15. SAFE BOX SIZING
   ========================================================== */

.fr-header,
.fr-header-inner,
.fr-navigation,
.fr-menu,
.fr-menu > li,
.fr-menu > li > a {
    box-sizing: border-box;
}


/* ==========================================================
   HEADER — COMPACT DESKTOP + LOGIN
   Based on current header.css.
   Only header sizing/navigation is adjusted.
   ========================================================== */

.fr-header-inner {
    min-height: 72px;
}

.fr-navigation {
    flex: 1 1 auto;
    justify-content: flex-end;
}

.fr-menu {
    gap: 2px;
}

.fr-menu > li > a {
    min-height: 72px;
    padding: 0 11px;
}

/* Login button added in header.php */
.fr-header-login {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    padding: 0 18px;

    margin-left: 12px;

    background: var(--fr-green, #009f83);
    color: #ffffff !important;

    border: 1px solid var(--fr-green, #009f83);
    border-radius: 8px;

    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    white-space: nowrap;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.fr-header-login:hover {
    background: #008b76;
    border-color: #008b76;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.fr-header-login:focus-visible {
    outline: 2px solid #123c66;
    outline-offset: 3px;
}

/* Mobile: Login stays in the compact header beside the menu toggle. */
@media (max-width: 1080px) {
    .fr-header-inner {
        min-height: 72px;
    }

    .fr-header-login {
        min-height: 38px;
        padding: 0 15px;
        margin-left: auto;
        margin-right: 8px;
        font-size: 13px;
    }
}

/* Very small screens */
@media (max-width: 576px) {
    .fr-header-inner {
        min-height: 68px;
    }

    .fr-header-login {
        min-height: 36px;
        padding: 0 12px;
        font-size: 12px;
    }
}


/* ==========================================================
   HEADER SEARCH ICON
========================================================== */

.fr-header-search {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 8px;
    color: #123c66;
    border: 1px solid #dfe5ec;
    border-radius: 8px;
    background: #ffffff;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}

.fr-header-search:hover,
.fr-header-search:focus-visible {
    color: #009f83;
    border-color: #009f83;
}


/* ---- header-pro.css ---- */
/* Football Rwanda - Header PRO (loaded after header.css) */

html body .fr-header {
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid #e3e9ef;
    transition: box-shadow .2s ease, background .2s ease;
}
html body .fr-header.is-scrolled { background: rgba(255,255,255,.96); box-shadow: 0 1px 2px rgba(6,24,47,.05), 0 10px 30px rgba(6,24,47,.08); }
html body .fr-header-inner { min-height: 76px; gap: 20px; }

/* Nav links = pills */
html body .fr-menu { gap: 2px; }
html body .fr-menu > li > a {
    min-height: 42px; padding: 0 14px; border-radius: 12px;
    color:#06182f; font-size: 14.5px; font-weight: 700; letter-spacing: -.005em;
}
html body .fr-menu > li > a:hover { background:#f1f5f8; color:#06182f; }
html body .fr-menu > li.current-menu-item > a,
html body .fr-menu > li.current-menu-parent > a,
html body .fr-menu > li.current-menu-ancestor > a { background:#e6f4f2; color:#0a7f78; }
html body .fr-menu > li.current-menu-item > a::before,
html body .fr-menu > li.current-menu-parent > a::before,
html body .fr-menu > li.current-menu-ancestor > a::before { display:none; }
html body .fr-menu > .menu-item-has-children > a::after {
    content:""; width:6px; height:6px; margin: -3px 0 0 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); opacity:.7; font-size:0;
}
html body .fr-menu > .menu-item-has-children:hover > a::after,
html body .fr-menu > .menu-item-has-children:focus-within > a::after { transform: rotate(225deg); margin-top: 3px; }

/* Dropdown */
html body .fr-menu .sub-menu {
    top: 100%; left: -6px; min-width: 232px; padding: 8px; margin-top: 8px;
    border: 1px solid #e3e9ef; border-radius: 18px;
    box-shadow: 0 1px 2px rgba(6,24,47,.04), 0 18px 44px rgba(6,24,47,.14);
}
html body .fr-menu .sub-menu::before { content:""; position:absolute; left:0; right:0; top:-10px; height:10px; } /* hover bridge */
html body .fr-menu .sub-menu a { padding: 11px 14px; border-radius: 12px; color:#06182f; font-weight:600; }
html body .fr-menu .sub-menu a:hover { background:#e6f4f2; color:#0a7f78; }
html body .fr-menu .sub-menu .current-menu-item > a { background:#e6f4f2; color:#0a7f78; }

/* Search + login */
html body .fr-header-search { border:1px solid #e3e9ef; border-radius: 12px; width:42px; height:42px; color:#06182f; transition: background .15s, border-color .15s; }
html body .fr-header-search:hover { background:#f1f5f8; border-color:#cfd9e2; }
html body .fr-header-login {
    min-height: 42px; padding: 0 20px; border: 0; box-shadow:none; border-radius: 12px; background:#06182f; color:#fff;
    font-weight: 700; transition: background .15s, transform .15s;
}
html body .fr-header-login:hover { background:#0a7f78; color:#fff; }

/* Mobile */
html body .fr-menu-toggle { border-radius: 12px; border:1px solid #e3e9ef; flex-basis:42px; width:42px; height:42px; padding: 11px 10px; }
html body .fr-menu-toggle span { height:2px; margin:5px 0; background:#06182f; }
html body .fr-menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html body .fr-menu-toggle.is-active span:nth-child(2) { opacity:0; }
html body .fr-menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
    html body .fr-header-inner { min-height: 68px; gap: 10px; }
    html body .fr-navigation {
        left: 12px; right: 12px; top: calc(100% + 8px); width: auto;
        max-height: calc(100vh - 110px); overflow-y: auto;
        padding: 10px; border: 1px solid #e3e9ef; border-radius: 18px;
        background:#fff; box-shadow: 0 1px 2px rgba(6,24,47,.04), 0 22px 50px rgba(6,24,47,.18);
    }
    html body .fr-menu > li > a { padding: 14px 14px; border-radius: 12px; font-size: 16px; min-height: 0; justify-content: space-between; }
    html body .fr-menu > li + li { border-top: 1px solid #f0f3f6; }
    html body .fr-menu > .menu-item-has-children > a::after { margin: -3px 4px 0 auto; }
    html body .fr-menu > .menu-item-has-children:hover > a::after,
    html body .fr-menu > .menu-item-has-children:focus-within > a::after { transform: rotate(45deg); margin-top:-3px; }
    html body .fr-menu > .menu-item-has-children.is-expanded > a::after { transform: rotate(225deg); margin-top: 3px; }
    html body .fr-menu .sub-menu { display:none; margin:0 0 6px 8px; padding: 2px 0 4px 10px; border:0; border-left: 2px solid #e6f4f2; border-radius:0; box-shadow:none; background:transparent; }
    html body .fr-menu .sub-menu::before { display:none; }
    html body .fr-menu > li:hover > .sub-menu,
    html body .fr-menu > li:focus-within > .sub-menu { display:none; }
    html body .fr-menu > li.is-expanded > .sub-menu { display:block; }
    html body .fr-menu .sub-menu a { background:transparent; padding: 11px 12px; }
}
@media (max-width: 420px) {
    html body .fr-header-login { padding: 0 14px; }
}

/* ===== Rich sub-menus (icon + label + description) ===== */
html body .fr-menu .sub-menu { min-width: 320px; padding: 10px; }
html body .fr-menu .sub-menu a { display:flex; align-items:center; gap: 14px; padding: 10px 12px; }
html body .fr-menu .sub-menu .fr-menu-icon {
    flex: 0 0 40px; width: 40px; height: 40px; display:grid; place-items:center;
    border-radius: 12px; background:#f1f5f8; color:#0a7f78; transition: background .15s, color .15s;
}
html body .fr-menu .sub-menu a:hover .fr-menu-icon,
html body .fr-menu .sub-menu .current-menu-item > a .fr-menu-icon { background:#0a7f78; color:#fff; }
html body .fr-menu .sub-menu .fr-menu-icon--logo,
html body .fr-menu .sub-menu a:hover .fr-menu-icon--logo,
html body .fr-menu .sub-menu .current-menu-item > a .fr-menu-icon--logo { background: transparent; }
html body .fr-menu .sub-menu .fr-menu-icon--logo img { width: 34px; height: 34px; object-fit: contain; display: block; }
html body .fr-menu .sub-menu .fr-menu-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
html body .fr-menu .sub-menu .fr-menu-label { font-size:14.5px; font-weight:700; line-height:1.25; color:#06182f; }
html body .fr-menu .sub-menu a:hover .fr-menu-label,
html body .fr-menu .sub-menu .current-menu-item > a .fr-menu-label { color:#0a7f78; }
html body .fr-menu .sub-menu .fr-menu-desc { font-size:12.5px; font-weight:500; line-height:1.3; color:#62748a; }
html body .fr-menu .sub-menu .fr-menu-competition + .fr-menu-competition,
html body .fr-menu .sub-menu li { margin: 0; }

@media (max-width: 1080px) {
    html body .fr-menu .sub-menu { min-width: 0; }
    html body .fr-menu .sub-menu .fr-menu-icon { flex-basis: 34px; width: 34px; height: 34px; border-radius: 10px; }
    html body .fr-menu .sub-menu .fr-menu-label { font-size: 15px; }
}

/* Last dropdown opens towards the left so it never leaves the screen */
@media (min-width: 1081px) {
    html body .fr-menu > li:last-child > .sub-menu { left: auto; right: -6px; }
}

/* ===== Account area (Sign in / Create account / member chip) ===== */
html body .fr-header-signin {
    display:inline-flex; align-items:center; min-height:42px; padding: 0 14px; border-radius:12px;
    color:#06182f; font-size:14.5px; font-weight:700; text-decoration:none; white-space:nowrap;
    transition: background .15s;
}
html body .fr-header-signin:hover { background:#f1f5f8; }

.fr-account-chip { position:relative; }
.fr-account-chip-link {
    display:inline-flex; align-items:center; gap:10px; min-height:42px; padding: 0 12px 0 5px;
    border:1px solid #e3e9ef; border-radius: 999px; color:#06182f; text-decoration:none; font-weight:700; font-size:14.5px;
    transition: background .15s;
}
.fr-account-chip-link:hover { background:#f1f5f8; }
.fr-account-chip .fr-account-avatar { flex:0 0 32px; width:32px; height:32px; font-size:14px; }
.fr-account-menu {
    position:absolute; right:0; top:100%; min-width: 210px; margin:8px 0 0; padding:8px; list-style:none;
    background:#fff; border:1px solid #e3e9ef; border-radius:16px;
    box-shadow: 0 1px 2px rgba(6,24,47,.04), 0 18px 44px rgba(6,24,47,.14);
    opacity:0; visibility:hidden; transform: translateY(6px);
    transition: opacity .18s, transform .18s, visibility .18s; z-index: 10000;
}
.fr-account-menu::before { content:""; position:absolute; left:0; right:0; top:-10px; height:10px; }
.fr-account-chip:hover .fr-account-menu,
.fr-account-chip:focus-within .fr-account-menu { opacity:1; visibility:visible; transform:none; }
.fr-account-menu a { display:block; padding: 11px 14px; border-radius:10px; color:#06182f; font-size:14px; font-weight:600; text-decoration:none; }
.fr-account-menu a:hover { background:#e6f4f2; color:#0a7f78; }

.fr-nav-account { display:none; }

@media (max-width: 1080px) {
    html body .fr-header-signin { display:none; }
    html body .fr-header-login { padding: 0 14px; font-size: 13.5px; }
    .fr-account-chip-name { display:none; }
    .fr-account-chip-link { padding: 4px; }
    .fr-account-menu { display:none; }
    .fr-nav-account { display:flex; gap:8px; margin-top: 8px; padding-top: 12px; border-top:1px solid #f0f3f6; }
    .fr-nav-account a {
        flex:1; text-align:center; padding: 13px 10px; border-radius:12px; border:1px solid #e3e9ef;
        color:#06182f; font-weight:700; font-size:15px; text-decoration:none;
    }
    .fr-nav-account a.is-primary { background:#06182f; border-color:#06182f; color:#fff; }
}
.fr-account-chip-link, .fr-account-chip-link:hover, .fr-account-chip-link:focus { color:#06182f; }
.fr-account-chip-name { color:#06182f; }
.fr-btn-short { display:none; }
@media (max-width: 480px) {
    .fr-btn-long { display:none; }
    .fr-btn-short { display:inline; }
    html body .fr-header-inner { gap: 8px; }
}


/* ==========================================================
   BRAND MARK (emblem + wordmark, template-parts/header/branding.php)
   ========================================================== */

html body .fr-brandmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

html body .fr-brandmark-icon {
    display: block;
    flex: 0 0 auto;
}

html body .fr-brandmark-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-stretch: 87.5%;
    line-height: .95;
    text-transform: uppercase;
    white-space: nowrap;
}

html body .fr-brandmark-text b {
    color: #031826;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .01em;
}

html body .fr-brandmark-text i {
    color: #00a07f;
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .2em;
}

html body .fr-brandmark:hover .fr-brandmark-text b {
    color: #0a7f78;
}

/* Mid-size screens (full menu, little room): emblem only, no "Home"
   item (the emblem leads home), tighter links. */
@media (max-width: 1299px) and (min-width: 1081px) {
    html body .fr-brandmark-text { display: none; }
    html body .fr-menu > li.fr-menu-home { display: none; }
}

/* Desktop: links a little tighter than the original 14px, so the
   wordmark, the menu and the buttons fit side by side. */
@media (min-width: 1081px) {
    html body .fr-header-inner { gap: 12px; }
    html body .fr-menu > li > a { padding: 0 10px; font-size: 14px; }
    html body .fr-header-login { padding: 0 16px; }
}

/* Never let the menu slide under the logo if it is still too wide. */
html body .fr-navigation,
html body .fr-menu { justify-content: safe flex-end; }

/* Small phones: shorter wordmark lines. */
@media (max-width: 420px) {
    html body .fr-brandmark { gap: 8px; }
    html body .fr-brandmark-icon { width: 38px; height: 38px; }
    html body .fr-brandmark-text b,
    html body .fr-brandmark-text i { font-size: 13.5px; }
}

/* ---- footer-pro.css ---- */
/* Football Rwanda - Footer PRO (v3) */

.fr-ft {
    margin-top: 72px;
    color: #c5d2e0;
    background:
        radial-gradient(90% 120% at 12% 0%, rgba(0,190,160,.14), rgba(0,190,160,0) 60%),
        linear-gradient(180deg, #08213b 0%, #06182f 100%);
    border-top: 3px solid #0a7f78;
}
.fr-ft-container { width: min(1200px, calc(100% - 40px)); margin: 0 auto; }

/* ----- numbers strip ----- */
.fr-ft-stats { border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.fr-ft-stats-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.fr-ft-stat { padding: 24px 20px; text-align: center; border-right: 1px solid rgba(255,255,255,.08); }
.fr-ft-stat:last-child { border-right: 0; }
.fr-ft-stat strong { display:block; color:#fff; font-size: 28px; font-weight: 800; letter-spacing:-.02em; line-height:1; }
.fr-ft-stat span { display:block; margin-top: 8px; color:#7f95ad; font-size: 12px; font-weight: 700; letter-spacing:.08em; text-transform: uppercase; }

/* ----- main grid ----- */
.fr-ft-main { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 48px; padding: 56px 0 44px; }

.fr-ft-logo { display:inline-flex; padding: 0; margin-bottom: 18px; background: none; border-radius: 0; }
.fr-ft-logo img { display:block; height: 52px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); width:auto; max-width: 200px; object-fit: contain; }
.fr-ft-tagline { max-width: 340px; margin: 0 0 22px; color:#9fb2c7; font-size: 14.5px; line-height: 1.65; }
.fr-ft-cta {
    display:inline-flex; align-items:center; gap:8px; padding: 11px 18px; border-radius: 12px;
    background: rgba(94,234,212,.12); color:#5eead4; font-size: 14px; font-weight:700; text-decoration:none;
    border: 1px solid rgba(94,234,212,.25); transition: background .15s, transform .15s;
}
.fr-ft-cta:hover { background: rgba(94,234,212,.2); transform: translateX(2px); color:#5eead4; }

.fr-ft-title { margin: 4px 0 18px; color:#fff; font-size: 13px; font-weight: 800; letter-spacing:.09em; text-transform: uppercase; }
.fr-ft-col ul { margin:0; padding:0; list-style:none; display:grid; gap: 0; }
.fr-ft-col a {
    display:inline-block; padding: 6px 0; color:#b4c4d6; font-size: 14.5px; font-weight: 500; text-decoration:none;
    transition: color .15s, transform .15s;
}
.fr-ft-col a:hover { color:#fff; transform: translateX(3px); }

/* ----- bottom bar ----- */
.fr-ft-bottom { border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); }
.fr-ft-bottom-inner { display:flex; align-items:center; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; padding: 20px 0; font-size: 13px; }
.fr-ft-copy { color:#8ea3b9; }
.fr-ft-copy strong { color:#fff; }
.fr-ft-legal { display:flex; gap: 10px; align-items:center; color:#4f6580; }
.fr-ft-legal a { color:#9fb2c7; text-decoration:none; }
.fr-ft-legal a:hover { color:#fff; }

@media (max-width: 1000px) {
    .fr-ft-main { grid-template-columns: 1fr 1fr; gap: 36px 32px; padding: 44px 0 36px; }
    .fr-ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .fr-ft { margin-top: 48px; }
    .fr-ft-stats-inner { grid-template-columns: 1fr 1fr; }
    .fr-ft-stat { padding: 18px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
    .fr-ft-stat:nth-child(2n) { border-right: 0; }
    .fr-ft-stat:nth-last-child(-n+2) { border-bottom: 0; }
    .fr-ft-main { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
    .fr-ft-bottom-inner { flex-direction: column; align-items: flex-start; }
}

/* ----- floating Back to top (all pages) ----- */
.fr-btt {
    position: fixed; right: 22px; bottom: 22px; z-index: 9000;
    width: 46px; height: 46px; display: grid; place-items: center;
    border: 0; border-radius: 14px; cursor: pointer;
    background: #06182f; color: #fff;
    box-shadow: 0 1px 2px rgba(6,24,47,.2), 0 10px 28px rgba(6,24,47,.28);
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .2s, transform .2s, visibility .2s, background .15s;
}
.fr-btt.is-visible { opacity: 1; visibility: visible; transform: none; }
.fr-btt:hover { background: #0a7f78; }
.fr-btt:focus-visible { outline: 3px solid rgba(10,127,120,.45); outline-offset: 2px; }
@media (max-width: 600px) { .fr-btt { right: 14px; bottom: 14px; width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .fr-btt { transition: none; } }
.fr-ft-bottom-inner { padding-right: 64px; }
@media (max-width: 600px) { .fr-ft-bottom-inner { padding-right: 56px; } }

.fr-ft-cookie { background:none; border:0; padding:0; font:inherit; color:#9fb2c7; cursor:pointer; }
.fr-ft-cookie:hover { color:#fff; }
.fr-ft-legal { flex-wrap: wrap; }

/* Brand mark on the dark footer */
html body .fr-ft-logo.fr-brandmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
html body .fr-ft-logo .fr-brandmark-icon { display: block; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,.18); border-radius: 11px; }
html body .fr-ft-logo .fr-brandmark-text { display: flex; flex-direction: column; gap: 3px; font-family: var(--fr-display, 'Saira', 'Inter', sans-serif); font-stretch: 87.5%; line-height: .95; text-transform: uppercase; white-space: nowrap; }
html body .fr-ft-logo .fr-brandmark-text b { color: #fff; font-size: 18px; font-weight: 800; letter-spacing: .01em; }
html body .fr-ft-logo .fr-brandmark-text i { color: #2fd3ad; font-size: 18px; font-style: normal; font-weight: 800; letter-spacing: .2em; }

/* ---- page-header.css ---- */
/**
 * ==========================================================
 * Football Rwanda
 * Global Page Header
 * File: page-header.css
 * ==========================================================
 */


/* ==========================================================
   HEADER
========================================================== */

.fr-page-header {

    width: 100%;

    margin-bottom: 32px;

    background:
        linear-gradient(
            135deg,
            #009b83 0%,
            #008f7a 50%,
            #007f70 100%
        );

    color: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 15px 40px rgba(0, 128, 110, 0.18);
}


/* ==========================================================
   CONTENT
========================================================== */

.fr-page-header-content {

    padding: 28px 42px 24px;
}


/* ==========================================================
   SUBTITLE
========================================================== */

.fr-page-subtitle {

    display: block;

    margin-bottom: 6px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 12px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ==========================================================
   TITLE
========================================================== */

.fr-page-title {

    margin: 0 0 8px;

    color: #ffffff;

    font-size: 34px;

    line-height: 1.15;

    font-weight: 800;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.fr-page-description {

    max-width: 700px;

    margin: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 14px;

    line-height: 1.5;
}


/* ==========================================================
   STATS
========================================================== */

.fr-page-stats {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    background: rgba(0, 0, 0, 0.08);

    border-top:
        1px solid rgba(255, 255, 255, 0.18);
}


/* ==========================================================
   STAT
========================================================== */

.fr-page-stat {

    min-height: 72px;

    padding: 14px 24px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-right:
        1px solid rgba(255, 255, 255, 0.18);
}


.fr-page-stat:last-child {
    border-right: none;
}


/* ==========================================================
   STAT VALUE
========================================================== */

.fr-page-stat-value {

    color: #ffffff;

    font-size: 22px;

    line-height: 1.15;

    font-weight: 800;
}


/* ==========================================================
   STAT LABEL
========================================================== */

.fr-page-stat-label {

    margin-top: 3px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 10px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    .fr-page-header-content {

        padding: 25px 30px 22px;
    }


    .fr-page-title {

        font-size: 31px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .fr-page-header {

        margin-bottom: 24px;

        border-radius: 14px;
    }


    .fr-page-header-content {

        padding: 24px 24px 20px;
    }


    .fr-page-title {

        font-size: 28px;
    }


    .fr-page-description {

        font-size: 13px;
    }


    .fr-page-stats {

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


    .fr-page-stat {

        min-height: 68px;

        padding: 13px 18px;
    }


    .fr-page-stat:nth-child(2) {

        border-right: none;
    }


    .fr-page-stat:nth-child(-n + 2) {

        border-bottom:
            1px solid rgba(255, 255, 255, 0.18);
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .fr-page-header-content {

        padding: 21px 18px 18px;
    }


    .fr-page-subtitle {

        font-size: 10px;
    }


    .fr-page-title {

        font-size: 25px;
    }


    .fr-page-description {

        font-size: 12px;
    }


    .fr-page-stat {

        min-height: 64px;

        padding: 11px 12px;
    }


    .fr-page-stat-value {

        font-size: 19px;
    }


    .fr-page-stat-label {

        font-size: 9px;
    }

}

/* ---- brand.css ---- */
/* ==========================================================
   Football Rwanda - Brand layer (every page)
   The identity introduced on the home page, for the parts
   every page shares. CSS only.

   - Display face: Saira (assets/css/base/fonts.css) for page
     titles and their key numbers.
   - Rwanda flag band closing the page header, as on the home
     hero and the match hero.
   - The generic "Football Rwanda" eyebrow above every page
     title is removed: the title speaks for itself.
   ========================================================== */

:root {
    --fr-display: 'Saira', 'Inter', system-ui, sans-serif;
}


/* ---------- Page header (template-parts/components/page-header.php) ---------- */

html body .fr-page-header .fr-page-subtitle {
    display: none;
}

html body .fr-page-header .fr-page-title {
    font-family: var(--fr-display);
    font-stretch: 87.5%;
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 1;
    text-transform: uppercase;
}

html body .fr-page-header .fr-page-stat-value {
    font-family: var(--fr-display);
    font-stretch: 87.5%;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

html body .fr-page-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 5px;
    background: linear-gradient(90deg, #00A1DE 0 50%, #FAD201 50% 75%, #20603D 75% 100%);
    pointer-events: none;
}


/* ---------- Directory header (template-parts/components/directory-header.php:
   Statistics, Players, Clubs, Coaches, Academies, Nationalities...) ---------- */

/* The flag band is absolutely positioned: the header must be its
   containing block (it is position: static on some pages). */
html body .fr-directory-header,
html body .fr-page-header {
    position: relative;
    overflow: hidden;
}

html body .fr-directory-header .fr-directory-subtitle {
    display: none;
}

html body .fr-directory-header .fr-directory-title {
    font-family: var(--fr-display);
    font-stretch: 87.5%;
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 1;
    text-transform: uppercase;
}

html body .fr-directory-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 5px;
    background: linear-gradient(90deg, #00A1DE 0 50%, #FAD201 50% 75%, #20603D 75% 100%);
    pointer-events: none;
}

/* Directory filters: same green button on every directory (Academies and
   Coaches do not load pro-pages.css and fell back to a blue button). */
html body .fr-filter-button {
    border-color: #0a7f78;
    background: #0a7f78;
    color: #fff;
}

html body .fr-filter-button:hover,
html body .fr-filter-button:focus-visible {
    border-color: #07665f;
    background: #07665f;
    color: #fff;
}

/* SVG icons (inc/ui/icons.php): inline, aligned with the text, text colour. */
.fr-ui-icon {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -2px;
}


/* ---------- Browser surfaces ---------- */

::selection {
    background: rgba(0, 152, 121, .22);
    color: #0f172a;
}


/* ---- directory-header.css ---- */
/**
 * ==========================================================
 * Football Rwanda
 * Global Directory Header
 * File: directory-header.css
 * ==========================================================
 */


/* ==========================================================
   HEADER
========================================================== */

.fr-directory-header {

    width: 100%;

    margin-bottom: 32px;

    background:
        radial-gradient(120% 90% at 20% 0%, rgba(0,190,160,.22), rgba(0,190,160,0) 60%),
        linear-gradient(160deg,#06182f 0%,#0a2c47 55%,#08524f 100%);

    color: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 16px 40px rgba(6, 24, 47, 0.16);
}


/* ==========================================================
   CONTENT
========================================================== */

.fr-directory-header-content {

    padding: 38px 42px 32px;
}


.fr-directory-subtitle {

    display: block;

    margin-bottom: 8px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 13px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.fr-directory-title {

    margin: 0 0 10px;

    color: #ffffff;

    font-size: 36px;

    line-height: 1.15;

    font-weight: 800;
}


.fr-directory-description {

    max-width: 700px;

    margin: 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 15px;

    line-height: 1.6;
}


/* ==========================================================
   STATS
========================================================== */

.fr-directory-stats {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    background: rgba(0, 0, 0, 0.08);

    border-top:
        1px solid rgba(255, 255, 255, 0.18);
}


.fr-directory-stat {

    min-height: 86px;

    padding: 18px 24px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-right:
        1px solid rgba(255, 255, 255, 0.18);
}


.fr-directory-stat:last-child {
    border-right: none;
}


.fr-directory-stat strong {

    color: #ffffff;

    font-size: 24px;

    line-height: 1.2;

    font-weight: 800;
}


.fr-directory-stat span {

    margin-top: 4px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 11px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    .fr-directory-header-content {

        padding: 32px 30px 28px;
    }


    .fr-directory-title {

        font-size: 32px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .fr-directory-header {

        margin-bottom: 24px;

        border-radius: 14px;
    }


    .fr-directory-header-content {

        padding: 28px 24px;
    }


    .fr-directory-title {

        font-size: 28px;
    }


    .fr-directory-description {

        font-size: 14px;
    }


    .fr-directory-stats {

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


    .fr-directory-stat {

        min-height: 76px;

        padding: 15px 18px;
    }


    .fr-directory-stat:nth-child(2) {

        border-right: none;
    }


    .fr-directory-stat:nth-child(-n + 2) {

        border-bottom:
            1px solid rgba(255, 255, 255, 0.18);
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .fr-directory-header-content {

        padding: 24px 20px;
    }


    .fr-directory-subtitle {

        font-size: 11px;
    }


    .fr-directory-title {

        font-size: 25px;
    }


    .fr-directory-description {

        font-size: 13px;
    }


    .fr-directory-stat {

        min-height: 70px;

        padding: 13px 12px;
    }


    .fr-directory-stat strong {

        font-size: 20px;
    }


    .fr-directory-stat span {

        font-size: 9px;
    }

}

/* ---- section.css ---- */
/* ==========================================================
   SECTION HEADER
========================================================== */

.fr-section-header{

    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:24px;

}

.fr-section-subtitle{

    display:block;
    color:var(--fr-primary);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:8px;

}

.fr-section-title{

    margin:0;
    font-size:38px;
    color:var(--fr-dark);

}

.fr-section-link{

    text-decoration:none;
    font-weight:700;
    color:var(--fr-primary);

}

.fr-section-link:hover{

    text-decoration:underline;

}

@media(max-width:768px){

.fr-section-header{

    flex-direction:column;
    align-items:flex-start;

}

.fr-section-title{

    font-size:30px;

}

}

/* ---- stat-card.css ---- */
/*
====================================================
Football Rwanda
Stat Card
====================================================
*/

.fr-stats-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
    gap:20px;

}

.fr-stat-card{

    background:#fff;
    border-radius:14px;
    padding:20px;
    text-align:center;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    transition:.3s;

}

.fr-stat-card:hover{

    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

.fr-stat-icon{

    font-size:34px;
    margin-bottom:10px;

}

.fr-stat-value{

    font-size:32px;
    font-weight:700;
    color:var(--fr-primary);
    line-height:1;

}

.fr-stat-label{

    margin-top:10px;
    font-size:14px;
    color:#666;

}

/* ---- search.css ---- */
/**
 * ==========================================================
 * Football Rwanda
 * Search Pro
 * Version 5.0
 * ==========================================================
 */


/* ==========================================================
   SEARCH WRAPPER
========================================================== */

.fr-search {
    position: relative;
    width: 100%;
    max-width: 730px;
    
}


/* ==========================================================
   INPUT
========================================================== */

.fr-search input {
    width: 80%;
    height: 58px;

    padding: 0 22px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;

    background: #ffffff;

    color: #111827;

    font-size: 16px;
    font-weight: 500;

    box-sizing: border-box;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.fr-search input::placeholder {
    color: #94a3b8;
}

.fr-search input:focus {
    border-color: #00a889;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.14),
        0 0 0 3px rgba(0, 168, 137, 0.12);
}


/* ==========================================================
   RESULTS CONTAINER
========================================================== */

#fr-search-results {
    position: absolute;

    top: 66px;
    left: 0;

    width: 100%;

    display: none;

    background: #ffffff;

    border: 1px solid #e5e7eb;
    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 20px 45px rgba(15, 23, 42, 0.18),
        0 5px 15px rgba(15, 23, 42, 0.08);

    z-index: 999999;

    max-height: 430px;

    overflow-y: auto;
}

#fr-search-results.is-visible {
    display: block;

    animation: frSearchFade 0.18s ease;
}


/* ==========================================================
   ANIMATION
========================================================== */

@keyframes frSearchFade {

    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ==========================================================
   SEARCH GROUP
========================================================== */

.fr-search-group {
    border-bottom: 1px solid #edf0f3;
}

.fr-search-group:last-child {
    border-bottom: none;
}


/* ==========================================================
   GROUP TITLE
========================================================== */

.fr-search-group-title {

    display: flex;
    align-items: center;

    min-height: 38px;

    padding: 0 16px;

    background: #f7f9fb;

    color: #008f79;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


/* ==========================================================
   SEARCH ITEM
========================================================== */

.fr-search-item {

    display: flex;

    align-items: center;

    gap: 12px;

    min-height: 66px;

    padding: 9px 16px;

    text-decoration: none;

    color: #1f2937;

    background: #ffffff;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}

.fr-search-item:hover {
    background: #f5f8fa;
}


/* ==========================================================
   IMAGE
========================================================== */

.fr-search-item img {

    width: 44px;
    height: 44px;

    border-radius: 50%;

    object-fit: cover;

    flex: 0 0 44px;

    border: 1px solid #e5e7eb;

    background: #f3f4f6;
}


/* ==========================================================
   SEARCH CONTENT
========================================================== */

.fr-search-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 3px;
}


.fr-search-content strong {

    display: block;

    color: #111827;

    font-size: 14px;
    font-weight: 700;

    line-height: 1.25;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.fr-search-content span {

    display: block;

    color: #6b7280;

    font-size: 12px;

    line-height: 1.3;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ==========================================================
   TAXONOMY ITEMS
========================================================== */

/*
 * Clubs, Nationalities and Positions can also use
 * .fr-search-item without a player photo.
 */

.fr-search-group .fr-search-item:not(:has(img)) {

    min-height: 48px;

    padding-top: 7px;
    padding-bottom: 7px;
}


/* ==========================================================
   EMPTY RESULT
========================================================== */

.fr-search-empty {

    padding: 20px 16px;

    text-align: center;

    color: #6b7280;

    font-size: 13px;

    background: #ffffff;
}


/* ==========================================================
   SCROLLBAR
========================================================== */

#fr-search-results::-webkit-scrollbar {
    width: 5px;
}

#fr-search-results::-webkit-scrollbar-track {
    background: transparent;
}

#fr-search-results::-webkit-scrollbar-thumb {
    background: #cbd5e1;

    border-radius: 20px;
}

#fr-search-results::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .fr-search {
        max-width: 100%;
    }


    .fr-search input {

        height: 54px;

        padding: 0 18px;

        border-radius: 12px;

        font-size: 15px;
    }


    #fr-search-results {

        top: 61px;

        border-radius: 12px;

        max-height: 380px;
    }


    .fr-search-group-title {

        min-height: 36px;

        padding: 0 14px;

        font-size: 10px;
    }


    .fr-search-item {

        gap: 10px;

        min-height: 60px;

        padding: 8px 14px;
    }


    .fr-search-item img {

        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }


    .fr-search-content strong {
        font-size: 13px;
    }


    .fr-search-content span {
        font-size: 11px;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    #fr-search-results {

        left: 0;

        width: 100%;

        max-height: 350px;
    }


    .fr-search-item {
        padding-left: 12px;
        padding-right: 12px;
    }

}

/* ==========================================================
   SEARCH RESULTS PAGE (search.php)
========================================================== */

.fr-search-page {
    padding: 40px 0 70px;
}

.fr-search-page .fr-container {
    max-width: 860px;
    margin: 0 auto;
}

.fr-search-page-header {
    margin-bottom: 24px;
}

.fr-search-page-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #009f88;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.fr-search-page-header h1 {
    margin: 0 0 18px;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.fr-search-page-form {
    display: flex;
    gap: 10px;
}

.fr-search-page-form input {
    flex: 1 1 auto;
    min-width: 0;
    height: 52px;
    padding: 0 18px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    font-size: 16px;
    box-sizing: border-box;
}

.fr-search-page-form input:focus {
    border-color: #00a889;
    outline: none;
}

.fr-search-page-form button {
    flex: 0 0 auto;
    padding: 0 24px;
    border: 0;
    border-radius: 12px;
    background: #009f88;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}

.fr-search-page-results .fr-search-list {
    background: #ffffff;
    border: 1px solid #e5ebf0;
    border-radius: 16px;
    overflow: hidden;
}

@media (max-width: 600px) {
    .fr-search-page-header h1 {
        font-size: 28px;
    }
}


/* ---- player-card.css ---- */
/**
 * Football Rwanda
 * Component: Player Card
 * Version: 8.0
 *
 * IMPORTANT:
 * - Based on the real player-card.php structure.
 * - Does NOT change the player grid.
 * - Does NOT modify global stat-card.css.
 * - Only styles stat-card instances INSIDE .fr-player-stats.
 */

/* ==========================================================
   PLAYER CARD
========================================================== */

.fr-player-card {
    width: 100%;
    min-width: 0;
    height: 160px;
    min-height: 160px;
    max-height: 160px;

    display: flex;
    flex-direction: row;

    overflow: hidden;

    border: 1px solid #dfe5ec;
    border-radius: 14px;

    background: #f7f9fb;

    box-sizing: border-box;
}

/* ==========================================================
   PLAYER IMAGE
========================================================== */

.fr-player-card .fr-player-image {
    position: relative;

    flex: 0 0 140px;
    width: 140px;
    min-width: 140px;
    max-width: 140px;

    height: 160px;

    display: block;

    overflow: hidden;

    background: #e3e3e3;

    box-sizing: border-box;
}

.fr-player-card .fr-player-photo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* ==========================================================
   SHIRT NUMBER
========================================================== */

.fr-player-card .fr-shirt-number {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--fr-primary);
    color: #fff;

    font-size: 14px;
    line-height: 1;
    font-weight: 700;

    z-index: 2;
}

/* ==========================================================
   CONTENT
========================================================== */

.fr-player-card .fr-player-content {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;
    min-height: 0;

    padding: 11px 13px 10px;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    box-sizing: border-box;

    overflow: hidden;
}

/* ==========================================================
   PLAYER NAME
========================================================== */

.fr-player-card .fr-player-name {
    flex: 0 0 auto;

    width: 100%;
    min-width: 0;

    margin: 0 0 5px;

    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-player-card .fr-player-name a {
    display: block;

    width: 100%;
    max-width: 100%;

    color: inherit;
    text-decoration: none;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================
   META
========================================================== */

.fr-player-card .fr-player-meta {
    flex: 0 0 auto;

    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 3px;

    margin: 0;

    font-size: 11px;
    line-height: 1.25;

    overflow: hidden;
}

/* Each metadata item stays on its own line */
.fr-player-card .fr-meta-item {
    display: flex;
    align-items: center;

    width: 100%;
    min-width: 0;
    max-width: 100%;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-player-card .fr-meta-item a {
    display: block;

    max-width: 100%;

    color: inherit;
    text-decoration: none;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================
   NATIONALITY / FLAG
========================================================== */

/*
 * Supports the real flag image returned by fr_get_flag().
 *
 * The selector is intentionally generic so it can work with
 * existing nationality markup without affecting other images.
 */

.fr-player-card .fr-player-meta img.fr-nationality-flag {
    display: inline-block;

    width: 18px !important;
    height: 12px !important;

    min-width: 18px !important;
    max-width: 18px !important;

    min-height: 12px !important;
    max-height: 12px !important;

    margin: 0 6px 0 0 !important;

    object-fit: cover;

    vertical-align: middle;

    border-radius: 2px;

    flex: 0 0 auto;
}

/* ==========================================================
   STATS AREA
========================================================== */

.fr-player-card .fr-player-stats {
    flex: 0 0 auto;

    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 18px;

    margin: 7px 0 6px;

    overflow: hidden;
}

/* ==========================================================
   NESTED STAT CARDS
========================================================== */

.fr-player-card .fr-player-stats > * {
    flex: 0 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 4px !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    overflow: visible !important;
}

.fr-player-card .fr-player-stats .fr-stat-card {
    flex: 0 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.fr-player-card .fr-player-stats .fr-stat-icon {
    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    font-size: 16px !important;
    line-height: 1 !important;
}

.fr-player-card .fr-player-stats .fr-stat-value {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
}

.fr-player-card .fr-player-stats .fr-stat-label {
    margin: 0 !important;
    padding: 0 !important;

    font-size: 8px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    text-transform: uppercase;
    letter-spacing: .35px;
}

/* Generic stat-card support */

.fr-player-card .fr-player-stats .stat-card {
    flex: 0 1 auto !important;

    width: auto !important;
    min-width: 0 !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    gap: 4px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ==========================================================
   BUTTON
========================================================== */

.fr-player-card .fr-player-button {
    flex: 0 0 auto;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: auto;
    padding: 6px 10px;

    min-height: 25px;

    border: 0;
    border-radius: 6px;

    background: var(--fr-primary);
    color: #fff !important;

    font-size: 10px;
    line-height: 1.1;
    font-weight: 700;

    text-decoration: none;

    box-sizing: border-box;
}

.fr-player-card .fr-player-button:hover {
    color: #fff !important;
}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 992px) {

    .fr-player-card {
        height: 160px;
        min-height: 160px;
        max-height: 160px;
    }

    .fr-player-card .fr-player-image {
        flex-basis: 120px;
        width: 120px;
        min-width: 120px;
        max-width: 120px;

        height: 160px;
    }

    .fr-player-card .fr-player-content {
        padding: 10px 12px;
    }
}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 700px) {

    .fr-player-card .fr-player-image {
        flex-basis: 110px;
        width: 110px;
        min-width: 110px;
        max-width: 110px;
    }

    .fr-player-card .fr-player-content {
        padding: 10px 11px;
    }

    .fr-player-card .fr-player-name {
        font-size: 15px;
    }

    .fr-player-card .fr-player-meta {
        font-size: 10px;
    }

    .fr-player-card .fr-player-stats {
        gap: 12px;
        margin-top: 6px;
    }

    .fr-player-card .fr-player-button {
        min-height: 24px;
        padding: 5px 8px;
    }
}

/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

    .fr-player-card {
        height: 150px;
        min-height: 150px;
        max-height: 150px;
    }

    .fr-player-card .fr-player-image {
        flex-basis: 100px;
        width: 100px;
        min-width: 100px;
        max-width: 100px;

        height: 150px;
    }

    .fr-player-card .fr-player-content {
        padding: 9px 10px;
    }

    .fr-player-card .fr-player-name {
        font-size: 14px;
    }

    .fr-player-card .fr-player-meta {
        font-size: 9px;
    }

    .fr-player-card .fr-player-stats {
        gap: 10px;
    }

    .fr-player-card .fr-player-stats .fr-stat-icon {
        font-size: 14px !important;
    }

    .fr-player-card .fr-player-stats .fr-stat-value {
        font-size: 14px !important;
    }

    .fr-player-card .fr-player-stats .fr-stat-label {
        font-size: 7px !important;
    }
}

/* ==========================================================
   PLAYER GRID
   DO NOT CHANGE
========================================================== */

.fr-player-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    width: 100%;
}

@media (max-width: 992px) {

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

@media (max-width: 600px) {

    .fr-player-grid {
        grid-template-columns: 1fr;
    }
}

/* Club logo in the card meta (replaces the stadium emoji) */
.fr-player-card .fr-meta-club-logo {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
}

/* Current club line (Players Abroad cards) */
html body .fr-player-card .fr-meta-club-current {
    align-items: center;
}
html body .fr-player-card .fr-meta-club-text {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}
html body .fr-player-card .fr-meta-club-text small {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0a7f78;
}
html body .fr-player-card .fr-meta-club-text strong {
    font-size: 14px;
    font-weight: 700;
    color: #06182f;
}
html body .fr-player-card .fr-meta-club-text em.fr-meta-club-country {
    font-style: normal;
    font-size: 12px;
    font-weight: 500;
    color: #62748a;
}

/* Abroad cards: extra club + country lines need more height */
html body .fr-player-card.fr-player-card--abroad {
    height: auto;
    min-height: 190px;
    max-height: none;
}
html body .fr-player-card.fr-player-card--abroad .fr-player-image {
    height: auto;
    min-height: 190px;
    align-self: stretch;
}
html body .fr-player-card.fr-player-card--abroad .fr-player-content {
    overflow: visible;
}

/* Country · league line: wrap instead of being cut */
html body .fr-player-card .fr-meta-club-text em.fr-meta-club-country {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}


/* ---- club-card.css ---- */


/* ==================================================
   CLUB CARD
================================================== */

.fr-club-card {
    width: 100%;
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    background: #ffffff;

    border: 1px solid #e4ebf0;
    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 6px 20px rgba(18, 60, 102, .07);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.fr-club-card:hover {
    transform: translateY(-4px);

    border-color: #d2dfe7;

    box-shadow:
        0 14px 32px rgba(18, 60, 102, .12);
}

/* ==================================================
   CLUB IMAGE
   Balanced logo presentation
================================================== */

.fr-club-image {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 170px;

    padding: 16px;

    box-sizing: border-box;

    background: linear-gradient(
        180deg,
        #f8fafc 0%,
        #f2f6f8 100%
    );

    border-bottom: 1px solid #edf2f5;

    overflow: hidden;
}

/* ==================================================
   CLUB LOGO
================================================== */

.fr-club-image img {
    display: block;

    width: auto;
    height: auto;

    /*
     * Limits the logo while preserving
     * its original proportions.
     */
    max-width: 135px;
    max-height: 135px;

    object-fit: contain;
    object-position: center;

    transition:
        transform .25s ease;
}

/* ==================================================
   LOGO HOVER
================================================== */

.fr-club-card:hover
.fr-club-image img {
    transform: scale(1.06);
}

/* ==================================================
   CLUB CONTENT
================================================== */

.fr-club-content {
    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 16px 16px 15px;

    gap: 9px;

    text-align: center;
}

/* ==================================================
   CLUB NAME
================================================== */

.fr-club-name {
    margin: 0;

    font-size: 17px;

    line-height: 1.25;

    font-weight: 800;
}

.fr-club-name a {
    color: #123c66;

    text-decoration: none;

    transition:
        color .2s ease;
}

.fr-club-name a:hover {
    color: #009f83;
}

/* ==================================================
   CLUB META
================================================== */

.fr-club-meta {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    color: #718096;

    font-size: 11px;

    line-height: 1.3;

    min-height: 22px;
}

.fr-club-meta-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    font-size: 12px;
}

/* ==================================================
   PLAYERS COUNT
================================================== */

.fr-club-players {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 5px;

    margin-top: auto;

    padding-top: 5px;

    color: #009f83;

    font-size: 11px;

    font-weight: 800;
}

.fr-club-players::before {
    content: "👥";

    font-size: 12px;
}

/* ==================================================
   BUTTON
================================================== */

.fr-club-button {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    width: 100%;

    box-sizing: border-box;

    margin-top: 5px;

    padding: 9px 12px;

    border-radius: 8px;

    background: #123c66;

    color: #ffffff;

    text-align: center;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    transition:
        background .2s ease,
        transform .2s ease;
}

.fr-club-button:hover {
    background: #009f83;

    color: #ffffff;

    text-decoration: none;

    transform: translateY(-1px);
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 992px) {

.fr-club-image {
        height: 155px;
    }

}

/* ==================================================
   MOBILE
================================================== */

@media (max-width: 576px) {

@media (max-width: 576px) {

    .fr-club-image {
        height: 145px;
        padding: 16px;
    }

    .fr-club-image img {
        max-width: 110px;
        max-height: 110px;
    }

}
    .fr-club-content {
        padding: 15px;
    }

.fr-club-name {
        font-size: 16px;
    }

.fr-club-meta {
        font-size: 11px;
    }

}

/* ---- player-navigation.css ---- */
/* ==========================================================
   FOOTBALL RWANDA
   PLAYER NAVIGATION
========================================================== */

.fr-player-navigation {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

    width: 100%;

}


/* ==========================================================
   NAVIGATION ITEM
========================================================== */

.fr-player-navigation-item {

    min-width: 0;

}


/* ==========================================================
   LINK
========================================================== */

.fr-player-navigation-link {

    display: flex;

    align-items: center;

    gap: 16px;

    width: 100%;

    min-height: 82px;

    padding: 16px 20px;

    box-sizing: border-box;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.05);

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;

}


/* ==========================================================
   HOVER
========================================================== */

.fr-player-navigation-link:hover {

    transform: translateY(-2px);

    border-color: #d1d5db;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

}


/* ==========================================================
   PREVIOUS
========================================================== */

.fr-player-navigation-previous
.fr-player-navigation-link {

    justify-content: flex-start;

}


/* ==========================================================
   NEXT
========================================================== */

.fr-player-navigation-next
.fr-player-navigation-link {

    justify-content: flex-end;

    text-align: right;

}


/* ==========================================================
   ARROW
========================================================== */

.fr-player-navigation-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    min-width: 42px;

    height: 42px;

    background: #f3f4f6;

    border-radius: 10px;

    font-size: 22px;

    font-weight: 700;

    color: #009f83;

}


/* ==========================================================
   CONTENT
========================================================== */

.fr-player-navigation-content {

    display: flex;

    flex-direction: column;

    min-width: 0;

}


/* ==========================================================
   LABEL
========================================================== */

.fr-player-navigation-content small {

    margin-bottom: 5px;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 500;

    color: #6b7280;

}


/* ==========================================================
   PLAYER NAME
========================================================== */

.fr-player-navigation-content strong {

    overflow: hidden;

    font-size: 15px;

    line-height: 1.4;

    font-weight: 700;

    color: #111827;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px) {

    .fr-player-navigation {

        grid-template-columns: 1fr;

        gap: 12px;

    }


    .fr-player-navigation-next
    .fr-player-navigation-link {

        justify-content: flex-start;

        text-align: left;

    }


    .fr-player-navigation-link {

        min-height: 72px;

        padding: 14px 16px;

    }


    .fr-player-navigation-arrow {

        width: 38px;

        min-width: 38px;

        height: 38px;

        font-size: 20px;

    }

}

/* ---- competition-card.css ---- */
/*
====================================================
Football Rwanda
Competition Card
File: competition-card.css
====================================================
*/


/* ==================================================
   COMPETITION GRID
================================================== */

.fr-competition-grid {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 30px;

    width: 100%;

    margin-top: 10px;
}


/* ==================================================
   COMPETITION CARD
================================================== */

.fr-competition-card {

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;
    height: 100%;

    background: #ffffff;

    border: 1px solid #e5ebf0;

    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 6px 20px rgba(18, 60, 102, 0.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


.fr-competition-card:hover {

    transform: translateY(-5px);

    border-color: #d3e0e8;

    box-shadow:
        0 16px 34px rgba(18, 60, 102, 0.13);
}


/* ==================================================
   COMPETITION IMAGE
================================================== */

.fr-competition-image {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 190px;

    padding: 22px;

    box-sizing: border-box;

    background: #f7fafc;

    overflow: hidden;

    text-decoration: none;
}


.fr-competition-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: center;

    transition:
        transform .3s ease;
}


.fr-competition-card:hover
.fr-competition-image img {

    transform: scale(1.05);
}


/* ==================================================
   PLACEHOLDER
================================================== */

.fr-competition-placeholder {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    border-radius: 50%;

    background: #eaf7f4;

    color: #009f83;

    font-size: 30px;
}


/* ==================================================
   CONTENT
================================================== */

.fr-competition-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 20px;
}


/* ==================================================
   NAME
================================================== */

.fr-competition-name {

    margin: 0 0 10px;

    font-size: 21px;

    line-height: 1.3;

    font-weight: 800;

    text-align: center;
}


.fr-competition-name a {

    color: #123c66;

    text-decoration: none;

    transition:
        color .2s ease;
}


.fr-competition-name a:hover {

    color: #009f83;
}


/* ==================================================
   SEASON
================================================== */

.fr-competition-season {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-bottom: 12px;

    color: #68798a;

    font-size: 13px;

    line-height: 1.4;
}


.fr-competition-meta-icon {

    font-size: 13px;
}


/* ==================================================
   DESCRIPTION
================================================== */

.fr-competition-description {

    margin-bottom: 20px;

    color: #68798a;

    font-size: 13px;

    line-height: 1.6;

    text-align: center;
}


/* ==================================================
   BUTTON
================================================== */

.fr-competition-button {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    width: 100%;

    margin-top: auto;

    padding: 11px 14px;

    box-sizing: border-box;

    border-radius: 8px;

    background: #123c66;

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;

    font-weight: 800;

    transition:
        background .2s ease,
        transform .2s ease;
}


.fr-competition-button:hover {

    background: #009f83;

    color: #ffffff;

    text-decoration: none;

    transform: translateY(-1px);
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 992px) {

    .fr-competition-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 24px;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 576px) {

    .fr-competition-grid {

        grid-template-columns: 1fr;

        gap: 20px;
    }


    .fr-competition-image {

        height: 180px;

        padding: 20px;
    }


    .fr-competition-content {

        padding: 18px;
    }


    .fr-competition-name {

        font-size: 19px;
    }

}

/* ---- home.css ---- */
/*==========================================================
   FOOTBALL RWANDA
   HOME PAGE
   ==========================================================*/
/*==========================================================
   1. HOME GLOBAL
   ==========================================================*/
.fr-site-main {
    width: 100%;
    overflow: hidden;
}
.fr-home-dashboard-section {
    width: 100%;
    padding: 20px 0;
}
.fr-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/*==========================================================
   2. HERO
   ==========================================================*/
.fr-hero {
    background-color: #031826; /* fallback if image is missing */
}

/*Stronger readability on the left, while keeping the players visible.*/
.fr-hero::before {
    background: linear-gradient(
            90deg,
            rgba(3, 24, 38, .78) 0%,
            rgba(3, 24, 38, .62) 32%,
            rgba(3, 24, 38, .18) 62%,
            rgba(3, 24, 38, 0) 100%
        );
}
.fr-hero-badge {
    justify-content: flex-start;
}
.fr-hero-actions {
    margin-bottom: 0;
}

/*==========================================================
   HERO — TABLET
   ==========================================================*/
@media (max-width: 1100px) {
    .fr-hero {
        background-position: center center;
    }
}

/*==========================================================
   HERO — MOBILE
   ==========================================================*/
@media (max-width: 767px) {
    .fr-hero::before {
        background: linear-gradient(
                90deg,
                rgba(3, 24, 38, .84) 0%,
                rgba(3, 24, 38, .68) 55%,
                rgba(3, 24, 38, .32) 100%
            );
    }
    .fr-hero-actions {
        justify-content: flex-start;
    }
}

/*==========================================================
   HERO — MOBILE
   ==========================================================*/
@media (max-width: 767px) {
    .fr-hero-content {
        max-width: 100%;
    }
    .fr-hero-badge {
        margin-bottom: 18px;
    }
    .fr-hero-title {
        margin-bottom: 14px;
        line-height: 1.08;
        white-space: normal;
    }
    .fr-hero-text {
        max-width: 500px;
        margin-bottom: 20px;
        font-size: 13px;
    }
    .fr-hero-actions {
        flex-wrap: wrap;
    }
    .fr-hero-button {
        min-width: 140px;
    }
    .fr-hero-stats {
        margin-top: 26px;
    }
    .fr-hero-stat {
        padding: 13px 7px;
    }
    .fr-hero-stat strong {
        font-size: 18px;
    }
    .fr-hero-stat span {
        font-size: 7px;
    }
}

/*==========================================================
   HERO — SMALL MOBILE
   ==========================================================*/
@media (max-width: 480px) {
    .fr-hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .fr-hero-button {
        width: 100%;
        max-width: 220px;
    }
    .fr-hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .fr-hero-stat:nth-child(2) {
        border-right: 0;
    }
    .fr-hero-stat:nth-child(3),
    .fr-hero-stat:nth-child(4) {
        border-top: 1px solid rgba(0,159,136,.35);
    }
    .fr-hero-stat:nth-child(4) {
        border-right: 0;
    }
}

/*==========================================================
   8. FEATURED MATCH
   ==========================================================*/
.fr-home-featured-match {
    width: 100%;
    background: #066138;
    padding: 65px 0;
}
.fr-home-featured-inner {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}
.fr-home-featured-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}
.fr-home-featured-header h2 {
    margin: 0;
    color: #123c66;
    font-size: 34px;
    line-height: 1.1;
    font-weight: 800;
}
.fr-home-featured-card {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(
            100deg,
            #164b75 0%,
            #07536f 50%,
            #009f88 100%
        );
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(18,60,102,.14);
    transition: transform .2s ease,
        box-shadow .2s ease;
}
.fr-home-featured-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(18,60,102,.20);
}
.fr-home-featured-date {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 15px;
    background: rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.85);
    font-size: 9px;
    font-weight: 800;
}
.fr-home-featured-match-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr)
        180px
        minmax(0, 1fr);
    align-items: center;
    gap: 25px;
    padding: 30px 45px;
}
.fr-home-featured-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.fr-home-featured-logo {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.fr-home-featured-logo img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}
.fr-home-featured-team strong {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}
.fr-home-featured-team small {
    margin-top: 3px;
    color: rgba(255,255,255,.65);
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.fr-home-featured-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.fr-home-featured-ft {
    display: inline-flex;
    margin-bottom: 9px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    color: #ffffff;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .8px;
}
.fr-home-featured-score > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.fr-home-featured-score strong {
    font-size: 38px;
    line-height: 1;
    font-weight: 900;
}
.fr-home-featured-score > div span {
    color: rgba(255,255,255,.65);
    font-size: 22px;
}
.fr-home-featured-footer {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: rgba(0,0,0,.10);
    border-top: 1px solid rgba(255,255,255,.10);
    color: #ffffff;
    font-size: 8px;
    font-weight: 900;
}

/*POSITION*/
.table-position {
    width: 45px;
}

/*CLUB*/
.table-club {
    width: 40%;
    text-align: left !important;
}

/*POINTS*/
.table-points {
    width: 55px;
}

/*GOAL DIFFERENCE*/
.gd-positive {
    color: #009f88;
    font-weight: 800;
}
.gd-negative {
    color: #d66b6b;
    font-weight: 800;
}
.gd-zero {
    color: #70839a;
    font-weight: 700;
}

/*==========================================================
   PLAYERS GRID
   ==========================================================*/
.fr-home-players .fr-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}
.fr-home-players .fr-player-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

/*==========================================================
   PLAYERS — TABLET
   ==========================================================*/
@media (max-width: 900px) {
    .fr-home-players .fr-player-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

/*==========================================================
   PLAYERS — MOBILE
   ==========================================================*/
@media (max-width: 600px) {
    .fr-home-players {
        padding: 50px 0;
    }
    .fr-home-players .fr-container {
        width: calc(100% - 28px);
    }
    .fr-home-players .fr-player-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/*==========================================================
   14. CTA
   ==========================================================*/
.fr-home-cta {
    width: 100%;
    padding: 45px 0;
}
.fr-cta {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 32px 40px;
    box-sizing: border-box;
    border-radius: 20px;
    background: linear-gradient(
        100deg,
        #007e6d,
        #009f88
    );
    color: #ffffff;
    text-align: center;
    box-shadow: 0 12px 35px rgba(0, 126, 109, .16);
}
.fr-cta-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}
.fr-cta-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp(20px, 4vw, 32px);
    line-height: 1.1;
    font-weight: 800;
}
.fr-cta-text {
    max-width: 650px;
    margin: 10px auto 18px;
    color: rgba(255,255,255,.90);
    font-size: 14px;
    line-height: 1.5;
}
.fr-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.fr-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 1px solid #ffffff;
    border-radius: 8px;
    background: #ffffff;
    color: #007e6d;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 800;
    transition: background .2s ease,
        color .2s ease,
        transform .2s ease;
}
.fr-cta-button:hover {
    background: transparent;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
}
.fr-cta-button-secondary {
    background: transparent;
    color: #ffffff;
}
.fr-cta-button-secondary:hover {
    background: #ffffff;
    color: #007e6d;
}

/*==========================================================
   CTA — MOBILE
   ==========================================================*/
@media (max-width: 600px) {
    .fr-home-cta {
        padding: 50px 0;
    }
    .fr-cta {
        padding: 42px 22px;
        border-radius: 16px;
    }
    .fr-cta-title {
        font-size: 30px;
    }
    .fr-cta-text {
        font-size: 13px;
        margin-bottom: 22px;
    }
    .fr-cta-actions {
        flex-direction: column;
    }
    .fr-cta-button {
        width: 100%;
        max-width: 240px;
    }
}

/*==========================================================
   15. TABLET
   ==========================================================*/
@media (max-width: 900px) {
    .fr-home-featured-match-body {
        grid-template-columns: minmax(0, 1fr)
            150px
            minmax(0, 1fr);
        padding: 28px 30px;
    }
    .fr-hero {
        min-height: 580px;
    }
}

/*==========================================================
   16. MOBILE
   ==========================================================*/
@media (max-width: 600px) {
    .fr-container,
    .fr-home-featured-inner,
    .fr-home-players,
    .fr-home-cta {
        width: min(
            calc(100% - 28px),
            600px
        );
    }
    /*HERO*/
    .fr-hero {
        min-height: 650px;
        background-position: center;
    }
    .fr-hero-title {
        font-size: clamp(
            36px,
            10vw,
            50px
        );
        letter-spacing: -1px;
    }
    .fr-hero-text {
        font-size: 13px;
    }
    .fr-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .fr-hero-button {
        width: 100%;
    }
    .fr-hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }
    .fr-hero-stat {
        padding: 13px 8px;
        border-right: 0;
        border-bottom: 1px solid rgba(0,159,136,.30);
    }
    .fr-hero-stat:nth-child(odd) {
        border-right: 1px solid rgba(0,159,136,.30);
    }
    .fr-hero-stat:nth-child(3),
    .fr-hero-stat:nth-child(4) {
        border-bottom: 0;
    }
    /*SECTION HEADINGS*/
    .fr-home-featured-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
    .fr-home-featured-header h2 {
        font-size: 30px;
    }
    /*SECTIONS*/
    .fr-home-dashboard-section,
    .fr-home-featured-match,
    .fr-home-players {
        padding: 50px 0;
    }

    /*FEATURED MATCH*/
    .fr-home-featured-match-body {
        grid-template-columns: minmax(0, 1fr)
            90px
            minmax(0, 1fr);
        gap: 8px;
        padding: 25px 12px;
    }
    .fr-home-featured-logo,
    .fr-home-featured-logo img {
        width: 48px;
        height: 48px;
    }
    .fr-home-featured-team strong {
        font-size: 11px;
    }
    .fr-home-featured-score strong {
        font-size: 30px;
    }
    .fr-home-featured-score > div {
        gap: 5px;
    }
    .fr-home-featured-score > div span {
        font-size: 19px;
    }

/*TABLE*/

    .table-position {
        width: 32px;
    }
    .table-club {
        width: 40%;
    }
}

/*==========================================================
   17. VERY SMALL SCREENS
   ==========================================================*/
@media (max-width: 400px) {
    .fr-hero-title {
        font-size: 34px;
    }
    .fr-hero-stats {
        width: 100%;
    }
    .fr-home-featured-match-body {
        grid-template-columns: minmax(0, 1fr)
            75px
            minmax(0, 1fr);
    }
    .fr-home-featured-score strong {
        font-size: 27px;
    }
}

/*==========================================================
   LATEST PLAYERS
   ==========================================================*/
.fr-home-players {
    width: 100%;
    padding: 25px 0;
    background: #ffffff;
}

/*==========================================================
   FEATURED MATCH + FEATURED VIDEO
   ==========================================================*/
.fr-home-featured-columns {
    width: 100%;
    padding: 65px 0;
}
.fr-home-featured-columns-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 42px;
    align-items: start;
}

/** The existing Featured Match component already has its own
 * spacing. Inside the two-column wrapper, remove that outer
 * spacing only so both columns align correctly.*/
.fr-home-featured-columns-grid > .fr-home-featured-match,
.fr-home-featured-columns-grid > .fr-home-featured-video {
    width: 100%;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.fr-home-featured-columns-grid > .fr-home-featured-match
.fr-home-featured-inner {
    width: 100%;
}

/*==========================================================
   FEATURED VIDEO
   ==========================================================*/
.fr-home-featured-video {
    width: 100%;
}
.fr-home-featured-video-inner {
    width: 100%;
}
.fr-home-featured-video-card {
    overflow: hidden;
    width: 100%;
    border-radius: 10px;
    background: linear-gradient(
            100deg,
            #164b75 0%,
            #07536f 50%,
            #009f88 100%
        );
    box-shadow: 0 12px 32px rgba(18,60,102,.14);
}
.fr-home-featured-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #102f55;
}
.fr-home-featured-video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.fr-home-featured-video-empty {
    min-height: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px 25px;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px dashed #d5e0e8;
    border-radius: 10px;
    text-align: center;
}
.fr-home-featured-video-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #e8f7f3;
    color: #009f88;
    font-size: 18px;
}
.fr-home-featured-video-empty h3 {
    margin: 0;
    color: #123c66;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 800;
}
.fr-home-featured-video-empty p {
    margin: 7px 0 0;
    color: #8190a0;
    font-size: 10px;
    line-height: 1.5;
}

/*==========================================================
   TABLET
   ==========================================================*/
@media (max-width: 900px) {
    .fr-home-featured-columns-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }
}

/*==========================================================
   MOBILE
   ==========================================================*/
@media (max-width: 600px) {
    .fr-home-featured-columns {
        padding: 50px 0;
    }
    .fr-home-featured-columns-grid {
        gap: 45px;
    }
    .fr-home-featured-video-empty {
        min-height: 220px;
    }
}

/*==========================================================
   FOOTBALL RWANDA — HOME LIVE MATCHES
   ==========================================================*/
.fr-home-live-matches {
    width: 100%;
    padding: 30px 0;
    background: #f5f8fb;
}
.fr-home-live-matches .fr-container {
    width: 100%;
}

/*==========================================================
   LIVE BADGE
   ==========================================================*/

@keyframes fr-live-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.45;
        transform: scale(0.75);
    }
}

/*==========================================================
   MOBILE
   ==========================================================*/
@media (max-width: 900px) {
    .fr-home-live-matches {
        padding: 55px 0;
    }
}

/*==========================================================
   FEATURED MATCH + FEATURED VIDEO — VISUAL HARMONIZATION
   Scoped only to this two-column block.
   ==========================================================*/
.fr-home-featured-columns-grid > .fr-home-featured-match,
.fr-home-featured-columns-grid > .fr-home-featured-video {
    background: #ffffff;
    border: 1px solid #e5ebf0;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(18, 60, 102, .06);
}

/*Remove the old outer card treatment from Featured Video.
   The video itself remains unchanged.*/
.fr-home-featured-columns-grid .fr-home-featured-video-card {
    border-radius: 10px;
    box-shadow: none;
}

/*Remove the border from the full-width sections*/
.fr-home-players {
    border: 0;
    border-radius: 0;
}

/*Put the border around the actual content container*/
.fr-home-players > .fr-container {
    background: #ffffff;
    border: 1px solid #e5ebf0;
    border-radius: 16px;
    padding: 24px;
    box-sizing: border-box;
}

/*Keep the existing player cards and grid unchanged*/
.fr-home-players .fr-player-grid {
    width: 100%;
}

/*==========================================================
   FEATURED CLUBS — CONTAINER HARMONIZATION
   Border wraps the content area only.
   Club cards and club data remain unchanged.
   ==========================================================*/
.fr-home-featured-clubs > .fr-container {
    background: #ffffff;
    border: 1px solid #e5ebf0;
    border-radius: 16px;
    padding: 24px;
    box-sizing: border-box;
}

/*Mobile*/
@media (max-width: 600px) {
    .fr-home-featured-clubs > .fr-container {
        padding: 18px;
        border-radius: 14px;
    }
}

/*Mobile*/
@media (max-width: 600px) {
    .fr-home-players > .fr-container {
        padding: 18px;
        border-radius: 14px;
    }
}

/*==========================================================
   FOOTBALL RWANDA — FRONT PAGE WHITE BACKGROUND
   Scoped to the homepage sections only.
   Hero image/background remains unchanged.
   ==========================================================*/
.fr-site-main,
.fr-home-dashboard-section,
.fr-home-featured-match,
.fr-home-players,
.fr-home-cta {
    background: #ffffff;
}

/*Mobile*/
@media (max-width: 767px) {
    .fr-hero-title {
        letter-spacing: -1.2px;
    }
}

/*Keep the desktop composition compact.*/
@media (min-width: 1101px) {
    .fr-hero-content {
        transform: translateY(4px);
    }
}

/*The search dropdown must sit above the image and buttons.*/
.fr-hero .fr-search-results {
    position: relative;
    z-index: 101 !important;
}

/*Ensure the following homepage sections stay underneath
   an open search result panel.*/
.fr-home-dashboard-section,
.fr-home-featured-columns,
.fr-home-players,
.fr-home-cta {
    position: relative;
    z-index: 1;
}

/*Desktop*/
@media (min-width: 768px) {
    .fr-hero-actions {
        gap: 9px;
    }
}

/*Mobile*/
@media (max-width: 767px) {
    .fr-hero {
        overflow: visible;
    }
    .fr-hero-actions {
        margin-top: 0;
    }
}

/*==========================================================
   HERO — FINAL CLEAN OVERRIDE
   Based on the exact current server home.css.
   ==========================================================*/
.fr-hero {
    position: relative;
    height: 500px;
    display: flex;
    overflow: visible;
    z-index: 20;
    background-image: linear-gradient(
            90deg,
            rgba(3,24,38,.78) 0%,
            rgba(3,24,38,.58) 34%,
            rgba(3,24,38,.16) 65%,
            rgba(3,24,38,0) 100%
        ),
        url("https://footballtalentsdata.com/wp-content/themes/football-rwanda-v4-nettoye/assets/images/hero.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    color: #fff;
}
.fr-hero::before {
    content: none;
}
.fr-hero-content {
    position: relative;
    z-index: 3;
    margin: 0 auto;
    padding: 24px 0;
    box-sizing: border-box;
    text-align: left;
}
.fr-hero-badge {
    display: inline-flex;
    align-items: center;
    margin: 0 0 10px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(0,159,136,.24);
    color: #fff;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.fr-hero-title {
    margin: 0 0 10px;
    color: #fff;
    font-weight: 900;
    text-align: left;
    white-space: normal;
    text-shadow: 0 2px 10px rgba(0,0,0,.24);
}
.fr-hero-text {
    margin: 0 0 15px;
    color: rgba(255,255,255,.94);
    text-align: left;
}
.fr-hero .fr-search-results,
.fr-hero .search-results {
    position: relative !important;
    z-index: 101 !important;
}
.fr-hero-actions {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.fr-hero-button {
    border-radius: 7px;
    font-weight: 800;
}
.fr-hero-button-primary {
    border: 1px solid #fff;
    background: #fff;
    color: #007e6d;
}
.fr-hero-button-secondary {
    border: 1px solid rgba(255,255,255,.65);
    background: rgba(0,35,48,.30);
    color: #fff;
}
.fr-hero-stats {
    margin: 18px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    align-items: stretch;
    gap: 0;
    border: 1px solid rgba(0,159,136,.50);
    border-radius: 10px;
    background: rgba(0,45,42,.70);
    backdrop-filter: blur(5px);
}
.fr-hero-stat {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(0,159,136,.35);
    text-align: center;
}
.fr-hero-stat:last-child {
    border-right: 0;
}
.fr-hero-stat strong {
    display: block;
    color: #fff;
    line-height: 1;
}
.fr-hero-stat span {
    display: block;
    color: rgba(255,255,255,.82);
    line-height: 1.2;
    text-transform: uppercase;
}
@media (max-width: 1100px) and (min-width: 768px) {
    .fr-hero {
        min-height: 500px;
        height: 500px;
    }
    .fr-hero-title {
        max-width: 560px;
        font-size: 46px;
    }
}
@media (max-width: 767px) {
    .fr-hero {
        height: 620px;
        background-position: 63% center !important;
    }
    .fr-hero-content {
        width: min(100%,calc(100% - 30px));
        padding: 28px 0;
    }
    .fr-hero-stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .fr-hero-stat {
        border-right: 0;
        border-bottom: 1px solid rgba(0,159,136,.30);
    }
    .fr-hero-stat:nth-child(odd) {
        border-right: 1px solid rgba(0,159,136,.30);
    }
    .fr-hero-stat:nth-child(3),
    .fr-hero-stat:nth-child(4) {
        border-bottom: 0;
    }
}
@media (max-width: 480px) {
    .fr-hero {
        min-height: 680px;
        height: 680px;
        background-position: 67% center !important;
    }
}

/*==========================================================
   HERO — COMPACT FINAL TUNING
   Add at the end of assets/css/pages/home.css
   ==========================================================*/
.fr-hero {
    min-height: 500px;
    padding: 0;
    align-items: center;
}
.fr-hero-content {
    width: min(1200px, calc(100% - 40px));
    max-width: 1200px;
}
.fr-hero-badge {
    gap: 10px;
    margin-bottom: 14px;
    padding: 7px 16px 7px 8px;
    font-size: 14px;
    letter-spacing: 1px;
}
.fr-hero-flag {
    display: block;
    flex: 0 0 auto;
    width: 30px;
    height: 20px;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.35);
}
@media (max-width: 480px) {
    .fr-hero-badge {
        gap: 8px;
        padding: 6px 12px 6px 7px;
        font-size: 11.5px;
        letter-spacing: .6px;
    }
    .fr-hero-flag {
        width: 26px;
        height: 17px;
    }
}
.fr-hero-title {
    max-width: 700px;
    margin-bottom: 12px;
    font-size: clamp(40px, 4.3vw, 56px);
    line-height: 1.03;
    letter-spacing: -1.5px;
}
.fr-hero-text {
    max-width: 600px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.5;
}
.fr-hero-actions {
    gap: 9px;
}
.fr-hero-button {
    min-width: 140px;
    min-height: 38px;
    padding: 9px 16px;
    font-size: 14px;
}
.fr-hero-stats {
    width: min(700px, 100%);
    margin-top: 22px;
}
.fr-hero-stat {
    padding: 13px 10px;
}
.fr-hero-stat strong {
    font-size: 28px;
}
.fr-hero-stat span {
    margin-top: 4px;
    font-size: 10px;
}

/*Tablet*/
@media (max-width: 1100px) {
    .fr-hero {
        min-height: 500px;
    }
    .fr-hero-title {
        max-width: 650px;
        font-size: clamp(38px, 4.8vw, 52px);
    }
}

/*Mobile*/
@media (max-width: 767px) {
    .fr-hero {
        min-height: 620px;
    }
    .fr-hero-title {
        max-width: 100%;
        font-size: clamp(36px, 9vw, 46px);
    }
    .fr-hero-stats {
        width: 100%;
    }
}

/*Réduction de l'espace entre la recherche et les boutons*/
.fr-hero-actions {
    margin-top: 10px;
    padding-top: 0;
}

/* =========================================================
   FEATURED MATCH + FEATURED VIDEO — FINAL HEADER ALIGNMENT
   Both cards use the same 24px inner top spacing.
   !important is intentional because the Featured Match
   component contains its own later <style> block.
   ========================================================= */

.fr-home-featured-columns-grid > .fr-home-featured-match,
.fr-home-featured-columns-grid > .fr-home-featured-video {
    padding: 24px !important;
    box-sizing: border-box !important;
}

.fr-home-featured-columns-grid > .fr-home-featured-match .fr-home-featured-inner,
.fr-home-featured-columns-grid > .fr-home-featured-video .fr-home-featured-video-inner {
    width: 100%;
    margin: 0;
    padding: 0;
}

.fr-home-featured-columns-grid
.fr-home-featured-match .fr-home-featured-header,
.fr-home-featured-columns-grid
.fr-home-featured-video .fr-home-featured-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.fr-home-featured-columns-grid
.fr-home-featured-match .fr-home-featured-header > div,
.fr-home-featured-columns-grid
.fr-home-featured-video .fr-home-featured-header > div {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hero: four actions (Players / Clubs / Players Abroad / Academies) */
html body .fr-hero-actions .fr-hero-button {
    min-width: 0;
    flex: 0 1 auto;
    justify-content: center;
}
html body .fr-hero-actions .fr-hero-button-secondary { padding-left: 18px; padding-right: 18px; }
@media (max-width: 600px) {
    html body .fr-hero-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    html body .fr-hero-actions .fr-hero-button-primary { grid-column: 1 / -1; }
    html body .fr-hero-actions .fr-hero-button { width: 100%; padding: 10px 8px; font-size: 13px; }
}

/* ==========================================================
   HERO : darker background, everything centred (search, buttons, stats)
========================================================== */
html body .fr-hero {
    background-image:
        radial-gradient(ellipse at 50% 45%, rgba(3,20,32,.50) 0%, rgba(3,20,32,.78) 100%),
        linear-gradient(rgba(3,20,32,.42), rgba(3,20,32,.42)),
        url("https://footballtalentsdata.com/wp-content/themes/football-rwanda-v4-nettoye/assets/images/hero.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    justify-content: center;
}

html body .fr-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

html body .fr-hero-title,
html body .fr-hero-text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

html body .fr-hero-title { max-width: 820px; }
html body .fr-hero-text  { max-width: 640px; }

html body .fr-hero .fr-search {
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}

html body .fr-hero .fr-search input {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

html body .fr-hero .fr-search-results,
html body .fr-hero .search-results { text-align: left; }

html body .fr-hero-actions {
    justify-content: center;
    margin-top: 14px;
}

html body .fr-hero-stats {
    margin-left: auto;
    margin-right: auto;
}

html body .fr-hero-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(800px, 100%); }

html body .fr-hero-button-coaches {
    border-color: #ffd54a;
    color: #ffd54a;
}
html body .fr-hero-button-coaches:hover { background: #ffd54a; color: #06182f; }

@media (max-width: 767px) {
    html body .fr-hero-stats--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body .fr-hero-stats--5 .fr-hero-stat:last-child { grid-column: 1 / -1; border-right: 0; }
    html body .fr-hero-stats--5 .fr-hero-stat { border-bottom: 1px solid rgba(0,159,136,.35); }
}

@media (max-width: 600px) {
    html body .fr-hero-actions { grid-template-columns: 1fr 1fr; }
    html body .fr-hero-actions .fr-hero-button-primary { grid-column: 1 / -1; }
}
html body .fr-hero-title { text-wrap: balance; }
@media (max-width: 600px) {
    html body .fr-hero-actions { width: 100%; }
    html body .fr-hero-actions .fr-hero-button { width: 100%; max-width: none; }
}

/* Hero title on a single line (tablet and desktop) */
@media (min-width: 700px) {
    html body .fr-hero-title {
        max-width: none;
        white-space: nowrap;
        font-size: clamp(32px, 4.3vw, 56px);
    }
}

/* Hero description on a single line (desktop); wraps normally on small screens */
@media (min-width: 1024px) {
    html body .fr-hero .fr-hero-text {
        max-width: none;
        width: max-content;
        white-space: nowrap;
        font-size: 15px;
    }
}

/*==========================================================
   HERO — NEVER CLIP THE CONTENT (phones + tablets)
   The hero had a fixed height; when the content was taller
   (narrow tablets, large system fonts, long stats) it was
   centred and cut at the top, hiding the
   "Rwanda Football Data Platform" badge.
   The height is now a minimum: the hero grows with its content.
   ==========================================================*/
html body .fr-hero {
    height: auto !important;
    min-height: 500px;
}
html body .fr-hero .fr-hero-content {
    padding-top: 32px;
    padding-bottom: 32px;
}
@media (max-width: 767px) {
    html body .fr-hero { min-height: 620px; }
}
@media (max-width: 480px) {
    html body .fr-hero { min-height: 680px; }
}


/* ---- live-matches.css ---- */
/* ==========================================================
   Football Rwanda - Home: Live now
   template-parts/home/live-matches.php

   Same codes as the Matchday Timeline: navy scoreboard card,
   Saira score, flag yellow reserved for "now" (card border and
   minute), red only for the live dot. Shown only while a game
   is live. Compact: one line for the teams and the score.
   ========================================================== */

.fr-home-live-matches {
    --hl-navy: #031826;
    --hl-navy-2: #0B2A3C;
    --hl-now: #FAD201;
    --hl-red: #e5484d;
    --hl-teal-ink: #007863;
    /* band background: rhythm.css, padding: layout.css */
}


/* ---------- Bar ---------- */

.fr-hlive-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 18px;
    margin-bottom: 14px;
}

html body .fr-site-main .fr-home-live-matches h2.fr-hlive-title {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    color: var(--hl-navy);
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: clamp(24px, 2.6vw, 32px);
    font-stretch: 87.5%;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.005em;
    text-transform: uppercase;
}

.fr-hlive-pulse {
    position: relative;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--hl-red);
}

.fr-hlive-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--hl-red);
    animation: fr-hlive-pulse 1.6s ease-out infinite;
}

@keyframes fr-hlive-pulse {
    from { transform: scale(1); opacity: .55; }
    to   { transform: scale(2.6); opacity: 0; }
}

.fr-hlive-count {
    padding: 4px 9px;
    border-radius: 7px;
    background: var(--hl-now);
    color: var(--hl-navy);
    font-size: .58em;
    line-height: 1;
}

.fr-site-main a.fr-hlive-standings {
    color: var(--hl-teal-ink);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.fr-site-main a.fr-hlive-standings:hover {
    text-decoration: underline;
}


/* ---------- Cards ---------- */

.fr-hlive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.fr-site-main a.fr-hlive-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px 14px 12px;
    border: 2px solid var(--hl-now);
    border-radius: 12px;
    background: linear-gradient(160deg, var(--hl-navy) 0%, var(--hl-navy-2) 100%);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(250, 210, 1, .20), 0 8px 20px rgba(3, 24, 38, .16);
    transition: transform .15s ease-out, box-shadow .15s ease-out;
}

.fr-site-main a.fr-hlive-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(250, 210, 1, .30), 0 12px 28px rgba(3, 24, 38, .22);
}

.fr-hlive-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.fr-hlive-comp {
    min-width: 0;
    overflow: hidden;
    color: #9fb3c2;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fr-hlive-comp em {
    margin-left: 8px;
    color: #fff;
    font-style: normal;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* LIVE + minute counter */
.fr-hlive-state {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--hl-now);
    color: var(--hl-navy);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
}

.fr-hlive-state::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c81e1e;
    animation: fr-hlive-blink 1.2s steps(2, start) infinite;
}

@keyframes fr-hlive-blink {
    to { visibility: hidden; }
}

.fr-hlive-state .fr-live-clock {
    min-width: 2.4em;
    padding-left: 6px;
    border-left: 1px solid rgba(3, 24, 38, .25);
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: 14px;
    font-stretch: 87.5%;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.fr-hlive-state .fr-live-clock:empty {
    display: none;
}

/* Teams + score: one line */

.fr-hlive-teams {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.fr-hlive-team {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.fr-hlive-team--away {
    flex-direction: row-reverse;
    text-align: right;
}

.fr-hlive-logo {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
}

.fr-hlive-logo img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.fr-hlive-team strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.fr-hlive-score {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-stretch: 87.5%;
}

.fr-hlive-score b {
    color: #fff;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.fr-hlive-score i {
    color: #5f7a8c;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}


/* ---------- Responsive ---------- */

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

@media (max-width: 640px) {
    .fr-hlive-grid { grid-template-columns: 1fr; gap: 10px; }
    .fr-hlive-score b { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .fr-hlive-pulse::after,
    .fr-hlive-state::before { animation: none; }
    .fr-site-main a.fr-hlive-card { transition: none; }
    .fr-site-main a.fr-hlive-card:hover { transform: none; }
}


/* ---- matchday-timeline.css ---- */
/* ==========================================================
   Football Rwanda - Home: Matchday Timeline
   template-parts/home/matchday-timeline.php

   Colour jobs (site + flag palette, nothing new):
   - navy      #031826  structure: day headers, league table
   - teal      #009879  results, Top Scorers, "Next up"
   - blue      #0B6FA4  Top Assists (flag blue, darkened for text)
   - flag yellow #FAD201 reserved for "now": the live game or
                 the next kick-off. Nothing else uses it.
   - state pills: green FT, blue scheduled, amber pending,
                  red live / postponed.
   ========================================================== */

.fr-mdt {
    --mdt-navy: #031826;
    --mdt-navy-2: #0B2A3C;
    --mdt-teal: #009879;
    --mdt-teal-ink: #007863;
    --mdt-blue: #0B6FA4;
    --mdt-now: #FAD201;
    --mdt-line: #dbe6e3;
    --mdt-muted: #5b6b7b;

    padding: 56px 0 64px;
    background: #EAF3F1;
}

.fr-mdt .fr-container {
    padding-top: 0;
    padding-bottom: 0;
}

.fr-mdt a {
    color: inherit;
}


/* ---------- Bar: title, stepper, "now" ---------- */

.fr-mdt-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    margin-bottom: 28px;
}

html body.home .fr-mdt-title {
    margin: 0;
    color: var(--mdt-navy);
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: clamp(28px, 3.1vw, 40px);
    font-stretch: 87.5%;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.005em;
    text-transform: uppercase;
}

/* BK Pro League logo before the title (round crop: the file has a white square) */
.fr-mdt-league-logo {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    margin-right: .25em;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: -.2em;
    box-shadow: 0 0 0 2px #fff, 0 4px 12px rgba(3, 24, 38, .18);
}

.fr-mdt-title-md {
    color: var(--mdt-teal-ink);
    white-space: nowrap;
}

.fr-mdt-stepper {
    display: flex;
    gap: 6px;
}

.fr-mdt-stepper a,
.fr-mdt-stepper span {
    min-width: 46px;
    padding: 9px 13px;
    border: 1px solid #c6d6d2;
    border-radius: 9px;
    background: #fff;
    color: var(--mdt-navy);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.fr-mdt-stepper a:hover {
    border-color: var(--mdt-teal);
    color: var(--mdt-teal-ink);
}

.fr-mdt-stepper .is-current {
    border-color: var(--mdt-navy);
    background: var(--mdt-navy);
    color: #fff;
}

.fr-mdt-now {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--mdt-now);
    color: var(--mdt-navy) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(250, 210, 1, .30);
}

.fr-mdt-now:hover {
    box-shadow: 0 8px 22px rgba(250, 210, 1, .45);
}

.fr-mdt-now-label {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 800;
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.fr-mdt-now.is-live .fr-mdt-now-label::before,
.fr-mdt-fixture--live .fr-mdt-stamp::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #c81e1e;
    vertical-align: 1px;
}


/* ---------- Layout ---------- */

/* Days | rail, with the leaders under the days (the rail is the taller column). */
.fr-mdt-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "days rail"
        "leaders rail";
    gap: 28px;
    align-items: start;
}

.fr-mdt-days {
    grid-area: days;
    min-width: 0;
}

/* The matchday: always 3 columns x 2 rows (6 latest games), same on every matchday. */
.fr-mdt-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 14px;
}

.fr-mdt-grid .fr-mdt-fixture {
    margin-bottom: 0;
}

.fr-mdt-rail {
    grid-area: rail;
    display: grid;
    gap: 22px;
}

.fr-mdt-leaders {
    grid-area: leaders;
    display: grid;
    gap: 22px;
}


/* ---------- Day headers ---------- */

html body.home .fr-mdt-day-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 14px;
    padding: 11px 14px;
    border: 0;
    border-radius: 10px;
    background: var(--mdt-navy);
    color: #fff;
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: 20px;
    font-stretch: 87.5%;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.fr-mdt-day-title small {
    color: #9fd9cc;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    white-space: nowrap;
}

html body.home .fr-mdt-day--next .fr-mdt-day-title {
    background: var(--mdt-teal-ink);
}

.fr-mdt-day--next .fr-mdt-day-title small {
    color: #d3f2ea;
}


/* ---------- Fixture card ---------- */

.fr-mdt-fixture {
    position: relative;
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
    padding: 14px 16px;
    border: 1px solid var(--mdt-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(3, 24, 38, .05), 0 6px 16px rgba(3, 24, 38, .04);
    text-decoration: none;
    transition: border-color .15s ease-out, box-shadow .15s ease-out, transform .15s ease-out;
}

.fr-mdt-fixture:hover {
    border-color: var(--mdt-teal);
    box-shadow: 0 2px 4px rgba(3, 24, 38, .06), 0 10px 24px rgba(3, 24, 38, .08);
    transform: translateY(-1px);
}

.fr-mdt-fixture--scheduled {
    padding-right: 84px;
}

.fr-mdt-team {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    color: var(--mdt-navy);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.fr-mdt-team-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fr-mdt-team.is-winner {
    font-weight: 800;
}

.fr-mdt-team.is-loser {
    color: #4b5a6a;
}

.fr-mdt-crest {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.fr-mdt-crest--empty {
    display: block;
    border-radius: 50%;
    background: #e3e9f0;
}

.fr-mdt-score,
.fr-mdt-kickoff {
    color: var(--mdt-navy);
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-stretch: 87.5%;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.fr-mdt-score {
    min-width: 30px;
    padding: 3px 0;
    border-radius: 6px;
    background: #eef3f6;
    font-size: 22px;
    text-align: center;
}

.fr-mdt-team.is-winner .fr-mdt-score {
    background: var(--mdt-teal);
    color: #fff;
}

.fr-mdt-team.is-loser .fr-mdt-score {
    color: #5b6b7b;
}

.fr-mdt-kickoff {
    position: absolute;
    top: 14px;
    right: 16px;
    padding: 6px 9px;
    border-radius: 8px;
    background: #eef3f6;
    font-size: 22px;
}

.fr-mdt-fixture.is-now .fr-mdt-kickoff {
    background: var(--mdt-now);
}

.fr-mdt-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 2px;
}

.fr-mdt-when {
    color: var(--mdt-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
}

.fr-mdt-stamp {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: #E3F4EF;
    color: #00614c;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.4;
    text-transform: uppercase;
}

.fr-mdt-fixture--scheduled .fr-mdt-stamp {
    background: #E4EFF8;
    color: #0B4F7A;
}

.fr-mdt-fixture.is-pending .fr-mdt-stamp {
    background: #FEF3C7;
    color: #8A3B0B;
}

.fr-mdt-fixture--live .fr-mdt-stamp,
.fr-mdt-fixture--postponed .fr-mdt-stamp,
.fr-mdt-fixture--cancelled .fr-mdt-stamp {
    background: #FDE8E8;
    color: #A61B1B;
}

.fr-mdt-details {
    color: var(--mdt-teal-ink);
    font-size: 12px;
    font-weight: 700;
}

.fr-mdt-fixture:hover .fr-mdt-details {
    text-decoration: underline;
}

/* "Now": the live game or the next kick-off */
.fr-mdt-fixture.is-now {
    border: 2px solid var(--mdt-now);
    padding: 13px 15px;
    box-shadow: 0 8px 22px rgba(250, 210, 1, .30);
}

.fr-mdt-fixture--scheduled.is-now {
    padding-right: 83px;
}

.fr-mdt-fixture.is-now .fr-mdt-stamp {
    background: var(--mdt-now);
    color: var(--mdt-navy);
}

.fr-mdt-more {
    display: inline-block;
    margin-top: 2px;
    color: var(--mdt-teal-ink) !important;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}

.fr-mdt-more:hover {
    text-decoration: underline;
}


/* ---------- Panels (league table, leaders) ---------- */

.fr-mdt-panel {
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(3, 24, 38, .05), 0 8px 22px rgba(3, 24, 38, .06);
}

.fr-mdt-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: var(--mdt-navy);
}

html body.home .fr-mdt-panel-head h3 {
    margin: 0;
    color: #fff;
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: 22px;
    font-stretch: 87.5%;
    font-weight: 800;
    line-height: 1.1;
}

.fr-mdt-panel-head a {
    color: #F4B400 !important;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.fr-mdt-panel-head a:hover {
    text-decoration: underline;
}

.fr-mdt-leaders-panel--goals .fr-mdt-panel-head {
    background: var(--mdt-teal-ink);
}

.fr-mdt-leaders-panel--assists .fr-mdt-panel-head {
    background: var(--mdt-blue);
}

.fr-mdt-leaders-panel .fr-mdt-panel-head a {
    color: #fff !important;
}


/* ---------- League table ---------- */

.fr-mdt-table {
    width: calc(100% - 40px);
    margin: 8px 20px 14px;
    border-collapse: collapse;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.fr-mdt-table th {
    padding: 8px 4px;
    border-bottom: 1px solid #e3e9f0;
    background: none;
    color: var(--mdt-muted);
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
}

.fr-mdt-table td {
    padding: 10px 4px;
    border-bottom: 1px solid #eef2f6;
    color: #334155;
}

.fr-mdt-table tr:last-child td {
    border-bottom: 0;
}

.fr-mdt-table th:last-child,
.fr-mdt-table td:last-child {
    text-align: right;
}

.fr-mdt-table tbody tr:first-child td {
    background: #E8F5F1;
}

.fr-mdt-table tbody tr:first-child td:first-child {
    border-radius: 8px 0 0 8px;
}

.fr-mdt-table tbody tr:first-child td:last-child {
    border-radius: 0 8px 8px 0;
}

/* A span inside the cell: a flex <td> breaks the table's row borders. */
.fr-mdt-table-club {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--mdt-navy) !important;
    font-weight: 600;
}

.fr-mdt-table-club a {
    text-decoration: none;
}

.fr-mdt-table-club a:hover {
    color: var(--mdt-teal-ink);
}

.fr-mdt-pts {
    color: var(--mdt-navy) !important;
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: 18px;
    font-stretch: 87.5%;
    font-weight: 800;
}

.fr-mdt-table tbody tr:first-child .fr-mdt-pts {
    color: var(--mdt-teal-ink) !important;
}


/* ---------- Leaders (Top Scorers / Top Assists) ---------- */

.fr-mdt-scorers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0 28px;
    margin: 0;
    padding: 10px 20px 14px;
    list-style: none;
}

.fr-mdt-scorers li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 10px 0;
}

.fr-mdt-scorers a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    text-decoration: none;
}

.fr-mdt-scorer-photo {
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #e8eef4;
    object-fit: cover;
    object-position: center top;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #bfe5dc;
}

.fr-mdt-leaders-panel--assists .fr-mdt-scorer-photo {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #bcdcef;
}

.fr-mdt-scorer-text {
    min-width: 0;
}

.fr-mdt-scorer-name {
    display: block;
    color: var(--mdt-navy);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
}

.fr-mdt-scorers a:hover .fr-mdt-scorer-name {
    color: var(--mdt-teal-ink);
}

.fr-mdt-scorers small {
    display: block;
    margin-top: 2px;
    color: var(--mdt-muted);
    font-size: 12.5px;
}

/* Club line: crest + name */
.fr-mdt-scorers .fr-mdt-scorer-club {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.fr-mdt-scorer-club img {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.fr-mdt-goals {
    flex: 0 0 auto;
    min-width: 40px;
    padding: 6px 8px;
    border-radius: 10px;
    background: #E3F4EF;
    color: var(--mdt-teal-ink);
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: 22px;
    font-stretch: 87.5%;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
}

.fr-mdt-leaders-panel--assists .fr-mdt-goals {
    background: #E4EFF8;
    color: var(--mdt-blue);
}


/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .fr-mdt-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
            "days"
            "rail"
            "leaders";
    }

    .fr-mdt-rail {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

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

@media (max-width: 600px) {
    .fr-mdt {
        padding: 36px 0 44px;
    }

    .fr-mdt-now {
        width: 100%;
        margin-left: 0;
    }

    .fr-mdt-title-sep {
        display: none;
    }

    /* Phones: Top 3 only (the 6 leaders are for the two-column layout). */
    .fr-mdt-scorers li:nth-child(n+4) {
        display: none;
    }

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

@media (prefers-reduced-motion: reduce) {
    .fr-mdt-fixture {
        transition: none;
    }

    .fr-mdt-fixture:hover {
        transform: none;
    }
}


/* ---- league-overview.css ---- */
/* Football Rwanda - Home / league-overview
   Extrait de template-parts/home/league-overview.php */

/* ==========================================================
   LEAGUE OVERVIEW — COMPACT DASHBOARD STYLE
   ========================================================== */

.fr-league-overview {
    width: 100%;
    padding: 28px 0 34px;
    background: #ffffff;
}

.fr-league-overview > .fr-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.fr-league-overview-panel {
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 20% 0%, rgba(0,190,160,.22), rgba(0,190,160,0) 60%),
        linear-gradient(160deg,#06182f 0%,#0a2c47 55%,#08524f 100%);
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(6, 24, 47, .16);
}

.fr-league-overview-heading {
    padding: 26px 42px 22px;
}

.fr-league-overview-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(27px, 3vw, 36px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.025em;
}

.fr-league-overview-heading p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    line-height: 1.35;
}

.fr-league-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.fr-league-overview-card {
    min-width: 0;
    min-height: 76px;
    padding: 12px 20px 11px;
    border-right: 1px solid rgba(255, 255, 255, .18);
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.fr-league-overview-card:nth-child(4n) {
    border-right: 0;
}

.fr-league-overview-card:nth-last-child(-n + 4) {
    border-bottom: 0;
}

.fr-league-overview-card-label {
    margin: 0 0 4px;
    color: rgba(255, 255, 255, .82);
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.fr-league-overview-card-value {
    color: #ffffff;
    font-size: 27px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.025em;
}

/* Compact 4-column statistics rows */
.fr-league-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

/* ==========================================================
   LEAGUE OVERVIEW — 12 STATISTICS ON ONE ROW
   ========================================================== */

.fr-league-overview-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
    width: 100%;
}

@media (max-width: 900px) {
    .fr-league-overview-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .fr-league-overview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* FINAL NUMERIC ALIGNMENT — targets the actual League Overview markup */
.fr-league-overview-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 0 !important;
}

.fr-league-overview-card {
    min-width: 0;
    min-height: 76px;
    padding: 12px 12px 11px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
    border-right: 1px solid rgba(255,255,255,.16);
    border-bottom: 0;
}

.fr-league-overview-card:nth-child(4n),
.fr-league-overview-card:nth-child(12n) {
    border-right: 1px solid rgba(255,255,255,.16);
}

.fr-league-overview-card:last-child {
    border-right: 0;
}

.fr-league-overview-card-label {
    width: 100%;
    margin: 0 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255,255,255,.82);
    font-size: 9px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.fr-league-overview-card-value {
    display: block;
    min-width: 3ch;
    margin: 0;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    text-align: left;
}

@media (max-width: 900px) {
    .fr-league-overview-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 600px) {
    .fr-league-overview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .fr-league-overview-card {
        padding: 10px 7px;
        min-height: 68px;
    }

    .fr-league-overview-card-value {
        font-size: 21px;
    }

    .fr-league-overview-card-label {
        font-size: 9px;
    }
}

/* Final label fit for the 12-column desktop layout */
.fr-league-overview-card-label {
    font-size: 9px !important;
    letter-spacing: .025em !important;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}


/* ---- featured-match.css ---- */
/* Football Rwanda - Home / featured-match
   Extrait de template-parts/home/featured-match.php */

/* =========================================================
   SECTION
   ========================================================= */

.fr-home-featured-match {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0;
}

/* =========================================================
   HEADER
   ========================================================= */

.fr-home-featured-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;

}

.fr-home-featured-heading {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.fr-home-featured-heading-icon {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 1px;

    color: #009f88;
}

.fr-home-featured-heading-icon svg {
    display: block;
    width: 22px;
    height: 22px;

    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fr-home-featured-heading h2 {
    margin: 0;
    color: #123c66;
    font-size: 24px;
    line-height: 1.1;
    font-weight: 800;
}

/* =========================================================
   CARD
   ========================================================= */

.fr-home-featured-card {
    display: block;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #123c66 0%,
            #0d5277 55%,
            #009f88 100%
        );

    border-radius: 24px;

    color: #ffffff;
    text-decoration: none;

    box-shadow:
        0 18px 45px rgba(18, 60, 102, .16);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.fr-home-featured-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 25px 55px rgba(18, 60, 102, .23);
}

/* =========================================================
   DATE
   ========================================================= */

.fr-home-featured-date {
    padding: 14px 20px;

    background: rgba(255,255,255,.08);

    border-bottom:
        1px solid rgba(255,255,255,.12);

    text-align: center;

    color: rgba(255,255,255,.78);

    font-size: 12px;
    font-weight: 700;
}

/* =========================================================
   MATCH BODY
   ========================================================= */

.fr-home-featured-match-body {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        220px
        minmax(0, 1fr);

    align-items: center;

    gap: 30px;

    padding: 50px 50px 45px;
}

/* =========================================================
   TEAM
   ========================================================= */

.fr-home-featured-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.fr-home-featured-logo {
    width: 105px;
    height: 105px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;
}

.fr-home-featured-logo img {
    width: 105px;
    height: 105px;
    object-fit: contain;
}

.fr-home-featured-logo-placeholder {
    width: 90px;
    height: 90px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.12);

    font-size: 35px;
}

.fr-home-featured-team strong {
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
}

.fr-home-featured-team small {
    margin-top: 5px;

    color: rgba(255,255,255,.65);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =========================================================
   SCORE
   ========================================================= */

.fr-home-featured-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.fr-home-featured-ft {
    display: inline-flex;

    padding: 6px 12px;
    margin-bottom: 15px;

    border-radius: 999px;

    background: rgba(255,255,255,.13);

    color: #ffffff;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1px;
}

.fr-home-featured-score > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.fr-home-featured-score strong {
    font-size: 56px;
    line-height: 1;
    font-weight: 900;
}

.fr-home-featured-score > div span {
    color: rgba(255,255,255,.65);
    font-size: 32px;
}

/* =========================================================
   FOOTER
   ========================================================= */

.fr-home-featured-footer {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-height: 50px;

    background: rgba(0,0,0,.12);

    border-top:
        1px solid rgba(255,255,255,.10);

    font-size: 12px;
    font-weight: 800;
}

.fr-home-featured-footer span:last-child {
    transition: transform .2s ease;
}

.fr-home-featured-card:hover
.fr-home-featured-footer span:last-child {
    transform: translateX(5px);
}

/* =========================================================
   EMPTY
   ========================================================= */

.fr-home-featured-empty {
    padding: 60px 20px;

    background: #ffffff;

    border:
        1px dashed #d7e1e8;

    border-radius: 22px;

    text-align: center;
}

.fr-home-featured-empty > span {
    display: block;

    margin-bottom: 12px;

    font-size: 30px;
}

.fr-home-featured-empty h3 {
    margin: 0;

    color: #123c66;

    font-size: 19px;
}

.fr-home-featured-empty p {
    margin: 8px 0 0;

    color: #7b8b9d;

    font-size: 13px;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 800px) {

    .fr-home-featured-match-body {
        grid-template-columns:
            1fr
            160px
            1fr;

        gap: 15px;

        padding: 40px 25px;
    }

.fr-home-featured-logo,
    .fr-home-featured-logo img {
        width: 80px;
        height: 80px;
    }

.fr-home-featured-team strong {
        font-size: 16px;
    }

.fr-home-featured-score strong {
        font-size: 44px;
    }

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 550px) {

    .fr-home-featured-match {
        width: min(
            calc(100% - 28px),
            600px
        );

        padding: 50px 0;
    }

.fr-home-featured-header {
        align-items: flex-start;
        flex-direction: column;
    }

.fr-home-featured-match-body {
        grid-template-columns:
            1fr
            100px
            1fr;

        gap: 6px;

        padding: 30px 12px;
    }

.fr-home-featured-logo,
    .fr-home-featured-logo img {
        width: 58px;
        height: 58px;
    }

.fr-home-featured-team strong {
        font-size: 13px;
    }

.fr-home-featured-score strong {
        font-size: 32px;
    }

.fr-home-featured-score > div {
        gap: 5px;
    }

.fr-home-featured-score > div span {
        font-size: 22px;
    }

}

/* ==========================================================
   FRONT PAGE — KEEP FEATURED MATCH COMPACT
   ========================================================== */
.fr-home-featured-columns .fr-home-featured-match {
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

.fr-home-featured-columns .fr-home-featured-header {
    margin-bottom: 16px;
}

.fr-home-featured-columns .fr-home-featured-header h2 {
    font-size: 24px;
    line-height: 1.1;
}

.fr-home-featured-columns .fr-home-featured-card {
    border-radius: 10px;
}

.fr-home-featured-columns .fr-home-featured-date {
    padding: 9px 14px;
    font-size: 9px;
}

.fr-home-featured-columns .fr-home-featured-match-body {
    grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr);
    gap: 8px;
    padding: 18px 18px;
}

.fr-home-featured-columns .fr-home-featured-logo,
.fr-home-featured-columns .fr-home-featured-logo img {
    width: 48px;
    height: 48px;
}

.fr-home-featured-columns .fr-home-featured-team strong {
    font-size: 13px;
}

.fr-home-featured-columns .fr-home-featured-score strong {
    font-size: 30px;
}

.fr-home-featured-columns .fr-home-featured-footer {
    padding: 10px 14px;
}

/* ==========================================================
   FRONT PAGE — AD BANNER UNDER FEATURED MATCH
   Keep the Featured Match card at its existing compact size.
   The banner simply uses the empty space below it.
   ========================================================== */
.fr-home-featured-columns .fr-home-featured-match {
    width: 100%;
    box-sizing: border-box;
}

.fr-home-featured-columns .fr-home-featured-ad-banner {
    width: 100%;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 10px;
    box-sizing: border-box;
}

.fr-home-featured-columns .fr-home-featured-ad-banner img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
}

  /* Keep the Featured Match card at its existing compact size.
  /*The banner simply uses the empty space below it.
  /* ========================================================== */
  
.fr-home-featured-columns .fr-home-featured-match {
    width: 100%;
    box-sizing: border-box;
}

.fr-home-featured-columns .fr-home-featured-ad-banner {
    width: 100%;
    margin-top: 18px;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 10px;
    box-sizing: border-box;
}

.fr-home-featured-columns .fr-home-featured-ad-banner img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
}


/* ---- players-tabs.css ---- */
/* Football Rwanda - Home / players-tabs */

.fr-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}

.fr-tab {
    appearance: none;
    padding: 9px 18px;
    border: 1px solid #e3e8ef;
    border-radius: 999px;
    background: #ffffff;
    color: #647893;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.fr-tab:hover {
    border-color: #009f88;
    color: #009f88;
}

.fr-tab:focus-visible {
    outline: 3px solid rgba(0, 159, 136, .35);
    outline-offset: 2px;
}

.fr-tab.is-active {
    border-color: #009f88;
    background: #009f88;
    color: #ffffff;
}

/* Without JS every panel stays visible, stacked. */
.fr-tabs.is-ready .fr-tab-panel {
    display: none;
}

.fr-tabs.is-ready .fr-tab-panel.is-active {
    display: block;
}

.fr-tab-panel + .fr-tab-panel {
    margin-top: 24px;
}

.fr-tabs.is-ready .fr-tab-panel + .fr-tab-panel {
    margin-top: 0;
}

@media (max-width: 600px) {
    .fr-tabs-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .fr-tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .fr-tab {
        flex: 0 0 auto;
        padding: 8px 15px;
        font-size: 12px;
    }
}


/* ---- clubs.css ---- */
/* Football Rwanda - Home / Clubs (same design as the Players block) */

.fr-home-featured-clubs {
    width: 100%;
    padding: 10px 0;
}

.fr-home-featured-clubs .fr-container {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.fr-home-club-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
    margin: 0;
}

.fr-home-club-card {
    width: 100%;
    min-width: 0;
    height: 160px;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    border: 1px solid #dfe5ec;
    border-radius: 14px;
    background: #f7f9fb;
    box-sizing: border-box;
}

.fr-home-club-logo {
    flex: 0 0 140px;
    width: 140px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: #ffffff;
    border-right: 1px solid #e8edf2;
    box-sizing: border-box;
}

.fr-home-club-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.fr-home-club-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 13px 10px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}

.fr-home-club-name {
    margin: 0 0 5px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-home-club-name a {
    display: block;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-home-club-name a:hover {
    color: #009f88;
}

.fr-home-club-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    line-height: 1.25;
}

.fr-home-club-meta-item {
    display: flex;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fr-home-club-icon {
    margin-right: 6px;
}

.fr-home-club-players {
    color: #009f88;
    font-weight: 800;
}

.fr-home-club-button {
    margin-top: auto;
    align-self: flex-start;
    padding: 7px 14px;
    border-radius: 8px;
    background: #123c66;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    transition: background .2s ease;
}

.fr-home-club-button:hover {
    background: #009f88;
    color: #ffffff;
    text-decoration: none;
}

@media (max-width: 900px) {
    .fr-home-club-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .fr-home-featured-clubs {
        padding: 50px 0;
    }

    .fr-home-featured-clubs .fr-container {
        width: calc(100% - 28px);
    }

    .fr-home-club-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


/* ---- academies.css ---- */
/* ==========================================================
   Football Rwanda - Home : Academies block
   Same codes as the home panels: navy head (Saira name, city with
   pin icon, logo only when the academy has one), body with the age
   categories and the figures that matter, in Saira.
   ========================================================== */

.fr-site-main .fr-home-academy-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.fr-site-main a.fr-hac-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
    color: #031826;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(3, 24, 38, .05), 0 8px 22px rgba(3, 24, 38, .06);
    transition: box-shadow .15s ease-out, transform .15s ease-out;
}

.fr-site-main a.fr-hac-card:hover {
    box-shadow: 0 2px 4px rgba(3, 24, 38, .06), 0 14px 30px rgba(3, 24, 38, .10);
    transform: translateY(-2px);
}

/* ---------- Head ---------- */

.fr-site-main .fr-hac-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 92px;
    padding: 16px 18px;
    background: #031826;
}

.fr-site-main .fr-hac-logo {
    display: flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
}

.fr-site-main .fr-hac-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* No logo uploaded: initials */
.fr-site-main .fr-hac-monogram {
    color: #031826;
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: 19px;
    font-stretch: 87.5%;
    font-weight: 800;
}

.fr-site-main .fr-hac-id {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.fr-site-main .fr-hac-name {
    color: #fff;
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: 19px;
    font-stretch: 87.5%;
    font-weight: 800;
    line-height: 1.1;
    text-wrap: balance;
}

.fr-site-main .fr-hac-city {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #9fd9cc;
    font-size: 12.5px;
    font-weight: 600;
}

.fr-site-main .fr-hac-city .fr-ui-icon {
    color: #7fdcc6;
}

/* ---------- Body ---------- */

.fr-site-main .fr-hac-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px 18px;
}

.fr-site-main .fr-hac-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.fr-site-main .fr-hac-cats b {
    padding: 3px 9px;
    border-radius: 999px;
    background: #E3F4EF;
    color: #00614c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .02em;
}

.fr-site-main .fr-hac-figures {
    display: flex;
    gap: 22px;
}

.fr-site-main .fr-hac-figure {
    display: flex;
    flex-direction: column;
}

.fr-site-main .fr-hac-figure strong {
    color: #007863;
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: 28px;
    font-stretch: 87.5%;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.fr-site-main .fr-hac-figure + .fr-hac-figure strong {
    color: #031826;
}

.fr-site-main .fr-hac-figure small {
    margin-top: 4px;
    color: #5b6b7b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fr-site-main .fr-hac-link {
    margin-top: auto;
    color: #007863;
    font-size: 13px;
    font-weight: 700;
}

.fr-site-main a.fr-hac-card:hover .fr-hac-link {
    text-decoration: underline;
}

/* ---------- Editors-only placeholder ---------- */

.fr-site-main .fr-home-academies--empty p {
    margin: 0;
    padding: 16px 20px;
    font-size: 14px;
    color: #62748a;
    background: #f5f8fa;
    border: 1px dashed #c9d4df;
    border-radius: 14px;
}

.fr-site-main .fr-home-academies--empty a {
    font-weight: 800;
    color: #0a7f78;
}

/* ---------- Responsive ---------- */

@media (max-width: 1023px) {
    .fr-site-main .fr-home-academy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .fr-site-main .fr-home-academy-grid { gap: 14px; }
    /* Phones: keep the block short (2 academies), the rest is one tap away */
    .fr-site-main a.fr-hac-card:nth-child(n+3) { display: none; }
}

@media (max-width: 480px) {
    .fr-site-main .fr-home-academy-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .fr-site-main a.fr-hac-card { transition: none; }
    .fr-site-main a.fr-hac-card:hover { transform: none; }
}


/* ---- rhythm.css ---- */
/* ==========================================================
   FOOTBALL RWANDA — HOME PAGE RHYTHM
   Loaded last. One spacing scale and alternating bands for
   every block of the home page, so the page breathes and each
   block reads as its own section.
   ========================================================== */

.fr-site-main {
    --fr-band-space: clamp(48px, 5.5vw, 80px);
    --fr-band-line: #e3e9f0;
    --fr-band-soft: #f4f7fa;
    --fr-band-white: #ffffff;
}

/* Every block after the hero: same vertical space, same hairline */
.fr-site-main > section:not(.fr-hero) {
    padding-top: var(--fr-band-space);
    padding-bottom: var(--fr-band-space);
    border-top: 1px solid var(--fr-band-line);
    background: var(--fr-band-white);
}

/* Soft bands: live, match centre, standings + scorers, clubs */
.fr-site-main > section.fr-home-live-matches,
.fr-site-main > section.fr-home-featured-clubs {
    background: var(--fr-band-soft);
}

/* The hero already ends on its own dark edge */
.fr-site-main > section.fr-home-live-matches:first-of-type {
    border-top: 0;
}

/* One content column, same left and right edge as the hero.
   The vertical space comes from the band, not from the container. */
.fr-site-main > section:not(.fr-hero) > .fr-container {
    width: min(1200px, calc(100% - 40px));
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    padding: 0;
}

/* Players and Clubs: the container is the card, it keeps its inner space */
.fr-site-main > section.fr-home-players > .fr-container,
.fr-site-main > section.fr-home-featured-clubs > .fr-container {
    padding: 28px 24px;
}

/* Featured Match and Featured Video: same height */
.fr-site-main .fr-home-featured-columns-grid {
    align-items: stretch;
}

.fr-site-main .fr-home-featured-columns-grid > * {
    height: 100%;
}

/* Players and Clubs headers follow the other blocks */
.fr-site-main .fr-home-players .fr-section-subtitle,
.fr-site-main .fr-home-featured-clubs .fr-section-subtitle {
    margin-bottom: 8px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.fr-site-main .fr-home-players .fr-section-link,
.fr-site-main .fr-home-featured-clubs .fr-section-link {
    font-size: 12px;
}

/* ----------------------------------------------------------
   Block titles: one scale
   32px full-width blocks, 28px blocks in a column or card
   ---------------------------------------------------------- */
.fr-site-main .fr-home-live-matches h2,
.fr-site-main .fr-home-players .fr-section-title,
.fr-site-main .fr-home-featured-clubs .fr-section-title {
    font-size: 32px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #071b35;
}

.fr-site-main .fr-home-featured-match h2,
.fr-site-main .fr-home-featured-video h2 {
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #071b35;
}

@media (max-width: 767px) {
    .fr-site-main > section:not(.fr-hero) > .fr-container {
        width: calc(100% - 32px);
    }

/* Block headings stack from the left edge on phones */

.fr-site-main > section.fr-home-players > .fr-container,
    .fr-site-main > section.fr-home-featured-clubs > .fr-container {
        padding: 20px 16px;
    }

    .fr-site-main .fr-home-live-matches h2,
    .fr-site-main .fr-home-players .fr-section-title,
    .fr-site-main .fr-home-featured-clubs .fr-section-title {
        font-size: 26px;
    }

    .fr-site-main .fr-home-featured-match h2,
    .fr-site-main .fr-home-featured-video h2 {
        font-size: 24px;
    }

    .fr-site-main > section:not(.fr-hero) {
        padding-top: 44px;
        padding-bottom: 44px;
    }
}



/* ---- layout.css ---- */


/* ---------- Show all / fewer (Latest Results, Upcoming) ---------- */

html body .fr-more-toggle {
    display: none;
    width: 100%;
    margin-top: 14px;
    padding: 12px 16px;
    color: #0a7f78;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    background: #fff;
    border: 1px solid #cfe5e2;
    border-radius: 14px;
    transition: background .15s, border-color .15s;
}

html body .fr-more-toggle:hover {
    background: #e6f4f2;
    border-color: #0a7f78;
}

html.fr-more-ready body .fr-more-toggle {
    display: block;
}

html.fr-more-ready body [data-fr-results-list]:not(.is-open) .is-extra {
    display: none;
}

/* ---------- Players Abroad ---------- */

html body .fr-site-main .fr-home-abroad .fr-section-title {
    font-size: 32px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #071b35;
}

html body .fr-site-main .fr-home-abroad-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 24px;
}

html body .fr-site-main a.fr-home-abroad-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #06182f;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e3e9ef;
    border-radius: 18px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

html body .fr-site-main a.fr-home-abroad-card:hover {
    border-color: #0a7f78;
    box-shadow: 0 10px 28px rgba(6, 24, 47, .08);
    transform: translateY(-2px);
}

html body .fr-site-main .fr-home-abroad-photo {
    display: block;
    aspect-ratio: 16 / 11;
    max-height: 190px;
    background: linear-gradient(160deg, #eaf1f6, #dce7ef);
}

html body .fr-site-main .fr-home-abroad-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

html body .fr-site-main .fr-home-abroad-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px 18px;
}

html body .fr-site-main .fr-home-abroad-name {
    font-size: 17px;
    line-height: 1.25;
    font-weight: 800;
}

html body .fr-site-main .fr-home-abroad-position {
    color: #62748a;
    font-size: 13px;
    font-weight: 600;
}

html body .fr-site-main .fr-home-abroad-club {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid #e3e9ef;
}

html body .fr-site-main .fr-home-abroad-club img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex: 0 0 auto;
}

html body .fr-site-main .fr-home-abroad-club span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

html body .fr-site-main .fr-home-abroad-club b {
    font-size: 14px;
    font-weight: 800;
    color: #0a7f78;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html body .fr-site-main .fr-home-abroad-club i {
    color: #62748a;
    font-size: 12px;
    font-style: normal;
}

/* ---------- Band order: soft / white alternation ---------- */
/* hero, quick bar, live (soft), overview (white), match centre (soft),
   featured (white), table + scorers (soft), players (white),
   players abroad (soft), clubs (white), academies (soft), CTA (white) */

html body .fr-site-main > section.fr-home-featured-clubs {
    background: #fff;
}

html body .fr-site-main > section.fr-home-abroad,
html body .fr-site-main > section.fr-home-academies {
    background: var(--fr-band-soft, #f4f7fa);
}

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
    html body .fr-site-main .fr-home-abroad-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {

    html body .fr-site-main .fr-home-abroad-grid {
        gap: 12px;
    }

    html body .fr-site-main .fr-home-abroad .fr-section-title {
        font-size: 26px;
    }

    html body .fr-site-main .fr-home-abroad-body {
        padding: 12px 12px 14px;
    }

    html body .fr-site-main .fr-home-abroad-name {
        font-size: 15px;
    }
}

/* ---------- Tighter vertical rhythm ---------- */

html body .fr-site-main {
    --fr-band-space: clamp(36px, 4.4vw, 60px);
}

html body .fr-site-main > section.fr-league-overview {
    padding-top: 36px;
    padding-bottom: 36px;
}

/* Live now: a short band, it sits between two big blocks */
html body .fr-site-main > section.fr-home-live-matches {
    padding-top: 24px;
    padding-bottom: 26px;
}

/* Abroad + Academies headers follow Players and Clubs */
html body .fr-site-main .fr-home-abroad .fr-section-subtitle,
html body .fr-site-main .fr-home-academies .fr-section-subtitle {
    margin-bottom: 8px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 1.5px;
}

html body .fr-site-main .fr-home-abroad .fr-section-link,
html body .fr-site-main .fr-home-academies .fr-section-link {
    font-size: 12px;
}


/* ---- polish.css ---- */
/* ==========================================================
   Football Rwanda - Home polish pass
   Loaded last on the home page (after layout.css).
   Refinement only: same colors, type and content; fixes the
   defects measured on the live page.
   ========================================================== */

/* ----------------------------------------------------------
   1. One frame per block
   Players and Clubs were a card (the container) inside a
   framed band, holding more cards, and their titles sat 25px
   to the right of "Players Abroad". Same treatment for all.
---------------------------------------------------------- */

html body.home .fr-home-players-tabs > .fr-container,
html body.home .fr-home-featured-clubs > .fr-container,
html body.home .fr-home-academies > .fr-container {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* ----------------------------------------------------------
   2. Readable small text
   95 labels were set at 8-10px, some in #91a0af on white
   (2.6:1 contrast). Floor: 10.5px; muted text in slate-500
   (4.7:1 on white).
---------------------------------------------------------- */

html body.home .fr-stat-label {
    font-size: 10px;
}

html body.home .fr-hero-stat > span,
html body.home .fr-league-overview-card-label,
html body.home .fr-home-featured-ft,
html body.home .fr-home-featured-team > small {
    font-size: 10.5px;
}

html body.home .fr-home-featured-date {
    font-size: 11px;
}

html body.home .fr-player-button {
    font-size: 12px;
}

/* ----------------------------------------------------------
   3. Icons (inc/ui/icons.php replaces the emojis)
---------------------------------------------------------- */

.fr-ui-icon {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -2px;
    color: var(--fr-primary, #009879);
}

.fr-stat-icon .fr-ui-icon {
    vertical-align: middle;
}

/* ----------------------------------------------------------
   4. Numbers line up (scores, tables, counters)
---------------------------------------------------------- */

html body.home .fr-hero-stat strong,
html body.home .fr-league-overview,
html body.home .fr-home-featured-score,
html body.home .fr-stat-value {
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------
   5. Browser surfaces in the brand colors
---------------------------------------------------------- */

::selection {
    background: rgba(0, 152, 121, .22);
    color: #0f172a;
}

html body.home a:focus-visible,
html body.home button:focus-visible,
html body.home select:focus-visible,
html body.home [tabindex]:focus-visible {
    outline: 2px solid var(--fr-primary, #009879);
    outline-offset: 3px;
    border-radius: 6px;
}

html {
    scrollbar-color: #9fb3c8 transparent;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


/* ---- display.css ---- */
/* ==========================================================
   Football Rwanda - Home display type + hero (typeset / bolder)
   Loaded last on the home page (after polish.css).

   Type roles
   - Display  : Saira (self-hosted, assets/css/base/fonts.css),
                semi-condensed, heavy: page and section titles.
   - Numerals : Saira, tabular: scores, points, counters - the
                numbers read like a stadium scoreboard.
   - Body/UI  : Inter, unchanged (cards, tables, labels, buttons).

   Hero (bolder): one decisive move - the title at full scale,
   "Rwanda's" in the system gold, the flag colors as a band
   closing the hero. Everything else in the hero is unchanged.
   ========================================================== */

:root {
    --fr-display: 'Saira', 'Inter', system-ui, sans-serif;
}

/* ----------------------------------------------------------
   1. Display role: section titles
---------------------------------------------------------- */

html body.home #primary h2 {
    font-family: var(--fr-display);
    font-stretch: 87.5%;
    font-weight: 750;
    letter-spacing: -0.005em;
    line-height: 1.05;
    text-wrap: balance;
}

html body.home .fr-section-title {
    font-size: clamp(30px, 3.2vw, 38px);
}

html body.home .fr-league-overview h2 {
    font-size: clamp(30px, 3.2vw, 38px);
}

/* ----------------------------------------------------------
   2. Numerals role: scores, points, counters
---------------------------------------------------------- */

html body.home .fr-hero-stat strong,
html body.home .fr-league-overview-card-value,
html body.home .fr-home-featured-score strong,
html body.home .fr-home-featured-score span {
    font-family: var(--fr-display);
    font-stretch: 87.5%;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

/* ----------------------------------------------------------
   3. Hero
---------------------------------------------------------- */

/* The bigger title needs the hero to grow with its content
   (it had a fixed 500 / 620 / 680px height). */
/* Compact: the matchday timeline right below is the page's spine. */
html body.home .fr-hero {
    height: auto;
    min-height: 0;
}

html body.home .fr-hero-content {
    padding: 40px 0 52px;
}

html body.home .fr-hero-title {
    max-width: 18ch;
    margin: 0 auto 14px;
    font-family: var(--fr-display);
    font-size: clamp(40px, 5.2vw, 72px);
    font-stretch: 87.5%;
    font-weight: 800;
    line-height: .92;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 0 3px 22px rgba(3, 24, 38, .45);
}

html body.home .fr-hero-title-accent {
    color: var(--fr-secondary, #F4B400);
}

html body.home .fr-hero-text {
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
}

/* Rwanda flag colors closing the hero (blue 1/2, yellow 1/4, green 1/4). */
html body.home .fr-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    height: 6px;
    background: linear-gradient(90deg, #00A1DE 0 50%, #FAD201 50% 75%, #20603D 75% 100%);
    pointer-events: none;
}

@media (max-width: 767px) {
    html body.home .fr-hero {
        height: auto;
        min-height: 0;
    }

    html body.home .fr-hero-content {
        padding: 36px 0 44px;
    }

    html body.home .fr-hero-title {
        font-size: clamp(36px, 11vw, 48px);
        line-height: .95;
    }
}


/* ---- consent.css ---- */
html body .fr-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:99999;max-width:760px;margin:0 auto;display:flex;gap:20px;align-items:center;justify-content:space-between;padding:18px 20px;background:#06182f;color:#dbe6f1;border-radius:18px;box-shadow:0 12px 40px rgba(6,24,47,.35);font-size:14px;line-height:1.5}
html body .fr-consent[hidden]{display:none}
html body .fr-consent strong{color:#fff;font-size:15px}
html body .fr-consent p{margin:4px 0 0;color:#b7c7d8}
html body .fr-consent a{color:#5fe0cf;font-weight:600}
html body .fr-consent-actions{display:flex;gap:8px;flex-shrink:0}
html body .fr-consent-btn{height:42px;padding:0 18px;border:0;border-radius:999px;background:#0a7f78;color:#fff;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
html body .fr-consent-btn:hover{background:#0c968d}
html body .fr-consent-btn.is-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
html body .fr-consent-btn.is-ghost:hover{background:rgba(255,255,255,.1)}
html body .fr-consent-btn:focus-visible{outline:2px solid #5fe0cf;outline-offset:2px}
@media(max-width:600px){html body .fr-consent{flex-direction:column;align-items:stretch;gap:14px}html body .fr-consent-actions{flex-direction:column}}


/* ---- partners.css ---- */
/* ==========================================================
   Football Rwanda — partner slots (banners, sponsor lines)
   Markup: inc/partners/partners-display.php
   ========================================================== */

html body .fr-partner-slot {
    display: grid;
    gap: 12px;
    margin: 24px 0;
}

html body .fr-partner-slot--home_top,
html body .fr-partner-slot--home_mid,
html body .fr-partner-slot--home_bottom {
    width: min(1240px, calc(100% - 32px));
    margin: 28px auto;
}

html body .fr-partner-slot--player {
    grid-column: 1 / -1; /* the player sidebar is a 2-column grid */
    margin: 0;
}

/* ---------- Sponsor line: "Presented by" / "Official partners" ---------- */

html body .fr-sponsor-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    padding: 12px 18px;
    border: 1px solid #e3e9ef;
    border-radius: 14px;
    background: #fff;
}

html body .fr-sponsor-label {
    color: #5b6b7b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html body .fr-sponsor-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
}

html body .fr-sponsor-logo {
    display: inline-flex;
    align-items: center;
}

html body .fr-sponsor-logo img {
    display: block;
    width: auto;
    max-width: 140px;
    height: 34px;
    object-fit: contain;
}

html body a.fr-sponsor-logo:hover img {
    opacity: .8;
}

/* ---------- Banner ---------- */

html body .fr-ad {
    position: relative;
    display: block;
}

html body .fr-ad-label {
    display: block;
    margin-bottom: 6px;
    color: #8595a5;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

html body .fr-ad-item {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: #eef2f6;
}

html body .fr-ad-item[hidden] {
    display: none;
}

html body .fr-ad-item picture,
html body .fr-ad-item img {
    display: block;
    width: 100%;
    height: auto;
}

html body a.fr-ad-item:focus-visible {
    outline: 3px solid #007863;
    outline-offset: 2px;
}

/* ---------- "Advertise here" tile (empty slot) ---------- */

html body .fr-ad-house {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 18px;
    padding: 18px 22px;
    border: 1px dashed #b9c6d3;
    border-radius: 14px;
    background: #f5f8fa;
    color: #031826;
    text-decoration: none;
}

html body .fr-ad-house:hover {
    border-color: #007863;
    background: #eef7f5;
}

html body .fr-ad-house-title {
    font-family: var(--fr-display, 'Saira', 'Inter', sans-serif);
    font-size: 18px;
    font-stretch: 87.5%;
    font-weight: 800;
}

html body .fr-ad-house-text {
    flex: 1 1 220px;
    color: #5b6b7b;
    font-size: 14px;
}

html body .fr-ad-house-cta {
    color: #007863;
    font-size: 14px;
    font-weight: 700;
}

html body .fr-partner-slot--player .fr-ad-house {
    flex-direction: column;
    align-items: flex-start;
}

html body .fr-partner-slot--player .fr-ad-house-text {
    flex: 0 0 auto;
}

/* ---------- Sponsored article notice ---------- */

html body .fr-sponsored-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-left: 3px solid #007863;
    border-radius: 0 10px 10px 0;
    background: #eef7f5;
    color: #33465c;
    font-size: 14px;
}

html body .fr-sponsored-note > span {
    color: #031826;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    html body .fr-partner-slot {
        margin: 18px 0;
    }

    html body .fr-ad-item {
        border-radius: 10px;
    }

    html body .fr-sponsor-logo img {
        height: 28px;
    }
}