/* ═══════════════════════════════════════════════════════════════════
 * MANOPY — polish.css
 * Site-wide refinement layer loaded from includes/head.php.
 * Adds corporate-grade finish (focus states, hover states, brand
 * spectrum accents, responsive footer, reduced motion) WITHOUT
 * changing the existing palette, fonts, or layout system.
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Corporate type discipline ───
 * Headlines step down from 900 → 800 with tighter tracking;
 * reads as confident rather than loud. Applies on every page
 * that uses the shared .section-title / .section-sub classes. */
.section-title {
  font-weight: 800 !important;
  letter-spacing: -0.028em !important;
}
.section-sub {
  font-weight: 400 !important;
}

/* ─── Brand spectrum — the signature device ───
 * A thin 5-colour gradient drawn from the wordmark letters.
 * Used as a hairline accent on the nav and footer so every page
 * carries the brand even where the wordmark isn't visible. */
:root {
  --brand-spectrum: linear-gradient(90deg,
    #E07008 0%, #E03080 28%, #6028C0 52%, #8030B8 76%, #2452D0 100%);
}

#mainNav::after,
nav.cs-nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--brand-spectrum);
  opacity: 0.85;
  pointer-events: none;
}
#mainNav, nav.cs-nav { isolation: isolate; }

footer.site-footer {
  position: relative;
}
footer.site-footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--brand-spectrum);
}

/* ─── Selection + focus (accessibility with brand character) ─── */
::selection {
  background: rgba(224, 112, 8, 0.22);
  color: #18160E;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #E07008;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ─── Nav link micro-interaction ───
 * Mono nav links get a sliding underline in ink — quiet, precise. */
.nav-links > a {
  position: relative;
}
.nav-links > a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links > a:hover::after,
.nav-links > a.active::after {
  transform: scaleX(1);
}

/* ─── Footer: hover states + responsive grid ───
 * The footer declares transitions inline but never had hover rules,
 * and its 4-column grid had no mobile breakpoint. */
footer a:hover {
  color: rgba(255, 255, 255, 0.95) !important;
}
footer .nav-logo:hover { opacity: 0.9; }
footer a[aria-label]:hover {
  border-color: rgba(255, 255, 255, 0.45) !important;
  transform: translateY(-2px);
}



/* ─── Section labels: editorial tick ───
 * Mono uppercase labels gain a short brand-coloured rule, the way
 * annual-report eyebrows are set. Encodes "a new chapter starts". */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1.5px;
  background: #E07008;
  flex-shrink: 0;
}

/* ─── Images: graceful loading ─── */
img {
  max-width: 100%;
  height: auto;
}

/* ─── Subtle scrollbar (WebKit) ─── */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #FAFAF8; }
::-webkit-scrollbar-thumb {
  background: rgba(24, 22, 14, 0.18);
  border-radius: 100px;
  border: 2px solid #FAFAF8;
}
::-webkit-scrollbar-thumb:hover { background: rgba(24, 22, 14, 0.32); }

/* ─── Respect reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}