/* ===========================================================================
   Daybreak theme — The Light We Carry
   Design tokens + signature components from new_ui_theme/Daybreak-Theme-Spec.md.
   The Tailwind CLI build (tailwind.css) handles layout utilities; this file owns
   the pieces that are awkward in pure utilities: the conic brand mark, exact
   shadows, story cards, the hero floating UI, and motion. Loaded after tailwind.css.
   =========================================================================== */

:root {
  /* Brand */
  --coral:        #FF6B4A;
  --coral-deep:   #E8512F;
  --peach:        #FFE4D6;
  --cream:        #FFF6EF;
  --sky:          #CFE6F2;

  /* Neutrals */
  --ink:          #2A2320;
  --soft:         #857A72;
  --line:         #F0DACE;
  --white:        #FFFFFF;

  /* Radius */
  --r-pill:       999px;
  --r-card:       24px;
  --r-frame:      26px;
  --r-photo:      30px;
  --r-sm:         20px;

  /* Shadow */
  --sh-cta:       0 12px 26px rgba(255, 107, 74, .30);
  --sh-card:      0 16px 40px rgba(20, 20, 40, .07);
  --sh-card-hov:  0 28px 60px rgba(232, 81, 47, .18);
  --sh-float:     0 20px 44px rgba(20, 20, 40, .16);
  --sh-photo:     0 30px 60px rgba(232, 81, 47, .22);

  /* Easing */
  --ease-out:     cubic-bezier(.2, .7, .3, 1);
}

/* Base — Tailwind sets layout; keep the typeface warm and the body cream. */
body {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

/* --- Brand mark: coral conic circle with a cream centre punch-out --- */
.brand-mark {
  display: inline-block;
  width: var(--mark-size, 30px);
  height: var(--mark-size, 30px);
  border-radius: 50%;
  background: conic-gradient(from 200deg, #FF6B4A, #FFB36B, #FF6B4A);
  position: relative;
  flex: none;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: calc(var(--mark-size, 30px) * 0.23);
  border-radius: 50%;
  background: var(--cream);
}
/* On white surfaces (footer/admin) the punch-out should read as white. */
.brand-mark--on-white::after { background: var(--white); }

/* --- Eyebrow --- */
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--coral);
}

/* --- Buttons --- */
.btn-primary {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  border: none;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1;
  box-shadow: var(--sh-cta);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.btn-primary:hover { background: var(--coral-deep); box-shadow: 0 14px 30px rgba(232, 81, 47, .34); }

.btn-secondary {
  display: inline-block;
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--line);
  padding: 15px 26px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out);
}
.btn-secondary:hover { border-color: var(--coral); color: var(--coral-deep); }

.cta-pill {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  border: none;
  padding: 11px 20px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--sh-cta);
  cursor: pointer;
  font-family: inherit;
  transition: background .25s var(--ease-out);
}
.cta-pill:hover { background: var(--coral-deep); }

/* --- Role tag / chip --- */
.role-tag {
  display: inline-block;
  background: var(--peach);
  color: var(--coral-deep);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
}

/* --- Story card --- */
.story-card {
  background: #fff;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
  display: flex;
  flex-direction: column;
}
.story-card:hover { transform: translateY(-8px); box-shadow: var(--sh-card-hov); }

.story-card .media {
  height: 180px;
  overflow: hidden;
}
.story-card .media > * {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 54px;
  font-weight: 800;
  color: rgba(255, 255, 255, .85);
  object-fit: cover;
  object-position: top;
  transition: transform .5s ease;
}
.story-card:hover .media > * { transform: scale(1.07); }

.story-card .body { padding: 20px 22px 24px; }
.story-card .read-more {
  margin-top: 16px;
  display: inline-block;
  font-weight: 700;
  font-size: 14px;
  color: var(--coral);
}
.story-card .read-more:hover { color: var(--coral-deep); }

/* Media-band gradient helpers (cards without a photo rotate through these). */
.media--warm { background: linear-gradient(150deg, #FFB99D, #FF8264); }
.media--sky  { background: linear-gradient(150deg, #9BD0E6, #5BA7C9); }
.media--gold { background: linear-gradient(150deg, #FFD27A, #F2A65A); }

/* --- Hero photo + caption pill --- */
.hero-photo {
  position: relative;
  height: 420px;
  border-radius: var(--r-photo);
  background: linear-gradient(150deg, #FFB99D, #FF8264 40%, #FFCF6B);
  box-shadow: var(--sh-photo);
  overflow: hidden;
}
.hero-photo .face {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 70% at 50% 35%, rgba(255, 255, 255, .35), transparent 60%);
}
.hero-photo .caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: rgba(255, 255, 255, .92);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--coral-deep);
}

/* --- Floating keyword chips --- */
.float-chip {
  position: absolute;
  background: #fff;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--sh-float);
  color: var(--coral);
}
.float-chip--k2 { color: #3E8FB0; }

/* --- Hero testimonial stack ---
   A warm gradient "glow" backdrop with a staggered stack of white testimonial
   cards floating over it. Replaces the empty single-photo placeholder. */
.hero-glow {
  position: absolute;
  inset: -10px;
  border-radius: var(--r-photo);
  background: linear-gradient(150deg, #FFB99D, #FF8264 45%, #FFCF6B);
  box-shadow: var(--sh-photo);
  z-index: 0;
}

.testimonial {
  background: #fff;
  border-radius: var(--r-sm);
  padding: 18px;
  box-shadow: var(--sh-float);
}
.testimonial .row { display: flex; align-items: center; gap: 11px; }
.testimonial .av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  flex: none;
}
.testimonial p { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: #4a443e; }

/* Avatar gradients rotate so a stack of cards stays varied. */
.av--warm { background: linear-gradient(135deg, #FFB99D, #FF8264); }
.av--sky  { background: linear-gradient(135deg, #8FD0E8, #5BA7C9); }
.av--gold { background: linear-gradient(135deg, #FFD27A, #F2A65A); }

/* --- Motion --- */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal      { animation: reveal .7s var(--ease-out) both; }
  .float-chip--k1 { animation: floaty 4s ease-in-out infinite; }
  .float-chip--k2 { animation: floaty 5s ease-in-out infinite .6s; }
}
@keyframes reveal  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes floaty  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floaty2 { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-14px) rotate(-3deg); } }