/* ==========================================================================
   Eats History - front end only.
   Chrome the editor never renders: site nav, archive cards, popups, the
   WPRM review modal, form styling, and the mobile cleanup media query.
   Migrated from Customizer Additional CSS 2026-07-28.
   ========================================================================== */

.wprm-recipe .wprm-layout-container.EH-main {
  padding: 10px 30px 30px 30px; /* top right bottom left */
}

/* Related Posts*/
/* Hide arrows */
.kadence-posts-list ~ .splide__arrows,
.splide__arrow--prev,
.splide__arrow--next {
    display: none !important;
}
.kadence-posts-list .entry-content-wrap {
    padding-top: 15px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

/* ── Mobile ── */
@media (max-width: 767px) {

    /* Gap between cards */
    .kadence-posts-list .splide__slide {
        margin-right: 10px !important;
    }

    /* Image height */
    .kadence-posts-list:not(.post-archive) .post-thumbnail-inner img {
        max-height: 120px;
        object-fit: cover;
    }

    /* Title font */
    .kadence-posts-list .entry-title,
    .kadence-posts-list .entry-title a {
        font-size: 1rem !important;
        line-height: 1.2 !important;
    }

    /* Card content padding */
    .kadence-posts-list .entry-content-wrap {
        padding-top: 8px;
        padding-right: 10px;
        padding-bottom: 8px;
	}
}
			
#wpforms-6935 .wpforms-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  width: 100% !important;
  max-width: 100% !important;
}

#wpforms-6935 .wpforms-field-container {
  flex: 1;
  margin-bottom: 0 !important;
}

#wpforms-6935 .wpforms-submit-container {
  margin: 0 !important;
  flex-shrink: 0;
}

#wpforms-6935-field_4 {
  width: 100%;
}

#wpforms-6935 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

@media (max-width: 500px) {
  #wpforms-6935 .wpforms-form {
    flex-direction: column;
    align-items: stretch;
  }
}
#wpforms-6935 .wpforms-field {
  margin-bottom: 0 !important;
}
#wpforms-6935-field_4-container {
  padding-bottom: 0 !important;
}

/*nav bar on index*/
..eh-era-nav{
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--global-palette7);
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}
.eh-era-nav{
  position: sticky;
  top: 0;
}

.eh-era-nav-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--global-palette2);
}

.eh-era-nav-inner a{
  flex: none;
  font-family: 'Cormorant Garamond', serif;
  font-variant: small-caps;
  font-size: 18px;
  letter-spacing: .06em;
  color: var(--global-palette3);
  text-decoration: none;
  padding: 16px 22px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  opacity: .75;
}
.eh-era-nav-inner a:hover{
  color: var(--global-palette1);
  opacity: 1;
}
.eh-era-nav-inner a.eh-era-current{
  border-color: var(--global-palette1);
  color: var(--global-palette1);
  opacity: 1;
}


/* [2026-07-22] Archive/category grid card: black 1pt border around whole card, centered title */
.post-archive.kadence-posts-list .loop-entry {
	border: 1pt solid #000000;
}
.post-archive.kadence-posts-list .loop-entry .entry-title {
	text-align: center;
	padding: 10px 15px;
}


/* [2026-07-26] Recipe card title on mobile */
@media all and (max-width: 767px) {
	/* Recipe card title: smaller on mobile so long recipe names don't wrap 3 lines */
	.wprm-recipe-name {
		font-size: 20px !important;
		line-height: 1.3 !important;
	}
}


/* [2026-07-24] Related Posts (Keep Exploring) card: title 18px/1.4 line-height and 15px gap between cards on desktop, to match dev */
.entry-related .kadence-posts-list .splide__slide {
	margin-right: 15px !important;
}
.entry-related .kadence-posts-list .entry-title,
.entry-related .kadence-posts-list .entry-title a {
	font-size: 18px !important;
	line-height: 1.4 !important;
}


/* ── Breadcrumbs (SEOPress): hide the current post title on single posts ──
   The crumb stays in the BreadcrumbList JSON-LD, it is only hidden visually. */
body.single-post .seopress-bc-wrap .breadcrumb li.breadcrumb-item.active {
	display: none;
}
body.single-post .seopress-bc-wrap .breadcrumb li.breadcrumb-item:nth-last-child(2)::after {
	content: none;
}

/* [2026-07-26] Recipe card gutters — keep usable width >= 325px on phones so a
   325px ad unit fits inside the card.
   Three things were eating width: the theme's 24px .content-container gutter
   (only partly clawed back by .entry's -16px margins), and WPRM nesting layout
   containers 3-4 deep with the old rule padding every level. The entry goes
   full-bleed on mobile, and only the outermost WPRM container keeps a gutter. */
@media (max-width: 767px) {
/* Single posts only — on archives .entry.content-bg is the loop card, and
   full-bleed would push its 1pt border onto the screen edges. */
body.single .entry.content-bg {
	margin-left: -24px !important;
	margin-right: -24px !important;
}
.entry-content-wrap {
	padding-left: 10px !important;
	padding-right: 10px !important;
}
.wprm-recipe > .wprm-layout-container {
	padding-left: 10px !important;
	padding-right: 10px !important;
}
.wprm-recipe .wprm-layout-container .wprm-layout-container,
.wprm-recipe .wprm-layout-column {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
}
/* Small phones need every pixel to clear 325. */
@media (max-width: 400px) {
.entry-content-wrap,
.wprm-recipe > .wprm-layout-container {
	padding-left: 8px !important;
	padding-right: 8px !important;
}
}
@media (max-width: 360px) {
.entry-content-wrap {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
}
/* === WPRM review modal — brand (managed) === */
/* Button colours moved to mu-plugins/eh-button-system/buttons.css. */
/* Kadence's global `button` rule overrides WPRM's .wprm-popup-modal__btn,
   so the panel and submit button have to be pinned explicitly here. */

/* Panel */
.wprm-popup-modal .wprm-popup-modal__container {
	background-color: #fcfaf7;
}


/* Close button: WPRM ships a black box, and the theme colors the glyph
   #0e2028 — near-black on black. Make it a quiet, visible brand control. */
.wprm-popup-modal .wprm-popup-modal__close {
	background: transparent;
	border-radius: 50%;
	transition: background-color .15s ease;
}
.wprm-popup-modal .wprm-popup-modal__close::before {
	color: #1a3040;
	font-size: 20px;
	line-height: 1;
}
.wprm-popup-modal .wprm-popup-modal__close:hover,
.wprm-popup-modal .wprm-popup-modal__close:focus-visible {
	background: rgba(74, 92, 56, .12);
}
.wprm-popup-modal .wprm-popup-modal__close:hover::before,
.wprm-popup-modal .wprm-popup-modal__close:focus-visible::before {
	color: #4a5c38;
}

/* Form fields: default border is #cbd5e0, a cool gray that fights the cream panel. */
.wprm-popup-modal input[type="text"],
.wprm-popup-modal input[type="email"],
.wprm-popup-modal textarea {
	background: #fcfaf7;
	color: #1a3040;
	border: 1px solid rgba(74, 92, 56, .35);
	border-radius: 3px;
}
.wprm-popup-modal input[type="text"]:focus,
.wprm-popup-modal input[type="email"]:focus,
.wprm-popup-modal textarea:focus {
	border-color: #4a5c38;
	outline: 2px solid rgba(74, 92, 56, .25);
	outline-offset: 1px;
}
.wprm-popup-modal input[type="text"]::placeholder,
.wprm-popup-modal input[type="email"]::placeholder,
.wprm-popup-modal textarea::placeholder {
	color: #5c7880;
	opacity: 1;
}
/* === end WPRM review modal === */


/* Gravity Forms inherits Kadence branding */
.gform_wrapper.gform-theme--framework {
	--gf-ctrl-btn-bg-color-primary: var(--global-palette-btn-bg, #000);
	--gf-ctrl-btn-bg-color-hover-primary: var(--global-palette-btn-bg-hover, #284858);
	--gf-ctrl-btn-bg-color-focus-primary: var(--global-palette-highlight-alt, #1a3040);
	--gf-ctrl-btn-color-primary: var(--global-palette-btn, #fff);
	--gf-ctrl-btn-color-hover-primary: var(--global-palette-btn-hover, #fff);
	--gf-ctrl-btn-border-color-primary: var(--global-palette-btn-bg, #000);
	--gf-color-primary: var(--global-palette-btn-bg, #000);
	--gf-color-in-ctrl-primary: var(--global-palette-btn-bg, #000);
}

/* Gravity Forms - modern layout */
.gform_wrapper.gform-theme--framework {
	--gf-form-gap-y: 20px;
	--gf-field-gap-y: 6px;
	--gf-ctrl-size-lg: 52px;
	--gf-ctrl-label-font-size-primary: 11px;
	--gf-ctrl-label-color-primary: rgba(14, 32, 40, .62);
	--gf-ctrl-label-font-size-req: 11px;
	--gf-ctrl-label-color-req: rgba(14, 32, 40, .38);
}
.gform_wrapper.gform-theme--framework .gfield_label {
	text-transform: uppercase;
	letter-spacing: .09em;
	font-weight: 600;
}
.gform_wrapper.gform-theme--framework .gfield_required { font-weight: 400; }
.gform_wrapper.gform-theme--framework .gform_footer { margin-top: 8px; }
.gform_wrapper.gform-theme--framework .gform_button {
	width: 100%;
	min-height: 52px;
	text-transform: uppercase;
	letter-spacing: .09em;
	font-weight: 600;
	transition: opacity .18s ease;
}
.gform_wrapper.gform-theme--framework .gform_button:hover { opacity: .85; }


/* eh-dispatch — popup variant (Kadence Conversions #7684) */
.kadence-conversion-wrap .eh-dispatch--popup { margin: 0; padding: 38px 34px 32px; }
.kadence-conversion-wrap .eh-dispatch--popup .eh-dispatch__title { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 1.95rem); max-width: 22ch; }
.kadence-conversion-wrap .eh-dispatch--popup .eh-dispatch__copy { max-width: 46ch; }
.kadence-conversion-wrap.kc-_ehdispatch .kadence-conversion-inner { max-height: 86vh; overflow-y: auto; overscroll-behavior: contain; }
.kadence-conversion-wrap .kadence-conversions-close svg { display: block; fill: currentColor; }
@media (max-width: 767px) {
	.kadence-conversion-wrap .eh-dispatch--popup { padding: 26px 20px 24px; }
	.kadence-conversion-wrap .eh-dispatch--popup .eh-dispatch__title { font-size: 1.3rem; max-width: none; }
	.kadence-conversion-wrap .eh-dispatch--popup .eh-dispatch__copy { font-size: .92rem; }
}

@media (max-width: 767px) {
	.kadence-conversion-wrap.kc-_ehdispatch .kadence-conversion,
	.kadence-conversion-wrap.kc-_ehgazette .kadence-conversion { width: 92%; margin-left: auto; margin-right: auto; }
}


/* ── Newspaper popup: The Eats History Gazette (Kadence Conversions #8021) ───── */
.eh-gazette {
	--ink: #12100e;
	--news: #f2efe6;
	background: var(--news);
	background-image: radial-gradient(rgba(18,16,14,.07) 1px, transparent 1.3px);
	background-size: 4px 4px;
	color: var(--ink);
	padding: 26px 28px 22px;
	font-family: var(--global-heading-font-family, Georgia, "Times New Roman", serif);
	text-align: center;
}
.eh-gazette__masthead {
	margin: 0 0 8px;
	font-size: clamp(.95rem, .8rem + .5vw, 1.15rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .18em;
	line-height: 1.1;
}
.eh-gazette__dateline {
	display: flex; justify-content: space-between; gap: 10px;
	margin: 0 0 18px; padding: 5px 0;
	border-top: 3px double var(--ink); border-bottom: 3px double var(--ink);
	font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .13em;
}
.eh-gazette .eh-gazette__headline {
	margin: 0 0 12px;
	font-size: clamp(2rem, 1.3rem + 3.6vw, 3.05rem);
	font-weight: 800;
	text-transform: uppercase;
	line-height: .93;
	letter-spacing: -.012em;
	text-wrap: balance;
	color: var(--ink);
}
.eh-gazette .eh-gazette__deck {
	margin: 0 auto 20px;
	max-width: 30ch;
	font-size: 1.02rem;
	font-style: italic;
	line-height: 1.35;
	color: var(--ink);
	border-top: 1px solid rgba(18,16,14,.28);
	padding-top: 12px;
	text-wrap: balance;
}
.eh-gazette .gform_wrapper { margin: 0; }
.eh-gazette .gform_wrapper.gform-theme--framework {
	--gf-color-primary: var(--ink);
	--gf-ctrl-border-color: var(--ink);
	--gf-form-gap-y: 10px;
}
.eh-gazette .gform_wrapper input[type=text],
.eh-gazette .gform_wrapper input[type=email] {
	background: rgba(255,255,255,.72);
	border: 1px solid var(--ink);
	border-radius: 0;
	color: var(--ink);
	text-align: center;
}
.eh-gazette .gform_wrapper input::placeholder { color: rgba(18,16,14,.5); }
.eh-gazette .gform_wrapper input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.eh-gazette .gform_wrapper .gform_button {
	background: var(--ink) !important;
	border: 1px solid var(--ink) !important;
	color: var(--news) !important;
	border-radius: 0 !important;
	text-transform: uppercase;
	letter-spacing: .13em;
	font-weight: 700;
}
.eh-gazette .gform_wrapper .gform_button:hover { background: #3a3531 !important; border-color: #3a3531 !important; }
.eh-gazette .gform_confirmation_message { color: var(--ink); }
.eh-gazette .gform_wrapper .gform_footer { display: flex; justify-content: center; margin-top: 12px; }
.eh-gazette__fine {
	margin: 14px 0 0; font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em;
	color: rgba(18,16,14,.62);
}
@media (max-width: 767px) {
	.eh-gazette { padding: 34px 18px 18px; }
	.eh-gazette__dateline { font-size: 8.5px; letter-spacing: .08em; }
	.eh-gazette .eh-gazette__deck { font-size: .95rem; }
}

/* Newsreel spin-in — the old black-and-white "stop press" transition */
@keyframes eh-newsreel-spin {
	0%   { transform: scale(.05) rotate(-1080deg); opacity: 0; }
	50%  { opacity: 1; }
	86%  { transform: scale(1.035) rotate(7deg); }
	100% { transform: scale(1) rotate(-.5deg); opacity: 1; }
}
.kadence-conversion-wrap.kc-_ehgazette.kc-visible .kadence-conversion {
	animation: eh-newsreel-spin 1.3s cubic-bezier(.28,.52,.32,1) both;
}
.kadence-conversion-wrap.kc-_ehgazette .kadence-conversion-inner { padding: 0; }
@media (prefers-reduced-motion: reduce) {
	.kadence-conversion-wrap.kc-_ehgazette.kc-visible .kadence-conversion {
		animation: kcafadeIn .35s ease-in both;
	}
}



/* === GF mobile touch targets ===
   The theme pins every control to height:38px/14px, which puts inputs under the
   44px touch minimum and makes iOS Safari zoom the page on focus. Needs
   height:auto as well as min-height, or the fixed height wins. */
@media screen and (max-width: 767px) {
	.gform_wrapper.gform-theme--framework input[type=text],
	.gform_wrapper.gform-theme--framework input[type=email],
	.gform_wrapper.gform-theme--framework input[type=tel],
	.gform_wrapper.gform-theme--framework input[type=url],
	.gform_wrapper.gform-theme--framework input[type=number],
	.gform_wrapper.gform-theme--framework select {
		height: auto;
		min-height: 48px;
		font-size: 16px;
	}
	.gform_wrapper.gform-theme--framework textarea { font-size: 16px; }
}
/* The submit button is deliberately left alone: eh-button-system stamps every
   button site-wide at 44px min-height / auto width, and it is RUCSS-excluded so
   it loads after Additional CSS and wins any tie. 44px already clears the touch
   target; overriding it here would only desync this form from the rest. */
/* === end GF mobile touch targets === */

/* eh-conv-close-touch */
.kadence-conversion-wrap .kadence-conversions-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;}


/* ═══════════════════════════════════════════════════════════════════════════
   [2026-07-26] Mobile cleanup — category archives + single posts
   Verified at 320 / 361 / 390 / 393 / 767px (iOS Safari via Playwright).
   The H1 size is NOT here — it lives in
   Customize → Post → Post Title → Title Font, device switcher → Mobile.
   ═══════════════════════════════════════════════════════════════════════════ */

@media all and (max-width: 767px) {

	/* ── Archive cards: let the thumbnail fill its ratio box ──
	   The `max-height: 120px` rule further up was written for the "Keep
	   Exploring" carousel, but `.kadence-posts-list` also matches the category
	   grid — so every archive card rendered a 120px image inside a 229px ratio
	   box with ~110px of dead white space under it. That rule is now scoped
	   with :not(.post-archive); this restores the fill.
	   NOTE: the mobile ratio is now pinned to 16:9 just below, so the
	   Customize → Blog/Archive → Post Archive Image → Image Ratio setting no
	   longer drives mobile — change the padding-bottom below instead. */
	.post-archive.kadence-posts-list .post-thumbnail-inner img {
		max-height: none;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ── Archive cards: tighten the landscape crop and the vertical rhythm ──
	   [2026-07-27] Staying landscape, just less tall. The ratio box is a
	   percentage-padding box (Kadence's .kadence-thumbnail-ratio-2-3 sets
	   padding-bottom: 66.667%, i.e. 3:2); 56.25% is 16:9, which is also the
	   native ratio of the featured images (768x432) — so the crop goes away
	   entirely rather than just getting shallower.
	   The three margins below were stacking ~33px of dead space per card:
	   16px under the thumbnail, 16px under .entry-header (an empty
	   .entry-footer follows it), and the grid's 40px between cards.
	   Net: card 321px -> 257px, ~2.3 cards per screen -> ~3.0. */
	.post-archive.kadence-posts-list .post-thumbnail.kadence-thumbnail-ratio-2-3 {
		padding-bottom: 56.25% !important;
		margin-bottom: 0 !important;
	}
	.post-archive.kadence-posts-list .entry-content-wrap .entry-header {
		margin-bottom: 0 !important;
	}
	.post-archive.kadence-posts-list .entry-title {
		padding: 12px 15px !important;
	}
	.post-archive.kadence-posts-list {
		gap: 24px !important;
	}

	/* ── Single post: put the body on the same left edge as the title ──
	   On mobile Kadence pulls the boxed article out to the screen edges
	   (article.single-entry gets margin: 0 -24px) and re-pads it with just
	   10px, while the title block above keeps the 24px site gutter — two
	   different left edges down the whole page. 24px lines them up.
	   !important: the 10px comes from Kadence's generated inline CSS. */
	.single-entry > .entry-content-wrap {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	/* ── Single post: in-content images ──
	   Editor "is-resized" widths are tuned for the desktop column and land at
	   arbitrary widths on a phone (187px, 330px, 198px…). Dropping the inline
	   width lets each image run to the column edge, capped at its natural size
	   so nothing is upscaled — 40px icons stay 40px. */
	.entry-content .wp-block-image.is-resized img {
		width: auto !important;
		max-width: 100% !important;
	}

	/* ── Jump buttons on one line ──
	   At desktop size the pair needs ~415px against a 345px column, so they
	   wrapped to two rows. flex: 1 1 0 splits the row evenly and the type
	   scales with the viewport instead of overflowing. */
	.wprm-recipe.wprm-recipe-template-eh-snippet-buttons {
		flex-wrap: nowrap;
	}
	.wprm-recipe.wprm-recipe-template-eh-snippet-buttons > a {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		white-space: nowrap;
		margin-left: 4px;
		margin-right: 4px;
		padding-left: 8px;
		padding-right: 8px;
		font-size: clamp(10.5px, 3.1vw, 13px);
		letter-spacing: .05em;
		gap: 6px;
	}
	.wprm-recipe.wprm-recipe-template-eh-snippet-buttons > a svg {
		width: 14px;
		height: 14px;
	}
}

/* Under ~390px the icon is what pushes the label out of the button, so it goes
   and the label keeps its size. iPhone 14/15 (393) and up keep the icon. */
@media all and (max-width: 389px) {
	.wprm-recipe.wprm-recipe-template-eh-snippet-buttons > a .wprm-recipe-icon {
		display: none;
	}
	.wprm-recipe.wprm-recipe-template-eh-snippet-buttons > a {
		gap: 0;
		padding-left: 6px;
		padding-right: 6px;
	}
}
/* === end 2026-07-26 mobile cleanup === */


/* "Keep Exploring" (Kadence Element 8107) see-more link - real touch target.
   The link was only 19px tall; 44px is the minimum comfortable tap size.
   Migrated from Perfmatters snippet 5 on 2026-07-28. */
.kt-adv-heading8107_ehrelmore-01 a {
	display: inline-block;
	box-sizing: border-box;
	min-height: 44px;
	line-height: 20px;
	padding: 12px 0 12px 12px;
}