/*
Theme Name: A Better Version Kitchen
Theme URI:
Description: Child theme of Twenty Twenty-Five for A Better Version Kitchen. Stone and olive palette, Newsreader and Nunito Sans, plus custom blocks for the ingredient-label comparison.
Author: A Better Version Kitchen
Version: 1.0
Template: twentytwentyfive
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: abvkitchen
*/

/* ============================================================
   Colours are defined in theme.json. Use these class names in
   the block editor via the "Additional CSS class(es)" field
   under Advanced in the right-hand sidebar.
   ============================================================ */

:root{
  --abvk-stone:#EFEEEA;
  --abvk-paper:#FAFAF8;
  --abvk-olive:#6F7A56;
  --abvk-olive-dk:#5D6748;
  --abvk-olive-lt:#8B9670;
  --abvk-sand:#A99C82;
  --abvk-cream:#F4F0E5;
  --abvk-charcoal:#33352F;
  --abvk-ink:#22241F;
  --abvk-grey:#7E8078;
  --abvk-hair:#DCDAD3;
  --abvk-display:"Newsreader",Georgia,serif;
  --abvk-body:"Nunito Sans",system-ui,sans-serif;
}

/* ---------- site header ---------- */
/* Logo size. Change the two numbers below if you want it bigger or smaller.
   The first is desktop, the second is phones.                              */
.wp-block-site-logo img{max-height:86px;width:auto;height:auto}
@media(max-width:781px){
  .wp-block-site-logo img{max-height:56px}
}

/* If you show the logo AND the site title, the name appears twice.
   Uncomment the next rule to hide the text title and keep only the logo. */
/* .wp-block-site-title{display:none} */
.wp-block-navigation{
  font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;color:var(--abvk-grey);
}
.wp-block-navigation a:hover{color:var(--abvk-olive)}
.wp-block-navigation .current-menu-item a{color:var(--abvk-olive)}

/* ---------- .abvk-eyebrow — small green label above a heading ---------- */
.abvk-eyebrow{
  font-family:var(--abvk-body);font-size:.74rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--abvk-olive);
  margin-bottom:1.4rem;
}

/* ---------- .abvk-lede — intro paragraph under a heading ---------- */
.abvk-lede{
  font-size:clamp(1.02rem,1.9vw,1.18rem);font-weight:300;
  color:#575A51;max-width:52ch;
}

/* ---------- .abvk-prose — body copy blocks ---------- */
.abvk-prose p{font-weight:300;color:#4F524A;max-width:62ch}

/* ---------- .abvk-quote — the grandmother quote card ---------- */
.abvk-quote{
  background:var(--abvk-paper);border:1px solid var(--abvk-hair);border-radius:3px;
  padding:1.9rem 2rem 1.7rem;text-align:center;max-width:44ch;margin-inline:auto;
}
.abvk-quote p{
  font-family:var(--abvk-display);font-style:italic;font-weight:300;
  font-size:clamp(1.08rem,2.2vw,1.3rem);line-height:1.55;color:var(--abvk-charcoal);margin:0;
}
.abvk-quote cite,.abvk-quote .wp-block-quote__citation{
  display:block;margin-top:1.1rem;font-family:var(--abvk-body);font-style:normal;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--abvk-olive);font-weight:700;
}

/* ---------- .abvk-pull — pull quote with a sand rule ---------- */
.abvk-pull{
  border-left:2px solid var(--abvk-sand);padding-left:1.6rem;
  font-family:var(--abvk-display);font-style:italic;font-weight:300;
  font-size:1.35rem;line-height:1.5;color:var(--abvk-olive-dk);
}

/* ---------- .abvk-panel — the ingredient-label comparison ----------
   Use a two-column block. Add .abvk-panel to each column,
   and .abvk-panel-mine to the right-hand one.                        */
.abvk-panel{
  background:var(--abvk-paper);border:1px solid var(--abvk-hair);border-radius:3px;
  padding:2rem 2.1rem 2.2rem;
}
.abvk-panel-mine{background:#E9EDE1;border-color:#D5DCC8}
.abvk-panel h3{
  font-family:var(--abvk-body);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--abvk-grey);margin:0 0 .9rem;
}
.abvk-panel-mine h3{color:var(--abvk-olive)}
.abvk-panel .abvk-ingredients{
  font-size:.94rem;line-height:2;font-weight:300;color:#5F6259;
  border-top:1px solid var(--abvk-hair);padding-top:1.1rem;margin:0;
}
.abvk-panel-mine .abvk-ingredients{border-color:#D5DCC8;color:#4A4E43}
.abvk-count{
  margin-top:1.5rem;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--abvk-grey);
}
.abvk-count strong{
  display:block;font-family:var(--abvk-display);font-size:2.4rem;font-weight:300;
  letter-spacing:-.02em;color:var(--abvk-charcoal);line-height:1;margin-bottom:.25rem;
}
.abvk-panel-mine .abvk-count strong{color:var(--abvk-olive)}

/* ---------- .abvk-card — the "what you'll find here" cards ---------- */
.abvk-card{
  border:1px solid var(--abvk-hair);border-radius:3px;padding:1.9rem 2rem;
  background:var(--abvk-stone);transition:border-color .2s;height:100%;
}
.abvk-card:hover{border-color:var(--abvk-olive)}
.abvk-card .abvk-tag{
  font-family:var(--abvk-body);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--abvk-olive);
  display:block;margin-bottom:.4rem;
}
.abvk-card h3{margin:0 0 .5rem;font-size:1.3rem}
.abvk-card p{margin:0;font-size:.96rem;color:#5F6259;font-weight:300}

/* ---------- .abvk-rule — short green rule above a heading ---------- */
.abvk-rule{width:34px;height:1px;background:var(--abvk-olive);margin:0 0 1.2rem;border:none}

/* ---------- .abvk-note — bordered callout ---------- */
.abvk-note{
  background:var(--abvk-paper);border:1px solid var(--abvk-hair);
  border-left:3px solid var(--abvk-olive);border-radius:3px;
  padding:1.4rem 1.6rem;font-weight:300;color:#4F524A;
}
.abvk-note strong{font-weight:600;color:var(--abvk-charcoal)}

/* ---------- .abvk-alt — paper-coloured section band ---------- */
.abvk-alt{
  background:var(--abvk-paper);
  border-top:1px solid var(--abvk-hair);border-bottom:1px solid var(--abvk-hair);
}

/* ---------- secondary / outline button ----------
   Add .abvk-btn-ghost to a button block.           */
.abvk-btn-ghost .wp-block-button__link{
  background:transparent;color:var(--abvk-grey);
  border:1px solid var(--abvk-hair);
}
.abvk-btn-ghost .wp-block-button__link:hover{
  border-color:var(--abvk-olive);color:var(--abvk-olive);background:transparent;
}

/* ---------- recipe cards (recipe plugin output) ---------- */
.wprm-recipe-container{
  background:var(--abvk-paper);border:1px solid var(--abvk-hair);border-radius:3px;
}

/* ---------- footer ---------- */
.wp-block-site-footer,footer.wp-block-template-part{
  border-top:1px solid var(--abvk-hair);color:var(--abvk-grey);font-size:.86rem;
}

/* ---------- accessibility ---------- */
:focus-visible{outline:2px solid var(--abvk-olive);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* ============================================================
   Option C page styling — matches the approved mockup
   ============================================================ */

/* Italic olive emphasis inside the big headline */
h1 em, .abvk-hero h1 em{font-style:italic;color:var(--abvk-olive-dk)}

/* Hero section */
.abvk-hero{text-align:center}
.abvk-hero h1{max-width:15ch;margin-inline:auto}

/* Small uppercase caption under a section heading */
.abvk-subhead{
  font-family:var(--abvk-body);font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--abvk-grey);font-weight:600;
}

/* Hairline band above and below a section (the promises row) */
.abvk-band{
  border-top:1px solid var(--abvk-hair);
  border-bottom:1px solid var(--abvk-hair);
}

/* Card tag — small olive label */
.abvk-tag{
  font-family:var(--abvk-body);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--abvk-olive);
  margin-bottom:.35rem;
}

/* Ingredient panels: even column heights */
.wp-block-columns .abvk-panel{align-self:stretch}

/* Photo placeholder slot */
.abvk-photo{
  background:var(--abvk-paper);border:1px solid var(--abvk-hair);border-radius:3px;
  aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:1.6rem;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--abvk-grey);
}


/* ---------- hide the page title on the homepage ----------
   The hero already says everything; a big "Home" above it is noise.
   Other pages keep their titles.                                   */
body.home .wp-block-post-title,
body.page-template-front-page .wp-block-post-title{
  display:none;
}