/*
 * pssc-premium.css - the finishing layer for the public site (2 Nov 2026).
 *
 * Loaded last, after theme.php, on public pages only (html.th-site). It keeps the
 * club's navy, red, crest and typefaces, and refines what sits on top of them:
 * type rhythm, the header, buttons, cards, links, focus and the calmer page
 * background. One signature: a kesri (saffron) rule, the colour of the Nishan
 * Sahib, used only on section labels and the active menu item.
 * Every rule is scoped to html.th-pp, so removing that class turns it all off.
 */
:root{
  --pp-navy:#052d66; --pp-ink:#0f1b33; --pp-body:#2c3a55; --pp-muted:#5b6b86;
  --pp-red:#d81e08; --pp-kesri:#e08a1e; --pp-paper:#fbfcfe;
  --pp-line:rgba(5,45,102,.09); --pp-line-2:rgba(5,45,102,.16);
  --pp-sh-1:0 1px 2px rgba(5,30,70,.05),0 1px 1px rgba(5,30,70,.04);
  --pp-sh-2:0 1px 2px rgba(5,30,70,.05),0 10px 28px -14px rgba(5,30,70,.22);
  --pp-sh-3:0 2px 4px rgba(5,30,70,.06),0 22px 48px -22px rgba(5,30,70,.32);
  --pp-ease:cubic-bezier(.2,.7,.2,1);
}
/* theme.php marks its own rules !important, so this layer does too; html.th-pp keeps it the more specific. */

/* ---------- page and type ---------- */
html.th-pp{ -webkit-font-smoothing:antialiased !important; -moz-osx-font-smoothing:grayscale !important; text-rendering:optimizeLegibility !important}
html.th-pp body{ background-color:var(--pp-paper) !important; color:var(--pp-ink) !important; font-feature-settings:"kern","liga","calt" !important}
html.th-pp body::before{ opacity:.55 !important}                       /* the colour washes, quieter */
html.th-pp ::selection{ background:var(--pp-navy) !important; color:#fff !important}

html.th-pp main h1, html.th-pp main h2, html.th-pp main h3{ letter-spacing:-.012em !important; text-wrap:balance !important}
html.th-pp main p, html.th-pp main li{ text-wrap:pretty !important}

/* numbers that sit in columns line up */
html.th-pp .hx-bars, html.th-pp [class*="stat"], html.th-pp time{ font-variant-numeric:tabular-nums !important}

/* ---------- section labels: sentence case, kesri rule ---------- */
html.th-pp .th-eyebrow,
html.th-pp.th-site main :is(.tag, .kicker, [class$="-kick"], [class*="-kick "]){
  text-transform:none !important; letter-spacing:.01em !important; font-size:13.5px !important; font-weight:600 !important;
}
html.th-pp.th-site main .tag::before{ background:var(--pp-kesri) !important; height:2px !important; border-radius:2px !important}

/* ---------- header: one frosted surface edge to edge ---------- */
html.th-pp header.site-header{
  background:rgba(255,255,255,.94) !important;
  -webkit-backdrop-filter:saturate(1.8) blur(18px) !important; backdrop-filter:saturate(1.8) blur(18px) !important;
  box-shadow:0 1px 0 var(--pp-line) !important;
}
html.th-pp header.site-header.stuck{ box-shadow:0 1px 0 var(--pp-line),0 12px 30px -24px rgba(5,30,70,.45) !important}
html.th-pp header.site-header .wrap.bar{ background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important}
html.th-pp header.site-header .nav a[aria-current="page"],
html.th-pp header.site-header .nav .on > a{ box-shadow:inset 0 -2px 0 var(--pp-kesri) !important}

/* ---------- buttons ---------- */
html.th-pp a.cta, html.th-pp button.cta, html.th-pp .cta{
  transition:background-color .18s var(--pp-ease), box-shadow .18s var(--pp-ease), transform .18s var(--pp-ease), color .18s !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(5,30,70,.18), 0 6px 16px -8px rgba(5,30,70,.45) !important;
  letter-spacing:.005em !important;
}
html.th-pp a.cta:hover, html.th-pp button.cta:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(5,30,70,.18), 0 12px 24px -10px rgba(5,30,70,.5) !important;
  transform:translateY(-1px) !important;
}
html.th-pp a.cta:active, html.th-pp button.cta:active{ transform:translateY(0) !important; box-shadow:inset 0 1px 2px rgba(0,0,0,.18) !important}
html.th-pp .cta.alt, html.th-pp .cta.ghost, html.th-pp .cta.light{
  box-shadow:0 0 0 1px var(--pp-line-2) inset, var(--pp-sh-1) !important;
}
html.th-pp .cta.alt:hover, html.th-pp .cta.ghost:hover, html.th-pp .cta.light:hover{
  box-shadow:0 0 0 1px rgba(5,45,102,.28) inset, var(--pp-sh-2) !important;
}

/* ---------- cards: hairline, layered shadow, lift only when clickable ---------- */
html.th-pp .th-glass, html.th-pp .nx-card, html.th-pp .lv-card, html.th-pp .cta-box{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px var(--pp-line), var(--pp-sh-2) !important;
}
html.th-pp a.th-glass, html.th-pp a.nx-card, html.th-pp a.lv-card{
  transition:box-shadow .22s var(--pp-ease), transform .22s var(--pp-ease) !important;
}
html.th-pp a.th-glass:hover, html.th-pp a.nx-card:hover, html.th-pp a.lv-card:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px var(--pp-line-2), var(--pp-sh-3) !important;
  transform:translateY(-2px) !important;
}

/* ---------- reading: articles and long pages ---------- */
html.th-pp .art-flow > p, html.th-pp .art-flow > ul, html.th-pp .art-flow > ol,
html.th-pp .art-flow > blockquote{ max-width:68ch !important}
html.th-pp .art-flow > p{ line-height:1.78 !important}
html.th-pp .art-flow blockquote{
  border-left:2px solid var(--pp-kesri) !important; padding:.2em 0 .2em 1.1em !important; color:var(--pp-ink) !important;
  font-size:1.06em !important;
}
html.th-pp main .art-flow a:not(.cta){
  text-decoration:underline !important; text-decoration-thickness:1px !important; text-underline-offset:.22em !important;
  text-decoration-color:rgba(5,70,165,.35) !important; transition:text-decoration-color .15s, color .15s !important;
}
html.th-pp main .art-flow a:not(.cta):hover{ text-decoration-color:currentColor !important; color:var(--pp-navy) !important}
html.th-pp main figure img, html.th-pp .art-flow img{ border-radius:14px !important}
html.th-pp main figcaption{ color:var(--pp-muted) !important; font-size:.88em !important; margin-top:.55em !important}

/* ---------- forms ---------- */
html.th-pp main input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
html.th-pp main select, html.th-pp main textarea{
  border-color:var(--pp-line-2) !important; transition:border-color .15s, box-shadow .15s !important;
}
html.th-pp main input:not([type=checkbox]):not([type=radio]):focus,
html.th-pp main select:focus, html.th-pp main textarea:focus{
  border-color:#0546a5 !important; box-shadow:0 0 0 4px rgba(5,70,165,.14) !important; outline:none !important;
}

/* ---------- keyboard focus, everywhere ---------- */
html.th-pp :focus-visible{ outline:2px solid #0546a5 !important; outline-offset:3px !important; border-radius:6px !important}
html.th-pp .cta:focus-visible{ outline-offset:3px !important; border-radius:999px !important}

/* ---------- footer ---------- */
html.th-pp footer.site-footer{ border-top:1px solid rgba(255,255,255,.06) !important}
html.th-pp footer.site-footer a{ text-underline-offset:.22em !important}

@media (prefers-reduced-motion:reduce){
  html.th-pp *, html.th-pp *::before, html.th-pp *::after{ transition:none !important; animation:none !important }
  html.th-pp a.cta:hover, html.th-pp a.th-glass:hover, html.th-pp a.nx-card:hover, html.th-pp a.lv-card:hover{ transform:none !important}
}