/* A to Zoom — Shared Styles */
:root {
  /* Logo brand colors */
  --brand-purple:  #4d008d;   /* headings, links, primary buttons, focus */
  --brand-cyan:    #00acd8;   /* CTA card backgrounds, accents */
  --brand-magenta: #c92c99;   /* errors, required marks, CTAs, link hover */
  --brand-teal:    #2bd8c2;   /* decorative only (dots, dashed borders) */
  --brand-yellow:  #eddb00;   /* decorative only (dots) */

  /* Maple wood neutrals */
  --maple-bg:    #fdfbf7;    /* page background — warm "white wall" */
  --maple-cream: #f8f1e4;    /* tinted surface panels */
  --maple-light: #efe2cc;    /* hairline dividers, card edges */
  --maple:       #d9bd94;    /* nav border, input borders */
  --maple-ink:   #7a5a36;    /* warm-brown readable text: footer, warnings */

  /* Candy-pastel tints of the brand colors (storefront redesign, 2026-07) */
  --tint-pink:     #fdeef8;   /* soft magenta */
  --tint-lavender: #f3ecfb;   /* soft purple */
  --tint-sky:      #e9f7fc;   /* soft cyan */
  --tint-mint:     #e8fbf6;   /* soft teal */
  --tint-butter:   #fdf9dc;   /* soft yellow */

  /* Semantic */
  --link:       var(--brand-purple);
  --link-hover: var(--brand-magenta);
  --error:      var(--brand-magenta);
  --error-bg:   #fbeef7;
  --warning:    var(--maple-ink);
  --success:    #0e8a76;     /* deepened logo teal — raw teal unreadable as text */

  /* Legacy aliases — remove once cached pages have decayed */
  --purple: var(--brand-purple);
  --pink:   var(--brand-magenta);
  --orange: var(--warning);
  --green:  var(--success);
  --lilac:  var(--brand-teal);
  --yellow: var(--brand-yellow);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: 'Baloo 2', cursive, sans-serif;
  background: var(--maple-bg);
  color: #333;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--link-hover);
}

/* Navigation */
.site-nav {
  width: 100%;
  max-width: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 3px solid var(--maple);
}

.site-nav .nav-logo {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
}

.site-nav .nav-logo img {
  height: 72px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 0.75rem;
}

.nav-links a {
  font-size: 0.95rem;
  font-weight: 700;
  color: #555;
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--brand-purple);
}

.nav-links .nav-disabled {
  font-size: 0.95rem;
  font-weight: 700;
  color: #bbb;
  cursor: default;
}

.nav-instagram {
  display: flex;
  align-items: center;
  color: #555;
  transition: color 0.2s;
}

.nav-instagram:hover {
  color: #e1306c;
}

.nav-instagram svg {
  width: 24px;
  height: 24px;
}

/* Decorative dots */
.dots {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}

.dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.dots span:nth-child(1) { background: var(--brand-yellow); }
.dots span:nth-child(2) { background: var(--brand-cyan); }
.dots span:nth-child(3) { background: var(--brand-magenta); }
.dots span:nth-child(4) { background: var(--brand-teal); }
.dots span:nth-child(5) { background: var(--brand-purple); }

/* Footer */
.site-footer {
  width: 100%;
  max-width: 600px;
  padding: 1.5rem;
  border-top: 1px solid var(--maple-light);
  text-align: center;
  font-size: 0.95rem;
  color: var(--maple-ink);
}