/* SEO / AEO pages: /schengen-visa, the 29 country guides and the /tools/* pages
   (src/routes/seo-pages.js). Loaded after app.css; tokens only, no new colours,
   so dark mode and the owner's brand colour follow app.css. */

/* Answer-first box under the hero: the 40-60 word direct answer. */
.seo-answer { background: var(--bg-raised); border-radius: var(--r-md); box-shadow: var(--shadow-1), var(--ring-card); border-top: 4px solid var(--c-primary-accent); padding: var(--sp-5); margin: 0 0 var(--sp-8); max-width: var(--page-narrow); }
.seo-answer p { margin: 0; color: var(--ink); }
.seo-answer .seo-answer__label { font: var(--fw-bold) var(--fs-xs)/1.2 var(--font-body); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-primary-text); margin-bottom: var(--sp-2); }

/* Question sections: the first paragraph under each H2 is the direct answer. */
.seo-qa { margin-top: var(--sp-12); }
.seo-qa h2 { margin-top: 0; }
.seo-qa__answer { color: var(--ink); font-weight: var(--fw-medium); }
.seo-callout { background: var(--bg-mint); border-left: 3px solid var(--c-primary-accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--sp-3) var(--sp-4); }
.seo-note { background: var(--bg-sunken); border-radius: var(--r-sm); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-body); }
.doc-article .seo-src, .seo-src { font-size: var(--fs-sm); color: var(--ink-4); line-height: var(--lh-body); margin-top: var(--sp-3); }
.seo-src a { color: var(--c-primary-text); text-decoration: underline; text-underline-offset: 3px; }
.seo-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.seo-cta { margin: var(--sp-8) 0 0; }

/* Key facts under the answer on a country page. */
.seo-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-6); }
.seo-facts > div { background: var(--bg-raised); border-radius: var(--r-md); box-shadow: var(--ring-card); padding: var(--sp-4); min-width: 0; }
.seo-facts dt { font-size: var(--fs-sm); color: var(--ink-3); margin: 0 0 var(--sp-1); }
.seo-facts dd { margin: 0; font: var(--fw-bold) var(--fs-h4)/var(--lh-ui) var(--font-body); color: var(--ink); overflow-wrap: anywhere; }
.seo-facts dd small { display: block; font-weight: var(--fw-regular); font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--sp-1); }

/* Tables scroll inside their own box on a phone; the page never scrolls sideways.
   The article column is a grid item, so it must be allowed to shrink below its content. */
.doc-body > div, .doc-article { min-width: 0; }
.seo-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: var(--sp-6); border-radius: var(--r-md); box-shadow: var(--ring-card); }
.doc-article .seo-table table { margin: 0; min-width: 20rem; }
.seo-table caption { caption-side: top; text-align: left; font-size: var(--fs-sm); color: var(--ink-3); padding: var(--sp-3) var(--sp-4); background: var(--bg-raised); }
.seo-table th[scope=row] { font-weight: var(--fw-semibold); background: none; font-size: inherit; color: var(--ink); }
.seo-table th[scope=row] a { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ink); text-decoration: none; }
.seo-table th[scope=row] a:hover { color: var(--c-primary-text); text-decoration: underline; }
.seo-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Country grid, nearby chips, tool cards, post lists. */
.seo-grid, .seo-chips, .seo-cards, .seo-links { list-style: none; padding: 0 !important; margin: var(--sp-4) 0 0; }
.seo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: var(--sp-2); }
.seo-grid li, .seo-chips li, .seo-cards li, .seo-links li { margin: 0; }
.seo-grid li::marker, .seo-chips li::marker, .seo-cards li::marker, .seo-links li::marker { content: none; }
.seo-grid a, .seo-chips a { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--bg-raised); box-shadow: var(--ring-card); color: var(--ink); text-decoration: none; font-weight: var(--fw-medium); }
.seo-grid a:hover, .seo-chips a:hover { background: var(--c-primary-soft); color: var(--c-primary-text); }
.seo-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.seo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--sp-3); }
.seo-cards a { display: grid; gap: var(--sp-1); height: 100%; padding: var(--sp-4); border-radius: var(--r-md); background: var(--bg-raised); box-shadow: var(--shadow-1), var(--ring-card); color: var(--ink); text-decoration: none; }
.seo-cards a:hover { box-shadow: var(--shadow-2), var(--ring-card); }
.seo-cards strong { color: var(--c-primary-text); }
.seo-cards span { font-size: var(--fs-sm); color: var(--ink-3); line-height: var(--lh-body); }
.seo-links { display: grid; gap: var(--sp-3); }
.seo-links a { font-weight: var(--fw-semibold); }
.seo-links span { display: block; font-size: var(--fs-sm); color: var(--ink-3); line-height: var(--lh-body); }

/* Visible FAQ: always open, so the FAQPage markup matches what a reader sees. */
.seo-faq { display: grid; border-top: 1px solid var(--line-2); }
.seo-faq__item { border-bottom: 1px solid var(--line-2); padding: var(--sp-4) 0; }
.doc-article .seo-faq__q { font: var(--fw-semibold) var(--fs-h4)/var(--lh-ui) var(--font-body); margin: 0 0 var(--sp-2); }
.seo-faq__a { margin: 0; color: var(--ink-2); max-width: var(--measure); }

/* Tool mount on the tool pages and country pages (tools.js hydrates it). */
.seo-tool { display: grid; gap: var(--sp-4); background: var(--bg-raised); border-radius: var(--r-lg); box-shadow: var(--ring-card); border-left: 4px solid var(--c-primary-accent); padding: var(--sp-5); margin-block: var(--sp-6); min-width: 0; }
.seo-tool .hint { margin: 0; color: var(--ink-3); }
.doc-body--full .seo-tool { max-width: var(--page-narrow); }
.doc-body--full .doc-article > .seo-answer, .doc-body--full .doc-article > .seo-qa { max-width: var(--page-narrow); }

/* The 29 state names as a light comma list. */
.seo-names { list-style: none; padding: 0 !important; margin: 0 0 var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-1) 0; }
.doc-article .seo-names li { margin: 0; }
.seo-names li::marker { content: none; }
.seo-names li:not(:last-child)::after { content: ',\00a0'; }

.crumbs [aria-current=page] { color: var(--ink-3); }

@media (max-width: 480px) {
  .seo-answer, .seo-tool { padding: var(--sp-4); }
  .seo-table th, .seo-table td { padding: .6rem .65rem; }
}

@media print {
  .seo-tool, .seo-cta, .seo-actions, .seo-cards { display: none !important; }
}