/*!
 * NSO 2026 — shared core
 * Tokens, resets, buttons, header, drawer, footer, section headings, trust row, final CTA. Load this on every 2026 page, before the page-specific sheet.
 * All selectors namespaced `n26-`.
 */

/* ============================================================
   NSO — design tokens
   ============================================================ */
:root{
  /* Brand — sampled from the NSO design system */
  --n26-navy-900:#021a36;
  --n26-navy-800:#022448;
  --n26-navy-700:#05315e;
  --n26-blue-600:#0b6ec4;
  --n26-blue-500:#0285d8;
  --n26-blue-400:#4aa6e6;
  --n26-blue-50:#eaf4fd;

  /* Saffron — reserved for the single primary action */
  --n26-gold-500:#f0a91e;
  --n26-gold-600:#dd970c;

  --n26-ink:#101828;
  --n26-ink-soft:#475467;
  --n26-line:#e4e7ec;
  --n26-surface:#f5f7fa;
  --n26-white:#fff;

  /* Live site chrome — sampled from nationalsikhorganization.org */
  --n26-brand:#0074e0;        /* top rule + Donate Now button */
  --n26-brand-dark:#0063c2;
  --n26-header-navy:#052e53;  /* the header pill */

  --n26-shadow-sm:0 1px 2px rgba(2,36,72,.06),0 1px 3px rgba(2,36,72,.08);
  --n26-shadow-md:0 4px 6px -2px rgba(2,36,72,.05),0 12px 20px -4px rgba(2,36,72,.10);
  --n26-shadow-lg:0 8px 12px -4px rgba(2,36,72,.06),0 28px 48px -12px rgba(2,36,72,.22);

  --n26-r-sm:10px; --n26-r-md:14px; --n26-r-lg:20px; --n26-r-xl:28px;
  --n26-container:1200px;
  --n26-gutter:20px;

  --n26-font-display:"Poppins",system-ui,-apple-system,sans-serif;
  --n26-font-body:"Inter",system-ui,-apple-system,sans-serif;
  /* the live site sets its chrome in Figtree; the header matches it */
  --n26-font-ui:"Figtree",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--n26-white);-webkit-font-smoothing:antialiased}

:focus-visible{outline:3px solid var(--n26-blue-500);outline-offset:3px;border-radius:4px}

/* ---------- scoped element resets -----------------------------------------
   Scoped with :where() so they carry ZERO specificity — exactly like the bare
   `a {}` / `h1 {}` rules they replace. Without this, a scoped `.n26-page a`
   (0,1,1) would outrank component rules like `.n26-btn-gold` (0,1,0).
   -------------------------------------------------------------------------- */
.n26-page,.n26-header,.n26-footer,.n26-drawer{color:var(--n26-ink);font-family:var(--n26-font-body);font-size:17px;line-height:1.65}
:where(.n26-page,.n26-header,.n26-footer,.n26-drawer) img{max-width:100%;display:block}
:where(.n26-page,.n26-header,.n26-footer,.n26-drawer) a{color:var(--n26-blue-600);text-decoration:none}
:where(.n26-page,.n26-header,.n26-footer,.n26-drawer) :is(h1,h2,h3,h4){font-family:var(--n26-font-display);color:var(--n26-navy-800);margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:700}
:where(.n26-page,.n26-header,.n26-footer,.n26-drawer) p{margin:0}

/* ---------- defensive overrides -------------------------------------------
   nso/css/custom.css and Bootstrap still load on this page and style bare
   elements that reach our markup:
     custom.css  header      -> border-radius, margin, padding, dark background
     custom.css  input[...]  -> height/padding/border-radius, all !important
     bootstrap   h1-h6       -> font-weight:500
   These need real specificity (and !important where custom.css uses it).
   -------------------------------------------------------------------------- */
.n26-footer{margin:0;border-radius:0;background-image:none}
/* nso/css/custom.css styles the bare `header` element
   (border-radius:50px;margin:20px;background:#052e53). The 2026 header lands on
   the same look but sets every value itself rather than inheriting it. */
.n26-header{margin:0;padding:20px;border-radius:0;background:transparent;background-image:none}
/* custom.css forces input{height:60px!important}. Undo it for text inputs only —
   applying height:auto to a checkbox or radio collapses it to a 2px sliver. */
.n26-page input:not([type="checkbox"]):not([type="radio"]),
.n26-header input:not([type="checkbox"]):not([type="radio"]),
.n26-footer input:not([type="checkbox"]):not([type="radio"]),
.n26-drawer input:not([type="checkbox"]):not([type="radio"]){height:auto!important}
.n26-page input[type="checkbox"],.n26-page input[type="radio"]{
  width:17px!important;height:17px!important;min-height:0;flex:none;accent-color:var(--n26-blue-600);
}
.n26-page button,.n26-header button,.n26-footer button,.n26-drawer button{line-height:1.2}

.n26-container{width:100%;max-width:var(--n26-container);margin-inline:auto;padding-inline:var(--n26-gutter)}
.n26-skip{position:absolute;left:-9999px;top:0;background:var(--n26-navy-800);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 8px 0}
.n26-skip:focus{left:0}

/* ---------- buttons ---------- */
.n26-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--n26-font-body);font-weight:600;font-size:16px;line-height:1;
  padding:15px 26px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
  text-align:center;white-space:nowrap;
}
.n26-btn:hover{transform:translateY(-2px)}
.n26-btn:active{transform:translateY(0)}
.n26-btn-gold{background:var(--n26-gold-500);color:var(--n26-navy-900);box-shadow:0 6px 16px rgba(240,169,30,.34)}
.n26-btn-gold:hover{background:var(--n26-gold-600);box-shadow:0 10px 24px rgba(240,169,30,.42)}
.n26-btn-navy{background:var(--n26-navy-800);color:#fff}
.n26-btn-navy:hover{background:var(--n26-navy-700)}
.n26-btn-blue{background:var(--n26-blue-600);color:#fff}
.n26-btn-blue:hover{background:var(--n26-blue-500)}
.n26-btn-brand{background:var(--n26-brand);color:#fff;border-color:transparent;font-family:var(--n26-font-ui);
  font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;padding:12px 26px;border-radius:20px}
.n26-btn-brand:hover{background:var(--n26-brand-dark)}
.n26-btn-ghost{background:transparent;color:var(--n26-navy-800);border-color:var(--n26-line)}
.n26-btn-ghost:hover{border-color:var(--n26-navy-800);background:var(--n26-white)}
.n26-btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.n26-btn-ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.12)}
.n26-btn-lg{font-size:17px;padding:17px 32px}
.n26-btn-block{width:100%}
.n26-btn .n26-ico{width:18px;height:18px;flex:none}

/* ---------- header ---------- */
/* Mirrors the live site: a 20px brand rule across the top, then a navy pill
   inset 20px from every edge. Not sticky — the live header is position:static,
   and a 50px-radius bar inset from the edges reads wrong pinned to the top. */
.n26-topline{height:20px;background:var(--n26-brand)}
.n26-header{position:relative;z-index:100}
.n26-headerbar{
  display:flex;align-items:center;gap:24px;
  background:var(--n26-header-navy);border-radius:50px;padding:16px 18px 16px 26px;
}
.n26-logo{flex:none;display:block}
.n26-logo img{width:240px;height:auto}

.n26-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.n26-nav a{
  font-family:var(--n26-font-ui);font-size:16px;font-weight:800;text-transform:uppercase;
  color:#fff;white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.n26-nav a:hover{color:var(--n26-blue-400);border-bottom-color:var(--n26-blue-400)}
.n26-nav a[aria-current="page"]{border-bottom-color:var(--n26-brand)}
.n26-nav-account{display:inline-flex;align-items:center;gap:7px}
.n26-nav-account .n26-ico{flex:none}

.n26-header-cta{display:flex;align-items:center;gap:10px;flex:none}
.n26-burger{
  display:none;margin-left:auto;background:none;border:1.5px solid rgba(255,255,255,.4);
  border-radius:10px;padding:10px;cursor:pointer;color:#fff;
}
.n26-burger:hover{border-color:#fff;background:rgba(255,255,255,.1)}

/* the nav is wide once every item is 16px/800 uppercase — hand over to the
   drawer before it can collide with the logo or the button */
@media (max-width:1320px){
  .n26-nav{display:none}
  .n26-burger{display:inline-flex}
  .n26-header-cta{order:3;margin-left:auto}
}
@media (max-width:640px){
  .n26-header{padding:12px}
  .n26-headerbar{border-radius:28px;padding:12px 12px 12px 16px;gap:12px}
  .n26-logo img{width:180px}
  .n26-btn-brand{padding:10px 18px;font-size:13px}
}
@media (max-width:420px){
  .n26-logo img{width:132px}
  .n26-headerbar{gap:8px;padding:10px 10px 10px 12px}
  .n26-btn-brand{padding:9px 13px;font-size:12px;letter-spacing:.4px}
  .n26-burger{padding:8px}
}
/* 320px: logo + burger + button is the tightest row on the site */
@media (max-width:360px){
  .n26-header{padding:10px}
  .n26-logo img{width:104px}
  .n26-headerbar{gap:6px;padding:8px 8px 8px 10px;border-radius:22px}
  .n26-btn-brand{padding:8px 10px;font-size:11px;letter-spacing:.2px}
  .n26-burger{padding:6px}
}

/* mobile drawer */
.n26-drawer{position:fixed;inset:0;z-index:150;display:none}
.n26-drawer[data-open="true"]{display:block}
.n26-drawer-scrim{position:absolute;inset:0;background:rgba(2,26,54,.5)}
.n26-drawer-panel{
  position:absolute;right:0;top:0;bottom:0;width:min(340px,86vw);background:#fff;
  padding:22px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;
  animation:slideIn .22s ease;
}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.n26-drawer-panel a{padding:14px 12px;border-radius:10px;font-weight:500;color:var(--n26-navy-800);font-size:17px}
.n26-drawer-panel a:hover{background:var(--n26-surface)}
.n26-drawer-close{align-self:flex-end;background:none;border:none;padding:8px;cursor:pointer;color:var(--n26-navy-800);margin-bottom:8px}
.n26-drawer-panel .n26-btn{margin-top:8px}

/* ---------- sections ---------- */
.n26-page > section{padding:88px 0}
@media (max-width:760px){.n26-page > section{padding:60px 0}}
.n26-sec-head{max-width:720px;margin-bottom:48px}
.n26-sec-head.n26-center{margin-inline:auto;text-align:center}
.n26-kicker{
  display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--n26-blue-600);margin-bottom:16px;
}
.n26-kicker::before{content:"";width:26px;height:2px;background:var(--n26-blue-500);border-radius:2px}
.n26-sec-head.n26-center .n26-kicker::before{display:none}
h2.n26-title{font-size:clamp(1.85rem,3.1vw,2.75rem);font-weight:700}
.n26-sec-head p{margin-top:16px;font-size:1.06rem;color:var(--n26-ink-soft)}

/* ---------- cause card (homepage grid + causes listing) ---------- */
a.n26-cause{
  color:var(--n26-ink);background:#fff;border:1px solid var(--n26-line);border-radius:var(--n26-r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.n26-cause:hover{transform:translateY(-5px);box-shadow:var(--n26-shadow-md);border-color:transparent}
/* overflow:hidden lives on the wrapper, not the media box. It is needed to clip
   the hover zoom, but on .n26-cause-media it also clipped .n26-cause-badge —
   which is positioned bottom:-22px to overhang — into a half circle. */
.n26-cause-media{position:relative;aspect-ratio:16/10;background:var(--n26-navy-800)}
.n26-cause-imgwrap{position:absolute;inset:0;overflow:hidden;display:block}
.n26-cause-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.n26-cause:hover .n26-cause-media img{transform:scale(1.05)}
.n26-cause-badge{
  position:absolute;left:18px;bottom:-22px;width:52px;height:52px;border-radius:50%;
  background:var(--n26-blue-600);display:grid;place-items:center;color:#fff;
  box-shadow:0 6px 16px rgba(2,36,72,.28);border:3px solid #fff;
}
.n26-cause-body{padding:36px 22px 22px;display:flex;flex-direction:column;flex:1}
.n26-cause h3{font-size:1.19rem;font-weight:600}
.n26-cause p{margin-top:10px;font-size:15.3px;color:var(--n26-ink-soft);flex:1}
.n26-cause .n26-more{
  margin-top:18px;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;color:var(--n26-blue-600);
}
.n26-cause .n26-more .n26-ico{transition:transform .2s ease}
.n26-cause:hover .n26-more .n26-ico{transform:translateX(4px)}

/* ---------- page header (listing + form pages) ---------- */
.n26-pagehead{background:var(--n26-navy-900);color:#fff;position:relative;overflow:hidden}
.n26-page > section.n26-pagehead{padding:52px 0 56px}
.n26-pagehead::before{
  content:"";position:absolute;width:620px;height:620px;border-radius:50%;
  right:-220px;top:-300px;background:radial-gradient(circle,rgba(74,166,230,.2),transparent 68%);
}
.n26-pagehead-in{position:relative;max-width:760px}
.n26-pagehead h1{color:#fff;font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:700;letter-spacing:-.035em}
.n26-pagehead .n26-kicker{color:var(--n26-gold-500)}
.n26-pagehead .n26-kicker::before{background:var(--n26-gold-500)}
.n26-pagehead p{margin-top:14px;font-size:1.02rem;color:rgba(255,255,255,.82);max-width:52ch}
.n26-pagehead-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
@media (max-width:900px){.n26-page > section.n26-pagehead{padding:40px 0 44px}}
@media (max-width:560px){.n26-page > section.n26-pagehead{padding:30px 0 34px}}

/* ---------- page hero (cause + about) ---------- */
.n26-chero{background:var(--n26-white);overflow:hidden}
.n26-page > section.n26-chero{padding:0}
.n26-chero-in{display:grid;grid-template-columns:1fr 1.12fr;gap:56px;align-items:center;padding-block:54px 58px}
.n26-chero h1{font-size:clamp(2.1rem,3.9vw,3.35rem);font-weight:700;letter-spacing:-.035em}
.n26-chero-lede{margin-top:20px;font-size:1.06rem;color:var(--n26-ink-soft);max-width:33em}
.n26-chero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.n26-chero-media{position:relative;border-radius:var(--n26-r-lg);overflow:hidden;box-shadow:var(--n26-shadow-md);aspect-ratio:16/9}
.n26-chero-media img{width:100%;height:100%;object-fit:cover}
@media (max-width:980px){
  .n26-chero-in{grid-template-columns:1fr;gap:34px;padding-block:40px 44px}
  .n26-chero-media{order:-1}
}

/* ---------- trust ---------- */
.n26-trust{background:var(--n26-surface);border-block:1px solid var(--n26-line)}
.n26-trust-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.n26-tcol{padding:8px 26px;text-align:center}
.n26-tcol+.n26-tcol{border-left:1px solid var(--n26-line)}
.n26-tcol .n26-ico{color:var(--n26-blue-500);margin-inline:auto;margin-bottom:16px}
.n26-tcol h3{font-size:1rem;font-weight:600}
.n26-tcol p{margin-top:9px;font-size:14.4px;color:var(--n26-ink-soft)}
@media (max-width:920px){
  .n26-trust-grid{grid-template-columns:repeat(2,1fr);gap:36px 0}
  .n26-tcol+.n26-tcol{border-left:none}
  .n26-tcol:nth-child(even){border-left:1px solid var(--n26-line)}
  .n26-tcol:last-child{grid-column:1/-1}
}
@media (max-width:520px){
  .n26-trust-grid{grid-template-columns:1fr;gap:30px}
  .n26-tcol:nth-child(even){border-left:none}
  .n26-tcol:last-child{grid-column:auto}
}

/* ---------- final CTA ---------- */
.n26-final{position:relative;background:var(--n26-navy-900);color:#fff;overflow:hidden;padding:84px 0}
.n26-final-bg{position:absolute;inset:0}
.n26-final-bg img{width:100%;height:100%;object-fit:cover;opacity:.95}
.n26-final-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,26,54,.94) 0%,rgba(2,26,54,.72) 42%,rgba(2,26,54,.5) 100%)}
.n26-final-in{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:34px}
.n26-final h2{color:#fff;font-size:clamp(1.75rem,3vw,2.5rem)}
.n26-final p{margin-top:14px;color:rgba(255,255,255,.8);font-size:1.05rem}
.n26-final-actions{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- footer ---------- */
.n26-footer{background:var(--n26-navy-900);color:rgba(255,255,255,.72);padding:72px 0 0;font-size:15px}
.n26-footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px;padding-bottom:52px}
.n26-footer h3{color:#fff;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;font-family:var(--n26-font-body)}
.n26-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.n26-footer a{color:rgba(255,255,255,.72)}
.n26-footer a:hover{color:#fff}
.n26-footer-logo{width:200px;height:auto;margin-bottom:20px}
.n26-footer-brand p{max-width:38ch;line-height:1.6}
.n26-news{margin-top:24px}
.n26-news form{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.n26-news input{
  flex:1;min-width:180px;padding:13px 16px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);color:#fff;font-family:var(--n26-font-body);font-size:15px;
}
.n26-news input::placeholder{color:rgba(255,255,255,.5)}
.n26-news input:focus{border-color:var(--n26-blue-400);outline:none;background:rgba(255,255,255,.12)}
.n26-socials{display:flex;gap:10px;margin-top:24px}
.n26-socials a{
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.09);display:grid;place-items:center;
  color:#fff;transition:.18s;
}
.n26-socials a:hover{background:var(--n26-blue-600);transform:translateY(-2px)}
.n26-footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding:24px 0;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:14px;font-size:13.8px;
}
.n26-footer-bottom ul{flex-direction:row;gap:22px}
@media (max-width:900px){.n26-footer-top{grid-template-columns:1fr 1fr;gap:36px}.n26-footer-brand{grid-column:1/-1}}
@media (max-width:560px){.n26-footer-top{grid-template-columns:1fr}}

/* ---------- reveal ----------
   Intentionally a no-op. An earlier version hid every .n26-rv section at
   opacity:0 and revealed it on scroll. That made content conditional on
   JavaScript and on scroll events firing correctly — when either failed, whole
   sections rendered blank. Nothing on this site should be invisible by default,
   so the class is kept as a hook but has no visual effect. */

@media (prefers-reduced-motion:reduce){
  .n26-btn:hover,.n26-cause:hover,.n26-path:hover,.n26-rung:hover{transform:none}
  .n26-cause:hover .n26-cause-media img{transform:none}
  .n26-drawer-panel{animation:none}
}

/* ---------- aside panels (shared) ----------
   Used by the form pages, the login page, the donate page and the cause
   template. They live here, not in form-2026.css, because the donate and
   cause pages do not load that stylesheet — when these rules sat there, the
   numbered steps on every cause page rendered as bare digits. */
.n26-apanel{
  background:var(--n26-surface);border:1px solid var(--n26-line);
  border-radius:var(--n26-r-lg);padding:26px;
}
.n26-apanel.n26-apanel-navy{background:var(--n26-navy-800);border-color:transparent;color:#fff}
.n26-apanel.n26-apanel-navy h2{color:#fff}
.n26-apanel.n26-apanel-navy p,
.n26-apanel.n26-apanel-navy li{color:rgba(255,255,255,.82)}
.n26-apanel.n26-apanel-navy .n26-astep-n{background:rgba(255,255,255,.14);color:#fff}
.n26-apanel h2{font-size:1.08rem;font-weight:600;margin-bottom:14px}
.n26-apanel p{font-size:14.8px;color:var(--n26-ink-soft)}
.n26-apanel p + p{margin-top:10px}

.n26-asteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.n26-asteps li{display:grid;grid-template-columns:auto 1fr;gap:13px;font-size:14.6px;color:var(--n26-ink-soft)}
.n26-astep-n{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--n26-blue-50);color:var(--n26-blue-600);
  font-family:var(--n26-font-display);font-weight:600;font-size:13px;
}
.n26-alist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.n26-alist li{display:grid;grid-template-columns:auto 1fr;gap:11px;font-size:14.6px;color:var(--n26-ink-soft)}
.n26-alist .n26-ico{color:var(--n26-blue-500);flex:none;margin-top:2px}
.n26-apanel .n26-btn{margin-top:18px;width:100%}

/* On phones a long button label must wrap rather than force the page wider:
   .n26-btn is white-space:nowrap, and "Give where it's needed most" was 326px
   on a 320px screen, which no container could shrink below. */
@media (max-width:560px){
  .n26-btn{white-space:normal}
}