/* ------------------------------------------------------------------ */
/*  LUSO KITCHEN — BASE STYLESHEET                                      */
/*  Loaded on every page. Part of the child theme (v0.2).               */
/*                                                                     */
/*  Design language: soft neutral background, olive-green accent,       */
/*  pill buttons, Georgia headings over a system sans body.             */
/*                                                                     */
/*  Table of contents                                                   */
/*  -------------------                                                */
/*   1. Design tokens          — color custom properties               */
/*   2. Typography              — body text and headings                */
/*   3. Links                                                          */
/*   4. Buttons                 — global pill style                    */
/*   5. Form controls           — inputs, selects, textareas           */
/*   6. Editorial details       — selection, blockquote, hr            */
/*   7. Contact Form 7          — honeypot field                       */
/*   8. Site header             — menu icons, cart badge, mobile nav     */
/*   9. Back-to-top button                                             */
/*  10. 404 page                                                       */
/*                                                                     */
/*  Sibling files (conditionally loaded, see functions.php):             */
/*    woocommerce.css        — WooCommerce pages only                   */
/*    woocommerce-blocks.css — cart & checkout block pages only        */
/*                                                                     */
/*  Cascade policy                                                     */
/*  ---------------                                                    */
/*  Sections are ordered global → specific, and every rule in this      */
/*  file wins by *specificity*, never by its position in the file.      */
/*  Against GeneratePress itself, this file loads after the parent's    */
/*  stylesheets (see functions.php — enqueued at priority 20 with the   */
/*  'generate-style' dependency): the standard child-theme override     */
/*  contract, so specificity ties with the framework resolve in our     */
/*  favor.                                                              */
/* ------------------------------------------------------------------ */


/* ================================================================== */
/*  1. DESIGN TOKENS                                                   */
/*  GeneratePress reads --contrast / --base / --accent everywhere,     */
/*  so overriding them here restyles the entire theme at once.         */
/*  The remaining tokens are our own, used to keep repeated values     */
/*  in a single place.                                                 */
/* ================================================================== */
:root {
  --contrast:     #1d1810;                     /* primary text                          */
  --contrast-2:   #8b8178;                     /* secondary text (meta, captions)      */
  --contrast-3:   #e8e1d5;                     /* borders, dividers, input outlines    */
  --base:         #f0f0ee;                     /* subtle panels (dropdowns, widgets)   */
  --base-2:       #fafaf9;                     /* site background                       */
  --base-3:       #fafaf9;                     /* content background (= base-2: flat)  */
  --accent:       #9ab041;                     /* links, buttons, highlights           */
  --accent-hover: #7b8d34;                     /* darker accent for hover states       */
  --accent-ring:  rgba(154, 176, 65, 0.15);    /* soft focus ring, same hue as accent  */
  --danger:       #d63638;                     /* form errors, required-field markers  */
  --placeholder:  #b6ada1;                     /* placeholder text inside inputs       */
}


/* ================================================================== */
/*  2. TYPOGRAPHY                                                      */
/* ================================================================== */

/* Exo — self-hosted variable font (weights 100–900 in a single woff2).
   The logo's own typeface, used for every heading: brand coherence.
   Served from this theme (assets/fonts/) — no external font loading.
   License: SIL OFL (OFL.txt sits next to the font file).
   woff2 covers ~97% of browsers; the rest fall back to the sans stack
   below — graceful degradation, nothing breaks. */
@font-face {
  font-family: 'Exo';
  src: url('../fonts/Exo-VariableFont_wght.woff2') format('woff2') tech('variations'),
       url('../fonts/Exo-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--contrast);
  background-color: var(--base-2);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Exo', 'Helvetica Neue', Arial, sans-serif;
  color: var(--contrast);
}

/* The scale: large levels differentiate by size and weight; the small
   levels stop shrinking pixels and become uppercase tracked labels —
   a different kind of heading, impossible to confuse with the rest. */
h1 { font-size: clamp(36px, 5vw, 60px);  font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
h3 { font-size: clamp(24px, 2.5vw, 28px); font-weight: 700; line-height: 1.3; }
h4 { font-size: 19px;                     font-weight: 700; line-height: 1.3; }
h5 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--contrast-2);
}
h6 {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--accent);
}


/* ================================================================== */
/*  3. LINKS                                                           */
/* ================================================================== */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color .2s;
}

a:hover {
  color: var(--accent-hover);
}

/* Anchor-rendered buttons keep their white label on hover: the generic
   link hover color would repaint the label in dark accent — invisible
   on the accent button background (cart "Proceed to checkout"). */
a.wp-element-button:hover {
  color: #ffffff;
}


/* ================================================================== */
/*  4. BUTTONS — global pill style                                     */
/*  Matches the coming soon page: green pill, white text, slight       */
/*  lift on hover.                                                     */
/* ================================================================== */
.button,
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link {
  background-color: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s, transform .2s;
}

.button:hover,
button:hover,
html input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover {
  background-color: var(--accent-hover);
  color: #ffffff;
  transform: translateY(-1px);
}


/* ================================================================== */
/*  5. FORM CONTROLS — global                                           */
/*  Applies to every plain WordPress form field on the site.           */
/*  (WooCommerce Blocks fields are handled in the conditionally        */
/*  loaded woocommerce-blocks.css, because their generated CSS needs   */
/*  stronger overrides.)                                               */
/* ================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
  padding: 12px 20px;
  font-size: 15px;
  font-family: inherit;
  color: var(--contrast);
  background-color: #ffffff;
  border: 1px solid var(--contrast-3);
  border-radius: 10px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-ring);
}

::placeholder {
  color: var(--placeholder);
}


/* ================================================================== */
/*  6. EDITORIAL DETAILS                                                */
/* ================================================================== */
::selection {
  background-color: rgba(154, 176, 65, .25);
}

blockquote {
  border-left: 3px solid var(--accent);
  color: var(--contrast-2);
}

hr {
  border: none;
  height: 1px;
  background-color: var(--contrast-3);
}


/* ================================================================== */
/*  7. CONTACT FORM 7 — hide the honeypot anti-spam field               */
/* ================================================================== */
.honeypot-style {
  display: none !important;
}


/* ================================================================== */
/*  8. SITE HEADER — account & cart icons, cart badge, mobile nav       */
/* ================================================================== */

/* Tighter horizontal spacing for the two icon items only */
.main-navigation .main-nav ul li.menu-account-icon > a,
.main-navigation .main-nav ul li.menu-cart-icon > a {
  padding-left: 6px;
  padding-right: 6px;
}

/* Position the <li> so the badge can anchor to it */
.menu-cart-icon {
  position: relative;
}

/* Center the icons vertically inside their links */
.menu-account-icon > a,
.menu-cart-icon > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Icon size — tweak this one value until it matches your menu text */
.menu-account-icon svg,
.menu-cart-icon svg {
  width: 18px;
  height: 18px;
  transform: translateY(1px);   /* optical nudge so icons sit level with menu text */
}

/* Cart count badge */
.cart-count-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--accent);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 3px var(--base-2);   /* ring in the page color so the badge "floats" off the text */
}

/* Hide the badge when the cart is empty */
.cart-count-badge:empty {
  display: none;
}

/* ------------------------------------------------------------
   Mobile navigation (burger toggle + dropdown panel)

   GeneratePress paints every <button> with white text; the burger
   toggle resets the background but not the color, leaving a white
   icon on the cream page. The open menu is a transparent strip with
   left-aligned items. We make the toggle visible and give the open
   menu a proper centered card.

   These rules are inert on desktop: GeneratePress hides the toggle
   and never applies the .toggled state below its mobile breakpoint.
   ------------------------------------------------------------ */

/* Burger toggle — visible icon, comfortable touch target */
.main-navigation .menu-toggle {
  color: var(--contrast);
  font-size: 22px;
  line-height: 44px;
  padding: 0 16px;
}

.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus {
  color: var(--accent);
}

/* Open menu — card panel instead of the transparent strip */
.has-inline-mobile-toggle #site-navigation.toggled {
  background-color: #ffffff;
  border: 1px solid var(--contrast-3);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(29, 24, 16, .08);
}

/* Items — centered, with hairline dividers between them */
.main-navigation.toggled .main-nav ul li {
  text-align: center;
  border-bottom: 1px solid var(--contrast-3);
}

.main-navigation.toggled .main-nav ul li:last-child {
  border-bottom: none;
}

/* Icon items — full-height rows matching the 60px text rows
   (the inline-flex anchors are otherwise sized to their 18px SVG) */
.main-navigation.toggled .main-nav ul li.menu-account-icon > a,
.main-navigation.toggled .main-nav ul li.menu-cart-icon > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  width: 100%;
}

/* Hover / keyboard focus — visible row overlay */
.main-navigation.toggled .main-nav ul li a:hover,
.main-navigation.toggled .main-nav ul li a:focus-visible {
  color: var(--accent);
  background-color: var(--base);
}


/* ================================================================== */
/*  9. BACK-TO-TOP BUTTON                                               */
/*  Enable it in Customize → Layout → Footer → Back to top.             */
/* ================================================================== */
.generate-back-to-top {
  background-color: var(--accent);
  color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(29, 24, 16, .12);
  transition: background-color .2s;
}

.generate-back-to-top:hover,
.generate-back-to-top:focus {
  background-color: var(--accent-hover);
  color: #ffffff;
}


/* ================================================================== */
/* 10. 404 PAGE — centered, minimal, consistent                         */
/* ================================================================== */
body.error404 .site-main {
  text-align: center;
  padding: 48px 0 64px;
}

/* Big faded "404" above the title */
body.error404 .inside-article::before {
  content: "404";
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(80px, 16vw, 160px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--contrast-3);
  margin-bottom: 12px;
}

body.error404 .inside-article {
  max-width: 560px;
  margin: 0 auto;
}

body.error404 .inside-article > * {
  margin-left: auto;
  margin-right: auto;
}

/* Search form as a joined pill bar, like the coming soon form */
body.error404 .search-form {
  display: flex;
  max-width: 420px;
  margin: 28px auto 0;
}

body.error404 .search-form input[type="search"] {
  flex: 1;
  border-radius: 999px 0 0 999px;
  border-right: none;
}

body.error404 .search-form button,
body.error404 .search-form input[type="submit"] {
  border-radius: 0 999px 999px 0;
  padding: 14px 24px;
}

/* ================================================================== */
/*  11. UTILITY CLASSES — IMAGE SIZING                                  */
/*  Apply via "Additional CSS class" on any image. Specificity (0,2,1)  */
/*  is strictly above WooCommerce core's `.woocommerce img` (0,1,1),    */
/*  which otherwise overrides image widths on all Woo pages.            */
/* ================================================================== */
body img.lk-media-170 {
  max-width: 150px;
  width: auto;
  height: auto;
}