/* ——— Brand tokens from the club logo ———
   Hierarchy (first → last): ink + gray foundation → green / blue / purple → gold accent */
.club-public-body {
    --club-primary: #17171a;
    --club-muted: #737578;
    --club-border: rgba(115, 117, 120, 0.35);
    --club-green: #4cae51;
    --club-blue: #32a1d9;
    --club-purple: #aa2868;
    --club-green-rgb: 76, 174, 81;
    --club-blue-rgb: 50, 161, 217;
    --club-purple-rgb: 170, 40, 104;
    --club-magenta: var(--club-purple);
    /* Gold — last in hierarchy: arcs, footer rule, swashes, outline CTAs only */
    --club-gold: #c3a435;
    --club-gold-brand: #c3a435;
    --club-gold-hover: #b89b30;
    --club-gold-deep: #b89b30;
    --club-gold-rgb: 195, 164, 53;
    --club-ink: #17171a;
    --club-ink-soft: #737578;
    --club-ink-muted: #737578;
    --club-font: "Cairo", "Segoe UI", Tahoma, sans-serif;
}

/* Category accent modifiers (programs, strategic goals / services axes) */
.club-card-accent--green {
    --card-accent: var(--club-green);
    --card-accent-rgb: 76, 174, 81;
}

.club-card-accent--blue {
    --card-accent: var(--club-blue);
    --card-accent-rgb: 50, 161, 217;
}

.club-card-accent--purple {
    --card-accent: var(--club-purple);
    --card-accent-rgb: 170, 40, 104;
}

/* Secondary CTA — neutral surface (no gold) */
.club-public-body [class*="__btn--gold"] {
    background: #fff !important;
    color: var(--club-ink-soft) !important;
    border: 1px solid var(--club-border) !important;
    box-shadow: 0 1px 2px rgba(23, 23, 26, 0.06) !important;
}

.club-public-body [class*="__btn--gold"]:hover,
.club-public-body [class*="__btn--gold"]:focus-visible {
    background: #fff !important;
    color: var(--club-ink) !important;
    border-color: var(--club-blue) !important;
    box-shadow: 0 0 0 3px rgba(50, 161, 217, 0.14) !important;
}

/* Brand category icons (arc + dot + silhouette) */
.club-brand-icon {
    display: block;
    flex-shrink: 0;
}

.club-brand-icon__dot {
    fill: currentColor;
    stroke: none;
}

/* ——— Light mode only (no dark theme) ——— */
html.club-site-light,
html.club-site-light body {
    color-scheme: light;
}

html.club-site-light .dark-mode {
    display: none !important;
}

html.club-site-light .light-mode {
    display: inline-block !important;
}

html.club-site-light img.light-mode {
    display: inline-block !important;
}

/* ——— Typography: Cairo ——— */
.club-public-body,
.club-public-body .header,
.club-public-body .header *,
.club-public-body .main,
.club-public-body .main *,
.club-public-body .footer,
.club-public-body .footer *,
.club-public-body .btn,
.club-public-body button,
.club-public-body input,
.club-public-body textarea,
.club-public-body select,
.club-public-body label,
.club-public-body [class*="text-"],
.club-public-body h1,
.club-public-body h2,
.club-public-body h3,
.club-public-body h4,
.club-public-body h5,
.club-public-body h6,
.club-public-body .font-heading,
.club-public-body p,
.club-public-body a,
.club-public-body span,
.club-public-body li {
    font-family: var(--club-font) !important;
}

.club-public-body .fa,
.club-public-body .fas,
.club-public-body .far,
.club-public-body .fab,
.club-public-body .fal,
.club-public-body [class*="fa-"],
.club-public-body [class*="uicons"] {
    font-family: var(--fa-style-family, "Font Awesome 6 Free") !important;
}

/* Public page rhythm & typography */
.club-public-body .main {
    line-height: 1.75;
}

.club-public-body .main h1,
.club-public-body .main h2 {
    line-height: 1.28;
    letter-spacing: -0.01em;
    color: var(--club-ink);
}

.club-public-body .main p,
.club-public-body .main .lead {
    color: var(--club-muted);
}

/* Dark bands — global ink/muted must not override section text */
.club-public-body .main .club-president h1,
.club-public-body .main .club-president h2,
.club-public-body .main .club-programs h1,
.club-public-body .main .club-programs h2,
.club-public-body .main .club-goals h1,
.club-public-body .main .club-goals h2 {
    color: #fff;
}

.club-public-body .main .club-president p,
.club-public-body .main .club-president li,
.club-public-body .main .club-programs p,
.club-public-body .main .club-programs li,
.club-public-body .main .club-goals p,
.club-public-body .main .club-goals li {
    color: inherit;
}

.club-public-body .main h3,
.club-public-body .main h4 {
    line-height: 1.35;
}

.club-public-body .main p,
.club-public-body .main li {
    line-height: 1.8;
}

.club-public-body .main > .section-box + .section-box {
    margin-top: 0;
}

/* ——— RTL base ——— */
html[dir="rtl"] body {
    text-align: right;
}

html[dir="rtl"] .main-menu,
html[dir="rtl"] .mobile-menu,
html[dir="rtl"] .menu-footer,
html[dir="rtl"] .breadcrumbs {
    direction: rtl;
}

html[dir="rtl"] .mr-10 {
    margin-left: 10px !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .ml-40 {
    margin-right: 40px !important;
    margin-left: 0 !important;
}

html[dir="rtl"] .text-md-start,
html[dir="rtl"] .text-lg-start {
    text-align: right !important;
}

html[dir="rtl"] .text-md-end,
html[dir="rtl"] .text-lg-end {
    text-align: left !important;
}

html[dir="rtl"] .card-journey-small .card-program,
html[dir="rtl"] .card-news .card-program {
    direction: rtl;
}

html[dir="rtl"] .public-page-content {
    direction: rtl;
}

html[dir="rtl"] .public-page-content ul,
html[dir="rtl"] .public-page-content ol {
    padding-right: 1.25rem;
    padding-left: 0;
}

/* ——— Brand logo (footer + mobile drawer); the header lives in club-header.css ——— */
.club-brand-logo {
    max-height: 48px;
    width: auto;
    max-width: 100%;
}

.club-text-logo {
    display: inline-block;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--bs-neutral-1000, #1a1a1a);
    max-width: 200px;
}

.club-text-logo-footer {
    color: #fff;
    max-width: 260px;
}

/* Home hero styles live in club-hero.css (loaded on the home page only). */

/* ——— Shared compact page hero (replaces Travila box-banner-home4) ——— */
.club-page-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(42% 60% at 88% 0%, rgba(50, 161, 217, 0.08) 0%, transparent 70%),
        radial-gradient(38% 55% at 8% 20%, rgba(76, 174, 81, 0.06) 0%, transparent 72%),
        linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
    border-bottom: 1px solid var(--club-border);
}

.club-page-hero__container {
    padding-block: clamp(28px, 4vw, 48px) clamp(36px, 5vw, 56px);
}

.club-page-hero__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--club-muted);
}

.club-page-hero__crumbs a {
    color: var(--club-muted);
    text-decoration: none;
}

.club-page-hero__crumbs a:hover {
    color: var(--club-blue);
}

.club-page-hero__title {
    margin: 0;
    max-width: 40rem;
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--club-ink);
}

.club-page-hero__subtitle {
    margin: 10px 0 0;
    max-width: 36rem;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.7;
    color: var(--club-muted);
}

/* Shared button press — wins over section :hover scale */
html[dir="rtl"] body.club-public-body a[class*="__btn"]:active,
html[dir="rtl"] body.club-public-body button[class*="__btn"]:active,
html[dir="rtl"] body.club-public-body .club-header__burger:active {
    transform: scale(0.95);
}

/* ——— Floating WhatsApp (from admin social links) ——— */
.club-whatsapp-float {
    --wa-green: #25d366;
    position: fixed;
    z-index: 980;
    left: 22px;
    bottom: 22px;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    color: #fff;
    background: var(--wa-green);
    box-shadow: 0 12px 28px -10px rgba(37, 211, 102, 0.75);
    text-decoration: none;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}

.club-whatsapp-float__pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--wa-green);
    animation: club-whatsapp-pulse 2s ease-out infinite;
    pointer-events: none;
}

.club-whatsapp-float svg {
    position: relative;
    z-index: 1;
    width: 28px;
    height: 28px;
}

.club-whatsapp-float svg path {
    fill: currentColor;
    stroke: none;
}

.club-whatsapp-float:hover,
.club-whatsapp-float:focus-visible {
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 16px 36px -10px rgba(37, 211, 102, 0.85);
}

.club-whatsapp-float:active {
    transform: scale(0.95);
}

/* ——— Back to top (scrollUp plugin) ——— */
.club-public-body #scrollUp {
    display: grid !important;
    place-items: center;
    inset-inline-end: 22px !important;
    inset-inline-start: auto !important;
    right: 22px !important;
    left: auto !important;
    bottom: 22px !important;
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    border: none !important;
    background: #fff !important;
    color: var(--club-blue, #32a1d9);
    text-align: center;
    text-decoration: none;
    animation: none !important;
    box-shadow:
        0 0 0 1px rgba(50, 161, 217, 0.28),
        0 12px 28px -10px rgba(50, 161, 217, 0.45);
    z-index: 979 !important;
    transition:
        transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        background-color 0.35s ease,
        box-shadow 0.35s ease,
        color 0.35s ease;
}

.club-public-body #scrollUp svg {
    display: block;
    width: 22px !important;
    height: 22px !important;
    fill: currentColor !important;
    position: static !important;
    transition: transform 0.35s ease;
}

.club-public-body #scrollUp:hover,
.club-public-body #scrollUp:focus-visible {
    background: var(--club-blue, #32a1d9) !important;
    color: #fff;
    transform: scale(1.06);
    box-shadow:
        0 0 0 1px rgba(50, 161, 217, 0.35),
        0 16px 36px -10px rgba(50, 161, 217, 0.55);
    outline: none;
}

.club-public-body #scrollUp:hover svg,
.club-public-body #scrollUp:focus-visible svg {
    transform: translateY(-2px);
}

.club-public-body #scrollUp:active {
    transform: scale(0.95);
}

@media (max-width: 575.98px) {
    .club-public-body #scrollUp {
        inset-inline-end: 16px !important;
        right: 16px !important;
        bottom: 16px !important;
        width: 50px !important;
        height: 50px !important;
    }
}

@keyframes club-whatsapp-pulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.55); opacity: 0; }
}

@media (max-width: 575.98px) {
    .club-whatsapp-float {
        left: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }

    .club-whatsapp-float svg {
        width: 24px;
        height: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html[dir="rtl"] body.club-public-body a[class*="__btn"]:active,
    html[dir="rtl"] body.club-public-body button[class*="__btn"]:active,
    html[dir="rtl"] body.club-public-body .club-header__burger:active {
        transform: none;
    }

    .club-whatsapp-float__pulse {
        animation: none;
    }
}