/* ============================================================
   Digital You CIC — visual QA fixes (Luke's screenshot round, 17 Jul)
   Loads @985: after every design layer, before a11y (999).
   Author: lukeduff.co.uk
   ============================================================ */

/* ---- 1. Home credibility band: icon-above, centred, equal columns
        (was icon-left with ragged wrapping heights) ---- */
.elementor-10 .cred-item{
  flex-direction:column!important;align-items:center!important;
  text-align:center!important;gap:14px!important}
.elementor-10 .cred-item h3{margin-bottom:4px}
.elementor-10 .cred-item p{max-width:30ch;margin:0 auto}

/* ---- 2. Turquoise heading underlines: thinner site-wide (was 12-14px) ---- */
h2 .u{box-shadow:inset 0 -6px 0 var(--turquoise,#16becf)!important}

/* ---- 3. White chips: border so they don't melt into light grounds
        (colour-filled variants keep their fill, transparent border
        preserves equal sizing) ---- */
.chip{border:1.5px solid rgba(20,78,140,.25)}
.chip.k2,.chip.k3,.chip.k4{border-color:transparent}

/* ---- 4. What We Do "Explore our support in detail": contained white
        panel instead of a bare floating band ---- */
.elementor-12 .explore{padding:64px 0!important}
.elementor-12 .explore-inner{
  background:#fff;border-radius:28px;
  box-shadow:0 18px 44px rgba(9,32,60,.10);
  padding:52px 40px!important;
  width:min(880px,calc(100% - 48px));max-width:880px!important;margin:0 auto}

/* ---- 5. Hero bottom curve: match the ground of the section below
        (was always white -> white sliver band on mist/dark pages).
        Pixel-probed 17 Jul: page 11's first section renders WHITE (depth
        layer), and page 12's .services is a RADIAL gradient — a solid curve
        can never match it, so the curve carries a bottom-anchored
        continuation of the same gradient (top edge of the section and
        bottom edge of the curve compute to identical colours). ---- */
.elementor-15 .hero::after,
.elementor-16 .hero::after,
.elementor-46 .mv-hero::after{background:#f4f7fb!important}
.elementor-11 .hero::after{background:#fff!important}
.elementor-12 .hero::after{
  background:radial-gradient(125% 1200% at 80% 100%,#1e69b4 0%,#103f73 58%)!important}

/* ---- 6. Mission & Values cards: polish's dark-band shadow (.26) sat on a
        light ground here — bring back to the standard light-card depth ---- */
body.elementor-page-46 .values .svc,
body.elementor-page-46 .believe .svc{
  box-shadow:0 12px 30px rgba(9,32,60,.10)!important}
body.elementor-page-46 .values .svc:hover,
body.elementor-page-46 .believe .svc:hover{
  box-shadow:0 22px 48px rgba(9,32,60,.16)!important}

/* ---- 7. Button widget wrappers must NEVER paint (kills the white
        rectangle that can appear behind pills on hover/focus) ---- */
.elementor-widget-button.btn,
.elementor-widget-button.btn:hover,
.elementor-widget-button.btn:focus-within,
.elementor-widget-button.btn:active,
.btn .elementor-button-wrapper,
.btn .elementor-button-wrapper:hover{
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important}

/* ---- 8. Resources: remove the "Where we focus" topics section ---- */
body.elementor-page-16 .who{display:none!important}

/* ---- 9. Header nav dropdowns — REMOVED 17 Jul.
        The nesting this styled (Mission & Values under Who We Are; DI Support /
        Training & Champions / Orgs & Partners under What We Do) was added in
        sessions 8f/8i to make every page reachable from the header. It undid
        Sharon's 17 Jul email, which asks for a flat top row:
        Who We Are · What We Do · Our Mission and Values · Resources + [Contact us]
        — matching the nav of the concept she signed off (chosen-mockup.html).
        The footer links every page, so nothing is orphaned. The menu is flat in
        the DB now; these rules had no elements left to match. ---- */

@media (max-width:1024px){
  /* logo: an Elementor mobile width setting squeezes the img to 33px wide
     (natural 389x211) -> wordmark renders clipped. Height-drive it. */
  .dy-header .dy-logo img{height:52px!important;width:auto!important;max-width:none!important;object-fit:contain}

  /* ---- 12 (audit 8i): mobile panel + toggle polish ----
     panel opened at y58 while the logo bottoms at y62 -> clipped logo;
     nudge the dropdown list below the logo (absolute repositioning of the
     nav breaks HFE's full-width panel — margin only) */
  .dy-header nav .hfe-nav-menu{margin-top:22px!important}
  /* stock toggle was a raw black hamburger + sharp ☒ window-close glyph —
     replace with a brand chip + pure-CSS bars that cross into an X
     (aria-expanded is kept in sync by dycic-a11y-enhance) */
  .dy-header .hfe-nav-menu-icon{
    width:46px;height:46px;border-radius:14px;background:#f4f7fb;
    border:1.5px solid rgba(20,78,140,.14);
    display:flex;align-items:center;justify-content:center;
    position:relative;cursor:pointer}
  .dy-header .hfe-nav-menu-icon svg{display:none!important}
  .dy-header .hfe-nav-menu-icon::before,
  .dy-header .hfe-nav-menu-icon::after{
    content:"";position:absolute;left:13px;right:13px;height:2.5px;
    border-radius:2px;background:#144e8c;
    transition:transform .22s ease,top .22s ease,bottom .22s ease,box-shadow .1s ease}
  .dy-header .hfe-nav-menu-icon::before{top:16px;box-shadow:0 6.5px 0 #144e8c}
  .dy-header .hfe-nav-menu-icon::after{bottom:16px}
  .dy-header .hfe-nav-menu-icon[aria-expanded="true"]::before{
    top:21px;transform:rotate(45deg);box-shadow:none}
  .dy-header .hfe-nav-menu-icon[aria-expanded="true"]::after{
    bottom:22.5px;transform:rotate(-45deg)}

  /* hamburger flush right (the nav widget box is wider than its icon,
     leaving the toggle stranded mid-header) */
  .dy-header .elementor-widget-nav-menu{margin-left:auto!important;width:auto!important;flex-grow:0!important}
  .dy-header .hfe-nav-menu__toggle,
  .dy-header .hfe-nav-menu-icon{margin-left:auto!important;margin-right:0!important}
}

/* ---- 10. Header premium pass (17 Jul, Luke: "too plain / too much white
        space"). Brand gradient hairline on the bottom edge (same sunrise
        gradient language as the footer's top edge), logo left with nav+CTA
        grouped right (kills the two dead white gulfs around a centred menu),
        gradient CTA pill, and a frosted shrink state once the page scrolls
        (body.dy-scrolled toggled by the loader's inline JS). ---- */
/* dycic.css makes .dy-header sticky, but its wrappers (.elementor-33 + the
   theme <header>) are exactly its own height -> zero stick range: the
   "sticky" header has never actually stuck. Hoist sticky to the outer
   <header>, whose parent (.site) is full-page. */
header:has(.dy-header),
header#masthead:has(.dy-header){position:sticky!important;top:0!important;z-index:99}
.dy-header{
  box-shadow:0 1px 0 rgba(20,78,140,.05),0 12px 30px -20px rgba(9,32,60,.20)!important;
  transition:background-color .25s ease,box-shadow .25s ease}
.dy-header::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,#16becf 0%,#4f86c9 45%,#7961aa 75%,#e8b93c 100%)}
.dy-header .dy-logo img{transition:height .25s ease}
.dy-header-inner{transition:min-height .25s ease}

@media (min-width:1025px){
  /* logo left, nav+CTA grouped right (mobile keeps its own auto-margin
     hamburger layout, so this must not leak below 1025) */
  .dy-header .dy-logo{margin-right:auto!important}
  .dy-header-inner{min-height:88px!important}
  .dy-header .hfe-nav-menu .menu-item{margin:0 15px}
  .dy-header .elementor-widget-nav-menu,
  .dy-header .hfe-nav-menu-wrapper{margin-right:16px}
  /* CTA: in-family gradient pill (solid base colour first — gradient
     shorthands wipe background-color and axe sees white, session-7 lesson) */
  .dy-header .btn .elementor-button,
  .dy-header .elementor-widget-button .elementor-button{
    background-color:#16becf!important;
    background-image:linear-gradient(135deg,#2fd6e6 0%,#16becf 100%)!important;
    box-shadow:0 6px 16px rgba(22,190,207,.28);
    padding:11px 24px}
  .dy-header .btn .elementor-button:hover{
    box-shadow:0 10px 24px rgba(22,190,207,.42)}
  /* frosted shrink once scrolled (.95 not .88 — at .88 body copy ghosted
     through behind the nav links, audit 8i) */
  body.dy-scrolled .dy-header{
    background:rgba(255,255,255,.95)!important;
    -webkit-backdrop-filter:blur(16px) saturate(1.3);
    backdrop-filter:blur(16px) saturate(1.3);
    box-shadow:0 1px 0 rgba(20,78,140,.08),0 16px 36px -18px rgba(9,32,60,.28)!important}
  body.dy-scrolled .dy-header-inner{min-height:72px!important}
  body.dy-scrolled .dy-header .dy-logo img{height:52px}
}

/* footer logo alignment differed per page (Elementor's stock image-widget
   centre survived on home only) -> one alignment everywhere, matching the
   left-aligned blurb beneath it (audit 8i) */
.dy-footer .flogo{text-align:left!important}

/* ---- 11. Finish details (17 Jul): the small signals of a cared-for site ---- */
::selection{background:rgba(22,190,207,.35);color:#0d3a6b}
html{scrollbar-gutter:stable}
body{-webkit-tap-highlight-color:transparent}

/* Fluent form: brand focus ring, clear error + success states */
.fluentform .ff-el-form-control:focus{
  border-color:#16becf!important;
  box-shadow:0 0 0 3px rgba(22,190,207,.25)!important;outline:none!important}
.fluentform .ff-el-is-error .ff-el-form-control{
  border-color:#b3362a!important;background:#fff8f7!important}
.fluentform .error,
.fluentform .text-danger,
.fluentform .ff-el-is-error .error{
  color:#a03024!important;font-weight:600;font-size:14px;margin-top:6px;display:block}
.fluentform .ff-message-success{
  background:#eafaf3;border:1.5px solid #00b37d;border-radius:14px;
  padding:18px 22px;color:#0d3a6b;font-weight:600;
  font-family:"Source Sans 3",sans-serif}

/* Print: legal pages / any page prints as a clean document */
@media print{
  .dy-header,.dy-footer,.dycic-related,.dycic-skip,.pill-row,
  .btn,.elementor-widget-button,.cta-row{display:none!important}
  body,.section{background:#fff!important}
  .hero,.mv-hero,.page-header{background:none!important;padding:12px 0!important;min-height:0!important}
  .hero::before,.hero::after,.mv-hero::before,.mv-hero::after{display:none!important}
  .hero *,.mv-hero *,.page-header *{color:#000!important;text-shadow:none!important}
  *{box-shadow:none!important}
}

/* ---- 13. About team: generic placeholder portraits (Luke, 17 Jul).
        Monogram tiles -> real photo slots (att 84/85, CC BY, swap-in-place
        when Sharon supplies headshots). Both tiles carry a red PLACEHOLDER
        tag so nobody mistakes a stock face for a founder, and Ayisha's
        made-up role kicker is red + quoted per Luke's spec. ---- */
.elementor-11 .ph.mono{padding:0!important;overflow:hidden;position:relative;background:#f4f7fb!important}
.elementor-11 .ph.mono .dycic-ph-photo,
.elementor-11 .ph.mono .dycic-ph-photo .elementor-widget-container{position:absolute;inset:0;line-height:0}
.elementor-11 .ph.mono .dycic-ph-photo img{
  width:100%!important;height:100%!important;object-fit:cover;display:block}
/* the old monogram tile painted a heather wedge (::before) + turquoise
   circle (::after, clip-path) — fully neutralise both or the badge below
   inherits their clip-path/inset per-property and renders as a giant blob */
.elementor-11 .ph.mono::before{display:none!important;content:none!important}
.elementor-11 .ph.mono::after{
  content:"PLACEHOLDER PHOTO"!important;
  position:absolute;inset:auto auto 12px 12px;width:auto;height:auto;
  clip-path:none!important;opacity:1!important;z-index:2;
  font-family:"Source Sans 3",sans-serif;font-size:11px;font-weight:800;
  letter-spacing:.12em;color:#fff;background:#c0392b!important;
  padding:5px 10px;border-radius:999px;pointer-events:none}
/* must out-specify a11y's 5-class .role recolour (@999) */
.elementor-11 .dycic-ph-role .elementor-heading-title,
.elementor-11 .team-row .dycic-ph-role.role.elementor-widget-heading .elementor-heading-title.elementor-size-default{
  color:#c0392b!important;font-weight:700!important}

/* ---- 14. Sharon-copy initiative round (17 Jul, pre-meeting — Luke: take
        initiative, review after the meeting; every rule here is reversible) */
/* Home "Why Digital Inclusion Matters" — her doc section, was missing */
.elementor-10 .whymatters{background:#f4f7fb;padding:88px 24px!important;text-align:center}
.elementor-10 .whymatters .eyebrow{display:block;margin-bottom:10px}
.elementor-10 .whymatters h2{margin:0 auto 26px}
.elementor-10 .whymatters p{max-width:800px;margin:0 auto 18px;font-size:18px;line-height:1.7;color:#37689d}
.elementor-10 .whymatters .wm-lead{font-size:22px;font-weight:600;color:#144e8c}
/* About/Mission duplication: About trimmed to Story + Team (sheet option b);
   the Believe + Values copy lives on Mission & Values only. UNHIDE by
   deleting these two lines if Sharon prefers option (a). */
body.elementor-page-11 .believe{display:none!important}
body.elementor-page-11 .values{display:none!important}

@media (max-width:700px){
  .elementor-12 .explore-inner{padding:36px 22px!important}
}

/* ---- 15. (17 Jul pre-meeting) "NHS Digital Ambassadors" chip was briefly
   hidden here pending verification, then RESTORED the same hour: her project
   questionnaire CSV states "Ayisha and I are both NHS Digital Ambassadors".
   Wording confirm remains on the meeting sheet (facts item). No rules. */