/* =========================================================
   assets/style.css — Mafaza Events & Conferences CMS main stylesheet
   All colors come from CSS variables defined in theme.css.php,
   which are DERIVED from the club's brand colors. Changing the
   two brand colors in admin re-skins everything below.
   ========================================================= */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
  overflow-x:hidden;
  max-width:100%;
}
[dir="rtl"] body{font-family:'Tajawal',sans-serif}
[dir="ltr"] body{font-family:'Inter',sans-serif}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

.container{width:min(1200px,92%);margin-inline:auto}
section{padding:90px 0}

/* shared bits */
.eyebrow{
  display:inline-block;font-weight:700;font-size:.8rem;letter-spacing:1px;
  color:var(--primary);background:var(--primary-tint);
  padding:6px 16px;border-radius:50px;margin-bottom:16px;
}
.sec-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;line-height:1.2;width:100%}
.sec-head{margin-bottom:48px;max-width:640px}
.sec-head p{color:var(--muted);margin-top:10px;font-size:1.05rem}
.sec-head.center{width:100%;max-width:640px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.sec-head.center > *{max-width:100%}

.btn{
  display:inline-flex;align-items:center;gap:10px;font-weight:700;
  padding:14px 30px;border-radius:50px;transition:.25s;cursor:pointer;border:none;
  font-family:inherit;font-size:1rem;
  /* A button sizes to its label. Inside a grid or a stretch-aligned flex
     container it would otherwise fill the whole column and render as a
     giant bar, so pin its self-alignment here rather than at each usage. */
  justify-self:start;align-self:center;width:auto;max-width:100%;
}
.btn-primary{background:var(--brand-primary);color:var(--on-primary);box-shadow:0 12px 30px -8px var(--primary-overlay)}
.btn-primary:hover{background:var(--primary-hover);color:var(--on-primary);transform:translateY(-3px);box-shadow:0 18px 40px -10px var(--primary-overlay)}
/* Hero register CTA: independently colourable. Falls back to the standard
   primary button styling when no custom colour is set. */
.hero-cta-register{background:var(--hero-register-bg,var(--brand-primary));color:var(--hero-register-fg,var(--on-primary))}
.hero-cta-register:hover{background:var(--hero-register-bg,var(--primary-hover));color:var(--hero-register-fg,var(--on-primary));filter:brightness(1.05)}
/* Outline button. The default is readable on LIGHT sections (most of the
   site). On dark surfaces — the hero, coloured CTA bands — the frosted
   white treatment is applied via .on-dark instead, so the same class can
   never end up as white-on-white. */
.btn-ghost{background:transparent;color:var(--primary);border:1.5px solid var(--brand-primary)}
.btn-ghost:hover{background:var(--brand-primary);color:var(--on-primary)}
.hero .btn-ghost,
.cta-banner .btn-ghost,
.promo-card .btn-ghost,
.btn-ghost.on-dark{background:rgba(255,255,255,.18);color:#fff;border:1.5px solid rgba(255,255,255,.45);backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);box-shadow:0 8px 24px -8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.hero .btn-ghost:hover,
.cta-banner .btn-ghost:hover,
.promo-card .btn-ghost:hover,
.btn-ghost.on-dark:hover{background:rgba(255,255,255,.30);border-color:rgba(255,255,255,.6);color:#fff}

.sec-cta{display:flex;justify-content:center;margin-top:40px}
.sec-cta a{
  display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.95rem;
  color:var(--primary);background:var(--primary-tint);border:1.5px solid var(--line);
  padding:12px 28px;border-radius:50px;transition:.25s;
}
.sec-cta a:hover{background:var(--brand-primary);color:var(--on-primary);border-color:var(--brand-primary);transform:translateY(-2px)}
.sec-cta a i{transition:.25s}
[dir="rtl"] .sec-cta a:hover i{transform:translateX(-4px)}
[dir="ltr"] .sec-cta a:hover i{transform:translateX(4px)}

.reveal{opacity:0;transform:translateY(30px);transition:.7s cubic-bezier(.2,.7,.3,1);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
/* Centered section heads must never move horizontally — a transformed,
   centered RTL element can land a sub-pixel off in some browsers (Edge),
   nudging the title sideways. So they fade in with opacity only. */
.sec-head.center.reveal{transform:none}
.sec-head.center.reveal.in{transform:none}

/* =========================================================
   HEADER
   ========================================================= */
.hdr-bar{
  position:sticky;top:0;z-index:100;
  background:var(--header-bg,#fff);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.hdr-grid{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
/* Primary event logo plus any secondary official logos (ministries,
   government bodies). The row wraps rather than shrinking the marks, since a
   squashed government logo is worse than a second line. */
.hdr-logos{display:flex;align-items:center;gap:14px;flex:0 0 auto;min-width:0}
.hdr-logo-sep{width:1px;height:30px;background:var(--line,#e2e8e6);flex:0 0 auto}
.hdr-logo-extra{display:flex;align-items:center;flex:0 0 auto}
.hdr-logo-extra img{height:38px;width:auto;max-width:150px;object-fit:contain;display:block}
.hdr-logo{display:flex;align-items:center;flex:0 0 auto}
.hdr-logo img{height:46px;width:auto}
.hdr-logo .hdr-logo-text{font-weight:900;font-size:1.25rem;color:var(--ink)}
/* The nav sizes to its own content and never shrinks below it: shrinking
   was letting the links overflow the container and collide with the logo
   and the action buttons. Gaps tighten fluidly as space gets scarce, and
   the drawer takes over (see the 1100px breakpoint) before it can't fit. */
.hdr-nav{display:flex;gap:clamp(10px,1.4vw,28px);font-weight:600;flex:0 1 auto;justify-content:center;flex-wrap:nowrap;min-width:max-content}
.hdr-nav a{white-space:nowrap}
/* Logo and actions keep their intrinsic width so the nav can't push into them. */
.hdr-logo{flex:0 0 auto}
.hdr-actions{flex:0 0 auto}
.hdr-nav a{color:var(--header-fg,var(--muted));opacity:.85;transition:color .2s,opacity .2s}
.hdr-nav a:hover{opacity:1}
/* Hover / active must never switch to --primary: when the header background
   IS the primary colour the text would vanish into the bar. Instead keep the
   header foreground colour at full opacity and mark the state with an
   underline, which reads correctly on any header background. */
.hdr-nav a{position:relative}
.hdr-nav a:hover,.hdr-nav a.active{color:var(--header-fg,var(--primary));opacity:1}
.hdr-nav a::after{content:'';position:absolute;inset-inline:0;bottom:-6px;height:2px;border-radius:2px;
  background:currentColor;opacity:0;transform:scaleX(.4);transition:opacity .2s,transform .2s}
.hdr-nav a:hover::after,.hdr-nav a.active::after{opacity:.9;transform:scaleX(1)}
.hdr-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hdr-lang{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1.5px solid var(--header-fg-border,var(--line));font-weight:800;font-size:.8rem;color:var(--header-fg,var(--ink));transition:.25s;
}
.hdr-lang:hover{background:var(--brand-primary);color:var(--on-primary);border-color:var(--brand-primary)}
.hdr-cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;padding:10px 18px;border-radius:50px;transition:.25s}
.hdr-cta-shop{background:var(--brand-primary);color:var(--on-primary);box-shadow:var(--shadow)}
.hdr-cta-shop:hover{background:var(--primary-hover);transform:translateY(-2px)}
.hdr-cta-tickets{background:transparent;color:var(--primary);border:1.5px solid var(--brand-primary)}
.hdr-cta-tickets:hover{background:var(--brand-primary);color:var(--on-primary);transform:translateY(-2px)}
.hdr-cta-register{background:var(--nav-register-bg,transparent);color:var(--nav-register-fg,var(--header-fg,var(--primary)));border:1.5px solid var(--nav-register-bg,var(--header-fg-border,var(--brand-primary)))}
.hdr-cta-register:hover{background:var(--nav-register-bg,var(--header-fg,var(--brand-primary)));color:var(--nav-register-fg,var(--header-cta-hover-fg,var(--on-primary)));filter:brightness(1.08);transform:translateY(-2px)}
/* Mobile-only ticket icon (Option A) — hidden on desktop where the text CTA shows */
.hdr-ticket-icon{display:none;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--primary);border:1.5px solid var(--brand-primary);font-size:.95rem;transition:.2s}
.hdr-ticket-icon:hover{background:var(--brand-primary);color:var(--on-primary)}
/* Ticket button inside the nav drawer (Option B) — hidden on desktop */
.hdr-nav-ticket{display:none}
.hdr-burger{display:none;font-size:1.5rem;background:none;border:none;color:var(--ink);cursor:pointer}
.hdr-nav-close{display:none}
.hdr-nav-backdrop{display:none}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:90vh;display:flex;align-items:center;color:#fff;padding:80px 0;background:var(--secondary,#0d1e1c)}
/* Layering, base to top: brand gradient -> photo (owner-dialled opacity)
   -> scrim -> content.
   The gradient used to be painted by ::after, i.e. as a fully opaque sheet
   ON TOP of the photo, which is why selecting a background image appeared
   to do nothing: the colour was always covering it. It is now the base of
   the layer instead, so the photo composites against it and the opacity
   dial does what its label says. With no image the element is not rendered
   at all and .hero's own background still shows, so unchanged sites look
   unchanged. */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--grad-hero)}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:var(--hero-bg-opacity,1)}
/* Legibility scrim, above the photo and below the content. Kept separate
   from --hero-bg-opacity on purpose: dimming the photo must never dim the
   heading sitting on it. */
.hero-bg::after{content:"";position:absolute;inset:0;background:var(--hero-bg-scrim,rgba(0,0,0,.28));pointer-events:none}
.hero>.container{position:relative;z-index:2}
/* Hero text column. The supporting image is absolutely positioned over
   the other half of the section, so the text occupies ~55% and keeps a
   comfortable gap from the container edge instead of running edge to
   edge with the header above. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;width:100%;
  padding-block:28px;padding-inline-end:clamp(8px,3vw,48px)}
/* The text hugs the edge the reader starts from (right in RTL, left in
   LTR) and never spills across the half occupied by the image. */
/* Grid items align with justify-self, not auto margins. `start` follows
   the writing direction, so the text hugs the right edge in Arabic and
   the left edge in English without a second rule. */
.hero-grid>div{max-width:min(620px,55%);justify-self:start}
.hero-eyebrow{display:inline-block;background:var(--secondary);color:#fff;font-weight:700;font-size:.78rem;letter-spacing:1.5px;padding:7px 18px;border-radius:50px;margin-bottom:16px;border:1px solid rgba(255,255,255,.14);box-shadow:0 4px 14px rgba(0,0,0,.28)}
.hero-title{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:900;line-height:1.1;margin-bottom:20px;opacity:1;animation:none;color:var(--hero-title,#fff)}
.hero-title span{color:var(--accent-soft)}
.hero-text{font-size:1.2rem;opacity:1;margin-bottom:32px;max-width:520px;color:var(--hero-text,rgba(255,255,255,.92))}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-nextmatch{background:rgba(255,255,255,.1);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-lg)}
.hero-nextmatch-label{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;color:var(--accent-soft);font-size:.85rem;letter-spacing:.5px;margin-bottom:20px}
.hero-nextmatch-teams{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
.hero-nm-team{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;text-align:center}
.hero-nm-crest{width:60px;height:60px;border-radius:14px;background:var(--grad-accent);display:grid;place-items:center;color:#fff;font-weight:900;font-size:1.4rem}
.hero-nm-team b{font-size:1rem}
.hero-nm-vs{font-size:1.5rem;font-weight:900;color:var(--accent-soft)}
.hero-nextmatch-info{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.15);padding-top:18px;font-size:.85rem;opacity:.9}
.hero-nextmatch-info span{display:flex;align-items:center;gap:6px}
.hero-nextmatch-info i{color:var(--accent-soft)}
.hero-nm-tickets{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;background:var(--brand-primary);color:var(--on-primary);font-weight:700;font-size:.9rem;padding:12px 20px;border-radius:50px;transition:.2s;box-shadow:var(--shadow)}
.hero-nm-tickets:hover{background:var(--primary-hover);transform:translateY(-2px)}

/* =========================================================
   ABOUT
   ========================================================= */
.about{padding:90px 0}
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:50px;align-items:center}
.about-img{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.about-img img{aspect-ratio:4/3;object-fit:cover;width:100%}
.about-badge{position:absolute;bottom:20px;inset-inline-end:20px;background:var(--surface);padding:16px 22px;border-radius:14px;box-shadow:var(--shadow);text-align:center}
.about-badge b{display:block;font-size:2rem;font-weight:900;color:var(--primary);line-height:1}
.about-badge span{font-size:.8rem;color:var(--muted)}
.about-text p{color:var(--muted);margin-top:14px}
.about-highlights{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.about-hl{display:flex;gap:14px;align-items:flex-start;background:var(--surface);padding:16px;border-radius:14px;border:1px solid var(--line)}
.about-hl i{color:var(--primary);font-size:1.4rem;margin-top:4px}
.about-hl b{display:block;font-size:.95rem}
.about-hl span{font-size:.85rem;color:var(--muted)}

/* Vision / Mission / History — premium cards on the About page */
.about-vm{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
.about-vm-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;box-shadow:var(--shadow);overflow:hidden;transition:.3s}
.about-vm-card::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--grad-accent)}
.about-vm-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--brand-primary)}
.about-vm-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--primary-tint);color:var(--primary);font-size:1.5rem;margin-bottom:20px}
.about-vm-title{font-size:1.35rem;font-weight:900;margin-bottom:12px;color:var(--ink)}
.about-vm-body{color:var(--muted);line-height:1.9;font-size:1rem}
.about-vm-body p{margin-bottom:12px}
.about-vm-body p:last-child{margin-bottom:0}

.about-history{position:relative;background:var(--grad-dark);color:var(--on-secondary);border-radius:var(--radius);padding:44px 40px;overflow:hidden;box-shadow:var(--shadow-lg)}
.about-history::before{content:"\f19c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;font-size:15rem;opacity:.05;inset-inline-end:-30px;bottom:-50px;line-height:1}
.about-history-head{display:flex;align-items:center;gap:16px;margin-bottom:20px;position:relative;z-index:1}
.about-history-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:16px;background:var(--grad-accent);color:#fff;font-size:1.6rem;flex-shrink:0}
.about-history-title{font-size:1.7rem;font-weight:900;color:#fff}
.about-history-body{position:relative;z-index:1;color:rgba(255,255,255,.78);line-height:2;font-size:1.05rem;max-width:70ch}
.about-history-body p{margin-bottom:16px}
.about-history-body p:last-child{margin-bottom:0}

/* =========================================================
   MATCHES (featured result + upcoming)
   ========================================================= */




.matches-featured>*{position:relative;z-index:1}


















/* Match fixture card — clean stacked structure:
   head (competition + date) / body (teams + vs/score) / foot (time). */



.mf-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line);min-width:0}
.mf-comp{font-size:.78rem;color:var(--primary);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mf-date{font-size:.8rem;color:var(--muted);font-weight:600;flex-shrink:0}
.mf-body{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1rem;min-width:0}
.mf-team{display:inline-flex;align-items:center;gap:8px;min-width:0;flex:1}
.mf-team:last-of-type{flex-direction:row-reverse;text-align:start}
.mf-team-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mf-vs{color:var(--muted);font-size:.8rem;font-weight:700;flex-shrink:0}
.mf-crest{width:28px;height:28px;border-radius:8px;background:var(--grad-accent);display:grid;place-items:center;color:#fff;font-weight:800;font-size:.75rem;flex-shrink:0}
.mf-crest.has-logo{background:#fff;overflow:hidden;padding:4px}
.mf-crest.has-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.mf-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--muted);margin-top:12px;padding-top:10px;border-top:1px solid var(--line);min-width:0}
.mf-time{display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.mf-tickets{display:inline-flex;align-items:center;gap:5px;background:var(--brand-primary);color:var(--on-primary);font-weight:700;font-size:.72rem;padding:5px 11px;border-radius:50px;transition:.2s;flex-shrink:0}
.mf-tickets:hover{background:var(--primary-hover);transform:translateY(-1px)}

/* Homepage next-match match-up cards */















/* =========================================================
   NEWS
   ========================================================= */
.news{padding:90px 0}



.news-img{aspect-ratio:16/10;overflow:hidden}
.news-img img{width:100%;height:100%;object-fit:cover;transition:.4s}

.news-body{padding:22px}
.news-date{font-size:.78rem;color:var(--primary);font-weight:700;margin-bottom:8px}
.news-body h4{font-size:1.15rem;font-weight:800;margin-bottom:10px;line-height:1.4}
.news-body p{font-size:.9rem;color:var(--muted)}
.news-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--primary);font-weight:700;font-size:.88rem}

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













/* =========================================================
   TROPHIES
   ========================================================= */





















/* Light variant of the trophies section (used on the About page). Flips the
   dark cabinet to a light paper theme while keeping teal/gold accents. */















/* =========================================================
   GALLERY
   ========================================================= */
.gallery{padding:90px 0}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery-photo{aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);position:relative;cursor:pointer;border:0;padding:0;background:none;display:block;width:100%}
.gallery-photo img{width:100%;height:100%;object-fit:cover;transition:.4s}
.gallery-photo:hover img{transform:scale(1.08)}
.gallery-photo::after{content:"\f00e";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.4rem;background:var(--primary-overlay);opacity:0;transition:.3s;pointer-events:none}
.gallery-photo:hover::after,.gallery-photo:focus-visible::after{opacity:1}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(8,14,13,.94);display:flex;align-items:center;justify-content:center;padding:20px;animation:lbFade .2s ease}
.lightbox[hidden]{display:none}
.lightbox-fig{margin:0;max-width:94vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:14px}
.lightbox-fig img{max-width:94vw;max-height:74vh;width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 20px 60px -10px rgba(0,0,0,.6)}
.lightbox-fig figcaption{color:#fff;font-size:.95rem;font-weight:600;text-align:center;opacity:.9}
.lightbox-close{position:absolute;top:18px;inset-inline-end:22px;background:rgba(255,255,255,.12);border:0;color:#fff;font-size:1.8rem;width:44px;height:44px;border-radius:50%;line-height:1;cursor:pointer;transition:.2s;display:grid;place-items:center;z-index:2}
.lightbox-close:hover{background:rgba(255,255,255,.25);transform:scale(1.05)}
/* Nav arrows: paired, centered below the image — always reachable on mobile. */
.lightbox-nav{position:absolute;bottom:24px;background:rgba(255,255,255,.14);border:0;color:#fff;width:52px;height:52px;border-radius:50%;font-size:2rem;line-height:1;cursor:pointer;transition:.2s;display:grid;place-items:center;z-index:2}
.lightbox-nav:hover{background:rgba(255,255,255,.28)}
.lightbox-prev{inset-inline-start:calc(50% - 62px)}
.lightbox-next{inset-inline-end:calc(50% - 62px)}
@keyframes lbFade{from{opacity:0}to{opacity:1}}

/* =========================================================
   MEMBERSHIP
   ========================================================= */




















/* =========================================================
   PARTNERS
   ========================================================= */
.partners{padding:90px 0 40px}
.partners-head{text-align:center;margin-bottom:48px}
.partners-divider{display:flex;align-items:center;gap:24px;margin-bottom:48px}
.partners-divider-line{flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--line) 30%,var(--line) 70%,transparent)}
.partners-divider-title{font-size:clamp(1.4rem,3vw,2rem);font-weight:900;color:var(--ink);white-space:nowrap;position:relative;padding:0 8px}
.partners-divider-title::after{content:"";display:block;width:40px;height:3px;background:var(--brand-primary);border-radius:3px;margin:8px auto 0}

.partners-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;height:110px;display:grid;place-items:center;padding:24px;box-shadow:var(--shadow);transition:.3s}
.partners-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--brand-primary)}
.partners-card img{max-height:40px;width:auto;opacity:.55;transition:.3s}
.partners-card:hover img{opacity:1}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{padding:50px 0 90px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.contact-cards{display:grid;gap:16px;min-width:0}
.contact-cc{display:flex;gap:16px;align-items:center;background:var(--surface);padding:20px;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow);min-width:0}
.contact-cc>div{min-width:0}
.contact-cc-icon{width:50px;height:50px;border-radius:12px;background:var(--primary-tint);color:var(--primary);display:grid;place-items:center;font-size:1.3rem;flex-shrink:0}
.contact-cc b{display:block;font-size:.95rem}
.contact-cc span{font-size:.88rem;color:var(--muted);overflow-wrap:anywhere;word-break:break-word}
.contact-social{background:var(--grad-accent);border-radius:var(--radius);padding:40px;color:#fff;text-align:center}
.contact-social h3{font-size:1.6rem;font-weight:900;margin-bottom:10px}
.contact-social p{opacity:.9;margin-bottom:24px}
.contact-social-row{display:flex;justify-content:center;gap:14px}
.contact-social-row a{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.15);display:grid;place-items:center;font-size:1.3rem;transition:.25s;color:#fff}
.contact-social-row a:hover{background:#fff;color:var(--primary);transform:translateY(-4px)}
.contact-map{margin-top:40px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);position:relative}
.contact-map iframe{width:100%;height:340px;border:0;display:block}
.contact-map-link{position:absolute;bottom:14px;inset-inline-end:14px;background:var(--surface);color:var(--primary);font-weight:700;font-size:.82rem;padding:9px 14px;border-radius:50px;box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:7px;transition:.2s}
.contact-map-link:hover{background:var(--brand-primary);color:#fff}

/* forms */
.form-row{display:grid;gap:16px;margin-bottom:16px}
.form-row.two{grid-template-columns:1fr 1fr}
.field label{display:block;font-size:.85rem;font-weight:700;margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;
  font-family:inherit;font-size:.95rem;background:var(--surface);color:var(--ink);transition:.2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brand-primary)}
.field textarea{min-height:130px;resize:vertical}
.form-note{background:var(--primary-tint);color:var(--primary);padding:14px 18px;border-radius:12px;font-weight:700;margin-bottom:20px;font-size:.92rem}

/* =========================================================
   FOOTER
   ========================================================= */
.ftr{background:var(--footer-bg);color:var(--footer-muted);padding:50px 0 24px}
.ftr-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start;padding-bottom:30px;border-bottom:1px solid var(--footer-line)}
.ftr-brand{max-width:320px}
.ftr-logo img{height:50px;width:auto;margin-bottom:16px;filter:brightness(0) invert(1)}
.ftr-logo .ftr-logo-text{font-weight:900;font-size:1.3rem;color:var(--footer-fg);display:block;margin-bottom:16px}
.ftr-brand .ftr-desc{font-size:.9rem;line-height:1.85;color:var(--footer-muted);margin-bottom:22px;max-width:38ch}
.ftr-col-title{font-size:1rem;font-weight:800;color:var(--footer-fg);margin-bottom:18px}
.ftr-nav{display:flex;flex-direction:column;gap:12px}
.ftr-nav a{font-size:.92rem;transition:.2s;width:fit-content}
.ftr-nav a:hover{color:var(--accent-soft)}
.ftr-social{display:flex;gap:12px}
.ftr-social a{width:42px;height:42px;border-radius:50%;background:var(--footer-chip);display:grid;place-items:center;font-size:1.1rem;transition:.25s;color:var(--footer-fg)}
.ftr-social a:hover{background:var(--brand-primary);transform:translateY(-3px)}
.ftr-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:24px;font-size:.85rem;opacity:.7}
.ftr-bottom a{color:var(--accent-soft)}
.footer-by{display:inline-flex;align-items:center;gap:8px;transition:.25s;opacity:.85}
.footer-by:hover{opacity:1}
.footer-by img{display:block}

/* =========================================================
   INNER PAGES (listing + detail shared bits)
   ========================================================= */
.page-hero{background:var(--grad-dark);color:var(--on-secondary);padding:70px 0 60px;text-align:center}
.page-hero .eyebrow{background:rgba(255,255,255,.12);color:var(--accent-soft)}
.page-hero h1{font-size:clamp(2rem,5vw,3rem);font-weight:900}
.page-hero p{opacity:.8;margin-top:10px}
/* Sits above the page <h1> as a navigation trail, so the spacing runs
   below it rather than above. */
.breadcrumb{display:flex;gap:8px;align-items:center;justify-content:center;margin:0 0 14px;font-size:.85rem;opacity:.85}
.breadcrumb a:hover{color:var(--accent-soft)}
.inner{padding:70px 0}
.article{max-width:820px;margin-inline:auto}
.article-img{border-radius:var(--radius);overflow:hidden;margin-bottom:30px;box-shadow:var(--shadow-lg)}
.article-img img{width:100%;max-height:460px;object-fit:cover}
.article h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;margin-bottom:12px;line-height:1.3}
.article .meta{color:var(--primary);font-weight:700;font-size:.85rem;margin-bottom:24px}
.article .body{font-size:1.05rem;line-height:1.9;color:var(--ink)}
.article .body p{margin-bottom:18px}
.back-link{display:inline-flex;align-items:center;gap:8px;margin-top:36px;color:var(--primary);font-weight:700}

/* player profile */
.profile{display:grid;grid-template-columns:.8fr 1.2fr;gap:40px;align-items:start}
.profile-photo{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--surface-2)}
.profile-photo img{width:100%;aspect-ratio:3/4;object-fit:cover}
.profile-num{position:absolute;top:18px;inset-inline-start:18px;font-size:3rem;font-weight:900;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.profile-info h1{font-size:2.2rem;font-weight:900;margin-bottom:6px}
.profile-pos{color:var(--primary);font-weight:700;margin-bottom:24px}





.profile-stat{text-align:center;background:var(--grad-dark);color:#fff;border-radius:14px;padding:22px 10px}
.profile-stat b{display:block;font-size:2rem;font-weight:900;color:var(--accent-soft)}
.profile-stat span{font-size:.8rem;opacity:.8}
.profile-bio{color:var(--muted);line-height:1.9}

/* empty state */
.empty{text-align:center;color:var(--muted);padding:60px 20px;font-weight:600}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1024px){.partners-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:980px){


  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .hero-grid{grid-template-columns:1fr;gap:40px}

  .profile{grid-template-columns:1fr}
  .profile-photo{max-width:280px;margin-inline:auto}
}
/* ── Navigation drawer breakpoint ──────────────────────────────────────
   The full nav row (logo + 9 bilingual links + lang switch + CTA) needs
   about 1250px once the logo and action buttons are counted. Below that
   the links used to overflow their container and collide with the logo
   and the language/CTA buttons, so the drawer takes over here instead.
   Phone-specific sizing stays in the 760px block. */
@media(max-width:1280px){
  .hdr-nav{position:fixed;top:0;bottom:0;right:0;left:auto;height:100vh;height:100dvh;width:min(82vw,320px);background:var(--bg);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:82px 0 24px;gap:0;box-shadow:0 0 60px rgba(0,0,0,.35);z-index:1000;transform:translateX(105%);transition:transform .3s ease;overflow-y:auto}
  [dir="ltr"] .hdr-nav{right:auto;left:0;transform:translateX(-105%)}
  .hdr-nav.open{transform:translateX(0)!important}
  .hdr-nav a{padding:15px 26px;font-size:1.05rem;border-bottom:1px solid var(--line);color:var(--ink);white-space:normal}
  /* The desktop hover underline doesn't suit the full-width drawer rows. */
  .hdr-nav a::after{display:none}
  .hdr-nav a:hover,.hdr-nav a.active{color:var(--primary)}
  .hdr-nav a.active{color:var(--primary);background:var(--primary-tint)}
  .hdr-nav-close{display:grid;place-items:center;position:absolute;top:18px;inset-inline-end:20px;background:none;border:0;font-size:1.7rem;color:var(--ink);cursor:pointer;line-height:1;padding:4px}
  .hdr-nav-backdrop{display:block;position:fixed;inset:0;background:rgba(8,14,13,.5);opacity:0;visibility:hidden;transition:.3s;z-index:999}
  .hdr-nav-backdrop.open{opacity:1;visibility:visible}
  .hdr-burger{display:grid;place-items:center;width:42px;height:42px;flex:0 0 auto}
  .hdr-logo{margin-inline-end:auto}
  /* Phones: keep the event mark, drop the secondary row — three logos in a
     narrow bar leaves no room for the menu button. They remain on the page
     for tablet and desktop, where there is width to show them properly. */
  .hdr-logos{gap:10px;margin-inline-end:auto}
  .hdr-logo-sep, .hdr-logo-extra{display:none}
  /* Keep the primary CTA visible on tablet/laptop; it only hides on phones. */
  .hdr-nav-ticket{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 24px 16px;background:var(--brand-primary);color:var(--on-primary);font-weight:700;font-size:.92rem;padding:11px 18px;border-radius:50px;box-shadow:0 6px 18px -8px var(--brand-primary)}
  .hdr-nav-ticket:hover{background:var(--primary-hover)}
}

@media(max-width:760px){
  .hdr-grid{height:70px;gap:6px}
  /* Logo takes the leading edge; actions + burger group together at the
     trailing edge (left in RTL) instead of being spread across the bar. */
  .hdr-actions{gap:4px}
  /* Mobile nav = full-height drawer sliding from the start edge (right in RTL),
     covering part of the screen with a dimmed backdrop over the rest. */
  .hdr-actions .hdr-cta{display:none}
  /* Option A: show the compact ticket icon in the header on mobile */
  .hdr-ticket-icon{display:grid;width:38px;height:38px;font-size:.9rem}
  /* Option B: prominent ticket CTA at the TOP of the drawer, above nav links */
  .about-grid,.contact-grid{grid-template-columns:minmax(0,1fr)}

  .about-highlights{grid-template-columns:1fr}
  .about-vm{grid-template-columns:1fr}

  .ftr-top{grid-template-columns:1fr 1fr;gap:30px}
  .ftr-brand{grid-column:1 / -1}





  section{padding:60px 0}
  .about,.players,.matches,.news,.trophies,.partners,.member,.gallery,.contact{padding:60px 0}

}
@media(max-width:480px){

}

/* =========================================================
   Announcement banner (top of site)
   ========================================================= */
.site-banner{display:block;background:var(--grad-accent);color:#fff;text-decoration:none;font-weight:700;font-size:.92rem}
.site-banner-inner{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 20px;text-align:center}
.site-banner i{font-size:.95rem}
a.site-banner{transition:filter .2s}
a.site-banner:hover{filter:brightness(1.06)}
a.site-banner:hover .site-banner-arrow{transform:translateX(0)}

/* =========================================================
   News article — magazine-style header (title above image)
   ========================================================= */
.article-page{padding-bottom:70px}
.article-hero{background:var(--grad-dark);color:var(--on-secondary);padding:54px 0 90px;text-align:center}
.article-crumb{display:flex;align-items:center;justify-content:center;gap:10px;font-size:.85rem;font-weight:700;margin-bottom:20px;opacity:.85}
.article-crumb a{color:var(--accent-soft)}
.article-crumb a:hover{color:#fff}
.article-crumb i{font-size:.7rem;opacity:.6}
.article-title{font-size:clamp(1.7rem,4.2vw,2.8rem);font-weight:900;line-height:1.3;max-width:860px;margin:0 auto 18px}
.article-meta{display:flex;align-items:center;justify-content:center;gap:18px;font-size:.9rem;opacity:.85}
.article-meta i{color:var(--accent-soft);margin-inline-end:5px}
/* pull the image up over the hero for a layered look */
.article-figure{max-width:880px;margin:-60px auto 0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);position:relative;z-index:2}
.article-figure img{width:100%;max-height:480px;object-fit:cover;display:block}
.article-content{max-width:760px;margin:40px auto 0}
.article-content .body{font-size:1.06rem;line-height:1.95;color:var(--ink)}
.article-content .body p{margin-bottom:18px}
.article-content .back-link{display:inline-flex;align-items:center;gap:8px;margin-top:36px;color:var(--primary);font-weight:700}
@media(max-width:600px){
  .article-hero{padding:40px 0 80px}
  .article-figure{margin-top:-50px;border-radius:12px}
}

/* =========================================================
   Team crests with real logos (fallback = initials)
   ========================================================= */
.hero-nm-crest.has-logo,.matches-fcrest.has-logo,.matches-fixture-mini.has-logo{background:#fff;overflow:hidden}

.hero-nm-crest.has-logo{padding:12px}

.hero-nm-crest.has-logo img,.matches-fcrest.has-logo img,.matches-fixture-mini.has-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* =========================================================
   Dynamic section backgrounds (alternate as rendered).
   Applied via section_bg() so hiding sections never leaves
   two same-colored blocks adjacent. Trophies (dark) and
   membership (card) keep their own distinct backgrounds.
   ========================================================= */
.sec-bg-a{background:var(--surface)}
.sec-bg-b{background:var(--surface-2)}

/* =========================================================
   Sponsors strip — lightweight version for inner pages
   (distinct from the homepage's full sponsors section)
   ========================================================= */
.sponsors-strip{border-top:1px solid var(--line);background:var(--bg);padding:26px 0}
.sponsors-strip-inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center}
.sponsors-strip-label{font-size:.78rem;font-weight:800;letter-spacing:1px;color:var(--muted);text-transform:uppercase;white-space:nowrap;position:relative;padding-inline-end:28px}
.sponsors-strip-label::after{content:"";position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);width:1px;height:22px;background:var(--line)}
.sponsors-strip-logos{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:center}
.sponsors-strip-item{display:inline-flex;align-items:center;justify-content:center;width:90px;height:30px;flex:0 0 auto}
.sponsors-strip-item img{max-height:28px;max-width:90px;width:auto;height:auto;object-fit:contain;opacity:.45;filter:grayscale(1);transition:.25s}
.sponsors-strip-item:hover img{opacity:.9;filter:grayscale(0)}
@media(max-width:600px){
  .sponsors-strip-label{padding-inline-end:0}
  .sponsors-strip-label::after{display:none}
  .sponsors-strip-logos{gap:22px}
  .sponsors-strip-item{width:72px;height:26px}
  .sponsors-strip-item img{max-height:24px;max-width:72px}
}

/* News article — latest posts grid */
.article-related{max-width:1100px;margin:60px auto 0;padding-top:40px;border-top:1px solid var(--line)}

/* =========================================================
   Header search (expand-on-click) + search results page
   ========================================================= */
.hdr-search{display:flex;align-items:center;position:relative}
.hdr-search-toggle{background:none;border:none;cursor:pointer;color:var(--header-fg,var(--ink));font-size:1rem;padding:8px;border-radius:50%;transition:.2s;display:grid;place-items:center}
.hdr-search-toggle:hover{background:var(--surface);color:var(--primary)}
.hdr-search-form{position:absolute;inset-inline-end:0;top:calc(100% + 8px);width:0;overflow:hidden;transition:width .28s ease;background:var(--surface);border-radius:50px;box-shadow:var(--shadow-lg);z-index:60}
.hdr-search.open .hdr-search-form{width:min(280px,70vw)}

/* Mobile: search opens as a fixed bar under the header, spanning the
   viewport with side margins so it never overflows. Placed after the base
   rules so it wins the cascade on small screens. */
@media(max-width:760px){
  .hdr-search-form{position:fixed;top:66px;inset-inline:12px;inset-inline-end:12px;inset-inline-start:12px;width:auto;max-width:none;overflow:visible;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  .hdr-search.open .hdr-search-form{width:auto;opacity:1;visibility:visible;transform:translateY(0)}
  .hdr-search-form input{box-shadow:var(--shadow-lg)}
}
.hdr-search-form input{width:100%;border:1px solid var(--line);border-radius:50px;padding:11px 18px;font-family:inherit;font-size:.9rem;background:var(--bg);outline:none}
.hdr-search-form input:focus{border-color:var(--brand-primary)}
.hdr-search.open .hdr-search-toggle{color:var(--primary)}

.search-page-form{display:flex;gap:10px;max-width:640px;margin:0 auto 36px}
.search-page-form input{flex:1;border:1.5px solid var(--line);border-radius:50px;padding:14px 22px;font-family:inherit;font-size:1rem;background:var(--surface);outline:none}
.search-page-form input:focus{border-color:var(--brand-primary)}
.search-page-form button{border:none;background:var(--grad-accent);color:#fff;font-weight:700;padding:0 26px;border-radius:50px;cursor:pointer;font-family:inherit;white-space:nowrap}
.search-group-title{font-size:1.15rem;font-weight:800;margin:0 0 18px;display:flex;align-items:center;gap:10px}
.search-group-title i{color:var(--primary)}
.search-hint{text-align:center;padding:30px 0}

/* Search results — compact rows (thumbnail + title/meta) */
.search-results{display:flex;flex-direction:column;gap:10px;margin-bottom:38px}
.search-result{display:flex;align-items:center;gap:16px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;transition:.18s;color:inherit}
.search-result:hover{border-color:var(--brand-primary);box-shadow:var(--shadow);transform:translateY(-1px)}
.sr-thumb{position:relative;flex:0 0 56px;width:56px;height:56px;border-radius:10px;overflow:hidden;background:var(--bg)}
.sr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sr-num{position:absolute;bottom:2px;inset-inline-start:2px;background:var(--brand-primary);color:#fff;font-size:.62rem;font-weight:800;min-width:16px;height:16px;line-height:16px;text-align:center;border-radius:5px;padding:0 3px}
.sr-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sr-title{font-weight:700;font-size:1rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-meta{font-size:.82rem;color:var(--muted)}
.sr-meta i{margin-inline-end:4px}
.sr-arrow{color:var(--muted);font-size:.8rem;flex:0 0 auto;transition:.18s}
.search-result:hover .sr-arrow{color:var(--primary)}

/* Search result — match date chip + vs separator */
.sr-datechip{flex:0 0 56px;width:56px;height:56px;border-radius:10px;background:var(--surface-2,#eef5f3);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.sr-datechip b{font-size:1.35rem;font-weight:800;color:var(--primary)}
.sr-datechip span{font-size:.68rem;font-weight:700;color:var(--muted);text-transform:uppercase;margin-top:2px}
.sr-vs{font-size:.72rem;font-weight:700;color:var(--muted);margin:0 4px}

/* Pagination */
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:44px}
.pager-num,.pager-btn{display:inline-flex;align-items:center;gap:6px;min-width:42px;height:42px;padding:0 14px;justify-content:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:700;font-size:.9rem;transition:.18s}
.pager-num:hover,.pager-btn:hover{border-color:var(--brand-primary);color:var(--primary)}
.pager-num.active{background:var(--grad-accent);color:#fff;border-color:transparent}

/* ============ Products (club shop teasers) ============ */















.riyal-icon{height:1em;width:auto;display:inline-block;vertical-align:-0.12em;fill:currentColor}
.riyal-icon--fallback{fill:none}

/* ============ Players rail (one line + arrows) ============ */






@media(max-width:600px){


}

/* Products responsive */
@media(max-width:900px){.products-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.products-grid{grid-template-columns:1fr}}

/* =========================================================
   Mobile hardening — final overflow guards (pre-sale audit)
   Ensures nothing exceeds the viewport width on small screens.
   ========================================================= */
@media(max-width:600px){
  /* Long section-divider titles must wrap instead of forcing width */
  .partners-divider-title{white-space:normal;text-align:center;font-size:clamp(1.2rem,5vw,1.6rem)}
  /* Hero next-match team names: allow wrapping, keep centered */
  .hero-nextmatch-teams{gap:8px}
  .hero-nextmatch{padding:20px}
  /* Article meta / breadcrumb can hold several items — let them wrap */
  .article-meta,.article-crumb{flex-wrap:wrap}
  /* Search form: stack input and button */
  .search-page-form{flex-direction:column}
  .search-page-form button{width:100%}
  /* Footer on mobile: brand full-width, then the two link columns side by side */
  .ftr-top{grid-template-columns:1fr 1fr;gap:24px 20px}
  .ftr-brand{grid-column:1 / -1}
  /* Tables inside content scroll rather than overflow the page */
  .article-content table{display:block;max-width:100%;overflow-x:auto}
}

/* Defensive: no media element or embed can ever exceed the viewport */
img,video,iframe,table{max-width:100%}
/* Long unbroken strings (URLs, tokens) wrap instead of pushing width */
.article-content .body,.sr-title,.news-excerpt{overflow-wrap:anywhere;word-break:break-word}

/* ── Accessibility ────────────────────────────────────────────────
   Skip link: hidden until it receives keyboard focus, then pinned to the
   top so it is the first thing a keyboard user can act on. Without it
   every page forces them through the whole navigation to reach content. */
.skip-link{
  position:absolute; inset-inline-start:0; top:-100px; z-index:2000;
  background:var(--brand-primary); color:var(--on-primary,#fff);
  padding:12px 22px; border-radius:0 0 10px 0; font-weight:700;
  transition:top .18s ease;
}
.skip-link:focus{ top:0; }

/* Visible focus for every interactive element. Browsers vary and some
   themes suppress the default outline entirely, which makes keyboard use
   impossible to follow. :focus-visible keeps mouse clicks clean. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--brand-accent,#c9a24a);
  outline-offset:2px;
  border-radius:4px;
}
/* The main landmark is focusable for the skip link, but should not show a
   focus ring when it receives focus programmatically. */
main:focus{ outline:none; }

/* Screen-reader-only text: available to assistive tech, invisible on screen. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}