/* ==========================================
   SITE CHROME — header and footer
   Matches the homepage panel style: a floating rounded header and an inset
   rounded footer, 16px from the page edges. Loaded from the header partial
   (and index.html), after styles.css, so these rules win. A new file rather
   than edits to styles.css, which browsers cache for a year.
   No left-edge accent lines.
   ========================================== */

/* ---------- Header: a floating bar ---------- */
.site-nav {
  position: sticky;
  top: 12px;
  z-index: 100;
  height: 60px;
  margin: 12px 16px 0;
  padding: 0 10px 0 28px;
  border: 1px solid rgba(28, 28, 26, 0.08);
  border-radius: 999px;
  background: rgba(246, 245, 241, 0.82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 2px rgba(28, 28, 26, 0.03);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.site-nav.is-scrolled {
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 30px rgba(28, 28, 26, 0.08);
}
.site-nav .nav-logo { font-size: 22px; }
.site-nav .nav-right { gap: 28px; }
.site-nav .nav-link { font-size: 14px; }
/* Four links plus the badge: tighten the spacing on narrow desktops and tablets */
@media (min-width: 769px) and (max-width: 960px) {
  .site-nav .nav-right { gap: 18px; }
}
.site-nav .app-badge { height: 40px; padding: 5px 13px 5px 10px; border-radius: 999px; border-color: #000; }
.site-nav .app-badge svg { width: 18px; height: 21px; }
.site-nav .app-badge .badge-small { font-size: 8.5px; }
.site-nav .app-badge .badge-large { font-size: 15px; }

@media (max-width: 768px) {
  .site-nav { margin: 10px 10px 0; top: 10px; height: 56px; padding: 0 8px 0 20px; }
  .site-nav .nav-right {
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 20px;
    border: 1px solid rgba(28, 28, 26, 0.08);
    border-radius: 22px;
    background: #FFFFFF;
    box-shadow: 0 16px 40px rgba(28, 28, 26, 0.12);
  }
  .site-nav .app-badge { align-self: flex-start; }
  /* Links left-aligned like the badge, as ruled rows */
  .site-nav .nav-right { align-items: stretch; gap: 0; }
  .site-nav .nav-right .nav-link { text-align: left; font-size: 17px; padding: 14px 4px; border-bottom: 1px solid rgba(28, 28, 26, 0.08); }
  .site-nav .nav-right .app-badge { margin-top: 18px; }
}

/* ---------- Footer: an inset dark panel ---------- */
.site-footer {
  margin: 0 16px 16px;
  padding: 80px 40px 0;
  border-radius: 28px;
  background: #1C1C1A;
}
/* On the site's 3-column grid, like the panels above it: the brand block in
   column 1, the three link lists sharing columns 2-3 */
.site-footer .footer-main, .site-footer .footer-bottom { max-width: 1200px; margin-left: auto; margin-right: auto; }
.site-footer .footer-main { grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 72px; }
.site-footer .footer-links { grid-column: 2 / span 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.site-footer .footer-col ul { gap: 10px; }
.site-footer .footer-col ul li a { white-space: normal; }
.site-footer .footer-col-label { margin-bottom: 18px; }
.site-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 28px 0; color: rgba(255, 255, 255, 0.4); }
.site-footer .footer-legal { display: flex; gap: 24px; }
.site-footer .footer-legal a { color: rgba(255, 255, 255, 0.55); text-decoration: none; }
.site-footer .footer-legal a:hover { color: #FFFFFF; }
/* Tablets and small laptops: brand on top, the three lists across the full width below */
@media (min-width: 769px) and (max-width: 1100px) {
  .site-footer .footer-main { grid-template-columns: 1fr; gap: 48px; }
  .site-footer .footer-brand { grid-column: auto; }
  .site-footer .footer-links { grid-column: auto; }
}
/* styles.css has a legacy .footer-brand rule that makes the whole block bold
   (EB Garamond is only loaded at 400/500, so 700 is a faked bold). */
.site-footer .footer-brand { font-weight: 400; font-size: 16px; }
.site-footer .footer-statement {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.2px;
  color: #FFFFFF;
  margin: 24px 0 8px;
}
.site-footer .footer-statement em { font-style: italic; color: rgba(255, 255, 255, 0.6); }
.site-footer .footer-tagline { font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, 0.6); margin-bottom: 28px; }
.site-footer .footer-brand .app-badge { display: inline-flex; }
.site-footer .footer-col-label { color: rgba(255, 255, 255, 0.45); }

@media (max-width: 768px) {
  .site-footer { margin: 0 10px 10px; padding: 48px 24px 0; border-radius: 22px; }
  .site-footer .footer-statement { font-size: 26px; }
  .site-footer .footer-main { grid-template-columns: 1fr; gap: 40px; padding-bottom: 48px; }
  .site-footer .footer-brand { grid-column: auto; margin: 0; }
  /* Free tools and Company side by side; Guides below */
  .site-footer .footer-links { grid-column: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 20px; }
  .site-footer .footer-links .footer-col:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .site-footer .footer-col ul li a { font-size: 14px; }
  .site-footer .footer-col-label { font-size: 10px; margin-bottom: 14px; }
  .site-footer .footer-bottom { padding: 22px 0 26px; }
}

/* ==========================================
   Guides and the comparison page: "Further reading", written by build-blog.js
   from automation/related.js (relevant articles, spread so every article gets
   linked). Plain rows: topic, title, one line of description.
   ========================================== */
.further-reading .fr-list { list-style: none; margin: 0; padding: 0; display: grid; }
.further-reading .fr-list li { border-top: 1px solid rgba(28, 28, 26, 0.10); }
.further-reading .fr-list li:last-child { border-bottom: 1px solid rgba(28, 28, 26, 0.10); }
.further-reading .fr-list a { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 18px 0; text-decoration: none; color: inherit; }
.further-reading .fr-list a::after { content: '\2192'; grid-column: 2; grid-row: 1 / span 3; align-self: center; color: #0D8268; font-size: 18px; transition: transform .2s ease; }
.further-reading .fr-list a:hover::after { transform: translateX(3px); }
.further-reading .fr-topic { grid-column: 1; font-size: 11px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: #0D8268; }
.further-reading .fr-title { grid-column: 1; font-family: 'EB Garamond', Georgia, serif; font-size: 21px; line-height: 1.25; color: #1C1C1A; }
.further-reading .fr-list a:hover .fr-title { color: #0D8268; }
.further-reading .fr-desc { grid-column: 1; font-size: 14px; line-height: 1.55; color: #6B6B67; }
.further-reading .fr-list a:focus-visible { outline: 2px solid #0D8268; outline-offset: 4px; border-radius: 6px; }
@media (max-width: 768px) {
  .further-reading .fr-title { font-size: 19px; }
  .further-reading .fr-list a { padding: 16px 0; gap: 4px 12px; }
}

/* State child support calculators under a guide's calculator call-out */
.lp-section .container > .state-calc-links { grid-column: 1 / -1; }
.state-calc-links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.state-calc-links a { display: inline-block; padding: 9px 16px; border: 1px solid var(--g-rule, #E4E2DC); border-radius: 999px; font-size: 14px; color: var(--g-ink, #1A1A18); text-decoration: none; transition: border-color .2s, color .2s; }
.state-calc-links a:hover, .state-calc-links a:focus-visible { border-color: var(--g-moss); color: var(--g-moss); }