/* ==========================================================================
   SubInsider homepage (front page only, body.si-home).
   The reference look comes from astro.css (.hero, .cats-bg, .sec-head, .grid-cats,
   .grid-3, .trust-sec, .faq ...). This file only (1) neutralises the Elementor
   widget defaults that fight those styles and (2) styles the homepage-only
   sections (start here, specs, setup, troubleshooting, buying) in the same language.
   ========================================================================== */

/* ---- Elementor neutralisation ------------------------------------------ */
/* Heading widget forces line-height:1; restore the Astro heading rhythm. */
.si-home h1.elementor-heading-title,
.si-home h2.elementor-heading-title,
.si-home h3.elementor-heading-title { line-height: 1.15; }
/* Non-heading "heading" widgets (eyebrows) take the look of their wrapper class. */
.si-home p.elementor-heading-title { font: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; text-transform: inherit; }
/* Elementor removes underlines from every link inside .elementor; the reference keeps them. */
.si-home :where(.elementor) a { text-decoration-line: underline; }
/* site.css zeroes the first child's top margin in shortcode widgets; the hero form needs its gap. */
.si-home .elementor-widget.si-hero-search .hero__search { margin-top: var(--space-6); }
.si-home .elementor-widget-text-editor p:empty { display: none; }

/* ---- Shared section helpers -------------------------------------------- */
/* Elementor zeroes widget bottom margins inside containers; keep the .sec-head gap. */
.si-home .elementor-widget.elementor-widget.sec-head { margin-bottom: var(--space-5); }
.si-home .elementor-widget.elementor-widget.sec-head:has(+ .si-intro),
.si-home .e-con.sec-head:has(+ .si-intro) { margin-bottom: var(--space-3); }
.si-home .elementor-widget.elementor-widget.si-intro { margin-bottom: var(--space-5); max-width: 72ch; color: var(--text-muted); }
.si-home .elementor-widget.elementor-widget.si-closing { margin-top: var(--space-5); max-width: 80ch; color: var(--text-muted); }
.si-home .sec-head .elementor-widget-heading { width: auto; }
.si-home .si-sec-link { width: auto; flex: none; }
.si-home .si-sec-link a { text-decoration-line: none; }
.si-home .si-prose p + p { margin-top: var(--space-4); }
.si-home .si-prose p, .si-home .si-intro p, .si-home .si-closing p { text-wrap: pretty; }
.si-home .si-prose strong { color: var(--ink); font-weight: 700; }
.si-home .si-prose a, .si-home .si-closing a, .si-home .si-intro a { font-weight: 500; }
.si-home .cats-bg + .trust-sec { border-top: 0; }

/* ---- Start here: six numbered cards ------------------------------------ */
.si-home .elementor .e-con.si-start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.si-home .elementor .e-con.si-start-card {
  display: flex; flex-direction: column; gap: 0; padding: var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.si-home .e-con.si-start-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.si-home .si-num {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius);
  background: var(--brand-soft); color: var(--brand-600); border: 1px solid var(--brand-line);
  font-weight: 800; font-size: var(--step-0); line-height: 1;
}
.si-home .elementor-widget.si-start-card__title { margin-top: var(--space-4); }
.si-home .si-start-card__title h3 { font-size: var(--step-1); }
.si-home .si-start-card__title a { color: var(--ink); text-decoration-line: none; }
.si-home .si-start-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.si-home .si-start-card:hover .si-start-card__title a { color: var(--brand-600); }
.si-home .elementor-widget.si-start-card__text { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--step--1); line-height: 1.6; }

/* ---- Split layout: prose + side box (specs, setup, buying) -------------- */
.si-home .elementor .e-con.si-split { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-7); align-items: start; }
.si-home .elementor .e-con.si-split--rev { grid-template-columns: 400px minmax(0, 1fr); }
.si-home .si-split--rev > .si-box { order: -1; }
.si-home .elementor .e-con.si-box {
  position: sticky; top: calc(var(--header-h) + 1.5rem);
  padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
}
.si-home .si-specs .si-box, .si-home .si-trouble .si-box { background: var(--bg-subtle); }
.si-home .si-box__title h3 { font-size: var(--step-1); }
.si-home .elementor-widget.si-box__body { margin-top: var(--space-3); }

/* Glossary */
.si-home .si-gloss > div { padding-block: var(--space-3); border-top: 1px solid var(--border); }
.si-home .si-gloss > div:last-child { padding-bottom: 0; }
.si-home .si-gloss dt { font-weight: 700; line-height: 1.4; }
.si-home .si-gloss dt a { color: var(--ink); text-decoration-line: none; }
.si-home .si-gloss dt a::after { content: " \203A"; color: var(--brand-600); }
.si-home .si-gloss dt a:hover { color: var(--brand-600); }
.si-home .si-gloss dd { margin: .2rem 0 0; color: var(--text-muted); font-size: var(--step--1); line-height: 1.55; }

/* Numbered steps */
.si-home .si-steps { list-style: none; padding: 0; margin: 0; counter-reset: si-step; }
.si-home .si-steps li { counter-increment: si-step; position: relative; padding: var(--space-3) 0 var(--space-3) 46px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--step--1); line-height: 1.6; }
.si-home .si-steps li:last-child { padding-bottom: 0; }
.si-home .si-steps li::before {
  content: counter(si-step); position: absolute; left: 0; top: var(--space-3);
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-600); border: 1px solid var(--brand-line); font-weight: 800; font-size: .9rem;
}
.si-home .si-steps strong { display: block; color: var(--ink); font-size: var(--step-0); font-weight: 700; line-height: 1.4; margin-bottom: .15rem; }

/* ---- Tables (troubleshooting, sizes) ----------------------------------- */
.si-home .si-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--step--1); line-height: 1.55; }
.si-home .si-table th, .si-home .si-table td { padding: .85rem 1rem; text-align: left; vertical-align: top; }
.si-home .si-table--stack { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.si-home .si-table--stack thead th { background: var(--bg-subtle); color: var(--ink); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); }
.si-home .si-table--stack tbody tr + tr > * { border-top: 1px solid var(--border); }
.si-home .si-table--stack tbody th { color: var(--ink); font-weight: 700; width: 22%; }
.si-home .si-table--stack td { color: var(--text-muted); }
.si-home .si-table--stack td:last-child { white-space: nowrap; }
.si-home .si-table a { font-weight: 650; text-decoration-line: none; }
.si-home .si-table a:hover { text-decoration-line: underline; }

/* Sizes table lives in the narrow side box: always one block per size. */
.si-home .si-table--sizes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.si-home .si-table--sizes, .si-home .si-table--sizes tbody, .si-home .si-table--sizes tr, .si-home .si-table--sizes th, .si-home .si-table--sizes td { display: block; }
.si-home .si-table--sizes tr { padding-block: var(--space-3); border-top: 1px solid var(--border); }
.si-home .si-table--sizes th, .si-home .si-table--sizes td { padding: 0; }
.si-home .si-table--sizes tbody th { font-size: var(--step-0); font-weight: 800; color: var(--ink); margin-bottom: .2rem; }
.si-home .si-table--sizes td { display: grid; grid-template-columns: 9.5em 1fr; gap: .75rem; color: var(--text); }
.si-home .si-table--sizes td::before { content: attr(data-label); color: var(--text-faint); }
.si-home .si-note { margin-top: var(--space-3); color: var(--text-faint); font-size: .8rem; line-height: 1.5; }

/* ---- FAQ ---------------------------------------------------------------- */
.si-home .faq .elementor-widget.si-closing { margin-top: var(--space-5); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1000px) {
  .si-home .elementor .e-con.si-split, .si-home .elementor .e-con.si-split--rev { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .si-home .si-split--rev > .si-box { order: 0; }
  .si-home .elementor .e-con.si-box { position: static; }
  .si-home .elementor .e-con.si-start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .si-home .elementor .e-con.si-start-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .si-home .si-table--stack, .si-home .si-table--stack tbody, .si-home .si-table--stack tr, .si-home .si-table--stack th, .si-home .si-table--stack td { display: block; width: auto; }
  .si-home .si-table--stack { border: 0; background: none; border-radius: 0; overflow: visible; }
  .si-home .si-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .si-home .si-table--stack tbody tr { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: var(--space-4); }
  .si-home .si-table--stack tbody tr + tr { margin-top: var(--space-3); }
  .si-home .si-table--stack tbody tr + tr > * { border-top: 0; }
  .si-home .si-table--stack th, .si-home .si-table--stack td { padding: 0; }
  .si-home .si-table--stack tbody th { width: auto; font-size: var(--step-0); margin-bottom: var(--space-2); }
  .si-home .si-table--stack td + td { margin-top: var(--space-2); }
  .si-home .si-table--stack td::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
  .si-home .si-table--stack td:last-child::before { display: none; }
}