/* ===== SHARED RACE NAV BAR =====================================
   Sits directly below <header>, above the hero. Built dynamically by
   /js/race-nav.js — see RACE_NAV[] there. Update the array weekly.

   v5 — 2026-06-13. Centered + glassmorphic pills with per-sport glow.
   Background tinted with --sport-color at 15%, border at 40%,
   backdrop-filter blur, box-shadow glow. Active pill gets a stronger
   fill + multilayer outer glow.
   ============================================================== */

.race-nav-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    padding:10px 16px;
    background:rgba(0,0,0,0.55);
    border-bottom:1px solid rgba(255,255,255,0.06);
    -webkit-overflow-scrolling:touch;
    max-width:100%;
}

.race-nav-pill{
    flex-shrink:0;
    display:inline-flex;
    align-items:baseline;
    gap:7px;
    padding:8px 16px;
    border-radius:24px;
    border:1px solid color-mix(in srgb, var(--sport-color) 40%, transparent);
    background:color-mix(in srgb, var(--sport-color) 15%, rgba(255,255,255,0.02));
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    color:var(--sport-color);
    font-family:'JetBrains Mono','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:0.02em;
    line-height:1.2;
    white-space:nowrap;
    text-decoration:none;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--sport-color) 10%, transparent),
        0 2px 12px -2px color-mix(in srgb, var(--sport-color) 35%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.06);
    transition:background .2s,border-color .2s,box-shadow .2s,transform .15s;
    /* --sport-color is set inline per pill */
}

.race-nav-pill[href]:hover,
.race-nav-pill[href]:focus-visible{
    background:color-mix(in srgb, var(--sport-color) 28%, rgba(255,255,255,0.04));
    border-color:color-mix(in srgb, var(--sport-color) 65%, transparent);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--sport-color) 25%, transparent),
        0 4px 20px -2px color-mix(in srgb, var(--sport-color) 55%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.1);
    transform:translateY(-1px);
    outline:none;
}

/* Active (current page) — pronounced fill + stronger outer glow */
.race-nav-pill.active{
    background:color-mix(in srgb, var(--sport-color) 55%, rgba(0,0,0,0.2));
    border-color:var(--sport-color);
    color:#fff;
    box-shadow:
        0 0 0 1px var(--sport-color),
        0 0 24px -4px color-mix(in srgb, var(--sport-color) 70%, transparent),
        0 4px 18px -2px color-mix(in srgb, var(--sport-color) 50%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.18);
}
.race-nav-pill.active:hover{
    transform:translateY(-1px);
}

/* Dimmed (sport has no upcoming race) */
.race-nav-pill.soon{
    opacity:0.55;
    cursor:default;
    box-shadow:none;
    background:color-mix(in srgb, var(--sport-color) 8%, rgba(255,255,255,0.02));
}

.race-nav-sport{
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.06em;
}
.race-nav-pill.active .race-nav-sport{color:#fff}
.race-nav-label{font-weight:500}
.race-nav-date{opacity:0.75;font-weight:400}
.race-nav-pill.active .race-nav-date{opacity:0.95;color:rgba(255,255,255,0.85)}

/* Tablet + landscape phones — horizontal scroll so all 5 pills stay on
   one row. 950px, not 768px (2026-08-20 mobile-overlap order): landscape
   phones are 844-932px wide. */
@media(max-width:950px){
    .race-nav-bar{
        flex-wrap:nowrap;
        justify-content:flex-start;
        overflow-x:auto;
        overflow-y:hidden;
        scrollbar-width:none;
        -ms-overflow-style:none;
        padding:8px 12px;
    }
    .race-nav-bar::-webkit-scrollbar{display:none}
    .race-nav-pill{padding:7px 14px;font-size:11px}
}

/* Very narrow screens — tighter typography */
@media(max-width:380px){
    .race-nav-pill{padding:6px 12px;font-size:10.5px;gap:5px}
    .race-nav-bar{padding:6px 12px;gap:6px}
    .race-nav-date{display:none}
}

/* ================================================================
   CANONICAL HEADER BASE (2026-08-20, Roger system-wide order).
   race-nav.js now injects the homepage's exact header markup on
   every non-homepage page; those pages don't load homepage-main.css,
   so the header's base styling lives HERE (values copied verbatim
   from homepage-main.css with its :root vars resolved). The homepage
   also loads this file - identical values, so no visual delta there.
   ================================================================ */
#header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(0,0,0,.95);border-bottom:1px solid rgba(255,255,255,.15);height:73px}
@supports (backdrop-filter: blur(20px)){#header{background:rgba(0,0,0,.8);backdrop-filter:blur(20px)}}
#header .header-inner{max-width:1400px;margin:0 auto;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;height:100%;gap:.75rem}
#header .header-left{display:flex;align-items:center;gap:.5rem}
#header .logo{font-size:1.5rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;position:relative;padding-left:.75rem;display:flex;align-items:center;gap:.5rem;text-decoration:none;color:#fff}
#header .logo::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:70%;background:linear-gradient(180deg,#EF4444,#DC2626)}
#header .logo-divider{width:1px;height:20px;background:rgba(255,255,255,.15)}
#header .logo-tagline{font-size:.625rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#b0b0b0}
#header .header-inner>nav{display:flex;gap:.625rem;align-items:center}
#header .header-inner>nav a{font-size:.8125rem;text-decoration:none;color:#b0b0b0;font-weight:500;transition:color .2s;padding:.375rem .375rem;white-space:nowrap}
#header .header-inner>nav a:hover{color:#fff}
#header .language-selector{position:relative;display:inline-block;flex-shrink:0}
#header .language-btn{background:transparent;border:1px solid rgba(255,255,255,.15);padding:.5rem .75rem;border-radius:6px;display:flex;align-items:center;gap:.375rem;cursor:pointer;color:#b0b0b0;font-size:.8125rem;font-weight:500;transition:.2s}
#header .language-btn:hover{border-color:#DC2626;color:#fff}
#header .language-dropdown{position:absolute;top:calc(100% + .5rem);right:0;background:rgba(10,10,10,.98);border:1px solid rgba(255,255,255,.15);border-radius:8px;min-width:180px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.3s;z-index:1000;box-shadow:0 8px 24px rgba(0,0,0,.4)}
#header .language-selector.active .language-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
#header .language-option{display:flex;align-items:center;padding:.875rem 1rem;cursor:pointer;color:#b0b0b0;font-size:.875rem;transition:.2s;border-bottom:1px solid rgba(255,255,255,.05);gap:.75rem}
#header .language-option:last-child{border-bottom:none}
#header .language-option:hover{background:rgba(220,38,38,.1);color:#fff}
#header .language-option.active{background:rgba(220,38,38,.15);color:#EF4444;font-weight:600}
#header .lang-flag{font-size:1.25rem}
#header .btn-header{background:#fff;color:#000;border-radius:6px;font-weight:600;text-decoration:none;transition:.2s;white-space:nowrap}
#header .btn-header:hover{background:#DC2626;color:#fff}
#header .mobile-menu-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.15);width:44px;height:44px;border-radius:6px;position:relative;cursor:pointer;transition:.3s;flex-shrink:0;z-index:101}
#header .mobile-menu-toggle:hover{border-color:#DC2626;background:rgba(220,38,38,.05)}
#header .mobile-menu-toggle.active{border-color:#DC2626;background:rgba(220,38,38,.15)}
#header .hamburger{width:20px;height:14px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#header .hamburger span{display:block;position:absolute;height:2px;width:100%;background:#fff;transition:.3s;left:0;border-radius:2px}
#header .hamburger span:first-child{top:0}
#header .hamburger span:nth-child(2){top:6px}
#header .hamburger span:nth-child(3){top:12px}
#header .mobile-menu-toggle.active .hamburger span:first-child{top:7px;transform:rotate(45deg)}
#header .mobile-menu-toggle.active .hamburger span:nth-child(2){opacity:0;transform:translateX(-10px)}
#header .mobile-menu-toggle.active .hamburger span:nth-child(3){top:7px;transform:rotate(-45deg)}
/* Live Races dropdown (ported from the homepage inline block) */
#header .lrd-wrap{position:relative;display:inline-block}
#header .lrd-trigger{color:#D4AF37 !important;cursor:pointer;font-weight:700;letter-spacing:.4px;font-size:13px;padding:6px 14px !important;border:1px solid rgba(212,175,55,.5);border-radius:5px;background:rgba(212,175,55,.04);text-decoration:none !important;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;animation:lrd-pulse 3s ease-in-out infinite;position:relative;white-space:nowrap}
#header .lrd-trigger .lrd-live-word{color:#00C853;text-shadow:0 0 8px rgba(0,200,83,.55);font-weight:800;margin-right:2px}
#header .lrd-wrap:hover .lrd-trigger,#header .lrd-wrap:focus-within .lrd-trigger,#header .lrd-wrap.open .lrd-trigger{background:rgba(212,175,55,.1);border-color:rgba(212,175,55,.85);box-shadow:0 0 16px rgba(212,175,55,.45),inset 0 0 8px rgba(212,175,55,.08);animation-play-state:paused}
@keyframes lrd-pulse{0%,100%{box-shadow:0 0 4px rgba(212,175,55,.2),inset 0 0 0 rgba(212,175,55,0)}50%{box-shadow:0 0 14px rgba(212,175,55,.5),inset 0 0 6px rgba(212,175,55,.08)}}
@media(prefers-reduced-motion:reduce){#header .lrd-trigger{animation:none}}
#header .lrd-caret{display:inline-block;font-size:11px;margin-left:5px;opacity:.85;transition:transform .2s ease;transform:translateY(-1px)}
#header .lrd-wrap:hover .lrd-caret,#header .lrd-wrap:focus-within .lrd-caret,#header .lrd-wrap.open .lrd-caret{transform:translateY(-1px) rotate(180deg);opacity:.9}
#header .lrd-panel{position:absolute;top:calc(100% + 8px);right:0;width:360px;max-width:90vw;max-height:min(80vh,640px);background:#0b0b0d;border:1px solid rgba(255,255,255,.12);border-top:2px solid #D4AF37;border-radius:8px;padding:0;box-shadow:0 12px 32px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.5),0 0 24px rgba(212,175,55,.08);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;z-index:300;overflow-y:auto;overflow-x:hidden}
#header .lrd-wrap:hover .lrd-panel,#header .lrd-wrap:focus-within .lrd-panel,#header .lrd-wrap.open .lrd-panel{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .18s ease,transform .18s ease,visibility 0s linear 0s}
[dir=rtl] #header .language-dropdown{right:auto;left:0}
/* Phone collapse: tabs + CTA + login hide, hamburger shows.
   950px, not 768px (2026-08-20 mobile-overlap order): a phone held in
   LANDSCAPE is 844-932px CSS px wide, which used to fall into the
   desktop tier — the capsule header tuned for 1366px+ cannot fit there
   (wordmark over tabs, tabs over Log in, language button pushed
   off-screen). Anything under 951px now gets the phone header. */
@media (max-width: 950px){
    #header{height:65px}
    #header .btn-header,#header .header-inner>nav,#header .btn-header-login{display:none !important}
    #header .mobile-menu-toggle{display:flex !important;align-items:center;justify-content:center}
    #header .header-right{gap:.75rem}
    #header .language-btn{padding:.4rem .75rem;font-size:.8125rem;gap:.4rem;max-width:140px;min-height:44px}
    #header #currentLang{max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    #header .header-inner{padding:.75rem 1rem}
}

/* Portrait phones (2026-10-03): with the "Analyzing HorsePower" tagline the
   phone header needs ~410px, so on every race page the menu button sat cut
   off past the right edge - 20px at 390 (iPhone), 35 at 375, 50 at 360, 90 at
   320 (measured live). The desktop tier below retires the tagline for the same
   reason; portrait phones do the same. 480, not 411: other languages' taglines
   run longer than English, which had only 2px to spare at 412. */
@media (max-width: 480px){
    #header .logo-tagline,#header .logo-divider{display:none}
}

/* ===== SHARED HEADER FIT (2026-08-20, Roger directive, rev 2) ====
   This file is loaded by EVERY page (homepage + all race pages), so
   the fix lands site-wide at once. Roger's spec: ONE row at 100%
   zoom, nothing wrapped, nothing cut off —
   1) the right group (language + My Account) can never shrink;
   2) the nav stays on a single line and SHRINKS to fit: tighter
      gap/padding/type, min-width:0, nowrap. overflow:hidden is the
      last-resort guard so an extreme width can never overlap the
      account button.
   Scoped to #header = the HOMEPAGE header only (2026-08-20 rev 5):
   bare `header` selectors leaked into the fixed nav that race-nav.js
   injects on subpages (it is also a <header>), inflating it past its
   73px frame and re-hiding /start/ content. Track pages have their
   own inline header design and are intentionally not touched. */
@media (min-width: 951px){
    #header .header-right{flex-shrink:0;gap:0.5rem}
    /* max-width:none — the page body keeps its 1400px column, but the
       HEADER row uses the full window, so on wide screens the tabs get
       the hundreds of px that were sitting unused at the edges. */
    #header .header-inner{gap:0.75rem;padding-left:2.25rem;padding-right:2.25rem;max-width:none}
    /* The tab row wears the site's glassmorphic language (Roger:
       "looks like a run-on sentence... box or highlight it like the
       rest of my program"): one glass capsule around the set, gold
       hover pills per tab — same family as the race-nav pills below
       and the CC dropdown. */
    #header .header-inner>nav{
        flex:0 1 auto;
        margin-left:auto;
        margin-right:auto;
        min-width:0;
        flex-wrap:nowrap;
        white-space:nowrap;
        justify-content:center;
        gap:0.25rem;
        /* overflow must stay VISIBLE: the Live Races mega panel and the
           language dropdown are children of this capsule - hidden clipped
           both popups into invisibility (Roger report 2026-08-20). */
        overflow:visible;
        background:rgba(255,255,255,0.035);
        border:1px solid rgba(255,255,255,0.09);
        border-radius:999px;
        padding:.26rem .5rem;
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 2px 12px -6px rgba(0,0,0,0.7);
        -webkit-backdrop-filter:blur(8px);
        backdrop-filter:blur(8px);
    }
    #header .header-inner>nav a{
        border-radius:999px;
        transition:background .18s,color .18s,text-shadow .18s;
    }
    #header .header-inner>nav a:hover{
        background:rgba(212,168,83,0.14);
        color:#f0c970;
        text-shadow:0 0 8px rgba(212,175,55,0.35);
    }
    #header .header-inner>nav{gap:0.3rem}
    #header .header-inner>nav a{padding:.34rem .55rem;font-size:.84rem;font-weight:600;color:#cfd6e2;letter-spacing:.01em;-webkit-font-smoothing:antialiased}
    /* Logo presence rev 2 (Roger: still lost, letters tight): bigger,
       wider letter-spacing, thicker red bar with a breathing glow. */
    /* Letters as tall as the red bar, lighter weight (Roger). */
    /* Matched to the 60-second film's wordmark (Roger): Segoe UI 600,
       spaced caps, red bar exactly cap-height (.7em scales with tiers). */
    #header .logo{font-family:"Segoe UI",Helvetica,Arial,sans-serif;font-size:2.6rem;font-weight:600;letter-spacing:.28em;padding-left:1.1rem;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
    #header .logo::before{height:.7em;width:.13em}
    /* Horizontal streak (Roger): a red line shoots THROUGH the wordmark,
       synced to the same 4.6s cycle as the letter sheen - the line leads,
       the glow follows through the letters. */
    #header .logo{position:relative}
    #header .logo::after{
        content:'';
        position:absolute;
        top:50%;
        left:-15%;
        height:2px;
        width:1.7em;
        transform:translateY(-50%);
        border-radius:2px;
        background:linear-gradient(90deg,transparent,#ff4444 30%,#ff9a9a 60%,transparent);
        box-shadow:0 0 8px rgba(239,68,68,.85),0 0 18px rgba(239,68,68,.4);
        opacity:0;
        pointer-events:none;
        animation:rhpLogoStreak 4.6s ease-in-out infinite;
    }
    #header .logo::before{width:5px;height:82%;border-radius:2px;animation:rhpLogoPulse 2.8s ease-in-out infinite}
    #header .logo:hover span{text-shadow:0 0 14px rgba(239,68,68,.55)}
    #header .logo span{transition:text-shadow .3s}
    /* Visible motion (Roger: the bar glow read as no animation at all):
       a red shine sweeps across the RACEHP letters every ~4.6s. */
    #header .logo span[data-i18n="logo"]{
        display:inline-block;
        color:#fff;
        background:linear-gradient(105deg,#ffffff 30%,#ff3b3b 46%,#ff6b6b 54%,#ffffff 70%);
        background-size:250% 100%;
        background-position:120% 0;
        -webkit-background-clip:text;
        background-clip:text;
        -webkit-text-fill-color:transparent;
        animation:rhpLogoSheen 4.6s ease-in-out infinite;
    }
    /* The tagline ("Analyzing HorsePower") is the widest non-essential
       piece of the row — retiring it buys the tabs ~150px so every tab
       fits on one line without clipping. The RACEHP wordmark stays. */
    #header .logo-tagline,#header .logo-divider{display:none}
    #header .btn-header-login{margin-right:4px !important}
    /* Compact account/CTA button (Roger: it doesn't need to be as big
       as the RACEHP wordmark) — was .625rem/1.5rem pad @ .9375rem. */
    /* !important required: the homepage's inline FLUID BUTTONS block
       (clamp padding + 44px min-height, all !important) was the hidden
       source of the giant pill - it beat every non-!important rule. */
    #header .btn-header{padding:.24rem .6rem !important;font-size:.66rem !important;font-weight:600;border-radius:999px;line-height:1.4;min-height:0 !important}
    /* Language selector lives INSIDE the capsule on desktop (moved there
       by the homepage script, next to Live Races) — style it to blend. */
    #header .header-inner>nav .language-selector{flex-shrink:0;margin-left:.15rem}
    #header .header-inner>nav .language-btn{background:transparent;border:1px solid rgba(255,255,255,0.14);border-radius:999px;padding:.2rem .5rem;font-size:.7rem;min-height:0}
    #header .language-btn{padding:.24rem .5rem;font-size:.68rem}
}
/* Mid tier (1440-1599): step down so the bigger base type still fits */
@media (min-width: 951px) and (max-width: 1699px){
    #header .header-inner>nav{gap:0.12rem}
    #header .header-inner>nav a{padding:.28rem .27rem;font-size:.7rem}
    #header .logo{font-size:2.35rem}
}
/* Small-laptop tier (1366px class) */
@media (min-width: 951px) and (max-width: 1439px){
    #header .header-inner>nav{gap:0.08rem;padding:.22rem .35rem}
    #header .header-inner>nav a{padding:.26rem .22rem;font-size:.66rem}
    #header .logo{font-size:2.1rem}
}
/* Phone (<=950px, incl. landscape phones) untouched by ALL of the above:
   the tab row and the account button are display:none there — the
   hamburger menu owns navigation — so the desktop fit rules cannot
   affect the phone. */

/* ===== PHONE TEXT-WRAP FIXES (2026-08-20 Roger mobile-overlap order) ==
   Race pages position .tp-rank absolute in the top-pick card's top-right
   corner (inline CSS in every race page template). In ES/FR the
   .tp-eyebrow line wraps and its first line runs UNDER the badge —
   text on text. On phones the badge flows in-line above the eyebrow
   instead. !important because the page's inline <style> loads after
   this file and would win the cascade tie. */
@media (max-width: 950px){
    .tp-rank{position:static !important;margin:0 0 .4rem !important;text-align:left}
}

/* Logo red-bar breathing glow (referenced by the #header .logo::before
   rule in the shared block above). */
@keyframes rhpLogoPulse{
    0%,100%{box-shadow:0 0 5px rgba(220,38,38,.35)}
    50%{box-shadow:0 0 16px rgba(239,68,68,.85),0 0 30px rgba(239,68,68,.35)}
}

/* Logo letter shine sweep (rests ~2.5s, sweeps ~1.2s). */
@keyframes rhpLogoSheen{
    0%,50%{background-position:120% 0}
    85%,100%{background-position:-60% 0}
}

/* Logo horizontal streak - same 4.6s clock as rhpLogoSheen so the line
   and the letter glow travel together. */
@keyframes rhpLogoStreak{
    0%,50%{left:0;opacity:0}
    56%{opacity:1}
    79%{opacity:1}
    85%,100%{left:105%;opacity:0}
}


/* ===== More dropdown + nav restructure (2026-08-30) ===== */
#header .mnav-wrap{position:relative;display:inline-flex;align-items:center}
#header .mnav-trigger{font-family:inherit;font-size:.8125rem;color:#b0b0b0;font-weight:500;background:none;border:none;cursor:pointer;padding:.375rem .375rem;white-space:nowrap;transition:color .2s;display:inline-flex;align-items:center}
#header .mnav-trigger:hover,#header .mnav-wrap.open .mnav-trigger{color:#fff}
#header .mnav-trigger:focus-visible{outline:2px solid #D4AF37;outline-offset:2px;border-radius:4px}
#header .mnav-panel{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:#0b0b0d;border:1px solid rgba(255,255,255,.12);border-top:2px solid #D4AF37;border-radius:8px;padding:6px 0;box-shadow:0 12px 32px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;z-index:300}
#header .mnav-wrap.open .mnav-panel{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .18s ease,transform .18s ease,visibility 0s linear 0s}
#header .mnav-panel a{display:block;padding:10px 18px;font-size:.8125rem;color:#b0b0b0;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
#header .mnav-panel a:hover{background:rgba(255,255,255,.06);color:#fff}
#header .mnav-wrap.open .lrd-caret{transform:translateY(-1px) rotate(180deg)}
#header .header-inner>nav .lrd-wrap .lrd-panel{left:0;right:auto}
[dir=rtl] #header .header-inner>nav .lrd-wrap .lrd-panel{left:auto;right:0}
[dir=rtl] #header .mnav-panel{right:auto;left:0}
.rhp-snav-mobile .mnav-mdivider{margin:.75rem 0 .25rem;padding:10px 0 4px;border-top:1px solid rgba(255,255,255,0.06)}
.rhp-snav-mobile .mnav-mdivider span{font-size:9px;letter-spacing:2px;font-weight:800;color:rgba(255,255,255,0.25);text-transform:uppercase}

/* Active-tab glow (2026-08-30) */
#header .header-inner>nav a.rhp-nav-active{color:#D4AF37 !important;text-shadow:0 0 10px rgba(212,175,55,.55);font-weight:700}
#header .mnav-trigger.rhp-nav-active{color:#D4AF37 !important;text-shadow:0 0 10px rgba(212,175,55,.55)}
.rhp-snav-mobile nav a.rhp-nav-active{color:#D4AF37 !important;background:rgba(212,175,55,.08)}