/* ============================================================================
   Digital You CIC — layout follow-ups for Sharon's 14 Aug 2026 edit round.
   Kept in its own layer so the whole round can be reverted by deleting
   dycic-load-sharon-aug.php + this file.
   Author: lukeduff.co.uk
   ========================================================================= */

/* --------------------------------------------------------------- §1 ROUTES
   "Get involved" dropped from two boxes to one ("Let's start a conversation").
   The wrap-grid was built for a 2-up; a lone card would otherwise stretch the
   full content width and read as a banner rather than a card.
   Written to work whether Elementor renders the container as grid or flex.  */

body.elementor-page-10 .routes .wrap-grid{
  grid-template-columns:minmax(0,640px)!important;
  justify-content:center!important;
  max-width:640px;
  margin-inline:auto;
}

body.elementor-page-10 .routes .wrap-grid>.route{
  width:100%;
}

/* ---------------------------------------------------------------- §2 INTRO
   Sharon's new standfirst under "Let's work together". Matches the centred
   measure used by the other section intros; colour is inherited so it keeps
   whatever the section already sets.                                        */

/* !important is required, not lazy: Elementor's container rule
   (.e-con > .elementor-widget) resolves max-width to 100% and beats a plain
   declaration here — the same trap already documented for .intro-split in
   dycic-qa2.css §11b. */
body.elementor-page-10 .routes .routes-intro{
  max-width:760px!important;
  margin:0 auto 44px!important;
  text-align:center;
}

@media(max-width:680px){
  body.elementor-page-10 .routes .routes-intro{margin-bottom:32px}
}

/* ----------------------------------------------------------------- §3 LOGO
   Sharon: "increase size of logo so it looks more prominent".
   Desktop 66 -> 82, scrolled 52 -> 64, mobile 52 -> 56. The header bar's
   min-height rises with it so the mark isn't crowded against the edges.
   Breakpoint matches the existing 1024px split in dycic.css / qa-visual;
   !important is needed to beat qa-visual's own !important logo rule (985). */

@media(min-width:1025px){
  .dy-header .dy-logo img{height:82px!important}
  body.dy-scrolled .dy-header .dy-logo img{height:64px!important}
  .dy-header-inner{min-height:106px!important}
  body.dy-scrolled .dy-header-inner{min-height:88px!important}
}

@media(max-width:1024px){
  .dy-header .dy-logo img{height:56px!important}
  .dy-header-inner{min-height:76px!important}
}

/* ----------------------------------------------------------------- §4 COPY
   Sharon: "change the font for all copy to 15.5". Body copy was 17px.
   Applied to text-editor body copy only — display copy (hero .lead) and the
   micro-labels (card meta, form sub) keep their designed scale, otherwise the
   type hierarchy collapses. Line-height lifted 1.65 -> 1.7 to hold the rhythm
   at the smaller size.                                                       */

body[class*="elementor-page"] .elementor-widget-text-editor:not(.lead):not(.ins-meta):not(.ins-sub):not(.fc-sub):not(.sub) p{
  font-size:15.5px!important;
  line-height:1.7!important;
}

/* ------------------------------------------------------------- §8 INSIGHTS
   The three post cards became one "On Our Minds" box. The grid was built as a
   3-up, so a lone card would span the full measure and stop reading as a card.
   Same treatment as the routes grid in §1.                                   */

body.elementor-page-10 .insights .ins-grid{
  grid-template-columns:minmax(0,640px)!important;
  justify-content:center!important;
  max-width:640px;
  margin-inline:auto;
}

/* the lone card lost its chip and byline, so it needs its own padding to keep
   the visual weight of a card rather than reading as a stray line of text */
body.elementor-page-10 .insights .ins-grid > .ins-card{
  width:100%;
  padding:34px 36px!important;
}

/* -------------------------------------------------------------- §7 FOUNDER
   Ayisha's real headshot is in (att 130), so her tile drops the red
   "PLACEHOLDER PHOTO" tag. That tag is a ::after on .ph.mono in qa-visual §13
   and hits BOTH tiles, so it can only be lifted per-tile. Sharon's keeps it
   until her headshot arrives — delete this block's counterpart then.         */

.elementor-11 .ph.mono.has-photo::after{
  content:none!important;
  display:none!important;
}

/* --------------------------------------------------------------- §6 CARDS
   Sharon: "change the colour of the 'Build Partnerships' box to the same as
   'Measure Impact'". Build Partnerships sits 4th (was pastel sand #f1e9d8);
   Measure Impact sits 6th (pastel heather #e7e0f3). Position-based, so this
   overrides dycic-cards-pastel.css nth-child(4).                            */

.elementor-10 .services .svc-grid > .svc:nth-child(4){ background:#e7e0f3 !important; }

/* §5 eyebrow kickers were removed sitewide (Sharon). The headings that sat
   under them were spaced assuming a 13px label above; pull the top back so the
   sections don't open with a gap where the label used to be. */

body[class*="elementor-page"] .elementor-widget-heading + .elementor-widget-heading{
  margin-top:0;
}

/* ═══════════════════════════════════════════════ AYISHA — 22 AUG 2026 ROUND
   Source: Ayisha Hameed email 21 Aug 2026, 23:04. Four colour items + copy.
   All position-based, so they override dycic-home-revisions.css (home) and
   dycic-cards-pastel.css (page 12) without touching _elementor_data.        */

/* ------------------------------------------------------------- §9 HOW WE HELP
   Grid order is IDENTICAL on page 10 and page 12 (verified from live data,
   not assumed): 1 Identify Opportunities · 2 Embed Digital Inclusion ·
   3 Build Confidence · 4 Build Partnerships · 5 Unlock Opportunities ·
   6 Measure Impact.

   (a) "change the colour of 'Build confidence' to the same colour as
       'Unlock opportunities'" — pos 3 (was pastel blue #dbe9f7) takes
       pos 5's pastel turquoise #d6f0f4.
   (b) "'What we do' — change 'Build partnerships' to the same purple as
       'measure impact' and 'embed digital inclusion'" — page 12 pos 4
       (was pastel sand #f1e9d8) takes pastel heather #e7e0f3. This is the
       same change §6 already made on the homepage.

   Both are applied to BOTH grids so the two "How we help" sections stay
   identical — that is plainly the direction of travel (b) is asking for.
   To scope either back to one page, split the selector. One-line revert.  */

.elementor-10 .services .svc-grid > .svc:nth-child(3),
.elementor-12 .services .svc-grid > .svc:nth-child(3){ background:#d6f0f4 !important; }

.elementor-12 .services .svc-grid > .svc:nth-child(4){ background:#e7e0f3 !important; }

/* ---------------------------------------------------------------- §10 CHIPS
   "Where it says 'Working alongside you', change the tabs in white to one
   blue, green, purple." The 12 chips in .who .chips were all white pills.
   Now cycling in threes.

   NOTE ON "GREEN": the brand has no green. Its secondary is turquoise, and
   the pastel trio used here is the SAME one already on the How We Help cards
   (#dbe9f7 blue · #d6f0f4 turquoise · #e7e0f3 heather), so the chips now echo
   the cards. If she meant a literal green, change the middle value only.

   Each chip is its own HTML widget, so nth-child counts the widget wrappers,
   not the .chip inside. Text stays --blue #144e8c (>7:1 on all three).      */

.elementor-10 .who .chips > .elementor-widget-html:nth-child(3n+1) .chip{ background:#dbe9f7 !important; }
.elementor-10 .who .chips > .elementor-widget-html:nth-child(3n+2) .chip{ background:#d6f0f4 !important; }
.elementor-10 .who .chips > .elementor-widget-html:nth-child(3n+3) .chip{ background:#e7e0f3 !important; }

/* FIX 12 Sep — the comment above was an intention, not an enforced rule, and the
   text did NOT stay navy. The chips carry k1–k4 variants; dycic.css gives .chip.k2
   background:var(--blue) and .chip.k4 background:var(--heather), each WITH color:#fff.
   Repainting only the background above left six of the twelve chips — every k2 and
   k4 — as white text on a pastel: measured 1.19–1.28:1, i.e. unreadable, on every
   viewport since 22 Aug. Pinning the colour here makes the comment true.
   Measured after: 6.55–7.06:1. Page 12 uses the same markup but is untouched by the
   pastel override above, so its white-on-saturated chips stay correct. */
.elementor-10 .who .chips .chip,
.elementor-10 .who .chips .chip .elementor-heading-title{ color:#144e8c !important; }

/* The white pills relied on a shadow to separate them from the white section
   background. Coloured pills don't need it and it muddies the pastels. */
.elementor-10 .who .chips .chip{ box-shadow:0 2px 6px rgba(20,78,140,.06) !important; }

/* ------------------------------------------------------------- §11 HEADSHOT
   CROP ON TABLET AND MOBILE — 7 Sep 2026.

   dycic-page-11.css @980 sets `.elementor-11 .ph.mono{aspect-ratio:16/9}`.
   That was written when both team tiles were coloured blocks holding big "SS"
   and "AH" initials, where a wide band is the right shape. Both tiles now hold
   real headshots (Ayisha att 130 since Aug, Sharon att 145 since 7 Sep) and
   with object-fit:cover a 16:9 frame crops a near-square portrait to a
   letterbox across the middle of the face — it cuts the tops of their heads
   off. Desktop is unaffected: it uses 4/4.2 and looks correct.

   Scoped to .has-photo so a tile that ever goes back to initials keeps the
   original wide treatment. */
@media(max-width:980px){
  .elementor-11 .ph.mono.has-photo{ aspect-ratio:4/4.2 !important; }
  .elementor-11 .ph.mono.has-photo img{ object-position:center top; }
}

/* ------------------------------------------------------- §12 VALUES CARDS
   Ayisha, 25 Sep 2026: "'Collaboration' tab needs to be purple and
   'Community Driven' needs to be the same colour as 'Practical Action'."
   dycic-polish.css rotates the six cards on nth-child(4n+…) — card 3
   (Community Driven) was blue, card 4 (Collaboration) sand. Reuses polish's
   own turquoise and heather gradients; .values adds the specificity to win.
   Result: turquoise / purple alternating across all six.                  */
body.elementor-page-46 .values .svc-grid>.svc:nth-child(3){ background:linear-gradient(158deg,#e4f7fa 0%,#c9ecf1 100%)!important; }
body.elementor-page-46 .values .svc-grid>.svc:nth-child(4){ background:linear-gradient(158deg,#efe8fa 0%,#ddd1f0 100%)!important; }

/* ---------------------------------------------------- §13 INSIGHTS BUTTON
   25 Sep 2026: "See all insights" (widget b7e25a1) under the homepage's
   On Our Minds card → /resources/. Room above so it doesn't touch the card
   shadow, and below so it doesn't sit on the section edge.              */
.elementor-10 .insights .ins-more{ margin-top:36px !important; margin-bottom:12px !important; }

/* ------------------------------------------------ §14 INSIGHTS HERO GAP
   25 Sep 2026. With the hero's lead paragraph removed, the page showed a
   dead band under the hero: the curve was filled #f4f7fb (qa-visual) over a
   section painted --dy-ice #eaf1f8 (depth), leaving a visible seam, and
   .res-latest then added 88px (qa2 §12) + 16px of its own top padding.
   Curve now matches the section; top padding cut to sit under the curve.  */
.elementor-16 .hero::after{ background:#eaf1f8 !important; }
.elementor-16 .res-latest{ padding-top:24px !important; }
/* depth.css draws a 1px inset rule on top of .res-latest; under the curve it reads as a seam. */
body.elementor-page-16 .res-latest{ box-shadow:none !important; }