/* ============================================================================
   RA promo top bar · scoped CSS — RA LAB build (installed 2026-08-19)
   Source: the live bar on retouchingacademy.com, captured 2026-08-19.
   Identical to RA's file EXCEPT the Basel-specific theme-integration rules
   (.topbar-wrapp / .main-header) are removed per README-RA-LAB-INSTALL.md
   step 4 — the Lab's native MTS bar is disabled and the Lab's v2 header
   (.brpdp-h) is in normal flow, so no header repositioning is needed.

   Every selector sits under .brpdp-tb, so the block cannot leak into the theme
   or inherit from it. The bar is its own container (container-type:
   inline-size), so it restyles by its OWN width, not the viewport.
   ============================================================================ */

.brpdp-tb {
  /* --- ground and ink --- */
  --brpdp-ground: #7A2A24;          /* oxblood */
  --brpdp-ink-on-ground: #F5F1EA;   /* cream, ~8.6:1 on oxblood */
  --brpdp-label: #E3B4A0;           /* light terra, ~5.4:1 on oxblood */
  --brpdp-dot: #D08C55;             /* warm gold accent */
  /* --- CTA --- */
  --brpdp-cta-bg: #FBF8F2;
  --brpdp-cta-ink: #29241C;
  --brpdp-cta-width: 146px;
  --brpdp-cta-height: 46px;
  /* --- structure --- */
  --brpdp-max: 1364px;
  --brpdp-pad-x: clamp(16px, 3cqi, 40px);
  --brpdp-pad-y: 11px;
  --brpdp-gap: clamp(16px, 2.6cqi, 34px);
  --brpdp-radius-pill: 999px;
  /* --- type --- */
  --brpdp-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brpdp-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --brpdp-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  /* --- motion --- */
  --brpdp-ease: cubic-bezier(.32, .08, .24, 1);

  container-type: inline-size;
  width: 100%;
  background: var(--brpdp-ground);
  position: relative;
  z-index: 68;
  box-shadow: 0 3px 10px -4px rgba(24, 20, 16, 0.45);
}

.brpdp-tb__shell {
  max-width: var(--brpdp-max);
  margin: 0 auto;
  padding: var(--brpdp-pad-y) var(--brpdp-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brpdp-gap);
}

/* --- eyebrow ------------------------------------------------------------- */
.brpdp-tb__eyebrow {
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  white-space: nowrap;
}
.brpdp-tb__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--brpdp-dot);
}
.brpdp-tb__label {
  font-family: var(--brpdp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brpdp-label);
}

/* --- message ------------------------------------------------------------- */
.brpdp-tb__msg {
  flex: 1 1 auto;
  margin: 0;
  text-align: center;
  text-wrap: pretty;
  font-family: var(--brpdp-sans);
  font-size: clamp(14.5px, 1.35cqi, 17px);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.35;
  color: var(--brpdp-ink-on-ground);
}
.brpdp-tb__accent {
  font-family: var(--brpdp-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: 0;
  color: var(--brpdp-ink-on-ground);
}

/* --- CTA ----------------------------------------------------------------- */
.brpdp-tb__action { flex: none; display: flex; }
.brpdp-tb__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: var(--brpdp-cta-width);
  height: var(--brpdp-cta-height);
  padding: 0;
  border-radius: var(--brpdp-radius-pill);
  background: var(--brpdp-cta-bg);
  /* label colour is locked: the theme's own a { color } would otherwise force
     dark-on-dark or light-on-light here */
  color: var(--brpdp-cta-ink) !important;
  font-family: var(--brpdp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 220ms var(--brpdp-ease), box-shadow 220ms var(--brpdp-ease);
}
.brpdp-tb__cta:hover,
.brpdp-tb__cta:focus-visible {
  color: var(--brpdp-cta-ink) !important;
  transform: translateY(-1px);
  box-shadow: 0 9px 20px -9px rgba(24, 20, 16, 0.6);
}
.brpdp-tb__arrow {
  font-family: var(--brpdp-sans);
  font-size: 15px;
  line-height: 1;
}

/* --- focus --------------------------------------------------------------- */
.brpdp-tb :focus-visible {
  outline: 2px solid var(--brpdp-ink-on-ground);
  outline-offset: 3px;
  border-radius: var(--brpdp-radius-pill);
}

/* ============================================================================
   STACKED STATE
   Below the width where eyebrow + message + CTA stop fitting one line, the bar
   becomes a two-row grid: eyebrow left and CTA right on the top row, message
   centred on its own full-width row underneath.

   940px is where the shipped copy stops fitting. If you change the message
   length, move this one number.
   ============================================================================ */
@container (max-width: 940px) {
  .brpdp-tb__shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 10px;
    align-items: center;
    justify-content: stretch;
    padding-top: 13px;
    padding-bottom: 14px;
  }
  .brpdp-tb__eyebrow { grid-column: 1; grid-row: 1; justify-self: start; }
  .brpdp-tb__action { grid-column: 2; grid-row: 1; justify-self: end; }
  .brpdp-tb__msg { grid-column: 1 / -1; grid-row: 2; flex: 0 1 auto; }
}

/* Small phones: the label and the pill step down so the top row still fits 390px */
@container (max-width: 430px) {
  .brpdp-tb { --brpdp-cta-width: 128px; }
  .brpdp-tb__label { font-size: 10px; letter-spacing: 0.12em; }
  .brpdp-tb__cta { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .brpdp-tb__cta { transition: none; }
}

/* ============================================================================
   ROTATION + THEME INTEGRATION
   ============================================================================ */

/* --- slot machinery ------------------------------------------------------
   All four variants ship in the markup so the page cache cannot freeze one.
   Every slot is hidden; promo-bar.js adds .is-active to exactly one.
   ------------------------------------------------------------------------ */
.brpdp-tb__slot { display: none; }
.brpdp-tb__slot.is-active { display: block; }

/* Before JS resolves the slot the bar has no content and would be 0px tall,
   which shifts the page. Reserve the shipped height for that one frame only.
   Dropped the instant [data-ra-ready] lands. */
.brpdp-tb:not([data-ra-ready]) { min-height: 68px; }
@media (max-width: 940px) { .brpdp-tb:not([data-ra-ready]) { min-height: 96px; } }

/* --- countdown ----------------------------------------------------------
   No bar currently opts in (data-ra-countdown is absent), so this paints
   nothing today. It is here so turning one on is a markup change, not a
   stylesheet change. Tabular figures stop the row twitching each tick.
   ------------------------------------------------------------------------ */
.brpdp-tb__countdown {
  font-family: var(--brpdp-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brpdp-label);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- theme integration (RA LAB) ------------------------------------------
   Basel's .topbar-wrapp/.main-header rules are REMOVED per README step 4:
   the Lab's MTS bar is disabled in the plugin and the v2 header (.brpdp-h)
   is position:relative in normal flow, so the in-flow promo bar simply
   stacks above it — nothing needs repositioning. --ra-tb-h is still
   published by promo-bar.js in case fixed chrome is ever added.
   ------------------------------------------------------------------------ */
:root { --ra-tb-h: 0px; }

html { scroll-padding-top: calc(var(--ra-tb-h) + 32px); }

/* ============================================================================
   POST-INSTALL CORRECTIONS  (JKM, 2026-08-16) — keep these, they are not
   theme-specific.
   ============================================================================ */

/* 1 · MESSAGE COLOUR LOCK.  Any theme with a broad p{color:...} rule at
   specificity above (0,1,0) will repaint the message dark. Locked with
   !important, same as the CTA label. (On RA the culprit was
   p:not(.rapdp *):not(.raap *) at (0,2,1) — specificity, not load order.) */
.brpdp-tb .brpdp-tb__msg,
.brpdp-tb .brpdp-tb__msg .brpdp-tb__accent { color: var(--brpdp-ink-on-ground) !important; }

/* 2 · CTA 10% SHORTER, every screen. 46px -> 41.4px. Declared on .brpdp-tb so
   it overrides the token block at the top of this file; the 430px container
   query only touches width, so nothing else needs changing. */
.brpdp-tb { --brpdp-cta-height: 41.4px; }

/* 3 · PER-BAR STACK POINT.  The shipped 940px was tuned to the original short
   message. Bars 1 and 3 carry a much longer line, so they need to drop to
   two rows earlier; bars 2 and 4 are short and keep 940px. Scoping the wider
   breakpoint to those two slots stops the short bars stacking early. */
@container (max-width: 1180px) {
  [data-ra-slot="1"] .brpdp-tb__shell,
  [data-ra-slot="3"] .brpdp-tb__shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 10px;
    align-items: center;
    justify-content: stretch;
    padding-top: 13px;
    padding-bottom: 14px;
  }
  [data-ra-slot="1"] .brpdp-tb__eyebrow,
  [data-ra-slot="3"] .brpdp-tb__eyebrow { grid-column: 1; grid-row: 1; justify-self: start; }
  [data-ra-slot="1"] .brpdp-tb__action,
  [data-ra-slot="3"] .brpdp-tb__action { grid-column: 2; grid-row: 1; justify-self: end; }
  [data-ra-slot="1"] .brpdp-tb__msg,
  [data-ra-slot="3"] .brpdp-tb__msg { grid-column: 1 / -1; grid-row: 2; flex: 0 1 auto; }
}