/*
  WAD 2026 campaign artwork layer — loaded after palette.css by PublicSite, ParticipantPortal
  and AdminPortal (keep the three copies identical). Images live in wwwroot/images/brand and are
  cut from the official artboards; masters + the cutting script are in assets/branding/wad2026.
    wad-logo.png / wad-logo-light.png  event lockup for light / dark surfaces
    wad-runners.(webp|jpg)             runners photo used behind every .wad-hero
    wad-pattern.png                    Kenyan-flag triangle band (transparent, sparse top → dense bottom)
    wad-pattern-strip.png              the dense bottom rows only, for thin edges
*/

/* ---------- Event logo: light/dark swap ---------- */
.wad-event-logo { display: block; height: auto; width: auto; border-radius: 0 !important; }
.wad-event-logo.on-dark { display: none; }
body.wad-dark .wad-event-logo.on-light { display: none; }
body.wad-dark .wad-event-logo.on-dark { display: block; }
/* For surfaces that are always dark (hero, footer, admin sidebar) regardless of theme. */
.wad-event-logo.on-dark.is-fixed { display: block; }

/* Header shows the event logo only (the NSDCC logo lives in the footer). */
.wad-brand-lockup { display: flex; align-items: center; gap: 0.75rem; }
.wad-brand-lockup .wad-brand-divider { width: 1px; align-self: stretch; margin: 0.35rem 0; background: var(--wad-gray); }
.wad-navbar .brand .wad-event-logo { height: 52px; }
body.wad-dark .wad-brand-lockup .wad-brand-divider { background: #3a3636; }
/* Phones: both logos plus the menu button must fit in one row, or the page scrolls sideways. */
@media (max-width: 520px) {
  .wad-brand-lockup { gap: 0.45rem; min-width: 0; }
  .wad-navbar .brand .wad-event-logo { height: 42px; }
}

/* ---------- Hero: runners photo under the charcoal wash ---------- */
.wad-hero {
  position: relative;
  background:
    linear-gradient(100deg, rgba(34, 31, 31, 0.95) 0%, rgba(34, 31, 31, 0.86) 42%, rgba(34, 31, 31, 0.5) 100%),
    url("../images/brand/wad-runners.jpg") center 35% / cover no-repeat,
    var(--wad-charcoal);
  background:
    linear-gradient(100deg, rgba(34, 31, 31, 0.95) 0%, rgba(34, 31, 31, 0.86) 42%, rgba(34, 31, 31, 0.5) 100%),
    image-set(url("../images/brand/wad-runners.webp") type("image/webp"), url("../images/brand/wad-runners.jpg") type("image/jpeg")) center 35% / cover no-repeat,
    var(--wad-charcoal);
}
@media (max-width: 760px) {
  .wad-hero {
    background:
      linear-gradient(180deg, rgba(34, 31, 31, 0.9) 0%, rgba(34, 31, 31, 0.82) 100%),
      url("../images/brand/wad-runners-sm.jpg") center / cover no-repeat,
      var(--wad-charcoal);
  }
}
/* Homepage overlay (sits above the optional video) — same left-heavy wash so the runners show on the right. */
.wad-hero-overlay {
  background:
    radial-gradient(ellipse 900px 500px at 85% -10%, rgba(0, 166, 79, 0.22), transparent 60%),
    linear-gradient(100deg, rgba(34, 31, 31, 0.95) 0%, rgba(34, 31, 31, 0.84) 45%, rgba(34, 31, 31, 0.45) 100%);
}
/* Triangle edge along the bottom of every hero. */
.wad-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  background: url("../images/brand/wad-pattern-strip.png") left bottom / auto 100% repeat-x;
  z-index: 2;
  pointer-events: none;
}
.wad-hero-logo { width: min(440px, 82%); height: auto; margin: 0 0 1.25rem; }
.wad-hero-logo + h1 { margin-top: 0; }

/* ---------- Triangle band leading into the footer ---------- */
.wad-pattern-band {
  height: clamp(64px, 9vw, 120px);
  margin-top: 2.5rem;
  background: url("../images/brand/wad-pattern.png") center bottom / auto 100% repeat-x;
}
.wad-footer .wad-event-logo { height: 64px; margin-bottom: 0.75rem; }
.wad-footer-brand { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.wad-footer-brand img:not(.wad-event-logo) { height: 48px; width: auto; border-radius: 6px; }
.wad-footer-brand .wad-event-logo { margin-bottom: 0; }

/* ---------- Invoice / printable documents ---------- */
.wad-doc-strip {
  height: 26px;
  margin: -1.5rem -1.5rem 1.25rem;
  background: url("../images/brand/wad-pattern-strip.png") left top / auto 100% repeat-x;
  transform: scaleY(-1); /* dense rows against the top edge */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.wad-doc-strip.is-bottom { margin: 1.5rem -1.5rem -1.5rem; transform: none; background-position: left bottom; }
.wad-invoice-brand { align-items: center; }
.wad-invoice-brand .wad-doc-logo { height: 72px; width: auto; border-radius: 0; }
.wad-invoice-brand .wad-doc-issuer { display: flex; flex-direction: column; gap: 0.3rem; padding-left: 0.85rem; border-left: 1px solid var(--wad-gray); }
.wad-invoice-brand .wad-doc-issuer img { height: 34px; width: auto; align-self: flex-start; }
body.wad-dark .wad-invoice-brand .wad-doc-issuer { border-left-color: #3a3636; }
@media (max-width: 575.98px) {
  .wad-invoice-brand { flex-wrap: wrap; }
  .wad-invoice-brand .wad-doc-issuer { padding-left: 0; border-left: none; }
}

@media print {
  .wad-pattern-band, .wad-hero::after { display: none !important; }
  .wad-doc-strip { margin: 0 0 1.25rem; }
  .wad-doc-strip.is-bottom { margin: 1.5rem 0 0; }
  .wad-invoice-table thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Paper is always white: print the light-surface logo even if the viewer was in dark mode. */
  body.wad-dark .wad-event-logo.on-light { display: block !important; }
  body.wad-dark .wad-event-logo.on-dark:not(.is-fixed) { display: none !important; }
}