/* Theme additions on top of the design CSS. */
body{margin:0;background:#fff}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}

/* form messages (inc/forms.php) */
.kc .kc-formmsg{border:2px solid var(--green);background:#f2faf5;padding:18px 22px;margin:0 0 20px;font-weight:600;line-height:1.5}
.kc .kc-formmsg--err{border-color:#c0392b;background:#fdf3f2}
/* spam trap: display:none, so the designs' fit-to-screen script (which measures every input and label) ignores it */
.kc .kc-hp{display:none!important}

/* ---------- intro video (Vimeo 1237872924, 16:9) ----------
 * Homepage: the video always runs edge to edge. Its captions sit about 10% in from the left and bottom
 * edges, and nothing near the top carries text (the end card's logo starts about 17% down). So to fit the
 * screen under the header (and the WordPress toolbar when logged in) the hero may trim up to 15% of the
 * video's height, four fifths of it from the top (at most 12%) and one fifth from the bottom (at most 3%).
 * On windows wider than that allows, the hero keeps that height and runs slightly past the fold.
 * Phones and tablets show the whole 16:9 frame. */
body.admin-bar{--kc-ab:32px}
.kc .kc-hero{aspect-ratio:16/9}
@media (min-width:1025px){
  .kc .kc-hero{aspect-ratio:auto;height:clamp(calc((100vw - 20px) * .85 / 1.7778),calc(100vh - var(--kc-head,0px) - var(--kc-ab,0px)),calc((100vw - 20px) / 1.7778))}
  .kc .kc-hero iframe{top:80%;left:0;width:100%;height:auto !important;aspect-ratio:16/9;transform:translateY(-80%) scale(1.006)}
}
/* City overviews: the wide video (Vimeo 1227207356, 2520x1080, 2.33:1) with the headline in a bar under it
 * (the designer's "headline under it" layout), not on a plate over the captions. The video always runs edge
 * to edge, and video + bar fit the screen: the video may lose up to 11% of its height, about 8% from the top
 * (the end card's logo starts 10% down) and 3% from the bottom (the captions' underline sits 5% up). On
 * windows wider than that allows, the hero keeps that height and runs slightly past the fold. */
.kc .kc10-hero.kc10-hero--plate .kc-vhero__frame{aspect-ratio:2.3335!important}
@media (min-width:1025px) and (min-height:700px){
  .kc .kc10-hero.kc10-hero--plate{background:#0F2A1A;height:auto!important;overflow:visible}
  .kc .kc10-hero.kc10-hero--plate .kc-vhero__frame{display:block;position:relative;flex:none;overflow:hidden;background:#000;aspect-ratio:auto!important;height:clamp(calc((100vw - 20px) * .89 / 2.3335),calc(100vh - var(--kc-head,111px) - var(--kc-ab,0px) - clamp(96px,14vh,140px)),calc((100vw - 20px) / 2.3335))}
  .kc .kc10-hero.kc10-hero--plate .kc-vhero__frame iframe{position:absolute;top:73%;left:0;width:100%;height:auto!important;aspect-ratio:2.3335;transform:translateY(-73%) scale(1.006)}
  .kc .kc10-hero.kc10-hero--plate .kc-vhero__cap{position:static;flex:none;height:clamp(96px,14vh,140px);box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;max-width:none;width:100%;padding:0 5%;margin:0;background:none;border:0;box-shadow:none}
  .kc .kc10-hero.kc10-hero--plate h1{color:#fff;font-size:clamp(30px,5vh,52px)}
}
/* Tablets and short laptop windows: the headline sits under the video (the designer's phone layout) instead of over its corner */
@media (max-width:1024px),(max-height:699px){
  .kc .kc10-hero--plate .kc-vhero__cap{position:static;border:0;box-shadow:none;max-width:none;padding:22px 16px 6px}
}

/* ---------- optimised background photos: phones load a phone-sized file ----------
 * images.py writes each inline background as a desktop file (with a 2x upgrade) plus --kcbg-m,
 * a file sized for a phone screen; only the one that applies is downloaded. */
@media (max-width:767px){.kc [style*="--kcbg-m"]{background-image:var(--kcbg-m)!important}}

/* ---------- "More Info" drawer heading ----------
 * The designs style the kicker and title for the dark green head (subpage layer), but the pop-up's own
 * paragraph rule (.kc .kc-pop__card p, dark 17px text) is more specific and wins, leaving dark text on dark
 * green. Same values as the designer's rules, with enough specificity to apply, and room under the title for the clover badge. */
.kc .kc-pop__card .kc10-drawer__k{margin:0 70px 10px 0;font-size:15px;line-height:1.4;font-weight:700;color:rgba(255,255,255,.75)}
.kc .kc-pop__card .kc10-drawer__t{margin:0 50px 24px 0;font-size:clamp(26px,2.4vw,36px);line-height:1.12;font-weight:800;color:#fff}

/* ---------- CAPTCHA (inc/forms.php, Cloudflare Turnstile) ----------
 * Full row in the grid forms, above the send button; the flexible widget fills the form's width (min 300px). */
.kc .kc-ts{grid-column:1/-1;width:100%;min-height:65px;margin:6px 0 14px}
.kc .kc-ts__wait{margin:8px 0 0;font-size:15px;line-height:1.4;color:#b3261e;font-weight:600}

/* ---------- newsletter issues: keep the printed-newsletter fonts ----------
 * shared.css resets every text element under .kc to the site font with !important (the designs' global reset),
 * which also wiped out the newsletter's own faces: Roboto for the text and Kelly's AnironcBold for the
 * story headings. Restore them inside the newsletter paper only, with enough specificity to beat the reset;
 * the tools row (All newsletters, Print) and the previous/next links keep the site font as designed. */
.kc .kc-nl__paper :is(p,li,span,div,a,b,strong,em,i,small,td,th,blockquote,figcaption,cite,q,address,label){font-family:Roboto,Arial,sans-serif!important}
.kc .kc-nl__paper .kc-nl__body :is(h2,h2 *){font-family:AnironcBold,Georgia,serif!important}
.kc .kc-nl__paper :is(.kc-nl__tools,.kc-nl__tools *,.kc-nl__pager,.kc-nl__pager *){font-family:var(--font)!important}

/* ---------- icons left in content written in Elementor (5 product descriptions, 16 blog posts) ----------
 * With Elementor off, WordPress shows the stored HTML, where each icon is a bare <svg> with no size: it
 * grows to the full column width (a 700-900px arrow per bullet). Size them like text icons. Zero
 * specificity (:where), so any icon a design styles on purpose keeps its own size. In lists the theme's
 * bullets already mark each item, so the old icon and the line break after it are dropped. */
:where(.kc .kc-art__body, .kc .kc-prose) :where(svg:not([width]):not([class])){width:1em;height:1em;display:inline-block;vertical-align:-.125em;fill:currentColor;flex:none;margin-right:.45em}
:where(.kc .kc-art__body, .kc .kc-prose) :where(svg:not([width]):not([class]) + br){display:none}
:where(.kc .kc-art__body, .kc .kc-prose) :where(li > svg:first-child:not([width]):not([class])){display:none}

/* ---------- product video (inc/product-video.php) ---------- */
.kc .kc-pvideo{clear:both;width:100%;max-width:none;flex:0 0 100%;grid-column:1/-1;box-sizing:border-box;text-align:left;margin:64px 0 16px;padding:0 12px 12px 0}
.kc .kc-pvideo__h{font-size:clamp(26px,2.8vw,38px);line-height:1.2;font-weight:800;margin:0 0 22px}
.kc .kc-pvideo__frame{position:relative;aspect-ratio:16/9;background:#0F2A1A;border:2px solid #000;box-shadow:12px 12px 0 var(--green);overflow:hidden}
.kc .kc-pvideo__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:767px){.kc .kc-pvideo{margin-top:40px}.kc .kc-pvideo__frame{box-shadow:8px 8px 0 var(--green)}}

/* ---------- Store page: "Kelly's own formulas" on the spotlight stage (inc/store-feature.php) ---------- */
.kc .kc-fx .kc-fx__eyebrow{margin:0 0 10px;font-size:13px;line-height:1.2;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.kc .kc-fx .kc-fx__item h2{margin:0}
.kc .kc-fx .kc-feat__btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.kc .kc-fx .kc-fx__watch{display:inline-flex;align-items:center;gap:10px;padding:12px 4px;background:none;border:0;color:#fff;font:inherit;font-size:clamp(16px,1.2vw,19px);font-weight:700;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);text-underline-offset:6px}
.kc .kc-fx .kc-fx__watch svg{width:30px;height:30px;padding:6px;border:2px solid var(--orange);border-radius:50%;color:var(--orange);box-sizing:border-box;flex:none;transition:background .2s,color .2s}
.kc .kc-fx .kc-fx__watch:hover svg,.kc .kc-fx .kc-fx__watch:focus-visible svg{background:var(--orange);color:#141414}
.kc .kc-fx .kc-fx__watch:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.kc .kc-fx .kc-fx__picker{margin-top:clamp(20px,3.4vh,38px);padding-top:clamp(14px,2.4vh,24px);border-top:2px solid rgba(255,255,255,.16)}
.kc .kc-fx .kc-fx__label{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.kc .kc-fx .kc-fx__picks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.kc .kc-fx .kc-fx__pick{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:8px 6px 10px;background:rgba(255,255,255,.06);border:2px solid transparent;color:#fff;font:inherit;cursor:pointer;transition:background .2s,border-color .2s}
.kc .kc-fx .kc-fx__pick:hover{background:rgba(255,255,255,.12)}
.kc .kc-fx .kc-fx__pick[aria-selected="true"]{background:#fff;border-color:#141414;box-shadow:4px 4px 0 0 var(--orange);color:#141414}
.kc .kc-fx .kc-fx__pick:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.kc .kc-fx .kc-fx__thumb{display:block;width:clamp(44px,4.2vw,64px);aspect-ratio:1/1;background:#fff;border:1px solid rgba(0,0,0,.15)}
.kc .kc-fx .kc-fx__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.kc .kc-fx .kc-fx__name{display:block;max-width:100%;font-size:clamp(12px,.9vw,14px);line-height:1.2;font-weight:700;text-align:center}
.kc .kc-fx .kc-fx__mode{font-size:10.5px;line-height:1;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange)}
.kc .kc-fx .kc-fx__pick[aria-selected="true"] .kc-fx__mode{color:var(--green)}
.kc .kc-fx .kc-fx__pic[hidden],.kc .kc-fx .kc-fx__item[hidden]{display:none!important}
.kc .kc-fx .kc-fx__item:not([hidden]),.kc .kc-fx .kc-fx__pic:not([hidden]){animation:kc-fx-in .35s ease}
@keyframes kc-fx-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kc .kc-fx .kc-fx__item,.kc .kc-fx .kc-fx__pic{animation:none!important}}
@media (max-width:640px){
  .kc .kc-fx .kc-fx__picks{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .kc .kc-fx .kc-fx__pick{flex:0 0 31%;scroll-snap-align:start}
}
/* the video pop-up */
.kc-fx-video{width:min(1100px,94vw);max-width:none;padding:0;border:0;background:transparent;overflow:visible}
.kc-fx-video::backdrop{background:rgba(10,20,14,.82)}
.kc-fx-video__box{position:relative}
.kc-fx-video__frame{position:relative;aspect-ratio:16/9;background:#000;border:2px solid #141414;box-shadow:12px 12px 0 #1c7f3e}
.kc-fx-video__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kc-fx-video__x{position:absolute;top:-48px;right:0;width:40px;height:40px;display:grid;place-items:center;background:#FCA217;border:2px solid #141414;color:#141414;font-size:28px;line-height:1;cursor:pointer}
/* "Kelly's own" ribbon on the same products in the grid (rules printed by store-feature.php) */