/* Beachhut PR — palette preview overrides (Megan's 11 May options)
 *
 * Apply via body class: `palette-1` .. `palette-4`
 * Or via URL: `?palette=1` .. `?palette=4` (handled by palette-switcher.js)
 *
 * All four palettes share yellow #EAB747, navy #111F29, teal #58CAB7.
 * They differ on the 4th colour (--accent) and 5th colour (--accent-2).
 */

body.palette-1,
body.palette-2,
body.palette-3,
body.palette-4 {
  --dark:    #111F29;  /* Megan's deep navy (shared) */
  --navy:    #0B1620;
  --mid:     #19293A;
  --gold:    #EAB747;  /* Megan's yellow (shared) */
  --teal:    #58CAB7;  /* Megan's teal (shared) */
}

/* Palette 1 — Indigo + Coral */
body.palette-1 {
  --accent:   #6564DB;
  --accent-2: #EF767A;
}

/* Palette 2 — Muted Purple + Coral */
body.palette-2 {
  --accent:   #8A4F7D;
  --accent-2: #EF767A;
}

/* Palette 3 — Bright Blue + Magenta-Red */
body.palette-3 {
  --accent:   #1E91D6;
  --accent-2: #DB2763;
}

/* Palette 4 — Bright Blue + Pink */
body.palette-4 {
  --accent:   #1E91D6;
  --accent-2: #D741A7;
}

/* Make the accent colours actually visible on the site
 * so reviewers can tell the palettes apart.            */

/* Hero H1 highlight — currently uses .gold span. On palette pages, also give
 * the un-highlighted parts a hint of accent-2 via the eyebrow. */
body.palette-1 .hero .eyebrow,
body.palette-2 .hero .eyebrow,
body.palette-3 .hero .eyebrow,
body.palette-4 .hero .eyebrow {
  color: var(--accent);
}

/* Primary button — accent-2 fill */
body.palette-1 .btn-primary,
body.palette-2 .btn-primary,
body.palette-3 .btn-primary,
body.palette-4 .btn-primary {
  background: var(--accent-2);
  color: #fff;
  border-color: var(--accent-2);
}
body.palette-1 .btn-primary:hover,
body.palette-2 .btn-primary:hover,
body.palette-3 .btn-primary:hover,
body.palette-4 .btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* Stats numbers — accent fill so the palette difference is obvious below the fold */
body.palette-1 .stat-n,
body.palette-2 .stat-n,
body.palette-3 .stat-n,
body.palette-4 .stat-n {
  color: var(--accent);
}

/* Service icons — alternate teal / accent / accent-2 for visual rhythm */
body.palette-1 .service:nth-child(3n+2) .service-icon,
body.palette-2 .service:nth-child(3n+2) .service-icon,
body.palette-3 .service:nth-child(3n+2) .service-icon,
body.palette-4 .service:nth-child(3n+2) .service-icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

/* CTA strip / nav CTA — accent-2 */
body.palette-1 .nav-cta,
body.palette-2 .nav-cta,
body.palette-3 .nav-cta,
body.palette-4 .nav-cta {
  background: var(--accent-2);
  color: #fff;
  border-color: var(--accent-2);
}

/* Section dividers between hero/stats/services */
body.palette-1 section + section,
body.palette-2 section + section,
body.palette-3 section + section,
body.palette-4 section + section {
  border-top: 2px solid var(--accent);
}

/* Eyebrow text on subsequent sections */
body.palette-1 .eyebrow,
body.palette-2 .eyebrow,
body.palette-3 .eyebrow,
body.palette-4 .eyebrow {
  color: var(--accent);
}

/* Review banner gradient — use the palette's accent + accent-2 */
body.palette-1 .preview-banner,
body.palette-2 .preview-banner,
body.palette-3 .preview-banner,
body.palette-4 .preview-banner {
  background: linear-gradient(90deg, var(--teal), var(--accent), var(--accent-2));
}

/* ============================================================
 * Preview review banner — pinned to top, single line, pushes nav down
 * ============================================================ */
.preview-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;                                          /* above fixed nav (100) */
  height: 32px;
  padding: 0 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-top: env(safe-area-inset-top);
  box-sizing: content-box;                               /* keep 32px after notch padding */
  background: linear-gradient(90deg, #22E0CC, #FF2E92);
  color: #0E2540;
  font: 600 12px/32px 'Inter', sans-serif;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preview-banner .pb-label { text-transform: uppercase; font-size: 11px; letter-spacing: .08em }
.preview-banner .pb-sep { opacity: .5 }
.preview-banner .pb-mode { opacity: .85 }
.preview-banner .pb-switch {
  color: #0E2540;
  text-decoration: underline;
  margin-left: 6px;
}
@media (max-width: 480px) {
  .preview-banner .pb-label { display: none }
  .preview-banner .pb-sep:first-of-type { display: none }
}

/* Body padding + nav offset when preview banner is present.
 * The body.has-preview-banner class is applied by palette-switcher.js.
 * Padding must match nav top so the hero starts cleanly below the nav
 * on both URL-bar Safari (safe-area=0) and notched fullscreen. */
body.has-preview-banner { padding-top: calc(32px + env(safe-area-inset-top)) }
body.has-preview-banner > nav { top: calc(32px + env(safe-area-inset-top)) }