/* Gilded Poppy Makery — the whole stylesheet.
   One file, no build step, no framework.

   This is a REPLICA of the existing site, measured off it rather than designed: every colour, type
   size, weight, letter-spacing and column position below was read out of the live pages with
   getComputedStyle at 1280px and 390px and interpolated between them. Do not "improve" a value
   here without agreeing the change first — matching the owner's site exactly is the point.

   Measured palette:   sand #dfbb9f · cream #f5edde · cocoa #3d2418 (text) · teal #077c7c (accent)
   Measured type:      Comfortaa 700 headings · Work Sans 400 body, 21px/1.5 at 1280, 16px/1.5 at 390
   Measured buttons:   transparent, 3px #077c7c border, radius 300px, 1.5em/2.2em padding,
                       Work Sans 700 uppercase, letter-spacing .3em

   No dark theme. The site being copied has none, and a dark repaint is the single most visible way
   to look like a different site. */

@font-face {
  font-family: Comfortaa;
  src: url(/fonts/comfortaa-latin.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url(/fonts/worksans-latin.woff2) format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --sand:  #dfbb9f;
  --cream: #f5edde;
  --cocoa: #3d2418;
  --teal:  #077c7c;

  --ink:   var(--cocoa);
  --bg:    var(--sand);

  --font-head: Comfortaa, "Trebuchet MS", ui-rounded, system-ui, sans-serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fluid type, fitted to the two measured widths: 390px and 1280px.
     body 16 -> 21px · h1 52.72 -> 73.224 · h2 35.44 -> 48.648 · h3 17.53 -> 24.072 */
  --t-body: clamp(1rem,     0.8631rem + 0.5618vw, 1.3125rem);
  --t-h1:   clamp(3.295rem, 2.7335rem + 2.3037vw, 4.5765rem);
  --t-h2:   clamp(2.215rem, 1.8533rem + 1.4840vw, 3.0405rem);
  --t-h3:   clamp(1.0956rem, 0.9163rem + 0.7351vw, 1.5045rem);
  /* The shop-link labels sit on their own step: 30.216px at 1280, 22px at 390. */
  --t-h4:   clamp(1.375rem, 1.15rem + 0.9232vw, 1.8885rem);
  /* The card headings on Creative Courses run bigger than a normal h3 (39.4px at 1280), and their
     body copy runs on a smaller step (19.3px) — both measured. */
  --t-card-h: clamp(1.79rem, 1.4967rem + 1.2039vw, 2.4645rem);
  --t-small:  clamp(0.92rem, 0.7938rem + 0.5169vw, 1.2075rem);

  /* The section grid: 24 columns, 11px gutters, 4vw page padding — the geometry the live pages
     lay their blocks out on. Every column position in the content files came from measuring the
     real blocks, so this has to stay in step with them. */
  --cols: 24;
  --gap: 11px;
  /* Defaults for the per-block and per-band overrides the content files set inline. */
  --c: 2 / 26;
  --r: auto;
  --band-img: none;
  --band-wash: var(--sand);
  --band-wash-op: 0.87;
  --pad: 4vw;
  --band-pad: clamp(2.5rem, 6vw, 4.8rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font: 400 var(--t-body)/1.5 var(--font-body);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
img, video { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--font-head); font-weight: 700;
  letter-spacing: -0.01em; margin: 0 0 0.4em;
}
h1 { font-size: var(--t-h1); line-height: 1.037; }
h2 { font-size: var(--t-h2); line-height: 1.114; }
h3 { font-size: var(--t-h3); line-height: 1.114; }
p { margin: 0 0 1.5em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal); text-underline-offset: 0.15em; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--teal); color: #fff; padding: 0.6rem 1rem;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- header ---------------------------------------------------------------------------------
   Logo left at 174px (97px on mobile), nav beside it, social + cart hard right. Transparent, on
   the sand band. */
.masthead {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.6rem);
  padding: 1.2rem var(--pad);
}
.brand { display: block; line-height: 0; }
.brand img { width: 174px; max-width: 30vw; height: auto; }

#nav { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.4rem); flex: 1; }
.nav-links, .nav-social { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-links { gap: clamp(0.9rem, 2vw, 1.9rem); flex-wrap: wrap; }
.nav-social { gap: 1.1rem; margin-left: auto; }
.nav-social a, .cart-link { display: block; line-height: 0; color: var(--ink); }

.nav-links a {
  position: relative; display: inline-block;
  color: var(--ink); text-decoration: none;
  font: 400 var(--t-body)/1.5 var(--font-body);
  padding: 0.1em 0;
}
/* The sweep underline, copied rule-for-rule: a 1px bar that grows from the left on hover and
   retreats to the right, 0.6s on the same easing curve. */
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0.1em;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
@media (hover: hover) {
  .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
}
.nav-links [aria-current="page"] { text-decoration: underline; }

.nav-toggle {
  display: none; background: none; border: 0; padding: 0.5rem;
  color: var(--ink); cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block; width: 1.7rem; height: 2px; background: currentColor; content: "";
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before { position: absolute; top: -9px; }
.nav-toggle-bars::after  { position: absolute; top: 9px; }

/* Mobile: burger left, logo centred, full-screen sand overlay — the treatment on the live site. */
@media (max-width: 767px) {
  .masthead { justify-content: center; position: relative; padding: 1rem var(--pad); }
  .nav-toggle { display: block; position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); z-index: 3; }
  .brand { margin: 0 auto; position: relative; z-index: 3; }
  .brand img { width: 97px; max-width: 40vw; }
  .cart-link { position: absolute; right: var(--pad); top: 50%; transform: translateY(-50%); z-index: 3; }
  /* The shop labels centre under their pictures on a phone, as they do on the original. */
  .fe > h3 { text-align: center; }

  .js #nav {
    position: fixed; inset: 0; z-index: 2; background: var(--sand);
    flex-direction: column; align-items: center; justify-content: center; gap: 3rem;
    opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  .js #nav[data-open] { opacity: 1; visibility: visible; }
  .js #nav .nav-links { flex-direction: column; gap: 0.5rem; text-align: center; }
  .js #nav .nav-links a { font-size: 2.07rem; }        /* 33.15px, measured on the live overlay */
  .js #nav .nav-links a::after { display: none; }
  .js #nav .nav-social { margin: 0; gap: 1.8rem; }
  .js .masthead:has(#nav[data-open]) .nav-toggle-bars { background: transparent; }
  .js .masthead:has(#nav[data-open]) .nav-toggle-bars::before { transform: translateY(9px) rotate(45deg); }
  .js .masthead:has(#nav[data-open]) .nav-toggle-bars::after  { transform: translateY(-9px) rotate(-45deg); }
}
body.nav-open { overflow: hidden; }

/* --- bands and the block grid ---------------------------------------------------------------- */
main { flex: 1; }
.band { padding-block: var(--band-pad); }
/* Most bands carry no padding of their own — the grid rows do the spacing, exactly as on the
   original, where every section but the first measures 0. */
.band-flush { padding-block: 0; }
.band-flush-bottom { padding-bottom: 76.8px; }
.band-sand  { background: var(--sand); }
.band-cream { background: var(--cream); }

/* A band whose background is a photograph under a wash of the band colour. Both washes are the
   measured ones: cream at .87 behind Welcome, sand at .62 behind Subscribe. */
.band-photo { position: relative; isolation: isolate; }
.band-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--band-img) center / cover;
}
.band-photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--band-wash); opacity: var(--band-wash-op);
}

/* The block grid, copied from the original's layout engine rather than approximated: 26 column
   tracks (a gutter, 24 content columns, a gutter), rows of `minmax(24px, auto)`, 11px gaps.
   Content files place every block with the SAME `grid-column` / `grid-row` values the live site
   uses — `style="--c: 4 / 10; --r: 7 / 18"` — so vertical rhythm, and the deliberate gaps in it,
   come out identical instead of being guessed at. Sections that use a different row gap set
   `--gap` on themselves. */
.fe {
  display: grid;
  grid-template-columns: minmax(var(--pad), 1fr) repeat(24, minmax(0, 1fr)) minmax(var(--pad), 1fr);
  grid-auto-rows: minmax(24px, auto);
  gap: var(--gap);
  max-width: 1500px; margin-inline: auto;
}
.fe > * { grid-column: var(--c); grid-row: var(--r, auto); min-width: 0; }
.fe img { width: 100%; display: block; object-fit: cover; }
.fe > p, .fe > h1, .fe > h2, .fe > h3 { margin-block: 0; }

@media (max-width: 767px) {
  /* One column on a phone, in source order — same as the original, which drops its own grid at
     the same breakpoint. Row placement goes with it, or blocks would keep their desktop rows and
     leave holes. */
  :root { --pad: 6vw; }
  .fe > * { grid-column: 2 / 26 !important; grid-row: auto !important; }
}

.center { text-align: center; }

/* --- buttons ---------------------------------------------------------------------------------
   Measured: transparent fill, 3px teal border, fully rounded, Work Sans 700 uppercase with .3em
   letter-spacing, 1.5em by 2.2em padding. */
.btn {
  display: inline-block; text-align: center; text-decoration: none;
  background: none; color: var(--teal);
  border: 3px solid var(--teal); border-radius: 300px;
  font: 700 var(--t-body)/1.2 var(--font-body);
  text-transform: uppercase; letter-spacing: 0.3em;
  padding: 1.5em 2.2em 1.5em calc(2.2em + 0.3em);   /* the trailing letter-space, balanced back */
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn:hover { background: var(--teal); color: var(--cream); }

/* The two image shapes the site uses. The paths live in inc/footer.php. */
.sh-arch { clip-path: url(#gp-arch); }
.sh-blob { clip-path: url(#gp-blob); }

/* Shop links: picture, then the label beneath it — measured as Comfortaa 700 at 30.2px, cocoa,
   left-aligned, no underline, set in caps. */
.tile { display: block; text-decoration: none; color: inherit; }
.tile-label {
  color: var(--ink); text-decoration: none; text-transform: uppercase;
  font-size: var(--t-h4);
}
.tile-label:hover { text-decoration: underline; }
.teal { color: var(--teal); }
h2.teal, h1.teal { color: var(--teal); }
/* Set in caps by CSS on the one heading that is typed that way on the original, so the copy stays
   sentence case in the content file and can be reused in a share card without shouting. */
.caps { text-transform: uppercase; }

/* On the teal contact band the form chrome inverts, as it does on the original. */
.band-teal { background: var(--teal); color: #fff; }
.band-teal h1, .band-teal h2, .band-teal h3 { color: #fff; }
.band-teal .btn { color: #fff; border-color: #fff; }
.band-teal .btn:hover { background: #fff; color: var(--teal); }

/* --- testimonials carousel -------------------------------------------------------------------- */
.quotes { position: relative; }
.quotes { overflow: hidden; }
.quotes-track { display: flex; transition: transform 0.4s ease; }
.quote {
  flex: 0 0 100%; text-align: left;
  padding-inline: clamp(1rem, 6vw, 5rem);
}
.quote h3 { margin-bottom: 0.2em; }
.quote .meta { margin-bottom: 1em; }
.quote cite { font-style: normal; display: block; margin-top: 1em; }
.quotes-nav {
  display: flex; justify-content: center; align-items: center; gap: 1.5rem;
  margin-top: 2rem;
}
.quotes-nav button {
  background: none; border: 0; color: var(--ink); cursor: pointer;
  font-size: 1.6rem; line-height: 1; padding: 0.3rem 0.6rem;
}
.quotes-count { font-size: 0.85em; }

/* Shop listing: a simple responsive row of pieces. Not part of the replica — the site being
   copied has no shop yet — so it stays deliberately plain until the real one is designed. */
.shop-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
.shop-grid > * { min-width: 0; }

/* Creative Courses cards: bigger heading, smaller body — as measured. */
.band-sand h3, .band-cream h3 { font-size: var(--t-h3); }
.fe h3 { font-size: var(--t-card-h); }
.small { font-size: var(--t-small); }

/* Panels and boxes, measured off the original's shape blocks.
   The course cards are cream rounded rectangles (radius 5px) sitting on the sand band; the intro
   paragraph sits in an amber rounded box (radius 10px, fill #be6404). */
.panel { background: var(--cream); border-radius: 5px; }
/* Heading and copy are separate blocks placed ON TOP of the panel, which is how the original does
   it — the panel is a shape block, not a container. */
.card-head { padding: 0 40px; margin-bottom: 0; }
.card-body { padding: 0 40px; }
.box-amber {
  background: #be6404; border-radius: 10px;
  padding: 12px 50px;
}

/* A scalloped bottom edge, as the original puts between several of its bands. It MASKS the band —
   background colour, photograph and wash together — so the band below shows through the scallops.
   Two mask layers: a solid rectangle for everything above the wave, and the wave itself repeated
   across the foot. 77px deep, two humps per 1292px, matching the original's divider block. */
.wave-bottom {
  --wave: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1292 77" preserveAspectRatio="none"><path fill="black" d="M0,38 c323,-48.7 323,-48.7 646,0 s323,48.7 646,0 L1292,0 L0,0 Z"/></svg>');
  -webkit-mask-image: linear-gradient(#000, #000), var(--wave);
  -webkit-mask-size: 100% calc(100% - 76px), 1292px 77px;
  -webkit-mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat, repeat-x;
  mask-image: linear-gradient(#000, #000), var(--wave);
  mask-size: 100% calc(100% - 76px), 1292px 77px;
  mask-position: top left, bottom left;
  mask-repeat: no-repeat, repeat-x;
  padding-bottom: calc(var(--band-pad) + 60px);
}
/* The band below has to start clear of the scallop that hangs into it. */
.wave-below { padding-top: calc(var(--band-pad) + 20px); }

/* --- forms ------------------------------------------------------------------------------------ */
.gp-form p { margin: 0 0 1rem; }
.gp-form label { display: block; margin-bottom: 0.3rem; }
.gp-form label { font-size: 0.75rem; }        /* 12px, as measured */
.field-group-title { margin-bottom: 0.3rem; }
/* The original's "large" text step, used for the workshop invitation and the address. */
.large { font-size: var(--t-h3); }
.gp-form input, .gp-form textarea {
  font: 400 var(--t-body)/1.5 var(--font-body);
  width: 100%; padding: 8px 15px;
  border: 4px solid var(--cocoa); border-radius: 300px;
  background: var(--cream); color: var(--cocoa);
}
/* A multi-line field can't be a pill without the first line sitting outside it. */
.gp-form textarea { border-radius: 24px; resize: vertical; min-height: 100px; }
.form-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.form-row p { margin: 0; }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; }
.form-note { padding: 0.8em 1em; border: 1px solid currentColor; border-radius: 4px; }
.form-error { color: #8a2b12; }

.map { width: 100%; aspect-ratio: 534 / 828; border: 0; border-radius: 4px; }

/* --- subscribe form --------------------------------------------------------------------------- */
.subscribe-form { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.subscribe-form label { display: block; margin-bottom: 0.4rem; text-align: left; width: 100%; }
.subscribe-form input {
  font: 400 var(--t-body)/1.5 var(--font-body);
  width: 100%; padding: 8px 15px;
  border: 4px solid var(--cocoa); border-radius: 300px;
  background: var(--cream); color: var(--ink);
}
.subscribe-form label { font-size: 0.75rem; }
.subscribe-form > div { width: min(100%, 30rem); }

/* --- footer ------------------------------------------------------------------------------------ */
.siteftr { background: var(--sand); padding-block: var(--band-pad); }
.siteftr h2 { font-size: var(--t-h2); }
.siteftr h3 { margin-bottom: 0.6em; }
.siteftr ul { list-style: none; margin: 0; padding: 0; }
.siteftr li { padding: 0.2rem 0; }
.siteftr a { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}