/* Port corrections — loads after 10-wp.css (the pruned live cascade).
 *
 * Everything here replaces something WordPress did with JavaScript (Rev Slider,
 * WPBakery stretch rows, Booker's overlay offsets, Ultimate button hovers, cycle2,
 * Sidr, Ultimate's moving background) or covers markup that differs from live on
 * purpose. Values are measured on live at 1440 / 390 (audit/measure.mjs).
 */

/* Google Fonts the live page loaded for Rev Slider layers (PT Serif 400 + 700 italic,
 * Playfair Display 400), self-hosted. */
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; src: url("/fonts/ksp/ptserif-400.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "PT Serif"; font-style: italic; font-weight: 700; src: url("/fonts/ksp/ptserif-700italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400; src: url("/fonts/ksp/playfairdisplay-400.ttf") format("truetype"); font-display: swap; }

/* ---- WPBakery "stretch row" (data-vc-full-width) -------------------------------
 * js_composer moved the row to the viewport's left edge and padded it back to the
 * grid: left:-175px; width:1440px; padding 0 175px at 1440. --ksp-vw is the
 * viewport without scrollbar (set by the header), as jQuery measured it. */
:where(html:has([data-ksp-chrome])) .vc_row[data-vc-full-width] {
  position: relative;
  box-sizing: border-box;
  width: var(--ksp-vw, 100vw);
  max-width: var(--ksp-vw, 100vw);
  left: calc((100% - var(--ksp-vw, 100vw)) / 2);
  /* js_composer computed `left` from where the row actually sat, so its side margins
   * (-15px, or 30px !important on the hero) never showed; zeroing them gives the same edge. */
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* padding = the row's own offset from the viewport edge, which includes the
   * standard vc_row −15px margin: 175px at 1440 (measured), not 190. */
  padding-left: calc((var(--ksp-vw, 100vw) - 100%) / 2 - 15px);
  padding-right: calc((var(--ksp-vw, 100vw) - 100%) / 2 - 15px);
}
:where(html:has([data-ksp-chrome])) .vc_row[data-vc-full-width].vc_row-no-padding {
  padding-left: 0;
  padding-right: 0;
}
:where(html:has([data-ksp-chrome])) .upb_row_bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
:where(html:has([data-ksp-chrome])) .upb_bg_overlay {
  position: absolute;
  inset: 0;
}
/* Ultimate "left-animation": the tile drifts left forever (repeat-x, cover). */
:where(html:has([data-ksp-chrome])) .ksp-drift {
  background-size: cover;
  background-repeat: repeat;
  animation: ksp-drift 60s linear infinite;
}
@keyframes ksp-drift {
  from { background-position: 0 0; }
  to { background-position: -1440px 0; }
}
@media (prefers-reduced-motion: reduce) {
  :where(html:has([data-ksp-chrome])) .ksp-drift { animation: none; }
}

/* The live home page had the theme-demo row (vc_row-has-fill, hidden ≥768px) right
 * before the pitch row, so js_composer's `.vc_row-has-fill + .vc_row-full-width +
 * .vc_row > … > .vc_column-inner { padding-top: 35px }` gave the pitch 35px on top.
 * The demo row is not ported; its effect on the pitch is kept. */
:where(html:has([data-ksp-chrome])) .vc_custom_1559825328645 > .vc_column_container > .vc_column-inner { padding-top: 35px; }

/* ---- Booker overlay: the first band slides up under the transparent header ---
 * featImage: margin-top = −header height (102 at desktop, measured); the boxed
 * panel overlaps the banner by 80px (theme option overlay_content_negative_margin).
 * Both off at ≤768px (overlay_header_turn_off_width).
 * Live set both inline, so they beat `.not-full.outter-wrapper { margin: 0 auto }`;
 * here the selectors carry enough rank instead. */
:where(html:has([data-ksp-chrome])) .outter-wrapper-parent .overlay-header { margin-top: -102px; }
:where(html:has([data-ksp-chrome])) .outter-wrapper.page-content.ksp-overlap { margin-top: -80px; }
@media only screen and (max-width: 768px) {
  :where(html:has([data-ksp-chrome])) .outter-wrapper-parent .overlay-header { margin-top: 0; }
  :where(html:has([data-ksp-chrome])) .outter-wrapper.page-content.ksp-overlap { margin-top: 0; }
}

/* ---- Home hero (Rev Slider 3, slide 4), 800px band ------------------------------ */
:where(html:has([data-ksp-chrome])) .ksp-hero__band {
  position: relative;
  height: 800px;
  overflow: hidden;
  background: #fff;
}
:where(html:has([data-ksp-chrome])) .ksp-hero__grid {
  position: absolute;
  inset: 0;
}
:where(html:has([data-ksp-chrome])) .ksp-hero__grid > * {
  position: absolute;
  margin: 0;
}
:where(html:has([data-ksp-chrome])) .ksp-hero__title {
  left: calc(50% - 530px);
  top: 176px;
  width: 400px;
  font-family: "Playfair Display", serif;
  font-size: 64px;
  line-height: 45px;
  font-weight: 400;
  color: #b60d22;
  white-space: nowrap;
}
:where(html:has([data-ksp-chrome])) .ksp-hero__subtitle {
  left: calc(50% - 530px);
  top: 295px;
  width: 400px;
  font-family: "PT Serif", serif;
  font-size: 22px;
  line-height: 28px;
  color: #020202;
}
:where(html:has([data-ksp-chrome])) .ksp-hero .postText a.ksp-hero__button,
:where(html:has([data-ksp-chrome])) .postText .ksp-hero a.ksp-hero__button {
  left: calc(50% - 530px);
  top: 427px;
  display: inline-block;
  padding: 12px 35px;
  border: 1px solid #000;
  font-family: "PT Serif", serif;
  font-size: 17px;
  line-height: 17px;
  font-weight: 700;
  font-style: italic;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.3s, color 0.3s;
}
:where(html:has([data-ksp-chrome])) .postText .ksp-hero a.ksp-hero__button:hover {
  background: #000;
  color: #fff;
}
:where(html:has([data-ksp-chrome])) .ksp-hero__quote {
  left: calc(50% - 527px);
  top: 508px;
  width: 558px;
  font-family: "PT Serif", serif;
  font-size: 14px;
  line-height: 28px;
  color: #020202;
}
:where(html:has([data-ksp-chrome])) .ksp-hero__cover {
  left: calc(50% + 94px);
  top: 185px;
  line-height: 0;
}
:where(html:has([data-ksp-chrome])) .ksp-hero__cover img {
  width: 334px;
  height: 529px;
  max-width: none;
}
:where(html:has([data-ksp-chrome])) .ksp-hero__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background: #fff;
}
/* Below 768px live showed a theme-demo row instead (not ported): the hero stacks. */
@media only screen and (max-width: 767px) {
  :where(html:has([data-ksp-chrome])) .ksp-hero__band { height: auto; padding: 40px 15px 20px; }
  :where(html:has([data-ksp-chrome])) .ksp-hero__grid { position: static; display: flex; flex-direction: column; gap: 22px; }
  :where(html:has([data-ksp-chrome])) .ksp-hero__grid > * { position: static; width: auto; }
  :where(html:has([data-ksp-chrome])) .ksp-hero__title { font-size: 48px; line-height: 1.1; white-space: normal; }
  :where(html:has([data-ksp-chrome])) .ksp-hero__button { align-self: flex-start; }
  :where(html:has([data-ksp-chrome])) .ksp-hero__cover { order: -1; align-self: center; }
  :where(html:has([data-ksp-chrome])) .ksp-hero__cover img { width: 220px; height: auto; }
  :where(html:has([data-ksp-chrome])) .ksp-hero__foot { display: none; }
}

/* ---- Ultimate Advanced Button: font-size 16px came from its responsive JSON
 * ("desktop:16px"), applied inline by Ultimate's script; hover from data-*. */
:where(html:has([data-ksp-chrome])) button.ubtn {
  font-size: 16px;
  overflow: hidden;
  transition: color 0.3s, border-color 0.3s;
}
:where(html:has([data-ksp-chrome])) .ubtn .ubtn-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1;
}
:where(html:has([data-ksp-chrome])) a.ubtn-link:hover button.ubtn {
  color: var(--ubtn-hover-color) !important;
  border-color: var(--ubtn-hover-border) !important;
}
:where(html:has([data-ksp-chrome])) a.ubtn-link:hover .ubtn-hover { opacity: 1; }

/* ---- Testimonial Rotator (cycle2 scrollHorz, auto-height calc, centred) -------
 * Slides share one grid cell, so the band takes the tallest quote's height (cycle2's
 * "calc" sentinel). cycle2 showed the active slide with an inline display:block,
 * which beat the plugin's `.format-rotator .slide { display:none }`; same rank here. */
:where(html:has([data-ksp-chrome])) .ksp-cycle {
  display: grid;
  overflow: hidden;
  position: relative;
}
:where(html:has([data-ksp-chrome])) .ksp-cycle__item {
  grid-area: 1 / 1;
  align-self: center;
  visibility: hidden;
}
:where(html:has([data-ksp-chrome])) .testimonial_rotator.format-rotator .ksp-cycle__item .slide { display: block; }
:where(html:has([data-ksp-chrome])) .ksp-cycle__item--in,
:where(html:has([data-ksp-chrome])) .ksp-cycle__item--out-left,
:where(html:has([data-ksp-chrome])) .ksp-cycle__item--out-right { visibility: visible; }
:where(html:has([data-ksp-chrome])) .ksp-cycle__item--in.from-right { animation: ksp-in-right 1s ease; }
:where(html:has([data-ksp-chrome])) .ksp-cycle__item--in.from-left { animation: ksp-in-left 1s ease; }
:where(html:has([data-ksp-chrome])) .ksp-cycle__item--out-left { animation: ksp-out-left 1s ease forwards; }
:where(html:has([data-ksp-chrome])) .ksp-cycle__item--out-right { animation: ksp-out-right 1s ease forwards; }
@keyframes ksp-in-right { from { transform: translateX(100%); } to { transform: none; } }
@keyframes ksp-in-left { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes ksp-out-left { from { transform: none; visibility: visible; } to { transform: translateX(-100%); visibility: hidden; } }
@keyframes ksp-out-right { from { transform: none; visibility: visible; } to { transform: translateX(100%); visibility: hidden; } }

/* ---- Sidr mobile menu: slides in from the left, 260px ---------------------------- */
:where(html:has([data-ksp-chrome])) #sidr-main {
  transition: left 0.2s ease;
}
:where(html:has([data-ksp-chrome])) #sidr-main.ksp-sidr-open {
  left: 0;
  display: block;
}

/* ---- Core forms honeypot (the CF7 form carries core's spam pipeline) ------------- */
:where(html:has([data-ksp-chrome])) .ksp-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Turnstile on the contact form: its own line above Send Message ------------ */
:where(html:has([data-ksp-chrome])) .ksp-turnstile {
  display: block;
  margin: 4px 0 14px;
  min-height: 65px;
}

/* ---- Popup Maker: overlay shown by React instead of PUM's script -------------- */
:where(html:has([data-ksp-chrome])) .pum-overlay.pum-active {
  display: block;
  opacity: 1;
}
:where(html:has([data-ksp-chrome])) .pum-overlay.pum-active .pum-container {
  display: block;
  opacity: 1;
}
/* Popup #1156 settings (backup): size medium, responsive max-width 600px, min 0%,
 * "center top" 100px from the top — Popup Maker applied these inline. */
:where(html:has([data-ksp-chrome])) #popmake-1156 {
  max-width: 600px;
  min-width: 0%;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}