/**
 * 4D Greens Design System
 *
 * Shared visual standard for cards, panels, buttons, headings and
 * cross-site social icon fallbacks. This file is loaded late on purpose
 * so older style generations collapse into one consistent presentation.
 */

:root {
    --rfc-page-bg: #78b98b;
    --rfc-page-bg-deep: #58a86f;
    --rfc-page-bg-image: url('../images/4dg-bg.png');
    --rfc-panel-bg-top: rgba(74, 108, 95, 0.60);
    --rfc-panel-bg-bottom: rgba(47, 77, 64, 0.52);
    --rfc-feature-bg-top: rgba(82, 122, 108, 0.56);
    --rfc-feature-bg-bottom: rgba(51, 84, 69, 0.48);
    --rfc-panel-border: rgba(44, 142, 62, 0.40);
    --rfc-panel-highlight: rgba(255, 255, 255, 0.16);
    --rfc-panel-shadow: 0 12px 32px rgba(0, 0, 0, 0.30), 0 4px 12px rgba(0, 0, 0, 0.18);
    --rfc-panel-text: #d7f4dc;
    --rfc-heading-green: #2ecc71;
    --rfc-heading-stroke: #0b3d25;
    --rfc-button-top: rgba(46, 204, 113, 0.92);
    --rfc-button-bottom: rgba(8, 123, 62, 0.96);
    --rfc-button-border: rgba(255, 255, 255, 0.22);
    --rfc-button-shadow: 0 10px 22px rgba(0, 70, 38, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.32);
    --rfc-button-pad-y: clamp(0.34rem, 0.55vw, 0.46rem);
    --rfc-button-pad-x: clamp(0.72rem, 1vw, 1rem);
    --rfc-button-font: clamp(0.78rem, 0.78vw, 0.92rem);
    --rfc-footer-base: #2a2a2a;
    --rfc-footer-base-deep: #1f2321;
    --rfc-footer-glass-top: rgba(255, 255, 255, 0.07);
    --rfc-footer-glass-bottom: rgba(255, 255, 255, 0.02);
    --rfc-footer-border: rgba(153, 255, 192, 0.12);
    --rfc-content-max: 1180px;
    --rfc-card-radius: 12px;
    --rfc-card-gap: clamp(0.75rem, 1.45vw, 1.1rem);
    --rfc-card-padding: clamp(0.85rem, 1.45vw, 1.15rem);
    --rfc-card-bg: linear-gradient(180deg, rgba(57, 106, 76, 0.94), rgba(27, 78, 47, 0.94));
    --rfc-card-border: rgba(117, 217, 145, 0.30);
    --rfc-card-title: #2eff7e;
    --rfc-footer-pearl: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(212, 255, 232, 0.26) 18%,
        rgba(255, 255, 255, 0.42) 50%,
        rgba(186, 245, 217, 0.22) 82%,
        rgba(255, 255, 255, 0.10) 100%
    );
}

/* Template/card foundation. Keep page sections aligned with page headers. */
.page-header-bar > .container,
main > .container,
.site-content > .container,
body > .container,
.register-page-container,
.sponsors-shell {
    max-width: var(--rfc-content-max);
}

.card:not(.dropdown-menu):not(.ps-modal):not(.ps-card),
.content-card,
.section-card,
.module-card,
.linked-content-card,
.article-detail-shell,
.event-details-card,
.team-info-card,
.coach-card,
.player-profile-card {
    border: 1px solid var(--rfc-card-border);
    border-radius: var(--rfc-card-radius);
    background: var(--rfc-card-bg);
    box-shadow: var(--rfc-panel-shadow);
    color: var(--rfc-panel-text);
}

.card:not(.dropdown-menu):not(.ps-modal):not(.ps-card) > .card-header {
    border-bottom: 1px solid rgba(178, 255, 203, 0.18);
    border-radius: calc(var(--rfc-card-radius) - 1px) calc(var(--rfc-card-radius) - 1px) 0 0;
    background: rgba(7, 57, 31, 0.32);
    color: #f6fff8;
}

.card:not(.dropdown-menu):not(.ps-modal):not(.ps-card) > .card-body,
.content-card,
.section-card,
.module-card,
.article-detail-shell {
    padding: var(--rfc-card-padding);
}

.card:not(.dropdown-menu):not(.ps-modal):not(.ps-card) {
    overflow: hidden;
}

.card:not(.dropdown-menu):not(.ps-modal):not(.ps-card) .card-img-top {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.row {
    row-gap: var(--rfc-card-gap);
}

.container.my-4,
.container.mt-4,
.container.py-5,
.sponsors-shell.py-5 {
    margin-top: clamp(0.75rem, 1.5vw, 1.15rem) !important;
    margin-bottom: clamp(0.75rem, 1.5vw, 1.15rem) !important;
    padding-top: clamp(0.75rem, 1.5vw, 1.15rem) !important;
    padding-bottom: clamp(0.75rem, 1.5vw, 1.15rem) !important;
}

.card:not(.dropdown-menu):not(.ps-modal):not(.ps-card) > .card-footer {
    border-top: 1px solid rgba(178, 255, 203, 0.18);
    border-radius: 0 0 calc(var(--rfc-card-radius) - 1px) calc(var(--rfc-card-radius) - 1px);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(246, 255, 248, 0.86);
}

.card .card-title,
.card h3,
.content-card h2,
.content-card h3,
.section-card h2,
.section-card h3,
.module-card h2,
.module-card h3,
.article-detail-shell h2,
.article-detail-shell h3 {
    color: var(--rfc-card-title);
    text-shadow: 0 2px 0 rgba(0, 46, 17, 0.84);
}

.card h3,
.section-card h3,
.module-card h3,
.content-card h3 {
    font-size: clamp(1.2rem, 1.65vw, 1.55rem);
    line-height: 1.15;
    margin-bottom: 0.6rem;
}

.card p,
.card li,
.content-card p,
.content-card li,
.section-card p,
.section-card li,
.module-card p,
.module-card li,
.article-detail-shell p,
.article-detail-shell li {
    color: rgba(247, 255, 249, 0.88);
}

.card .text-muted,
.content-card .text-muted,
.section-card .text-muted,
.module-card .text-muted,
.article-detail-shell .text-muted {
    color: rgba(231, 255, 238, 0.70) !important;
}

.card .form-control,
.section-card .form-control,
.module-card .form-control,
.content-card .form-control {
    border-color: rgba(8, 83, 42, 0.22);
    border-radius: 8px;
}

.card .card,
.section-card .card,
.module-card .card,
.content-card .card {
    box-shadow: none;
}

.article-detail-shell {
    margin-bottom: var(--rfc-card-gap);
    flex: 0 0 calc(100% - 30px);
    max-width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;
}

.article-content {
    color: rgba(247, 255, 249, 0.90);
    line-height: 1.7;
}

.rfc-layout {
    display: grid;
    gap: var(--rfc-card-gap);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .rfc-layout {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
    }
}

@media (min-width: 1200px) {
    .rfc-layout--three {
        grid-template-columns: minmax(220px, 0.28fr) minmax(0, 1fr) minmax(220px, 0.28fr);
    }
}

@media (max-width: 575.98px) {
    :root {
        --rfc-card-radius: 10px;
        --rfc-card-gap: 0.65rem;
        --rfc-card-padding: 0.78rem;
        --rfc-button-pad-y: 0.32rem;
        --rfc-button-pad-x: 0.68rem;
        --rfc-button-font: 0.78rem;
    }

    main > .container,
    .site-content > .container,
    body > .container {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .card:not(.dropdown-menu):not(.ps-modal):not(.ps-card) {
        margin-bottom: 0.65rem;
    }

    .page-header-buttons .page-header-btn {
        flex: 1 1 calc(50% - 0.35rem);
        max-width: none;
    }
}

html,
body {
    background-color: var(--rfc-page-bg) !important;
    min-height: 100%;
}

body {
    background-image: var(--rfc-page-bg-image) !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    color: #133523;
    isolation: isolate;
    position: relative;
}

.beta-banner {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02)),
        linear-gradient(135deg, rgba(0, 73, 37, 0.96), rgba(14, 108, 57, 0.96)) !important;
    border-bottom: 1px solid rgba(207, 255, 220, 0.38);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.20),
        inset 0 -1px 0 rgba(0, 42, 22, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    color: #f4fff6;
    display: flex;
    font-size: clamp(0.68rem, 1.1vw, 0.84rem);
    font-weight: 800;
    gap: clamp(0.35rem, 1vw, 0.75rem);
    justify-content: center;
    left: 0;
    line-height: 1.15;
    min-height: clamp(1.65rem, 3.4vw, 2.05rem);
    padding: clamp(0.22rem, 0.8vw, 0.42rem) clamp(0.5rem, 2vw, 1.25rem);
    position: sticky;
    right: 0;
    text-align: center;
    text-shadow:
        -1px -1px 0 rgba(0, 44, 24, 0.72),
        1px 1px 0 rgba(0, 44, 24, 0.72),
        0 2px 6px rgba(0, 0, 0, 0.24);
    top: 0;
    z-index: 4050;
}

.page-header-module-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.module-version-badge {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(10, 64, 37, 0.78), rgba(37, 127, 73, 0.62));
    border: 1px solid rgba(196, 255, 218, 0.28);
    border-radius: 999px;
    box-shadow:
        0 4px 12px rgba(0, 40, 22, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    color: #f4fff6;
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 800;
    gap: 0.36rem;
    letter-spacing: 0.01em;
    line-height: 1;
    max-width: 100%;
    padding: 0.28rem 0.55rem;
    text-transform: uppercase;
}

.module-version-badge strong,
.module-version-badge span,
.module-version-badge em {
    display: inline-block;
    line-height: 1;
}

.module-version-badge em {
    color: rgba(225, 255, 235, 0.78);
    font-style: normal;
}

@media (max-width: 767.98px) {
    .page-header-module-meta {
        margin-top: 0.25rem;
    }

    .module-version-badge {
        font-size: 0.58rem;
        gap: 0.26rem;
        padding: 0.22rem 0.42rem;
    }
}

.beta-banner--alpha {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02)),
        linear-gradient(135deg, rgba(101, 14, 14, 0.96), rgba(184, 42, 36, 0.96)) !important;
    border-bottom-color: rgba(255, 211, 211, 0.48);
}

.beta-banner__phase,
.beta-banner__status,
.beta-banner__version {
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    flex: 0 0 auto;
    padding: 0.12rem 0.5rem;
    white-space: nowrap;
}

.beta-banner__phase {
    background: rgba(255, 255, 255, 0.15);
}

.beta-banner__status {
    background: rgba(255, 255, 255, 0.09);
    font-size: 0.82em;
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.beta-banner__version {
    background: rgba(0, 45, 24, 0.22);
    font-size: 0.86em;
    opacity: 0.94;
}

.beta-banner__message {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.beta-banner__message--compact {
    display: none;
}

.module-version-badge {
    align-items: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        linear-gradient(145deg, rgba(18, 92, 52, 0.74), rgba(5, 49, 30, 0.78));
    border: 1px solid rgba(153, 255, 192, 0.26);
    border-radius: 999px;
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    color: #ecfff2;
    display: inline-flex;
    font-size: 0.78rem;
    gap: 0.45rem;
    line-height: 1;
    padding: 0.38rem 0.62rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    vertical-align: middle;
    white-space: nowrap;
}

.module-version-badge strong {
    color: #ffffff;
    font-weight: 800;
}

.module-version-badge span {
    color: #bdfbd0;
    font-weight: 700;
}

.module-version-badge em {
    color: #d7f4dc;
    font-style: normal;
    opacity: 0.86;
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .beta-banner {
        -webkit-backdrop-filter: blur(10px) saturate(130%);
        backdrop-filter: blur(10px) saturate(130%);
    }
}

@media (max-width: 768px) {
    .beta-banner {
        justify-content: space-between;
    }

    .beta-banner__message--full {
        display: none;
    }

    .beta-banner__message--compact {
        display: inline;
    }

    .beta-banner__status {
        display: none;
    }
}

@media (max-width: 420px) {
    .beta-banner {
        gap: 0.3rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }

    .beta-banner__version {
        max-width: 7.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

footer.bg-dark,
body footer.bg-dark,
.site-footer,
footer.site-footer,
footer {
    background:
        linear-gradient(180deg, var(--rfc-footer-glass-top) 0%, var(--rfc-footer-glass-bottom) 100%),
        linear-gradient(180deg, var(--rfc-footer-base) 0%, var(--rfc-footer-base-deep) 100%) !important;
    border-top: 1px solid var(--rfc-footer-border) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 -10px 28px rgba(0, 0, 0, 0.18) !important;
    color: #f4f7f5 !important;
    position: relative;
}

footer.bg-dark::before,
body footer.bg-dark::before,
.site-footer::before,
footer.site-footer::before,
footer::before {
    background: var(--rfc-footer-pearl);
    content: "";
    height: 2px;
    left: 0;
    opacity: 0.95;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
}

@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    footer.bg-dark,
    body footer.bg-dark,
    .site-footer,
    footer.site-footer,
    footer {
        -webkit-backdrop-filter: blur(12px) saturate(118%);
        backdrop-filter: blur(12px) saturate(118%);
    }
}

.footer-club-brand {
    align-items: center;
    display: inline-flex;
    justify-content: flex-start;
}

.footer-club-badge {
    display: block;
    height: auto;
    max-width: 88px;
    filter:
        drop-shadow(0 0 1px rgba(255, 255, 255, 0.72))
        drop-shadow(0 0 2px rgba(18, 44, 28, 0.92))
        drop-shadow(1px 0 0 rgba(18, 44, 28, 0.92))
        drop-shadow(-1px 0 0 rgba(18, 44, 28, 0.92))
        drop-shadow(0 1px 0 rgba(18, 44, 28, 0.92))
        drop-shadow(0 -1px 0 rgba(18, 44, 28, 0.92))
        drop-shadow(0 8px 16px rgba(0, 0, 0, 0.26));
}

/* Shared card and panel surfaces */
:where(
    .card,
    .panel,
    .content-panel,
    .dashboard-panel,
    .page-panel,
    .settings-panel,
    .profile-section,
    .event-section,
    .form-section,
    .table-panel,
    .admin-card,
    .admin-panel,
    .manager-card,
    .manager-panel,
    .coach-card,
    .coach-panel,
    .stat-card,
    .stats-card,
    .metric-card,
    .widget,
    .widget-card,
    .feature-inner,
    .feature-card,
    .home-card,
    .info-box,
    .box,
    .section-card,
    .module-card,
    .glass-card,
    .glass-panel,
    .event-card,
    .news-card,
    .media-card,
    .sponsor-card,
    .player-card,
    .team-card,
    .team-info-card,
    .player-profile-card,
    .coach-card,
    .achievement-content,
    .timeline-content,
    .event-list-item,
    .event-details-card,
    .content-section,
    .social-follow-card,
    .stat-box,
    .login-card,
    .register-card,
    .auth-card,
    .profile-card,
    .attendance-card,
    .transport-card,
    .match-card,
    .lineup-card,
    .conditioning-card,
    .green-zone-card,
    .details-card,
    .form-container,
    .content-container,
    .table-responsive
) {
    background:
        linear-gradient(180deg, var(--rfc-panel-bg-top) 0%, var(--rfc-panel-bg-bottom) 100%),
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.12), transparent 44%),
        linear-gradient(145deg, rgba(120, 255, 180, 0.05), rgba(255, 255, 255, 0.02)) !important;
    border: 1px solid var(--rfc-panel-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--rfc-panel-shadow), inset 0 1px 0 var(--rfc-panel-highlight) !important;
    color: var(--rfc-panel-text) !important;
    overflow: hidden !important;
    position: relative !important;
}

@supports ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
    :where(
        .card,
        .panel,
        .content-panel,
        .dashboard-panel,
        .page-panel,
        .settings-panel,
        .profile-section,
        .event-section,
        .form-section,
        .table-panel,
        .admin-card,
        .admin-panel,
        .manager-card,
        .manager-panel,
        .coach-card,
        .coach-panel,
        .stat-card,
        .stats-card,
        .metric-card,
        .widget,
        .widget-card,
        .feature-inner,
        .feature-card,
        .home-card,
        .info-box,
        .box,
        .section-card,
        .module-card,
        .glass-card,
        .glass-panel,
        .event-card,
        .news-card,
        .media-card,
        .sponsor-card,
        .player-card,
        .team-card,
        .team-info-card,
        .player-profile-card,
        .coach-card,
        .achievement-content,
        .timeline-content,
        .event-list-item,
        .event-details-card,
        .content-section,
        .social-follow-card,
        .stat-box,
        .login-card,
        .register-card,
        .auth-card,
        .profile-card,
        .attendance-card,
        .transport-card,
        .match-card,
        .lineup-card,
        .conditioning-card,
        .green-zone-card,
        .details-card,
        .form-container,
        .content-container,
        .table-responsive
    ) {
        -webkit-backdrop-filter: blur(14px) saturate(145%);
        backdrop-filter: blur(14px) saturate(145%);
    }
}

/* Keep structural card header bars intact; only normalize borders. */
:where(.card-header, .panel-header, .widget-header, .section-card-header, .modal-header) {
    border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

/* Content text should read like popup menu item text. */
:where(
    .card,
    .panel,
    .feature-inner,
    .content-panel,
    .event-card,
    .news-card,
    .media-card,
    .details-card,
    .team-info-card,
    .player-profile-card,
    .coach-card,
    .achievement-content,
    .timeline-content,
    .event-list-item,
    .event-details-card,
    .content-section,
    .social-follow-card,
    .stat-box
) :where(
    p,
    li,
    span,
    small,
    label,
    .text-muted,
    .small,
    .info-value,
    .card-text
) {
    color: var(--rfc-panel-text) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
}

/* Headings use the icon green with a darker green stroke. */
:where(
    .card,
    .panel,
    .feature-inner,
    .content-panel,
    .team-info-card,
    .player-profile-card,
    .coach-card,
    .achievement-content,
    .timeline-content,
    .event-list-item,
    .event-details-card,
    .content-section,
    .social-follow-card,
    .stat-box
) :where(h1, h2, h3, h4, h5, h6, .card-title) {
    color: var(--rfc-heading-green) !important;
    font-weight: 800 !important;
    text-shadow:
        -1px -1px 0 var(--rfc-heading-stroke),
        1px -1px 0 var(--rfc-heading-stroke),
        -1px 1px 0 var(--rfc-heading-stroke),
        1px 1px 0 var(--rfc-heading-stroke),
        0 2px 8px rgba(0, 0, 0, 0.24) !important;
}

.section-heading {
    color: var(--rfc-heading-green) !important;
    font-weight: 800 !important;
    text-shadow:
        -1px -1px 0 var(--rfc-heading-stroke),
        1px -1px 0 var(--rfc-heading-stroke),
        -1px 1px 0 var(--rfc-heading-stroke),
        1px 1px 0 var(--rfc-heading-stroke),
        0 2px 8px rgba(0, 0, 0, 0.24) !important;
}

/* One global button standard for CTAs, cards and actions. */
:where(
    .btn,
    a.btn,
    button.btn,
    input[type="submit"],
    input[type="button"]
):not(.ticker-widget-btn):not(.news-ticker-nav-item):not(.ticker-social-icon):not(.menu-toggle):not(.offcanvas-close) {
    align-items: center;
    background: linear-gradient(145deg, var(--rfc-button-top), var(--rfc-button-bottom)) !important;
    border: 1px solid var(--rfc-button-border) !important;
    border-radius: 999px !important;
    box-shadow: var(--rfc-button-shadow) !important;
    color: #ffffff !important;
    display: inline-flex;
    font-size: var(--rfc-button-font) !important;
    font-weight: 800 !important;
    gap: 0.38rem;
    justify-content: center;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    min-height: calc((var(--rfc-button-pad-y) * 2) + 1.15em + 2px);
    padding: var(--rfc-button-pad-y) var(--rfc-button-pad-x) !important;
    text-decoration: none !important;
    text-shadow:
        -1px -1px 0 rgba(0, 46, 27, 0.82),
        1px 1px 0 rgba(0, 46, 27, 0.82),
        0 2px 8px rgba(0, 0, 0, 0.24) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

:where(
    .btn,
    a.btn,
    button.btn,
    input[type="submit"],
    input[type="button"]
):not(.ticker-widget-btn):not(.news-ticker-nav-item):not(.ticker-social-icon):not(.menu-toggle):not(.offcanvas-close):hover {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(225, 255, 236, 0.94)) !important;
    border-color: rgba(46, 204, 113, 0.56) !important;
    box-shadow:
        0 13px 28px rgba(0, 70, 38, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
    color: #1a8a49 !important;
    transform: translateY(-1px) !important;
}

:where(
    .btn,
    a.btn,
    button.btn,
    input[type="submit"],
    input[type="button"]
):not(.ticker-widget-btn):not(.news-ticker-nav-item):not(.ticker-social-icon):not(.menu-toggle):not(.offcanvas-close):focus {
    box-shadow:
        0 0 0 0.18rem rgba(156, 255, 191, 0.35),
        0 10px 22px rgba(0, 70, 38, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

.btn-sm {
    --rfc-button-pad-y: 0.26rem;
    --rfc-button-pad-x: 0.62rem;
    --rfc-button-font: 0.78rem;
}

.btn-lg {
    --rfc-button-pad-y: 0.46rem;
    --rfc-button-pad-x: 1.12rem;
    --rfc-button-font: 0.95rem;
}

.card .btn,
.section-card .btn,
.module-card .btn,
.content-card .btn,
.sponsor-card .btn,
.btn-sponsor-visit {
    width: auto;
    max-width: 100%;
}

.page-header-buttons {
    gap: clamp(0.35rem, 0.8vw, 0.6rem) !important;
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
}

.page-header-buttons .page-header-btn {
    flex: 0 1 clamp(7rem, 13vw, 10.25rem) !important;
    min-width: 0 !important;
    min-height: 2rem !important;
    padding: 0.34rem 0.74rem !important;
    font-size: clamp(0.76rem, 0.8vw, 0.9rem) !important;
}

.input-group > .btn,
.input-group-append > .btn,
.input-group-prepend > .btn {
    border-radius: 0 8px 8px 0 !important;
    box-shadow: none !important;
    min-height: auto !important;
    padding: 0.36rem 0.68rem !important;
}

.input-group > .form-control,
.input-group > .form-select {
    min-height: 2.25rem;
}

.tab-content {
    margin-top: clamp(0.7rem, 1.2vw, 1rem);
}

/* Register flow helper bars dock to the active card instead of floating alone. */
.page-register .alert:has(a[href*="login"]),
.page-register .alert:has(a[href*="login.php"]),
.page-register .already-registered-prompt,
.page-register .register-login-prompt,
.page-register .registration-login-prompt,
.page-register .login-prompt {
    border-radius: 0 0 12px 12px !important;
    margin: -0.35rem auto clamp(0.8rem, 1.4vw, 1.05rem) !important;
    max-width: var(--rfc-content-max);
    position: relative;
    z-index: 0;
}

.page-register .form-step,
.page-register .register-step,
.page-register .registration-step,
.page-register .form-section,
.page-register .register-section,
.page-register .registration-section,
.page-register .disclaimer-card,
.page-register .disclaimer-section {
    position: relative;
    z-index: 1;
}

.page-register .disclaimer-card,
.page-register .disclaimer-section,
.page-register [data-step="disclaimer"],
.page-register #disclaimer,
.page-register #disclaimer-step {
    border: 1px solid var(--rfc-card-border);
    border-radius: var(--rfc-card-radius);
    background: var(--rfc-card-bg);
    box-shadow: var(--rfc-panel-shadow);
    color: var(--rfc-panel-text);
    padding: var(--rfc-card-padding);
}

.page-register .disclaimer-card p,
.page-register .disclaimer-section p,
.page-register [data-step="disclaimer"] p,
.page-register #disclaimer p,
.page-register #disclaimer-step p {
    color: rgba(247, 255, 249, 0.9);
}

.page-register .submit-card,
.page-register .submit-section,
.page-register [data-step="submit"],
.page-register #submit-step {
    border: 1px solid var(--rfc-card-border);
    border-radius: var(--rfc-card-radius);
    background: var(--rfc-card-bg);
    box-shadow: var(--rfc-panel-shadow);
    padding: var(--rfc-card-padding);
}

.page-register .alert:has(a[href*="login"]) ~ .alert:has(a[href*="login"]),
.page-register .alert:has(a[href*="login.php"]) ~ .alert:has(a[href*="login.php"]),
.page-register .already-registered-prompt ~ .already-registered-prompt,
.page-register .register-login-prompt ~ .register-login-prompt,
.page-register .registration-login-prompt ~ .registration-login-prompt {
    display: none !important;
}

/* WordPress embedded registration variant: keep the legacy replacement compact. */
.page-register.wp-embed option[value="fan"],
.page-register.wp-embed option[value="family"],
.page-register.wp-embed option[value="friend"],
.page-register.wordpress-embed option[value="fan"],
.page-register.wordpress-embed option[value="family"],
.page-register.wordpress-embed option[value="friend"],
.page-register.skin-wordpress option[value="fan"],
.page-register.skin-wordpress option[value="family"],
.page-register.skin-wordpress option[value="friend"],
.page-register[data-skin="wordpress"] option[value="fan"],
.page-register[data-skin="wordpress"] option[value="family"],
.page-register[data-skin="wordpress"] option[value="friend"] {
    display: none;
}

/* Footer compaction keeps targets readable without dominating the viewport. */
footer,
.site-footer,
.main-footer,
#footer {
    font-size: clamp(0.82rem, 0.78vw, 0.94rem);
}

footer .container,
.site-footer .container,
.main-footer .container,
#footer .container {
    padding-top: clamp(1rem, 2vw, 1.65rem) !important;
    padding-bottom: clamp(0.9rem, 1.8vw, 1.45rem) !important;
}

footer h2,
footer h3,
footer h4,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.main-footer h2,
.main-footer h3,
.main-footer h4,
#footer h2,
#footer h3,
#footer h4 {
    font-size: clamp(0.98rem, 1.05vw, 1.15rem);
    line-height: 1.2;
    margin-bottom: 0.45rem;
}

footer p,
footer ul,
.site-footer p,
.site-footer ul,
.main-footer p,
.main-footer ul,
#footer p,
#footer ul {
    margin-bottom: 0.45rem;
}

footer li,
.site-footer li,
.main-footer li,
#footer li {
    margin-bottom: 0.18rem;
}

footer a,
.site-footer a,
.main-footer a,
#footer a {
    min-height: 2rem;
}

footer .row,
.site-footer .row,
.main-footer .row,
#footer .row {
    row-gap: clamp(0.65rem, 1.4vw, 1rem);
}

footer .social-links,
footer .footer-social,
.site-footer .social-links,
.site-footer .footer-social,
.main-footer .social-links,
.main-footer .footer-social,
#footer .social-links,
#footer .footer-social {
    gap: 0.45rem;
}

@media (max-width: 575.98px) {
    footer .container,
    .site-footer .container,
    .main-footer .container,
    #footer .container {
        padding-top: 0.85rem !important;
        padding-bottom: 0.85rem !important;
    }
}

/* Sponsor page: late-loaded fallback so the page cannot miss its card polish. */
.page-sponsors main > .container,
.page-sponsors .sponsors-shell,
body:has([href*="sponsors.php"]) .sponsors-shell {
    padding-top: clamp(1rem, 2.2vw, 1.8rem) !important;
    padding-bottom: clamp(1.2rem, 2.6vw, 2.2rem) !important;
}

.page-sponsors .sponsors-shell .row,
.page-sponsors main > .container .row,
.sponsors-shell .row {
    row-gap: clamp(0.8rem, 1.45vw, 1.15rem);
}

.page-sponsors .sponsors-shell h1,
.page-sponsors .sponsors-shell h2,
.page-sponsors main h1,
.page-sponsors main h2,
.sponsors-shell h1,
.sponsors-shell h2 {
    font-size: clamp(1.75rem, 3vw, 2.7rem);
    line-height: 1.04;
    margin-bottom: 0.5rem;
}

.page-sponsors .sponsors-shell .lead,
.page-sponsors main .lead,
.sponsors-shell .lead {
    font-size: clamp(0.94rem, 1vw, 1.05rem);
    line-height: 1.58;
    margin-bottom: 0;
}

.page-sponsors .sponsor-card,
.page-sponsors main .card,
.sponsors-shell .sponsor-card,
.sponsors-shell .card {
    border-radius: 12px !important;
    overflow: hidden;
}

.page-sponsors .sponsor-card .card-header,
.page-sponsors main .card .card-header,
.sponsors-shell .sponsor-card .card-header,
.sponsors-shell .card .card-header {
    align-items: center;
    display: flex;
    min-height: 2.45rem;
    padding: 0.58rem 0.85rem !important;
}

.page-sponsors .sponsor-card .card-body,
.page-sponsors main .card .card-body,
.sponsors-shell .sponsor-card .card-body,
.sponsors-shell .card .card-body {
    padding: clamp(0.85rem, 1.35vw, 1.08rem) !important;
}

.page-sponsors .sponsor-card h3,
.page-sponsors main .card h3,
.page-sponsors main .card-title,
.sponsors-shell .sponsor-card h3,
.sponsors-shell .card h3,
.sponsors-shell .card-title {
    font-size: clamp(1.1rem, 1.35vw, 1.32rem);
    line-height: 1.15;
    margin-bottom: 0.5rem;
}

.page-sponsors .sponsor-logo,
.page-sponsors .sponsor-logo-wrap,
.page-sponsors main .card > div:first-child:not(.card-header):not(.card-body),
.sponsors-shell .sponsor-logo,
.sponsors-shell .sponsor-logo-wrap {
    align-items: center;
    background: rgba(247, 250, 248, 0.96);
    display: flex;
    justify-content: center;
    min-height: clamp(7rem, 12vw, 9.4rem);
    padding: clamp(0.8rem, 1.4vw, 1.1rem);
}

.page-sponsors .sponsor-logo img,
.page-sponsors .sponsor-logo-wrap img,
.sponsors-shell .sponsor-logo img,
.sponsors-shell .sponsor-logo-wrap img {
    max-height: 5rem;
    max-width: 82%;
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .page-header-buttons {
        gap: 0.35rem !important;
    }

    .page-header-buttons .page-header-btn {
        flex: 1 1 calc(50% - 0.35rem) !important;
        max-width: none;
        min-height: 1.9rem !important;
        padding: 0.32rem 0.58rem !important;
    }
}

/* Homepage Events / News / Media switcher should use the same button family. */
.home-tabs.card .card-header,
.home-tabs.card .card-header.bg-transparent {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.home-tabs.card,
.home-tabs.card .card-body,
.home-tabs.card .tab-content,
.home-tabs.card .tab-pane {
    background: transparent !important;
}

.home-tabs.card,
.welcome-section .card,
.card.card-wide,
.mt-5 .card.card-wide {
    background:
        linear-gradient(180deg, var(--rfc-panel-bg-top) 0%, var(--rfc-panel-bg-bottom) 100%),
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.12), transparent 44%),
        linear-gradient(145deg, rgba(120, 255, 180, 0.05), rgba(255, 255, 255, 0.02)) !important;
    border: 1px solid var(--rfc-panel-border) !important;
    box-shadow: var(--rfc-panel-shadow), inset 0 1px 0 var(--rfc-panel-highlight) !important;
}

.feature {
    background: transparent !important;
    box-shadow: none !important;
}

.feature-inner {
    background:
        linear-gradient(180deg, var(--rfc-feature-bg-top) 0%, var(--rfc-feature-bg-bottom) 100%),
        radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.16), transparent 42%),
        linear-gradient(145deg, rgba(120, 255, 180, 0.08), rgba(255, 255, 255, 0.03)) !important;
    border: 1px solid var(--rfc-panel-border) !important;
    box-shadow: var(--rfc-panel-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    -webkit-backdrop-filter: blur(16px) saturate(155%) !important;
    backdrop-filter: blur(16px) saturate(155%) !important;
}

.feature-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 24%, transparent 56%),
        radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.10), transparent 38%);
}

.feature-icon,
.feature-icon i {
    filter:
        drop-shadow(1px 0 0 rgba(18, 44, 28, 0.92))
        drop-shadow(-1px 0 0 rgba(18, 44, 28, 0.92))
        drop-shadow(0 1px 0 rgba(18, 44, 28, 0.92))
        drop-shadow(0 -1px 0 rgba(18, 44, 28, 0.92));
}

.home-tabs.card .modern-home-tabs {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    gap: 0.75rem !important;
    justify-content: center !important;
    padding: 0 !important;
}

.home-tabs.card .modern-home-tabs .nav-link {
    align-items: center;
    background: linear-gradient(145deg, var(--rfc-button-top), var(--rfc-button-bottom)) !important;
    border: 1px solid var(--rfc-button-border) !important;
    border-radius: 999px !important;
    box-shadow: var(--rfc-button-shadow) !important;
    color: #ffffff !important;
    display: inline-flex;
    font-weight: 800 !important;
    padding: 0.6rem 1.2rem !important;
    text-shadow:
        -1px -1px 0 rgba(0, 46, 27, 0.82),
        1px 1px 0 rgba(0, 46, 27, 0.82),
        0 2px 8px rgba(0, 0, 0, 0.24) !important;
}

.home-tabs.card .modern-home-tabs .nav-link:hover,
.home-tabs.card .modern-home-tabs .nav-link:focus {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(225, 255, 236, 0.94)) !important;
    border-color: rgba(46, 204, 113, 0.56) !important;
    box-shadow:
        0 13px 28px rgba(0, 70, 38, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
    color: #1a8a49 !important;
    transform: translateY(-2px) !important;
}

.home-tabs.card .modern-home-tabs .nav-link.active {
    background: linear-gradient(145deg, var(--rfc-button-top), var(--rfc-button-bottom)) !important;
    border-color: var(--rfc-button-border) !important;
    box-shadow: var(--rfc-button-shadow) !important;
    color: #ffffff !important;
    transform: none !important;
}

.home-tabs.card .card-body,
.welcome-section .card .card-body,
.card.card-wide .card-body {
    background: transparent !important;
}

.home-tabs.card .tab-pane,
.home-tabs.card .tab-pane p,
.home-tabs.card .tab-pane .text-muted,
.home-tabs.card .tab-pane .small,
.home-tabs.card .tab-pane small,
.home-tabs.card .tab-pane span,
.home-tabs.card .tab-pane a:not(.btn) {
    color: var(--rfc-panel-text) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
}

/* Threads fallback for places where FA brand icon is unavailable. */
.threads-fallback-icon {
    align-items: center;
    display: inline-flex !important;
    font-style: normal;
    justify-content: center;
    line-height: 1;
}

.social-icon .threads-fallback-icon {
    color: #2ecc71;
    font-size: 2rem;
    width: auto;
    height: auto;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.social-icon:hover .threads-fallback-icon {
    color: #ffffff;
}

footer .threads-fallback-icon {
    font-size: 1.2rem;
    vertical-align: middle;
}
