/*
Theme Name: Kai Kodasma — Garden Table
Theme URI: https://kaikodasma.com
Description: Child theme of Kadence for the Kai Kodasma food blog. "Garden Table" — bright, airy, warm-earthy, food-first. Design tokens and component styling only; layout is built with Kadence blocks and patterns so the site stays update-safe.
Author: Kai Kodasma
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
*/

/* =========================================================
   Brand tokens — "Warm Earthy" (Garden Table)
   These mirror the Kadence global palette so patterns can
   reference friendly names. Kadence still owns the palette
   via the Customizer; these are convenience aliases.
   ========================================================= */
:root{
  /* v2.0 "Whiteout" tokens (design_handoff_kai_kodasma / kk-tokens.css) */
  --gt-terracotta:#C1633C;      /* action only */
  --gt-terracotta-deep:#A8512E;
  --gt-olive:#4F5637;           /* deep olive — structure/bands */
  --gt-olive-deep:#3F4529;
  --gt-olive-tint:#F1F4EC;      /* note callouts / chips / whisper bands */
  --gt-sand:#E9D6B4;            /* tints & placeholders only */
  --gt-paper:#FFFFFF;           /* page bg AND cards */
  --gt-cream:#FFFFFF;           /* legacy alias → now white */
  --gt-cocoa:#2C2118;
  --gt-body:#4A3B2C;
  --gt-muted:#6C5B48;
  --gt-faint:#8A7A66;
  --gt-kicker:#B08A5F;
  --gt-card:#FFFFFF;
  --gt-alt-bg:#F1F4EC;
  --gt-hairline:#E4DDD0;
  --gt-border:#E2DACB;
  --gt-frame:#DED6C8;
}

/* =========================================================
   Global polish
   ========================================================= */
body{ background:var(--gt-paper); color:var(--gt-body); }
::selection{ background:#e6c9a0; color:var(--gt-cocoa); }

/* Headings: Cormorant is set globally in Kadence; nudge tracking on large display type */
h1,h2{ letter-spacing:-0.01em; }

/* =========================================================
   Utility components (used inside Kadence patterns)
   ========================================================= */

/* Kicker / eyebrow — UPPERCASE tracked label */
.gt-kicker{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:11px; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gt-olive);
}
.gt-kicker--terracotta{ color:var(--gt-terracotta); }
.gt-kicker--brown{ color:var(--gt-kicker); }

/* Wordmark + tagline (masthead) */
.gt-wordmark{
  font-family:'Cormorant Garamond',serif; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gt-cocoa);
}
.gt-tagline{
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:10px; font-weight:600; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gt-kicker);
}

/* Pill buttons — terracotta primary / white secondary */
.gt-btn,
.wp-block-button.is-style-gt-pill .wp-block-button__link{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:#fff; background:var(--gt-terracotta);
  border:none; border-radius:999px; padding:12px 26px;
  text-decoration:none; transition:background .15s ease;
}
.gt-btn:hover,
.wp-block-button.is-style-gt-pill .wp-block-button__link:hover{ background:var(--gt-terracotta-deep); color:#fff; }
.gt-btn--ghost{
  color:var(--gt-body); background:var(--gt-card);
  border:1px solid var(--gt-border);
}
.gt-btn--ghost:hover{ background:#fff; color:var(--gt-cocoa); }

/* Italic photo caption chip (magazine style) */
.gt-caption{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  color:#6b4f33; background:rgba(255,253,247,.82);
  padding:5px 12px; border-radius:8px; display:inline-block;
}

/* Tinted placeholder blocks (per dish family) — until real photos drop in */
.gt-tint{ border-radius:12px; overflow:hidden; }
.gt-tint--cocoa{     background:linear-gradient(150deg,#e7d8bf,#d3b489); }
.gt-tint--caramel{   background:linear-gradient(150deg,#ecd9b8,#d8bd8e); }
.gt-tint--pumpkin{   background:linear-gradient(150deg,#e7c3a8,#d49a72); }
.gt-tint--olive{     background:linear-gradient(150deg,#dde0c8,#c3caa2); }
.gt-tint--plum{      background:linear-gradient(150deg,#e0cdcf,#c79ba0); }

/* Soft card surface */
.gt-card{
  background:var(--gt-card); border:1px solid var(--gt-border);
  border-radius:14px;
}

/* Hairline divider */
.gt-hairline{ border:0; border-top:1px solid var(--gt-hairline); }

/* =========================================================
   Masthead (Kadence header builder)
   Centered wordmark + tagline, hairline-bordered nav row.
   ========================================================= */
#masthead .site-main-header-wrap,
#masthead .site-bottom-header-wrap{ background:var(--gt-paper); }
#masthead .site-main-header-inner-wrap{ padding-top:26px; padding-bottom:8px; }

/* Wordmark + tagline */
.site-branding{ text-align:center; }
.site-branding .site-title{
  font-family:'Cormorant Garamond',serif; font-weight:600;
  font-size:30px; line-height:1; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gt-cocoa); margin:0;
}
.site-branding .site-title a{ color:inherit; }
.site-branding .site-description{
  font-family:'Hanken Grotesk',sans-serif; font-size:10px; font-weight:600;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gt-kicker);
  margin:7px 0 0;
}

/* Nav row — hairline top & bottom */
#masthead .site-bottom-header-wrap{
  border-top:1px solid var(--gt-hairline);
  border-bottom:1px solid var(--gt-hairline);
}
#masthead .site-bottom-header-inner-wrap{ padding-top:12px; padding-bottom:12px; }

/* Nav links */
.header-navigation .menu > li > a{
  font-family:'Hanken Grotesk',sans-serif; font-size:12.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:#5A4A39;
}
.header-navigation .menu > li.current-menu-item > a,
.header-navigation .menu > li.current-menu-ancestor > a,
.header-navigation .menu > li:hover > a{ color:var(--gt-terracotta); }

/* Search icon (the ⌕) */
#masthead .search-toggle-open .search-toggle-icon{ color:var(--gt-faint); }
#masthead .search-toggle-open:hover .search-toggle-icon{ color:var(--gt-terracotta); }

/* Language switcher — compact ET / EN toggle */
.header-html .kk-lang{ list-style:none; display:flex; align-items:center; gap:0; margin:0; padding:0; }
.header-html .kk-lang li{ margin:0; line-height:1; }
.header-html .kk-lang li a{
  display:block; text-decoration:none;
  font-family:'Hanken Grotesk',sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gt-faint);
  padding:0 9px;
}
.header-html .kk-lang li:first-child a{ border-right:1px solid var(--gt-hairline); }
.header-html .kk-lang li.current-lang a{ color:var(--gt-terracotta); }
.header-html .kk-lang li:not(.current-lang) a:hover{ color:var(--gt-cocoa); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:#FAF8F4; border-top:1px solid var(--gt-hairline); }
.site-footer .site-footer-wrap .site-footer-row-container-inner{ background:#FAF8F4; }
.footer-wordmark{
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:18px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gt-cocoa);
}
.site-footer .footer-html,
.site-footer .site-footer-section-inner-wrap{
  font-family:'Hanken Grotesk',sans-serif; font-size:12px; color:var(--gt-faint);
}
.site-footer a{ color:var(--gt-muted); }
.site-footer a:hover{ color:var(--gt-terracotta); }

/* Center the footer rows (social + wordmark/copyright) */
.site-footer .site-footer-row-column-1,
.site-footer .footer-social-wrap,
.site-footer .footer-social-inner-wrap,
.site-footer .footer-html{ justify-content:center; text-align:center; margin-left:auto; margin-right:auto; }
.site-footer-middle-wrap .site-footer-row,
.site-footer-bottom-wrap .site-footer-row{ justify-content:center; }

/* Plain footer social icons (no tile) */
.site-footer .social-button{
  background:transparent !important; border:none !important;
  color:var(--gt-muted); padding:4px 8px;
}
.site-footer .social-button:hover{ background:transparent !important; color:var(--gt-terracotta); }

/* Breathing room + wordmark spacing */
.site-footer .footer-wordmark{ display:inline-block; margin-bottom:4px; }
.site-footer-middle-wrap{ padding-top:34px; }
.site-footer-bottom-wrap{ padding-bottom:34px; }

/* =========================================================
   "Browse by mood" circular image tiles (uploadable)
   ========================================================= */
.gt-mood-img{ margin:0; box-shadow:none; }
.gt-mood-img a{ display:block; overflow:hidden; border-radius:50%; }
.gt-mood-img.has-custom-border img,
.gt-mood-img img{ width:100%; height:auto; display:block; border:0 !important; box-shadow:none; border-radius:50%; aspect-ratio:1; object-fit:cover; transition:transform .3s ease; }
.gt-mood-img a:hover img{ transform:scale(1.03); }
/* mood label link */
.kk-mood-label{ color:var(--gt-cocoa); text-decoration:none; transition:color .2s ease; }
.kk-mood-label:hover{ color:var(--gt-terracotta); }

/* WPRM recipe card styling now lives in the "Garden Table" custom template
   (WPRM Premium Template Editor / _devtools/wprm-template.php) — removed the
   old chic-era overrides that Premium made redundant. */

/* =========================================================
   Recipe post page (v2 §2) — article header, hero, 2-col body
   ========================================================= */
.kk-recipe-header{ padding-top:40px; }
.kk-byline{ font-family:'Hanken Grotesk',sans-serif; font-size:12.5px; color:var(--gt-faint); text-align:center; margin-top:10px; }
.kk-byline .kk-rating{ color:var(--gt-terracotta); font-weight:600; }

.kk-pills{ display:flex; gap:10px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.kk-pill{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Hanken Grotesk',sans-serif; font-size:12.5px; font-weight:600;
  color:var(--gt-body); background:var(--gt-paper);
  border:1px solid var(--gt-hairline); border-radius:999px; padding:9px 18px;
  cursor:pointer; user-select:none; transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.kk-pill:hover{ background:var(--gt-olive-tint); border-color:#dfe4d3; color:var(--gt-cocoa); }

.kk-hero{ margin-top:28px; }
.kk-hero img{ border-radius:16px; box-shadow:0 18px 30px -18px rgba(70,46,22,.4); width:100%; }

/* 2-col body: prose + sticky "At a glance" */
.kk-body-cols{ align-items:flex-start !important; margin-top:36px; }
.kk-glance{
  background:var(--gt-paper); border:1px solid var(--gt-hairline);
  border-radius:14px; padding:22px 24px; position:sticky; top:100px;
}
.kk-glance-title{
  font-family:'Hanken Grotesk',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gt-kicker); margin-bottom:14px;
}
.kk-glance-row{
  display:flex; justify-content:space-between; padding:9px 0;
  border-bottom:1px dashed var(--gt-hairline);
  font-family:'Hanken Grotesk',sans-serif; font-size:13px;
}
.kk-glance-row span:first-child{ color:var(--gt-faint); }
.kk-glance-row span:last-child{ color:var(--gt-cocoa); font-weight:600; }
.kk-glance-row--last{ border-bottom:0; }

/* smooth jump-to-recipe with header offset */
html{ scroll-behavior:smooth; }
.wprm-recipe-container{ scroll-margin-top:110px; }

/* =========================================================
   "Fresh from the kitchen" dynamic recipe grid (Query Loop)
   ========================================================= */
.kk-recipe-grid .wp-block-post-template{
  display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:26px !important;
  width:100% !important; max-width:none !important; margin:0; padding:0; list-style:none;
}
.kk-recipe-grid .wp-block-post-template > li{ width:auto !important; max-width:none !important; margin:0 !important; }
.kk-grid-img{ margin:0 0 14px; overflow:hidden; border-radius:12px; width:100%; }
.kk-grid-img a{ display:block; width:100%; }
.kk-grid-img img{ width:100% !important; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:12px; transition:transform .3s ease; }
.kk-grid-img:hover img{ transform:scale(1.02); }
.kk-grid-kicker{ margin:0 0 6px; }
.kk-grid-kicker a{ color:var(--gt-olive); text-decoration:none; }
.kk-grid-title{ margin:0; }
.kk-grid-title a{ font-family:'Cormorant Garamond',serif; font-weight:600; color:var(--gt-cocoa); text-decoration:none; transition:color .2s ease; }
.kk-grid-title a:hover{ color:var(--gt-terracotta); }
@media(max-width:699px){ .kk-recipe-grid .wp-block-post-template{ grid-template-columns:1fr !important; } }   /* 3 cols ≥700px, else 1 (only 3 cards: 2 cols would orphan one) */


/* ===== Mobile pass ===== */
.gt-kicker--terracotta{ white-space:nowrap; }           /* "View all →" must not wrap its arrow */
@media(max-width:781px){   /* = WordPress's own columns-stacking breakpoint */
  /* constrained content groups (recipe posts, About, Privacy…) have no side padding on phones */
  .entry-content > .wp-block-group:not(.alignfull){ padding-left:20px; padding-right:20px; }
  /* Browse-by-mood: one compact row of three circles instead of three huge stacked ones */
  .kk-mood-cols{ flex-wrap:nowrap !important; gap:12px !important; }
  .kk-mood-cols > .wp-block-column{ flex-basis:0 !important; flex-grow:1 !important; min-width:0; }
  .kk-mood-cols h4{ font-size:16px !important; }
  /* comfortable tap targets */
  .menu-toggle-open{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
  .site-footer a{ display:inline-block; padding:10px 2px; }
  .entry-meta a, .entry-taxonomies a, .post-more-link{ display:inline-block; padding:8px 0; }
  .wprm-recipe-adjustable-servings{ min-height:40px; min-width:40px; display:inline-flex; align-items:center; justify-content:center; }
}

/* ===== Mobile drawer — on-brand (white) instead of Kadence's default black ===== */
#mobile-drawer .drawer-inner{ background:#fff !important; }
#mobile-drawer .drawer-header .drawer-toggle,
#mobile-drawer .drawer-header .drawer-toggle .kadence-svg-iconset{ color:var(--gt-cocoa) !important; }
#mobile-drawer .mobile-navigation a{
  color:var(--gt-cocoa) !important; font-family:'Hanken Grotesk',sans-serif; font-weight:600;
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
}
#mobile-drawer .mobile-navigation li{ border-bottom:1px solid var(--gt-hairline) !important; }
#mobile-drawer .mobile-navigation .current-menu-item > a,
#mobile-drawer .mobile-navigation a:hover{ color:var(--gt-terracotta) !important; }
#mobile-drawer .mobile-html{ margin-top:24px; }
#mobile-drawer .mobile-html p{ margin:0; }
#mobile-drawer .kk-lang{ list-style:none; display:flex; align-items:center; margin:0; padding:0; }
#mobile-drawer .kk-lang li{ margin:0; line-height:1; }
#mobile-drawer .kk-lang li a{
  display:block; text-decoration:none; font:600 13px 'Hanken Grotesk',sans-serif;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gt-faint) !important; padding:14px 16px;
}
#mobile-drawer .kk-lang li:first-child a{ padding-left:8px; border-right:1px solid var(--gt-hairline); }
#mobile-drawer .kk-lang li.current-lang a{ color:var(--gt-terracotta) !important; }