/*
Theme Name: My Mushrooms
Theme URI: https://mymushrooms.uk
Description: Dark-gallery child theme for My Mushrooms Ltd, Kelham Island, Sheffield. Palette and typography derived from the farm's own photography.
Author: My Mushrooms Ltd
Template: extendable
Version: 1.0.4
Requires at least: 6.6
Tested up to: 7.1
License: GNU General Public License v2 or later
Text Domain: mymushrooms
*/

/* ── shell ─────────────────────────────────────────────────────── */
.mm-masthead{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--wp--preset--color--ground) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid color-mix(in srgb, var(--wp--preset--color--line) 60%, transparent);
}
.mm-masthead__in{ padding-block:.85rem; gap:1.5rem; }
.mm-brand{ gap:.7rem; align-items:baseline; }
.mm-brand__name a{
  font-family:var(--wp--preset--font-family--display);
  font-size:1.03rem; font-weight:600; text-decoration:none;
  font-variation-settings:"SOFT" 34,"WONK" 1;
}
.mm-brand__place{
  font-size:.6rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--wp--preset--color--muted); margin:0;
}
.mm-nav a{
  font-size:var(--wp--preset--font-size--sm);
  color:var(--wp--preset--color--ink-dim); text-decoration:none;
  border-bottom:1px solid transparent; padding-block:.2rem;
  transition:color .2s, border-color .2s;
}
.mm-nav a:hover{ color:var(--wp--preset--color--ink); border-bottom-color:var(--wp--preset--color--amber); }
@media (max-width:640px){ .mm-brand__place, .mm-header-cta{ display:none; } }

.mm-btn .wp-block-button__link,
.wp-block-button.mm-btn .wp-element-button{
  background:var(--wp--preset--color--amber);
  color:var(--wp--preset--color--ground);
  border:1px solid var(--wp--preset--color--amber);
  border-radius:0;
  font-family:var(--wp--preset--font-family--body);
  font-size:var(--wp--preset--font-size--sm);
  font-weight:600; letter-spacing:.03em;
  padding:.82rem 1.4rem;
  transition:background .2s, border-color .2s, transform .2s;
}
.mm-btn .wp-block-button__link:hover{
  background:var(--wp--preset--color--amber-lit);
  border-color:var(--wp--preset--color--amber-lit);
  transform:translateY(-1px);
}
.mm-btn--ghost .wp-block-button__link,
.wp-block-button.mm-btn--ghost .wp-element-button{
  background:transparent;
  color:var(--wp--preset--color--ink);
  border-color:var(--wp--preset--color--line);
}
.mm-btn--ghost .wp-block-button__link:hover,
.wp-block-button.mm-btn--ghost .wp-element-button:hover{
  background:transparent;
  border-color:var(--wp--preset--color--ink-dim);
}

/* The drawn mark: ink extracted to alpha, painted through a mask so it can
   take any brand colour. Large use only — it is an illustration, not an icon. */
.mm-mark{
  display:block;
  width:var(--mm-mark-size,132px);
  aspect-ratio:1;
  background:var(--wp--preset--color--ink);
  -webkit-mask:var(--mm-logo) center/contain no-repeat;
          mask:var(--mm-logo) center/contain no-repeat;
}
.mm-mark--lg{ --mm-mark-size:132px; }
.mm-mark--chestnut{ background:var(--wp--preset--color--amber-lit); }
@supports not ((-webkit-mask-image:url("")) or (mask-image:url(""))){ .mm-mark{ display:none; } }

.mm-social .wp-social-link{
  background:transparent;
  border:1px solid var(--wp--preset--color--line);
  border-radius:0;
  width:44px; height:44px;
  color:var(--wp--preset--color--ink-dim);
  transition:border-color .2s, color .2s;
}
.mm-social .wp-social-link:hover{
  border-color:var(--wp--preset--color--amber);
  color:var(--wp--preset--color--amber-lit);
}

.mm-foot{
  border-top:1px solid var(--wp--preset--color--line);
  font-size:var(--wp--preset--font-size--sm);
  color:var(--wp--preset--color--muted);
  padding-block:var(--wp--preset--spacing--lg);
}
.mm-foot h4{
  font-family:var(--wp--preset--font-family--body);
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--wp--preset--color--ink-dim); font-weight:600;
}
.mm-foot a{ text-decoration:none; }
.mm-foot a:hover{ color:var(--wp--preset--color--amber-lit); }
.mm-foot__bar{
  border-top:1px solid var(--wp--preset--color--line);
  padding-top:1.3rem; margin-top:2rem;
  font-size:var(--wp--preset--font-size--xs); letter-spacing:.04em;
}

/* ── shared devices ────────────────────────────────────────────── */
.mm-band{ padding-block:var(--wp--preset--spacing--xl); }
.mm-sec-head{ display:grid; gap:1.5rem; margin-bottom:var(--wp--preset--spacing--lg); }
.mm-lede{
  font-size:var(--wp--preset--font-size--md);
  color:var(--wp--preset--color--ink-dim);
  max-width:var(--wp--custom--measure);
}
.mm-eyebrow{
  font-size:var(--wp--preset--font-size--xs);
  font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--wp--preset--color--amber);
}
/* The specimen label. A chestnut dot, letterspaced caps, and a rule that
   fades out to the right. It opens every section and does the job an icon
   would do badly. */
.mm-label{
  display:flex; align-items:center; gap:.85rem;
  font-size:var(--wp--preset--font-size--xs);
  font-weight:600; letter-spacing:.19em; text-transform:uppercase;
  color:var(--wp--preset--color--muted); margin:0;
}
.mm-label::before{
  content:""; width:5px; height:5px; flex:none; border-radius:50%;
  background:var(--wp--preset--color--amber);
}
.mm-label::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--wp--preset--color--line),transparent);
}

/* ── hero ──────────────────────────────────────────────────────── */
.mm-hero{
  position:relative; overflow:hidden;
  /* Full-bleed: the photograph's ground must run to the viewport edge. */
  width:100vw; max-width:100vw; margin-inline:calc(50% - 50vw);
  min-height:min(88vh,860px);
  display:flex; align-items:center;
  padding-block:var(--wp--preset--spacing--xl);
  background-color:var(--wp--preset--color--ground);
  background-image:var(--mm-hero);
  background-size:contain;
  background-position:right -2% bottom -6%;
  background-repeat:no-repeat;
}
/* The photograph is shot on black, so its edges are faded into the page
   ground rather than framed. There is deliberately no card and no border. */
.mm-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 62% 70% at 76% 62%, transparent 30%, var(--wp--preset--color--ground) 82%),
    linear-gradient(90deg, var(--wp--preset--color--ground) 22%, transparent 58%);
}
/* The headline sits beside the photograph, so it gets roughly half the width.
   Sized in rem, not ch: `ch` resolves against this container's 16px body font,
   not the headline's, which silently produced a 312px column. */
.mm-hero__copy{ position:relative; z-index:2; max-width:min(38rem,100%); display:grid; gap:1.4rem; }
.mm-hero h1{ font-size:clamp(2.4rem,4.4vw,4rem); }
.mm-hero__copy h1 em{ font-style:normal; color:var(--wp--preset--color--amber-lit); }
@media (max-width:860px){
  .mm-hero{ min-height:0; background-size:cover; }
  .mm-hero__copy{ max-width:none; }
  .mm-hero::after{ background:linear-gradient(180deg,
    color-mix(in srgb,var(--wp--preset--color--ground) 78%,transparent),
    var(--wp--preset--color--ground)); }
}

/* ── specimen cards ────────────────────────────────────────────── */
.mm-specimens{
  gap:1px; background:var(--wp--preset--color--line);
  border:1px solid var(--wp--preset--color--line);
  margin-block:0;
}
.mm-spec{
  background:var(--wp--preset--color--ground);
  padding:var(--wp--preset--spacing--md);
  display:flex; flex-direction:column; gap:.9rem;
  transition:background .3s;
}
.mm-spec:hover{ background:var(--wp--preset--color--ground-2); }
.mm-spec p{ font-size:var(--wp--preset--font-size--sm); color:var(--wp--preset--color--ink-dim); }
.mm-spec .mm-binomial{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--sm);
  color:var(--wp--preset--color--muted);
  margin-top:-.5rem;
}
.mm-spec .mm-price{
  margin-top:auto; padding-top:1rem;
  border-top:1px solid var(--wp--preset--color--line);
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--md);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--wp--preset--color--amber-lit);
}
.mm-price span{
  font-family:var(--wp--preset--font-family--body);
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--wp--preset--color--muted); font-weight:600;
}

/* ── bleed quote ───────────────────────────────────────────────── */
.wp-block-cover.mm-bleed{ align-items:flex-end; }
.mm-pull{
  font-family:var(--wp--preset--font-family--display);
  font-size:var(--wp--preset--font-size--xl);
  font-weight:400; line-height:1.16; letter-spacing:-.015em;
  max-width:22ch; text-wrap:balance;
}
.mm-pull-attr{
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--wp--preset--color--muted); font-weight:600; margin-top:1.4rem;
}

/* ── raised band ───────────────────────────────────────────────── */
.mm-band--raised{
  background:var(--wp--preset--color--ground-2);
  border-block:1px solid var(--wp--preset--color--line);
}

/* ── process ───────────────────────────────────────────────────── */
.mm-steps{ gap:var(--wp--preset--spacing--lg); }
.mm-step{ display:grid; gap:.85rem; align-content:start; }
.mm-step p{ font-size:var(--wp--preset--font-size--sm); color:var(--wp--preset--color--ink-dim); }
/* .mm-step__mark is itself a <p>, so it must outrank the generic ".mm-step p"
   rule above (0,1,1) — scoping it to its parent raises it to (0,2,0). See the
   identical .mm-spec .mm-price / .mm-binomial fix in the specimens block. */
.mm-step .mm-step__mark{
  font-size:var(--wp--preset--font-size--xs);
  font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--wp--preset--color--amber);
  padding-bottom:.85rem;
  border-bottom:1px solid var(--wp--preset--color--line);
  margin:0;
}

/* ── growers ───────────────────────────────────────────────────── */
.mm-growers__media img{
  width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 42%;
  /* The one daylight frame on the page: graded down and warmed so it belongs
     to the dark palette rather than punching a hole in it. */
  filter:saturate(.88) contrast(1.06) brightness(.9) sepia(.12);
  -webkit-mask-image:radial-gradient(ellipse 88% 84% at 50% 48%, #000 58%, transparent 92%);
          mask-image:radial-gradient(ellipse 88% 84% at 50% 48%, #000 58%, transparent 92%);
}

/* ── people ────────────────────────────────────────────────────── */
.mm-people{
  gap:1px; background:var(--wp--preset--color--line);
  border:1px solid var(--wp--preset--color--line);
  margin-top:var(--wp--preset--spacing--lg);
}
.mm-person{
  background:var(--wp--preset--color--ground);
  padding:var(--wp--preset--spacing--md);
  display:grid; gap:.85rem; align-content:start;
}
.mm-person img{ width:100%; aspect-ratio:1; object-fit:cover; margin-bottom:.4rem; }
.mm-person p{ font-size:var(--wp--preset--font-size--sm); color:var(--wp--preset--color--ink-dim); }
/* .mm-person__role is itself a <p>, so the generic ".mm-person p" rule above
   (0,1,1) would otherwise beat it (0,1,0) — same shape as the .mm-step fix. */
.mm-person .mm-person__role{
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--wp--preset--color--amber); font-weight:600; margin:0;
}
.mm-person__name{ margin:0; }
.mm-person__link a{
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.08em; color:var(--wp--preset--color--muted);
  text-decoration:none;
  border-bottom:1px solid var(--wp--preset--color--line);
}
.mm-person__link a:hover{
  color:var(--wp--preset--color--amber-lit);
  border-bottom-color:var(--wp--preset--color--amber);
}

/* ── the build ─────────────────────────────────────────────────── */
.mm-build-bleed img{
  width:100%;
  max-height:min(62vh,540px);
  object-fit:cover; object-position:50% 50%;
  filter:saturate(.8) contrast(1.05) brightness(.86);
}
.mm-build-bleed figcaption{
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--muted); font-weight:600;
  margin-top:1rem; text-align:left;
}

/* The hand-drawn plan: ink extracted to alpha and painted through a mask,
   the same treatment as the mark. The grower's hand, twice. */
.mm-plan{
  align-items:center;
  padding:var(--wp--preset--spacing--md);
  border:1px solid var(--wp--preset--color--line);
  background:var(--wp--preset--color--ground-2);
  margin-block:var(--wp--preset--spacing--lg);
}
.mm-plan__ink{
  display:block; width:100%; aspect-ratio:1100/780;
  background:var(--wp--preset--color--ink);
  opacity:.92;
  -webkit-mask:var(--mm-plan) center/contain no-repeat;
          mask:var(--mm-plan) center/contain no-repeat;
}
.mm-plan__dims{
  margin-top:1.4rem; padding-top:1.1rem;
  border-top:1px solid var(--wp--preset--color--line);
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--wp--preset--color--muted); font-weight:600;
  font-variant-numeric:tabular-nums; line-height:2;
}
.mm-plan__dims strong{ color:var(--wp--preset--color--amber); }
@media (max-width:600px){
  /* A drawing this detailed needs every pixel of width. The measurements are
     repeated as text, so nothing depends on reading the handwriting. */
  .mm-plan{ padding-left:0; padding-right:0; border-left:0; border-right:0; }
}

.mm-stages{ gap:1px; background:var(--wp--preset--color--line); border:1px solid var(--wp--preset--color--line); }
.mm-stage{ background:var(--wp--preset--color--ground); padding:0; display:grid; align-content:start; }
.mm-stage > *:not(.mm-stage__media){ padding-inline:var(--wp--preset--spacing--md); }
.mm-stage__media{ padding:0; margin:0; border-bottom:1px solid var(--wp--preset--color--line); }
.mm-stage__media img{
  /* Square, because the source frames mix portrait, landscape and one very
     wide drawing. A square box crops all three evenly. */
  width:100%; aspect-ratio:1; object-fit:cover;
  filter:saturate(.82) contrast(1.04) brightness(.9);
  transition:transform .8s cubic-bezier(.2,.7,.3,1), filter .5s;
}
.mm-stage:hover .mm-stage__media img{ transform:scale(1.04); filter:saturate(.95) contrast(1.04) brightness(1); }
.mm-stage p{ font-size:var(--wp--preset--font-size--sm); color:var(--wp--preset--color--ink-dim); }
/* .mm-stage__when is itself a <p>, so the generic ".mm-stage p" rule above
   (0,1,1) would otherwise beat it (0,1,0) — same shape as the .mm-step and
   .mm-person fixes elsewhere in this file. */
.mm-stage .mm-stage__when{
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--wp--preset--color--amber); font-weight:700;
  font-variant-numeric:tabular-nums;
  margin-top:var(--wp--preset--spacing--md);
}
.mm-stage > :last-child{ padding-bottom:var(--wp--preset--spacing--md); }

/* ── journal ───────────────────────────────────────────────────── */
.mm-journal .mm-post{
  padding-top:1.15rem;
  border-top:1px solid var(--wp--preset--color--line);
  transition:border-color .25s;
}
.mm-journal .mm-post:hover{ border-top-color:var(--wp--preset--color--amber); }
.mm-post__cat a{
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--wp--preset--color--amber); font-weight:600; text-decoration:none;
}
.mm-post .wp-block-post-title a{ text-decoration:none; transition:color .25s; }
.mm-post:hover .wp-block-post-title a{ color:var(--wp--preset--color--amber-lit); }
.mm-post .wp-block-post-excerpt{
  font-size:var(--wp--preset--font-size--sm);
  color:var(--wp--preset--color--muted);
}

/* ── elsewhere ─────────────────────────────────────────────────── */
.mm-elsewhere{
  border-top:1px solid var(--wp--preset--color--line);
  padding-block:var(--wp--preset--spacing--lg);
}
.mm-ventures{
  gap:1px; background:var(--wp--preset--color--line);
  border:1px solid var(--wp--preset--color--line);
  margin-top:var(--wp--preset--spacing--md);
}
.mm-venture{
  background:var(--wp--preset--color--ground);
  padding:var(--wp--preset--spacing--md);
  display:grid; gap:.6rem; align-content:start;
  transition:background .25s;
}
.mm-venture:hover{ background:var(--wp--preset--color--ground-2); }
.mm-venture p{ font-size:var(--wp--preset--font-size--sm); color:var(--wp--preset--color--ink-dim); }
/* .mm-venture__who is itself a <p>, so the generic ".mm-venture p" rule above
   (0,1,1) would otherwise beat it (0,1,0) — same shape as the .mm-stage fix
   above. */
.mm-venture .mm-venture__who{
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--wp--preset--color--amber); font-weight:600; margin:0;
}
.mm-venture h3 a{ text-decoration:none; }
.mm-venture h3 a:hover{ color:var(--wp--preset--color--amber-lit); }
.mm-elsewhere__li{
  font-size:var(--wp--preset--font-size--sm);
  color:var(--wp--preset--color--muted); margin-top:1.4rem;
}

/* ── reveal ────────────────────────────────────────────────────────
   Additive by design. There is deliberately no bare `.rv` rule: the
   hidden state exists only when JavaScript has armed `.js-reveal`. */
.js-reveal .rv{ opacity:0; transform:translateY(14px); }
.js-reveal .rv.in{
  opacity:1; transform:none;
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce){
  .js-reveal .rv{ opacity:1; transform:none; }
  .js-reveal .rv.in{ transition:none; }
  .mm-stage__media img, .mm-btn .wp-block-button__link{ transition:none; }
}

/* ── paper: the long-form reading surface ──────────────────────────
   Posts invert the ground so text is comfortable at length, keeping the
   same accent so the journal never leaves the brand. A separate page
   template could adopt this surface later if legal pages want it; the
   general page template stays on the dark ground for design pages. */
.mm-paper{
  background:var(--wp--preset--color--paper);
  color:var(--wp--preset--color--paper-ink);
  padding-block:var(--wp--preset--spacing--lg);
}
.mm-paper a{ color:var(--wp--preset--color--amber-deep); }
.mm-paper .mm-post__cat a{ color:var(--wp--preset--color--amber-deep); }
.mm-paper .wp-block-post-content{ max-width:var(--wp--custom--measure); }
.mm-paper .wp-block-post-content p{ margin-block:1.1em; }
.mm-paper blockquote{
  background:var(--wp--preset--color--paper-sunk);
  border-left:3px solid var(--wp--preset--color--amber-deep);
  padding:1.25rem 1.5rem; margin-inline:0;
}
.mm-post__date{
  font-size:var(--wp--preset--font-size--xs);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--wp--preset--color--amber-deep); font-weight:600;
}

/* ── live fixes, 1.0.2 ─────────────────────────────────────────────
   The masthead was capped at content width (992px), which wrapped the
   site title onto two lines and pushed the last nav item to a second row. */
.mm-masthead .mm-masthead__in{
  max-width:var(--wp--style--global--wide-size);
  margin-inline:auto;
}
.mm-brand__name, .mm-brand__name a{ white-space:nowrap; }
.mm-nav{ flex-wrap:nowrap; }
.mm-nav a{ white-space:nowrap; }

/* Journal headings are links, so the global link colour made every post
   title amber. They should read as headings, with amber reserved for hover. */
.mm-post .wp-block-post-title a{
  color:var(--wp--preset--color--ink);
  text-decoration:none;
}
.mm-post:hover .wp-block-post-title a{ color:var(--wp--preset--color--amber-lit); }
/* ── 1.0.3 ─────────────────────────────────────────────────────────
   The full-bleed hero uses 100vw, which INCLUDES the scrollbar, so the
   page gained ~15px of horizontal scroll. `clip` contains it without
   creating a scroll container, so the sticky masthead keeps working
   (`overflow-x:hidden` here would break it). */
body{ overflow-x:clip; }
/* ── 1.0.4: plugin buttons ─────────────────────────────────────────
   theme.json's styles.elements.button only reaches WordPress's own button
   classes. Plugins render their own submits, which inherited no background
   and rendered transparent on the dark ground. Brand them explicitly. */
.wpcf7 input[type="submit"],
.wpcf7-submit,
.charitable-donation-form button[type="submit"],
.charitable button.donate-button,
.wp-block-query-pagination a{
  background:var(--wp--preset--color--amber);
  color:var(--wp--preset--color--ground);
  border:1px solid var(--wp--preset--color--amber);
  border-radius:0;
  font-family:var(--wp--preset--font-family--body);
  font-size:var(--wp--preset--font-size--sm);
  font-weight:600;
  letter-spacing:.03em;
  padding:.82rem 1.4rem;
  text-decoration:none;
  cursor:pointer;
  transition:background .2s, border-color .2s;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7-submit:hover,
.charitable-donation-form button[type="submit"]:hover,
.charitable button.donate-button:hover,
.wp-block-query-pagination a:hover{
  background:var(--wp--preset--color--amber-lit);
  border-color:var(--wp--preset--color--amber-lit);
}
/* Plugin text inputs sit on the dark ground too. */
.wpcf7 input[type="text"], .wpcf7 input[type="email"],
.wpcf7 input[type="tel"], .wpcf7 textarea{
  background:var(--wp--preset--color--ground-2);
  color:var(--wp--preset--color--ink);
  border:1px solid var(--wp--preset--color--line);
  border-radius:0;
  padding:.7rem .9rem;
  width:100%;
}
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder{
  color:var(--wp--preset--color--muted);
}