/*
 * Dish-page comic styling.
 *
 * Loaded only on posts that carry wfa_dish, so the rest of the site keeps the
 * theme's look. Everything here hangs off the markup wp-sync already publishes
 * (wp-block-heading, wp-block-list, wfa-q) rather than new classes, so no post
 * needed re-syncing to pick this up.
 *
 * The exceptions are the template blocks the plugin renders itself — .wfa-meta,
 * .wfa-byline, .wfa-actions, .wfa-nutrition and .wfa-reviews — which are built
 * in PHP from real post data.
 *
 * Ratings and reviews are real WordPress comments carrying a wfa_rating meta,
 * counted from what readers actually posted; a dish with none says so and emits
 * no aggregateRating. The nutrition panel is deliberately empty for the same
 * reason: the atlas holds no food-composition data, and a guess is worse than
 * an admission. Nothing here is ever seeded.
 *
 * The theme kills border-radius and box-shadow on every form control with
 * !important, so the review form's borders have to answer in kind.
 */

.wfa-dish {
  --wfa-ink: #111;
  --wfa-accent: #1F6F5C;
  --wfa-hi: #F2B134;
  --wfa-cream: #F3F6EF;
}

/* Bangers has no lowercase of its own and no italic, so it is used only for
   display type; body copy stays in the theme font for readability at length. */
.wfa-dish h1,
.wfa-dish .entry-content h2,
.wfa-dish .entry-content h3,
.wfa-dish .wfa-nutrition h2,
.wfa-dish .wfa-reviews h2,
.wfa-dish .wfa-related h2,
.wfa-dish .wfa-meta b {
  font-family: Bangers, Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 400;
  letter-spacing: .06em;
}

.wfa-dish h1 {
  font-size: clamp(34px, 7vw, 54px);
  line-height: .95;
  color: var(--wfa-ink);
  text-shadow: 4px 4px 0 var(--wfa-hi);
}

/* Section headings are the loudest element on the page: black slab, knocked
   out white, tilted, with a hard offset shadow instead of a soft one.
   display:table, not inline-block: it shrink-wraps the text the same way but
   stays block-level, so a following h3 cannot ride up onto the same line. */
.wfa-dish .entry-content h2,
.wfa-dish .wfa-nutrition h2,
.wfa-dish .wfa-reviews h2,
.wfa-dish .wfa-related h2 {
  display: table;
  font-size: clamp(26px, 6vw, 38px);
  background: var(--wfa-ink);
  color: #fff;
  padding: 4px 16px;
  /* The theme lays the column out with WordPress's constrained-layout rules,
     which put margin-left:auto on every child. A display:table box obeys that
     and drifts to the middle, so the left pin has to be forced. */
  margin: 40px auto 22px 0 !important;
  text-align: left !important;
  transform: rotate(-1.5deg);
  box-shadow: 5px 5px 0 var(--wfa-accent);
}

/* Ingredient groups ("The sofrito") read as tabs pinned to the list below. */
.wfa-dish .entry-content h3 {
  display: table;
  font-size: clamp(20px, 4.5vw, 26px);
  background: var(--wfa-hi);
  border: 3px solid var(--wfa-ink);
  padding: 1px 14px;
  margin: 26px auto 10px 0 !important;
  text-align: left !important;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 var(--wfa-ink);
}

/* ------------------------------------------------------------- ingredients */
.wfa-dish .entry-content ul.wp-block-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.wfa-dish .entry-content ul.wp-block-list li {
  position: relative;
  padding: 9px 0 9px 30px;
  line-height: 1.45;
}
.wfa-dish .entry-content ul.wp-block-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wfa-accent);
  border: 2px solid var(--wfa-ink);
}
/* The quantity is already wrapped by wp-sync; give it weight so a cook can
   scan amounts down the left edge without reading the whole line. */
.wfa-dish .entry-content .wfa-q {
  display: inline-block;
  min-width: 6.5em;
  margin-right: .5em;
  font-weight: 800;
  color: var(--wfa-ink);
}

/* -------------------------------------------------------------- directions */
/* Each direction is a comic panel with a tilted "Step N" tab, as in the design
   this came from. The numbering is drawn by a CSS counter rather than the list
   marker so the tab can sit outside the panel's border. */
.wfa-dish .entry-content ol.wp-block-list {
  list-style: none;
  counter-reset: wfa-step;
  padding: 0;
  margin: 34px 0 0;
}
.wfa-dish .entry-content ol.wp-block-list > li {
  counter-increment: wfa-step;
  /* The theme lays each list item out as a grid, "44px 1fr", to hold its own
     step number in the first column. The tab below is absolutely positioned,
     so that column would sit empty and squeeze the text to one word per line.
     Back to block removes the theme's columns. */
  display: block;
  position: relative;
  background: #fff;
  border: 3px solid var(--wfa-ink);
  box-shadow: 6px 6px 0 var(--wfa-ink);
  padding: 28px 20px 20px;
  margin: 0 6px 32px 0;
  line-height: 1.6;
  max-width: 62ch;
}
.wfa-dish .entry-content ol.wp-block-list > li::before {
  content: "Step " counter(wfa-step);
  position: absolute;
  top: -17px;
  left: -8px;
  font-family: Bangers, Impact, Haettenschweiler, sans-serif;
  font-size: 22px;
  letter-spacing: .06em;
  background: var(--wfa-hi);
  border: 3px solid var(--wfa-ink);
  box-shadow: 3px 3px 0 var(--wfa-ink);
  padding: 0 12px;
  transform: rotate(-3deg);
}

/* ------------------------------------------------------- prep / cook strip */
.wfa-dish .wfa-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
  margin: 28px 0 8px;
  padding: 18px;
  background: var(--wfa-cream);
  border: 3px solid var(--wfa-ink);
  box-shadow: 6px 6px 0 var(--wfa-ink);
}
.wfa-dish .wfa-meta div { font-size: 15px; opacity: .75; }
.wfa-dish .wfa-meta b { display: block; font-size: 24px; opacity: 1; }

/* --------------------------------------------------------------- the plate */
.wfa-dish .wp-post-image,
.wfa-dish .wp-block-post-featured-image img {
  border: 4px solid var(--wfa-ink);
  box-shadow: 8px 8px 0 var(--wfa-ink);
}

/* Keep the offset shadows from pushing a scrollbar onto narrow phones. */
@media (max-width: 480px) {
  .wfa-dish .entry-content ol.wp-block-list > li { box-shadow: 4px 4px 0 var(--wfa-ink); }
  .wfa-dish .wfa-meta { box-shadow: 4px 4px 0 var(--wfa-ink); }
  .wfa-dish .wp-post-image,
  .wfa-dish .wp-block-post-featured-image img { box-shadow: 5px 5px 0 var(--wfa-ink); }
}

/* The tilts and hard shadows are decoration; drop the motion-adjacent skew for
   readers who ask for reduced motion, keep the colour. */
@media (prefers-reduced-motion: reduce) {
  .wfa-dish .entry-content h2,
  .wfa-dish .entry-content h3,
  .wfa-dish .wfa-nutrition h2,
  .wfa-dish .wfa-reviews h2,
  .wfa-dish .wfa-related h2,
    .wfa-dish .entry-content ol.wp-block-list > li::before { transform: none; }
}

/* ------------------------------------------------------------------ byline */
.wfa-dish .wfa-byline { display: flex; gap: 14px; align-items: center; margin: 18px 0 6px; }
.wfa-dish .wfa-byline img {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none;
  border: 3px solid var(--wfa-ink); box-shadow: 3px 3px 0 var(--wfa-hi);
}
.wfa-dish .wfa-byline b { font-size: 17px; }

/* ----------------------------------------------------------------- actions */
.wfa-dish .wfa-actions { display: flex; gap: 12px; margin: 20px 0; }
.wfa-dish .wfa-actions > * {
  flex: 1; text-align: center; text-decoration: none; cursor: pointer;
  font-family: Bangers, Impact, sans-serif; font-size: 20px; letter-spacing: .08em;
  color: var(--wfa-ink); background: #fff;
  border: 3px solid var(--wfa-ink);
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 var(--wfa-ink) !important;
  padding: 11px 4px;
}
.wfa-dish .wfa-actions > *:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--wfa-ink) !important; }
.wfa-dish .wfa-save.is-on { background: var(--wfa-hi); }

/* --------------------------------------------------------------- nutrition */
.wfa-dish .wfa-nutrition { margin: 44px 0 0; }
.wfa-dish .wfa-nut-empty {
  border: 3px solid var(--wfa-ink); box-shadow: 6px 6px 0 var(--wfa-ink);
  background: var(--wfa-cream); padding: 22px; max-width: 62ch;
}
.wfa-dish .wfa-nut-empty p { margin: 0 0 8px; }
.wfa-dish .wfa-nut-empty .small { font-size: 15px; opacity: .75; margin: 0; }

/* ----------------------------------------------------------------- reviews */
.wfa-dish .wfa-reviews { margin: 44px 0 0; }
.wfa-dish .wfa-rsum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.wfa-dish .wfa-rsum b { font-size: 22px; }
.wfa-dish .wfa-rsum span { opacity: .7; }
.wfa-dish .wfa-bars { max-width: 42ch; margin-bottom: 24px; }
.wfa-dish .wfa-bars div { display: flex; align-items: center; gap: 10px; margin: 6px 0; font-size: 15px; }
.wfa-dish .wfa-bars u { width: 62px; flex: none; text-decoration-color: var(--wfa-accent); }
.wfa-dish .wfa-bars i { flex: 1; height: 14px; background: #d9d9d9; border: 2px solid var(--wfa-ink); }
.wfa-dish .wfa-bars s { display: block; height: 100%; background: var(--wfa-hi); }
.wfa-dish .wfa-rempty {
  border: 3px solid var(--wfa-ink); box-shadow: 6px 6px 0 var(--wfa-ink);
  background: #fff; padding: 22px; max-width: 62ch; margin-bottom: 26px;
}
.wfa-dish .wfa-rempty p { margin: 0 0 6px; }

/* .wfa-relgrid moved to cards.css with the rest of the card component. */

/* Nothing above should print. A cook wants the recipe on the page, not the
   buttons, the review form or the mascot. */
@media print {
  .wfa-dish .wfa-actions,
  .wfa-dish .wfa-reviews,
  .wfa-dish .wfa-related,
  .wfa-dish .wfa-byline { display: none !important; }
  .wfa-dish .entry-content ol.wp-block-list > li { box-shadow: none; break-inside: avoid; }
}

/* ------------------------------------------------------------ recipe tools
   Servings, units and share, sitting directly above the Ingredients heading.
   Same ink-and-shadow language as the rest of the dish page. */
.wfa-dish .wfa-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 3px solid var(--wp--preset--color--text);
  box-shadow: 6px 6px 0 var(--wp--preset--color--text);
  background: var(--wp--preset--color--bg);
}
.wfa-dish .wfa-tool { display: flex; align-items: center; gap: 8px; }
.wfa-dish .wfa-tool-label {
  font-family: Bangers, "Barlow Condensed", sans-serif;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--neutral-700);
}

.wfa-dish .wfa-scale button,
.wfa-dish .wfa-units button,
.wfa-dish .wfa-sh {
  font: inherit;
  font-size: 14.5px;
  line-height: 1;
  padding: 7px 12px;
  border: 2px solid var(--wp--preset--color--text) !important;
  background: var(--wp--preset--color--bg);
  color: var(--wp--preset--color--text);
  cursor: pointer;
  text-decoration: none;
  box-shadow: none !important;
}
.wfa-dish .wfa-scale button:hover,
.wfa-dish .wfa-units button:hover,
.wfa-dish .wfa-sh:hover { background: #f2b134; color: #1d1f20; }

.wfa-dish .wfa-scale button[data-scale="up"],
.wfa-dish .wfa-scale button[data-scale="down"] {
  font-family: Bangers, "Barlow Condensed", sans-serif;
  font-size: 20px;
  width: 34px;
  padding: 4px 0;
  text-align: center;
}
.wfa-dish .wfa-scale output {
  font-family: Bangers, "Barlow Condensed", sans-serif;
  font-size: 18px;
  letter-spacing: .04em;
  min-width: 8ch;
  text-align: center;
}
.wfa-dish .wfa-units button[aria-pressed="true"] {
  background: var(--wp--preset--color--text);
  color: var(--wp--preset--color--bg);
}
.wfa-dish .wfa-share { flex-wrap: wrap; gap: 6px; }
.wfa-dish .wfa-reset { font-size: 13px !important; }

/* Scaled quantities are marked, so nobody prints the page and cooks the
   original amounts by mistake. */
.wfa-dish .wfa-tools.is-scaled ~ * .wfa-q,
.wfa-dish .wfa-tools.is-scaled + h2 + ul .wfa-q { box-shadow: inset 0 -2px 0 #f2b134; }

@media (max-width: 620px) {
  .wfa-dish .wfa-tools { gap: 12px; padding: 12px 13px; box-shadow: 4px 4px 0 var(--wp--preset--color--text); }
  .wfa-dish .wfa-tool { width: 100%; }
  .wfa-dish .wfa-share { width: 100%; }
}

/* Share buttons are icons now. Square, ink-bordered, hard shadow — the same
   object as every other control on the page, at the size a thumb can hit. */
.wfa-dish .wfa-share .wfa-sh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--wp--preset--color--text) !important;
  box-shadow: 3px 3px 0 var(--wp--preset--color--text) !important;
  transition: transform .1s, background-color .1s;
}
.wfa-dish .wfa-share .wfa-sh:hover {
  background: #f2b134;
  color: #1d1f20;
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--wp--preset--color--text) !important;
}
.wfa-dish .wfa-share .wfa-sh:active { transform: translate(3px, 3px); box-shadow: none !important; }
.wfa-dish .wfa-shico { display: block; }

/* "Copied" replaces the icon, so the button has to be allowed to grow. */
.wfa-dish .wfa-share .wfa-sh.is-copied {
  width: auto;
  padding: 0 12px;
  font-family: Bangers, "Barlow Condensed", sans-serif;
  font-size: 15px;
  letter-spacing: .06em;
  background: #f2b134;
  color: #1d1f20;
}

@media (prefers-reduced-motion: reduce) {
  .wfa-dish .wfa-share .wfa-sh,
  .wfa-dish .wfa-share .wfa-sh:hover,
  .wfa-dish .wfa-share .wfa-sh:active { transition: none; transform: none; }
}

/* Printing: the controls are not part of the recipe. */
@media print {
  .wfa-dish .wfa-tools,
  .wfa-dish .wfa-actions,
  .wfa-dish .wfa-related,
  .wfa-dish .wfa-reviews { display: none !important; }
}