/* =========================================================================
   Shared hand-drawn primitives used across blocks:
   ribbon banners, sketchy buttons, comic speech boxes, section helpers,
   scroll-reveal animations.
   ========================================================================= */

/* ---- Section scaffolding ------------------------------------------------ */
.bloom-section { position: relative; overflow: hidden; }
.bloom-section__inner {
  position: relative;
  z-index: 2;
  width: min(100% - 48px, var(--bloom-content-max));
  margin-inline: auto;
}

/* ---- Ribbon banner (SVG-shaped, marker text) ---------------------------
   A forked banner: a cream/white body with a rough ink outline (faked with a
   slightly larger clipped layer behind), plus a soft drop "underside".
   Variants set the body fill + text colour.
   ------------------------------------------------------------------------- */
.bloom-ribbon {
  --rib-fill: var(--bloom-cream);
  --rib-ink:  var(--bloom-ink);
  --rib-text: var(--bloom-ink);
  position: relative;
  display: inline-block;
  padding: 12px 62px;
  transform: rotate(-1.4deg);
  isolation: isolate;
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,.20));
}
/* Forked-banner shape: ink outline (slightly larger) behind a fill layer.
   Shallow notch (9%) so longer labels sit clear of the forked ends. */
.bloom-ribbon::before,
.bloom-ribbon::after {
  content: "";
  position: absolute;
  clip-path: polygon(0% 0%, 9% 50%, 0% 100%, 100% 100%, 91% 50%, 100% 0%);
}
.bloom-ribbon::before { inset: -3px; background: var(--rib-ink);  z-index: 0; }
.bloom-ribbon::after  { inset: 0;   background: var(--rib-fill); z-index: 1; }
.bloom-ribbon__text {
  position: relative;
  z-index: 2;
  font-family: var(--bloom-font-marker);
  color: var(--rib-text);
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .5px;
}

.bloom-ribbon--cream  { --rib-fill: var(--bloom-cream); --rib-text: var(--bloom-ink); }
.bloom-ribbon--white  { --rib-fill: #ffffff; --rib-text: var(--bloom-forest); }
.bloom-ribbon--forest { --rib-fill: #ffffff; --rib-text: var(--bloom-forest); --rib-ink: #0a3a23; }
.bloom-ribbon--green  { --rib-fill: var(--bloom-green); --rib-text: #ffffff; --rib-ink: #0a3a23; }

/* ---- Real hand-drawn banner graphics (PNG ribbons with baked-in text) ---
   No `width` here on purpose: each block sets its own banner width, and this
   file loads AFTER the block CSS, so a width here would override it. */
.bloom-banner { display: block; max-width: 100%; height: auto; }
.bloom-banner--center { margin-inline: auto; }

/* ---- Sketchy button ----------------------------------------------------- */
.bloom-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--bloom-font-body);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: .03em;
  text-decoration: none;
  color: var(--bloom-forest);
  background: var(--bloom-cream);
  padding: 12px 26px;
  border: 2.5px solid var(--bloom-ink);
  border-radius: 30px 26px 30px 26px / 26px 30px 26px 30px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.22);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.bloom-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 rgba(0,0,0,.25); }
.bloom-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(0,0,0,.22); }
.bloom-btn--green { background: var(--bloom-green); color:#fff; }
.bloom-btn--leaf  { background: var(--bloom-green); color:#fff; border-radius: 16px; }

/* ---- Comic speech / note box (rough double border) ---------------------- */
.bloom-speech {
  position: relative;
  background: #fff;
  border: 3px solid var(--bloom-ink);
  border-radius: 20px 22px 19px 23px / 22px 19px 23px 20px;
  padding: 22px 26px;
  box-shadow: 6px 7px 0 rgba(0,0,0,.18), inset 0 0 0 2px #fff, inset 0 0 0 4px rgba(0,0,0,.08);
}
.bloom-speech--quote::before {
  content: "\201C";
  font-family: var(--bloom-font-marker);
  position: absolute;
  top: -6px; left: 14px;
  font-size: 2.4rem;
  color: var(--bloom-green);
}

/* ---- Doodles --------------------------------------------------------------
   Inline by default (icons inside lists/buttons/headings). Decorative scatter
   doodles set their own `position:absolute` via their block-specific class. */
.bloom-doodle { display: inline-block; vertical-align: middle; pointer-events: none; }

/* ---- Scroll-reveal ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .bloom-fade-up { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
  .bloom-fade-up.is-in { opacity: 1; transform: none; }
}

/* ---- Logo lockup -------------------------------------------------------- */
.bloom-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--bloom-forest); text-decoration: none; }
.bloom-logo__mark { color: var(--bloom-green); flex: none; }
.bloom-logo__words { display: inline-flex; flex-direction: column; line-height: 1; }
.bloom-logo__name {
  font-family: var(--bloom-font-marker);
  color: var(--bloom-forest);
  letter-spacing: 1px;
  line-height: .9;
}
.bloom-logo__sub {
  font-family: var(--bloom-font-body);
  font-weight: 500;
  color: var(--bloom-green-d);
  letter-spacing: .42em;
  text-transform: uppercase;
  margin-top: 2px;
}
.bloom-logo--sm .bloom-logo__mark { width: 30px; height: 30px; }
.bloom-logo--sm .bloom-logo__name { font-size: 1.7rem; }
.bloom-logo--sm .bloom-logo__sub  { font-size: .46rem; }

.bloom-logo--lg .bloom-logo__mark { width: 62px; height: 62px; }
.bloom-logo--lg .bloom-logo__name { font-size: clamp(3rem, 7vw, 5.2rem); }
.bloom-logo--lg .bloom-logo__sub  { font-size: clamp(.7rem, 1.4vw, 1rem); letter-spacing: .5em; }

/* ---- Small shared bits -------------------------------------------------- */
.bloom-eyebrow {
  font-family: var(--bloom-font-hand);
  font-size: 1.2rem;
  color: var(--bloom-forest);
}
.bloom-display {
  font-family: var(--bloom-font-marker);
  line-height: .98;
  color: var(--bloom-forest);
}