/*
Theme Name: Michelyn Pinatas
Theme URI: https://michelynsdecorations.com/
Description: Block theme for michelynsdecorations.com, carrying the approved homepage mockup v003 (D010) section for section. Section wrappers carry id=<sections.yaml id> so `azv qa parity` locates them unchanged. Public brand is Michelyn Pinatas (D003); the domain does not change. Photographs are derived by assets/asset-recipes.yaml - the recipe id is the filename stem - and A023, A031 and A054 are excluded for carrying another business's watermark (Q019).
Version: 1.5.1
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: michelyn-pinatas
*/

/* =========================================================
   Design system, carried verbatim from the approved mockup's
   :root block (mockup/design-tokens.json derives from the same
   source). theme.json exposes the same values to the editor;
   these custom properties keep the mockup's CSS usable as-is.

   Do not retype a value here. Edit the mockup, re-run
   `azv tokens`, and carry it across - `azv check` hunts the
   second hand-maintained copy.
   ========================================================= */
/* ===========================================================================
   Michelyn Piñatas — homepage mockup
   Design vocabulary. `azv tokens` reads exactly this block.

   Colour provenance. Every hex described as taken from a photograph came from
   `azv assets sample`, in reports/color-samples/. Nothing here was eyeballed
   out of an image, and the two ground colours are honestly labelled as chosen
   rather than sampled.
   =========================================================================== */
:root{
  --ink:#192c4a;      /* navy — A042 rank 3, 6.6% coverage: the body of the blue piñata, not a wall */
  --ink-2:#0f1c31;    /* the same navy taken darker for large dark grounds */
  --berry:#942f6d;    /* magenta — A042 rank 8, 3.6%: the pink inside the ears. The primary accent */
  --leaf:#87cf95;     /* green — A043 rank 2, 9.8%: the watermelon piñata's fringe */
  --flame:#d85046;    /* red — A043 rank 3, 7.0%: the same piñata's red centre */
  --sun:#d3ce6d;      /* yellow — A045 rank 10, 2.7%: the cut-paper hair on the hero piñata */
  --paper:#fbf8f4;    /* page ground — CHOSEN, not sampled. A warm off-white; the sampled candidates
                         for a light ground were all domestic floor and wall, so none was used */
  --shell:#f2ebe1;    /* secondary ground — CHOSEN, a half-step darker than --paper */
  --ash:#55606f;      /* muted text on the light ground */
  --line:#e2d8c9;     /* hairlines on the light ground */

  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;

  --wide:1240px;      /* content container */
  --gutter:clamp(20px,5vw,64px);
  --section:clamp(64px,9vw,128px);   /* vertical rhythm between sections */
  --radius:4px;       /* almost square: the work is handmade, the frame is not fussy */
  --fringe-h:26px;    /* height of the cut-paper band that divides sections */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.04;margin:0;letter-spacing:-.015em}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem);font-weight:900}
h2{font-size:clamp(2rem,4.4vw,3.1rem)}
h3{font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.18}
p{margin:0 0 1.1em}
.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{
  font-family:var(--body);font-size:.8rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--berry);background:var(--paper);margin:0 0 18px;
}
.lede{font-size:clamp(1.05rem,1.6vw,1.24rem);color:var(--ash);background:var(--paper);max-width:52ch}

/* --- the anchor: tissue paper cut into fringe (D008) ---------------------
   Five colour bands, slit vertically so the lower edge reads as cut paper.
   One element, no image, and it scales to any width.                      */
.fringe{
  height:var(--fringe-h);width:100%;border:0;margin:0;
  background:linear-gradient(90deg,
    var(--berry) 0 20%, var(--sun) 20% 40%, var(--leaf) 40% 60%,
    var(--flame) 60% 80%, var(--ink) 80% 100%);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 12px);
  mask-image:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 12px);
}
.fringe--tight{--fringe-h:16px}

/* --- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;gap:.5em;font-family:var(--body);
  font-weight:600;font-size:1rem;text-decoration:none;border:2px solid transparent;
  padding:14px 26px;border-radius:var(--radius);cursor:pointer;
}
.btn--primary{background:var(--berry);color:#fff}
.btn--primary:hover{background:#7a2559;color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn--onink{background:var(--sun);color:var(--ink-2)}

/* --- header ------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.site-header__bar{display:flex;align-items:center;gap:24px;min-height:78px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand__mark{width:38px;height:38px;flex:0 0 38px}
.brand__name{display:block;font-family:var(--display);font-weight:900;font-size:1.32rem;
  line-height:1;letter-spacing:-.02em;color:var(--ink)}
.brand__sub{display:block;font-family:var(--body);font-size:.66rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--berry);margin-top:4px}
.site-nav{display:flex;align-items:center;gap:30px}
.site-nav a{font-weight:500;text-decoration:none;color:var(--ink);background:var(--paper);padding:6px 0;
  border-bottom:2px solid transparent}
.site-nav a:hover{border-bottom-color:var(--berry)}
.site-header .btn{padding:11px 20px}
@media(max-width:860px){
  .site-nav{gap:18px;font-size:.94rem}
  .site-header .btn{display:none}
  .brand__sub{letter-spacing:.22em}
}
@media(max-width:560px){
  .site-nav{gap:14px;font-size:.88rem}
  .site-header__bar{min-height:66px;gap:12px}
  .brand__mark{width:32px;height:32px;flex:0 0 32px}
  .brand__name{font-size:1.1rem}
}

/* --- hero: split, because the photographs are portrait -------------------- */
.hero{padding-block:clamp(40px,6vw,86px) 0;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,5vw,72px);align-items:center}
.hero__title em{font-style:normal;color:var(--berry)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero__meta{margin-top:26px;font-size:.92rem;color:var(--ash);background:var(--paper);
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.hero__meta b{color:var(--ink);font-weight:600}
.hero__meta a{text-decoration:none;border-bottom:2px solid var(--sun)}
.hero__meta a:hover{border-bottom-color:var(--berry)}
@media(max-width:480px){.hero__meta{gap:4px 0;flex-direction:column;align-items:flex-start}
  .hero__meta-sep{display:none}}
.hero__figure{position:relative}
.hero__figure img{width:100%;max-height:min(70vh,660px);object-fit:cover;object-position:50% 14%;
  border-radius:var(--radius);box-shadow:0 26px 60px -28px rgba(25,44,74,.5)}
.hero__figure .fringe{position:absolute;left:0;right:0;top:-8px;z-index:2}
.hero__tag{
  position:absolute;left:-14px;bottom:26px;background:var(--ink);color:var(--paper);
  font-size:.78rem;font-weight:600;letter-spacing:.06em;padding:9px 16px;border-radius:var(--radius);
  max-width:64%;
}
@media(max-width:900px){
  .hero__grid{grid-template-columns:1fr;gap:34px}
  .hero__tag{left:0}
  .hero__figure img{max-height:none}
}

/* --- services ------------------------------------------------------------ */
.services{padding-block:var(--section)}
.services__head{max-width:56ch;margin-bottom:clamp(32px,4vw,54px)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,34px)}
.card{background:var(--shell);border-radius:var(--radius);overflow:hidden}
.card:nth-child(2){transform:translateY(28px)}
.card__img{aspect-ratio:4/5;object-fit:cover;width:100%;height:auto}
.card__body{padding:24px 24px 28px}
.card h3{margin-bottom:10px}
.card p{color:var(--ash);background:var(--shell);font-size:.98rem;margin-bottom:0}
.card__rule{height:5px;background:var(--berry)}
.card:nth-child(2) .card__rule{background:var(--sun)}
.card:nth-child(3) .card__rule{background:var(--leaf)}
@media(min-width:621px) and (max-width:980px){
  .cards{grid-template-columns:1fr;gap:18px}
  .card{display:grid;grid-template-columns:minmax(200px,36%) 1fr;grid-template-rows:5px 1fr}
  .card:nth-child(2){transform:none}
  .card__rule{grid-column:1/-1;grid-row:1}
  .card__img{grid-column:1;grid-row:2;aspect-ratio:auto;width:100%;height:100%}
  .card__body{grid-column:2;grid-row:2;padding:28px 32px;align-self:center}
}
@media(max-width:620px){
  .cards{grid-template-columns:1fr;gap:20px}
  .card:nth-child(2){transform:none}
  .card__img{aspect-ratio:5/4}
}

/* --- craft: the anchor, shown ------------------------------------------- */
.craft{background:var(--ink);color:var(--paper);padding-block:var(--section)}
.craft h2,.craft p{color:var(--paper);background:var(--ink)}
.craft .eyebrow{color:var(--sun);background:var(--ink)}
.craft__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,68px);align-items:center}
.craft__text p{color:#d9e0ea;background:var(--ink);max-width:46ch}
.craft__strip{display:grid;gap:12px}
.craft__strip img{aspect-ratio:16/5;object-fit:cover;width:100%;border-radius:var(--radius)}
@media(max-width:860px){.craft__grid{grid-template-columns:1fr;gap:30px}}

/* --- work: a portrait mosaic, not a carousel ----------------------------- */
.work{padding-block:var(--section)}
.work__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;
  gap:20px;margin-bottom:clamp(28px,3.6vw,46px)}
.mosaic{columns:3;column-gap:clamp(14px,1.8vw,22px)}
.mosaic figure{break-inside:avoid;margin:0 0 clamp(14px,1.8vw,22px);position:relative}
.mosaic img{width:100%;border-radius:var(--radius)}
.mosaic figcaption{
  font-size:.82rem;color:var(--ash);background:var(--paper);padding-top:8px;
}
@media(max-width:980px){.mosaic{columns:2}}
@media(max-width:560px){.mosaic{columns:1}}

/* --- service area -------------------------------------------------------- */
.area{background:var(--shell);padding-block:clamp(48px,6vw,86px)}
.area__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);align-items:center}
.area h2,.area p{background:var(--shell)}
.area p{color:var(--ash);background:var(--shell);max-width:44ch;margin-bottom:0}
.area__img img{width:100%;max-height:520px;object-fit:cover;object-position:50% 30%;
  border-radius:var(--radius)}
@media(max-width:860px){.area__grid{grid-template-columns:1fr}}

/* --- quote --------------------------------------------------------------- */
.quote{padding-block:var(--section)}
.quote__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px)}
.quote__call{font-family:var(--display);font-weight:900;font-size:clamp(1.9rem,3.6vw,2.7rem);
  color:var(--berry);background:var(--paper);text-decoration:none;display:inline-block;margin-top:6px}
.quote__call:hover{color:#7a2559}
.field{display:block;margin-bottom:18px}
.field span{display:block;font-size:.84rem;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ash);background:var(--paper);margin-bottom:7px}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:1rem;padding:13px 14px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);
}
.field textarea{min-height:120px;resize:vertical}
@media(max-width:860px){.quote__grid{grid-template-columns:1fr;gap:34px}}

/* --- footer -------------------------------------------------------------- */
.site-footer{background:var(--ink-2);color:#c9d3e0;padding-block:clamp(44px,6vw,76px) 34px}
.site-footer a{color:#c9d3e0;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(26px,4vw,56px)}
.site-footer h3{font-size:1rem;font-family:var(--body);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--ink-2);margin-bottom:14px}
.site-footer p,.site-footer li{color:#c9d3e0;background:var(--ink-2);font-size:.95rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:9px}
.site-footer .brand__name{color:#fff}
.site-footer .brand__sub{color:var(--sun)}
.site-footer__base{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  font-size:.85rem;color:#a8b5c6;background:var(--ink-2)}
@media(max-width:860px){.site-footer__grid{grid-template-columns:1fr;gap:30px}}

/* --- mobile quote bar ---------------------------------------------------- */
.quotebar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--ink);padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.quotebar .btn{flex:1;justify-content:center;padding:13px 10px;font-size:.95rem}
@media(max-width:860px){
  .quotebar{display:flex}
  body{padding-bottom:78px}
}

/* --- inner-page title band ------------------------------------------------
   The <h1> for /work/, /services/ and /contact/. The homepage has no page-head:
   its h1 is the hero, and a page has exactly one. */
.page-head{padding-block:clamp(38px,5vw,72px) 0}
.page-head h1{margin-bottom:14px}
.page-head .lede{margin-bottom:0}

/* --- /services/ opening (D011) --------------------------------------------
   Owner review 2026-09-22: the route opened with "What we make", a band of
   whitespace, then the eyebrow "WHAT WE MAKE" and "Three things, made for your
   event" -- a page title bolted above a reused homepage section.

   The split gives the page one intentional opening. It is deliberately a
   DIFFERENT SHAPE from the homepage hero: text left, one wide outdoor frame
   right, capped in height so it introduces the page instead of competing with
   it. The image is neither the homepage hero nor any of the three service-card
   photographs. No fringe band here -- the motif is used exactly three times on
   the site and this is not one of them. */
.page-head--split{padding-bottom:clamp(30px,4vw,54px)}
.page-head__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,56px);
  align-items:center}
.page-head--split .lede{margin-bottom:22px}
.page-head__figure{margin:0}
.page-head__figure img{width:100%;max-height:340px;object-fit:cover;object-position:50% 42%;
  border-radius:var(--radius)}
@media(max-width:860px){
  .page-head__grid{grid-template-columns:1fr;gap:26px}
  .page-head__figure img{max-height:260px}
}

/* The page-head has already said it, so patterns/services.php does not RENDER
   its own head on this route -- hiding it with CSS would have left an invisible
   duplicate <h2> in the markup. Only the spacing is adjusted here. */
body.mp-services .services{padding-block:clamp(30px,4vw,54px) var(--section)}

/* --- WordPress flow-layout gap --------------------------------------------
   Core puts --wp--style--block-gap (24px by default) between the top-level
   blocks inside .wp-site-blocks, which opened a 24px band of --paper above the
   dark footer that the approved design does not have. Caught by parity: the
   footer started at y=6675 against the approved 6753, and the page was 78px
   shorter instead of the 103px the deleted annotation accounts for.

   Scoped to the two seams rather than setting blockGap:0 globally, because the
   native blocks inside the patterns do rely on flow spacing. The design's own
   rhythm is section padding, never block gap. */
.wp-site-blocks > .site-footer,
.wp-site-blocks > main{margin-block-start:0}

/* --- quote form delivery states (D015) ------------------------------------
   The honeypot is moved off-screen rather than display:none, because some bots
   skip hidden fields. The status line uses the palette's own ink and berry. */
.quote__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.quote__status{margin:0 0 20px;padding:12px 14px;border-radius:var(--radius);font-size:.95rem;
  border:1px solid var(--line);background:#fff;color:var(--ink)}
.quote__status--ok{border-color:var(--leaf)}
.quote__status--err{border-color:var(--berry);color:var(--berry)}