/* ============================================================
   WordPress-only additions on top of main.css (the prototype's
   style.css, kept verbatim so it can be diffed against template/).
   Nothing here restyles a prototype component; it only covers
   markup WordPress introduces.
   ============================================================ */

/* Core prints width/height attributes on every <img>; the prototype's images
   have none. Wherever the prototype's CSS sets only a width or an aspect-ratio
   (experience cards, craft media, ingredient figures…), the attribute height
   would win and each image would come out as tall as its own file. height:auto
   hands the height back to CSS; a rule that sets a height itself is more
   specific and still applies. */
img{ height:auto; }
/* The mirror case: the drawer logo has a CSS height, so the attribute width
   has to give way or the round logo is stretched flat. */
.mnav__top img{ width:auto; }

/* <picture> wrappers around hero images (mobile art direction) must fill
   their box the same way the bare <img> did. */
.hero__bg picture,
.phero__bg picture,
.chero__bg picture,
.pghero__bg picture{ display:block; width:100%; height:100%; }

/* Pager: the prototype builds <button>s in JS; the server renders links
   (so pages work without JS and are crawlable). Same look. */
.pager a,
.pager span.pager__btn{
  min-width:42px; height:42px; padding:0 14px; border-radius:var(--r-pill);
  background:var(--white); box-shadow:inset 0 0 0 1px var(--line);
  font-size:.86rem; font-weight:600; color:var(--cacao);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:background .25s, color .25s, box-shadow .25s;
}
.pager a:hover{ box-shadow:inset 0 0 0 1px var(--cacao); }
.pager a.is-on{ background:var(--cacao); color:var(--cream); box-shadow:none; }
.pager span.pager__btn{ opacity:.38; cursor:default; }

/* AJAX loading state on listing grids. */
.is-loading{ opacity:.45; pointer-events:none; transition:opacity .2s; }

/* Admin bar: keep the sticky header below it. */
body.admin-bar .header{ top:32px; }
@media (max-width:782px){ body.admin-bar .header{ top:46px; } }
@media (max-width:600px){ body.admin-bar .header{ top:0; } }

/* Editor content inside .prose (Gutenberg / classic). */
.prose img{ max-width:100%; height:auto; border-radius:var(--r-card); }
.prose figure{ margin:1.6em 0; }
.prose figcaption,
.prose .wp-caption-text{ font-size:.86rem; color:var(--muted); margin-top:8px; text-align:center; }
.prose .alignleft{ float:left; margin:0 1.4em 1em 0; }
.prose .alignright{ float:right; margin:0 0 1em 1.4em; }
.prose .aligncenter{ display:block; margin-inline:auto; }

/* Generic page (policy, terms…) without a hero image. */
.pagehead{ padding-top:clamp(28px,4vw,56px); text-align:center; }
.pagehead .crumbs{ justify-content:center; }

/* Screen-reader-only text used by core markup. */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* Form field error highlight after a server-side validation error. */
.nlform [aria-invalid="true"],
.qform [aria-invalid="true"],
#popupForm [aria-invalid="true"]{ box-shadow:inset 0 0 0 1px #b3261e; }

/* Body column of text pages. */
.page-prose{ max-width:820px; margin-inline:auto; }

/* The pager container is always printed (AJAX fills it); empty = no gap. */
.pager:empty{ display:none; }

/* Filter chips are links here (crawlable, work without JS) but <button>s in
   the prototype; buttons compute line-height:normal, links inherit the body's. */
.filterbar a.chip{ line-height:normal; }

/* Tick boxes a Smart Form may add (consent, multiple choice): the prototype
   has none, so they follow its form note typography. */
.formcheck{ display:flex; align-items:flex-start; gap:8px; font-size:.86rem; color:var(--cacao-soft); line-height:1.5; cursor:pointer; }
.formcheck input{ width:auto; margin-top:3px; accent-color:var(--cacao); }
.formcheck-group{ display:flex; flex-wrap:wrap; gap:6px 18px; }

/* Search drawer: the header logo hangs half its size below the header, over
   the start of the drawer. Desktop: the form starts after the logo.
   <=1024px (logo centred): the form sits below the logo. */
.searchbar form{ padding-left:calc(var(--logoS) + 24px); }
@media (max-width:1024px){
	.searchbar.is-open{ max-height:160px; }
	.searchbar form{ padding-left:0; padding-top:calc(var(--logoS) / 2 + 12px); }
}