/* Eats History button system — "offset stamp"
   Ink fill with a gold rule floating 3px outside the box, like a printer's
   misregistration mark.

   Division of labour:
     - Kadence theme mods own colour, type, radius and padding for everything
       the theme already styles (.kb-button, .button, .wp-block-button__link,
       input[type=submit], and therefore Gravity Forms too). They are emitted
       inline at .kb-button:not(.kb-btn-global-inherit) specificity, which no
       enqueued stylesheet can outrank — so we do not try.
     - This file adds the stamp, the tap target and the focus behaviour, plus
       full styling for the surfaces Kadence never touches (WPRM).

   Colour comes from Kadence palette globals. Hex values are fallbacks for
   contexts that render without theme styles, e.g. WPRM print and AMP views. */

:root {
  --eh-btn-bg:       var(--global-palette3, #0e2028);
  --eh-btn-bg-hover: var(--global-palette5, #284858);
  --eh-btn-fg:       var(--global-palette9, #fcfaf7);
  --eh-btn-tonal-bg: var(--global-palette7, #f0e8d8);
  --eh-btn-tonal-fg: var(--global-palette3, #0e2028);
  --eh-btn-rule:     var(--global-palette15, #b89a70);
  --eh-btn-focus:    var(--global-palette1, #5c7880);

  --eh-btn-radius: 2px;
  --eh-btn-pad-y: 13px;
  --eh-btn-pad-x: 26px;
  --eh-btn-size: 13px;
  --eh-btn-weight: 600;
  --eh-btn-track: 0.12em;
  --eh-btn-speed: 160ms;

  /* The rule sits 3px out plus 1.5px of its own width, so each button needs
     >= 6px clearance or the rules of adjacent buttons collide. */
  --eh-btn-margin: 6px 10px;
}

/* ---- The stamp, applied to every button surface ---- */

.eh-btn,
.kb-button, .kt-button,
.wp-block-button__link,
.gform_wrapper.gform-theme .gform_button,
.wprm-recipe-snippet .wprm-recipe-link,
.wprm-recipe-container .wprm-recipe-link.wprm-recipe-link,
.wprm-popup-modal .wprm-popup-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  box-sizing: border-box;
  margin: var(--eh-btn-margin);
  outline: 1.5px solid var(--eh-btn-rule);
  outline-offset: 3px;
  text-decoration: none;
  cursor: pointer;
  /* Kadence's typography control emits size, weight and tracking but not
     text-transform, so the caps treatment has to come from here. */
  text-transform: uppercase;
  letter-spacing: var(--eh-btn-track);
  transition: background-color var(--eh-btn-speed) ease,
              outline-offset var(--eh-btn-speed) ease,
              transform var(--eh-btn-speed) ease;
}

.eh-btn:hover,
.kb-button:hover, .kt-button:hover,
.wp-block-button__link:hover,
.gform_wrapper.gform-theme .gform_button:hover,
.wprm-recipe-snippet .wprm-recipe-link:hover,
.wprm-recipe-container .wprm-recipe-link.wprm-recipe-link:hover,
.wprm-popup-modal .wprm-popup-modal__btn:not(:disabled):hover {
  outline-offset: 2px;
}

.eh-btn:active,
.kb-button:active, .kt-button:active,
.wp-block-button__link:active,
.gform_wrapper.gform-theme .gform_button:active,
.wprm-recipe-snippet .wprm-recipe-link:active,
.wprm-recipe-container .wprm-recipe-link.wprm-recipe-link:active,
.wprm-popup-modal .wprm-popup-modal__btn:not(:disabled):active {
  outline-offset: 1px;
  transform: translateY(1px);
}

/* The decorative rule occupies `outline`, so focus cannot also use it at rest.
   Focus-visible reclaims the same property at higher contrast and offset.
   palette1 clears 3:1 against both the ink fill and the cream page. */
.eh-btn:focus-visible,
.kb-button:focus-visible, .kt-button:focus-visible,
.wp-block-button__link:focus-visible,
.gform_wrapper.gform-theme .gform_button:focus-visible,
.wprm-recipe-snippet .wprm-recipe-link:focus-visible,
.wprm-recipe-container .wprm-recipe-link.wprm-recipe-link:focus-visible,
.wprm-popup-modal .wprm-popup-modal__btn:focus-visible {
  outline: 2.5px solid var(--eh-btn-focus);
  outline-offset: 4px;
}

.eh-btn:disabled,
.gform_wrapper.gform-theme .gform_button:disabled,
.wprm-popup-modal .wprm-popup-modal__btn:disabled {
  opacity: 0.45;
  outline-color: transparent;
  cursor: not-allowed;
  transform: none;
}

/* ---- WPRM: not covered by Kadence, so styled in full here ---- */

.wprm-recipe-snippet .wprm-recipe-link,
.wprm-recipe-container .wprm-recipe-link.wprm-recipe-link,
.wprm-popup-modal .wprm-popup-modal__btn {
  padding: var(--eh-btn-pad-y) var(--eh-btn-pad-x);
  border: 0;
  border-radius: var(--eh-btn-radius);
  font-family: inherit;
  font-size: var(--eh-btn-size);
  font-weight: var(--eh-btn-weight);
  line-height: 1.2;
  letter-spacing: var(--eh-btn-track);
  text-transform: uppercase;
}

.wprm-recipe-snippet .wprm-recipe-link,
.wprm-popup-modal .wprm-popup-modal__btn {
  background-color: var(--eh-btn-bg);
  color: var(--eh-btn-fg);
}

.wprm-recipe-snippet .wprm-recipe-link:hover,
.wprm-popup-modal .wprm-popup-modal__btn:not(:disabled):hover {
  background-color: var(--eh-btn-bg-hover);
  color: var(--eh-btn-fg);
}

/* Tonal — secondary actions. Warm sand fill, ink label, same stamp.
   This replaces the outline-button pattern wherever it appeared. */
.eh-btn--tonal,
.wprm-recipe-container .wprm-recipe-link.wprm-recipe-link,
.wprm-popup-modal .wprm-popup-modal__btn--secondary {
  background-color: var(--eh-btn-tonal-bg);
  color: var(--eh-btn-tonal-fg);
}

.eh-btn--tonal:hover,
.wprm-recipe-container .wprm-recipe-link.wprm-recipe-link:hover,
.wprm-popup-modal .wprm-popup-modal__btn--secondary:hover {
  background-color: var(--eh-btn-bg);
  color: var(--eh-btn-fg);
}

/* Inverse — dark panels, where an ink button on an ink panel would vanish.
   .eh-dispatch is deliberately excluded: it carries its own gold CTA. */
.eh-optin--save .gform_wrapper.gform-theme,
.eh-card-save .gform_wrapper.gform-theme {
  --gf-ctrl-btn-bg-color-primary: var(--eh-btn-fg);
  --gf-ctrl-btn-color-primary: var(--eh-btn-bg);
  --gf-ctrl-btn-bg-color-hover-primary: var(--eh-btn-rule);
  --gf-ctrl-btn-color-hover-primary: var(--eh-btn-bg);
  --gf-ctrl-btn-border-color-primary: var(--eh-btn-fg);
}

/* Icons follow the label rather than carrying their own fill. CSS beats the
   SVG `fill` presentation attribute, so no !important is needed. */
.wprm-recipe-snippet .wprm-recipe-link svg g,
.wprm-recipe-snippet .wprm-recipe-link svg path,
.wprm-recipe-container .wprm-recipe-link svg g,
.wprm-recipe-container .wprm-recipe-link svg path {
  fill: currentColor;
}

/* WPRM's public-modern.css sets .wprm-recipe{text-align:left} and loads after
   this file, so the bare class ties and loses. Doubling up wins it back.

   Flex rather than inline-block centring: the newline between the two
   shortcodes renders as a whitespace text node worth ~5px, which was enough
   to wrap the pair at 481px even when the buttons themselves fit. */
.wprm-recipe.wprm-recipe-snippet {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Kadence Blocks buttons are a separate system from the theme's button
   settings — the plugin emits .kb-button:not(.kb-btn-global-inherit) inline,
   so the theme mods never reach them. One extra class wins it back without
   resorting to !important.

   Sizing is deliberately NOT set here. Kadence Blocks exposes per-block size
   presets (kt-btn-size-small/standard/large) and per-block typography, and
   those stay authoritative — this rule only carries the shared identity
   (shape, weight, caps, tracking). */
.kb-button.kb-button:not(.kb-btn-global-inherit) {
  border-radius: var(--eh-btn-radius);
  font-weight: var(--eh-btn-weight);
  line-height: 1.2;
  letter-spacing: var(--eh-btn-track);
  text-transform: uppercase;
  /* Release the 44px floor too, or a "small" preset would still be padded out
     to 44px and the native size would not really be respected. */
  min-height: 0;
}

/* WPRM rating stars are focusable but ship only the browser default ring,
   which measures 2.28:1 on the dark card. Give them the system ring.
   WPRM zeroes outline-width on these, so !important is needed here too. */
a.wprm-rating-star:focus-visible,
.wprm-rating-star:focus-visible,
.wprm-comment-ratings-container input[type="radio"]:focus-visible + span {
  outline: 2px solid var(--eh-btn-focus) !important;
  outline-offset: 2px !important;
}
.wprm-recipe-container a.wprm-rating-star:focus-visible,
.wprm-recipe-container .wprm-rating-star:focus-visible {
  outline-color: var(--global-palette8, #faf6ee) !important;
}

/* Recipe card "Jump To" chips. These are secondary navigation inside the card,
   so they take the system's shape and caps but deliberately NOT the stamp —
   four stamped chips would compete with Print/Pin, which are the card's actual
   actions. Smaller and shorter than a button for the same reason. Colours come
   from the shortcode attributes in the 2026-recipe-template. */
.wprm-recipe .wprm-recipe-jump-to-section.wprm-recipe-jump-to-section {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  font-size: 12px;
  font-weight: var(--eh-btn-weight);
  line-height: 1.2;
  letter-spacing: var(--eh-btn-track);
  text-transform: uppercase;
  transition: background-color var(--eh-btn-speed) ease;
}
.wprm-recipe .wprm-recipe-jump-to-section.wprm-recipe-jump-to-section:hover {
  background-color: var(--eh-btn-tonal-bg) !important;
  color: var(--eh-btn-tonal-fg) !important;
}
.wprm-recipe .wprm-recipe-jump-to-section:focus-visible {
  outline: 2px solid var(--global-palette8, #faf6ee) !important;
  outline-offset: 2px !important;
}

/* WPRM's print view exists to be printed, so an email opt-in has no place on
   it. The form is injected client-side, so it is absent from the server HTML
   and only appears after hydration — hide it by body class. */
body.wprm-print .gform_wrapper,
body.wprm-print .eh-optin,
body.wprm-print .eh-card-save {
  display: none !important;
}

/* Printing a post should produce the article and the recipe, not sign-up
   forms. This covers a reader hitting Ctrl+P on the post itself. */
@media print {
  .gform_wrapper,
  .eh-optin,
  .eh-dispatch,
  .eh-card-save {
    display: none !important;
  }
}

/* Gravity Forms' theme framework is entirely variable-driven and applies its
   own values at a specificity that is not worth chasing. Setting its knobs is
   the supported route and cannot be out-specified. */
.gform_wrapper.gform-theme {
  --gf-ctrl-btn-size: 44px;
  --gf-ctrl-btn-size-md: 44px;
  --gf-ctrl-btn-radius: var(--eh-btn-radius);
  --gf-ctrl-btn-font-size: var(--eh-btn-size);
  --gf-ctrl-btn-font-size-md: var(--eh-btn-size);
  --gf-ctrl-btn-font-weight: var(--eh-btn-weight);
  --gf-ctrl-btn-text-transform: uppercase;
  --gf-ctrl-btn-letter-spacing: var(--eh-btn-track);
  --gf-ctrl-btn-padding-x: var(--eh-btn-pad-x);
  --gf-ctrl-btn-shadow: none;
  --gf-ctrl-btn-shadow-hover: none;
  --gf-ctrl-btn-shadow-focus: none;
}

/* GF's control reset zeroes outline in a way that survives a (0,4,0) selector.
   !important on this one property is the contained fix; everything else about
   the GF button is driven through its own variables above. */
.gform_wrapper.gform-theme .gform_footer .gform_button,
.gform_wrapper.gform-theme .gform-footer .gform_button {
  outline: 1.5px solid var(--eh-btn-rule) !important;
  outline-offset: 3px !important;
}
.gform_wrapper.gform-theme .gform_footer .gform_button:focus-visible,
.gform_wrapper.gform-theme .gform-footer .gform_button:focus-visible {
  outline: 2.5px solid var(--eh-btn-focus) !important;
  outline-offset: 4px !important;
}

/* Dark opt-in panels carry their own accent CTA (gold on ink). A gold rule
   around a gold button is invisible, so the stamp goes cream there. */
.eh-dispatch .gform_wrapper.gform-theme .gform_footer .gform_button {
  outline-color: var(--global-palette8, #faf6ee) !important;
}
/* Inverse buttons are already cream, so the cream rule would disappear —
   these keep the gold. */
.eh-optin--save .gform_wrapper.gform-theme .gform_footer .gform_button,
.eh-card-save .gform_wrapper.gform-theme .gform_footer .gform_button {
  outline-color: var(--eh-btn-rule) !important;
}

/* GF's stamp is pinned with !important, so the hover/active pull-in has to
   match it or the rule would not animate on form buttons. */
.gform_wrapper.gform-theme .gform_footer .gform_button:hover,
.gform_wrapper.gform-theme .gform-footer .gform_button:hover {
  outline-offset: 2px !important;
}
.gform_wrapper.gform-theme .gform_footer .gform_button:active,
.gform_wrapper.gform-theme .gform-footer .gform_button:active {
  outline-offset: 1px !important;
}

/* Focus ring on dark surfaces. palette1 measures 4.53:1 on the cream page and
   3.87:1 on sand, but only 2.89:1 against the dark recipe card — under the 3:1
   WCAG 2.4.11 floor. Cream takes those contexts to 12.66:1. */
.wprm-recipe-container .wprm-recipe-link.wprm-recipe-link:focus-visible,
.eh-dispatch .gform_wrapper.gform-theme .gform_footer .gform_button:focus-visible,
.eh-optin--save .gform_wrapper.gform-theme .gform_footer .gform_button:focus-visible,
.eh-card-save .gform_wrapper.gform-theme .gform_footer .gform_button:focus-visible {
  outline-color: var(--global-palette8, #faf6ee) !important;
}

@media (prefers-reduced-motion: reduce) {
  .eh-btn, .kb-button, .kt-button, .wp-block-button__link,
  .gform_wrapper.gform-theme .gform_button, .wprm-recipe-snippet .wprm-recipe-link,
  .wprm-recipe-container .wprm-recipe-link.wprm-recipe-link {
    transition: none;
  }
}

/* Phones and small tablets: tighten the box before the rule starts crowding.
   The cap is 600px rather than 480px because at 481px the jump pair measured
   419px against a 417px container and wrapped by 2px — an accidental-looking
   stack. The tighter padding keeps it on one row up to 600px, above which the
   container is wide enough for the full padding anyway. */
@media (max-width: 600px) {
  :root {
    --eh-btn-pad-x: 18px;
    --eh-btn-margin: 6px 7px;
  }
}