/* ===== Header layout, added 2026-09-12 =====
   The header packed 9 nav links, a language switcher, login, cart and a CTA
   into one no-wrap row, which squeezed "Order direct" into a vertical strip
   of single letters (120px wide x 88px tall). These rules give the row room
   to breathe and hand tablet/mobile a single hamburger instead. */

header.wp-block-template-part .wp-block-group.alignwide {
  flex-wrap: wrap;
  align-items: center;
  row-gap: 12px;
  column-gap: 16px;
}

/* The CTA keeps its shape however tight the row gets. */
header.wp-block-template-part .wp-block-buttons { flex: 0 0 auto; }
header.wp-block-template-part .wp-block-button__link {
  white-space: nowrap;
  line-height: 1.2;
  padding: 11px 18px;
}

/* Brand stays on one line. */
header.wp-block-template-part .wp-block-site-title { white-space: nowrap; }
header.wp-block-template-part .wp-block-site-title a { text-decoration: none; }

/* Calmer nav rhythm. */
header.wp-block-template-part .wp-block-navigation {
  --wp--style--block-gap: 15px;
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* Language switcher reads as one small unit, not two page links. */
header.wp-block-template-part .lang-item > a {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
header.wp-block-template-part .lang-item.current-lang > a { opacity: 1; }

/* ===== Tablet: one hamburger instead of nine links =====
   Core shows the inline menu from 600px up. Nine items do not fit until
   about 1420px once login, cart and the CTA are counted, so the overlay is
   extended to cover the gap. Below that width the header is brand + hamburger
   + utilities on a single row, which never wraps. */
@media (min-width: 600px) and (max-width: 1420px) {
  header.wp-block-template-part .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
  }
  header.wp-block-template-part .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
}

/* ===== Mobile ===== */
@media (max-width: 600px) {
  header.wp-block-template-part .wp-block-group.alignwide { column-gap: 12px; }
  header.wp-block-template-part .wp-block-button__link { padding: 9px 13px; font-size: 13px; }
}

/* Very narrow phones: keep the logo mark, drop the wordmark. */
@media (max-width: 420px) {
  header.wp-block-template-part .wp-block-site-title { display: none; }
}
/* The nav block sets its own 25px flex gap; tighten it directly. */
header.wp-block-template-part .wp-block-navigation__container { gap: 12px; }

/* Show only the language you can switch TO. On the English site that is a
   single "Espanol" link instead of ENGLISH + ESPANOL sitting side by side.
   The Polylang block ignores its own hideCurrent setting in this version. */
header.wp-block-template-part .lang-item.current-lang { display: none; }
header.wp-block-template-part .lang-item > a { opacity: 1; }

/* Set the language link apart from the page links. */
header.wp-block-template-part .lang-item {
  margin-inline-start: 4px;
  padding-inline-start: 14px;
  border-inline-start: 1px solid #2c2929;
}
/* ===== Overlay menu (tablet and mobile) =====
   Core renders the open overlay white with black text, which reads as broken
   on this dark site. Restyle it to the brand ink/bone palette. */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open {
  background-color: #0e0d0d;
  color: #f4efe7;
  padding: 22px 20px 40px;
}
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open a,
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: #f4efe7;
}
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open a:hover,
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open a:focus {
  color: #e8b53a;
}

/* Stacked list: full-width rows with generous tap targets. */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 0;
  font-size: 17px;
}
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%;
  border-bottom: 1px solid #2c2929;
}
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  width: 100%;
  padding: 13px 0;
}

/* The inline divider before the language link makes no sense when stacked. */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .lang-item {
  margin-inline-start: 0;
  padding-inline-start: 0;
  border-inline-start: 0;
}

/* Core wins on specificity inside the open overlay, so force this one. */
header.wp-block-template-part .lang-item.current-lang { display: none !important; }
/* Core paints the open overlay white with its own high-specificity rule, so
   the brand palette has to be forced here. */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open,
header.wp-block-template-part .wp-block-navigation__responsive-container.has-modal-open {
  background-color: #0e0d0d !important;
  color: #f4efe7 !important;
}
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open a,
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open button {
  color: #f4efe7 !important;
}
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open a:hover {
  color: #e8b53a !important;
}
/* Stretch the stacked rows so each divider spans the panel, not just the word. */
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: stretch;
  width: 100%;
}

/* === jetpack-contact-form-dark (managed) === */
/* The contact pages sit on #1a1818. Jetpack's form defaults to near-black text,
   which rendered the labels invisible once WPForms was removed. Palette matches
   the rest of the site: bone labels, white fields, red submit. */
.contact-form .grunion-field-label{color:#c9c1b5;font-weight:600;display:block;margin-bottom:6px}
.contact-form .grunion-field-label span.required{color:#c4353a}
.contact-form input[type=text],.contact-form input[type=email],.contact-form input[type=tel],.contact-form input[type=url],.contact-form select,.contact-form textarea{width:100%;background:#ffffff;color:#0e0d0d;border:2px solid #2c2929;border-radius:3px;padding:10px 12px;font-size:16px;box-sizing:border-box}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid #e8b53a;outline-offset:1px}
.contact-form .contact-submit button,.contact-form button[type=submit],.contact-form input[type=submit],.contact-form .wp-block-button__link{background:#c4353a;color:#ffffff;border:0;border-radius:3px;padding:12px 28px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.contact-form .contact-submit button:hover,.contact-form button[type=submit]:hover,.contact-form input[type=submit]:hover,.contact-form .wp-block-button__link:hover{background:#8f2226}
.contact-form-submission,.contact-form-submission p{color:#c9c1b5}
.contact-form .form-errors,.contact-form .form-error-message,.contact-form .error{color:#c4353a}
/* === end jetpack-contact-form-dark === */