/* V21 refined premium balance: emerald-forward navigation rail + soft blurred hero bands */
:root{
  --v21-deep-plum:#261b35;
  --v21-plum:#342347;
  --v21-emerald:#17684f;
  --v21-emerald-soft:#2b8a67;
  --v21-white:#ffffff;
  --v21-surface:#f7f8fb;
  --v21-text:#243247;
}

/* Long desktop/mobile public navigation rail: richer emerald presence, a little white, no noisy clutter */
body.public-site.hybrid-navigation .topbar.public-premium-topbar,
body.public-site.hybrid-navigation.sidebar-collapsed .topbar.public-premium-topbar{
  background:
    radial-gradient(circle at 78% 50%, rgba(34, 126, 94, .34), transparent 20%),
    radial-gradient(circle at 92% 16%, rgba(255,255,255,.11), transparent 16%),
    radial-gradient(circle at 16% 12%, rgba(255,255,255,.06), transparent 14%),
    linear-gradient(108deg, #24182f 0%, #2b1d39 38%, #2f2342 62%, #1d4f42 100%) !important;
  border:1px solid rgba(131, 175, 156, .24) !important;
  box-shadow:0 16px 34px rgba(25, 20, 37, .18), inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow:hidden !important;
}
body.public-site.hybrid-navigation .topbar.public-premium-topbar::before,
body.public-site.hybrid-navigation.sidebar-collapsed .topbar.public-premium-topbar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(90deg, rgba(255,255,255,.07), transparent 14%, transparent 84%, rgba(255,255,255,.04)),
    linear-gradient(130deg, transparent 0%, transparent 70%, rgba(255,255,255,.06) 77%, transparent 82%),
    linear-gradient(90deg, transparent 0%, rgba(107,193,152,.28) 62%, rgba(176,233,208,.12) 100%);
  opacity:.95;
}
body.public-site.hybrid-navigation .topbar.public-premium-topbar::after,
body.public-site.hybrid-navigation.sidebar-collapsed .topbar.public-premium-topbar::after{
  content:"";
  position:absolute;
  left:22px;right:22px;bottom:0;height:1px;
  border-radius:999px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.12) 18%, rgba(98,188,145,.58) 50%, rgba(255,255,255,.10) 82%, transparent);
}
body.public-site.hybrid-navigation .hybrid-brand-spark{
  background:linear-gradient(180deg, transparent, rgba(220,236,228,.7) 14%, rgba(95,185,141,.92) 56%, transparent 92%) !important;
}
body.public-site.hybrid-navigation .hybrid-main-nav > a:not(.active),
body.public-site.hybrid-navigation .hybrid-main-nav > details:not(.active) > summary{
  color:#f6f4f9 !important;
  -webkit-text-fill-color:#f6f4f9 !important;
}
body.public-site.hybrid-navigation .hybrid-main-nav > a:hover,
body.public-site.hybrid-navigation .hybrid-main-nav > details > summary:hover,
body.public-site.hybrid-navigation .hybrid-main-nav > details[open] > summary{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(109,199,157,.28) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
body.public-site.hybrid-navigation .hybrid-main-nav > .active,
body.public-site.hybrid-navigation .hybrid-main-nav > details.active > summary,
body.public-site.hybrid-navigation .hybrid-main-nav > details[open].active > summary{
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08)) !important;
  border-color:rgba(109,199,157,.56) !important;
  box-shadow:inset 0 -2px 0 rgba(101, 205, 155, .94), 0 10px 22px rgba(10,10,10,.13) !important;
}
body.public-site.hybrid-navigation :is(.hybrid-search > summary, .topbar-notification){
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(255,255,255,.18) !important;
}
body.public-site.hybrid-navigation .hybrid-account > summary,
body.public-site.hybrid-navigation .hybrid-search-input-row button{
  background:linear-gradient(135deg, #1d7a58, #155740) !important;
  border-color:rgba(106, 205, 160, .55) !important;
  box-shadow:0 8px 18px rgba(11, 52, 36, .24) !important;
}
body.public-site.hybrid-navigation .hybrid-brand-mark{
  background:linear-gradient(145deg, rgba(255,255,255,.98), rgba(243,250,246,.92)) !important;
  border-color:rgba(236, 239, 233, .9) !important;
}

/* Mobile rail keeps the same identity */
@media(max-width:1100px){
  html body.public-site.hybrid-navigation.page-index .topbar.public-premium-topbar,
  html body.public-site.hybrid-navigation:not(.page-index) .topbar.public-premium-topbar,
  html body.public-site.hybrid-navigation.sidebar-collapsed .topbar.public-premium-topbar{
    background:
      radial-gradient(circle at 86% 14%, rgba(255,255,255,.08), transparent 22%),
      radial-gradient(circle at 82% 56%, rgba(53, 156, 116, .28), transparent 22%),
      linear-gradient(105deg, #261a34 0%, #2c1e3d 52%, #1e5142 100%) !important;
    border-bottom:1px solid rgba(113,165,144,.28) !important;
  }
}

/* Public page hero / heading banners: remove hard cut, use soft blurred premium gradients */
body.public-site:not(.page-index) .public-page-hero,
body.public-site .contact-page-hero,
body.public-site .guide-real-hero,
body.public-site .section-heading,
body.public-site.page-index .sport-hub-heading.sport-hub-hero-heading,
body.public-site.page-index .event-countdown,
body:is(.admin-body,.user-body,.committee-body) .dashboard-hero{
  position:relative;
  overflow:hidden;
}

body.public-site:not(.page-index) .public-page-hero,
body.public-site .contact-page-hero,
body.public-site .guide-real-hero,
body.public-site .section-heading{
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.10), transparent 16%),
    radial-gradient(circle at 85% 16%, rgba(118, 200, 160, .20), transparent 23%),
    radial-gradient(circle at 92% 78%, rgba(255,255,255,.12), transparent 20%),
    linear-gradient(120deg, #281c37 0%, #312145 46%, #214c40 100%) !important;
  border:1px solid rgba(90, 86, 108, .65) !important;
  box-shadow:0 18px 34px rgba(27, 22, 39, .14) !important;
}
body.public-site:not(.page-index) .public-page-hero::before,
body.public-site .contact-page-hero::before,
body.public-site .guide-real-hero::before,
body.public-site .section-heading::before,
body:is(.admin-body,.user-body,.committee-body) .dashboard-hero::before,
body.public-site.page-index .sport-hub-heading.sport-hub-hero-heading::before,
body.public-site.page-index .event-countdown::before{
  content:"";
  position:absolute;
  inset:-20% -10% auto auto;
  width:320px;
  height:220px;
  pointer-events:none;
  background:
    radial-gradient(circle, rgba(255,255,255,.20) 0%, rgba(255,255,255,.08) 26%, transparent 66%);
  filter:blur(12px);
  opacity:.85;
}
body.public-site:not(.page-index) .public-page-hero::after,
body.public-site .contact-page-hero::after,
body.public-site .guide-real-hero::after,
body.public-site .section-heading::after,
body:is(.admin-body,.user-body,.committee-body) .dashboard-hero::after,
body.public-site.page-index .sport-hub-heading.sport-hub-hero-heading::after,
body.public-site.page-index .event-countdown::after{
  content:"";
  position:absolute;
  left:-4%;
  bottom:-30px;
  width:250px;
  height:170px;
  pointer-events:none;
  background:radial-gradient(circle, rgba(91, 186, 144, .17), transparent 68%);
  filter:blur(18px);
}

/* Soft heading variants to avoid everything being too purple */
body.public-site.page-schedule .public-page-hero,
body.public-site.page-results .public-page-hero,
body.public-site.page-announcements .public-page-hero,
body.public-site.page-documents .public-page-hero,
body.public-site.page-certificates .public-page-hero,
body.public-site.page-medals .public-page-hero{
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.18), transparent 24%),
    radial-gradient(circle at 18% 78%, rgba(85, 173, 133, .16), transparent 26%),
    linear-gradient(118deg, #2b1e3a 0%, #39264c 54%, #edf3f0 100%) !important;
  border-color:rgba(191, 199, 208, .76) !important;
}
body.public-site.page-live-scores .public-page-hero,
body.public-site.page-help-center .public-page-hero,
body.public-site.page-schools .public-page-hero,
body.public-site .contact-page-hero{
  background:
    radial-gradient(circle at 83% 18%, rgba(255,255,255,.20), transparent 24%),
    radial-gradient(circle at 14% 74%, rgba(95, 180, 140, .18), transparent 24%),
    linear-gradient(118deg, #164e3d 0%, #237055 50%, #f2f7f4 100%) !important;
  border-color:rgba(199, 220, 208, .88) !important;
}
body.public-site.page-sports .section-heading,
body.public-site.page-apply .section-heading,
body.public-site.page-register .section-heading,
body.public-site.page-registration-guide .guide-real-hero{
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.20), transparent 24%),
    radial-gradient(circle at 12% 76%, rgba(117, 191, 156, .18), transparent 26%),
    linear-gradient(118deg, #eef3f1 0%, #f5f2f9 58%, #edf7f1 100%) !important;
  border:1px solid #dbe2e6 !important;
  box-shadow:0 14px 28px rgba(30, 38, 45, .06) !important;
}

/* Text colors per light/dark banner */
body.public-site:not(.page-sports):not(.page-apply):not(.page-register):not(.page-registration-guide) .public-page-hero :is(.section-title,.eyebrow,h1,h2),
body.public-site .contact-page-hero :is(.section-title,.eyebrow,h1,h2),
body.public-site.page-index .sport-hub-hero-heading h2,
body.public-site.page-index .event-countdown .countdown-intro strong,
body:is(.admin-body,.user-body,.committee-body) .dashboard-hero :is(h1,h2,strong){
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
body.public-site:not(.page-sports):not(.page-apply):not(.page-register):not(.page-registration-guide) .public-page-hero :is(.section-lead,p,small),
body.public-site .contact-page-hero :is(.section-lead,p,small),
body.public-site.page-index .event-countdown .countdown-intro div>span,
body:is(.admin-body,.user-body,.committee-body) .dashboard-hero :is(p,small,span){
  color:#e6e1eb !important;
  -webkit-text-fill-color:#e6e1eb !important;
}
body.public-site.page-sports .section-heading :is(.eyebrow,.section-title,.muted),
body.public-site.page-apply .section-heading :is(.eyebrow,.section-title,.muted),
body.public-site.page-register .section-heading :is(.eyebrow,.section-title,.muted),
body.public-site.page-registration-guide .guide-real-hero :is(h1,h2,p,.guide-real-kicker){
  color:#314357 !important;
  -webkit-text-fill-color:#314357 !important;
}
body.public-site.page-sports .section-heading .section-title,
body.public-site.page-apply .section-heading .section-title,
body.public-site.page-register .section-heading .section-title,
body.public-site.page-registration-guide .guide-real-hero h1,
body.public-site.page-registration-guide .guide-real-hero h2{
  color:#205341 !important;
  -webkit-text-fill-color:#205341 !important;
}
body.public-site.page-sports .section-heading .eyebrow,
body.public-site.page-apply .section-heading .eyebrow,
body.public-site.page-register .section-heading .eyebrow,
body.public-site.page-registration-guide .guide-real-hero .guide-real-kicker,
body.public-site:not(.page-index) .public-page-hero .live-eyebrow,
body.public-site.page-index .sport-hub-hero-heading .sport-hub-eyebrow,
body.public-site.page-index .event-countdown .countdown-intro small{
  color:#d8c08e !important;
  -webkit-text-fill-color:#d8c08e !important;
}
body.public-site.page-sports .section-heading .eyebrow,
body.public-site.page-apply .section-heading .eyebrow,
body.public-site.page-register .section-heading .eyebrow,
body.public-site.page-registration-guide .guide-real-hero .guide-real-kicker{
  color:#6e5189 !important;
  -webkit-text-fill-color:#6e5189 !important;
}

/* CTA/count chips remain clean and premium over soft backgrounds */
body.public-site:not(.page-index) .public-page-hero .luxury-action-link,
body.public-site .contact-page-hero .contact-page-highlight{
  background:rgba(255,255,255,.95) !important;
  color:#184f3f !important;
  -webkit-text-fill-color:#184f3f !important;
  border:1px solid rgba(219, 229, 225, .96) !important;
  box-shadow:0 9px 20px rgba(27, 38, 40, .08) !important;
}
body.public-site:not(.page-index) .public-page-hero .public-page-count{
  background:rgba(255,255,255,.95) !important;
  border:1px solid rgba(224, 230, 232, .94) !important;
  box-shadow:0 10px 22px rgba(25, 34, 40, .08) !important;
}
body.public-site:not(.page-index) .public-page-hero .public-page-count strong{
  color:#17694e !important;
  -webkit-text-fill-color:#17694e !important;
}
body.public-site:not(.page-index) .public-page-hero .public-page-count span{
  color:#6d7888 !important;
  -webkit-text-fill-color:#6d7888 !important;
}

/* Home special sections gain the same softer premium texture */
body.public-site.page-index .sport-hub-heading.sport-hub-hero-heading{
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.18), transparent 24%),
    radial-gradient(circle at 14% 74%, rgba(90,180,139,.18), transparent 28%),
    linear-gradient(118deg, #2a2039 0%, #332446 58%, #214c40 100%) !important;
  border:1px solid rgba(77, 82, 98, .62) !important;
  box-shadow:inset 4px 0 0 #3aa67a, 0 16px 30px rgba(28, 31, 44, .14) !important;
}
body.public-site.page-index .event-countdown{
  background:
    radial-gradient(circle at 84% 18%, rgba(255,255,255,.18), transparent 24%),
    radial-gradient(circle at 18% 74%, rgba(89,179,139,.16), transparent 26%),
    linear-gradient(116deg, #281d36 0%, #342447 54%, #1f4a3f 100%) !important;
  border:1px solid rgba(86, 86, 101, .68) !important;
  box-shadow:0 16px 30px rgba(27, 24, 38, .14) !important;
}
body.public-site.page-index .countdown-icon{
  background:rgba(255,255,255,.11) !important;
  border-color:rgba(201,235,218,.22) !important;
  color:#d7f1e3 !important;
}
body.public-site.page-index .countdown-numbers>div{
  background:rgba(255,255,255,.95) !important;
}

/* Logged-in dashboards echo the same softer header style */
body:is(.admin-body,.user-body,.committee-body) .dashboard-hero{
  background:
    radial-gradient(circle at 84% 16%, rgba(255,255,255,.16), transparent 24%),
    radial-gradient(circle at 16% 76%, rgba(88,178,136,.14), transparent 26%),
    linear-gradient(120deg, #281d36 0%, #322244 54%, #204b3f 100%) !important;
  border:1px solid rgba(83, 84, 100, .66) !important;
  box-shadow:0 16px 30px rgba(27, 24, 38, .13) !important;
}
body:is(.admin-body,.user-body,.committee-body) .hero-kpi-card{
  background:rgba(255,255,255,.93) !important;
  border-color:rgba(224, 229, 234, .94) !important;
}
body:is(.admin-body,.user-body,.committee-body) .hero-kpi-card strong{
  color:#17684f !important;
  -webkit-text-fill-color:#17684f !important;
}
body:is(.admin-body,.user-body,.committee-body) .hero-kpi-card :is(span,small){
  color:#697888 !important;
  -webkit-text-fill-color:#697888 !important;
}

@media(max-width:960px){
  body.public-site:not(.page-index) .public-page-hero,
  body.public-site .contact-page-hero,
  body.public-site .guide-real-hero,
  body.public-site .section-heading,
  body:is(.admin-body,.user-body,.committee-body) .dashboard-hero{
    background:
      radial-gradient(circle at 82% 14%, rgba(255,255,255,.12), transparent 26%),
      radial-gradient(circle at 14% 76%, rgba(87, 177, 137, .18), transparent 28%),
      linear-gradient(120deg, #281d36 0%, #322244 58%, #21493f 100%) !important;
    border-color:rgba(84, 82, 99, .72) !important;
  }
  body.public-site.page-sports .section-heading,
  body.public-site.page-apply .section-heading,
  body.public-site.page-register .section-heading,
  body.public-site.page-registration-guide .guide-real-hero{
    background:
      radial-gradient(circle at 82% 14%, rgba(255,255,255,.20), transparent 26%),
      linear-gradient(118deg, #f3f4f7 0%, #f7f4fb 56%, #f2f8f4 100%) !important;
  }
}

/* V22 hotfix: keep the header's dropdowns outside its bounding box.
   V21's overflow:hidden clipped the entire dropdown behind the rail. */
html body.public-site.hybrid-navigation .topbar.public-premium-topbar,
html body.public-site.hybrid-navigation.sidebar-collapsed .topbar.public-premium-topbar{
  overflow:visible !important;
  background:
    radial-gradient(ellipse at 53% 95%, rgba(255,255,255,.10), transparent 38%),
    radial-gradient(ellipse at 80% 0%, rgba(125,218,166,.13), transparent 35%),
    linear-gradient(104deg,#25182f 0%,#30213e 26%,#284b45 49%,#18664f 73%,#164e3e 100%) !important;
  border-color:rgba(103,179,139,.44) !important;
}
/* Highlights live over the rail without covering interactive dropdowns. */
html body.public-site.hybrid-navigation .topbar.public-premium-topbar::before{
  border-radius:inherit;
  background:
    linear-gradient(115deg,transparent 12%,rgba(255,255,255,.045) 18%,transparent 24%,transparent 70%,rgba(255,255,255,.10) 83%,transparent 90%),
    radial-gradient(ellipse at 60% 110%,rgba(124,215,169,.17),transparent 56%);
  pointer-events:none;
}
/* Each menu is a floating layer; no inherited clipping when expanded. */
html body.public-site.hybrid-navigation .hybrid-main-nav,
html body.public-site.hybrid-navigation .hybrid-main-nav>details,
html body.public-site.hybrid-navigation .hybrid-account,
html body.public-site.hybrid-navigation .hybrid-search{
  overflow:visible !important;
}
html body.public-site.hybrid-navigation .hybrid-main-nav>details[open],
html body.public-site.hybrid-navigation .hybrid-account[open],
html body.public-site.hybrid-navigation .hybrid-search[open]{
  z-index:300 !important;
}
html body.public-site.hybrid-navigation .hybrid-main-nav>details[open]>.hybrid-dropdown{
  display:grid !important;
  position:absolute !important;
  top:calc(100% - 4px) !important;
  z-index:350 !important;
  visibility:visible !important;
  opacity:1 !important;
  background:#fff !important;
  color:#294036 !important;
  border:1px solid #d5e4dc !important;
  box-shadow:0 18px 42px rgba(22,33,30,.21),0 2px 7px rgba(22,33,30,.05) !important;
}
/* One visual selection at a time: if a dropdown is open, hide the
   former page's highlight, keeping only the current interaction highlighted. */
html body.public-site.hybrid-navigation .hybrid-main-nav:has(>details[open])>a.active,
html body.public-site.hybrid-navigation .hybrid-main-nav:has(>details[open])>details.active:not([open])>summary,
html body.public-site.hybrid-navigation .hybrid-main-nav.has-open-dropdown>a.active,
html body.public-site.hybrid-navigation .hybrid-main-nav.has-open-dropdown>details.active:not([open])>summary{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
html body.public-site.hybrid-navigation .hybrid-main-nav>details[open]>summary{
  background:rgba(255,255,255,.13) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:1px solid rgba(144,220,173,.72) !important;
  box-shadow:inset 0 -2px 0 rgba(121,213,159,.9) !important;
}
@media(max-width:1100px){
  html body.public-site.hybrid-navigation.page-index .topbar.public-premium-topbar,
  html body.public-site.hybrid-navigation:not(.page-index) .topbar.public-premium-topbar,
  html body.public-site.hybrid-navigation.sidebar-collapsed .topbar.public-premium-topbar{
    background:
      radial-gradient(ellipse at 84% 0%,rgba(255,255,255,.09),transparent 26%),
      linear-gradient(105deg,#2b1c38,#2b3341 43%,#195640 100%) !important;
    overflow:visible !important;
  }
}

/* Higher-specificity override for V19's page-specific header color rules.
   Without the explicit page selectors V19 kept the bar almost solid purple. */
html body.public-site.hybrid-navigation.page-index .topbar.public-premium-topbar,
html body.public-site.hybrid-navigation:not(.page-index) .topbar.public-premium-topbar,
html body.public-site.hybrid-navigation.sidebar-collapsed .topbar.public-premium-topbar{
  background:
    radial-gradient(ellipse at 58% 125%, rgba(255,255,255,.09), transparent 40%),
    radial-gradient(ellipse at 86% -10%, rgba(164,236,195,.12), transparent 38%),
    linear-gradient(104deg,#271a33 0%,#33223e 23%,#2c4350 43%,#1e644e 69%,#165940 100%) !important;
  border-color:rgba(105,182,145,.42) !important;
  overflow:visible !important;
}
html body.public-site.hybrid-navigation .hybrid-main-nav>details[open]>summary:hover,
html body.public-site.hybrid-navigation .hybrid-main-nav>details[open]>summary:focus-visible{
  background:rgba(255,255,255,.15) !important;
  border-color:rgba(144,220,173,.72) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}