/* ============================================================================
   Kwick Strike — Content Pages (Coutts)
   Shared stylesheet for the editorial/utility page templates:
     - template-car-gun-safe.php   (Car Gun Safe buyer's guide → /car-gun-safe/)
     - template-find-your-fit.php  (Find Your Fit hub → /find-your-fit/)
   Layout-only; inherits the site's native type + color from the kschild theme.
   Mirrors the homepage/PDP design system (green/black, Oswald headings,
   Montserrat body). Everything scoped under .ksx-content.
   ========================================================================== */

.ksx-content { --ksx-green:#08fe08; --ksx-green-d:#06c906; --ksx-black:#000; --ksx-near:#121212;
  --ksx-panel:#1a1a1a; --ksx-border:#2a2a2a; --ksx-light:#f1f1f1; --ksx-muted:#cfcfcf; --ksx-ink:#1a1a1a;
  color:var(--ksx-ink); }
body.page-template-template-car-gun-safe,
body.page-template-template-find-your-fit { overflow-x:clip; }  /* clip (not hidden) so body doesn't become a 2nd scroll container */
.ksx-content *, .ksx-content *::before, .ksx-content *::after { box-sizing:border-box; }
.ksx-content img { max-width:100%; display:block; }

/* Hide the theme breadcrumb on these templates (we output our own + schema). */
.page-template-template-car-gun-safe .woocommerce-breadcrumb,
.page-template-template-car-gun-safe .storefront-breadcrumb,
.page-template-template-find-your-fit .woocommerce-breadcrumb,
.page-template-template-find-your-fit .storefront-breadcrumb { display:none; }

/* Readable measure for article body; wider blocks (tool, video, table) break out. */
.ksx-wrap { max-width:820px; margin:0 auto; padding:0 clamp(20px,5vw,32px); }
.ksx-wrap-wide { max-width:1080px; margin:0 auto; padding:0 clamp(20px,5vw,40px); }

/* ---- Typography ---- */
.ksx-content h1, .ksx-content h2, .ksx-content h3 { color:inherit; font-weight:700; line-height:1.18; margin:0; }
.ksx-content h1 { font-family:"oswald",sans-serif; text-transform:uppercase; font-size:clamp(28px,4vw,44px); line-height:1.1; letter-spacing:.01em; }
.ksx-content h2 { font-family:"oswald",sans-serif; text-transform:uppercase; font-size:clamp(22px,2.6vw,30px); margin:40px 0 14px; }
.ksx-content h3 { font-family:"oswald",sans-serif; font-size:clamp(18px,2vw,21px); margin:26px 0 8px; color:var(--ksx-ink); }
.ksx-content p { font-size:17px; line-height:1.65; color:#333; margin:0 0 18px; }
.ksx-content ul { margin:0 0 20px; padding-left:22px; }
.ksx-content li { font-size:17px; line-height:1.6; color:#333; margin-bottom:8px; }
.ksx-content a { color:var(--ksx-green-d); text-decoration:underline; text-underline-offset:2px; }
.ksx-content a:hover { color:#059205; }
.ksx-content strong { color:var(--ksx-ink); }
.ksx-content em { color:#555; }

/* ---- Page header / byline ---- */
.ksx-page-head { padding:48px 0 8px; }
.ksx-byline { margin:14px 0 0; font-size:14px; color:#777; }
.ksx-byline b { color:var(--ksx-ink); }
.ksx-lede { font-size:19px; line-height:1.6; color:#333; margin-top:18px; }

/* ---- Key-points callout ---- */
.ksx-callout { background:var(--ksx-light); border-left:4px solid var(--ksx-green); border-radius:6px;
  padding:20px 24px; margin:26px 0; }
.ksx-callout ul { margin:0; }
.ksx-callout li { font-size:16px; }

/* ---- Buttons (mirror site) ---- */
.ksx-btn { display:inline-block; font-family:"oswald",sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:16px; padding:14px 30px; border-radius:4px; text-align:center;
  text-decoration:none; transition:all .15s ease; cursor:pointer; }
.ksx-btn-primary { background:var(--ksx-green); color:#000; border:2px solid var(--ksx-green); }
.ksx-btn-primary:link, .ksx-btn-primary:visited { color:#000; }  /* keep label after click/Back */
.ksx-btn-primary:hover { background:var(--ksx-green-d); border-color:var(--ksx-green-d); color:#000; }
.ksx-btn-ghost { background:transparent; color:#fff; border:2px solid #fff; }
.ksx-btn-ghost:link, .ksx-btn-ghost:visited { color:#fff; }
.ksx-btn-ghost:hover { border-color:var(--ksx-green); color:var(--ksx-green); }
/* Inline mid-article CTA line */
.ksx-inline-cta { margin:24px 0; }
.ksx-inline-cta a { font-family:"oswald",sans-serif; text-transform:uppercase; font-weight:700; letter-spacing:.03em;
  color:var(--ksx-green-d); text-decoration:none; }
.ksx-inline-cta a:hover { color:#059205; }

/* ---- FAQ accordion (native <details>) ---- */
.ksx-faq-list { margin:18px 0 0; }
.ksx-faq-item { border-bottom:1px solid #e4e4e4; }
.ksx-faq-item summary { list-style:none; cursor:pointer; padding:18px 38px 18px 0; position:relative;
  font-family:"oswald",sans-serif; font-size:18px; color:var(--ksx-ink); }
.ksx-faq-item summary::-webkit-details-marker { display:none; }
.ksx-faq-item summary::after { content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-size:24px; color:var(--ksx-green-d); }
.ksx-faq-item[open] summary::after { content:"\2212"; }
.ksx-faq-a { padding:0 0 20px; }
.ksx-faq-a p { margin:0; font-size:16px; color:#444; }

/* ---- Related guides ---- */
.ksx-related { background:var(--ksx-light); border-radius:8px; padding:24px 28px; margin:32px 0; }
.ksx-related h2 { margin-top:0; font-size:22px; }
.ksx-related ul { margin:0; padding-left:20px; }

/* ---- Final CTA band (full-bleed dark) ---- */
.ksx-cta-band { width:100vw; margin-left:calc(50% - 50vw); background:var(--ksx-black); color:#fff;
  padding:64px 0; text-align:center; margin-top:48px; }
.ksx-cta-band h2 { color:#fff; font-size:clamp(24px,3vw,34px); }
.ksx-cta-band p { color:#ddd; font-size:17px; max-width:640px; margin:14px auto 24px; }

/* ============================================================================
   FIND YOUR FIT — page-specific
   ========================================================================== */
.ksx-tool-slot { max-width:680px; margin:24px auto; min-height:120px; display:flex; align-items:center;
  justify-content:center; background:#fff; border:1px dashed #c4c4c4; border-radius:8px; color:#888; padding:24px; text-align:center; }

/* The three result-state explainer cards */
.ksx-results { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:24px 0; }
.ksx-result-card { border:1px solid #e4e4e4; border-radius:8px; padding:22px 20px; background:#fff; }
.ksx-result-card h3 { margin:0 0 8px; font-size:18px; }
.ksx-result-card p { font-size:15px; margin:0; }
.ksx-result-card.ksx-rc-green { border-top:4px solid #1f9d1f; }
.ksx-result-card.ksx-rc-amber { border-top:4px solid #c87a00; }
.ksx-result-card.ksx-rc-red { border-top:4px solid #c0392b; }

/* Video embed (measurement walkthrough) */
.ksx-video-frame { position:relative; max-width:760px; margin:24px auto; aspect-ratio:16/9; border-radius:10px;
  overflow:hidden; background:#111; }
.ksx-video-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Spec callout (KS dimensions) */
.ksx-spec-note { background:#0c0c0c; color:#fff; border-radius:8px; padding:16px 22px; margin:20px 0; font-size:16px; }
.ksx-spec-note b { color:var(--ksx-green); }

/* Compatibility table (built from the tool's vehicle data) */
.ksx-veh-search-wrap { margin:10px 0 14px; }
#ksx-veh-search { width:100%; max-width:440px; padding:11px 14px; font-size:15px; font-family:inherit;
  border:1px solid #ccc; border-radius:6px; }
#ksx-veh-search:focus { outline:2px solid var(--ksx-green); outline-offset:1px; border-color:var(--ksx-green); }
.ksx-table-scroll { overflow-x:auto; overflow-y:auto; max-height:520px; border:1px solid #e4e4e4; border-radius:8px; }
.ksx-veh-table { width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px; }
.ksx-veh-table th { text-align:left; font-family:"oswald",sans-serif; text-transform:uppercase; font-size:12.5px;
  letter-spacing:.03em; color:#666; background:#f7f7f7; padding:12px 14px; border-bottom:1px solid #e4e4e4;
  position:sticky; top:0; z-index:1; }
.ksx-veh-table td { padding:11px 14px; border-bottom:1px solid #efefef; color:#333; }
.ksx-veh-table tr:hover td { background:#fafafa; }
.ksx-fit { font-weight:700; white-space:nowrap; font-size:13px; }
.ksx-fit-yes { color:#1f9d1f; }
.ksx-fit-no { color:#c0392b; }
.ksx-veh-count { font-size:13px; color:#777; margin-top:10px; }
.ksx-veh-empty { color:#888; text-align:center; padding:26px 14px; }

/* ---- Responsive ---- */
@media (max-width:760px){
  .ksx-results { grid-template-columns:1fr; }
  .ksx-content p, .ksx-content li { font-size:16px; }
}