/* ==========================================================================
   Cookeryonline shared header: picture nav buttons + Google site/web search
   One stylesheet, three looks. Pick one by the class on <nav class="cookery-nav ...">:
     cookery-nav--sketch   (A) sketchbook ink + watercolour, 3D card flip
     cookery-nav--enamel   (B) vintage enamel kitchen signs, tilt & pop
     cookery-nav--collage  (C) paper-cut collage, expand & wiggle
   No frameworks, no external CDNs. Fonts are self-hosted subsets (SIL OFL).
   ========================================================================== */

@font-face{font-family:"CO Kalam";src:url(../fonts/kalam-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"CO Oswald";src:url(../fonts/oswald-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"CO Marker";src:url(../fonts/permanent-marker.woff2) format("woff2");font-display:swap}

/* ---------- shared nav layout ---------- */
.cookery-nav{--cn-speed:.45s;font-family:Tahoma,Verdana,Arial,sans-serif}
.cookery-nav ul{list-style:none;margin:0;padding:4px 0;display:flex;flex-wrap:wrap;justify-content:space-around;align-items:flex-start;gap:6px 4px}
.cookery-nav li{margin:0;padding:0;position:relative}
.cookery-nav li:hover,.cookery-nav li:focus-within{z-index:5}
.cn-btn{display:block;position:relative;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;outline:none;border-radius:8px}
.cn-btn:focus-visible{outline:3px dashed #f67009;outline-offset:4px}
.cn-card,.cn-face{display:block}
.cn-btn img{display:block;margin:0 auto;border:0}
.cn-back{display:none}
.cn-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- (A) sketchbook card flip ---------- */
.cookery-nav--sketch li{perspective:600px}
.cookery-nav--sketch .cn-btn{width:94px;height:84px}
.cookery-nav--sketch .cn-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--cn-speed) cubic-bezier(.3,1.4,.5,1)}
.cookery-nav--sketch li:nth-child(odd) .cn-card{transform:rotate(-1.5deg)}
.cookery-nav--sketch li:nth-child(even) .cn-card{transform:rotate(1.2deg)}
.cookery-nav--sketch .cn-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;
  background:#fbf6ea url(../img/nav/sketch/paper.svg);box-shadow:0 1px 0 #e7dcc4,1px 3px 6px rgba(80,55,20,.25)}
.cookery-nav--sketch .cn-front{padding-top:3px;text-align:center}
.cookery-nav--sketch .cn-front img{width:56px;height:56px}
.cookery-nav--sketch .cn-label{display:block;font:700 14px/1 "CO Kalam","Comic Sans MS",cursive;color:#2f2219;margin-top:2px;white-space:nowrap}
.cookery-nav--sketch .cn-back{display:flex;align-items:center;justify-content:center;transform:rotateY(180deg);overflow:hidden;padding:0 6px;
  font:700 15px/1.05 "CO Kalam","Comic Sans MS",cursive;color:#2b1d14;text-align:center}
.cookery-nav--sketch .cn-back::before{content:"";position:absolute;inset:0;background:var(--cn-c,#eaa53a);opacity:.8;
  -webkit-mask:url(../img/nav/sketch/wash-mask.svg) center/100% 100% no-repeat;mask:url(../img/nav/sketch/wash-mask.svg) center/100% 100% no-repeat}
.cookery-nav--sketch .cn-back span{position:relative}
.cookery-nav--sketch .cn-back span::after{content:" \2192";font-family:Arial,sans-serif;font-weight:700}
@media (hover:hover){
  .cookery-nav--sketch .cn-btn:hover .cn-card{transform:rotateY(180deg) scale(1.12)}
}
.cookery-nav--sketch .cn-btn:focus-visible .cn-card{transform:rotateY(180deg) scale(1.12)}

/* ---------- (B) vintage enamel signs: tilt & pop ---------- */
.cookery-nav--enamel .cn-btn{width:100px;height:76px}
.cookery-nav--enamel .cn-card{position:relative;width:100%;height:100%;transform-origin:50% 0;
  transition:transform var(--cn-speed) cubic-bezier(.34,1.8,.5,1),filter var(--cn-speed);filter:drop-shadow(0 2px 2px rgba(40,25,10,.3))}
.cookery-nav--enamel .cn-front img{width:100px;height:76px}
.cookery-nav--enamel .cn-label{position:absolute;left:8px;right:8px;bottom:8px;height:15px;display:flex;align-items:center;justify-content:center;
  font:600 11px/1 "CO Oswald","Arial Narrow",Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#f6ecd2;
  text-shadow:0 1px 0 rgba(0,0,0,.45);white-space:nowrap}
.cookery-nav--enamel .cn-front{position:relative;border-radius:11px;overflow:hidden}
.cookery-nav--enamel .cn-front::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);opacity:0}
@media (hover:hover){
  .cookery-nav--enamel li:nth-child(odd) .cn-btn:hover .cn-card{transform:translateY(-2px) rotate(-6deg) scale(1.14)}
  .cookery-nav--enamel li:nth-child(even) .cn-btn:hover .cn-card{transform:translateY(-2px) rotate(6deg) scale(1.14)}
  .cookery-nav--enamel .cn-btn:hover .cn-card{filter:drop-shadow(0 8px 6px rgba(40,25,10,.35))}
  .cookery-nav--enamel .cn-btn:hover .cn-front::after{animation:cn-shine .7s ease-out forwards}
}
.cookery-nav--enamel .cn-btn:focus-visible .cn-card{transform:translateY(-2px) rotate(-6deg) scale(1.14);filter:drop-shadow(0 8px 6px rgba(40,25,10,.35))}
.cookery-nav--enamel .cn-btn:focus-visible .cn-front::after{animation:cn-shine .7s ease-out forwards}
@keyframes cn-shine{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}

/* ---------- (C) paper-cut collage: expand & wiggle ---------- */
.cookery-nav--collage .cn-btn{width:88px;height:86px}
.cookery-nav--collage .cn-card{position:relative;width:100%;height:100%;transition:transform var(--cn-speed) cubic-bezier(.34,1.6,.5,1)}
.cookery-nav--collage .cn-front{text-align:center}
.cookery-nav--collage .cn-front img{width:80px;height:72px}
.cookery-nav--collage .cn-label{position:absolute;left:50%;bottom:0;transform:translateX(-50%) rotate(-4deg);white-space:nowrap;
  font:13px/1.15 "CO Marker","Comic Sans MS",cursive;color:#2b2d42;padding:1px 7px 0;
  background:rgba(255,248,225,.92) repeating-linear-gradient(45deg,rgba(255,255,255,0) 0 4px,rgba(255,111,145,.13) 4px 8px);
  box-shadow:0 1px 2px rgba(43,45,66,.3);transition:transform var(--cn-speed),background-color var(--cn-speed)}
.cookery-nav--collage li:nth-child(even) .cn-label{transform:translateX(-50%) rotate(3deg)}
@media (hover:hover){
  .cookery-nav--collage .cn-btn:hover .cn-card{transform:scale(1.18)}
  .cookery-nav--collage .cn-btn:hover .cn-front img{animation:cn-wiggle .55s ease-in-out}
  .cookery-nav--collage .cn-btn:hover .cn-label{transform:translateX(-50%) rotate(0);background-color:#ffd93d}
}
.cookery-nav--collage .cn-btn:focus-visible .cn-card{transform:scale(1.18)}
.cookery-nav--collage .cn-btn:focus-visible .cn-front img{animation:cn-wiggle .55s ease-in-out}
.cookery-nav--collage .cn-btn:focus-visible .cn-label{transform:translateX(-50%) rotate(0);background-color:#ffd93d}
@keyframes cn-wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}}

/* ---------- touch: a gentle press instead of hover ---------- */
.cn-btn:active .cn-card{transform:scale(.96)}

/* ---------- reduced motion: no flips, tilts or wiggles ---------- */
@media (prefers-reduced-motion:reduce){
  .cookery-nav .cn-card,.cookery-nav .cn-label,.cookery-nav .cn-face{transition:none!important;animation:none!important}
  .cookery-nav .cn-btn:hover .cn-card,.cookery-nav .cn-btn:focus-visible .cn-card{transform:none!important}
  .cookery-nav .cn-btn:hover img,.cookery-nav .cn-btn:focus-visible img,.cookery-nav .cn-front::after{animation:none!important}
  /* sketch: swap faces with a plain cross-fade instead of a 3D flip */
  .cookery-nav--sketch .cn-back{transform:none;opacity:0;transition:opacity .2s!important}
  .cookery-nav--sketch .cn-btn:hover .cn-back,.cookery-nav--sketch .cn-btn:focus-visible .cn-back{opacity:1}
}

/* ==========================================================================
   Search: one box, "This site" / "The web" pill switch, results from Google
   ========================================================================== */
.cookery-search{margin:4px auto;max-width:430px;font-family:Tahoma,Verdana,Arial,sans-serif;text-align:left}
.cs-row{display:flex;align-items:stretch;border:2px solid #f67009;border-radius:999px;background:#fff;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.08)}
.cs-row:focus-within{box-shadow:0 0 0 3px rgba(246,112,9,.25)}
.cookery-search input[type=search]{flex:1 1 auto;min-width:0;border:0;outline:0;padding:7px 4px 7px 14px;font:14px Tahoma,Verdana,Arial,sans-serif;color:#330066;background:transparent}
.cookery-search input[type=search]::placeholder{color:#8a7a99}
.cs-go{flex:0 0 auto;display:flex;align-items:center;gap:5px;border:0;margin:0;padding:0 14px 0 12px;cursor:pointer;
  background:#f67009;color:#fff;font:bold 13px Tahoma,Verdana,Arial,sans-serif;transition:background-color .2s}
.cs-go:hover,.cs-go:focus-visible{background:#660066;outline:0}
.cs-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.cs-scope{border:0;margin:6px 0 0;padding:0;display:flex;align-items:center;gap:8px;font-size:12px;color:#330066}
.cs-scope legend{float:left;padding:0;margin:0 2px 0 6px;font-weight:bold}
.cs-pill{display:inline-flex;background:#fff3d6;border:2px solid #f67009;border-radius:999px;padding:2px;position:relative}
.cs-pill input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.cs-pill label{padding:3px 12px;border-radius:999px;cursor:pointer;font-weight:bold;color:#660066;transition:background-color .2s,color .2s;user-select:none}
.cs-pill input:checked+label{background:#660066;color:#fff}
.cs-pill input:focus-visible+label{outline:2px dashed #660066;outline-offset:2px}
.cs-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){.cs-pill label,.cs-go{transition:none}}

/* ==========================================================================
   PHOTO SETS: the ORIGINAL Cookeryonline pictures, stylised.
   <nav class="cookery-nav cookery-nav--photo cookery-nav--watercolour|popart|linocut cookery-nav--cutout|fill">
   Each button carries two pictures (normal + hover close-up), exactly like the
   old rollovers:  .cn-front = normal picture, .cn-back = close-up.
     watercolour : 3D card flip from normal to close-up
     popart      : pop + tilt, close-up snaps in (comic "POW")
     linocut     : lift like a print being pulled, close-up fades in
   Layout:  --cutout = subject cut out, transparent, soft drop shadow
            --fill   = picture fills the whole tile edge to edge
   ========================================================================== */
@font-face{font-family:"CO Luckiest";src:url(../fonts/luckiest-guy.woff2) format("woff2");font-display:swap}

.cookery-nav--photo .cn-btn{width:88px;height:98px}
.cookery-nav--photo .cn-card{position:relative;display:block;width:100%;height:100%;transform-origin:50% 20%}
.cookery-nav--photo .cn-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.cookery-nav--photo .cn-back{display:flex}
.cookery-nav--photo picture,.cookery-nav--photo .cn-pic{display:block;width:64px;height:77px;margin:0 auto}
.cookery-nav--photo .cn-pic img{display:block;width:64px;height:77px}
.cookery-nav--photo .cn-label{display:block;margin-top:3px;white-space:nowrap;text-align:center}

/* layouts */
.cookery-nav--cutout .cn-pic img{filter:drop-shadow(2px 3px 2px rgba(40,25,10,.38))}
.cookery-nav--fill .cn-pic img{border-radius:6px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,1px 2px 5px rgba(40,25,10,.35)}

/* ---- watercolour: 3D flip ---- */
.cookery-nav--watercolour li{perspective:600px}
.cookery-nav--watercolour .cn-card{transform-style:preserve-3d;transition:transform var(--cn-speed) cubic-bezier(.3,1.4,.5,1)}
.cookery-nav--watercolour .cn-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cookery-nav--watercolour .cn-back{transform:rotateY(180deg)}
.cookery-nav--watercolour .cn-label{font:700 13.5px/1 "CO Kalam","Comic Sans MS",cursive;color:#3a2a20}
.cookery-nav--watercolour .cn-back .cn-label{color:#7a3b69}
@media (hover:hover){.cookery-nav--watercolour .cn-btn:hover .cn-card{transform:rotateY(180deg) scale(1.1)}}
.cookery-nav--watercolour .cn-btn:focus-visible .cn-card{transform:rotateY(180deg) scale(1.1)}

/* ---- pop-art: pop + tilt, close-up snaps in ---- */
.cookery-nav--popart .cn-card{transition:transform .35s cubic-bezier(.34,1.9,.5,1)}
.cookery-nav--popart .cn-back{opacity:0;transition:opacity .08s steps(1)}
.cookery-nav--popart .cn-label{font:15px/1 "CO Luckiest","Arial Black",Impact,sans-serif;letter-spacing:.02em;color:#fff;
  -webkit-text-stroke:1px #121220;text-shadow:2px 2px 0 #121220;text-transform:uppercase;font-size:12.5px}
.cookery-nav--popart li:nth-child(4n+1) .cn-label{color:#ffd400}
.cookery-nav--popart li:nth-child(4n+2) .cn-label{color:#ff3b6b}
.cookery-nav--popart li:nth-child(4n+3) .cn-label{color:#00b2ff}
.cookery-nav--popart li:nth-child(4n) .cn-label{color:#2fe0d0}
@media (hover:hover){
  .cookery-nav--popart li:nth-child(odd) .cn-btn:hover .cn-card{transform:scale(1.18) rotate(-5deg)}
  .cookery-nav--popart li:nth-child(even) .cn-btn:hover .cn-card{transform:scale(1.18) rotate(5deg)}
  .cookery-nav--popart .cn-btn:hover .cn-back{opacity:1}
  .cookery-nav--popart .cn-btn:hover .cn-front .cn-pic{opacity:0}
}
.cookery-nav--popart .cn-btn:focus-visible .cn-card{transform:scale(1.18) rotate(-5deg)}
.cookery-nav--popart .cn-btn:focus-visible .cn-back{opacity:1}
.cookery-nav--popart .cn-btn:focus-visible .cn-front .cn-pic{opacity:0}

/* ---- linocut: lift like a pulled print, close-up fades in ---- */
.cookery-nav--linocut .cn-card{transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.cookery-nav--linocut .cn-back{opacity:0;transition:opacity .35s ease}
.cookery-nav--linocut .cn-front .cn-pic{transition:opacity .35s ease}
.cookery-nav--linocut .cn-label{font:600 11.5px/1 "CO Oswald","Arial Narrow",Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#1c1826;
  background:#f3e8d0;padding:2px 5px 1px;border:1.5px solid #1c1826;border-radius:2px}
@media (hover:hover){
  .cookery-nav--linocut .cn-btn:hover .cn-card{transform:translateY(2px) rotate(-2deg) scale(1.12)}
  .cookery-nav--linocut .cn-btn:hover .cn-back{opacity:1}
  .cookery-nav--linocut .cn-btn:hover .cn-front .cn-pic{opacity:0}
}
.cookery-nav--linocut .cn-btn:focus-visible .cn-card{transform:translateY(2px) rotate(-2deg) scale(1.12)}
.cookery-nav--linocut .cn-btn:focus-visible .cn-back{opacity:1}
.cookery-nav--linocut .cn-btn:focus-visible .cn-front .cn-pic{opacity:0}

/* reduced motion: still swap to the close-up (like the old rollover), but no flip/tilt */
@media (prefers-reduced-motion:reduce){
  .cookery-nav--photo .cn-card{transform:none!important;transition:none!important}
  .cookery-nav--watercolour .cn-back{transform:none;opacity:0}
  .cookery-nav--photo .cn-btn:hover .cn-back,.cookery-nav--photo .cn-btn:focus-visible .cn-back{opacity:1}
  .cookery-nav--photo .cn-btn:hover .cn-front,.cookery-nav--photo .cn-btn:focus-visible .cn-front{opacity:0}
}

/* ==========================================================================
   FRAME BAR: the header shown on its own inside a short, non-scrolling frame
   (/NavBar.html in the old GoLive framesets: Cookbook, Resource, Topics,
   Utensils, Links, Recipes ... frame rows 58-101px, scrolling="no").
   Opt in with <body class="cn-framebar cn-1row"> (NavBar.html), or <body class="cn-framehead cn-1row">
   for a full old header page that is loaded into a short top frame (mealexperience/Site01/MealExpHead.htm). Inside a frame 100vh = frame height,
   so the buttons are sized from it (and from the frame width) and stay in ONE row; when the frame
   is too narrow the row scrolls sideways (swipe / shift+wheel) instead of
   wrapping into rows the frame would hide.
   ========================================================================== */
html:has(body.cn-framebar){height:100%;overflow:hidden}
body.cn-framebar{margin:0;height:100%;overflow:hidden;background:#fff}
.cn-framebar *,.cn-framebar *::before,.cn-framebar *::after{box-sizing:border-box}
.cn-framebar .cn-bar{display:flex;align-items:center;gap:8px;height:100vh;width:100%;max-width:100%;padding:0 6px 0 2px;overflow:hidden}
.cn-framebar{--cn-h:clamp(44px,min(100vh - 6px,(100vw - 150px) / 7.4),98px)}
.cn-1row .cookery-nav{flex:1 1 auto;min-width:0;max-width:100%;height:100%;position:relative}
.cn-1row .cookery-nav ul{flex-wrap:nowrap;justify-content:space-around;align-items:center;gap:2px 6px;height:100%;padding:0 4px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cn-1row .cookery-nav ul::-webkit-scrollbar{display:none}
.cn-1row .cookery-nav li{flex:0 0 auto;scroll-snap-align:start}
.cn-1row .cookery-nav--photo .cn-btn{width:auto;min-width:calc((var(--cn-h) - 16px) * .83);height:var(--cn-h);padding:0 1px}
.cn-1row .cookery-nav--photo .cn-card{height:100%}
.cn-1row .cookery-nav--photo .cn-front{position:relative;inset:auto;height:100%;justify-content:center}
.cn-1row .cookery-nav--photo picture,.cn-1row .cookery-nav--photo .cn-pic,
.cn-1row .cookery-nav--photo .cn-pic img{height:calc(var(--cn-h) - 16px);width:calc((var(--cn-h) - 16px) * .831);max-width:none}
.cn-1row .cookery-nav--photo .cn-label{margin-top:1px;font-size:clamp(9.5px,calc(var(--cn-h) * .14),12.5px);line-height:1.05}
.cn-1row .cookery-nav--popart .cn-label{-webkit-text-stroke:.8px #121220;text-shadow:1.5px 1.5px 0 #121220}
/* hover/focus pop must stay inside the short frame */
@media (hover:hover){
  .cn-1row .cookery-nav--popart li:nth-child(odd) .cn-btn:hover .cn-card{transform:scale(1.06) rotate(-5deg)}
  .cn-1row .cookery-nav--popart li:nth-child(even) .cn-btn:hover .cn-card{transform:scale(1.06) rotate(5deg)}
  .cn-1row .cookery-nav--watercolour .cn-btn:hover .cn-card{transform:rotateY(180deg) scale(1.04)}
  .cn-1row .cookery-nav--linocut .cn-btn:hover .cn-card{transform:rotate(-2deg) scale(1.05)}
}
.cn-1row .cookery-nav--popart .cn-btn:focus-visible .cn-card{transform:scale(1.06) rotate(-5deg)}
.cn-1row .cn-btn:focus-visible{outline-offset:-2px}
/* orange edge glow appears on whichever side has more buttons scrolled out of view (pure CSS "scroll shadows") */
.cn-1row .cookery-nav ul{background:
  linear-gradient(to right,#fff 40%,rgba(255,255,255,0)) left center/34px 100% no-repeat local,
  linear-gradient(to left,#fff 40%,rgba(255,255,255,0)) right center/34px 100% no-repeat local,
  linear-gradient(to right,rgba(246,112,9,.45),rgba(246,112,9,0)) left center/12px 100% no-repeat scroll,
  linear-gradient(to left,rgba(246,112,9,.45),rgba(246,112,9,0)) right center/12px 100% no-repeat scroll,#fff}
/* MealExpHead-style frame headers: whole old header page in a short top frame; keep the nav to one row too */
body.cn-framehead{--cn-h:clamp(44px,min(100vh - 12px,(100vw - 280px) / 7.4),90px)}
.cn-framehead .cookery-nav-cell{min-width:0}
.cn-framehead .cookery-nav-cell .cookery-nav{width:0;min-width:100%}  /* let the table cell, not the 8 buttons, decide the width */

/* search sits beside the buttons; shrinks, drops the scope pills in very short frames, hides in narrow ones */
.cn-framebar .cn-bar-search{flex:0 1 330px;min-width:200px;max-width:330px;align-self:center}
.cn-framebar .cookery-search{margin:0;max-width:100%}
.cn-framebar .cookery-search input[type=search]{padding:5px 4px 5px 12px;font-size:13px}
.cn-framebar .cs-scope{margin-top:4px;font-size:11px}
.cn-framebar .cs-pill label{padding:2px 10px}
@media (max-height:71px){.cn-framebar .cs-scope{display:none}}
@media (max-width:899px){
  .cn-framebar .cn-bar-search{flex-basis:170px;min-width:120px}
  .cn-framebar .cs-scope{display:none}
  .cn-framebar .cs-go{font-size:0;gap:0;padding:0 10px}
  .cn-framebar .cookery-search input[type=search]{font-size:12px;padding-left:9px}
}
@media (max-width:699px){
  .cn-framebar .cookery-nav ul{gap:2px 3px;padding:0 2px}
  .cn-framebar .cn-bar{gap:4px}
  .cn-framebar .cn-bar-search{flex-basis:128px;min-width:104px}
}
@media (max-width:519px){.cn-framebar .cn-bar-search{display:none}}