/*
Theme Name: NursePathway
Theme URI: https://nursepathway.org/
Author: NursePathway
Author URI: https://nursepathway.org/
Description: A lightweight, Astra-compatible custom theme for NursePathway.org — a free, nurse-reviewed NCLEX & NGN preparation platform. Ships the full application engine (CPTs, custom tables, REST API, Gutenberg blocks) inside the theme so the packaged zip is launch-ready on activation. WCAG 2.2-targeted, performance-first, no third-party page builders.
Version: 1.0.17
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nursepathway
Tags: education, custom-colors, custom-menu, featured-images, translation-ready, accessibility-ready
*/

/* ==========================================================================
   NURSEPATHWAY DESIGN TOKENS  (Phase 3a — verified WCAG 2.2 palette)
   These :root custom properties are the single source of truth consumed by
   every component and block. Brand colors are preserved exactly as specified;
   the -700 variants are the audited AAA/AA corrections (blue-700 for body
   links, teal-700 for filled CTAs).
   ========================================================================== */
:root {
  /* ---- Brand raw (as specified in the brief) ---- */
  --np-navy:           #0B1F3A;  /* Primary */
  --np-blue:           #1D5C96;  /* Secondary / brand blue */
  --np-teal:           #00A6A6;  /* Accent — NON-text use: borders, icons, focus, large */
  --np-gold:           #F5B942;  /* Accent — background-only, paired with dark text */
  --np-surface:        #F7FAFC;  /* Canvas */
  --np-ink:            #1F2937;  /* Text neutral */

  /* ---- Compliant derived variants (the audit fixes) ---- */
  --np-navy-800:       #0F2A4A;
  --np-blue-700:       #1A5488;  /* AAA links/text on light (7.9:1) */
  --np-blue-100:       #E7F0F8;
  --np-teal-700:       #006062;  /* AAA filled CTA bg w/ white (7.4:1) */
  --np-teal-100:       #D6F2F2;
  --np-gold-100:       #FDF1D6;

  /* ---- Neutrals ramp ---- */
  --np-white:          #FFFFFF;
  --np-gray-50:        #F7FAFC;
  --np-gray-100:       #EDF1F5;
  --np-gray-200:       #DCE2E9;
  --np-gray-300:       #C2CBD6;
  --np-gray-500:       #6B7686;
  --np-gray-600:       #4B5563;
  --np-ink-900:        #111827;

  /* ---- Status / semantic (always paired with icon + label) ---- */
  --np-success:        #157347;
  --np-success-800:    #0F5132;
  --np-success-50:     #E6F4EC;
  --np-error:          #B42318;
  --np-error-50:       #FBEAE8;
  --np-warning:        #B25E09;
  --np-warning-50:     #FCF1E2;
  --np-info:           #1A5488;
  --np-info-50:        #E7F0F8;

  /* ---- Semantic mapping (components use THESE, not the raw values) ---- */
  --np-text:           var(--np-ink);
  --np-text-strong:    var(--np-ink-900);
  --np-text-muted:     var(--np-gray-600);
  --np-text-inverse:   var(--np-white);
  --np-bg-canvas:      var(--np-surface);
  --np-bg-surface:     var(--np-white);
  --np-bg-elevated:    var(--np-white);
  --np-bg-dark:        var(--np-navy);
  --np-border:         var(--np-gray-200);
  --np-border-strong:  var(--np-gray-300);
  --np-link:           var(--np-blue-700);
  --np-link-hover:     var(--np-navy);
  --np-action:         var(--np-teal-700);
  --np-action-hover:   #004F50;
  --np-action-text:    var(--np-white);
  --np-accent:         var(--np-teal);
  --np-highlight-bg:   var(--np-gold-100);

  /* ---- Typography ---- */
  --np-font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --np-font-body:    "Source Sans 3", system-ui, -apple-system, sans-serif;
  --np-font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --np-fw-regular: 400;
  --np-fw-medium: 500;
  --np-fw-semibold: 600;
  --np-fw-bold: 700;

  --np-text-xs:   0.75rem;
  --np-text-sm:   0.875rem;
  --np-text-base: 1rem;
  --np-text-md:   1.125rem;
  --np-text-lg:   1.25rem;
  --np-text-xl:   1.5rem;
  --np-text-2xl:  1.875rem;
  --np-text-3xl:  2.25rem;
  --np-text-4xl:  3rem;
  --np-text-5xl:  3.75rem;

  --np-lh-tight: 1.2;
  --np-lh-snug:  1.4;
  --np-lh-body:  1.65;

  /* ---- Spacing (4px base) ---- */
  --np-space-1: 4px;  --np-space-2: 8px;  --np-space-3: 12px; --np-space-4: 16px;
  --np-space-5: 24px; --np-space-6: 32px; --np-space-8: 48px; --np-space-10: 64px;
  --np-space-12: 96px;

  /* ---- Radii ---- */
  --np-radius-sm: 4px; --np-radius-md: 8px; --np-radius-lg: 12px;
  --np-radius-xl: 16px; --np-radius-full: 9999px;

  /* ---- Elevation (restrained, clinical) ---- */
  --np-shadow-sm: 0 1px 2px rgba(11,31,58,.06);
  --np-shadow-md: 0 4px 12px rgba(11,31,58,.08);
  --np-shadow-lg: 0 12px 28px rgba(11,31,58,.12);

  /* ---- Motion ---- */
  --np-dur-fast: 120ms; --np-dur-base: 200ms; --np-dur-slow: 320ms;
  --np-ease: cubic-bezier(.2,.8,.2,1);

  /* ---- Z-index scale ---- */
  --np-z-base: 0; --np-z-sticky: 100; --np-z-header: 200;
  --np-z-dropdown: 300; --np-z-overlay: 400; --np-z-modal: 500; --np-z-toast: 600;

  /* ---- Containers ---- */
  --np-container-content: 720px;
  --np-container-wide: 1200px;
  --np-container-full: 1440px;

  /* ---- Focus (Phase 3a — layered ring, WCAG 2.2 SC 2.4.11/2.4.13) ---- */
  --np-focus-on-light: var(--np-blue-700);
  --np-focus-on-dark:  var(--np-gold);
}

/* ==========================================================================
   RESET / NORMALIZE (minimal, modern)
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--np-font-body);
  font-size: var(--np-text-base);
  line-height: var(--np-lh-body);
  color: var(--np-text);
  background: var(--np-bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 var(--np-space-4); padding-left: var(--np-space-5); }
p { margin: 0 0 var(--np-space-4); }
a { color: var(--np-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--np-link-hover); }
button { font: inherit; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

/* ==========================================================================
   TYPOGRAPHY (Phase 3a scale — Inter for display/UI, Source Sans for prose)
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--np-font-display);
  color: var(--np-text-strong);
  line-height: var(--np-lh-tight);
  margin: 0 0 var(--np-space-4);
  font-weight: var(--np-fw-semibold);
}
h1 { font-size: var(--np-text-3xl); letter-spacing: 0; }
h2 { font-size: var(--np-text-2xl); letter-spacing: 0; margin-top: var(--np-space-8); }
h3 { font-size: var(--np-text-xl);  letter-spacing: 0;  margin-top: var(--np-space-6); }
h4 { font-size: var(--np-text-lg);  letter-spacing: 0; }

.np-lead { font-size: var(--np-text-md); line-height: var(--np-lh-snug); color: var(--np-text); }
.np-muted { color: var(--np-text-muted); font-size: var(--np-text-sm); }
.np-tabular { font-variant-numeric: tabular-nums lining-nums; }
code, kbd, .np-mono { font-family: var(--np-font-mono); font-size: 0.9em; }

/* Long-form reading column — capped measure for study-guide readability */
.np-prose { max-width: 72ch; }
.np-prose h2, .np-prose h3 { scroll-margin-top: 88px; } /* clear the sticky header on anchor jump (SC 2.4.11) */

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
.np-container { width: 100%; max-width: var(--np-container-wide); margin-inline: auto; padding-inline: var(--np-space-5); }
.np-container--content { max-width: var(--np-container-content); }
.np-container--full { max-width: var(--np-container-full); }
.np-section { padding-block: var(--np-space-8); }
.np-grid { display: grid; gap: var(--np-space-5); }
.np-stack > * + * { margin-top: var(--np-space-4); }
.np-on-dark { color: var(--np-text-inverse); }
.np-on-dark a { color: var(--np-white); }

/* Skip link — visible on focus (a11y baseline) */
.np-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--np-z-toast);
  background: var(--np-navy); color: var(--np-white);
  padding: var(--np-space-3) var(--np-space-4); border-radius: 0 0 var(--np-radius-md) 0;
}
.np-skip-link:focus { left: 0; }

/* ==========================================================================
   FOCUS RINGS  (Phase 3a — layered, WCAG 2.2; never removed without replacement)
   ========================================================================== */
:where(a, button, input, select, textarea, [tabindex], summary):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--np-bg-surface), 0 0 0 4px var(--np-focus-on-light);
  border-radius: var(--np-radius-sm);
}
.np-on-dark :where(a, button, input, select, [tabindex]):focus-visible {
  box-shadow: 0 0 0 2px var(--np-navy), 0 0 0 4px var(--np-focus-on-dark);
}

/* ==========================================================================
   BUTTONS  (the single teal CTA = the practice-engine action)
   ========================================================================== */
.np-btn {
  display: inline-flex; align-items: center; gap: var(--np-space-2);
  font-family: var(--np-font-display); font-weight: var(--np-fw-semibold);
  font-size: var(--np-text-base); line-height: 1;
  padding: var(--np-space-3) var(--np-space-5);
  border: 1px solid transparent; border-radius: var(--np-radius-md);
  text-decoration: none; min-height: 44px; /* SC 2.5.8 target size */
  transition: background var(--np-dur-base) var(--np-ease), color var(--np-dur-base) var(--np-ease);
}
.np-btn--primary { background: var(--np-action); color: var(--np-action-text); }
.np-btn--primary:hover { background: var(--np-action-hover); color: var(--np-action-text); }
.np-btn--secondary { background: transparent; color: var(--np-blue-700); border-color: var(--np-border-strong); }
.np-btn--secondary:hover { background: var(--np-blue-100); color: var(--np-navy); }
.np-btn--on-dark { background: var(--np-action); color: var(--np-white); }
.np-btn--on-dark:hover { background: var(--np-action-hover); }

/* ==========================================================================
   CARDS / SURFACES
   ========================================================================== */
.np-card {
  background: var(--np-bg-surface); border: 1px solid var(--np-border);
  border-radius: var(--np-radius-lg); box-shadow: var(--np-shadow-sm);
  padding: var(--np-space-5);
}
.np-quick-facts {
  background: var(--np-bg-surface); border: 1px solid var(--np-border);
  border-left: 4px solid var(--np-teal); border-radius: var(--np-radius-md);
  padding: var(--np-space-4) var(--np-space-5); margin-block: var(--np-space-5);
}
.np-quick-facts dt { font-weight: var(--np-fw-semibold); color: var(--np-text-muted); font-size: var(--np-text-sm); }
.np-quick-facts dd { margin: 0 0 var(--np-space-3); }

/* ==========================================================================
   STATUS HELPERS (color + icon + label — never color alone, SC 1.4.1)
   ========================================================================== */
.np-status { display: inline-flex; align-items: center; gap: var(--np-space-2); font-weight: var(--np-fw-semibold); }
.np-status--ok   { color: var(--np-success-800); }
.np-status--err  { color: var(--np-error); }
.np-status--warn { color: var(--np-warning); }

/* ==========================================================================
   REDUCED MOTION  (quality floor)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   RESPONSIVE TYPE — hero display steps up on larger screens
   ========================================================================== */
@media (min-width: 768px) {
  h1 { font-size: var(--np-text-4xl); }
}
@media (min-width: 1024px) {
  .np-hero h1 { font-size: var(--np-text-5xl); }
}