/*
Theme Name:  Bracelets by Stephanie
Theme URI:   https://bracelets-by-stephanie.grantopsconsulting.com
Author:      GrantOps
Description: Sky blue, purple and yellow. Chunky, rounded, and unmistakably a toy. A standalone block theme.
Version:     0.2.0
Requires at least: 6.9
Requires PHP: 8.1
Text Domain: bbs
License:     Proprietary

STANDALONE block theme — no parent. Design system: paper base (never white),
plum ink (never black), yellow rationed to the CTA and reward moments only,
hard offset shadows (zero blur) so panels read as moulded plastic, subtle grain
over flat fills, chunky tight type, nothing sharper than a 12px radius.
*/

/* --------------------------------------------------------------------------
 * Box-sizing reset — LOAD-BEARING, not boilerplate.
 *
 * Without it, .bbs-container (width:100% + 25px side padding) computes under
 * content-box and renders 50px wider than every phone viewport: the whole page
 * scrolled sideways on real devices. border-box makes padding count INSIDE the
 * declared width, which is what every rule in this file assumes.
 * ------------------------------------------------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Opt out of Android's forced auto-darkening (Brave/Chrome/Samsung "dark
 * websites" modes). They rewrite our deliberate pastel palette AND skip form
 * controls inconsistently — on a real phone the letters input kept its white
 * background while its typed text was lightened to near-white: invisible.
 * This site is light by design; say so explicitly. */
:root {
	color-scheme: only light;
}


/* ============================================================
   1. Self-hosted fonts (WOFF2, variable). Paths are relative to
      this file at the theme root. font-display: swap.
      Baloo 2 has no italic and no 300 — neither is declared.
   ============================================================ */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/baloo2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/baloo2-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   2. Tokens. Short aliases mirror the theme.json presets so the
      component CSS stays readable. Grain is a tiny feTurbulence
      SVG data-URI (no blur, no external asset).
   ============================================================ */
:root {
  --paper: #f6f4fb;
  --sky: #7fd4f5;
  --sky-deep: #2e8fc4;
  --grape: #7a4fc4;
  --plum: #2e1b4a;
  --sunbeam: #ffc93c;
  --bubblegum: #ff8fc7;
  --mint: #9be8c8;

  --radius: 12px;
  --radius-pill: 999px;

  /* Hard offset shadows — ZERO blur. Moulded-plastic, not web-app. */
  --shadow-grape: 0 4px 0 var(--grape);
  --shadow-grape-lg: 0 6px 0 var(--grape);
  --shadow-plum: 0 4px 0 var(--plum);
  --shadow-plum-sm: 0 3px 0 var(--plum);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ============================================================
   3. Base
   ============================================================ */
html {
  scroll-behavior: smooth;
}
body {
  background-color: var(--paper);
  color: var(--plum);
  font-family: var(--wp--preset--font-family--nunito, "Nunito", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection {
  background: var(--sunbeam);
  color: var(--plum);
}
h1, h2, h3, h4 {
  font-family: var(--wp--preset--font-family--baloo, "Baloo 2", system-ui, sans-serif);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--plum);
}

/* Layout container — the sections paint edge to edge, content stays centred. */
.bbs-container {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.bbs-section {
  padding-block: clamp(2.75rem, 7vw, 5rem);
}

/* Grain overlay for large flat fills — ~4% opacity, sits above the fill,
   below the content, never intercepts clicks. */
.bbs-grain {
  position: relative;
  isolation: isolate;
}
.bbs-grain > * {
  position: relative;
  z-index: 1;
}
.bbs-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: 0.04;
  pointer-events: none;
  border-radius: inherit;
}

/* ============================================================
   4. Buttons — sunbeam CTA with a plum label (white-on-sunbeam is
      a hard WCAG fail, so it is never used). Grape hard shadow.
      Buttons PRESS INTO their shadow on :active.
   ============================================================ */
.bbs-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--wp--preset--font-family--baloo, "Baloo 2", system-ui, sans-serif);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  text-decoration: none;
  padding: 0.9rem 1.6rem;
  border: 3px solid var(--plum);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.15s ease;
  will-change: transform;
}
.bbs-btn--cta {
  background: var(--sunbeam);
  color: var(--plum);
  box-shadow: var(--shadow-grape-lg);
}
.bbs-btn--cta:hover {
  filter: brightness(1.03);
}
.bbs-btn--cta:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--grape);
}
.bbs-btn--secondary {
  background: var(--grape);
  color: var(--paper);
  box-shadow: var(--shadow-plum);
}
.bbs-btn--secondary:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--plum);
}
.bbs-btn__dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--bubblegum);
  border: 2px solid var(--plum);
  flex: 0 0 auto;
}

/* ============================================================
   5. Focus ring — 3px grape, 2px offset, on every interactive thing.
   ============================================================ */
a:focus-visible,
button:focus-visible,
.bbs-btn:focus-visible,
.bbs-nav-pill:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--grape);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ============================================================
   6. Header — compact, sticky-feeling.
   ============================================================ */
.bbs-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 3px solid var(--grape);
}
.bbs-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.7rem;
}
.bbs-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--wp--preset--font-family--baloo, "Baloo 2", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(1.15rem, 3.4vw, 1.6rem);
  line-height: 1;
  color: var(--plum);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.bbs-wordmark__bead {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--sky);
  border: 3px solid var(--plum);
  flex: 0 0 auto;
}
.bbs-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--sunbeam);
  color: var(--plum);
  font-family: var(--wp--preset--font-family--baloo, "Baloo 2", system-ui, sans-serif);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  padding: 0.6rem 1.1rem;
  border: 3px solid var(--plum);
  border-radius: var(--radius-pill);
  box-shadow: 0 3px 0 var(--grape);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.bbs-nav-pill:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--grape);
}

/* ============================================================
   7. Hero
   ============================================================ */
.bbs-hero {
  overflow: hidden;
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
.bbs-hero__arc {
  position: absolute;
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 92%);
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
}
.bbs-hero__arc svg {
  display: block;
  width: 100%;
  height: auto;
}
.bbs-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-top: clamp(3.5rem, 9vw, 6rem);
}
.bbs-h1 {
  font-size: clamp(2.35rem, 7.5vw, 4.25rem);
  margin: 0 0 1rem;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.bbs-sub {
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 1.75rem;
  max-width: 30ch;
  color: var(--plum);
}
.bbs-hero__art {
  display: flex;
  justify-content: center;
}
.bbs-jar {
  width: min(340px, 78vw);
}
.bbs-jar svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 0 rgba(46, 27, 74, 0.08));
}

/* ============================================================
   8. "How it works" panel
   ============================================================ */
.bbs-panel {
  background: var(--sky);
  border: 3px solid var(--grape);
  border-radius: var(--radius);
  box-shadow: var(--shadow-grape-lg);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.bbs-panel__title {
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  margin: 0 0 1.5rem;
  text-align: center;
}
.bbs-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
}
.bbs-step {
  text-align: center;
}
.bbs-step__glyph {
  width: 66px;
  height: 66px;
  margin: 0 auto 0.75rem;
  background: var(--paper);
  border: 3px solid var(--plum);
  border-radius: var(--radius);
  box-shadow: var(--shadow-plum-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bbs-step__glyph svg {
  width: 40px;
  height: 40px;
  display: block;
}
.bbs-step__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}
.bbs-step__line {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  color: var(--plum);
}

/* ============================================================
   9. "The beads have names" strip — grape band, paper text.
   ============================================================ */
.bbs-names {
  background: var(--grape);
  color: var(--paper);
}
.bbs-names__title {
  color: var(--paper);
  text-align: center;
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  margin: 0 0 1.75rem;
}
.bbs-chips {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.75rem, 2vw, 1.5rem);
  margin: 0 0 1.5rem;
}
.bbs-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}
.bbs-chip svg {
  width: 56px;
  height: 56px;
  display: block;
}
.bbs-chip__name {
  font-family: var(--wp--preset--font-family--nunito, "Nunito", sans-serif);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--paper);
  line-height: 1.2;
}
.bbs-names__line {
  text-align: center;
  color: var(--paper);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0;
}

/* ============================================================
   10. Honest note — mint panel, plum text.
   ============================================================ */
.bbs-note {
  background: var(--mint);
  border: 3px solid var(--plum);
  border-radius: var(--radius);
  box-shadow: var(--shadow-plum);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  max-width: 720px;
  margin-inline: auto;
}
.bbs-note__bea {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
}
.bbs-note__text {
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem);
  line-height: 1.4;
  margin: 0;
  color: var(--plum);
}

/* ============================================================
   11. Footer

   SELF-CONTAINED, on purpose. The footer template part is pulled in by the
   theme's own templates WITH className "bbs-footer", but WooCommerce's block
   templates (cart, checkout, single-product, archive-product, order-confirmation,
   product-search-results) reference it as a plain `{"slug":"footer"}` with NO
   className — so `.bbs-footer` never lands on the <footer> wrapper there. The
   footer's TEXT is near-white (--paper); with the dark background keyed only to
   `.bbs-footer`, those Woo pages rendered near-white text on the near-white
   paper body: invisible. The fix is to carry the dark band + light text on
   `.bbs-footer__band`, a div that lives INSIDE the template part markup and is
   therefore present on every page type regardless of the outer className.
   Do not move background/colour back onto `.bbs-footer` alone.
   ============================================================ */
.bbs-footer,
.bbs-footer__band {
  background: var(--plum);
  color: var(--paper);
}
.bbs-footer__inner {
  padding-block: clamp(2rem, 5vw, 3rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.bbs-footer__made {
  font-family: var(--wp--preset--font-family--baloo, "Baloo 2", system-ui, sans-serif);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--paper);
  margin: 0;
}
.bbs-footer__by {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--paper);
  opacity: 0.85;
  margin: 0;
}
.bbs-footer a {
  color: var(--sky);
  font-weight: 700;
  text-decoration: underline;
}
.bbs-footer a:hover {
  text-decoration: none;
}

/* ============================================================
   12. Generic page + index chrome (Design, Privacy, fallbacks)
   ============================================================ */
.bbs-page {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  min-height: 50vh;
}
.bbs-page .wp-block-post-title,
.bbs-page-title {
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0 0 1.5rem;
  text-align: center;
}
.bbs-softpanel {
  background: var(--paper);
  border: 3px solid var(--grape);
  border-radius: var(--radius);
  box-shadow: var(--shadow-grape);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.bbs-softpanel svg,
.bbs-softpanel img {
  width: 150px;
  height: auto;
  margin: 1rem auto 0;
  display: block;
}
.bbs-softpanel p {
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0;
}
.bbs-prose {
  max-width: 640px;
  margin-inline: auto;
}
.bbs-prose p {
  font-weight: 500;
  line-height: 1.6;
  margin: 0 0 1rem;
}

/* ============================================================
   13. 404
   ============================================================ */
.bbs-404 {
  text-align: center;
  padding-block: clamp(3rem, 8vw, 6rem);
}
.bbs-404 svg {
  width: min(280px, 70vw);
  height: auto;
  margin: 0 auto 1.5rem;
  display: block;
}
.bbs-404__title {
  font-size: clamp(2rem, 6vw, 3.25rem);
  margin: 0 0 0.75rem;
}
.bbs-404__text {
  font-weight: 600;
  font-size: 1.2rem;
  margin: 0 0 1.75rem;
}

/* ============================================================
   14. Responsive
   ============================================================ */
@media (max-width: 900px) {
  .bbs-hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: clamp(4.5rem, 22vw, 7rem);
  }
  .bbs-sub {
    margin-inline: auto;
  }
  .bbs-hero__art {
    order: 2;
    margin-top: 0.5rem;
  }
  .bbs-chips {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1.5rem;
  }
}
@media (max-width: 640px) {
  .bbs-steps {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.75rem;
  }
  .bbs-note {
    flex-direction: column;
    text-align: center;
  }
}
@media (max-width: 420px) {
  .bbs-chips {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   15. Reduced motion — kill the press-bounce and scroll easing,
      keep the colour changes.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .bbs-btn,
  .bbs-nav-pill {
    transition: filter 0.15s ease;
  }
  .bbs-btn:active,
  .bbs-nav-pill:active {
    transform: none;
  }
  * {
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
 * The jar fills itself — once, on load.
 *
 * A taste of the Phase-9 designer (where beads fly OUT of the jar into slots).
 * One orchestrated moment, then stillness. Uses the standalone `scale`
 * property, NOT `transform`: several beads are positioned by transform
 * ATTRIBUTES, and a CSS transform would silently replace them, teleporting
 * beads to the jar's corner. `scale` composes with attribute transforms.
 * ------------------------------------------------------------------------ */
/* The beads' RESTING state is visible, full stop. The pop-in lives entirely
 * under .bbs-jar--intro, which jar.js removes once the sequence has played.
 * v1 kept beads at scale:0 forever and relied on animation-fill-mode:forwards
 * to show them — and some Android engines discard offscreen animations to save
 * memory, so every scroll-back re-exposed the hidden base state: an EMPTY jar
 * that popped its beads in again on every pass (found by the owner's phone).
 * Persistent visual state must never live in an animation fill. */
@media (prefers-reduced-motion: no-preference) {
	.bbs-jar--intro .bbs-jar-bead {
		transform-box: fill-box;
		transform-origin: center;
		scale: 0;
		opacity: 0;
		animation: bbs-bead-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	}
	.bbs-jar--intro .bbs-jar-bead--1  { animation-delay: 0.10s; }
	.bbs-jar--intro .bbs-jar-bead--2  { animation-delay: 0.16s; }
	.bbs-jar--intro .bbs-jar-bead--3  { animation-delay: 0.22s; }
	.bbs-jar--intro .bbs-jar-bead--4  { animation-delay: 0.28s; }
	.bbs-jar--intro .bbs-jar-bead--5  { animation-delay: 0.34s; }
	.bbs-jar--intro .bbs-jar-bead--6  { animation-delay: 0.40s; }
	.bbs-jar--intro .bbs-jar-bead--7  { animation-delay: 0.46s; }
	.bbs-jar--intro .bbs-jar-bead--8  { animation-delay: 0.52s; }
	.bbs-jar--intro .bbs-jar-bead--9  { animation-delay: 0.58s; }
	.bbs-jar--intro .bbs-jar-bead--10 { animation-delay: 0.64s; }
	.bbs-jar--intro .bbs-jar-bead--11 { animation-delay: 0.70s; }
	/* Bea arrives last, and makes an entrance. */
	.bbs-jar--intro .bbs-jar-bead--12 { animation-delay: 0.85s; animation-duration: 0.6s; }
}
@keyframes bbs-bead-pop {
	0%   { scale: 0;    opacity: 0; }
	70%  { scale: 1.12; opacity: 1; }
	100% { scale: 1;    opacity: 1; }
}

/* --------------------------------------------------------------------------
 * Jar jiggle — poke the jar (tap) or shake the phone (Android).
 * translate/rotate are the STANDALONE properties, composing with the beads'
 * transform attributes exactly like the load animation's `scale` does.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.bbs-jar--shake .bbs-jar-bead {
		animation: bbs-jiggle 0.6s ease-in-out;
	}
	.bbs-jar--shake .bbs-jar-bead:nth-child(even) {
		animation-name: bbs-jiggle-b;
		animation-delay: 0.04s;
	}
	.bbs-jar--shake .bbs-jar-bead:nth-child(3n) {
		animation-delay: 0.08s;
	}
}
@keyframes bbs-jiggle {
	0%, 100% { translate: 0 0; rotate: 0deg; }
	25%      { translate: 2px -4px; rotate: 4deg; }
	55%      { translate: -3px 1px; rotate: -3deg; }
	80%      { translate: 1px -2px; rotate: 2deg; }
}
@keyframes bbs-jiggle-b {
	0%, 100% { translate: 0 0; rotate: 0deg; }
	25%      { translate: -2px -3px; rotate: -4deg; }
	55%      { translate: 3px 1px; rotate: 3deg; }
	80%      { translate: -1px -3px; rotate: -2deg; }
}