/* header-2026 (13 Oct 2026): calm header for dpom.co.uk. Source: CRM repo scripts/website-header-20261013/assets/header-2026.css
   Its own file, linked straight after shared.css, so none of it sits inside the :root{ block shared.css leaves open.
   Selectors repeat ids on purpose: shared.css's header rules are !important and nested under :root, so they carry
   (1,2,0) or more; these need to win without relying on file order.
   States (desktop, 981px and up; the mobile header is not touched):
     top of page, hero straight after the header (the rebuilt dark .gam-hero pages): header transparent, the hero is
       drawn up behind it, so there is no seam;
     top of page, anything else: the solid band exactly as before (light and legacy pages keep their contrast);
     scrolled (class dpom-hdr-scrolled, set by /js/dpom-header-2026.js past 50px, the same point the existing compact
       step fires): frosted dark glass, hairline bottom border; the existing compact step does the shrink, smoothed here.
   No layout shift: the header keeps its top-of-page height in the flow (--dpom-hdr-h, measured by the script), so
   compacting never moves the content below; the band itself is a pseudo-element that follows the bar. */

/* ---------- every width: the header keeps its top-of-page height, so the compact step never moves the page ---------- */
html body #site-header#site-header,
html body #site-header#site-header.header-scrolled { min-height: var(--dpom-hdr-h, 0px) !important; }

@media (min-width: 981px) {
  /* ---------- the visible band is #site-header-inner::before, full bleed ----------
     NOT overflow-x:clip on the header: Chrome then stops hit-testing anything below the header box, so the
     dropdown panels could be seen but not reached and closed as the pointer moved down (fixed 13 Oct 2026).
     The band is sized to the page width instead: 100vw minus the scrollbar (--dpom-sbw, set by the header script). */
  html body #site-header#site-header.dpom-hdr-scrolled {
    background: transparent !important; box-shadow: none !important; pointer-events: none !important;
  }
  html body #site-header#site-header.dpom-hdr-scrolled > * { pointer-events: auto !important; }
  html body #site-header#site-header #site-header-inner::before {
    content: "" !important; display: block !important; position: absolute !important;
    top: 0 !important; bottom: 0 !important; left: 50% !important;
    width: calc(100vw - var(--dpom-sbw, 0px)) !important; margin-left: calc((var(--dpom-sbw, 0px) - 100vw) / 2) !important;
    z-index: -1 !important; pointer-events: none !important;
    background: transparent; border-bottom: 1px solid transparent;
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  html body #site-header#site-header.dpom-hdr-scrolled #site-header-inner::before {
    background: rgb(20, 24, 42) !important;                      /* fallback: a solid band, as before */
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55) !important;
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html body #site-header#site-header.dpom-hdr-scrolled #site-header-inner::before {
      background: rgba(20, 24, 42, 0.72) !important;
      -webkit-backdrop-filter: blur(14px) saturate(140%) !important; backdrop-filter: blur(14px) saturate(140%) !important;
    }
  }
  /* the header's star layers belong to the solid band; the glass and the hero do without them */
  html body #site-header#site-header::before, html body #site-header#site-header::after { transition: opacity .25s ease !important; }
  html body #site-header#site-header.dpom-hdr-scrolled::before, html body #site-header#site-header.dpom-hdr-scrolled::after { opacity: 0 !important; }

  /* ---------- top of page over a dark hero: no band at all ---------- */
  html body #site-header#site-header:has(+ .gam-hero) { background: transparent !important; box-shadow: none !important; }
  html body #site-header#site-header:has(+ .gam-hero)::before, html body #site-header#site-header:has(+ .gam-hero)::after { opacity: 0 !important; }
  /* the hero starts at the top of the page; a transparent top border keeps its content exactly where it was */
  html body #site-header#site-header + .gam-hero {
    margin-top: -162px !important; border-top: 162px solid transparent !important;
    background-origin: border-box !important;
  }
  /* its glow and photo layers are drawn from the padding edge and clipped there; take them up under the header too
     (overflow-clip-margin moves the clip to the border edge; where it is unsupported they stop at the old line) */
  html body #site-header#site-header + .gam-hero { overflow: clip !important; overflow-clip-margin: border-box !important; }
  html body #site-header#site-header + .gam-hero::before, html body #site-header#site-header + .gam-hero::after { top: -162px !important; }

  /* ---------- the compact step, smoothed (the existing script snaps it) ---------- */
  html body #site-header#site-header #site-header-inner { transition: padding .25s ease !important; }
  html body #site-header#site-header #site-logo img { transition: max-height .25s ease, box-shadow .25s ease !important; }

  /* ---------- dropdowns: the same glass, a little denser so the muted text keeps AA over a white page ---------- */
  body #site-header #site-navigation-wrap #menu-mainmenu > li.megamenu-li:not(#menu-item-ai) > ul.sub-menu.megamenu {
    background: rgb(20, 24, 42) !important;
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body #site-header #site-navigation-wrap #menu-mainmenu > li.megamenu-li:not(#menu-item-ai) > ul.sub-menu.megamenu {
      background: rgba(20, 24, 42, 0.92) !important;
      -webkit-backdrop-filter: blur(14px) saturate(140%) !important; backdrop-filter: blur(14px) saturate(140%) !important;
    }
  }
  /* compact step: panels sit right under the bar; the AI panel too (its own 55px rule otherwise wins) */
  body #site-header.header-scrolled #site-navigation-wrap #menu-mainmenu > li#menu-item-ai > ul.megamenu.sub-menu { margin-top: 0 !important; }

  /* ---------- utility row: quiet text links, same place, same links ---------- */
  html body .portal-bar .portal-bar__inner {
    background: transparent !important; border-radius: 0 !important; box-shadow: none !important;
    padding: 12px 0 0 !important; gap: 20px !important; height: auto !important;
  }
  /* one row, one centre line: every item (menu links, Partners, Client login) is a 24px flex box centred on it */
  html body .portal-bar .portal-bar__inner { align-items: center !important; }
  html body .portal-bar .portal-bar__nav, html body .portal-bar .portal-menu, html body .portal-bar .portal-menu > li {
    display: flex !important; align-items: center !important; height: 24px !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important;
  }
  html body .portal-bar .portal-menu { gap: 20px !important; }
  html body .portal-bar .pb-tools > a::after { margin-left: 4px !important; }
  html body .portal-bar .portal-bar__inner a,
  html body .portal-bar .portal-bar__inner a[href*="/partners/"]:not(.wlp-cta):not(.gam-btn):not(.gam-cta-card) {
    color: rgb(226, 230, 238) !important; font-size: 12.5px !important; font-weight: 600 !important;
    letter-spacing: 0 !important; text-transform: none !important; line-height: 1 !important;
    display: inline-flex !important; align-items: center !important; box-sizing: border-box !important; height: 24px !important;
    vertical-align: middle !important; position: static !important; top: auto !important; transform: none !important;
    text-decoration: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
    background: none !important; opacity: 1 !important;
    transition: color .15s ease !important;
  }
  html body .portal-bar .portal-bar__inner a:hover, html body .portal-bar .portal-bar__inner a:focus-visible {
    color: #fff !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 4px !important;
  }
  html body .portal-bar .portal-bar__inner a:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7) !important; outline-offset: 3px !important; border-radius: 4px !important; }
  /* Client login: a small outlined pill with a line icon */
  html body .portal-bar .portal-bar__inner a.portal-login {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    padding: 0 11px 0 9px !important; border: 1px solid rgba(255, 255, 255, 0.34) !important; border-radius: 999px !important;
    color: #fff !important;
  }
  html body .portal-bar .portal-bar__inner a.portal-login:hover, html body .portal-bar .portal-bar__inner a.portal-login:focus-visible {
    text-decoration: none !important; border-color: rgba(255, 255, 255, 0.7) !important; background: rgba(255, 255, 255, 0.08) !important;
  }
  html body .portal-bar .portal-login svg { width: 13px; height: 13px; flex: 0 0 auto; display: block; }
  /* the Tools dropdown: styled in full here (the 2026 pages no longer carry the old page styles) */
  html body .portal-bar li.pb-tools { position: relative !important; }
  html body .portal-bar .pb-tools__menu {
    position: absolute !important; top: 100% !important; left: -14px !important; right: auto !important; z-index: 100000 !important;
    width: 300px !important; min-width: 0 !important; max-width: calc(100vw - 32px) !important; box-sizing: border-box !important;
    margin: 10px 0 0 !important; padding: 8px !important; list-style: none !important; text-align: left !important;
    display: none; flex-direction: column !important; gap: 2px !important; height: auto !important;
    background: rgb(20, 24, 42) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 14px !important;
    box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.7) !important;
  }
  /* an invisible strip over the 10px gap, so the pointer never leaves Tools on the way down */
  html body .portal-bar .pb-tools__menu::before { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: -12px !important; height: 12px !important; }
  html body .portal-bar li.pb-tools:hover > .pb-tools__menu, html body .portal-bar li.pb-tools:focus-within > .pb-tools__menu { display: flex !important; }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html body .portal-bar .pb-tools__menu { background: rgba(20, 24, 42, 0.92) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; backdrop-filter: blur(14px) saturate(140%) !important; }
  }
  html body .portal-bar .pb-tools__menu > li { display: block !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: normal !important; }
  html body .portal-bar .portal-bar__inner .pb-tools__menu a, html body .portal-bar .portal-bar__inner .pb-tools__menu a:hover {
    display: block !important; height: auto !important; width: auto !important; padding: 9px 12px !important; margin: 0 !important;
    border-radius: 9px !important; border: 0 !important; text-decoration: none !important; white-space: normal !important; line-height: 1.3 !important;
  }
  html body .portal-bar .portal-bar__inner .pb-tools__menu a:hover, html body .portal-bar .portal-bar__inner .pb-tools__menu a:focus-visible { background: rgba(255, 255, 255, 0.07) !important; }
  html body .portal-bar .pb-tools__menu a b { display: block !important; color: #fff !important; font-size: 13.5px !important; font-weight: 800 !important; line-height: 1.25 !important; white-space: nowrap !important; letter-spacing: 0 !important; text-transform: none !important; }
  html body .portal-bar .pb-tools__menu a small { display: block !important; margin-top: 2px !important; color: #aab3c7 !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; text-transform: none !important; letter-spacing: 0 !important; white-space: normal !important; }
}

/* ---------- phones and tablets (the header there is the logo only and scrolls away): the same no-seam top over a dark hero ---------- */
@media (max-width: 960px) {
  html body #site-header#site-header:has(+ .gam-hero) { background: transparent !important; box-shadow: none !important; }
  html body #site-header#site-header:has(+ .gam-hero)::before, html body #site-header#site-header:has(+ .gam-hero)::after { opacity: 0 !important; }
  html body #site-header#site-header + .gam-hero {
    margin-top: -140px !important; border-top: 140px solid transparent !important; background-origin: border-box !important;
    overflow: clip !important; overflow-clip-margin: border-box !important;
  }
  html body #site-header#site-header + .gam-hero::before, html body #site-header#site-header + .gam-hero::after { top: -140px !important; }
}

/* ---------- transparent header over the 2026 pages' dark hero (13 Oct 2026) ----------
   Hook for any page: put data-hero="dark" on the element that directly follows #site-header. The header then goes
   transparent at the top, and that element is drawn up behind it by --dpom-hdr-overlap (margin) and padded down by
   the same amount (so its content does not move). Decorative layers positioned inside a child section should start at
   top: calc(-1 * var(--dpom-hdr-overlap)) to reach the top of the page. Also matched today without the hook: the
   2026 pages' wrapper div#hp.hp (homepage, Google Ads, SEO, PPC pricing) with section.hp-hero first. */
:root { --dpom-hdr-overlap: 162px; }
@media (max-width: 960px) { :root { --dpom-hdr-overlap: 140px; } }
html body #site-header#site-header:has(+ .hp), html body #site-header#site-header:has(+ [data-hero="dark"]) {
  background: transparent !important; box-shadow: none !important;
}
html body #site-header#site-header:has(+ .hp)::before, html body #site-header#site-header:has(+ .hp)::after,
html body #site-header#site-header:has(+ [data-hero="dark"])::before, html body #site-header#site-header:has(+ [data-hero="dark"])::after { opacity: 0 !important; }
html body #site-header#site-header + .hp, html body #site-header#site-header + [data-hero="dark"] {
  margin-top: calc(-1 * var(--dpom-hdr-overlap)) !important; padding-top: var(--dpom-hdr-overlap) !important;
}
/* the hp hero's sky layer reaches up through that padding, so the wrapper's own colour never shows as a seam */
html body #site-header#site-header + .hp > .hp-hero:first-of-type .hp-hero__sky { top: calc(-1 * var(--dpom-hdr-overlap)) !important; }
html body #site-header#site-header + .hp > .hp-hero:first-of-type { overflow: visible !important; }
/* older pages whose dark colour is the page itself (contact, about, custom SEO quote): marked by the header script */
html body #site-header#site-header[data-hdr-over="dark"] { background: transparent !important; box-shadow: none !important; }
html body #site-header#site-header[data-hdr-over="dark"]::before, html body #site-header#site-header[data-hdr-over="dark"]::after { opacity: 0 !important; }
/* /contact-us/ opens on its own dark hero (.dpc-hero): draw it up behind the header the same way as .gam-hero */
html body #site-header#site-header[data-hdr-over="dark"] ~ main .dpc-hero {
  margin-top: calc(-1 * var(--dpom-hdr-overlap)) !important; border-top: var(--dpom-hdr-overlap) solid transparent !important;
  background-origin: border-box !important; overflow: clip !important; overflow-clip-margin: border-box !important;
}
html body #site-header#site-header[data-hdr-over="dark"] ~ main .dpc-hero::before { top: calc(-1 * var(--dpom-hdr-overlap)) !important; }

@media (prefers-reduced-motion: reduce) {
  html body #site-header#site-header #site-header-inner, html body #site-header#site-header #site-header-inner::before,
  html body #site-header#site-header #site-logo img { transition: none !important; }
}