:root {
    --primary: #187A7D;
    --primary-light: #1FA3A7;
    --primary-dark: #115B5D;
    --bg: #FAFBFC;
    --bg2: #FFFFFF;
    --bg3: #F0F2F5;
    --bg4: #E4E7EC;
    --text: #1A2332;
    --text-secondary: #4A5568;
    --grey: #8896A6;
    --border: rgba(24,122,125,0.12);
    --border-hover: rgba(24,122,125,0.35);
    --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
    --card-shadow-hover: 0 8px 30px rgba(0,0,0,0.1);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: 'Barlow', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
  }

  /* ---- NAV ---- */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3rem;
    height: 96px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 8px rgba(0,0,0,0.04);
  }
  .nav-logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }
  .nav-logo img { height: 80px; width: 80px; object-fit: contain; }
  .nav-club-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 2px;
    color: var(--primary);
  }
  .nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
  }
  .nav-links a {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    opacity: 0.65;
    transition: opacity 0.2s, color 0.2s;
  }
  .nav-links a:hover { opacity: 1; color: var(--primary); }
  .nav-links a.nav-active { opacity: 1; color: var(--primary); }

  .nav-cta-li { display: none; }

/* ---- Language switcher ----
     A globe button that reveals the two languages on hover. :focus-within is there as
     well as :hover so it also opens from the keyboard and on touch, where hover does not
     exist. Grouped with the CTA in .nav-actions, so dir="rtl" flips the pair together. */
  .nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  .nav-lang {
    position: relative;
    display: flex;
    align-items: center;
  }
  .nav-lang-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--primary);
    background: none;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
  }
  .nav-lang-toggle svg { width: 22px; height: 22px; display: block; }
  .nav-lang:hover .nav-lang-toggle,
  .nav-lang:focus-within .nav-lang-toggle {
    background: rgba(24,122,125,0.08);
    border-color: var(--border-hover);
    color: var(--primary-light);
  }

  .nav-lang-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    inset-inline-end: 0;
    min-width: 170px;
    list-style: none;
    padding: 0.35rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
    z-index: 200;
  }
  /* Invisible bridge across the gap, so the pointer can travel from the globe down to
     the menu without crossing dead space and closing it. */
  .nav-lang-menu::before {
    content: '';
    position: absolute;
    top: -0.6rem;
    left: 0;
    right: 0;
    height: 0.6rem;
  }
  .nav-lang:hover .nav-lang-menu,
  .nav-lang:focus-within .nav-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-lang-opt {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
  }
  a.nav-lang-opt:hover {
    background: rgba(24,122,125,0.08);
    color: var(--primary);
  }
  /* The Arabic option is Arabic text even on the English pages, which do not load the
     Arabic webfonts — fall through to whatever Arabic face the system has. */
  .nav-lang-opt[lang="ar"] {
    font-family: 'Tajawal', 'Noto Kufi Arabic', sans-serif;
    letter-spacing: normal;
  }
  /* The language already being read: marked with a tick, and not a link */
  .nav-lang-opt--current {
    color: var(--primary);
    font-weight: 700;
    cursor: default;
  }
  .nav-lang-opt--current::after {
    content: '\2713';
    margin-inline-start: auto;
    padding-inline-start: 0.6rem;
  }

  /* Each option keeps its flag — inline SVG rather than emoji, which Windows renders
     as bare "GB"/"QA" letters. */
  .nav-lang-opt::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 14px;
    border-radius: 2px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  }
  .nav-lang-opt[hreflang="ar"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Crect width='20' height='14' fill='%238A1538'/%3E%3Cpath d='M0 0H5L8 0.778L5 1.556L8 2.333L5 3.111L8 3.889L5 4.667L8 5.444L5 6.222L8 7.000L5 7.778L8 8.556L5 9.333L8 10.111L5 10.889L8 11.667L5 12.444L8 13.222L5 14.000H0Z' fill='%23fff'/%3E%3C/svg%3E");
  }
  .nav-lang-opt[hreflang="en"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='c'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' clip-path='url%28%23c%29' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0V30M0,15H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0V30M0,15H60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
  }

  .nav-cta {
    display: inline-block;
    padding: 0.55rem 1.4rem;
    background: var(--primary);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  }
  .nav-cta:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(24,122,125,0.25);
  }

  /* ---- HERO ---- */
  .hero {
    position: relative;
    height: 80vh;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    /* The photo is close to square, so a wide hero crops it hard top and bottom.
       Biasing the focal point above centre keeps the chest crest in frame. */
    background: url('hero-kit.jpg') center 40% / cover no-repeat;
    transform: scale(1.05);
    animation: heroZoom 18s ease-in-out infinite alternate;
  }
  @keyframes heroZoom {
    from { transform: scale(1.05); }
    to   { transform: scale(1.12); }
  }
  /* The kit is bright white, so white hero type needs real cover behind it. The wash is
     tinted with the club's dark teal rather than flat black so it reads as brand, not haze.
     It is heaviest on the side the text sits on and clears by the crest — ar.css mirrors
     the horizontal direction for the Arabic pages. */
  .hero-overlay {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to right,
        rgba(8,42,43,0.88) 0%,
        rgba(8,42,43,0.62) 32%,
        rgba(8,42,43,0.22) 62%,
        rgba(8,42,43,0.05) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(8,42,43,0.35) 0%,
        rgba(8,42,43,0.10) 35%,
        rgba(8,42,43,0.25) 72%,
        rgba(8,42,43,0.55) 100%
      );
  }
  .hero-content {
    position: relative;
    z-index: 2;
    padding: 0 3rem 5rem;
    max-width: 700px;
  }
  .hero-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--primary-light);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }
  .hero-eyebrow::before {
    content: '';
    display: block;
    width: 32px;
    height: 2px;
    background: var(--primary-light);
  }
  .hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 9vw, 7.5rem);
    line-height: 0.9;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    color: #FFFFFF;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
  }
  .hero-title span { color: var(--primary-light); }
  .hero-subtitle {
    font-size: 1.05rem;
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
    max-width: 480px;
    margin-bottom: 2rem;
  }
  .hero-cta {
    display: inline-block;
    padding: 0.85rem 2.5rem;
    background: var(--primary);
    color: #fff;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    border-radius: 2px;
  }
  .hero-cta:hover { background: var(--primary-light); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(24,122,125,0.25); }

  .hero-logo-watermark {
    position: absolute;
    right: 4rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: 0.1;
    width: 380px;
    height: 380px;
    object-fit: contain;
  }

  /* ---- SECTION WRAPPER ---- */
  .site-main {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2.5rem;
    padding: 3rem 3rem 5rem;
    max-width: 1400px;
    margin: 0 auto;
  }

  .section-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.5rem;
  }
  .section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 2px;
    margin-bottom: 1.8rem;
    position: relative;
    padding-bottom: 0.8rem;
    color: var(--text);
  }
  .section-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 48px; height: 3px;
    background: var(--primary);
  }

  /* ---- NEWS ---- */
  .news-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .news-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--bg2);
    border: 1px solid var(--border);
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: var(--card-shadow);
  }
  .news-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-4px);
    box-shadow: var(--card-shadow-hover);
  }
  .news-card.featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
  }
  .news-card-img {
    aspect-ratio: 16/9;
    background: var(--bg3);
    overflow: hidden;
  }
  .news-card.featured .news-card-img {
    aspect-ratio: auto;
    height: 100%;
  }
  .news-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
  }
  .news-card:hover .news-card-img img { transform: scale(1.05); }
  .news-card-body {
    padding: 1.2rem 1.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .news-card.featured .news-card-body {
    padding: 2rem;
  }
  .news-tag {
    display: inline-block;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.6rem;
  }
  .news-card-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.6rem;
    color: var(--text);
  }
  .news-card.featured .news-card-title {
    font-size: 1.55rem;
  }
  .news-card-excerpt {
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 1rem;
  }
  .news-date {
    font-size: 0.75rem;
    color: var(--grey);
    font-weight: 300;
  }
  .news-empty {
    grid-column: 1 / -1;
    padding: 2rem 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
  }

  /* ---- SIDEBAR ---- */
  .sidebar { display: flex; flex-direction: column; gap: 2rem; }

  /* ---- CARD LOADING STATE ----
     A card carries [data-loading] until its script has the real content; the two
     swap over here, so no invented fixture is ever on screen. */
  .card-loading {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    padding: 2.6rem 1rem;
    text-align: center;
  }
  [data-loading] .card-loading { display: flex; }
  [data-loading] .match-competition,
  [data-loading] .match-teams,
  [data-loading] .match-info,
  [data-loading] .countdown,
  [data-loading] .league-table,
  /* The season is data too, so its label waits with the rest of the table */
  [data-loading] .table-header .section-label { display: none; }

  .card-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--bg4);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: cardSpin 0.9s linear infinite;
  }
  .card-loading-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-secondary);
  }
  /* Finished with nothing to show — the message stands on its own */
  .card-loading[data-state="message"] .card-loading-spinner { display: none; }
  .card-loading[data-state="message"] .card-loading-text {
    font-family: 'Barlow', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--grey);
  }
  /* In the news grid the loader IS the content until cards replace it, so it shows
     on its own — no [data-loading] switch, and it spans the full width of the grid */
  .news-grid .card-loading {
    display: flex;
    grid-column: 1 / -1;
  }

  @keyframes cardSpin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .card-loading-spinner { animation-duration: 2.4s; }
  }

  /* ---- NEXT MATCH ---- */
  .next-match-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    padding: 1.6rem;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: var(--card-shadow);
  }
  .next-match-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), transparent);
  }
  .match-competition {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .match-competition::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: pulse 2s infinite;
  }
  @keyframes pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
  }
  .match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.4rem;
  }
  .match-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
  }
  .match-team-logo {
    width: 68px;
    height: 68px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
  }
  .match-team-logo-placeholder {
    width: 68px;
    height: 68px;
    background: var(--bg3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    color: var(--primary);
    border: 2px solid var(--border);
  }
  .match-team-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    color: var(--text);
  }
  .match-vs {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--primary);
    padding: 0 0.5rem;
  }
  .match-info {
    background: var(--bg3);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border-radius: 4px;
  }
  .match-info-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
  }
  .match-info-icon {
    width: 18px;
    text-align: center;
    color: var(--primary);
    font-size: 0.85rem;
  }
  .match-info-label {
    font-weight: 600;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--grey);
    min-width: 70px;
  }

  /* ---- COUNTDOWN ---- */
  .countdown {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.2rem;
  }
  .countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
  }
  .countdown-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    line-height: 1;
    color: var(--primary);
    background: var(--bg3);
    width: 58px;
    text-align: center;
    padding: 0.3rem 0;
    border: 1px solid var(--border);
    border-radius: 4px;
  }
  .countdown-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--grey);
  }

  /* ---- LEAGUE TABLE ---- */
  .table-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    overflow: hidden;
    border-radius: 4px;
    box-shadow: var(--card-shadow);
  }
  .table-header {
    padding: 1.2rem 1.4rem 0;
  }
  table.league-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
  }
  .league-table thead tr {
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
  }
  .league-table th {
    padding: 0.55rem 0.6rem;
    text-align: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--grey);
    font-weight: 700;
  }
  .league-table th:nth-child(2) { text-align: left; }
  .league-table td {
    padding: 0.55rem 0.6rem;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    color: var(--text-secondary);
  }
  .league-table td:nth-child(2) { text-align: left; color: var(--text); }
  .league-table tr.alriffa {
    background: rgba(24,122,125,0.06);
    border-left: 3px solid var(--primary);
  }
  .league-table tr.alriffa td {
    color: var(--primary);
    font-weight: 700;
  }
  .team-pos {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--grey);
  }
  .league-table tr.alriffa .team-pos { color: var(--primary); }
  .form-badge {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 2px;
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    margin: 0 1px;
  }
  .form-badge.w { background: #2ecc71; color: #fff; }
  .form-badge.d { background: #888; color: #fff; }
  .form-badge.l { background: #e74c3c; color: #fff; }
  .pts {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
  }

  /* ---- FOOTER ---- */
  footer {
    background: var(--primary-dark);
    border-top: 1px solid rgba(24,122,125,0.1);
    padding: 2rem 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .footer-logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }
  .footer-logo img { height: 40px; }
  .footer-club { font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; color: rgba(255,255,255,0.9); letter-spacing: 2px; }
  .footer-copy { font-size: 0.75rem; color: rgba(255,255,255,0.55); }

  /* ---- ANIMATIONS ---- */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .hero-eyebrow { animation: fadeUp 0.8s 0.2s both; }
  .hero-title   { animation: fadeUp 0.8s 0.35s both; }
  .hero-subtitle { animation: fadeUp 0.8s 0.5s both; }
  .hero-cta     { animation: fadeUp 0.8s 0.65s both; }

  /* ---- SCROLL REVEAL ----
     Elements start hidden and slide up smoothly when they enter the viewport.
     script.js toggles .is-visible via IntersectionObserver. */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Respect users who prefer less motion — show everything instantly */
  @media (prefers-reduced-motion: reduce) {
    .reveal {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }
  }

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

  .nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    z-index: 200;
  }
  .nav-hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
  }
  .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── TABLET (≤ 1024px) ── */
  @media (max-width: 1024px) {
    nav { padding: 0 1.5rem; }
    .nav-links { gap: 1.2rem; }
    .nav-links a { font-size: 0.95rem; letter-spacing: 1.5px; }

    .hero-content { padding: 0 1.5rem 4rem; }
    .hero-logo-watermark { width: 260px; height: 260px; right: 2rem; opacity: 0.05; }

    .site-main {
      grid-template-columns: 1fr;
      padding: 2rem 1.5rem 4rem;
    }
    .sidebar {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }

    .news-card.featured {
      grid-template-columns: 1fr;
    }
    .news-card.featured .news-card-img {
      aspect-ratio: 16/9;
      height: auto;
    }

    footer { padding: 1.5rem 1.5rem; }
  }

  /* ── MOBILE (≤ 768px) ── */
  @media (max-width: 768px) {
    nav { padding: 0 1rem; height: 76px; }
    .nav-logo img { height: 60px; width: 60px; }
    .nav-club-name { font-size: 1.1rem; }
    .nav-hamburger { display: flex; }
    .nav-cta { display: none; }
    .nav-cta-li { display: block; padding: 1rem 1.5rem 0; }
    .nav-cta-li a {
      background: var(--primary);
      color: #fff;
      padding: 0.75rem;
      border-bottom: none;
      border-radius: 2px;
      font-size: 0.85rem;
      letter-spacing: 2.5px;
    }
    .nav-cta-li a:hover { background: var(--primary-light); color: #fff; }
    /* The CTA drops into the drawer on mobile, so the pill keeps its place in the
       bar, grouped against the hamburger. */
    .nav-actions {
      margin-inline-start: auto;
      margin-inline-end: 0.9rem;
    }

    .nav-links {
      display: none;
      position: fixed;
      top: 76px; left: 0; right: 0;
      background: rgba(255,255,255,0.98);
      backdrop-filter: blur(16px);
      flex-direction: column;
      align-items: center;
      padding: 1.5rem 0 2rem;
      gap: 0;
      border-bottom: 1px solid var(--border);
      z-index: 150;
    }
    .nav-links.open { display: flex; }
    .nav-links li { width: 100%; text-align: center; }
    .nav-links a {
      display: block;
      padding: 0.9rem 0;
      font-size: 1rem;
      letter-spacing: 3px;
      border-bottom: 1px solid rgba(24,122,125,0.06);
      opacity: 1;
      color: var(--text);
    }
    .nav-links a:hover { color: var(--primary); background: rgba(24,122,125,0.04); }
    .nav-links .nav-cta-li a {
      color: #fff;
      background: var(--primary);
      border-bottom: none;
    }
    .nav-links .nav-cta-li a:hover {
      color: #fff;
      background: var(--primary-light);
    }

    .hero { height: 85vh; min-height: 500px; }
    .hero-logo-watermark { display: none; }
    .hero-content { padding: 0 1.2rem 3rem; }
    .hero-subtitle { font-size: 0.95rem; }
    .hero-cta { padding: 0.75rem 1.8rem; font-size: 0.8rem; }

    .site-main { padding: 1.5rem 1rem 3rem; gap: 1.5rem; }
    .section-title { font-size: 2rem; }

    .news-grid { grid-template-columns: 1fr; }
    .news-card.featured { grid-template-columns: 1fr; }
    .news-card.featured .news-card-img { aspect-ratio: 16/9; height: auto; }

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

    .countdown-value { font-size: 1.7rem; width: 46px; }
    .countdown { gap: 0.5rem; }

    .league-table th:nth-child(5),
    .league-table td:nth-child(5),
    .league-table th:nth-child(6),
    .league-table td:nth-child(6) { display: none; }

    footer {
      flex-direction: column;
      gap: 0.8rem;
      text-align: center;
      padding: 1.5rem 1rem;
    }
  }

  /* ── SMALL MOBILE (≤ 480px) ── */
  @media (max-width: 480px) {
    .hero { height: 90vh; }
    .hero-content { padding: 0 1rem 2.5rem; }
    .hero-eyebrow { font-size: 0.7rem; }
    .hero-subtitle { display: none; }

    .site-main { padding: 1.2rem 0.8rem 2.5rem; }

    .news-card-excerpt { display: none; }

    .match-info-label { min-width: 55px; }
    .match-info-row { font-size: 0.75rem; }

    .league-table { font-size: 0.72rem; }
    .league-table th,
    .league-table td { padding: 0.45rem 0.35rem; }
    .league-table th:nth-child(7),
    .league-table td:nth-child(7) { display: none; }

    footer { padding: 1.2rem 0.8rem; }
    .footer-copy { font-size: 0.68rem; }
  }