/* enhance.css — modern layer loaded after styles.css. Progressive: everything degrades gracefully. */

/* Cross-document page transitions (Chrome/Edge/Safari 18+). Ignored elsewhere. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

html { color-scheme: dark; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; overflow-x: clip; }
img { max-width: 100%; height: auto; }

/* Keyboard + a11y */
:focus-visible { outline: 2px solid var(--gold, #f59e0b); outline-offset: 3px; border-radius: 4px; }
.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--gold, #f59e0b); color: #0a1929; font-weight: 700;
  padding: .75rem 1.25rem; border-radius: .5rem; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 1rem; }
.nav-link[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--gold, #f59e0b); }

/* Mobile navigation (the original site had none below 1024px) */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-left: auto;
  background: transparent; border: 1px solid rgba(130,154,177,.35); border-radius: .6rem;
  color: #fff; cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-open { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }
.mobile-nav {
  position: fixed; left: 0; right: 0; top: 80px; z-index: 49;
  background: rgba(10,25,41,.98); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(36,59,83,.7);
  padding: .5rem 1.25rem 1.5rem; display: none;
  max-height: calc(100vh - 80px); overflow-y: auto;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: block; padding: 1rem .25rem; color: var(--navy-100, #d9e2ec);
  text-decoration: none; font-size: 1.125rem; font-weight: 500;
  border-bottom: 1px solid rgba(36,59,83,.6);
}
.mobile-nav a.btn-primary { margin-top: 1.25rem; border: 0; color: #fff; justify-content: center; }
@media (min-width: 1024px) { .nav-toggle, .mobile-nav { display: none !important; } }

/* Reading progress */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60;
  background: linear-gradient(90deg, var(--electric-500,#3b82f6), var(--gold,#f59e0b));
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .read-progress { animation: grow linear both; animation-timeline: scroll(root); }
  @keyframes grow { to { transform: scaleX(1); } }
}

/* Table of contents (long articles) */
.toc {
  margin: 0 0 2rem; padding: 1.1rem 1.25rem; border-radius: .9rem;
  background: rgba(30,58,95,.35); border: 1px solid var(--navy-700, #334e68);
}
.toc > summary { cursor: pointer; font-weight: 600; color: #fff; list-style: none; }
.toc > summary::-webkit-details-marker { display: none; }
.toc > summary::after { content: "＋"; float: right; color: var(--navy-400); }
.toc[open] > summary::after { content: "－"; }
.toc ol { margin: .85rem 0 0; padding-left: 1.25rem; display: grid; gap: .4rem; }
.toc a { color: var(--electric-400, #60a5fa); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* Related reading */
.related { padding: 3rem 0 1rem; }
.related h2 { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.75rem; color: #fff; margin-bottom: 1.25rem; }
.related-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.related-card {
  display: block; padding: 1.25rem; border-radius: .9rem; text-decoration: none;
  background: linear-gradient(135deg, rgba(16,42,67,.8), rgba(10,25,41,.9));
  border: 1px solid rgba(59,130,246,.15); transition: border-color .2s, transform .2s;
}
.related-card:hover { border-color: rgba(245,158,11,.5); transform: translateY(-2px); }
.related-card .kicker { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold, #f59e0b); }
.related-card h3 { margin: .35rem 0 .4rem; font-size: 1rem; line-height: 1.35; color: #fff; font-weight: 600; }
.related-card p { margin: 0; font-size: .85rem; color: var(--navy-300, #9fb3c8); line-height: 1.5; }
@media (max-width: 800px) { .related-grid { grid-template-columns: minmax(0, 1fr); } }

/* Homepage FAQ (visible, matches FAQPage JSON-LD) */
.faq-list { display: grid; gap: .75rem; max-width: 52rem; margin: 0 auto; }
.faq-list details {
  border: 1px solid var(--navy-700, #334e68); border-radius: .9rem;
  background: rgba(30,58,95,.3); padding: 1.1rem 1.25rem;
}
.faq-list summary { cursor: pointer; font-weight: 600; color: #fff; font-size: 1.05rem; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "＋"; float: right; color: var(--gold, #f59e0b); }
.faq-list details[open] summary::after { content: "－"; }
.faq-list details p { margin-top: .75rem; color: var(--navy-200, #bcccdc); line-height: 1.7; }

/* Frameworks hub */
.fw-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fw-card { padding: 1.5rem; border-radius: 1rem; background: linear-gradient(135deg, rgba(16,42,67,.8), rgba(10,25,41,.9)); border: 1px solid rgba(59,130,246,.15); }
.fw-card h3 { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.5rem; color: #fff; margin: .25rem 0 .5rem; }
.fw-card .meta { font-size: .8rem; color: var(--navy-400, #829ab1); }
.fw-card ul { margin: .75rem 0 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.fw-card a { color: var(--electric-400, #60a5fa); text-decoration: none; }
.fw-card a:hover { text-decoration: underline; }
.fw-card .price { color: var(--gold, #f59e0b); font-weight: 700; }
@media (max-width: 800px) { .fw-grid { grid-template-columns: minmax(0, 1fr); } }

/* Mobile overflow fixes found in audit (index cards, guides cards) */
.card-dark, .book-card, .symptom-card, .flex-1 { min-width: 0; }
.card-dark h3, .card-dark p, .book-card h3, .book-card p { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .book-card, .featured-card { max-width: 100%; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .symptom-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
.hero-grid.no-photo { grid-template-columns: minmax(0, 1fr) !important; max-width: 52rem; }
.hero-grid.no-photo .hero-photo-section { display: none; }

/* Scroll-driven reveal — only where supported, only when motion is OK */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    main .related-card, main .fw-card, main .faq-list details {
      animation: reveal both ease-out; animation-timeline: view(); animation-range: entry 0% entry 35%;
    }
    @keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  }
}
@media print { .nav-fixed, .mobile-nav, .read-progress, .next-step, .related { display: none !important; } }

/* Sticky buy bar on guide pages */
.buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background: rgba(10,25,41,.97); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(245,158,11,.35);
  transform: translateY(110%); transition: transform .25s ease; visibility: hidden;
}
.buy-bar.is-on { transform: none; visibility: visible; }
.buy-bar-info { min-width: 0; display: grid; }
.buy-bar-info strong { color: #fff; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buy-bar-info span { color: var(--gold, #f59e0b); font-size: .8rem; font-weight: 600; }
.buy-bar .btn-primary { flex-shrink: 0; padding: .65rem 1.1rem; }
@media (min-width: 1024px) { .buy-bar { max-width: 760px; left: 50%; right: auto; width: calc(100% - 2rem); transform: translate(-50%, 130%); border: 1px solid rgba(245,158,11,.35); border-radius: .9rem; bottom: 1rem; } .buy-bar.is-on { transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .buy-bar { transition: none; } }

/* Buttons inside cards must keep their own text colour (card link colour was overriding it) */
.fw-card a.btn-primary, .related a.btn-primary { color: #fff; text-decoration: none; }
.fw-card a.btn-secondary { color: var(--navy-100, #d9e2ec); text-decoration: none; }
.fw-card a.btn-primary:hover, .fw-card a.btn-secondary:hover { text-decoration: none; }

/* New-article components */
.art h2 { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.9rem; color: #fff; margin: 2.5rem 0 1rem; line-height: 1.25; }
.art p { margin: 0 0 1.1rem; } .art ul, .art ol { margin: 0 0 1.25rem 1.4rem; padding: 0; } .art li { margin-bottom: .5rem; }
.art ul { list-style: disc; } .art ol { list-style: decimal; }
.art a { color: var(--electric-400, #60a5fa); } .art strong { color: #fff; }
.art .quick { padding: 1.1rem 1.25rem; border-left: 3px solid var(--gold, #f59e0b); background: rgba(30,58,95,.35); border-radius: .6rem; }
.art .takeaways { padding: 1.1rem 1.25rem; border: 1px solid var(--navy-700, #334e68); border-radius: .9rem; background: rgba(16,42,67,.5); margin: 1.5rem 0; }
.art .takeaways h2 { margin-top: 0; font-size: 1.4rem; }
.art-table-wrap { overflow-x: auto; margin: 1.25rem 0; }
.art-table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.5; min-width: 560px; }
.art-table th, .art-table td { text-align: left; vertical-align: top; padding: .7rem .8rem; border-bottom: 1px solid var(--navy-700, #334e68); }
.art-table th { color: #fff; font-weight: 600; background: rgba(30,58,95,.45); }
.art .check-list li { padding-bottom: .4rem; } .art .hint { display: block; font-size: .9rem; color: var(--navy-400, #829ab1); }
.art .meta-note { font-size: .85rem; color: var(--navy-400, #829ab1); margin-top: 2rem; }
.art .sources { font-size: .95rem; }

/* guide cover on guide pages */
.gcover{margin:0 0 1.5rem;max-width:300px}.gcover img{display:block;width:100%;height:auto;border-radius:.8rem;box-shadow:0 24px 50px -20px rgba(0,0,0,.65);border:1px solid rgba(130,154,177,.25)}