/* Every Purpose Home site header and footer. Ported from the approved revision 4 styles.css
   (.site-header, .site-menu, .promise, .site-footer, .to-top, dialog). Mobile-first: base rules
   are the phone layout. Loaded only when the Customizer toggle is on (body.eph-chrome). */

/* ---------- Hide the Foodica header, slide-out panel, skip link, and footer ----------
   Only theme elements. Never hide or restyle consent/privacy elements (cookie-law-info's
   #cookie-law-info-bar, .wt-cli-ccpa-*, cli-*) or Grow/Mediavine (grow-*, mv-*); they print after
   our footer (wp_footer priority 10+) and keep their own positioning. */
body.eph-chrome header.site-header,
body.eph-chrome #pageslide,
body.eph-chrome > a.skip-link.screen-reader-text,
body.eph-chrome #colophon,
body.eph-chrome footer.site-footer{display:none!important}

/* Foodica sets html,body{overflow-x:hidden}; on <body> that makes body a scroll container and
   breaks position:sticky. clip trims sideways overflow without creating a scroll container. */
html body.eph-chrome{overflow-x:clip}
html{scroll-padding-top:90px}

/* ---------- Shared: palette, fonts, resets on each root ---------- */
.eph-skip-link,.eph-header,.eph-promise,.eph-site-menu,.eph-search-dialog,.eph-footer,.eph-to-top{
  --sage:#60695D; --sage-light:#AEB0A2; --copper:#8F4F32;
  --ink:#38413C; --white:#FAF9F7; --linen:#F4EEE7;
  --serif:"Lora",Georgia,serif; --sans:"Source Sans 3",Arial,sans-serif;
  --script:"Caveat","Segoe Print",cursive;
  --radius:4px;
  font-family:var(--sans);font-size:17px;line-height:1.55;font-weight:400;font-style:normal;
  text-transform:none;letter-spacing:normal;text-align:left;
}
:is(.eph-header,.eph-promise,.eph-search-dialog,.eph-footer),
:is(.eph-header,.eph-promise,.eph-search-dialog,.eph-footer) *,
:is(.eph-header,.eph-promise,.eph-search-dialog,.eph-footer) *::before,
:is(.eph-header,.eph-promise,.eph-search-dialog,.eph-footer) *::after,
.eph-to-top,.eph-skip-link{box-sizing:border-box}

/* Defensive resets against Foodica's link, heading, paragraph, list, button, and input styles. */
:is(.eph-header,.eph-promise,.eph-search-dialog,.eph-footer) :is(h1,h2,h3,p,blockquote,nav,ul,li,form,label){margin:0;padding:0;border:0;background:none;font-family:inherit;font-size:inherit;font-weight:inherit;font-style:normal;line-height:inherit;color:inherit;text-transform:none;letter-spacing:normal;box-shadow:none;float:none}
:is(.eph-header,.eph-promise,.eph-search-dialog,.eph-footer) :is(h1,h2,h3,blockquote)::before,
:is(.eph-header,.eph-promise,.eph-search-dialog,.eph-footer) :is(h1,h2,h3,blockquote)::after{content:none}
:is(.eph-header,.eph-promise,.eph-search-dialog,.eph-footer) :is(ul,li){list-style:none}
:is(.eph-header,.eph-footer) a,
:is(.eph-header,.eph-footer) a:is(:hover,:focus,:visited,:active){color:inherit;text-decoration:none;border:0;box-shadow:none;background-image:none;text-transform:none;letter-spacing:normal}
:is(.eph-header,.eph-search-dialog,.eph-footer) :is(button,input){font:inherit;color:inherit;margin:0;text-transform:none;letter-spacing:normal;box-shadow:none;touch-action:manipulation}
:is(.eph-header,.eph-search-dialog,.eph-footer) button{cursor:pointer;-webkit-appearance:none;appearance:none}
:is(.eph-header,.eph-footer) a,.eph-to-top{touch-action:manipulation}
:is(.eph-header,.eph-promise,.eph-search-dialog,.eph-footer) :is(svg,img){display:block;max-width:100%}
.eph-header .eph-wrap,.eph-footer .eph-wrap{width:calc(100% - 32px);max-width:1160px;margin-inline:auto}
.eph-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Focus: warm white on sage, copper on linen and warm white. */
:is(.eph-header,.eph-search-dialog,.eph-footer,.eph-skip-link,.eph-to-top) :is(a,button,input):focus-visible,
a.eph-to-top:focus-visible,a.eph-skip-link:focus-visible{outline:3px solid var(--copper);outline-offset:4px}
.eph-header :is(a,button):focus-visible,.eph-footer :is(a,button):focus-visible{outline-color:var(--white)}
.eph-header .eph-site-menu :is(a,button):focus-visible{outline-color:var(--copper)}

html body a.eph-skip-link,html body a.eph-skip-link:is(:hover,:focus,:visited,:active){position:fixed;left:16px;top:-100px;z-index:100000;padding:12px 20px;background:var(--white);color:var(--ink);text-decoration:none;border:0;box-shadow:none}
html body a.eph-skip-link:focus{top:16px}

/* ---------- Header: slim and sticky so recipe photos appear on the first phone screen ---------- */
.eph-header{background:var(--sage);color:var(--white);position:sticky;top:0;z-index:999;padding-top:env(safe-area-inset-top);width:100%;margin:0;border:0}
body.admin-bar .eph-header{top:32px}
.eph-header-inner{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;min-height:86px;transition:min-height .2s ease}
.eph-header .eph-brand{justify-self:center;display:block;width:172px;padding-block:10px 8px;transition:width .2s ease;color:var(--white)}
.eph-header .eph-brand-mark{display:block;width:100%;height:auto}
/* Customizer Header Logo (e.g. The Sourdough Cookie Lady) with a small line under it. Stacked logos
   by default; .is-wide for single-line logos. The logo keeps its size when the header compacts on
   scroll; only the small line hides (the tagline strip scrolls away on its own). */
.eph-header .eph-brand.eph-brand-alt,.eph-header.is-compact .eph-brand.eph-brand-alt{width:205px;padding-block:10px 8px;text-align:center}
.eph-header .eph-brand.eph-brand-alt.is-wide,.eph-header.is-compact .eph-brand.eph-brand-alt.is-wide{width:250px}
.eph-header .eph-brand-alt.has-phone-logo .eph-brand-mark-wide{display:none}
.eph-header .eph-brand-subline{display:block;margin-top:2px;font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.3em;padding-left:.3em;line-height:1.2;text-transform:uppercase;color:var(--sage-light,#AEB0A2);white-space:nowrap}
.eph-header.is-compact .eph-brand.eph-brand-alt{padding-block:7px}
.eph-header.is-compact .eph-brand-subline{display:none}
.eph-header .eph-brand-text{display:block;font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.2;text-align:center;color:var(--white)}
/* Bare icons: warm white is the palette color with enough contrast on deep sage. */
.eph-header .eph-icon-button{background:transparent;color:var(--white);border:0;border-radius:var(--radius);width:44px;height:44px;min-height:0;display:grid;place-items:center;padding:0;line-height:1}
.eph-header .eph-icon-button svg{width:26px;height:26px}
.eph-header .eph-icon-button:focus{background:transparent;color:var(--white);border:0}
.eph-header .eph-icon-button:hover{color:var(--linen);background:rgb(250 249 247 / .1);border:0}
.eph-header .eph-icon-spacer{display:block;width:44px;height:44px}
.eph-header .eph-header-nav{display:none}
.eph-header.is-compact .eph-header-inner{min-height:66px}
.eph-header.is-compact .eph-brand{width:140px}

/* Menu panel (hamburger): the full site menu as accordion rows, then the Sourdough Cookies
   buttons. One family for the rows and buttons (Lora); the small label is Source Sans caps. */
.eph-header .eph-site-menu{background:var(--linen);color:var(--ink);max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--sage-light);padding-block:4px 18px}
/* Phones: extra room at the end of the panel so the last pills can always scroll clear of a
   bottom ad bar, even one the measuring script misses. */
@media (max-width:1079px){.eph-header .eph-site-menu{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}}
.eph-header .eph-site-menu[hidden]{display:none}
.eph-header .eph-menu-tree{border-top:0}
.eph-header .eph-menu-tree ul[hidden]{display:none}
/* Separators (Oct 13, Marlene's option D): a soft sage line only between the main sections; rows
   inside an opened section are separated by spacing and the copper labels, like the desktop menu. */
.eph-header .eph-menu-row{display:flex;align-items:stretch;gap:8px}
.eph-header .eph-menu-tree > li + li{border-top:1px solid rgba(174,176,162,.45)}
.eph-header .eph-menu-tree > li:last-child{border-bottom:1px solid rgba(174,176,162,.45)}
.eph-header .eph-menu-row a{flex:1 1 auto;min-width:0;display:flex;align-items:center;min-height:42px;padding-block:4px;font-family:var(--serif);font-size:17px;font-weight:500;line-height:1.3;color:var(--ink)}
.eph-header .eph-menu-row a[aria-current="page"]{color:var(--copper)}
.eph-header .eph-site-menu .eph-menu-toggle,
.eph-header .eph-site-menu .eph-menu-toggle:is(:hover,:focus){flex:none;align-self:center;width:44px;height:44px;min-height:44px;margin-right:-10px;display:grid;place-items:center;padding:0;background:transparent;border:0;border-radius:var(--radius);color:var(--ink)}
.eph-header .eph-menu-toggle .eph-chevron{width:18px;height:18px;transition:transform .2s ease}
.eph-header .eph-menu-toggle[aria-expanded="true"] .eph-chevron{transform:rotate(180deg)}
.eph-header .eph-menu-sub .eph-menu-row a{min-height:38px;padding-left:18px;font-size:15px}
.eph-header .eph-menu-sub .eph-menu-sub .eph-menu-row a{padding-left:36px}
/* Menu headings (CSS class eph-menu-heading): non-link labels in small copper caps. Inside a mega
   item's accordion each heading is a label above its rows; other children are footer links. */
.eph-header .eph-menu-heading-label{display:flex;align-items:center;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;line-height:1.3;color:var(--copper)}
.eph-header .eph-menu-row > .eph-menu-heading-label{flex:1 1 auto;min-width:0;min-height:42px;padding-block:4px}
.eph-header .eph-menu-sub .eph-menu-row > .eph-menu-heading-label{min-height:38px;padding-left:18px}
.eph-header .eph-menu-heading-item > .eph-menu-heading-label{min-height:30px;padding:12px 0 2px 18px}
.eph-header .eph-mega-foot .eph-menu-row a{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.eph-header .eph-mega-foot .eph-menu-row a:hover{color:var(--ink)}
.eph-header .eph-arrow{color:var(--copper);margin-left:6px;transition:transform .15s ease}
.eph-header .eph-mega-foot a:hover .eph-arrow{transform:translateX(3px)}
.eph-header .eph-menu-cookies{margin-top:16px}
.eph-header .eph-site-menu p.eph-flavor-label{display:block;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--copper);line-height:1.3;text-align:left;margin:0 0 8px}
.eph-header .eph-menu-chips{display:flex;flex-wrap:wrap;gap:6px}
.eph-header .eph-menu-chips a{display:inline-flex;align-items:center;min-height:34px;padding:4px 13px;background:var(--white);color:var(--ink);border:1px solid var(--sage-light);border-radius:999px;font-family:var(--serif);font-size:15px;font-weight:500;line-height:1.3}
.eph-header .eph-menu-chips a[aria-current="page"]{border-color:var(--copper);color:var(--ink)}
/* Hover colors in the menu panel only on a real mouse: a finger dragging across the phone menu
   left links copper, which read like a heading (Marlene). */
@media (hover:hover) and (pointer:fine){
  .eph-header .eph-menu-row a:hover{color:var(--copper)}
  .eph-header .eph-site-menu .eph-menu-toggle:hover{color:var(--copper)}
  .eph-header .eph-menu-chips a:hover{border-color:var(--copper);color:var(--ink)}
}

/* Tagline strip under the header (not sticky). The whole strip is one link. */
.eph-promise{display:block;background:var(--white);color:var(--ink);padding:0;margin:0;width:100%}
/* Homepage tagline (Oct 12 trial): on the page background with a thin full-width sage line under it,
   so it reads as part of the page but still sits apart from the first section. */
html body .eph-promise :is(h1,p){margin:0 max(16px,calc((100% - 1200px) / 2));border-bottom:1px solid var(--sage-light)}
.eph-promise :is(h1,p){font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.35;text-align:center;max-width:none;margin:0;color:var(--ink)}
html body .eph-promise a.eph-promise-link,
html body .eph-promise a.eph-promise-link:is(:hover,:focus,:visited,:active){display:block;padding:10px max(16px,calc((100% - 420px) / 2));font:inherit;color:var(--ink);text-decoration:none;text-wrap:balance;border:0;box-shadow:none;background:none;text-transform:none;letter-spacing:normal}
html body .eph-promise a.eph-promise-link:is(:hover,:focus-visible){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
html body .eph-promise a.eph-promise-link:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
html body .eph-promise a.eph-promise-link,html body .eph-promise a.eph-promise-link:is(:hover,:focus,:visited,:active){padding-left:0;padding-right:0}

/* ---------- Search dialog ---------- */
dialog.eph-search-dialog{width:min(550px,calc(100% - 32px));max-width:none;padding:24px;margin:auto;background:var(--white);color:var(--ink);border:0;border-radius:var(--radius);box-shadow:0 10px 40px rgb(56 65 60 / .25)}
dialog.eph-search-dialog:not([open]){display:none}
dialog.eph-search-dialog::backdrop{background:rgb(56 65 60 / .6)}
.eph-search-dialog .eph-search-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.eph-search-dialog .eph-search-heading h2{font-family:var(--serif);font-weight:600;font-size:26px;line-height:1.25;color:var(--sage)}
.eph-search-dialog .eph-dialog-close,.eph-search-dialog .eph-dialog-close:hover,.eph-search-dialog .eph-dialog-close:focus{background:transparent;border:0;border-radius:var(--radius);color:var(--ink);font-size:30px;line-height:1;width:44px;height:44px;padding:0;display:grid;place-items:center}
.eph-search-dialog label{display:block;font-size:17px;color:var(--ink)}
.eph-search-dialog .eph-search-fields{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.eph-search-dialog .eph-search-fields input[type=search]{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:100%;max-width:none;height:auto;background:var(--white);color:var(--ink);border:1px solid var(--sage-light);border-radius:var(--radius);padding:12px 15px;min-height:50px;min-width:0;font-family:var(--sans);font-size:16px;line-height:1.3}
.eph-search-dialog .eph-search-fields input[type=search]::placeholder{color:var(--sage);opacity:1}
.eph-search-dialog .eph-button,.eph-search-dialog .eph-button:focus{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:12px 22px;background:var(--copper);color:var(--white);font-family:var(--sans);font-weight:700;font-size:16px;border:0;border-radius:var(--radius);line-height:1.3;text-align:center}
.eph-search-dialog .eph-button:hover{background:var(--ink);color:var(--white)}

/* ---------- Footer ---------- */
.eph-footer{display:block;background:var(--sage);color:var(--white);padding-top:34px;padding-bottom:max(24px,env(safe-area-inset-bottom));margin:0;width:100%;clear:both;position:relative}
.eph-footer .eph-footer-main{display:grid;gap:30px;padding-bottom:30px;justify-items:center;text-align:center}
.eph-footer .eph-footer-widget{margin:0;padding:0;border:0;background:none;min-width:0;max-width:100%;float:none;width:auto}

/* Verse widget. */
.eph-footer .verse{max-width:490px;font-family:var(--sans);color:var(--white)}
.eph-footer .verse blockquote{font-size:18px;line-height:1.6;margin:0 0 8px;quotes:none}
.eph-footer .verse p{font-size:15px;line-height:1.55}

/* Pinterest widget (EPH_HP_Widget_Pinterest): no band, no full-bleed, no .wrap gutters here. */
.eph-footer .eph-hp.eph-hp-pinterest-widget{width:auto;max-width:none;margin:0;padding:0;border:0;background:transparent;color:var(--white);font-family:var(--sans);font-size:17px;line-height:1.55;text-align:center}
.eph-footer .eph-hp.eph-hp-pinterest-widget > .wrap{width:auto;max-width:none;margin:0;padding:0}
.eph-footer .eph-hp a.pinterest,.eph-footer .eph-hp a.pinterest:is(:hover,:focus,:visited){display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--white);text-decoration:none}
.eph-footer .eph-hp .pin-photos{display:flex;align-items:flex-end;justify-content:center}
.eph-footer .eph-hp.eph-hp .pin-photos img{display:block;width:76px;height:auto;max-width:none;aspect-ratio:2/3;object-fit:cover;margin:0;padding:0;border-radius:var(--radius);border:3px solid var(--white);box-shadow:0 3px 10px rgb(56 65 60 / .25)}
.eph-footer .eph-hp.eph-hp .pin-photos img:nth-child(1){transform:rotate(-6deg) translateX(10px)}
.eph-footer .eph-hp.eph-hp .pin-photos img:nth-child(2){position:relative;z-index:1;width:90px}
.eph-footer .eph-hp.eph-hp .pin-photos img:nth-child(3){transform:rotate(6deg) translateX(-10px)}
.eph-footer .eph-hp .pin-text{display:flex;flex-direction:column;align-items:center;gap:10px}
.eph-footer .eph-hp .pin-script{font-family:var(--script);font-weight:700;font-size:32px;line-height:1.1}
.eph-footer .eph-hp .pin-button{display:inline-flex;align-items:center;min-height:46px;padding:10px 22px;border:1.5px solid var(--white);border-radius:999px;font-family:var(--sans);font-weight:600;font-size:16px;line-height:1.3;color:var(--white);background:transparent}
.eph-footer .eph-hp .pinterest:hover .pin-button{background:var(--white);color:var(--sage)}

/* Bottom bar. */
.eph-footer .eph-footer-bottom{border-top:1px solid var(--sage-light);padding-top:20px;font-size:13px;line-height:1.55;text-align:center}
.eph-footer .eph-footer-bottom p{font-size:13px;line-height:1.55;color:var(--white)}
.eph-footer .eph-footer-bottom nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px;margin-top:8px}
.eph-footer .eph-footer-bottom a{display:inline-flex;min-height:32px;align-items:center;font-size:13px;color:var(--white)}
.eph-footer .eph-footer-bottom a:hover{text-decoration:underline}

/* ---------- Back to top ---------- */
a.eph-to-top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom) + var(--eph-to-top-lift,0px));z-index:998;width:46px;height:46px;border-radius:50%;background:var(--copper);color:var(--white);display:grid;place-items:center;padding:0;margin:0;box-shadow:0 2px 10px rgb(56 65 60 / .25);opacity:0;pointer-events:none;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
html body a.eph-to-top,html body a.eph-to-top:is(:hover,:focus,:visited,:active){background:var(--copper);color:var(--white);text-decoration:none;border:0}
a.eph-to-top svg{display:block;width:20px;height:20px}
a.eph-to-top.is-visible{opacity:1;pointer-events:auto;visibility:visible;transform:none}

/* ---------- Breakpoints ---------- */
@media(max-width:782px){
  body.admin-bar .eph-header{top:46px}
}
@media(max-width:600px){
  /* WordPress's admin bar scrolls away on small phones. */
  body.admin-bar .eph-header{top:0}
}
@media(max-width:350px){
  .eph-header .eph-wrap,.eph-footer .eph-wrap{width:calc(100% - 24px)}
  .eph-header .eph-brand{width:150px}.eph-header.is-compact .eph-brand{width:128px}
  .eph-header .eph-brand.eph-brand-alt,.eph-header.is-compact .eph-brand.eph-brand-alt{width:185px}
  .eph-header .eph-brand.eph-brand-alt.is-wide,.eph-header.is-compact .eph-brand.eph-brand-alt.is-wide{width:220px}
  .eph-header .eph-site-menu p.eph-flavor-label{font-size:12px}
}
@media(min-width:600px){
  .eph-header .eph-wrap,.eph-footer .eph-wrap{width:calc(100% - 56px)}
  .eph-search-dialog .eph-search-fields{flex-direction:row}
  .eph-search-dialog .eph-search-fields input[type=search]{flex:1}
  .eph-footer .eph-footer-main{grid-template-columns:1fr auto;align-items:center;justify-items:stretch;text-align:left;gap:48px}
  .eph-footer .eph-footer-widget:only-child{grid-column:1/-1;justify-self:center;text-align:center}
  .eph-footer .eph-hp.eph-hp-pinterest-widget{text-align:left}
  .eph-footer .eph-hp a.pinterest,.eph-footer .eph-hp a.pinterest:is(:hover,:focus,:visited){flex-direction:row;gap:28px}
  .eph-footer .eph-hp .pin-text{align-items:flex-start}
  .eph-footer .eph-footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;text-align:left}
  .eph-footer .eph-footer-bottom nav{margin-top:0;flex:none;justify-content:flex-end}
}
@media(min-width:900px){
  html{scroll-padding-top:110px}
  .eph-skip-link,.eph-header,.eph-promise,.eph-site-menu,.eph-search-dialog,.eph-footer{font-size:18px}
  /* Desktop: logo left, full menu right, search at the far right; no hamburger. If the menu
     doesn't fit, eph-chrome.js adds .eph-nav-collapsed and the phone layout + panel return. */
  .eph-header-inner{grid-template-columns:44px 1fr 44px;column-gap:28px;row-gap:0;min-height:104px}
  .eph-header .eph-brand{width:236px;justify-self:center}
  .eph-header .eph-brand.eph-brand-alt,.eph-header.is-compact .eph-brand.eph-brand-alt{width:240px}
  .eph-header .eph-brand.eph-brand-alt.is-wide,.eph-header.is-compact .eph-brand.eph-brand-alt.is-wide{width:262px}
  .eph-header .eph-brand-alt.has-phone-logo .eph-brand-mark-wide{display:block}
  .eph-header .eph-brand-alt.has-phone-logo .eph-brand-mark-phone{display:none}
  .eph-header .eph-brand-subline{font-size:11px;margin-top:3px}
  .eph-header.is-compact .eph-header-inner{min-height:78px}
  .eph-header.is-compact .eph-brand{width:180px}
  .eph-header.has-desktop-nav:not(.eph-nav-collapsed) .eph-header-inner{grid-template-columns:auto minmax(0,1fr) 44px;column-gap:var(--eph-nav-edge,20px)}
  .eph-header.has-desktop-nav:not(.eph-nav-collapsed) .eph-menu-button{display:none}
  .eph-header.has-desktop-nav:not(.eph-nav-collapsed) .eph-brand{grid-column:1;grid-row:1;justify-self:start}
  .eph-header.has-desktop-nav:not(.eph-nav-collapsed) .eph-header-nav{display:flex;grid-column:2;grid-row:1;justify-content:flex-end;min-width:0}
  .eph-header.has-desktop-nav:not(.eph-nav-collapsed) .eph-search-button{grid-column:3;grid-row:1;margin-right:-10px}
  .eph-header.has-desktop-nav:not(.eph-nav-collapsed) .eph-site-menu{display:none}
  .eph-header .eph-nav-list{display:flex;flex-wrap:nowrap;align-items:center;gap:0 var(--eph-nav-gap,14px);width:max-content}
  .eph-header .eph-nav-item{position:relative;display:flex;align-items:center}
  .eph-header .eph-nav-list > .eph-nav-item > a{display:inline-flex;align-items:center;min-height:44px;padding:4px 2px;font-family:var(--sans);font-size:var(--eph-nav-size,15px);font-weight:600;line-height:1.3;color:var(--white);white-space:nowrap}
  .eph-header .eph-nav-list > .eph-nav-item > a:hover,
  .eph-header .eph-nav-list > .eph-nav-item > a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;color:var(--white)}
  .eph-header .eph-nav-list > .eph-nav-item > a:focus-visible{outline-offset:2px}
  .eph-header .eph-nav-toggle,.eph-header .eph-nav-toggle:is(:hover,:focus){display:grid;place-items:center;width:24px;height:44px;min-height:0;margin:0 -4px 0 0;padding:0;background:transparent;border:0;border-radius:var(--radius);color:inherit}
  .eph-header .eph-nav-toggle .eph-chevron{width:14px;height:14px;transition:transform .2s ease}
  .eph-header .eph-nav-toggle[aria-expanded="true"] .eph-chevron{transform:rotate(180deg)}
  .eph-header .eph-nav-toggle:focus-visible{outline-offset:0}
  /* Dropdown panels. Shown on hover, keyboard focus inside (.has-focus), or .is-open (click/tap);
     .is-dismissed (Escape, or a click to close) wins until the pointer/focus leaves. The focus
     class is set by eph-chrome.js because a CSS-only :focus-within/:has() panel hides for an
     instant while focus moves inside it, and the browser then refuses to focus the next link. */
  .eph-header .eph-nav-sub{display:none;position:absolute;z-index:5;top:100%;left:-12px;margin-top:6px;width:max-content;min-width:240px;max-width:340px;padding:8px 0;background:var(--linen);color:var(--ink);border-radius:var(--radius);box-shadow:0 12px 32px rgb(56 65 60 / .2),0 2px 6px rgb(56 65 60 / .12);text-align:left}
  .eph-header .eph-nav-sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
  .eph-header .eph-nav-item:is(:hover,.has-focus,.is-open):not(.is-dismissed) > .eph-nav-sub{display:block}
  .eph-header .eph-nav-list > .eph-nav-item.eph-align-right > .eph-nav-sub,
  .eph-header .eph-nav-list > .eph-nav-item:last-child > .eph-nav-sub{left:auto;right:-8px}
  .eph-header .eph-nav-sub .eph-nav-item{display:flex;align-items:stretch}
  .eph-header .eph-nav-sub a{flex:1 1 auto;display:flex;align-items:center;min-height:42px;padding:9px 20px;font-family:var(--sans);font-size:15px;font-weight:400;line-height:1.3;color:var(--ink)}
  .eph-header .eph-nav-sub a:hover,.eph-header .eph-nav-sub a[aria-current="page"]{color:var(--copper)}
  .eph-header .eph-nav-sub .eph-nav-toggle,.eph-header .eph-nav-sub .eph-nav-toggle:is(:hover,:focus){width:40px;height:auto;margin:0;color:var(--ink)}
  .eph-header .eph-nav-sub .eph-nav-toggle:hover{color:var(--copper)}
  .eph-header .eph-nav-sub .eph-nav-toggle .eph-chevron,
  .eph-header .eph-nav-sub .eph-nav-toggle[aria-expanded="true"] .eph-chevron{transform:rotate(-90deg)}
  .eph-header .eph-nav-sub .eph-nav-item.has-children > a{padding-right:4px}
  .eph-header .eph-nav-sub .eph-nav-item:is(:hover,.is-open) > a{color:var(--copper)}
  /* Third level: a flyout beside its row (flipped to the left near the right edge). */
  .eph-header .eph-nav-sub .eph-nav-sub{top:-8px;left:100%;margin:0 0 0 2px}
  .eph-header .eph-nav-sub .eph-nav-sub::before{top:0;bottom:0;left:-6px;right:auto;width:6px;height:auto}
  .eph-header .eph-nav-sub .eph-nav-item.eph-flip > .eph-nav-sub{left:auto;right:100%;margin:0 2px 0 0}
  .eph-header .eph-nav-sub .eph-nav-item.eph-flip > .eph-nav-sub::before{left:auto;right:-6px}
  .eph-header .eph-nav-sub .eph-nav-item.eph-flip > .eph-nav-toggle .eph-chevron{transform:rotate(90deg)}
  .eph-header .eph-nav-sub :is(a,button):focus-visible{outline-color:var(--copper);outline-offset:-3px}
  /* Headings in an ordinary dropdown: a label row, flyout chevron kept when it has children. */
  .eph-header .eph-nav-sub .eph-nav-item.is-heading > .eph-menu-heading-label{flex:1 1 auto;min-height:38px;padding:12px 20px 4px;font-size:12.5px}
  .eph-header .eph-nav-list > .eph-nav-item.is-heading > .eph-menu-heading-label{min-height:44px;color:var(--white)}
  /* Mega dropdown (top-level item with class eph-mega): one column per heading, then footer links.
     Left edge follows the trigger; eph-chrome.js shifts it (inline left) to stay on screen. */
  .eph-header .eph-nav-sub.eph-mega-panel{width:min(640px,calc(100vw - 32px));min-width:0;max-width:none;padding:20px 28px 4px;column-gap:28px;row-gap:0;grid-template-columns:repeat(var(--eph-mega-cols,3),minmax(0,1fr));align-items:start}
  .eph-header .eph-nav-item.eph-mega:is(:hover,.has-focus,.is-open):not(.is-dismissed) > .eph-nav-sub.eph-mega-panel{display:grid}
  .eph-header .eph-mega-panel .eph-mega-col{display:block;min-width:0;padding-bottom:12px}
  .eph-header .eph-mega-panel .eph-mega-col > .eph-menu-heading-label{display:block;font-size:12.5px;padding:0 0 4px}
  .eph-header .eph-mega-panel .eph-mega-links{display:block;position:static;margin:0;padding:0;background:none;box-shadow:none}
  .eph-header .eph-mega-panel .eph-mega-links .eph-mega-links{padding-left:14px}
  .eph-header .eph-mega-panel .eph-mega-link{display:block}
  .eph-header .eph-mega-panel .eph-mega-link > a{display:flex;align-items:center;min-height:38px;padding:6px 0;font-size:15px;line-height:1.3}
  .eph-header .eph-mega-panel .eph-mega-link > .eph-menu-heading-label{display:block;padding:10px 0 2px;font-size:12px}
  .eph-header .eph-mega-panel .eph-mega-foot{grid-column:1/-1;order:1;display:block;margin-top:4px;border-top:1px solid var(--sage-light)}
  .eph-header .eph-mega-panel .eph-mega-foot + .eph-mega-foot{margin-top:0;border-top:0}
  .eph-header .eph-mega-panel .eph-mega-foot > a{display:inline-flex;align-items:center;min-height:52px;padding:8px 0;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;color:var(--ink)}
  .eph-header .eph-mega-panel .eph-mega-foot > a:hover{color:var(--ink)}
  .eph-header .eph-mega-panel .eph-mega-foot > a[aria-current="page"]{color:var(--copper)}
  .eph-header .eph-mega-panel .eph-mega-foot > .eph-mega-links{padding-bottom:8px}
  .eph-promise :is(h1,p){font-size:18px}
  html body .eph-promise a.eph-promise-link,html body .eph-promise a.eph-promise-link:is(:hover,:focus,:visited,:active){padding:12px 0}
  .eph-footer .eph-footer-bottom p,.eph-footer .eph-footer-bottom a{font-size:13px}
}
@media(min-width:1200px){
  .eph-header{--eph-nav-gap:22px;--eph-nav-size:16px;--eph-nav-edge:28px}
}
@media(prefers-reduced-motion:reduce){
  :is(.eph-header,.eph-to-top,.eph-search-dialog),:is(.eph-header,.eph-search-dialog,.eph-footer) *{animation:none!important;transition:none!important}
}
@media print{
  .eph-skip-link,.eph-header,.eph-promise,.eph-footer,.eph-to-top,.eph-search-dialog{display:none!important}
}

/* Overscroll past the footer (iPhone bounce) shows sage, not white. */
html:has(body.eph-chrome){background:#60695D}

/* Everything below our footer (ad networks add bottom space for their sticky ad) is sage, not white,
   so the footer looks continuous with or without ads. Page content keeps the theme's white background. */
html body.eph-chrome{background:#60695D}
html body.eph-chrome > .page-wrap{background:#FFFFFF}
/* An ad network's "Do Not Sell or Share" link that renders after the footer: same place and behavior,
   just legible on the sage (eph-chrome.js tags it; the cookie banner's own link is never tagged). */
html body .eph-ccpa-outside,html body .eph-ccpa-outside :is(a,span,div,p,button){color:#FAF9F7!important;background:transparent!important}
html body .eph-ccpa-outside a{text-decoration:underline;text-underline-offset:3px}

/* Pages that place a widget area with [eph_widget_area]: the full-width bands must not add a
   sideways scroll (backup for browsers without :has(); the bands themselves are unchanged). */
html body.eph-has-widget-area{overflow-x:clip}

/* No double-tap zoom delay on the header buttons. */
.eph-header .eph-icon-button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

/* Breathing room between the tagline strip and page content (pages with their own top band are left out). */
body.eph-chrome:not(.home):not(.eph-about-page):not(.eph-recipe-index-page) #main.site-main:not(.eph-archive){padding-top:22px}
@media(min-width:900px){body.eph-chrome:not(.home):not(.eph-about-page):not(.eph-recipe-index-page) #main.site-main:not(.eph-archive){padding-top:36px}}

/* ---------- Breadcrumbs everywhere else (Oct 13): Recipe Index, 404, author, tag and date pages ----------
   Same look as the category-page breadcrumbs (centered, sage, small "›"); posts (eph-single.css,
   left aligned) and category pages (eph-archive.css) keep their own rules. Yoast's "»" text is
   hidden with font-size:0; phones hide the last crumb (the page's own name). Visual only. */
.wpz_breadcrumbs{font-family:"Source Sans 3",Arial,sans-serif;font-size:0;line-height:1.5;text-transform:none;letter-spacing:normal;color:#60695D;text-align:center;margin:0 auto 18px}
.wpz_breadcrumbs > span > span{font-size:13px}
.wpz_breadcrumbs > span > span + span::before{content:"›";display:inline-block;margin:0 6px;font-size:15px;line-height:1;color:#AEB0A2}
.wpz_breadcrumbs a,.wpz_breadcrumbs a:visited{color:#60695D;text-decoration:underline;text-decoration-color:rgb(96 105 93 / .35);text-underline-offset:3px}
.wpz_breadcrumbs a:hover{color:#8F4F32;text-decoration-color:currentColor}
.wpz_breadcrumbs .breadcrumb_last{color:#38413C}
@media (max-width:639px){
  .wpz_breadcrumbs .breadcrumb_last{display:none}
  .wpz_breadcrumbs > span > span{font-size:12.5px}
  .wpz_breadcrumbs > span > span + span::before{margin:0 5px}
}

/* ---------- Page numbers (Oct 13): All Posts (if endless scroll fails), author, tag and date pages ----------
   Same copper style as the category pages' page numbers (eph-archive.css .archive-pagination). */
.site-main .navigation{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;font-family:"Source Sans 3",Arial,sans-serif}
.site-main .navigation .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;margin:0;border:1.5px solid #8F4F32;border-radius:999px;background:transparent;color:#8F4F32;font-size:15px;font-weight:700;line-height:1;text-decoration:none}
.site-main .navigation a.page-numbers:hover{background:#8F4F32;color:#FAF9F7}
.site-main .navigation .page-numbers.current{background:#8F4F32;color:#FAF9F7}
.site-main .navigation .page-numbers.dots{border-color:transparent;min-width:24px;padding:0 2px;color:#38413C}