/*
Theme Name: Vermillion
Theme URI: https://penntos.site
Author: Penntos Digital
Description: Vermillion — a bold magazine WordPress block theme. No plugins, no page builder, no parent theme required.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vermillion
Tags: block-patterns, full-site-editing, blog, food-and-drink, one-column, wide-blocks, accessibility-ready
*/

/* Block themes get their styling from theme.json. Only the handful of things theme.json
   cannot express live here — keep this file short on purpose. */

/* The hero emphasis device (DECISIONS D10). Sans-led designs like Vermillion use accent
   colour rather than italic, because a synthetic italic on a grotesque reads as a mistake. */
.penntos-emphasis { color: var(--wp--preset--color--primary); font-style: normal; }

/* Ingredient checkboxes: a real affordance, no plugin, no JS. */
.penntos-ingredients { list-style: none; padding-left: 0; }
.penntos-ingredients li { display: flex; gap: .7em; align-items: baseline; padding: .45em 0; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent); }
.penntos-ingredients input[type="checkbox"] { flex: 0 0 auto; width: 1.05em; height: 1.05em; accent-color: var(--wp--preset--color--primary); }
.penntos-ingredients input:checked + span { opacity: .45; text-decoration: line-through; }

/* Numbered method steps, counter-driven so authors can reorder freely. */
.penntos-method { list-style: none; padding-left: 0; counter-reset: step; }
.penntos-method li { counter-increment: step; display: grid; grid-template-columns: 2.1em 1fr; gap: .9em; padding: .6em 0; }
.penntos-method li::before { content: counter(step); font-family: var(--wp--preset--font-family--display); font-size: 1.15em; line-height: 1.1; color: var(--wp--preset--color--primary); }

/* Recipe meta strip */
.penntos-recipe-meta { display: flex; flex-wrap: wrap; gap: 1.75em; padding: 1.1em 0; border-block: 2px solid var(--wp--preset--color--contrast); }
.penntos-recipe-meta div { display: flex; flex-direction: column; gap: .2em; }
.penntos-recipe-meta dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.penntos-recipe-meta dd { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: 1.15rem; }

@media print { .penntos-noprint, .wp-block-template-part { display: none !important; } }

/* ── Recipe page furniture ──────────────────────────────────────────────────────────── */

/* Jump-to-recipe: measured as a near-universal convention on food blogs, and the single
   most requested affordance from readers who arrive from search. Pure anchor, no JS. */
.penntos-jump { display: inline-flex; align-items: center; gap: .5em; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 600; text-decoration: none;
  padding: .75em 1.3em; background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--contrast); }
.penntos-jump:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

.penntos-byline { display: flex; flex-wrap: wrap; gap: 1em; align-items: center;
  font-size: .8rem; opacity: .72; }
.penntos-byline span::after { content: "·"; margin-left: 1em; opacity: .5; }
.penntos-byline span:last-child::after { content: none; }

.penntos-print { background: none; border: 1px solid currentColor; font: inherit;
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: .5em 1em;
  cursor: pointer; color: inherit; }
.penntos-print:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }

/* Author box — the trust signal food blogs live on. */
.penntos-author { display: grid; grid-template-columns: 96px 1fr; gap: 1.4em; align-items: start;
  padding: 1.6em; border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 15%, transparent); }
.penntos-author img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; }
@media (max-width: 600px) { .penntos-author { grid-template-columns: 1fr; } }

/* Notes callout */
.penntos-notes { border-left: 3px solid var(--wp--preset--color--primary); padding: .2em 0 .2em 1.2em; }

/* Chips */
.penntos-chip { display: inline-block; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600; padding: .35em .8em;
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--contrast); }

/* Grid cards: equal-height images so rows never go ragged when titles wrap differently. */
.wp-block-post-template.is-layout-grid > li { display: flex; flex-direction: column; }

/* ── Recipe card, rendered from post meta by penntos_render_recipe_card() ───────────────
   Not a pattern: a pattern is inserted as static markup and cannot follow the post, which
   is exactly how every article ended up showing the same tomato galette. */
.penntos-card { border: 2px solid var(--wp--preset--color--contrast);
  padding: var(--wp--preset--spacing--30); margin-block-start: var(--wp--preset--spacing--40); }
.penntos-card__head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; flex-wrap: wrap; }
.penntos-card__head h2 { margin: 0; font-size: var(--wp--preset--font-size--x-large); }
.penntos-card__cols { display: grid; grid-template-columns: 2fr 3fr;
  gap: var(--wp--preset--spacing--30); margin-block-start: var(--wp--preset--spacing--30); }
.penntos-card__cols h3 { margin-block: 0 .6em; font-size: var(--wp--preset--font-size--large); }
@media (max-width: 700px) { .penntos-card__cols { grid-template-columns: 1fr; } }

/* ── Text over photography ──────────────────────────────────────────────────────────────
   A colour that passes on a solid ground tells you nothing about its legibility over a
   photograph: the ground is every luminance at once. Measured on the hero, the emphasis
   word scored 1.04:1 on Juniper and 1.01:1 on Linen against a pale region of the image —
   effectively invisible. Two changes fix it, and both are needed.

   1. A scrim gives the type a predictable dark ground without flattening the whole photo
      the way a higher dim ratio would.
   2. Over media the emphasis switches to a lighter tint of the design's own primary, set
      per design so each keeps its hue instead of all fading to the same pale peach. */

.wp-block-cover .wp-block-cover__background{
  background-image:radial-gradient(ellipse 82% 66% at 50% 48%,
    color-mix(in srgb, var(--wp--preset--color--contrast) 58%, transparent) 0%,
    color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent) 58%,
    transparent 80%);
}

/* Emphasis over media. Falls back to primary where the custom property is absent. */
.wp-block-cover .penntos-emphasis{
  color: var(--wp--custom--emphasis-media, var(--wp--preset--color--primary));
}
/* A shadow does not replace contrast, but it holds the letterforms apart from busy detail. */
.wp-block-cover h1, .wp-block-cover h2, .wp-block-cover p{
  text-shadow: 0 1px 14px color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
}

/* ── Ratings ────────────────────────────────────────────────────────────────────────── */
.penntos-stars{white-space:nowrap;letter-spacing:.06em}
.penntos-stars .on{color:var(--wp--preset--color--primary)}
.penntos-stars .off{color:color-mix(in srgb,var(--wp--preset--color--contrast) 22%,transparent)}
.penntos-stars-n{font-size:.82em;opacity:.7}
.penntos-card__rating{margin-top:.4em}

/* The rating selector. Reversed row order so the CSS sibling selector can light up
   every star to the left of the hovered one without any JavaScript. */
.penntos-rate{display:flex;align-items:center;gap:.9em;flex-wrap:wrap;margin-bottom:1em}
.penntos-rate__label{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.penntos-rate__set{display:inline-flex;flex-direction:row-reverse;justify-content:flex-end}
.penntos-rate__set input{position:absolute;opacity:0;width:1px;height:1px}
.penntos-rate__set label{font-size:1.5rem;line-height:1;cursor:pointer;padding:0 .06em;
  color:color-mix(in srgb,var(--wp--preset--color--contrast) 22%,transparent)}
.penntos-rate__set input:checked ~ label,
.penntos-rate__set label:hover, .penntos-rate__set label:hover ~ label{color:var(--wp--preset--color--primary)}
.penntos-rate__set input:focus-visible + label{outline:2px solid var(--wp--preset--color--primary);outline-offset:2px}

/* ── Breadcrumbs ────────────────────────────────────────────────────────────────────── */
.penntos-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5em;margin:0 0 .9em;padding:0;
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;opacity:.72}
.penntos-crumbs li+li::before{content:"/";margin-right:.5em;opacity:.5}
.penntos-crumbs a{color:inherit;text-decoration:none}
.penntos-crumbs a:hover{text-decoration:underline}

/* ── Newsletter form ────────────────────────────────────────────────────────────────── */
.penntos-signup{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center;margin-top:1.4em}
.penntos-signup input[type=email]{flex:1 1 250px;max-width:340px;font:inherit;font-size:.95rem;
  padding:.85em 1em;border:1px solid var(--wp--preset--color--contrast);background:var(--wp--preset--color--base);
  color:var(--wp--preset--color--contrast);border-radius:0}
.penntos-signup button{font:inherit;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:.85em 1.6em;border:0;cursor:pointer;background:var(--wp--preset--color--contrast);color:var(--wp--preset--color--base)}
.penntos-signup button:hover{background:var(--wp--preset--color--primary)}
.penntos-signup input:focus-visible,.penntos-signup button:focus-visible{outline:2px solid var(--wp--preset--color--primary);outline-offset:2px}

/* ── Press strip ────────────────────────────────────────────────────────────────────── */
.penntos-press{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:1.4em 2.4em;font-family:var(--wp--preset--font-family--display);font-size:1.05rem;opacity:.66}

.penntos-jump-wrap{margin-top:1.3rem}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ════════════════════════════════════════════════════════════════════════════════════════
   SECTION POLISH
   Everything below is expressed in role tokens and preset variables, so all ten designs
   inherit it and no design needs a rule of its own. That constraint is the architecture:
   a design-specific override turns a 2-hour product into a 35-hour one.
   ════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Section headings ───────────────────────────────────────────────────────────────────
   A section heading sitting alone reads as a paragraph that happens to be big. A short rule
   springing from the baseline gives every section the same visible starting edge. */
.wp-block-group.alignwide > h2.wp-block-heading{position:relative;padding-top:.55em}
.wp-block-group.alignwide > h2.wp-block-heading::before{
  content:"";position:absolute;top:0;left:0;width:2.4em;height:2px;
  background:var(--wp--preset--color--primary)}

/* ── Post cards ─────────────────────────────────────────────────────────────────────────
   The image is the click target on a food blog, so the whole card responds, and the motion
   is on the image rather than the card so the grid never shifts. */
.wp-block-post-template li{position:relative}
.wp-block-post-template .wp-block-post-featured-image{overflow:hidden;background:color-mix(in srgb,var(--wp--preset--color--contrast) 6%,transparent)}
.wp-block-post-template .wp-block-post-featured-image img{
  transition:transform .5s cubic-bezier(.2,.6,.2,1);will-change:transform}
@media (hover:hover){
  .wp-block-post-template li:hover .wp-block-post-featured-image img{transform:scale(1.045)}
  .wp-block-post-template li:hover .wp-block-post-title a{text-decoration:underline;text-underline-offset:.18em}
}
.wp-block-post-template .wp-block-post-title a{text-decoration:none}
.wp-block-post-template .wp-block-post-terms{margin-bottom:.1em}
/* Excerpts of different lengths otherwise leave rows ragged. */
.wp-block-post-template.is-layout-grid > li > .wp-block-group{height:100%}
.wp-block-post-template .wp-block-post-excerpt__excerpt{opacity:.78}

/* ── Recipe card ────────────────────────────────────────────────────────────────────────
   The card is the thing being bought; it earns more than a border. */
.penntos-card{background:color-mix(in srgb,var(--wp--preset--color--secondary) 22%,var(--wp--preset--color--base))}
.penntos-card__head h2{line-height:1.08}
.penntos-recipe-meta{border-block:1px solid color-mix(in srgb,var(--wp--preset--color--contrast) 20%,transparent);
  border-top-width:2px;gap:1.4em 2.2em}
.penntos-recipe-meta dt{font-weight:600}
.penntos-ingredients li{border-bottom-color:color-mix(in srgb,var(--wp--preset--color--contrast) 10%,transparent)}
.penntos-ingredients label{cursor:pointer;display:flex;gap:.6em;align-items:baseline}
.penntos-ingredients input:checked + label span{opacity:.42;text-decoration:line-through}
.penntos-method li::before{font-variant-numeric:tabular-nums;opacity:.85}
.penntos-notes{margin-top:var(--wp--preset--spacing--30);
  border-left-color:var(--wp--preset--color--primary);
  background:color-mix(in srgb,var(--wp--preset--color--primary) 7%,transparent);
  padding:1em 1.2em}
.penntos-notes h3{margin-top:0;font-size:var(--wp--preset--font-size--medium);
  letter-spacing:.1em;text-transform:uppercase}
.penntos-notes p{margin:.35em 0;font-size:.94rem}

/* ── Byline ─────────────────────────────────────────────────────────────────────────── */
.penntos-byline{border-block:1px solid color-mix(in srgb,var(--wp--preset--color--contrast) 14%,transparent);
  padding:.7em 0;margin-top:1.3rem;opacity:1}
.penntos-byline > span{opacity:.75}
.penntos-byline .penntos-stars{opacity:1}

/* ── Comments ───────────────────────────────────────────────────────────────────────── */
.wp-block-comment-template li{padding:1.1em 0;border-bottom:1px solid color-mix(in srgb,var(--wp--preset--color--contrast) 10%,transparent)}
.wp-block-comment-template li:last-child{border-bottom:none}
.wp-block-comment-author-name a{text-decoration:none;font-weight:600}
.wp-block-comment-date{opacity:.6}
.wp-block-post-comments-form{margin-top:var(--wp--preset--spacing--30);
  padding-top:var(--wp--preset--spacing--30);
  border-top:1px solid color-mix(in srgb,var(--wp--preset--color--contrast) 14%,transparent)}
.wp-block-post-comments-form input[type=text],
.wp-block-post-comments-form input[type=email],
.wp-block-post-comments-form input[type=url],
.wp-block-post-comments-form textarea{
  font:inherit;font-size:.95rem;padding:.7em .85em;border-radius:0;
  border:1px solid color-mix(in srgb,var(--wp--preset--color--contrast) 28%,transparent);
  background:var(--wp--preset--color--base);color:var(--wp--preset--color--contrast);width:100%}
.wp-block-post-comments-form :is(input,textarea):focus-visible{
  outline:2px solid var(--wp--preset--color--primary);outline-offset:1px;border-color:transparent}

/* ── Press strip ────────────────────────────────────────────────────────────────────── */
.penntos-press li{position:relative}
.penntos-press li + li::before{content:"";position:absolute;left:-1.2em;top:.35em;bottom:.35em;width:1px;
  background:color-mix(in srgb,var(--wp--preset--color--contrast) 18%,transparent)}

/* ── Cover overlays ─────────────────────────────────────────────────────────────────── */
.wp-block-cover .wp-block-cover__inner-container > p:first-child{opacity:.9}
.wp-block-cover:has(.wp-block-heading[class*="large"]) img{transition:transform 8s ease-out}

/* ── Focus and motion ───────────────────────────────────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--wp--preset--color--primary);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── Print ──────────────────────────────────────────────────────────────────────────────
   Cooks print recipes. Drop the furniture and keep the card. */
@media print{
  .penntos-noprint,.wp-block-template-part,.wp-block-comments,.penntos-crumbs,
  .wp-block-post-featured-image,.penntos-signup{display:none!important}
  .penntos-card{border-width:1px;background:none;padding:0}
  body{font-size:11pt}
}

/* ── About band ─────────────────────────────────────────────────────────────────────────
   `secondary` sits only 1.22:1 from `base` on Linen and 1.36:1 on Juniper, so a band filled
   with it barely registers as a band — it read as an empty light area. Deepening the fill
   toward `contrast` and adding a hairline edge gives it a shape without making it loud.
   Vermillion's secondary is dark, so the dark variant opts out of the deepening. */
.penntos-about:not(.penntos-about--dark){
  background-color:color-mix(in srgb, var(--wp--preset--color--secondary) 84%, var(--wp--preset--color--contrast))!important;
  border-block:1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent);
}
/* The emphasis word measured 2.31–3.61 on the band. This token is the lightest mix of the
   design's own primary that clears 4.5 there, so the hue survives and the word is readable. */
.penntos-about .penntos-emphasis{
  color:var(--wp--custom--emphasis-band, var(--wp--preset--color--primary));
}
/* The portrait was floating in the band with no relationship to it. */
.penntos-about .wp-block-image img{box-shadow:0 1px 0 color-mix(in srgb,var(--wp--preset--color--contrast) 14%,transparent)}