/* ============================================================
   site.css — Blooms & Petals Florist, page-specific layout.
   Reuses framework components; adds only what's unique to this
   site. Custom classes are prefixed .b- to stay out of the
   shared component namespace. Every value still a token.
   
   Type system note: This design deliberately pairs two serifs
   (Playfair Display + Lora) to create a warm, romantic, editorial
   mood suitable for a florist. Hierarchy is maintained via:
   - Weight: headings use Playfair at 600-700, body uses Lora at 400
   - Leading: headings use var(--leading-tight), body uses ~1.6
   - Line length: body text constrained to var(--max-width-prose) 
   ============================================================ */

/* Display face on headings + the brand wordmark. */
h1, h2, h3, .b-display {
  font-family: var(--font-display);
  font-weight: 700;  /* Heavy weight for display face to create contrast */
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);  /* Tight leading for display */
}
.nav__brand { 
  font-family: var(--font-display); 
  font-weight: 700; 
  letter-spacing: 0.02em; 
}
/* The bloom accent in the wordmark - uses --brand-bloom-deep which 
   clears AA on white, unlike --brand-bloom which is decorative only */
.b-mark { color: var(--brand-bloom-deep); }

/* Body text explicitly set to Lora 400 to maintain hierarchy
   with Playfair Display headings. Leading remains at default
   var(--leading-normal) = 1.6 for readability. */
body {
  font-weight: 400;  /* Light weight for serif body to contrast with heavy display */
}

/* Eyebrow tuned for this brand: sage, with a leaf flourish. */
.eyebrow { 
  color: var(--color-brand); 
  display: inline-flex; 
  align-items: center; 
  gap: var(--space-2);
  text-transform: uppercase; 
  letter-spacing: 0.12em; 
  font-size: var(--text-xs); 
  font-weight: var(--weight-bold); 
}
.eyebrow::before { 
  content: "🌿"; 
  font-size: var(--text-sm); 
}

/* ---- Bloom stroke: the signature divider --------------------
   A gentle floral wave echoing petals. */
.b-stroke { 
  display: block; 
  width: 100%; 
  height: 32px; 
  margin: var(--space-8) 0; 
  color: var(--brand-leaf);
}
.b-stroke svg { width: 100%; height: 100%; }

/* ---- Hero --------------------------------------------------
   Text left; a delicate SVG of blooming flowers right.
   Stacks on mobile with the art behind the words. */
.b-hero {
  position: relative; 
  overflow: hidden;
  background: 
    radial-gradient(120% 90% at 85% 8%, var(--brand-bloom-soft) 0%, transparent 55%),
    linear-gradient(180deg, #F5F9F4 0%, var(--color-bg) 70%);
  border-bottom: 1px solid var(--color-border);
}
.b-hero__inner {
  display: grid; 
  gap: var(--space-12); 
  align-items: center;
  grid-template-columns: 1.1fr 0.9fr;
  padding-block: var(--space-24) var(--space-16);
}
.b-hero__title { font-size: clamp(2.6rem, 6vw, var(--text-4xl)); margin: var(--space-4) 0; }
.b-hero__title em { font-style: italic; color: var(--color-brand); }
.b-hero__lead { 
  font-size: var(--text-lg); 
  color: var(--color-text-muted); 
  max-width: 34rem; 
}
.b-hero__actions { 
  display: flex; 
  gap: var(--space-4); 
  flex-wrap: wrap; 
  margin-top: var(--space-8); 
}
.b-hero__art { 
  position: relative; 
  display: grid; 
  place-items: center; 
  min-height: 18rem; 
}
.b-hero__art svg { width: 100%; max-width: 28rem; height: auto; }
@media (max-width: 820px) {
  .b-hero__inner { 
    grid-template-columns: 1fr; 
    padding-block: var(--space-16) var(--space-12); 
  }
  .b-hero__art { order: -1; opacity: 0.95; }
}

/* A quiet line of what's on offer */
.b-offer { 
  display: flex; 
  flex-wrap: wrap; 
  gap: var(--space-3) var(--space-6); 
  align-items: center;
  color: var(--color-text-muted); 
  font-size: var(--text-sm); 
}
.b-offer span { display: inline-flex; align-items: center; gap: var(--space-2); }
.b-offer .ico { color: var(--color-brand); }

/* ---- Section scaffolding ----------------------------------- */
.b-section { padding-block: var(--space-16); }
.b-section__head { max-width: var(--max-width-prose); margin-bottom: var(--space-12); }
.b-section__head p { color: var(--color-text-muted); margin-top: var(--space-3); }

/* ---- Arrangement cards (for the gallery) --------------------- */
.b-arrangements { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.b-arrangement { display: grid; gap: var(--space-3); align-content: start; }
.b-arrangement__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.b-arrangement__name { font-family: var(--font-display); font-size: var(--text-xl); }
.b-arrangement__body { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- Price menu / Order form ------------------------------- */
.b-menu { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.b-menu caption { text-align: left; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.b-menu th, .b-menu td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.b-menu thead th { 
  font-family: var(--font-sans); 
  font-weight: var(--weight-medium); 
  color: var(--color-text-muted);
  text-transform: uppercase; 
  letter-spacing: 0.06em; 
  font-size: var(--text-xs); 
}
.b-menu tbody tr:hover { background: var(--color-surface); }
.b-menu__price { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; font-weight: var(--weight-medium); }
.b-menu__time { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-text-muted); }
.b-menu__name { font-weight: var(--weight-medium); }
@media (max-width: 640px) { .b-menu .b-hide-sm { display: none; } }

/* ---- Order form specific styles ----------------------------- */
.b-order { display: grid; gap: var(--space-12); grid-template-columns: 1fr 1.2fr; align-items: start; }
@media (max-width: 820px) { .b-order { grid-template-columns: 1fr; gap: var(--space-8); } }

.b-order__info { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-6); }
.b-order__info h3 { margin-bottom: var(--space-3); }
.b-order__info p { color: var(--color-text-muted); margin-bottom: var(--space-2); }

.b-form { display: grid; gap: var(--space-6); }
.b-form__row { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .b-form__row { grid-template-columns: 1fr; } }

/* ---- Delivery zones ------------------------------------------ */
.b-delivery { background: var(--color-surface-2); border-radius: var(--radius-md); padding: var(--space-6); }
.b-delivery h3 { margin-bottom: var(--space-4); }
.b-delivery p { color: var(--color-text-muted); margin-bottom: var(--space-4); }
.b-zones { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.b-zone { 
  display: inline-flex; 
  align-items: center; 
  gap: var(--space-2); 
  padding: var(--space-2) var(--space-4); 
  background: var(--color-surface); 
  border: 1px solid var(--color-border); 
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
}
.b-zone::before { content: "📍"; }

/* ---- Team -------------------------------------------------- */
.b-team { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.b-tech { display: grid; gap: var(--space-3); justify-items: start; }
.b-tech__avatar {
  width: 4.5rem; 
  height: 4.5rem; 
  border-radius: var(--radius-full); 
  display: grid; 
  place-items: center;
  font-family: var(--font-display); 
  font-size: var(--text-2xl); 
  color: var(--color-brand);
  background: radial-gradient(120% 120% at 30% 20%, var(--brand-leaf), var(--color-surface-2));
  border: 1px solid var(--color-border);
}
.b-tech__name { font-family: var(--font-display); font-size: var(--text-lg); }
.b-tech__role { color: var(--color-brand); font-size: var(--text-sm); }
.b-tech__bio { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- Visit ------------------------------------------------- */
.b-visit { display: grid; gap: var(--space-12); grid-template-columns: 1fr 1.2fr; align-items: start; }
@media (max-width: 820px) { .b-visit { grid-template-columns: 1fr; } }
.b-hours { display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.b-hours div { 
  display: flex; 
  justify-content: space-between; 
  gap: var(--space-6); 
  padding-block: var(--space-1);
  border-bottom: 1px dashed var(--color-border); 
}
.b-hours dt { color: var(--color-text); }
.b-hours dd { margin: 0; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ---- Footer branding ---------------------------------------- */
.b-footer-brandname { font-family: var(--font-display); font-weight: 700; }

/* ---- Motion: pre-hide animated elements, JS reveals them -----
   `.anim` is added to <html> by the head guard ONLY when motion is
   welcome (not prefers-reduced-motion) and JS runs. motion.js then
   reveals these via Web Animations API. With no JS, a script error,
   or reduced motion, `.anim` is absent/cleared and nothing here applies
   — full content remains visible. */
html.anim [data-reveal],
html.anim [data-reveal-group] > *,
html.anim [data-reveal-load] > * { opacity: 0; }

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Subtle CSS transitions (per design reference) -----
   Fast (120-200ms) transitions on hover/focus add polish.
   Using the framework's motion tokens: var(--transition-fast) and
   var(--transition-base). These are user-initiated only. */

/* Cards hover with slight lift and shadow enhancement */
.card {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(94, 140, 97, 0.18);
}

/* Nav link hover */
.nav__links a:not(.btn) {
  transition: color var(--transition-fast);
}