/* WAG Design 8 shared page system.
   Centralised in the Web Design so width, colour rhythm, navigation and footer
   stay consistent across all 53 inactive draft pages. */
:root {
  --wag-page-width: 80vw;
  --wag-page-navy: #12284c;
  --wag-page-orange: #ff5100;
  --wag-page-cream: #f7f1e7;
  --wag-page-sand: #efe2d0;
  --wag-page-ink: #172033;
}

@media (min-width: 901px) {
  .wag-design8-shell .review-ribbon,
  .wag-design8-shell .new-header,
  .wag-design8-shell .site-footer {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .wag-design8-shell .wag-page-content > :is(section, details, .enquiry-shell) {
    width: var(--wag-page-width);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* The opening section is selected structurally rather than by JavaScript so
     Oncord Edit and View render the same canvas. */
  .wag-design8-shell .wag-page-content > section:first-of-type {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    padding-left: 10vw !important;
    padding-right: 10vw !important;
    box-sizing: border-box;
  }

  /* Every intentionally coloured direct band reaches both viewport edges.
     Its existing content stays on the shared 80% / 1280px measure. */
  .wag-design8-shell .wag-page-content > :is(.navy,.today,.sand,.cta-band,.reviews-band,.history-map,.continuity-strip,.proof-strip,.micro-proof,.heat-feature),
  .wag-design8-shell .wag-page-content > details.campaign-conditions {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 10vw !important;
    padding-right: 10vw !important;
    box-sizing: border-box;
  }

  .wag-design8-shell .wag-page-content > :is(.hero, .service-hero, .campaign-hero) {
    margin-top: 34px;
    margin-bottom: 72px;
  }

  .wag-design8-shell .wag-page-content > .cta-band {
    margin-top: 72px;
    margin-bottom: 72px;
  }

  .wag-design8-shell .wag-page-content.wag-history > .hero {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 calc(50% - 50vw) 72px !important;
    padding-left: 10vw !important;
    padding-right: 10vw !important;
  }

  .wag-design8-shell .wag-page-content .hero-inner,
  .wag-design8-shell .wag-page-content .inner,
  .wag-design8-shell .wag-page-content .continuity-inner {
    max-width: 100%;
  }
}

/* Every page begins with a confident navy section. This structural selector
   works in both Oncord's editor iframe and the actual offline page. */
.wag-design8-shell .wag-page-content > :is(section:first-of-type,.wag-blue-section) {
  background: var(--wag-page-navy) !important;
  color: var(--wag-page-cream) !important;
  border-color: rgba(247, 241, 231, 0.2) !important;
}

.wag-design8-shell .wag-page-content > :is(section:first-of-type,.wag-blue-section) :is(h1, h2, h3, h4, p, li) {
  color: var(--wag-page-cream) !important;
}

.wag-design8-shell .wag-page-content > :is(section:first-of-type,.wag-blue-section) :is(.eyebrow, .service-card__label, .step-pill, .rail-label) {
  color: var(--wag-page-orange) !important;
}

.wag-design8-shell .wag-page-content > :is(section:first-of-type,.wag-blue-section) h1 span,
.wag-design8-shell .wag-page-content > :is(section:first-of-type,.wag-blue-section) h2 span:not(.brand-group-word) {
  color: var(--wag-page-orange) !important;
}

.wag-design8-shell .wag-page-content > :is(section:first-of-type,.wag-blue-section) .btn-secondary,
.wag-design8-shell .wag-page-content > :is(section:first-of-type,.wag-blue-section) .button.secondary {
  background: transparent !important;
  border-color: rgba(247, 241, 231, 0.7) !important;
  color: var(--wag-page-cream) !important;
}

.wag-design8-shell .wag-page-content > :is(section:first-of-type,.wag-blue-section) :is(.detail-panel, .service-card, .values-grid > div, .link-panel, .structure-card) {
  background: var(--wag-page-cream) !important;
  border-color: rgba(247, 241, 231, 0.32) !important;
  color: var(--wag-page-navy) !important;
}

.wag-design8-shell .wag-page-content > :is(section:first-of-type,.wag-blue-section) :is(.detail-panel, .service-card, .values-grid > div, .link-panel, .structure-card) :is(h2, h3, p, li) {
  color: var(--wag-page-navy) !important;
}

.wag-design8-shell .wag-page-content > :is(section:first-of-type,.wag-blue-section) .campaign-visual,
.wag-design8-shell .wag-page-content > :is(section:first-of-type,.wag-blue-section) .hero-image,
.wag-design8-shell .wag-page-content > :is(section:first-of-type,.wag-blue-section) .service-hero-image {
  background: var(--wag-page-cream);
}

.wag-design8-shell .wag-page-content > :is(section:first-of-type,.wag-blue-section) .campaign-visual figcaption {
  color: var(--wag-page-cream);
}

/* Contact has page-local legacy colour declarations; the shared design remains
   the final authority for the first-section treatment. */
.wag-design8-shell .wag-page-content > .enquiry-hero:first-of-type,
.wag-design8-shell .wag-page-content > .enquiry-hero:first-of-type .hero-inner {
  color: var(--wag-page-cream) !important;
}

.wag-design8-shell .wag-page-content > .enquiry-hero:first-of-type :is(h1, p, span) {
  color: var(--wag-page-cream) !important;
}

.wag-design8-shell .wag-page-content > .enquiry-hero:first-of-type .eyebrow,
.wag-design8-shell .wag-page-content > .enquiry-hero:first-of-type .eyebrow span {
  color: var(--wag-page-orange) !important;
}

/* Homepage colour balance: keep the campaign as the single dominant opening
   navy band, use a warm light people section, and reserve navy for the later
   AEH delivery section. */
.wag-design8-shell .option-3 > .home-hero {
  background: var(--wag-page-cream) !important;
  color: var(--wag-page-navy) !important;
}
.wag-design8-shell .option-3 > .home-hero :is(h2,p) { color: var(--wag-page-navy) !important; }
.wag-design8-shell .option-3 > .home-hero .btn-secondary {
  background: transparent !important;
  color: var(--wag-page-navy) !important;
  border-color: var(--wag-page-navy) !important;
}
.wag-design8-shell .option-3 > .heat-feature,
.wag-design8-shell .option-3 > .reviews-band {
  background: var(--wag-page-sand) !important;
  color: var(--wag-page-navy) !important;
}
.wag-design8-shell .option-3 > .reviews-band :is(h2,p) { color: var(--wag-page-navy) !important; }
.wag-design8-shell .option-3 > .review-card { border-color: rgba(18,40,76,.28); }

@media (max-width: 900px) {
  :root { --wag-page-width: calc(100vw - 48px); }

  .wag-design8-shell .wag-page-content > :is(section, details, .enquiry-shell),
  .wag-design8-shell .wag-page-content.wag-history > .hero {
    width: var(--wag-page-width) !important;
    max-width: none;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  .wag-design8-shell .wag-page-content > section:first-of-type,
  .wag-design8-shell .wag-page-content.wag-history > .hero {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .wag-design8-shell .wag-page-content > :is(.navy,.today,.sand,.cta-band,.reviews-band,.history-map,.continuity-strip,.proof-strip,.micro-proof,.heat-feature),
  .wag-design8-shell .wag-page-content > details.campaign-conditions {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .wag-design8-shell .wag-page-content > :is(.hero, .service-hero, .campaign-hero),
  .wag-design8-shell .wag-page-content.wag-history > .hero {
    margin-top: 24px !important;
    margin-bottom: 48px !important;
  }

  .wag-design8-shell .wag-page-content > .cta-band {
    margin-top: 48px;
    margin-bottom: 48px;
  }
}

@media (max-width: 600px) {
  :root { --wag-page-width: calc(100vw - 32px); }

  .wag-design8-shell .wag-page-content > section:first-of-type,
  .wag-design8-shell .wag-page-content.wag-history > .hero,
  .wag-design8-shell .wag-page-content > :is(.navy,.today,.sand,.cta-band,.reviews-band,.history-map,.continuity-strip,.proof-strip,.micro-proof,.heat-feature),
  .wag-design8-shell .wag-page-content > details.campaign-conditions {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Coloured bands provide their own internal breathing room. External vertical
   margins created empty white strips between full-bleed sections in both View
   and Edit mode, so keep band-to-band transitions flush at every breakpoint. */
.wag-design8-shell .wag-page-content > :is(
  .hero,
  .service-hero,
  .campaign-hero,
  .navy,
  .today,
  .sand,
  .cta-band,
  .reviews-band,
  .history-map,
  .continuity-strip,
  .proof-strip,
  .micro-proof,
  .heat-feature,
  .wag-blue-section
),
.wag-design8-shell .wag-page-content.wag-history > .hero {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}