/* ==========================================================================
   Pages SEO content layer — the bento grid rendered by site.js below a page's
   own UI. Loaded only on routes that actually have CMS blocks.

   Design tokens come from themes.css, so every one of the 12 themes is picked
   up automatically with no extra rules. The block markup itself is emitted by
   seo-render.js; this file only handles layout and skin.
   ========================================================================== */

.seo-wrap {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  background: var(--bg);
  color: var(--text-mid);
  border-top: 1px solid var(--grid-line);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}

.seo-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 22px 72px;
  cursor: auto;
  -webkit-user-select: text;
  user-select: text;
}

/* ---- headings ---------------------------------------------------------- */
.seo-h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(30px, 5.2vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  color: var(--text-bright);
  margin: 0 0 10px;
}
.seo-sub {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0 0 22px;
}
.seo-h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(21px, 3vw, 27px);
  line-height: 1.2;
  color: var(--text-bright);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--grid-line);
}
.seo-h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  color: var(--text-bright);
  margin: 0 0 8px;
}
.seo-lead {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-mid);
  margin: 0 0 20px;
}

/* ---- prose -------------------------------------------------------------
   No max-width here on purpose: the paragraphs used to be capped at 74ch
   (~536px) while the bento grid below runs the full 1120px, which left the
   copy looking like a narrow column against full-width cards. Prose now
   spans the same width as the grid. */
.seo-block p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-mid);
  margin: 0 0 13px;
}
.seo-block p:last-child { margin-bottom: 0; }

.seo-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.seo-list li {
  position: relative;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-mid);
  padding: 5px 0 5px 22px;
}
.seo-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  /* vertically centred on the first line box: 5px padding + half of
     (16px * 1.7) - half the 6px marker */
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--orange);
}
.seo-list-accent li::before { background: var(--text-dim); }

/* ---- block rhythm ------------------------------------------------------ */
.seo-block { margin: 0 0 46px; }
.seo-block:last-child { margin-bottom: 0; }
  /* the renderer emits seo-block-<type>, so the intro hook is seo-block-intro */
  .seo-intro, .seo-block-intro { margin-bottom: 52px; }
.seo-intro-head { border-left: 3px solid var(--orange); padding-left: 18px; margin-bottom: 22px; }

/* ---- bento grid -------------------------------------------------------- */
.seo-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  align-items: stretch;
  margin: 4px 0 0;
}
.seo-bento > * {
  /* static first so a browser that cannot resolve var() in a grid-line still
     lays the grid out; the inline --span then overrides per card */
  grid-column: span 4;
  grid-column: span var(--span, 4);
}

.seo-card,
.seo-link {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 20px 22px;
  background: var(--panel-bg);
  border: 1px solid var(--grid-line);
  border-radius: 12px;
}
.seo-card p,
.seo-link p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-mid);
  margin: 0 0 10px;
  max-width: none;
}
.seo-card .seo-list { margin-top: 12px; }
.seo-card p:last-of-type, .seo-card .seo-list:last-child { margin-bottom: 0; }

.seo-card-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 0 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--grid-line);
  color: var(--orange);
}
.seo-ico { width: 18px; height: 18px; display: block; }

/* ---- CTA --------------------------------------------------------------- */
.seo-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-top: 18px;
  padding: 11px 18px;
  border-radius: 9px;
  background: var(--orange);
  color: #101010;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.seo-cta:hover { filter: brightness(1.08); text-decoration: none; }
.seo-cta:active { transform: translateY(1px); }
.seo-cta:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.seo-cta-ar { font-size: 17px; line-height: 1; }
/* margin-top:auto pins the card button to the bottom of the .seo-card flex
   column, so sibling cards of different content length still line their
   buttons up. Previously this was a flat 14px, which left the button stuck to
   the prose with all the slack dumped at the bottom of the shorter card. */
.seo-cta-sm { margin-top: auto; padding: 9px 15px; font-size: 13px; }
/* ...but `auto` collapses to 0 when the copy fills the card, so these two
   rules restore a 14px floor under the last prose element and stop the button
   from touching the text. .seo-card p:last-of-type at line ~152 zeroes this
   margin, hence the override. Only the two cards that own a .seo-cta-sm match. */
.seo-card:has(> .seo-cta-sm) > p:last-of-type,
.seo-card:has(> .seo-cta-sm) > .seo-list:last-of-type { margin-bottom: 14px; }

/* ---- internal link cards ---------------------------------------------- */
.seo-bento-links > * { grid-column: span var(--span, 4); }
.seo-link {
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.seo-link:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
  text-decoration: none;
}
.seo-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.seo-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 14px;
  color: var(--orange);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
}

/* ---- FAQ --------------------------------------------------------------- */
.seo-faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  /* all six rows collapse to the tallest answer, so the twelve boxes read as
     one even matrix. This used to be `align-items: start`, which let every box
     shrink to its own content and left the grid visibly ragged. */
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.seo-faq-item {
  padding: 18px 20px;
  background: var(--panel-bg);
  border: 1px solid var(--grid-line);
  border-radius: 12px;
  break-inside: avoid;
}
.seo-faq-q { color: var(--orange); font-size: 15.5px; margin: 0 0 8px; }
.seo-faq-a { font-size: 14px; line-height: 1.7; color: var(--text-mid); margin: 0; }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .seo-inner { padding: 44px 18px 56px; }
  .seo-bento { grid-template-columns: repeat(6, 1fr); }
  .seo-bento > * { grid-column: span 3; }
  .seo-bento > .seo-card[style*="--span:6"],
  .seo-bento > .seo-link[style*="--span:6"] { grid-column: span 6; }
  /* single column: back to natural heights. Forcing every answer to the
     tallest would add a big dead gap under each short one on a phone. */
  .seo-faq { grid-template-columns: 1fr; grid-auto-rows: auto; align-items: start; }
}

@media (max-width: 620px) {
  .seo-inner { padding: 36px 15px 48px; }
  .seo-block { margin-bottom: 36px; }
  .seo-intro, .seo-block-intro { margin-bottom: 40px; }
  .seo-intro-head { padding-left: 14px; }
  .seo-bento { grid-template-columns: 1fr; gap: 12px; }
  .seo-bento > * { grid-column: 1 / -1 !important; }
  .seo-card, .seo-link, .seo-faq-item { padding: 17px 16px 19px; }
  /* full-width CTA on small screens */
  .seo-cta { align-self: stretch; justify-content: center; }
  .seo-h1 { margin-bottom: 8px; }
  /* 16px body copy is roomy on a 390px phone, step it back one notch */
  .seo-block p, .seo-lead, .seo-sub, .seo-list li { font-size: 15px; }
  .seo-list li::before { top: 14px; }
}

/* Further reading on tool pages (posts that ticked "Show on tool pages") */
.mt-further-wrap { background: var(--panel-bg); border-top: 1px solid var(--grid-line); border-bottom: 1px solid var(--grid-line); }
.mt-further-wrap .seo-inner { padding-top: 44px; padding-bottom: 48px; }
.mt-further-wrap + .mt-toolinfo { border-top: 0; }
.mtf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mt-further h2 { font-family: var(--display); font-weight: 700; font-size: clamp(18px, 2.2vw, 22px); letter-spacing: .5px; color: var(--text-bright); margin: 0; }
.mtf-all { font-size: 13px; color: var(--orange); text-decoration: none; }
.mtf-all:hover, .mtf-all:focus-visible { text-decoration: underline; }
.mtf-sub { margin: 6px 0 0; font-size: 13px; color: var(--text-dim); }
.mtf-grid { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.mtf-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 10px; background: var(--bg); border: 1px solid var(--grid-line); color: var(--text-mid); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.mtf-card:hover, .mtf-card:focus-visible { border-color: var(--orange); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.3); outline: none; }
.mtf-cover { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(255,255,255,0.04); }
.mtf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtf-cover-empty { display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 38px; color: var(--orange);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 10px, transparent 10px 20px); }
.mtf-cover-empty span { opacity: .6; }
.mtf-body { display: flex; flex-direction: column; gap: 7px; flex: 1; padding: 14px 16px 16px; }
.mtf-cat { align-self: flex-start; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--orange); border: 1px solid var(--orange); }
.mtf-title { font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--text-bright); }
.mtf-ex { font-size: 13px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mtf-meta { font-size: 11.5px; color: var(--text-dim); }
.mtf-go { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 600; color: var(--orange); }

/* ---- breadcrumb above a tool's content (site.js applyToolInfo) ---- */
.mt-crumbs { border-top: 1px solid var(--grid-line); }
.mt-crumbs .seo-inner { padding-top: 22px; padding-bottom: 0; }
.crumbs-ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; font-size: 12px; color: var(--text-dim); }
.crumbs-ol li + li::before { content: "›"; margin-right: 4px; }
.crumbs-ol a { color: var(--text-mid); text-decoration: none; }
.crumbs-ol a:hover, .crumbs-ol a:focus-visible { color: var(--orange); }
.mt-crumbs + .seo-wrap { border-top: 0; }

/* ---- "Rate this tool" + last updated ---- */
.mt-toolinfo .seo-inner { padding-top: 34px; padding-bottom: 44px; }
.seo-wrap + .mt-toolinfo { border-top: 0; }
.ti-h { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--text-bright); margin: 0 0 6px; }
.ti-summary { margin: 0 0 10px; font-size: 13px; color: var(--text-mid); }
.ti-stars { display: flex; gap: 4px; }
.ti-stars button { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--grid-line); background: transparent; color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer; }
.ti-stars button.on { color: var(--orange); border-color: var(--orange); }
.ti-stars button:hover, .ti-stars button:focus-visible { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px var(--orange-glow); }
.ti-msg { min-height: 1.3em; margin: 8px 0 0; font-size: 12.5px; color: var(--text-mid); }
.ti-updated { margin: 18px 0 0; font-size: 12px; color: var(--text-dim); }

/* ---- homepage sections (Admin > Homepage) ---- */
.mt-home .seo-inner { display: grid; gap: 44px; }
.mh-h { font-family: var(--display); font-weight: 700; font-size: clamp(18px, 2.2vw, 24px); color: var(--text-bright); margin: 0 0 16px; }
.mh-tools, .mh-guides { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.mh-tool, .mh-guide { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 12px; background: var(--panel-bg); border: 1px solid var(--grid-line); color: var(--text-mid); text-decoration: none; transition: border-color .15s, transform .15s; }
.mh-tool:hover, .mh-guide:hover, .mh-tool:focus-visible, .mh-guide:focus-visible { border-color: var(--orange); transform: translateY(-2px); outline: none; }
.mh-tool b, .mh-guide b { color: var(--text-bright); font-size: 15px; }
.mh-tool span, .mh-guide span { font-size: 13px; line-height: 1.55; }
.mh-icon { font-size: 22px !important; }
.mh-cat { font-size: 10.5px !important; letter-spacing: 1.2px; text-transform: uppercase; color: var(--orange); }
.mh-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.mh-values h3 { font-family: var(--display); font-size: 15px; color: var(--text-bright); margin: 0 0 6px; }
.mh-values p { margin: 0 0 8px; line-height: 1.65; font-size: 13.5px; }
.mh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 0; }
.mh-stats div { padding: 16px 18px; border-radius: 12px; background: var(--panel-bg); border: 1px solid var(--grid-line); }
.mh-stats dt { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-dim); }
.mh-stats dd { margin: 6px 0 0; font-family: var(--display); font-weight: 900; font-size: 26px; color: var(--orange); }
.mh-included { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 18px; font-size: 13.5px; }
.mh-included li::before { content: "✓"; margin-right: 8px; color: var(--orange); }
.mh-more { margin: 12px 0 0; font-size: 13px; }
.mh-more a { color: var(--orange); }
.mh-faq details { border-top: 1px solid var(--grid-line); padding: 12px 0; }
.mh-faq summary { cursor: pointer; color: var(--text-bright); font-weight: 600; }
.mh-faq summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.mh-faq p { margin: 8px 0 0; line-height: 1.65; font-size: 13.5px; }
.mh-cta { text-align: center; padding: 30px 20px; border-radius: 14px; border: 1px solid var(--orange); background: var(--panel-bg); }
.mh-cta p { margin: 0 0 16px; }
.mh-btn { display: inline-block; padding: 11px 24px; border-radius: 9px; background: var(--orange); color: #000; font-weight: 700; text-decoration: none; }
.mh-btn:focus-visible { outline: 2px solid var(--text-bright); outline-offset: 3px; }