/* ==========================================================================
   divorcd guides: "In short", guide actions, reading progress, print
   Loaded after styles.css, experience.css and cinema.css on every guide
   ========================================================================== */

/* ---------- In short: the guide's key facts and actions, after the opening answer ---------- */
.in-short {
  margin: 28px 0 32px;
  padding: 24px 28px 22px;
  background: color-mix(in srgb, #FFFFFF 55%, var(--page, var(--white)));
  border: 1px solid var(--line);
  border-radius: 20px;
}
.guide-body .article .in-short h2 {
  margin: 0 0 12px;
  font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.02em;
  color: var(--ink);
  scroll-margin-top: 100px;
}
.guide-body .article .in-short ul { list-style: none; margin: 0; padding: 0; }
.guide-body .article .in-short li {
  position: relative;
  margin: 0; padding: 0 0 0 22px;
  font-size: 16.5px; line-height: 1.6; color: #34312C;
}
.guide-body .article .in-short li + li { margin-top: 10px; }
.in-short li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold);
}
@media (max-width: 600px) {
  .in-short { padding: 20px 20px 18px; border-radius: 16px; margin: 24px 0 28px; }
  .guide-body .article .in-short li { font-size: 16px; }
}

/* ---------- Guide actions in the hero: save to plan, print ---------- */
.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.guide-actions .btn--ghost {
  background: rgba(244,240,234,.06);
  color: var(--cream);
  border: 1px solid rgba(244,240,234,.36);
  padding: 10px 16px;
}
.guide-actions .btn--ghost:hover { border-color: var(--cream); background: rgba(244,240,234,.12); }
.guide-actions .btn--ghost:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Saved state, set by js/plan-save.js */
.guide-actions .save-guide[aria-pressed="true"],
.guide-actions .save-guide.is-saved { background: var(--gold); border-color: var(--gold); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .guide-actions .btn:hover { transform: none; } }

/* ---------- Reading progress: thin amber line along the bottom of the header ---------- */
.read-progress { display: none; }   /* the older full-width bar from cinema.js; guides use the one below */
.guide-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity .3s ease;
}
.guide-progress--top { position: fixed; top: 0; bottom: auto; z-index: 120; }
.guide-progress.is-active { opacity: 1; }
.guide-progress i {
  display: block; height: 100%; width: 100%;
  background: var(--gold);
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .12s linear;
}
.guide-progress.is-still, .guide-progress.is-still i { transition: none; }
@media (prefers-reduced-motion: reduce) { .guide-progress, .guide-progress i { transition: none; } }

.print-only { display: none; }

/* ==========================================================================
   Print and save as PDF: an A4 document with the title, byline, In short,
   the guide, its tables, FAQs and sources, and where it came from
   ========================================================================== */
@page {
  size: A4;
  margin: 18mm 18mm 20mm;
  @bottom-left { content: "divorcd.com"; font: 600 7.5pt 'Plus Jakarta Sans', sans-serif; color: #8C867D; }
  @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 500 7.5pt 'Plus Jakarta Sans', sans-serif; color: #8C867D; }
}

@media print {
  html, body { background: #FFFFFF !important; }
  html { scroll-behavior: auto; }
  body {
    font-size: 10.5pt; line-height: 1.55; color: #1E1C1A;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body::after { display: none !important; }   /* paper grain */

  /* Not on paper */
  .skip-link, .site-header, .site-footer, .quick-exit, .guide-progress, .read-progress,
  .cine-media, .cine-shade, .cine-cue, .cine::after, .breadcrumbs, .guide-actions,
  .toc, .article-cta, .match-note, .workbook-box, .tool-embed, .tool-cta,
  .related, #related, .search-veil, .search-panel, .compare-tray, .gi-peek,
  .signoff, .pack, main > section:not(.cine):not(.guide-body), body > :not(main) { display: none !important; }

  .print-only { display: block !important; }
  /* The calculator doesn't print, so neither do its heading and instruction */
  .guide-body .article h2:has(+ p + .tool-embed), .guide-body .article p:has(+ .tool-embed) { display: none !important; }

  /* Anything waiting to animate in is shown as it is */
  [data-reveal], .split .w > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .split .w { overflow: visible !important; }

  /* Title block */
  .cine, .cine--guide {
    display: block; min-height: 0 !important; padding: 0 !important; margin: 0;
    background: none !important; color: #1E1C1A; overflow: visible; isolation: auto;
  }
  .cine .container, .guide-body .container { max-width: none; padding: 0; }
  .cine-inner > * { max-width: none; }
  .print-mast {
    display: flex !important; justify-content: space-between; align-items: baseline;
    padding-bottom: 9pt; margin-bottom: 20pt; border-bottom: 1.5pt solid var(--ink);
  }
  .print-mast-logo { font-weight: 800; font-size: 17pt; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
  .print-mast-logo span { display: inline-block; color: var(--gold); transform: translate(1.5pt, -1.5pt) rotate(8deg); }
  .print-mast-url { font-size: 8pt; color: var(--slate); }
  .cine h1, .cine--guide h1 {
    color: var(--ink); font-size: 25pt; line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 10pt;
  }
  .cine h1 em { color: var(--gold-deep); }
  .cine .lede { color: #4A4640; font-size: 12pt; line-height: 1.5; margin: 0 0 12pt; max-width: none; }
  .cine .guide-byline { color: var(--slate); font-size: 8.5pt; gap: 3pt 16pt; padding-bottom: 14pt; border-bottom: .75pt solid var(--line); }
  .cine .guide-byline strong { color: var(--ink); }
  .cine .guide-byline a { text-decoration: none; color: inherit; }
  .cine .guide-byline span + span::before { margin: 0 9pt 2pt -11pt; }

  /* Body */
  .section.guide-body { padding: 16pt 0 0 !important; background: none !important; }
  .article-wrap { display: block; }
  .guide-body .article { max-width: none; font-size: 10.5pt; color: #1E1C1A; }
  .guide-body .article p { line-height: 1.6; margin: 0 0 8pt; orphans: 3; widows: 3; }
  .guide-body .article h2 { font-size: 15pt; margin: 18pt 0 6pt; break-after: avoid; page-break-after: avoid; }
  .guide-body .article h3 { font-size: 11.5pt; margin: 12pt 0 4pt; break-after: avoid; page-break-after: avoid; }
  .guide-body .article a { color: var(--gold-deep); text-decoration: none; }
  .guide-body .article li { margin-bottom: 4pt; }
  .guide-body .article ul, .guide-body .article ol { margin: 0 0 8pt; }

  .in-short { background: #FBF6EF !important; border: .75pt solid var(--line); border-radius: 8pt; padding: 11pt 14pt 10pt; margin: 12pt 0 14pt; break-inside: avoid; }
  .guide-body .article .in-short h2 { font-size: 11.5pt; margin: 0 0 6pt; }
  .guide-body .article .in-short li { font-size: 10pt; line-height: 1.5; padding-left: 14pt; }
  .guide-body .article .in-short li + li { margin-top: 4pt; }
  .in-short li::before { width: 4.5pt; height: 4.5pt; top: .6em; left: 1pt; }

  .callout { background: none !important; border: .75pt solid var(--line); border-radius: 6pt; padding: 9pt 12pt; margin: 12pt 0; break-inside: avoid; }
  .guide-nation { background: none !important; border: 0; border-left: 1.5pt solid var(--line); border-radius: 0; padding: 0 0 0 10pt; margin: 0 0 12pt; break-inside: avoid; }
  .guide-nation p { font-size: 8.5pt !important; line-height: 1.5; color: var(--slate); }
  .guide-nation a { color: inherit !important; font-weight: 600; }

  .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6pt; margin: 10pt 0 14pt; break-inside: avoid; }
  .fact { background: none !important; color: var(--ink); border: .75pt solid var(--line); border-radius: 6pt; padding: 8pt 9pt; }
  .fact::before, .fact::after { display: none !important; }
  .fact b { color: var(--gold-deep); font-size: 15pt; }
  .fact span { color: #34312C; font-size: 8.5pt; margin-top: 4pt; }
  .fact small { color: var(--slate); font-size: 7.5pt; margin-top: 3pt; }

  .pull { font-size: 12pt; border-left-width: 2pt; padding: 2pt 0 2pt 10pt; margin: 12pt 0; break-inside: avoid; }

  .guide-table { font-size: 9pt; margin: 8pt 0 12pt; }
  .guide-table th, .guide-table td { padding: 5pt 7pt; }
  .guide-table th { font-size: 8pt; background: #F6EEE4 !important; }
  .guide-table td:last-child { white-space: normal; }
  .guide-table tr { break-inside: avoid; page-break-inside: avoid; }
  .guide-table thead { display: table-header-group; }
  .data-table-wrap { overflow: visible; }
  .data-table-wrap .guide-table { min-width: 0; }

  .timeline::before { background: var(--stone) !important; }
  .timeline li { break-inside: avoid; padding-bottom: 12pt; }
  .timeline p { font-size: 9.5pt; }

  /* FAQs print open (js/guide.js opens them before printing) */
  .faq-block details { break-inside: avoid; }
  .faq-block details::details-content { content-visibility: visible; display: block; }
  .faq-block summary { padding: 8pt 0 3pt; font-size: 10.5pt; }
  .faq-block summary::after { display: none; }
  .faq-block details p { margin: 0 0 8pt; }

  /* Sources with their full addresses */
  .sources { font-size: 8.5pt; color: #4A4640; padding-left: 14pt; }
  .sources li { margin-bottom: 4pt; break-inside: avoid; }
  .guide-body .article .sources a { color: #1E1C1A; font-weight: 500; }
  .sources a[href^="http"]::after {
    content: " " attr(href);
    color: var(--slate); font-weight: 400; word-break: break-all; overflow-wrap: anywhere;
  }

  .guide-disclaimer { font-size: 8.5pt; margin-top: 16pt; padding-top: 8pt; break-inside: avoid; }
  .print-foot {
    margin: 10pt 0 0 !important; padding-top: 8pt; border-top: 1.5pt solid var(--ink);
    font-size: 8.5pt; font-weight: 600; color: var(--ink);
  }

  img { break-inside: avoid; }
}