/* ============================================================
   lytom-guides.css — Visual theme for Lytom guide/blog pages
   ============================================================ */

:root {
  --teal:        #0d9488;
  --teal-dark:   #0f766e;
  --teal-light:  #f0fdfa;
  --charcoal:    #3c4147;
  --charcoal-mid: #4e555e;
  --on-dark:     #ffffff;
  --on-dark-sub: rgba(255, 255, 255, 0.68);
  --on-dark-muted: rgba(255, 255, 255, 0.45);
  --card-border: #e2e8f0;
  --card-bg:     #ffffff;
  --band-bg:     #f8fafc;
}

body {
  background: #ffffff;
}

a { color: var(--teal-dark); }
a:visited { color: var(--teal-dark); }
a:hover { color: var(--teal); }

::selection {
  background: var(--teal-light);
  color: var(--text);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
details:focus-visible {
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.3);
}

/* --- Navigation ------------------------------------------- */

.site-nav {
  background: var(--charcoal);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.brand img {
  height: 40px;
  width: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}

.nav-link {
  color: var(--on-dark-sub);
}
.nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-dark);
  text-decoration: none;
}

.nav-signin > summary {
  color: var(--on-dark-sub);
}
.nav-signin > summary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--on-dark);
}
.nav-signin[open] > summary {
  background: rgba(255, 255, 255, 0.1);
  color: var(--on-dark);
}

.nav-signin-panel {
  background: #ffffff;
  border-color: var(--card-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.nav-signin-panel a:hover {
  background: var(--band-bg);
}

/* --- Buttons ---------------------------------------------- */

.btn-primary {
  background: var(--teal);
  color: #ffffff;
  border-color: var(--teal);
}
.btn-primary:visited { color: #ffffff; }
.btn-primary:hover {
  background: var(--teal-dark);
  color: #ffffff;
  border-color: var(--teal-dark);
}

.eyebrow {
  color: var(--teal);
}

/* --- Article content -------------------------------------- */

.article-body p a {
  text-decoration-color: rgba(13, 148, 136, 0.45);
}
.article-body p a:hover {
  text-decoration-color: var(--teal);
}

.article-body blockquote {
  border-left-color: var(--teal);
  background: var(--teal-light);
}

.article-toc {
  background: var(--band-bg);
  border-color: var(--card-border);
}

.article-callout {
  background: var(--teal-light);
  border-color: rgba(13, 148, 136, 0.25);
}

.article-callout .callout-label {
  color: var(--teal-dark);
}

.article-product-cta {
  background: var(--band-bg);
  border-color: var(--card-border);
}

.legislation-list {
  background: var(--band-bg);
  border-color: var(--card-border);
}

.faq-item {
  border-top-color: var(--card-border);
}
.faq-item:last-of-type {
  border-bottom-color: var(--card-border);
}

.faq-item > summary:focus-visible {
  outline-color: var(--teal);
}

.faq-item > p a {
  color: var(--teal-dark);
}

/* --- Related reading -------------------------------------- */

.related-reading {
  background: var(--band-bg);
  border-top-color: var(--card-border);
}

.related-reading .related-card {
  border-color: var(--card-border);
}

.related-reading .related-card:hover {
  border-color: var(--teal);
}

.related-reading .related-card .related-tag {
  color: var(--teal);
}

.related-reading .related-card .related-link {
  color: var(--teal-dark);
}

/* --- Footer ----------------------------------------------- */

.site-footer {
  border-top-color: var(--card-border);
}

.footer-brand .footer-signin a:hover,
.footer-grid a:hover,
.footer-bottom a:hover {
  color: var(--teal-dark);
}

/* --- Legal pages ------------------------------------------ */

.legal-highlight {
  background: var(--teal-light);
  border-color: var(--card-border);
  border-left-color: var(--teal);
}

.page-main a {
  color: var(--teal-dark);
}
.page-main a:hover {
  color: var(--teal);
}

/* --- Blog hub --------------------------------------------- */

.blog-hub-card {
  border-color: var(--card-border);
}

.blog-hub-card:hover {
  border-color: var(--teal);
}

.blog-hub-card .blog-card-tag {
  color: var(--teal-dark);
  background: var(--teal-light);
}

.blog-hub-card .blog-card-link {
  color: var(--teal-dark);
}

.nav-link[aria-current="page"] {
  color: var(--on-dark);
  background: rgba(255, 255, 255, 0.1);
}

.closing-cta {
  background: var(--charcoal);
}

.closing-cta h2 {
  color: var(--on-dark);
}

.closing-cta p.lead {
  color: var(--on-dark-sub);
}

.closing-cta .btn-secondary {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--on-dark);
  background: transparent;
}

.closing-cta .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--on-dark);
}

.closing-cta .btn-secondary:visited {
  color: var(--on-dark);
}