/* IPN 1.12 · Header kit shared by the welcome page, the IPN site header and the member area (identical copies in site.d / account.d —
   edit one, copy to the other). Three pieces, documented for the contest site in /home/claude/dev/R4-SHARED.md:
   1. the nav item   <a class="hdr__link"><i class="nv nv--key">glyph</i><span>label</span></a>   (coloured icon chip + Barlow/Vazir label)
   2. the icon button <a class="hdr__icon" data-mode-toggle>glyph(sun|moon)</a>                    (day/night, home, …; --onimage on pictures)
   3. the chip colours per section. The classic site's extras.css relies on these rules too. */
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(../../themes/classic/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }

/* ---- 1. nav item ---- */
.hdr__link { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 13px; color: var(--text-2, var(--ink-2, inherit)); font: 700 15px/1 var(--font, "Vazirmatn", system-ui, sans-serif); letter-spacing: .02em; text-decoration: none; transition: color .2s; }
html[dir="ltr"] .hdr__link { font-family: "Barlow Condensed", var(--font, system-ui, sans-serif); font-size: 18px; letter-spacing: .05em; text-transform: uppercase; }
.hdr__link::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--red, var(--accent, #E11D2E)); transform: scaleX(0); transition: transform .25s var(--ease, cubic-bezier(.2,.8,.2,1)); }
.hdr__link:hover, .hdr__link.is-active { color: var(--text, var(--ink, inherit)); }
.hdr__link.is-active::after, .hdr__link:hover::after { transform: scaleX(1); }

/* ---- the coloured icon chip: lifts and tilts on hover, fills when active ---- */
.nv { --nv: #2563EB; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font-style: normal;
  color: var(--nv); background: color-mix(in srgb, var(--nv) 13%, transparent);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1), background-color .25s, color .25s, box-shadow .3s; }
.nv .ic { width: 16px; height: 16px; }
.nv--tv { --nv: #2563EB; }
.nv--live { --nv: #E11D48; }
.nv--videos { --nv: #F43F5E; }
.nv--shows { --nv: #8B5CF6; }
.nv--channels { --nv: #0EA5E9; }
.nv--schedule { --nv: #F59E0B; }
.nv--events, .nv--event { --nv: #F5B700; }
.nv--sh { --nv: #EC4899; }
.nv--contact { --nv: #22C55E; }
.nv--install { --nv: #22C55E; }
.nv--home { --nv: #2563EB; }
html[data-mode="dark"] .nv { background: color-mix(in srgb, var(--nv) 22%, transparent); color: color-mix(in srgb, var(--nv) 70%, #fff); }
.hdr__link:hover .nv, .drawer__nav a:hover .nv, .ld-nav a:hover .nv { transform: translateY(-2px) rotate(-8deg) scale(1.08); }
.hdr__link:hover .nv .ic, .drawer__nav a:hover .nv .ic, .ld-nav a:hover .nv .ic { animation: nv-pop .5s ease; }
.hdr__link.is-active .nv, .drawer__nav a.is-active .nv, .ld-nav a.is-active .nv { color: #fff; background: linear-gradient(135deg, var(--nv), color-mix(in srgb, var(--nv) 65%, #000)); box-shadow: 0 6px 16px -6px var(--nv); }
.drawer__nav .nv { width: 34px; height: 34px; border-radius: 11px; }
.drawer__nav .nv .ic { width: 19px; height: 19px; }
@keyframes nv-pop { 0% { transform: scale(1); } 40% { transform: scale(.82); } 75% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (min-width: 1025px) and (max-width: 1320px) { .hdr__link .nv { display: none; } }   /* 1.14 · room for the avatar cell + the round cross-site button */

/* ---- 2. round icon button (day/night toggle, home, close …) ---- */
.hdr__icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--text-2, var(--ink-2, inherit)); cursor: pointer; text-decoration: none; transition: background .2s, color .2s; }
.hdr__icon:hover { background: var(--surface-2, var(--sunk, rgba(127,127,127,.15))); color: var(--text, var(--ink, inherit)); }
.hdr__icon .ic { width: 20px; height: 20px; }
.hdr__icon[data-mode-toggle] .ic { transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.hdr__icon[data-mode-toggle]:hover .ic { transform: rotate(20deg) scale(1.1); }
/* on a picture (welcome page top bar) */
.hdr__icon--onimage { background: rgba(255,255,255,.12); color: #fff; }
.hdr__icon--onimage:hover { background: rgba(255,255,255,.22); color: #fff; }
.hdr__icon--onimage .ic { width: 19px; height: 19px; }

@media (prefers-reduced-motion: reduce) { .nv, .hdr__icon .ic { transition: none !important; } .nv .ic { animation: none !important; } }