/**
 * Site-wide UI: hover contrast, nav variants, touch targets, responsive topbar.
 * Load after styles.css (and page CSS) on every page except LLD (inline patches).
 */

/* ── Nav: generic hover must not override accent / ebook / FDE pills ── */
a.nav-link:not(.nav-link--accent):not(.nav-link--ebook):not(.nav-link--fde):hover,
a.nav-link:not(.nav-link--accent):not(.nav-link--ebook):not(.nav-link--fde):focus-visible {
  color: var(--fg);
  background: var(--surface-hover, var(--progress-bg));
  border-color: var(--border-light);
}

a.nav-link.nav-link--accent:hover,
a.nav-link.nav-link--accent:focus-visible {
  color: #fff;
  background: linear-gradient(165deg, #4b93db 0%, var(--accent-hover) 50%, #2d6cbd 100%);
}

a.nav-link.nav-link--ebook:hover,
a.nav-link.nav-link--ebook:focus-visible {
  color: #ecfeff;
  background: rgba(44, 177, 166, 0.88);
  border-color: rgba(44, 177, 166, 0.55);
}

[data-theme="light"] a.nav-link.nav-link--ebook:hover,
[data-theme="light"] a.nav-link.nav-link--ebook:focus-visible {
  color: #fff;
  background: var(--secondary);
  border-color: var(--secondary);
}

/* ── Hero CTAs (home graveyard, 404) ── */
a.hero-cta-primary:hover,
a.hero-cta-primary:focus-visible,
button.hero-cta-primary:hover,
button.hero-cta-primary:focus-visible {
  color: #fff;
}

a.hero-cta-secondary:hover,
a.hero-cta-secondary:focus-visible {
  color: var(--secondary-hover);
  border-color: var(--secondary);
  background: var(--secondary-dim);
}

[data-theme="light"] a.hero-cta-secondary:hover,
[data-theme="light"] a.hero-cta-secondary:focus-visible {
  color: var(--secondary-hover);
}

a.hero-btn-primary:hover,
a.hero-btn-primary:focus-visible,
a.hero-btn-secondary:hover,
a.hero-btn-secondary:focus-visible {
  color: #fff;
}

/* ── Promo & graveyard CTAs ── */
a.fde-promo__btn:hover,
a.fde-promo__btn:focus-visible {
  color: #fff;
}

a.fde-promo__btn--secondary:hover,
a.fde-promo__btn--secondary:focus-visible {
  color: var(--accent);
  background: var(--blue-dim);
  border-color: var(--accent);
}

[data-theme="light"] a.fde-promo__btn--secondary:hover,
[data-theme="light"] a.fde-promo__btn--secondary:focus-visible {
  color: var(--accent-hover);
}

a.graveyard-btn--primary:hover,
a.graveyard-btn--primary:focus-visible,
a.graveyard-btn--secondary:hover,
a.graveyard-btn--secondary:focus-visible {
  color: #fff;
}

a.graveyard-btn:not(.graveyard-btn--primary):not(.graveyard-btn--secondary):hover,
a.graveyard-btn:not(.graveyard-btn--primary):not(.graveyard-btn--secondary):focus-visible {
  color: var(--fg);
}

a.article-btn:hover,
a.article-btn:focus-visible,
a.article-btn--primary:hover,
a.article-btn--ghost:hover {
  color: #fff;
}

a.article-btn--ghost:hover,
a.article-btn--ghost:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
}

/* ── FDE guide page (loads fde.css) ── */
a.fde-sheet-cta__btn:hover,
a.fde-sheet-cta__btn:focus-visible {
  color: #fff;
}

a.fde-article .hero-cta__primary:hover,
a.fde-article .hero-cta__primary:focus-visible {
  color: #fff;
}

a.fde-article .hero-cta__secondary:hover,
a.fde-article .hero-cta__secondary:focus-visible {
  color: var(--accent);
  background: var(--blue-dim);
}

button.fde-quiz__opt:hover,
button.fde-quiz__opt:focus-visible {
  color: var(--fg);
}

button.fde-scenario__btn:hover,
button.fde-scenario__btn.is-selected,
button.fde-scenario__btn:focus-visible {
  color: var(--fg);
}

button.fde-btn--primary:hover,
button.fde-btn--primary:focus-visible {
  color: #fff;
}

button.fde-btn--ghost:hover,
button.fde-btn--ghost:focus-visible {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* ── Topbar: touch targets & overflow ── */
.topbar__right {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.nav-link,
.control-btn,
.menu-toggle {
  min-height: 32px;
}

a.nav-link {
  position: relative;
}

.control-btn:hover,
.control-btn:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--progress-bg);
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
  background: var(--surface-hover, var(--progress-bg));
  border-color: var(--border-light);
}

/* Phone: keep FDE compact visible; hide ebook only */
@media (max-width: 640px) {
  .topbar__right .nav-link--fde {
    display: inline-flex !important;
    padding: 6px 10px;
    min-width: 40px;
    min-height: 32px;
    justify-content: center;
  }

  .topbar__right .nav-link--fde .fde-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .topbar__right .nav-link--fde::after {
    content: "FDE";
    font-size: 11px;
    font-weight: 700;
    color: inherit;
  }

  .topbar__right .nav-link--fde:hover::after,
  .topbar__right .nav-link--fde:focus-visible::after {
    color: #fff;
  }

  .topbar__right .nav-link--ebook {
    display: none;
  }

  .nav-link--accent .nav-link__text--long {
    display: none;
  }

  .topbar {
    padding: 0 12px;
    gap: 4px;
  }

  .brand__subtitle {
    display: none;
  }

  .fde-page .topbar__right .nav-link,
  .fde-sheet-page .topbar__right .nav-link {
    font-size: 11px;
    padding: 6px 10px;
  }

  .fde-sheet-page .brand__title {
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fde-sheet-page .topbar__right .nav-link .nav-link__label--long {
    display: none;
  }

  .fde-sheet-page .topbar__right .nav-link[href="/fde"] .nav-link__label--long {
    display: none;
  }

  .fde-sheet-page .topbar__right .nav-link[href="/fde"]::after {
    content: "FDE";
    font-size: 11px;
    font-weight: 700;
  }

  .fde-sheet-page .topbar__right .nav-link[href="/lld"]::after {
    content: "LLD";
    font-size: 11px;
    font-weight: 700;
  }

  .fde-sheet-page .topbar__right .nav-link.nav-link--accent::after {
    content: "HLD";
    font-size: 11px;
    font-weight: 700;
  }

  .fde-sheet-page .topbar__right .nav-link.nav-link--accent svg,
  .fde-sheet-page .topbar__right .nav-link[href="/fde"],
  .fde-sheet-page .topbar__right .nav-link[href="/lld"] {
    font-size: 0;
    gap: 0;
    min-width: 40px;
    justify-content: center;
  }

  .fde-sheet-page .topbar {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .fde-sheet-page .topbar::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 860px) {
  .header .hdr-cta {
    font-size: 0;
  }

  .header .hdr-cta .hdr-cta__text--short {
    font-size: 11px;
    font-weight: 700;
  }
}

/* ── 404 page ── */
.page-404 {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.page-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.page-404__actions a.hero-cta-primary:hover,
.page-404__actions a.hero-cta-primary:focus-visible {
  color: #fff;
}

.page-404__actions a.hero-cta-secondary:hover,
.page-404__actions a.hero-cta-secondary:focus-visible {
  color: var(--secondary-hover);
  border-color: var(--secondary);
  background: var(--secondary-dim);
}

[data-theme="light"] .page-404__actions a.hero-cta-secondary:hover,
[data-theme="light"] .page-404__actions a.hero-cta-secondary:focus-visible {
  color: #fff;
  background: var(--secondary);
  border-color: var(--secondary);
}

/* ── LLD header (loads ui-global.css) — never hide text-only nav with font-size:0 ── */
.header .hdr-link--fde {
  flex-shrink: 0;
  white-space: nowrap;
}

.header .hdr-link--fde .hdr-link__text--short {
  display: none;
}

@media (max-width: 860px) {
  .header .hdr-link--fde .hdr-link__text--full {
    display: none;
  }

  .header .hdr-link--fde .hdr-link__text--short {
    display: inline;
    font-size: 11px;
    font-weight: 700;
  }

  .header .hdr-link--github .hdr-link__text--full {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

a.hdr-link.hdr-link--fde {
  color: #e9d5ff;
  background: var(--purple-dim, rgba(163, 113, 247, 0.1));
  border-color: rgba(163, 113, 247, 0.45);
}

[data-theme="light"] a.hdr-link.hdr-link--fde,
[data-theme="light"] .header .hdr-link--fde {
  color: var(--purple, #7c3aed);
  background: var(--purple-dim, rgba(124, 58, 237, 0.08));
  border-color: rgba(124, 58, 237, 0.45);
}

a.hdr-link.hdr-link--fde:hover,
a.hdr-link.hdr-link--fde:focus-visible {
  color: #fff;
  background: var(--purple, #a371f7);
  border-color: var(--purple, #a371f7);
}

[data-theme="light"] a.hdr-link.hdr-link--fde:hover,
[data-theme="light"] a.hdr-link.hdr-link--fde:focus-visible {
  color: #fff;
  background: var(--purple, #7c3aed);
  border-color: var(--purple, #7c3aed);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .nav-link:hover,
  .hero-cta-primary:hover,
  .fde-promo__btn:hover {
    transform: none;
  }
}