/* ============================================================
   EffePadelle Design Tokens + iOS Apple Theme Tokens
   Single source of truth — loaded first via theme-apple.css
   ============================================================ */

:root {
  /* ---------- Brand palette (raw colors) ---------- */
  --ep-brand-slate-50:  #f3f6f7;
  --ep-brand-slate-100: #dde6e8;
  --ep-brand-slate-200: #b4c6cb;
  --ep-brand-slate-300: #8aa6ad;
  --ep-brand-slate-400: #6c8a91;
  --ep-brand-slate-500: #496E78;  /* core brand teal */
  --ep-brand-slate-600: #3c5d65;
  --ep-brand-slate-700: #324c53;
  --ep-brand-slate-800: #283a40;
  --ep-brand-slate-900: #1a262a;

  --ep-brand-sand-50:   #faf2e9;
  --ep-brand-sand-100:  #f1dec3;
  --ep-brand-sand-200:  #e8c8a0;
  --ep-brand-sand-300:  #ddb583;
  --ep-brand-sand-400:  #D2A679;  /* warm tan accent */
  --ep-brand-sand-500:  #c2916a;
  --ep-brand-sand-600:  #b8915e;
  --ep-brand-sand-700:  #8e6c42;
  --ep-brand-sand-800:  #634a2d;

  --ep-brand-mauve-300: #b6acd8;
  --ep-brand-mauve-400: #978CC2;
  --ep-brand-mauve-500: #7c6fae;

  /* ---------- Neutral scale (greyscale) ---------- */
  --ep-neutral-0:   #ffffff;
  --ep-neutral-50:  #f8fafc;
  --ep-neutral-100: #f1f5f9;
  --ep-neutral-200: #e2e8f0;
  --ep-neutral-300: #cbd5e1;
  --ep-neutral-400: #94a3b8;
  --ep-neutral-500: #64748b;
  --ep-neutral-600: #475569;
  --ep-neutral-700: #334155;
  --ep-neutral-800: #1e293b;
  --ep-neutral-900: #0f172a;
  --ep-neutral-950: #0a0e1a;

  /* ---------- Semantic intent ---------- */
  --ep-color-primary:        var(--ep-brand-slate-500);
  --ep-color-primary-hover:  var(--ep-brand-slate-600);
  --ep-color-primary-active: var(--ep-brand-slate-700);

  --ep-color-accent:         var(--ep-brand-sand-400);
  --ep-color-accent-hover:   var(--ep-brand-sand-500);

  --ep-color-tertiary:       var(--ep-brand-mauve-400);

  --ep-color-success: #22c55e;
  --ep-color-warning: #f59e0b;
  --ep-color-danger:  #ef4444;
  --ep-color-info:    #3b82f6;

  /* ---------- Spacing scale (4px base, iOS-friendly) ---------- */
  --ep-space-0:  0;
  --ep-space-1:  4px;
  --ep-space-2:  8px;
  --ep-space-3:  12px;
  --ep-space-4:  16px;
  --ep-space-5:  20px;
  --ep-space-6:  24px;
  --ep-space-8:  32px;
  --ep-space-10: 40px;
  --ep-space-12: 48px;
  --ep-space-16: 64px;
  --ep-space-20: 80px;

  /* ---------- Radii (modern iOS uses generous rounding) ---------- */
  --ep-radius-xs:   4px;
  --ep-radius-sm:   8px;
  --ep-radius-md:   12px;
  --ep-radius-lg:   16px;
  --ep-radius-xl:   20px;
  --ep-radius-2xl:  24px;
  --ep-radius-pill: 9999px;

  /* ---------- Typography ---------- */
  --ep-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text",
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ep-font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;

  --ep-text-xs:   12px;
  --ep-text-sm:   14px;
  --ep-text-base: 16px;
  --ep-text-lg:   18px;
  --ep-text-xl:   20px;
  --ep-text-2xl:  24px;
  --ep-text-3xl:  30px;
  --ep-text-4xl:  36px;

  --ep-leading-tight:   1.2;
  --ep-leading-snug:    1.35;
  --ep-leading-normal:  1.5;
  --ep-leading-relaxed: 1.7;

  --ep-weight-regular:  400;
  --ep-weight-medium:   500;
  --ep-weight-semibold: 600;
  --ep-weight-bold:     700;

  --ep-tracking-tight:  -0.01em;
  --ep-tracking-normal: 0;
  --ep-tracking-wide:   0.02em;

  /* ---------- Motion (native iOS-feel curves & durations) ---------- */
  --ep-motion-instant: 100ms;
  --ep-motion-fast:    180ms;
  --ep-motion-base:    240ms;
  --ep-motion-slow:    360ms;

  /* iOS uses a subtle ease-out / spring curve */
  --ep-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ep-ease-in:     cubic-bezier(0.55, 0, 1, 0.45);
  --ep-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ep-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---------- Z-index scale ---------- */
  --ep-z-base:      1;
  --ep-z-dropdown:  1000;
  --ep-z-sticky:    1020;
  --ep-z-fixed:     1030;
  --ep-z-overlay:   1040;
  --ep-z-modal:     1050;
  --ep-z-popover:   1060;
  --ep-z-toast:     1070;
  --ep-z-tooltip:   1080;

  /* ---------- Layout ---------- */
  --ep-nav-height:        70px;
  --ep-nav-bottom-offset: 12px;
  --ep-content-max-width: 1200px;

  /* ---------- Safe area (notch / home indicator) ---------- */
  --ep-safe-top:    env(safe-area-inset-top, 0px);
  --ep-safe-right:  env(safe-area-inset-right, 0px);
  --ep-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ep-safe-left:   env(safe-area-inset-left, 0px);
}

/* ============================================================
   Dark theme surfaces (default)
   These are the contextual tokens components should reference.
   ============================================================ */
:root,
[data-theme="dark"],
[data-bs-theme="dark"] {
  /* Backgrounds (elevation increases with number) */
  --ep-bg-app:      #0a0e1a;
  --ep-bg-surface:  #11172a;
  --ep-bg-raised:   #1a2238;
  --ep-bg-overlay:  rgba(10, 14, 26, 0.72);

  /* Foreground (text) */
  --ep-fg-default: #e6ecf3;
  --ep-fg-muted:   #9aa6b8;
  --ep-fg-subtle:  #6b7689;
  --ep-fg-inverse: #0a0e1a;
  --ep-fg-on-primary: #ffffff;

  /* Borders / dividers */
  --ep-border-subtle: rgba(255, 255, 255, 0.08);
  --ep-border-default: rgba(255, 255, 255, 0.14);
  --ep-border-strong:  rgba(255, 255, 255, 0.24);

  /* Glassmorphism (for floating nav, modals, sheets) */
  --ep-glass-bg:     rgba(17, 23, 42, 0.6);
  --ep-glass-border: rgba(255, 255, 255, 0.1);
  --ep-glass-blur:   20px;

  /* Shadows (soft, ambient — iOS-style) */
  --ep-shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.4);
  --ep-shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.35);
  --ep-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
  --ep-shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.45);
  --ep-shadow-nav:  0 -2px 24px rgba(0, 0, 0, 0.4);
  --ep-shadow-focus: 0 0 0 3px rgba(73, 110, 120, 0.45);
}

/* ============================================================
   Light theme surfaces
   ============================================================ */
[data-theme="light"],
[data-bs-theme="light"],
.light-theme {
  --ep-bg-app:      #f5f7fa;
  --ep-bg-surface:  #ffffff;
  --ep-bg-raised:   #ffffff;
  --ep-bg-overlay:  rgba(255, 255, 255, 0.78);

  --ep-fg-default: #0f172a;
  --ep-fg-muted:   #475569;
  --ep-fg-subtle:  #94a3b8;
  --ep-fg-inverse: #ffffff;
  --ep-fg-on-primary: #ffffff;

  --ep-border-subtle:  rgba(15, 23, 42, 0.06);
  --ep-border-default: rgba(15, 23, 42, 0.12);
  --ep-border-strong:  rgba(15, 23, 42, 0.2);

  --ep-glass-bg:     rgba(255, 255, 255, 0.7);
  --ep-glass-border: rgba(15, 23, 42, 0.08);
  --ep-glass-blur:   20px;

  --ep-shadow-xs:   0 1px 2px rgba(15, 23, 42, 0.06);
  --ep-shadow-sm:   0 2px 6px rgba(15, 23, 42, 0.08);
  --ep-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.08);
  --ep-shadow-lg:   0 16px 48px rgba(15, 23, 42, 0.12);
  --ep-shadow-nav:  0 -2px 24px rgba(15, 23, 42, 0.08);
  --ep-shadow-focus: 0 0 0 3px rgba(73, 110, 120, 0.35);
}

/* ============================================================
   Reduced motion: honor user OS preference (iOS Settings → Motion)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ep-motion-instant: 0ms;
    --ep-motion-fast:    0ms;
    --ep-motion-base:    0ms;
    --ep-motion-slow:    0ms;
  }
}


html:has(body.theme-apple:not(.theme-dark)),
body.theme-apple:not(.theme-dark) {
    /* ── iOS system colors (light appearance) ── */
    --ios-bg:               #F2F2F7;  /* systemGroupedBackground */
    --ios-bg-2:             #FFFFFF;  /* secondary surface */
    --ios-bg-tinted:        #FBFBFD;  /* very subtle warm tint */
    --ios-surface:          #FFFFFF;  /* card / tile */
    --ios-surface-press:    #E5E5EA;  /* tap state */
    /* Barely-there fill for a pill sitting on --ios-surface itself,
       where --ios-bg-2 would be the same colour as its background */
    --ios-fill-subtle:      rgba(0, 0, 0, 0.04);
    --ios-surface-hover:    #F7F7FA;

    --ios-fg:               #000000;
    --ios-fg-2:             rgba(60, 60, 67, 0.60);  /* iOS secondaryLabel */
    --ios-fg-3:             rgba(60, 60, 67, 0.30);  /* iOS tertiaryLabel */
    --ios-fg-4:             rgba(60, 60, 67, 0.18);  /* iOS quaternaryLabel */

    --ios-separator:        rgba(60, 60, 67, 0.20);  /* opaqueSeparator-ish */
    --ios-separator-soft:   rgba(60, 60, 67, 0.10);

    /* iOS accent — system blue (used sparingly) */
    --ios-tint:             #007AFF;
    --ios-tint-press:       #0062CC;
    --ios-tint-soft:        rgba(0, 122, 255, 0.14);
    /* Label colour for a disabled tinted button, on --ios-tint-soft */
    --ios-tint-muted:       rgba(0, 122, 255, 0.45);

    /* Semantic system colors (sparingly) */
    --ios-green:            #34C759;
    --ios-orange:           #FF9500;
    --ios-red:              #FF3B30;
    --ios-yellow:           #FFCC00;

    /* Keep Bootstrap surfaces aligned with the iOS page canvas */
    --bs-body-bg:           var(--ios-bg);
    --bs-body-color:        var(--ios-fg);
    --bs-secondary-color:   var(--ios-fg-2);
    --bs-secondary-bg:      var(--ios-surface);
    --bs-tertiary-bg:       var(--ios-bg-2);
    --bs-emphasis-color:    var(--ios-fg);
    --bs-border-color:      var(--ios-separator);
}

/* SF-style radii — shared by light + dark (same values on both appearances) */
body.theme-apple {
    --ios-radius-sm:        10px;
    --ios-radius-md:        14px;
    --ios-radius-lg:        18px;
    --ios-radius-xl:        22px;

    background: var(--ios-bg);
    /* NOTE: removed `background-attachment: fixed` — Android Chrome has a
       long-standing bug where this on <body> can kill vertical scrolling
       (works fine on iOS Safari). The body bg here is a solid color so
       `fixed` had no visual effect anyway. */
    color: var(--ios-fg);
    font-family: -apple-system, BlinkMacSystemFont,
        "SF Pro Display", "SF Pro Text", "Inter",
        "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.theme-apple::before,
body.theme-apple::after { display: none; }

/* ── Top navbar — fully transparent so the page-bg (grey) shows through.
   User wants no white band at the top; just hamburger/logo/bell floating
   directly over the page background. ── */
body.theme-apple #floating-header,
body.theme-apple .navbar.fixed-top {
    background: transparent;
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    box-shadow: none;
    padding-top: env(safe-area-inset-top);
    top: 0;
}

/* PERSISTENT scroll-edge top cover — page-bg colored band with a feather
   fade at the bottom. Sits BEHIND the navbar (lower z-index) so hamburger /
   logo / bell icons stay visible on top. */
body.theme-apple #ios-top-cover {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(env(safe-area-inset-top, 0px) + 24px);
    background: var(--ios-bg);
    background-color: var(--ios-bg);
    z-index: 100;
    pointer-events: none;
    visibility: visible;
    /* Invisible by default — icons fully visible. Fade in when the navbar
       fades out on scroll (same trigger: #floating-header.header-scrolled).
       See the :has() rule below. */
    opacity: 0;
    transition: opacity 0.25s ease;
    /* Solid covers exactly the notch area; fade starts immediately below the
       notch and finishes ~24px down. Keeps the navbar icons visible (they sit
       inside the feather/transparent area) while content scrolling under the
       notch is hidden behind the solid band. */
    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        black env(safe-area-inset-top, 0px),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        black env(safe-area-inset-top, 0px),
        transparent 100%
    );
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
/* Make absolutely sure the navbar sits ABOVE the cover */
body.theme-apple #floating-header,
body.theme-apple nav#floating-header.navbar.fixed-top {
    z-index: 1030;
}

/* Hide the cover on opt-out pages if needed */
body:not(.theme-apple) #ios-top-cover {
    display: none;
}

/* ── iOS-style back button. Beats text-hover-improvements.css
   `a:not(.btn):not(.badge)...` (0,6,1) by matching the same :not() chain. ── */
body.theme-apple a.ios-back-btn:not(.btn):not(.badge):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.mobile-nav-item),
body.theme-apple a.ios-back-btn,
body.theme-apple .ios-back-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    max-width: 36px;
    min-height: 36px;
    max-height: 36px;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--ios-tint);
    background: transparent;
    background-color: transparent;
    color: var(--ios-tint);
    text-decoration: none;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: background 160ms ease, transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
body.theme-apple a.ios-back-btn:hover,
body.theme-apple .ios-back-btn:hover {
    background: var(--ios-tint-soft);
}
body.theme-apple a.ios-back-btn:active,
body.theme-apple .ios-back-btn:active {
    transform: scale(0.93);
}
body.theme-apple a.ios-back-btn svg,
body.theme-apple a.ios-back-btn i,
body.theme-apple .ios-back-btn svg,
body.theme-apple .ios-back-btn i,
body.theme-apple button.ios-back-btn svg {
    color: var(--ios-tint);
    stroke: var(--ios-tint);
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
    visibility: visible;
    opacity: 1;
    display: block;
}
/* iOS Safari PWA WebView sometimes doesn't cascade `stroke="currentColor"`
   from the parent <svg> down to inner shapes — the icon shows as blank
   inside the blue circle. Force stroke + no-fill on every shape type so
   the icon always renders, even when cached or namespace-quirked. */
body.theme-apple .ios-back-btn svg polyline,
body.theme-apple .ios-back-btn svg path,
body.theme-apple .ios-back-btn svg line,
body.theme-apple .ios-back-btn svg circle,
body.theme-apple .ios-back-btn svg rect,
body.theme-apple .ios-back-btn svg * {
    stroke: var(--ios-tint);
    fill: none;
}

/* ── page-with-header-space — push content just below the top cover.
   Tighter spacing — content sits right under the navbar like iOS. ── */
body.theme-apple .page-with-header-space,
body.theme-apple .competition-header.card.page-with-header-space,
body.theme-apple .competition-header.card.page-with-header-space,
body.theme-apple .competition-header.page-with-header-space {
    margin-top: calc(env(safe-area-inset-top, 0px) + 24px);
    padding-top: 0;
}

/* ─────────────────────────────────────────────────────────
   iOS Large Title page header (Apple Mail / Settings pattern)
   Reusable on any page. Renders: back btn → big title → subtitle.
   ───────────────────────────────────────────────────────── */
body.theme-apple .ios-page-header {
    /* Tight iOS spacing — content sits just below the navbar */
    margin: calc(env(safe-area-inset-top, 0px) + 24px) 0 18px;
    padding: 0 16px;
    background: transparent;
    border: none;
    box-shadow: none;
}

body.theme-apple .ios-page-header-top {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

body.theme-apple .ios-page-title {
    font-size: clamp(28px, 6.5vw, 34px);
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.05;
    color: var(--ios-fg);
    margin: 0;
    text-align: left;
}

body.theme-apple .ios-page-subtitle {
    color: var(--ios-fg-2);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    margin: 2px 0 0;
    letter-spacing: -0.005em;
    text-align: left;
}

/* Back button when placed inside ios-page-header has slightly smaller footprint */
body.theme-apple .ios-page-back {
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    min-height: 32px;
    max-height: 32px;
    background: var(--ios-fg-4);
    border: none;
    color: var(--ios-fg);
}
body.theme-apple .ios-page-back svg,
body.theme-apple .ios-page-back i {
    color: var(--ios-fg);
    stroke: var(--ios-fg);
    width: 14px;
    height: 14px;
}

/* ── Strip text-shadow from ALL badges everywhere.
   Beats new-dark.css `html:not(.light-theme) #completed-matches-container ...`
   (1,4,1) with matching ID + extra classes. ── */
body.theme-apple .badge,
body.theme-apple .badge.bg-warning,
body.theme-apple .badge.bg-primary,
body.theme-apple .badge.bg-success,
body.theme-apple .badge.bg-danger,
body.theme-apple .badge.bg-info,
body.theme-apple .badge.bg-secondary,
body.theme-apple .upcoming-badge,
body.theme-apple .completed-badge,
body.theme-apple .match-card .badge,
body.theme-apple .competition-card .badge,
body.theme-apple .rounds-badge,
body.theme-apple .court-badge,
body.theme-apple .badge.border,
body.theme-apple #completed-matches-container .card-body > div:not(.alert) .badge,
body.theme-apple #completed-matches-container .card-body > div:not(.alert) .vs,
body.theme-apple #completed-matches-container .badge,
body.theme-apple .match-card .badge,
body.theme-apple .badge {
    text-shadow: none;
    box-shadow: none;
}

/* Rounds badge (R1, R2 etc.) — solid iOS blue + white text */
body.theme-apple .rounds-badge,
body.theme-apple .badge.rounds-badge,
body.theme-apple .badge.bg-secondary.rounds-badge,
body.theme-apple .rounds-badge.rounds-badge--upcoming,
body.theme-apple .badge.rounds-badge--upcoming,
body.theme-apple .badge.bg-secondary.rounds-badge.rounds-badge--upcoming {
    background: var(--ios-tint);
    background-color: var(--ios-tint);
    color: #fff;
    border: none;
    text-shadow: none;
}

/* ── Match action labels (text below the 4 action buttons) ── */
body.theme-apple .match-action-label,
body.theme-apple .match-actions-grid .match-action-label,
body.theme-apple .match-action-item .match-action-label,
body.theme-apple .match-action-item > div:not(.btn) {
    color: var(--ios-fg-2);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    margin-top: 4px;
    text-shadow: none;
}

/* Match action item layout (vertical stack: button + label) */
body.theme-apple .match-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Match action icons — bolder stroke so they look more solid blue */
body.theme-apple .match-action-item svg,
body.theme-apple .match-action-item .button-match-action svg,
body.theme-apple .button-match-action svg {
    stroke-width: 2.4;
    color: var(--ios-tint);
    stroke: var(--ios-tint);
    fill: none;
}
/* Force ALL inner SVG parts (path, circle, line, polyline, polygon, rect) to iOS blue.
   Beats the earlier `.match-card svg circle { stroke: grey }` rule by being more specific. */
body.theme-apple .match-action-item svg path,
body.theme-apple .match-action-item svg circle,
body.theme-apple .match-action-item svg line,
body.theme-apple .match-action-item svg polyline,
body.theme-apple .match-action-item svg polygon,
body.theme-apple .match-action-item svg rect,
body.theme-apple .match-action-item svg ellipse,
body.theme-apple .button-match-action svg path,
body.theme-apple .button-match-action svg circle,
body.theme-apple .button-match-action svg line,
body.theme-apple .button-match-action svg polyline,
body.theme-apple .button-match-action svg polygon,
body.theme-apple .button-match-action svg rect,
body.theme-apple .button-match-action svg ellipse,
body.theme-apple .match-card .match-action-item svg circle,
body.theme-apple .match-card .button-match-action svg circle {
    stroke: var(--ios-tint);
    color: var(--ios-tint);
    fill: none;
}

/* ── Match card dropdown menu — solid white iOS sheet ────── */
body.theme-apple .match-card .dropdown-menu,
body.theme-apple .competition-card .dropdown-menu,
body.theme-apple .upcoming-match-card .dropdown-menu {
    background: var(--ios-surface);
    background-color: var(--ios-surface);
    border: 0.5px solid var(--ios-separator);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
    padding: 6px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}
body.theme-apple .match-card .dropdown-item,
body.theme-apple .competition-card .dropdown-item {
    background: transparent;
    color: var(--ios-fg);
    border-radius: 8px;
    padding: 10px 12px;
    font-weight: 500;
    font-size: 15px;
}
body.theme-apple .match-card .dropdown-item:hover,
body.theme-apple .match-card .dropdown-item:focus,
body.theme-apple .competition-card .dropdown-item:hover {
    background: var(--ios-fg-4);
    color: var(--ios-fg);
}
body.theme-apple .match-card .dropdown-item.text-danger,
body.theme-apple .match-card .dropdown-item.danger {
    color: var(--ios-red);
}

/* ── Override Bootstrap bg-warning Gepland badge — warm amber + white text ── */
body.theme-apple .badge.bg-warning.upcoming-badge,
body.theme-apple .upcoming-badge.badge.bg-warning,
body.theme-apple .upcoming-badge {
    background: var(--ep-color-warning);
    background-color: var(--ep-color-warning);
    color: #fff;
    text-shadow: none;
    border: none;
    box-shadow: none;
}


body.theme-apple .navbar .nav-link,
body.theme-apple .navbar-brand,
body.theme-apple .navbar-text {
    color: var(--ios-fg);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Logo (white-on-transparent PNG) — invert to black on light navbar */
body.theme-apple #floating-header .navbar-brand img,
body.theme-apple #floating-header .navbar-logo,
body.theme-apple #floating-header a img[alt="EffePadelle"] {
    filter: brightness(0) saturate(100%);
}

/* Hamburger toggler — Bootstrap uses a white SVG via background-image.
   Replace with a near-black SVG so it's visible on cream navbar. */
body.theme-apple .navbar-toggler {
    border-color: var(--ios-separator);
    color: var(--ios-fg);
}
body.theme-apple .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,0.85)' stroke-width='2.4' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
body.theme-apple .navbar-toggler:focus,
body.theme-apple .navbar-toggler:active {
    box-shadow: none;
    outline: none;
}

/* Bell button — inline `color: #ffffff` would normally win, but our
   CSS color overrides inline color without. */
body.theme-apple #mobile-notification-bell,
body.theme-apple #mobile-notification-bell svg,
body.theme-apple #mobile-notification-bell .spinner-border {
    color: var(--ios-fg);
    stroke: var(--ios-fg);
}

/* ── Typography — SF Pro display scale ────────────────────── */
body.theme-apple h1, body.theme-apple .h1 {
    color: var(--ios-fg);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.022em;
    line-height: 1.05;
}
body.theme-apple h2, body.theme-apple .h2 {
    color: var(--ios-fg);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.018em;
    line-height: 1.08;
}
body.theme-apple h3, body.theme-apple .h3 {
    color: var(--ios-fg);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.015em;
}
body.theme-apple h4, body.theme-apple .h4 {
    color: var(--ios-fg);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
body.theme-apple h5, body.theme-apple .h5,
body.theme-apple h6, body.theme-apple .h6 {
    color: var(--ios-fg);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

body.theme-apple p, body.theme-apple .lead {
    color: var(--ios-fg-2);
    font-size: 17px;
    line-height: 1.45;
}

body.theme-apple a {
    color: var(--ios-tint);
    text-decoration: none;
}
body.theme-apple a:hover { color: var(--ios-tint-press); }