/* chefcol-video.css (2 Nov 2026; owner 05:09 + 05:10: "Chef Col video higher up ... directly ABOVE the 'Got a question?' heading/ask box, desktop and phone").
   One compact video block (.ccv) sitting directly above the ask box on every page Chef Col is on: Know How hub (.kh-ask), Ask Chef Col page (.ac-askrow),
   home pane (.hm-ask.ccv-stack). The video is preload="none": only the poster loads until the visitor presses play. */
.ccv{display:flex;align-items:center;gap:12px;margin:0 0 10px}
.ccv-vid{flex:0 0 132px;width:132px}
.ccv-vid video{display:block;width:100%;height:auto;aspect-ratio:3/4;background:#fff;border:3px solid #1a1a1a;border-radius:0;box-shadow:3px 3px 0 #1a1a1a}
.ccv-vid video::cue{font:700 13px/1.3 Arial,sans-serif;color:#fff;background:rgba(0,0,0,.82)}
.ccv-txt{margin:0;min-width:0;font-size:.95rem;line-height:1.35;color:#16141f}
.ccv-txt b{display:block;font:800 1.15rem/1.15 "CO Title","Arial Black",sans-serif}
.ccv-txt span{display:block;color:#5b5866;font-size:.85rem;margin-top:2px}
.ccv-txt q{display:block;font-style:italic;margin-top:4px}
@media (min-width:760px){.ccv-vid{flex-basis:160px;width:160px}}
/* Ask Chef Col page: the 'Meet Chef Col' card moves above the ask box. CSS order only: the ask bar stays first in the HTML so the
   askchef-ai patch_knowhow.py anchor (bar inserted just before <section class="ac-meet") keeps working. */
.ac-askrow{display:flex;flex-direction:column}
.ac-askrow>.ac-meet{order:-1;grid-template-columns:132px minmax(0,1fr)!important;align-items:center;margin:0 0 10px;padding:10px 12px}
.ac-askrow>.ac-meet .ac-meet-vid{max-width:none;margin:0}
.ac-askrow>.ac-meet h2{font-size:1.25rem}
.ac-askrow>.ac-meet .ac-meet-said{font-size:.98rem}
@media (min-width:700px){.ac-askrow>.ac-meet{grid-template-columns:160px minmax(0,1fr)!important;padding:12px 16px}}
/* Know How hub: the static avatar is replaced by the video block above 'Got a question?' */
.kh-ask.ccv-stack{display:block}
/* home pane: one column, video block above the speech bubble; bubble pointer points up at Chef Col */
.hm-ask.ccv-stack{grid-template-columns:minmax(0,1fr)!important}
.hm-ask.ccv-stack .hm-ask-side{flex-direction:row;align-items:center;margin:0}
.hm-ask.ccv-stack .hm-ask-bubble:before{left:58px;top:-17px;bottom:auto;border:8px solid transparent;border-bottom:14px solid #1a1a1a;border-top:0}
.hm-ask.ccv-stack .hm-ask-bubble:after{left:61px;top:-11px;bottom:auto;border:5px solid transparent;border-bottom:9px solid #fff;border-top:0}
@media (min-width:760px){.hm-ask.ccv-stack .hm-ask-bubble:before{left:72px}.hm-ask.ccv-stack .hm-ask-bubble:after{left:75px}}
.hm-ask.ccv-stack .ccv-txt{background:#fff;border:3px solid #1a1a1a;box-shadow:3px 3px 0 #1a1a1a;padding:6px 10px}

/* home-colvideo (2 Nov 2026, owner pt480u "Col video frame rather than his head and a separate video button"):
   play overlay on the video frame (the whole frame is the tap target; the yellow play square sits bottom-right so it does not cover his face). Scoped to .ccv-ovl / .ccv-play (home pane only for now); no effect on pages without those classes.
   The pane's inline script adds .is-ovl, removes the native controls and un-hides the button; without JS the native controls stay. */
.ccv-ovl{position:relative}
.ccv-play{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ccv-play[hidden]{display:none}
.ccv-play:before{content:"";position:absolute;right:8px;bottom:8px;width:44px;height:44px;box-sizing:border-box;background:#ffd23f;border:3px solid #1a1a1a;border-radius:0;box-shadow:3px 3px 0 #1a1a1a}
.ccv-play:after{content:"";position:absolute;right:21px;bottom:20px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #1a1a1a}
.ccv-play:hover:before,.ccv-play:focus-visible:before{background:#c2410c}
.ccv-play:hover:after,.ccv-play:focus-visible:after{border-left-color:#fff}
.ccv-play:focus-visible{outline:3px solid #1a1a1a;outline-offset:3px}
.ccv-ovl.is-ovl video{cursor:pointer}
@media (min-width:760px){.ccv-play:before{width:50px;height:50px}.ccv-play:after{right:23px;bottom:21px;border-width:12px 0 12px 19px}}