/*
Theme Name: Bakala'O Kitchenette
Theme URI: 
Author: AI
Description: A custom block theme for Bakala'O Kitchenette based on Tailwind CSS.
Version: 1.0
Requires at least: 6.2
Requires PHP: 7.0
License: GPLv2 or later
Text Domain: bakalao-kitchenette
Tags: block-theme, full-site-editing, custom
*/

/* Site integration and accessible controls. */
#main-header { position: fixed; }
#main-header > .max-w-container-max { min-height: 80px; }
.admin-bar #main-header { top: 32px; }
@media (max-width: 782px) { .admin-bar #main-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar #main-header { position: absolute; } }
:focus-visible { outline: 3px solid #7e22ce; outline-offset: 4px; }
[id] { scroll-margin-top: 110px; }
.bakalao-content { max-width: 1200px; margin: auto; padding: 70px 24px; min-height: 55vh; }
.bakalao-content h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 24px; }
.bakalao-content h2 { font-size: 1.5rem; margin: 24px 0 12px; }
.bakalao-content p { margin-bottom: 18px; }
.bakalao-content .wp-block-post-template { list-style: none; padding: 0; }
.wpcf7 h2 { font-size: 1.5rem; margin-bottom: 20px; }
.wpcf7 label { display: block; font-weight: 700; font-size: 14px; }
.wpcf7 p { margin-bottom: 18px; }
.wpcf7 input:not([type=submit]), .wpcf7 textarea, .wpcf7 select { width: 100%; margin-top: 6px; background: #FAF7F2; border: 1px solid #D5CBC0; border-radius: 12px; padding: 12px; color: #221C19; }
.wpcf7 input[type=submit] { width: 100%; padding: 16px; background: #9E4334; color: white; font-weight: 700; border-radius: 999px; cursor: pointer; }
.wpcf7 .wpcf7-not-valid-tip { color: #a21b1b; }
.wpcf7 .wpcf7-response-output { padding: 16px; margin: 16px 0; }
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal-on-scroll { opacity: 1; transform: none; } .bk-cta-moped-track, .bk-cta-moped { transform: none; } }

/* Home page: warm editorial layout, September 2026. */
.bk-home { --bk-ink:#29251f; --bk-rust:#974731; --bk-muted:#655b50; color:var(--bk-ink); background:#faf7f2; }
.bk-home .bk-wrap { width:min(1280px, calc(100% - 96px)); margin-inline:auto; }
.bk-home h1,.bk-home h2,.bk-home h3 { letter-spacing:-.035em; }
.bk-home p { font-size:16px; line-height:1.8; color:var(--bk-muted); }
.bk-home .bk-eyebrow { display:block; color:var(--bk-rust); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.17em; line-height:1.6; margin-bottom:16px; }
.bk-home .bk-hero { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding-block:64px 72px; }
.bk-hero h1 { font-size:clamp(40px,4.7vw,68px); line-height:1.07; font-weight:600; margin:0 0 26px; }
.bk-hero h1 em { color:var(--bk-rust); font-weight:400; }
.bk-hero-copy>p { max-width:510px; font-size:17px; }
.bk-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:28px; }
.bk-home .bk-button { display:inline-flex; align-items:center; justify-content:center; gap:24px; border:1px solid var(--bk-rust); background:var(--bk-rust); color:#fff; padding:15px 25px; border-radius:6px; font-weight:800; font-size:14px; line-height:1.5; text-decoration:none; transition:background .2s,transform .2s; }
.bk-home .bk-button:hover { background:#75341f; transform:translateY(-2px); }
.bk-home .bk-button-outline { background:transparent; color:var(--bk-rust); }
.bk-home .bk-button-outline:hover { background:#f1e6da; }
.bk-hero-location { display:inline-flex; gap:20px; margin-top:30px; font-size:12px; font-weight:700; color:var(--bk-muted); }
.bk-hero-art { position:relative; min-width:0; }
.bk-hero-art>img { display:block; width:100%; height:560px; object-fit:cover; border-radius:150px 150px 12px 12px; }
.bk-image-note { position:absolute; bottom:28px; left:-28px; padding:24px 30px; background:#fff9ed; border:1px solid #e8dac5; box-shadow:0 10px 32px #29251f15; transform:rotate(-3deg); }
.bk-image-note>span:last-child { font-family:Fraunces,serif; font-size:25px; line-height:1.25; }
.bk-image-note .bk-eyebrow { margin-bottom:8px; font-size:9px; }
.bk-video-button { position:absolute; top:26px; right:22px; display:flex; gap:10px; align-items:center; background:#fff9ed; padding:12px 18px; border-radius:40px; color:#29251f; font-size:12px; font-weight:800; cursor:pointer; box-shadow:0 3px 18px #0002; }
.bk-video-button:hover { background:#f0dfc5; }
.bk-quick-links { border-block:1px solid #e1d7ca; }
.bk-quick-links>.bk-wrap { display:grid; grid-template-columns:repeat(4,1fr); }
.bk-quick-links a { padding:23px 24px; display:flex; justify-content:space-between; gap:12px; font-size:13px; font-weight:800; border-right:1px solid #e1d7ca; }
.bk-quick-links a:first-child { border-left:1px solid #e1d7ca; }
.bk-quick-links a:hover { background:#efe6db; }
.bk-section { padding-block:88px; }
.bk-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; }
.bk-home h2 { font-size:clamp(32px,3.4vw,48px); line-height:1.15; font-weight:500; }
.bk-home .bk-text-link { display:inline-flex; align-items:center; gap:14px; font-size:13px; font-weight:800; color:var(--bk-rust); text-decoration:underline; text-underline-offset:5px; }
.bk-intro { max-width:680px; margin-top:20px; }
.bk-dishes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:36px; }
.bk-dish { background:#fff; border:1px solid #e5dccf; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.bk-dish-image { background:#efe8dc; padding:24px; }
.bk-dish-image img { width:100%; height:240px; object-fit:contain; filter:drop-shadow(0 12px 12px #4d2d1820); transition:transform .3s; }
.bk-dish:hover img { transform:scale(1.04); }
.bk-dish-copy { padding:28px; flex:1; display:flex; flex-direction:column; align-items:flex-start; }
.bk-dish-copy .bk-eyebrow { font-size:10px; margin-bottom:10px; }
.bk-home h3 { font-size:27px; font-weight:500; line-height:1.2; }
.bk-dish-copy p { font-size:14px; margin:14px 0 24px; }
.bk-dish-copy .bk-text-link { margin-top:auto; }
.bk-flavors { background:#eeeadf; border-block:1px solid #dfd7c9; }
.bk-flavor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:42px; margin-top:36px; }
.bk-flavor-card { position:relative; display:block; }
.bk-flavor-card img { width:100%; height:200px; object-fit:contain; margin-bottom:24px; transition:transform .3s; }
.bk-flavor-card:hover img { transform:translateY(-6px); }
.bk-flavor-number { position:absolute; top:0; left:0; font-family:Fraunces,serif; color:#81725e; font-size:22px; }
.bk-flavor-card p { margin:16px 0 20px; font-size:14px; }
.bk-home #our-roots-section { background:#faf7f2; padding-block:88px; }
.bk-home .reveal-on-scroll { opacity:1; transform:none; }
.bk-visit { display:grid; grid-template-columns:1.1fr 1fr; gap:80px; border-bottom:1px solid #e1d7ca; }
.bk-visit-copy>p { margin:24px 0; max-width:500px; }
.bk-visit address { font-style:normal; font-size:15px; line-height:1.8; }
.bk-visit-panel { padding:46px; border-radius:12px; background:#2b1d15; color:#fff8ec; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.bk-home .bk-visit-panel .bk-eyebrow { color:#e2b399; }
.bk-home .bk-visit-panel h3 { font-size:36px; }
.bk-home .bk-visit-panel p { color:#e0e2d5; margin:22px 0 28px; }
.bk-home .bk-button-light { background:#fff8ec; border-color:#fff8ec; color:#2b1d15; }
.bk-home .bk-button-light:hover { background:#e3d8c5; }
.bk-visit-panel-footer { margin-top:32px; padding-top:24px; border-top:1px solid #ffffff30; width:100%; font-size:13px; line-height:1.8; color:#e0e2d5; }
.bk-visit-panel-footer a { color:#fff8ec; text-decoration:underline; text-underline-offset:4px; }
.bk-faq { display:grid; grid-template-columns:1fr 1.25fr; gap:70px; padding-block:88px; }
.bk-faq>div>p { margin-top:18px; }
.bk-faq details { border-bottom:1px solid #d9cfbf; padding-block:22px; }
.bk-faq details:first-child { border-top:1px solid #d9cfbf; }
.bk-faq summary { cursor:pointer; font-size:16px; font-weight:800; padding-right:16px; }
.bk-faq details p { font-size:14px; margin:16px 0 0; }
.bk-faq details a { color:var(--bk-rust); text-decoration:underline; }
.bk-final-cta { background:#ecddca; padding-block:54px; overflow:hidden; }
.bk-final-cta>.bk-wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.bk-final-cta .bk-eyebrow { margin-bottom:8px; }
.bk-cta-order-group { display:flex; align-items:center; gap:16px; }
.bk-cta-moped-track { flex-shrink:0; opacity:0; transform:translateX(-220px); line-height:0; }
.bk-final-cta.bk-cta-in-view .bk-cta-moped-track { opacity:1; }
.bk-cta-moped { display:block; width:132px; height:88px; object-fit:contain; }
@media(prefers-reduced-motion:no-preference) {
  /* Track handles the drive-by itself: a real ride accelerates away from a stop, holds
     a cruising speed, then brakes with a little forward weight-shift before settling. */
  .bk-final-cta.bk-cta-in-view .bk-cta-moped-track { animation:bkMopedDrive 1.7s forwards; }
  /* The image gets its own layered motion (road bob + lean into the accel/brake),
     independent of the track's translateX so the two never fight over `transform`. */
  .bk-final-cta.bk-cta-in-view .bk-cta-moped { animation:bkMopedBob 1.7s ease-in-out forwards; }
  .bk-final-cta.bk-cta-in-view .bk-cta-button { animation:bkCtaButtonGreet 1.6s ease-in-out 2; animation-delay:1.7s; }
}
@keyframes bkMopedDrive {
  0%   { transform:translateX(-220px); animation-timing-function:ease-in; }
  16%  { transform:translateX(-186px); animation-timing-function:linear; }
  66%  { transform:translateX(5px); animation-timing-function:ease-out; }
  82%  { transform:translateX(-5px); animation-timing-function:ease-in-out; }
  100% { transform:translateX(0); }
}
@keyframes bkMopedBob {
  0%   { transform:translateY(0) rotate(0deg); }
  8%   { transform:translateY(-1px) rotate(-2.5deg); }
  20%  { transform:translateY(1px) rotate(0deg); }
  32%  { transform:translateY(-1.4px) rotate(.6deg); }
  44%  { transform:translateY(1px) rotate(-.6deg); }
  56%  { transform:translateY(-1.4px) rotate(.6deg); }
  64%  { transform:translateY(1px) rotate(-.6deg); }
  72%  { transform:translateY(-1px) rotate(3.5deg); }
  86%  { transform:translateY(.6px) rotate(-1.2deg); }
  100% { transform:translateY(0) rotate(0deg); }
}
@keyframes bkCtaButtonGreet { 0%,100% { transform:translateY(0); filter:none; } 50% { transform:translateY(-5px); filter:drop-shadow(0 8px 24px rgba(151,71,49,.3)); } }
@media(min-width:1600px) { .bk-hero h1 { font-size:72px; } }
@media(max-width:1000px) { .bk-home .bk-wrap { width:calc(100% - 48px); } .bk-home .bk-hero { gap:32px; } .bk-hero-art>img { height:480px; } .bk-image-note { left:-12px; padding:18px; } .bk-image-note>span:last-child { font-size:22px; } .bk-dish-copy { padding:20px; } .bk-dish-image { padding:12px; } .bk-dish-image img { height:180px; } .bk-visit { gap:36px; } .bk-visit-panel { padding:30px; } .bk-faq { gap:36px; } }
@media(max-width:700px) { .bk-home .bk-wrap { width:calc(100% - 40px); } .bk-home .bk-hero { grid-template-columns:1fr; padding-block:36px 40px; gap:36px; } .bk-hero h1 { font-size:45px; } .bk-hero-copy>p { font-size:16px; } .bk-hero-art { margin-left:12px; } .bk-hero-art>img { height:380px; border-radius:100px 100px 10px 10px; } .bk-image-note { bottom:20px; } .bk-quick-links>.bk-wrap { width:100%; grid-template-columns:1fr 1fr; } .bk-quick-links a { padding:16px 20px; font-size:12px; border-bottom:1px solid #e1d7ca; } .bk-section,.bk-home #our-roots-section { padding-block:56px; } .bk-section-heading { align-items:flex-start; flex-direction:column; gap:20px; } .bk-dishes,.bk-flavor-grid,.bk-visit,.bk-faq { grid-template-columns:1fr; } .bk-dish-image img { height:250px; } .bk-dish-copy { padding:26px; } .bk-flavor-grid { gap:36px; } .bk-flavor-card { padding-bottom:28px; border-bottom:1px solid #d9cfbf; } .bk-flavor-card:last-child { border:0; padding-bottom:0; } .bk-flavor-card img { height:220px; } .bk-faq { gap:28px; padding-block:56px; } .bk-final-cta>.bk-wrap { align-items:flex-start; flex-direction:column; } .bk-visit-panel h3 { font-size:31px; } .bk-home .bk-eyebrow { letter-spacing:.12em; } }
.bk-home .bk-visit-panel h3 { color:#fff8ec; }
.bk-home #our-roots-section .neon-purple-badge { background:#efe6da; color:#974731; border-color:#d8bba7; box-shadow:none; font-size:10px; }
.bk-home #our-roots-section>div.absolute { display:none; }
.bk-home #our-roots-section .btn-premium-primary { background:#974731; box-shadow:none; }
.bk-home #our-roots-section .btn-premium-secondary { color:#974731; border-color:#974731; box-shadow:none; }
.bk-home span[aria-hidden="true"] { font-family:Arial,sans-serif; }
.bk-home .bk-icon[aria-hidden="true"] { font-family:'Material Symbols Outlined'; font-size:18px; }

/* Video invitation and ordering motion. */
.bk-home #roots-video-wrapper { transition:box-shadow .45s ease, border-color .45s ease; }
.bk-home .bk-video-order { position:relative; overflow:hidden; margin-top:18px; gap:24px; min-width:180px; }
.bk-home .bk-video-order::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 25%,#ffffff45 48%,transparent 70%); transform:translateX(-140%); pointer-events:none; }
.bk-home .bk-video-order .bk-icon { transition:transform .25s ease; }
.bk-home .bk-video-order:hover .bk-icon { transform:translate(3px,-3px); }
@media(prefers-reduced-motion:no-preference) {
  .bk-home .bk-video-button { animation:bkVideoInvite 2.6s ease-in-out 3; }
  .bk-home #roots-video-wrapper.bk-video-in-view:not(.bk-video-playing) { animation:bkVideoGlow 3s ease-in-out 3; }
  .bk-home #cinema-video-modal[open]::backdrop { animation:bkCinemaBackdrop .35s ease-out both; }
  .bk-home #cinema-video-modal[open] .bk-cinema-screen { animation:bkCinemaEntrance .5s cubic-bezier(.2,.7,.2,1) both; }
  .bk-home #cinema-video-modal[open] .bk-cinema-caption { animation:bkCinemaEntrance .5s .12s ease-out both; }
  .bk-home #cinema-video-modal[open] .bk-video-order::after { animation:bkOrderShine 3.2s .6s ease-in-out 3; }
}
@keyframes bkVideoInvite { 0%,100% { transform:translateY(0); filter:none; } 50% { transform:translateY(-5px); filter:drop-shadow(0 8px 24px rgba(151,71,49,.21)); } }
@keyframes bkVideoGlow { 0%,100% { box-shadow:0 12px 30px #45271c25; } 50% { box-shadow:0 15px 42px #b9674545; border-color:#de9b78; } }
@keyframes bkCinemaEntrance { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes bkCinemaBackdrop { from { opacity:0; } to { opacity:1; } }
@keyframes bkOrderShine { 0%,15% { transform:translateX(-140%); } 55%,100% { transform:translateX(140%); } }
@media(max-height:540px) { .bk-home .bk-cinema-screen { max-height:65dvh; width:auto; max-width:90vw; } .bk-home .bk-cinema-caption h3,.bk-home .bk-cinema-caption p { display:none; } .bk-home .bk-video-order { margin-top:0; padding:10px 24px; } }

/* Header Order Now: a brief glow and highlight sweep. */
#main-header .bk-header-order { position:relative; isolation:isolate; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; }
#main-header .bk-header-order::after { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.36) 48%,transparent 76%); transform:translateX(-140%); }
#main-header .bk-header-order:hover,#main-header .bk-header-order:focus-visible { transform:translateY(-3px) scale(1.035); box-shadow:0 10px 24px rgba(184,93,78,.38); }
#main-header .bk-header-order:active { transform:translateY(0) scale(.98); }
@media(prefers-reduced-motion:no-preference) {
  #main-header .bk-header-order { animation:bkHeaderOrderPulse 2.4s ease-in-out 2; }
  #main-header .bk-header-order::after { animation:bkHeaderOrderShine 2.4s ease-in-out 2; }
  #main-header .bk-header-order:hover::after,#main-header .bk-header-order:focus-visible::after { animation:bkHeaderOrderHoverShine .8s ease-out; }
}
@keyframes bkHeaderOrderPulse { 0%,100% { box-shadow:0 6px 20px rgba(184,93,78,.28); } 50% { box-shadow:0 8px 28px rgba(184,93,78,.45),0 0 0 6px rgba(198,118,100,.09); } }
@keyframes bkHeaderOrderShine { 0%,15% { transform:translateX(-140%); } 65%,100% { transform:translateX(140%); } }
@keyframes bkHeaderOrderHoverShine { from { transform:translateX(-140%); } to { transform:translateX(140%); } }
@media(prefers-reduced-motion:reduce) { #main-header .bk-header-order:hover,#main-header .bk-header-order:focus-visible,#main-header .bk-header-order:active { transform:none; } }