/* Kaiwhai sidebar blocks and sticky contact card. */

/* ================= sidebar blocks that fill the white space ================ */

.kws-side{
  font-family:"Farro", sans-serif;
  margin-top:34px !important;
  padding:26px 24px 24px !important;
  background:var(--theme-color3,#F9F7E6);
  border-radius:20px;
}
.kws-side *{ box-sizing:border-box; }

.kws-side-eyebrow{
  font-size:11px !important; font-weight:700 !important; letter-spacing:.2em;
  text-transform:uppercase; color:var(--theme-color,#9F974F) !important;
  margin:0 0 6px !important; line-height:1.4 !important;
}
.kws-side-title{
  font-size:22px !important; font-weight:700 !important; line-height:1.25 !important;
  color:var(--title-color,#686242) !important; margin:0 !important;
}
.kws-side-lede{
  font-size:14px !important; font-weight:300 !important; line-height:1.65 !important;
  color:var(--body-color,#85847d) !important; margin:8px 0 20px !important;
}

.kws-side-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }

/* pause control - WCAG asks for a way to stop anything that moves on its own */
.kws-yt-pause{
  flex:0 0 auto; width:28px; height:28px; margin-top:2px; padding:0;
  border:1px solid #dcd9c6; border-radius:50%; background:transparent;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.kws-yt-pause:hover{ border-color:var(--theme-color,#9F974F); }
.kws-yt-pause-icon{
  width:8px; height:10px; border-left:3px solid var(--title-color,#686242);
  border-right:3px solid var(--title-color,#686242);
}
.is-paused .kws-yt-pause-icon{
  width:0; height:0; border:0;
  border-style:solid; border-width:5px 0 5px 9px;
  border-color:transparent transparent transparent var(--title-color,#686242);
  margin-left:2px;
}

/* the cross-fade between videos - slow enough to read as a change of scene
   rather than a flicker, with a touch of drift so it has a direction */
.kws-yt-stage{
  transition:opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1);
  will-change:opacity, transform;
}
.kws-yt-stage.is-swapping{ opacity:0; transform:translateY(8px); }

/* --- video rows --- */
.kws-vid{
  display:flex; align-items:flex-start; gap:13px;
  margin-bottom:16px; text-decoration:none !important;
}
.kws-vid:last-of-type{ margin-bottom:16px; }
.kws-vid-big{ display:block; }

/* --- dots, progress --- */
.kws-yt-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.kws-dots{ display:flex; gap:6px; }
.kws-dot{
  width:7px; height:7px; padding:0; border:0; border-radius:50%;
  background:#d5d2bf; cursor:pointer; transition:background .25s ease, transform .25s ease;
}
.kws-dot.is-on{ background:var(--theme-color,#9F974F); transform:scale(1.35); }
/* The bar is driven frame by frame from the same clock that triggers the
   change, so it is a real countdown to the next video - not an animation
   running alongside one. No CSS transition here: the width is already being
   set every frame, and a transition would lag behind it. */
.kws-yt-progress{ height:2px; margin-top:14px; background:#e4e1d0; border-radius:2px; overflow:hidden; }
.kws-yt-progress span{ display:block; height:100%; width:0; background:var(--theme-color,#9F974F); }
.is-paused .kws-yt-progress{ opacity:.35; }
.is-held .kws-yt-progress{ opacity:.6; }

.kws-vid-thumb{
  position:relative; display:block; flex:0 0 120px; width:120px;
  aspect-ratio:16/9; overflow:hidden; border-radius:10px;
  background:#252323;
}
.kws-vid-big .kws-vid-thumb{ width:100%; flex:none; margin-bottom:12px; }
.kws-vid-thumb img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.kws-vid:hover .kws-vid-thumb img{ transform:scale(1.05); }

/* play badge - dark disc with a white triangle, khaki on hover, so it reads as
   video without dragging YouTube red into the palette */
.kws-vid-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%;
  background:rgba(37,35,35,.72); transition:background .25s ease;
}
.kws-vid-big .kws-vid-play{ width:52px; height:52px; }
.kws-vid-play::after{
  content:""; position:absolute; top:50%; left:52%;
  transform:translate(-50%,-50%);
  border-style:solid; border-width:6px 0 6px 10px;
  border-color:transparent transparent transparent #fff;
}
.kws-vid-big .kws-vid-play::after{ border-width:9px 0 9px 15px; }
.kws-vid:hover .kws-vid-play{ background:var(--theme-color,#9F974F); }

.kws-vid-meta{ display:block; min-width:0; }
.kws-vid-label{
  display:block; font-size:10px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--theme-color,#9F974F); margin-bottom:4px;
}
.kws-vid-name{
  display:block; font-size:14px; font-weight:500; line-height:1.45;
  color:var(--title-color,#686242);
}
.kws-vid-big .kws-vid-name{ font-size:16px; }
.kws-vid:hover .kws-vid-name{ color:var(--theme-color,#9F974F); }

.kws-side-more{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px !important; font-weight:700 !important; letter-spacing:.1em;
  text-transform:uppercase; color:var(--theme-color,#9F974F) !important;
  text-decoration:none !important; border-bottom:1px solid transparent; padding-bottom:2px;
}
.kws-side-more:hover{ border-bottom-color:var(--theme-color,#9F974F); }

/* --- talk to us --- */
.kws-talk{ background:#fff; border:1px solid #f0f0f0; }
.kws-talk-row{
  display:block; padding:11px 0; text-decoration:none !important;
  border-top:1px solid #f0f0f0;
}
.kws-talk-row:first-of-type{ border-top:0; }
.kws-talk-k{
  display:block; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--body-color,#85847d); margin-bottom:2px;
}
.kws-talk-v{
  display:block; font-size:15px; font-weight:500; line-height:1.4;
  color:var(--title-color,#686242); word-break:break-word;
}
.kws-talk-row:hover .kws-talk-v{ color:var(--theme-color,#9F974F); }
.kws-side-pill{
  display:block; text-align:center; margin-top:18px;
  background:var(--theme-color,#9F974F); color:#fff !important;
  font-size:15px !important; font-weight:500 !important; text-decoration:none !important;
  padding:13px 20px; border-radius:9999px; transition:background .25s ease;
}
.kws-side-pill:hover{ background:#857e40; }

.kws-side a:focus-visible,
.kws-side button:focus-visible{ outline:2px solid var(--theme-color,#9F974F); outline-offset:3px; }

/* ============ the contact card sticks to the top ============
   Everything scrolls normally. Once the reader has scrolled past the video
   block, the "Talk to us" card reaches the top of the screen and stays there
   while the article keeps going - so the left column never turns into an
   empty white strip.

   Two things have to be true for this to work.
   1. The theme sets `overflow: hidden auto` on <body>, which makes body a
      scroll container and silently kills position:sticky on every descendant.
      `overflow-x: clip` clips exactly the same way but is NOT scrollable, so
      sticky starts working again. Verified on the live page: no sideways
      scrollbar appears (scrollWidth still equals clientWidth).
   2. The sticky card can only travel as far as its container goes, and
      .page-sidebar is much shorter than its column (1712px inside 5274px).
      height:100% stretches it to the full column, so the card rides all the
      way down to the footer.
   Desktop only - below 992px the sidebar stacks under the article, where a
   sticky card would just cover the content. */
@media (min-width:992px){
  body{ overflow-x:clip !important; overflow-y:visible !important; }

  /* The sticky card sits inside its own widget wrapper, and a sticky element
     can only travel as far as its containing block. That wrapper is only as
     tall as its contents, so the card came unstuck almost immediately. Making
     the sidebar a flex column and letting the LAST widget grow gives the card
     the full height of the column to travel down. */
  .page-sidebar{ display:flex; flex-direction:column; height:100%; }
  .page-sidebar > .widget{ flex:0 0 auto; }
  .page-sidebar > .widget:last-child{ flex:1 1 auto; }

  #kws-block-talk{
    position:sticky;
    top:var(--kws-sticky-top,110px);
  }
}

/* A viewport too short to hold the card would trap it half off-screen. */
@media (min-width:992px) and (max-height:560px){
  #kws-block-talk{ position:static; }
}