/* ============================================================
   DMO / TOURISM ORGS PLAYBOOK — scoped framework styles
   Loaded conditionally on slug the-ai-ready-dmo-playbook and
   ai-playbook-for-tourism-organisations (conditional enqueue in functions.php).

   Official brand tokens (Tourism Tribe 2026):
   teal #4EA59C / teal-dark #027D7C / teal-light #e8f5f3 /
   coral #F98277 / orange #FF8B59 /
   navy #0A1E3F / slate #6B7280 / line #E2E8F0 /
   Matrix ink #07121F / blue pill #3D7BFF / red pill #E23B3B /
   green #22C55E.
   ============================================================ */

.dmo {
  --dmo-teal: #4EA59C;
  --dmo-teal-dark: #027D7C;
  --dmo-teal-light: #e8f5f3;
  --dmo-coral: #F98277;
  --dmo-coral-tint: #fff1ef;
  --dmo-orange: #FF8B59;
  --dmo-navy: #0A1E3F;
  --dmo-slate: #6B7280;
  --dmo-line: #E2E8F0;
  --dmo-blue: #3D7BFF;
  --dmo-blue-tint: #EEF3FF;
  --dmo-red: #E23B3B;
  --dmo-green: #22C55E;
  --dmo-matrix-ink: #07121F;
  --dmo-font: var(--font-body, 'DM Sans', system-ui, sans-serif);
}

/* ---- Pill-card colour vars hoisted to :root so variant rules resolve
   outside .dmo scope. The .dmo block still defines them for backwards
   compat with any other dmo-scoped usage. ---- */
:root {
  --dmo-blue: #3D7BFF;
  --dmo-blue-tint: #EEF3FF;
  --dmo-red: #E23B3B;
}

/* ---- At a glance callout ---- */
.dmo-glance {
  background: var(--dmo-blue-tint);
  border-left-color: var(--dmo-teal);
  border-left-style: solid;
  border-left-width: 5px;
  border-radius: 14px;
  padding: 1.75rem 2rem;
  font-family: var(--dmo-font);
}
.dmo-glance .dmo-glance__title {
  font-family: var(--dmo-font);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dmo-teal);
  margin: 0 0 0.85rem;
}
.dmo-glance ul { margin: 0; padding-left: 1.1rem; }
.dmo-glance li {
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--dmo-navy);
  margin: 0 0 0.55rem;
}
.dmo-glance li:last-child { margin-bottom: 0; }

/* ---- Shared framework wrapper ---- */
.dmo-fw {
  font-family: var(--dmo-font);
  color: var(--dmo-navy);
  margin: 2.25rem 0;
}
.dmo-fw__eyebrow {
  font-family: var(--dmo-font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dmo-teal);
  margin: 0 0 0.35rem;
}
.dmo-fw__title {
  font-family: var(--dmo-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--dmo-navy) !important;
  margin: 0 0 0.4rem;
}
.dmo-fw__sub {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--dmo-slate);
  margin: 0 0 0.25rem;
}
.dmo-fw__note {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--dmo-slate);
  margin: 0;
}

/* ---- COMPASS: badge ---- */
.dmo-badge {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--dmo-font);
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}
.dmo-badge--coral { background: var(--dmo-coral); }
.dmo-badge--teal  { background: var(--dmo-teal); }

/* ---- COMPASS: gate card (C) ---- */
.dmo-gate {
  border-color: var(--dmo-coral);
  border-style: solid;
  border-width: 2px;
  border-radius: 16px;
  background-color: #0A1E3F;
  background-image: linear-gradient(150deg, #0A1E3F 36%, #0d3b54 100%);
  padding: 1.5rem 1.6rem;
  margin: 1.5rem 0 0;
}
.dmo-gate__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.dmo-gate__label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--dmo-coral);
  padding: 4px 11px;
  border-radius: 20px;
  margin-left: 0.6rem;
  vertical-align: middle;
}
.dmo-move {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--dmo-navy);
  margin: 0;
  line-height: 1.2;
}
.dmo-desc {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--dmo-slate);
  margin: 0.2rem 0 0;
  line-height: 1.4;
}

/* ---- COMPASS: parallel divider ---- */
.dmo-parallel {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.6rem 0 1.1rem;
}
.dmo-parallel__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dmo-slate);
  white-space: nowrap;
}
.dmo-parallel__rule {
  height: 2px;
  background: var(--dmo-line);
  flex: 1 1 auto;
}

/* ---- COMPASS: six-move grid ---- */
.dmo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.dmo-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-color: var(--dmo-line);
  border-style: solid;
  border-width: 1px;
  border-radius: 14px;
  padding: 1.2rem 1.3rem;
  background: #ffffff;
}
.dmo-card .dmo-badge { width: 46px; height: 46px; font-size: 1.25rem; }
.dmo-card .dmo-move { font-size: 1.1rem; }
.dmo-card .dmo-desc { font-size: 0.96rem; }

/* ---- Two paths (legacy light-mode variant, kept for DMO post) ---- */
.dmo-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin: 2rem 0;
}
.dmo-path {
  border-radius: 18px;
  padding: 2rem 1.8rem;
  border-style: solid;
  border-width: 2px;
  font-family: var(--dmo-font);
}
.dmo-path--blue { background: var(--dmo-blue-tint); border-color: #C9D2DE; }
.dmo-path--red  { background: var(--dmo-coral-tint); border-color: #F6C8B2; }
.dmo-pill {
  display: inline-block;
  padding: 9px 24px;
  border-radius: 40px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
}
.dmo-pill--blue { background: var(--dmo-blue); }
.dmo-pill--red  { background: var(--dmo-coral); }
.dmo-path__h {
  font-family: var(--dmo-font) !important;
  font-size: 1.75rem;
  font-weight: 800 !important;
  color: var(--dmo-navy) !important;
  margin: 1rem 0 0.2rem;
}
.dmo-path__lead {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dmo-slate);
  margin: 0 0 0.5rem;
}
.dmo-path__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dmo-slate);
  margin: 1.5rem 0 0.7rem;
}
.dmo-path ul { list-style: none; margin: 0; padding: 0; }
.dmo-path li {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--dmo-navy);
  padding: 0.6rem 0 0.6rem 1.5rem;
  position: relative;
  line-height: 1.35;
  border-top-color: var(--dmo-line);
  border-top-style: solid;
  border-top-width: 1px;
}
.dmo-path li:first-child { border-top: none; }
.dmo-path li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.1rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.dmo-path--blue li::before { background: var(--dmo-blue); }
.dmo-path--red  li::before { background: var(--dmo-coral); }
.dmo-outcome {
  margin-top: 1.4rem;
  padding: 1.2rem 1.3rem;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  background: #ffffff;
  border-style: solid;
  border-width: 1px;
}
.dmo-path--blue .dmo-outcome { border-color: #C9D2DE; color: var(--dmo-blue); }
.dmo-path--red  .dmo-outcome { border-color: #F6C8B2; color: #C75A2E; }
.dmo-outcome__where {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dmo-slate);
  margin-bottom: 0.5rem;
}

/* ====================================================================
   MATRIX TWO-PATHS BLOCK
   .dmo-matrix — dark feature wrapper; .dmo-mx-card--blue / --red — pill cards
   ==================================================================== */

.dmo-matrix {
  position: relative;
  background-color: var(--dmo-matrix-ink);
  color: #ffffff;
  padding: 3.5rem 2rem 3rem;
}

.dmo-matrix .dmo-fw__eyebrow {
  color: var(--dmo-teal);
}
.dmo-matrix .dmo-fw__title {
  color: #ffffff !important;
}
.dmo-matrix .dmo-fw__sub {
  color: rgba(255,255,255,0.75);
}

/* Two-column card grid */
.dmo-mx-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin-top: 2rem;
}

/* Individual card base */
.dmo-mx-card {
  border-radius: 16px;
  padding: 2rem 1.8rem;
  background: rgba(255,255,255,0.05);
  border-style: solid;
  border-width: 2px;
  font-family: var(--dmo-font);
  position: relative;
}
.dmo-mx-card--blue {
  border-color: var(--dmo-blue);
  box-shadow: 0 0 28px rgba(61,123,255,0.15);
}
.dmo-mx-card--red {
  border-color: var(--dmo-red);
  box-shadow: 0 0 28px rgba(226,59,59,0.15);
}

/* Pill badge */
.dmo-mx-pill {
  display: inline-block;
  padding: 7px 22px;
  border-radius: 40px;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 1rem;
}
.dmo-mx-pill--blue { background: var(--dmo-blue); }
.dmo-mx-pill--red  { background: var(--dmo-red); }

/* Card heading */
.dmo-mx-card h3,
.dmo-mx-card .dmo-mx-card-h {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 0.4rem !important;
  line-height: 1.15 !important;
}

/* Lead line below heading */
.dmo-mx-lead {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  margin: 0 0 1.2rem;
}

/* "What you keep doing" / "What you do" label */
.dmo-mx-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin: 0 0 0.6rem;
}

/* List items */
.dmo-mx-card ul {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
}
.dmo-mx-card li {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,0.88);
  padding: 0.55rem 0 0.55rem 1.4rem;
  position: relative;
  line-height: 1.35;
  border-top-color: rgba(255,255,255,0.08);
  border-top-style: solid;
  border-top-width: 1px;
}
.dmo-mx-card li:first-child { border-top: none; }
.dmo-mx-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dmo-mx-card--blue li::before { background: var(--dmo-blue); }
.dmo-mx-card--red  li::before { background: var(--dmo-red); }

/* Outcome box at bottom of card */
.dmo-mx-outcome {
  padding: 1.1rem 1.2rem;
  border-radius: 10px;
  border-style: solid;
  border-width: 1px;
  margin-top: 0.5rem;
}
.dmo-mx-card--blue .dmo-mx-outcome {
  border-color: rgba(61,123,255,0.4);
  background: rgba(61,123,255,0.08);
  color: rgba(255,255,255,0.9);
}
.dmo-mx-card--red .dmo-mx-outcome {
  border-color: rgba(226,59,59,0.4);
  background: rgba(226,59,59,0.08);
  color: rgba(255,255,255,0.9);
}
.dmo-mx-outcome__where {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 0.4rem;
}
.dmo-mx-outcome p {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.4;
}

/* ---- Responsive: stack to one column on mobile ---- */
@media (max-width: 781px) {
  .dmo-grid,
  .dmo-paths,
  .dmo-mx-cards { grid-template-columns: 1fr; }
  .dmo-gate__inner { align-items: flex-start; }
}

/* ---- Editor visibility overrides ---- */
.editor-styles-wrapper .dmo-fw,
.editor-styles-wrapper .dmo-paths,
.editor-styles-wrapper .dmo-glance { opacity: 1 !important; }

/* Matrix block in editor */
.editor-styles-wrapper .dmo-matrix { background-color: #07121F !important; }
.editor-styles-wrapper .dmo-mx-card { background: rgba(255,255,255,0.08) !important; }

/* Framework titles */
.dmo-fw__title { margin: 0 0 0.4rem; }
.dmo-fw__title--xxl { font-size: 2.6rem; line-height: 1.0; }
.dmo-fw__title--xl  { font-size: 2.1rem; line-height: 1.05; }
@media (max-width: 781px) {
  .dmo-fw__title--xxl { font-size: 2.1rem; }
  .dmo-fw__title--xl  { font-size: 1.7rem; }
}

/* ====================================================================
   BRIEF-4: Full-bleed breakout removed.
   Matrix (.dmo-matrix) and COMPASS (.pb-section--dark) bands now sit
   naturally inside .pb-main — governed by lib.css (960px constrained,
   border-radius on .pb-main > .pb-section--dark). No viewport-edge bleed.
   ==================================================================== */

/* pb-closing: top-level alignfull group; add horizontal padding so inner
   content does not touch the viewport edge on large screens. */
.wp-block-group.alignfull.pb-closing {
  padding-left: max(1.5rem, calc((100vw - 960px) / 2));
  padding-right: max(1.5rem, calc((100vw - 960px) / 2));
  box-sizing: border-box;
}

/* ====================================================================
   HERO COVER — photographic full-bleed hero for tourism-orgs playbook
   .pb-hero-cover — wraps the wp:cover block
   .pb-hero-cover__inner — constrained inner column (max 760px, left-aligned)
   .pb-hero-cover__eyebrow — teal pill
   .pb-hero-cover__h1 — Fraunces white headline
   .pb-hero-cover__h1-teal — italic teal em span
   .pb-hero-cover__sub — white subtitle
   ==================================================================== */

/* BRIEF-4: constrain hero inner to 1160px centred so text aligns with body column. */
.pb-hero-cover .wp-block-cover__inner-container {
  max-width: 1160px;
  margin-inline: auto;
  width: 100%;
}

.pb-hero-cover__inner {
  max-width: 760px;
  padding-left: 0;
}

.pb-hero-cover__eyebrow {
  display: inline-block;
  background: rgba(78, 165, 156, 0.25);
  color: #7FD3CA;
  border-color: rgba(78, 165, 156, 0.45);
  border-style: solid;
  border-width: 1px;
  border-radius: 40px;
  padding: 6px 18px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}

.pb-hero-cover__h1 {
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  color: #ffffff !important;
  margin: 0 0 1rem !important;
}

.pb-hero-cover__h1-teal {
  color: #7FD3CA;
  font-style: italic;
}

.pb-hero-cover__sub {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255,255,255,0.88) !important;
  margin: 0 0 2rem;
}

/* Editor visibility */
.editor-styles-wrapper .pb-hero-cover__eyebrow,
.editor-styles-wrapper .pb-hero-cover__h1,
.editor-styles-wrapper .pb-hero-cover__sub {
  opacity: 1 !important;
}

@media (max-width: 781px) {
  .pb-hero-cover__h1 { font-size: 2rem !important; }
  .pb-hero-cover__sub { font-size: 1.05rem; }
  .pb-hero-cover__inner { padding-left: 0; }
}

/* ─── Single-card licence wrapper ─────────────────────────────────────── */
/* Used when pb-licence-card is the sole child (not in a 3-up pb-licence-grid) */
.wp-block-columns.pb-licence-card-wrap {
  display: flex !important;
  gap: 0 !important;
  margin-top: 1.5rem !important;
}

.wp-block-columns.pb-licence-card-wrap > .wp-block-column {
  flex-basis: 100% !important;
  max-width: 100% !important;
}

/* ─── Flow diagram (.pb-flow) ──────────────────────────────────────────── */
/* Uses wp:columns (pb-flow) > wp:column (pb-flow__node + pb-flow__arrow-col) */
.wp-block-columns.pb-flow {
  align-items: stretch !important;
  gap: 0 !important;
  margin: 2rem 0 2.5rem !important;
  font-family: 'DM Sans', sans-serif;
  flex-wrap: nowrap !important;
}

.wp-block-column.pb-flow__node {
  background: #0A1E3F;
  border-radius: 10px;
  padding: 1.1rem 1.25rem !important;
  text-align: center;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  min-width: 0;
}

.wp-block-column.pb-flow__arrow-col {
  flex: 0 0 32px !important;
  max-width: 32px !important;
  min-width: 32px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

.pb-flow__node-title,
h4.pb-flow__node-title,
.wp-block-columns.pb-flow .pb-flow__node-title,
.wp-block-columns.pb-flow h4.pb-flow__node-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(0.8rem, 1.1vw, 0.95rem) !important;
  font-weight: 600;
  color: #4EA59C;
  line-height: 1.3;
  margin: 0 0 0.2rem !important;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.pb-flow__node-sub {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
  margin: 0 !important;
}

.pb-flow__arrow,
p.pb-flow__arrow {
  font-size: 1.5rem;
  font-weight: 700;
  color: #F98277 !important;
  user-select: none;
  margin: 0 !important;
  line-height: 1;
}

/* Mobile: stack vertically with downward arrows */
@media (max-width: 640px) {
  .wp-block-columns.pb-flow {
    flex-direction: column !important;
    flex-wrap: wrap !important;
  }

  .wp-block-column.pb-flow__node {
    border-radius: 8px;
    flex-basis: auto !important;
    max-width: 100% !important;
  }

  .wp-block-column.pb-flow__arrow-col {
    flex-basis: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .pb-flow__arrow,
  p.pb-flow__arrow {
    transform: rotate(90deg);
  }
}

/* ─── Matrix pill-box colour variants ────────────────────────────────────── */
/* Blue pill (#3D7BFF) — overrides lib.css --l / salmon colours               */
.wp-block-column.pb-licence-card.pb-licence-card--blue {
  background: #EFF4FF;
  border: 2px solid var(--dmo-blue);
}

.pb-licence-card--blue .pb-licence-badge,
.pb-licence-card--blue p.pb-licence-badge {
  background: var(--dmo-blue) !important;
  color: #fff !important;
}

.pb-licence-card--blue .pb-licence-title,
.pb-licence-card--blue h3.pb-licence-title {
  color: #1a3a7a !important;
}

.pb-licence-card--blue .pb-licence-list li::before {
  color: var(--dmo-blue);
  opacity: 0.8;
}

/* Red pill (#E23B3B) — overrides lib.css --p / teal colours                  */
.wp-block-column.pb-licence-card.pb-licence-card--red {
  background: #FEF2F2;
  border: 2px solid var(--dmo-red);
}

.pb-licence-card--red .pb-licence-badge,
.pb-licence-card--red p.pb-licence-badge {
  background: var(--dmo-red) !important;
  color: #fff !important;
}

.pb-licence-card--red .pb-chip,
.pb-licence-card--red span.pb-chip {
  background: var(--dmo-red) !important;
  color: #fff !important;
}

.pb-licence-card--red .pb-licence-title,
.pb-licence-card--red h3.pb-licence-title {
  color: #7a1010 !important;
}

.pb-licence-card--red .pb-licence-list li::before {
  color: var(--dmo-red);
  opacity: 0.8;
}

/* ─── Restore chip visibility inside orange-left callout ─────────────────── */
/* lib.css hides .pb-chip--green and .pb-chip--amber globally (proven-grid
   chips that are display:none by design). The orange-left card is a different
   context — its amber chip labels the callout and must be visible. Use a
   higher-specificity selector to reinstate it without touching lib.css.     */
.pb-card--orange-left .pb-chip.pb-chip--amber {
  display: inline-block !important;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3em 0.85em;
  border-radius: 999px;
  margin-bottom: 1rem;
}

/* ─── Services / Work-with-us grid (Builder 12) ─────────────────────────── */
/* Three real-program cards reusing the lib.css .pb-card / .pb-card--teal-top
   surface. Native wp:columns provides the 3-up layout; these rules add the
   playbook gap, max-width, equal-height cards, and bottom-aligned buttons,
   and stack cleanly on mobile (no horizontal scroll).                       */
.pb-services-grid {
  max-width: 1000px;
  margin: 2rem auto 0;
  gap: 1.5rem;
}

.pb-services-grid .wp-block-column {
  display: flex;
}

.pb-services-grid .pb-card--teal-top {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.pb-services-grid .pb-card-title {
  margin-top: 0;
}

/* Push the link button to the foot of each card so the cards align */
.pb-services-grid .pb-card--teal-top .wp-block-buttons {
  margin-top: auto;
  padding-top: 0.75rem;
}

@media (max-width: 781px) {
  .pb-services-grid {
    gap: 1rem;
  }
  .pb-services-grid .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* ====================================================================
   pb-trust-stat LIGHT-MODE OVERRIDE (DMO playbook)
   The pb-trust-stat component in lib.css is built for dark backgrounds
   (semi-transparent white fills, white label text). Inside .dmo on this
   white-background article it needs light-mode colours. Scoped to .dmo
   so it never affects the dark contexts the component was built for.
   ==================================================================== */
.dmo .pb-trust-stat {
  background: var(--dmo-teal-light);
  border-color: var(--dmo-line);
}
.dmo .pb-trust-stat .n { color: var(--dmo-teal-dark); }
.dmo .pb-trust-stat .l { color: var(--dmo-slate); }

/* ====================================================================
   SPACING FIXES — pb-main block-gap overrides
   WordPress applies margin-block-start via is-layout-flow to every
   direct child of pb-main. Some transitions produce oversized gaps
   because the card/columns components have no margin of their own.
   These rules replace the browser default with intentional values.
   ==================================================================== */

/* After any pb-card group, tighten the following prose paragraph */
.pb-main .wp-block-group.pb-card + .wp-block-paragraph {
  margin-block-start: 1.75rem !important;
}

/* After the red/blue pill licence cards, tighten the next heading */
.pb-main .wp-block-columns.pb-licence-card-wrap + .wp-block-heading {
  margin-block-start: 2.5rem !important;
}

/* After the pb-licence-card-wrap, tighten any following block */
.pb-main .wp-block-columns.pb-licence-card-wrap + * {
  margin-block-start: 2.5rem !important;
}

/* General: pb-main direct children — kill the WP block-gap default,
   let each component control its own top spacing */
.pb-main.is-layout-flow > * + *,
.pb-main > .is-layout-flow > * + * {
  margin-block-start: var(--pb-block-gap, 2rem);
}

/* ---- lib-check-list: kill WP block-gap between list items ---- */
.lib-check-list.is-layout-flow > li,
.lib-check-list li {
  margin-block-start: 0 !important;
}

/* ---- lib-callout-salmon: kill gap between label and list ---- */
.lib-callout-salmon .wp-block-list {
  margin-block-start: 0.5rem !important;
}

/* ====================================================================
   SPACING + CONTRAST FIXES — round 2
   ==================================================================== */

/* lib-callout-salmon: nuclear kill on all internal block-gap,
   then set exact values */
.lib-callout-salmon > *,
.lib-callout-salmon.is-layout-flow > *,
.lib-callout-salmon .is-layout-flow > * {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}
.lib-callout-salmon > .wp-block-list,
.lib-callout-salmon .wp-block-list {
  margin-top: 0.6rem !important;
  margin-block-start: 0.6rem !important;
}
.lib-callout-salmon .wp-block-list > li {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

/* lib-blockquote: consistent 2rem spacing for both group and quote variants.
   lib.css sets margin:0 on .lib-blockquote; the !important here beats that rule
   for the group variant (specificity .wp-block-group.lib-blockquote = 0,2,0 + !important).
   The quote variant (.wp-block-quote.lib-blockquote) follows the same pattern. */
.wp-block-group.lib-blockquote,
.wp-block-quote.lib-blockquote {
  margin-block: 2rem !important;
}

/* COMPASS on dark background: dmo-fw__sub and dmo-fw__note
   use --dmo-slate (#6B7280) which is unreadable on navy */
.pb-section--dark .dmo-fw__sub,
.pb-section--dark .dmo-fw__note {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* ====================================================================
   SPACING + SIZE FIXES — round 3
   ==================================================================== */

/* Global: images inside pb-main — tighten gap before and after */
.pb-main .wp-block-image,
.pb-main .wp-block-group.pb-image-block {
  margin-block-start: 1.5rem !important;
  margin-bottom: 0 !important;
}
.pb-main .wp-block-image + *,
.pb-main .wp-block-group.pb-image-block + * {
  margin-block-start: 1.5rem !important;
}

/* aida-scan mockup: phone screenshot should be small and centred,
   not full-column width */
.wp-block-image img[src*=aida-scan-mockup] {
  max-width: 340px !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 24px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important;
}

/* lib-callout-salmon: absolute kill on every internal margin source */
.lib-callout-salmon,
.lib-callout-salmon.wp-block-group {
  display: block !important;
}
.lib-callout-salmon > *,
.lib-callout-salmon > .wp-block-group > *,
.lib-callout-salmon.is-layout-flow > *,
.lib-callout-salmon .wp-block-group-is-layout-flow > * {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}
.lib-callout-salmon > .wp-block-list,
.lib-callout-salmon .wp-block-list {
  margin-top: 0.6rem !important;
  margin-block-start: 0 !important;
}
.lib-callout-salmon .wp-block-list > li,
.lib-callout-salmon ul li {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

/* pb-voice-tip: kill WP bottom margin on last child */
.pb-voice-tip.wp-block-group > *:last-child,
.pb-voice-tip .pb-voice-tip-text {
  margin-block-end: 0 !important;
  margin-bottom: 0 !important;
}

/* Larger body text in the DMO red/blue licence cards.
   lib.css sets .pb-licence-list li and .pb-licence-desc to 13px globally,
   which reads too small in these full-width cards. Scoped to this slug only. */
.pb-licence-card--red .pb-licence-desc,
.pb-licence-card--blue .pb-licence-desc,
.pb-licence-card--red .pb-licence-list li,
.pb-licence-card--blue .pb-licence-list li {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* lib-blockquote spacing override consolidated above (2026-06-03) — see rule near line 864. */

/* ====================================================================
   CSS FIXES — 2026-06-04
   ==================================================================== */

/* FIX 1: .dmo-start colour — distinct action label, teal #027D7C semibold.
   lib.css sets .pb-section--dark .wp-block-group { color: rgba(255,255,255,0.9) }
   which cascades into .dmo-gate and .dmo-card (both light-background cards inside
   the dark COMPASS section). Scope the fix to those two containers so .dmo-start
   reads as the brand emphasis teal, visually distinct from the grey description above.
   Specificity: 2 classes (same as lib.css rule) — wins because dmo-playbook.css
   loads after lib.css. Updated 2026-06-04: rgba(10,30,63,0.75) → #027D7C + font-weight:600. */
.dmo-gate .dmo-start,
.dmo-card .dmo-start {
  color: #027D7C;
  font-weight: 600;
}

/* FIX 2: .dmo-mx-cards top-alignment.
   align-items: start pins grid items to the top of the row.
   The WP is-layout-flow rule adds margin-block-start: 1.2rem to the second
   child (the red card), pushing it 19px lower than the blue card even when
   align-items is correct. Zero that margin on direct children so both cards
   share the same top edge. */
.dmo-mx-cards {
  align-items: start;
}
.dmo-mx-cards > * {
  margin-block-start: 0 !important;
}

/* ====================================================================
   HERO LIGHT-MODE OVERRIDES — 2026-06-04
   Background image changed from dark coastal photo to light visitor-centre
   photo (dimRatio 40). NAVY->TEAL brand overlay (2026-06-04) with WHITE
   hero text so the warm visitor-centre photo shows through as a branded
   image and ties the hero to the COMPASS gate card + CTA.

   The h1 and subtitle carry has-white-color has-text-color from the block
   attribute "textColor":"white"; theme.json generates
   .has-white-color { color:#fff !important }. These rules reinforce white
   and set the lightened teal accent + translucent eyebrow pill on navy.
   ==================================================================== */

/* Eyebrow pill: translucent light on navy overlay (white text + light border) */
.pb-hero-cover .pb-hero-cover__eyebrow {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

/* H1: white on the navy/teal scrim. Reinforces has-white-color preset. */
.pb-hero-cover .pb-hero-cover__h1,
.pb-hero-cover .pb-hero-cover__h1.has-white-color,
.pb-hero-cover .pb-hero-cover__h1.has-text-color {
  color: #ffffff !important;
}

/* Italic accent (COMPASS:) — lightened brand teal that pops on navy.
   Deep teal #027D7C is too dark to read on the navy scrim. */
.pb-hero-cover .pb-hero-cover__h1-teal {
  color: #5fd0c4;
}

/* Subtitle: soft white on the navy scrim */
.pb-hero-cover .pb-hero-cover__sub,
.pb-hero-cover .pb-hero-cover__sub.has-white-color,
.pb-hero-cover .pb-hero-cover__sub.has-text-color {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* Editor: keep overrides visible in the block editor */
.editor-styles-wrapper .pb-hero-cover .pb-hero-cover__eyebrow,
.editor-styles-wrapper .pb-hero-cover .pb-hero-cover__h1,
.editor-styles-wrapper .pb-hero-cover .pb-hero-cover__sub {
  opacity: 1 !important;
}

/* ====================================================================
   HERO OVERLAY GRADIENT — NAVY->TEAL BRAND SCRIM (2026-06-04, rev 2)
   Replaces the earlier left-weighted WHITE wash. The visitor-information-
   centre photo is a bright sunlit interior, so a white scrim blended into
   it and hid the photo. This left-heavy navy/teal scrim protects the left
   (white text) and lets the warm scene read through centre-right with a
   cohesive brand tint (no blown-out windows).
   opacity:1 !important overrides the 0.4 set by has-background-dim-40.
   background-color is cleared (transparent) so it does not add a flat dim.
   ==================================================================== */
.pb-hero-cover .wp-block-cover__background {
  /* Desktop (>=782px): left protected for the WHITE text, right keeps a
     light navy/teal tint (~0.18) so the visitor-information-centre photo
     reads as a branded image. Was a white wash that blended into the
     bright sunlit interior and hid the photo entirely. */
  background-image: linear-gradient(
    to right,
    rgba(10, 30, 63, 0.94) 0%,
    rgba(10, 30, 63, 0.86) 30%,
    rgba(13, 59, 84, 0.55) 55%,
    rgba(13, 59, 84, 0.25) 78%,
    rgba(13, 59, 84, 0.18) 100%
  ) !important;
  background-color: transparent !important;
  opacity: 1 !important;
}

/* Cover image focal point: bias toward the staff member + travellers +
   counter (right side) instead of the bright ceiling/windows up top. */
.pb-hero-cover img.wp-block-cover__image-background {
  object-position: 55% 55% !important;
}

/* Mobile (<=781px): the photo sits full-width BEHIND the centred text,
   so a left-only gradient leaves white text sitting on bare bright photo.
   Use a stronger, near-even vertical NAVY scrim (top-to-bottom) that stays
   >=0.82 navy the whole height behind the text, for legible white text. */
@media (max-width: 781px) {
  .pb-hero-cover .wp-block-cover__background {
    background-image: linear-gradient(
      to bottom,
      rgba(10, 30, 63, 0.86) 0%,
      rgba(10, 30, 63, 0.82) 50%,
      rgba(10, 30, 63, 0.88) 100%
    ) !important;
    background-color: transparent !important;
    opacity: 1 !important;
  }
}

/* ====================================================================
   HOW-TO-START OFFER CARDS — 2x2 grid (2026-06-04)
   The #how-to-start section has four offer cards using the same
   .pb-services-grid class as the 3-card #services section. At four
   across, each card is ~185px — too narrow. Wrap to 2x2. Scoped to
   #how-to-start so the 3-card Work-with-us section is unaffected.
   Mobile stacking (flex-basis: 100% !important) in the global rule
   above wins on small screens — no mobile change needed here.
   ==================================================================== */
#how-to-start .wp-block-columns.pb-services-grid {
  flex-wrap: wrap !important;
}

#how-to-start .wp-block-columns.pb-services-grid > .wp-block-column {
  flex-basis: calc(50% - 0.75rem) !important;
  max-width: calc(50% - 0.75rem) !important;
}

/* ====================================================================
   HOW-TO-START OFFER CARDS — bottom-aligned "Book a call" buttons
   Cards are already equal-height flex columns (from pb-services-grid
   rules above). WP's is-layout-flow adds margin-block-start: 32px to
   .wp-block-buttons, overriding the margin-top: auto in pb-services-grid.
   Scoped !important here beats that rule and pins buttons to card bottom.
   ==================================================================== */
#how-to-start .pb-card--teal-top {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

#how-to-start .pb-card--teal-top .wp-block-buttons {
  margin-top: auto !important;
  margin-block-start: auto !important;
}

/* ====================================================================
   CSS FIXES — 2026-06-04 (two-paths list colour + where-this-leads spacing)
   ==================================================================== */

/* FIX 1: Two-paths intro bullet list text colour.
   The two <ul class="wp-block-list"> items inside #two-paths render in
   the default body colour (rgb(50,61,76) / near-navy) while the adjacent
   pb-intro paragraphs are muted slate (rgb(107,114,128) / #6B7280).
   Scope to #two-paths to avoid touching any other list on the page.
   list-style: disc is inherited; this rule only resets colour.
   font-family and font-weight already match (DM Sans, weight 300).
   Using hex directly: --dmo-slate is scoped to .dmo, not :root. */
#two-paths ul.wp-block-list li {
  color: #6B7280;
}

/* FIX 2: "Where this leads" closing line spacing in #how-to-start.
   The paragraph follows directly after the .pb-services-grid cards block
   with zero margin. Add 2.5rem top space to clear the cards visually.
   Scoped to the adjacent sibling selector so only this one paragraph
   gets the extra space — other pb-prose paragraphs in #how-to-start
   are unaffected. */
#how-to-start .wp-block-columns.pb-services-grid + p.pb-prose--muted {
  margin-top: 2.5rem !important;
  margin-block-start: 2.5rem !important;
}

/* ====================================================================
   COMPASS framework graphic: landscape on desktop/tablet, portrait on
   phones. Desktop block (attachment 124811) carries .pb-only-desktop;
   mobile block (attachment 124817, tall portrait) carries .pb-only-mobile.
   Breakpoint 781px matches the page's existing mobile breakpoint.
   ==================================================================== */
.pb-only-mobile {
  display: none;
}
@media (max-width: 781px) {
  .pb-only-desktop {
    display: none !important;
  }
  .pb-only-mobile {
    display: block !important;
  }
}
/* Tall portrait: cap width and centre on phones so the alignwide figure
   does not stretch full-bleed. Matches the page's other in-content image
   constraint idiom (max-width + centred). */
.pb-only-mobile img {
  max-width: 520px !important;
  margin-inline: auto !important;
  display: block !important;
  height: auto !important;
}


/* ====================================================================
   GATE NAVY LEGIBILITY + ALIGNMENT FIX - 2026-06-04
   The COMPASS gate (.dmo-gate) is a navy gradient card. Inside it:
     1. .dmo-gate__tag   (eyebrow "THE GATE · MOVE 1") - full-width sibling
     2. .dmo-gate__inner (flex row: coral badge gutter + text column)
     3. .dmo-gate__foot  (footer "Clear the gate...")  - full-width sibling
   PROBLEM: the eyebrow and footer sat at the card's left padding edge,
   while the body text (move/desc/start) was indented to the right of the
   56px badge + 1.25rem gap. Two mismatched left edges.
   FIX: define a single gutter width (--dmo-gate-gutter = badge 56px + gap
   1.25rem) on .dmo-gate. The inner row uses it as its flex gap so the text
   column starts exactly one gutter in. The eyebrow and footer get the same
   value as padding-left, so all five text lines share ONE left edge.
   Badge is top-aligned in its gutter for a clean read on a wide card.
   Legibility: lib.css cascades .pb-section--dark .wp-block-group {
   color: rgba(255,255,255,.9) } into the gate; re-flip the gate text to
   on-navy colours here (loads last, beats earlier single-class rules).
   The white .dmo-card tiles are untouched.
   ==================================================================== */

.dmo-gate {
  --dmo-gate-gutter: calc(56px + 1.25rem); /* badge width + inner gap */
}

/* Eyebrow + footer: indent to the shared text-column left edge */
.dmo-gate .dmo-gate__tag,
.dmo-gate .dmo-gate__foot {
  padding-left: var(--dmo-gate-gutter);
}

/* Inner row: badge top-aligned in its gutter, gap drives the text edge */
.dmo-gate .dmo-gate__inner {
  align-items: flex-start;
  gap: 1.25rem; /* must equal the gutter's gap term so edges line up */
}

/* Eyebrow "THE GATE · MOVE 1" - light, readable on navy */
.dmo-gate .dmo-gate__tag {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.74rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
}

/* Gate heading (the move title) - white on navy */
.dmo-gate .dmo-move {
  color: #ffffff;
}

/* Gate description - larger and lighter for comfortable reading on navy */
.dmo-gate .dmo-desc {
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.12rem;
  line-height: 1.45;
}

/* Gate "Start here:" action label - light teal so it reads on navy.
   Overrides FIX 1 (.dmo-gate .dmo-start { color:#027D7C }) for the gate only;
   the white .dmo-card tiles keep the deep-teal #027D7C from FIX 1. */
.dmo-gate .dmo-start {
  color: #8fded4;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.45;
}

/* Footer "Clear the gate..." - legible, not too dim */
.dmo-gate .dmo-gate__foot {
  color: rgba(255, 255, 255, 0.74);
  font-size: 1.02rem;
  line-height: 1.45;
  margin-top: 1.1rem;
}

/* Mobile: keep the gutter so the badge row's text column and the eyebrow/
   footer stay on the SAME left edge (the inner stays a flex row with the
   badge to the left, so a 0 gutter would re-split the two edges). Tighten
   the gap slightly on narrow cards. */
@media (max-width: 781px) {
  .dmo-gate {
    --dmo-gate-gutter: calc(48px + 1rem);
  }
  .dmo-gate .dmo-badge {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }
  .dmo-gate .dmo-gate__inner {
    gap: 1rem; /* matches the mobile gutter's gap term */
  }
}