/* ==========================================================================
   Kirkland Kitchen — United Signature theme.
   Base rules mirror the source or_files/assets/styles.css (gold/ink/cream);
   admin/inline-edit rules layered on top (.bc-bg-host, .bc-bg-controls, etc.).
   ========================================================================== */

:root{
  --gold:#b08d57; --gold-d:#8f6f3f;
  --ink:#171a1e;  --ink2:#22262c;
  --body:#4a4f57;
  --cream:#f7f4ee;
  --line:#e9e4da; --line2:#e4ddd0;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#fff;}
body{font-family:'Mulish','Helvetica Neue',Arial,sans-serif;color:var(--ink2);-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;height:auto;}
a{color:var(--gold);text-decoration:none;}
a:hover{color:var(--gold-d);}

.serif{font-family:'Cormorant Garamond','Georgia',serif;font-weight:600;color:var(--ink);}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:16px;}

/* --- buttons ------------------------------------------------------------- */
/* IMPORTANT: the engine injects per-scheme CSS (`<style id="bc-scheme-overrides">`)
   AFTER this file with rules like `.dark .btn{color:accent}` / `.light .btn{...}`.
   Its selectors (`.scheme .btn`, specificity 0,2,0) beat a bare `.btn` (0,1,0),
   so without !important the solid button's label is repainted gold-on-gold
   (invisible) and its hover text goes dark. We use a SOLID .btn, so we override
   the scheme with !important on fill + label (same trick as .btn-primary in the
   redmond/bathroom themes). Labels stay white and readable in every scheme. */
.btn{display:inline-block;background:var(--gold)!important;color:#fff!important;padding:17px 32px;font-size:15px;font-weight:700;letter-spacing:.04em;border-radius:2px;border:none!important;cursor:pointer;font-family:inherit;transition:color .2s ease,background-color .2s ease;}
.btn:hover,.btn:focus-visible{background:var(--gold-d)!important;color:#fff!important;}
.btn-sm{padding:13px 26px;font-size:14px;letter-spacing:.05em;}
/* .btn-outline is a distinct class the scheme CSS does not touch, so no !important needed. */
.btn-outline{display:inline-block;border:1px solid var(--ink2);color:var(--ink2);padding:16px 32px;font-size:15px;font-weight:700;letter-spacing:.04em;border-radius:2px;background:transparent;cursor:pointer;font-family:inherit;transition:color .2s ease,background-color .2s ease;}
.btn-outline:hover,.btn-outline:focus-visible{background:var(--ink2);color:#fff;}
/* Outline button placed on a dark section (e.g. dark hero) needs a light label. */
.section.dark .btn-outline,.card.dark .btn-outline{border-color:rgba(255,255,255,.55);color:#fff;}
.section.dark .btn-outline:hover,.card.dark .btn-outline:hover{background:#fff;color:var(--ink);}

/* --- topbar / header ----------------------------------------------------- */
.topbar{background:var(--ink);color:#d8cbb5;font-size:13px;letter-spacing:.04em;display:flex;justify-content:center;align-items:center;gap:24px;padding:9px 24px;flex-wrap:wrap;text-align:center;}
.topbar a{color:var(--gold);font-weight:700;letter-spacing:.06em;}

/* Grey header bar so the logo's white "UNITED" wordmark is visible (it has an
   alpha channel and disappears on white). Desktop: logo + inline nav + phone.
   Below 1160px the inline nav is swapped for a hamburger + drop-down panel. */
.site-header{position:sticky;top:var(--bc-admin-bar-h,0);z-index:50;background:#2f333a;border-bottom:1px solid rgba(255,255,255,.09);}
.header-inner{display:flex;align-items:center;gap:16px;padding:12px 24px;max-width:1280px;margin:0 auto;}
.logo img{height:44px;width:auto;}
.logo{flex:0 0 auto;}

/* Desktop inline nav — hidden by default (mobile-first), shown ≥1160px. */
.nav{display:none;align-items:center;gap:16px;margin-left:auto;white-space:nowrap;font-size:13.5px;font-weight:600;letter-spacing:.02em;}
.nav a{color:#d9d4cb;}
.nav a:hover,.nav a.is-active{color:var(--gold);}

/* Right cluster: phone button (+ hamburger on mobile). */
.header-right{display:flex;align-items:center;gap:12px;margin-left:auto;flex:0 0 auto;}
.header-phone{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.header-phone__ico{flex:0 0 auto;}

/* Hamburger button — mobile only (hidden ≥1160px). */
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:0 10px;background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:3px;cursor:pointer;}
.nav-toggle span{display:block;height:2px;width:100%;background:#e7e3db;border-radius:2px;transition:transform .25s ease,opacity .2s ease;}
.nav-toggle:hover span{background:var(--gold);}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Drop-down menu panel under the header. */
.menu-panel{position:absolute;left:0;right:0;top:100%;background:#2a2e35;border-top:1px solid rgba(255,255,255,.08);box-shadow:0 18px 40px rgba(0,0,0,.28);max-height:0;overflow:hidden;visibility:hidden;transition:max-height .3s ease,visibility 0s linear .3s;}
.site-header.is-open .menu-panel{max-height:min(80vh,620px);visibility:visible;transition:max-height .3s ease,visibility 0s;}
.menu-panel__inner{max-width:1280px;margin:0 auto;padding:8px 24px 22px;display:flex;flex-direction:column;}
.menu-panel a{color:#e7e3db;font-size:15px;font-weight:600;letter-spacing:.02em;padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.07);}
.menu-panel a:hover,.menu-panel a.is-active{color:var(--gold);}
.menu-panel a.menu-panel__cta{align-self:flex-start;margin-top:18px;border-bottom:none;color:#fff;padding:14px 30px;}
.menu-panel a.menu-panel__cta:hover{color:#fff;}

/* --- sections ------------------------------------------------------------ */
.section{padding:96px 24px;}
.section.pad-sm{padding:88px 24px;}
.section.cream{background:var(--cream);}
.section.dark{background:var(--ink);}
.section.dark h1,.section.dark h2,.section.dark h3{color:#fff;}
.section.dark p{color:#b9bec6;}
.section.dark .eyebrow{color:var(--gold);}
.center{text-align:center;}
.measure{max-width:860px;margin:0 auto;}
.measure-sm{max-width:720px;margin:0 auto;}

h1.hd{font-size:56px;line-height:1.08;margin:0 0 22px;}
h1.hd-pg{font-size:50px;line-height:1.1;margin:0 0 18px;}
h2.hd{font-size:42px;margin:0 0 20px;}
h2.hd-md{font-size:36px;margin:0 0 18px;}
h2.hd-sm{font-size:30px;margin:0 0 14px;}
p.lead{font-size:18px;line-height:1.7;margin:0 0 14px;text-wrap:pretty;}
p.body{font-size:16px;line-height:1.75;color:var(--body);margin:0 0 12px;text-wrap:pretty;}
p.body.big{font-size:17px;line-height:1.75;}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.grid2.a-start{align-items:start;}
.photo{min-height:380px;background-size:cover;background-position:center;}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}

/* --- chips --------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:940px;margin:0 auto;}
.chip{background:#fff;border:1px solid var(--line2);padding:12px 22px;font-size:15px;font-weight:600;color:#3a3f46;border-radius:2px;}
.chip.cream{background:var(--cream);}

/* --- cards --------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.cards.cols-3{grid-template-columns:1fr 1fr 1fr;}
.card{border:1px solid var(--line);padding:40px;background:transparent;}
.card.filled{background:#fff;border-color:var(--line2);}
.card.dark{background:var(--ink);}
.card.dark h2,.card.dark h3{color:#fff;}
.card.dark p{color:#b9bec6;}

/* --- gallery ------------------------------------------------------------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.gal figure{margin:0;}
.gal img{width:100%;aspect-ratio:6/5;object-fit:cover;}
.gal figcaption{font-size:14px;color:#6a707a;padding-top:10px;}
.gal3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.gal3 img{width:100%;aspect-ratio:6/5;object-fit:cover;}

/* --- process steps ------------------------------------------------------- */
.steps{max-width:820px;margin:0 auto;}
.step{display:grid;grid-template-columns:88px 1fr;gap:28px;padding:34px 0;border-bottom:1px solid var(--line);}
.step:last-child{border-bottom:none;}
.step .num{font-family:'Cormorant Garamond','Georgia',serif;font-size:52px;font-weight:600;color:var(--gold);line-height:1;}
.step h2,.step h3{font-family:'Cormorant Garamond','Georgia',serif;font-size:28px;font-weight:600;color:var(--ink);margin:0 0 10px;}
.step p{font-size:15px;line-height:1.75;color:var(--body);margin:0;text-wrap:pretty;}

/* --- contact form 2-col (form + sidebar). Columns via a class — NOT inline —
   so the mobile media query below can stack it. */
.contact-grid{grid-template-columns:1.1fr 1fr;gap:56px;}

/* --- form ---------------------------------------------------------------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form input,.form select,.form textarea{border:1px solid #d9d2c4;padding:15px 16px;font-size:15px;font-family:'Mulish','Helvetica Neue',Arial,sans-serif;border-radius:2px;background:#fff;width:100%;}
.form .full{grid-column:1/-1;}
.form textarea{resize:vertical;}
.form input::placeholder,.form textarea::placeholder{color:#9aa0a8;}
.next{background:var(--cream);border:1px solid var(--line2);padding:36px;}
.thanks{border:1px solid var(--gold);background:#faf6ef;padding:36px;text-align:center;}

/* --- prose rich text (inside .bc-prose wrapper) --------------------------- */
.bc-prose{font-size:16px;line-height:1.75;color:var(--body);}
.bc-prose h2{font-family:'Cormorant Garamond','Georgia',serif;font-size:36px;font-weight:600;color:var(--ink);margin:0 0 18px;}
.bc-prose h3{font-family:'Cormorant Garamond','Georgia',serif;font-size:26px;font-weight:600;color:var(--ink);margin:24px 0 10px;}
.bc-prose p{margin:0 0 14px;}
.bc-prose a{color:var(--gold);font-weight:700;}
.bc-prose a:hover{color:var(--gold-d);}
.bc-prose ul,.bc-prose ol{padding-left:22px;margin:0 0 16px;}
.bc-prose li{margin:0 0 8px;}
.bc-prose blockquote{border-left:3px solid var(--gold);padding:6px 0 6px 20px;margin:16px 0;color:var(--ink2);font-style:italic;}

/* --- footer -------------------------------------------------------------- */
.footer{background:#14171c;color:#b9bec6;padding:72px 24px 0;}
.footer-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:56px;padding-bottom:56px;}
.footer img{height:64px;width:auto;margin-bottom:20px;}
.footer p{font-size:14px;line-height:1.8;margin:0 0 16px;text-wrap:pretty;}
.footer .ftel{color:var(--gold);font-weight:800;font-size:17px;}
.footer h4{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#fff;margin:0 0 18px;}
.footer nav{display:flex;flex-direction:column;gap:12px;font-size:14px;}
.footer nav a{color:#b9bec6;}
.footer nav a:hover{color:var(--gold);}
.footer-bar{border-top:1px solid #262b33;}
.footer-bar .inner{max-width:1180px;margin:0 auto;padding:22px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:#6a707a;}

.li{display:flex;gap:12px;align-items:baseline;font-size:15px;color:#3a3f46;line-height:1.6;}
.li b{color:var(--gold);font-weight:800;}

/* --- inline-edit / media host -------------------------------------------- */
.bc-bg-host{position:relative;overflow:hidden;}
.page-head__bg{position:absolute;inset:0;background-position:center center;background-size:cover;background-repeat:no-repeat;z-index:0;}
.page-head__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none;}
.page-head__slide-track{position:absolute;inset:0;overflow:hidden;z-index:0;}
.page-head__slide-item{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;transition:opacity .9s ease;}
.page-head__slide-item.is-active{opacity:1;}
.page-head__bg--zoom{animation:bcKenBurns 22s ease-in-out infinite alternate;}
@keyframes bcKenBurns{from{transform:scale(1);}to{transform:scale(1.06);}}
@media (prefers-reduced-motion: reduce){.page-head__bg--zoom{animation:none;}}
.bc-bg-host[data-empty]{background:#f0ece3;}
.bc-bg-host[data-empty] .page-head__bg[data-empty]{background:repeating-linear-gradient(45deg,#f6f2e9 0 12px,#efe9dc 12px 24px);}

/* photo inside grid2 that already sets .photo bg — keep media host filling the .photo box */
.photo .bc-bg-host,.photo.bc-bg-host{position:absolute;inset:0;}
.photo{position:relative;}

/* Darkening scrim over a background photo — opacity from --bg-overlay (0..1),
   driven by the overlay slider (theme helpers bc_edit_image). Copied from the
   bellevue/mila/lareve themes' .page-head__overlay convention. */
.page-head__overlay{position:absolute;inset:0;z-index:1;background:rgba(16,18,22,var(--bg-overlay,0.55));pointer-events:none;}

/* Centered page hero with an optional full-bleed background photo. */
.hero-centered__media .bc-bg-host{position:absolute;inset:0;}
.hero-centered--media{min-height:360px;display:flex;flex-direction:column;justify-content:center;}
.hero-centered--media .eyebrow{color:var(--gold);}
/* When admin (no photo yet) the empty media host shows a subtle placeholder so
   the "Photo" button is easy to find; guests never see an empty host. */
.hero-centered .bc-bg-controls{z-index:3;}

/* --- responsive ---------------------------------------------------------- */
@media(max-width:900px){
  .section{padding:64px 22px;}
  .section.pad-sm{padding:56px 22px;}
  .grid2,.cards,.cards.cols-3{grid-template-columns:1fr;gap:32px;}
  .gal,.gal3{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  h1.hd{font-size:40px;}
  h1.hd-pg{font-size:36px;}
  h2.hd,.step h2,.step h3{font-size:28px;}
  h2.hd-md{font-size:28px;}
  .form{grid-template-columns:1fr;}
  .step{grid-template-columns:60px 1fr;gap:14px;padding:24px 0;}
  .step .num{font-size:38px;}
}

/* Desktop (≥1160px): show the inline nav, hide the hamburger + drop-down panel. */
@media(min-width:1160px){
  .nav{display:flex;}
  .header-right{margin-left:16px;}
  .nav-toggle{display:none;}
  .menu-panel{display:none;}
}

/* Narrow phones: drop the phone digits to an icon-only button so nothing wraps. */
@media(max-width:560px){
  .logo img{height:38px;}
  .header-phone__num{display:none;}
  .header-phone{padding:11px 14px;}
}

/* --- admin edit affordances (safe in read view: guarded by [data-edit]) --- */
[data-edit],[data-edit-url]{outline-offset:2px;}
body:not([data-admin]) [data-edit],body:not([data-admin]) [data-edit-url]{outline:none;}

/* Contact form: success/error note under the submit button (AJAX + no-JS). */
.form-note-wrap { margin-top: 4px; }
.form-note { margin: 0; padding: 13px 16px; font-size: 15px; line-height: 1.5; border: 1px solid; }
.form-note--ok  { color: #22350f; background: #eef5dd; border-color: #95B949; }
.form-note--err { color: #7a1f16; background: #fbeceb; border-color: #c0392b; }