/* ═══════════════════════════════════════════════════════════════
   CAMPAIGN HEADER — build spec, 13 Aug. See render.js's
   renderCampaignHeader()/wireCampaignHeader().

   #403847 is Roselit Beauty's own brand colour, not a new site
   accent — scoped entirely to this component. Do not pull it into
   tokens.css or reuse it elsewhere; a different campaign gets a
   different colour here later.
   ═══════════════════════════════════════════════════════════════ */

.campaign-header {
  --ch-accent: #403847;
  --ch-accent-a10: rgba(64, 56, 71, 0.10);
  --ch-accent-a24: rgba(64, 56, 71, 0.24);

  background: var(--surface);
  border: 0.5px solid var(--ch-accent-a24);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--e2), var(--highlight-top);
}

/* Accent rule: square top (the container's own overflow:hidden clips
   it to the shell's curve up there anyway — see the note above .card
   in components.css), rounded bottom, so the colour tab curves back
   into the row instead of ending on a hard edge. */
.campaign-header::before {
  content: '';
  display: block;
  height: 3px;
  background: var(--ch-accent);
  border-radius: 0 0 var(--radius) var(--radius);
}

.campaign-header__row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease);
}
.campaign-header__row:hover { background: var(--ch-accent-a10); }

.campaign-header__left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.campaign-header__logo {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: var(--radius-sm);
  background: var(--ch-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.campaign-header__logo img { width: 100%; height: 100%; object-fit: contain; padding: 9px; }
.campaign-header__logo-fallback {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-lead);
  color: var(--text-on-brand);
}

.campaign-header__id { display: flex; flex-direction: column; gap: 2px; }
.campaign-header__brand { font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); }
.campaign-header__tagline { font-size: var(--fs-small); color: var(--text-secondary); }

.campaign-header__right {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

/* Dark stat chip — deliberately near-black, not a tint of the brand
   accent: it's meant to read as a data readout (like an Ads Manager
   card), a different register from the warm plum used everywhere
   else in this component. */
.campaign-header__metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background: #1c1c1e;
}
.campaign-header__metric-label {
  font-size: var(--fs-micro);
  color: #9a9aa2;
}
.campaign-header__metric-value {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 700;
  color: #ffffff;
}
/* Success colour, deliberately NOT the site's retired --green-*
   tokens (see tokens.css). A plain, standard emerald, local to
   this file. */
.campaign-header__status { color: #2ecc71; }

.campaign-header__toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ch-accent);
  white-space: nowrap;
}
.campaign-header__chevron {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-base) var(--ease);
}
.campaign-header[data-open="true"] .campaign-header__chevron { transform: rotate(180deg); }

/* -- EXPANDED BODY — same 0fr→1fr animation as .expand elsewhere --- */

.campaign-header__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.campaign-header[data-open="true"] .campaign-header__panel { grid-template-rows: 1fr; }
.campaign-header__inner { overflow: hidden; }

.campaign-header__section {
  padding: var(--sp-4) var(--sp-5);
  border-top: 0.5px solid var(--ch-accent-a24);
}
.campaign-header__section-title {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}
.campaign-header__section p { margin: 0; font-size: var(--fs-small); color: var(--text-secondary); }

.campaign-header__bullets { display: grid; gap: var(--sp-1); }
.campaign-header__bullets li {
  position: relative;
  padding-left: var(--sp-4);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.campaign-header__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--ch-accent);
}

.campaign-header__footer {
  padding: var(--sp-3) var(--sp-5) var(--sp-4);
  border-top: 0.5px solid var(--ch-accent-a24);
}
.campaign-header__footer a,
.campaign-header__footer-ph {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  font-weight: 600;
}
.campaign-header__footer a { color: var(--ch-accent); }
.campaign-header__footer a:hover { text-decoration: underline; }
.campaign-header__footer-ph { color: var(--text-faint); }
.campaign-header__footer svg { width: 14px; height: 14px; }

/* -- MOBILE — metric cards + toggle wrap below the logo block,
   row stays one fully tappable button ------------------------------ */

@media (max-width: 560px) {
  .campaign-header__right { width: 100%; justify-content: space-between; }
}