/* ============================================
   AI School - Global Styles
   W3Schools-inspired modern learning platform
   ============================================ */

/* ---------- Self-hosted fonts ----------
   Inter and JetBrains Mono are served from this site (ai-school/fonts/)
   instead of fonts.googleapis.com. This removes the cross-domain font
   dependency (no Subresource-Integrity / third-party inclusion findings)
   and keeps the same look. Both are variable fonts covering the weight
   ranges the pages use (Inter 300-900, JetBrains Mono 400-600). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-variable.woff2') format('woff2');
}

/* ---------- CSS Variables / Theme ---------- */
/* Default is dark (AI School default). JS sets data-theme="light" on corporate pages. */
:root {
  --primary: #6C63FF;
  --primary-dark: #5A52D5;
  --primary-light: #8B85FF;
  --secondary: #FF6584;
  --accent: #43E97B;
  --bg: #13131A;
  --bg-card: #1E1E2F;
  --bg-sidebar: #13131A;
  --bg-sidebar-hover: #1E1E2F;
  --bg-code: #1E1E2F;
  --text: #E4E4E7;
  --text-light: #9CA3AF;
  --text-sidebar: #C5C6D0;
  --text-sidebar-active: #FFFFFF;
  --border: #2A2A3C;
  --shadow: 0 2px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
  --radius: 12px;
  --radius-sm: 8px;
  --transition: 0.25s cubic-bezier(.4,0,.2,1);
  --header-height: 64px;
  --sidebar-width: 280px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

[data-theme="dark"] {
  --bg: #13131A;
  --bg-card: #1E1E2F;
  --bg-sidebar: #13131A;
  --bg-sidebar-hover: #1E1E2F;
  --text: #E4E4E7;
  --text-light: #9CA3AF;
  --border: #2A2A3C;
  --shadow: 0 2px 12px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
}

[data-theme="light"] {
  --bg: #F7F8FC;
  --bg-card: #FFFFFF;
  --bg-sidebar: #1E1E2F;
  --bg-sidebar-hover: #2A2A40;
  --text: #2D2D3A;
  --text-light: #4B5563;
  --border: #E5E7EB;
  --shadow: 0 2px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.10);
  /* Dark-theme --primary-light (#8B85FF) is only 3.05:1 on white — fails WCAG AA.
     Reuse --primary-dark (already 5.8:1+ on white, used for the generic `a` rule above). */
  --primary-light: var(--primary-dark);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--primary-light); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary); }
/* In-body prose links must be distinguishable by more than color alone (WCAG 1.4.1). */
.content p a, .content li a, .info-box a { text-decoration: underline; text-underline-offset: 2px; }
[data-theme="light"] a { color: var(--primary-dark); }
[data-theme="light"] a:hover { color: var(--primary); }
/* Header brand link: keep dark text in light mode, not purple from the generic a rule */
[data-theme="light"] .header-brand { color: var(--text); }
/* Preserve white text on filled buttons/nav — generic a rule above would otherwise override it */
[data-theme="light"] a.btn-primary,
[data-theme="light"] a.btn-primary:hover { color: #fff; }
[data-theme="light"] .header-nav a.active,
[data-theme="light"] .header-nav a:hover { color: #fff; }
[data-theme="light"] .header-nav a.nav-new { color: var(--primary-dark); background: rgba(90,82,213,0.08); box-shadow: inset 0 0 0 1px rgba(90,82,213,0.4); }
[data-theme="light"] .header-nav a.nav-new.active,
[data-theme="light"] .header-nav a.nav-new:hover { color: #fff; background: var(--primary-dark); box-shadow: none; }
/* <a>-element cards/buttons: specificity (0,1,0) loses to [data-theme="light"] a (0,1,1).
   Boost with [data-theme] prefix so their color: var(--text) intent is respected. */
[data-theme="light"] .product-card,
[data-theme="light"] .product-card:hover { color: var(--text); }
[data-theme="light"] .btn-outline,
[data-theme="light"] .btn-outline:hover { color: var(--text); }

img, video, iframe, embed, object { max-width: 100%; height: auto; }

/* Safe area for notched devices (iPhone X+, etc.) */
@supports (padding: env(safe-area-inset-bottom)) {
  .top-header { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  .main-content { padding-bottom: max(60px, env(safe-area-inset-bottom)); }
  .footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 3px; }

/* ---------- Top Header / Navbar ---------- */
.top-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  z-index: 1000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 100vw;
  overflow: visible;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.header-brand .brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 0;
  display: inline-block;
  object-fit: contain;
  vertical-align: middle;
}

.header-nav-wrapper {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  margin-left: 32px;
  position: relative;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 1;
  min-width: 0;
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
}

.nav-scroll-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--text-light);
  transition: all var(--transition);
  margin-left: 4px;
}

.nav-scroll-btn:hover {
  background: var(--primary-dark);
  color: #fff;
  border-color: var(--primary-dark);
}

.nav-scroll-btn.hidden {
  display: none;
}

.header-nav::-webkit-scrollbar { display: none; }

.header-nav a {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  color: var(--text-light);
  font-weight: 500;
  font-size: 0.9rem;
  transition: all var(--transition);
  white-space: nowrap;
}

.header-nav a:hover,
.header-nav a.active {
  background: var(--primary-dark);
  color: #fff;
}

.header-nav a.nav-new {
  background: rgba(108, 99, 255, 0.15);
  color: var(--primary-light);
  box-shadow: inset 0 0 0 1px rgba(108, 99, 255, 0.4);
}
.header-nav a.nav-new.active,
.header-nav a.nav-new:hover {
  background: var(--primary-dark);
  color: #fff;
  box-shadow: none;
}

/* Nav items that lead into the paid AI School Certification product */
.header-nav a.nav-premium {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.header-nav a .premium-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 50px;
  background: rgba(214, 158, 46, 0.18);
  color: #F0B429;
  box-shadow: inset 0 0 0 1px rgba(214, 158, 46, 0.45);
}
.header-nav a.nav-premium:hover .premium-pill,
.header-nav a.nav-premium.active .premium-pill {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: none;
}

/* "AI School" nav button: logo mark next to the label, like a real brand mark.
   .header-nav a is inline-flex/align-items:center (above), so the icon is
   centered on the row without relying on vertical-align (which pushed it
   into .header-nav's overflow-y:hidden clip on this scrolling nav strip). */
.header-nav a .nav-logo-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-right: 6px;
  flex-shrink: 0;
  border-radius: 50%;
}

/* The mark's linework is dark (near-black), so it nearly disappears on the
   dark theme's navy header (thin lines + dark background = poor contrast).
   A light circular backplate keeps the actual brand colors (not just an
   inverted silhouette) while giving it enough contrast to read. Light theme
   already has a light header background, so it doesn't need this. */
[data-theme="dark"] .header-nav a .nav-logo-icon {
  background: rgba(255, 255, 255, 0.92);
  padding: 3px;
  box-sizing: content-box;
  width: 18px;
  height: 18px;
}

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--text-light);
  transition: all var(--transition);
}

.theme-toggle:hover { background: var(--border); color: var(--text); }

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1.3rem;
  color: var(--text);
  align-items: center;
  justify-content: center;
}

.search-box {
  position: relative;
  margin-right: 8px;
  z-index: 1001;
}

.search-box input {
  width: 220px;
  padding: 8px 12px 8px 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  font-family: var(--font);
  transition: all var(--transition);
}

.search-box input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(108,99,255,0.15);
  width: 280px;
}

.search-box .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  font-size: 0.85rem;
}

/* ---------- Layout ---------- */
.page-wrapper {
  display: flex;
  margin-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
  max-width: 100vw;
  overflow-x: hidden;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  position: fixed;
  top: var(--header-height);
  left: 0;
  bottom: 0;
  overflow-y: auto;
  padding: 16px 0;
  z-index: 900;
  transition: transform var(--transition);
}

.sidebar-section {
  padding: 0 12px;
  margin-bottom: 8px;
}

.sidebar-section-title {
  padding: 8px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--primary-light);
}

.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: var(--text-sidebar);
  font-size: 0.88rem;
  border-radius: var(--radius-sm);
  margin: 1px 8px;
  transition: all var(--transition);
  font-weight: 400;
}

.sidebar a:hover {
  background: var(--bg-sidebar-hover);
  color: var(--text-sidebar-active);
}

.sidebar a.active {
  background: var(--primary-dark);
  color: #fff;
  font-weight: 600;
}

.sidebar a .nav-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar a .nav-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar a.active .nav-number {
  background: rgba(255,255,255,0.25);
}

.sidebar-progress {
  margin: 12px 20px;
  padding: 12px;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
}

.sidebar-progress .progress-label {
  font-size: 0.75rem;
  color: var(--text-sidebar);
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}

.progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* ---------- Main Content ---------- */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  padding: 40px 48px 80px;
  max-width: 900px;
  overflow-x: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.main-content.no-sidebar {
  margin-left: 0;
  max-width: 100%;
  padding: 0;
  overflow-x: hidden;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb, .breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 24px;
}

.breadcrumb a, .breadcrumbs a { color: var(--text-light); }
.breadcrumb a:hover, .breadcrumbs a:hover { color: var(--primary); }
.breadcrumb .sep, .breadcrumbs .sep { color: var(--text-light); }

/* ---------- Typography ---------- */
.content h1 {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 48px;
  margin-bottom: 16px;
  color: var(--text);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--border);
}

.content h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 32px;
  margin-bottom: 12px;
  color: var(--text);
}

.content p {
  margin-bottom: 16px;
  color: var(--text);
}

.content .subtitle {
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: 32px;
  line-height: 1.6;
}

.content ul, .content ol {
  margin-bottom: 16px;
  padding-left: 24px;
}

.content li {
  margin-bottom: 8px;
}

.content strong {
  font-weight: 600;
}

/* ---------- Code Blocks ---------- */
.code-block {
  background: var(--bg-code);
  border-radius: var(--radius);
  margin: 20px 0;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.code-header .code-lang {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--primary-light);
}

.code-header .copy-btn {
  padding: 4px 12px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #aaa;
  font-size: 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font);
  transition: all var(--transition);
}

.code-header .copy-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.code-block pre {
  padding: 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.7;
  color: #E4E4E7;
}

.code-block code {
  font-family: var(--font-mono);
}

/* Inline code — default dark */
.content code:not(.code-block code) {
  background: rgba(108,99,255,0.2);
  color: var(--primary-light);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.88em;
  font-family: var(--font-mono);
}

[data-theme="light"] .content code:not(.code-block code) {
  background: rgba(108,99,255,0.1);
  color: var(--primary-dark);
}

/* ---------- Info / Tip / Warning Boxes ---------- */
.info-box {
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  margin: 20px 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.92rem;
}

.info-box .box-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.info-box.tip {
  background: rgba(67,233,123,0.08);
  border-left: 4px solid var(--accent);
  color: var(--text);
}

.info-box.note {
  background: rgba(108,99,255,0.08);
  border-left: 4px solid var(--primary);
  color: var(--text);
}

.info-box.warning {
  background: rgba(255,101,132,0.08);
  border-left: 4px solid var(--secondary);
  color: var(--text);
}

.info-box.example {
  background: rgba(255,183,77,0.08);
  border-left: 4px solid #FFB74D;
  color: var(--text);
}

/* ---------- Try It Box ---------- */
.try-it-box {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin: 24px 0;
  box-shadow: var(--shadow);
}

.try-it-box h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-light);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.try-it-box textarea {
  width: 100%;
  min-height: 120px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  resize: vertical;
  line-height: 1.6;
  transition: border-color var(--transition);
}

.try-it-box textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(108,99,255,0.12);
}

.try-it-box .output-area {
  margin-top: 12px;
  padding: 14px;
  background: var(--bg-code);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: #E4E4E7;
  min-height: 60px;
  white-space: pre-wrap;
}

/* ---------- Cards Grid ---------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 24px 0;
}

.card {
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  transition: all var(--transition);
  text-decoration: none;
  color: var(--text);
  display: block;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
  color: var(--text);
}

.card .card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 16px;
}

/* difficulty/“New” pill sits directly above the icon on lesson/course cards —
   give it breathing room so it doesn't look glued to the icon box */
.card .tag {
  margin-bottom: 10px;
}

.card .card-icon.purple { background: rgba(108,99,255,0.12); color: var(--primary); }
.card .card-icon.pink { background: rgba(255,101,132,0.12); color: var(--secondary); }
.card .card-icon.green { background: rgba(67,233,123,0.12); color: #2ECC71; }
.card .card-icon.orange { background: rgba(255,183,77,0.12); color: #FF9800; }
.card .card-icon.blue { background: rgba(33,150,243,0.12); color: #2196F3; }

.card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
  margin-top: 0;
  color: var(--text);
}

.card p {
  font-size: 0.88rem;
  color: var(--text-light);
  margin: 0;
  line-height: 1.5;
}

.card .card-arrow {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--primary-light);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Affiliate resource section (and any other always-light-bg panel via .light-panel) —
   needs explicit dark text regardless of site theme.
   background-color is declared here so accessibility scanners (axe-core, Lighthouse) can
   resolve contrast correctly — they cannot compute contrast against CSS gradient backgrounds
   and fall back to the body's dark bg, making the dark h2 text appear to fail.
   The gradient inline style still renders visually; this solid color is the a11y fallback.
   Double-class selector beats .features-section h2 (same element, higher specificity). */
.affiliate-resources,
.light-panel {
  background-color: #eef2ff !important;
}
.affiliate-resources.features-section h2,
.affiliate-resources h2,
.light-panel.features-section h2,
.light-panel h2 {
  color: #1e293b !important;
}
.affiliate-resources.features-section .section-subtitle,
.affiliate-resources .section-subtitle,
.light-panel.features-section .section-subtitle,
.light-panel .section-subtitle {
  color: #475569 !important;
}
.affiliate-resources .section-subtitle a,
.light-panel .section-subtitle a {
  color: #0369a1; /* sky-700: 4.8:1 on the section's light gradient bg, passes WCAG AA */
}
.affiliate-resources .cards-grid,
.light-panel .cards-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 24px auto;
  max-width: 1100px;
}
.affiliate-resources .card,
.light-panel .card {
  max-width: 340px;
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}
.affiliate-resources .card h3,
.light-panel .card h3 {
  color: #1e293b !important;
}
.affiliate-resources .card p,
.affiliate-resources .card .card-tag,
.light-panel .card p,
.light-panel .card .card-tag {
  color: #475569 !important;
}
/* Card icon emoji text on the forced-white (#fff) card background: the default
   icon colors are designed for dark card backgrounds and fail WCAG AA on white.
   Override with accessible equivalents (≥4.5:1 on #ffffff) in both themes. */
.affiliate-resources .card .card-icon.orange,
.light-panel .card .card-icon.orange { color: #B45309; } /* amber-700: 4.6:1 on white */
.affiliate-resources .card .card-icon.blue,
.light-panel .card .card-icon.blue   { color: #1D4ED8; } /* blue-700:  6.0:1 on white */
.affiliate-resources .card .card-icon.purple,
.light-panel .card .card-icon.purple { color: #4338CA; } /* indigo-700: 7.0:1 on white */
.affiliate-resources .card .card-icon.green,
.light-panel .card .card-icon.green  { color: #15803D; } /* green-700: 4.6:1 on white */

/* ---------- Navigation Buttons (Prev/Next) ---------- */
.page-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  gap: 16px;
}

.page-nav a {
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  min-width: 180px;
  text-decoration: none;
}

.page-nav a:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.page-nav a .nav-label {
  font-size: 0.75rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 4px;
}

.page-nav a .nav-title {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 600;
}

.page-nav .next { text-align: right; margin-left: auto; }

/* ---------- Tables ---------- */
.content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.9rem;
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.content th {
  background: var(--bg-sidebar);
  color: #fff;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.content td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.content tr:last-child td { border-bottom: none; }
.content tr:hover td { background: rgba(108,99,255,0.03); }

/* ---------- Hero Section (Home) ---------- */
.hero {
  text-align: center;
  /* top padding kept small: the injected .hero-logo already carries ~23px of
     transparent space at the top of the artwork, so a large value here reads
     as an empty gap under the header. */
  padding: 24px 24px 60px;
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--primary), var(--secondary), var(--primary-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  font-size: 1.2rem;
  color: var(--text-light);
  max-width: 600px;
  margin: 0 auto 36px;
  line-height: 1.6;
}

.hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Hero search box (landing page) - reuses .search-results-box styling */
.hero-search { max-width: 560px; margin: 28px auto 0; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--font);
  cursor: pointer;
  transition: all var(--transition);
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: var(--primary-dark);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(108,99,255,0.35);
}

.btn-outline {
  background: transparent;
  color: var(--primary-light);
  border: 2px solid var(--primary);
}

.btn-outline:hover {
  background: var(--primary-dark);
  color: #fff;
  transform: translateY(-2px);
}

/* ---------- Features Section ---------- */
.features-section {
  padding: 60px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.features-section h2 {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--text);
  border: none;
  padding: 0;
}

.features-section .section-subtitle {
  text-align: center;
  color: var(--text-light);
  margin-bottom: 40px;
  font-size: 1.05rem;
}

/* ---------- Stats Row ---------- */
.stats-row {
  display: flex;
  justify-content: center;
  gap: 48px;
  padding: 40px 24px;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
}

.stat-item .stat-number {
  font-size: 2.4rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-item .stat-label {
  font-size: 0.88rem;
  color: var(--text-light);
  margin-top: 4px;
}

/* ---------- Footer ---------- */
.footer {
  background: linear-gradient(135deg, #1E1E2F 0%, #2A1F4E 50%, #1E1E2F 100%);
  color: var(--text-sidebar);
  padding: 0;
  margin-top: 80px;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent), var(--primary));
  background-size: 300% 100%;
  animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.footer-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.footer-brand .footer-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 4px 15px rgba(108,99,255,0.3);
}

.footer-brand .footer-brand-name {
  display: block;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  max-width: 500px;
  margin: 0 auto 28px;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  padding: 8px 18px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.12);
  transition: all var(--transition);
  text-decoration: none;
  font-weight: 500;
}

.footer-links a:hover {
  color: #fff;
  border-color: var(--primary);
  background: rgba(108,99,255,0.15);
  transform: translateY(-1px);
}

.footer-links .link-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: inline-block;
}

/* Social icon buttons (issue #173: real icons, not text pills). One shared
   rule set covers both the AI School footer (dark pill-link base style)
   and the corp/product footers (lighter, plain-link base style, which
   override .footer-links a's pill look but not this new .footer-social
   selector) since all three page types load this same stylesheet. */
.footer-social {
  gap: 10px;
}
.footer-social a {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  background: rgba(127,127,127,0.12);
  border: 1px solid rgba(127,127,127,0.18);
}
.footer-social a svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.footer-social a:hover { transform: translateY(-2px); }
.footer-social a.social-linkedin:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.footer-social a.social-facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.footer-social a.social-x:hover { background: #000; border-color: #555; color: #fff; }
.footer-social a.social-youtube:hover { background: #FF0000; border-color: #FF0000; color: #fff; }
.footer-social a.social-google:hover { background: #4285F4; border-color: #4285F4; color: #fff; }
.footer-social a.social-microsoft:hover { background: #0078D4; border-color: #0078D4; color: #fff; }

/* GH-214: corp-footer social buttons — resting state visible on light backgrounds; hover colour
   corrected (per-page inline .corp-footer .footer-links a:hover has specificity 0,3,1 and loads
   after style.css, overriding color:#fff above; these 4-class rules at 0,4,1 beat it). */
.corp-footer .footer-social a.social-linkedin,
.corp-footer .footer-social a.social-facebook,
.corp-footer .footer-social a.social-x,
.corp-footer .footer-social a.social-youtube,
.corp-footer .footer-social a.social-google,
.corp-footer .footer-social a.social-microsoft {
  color: #444;
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.15);
}
[data-theme="dark"] .corp-footer .footer-social a.social-linkedin,
[data-theme="dark"] .corp-footer .footer-social a.social-facebook,
[data-theme="dark"] .corp-footer .footer-social a.social-x,
[data-theme="dark"] .corp-footer .footer-social a.social-youtube,
[data-theme="dark"] .corp-footer .footer-social a.social-google,
[data-theme="dark"] .corp-footer .footer-social a.social-microsoft {
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.corp-footer .footer-social a.social-linkedin:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.corp-footer .footer-social a.social-facebook:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.corp-footer .footer-social a.social-x:hover { background: #000; border-color: #000; color: #fff; }
[data-theme="dark"] .corp-footer .footer-social a.social-x:hover { background: #fff; border-color: #fff; color: #000; }
.corp-footer .footer-social a.social-youtube:hover  { background: #FF0000; border-color: #FF0000; color: #fff; }
.corp-footer .footer-social a.social-google:hover   { background: #4285F4; border-color: #4285F4; color: #fff; }
.corp-footer .footer-social a.social-microsoft:hover { background: #0078D4; border-color: #0078D4; color: #fff; }

.footer-bottom {
  width: 100%;
  padding: 20px 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55); /* was 0.4 (~3.7:1, fails AA); 0.55 gives ~5.9:1 */
  letter-spacing: 0.2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.footer-bottom a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-bottom a:hover { color: var(--primary-light); }

/* Social media footer buttons (GH-127) */
.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.footer .footer-social .social-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid;
  transition: opacity 0.2s, transform 0.2s;
  color: rgba(255,255,255,0.88);
}
.footer .footer-social .social-btn:hover { opacity: 0.82; transform: translateY(-1px); }
.footer .footer-social .social-btn-linkedin { border-color: rgba(79,174,232,0.45); background: rgba(79,174,232,0.1); }
.footer .footer-social .social-btn-youtube { border-color: rgba(255,80,80,0.45); background: rgba(255,80,80,0.08); }
.corp-footer .footer-social { margin-bottom: 16px; }
.corp-footer .footer-social .social-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid;
  transition: opacity 0.2s, transform 0.2s;
}
.corp-footer .footer-social .social-btn:hover { opacity: 0.82; transform: translateY(-1px); }
.corp-footer .footer-social .social-btn-linkedin { color: #0A66C2; border-color: rgba(0,119,181,0.4); background: rgba(0,119,181,0.06); }
[data-theme="dark"] .corp-footer .footer-social .social-btn-linkedin { color: #4FAEE8; border-color: rgba(79,174,232,0.35); background: rgba(79,174,232,0.07); }
.corp-footer .footer-social .social-btn-youtube { color: #CC0000; border-color: rgba(204,0,0,0.35); background: rgba(204,0,0,0.05); }
[data-theme="dark"] .corp-footer .footer-social .social-btn-youtube { color: #FF5555; border-color: rgba(255,85,85,0.35); background: rgba(255,85,85,0.07); }
@media (max-width: 480px) {
  .footer-social { gap: 8px; }
  .footer .footer-social .social-btn,
  .corp-footer .footer-social .social-btn { padding: 7px 13px; font-size: 0.78rem; }
}

.sitexure-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #10B981 !important;
  border: 1px solid rgba(16,185,129,.35);
  border-radius: 20px;
  padding: 3px 10px 3px 7px;
  background: rgba(16,185,129,.08);
  text-decoration: none !important;
  margin-bottom: 10px;
  transition: background .2s, border-color .2s;
}

.sitexure-verified-badge:hover {
  background: rgba(16,185,129,.15) !important;
  border-color: rgba(16,185,129,.6) !important;
  color: #34D399 !important;
}

/* Footer decorative circles */
.footer-decor {
  position: absolute;
  border-radius: 50%;
  opacity: 0.04;
  pointer-events: none;
}

.footer-decor-1 {
  width: 300px;
  height: 300px;
  background: var(--primary);
  top: -100px;
  right: -80px;
}

.footer-decor-2 {
  width: 200px;
  height: 200px;
  background: var(--secondary);
  bottom: -60px;
  left: -40px;
}

@media (max-width: 480px) {
  .footer-content { padding: 36px 16px 20px; }
  .footer-brand .footer-brand-name { font-size: 1.15rem; }
  .footer p { font-size: 0.82rem; margin-bottom: 20px; }
  .footer-links { gap: 6px; }
  .footer-links a { padding: 7px 14px; font-size: 0.8rem; }
  .footer-links .link-dot { display: none; }
  .footer-bottom { font-size: 0.72rem; padding: 16px; }
}

/* ---------- Responsive: Full Device Support ---------- */

/* --- Extra Large Desktop (1920px+) --- */
@media (min-width: 1920px) {
  .main-content { max-width: 1000px; }
  .features-section { max-width: 1300px; }
  .footer-content { max-width: 1300px; }
  .hero h1 { font-size: 3.6rem; }
  .hero p { font-size: 1.3rem; }
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Large Desktop (1440px - 1919px) --- */
@media (min-width: 1440px) and (max-width: 1919px) {
  .features-section { max-width: 1200px; }
  .cards-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- Standard Desktop / Laptop (1025px - 1439px) --- */
@media (min-width: 1025px) and (max-width: 1439px) {
  .header-nav a {
    padding: 6px 10px;
    font-size: 0.82rem;
  }
  .cards-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* --- Small Laptop / Large Tablet Landscape (769px - 1024px) --- */
@media (max-width: 1024px) {
  .main-content {
    padding: 32px 24px 80px;
  }

  .header-nav a {
    padding: 6px 8px;
    font-size: 0.78rem;
  }

  .search-box input { width: 160px; }
  .search-box input:focus { width: 200px; }

  .footer-content {
    grid-template-columns: 1fr 1fr;
  }

  .sidebar { width: 240px; }
  .main-content { margin-left: 240px; }

  .content h1 { font-size: 1.9rem; }
  .hero h1 { font-size: 2.8rem; }

  .cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Tablet Portrait & Small Tablets (481px - 768px) --- */
@media (max-width: 768px) {
  .menu-toggle { display: flex; }

  .header-nav { display: none; }
  .nav-scroll-btn { display: none; }

  /* Hamburger reveals the site nav as a dropdown below the header (menu-toggle
     is the only way to reach these links once the horizontal strip is hidden). */
  .header-nav.mobile-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: 8px 24px 16px;
    max-height: calc(100vh - var(--header-height));
    overflow-x: visible;
    overflow-y: auto;
    mask-image: none;
    -webkit-mask-image: none;
    z-index: 999;
  }
  .header-nav.mobile-open a {
    width: 100%;
    justify-content: flex-start;
  }

  /* nav is hidden on mobile — remove the gap it added between brand and actions */
  .header-nav-wrapper { margin-left: 0; }

  .search-box {
    position: static;
    margin-right: 4px;
  }

  .search-box input {
    width: 0;
    padding: 8px 0;
    border: none;
    background: transparent;
    opacity: 0;
    transition: all 0.3s ease;
  }

  .search-box .search-icon {
    cursor: pointer;
    font-size: 1.1rem;
    padding: 6px;
    position: static;
    transform: none;
  }

  .search-box.active {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bg-card);
    z-index: 1002;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--border);
    margin: 0;
  }

  .search-box.active input {
    width: 100%;
    opacity: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    background: var(--bg);
    border-radius: var(--radius-sm);
    font-size: 1rem;
  }

  .search-box.active .search-icon {
    display: none;
  }

  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width);
  }

  .sidebar.open {
    transform: translateX(0);
    box-shadow: var(--shadow-lg);
  }

  .main-content {
    margin-left: 0 !important;
    padding: 24px 20px 60px;
    max-width: 100vw;
    width: 100%;
  }

  .page-wrapper {
    max-width: 100vw;
    overflow-x: hidden;
  }

  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .hero { padding: 20px 20px 40px; }
  .hero h1 { font-size: 2.2rem; margin-top: 4px; }
  .hero p { font-size: 1rem; max-width: 100%; }
  /* Injected AI School hero-logo (main.js) is 160px at desktop -- shrink it so it
     doesn't dominate the screen above the fold on phones/small tablets. */
  .hero-logo { width: 88px; height: 88px; margin-bottom: 8px; }
  /* reduce hero bottom padding on landing page — the gap below CTA buttons felt
     large because hero-bottom (40px) + empty ad-container margin (32px) = 72px */
  .hero.hero-landing { padding-bottom: 20px; }

  .cards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  .card { padding: 20px 18px; }
  .card h3 { font-size: 1rem; }
  .card p { font-size: 0.82rem; }

  .page-nav { flex-direction: column; }
  .page-nav a { min-width: auto; }

  .stats-row { gap: 24px; }
  .stat-item .stat-number { font-size: 1.8rem; }

  .footer-content { grid-template-columns: 1fr 1fr; gap: 24px; }

  .content h1 { font-size: 1.6rem; }
  .content h2 { font-size: 1.25rem; margin-top: 36px; }
  .content h3 { font-size: 1.05rem; }

  .features-section { padding: 40px 20px; }
  .features-section h2 { font-size: 1.5rem; }

  .code-block pre { font-size: 0.82rem; padding: 14px; }

  .content table { font-size: 0.82rem; display: block; overflow-x: auto; max-width: 100%; }
  .content th, .content td { padding: 10px 12px; }

  .code-block { max-width: 100%; }
  .code-block pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

  .content img, .content iframe { max-width: 100%; }
  .content ul, .content ol { padding-left: 20px; }
  .content p, .content li { overflow-wrap: break-word; word-break: break-word; }

  .info-box { padding: 14px 16px; font-size: 0.85rem; }

  .try-it-box { padding: 18px; }

  .step-list li { padding-left: 44px; }

  .btn { padding: 10px 22px; font-size: 0.9rem; }

  .accordion-header { padding: 14px 16px; font-size: 0.9rem; }
}

/* --- Large Phone / Phablet (376px - 480px) --- */
@media (max-width: 480px) {
  :root {
    --header-height: 56px;
  }

  html, body { overflow-x: hidden !important; max-width: 100vw !important; }

  .main-content { margin-left: 0 !important; width: 100% !important; max-width: 100vw !important; }

  .header-brand { font-size: 1.05rem; }
  .header-brand .brand-icon { width: 30px; height: 30px; }

  .hero { padding: 16px 16px 30px; }
  .hero h1 { font-size: 1.75rem; line-height: 1.2; }
  .hero p { font-size: 0.92rem; margin-bottom: 24px; }

  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn { width: 100%; justify-content: center; }

  .stats-row { gap: 16px; padding: 24px 16px; }
  .stat-item .stat-number { font-size: 1.5rem; }
  .stat-item .stat-label { font-size: 0.75rem; }

  .cards-grid { grid-template-columns: 1fr; gap: 14px; }

  .card { padding: 18px 16px; }
  .card .card-icon { width: 42px; height: 42px; font-size: 1.2rem; margin-bottom: 12px; }
  .card h3 { font-size: 0.95rem; }

  .main-content { padding: 16px 14px 50px; }

  .content h1 { font-size: 1.4rem; }
  .content h2 { font-size: 1.15rem; margin-top: 32px; }
  .content h3 { font-size: 1rem; }
  .content p { font-size: 0.9rem; }
  .content .subtitle { font-size: 0.95rem; }

  .code-block pre { font-size: 0.78rem; padding: 12px; line-height: 1.5; }
  .code-header { padding: 8px 12px; }
  .code-header .code-lang { font-size: 0.68rem; }

  .content table { font-size: 0.78rem; }
  .content th, .content td { padding: 8px 10px; }

  .info-box { padding: 12px 14px; font-size: 0.82rem; flex-direction: column; }
  .info-box .box-icon { margin-top: 0; }

  .try-it-box { padding: 14px; }
  .try-it-box textarea { min-height: 100px; font-size: 0.82rem; }

  .step-list li { padding-left: 40px; }
  .step-list li::before { width: 28px; height: 28px; font-size: 0.75rem; }
  .step-list li h4 { font-size: 0.92rem; }
  .step-list li p { font-size: 0.85rem; }

  .page-nav a { padding: 12px 14px; }
  .page-nav a .nav-title { font-size: 0.88rem; }

  .footer { padding: 30px 16px 20px; margin-top: 50px; }
  .footer-content { grid-template-columns: 1fr; gap: 20px; }
  .footer h4 { font-size: 0.88rem; margin-bottom: 10px; }
  .footer p, .footer a { font-size: 0.8rem; }
  .footer-bottom { font-size: 0.72rem; }

  .features-section { padding: 30px 16px; }
  .features-section h2 { font-size: 1.3rem; }
  .features-section .section-subtitle { font-size: 0.9rem; }

  .breadcrumb, .breadcrumbs { font-size: 0.75rem; margin-bottom: 16px; flex-wrap: wrap; }

  .accordion-header { padding: 12px 14px; font-size: 0.85rem; }
  .accordion-body-inner { padding: 0 14px 14px; font-size: 0.82rem; }

  .tag { font-size: 0.65rem; padding: 2px 8px; }

  .btn { padding: 10px 18px; font-size: 0.85rem; }

  .sidebar { width: 260px; }

  .theme-toggle { width: 34px; height: 34px; font-size: 1rem; }
  .menu-toggle { width: 34px; height: 34px; font-size: 1.1rem; }
}

/* --- Small Phone (320px - 375px) --- */
@media (max-width: 375px) {
  :root {
    --header-height: 50px;
  }

  /* reduce horizontal padding so brand + actions fit without the theme-toggle clipping */
  .top-header { padding-left: 12px; padding-right: 12px; }

  .header-brand { font-size: 0.95rem; gap: 6px; }
  .header-brand .brand-icon { width: 26px; height: 26px; border-radius: 0; }

  .hero h1 { font-size: 1.5rem; }
  .hero p { font-size: 0.85rem; }

  .stats-row { gap: 12px; padding: 20px 12px; }
  .stat-item .stat-number { font-size: 1.3rem; }
  .stat-item .stat-label { font-size: 0.7rem; }

  .main-content { padding: 12px 10px 40px; }

  .content h1 { font-size: 1.25rem; }
  .content h2 { font-size: 1.05rem; }
  .content p { font-size: 0.85rem; line-height: 1.6; }

  .card { padding: 14px 12px; }
  .card .card-icon { width: 36px; height: 36px; font-size: 1rem; margin-bottom: 10px; }
  .card h3 { font-size: 0.9rem; }
  .card p { font-size: 0.78rem; }

  .code-block { max-width: calc(100vw - 24px); }
  .code-block pre { font-size: 0.72rem; padding: 10px; white-space: pre-wrap; word-break: break-word; overflow-x: auto; }

  .sidebar { width: 240px; }

  .features-section { padding: 24px 12px; }

  .footer { padding: 24px 12px 16px; }
}

/* --- Touch Device Optimizations --- */
@media (hover: none) and (pointer: coarse) {
  .card:hover { transform: none; }
  .btn:hover { transform: none; }
  .card:active { transform: scale(0.98); }
  .btn:active { transform: scale(0.97); }

  .sidebar a { padding: 12px 16px; min-height: 44px; }
  .header-nav a { min-height: 44px; display: flex; align-items: center; }
  .accordion-header { min-height: 48px; }

  .code-block pre { -webkit-overflow-scrolling: touch; }
  .comparison-table { -webkit-overflow-scrolling: touch; }
  .content table { -webkit-overflow-scrolling: touch; }
}

/* --- Landscape Phone --- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding: 12px 20px 20px; }
  .hero h1 { font-size: 1.6rem; }
  .hero p { font-size: 0.88rem; margin-bottom: 16px; }
  .stats-row { padding: 16px 24px; }
  .features-section { padding: 24px 20px; }
  .sidebar { top: var(--header-height); }
}

/* --- Print Styles --- */
@media print {
  .top-header, .sidebar, .sidebar-overlay, .menu-toggle,
  .theme-toggle, .search-box, .page-nav, .hero-cta, .btn { display: none !important; }
  .main-content { margin-left: 0 !important; padding: 0 !important; max-width: 100% !important; }
  .content h1 { -webkit-text-fill-color: var(--text) !important; }
  body { background: #fff; color: #000; }
  .code-block { break-inside: avoid; }
  .card { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
}

/* --- High DPI / Retina --- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .code-block pre { -webkit-font-smoothing: antialiased; }
}

/* Mobile nav overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 899;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-overlay.active { display: block; }

/* ---------- Syntax Highlighting (basic) ---------- */
.token-keyword { color: #C792EA; }
.token-string { color: #C3E88D; }
.token-comment { color: #676E95; font-style: italic; }
.token-function { color: #82AAFF; }
.token-number { color: #F78C6C; }
.token-operator { color: #89DDFF; }
.token-variable { color: #F07178; }
.token-flag { color: #FFCB6B; }
.token-param { color: #89DDFF; }

/* ---------- Step List ---------- */
.step-list {
  counter-reset: step-counter;
  list-style: none;
  padding-left: 0;
  margin: 24px 0;
}

.step-list li {
  counter-increment: step-counter;
  position: relative;
  padding-left: 52px;
  padding-bottom: 24px;
  margin-bottom: 0;
}

.step-list li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 18px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.step-list li::before {
  content: counter(step-counter);
  position: absolute;
  left: 4px;
  top: 0;
  width: 32px;
  height: 32px;
  background: var(--primary-dark);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
}

.step-list li h4 {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}

.step-list li p {
  font-size: 0.92rem;
  color: var(--text-light);
}

/* ---------- Tag / Badge ---------- */
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tag.beginner { background: rgba(67,233,123,0.12); color: #2ECC71; }
.tag.intermediate { background: rgba(255,183,77,0.12); color: #FF9800; }
.tag.advanced { background: rgba(255,101,132,0.12); color: var(--secondary); }

/* Light theme: tag text colors must be darker to pass WCAG AA 4.5:1 against
   near-white card backgrounds (#FFF with 12% tint). Dark theme values are fine. */
[data-theme="light"] .tag.beginner    { color: #166534; } /* 6.6:1 vs tinted bg */
[data-theme="light"] .tag.intermediate { color: #92400E; } /* 6.9:1 vs tinted bg */
[data-theme="light"] .tag.advanced    { color: #9F1239; } /* 7.6:1 vs tinted bg */

/* Light theme: link and accent text colors (--primary #6C63FF = 4.31:1 on white, fails AA).
   Dark mode uses --primary-light (#8B85FF, 5.39:1+ on dark bg).
   Light mode overrides: use --primary-dark (#5A52D5, 5.83:1 on white). */
[data-theme="light"] .try-it-box h4 { color: var(--primary-dark); }

/* ---------- Accordion / FAQ ---------- */
.accordion {
  margin: 20px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid var(--border);
}

.accordion-item:last-child { border-bottom: none; }

.accordion-header {
  width: 100%;
  padding: 16px 20px;
  background: var(--bg-card);
  border: none;
  text-align: left;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font);
  transition: background var(--transition);
}

.accordion-header:hover { background: var(--bg); }

.accordion-header .acc-icon {
  transition: transform var(--transition);
  font-size: 0.8rem;
}

.accordion-item.open .accordion-header .acc-icon {
  transform: rotate(180deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-item.open .accordion-body {
  max-height: 500px;
}

.accordion-body-inner {
  padding: 0 20px 16px;
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.7;
}

/* ---------- Comparison Table ---------- */
.comparison-table {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.comparison-table table {
  min-width: 600px;
}

/* Ensure content never overflows viewport */
.content {
  max-width: 100%;
  overflow-x: hidden;
}

.check { color: var(--accent); font-weight: bold; }
.cross { color: var(--secondary); }

/* ---------- Keyboard Shortcut ---------- */
kbd {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.8em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ---------- Google AdSense Containers ---------- */
.ad-container {
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  margin: 0 auto;
}

.ad-container ins {
  max-width: 100%;
}

.ad-top {
  padding: 8px 24px;
  background: var(--bg);
}

/* Hide ad containers when ads haven't loaded (empty ins elements) */
.ad-container:has(ins[data-ad-status="unfilled"]),
.ad-container:not(:has(ins iframe)) {
  padding: 0;
  margin: 0;
  min-height: 0;
}

.ad-bottom {
  margin: 40px 0 20px;
  padding: 16px;
}

.ad-in-content {
  margin: 30px 0;
  padding: 12px 0;
}

@media (max-width: 768px) {
  .ad-top { padding: 6px 12px; }
  .ad-bottom { margin: 24px 0 12px; padding: 10px; }
  .ad-in-content { margin: 20px 0; }
}

@media (max-width: 480px) {
  .ad-top { padding: 4px 8px; }
  .ad-bottom { margin: 16px 0 8px; padding: 8px; }
  .ad-in-content { margin: 16px 0; }
}

@media print {
  .ad-container { display: none !important; }
}

/* ---------- Animation utility ---------- */
.fade-in {
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

.slide-up {
  animation: slideUp 0.5s ease forwards;
  opacity: 0;
  transform: translateY(20px);
}

@keyframes slideUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Entrance animations leave content at opacity:0 momentarily (briefly
   under WCAG contrast while fading in). Skip straight to the end state
   for users who asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .slide-up {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- Brand: logo light/dark, brand text ---------- */
/* Default: dark logos visible (matches dark CSS default) */
.header-brand .logo-light,
.footer-brand .logo-light { display: none; }
.header-brand .logo-dark,
.footer-brand .logo-dark  { display: inline-block; }
[data-theme="light"] .header-brand .logo-light,
[data-theme="light"] .footer-brand .logo-light { display: inline-block; }
[data-theme="light"] .header-brand .logo-dark,
[data-theme="light"] .footer-brand .logo-dark  { display: none; }

.brand-text { font-weight: 700; font-size: 1.15rem; letter-spacing: 0.08em; text-transform: uppercase; }
.brand-text-thin { font-weight: 300; letter-spacing: 0.14em; }
.header-brand:hover { color: var(--text); }

/* Hero logo (AI School branding injected by main.js) */
.hero-logo { width: 160px; height: 160px; margin-bottom: 16px; filter: invert(1) hue-rotate(180deg); object-fit: contain; }

[data-theme="light"] .hero-logo { filter: none; }

/* ===== Google-style search enhancements ===== */
.search-box { position: relative; }
.search-box input {
  width: 240px;
  padding: 9px 34px 9px 40px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text);
  font-size: 0.9rem;
  box-shadow: 0 1px 6px rgba(32,33,36,0.16);
  transition: box-shadow .2s ease, width .2s ease, background .2s ease;
}
.search-box input::placeholder { color: var(--text-light); }
.search-box input:hover { box-shadow: 0 1px 10px rgba(32,33,36,0.24); }
.search-box input:focus {
  outline: none;
  width: 340px;
  border-color: transparent;
  background: var(--bg-card);
  box-shadow: 0 2px 14px rgba(32,33,36,0.30);
}
.search-box .search-icon { left: 15px; font-size: 0.9rem; opacity: .7; }

.search-clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: none; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: none; border-radius: 50%;
  background: transparent; color: var(--text-light);
  font-size: 11px; line-height: 1; cursor: pointer;
}
.search-clear:hover { background: rgba(128,128,128,0.18); color: var(--text); }

.search-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  min-width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.20);
  z-index: 10001;
  overflow: hidden; overflow-y: auto; max-height: 70vh;
  padding: 6px;
  animation: searchPop .12s ease;
}
@keyframes searchPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.search-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  color: var(--text); text-decoration: none;
}
.search-item .si-icon { opacity: .45; font-size: .95rem; flex-shrink: 0; }
.search-item .si-text { display: flex; flex-direction: column; min-width: 0; }
.search-item .si-title {
  font-size: .92rem; font-weight: 500; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-item .si-section { font-size: .72rem; color: var(--text-light); margin-top: 1px; }
.search-item mark { background: transparent; color: var(--primary); font-weight: 700; }
.search-item:hover, .search-item.is-active { background: rgba(108,99,255,0.10); }
.search-item.is-active { box-shadow: inset 0 0 0 1px rgba(108,99,255,0.25); }
.search-empty { padding: 14px 16px; color: var(--text-light); font-size: .85rem; }
.search-empty .search-all-inline { color: var(--primary); font-weight: 600; }
.search-all-link { border-top: 1px solid var(--border); margin: 4px 0 0; }
.search-all-link a { display: block; padding: 10px 16px; font-size: .82rem; color: var(--primary); font-weight: 600; text-decoration: none; text-align: right; }
.search-all-link a:hover { background: rgba(108,99,255,0.08); }

/* ===== Search results page ===== */
.search-results-page { max-width: 760px; margin: 0 auto; padding: 40px 24px 60px; }
.search-results-heading { font-size: 1.1rem; font-weight: 600; color: var(--text-light); margin-bottom: 6px; letter-spacing: 0.01em; }
.search-results-query { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 4px; line-height: 1.15; }
.search-results-count { font-size: 0.88rem; color: var(--text-light); margin-bottom: 32px; }
.search-result-item { padding: 18px 0; border-bottom: 1px solid var(--border); }
.search-result-item:last-child { border-bottom: none; }
.search-result-breadcrumb { font-size: 0.78rem; color: #16a34a; margin-bottom: 3px; font-family: monospace; letter-spacing: 0.01em; }
[data-theme="dark"] .search-result-breadcrumb { color: #4ade80; }
.search-result-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 2px; }
.search-result-title a { color: var(--primary); text-decoration: none; }
.search-result-title a:hover { text-decoration: underline; }
.search-result-section { font-size: 0.82rem; color: var(--text-light); }
.search-result-title mark { background: transparent; color: inherit; font-weight: 800; }
.search-no-results { padding: 40px 0; color: var(--text-light); }
.search-no-results p { margin-bottom: 12px; }
.search-no-results ul { padding-left: 20px; line-height: 2; }
.search-results-box { display: flex; gap: 10px; margin-bottom: 32px; }
.search-results-box input {
  flex: 1; padding: 12px 18px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--text); font-size: 1rem;
  box-shadow: 0 1px 6px rgba(32,33,36,0.12); outline: none;
}
.search-results-box input:focus { box-shadow: 0 2px 14px rgba(32,33,36,0.22); border-color: transparent; }
.search-results-box button {
  padding: 12px 22px; border-radius: 999px; border: none;
  /* --primary on white text is only 4.32:1 (fails the 4.5:1 AA minimum for this
     font-size/weight) — use --primary-dark, already relied on elsewhere for the
     same reason (see the light-theme --primary-light override above). */
  background: var(--primary-dark); color: #fff; font-size: 0.95rem; font-weight: 600; cursor: pointer;
  transition: opacity .15s;
}
.search-results-box button:hover { opacity: .88; }
@media (max-width: 500px) {
  .search-results-query { font-size: 1.5rem; }
  .search-results-box { flex-direction: column; }
  .search-results-box button { border-radius: 999px; }
}

@media (max-width: 768px) {
  .search-box input:focus { width: 200px; }
  .search-dropdown {
    position: fixed; top: 60px; left: 12px; right: 12px;
    min-width: 0; border-radius: 14px;
  }
}

/* ---- Google-style search extras: did-you-mean, snippets, pagination ---- */
.search-didyoumean { padding: 8px 16px 4px; font-size: .78rem; color: var(--text-light); }
.search-didyoumean b { color: var(--primary); font-weight: 700; }
.search-didyoumean-page { margin: 4px 0 18px; font-size: .95rem; color: var(--text-light); }
.search-didyoumean-page b { color: var(--primary); }
.search-didyoumean-page a { color: var(--primary); font-weight: 600; }
.search-result-snippet { font-size: .88rem; color: var(--text-light); line-height: 1.5; margin-top: 3px; max-width: 640px; }
.search-result-snippet mark { background: transparent; color: var(--text); font-weight: 700; }
.search-more-wrap { text-align: center; margin: 28px 0 8px; }
.search-more-btn { padding: 10px 26px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--primary); font-weight: 600; font-size: .9rem; cursor: pointer; font-family: var(--font); }
.search-more-btn:hover { border-color: var(--primary); }

/* ---- Search: tabs, filters, hero card, chips, mic, tips ---- */
.search-tip { font-size: .78rem; color: var(--text-light); margin: 8px 0 0; }
.search-tip code, .search-tip kbd { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: .72rem; }
.search-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 22px 0 6px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.search-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.search-tabs button { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 12px; font-size: .88rem; color: var(--text-light); cursor: pointer; font-family: var(--font); }
.search-tabs button span { opacity: .6; font-size: .75rem; }
.search-tabs button.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.search-filters { display: flex; gap: 8px; }
.search-filters select { padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: .82rem; font-family: var(--font); max-width: 220px; }
.sr-hero { border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: 12px; background: var(--bg-card); padding: 20px 22px; margin: 18px 0 26px; }
.sr-hero-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--primary); font-weight: 700; margin-bottom: 6px; }
.sr-hero-title { font-size: 1.25rem; font-weight: 700; margin: 2px 0 4px; }
.sr-hero-title a { color: var(--text); text-decoration: none; }
.sr-hero-title a:hover { color: var(--primary); }
.sr-hero-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 4px; }
.sr-hero-links a { font-size: .85rem; color: var(--primary); text-decoration: none; }
.sr-hero-links a:hover { text-decoration: underline; }
.sr-hero-cta { display: inline-block; margin-top: 10px; font-size: .85rem; font-weight: 700; color: var(--primary); text-decoration: none; }
.sr-related { margin: 30px 0 10px; }
.sr-related-label { font-size: .85rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.search-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.search-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text); font-size: .84rem; text-decoration: none; }
.search-chip:hover { border-color: var(--primary); color: var(--primary); }
#sr-mic { background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 1rem; padding: 0 12px; cursor: pointer; }
#sr-mic.listening { border-color: #e11d48; box-shadow: 0 0 0 3px rgba(225,29,72,.2); }
@media (max-width: 600px) { .search-controls { flex-direction: column; align-items: stretch; } .search-filters select { max-width: none; flex: 1; } }