/* ============================================================================
   JKRUK - Knotweed Quotes shared stylesheet
   Tokens from DESIGN-KNOTWEED-ADAPTATION.md. Headings Nunito Sans, body Inter.
   One CTA colour sitewide (amber). Alternating white / --bg-soft bands +
   one dark --brand-d feature band.
   ============================================================================ */
:root{
  /* Tokens match the approved design HTML (Knotweed Quotes.dc.html), which supersedes
     the earlier adaptation doc: forest greens + terracotta CTA. */
  --brand:#2F8F4E; --brand-d:#1C5E38; --brand-l:#EFF8F1; --brand-b:#CDEBD5;
  --bg-soft:#F1F9F3; --brand-chip:#D7F0DE; --brand-lite:#86EFAC;
  --cta:#C64F2E; --cta-d:#B0421F; --cta-ink:#FFFFFF;
  --txt:#1E293B; --muted:#64748B; --footer:#12482B;
  --line:#CDEBD5; --shadow:0 12px 26px rgba(10,74,58,.10);
}
html,body{margin:0;padding:0}
*{box-sizing:border-box}
body{background:#fff;color:var(--txt);font-family:'Inter',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,.jk-head{font-family:'Nunito Sans','Inter',sans-serif;letter-spacing:-0.015em;color:var(--brand-d)}
/* On dark sections (hero / final CTA) the wrapper sets color:#fff; headings must
   inherit white instead of the default brand-dark, or they render dark-on-dark. */
[style*="color:#fff"] h1,[style*="color:#fff"] h2,[style*="color:#fff"] h3,[style*="color:#fff"] h4,[style*="color:#fff"] .jk-head{color:#fff}
a{color:var(--brand)}
img,svg{max-width:100%}

/* --- eyebrow --- */
.jk-eyebrow{font-family:'Nunito Sans',sans-serif;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}

/* --- primary CTA (amber, sitewide) --- */
.jk-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--cta);color:var(--cta-ink)!important;text-decoration:none;font-family:'Nunito Sans',sans-serif;font-weight:900;font-size:16.5px;line-height:1;padding:15px 26px;min-height:44px;border:none;border-radius:13px;cursor:pointer;box-shadow:0 12px 26px rgba(198,79,46,.38);transition:filter .15s ease,transform .15s ease,box-shadow .15s ease}
.jk-cta:hover{filter:brightness(.96);transform:translateY(-1px)}
.jk-cta:active{transform:translateY(0)}
.jk-cta:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
/* hero CTA pulse + shine */
@keyframes jk-pulse{0%,100%{box-shadow:0 12px 26px rgba(198,79,46,.38)}50%{box-shadow:0 14px 34px rgba(198,79,46,.62)}}
.jk-cta-hero{position:relative;overflow:hidden;animation:jk-pulse 2.8s ease-in-out infinite}
@keyframes jk-shine{0%{transform:translateX(-120px) skewX(-18deg)}55%,100%{transform:translateX(440px) skewX(-18deg)}}
.jk-cta-hero::after{content:"";position:absolute;top:0;left:0;width:70px;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-120px) skewX(-18deg);animation:jk-shine 3.4s ease-in-out infinite;pointer-events:none}
@media(prefers-reduced-motion:reduce){.jk-cta-hero{animation:none}.jk-cta-hero::after{display:none}}

/* --- secondary / phone buttons --- */
.jk-btn2{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--brand-b);color:var(--brand-d);text-decoration:none;font-family:'Nunito Sans',sans-serif;font-weight:800;font-size:15px;padding:12px 20px;min-height:44px;border-radius:12px;transition:border-color .15s}
.jk-btn2:hover{border-color:var(--brand)}

/* --- "In short" AEO answer box --- */
.jk-inshort{background:var(--brand-l);border:1px solid var(--brand-b);border-left:5px solid var(--brand);border-radius:16px;padding:24px 28px}
.jk-inshort .lbl{font-family:'Nunito Sans',sans-serif;font-weight:900;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.jk-inshort p{font-size:17px;line-height:1.7;color:var(--txt);margin:10px 0 0}

/* --- cards / chips --- */
.jk-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 1px 2px rgba(20,83,45,.04);padding:26px}
.jk-chip{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--brand-d);background:var(--brand-l);border:1px solid var(--brand-b);border-radius:999px;padding:8px 14px}

/* --- kill horizontal scroll (sticky header is a sibling of #jkMain) --- */
#jkMain{overflow-x:clip}

/* --- scroll reveal (JS-gated; no-JS/reduced-motion => visible) --- */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js [data-reveal].jk-revealed{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}}

/* --- header nav responsive --- */
@media(min-width:900px){.jk-nav{display:flex!important}}
@media(max-width:900px){.jk-burger{display:inline-flex!important}.jk-headcta{display:none!important}}
.jk-navlink:hover{color:var(--brand)}

/* --- footer link hover + responsive grid --- */
.jk-footlink:hover{color:#fff!important}
@media(max-width:840px){.jk-footgrid{grid-template-columns:1fr 1fr!important;gap:28px!important}}
@media(max-width:520px){.jk-footgrid{grid-template-columns:1fr!important}}

/* --- sticky bottom action bar + chat widget (shown on all widths, per design) --- */
#jkchat:checked ~ [data-chatpanel]{display:flex!important}
@media(max-width:560px){
  .jk-stickybar>div{grid-template-columns:auto 1fr!important}
  .jk-stickybar label{display:none!important}
  .jk-stickybar .jk-cta{padding:13px 12px!important;font-size:14.5px!important}
}
@media(max-width:360px){.jk-stickybar .jk-cta{font-size:13.5px!important}}

/* --- legal pages --- */
.jk-legal{max-width:820px;margin:0 auto;color:#334155;font-size:15.5px;line-height:1.72}
.jk-legal h2{font-family:'Nunito Sans',sans-serif;font-size:24px;color:var(--brand-d);margin:32px 0 10px}
.jk-legal h3{font-family:'Nunito Sans',sans-serif;font-size:18px;color:var(--brand-d);margin:22px 0 8px}
.jk-legal p{margin:0 0 14px}
.jk-legal ul,.jk-legal ol{margin:0 0 14px;padding-left:22px}.jk-legal li{margin:0 0 7px}
.jk-legal table{border-collapse:collapse;width:100%;margin:16px 0;font-size:14px}
.jk-legal th,.jk-legal td{padding:10px 12px;text-align:left;border:1px solid var(--line);vertical-align:top}
.jk-legal th{background:var(--brand-l);color:var(--brand-d)}

/* --- FAQ accordion (details/summary) --- */
.jk-faq{background:var(--brand-l);border:1px solid var(--brand-b);border-radius:14px;overflow:hidden}
.jk-faq+.jk-faq{margin-top:12px}
.jk-faq>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;font-family:'Nunito Sans',sans-serif;font-weight:800;font-size:16.5px;color:var(--brand-d)}
.jk-faq>summary::-webkit-details-marker{display:none}
.jk-faq .jk-faq-ic{flex-shrink:0;transition:transform .2s ease}
.jk-faq[open] .jk-faq-ic{transform:rotate(45deg)}
.jk-faq .jk-faq-a{padding:0 20px 20px;font-size:15.5px;line-height:1.65;color:#475569}

/* ============================================================================
   GLOBAL MOBILE SAFETY-NET
   The pages use inline `grid-template-columns` with per-page @media overrides,
   but some inline grids have no class to target (e.g. hero stat rows). These
   attribute-selector rules are a backstop so EVERY multi-column inline grid
   stacks neatly on small screens, whether or not the page handles it. Page
   rules are later in the cascade at equal specificity, so anything a page
   handles explicitly still wins - this only catches the stragglers.
   ============================================================================ */

/* Hard overflow guard - nothing (floating badges, wide rows) breaks the viewport.
   Applied to the root only (not body) so the sticky header is not turned into a
   scroll container, which would break position:sticky. */
html{overflow-x:clip}

/* Tablets/large phones: multi-up grids drop to 2 columns; splits & sidebars stack. */
@media (max-width:768px){
  [style*="grid-template-columns:repeat("],[style*="grid-template-columns: repeat("],
  [style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"]{
    grid-template-columns:1fr 1fr !important;
  }
  [style*="grid-template-columns:1.05fr"],[style*="grid-template-columns: 1.05fr"],
  [style*="grid-template-columns:1.1fr"],[style*="grid-template-columns:1.35fr"],
  [style*="grid-template-columns:1.5fr"],[style*="grid-template-columns:1.1fr .9fr"],
  [style*="grid-template-columns:1fr 200px"],[style*="grid-template-columns:1fr 0.9fr"]{
    grid-template-columns:1fr !important;
  }
}

/* Phones: everything stacks to a single, full-width column. */
@media (max-width:480px){
  [style*="grid-template-columns:repeat("],[style*="grid-template-columns: repeat("],
  [style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:auto 1fr auto"]{
    grid-template-columns:1fr !important;
  }
  /* Rein in oversized display headings that pages didn't already shrink. */
  h1{font-size:30px !important;line-height:1.12 !important}
  h2{font-size:25px !important}
}

/* ============================================================================
   RESPONSIVE COMPARISON TABLES (.jk-rtable)
   Wide multi-column tables are unreadable on phones. On <=640px each row
   becomes a card: the first cell is the card title, every other cell shows its
   column name (from data-label) beside the value. Desktop is unchanged.
   ============================================================================ */
.jk-rtable{width:100%}
@media(max-width:640px){
  .jk-rtable{min-width:0!important;border-collapse:separate;border-spacing:0}
  /* visually hide the header row (labels come from data-label instead) */
  .jk-rtable thead{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .jk-rtable tr{display:block!important;background:#fff!important;border:1px solid #CDEBD5!important;border-radius:12px;margin:0 0 12px;overflow:hidden}
  .jk-rtable td{display:flex!important;justify-content:space-between;align-items:baseline;gap:16px;width:auto!important;padding:9px 14px!important;border-top:1px solid #EFF1F8!important;text-align:right!important;font-size:14px!important;color:#475569}
  .jk-rtable td::before{content:attr(data-label);font-family:'Nunito Sans',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#1C5E38;text-align:left;flex:none;max-width:46%}
  /* first cell = card title: full width, highlighted, no label */
  .jk-rtable td:first-child{display:block!important;text-align:left!important;background:#EFF8F1;border-top:0!important;padding:12px 14px!important;font-family:'Nunito Sans',sans-serif;font-weight:800!important;font-size:15px!important;color:#1C5E38!important}
  .jk-rtable td:first-child::before{content:none}
}