/* Daylight — /resources/ hub (186) and its eight category pages.
   These pages are self-contained HTML with their own inline <style>
   scoped to #crr, built on the old navy/teal palette with hard-coded
   hex values, so redefining CSS variables alone would change nothing.

   Every rule here is prefixed body.dl-res, giving (1,2,x) against the
   inline rules' (1,1,x) — so these win on specificity rather than on
   !important, and the page content is never touched. Disabling the
   snippet restores the original design exactly. */

body.dl-res{
  --bg:#fcfaf7; --surface:#ffffff; --raised:#fffdfb;
  --sand:#f7f2ea; --sand-2:#f1ebe1;
  --sage:#5e8c77; --sage-deep:#3f6b58; --sage-darker:#2f5343;
  --sage-tint:#e6efe9; --sage-tint-2:#f0f6f2; --sage-line:#d7e6de;
  --peach:#e9a07b; --peach-deep:#b86f4a; --peach-tint:#fbeee5; --peach-line:#f3ddcc;
  --sky:#7fa9c4; --sky-tint:#e7eff4; --sky-deep:#41688a;
  --ink:#2e3335; --body:#5b6264; --muted:#5f6866;
  --line:#ece5db; --line-2:#f4efe7;
  --sh-1:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(92,74,58,.05), 0 4px 12px -5px rgba(92,74,58,.12);
  --sh-2:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(92,74,58,.06), 0 12px 26px -10px rgba(92,74,58,.16);
  --sh-3:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 5px rgba(92,74,58,.07), 0 26px 52px -18px rgba(92,74,58,.22);
  --ease:cubic-bezier(.22,.9,.3,1);
  background:var(--bg);
}

/* ── root ─────────────────────────────────────────────────────────────
   #crr declares its own --bg, --text, --muted, --white and --border. It
   is an ancestor of everything below, so those beat anything set on body
   and var(--bg) resolved to the old #f0f4f7. Remapping the inline sheet's
   OWN variable names here recolours its rules as well as ours. */
body.dl-res #crr{
  --navy:var(--sage-darker); --teal:var(--sage-deep); --teal2:var(--sage-darker);
  --teallt:var(--sage-tint); --tealmd:var(--sage);
  --bg:#fcfaf7; --white:#ffffff; --border:#ece5db;
  --text:#2e3335; --muted:#5f6866;
  --surface:#ffffff; --raised:#fffdfb; --sand:#f7f2ea; --sand-2:#f1ebe1;
  --sage:#5e8c77; --sage-deep:#3f6b58; --sage-darker:#2f5343;
  --sage-tint:#e6efe9; --sage-tint-2:#f0f6f2; --sage-line:#d7e6de;
  --peach:#e9a07b; --peach-deep:#b86f4a; --peach-tint:#fbeee5;
  --sky:#7fa9c4; --sky-tint:#e7eff4; --sky-deep:#41688a;
  --ink:#2e3335; --body:#5b6264; --line:#ece5db; --line-2:#f4efe7;
  font-family:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);background:#fcfaf7;line-height:1.68;
  -webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv05"}

/* body.dl-res #crr * is (1,1,1) — the SAME specificity as #crr .hero h1,
   and the page's inline <style> sits later in the document, so it wins a
   tie. Every rule that must beat an inline rule therefore carries its own
   class, and fonts are restated on the headings below. */
body.dl-res #crr *,body.dl-res #crr *::before,body.dl-res #crr *::after{
  font-family:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
  word-break:normal;overflow-wrap:break-word}

/* the theme's constrained layout pins this block left — centre it */
body.dl-res main#content .wp-block-columns{margin:0 auto;max-width:100%}
body.dl-res #crr{max-width:100%;margin-left:auto;margin-right:auto}

/* ══════════════ HUB (186) ══════════════ */

/* hero: light, matching the homepage, not the old navy slab */
body.dl-res #crr .hero{
  background:var(--bg);padding:66px 0 74px;position:relative;overflow:hidden}
body.dl-res #crr .hero::before{
  content:"";position:absolute;left:50%;top:-330px;width:900px;height:640px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--sage-tint) 0,transparent 72%);
  opacity:.9;z-index:0;filter:none}
/* the inline sheet draws a white curve at the hero foot to meet a
   blue-grey section; both surfaces are ivory now, so retire it */
body.dl-res #crr .hero::after{display:none}
body.dl-res #crr .hero > *{position:relative;z-index:1}

body.dl-res #crr .pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--sage-tint);color:var(--sage-deep);
  border:0;border-radius:999px;padding:8px 16px;
  font-size:.78rem;font-weight:700;letter-spacing:.01em;text-transform:none;
  box-shadow:none;backdrop-filter:none}
body.dl-res #crr .pill svg,body.dl-res #crr .pill path{stroke:var(--sage-deep);fill:none}

/* The hub's H1 sits in .hero .wrap; on the category pages it sits in a
   bare .wrap, NOT in .rhb as the rest of that hero does. Left alone it
   kept the theme's 50px and ran to five lines on a 335px column, so both
   shapes are covered here with one fluid size. */
body.dl-res #crr .hero h1,
body.dl-res #crr .wrap > h1,
body.dl-res #crr .rhero h1{
  color:var(--ink);font-family:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;
  font-weight:800;letter-spacing:-.022em;line-height:1.14;
  font-size:clamp(1.8rem,4vw,3.05rem);text-shadow:none;margin:18px 0 16px}
body.dl-res #crr .hero h1 em{font-style:normal;color:var(--sage-deep)}
body.dl-res #crr .hero-p{
  color:var(--body);font-size:1.05rem;line-height:1.72;opacity:1;max-width:62ch}

body.dl-res #crr .stats{gap:14px;margin-top:34px;flex-wrap:wrap}
body.dl-res #crr .stats > *{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:18px 26px;box-shadow:var(--sh-1);min-width:0}
body.dl-res #crr .sn{
  color:var(--sage-deep);font-weight:800;letter-spacing:-.02em;
  font-size:1.9rem;line-height:1.1}
body.dl-res #crr .sl{
  color:var(--muted);font-weight:700;font-size:.74rem;letter-spacing:.07em;
  text-transform:uppercase;opacity:1;margin-top:4px}

/* category section */
body.dl-res #crr .cats{background:var(--bg);padding:14px 0 84px}
body.dl-res #crr .sh h2{
  color:var(--ink);font-family:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.55rem,2.5vw,2.05rem);line-height:1.18}
body.dl-res #crr .sh p{color:var(--body);font-size:1rem}
body.dl-res #crr .cgrid{gap:24px}

/* the cards read their accent from inline --cc / --cp; rotate a Daylight
   set through them so all eight stay distinguishable */
body.dl-res #crr .cc{
  background:var(--raised);border:1px solid var(--line-2);border-radius:28px;
  box-shadow:var(--sh-1);padding:30px 28px;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
body.dl-res #crr .cc::before,body.dl-res #crr .cc::after{display:none}
body.dl-res #crr .cc:hover{
  transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--sage-line)}
body.dl-res #crr .cc:nth-child(8n+1){--cc:var(--sage-tint)!important;--cp:var(--sage-deep)!important}
body.dl-res #crr .cc:nth-child(8n+2){--cc:var(--peach-tint)!important;--cp:var(--peach-deep)!important}
body.dl-res #crr .cc:nth-child(8n+3){--cc:var(--sky-tint)!important;--cp:var(--sky-deep)!important}
body.dl-res #crr .cc:nth-child(8n+4){--cc:var(--sage-tint-2)!important;--cp:var(--sage-darker)!important}
body.dl-res #crr .cc:nth-child(8n+5){--cc:var(--peach-tint)!important;--cp:var(--peach-deep)!important}
body.dl-res #crr .cc:nth-child(8n+6){--cc:var(--sage-tint)!important;--cp:var(--sage-deep)!important}
body.dl-res #crr .cc:nth-child(8n+7){--cc:var(--sky-tint)!important;--cp:var(--sky-deep)!important}
body.dl-res #crr .cc:nth-child(8n+8){--cc:var(--sand-2)!important;--cp:var(--ink)!important}

body.dl-res #crr .ci{
  width:56px;height:56px;border-radius:18px;background:var(--cc);
  display:grid;place-items:center;margin-bottom:18px;box-shadow:none;
  transition:transform .34s var(--ease)}
body.dl-res #crr .ci svg{width:26px;height:26px;stroke:var(--cp);fill:none;stroke-width:1.8}
body.dl-res #crr .cc:hover .ci{transform:scale(1.07) rotate(-4deg)}
body.dl-res #crr .ct{
  color:var(--ink);font-weight:800;font-size:1.16rem;letter-spacing:-.015em;margin-bottom:9px}
body.dl-res #crr .cd{color:var(--body);font-size:.94rem;line-height:1.62}
body.dl-res #crr .cf{border-top:1px solid var(--line-2);margin-top:18px;padding-top:15px}
body.dl-res #crr .cn{
  color:var(--muted);font-size:.8rem;font-weight:700;letter-spacing:.03em}
body.dl-res #crr .ca{
  color:var(--sage-deep);font-weight:800;font-size:.9rem;
  transition:transform .34s var(--ease)}
body.dl-res #crr .cc:hover .ca{transform:translateX(5px);color:var(--sage-darker)}

/* ══════════════ CATEGORY PAGES (729/733/736/738/741/743/745/747) ══════════════ */

body.dl-res #crr .rhero{
  background:var(--bg);position:relative;overflow:hidden;padding:56px 0 46px}
body.dl-res #crr .rhero::before{
  content:"";position:absolute;left:50%;top:-300px;width:860px;height:600px;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--sage-tint) 0,transparent 72%);
  opacity:.85;z-index:0;filter:none}
body.dl-res #crr .rhero-in{position:relative;z-index:1}
body.dl-res #crr .rhi{
  width:58px;height:58px;border-radius:19px;background:var(--sage-tint);
  display:grid;place-items:center;box-shadow:none}
body.dl-res #crr .rhi svg{stroke:var(--sage-deep);fill:none}
body.dl-res #crr .rhb h1,body.dl-res #crr .rhb h2{
  color:var(--ink);font-family:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;font-weight:800;letter-spacing:-.022em;line-height:1.16;
  font-size:clamp(1.85rem,3.6vw,2.6rem);text-shadow:none}
body.dl-res #crr .rhb p{color:var(--body);font-size:1.02rem;opacity:1}
body.dl-res #crr .rhc{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--sh-1);padding:16px 22px}
body.dl-res #crr .rhc .num{
  color:var(--sage-deep);font-weight:800;font-size:1.55rem;line-height:1.1}
body.dl-res #crr .rhc .lbl{
  color:var(--muted);font-weight:700;font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase;opacity:1}

body.dl-res #crr .rbody{background:var(--bg);padding:10px 0 80px}
body.dl-res #crr .rfbar{
  background:transparent;border:0;box-shadow:none;padding:0;margin-bottom:26px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
body.dl-res #crr .rfbar h3{
  color:var(--ink);font-weight:800;font-size:1.2rem;letter-spacing:-.015em}

/* search field, matched to the homepage tool search */
body.dl-res #crr .rsrch{
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  box-shadow:var(--sh-2);padding:9px 20px;transition:border-color .3s var(--ease)}
body.dl-res #crr .rsrch:focus-within{
  border-color:var(--sage-line);box-shadow:var(--sh-2),0 0 0 4px var(--sage-tint-2)}
body.dl-res #crr .rsrch svg{stroke:var(--muted);fill:none}
body.dl-res #crr .rsrch input{color:var(--ink);font-size:.96rem;background:none}
body.dl-res #crr .rsrch input::placeholder{color:var(--muted);opacity:1}

body.dl-res #crr .rgrid{gap:22px}
body.dl-res #crr .rc{
  background:var(--raised);border:1px solid var(--line-2);border-radius:26px;
  box-shadow:var(--sh-1);padding:26px 26px 22px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
body.dl-res #crr .rc:hover{
  transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--sage-line)}
body.dl-res #crr .rct{
  background:var(--sage-tint);color:var(--sage-deep);border:0;border-radius:999px;
  padding:6px 13px;font-size:.73rem;font-weight:700;letter-spacing:.02em}
body.dl-res #crr .rcn{color:var(--muted);font-size:.78rem;font-weight:700}
body.dl-res #crr .rcb{background:var(--sage-tint);color:var(--sage-deep);border:0}
body.dl-res #crr .rctitle{
  color:var(--ink);font-weight:800;font-size:1.1rem;line-height:1.32;letter-spacing:-.012em}
body.dl-res #crr .rcdesc{color:var(--body);font-size:.93rem;line-height:1.62}
body.dl-res #crr .rcbottom{border-top:1px solid var(--line-2);padding-top:15px;margin-top:16px}
body.dl-res #crr .rcp{color:var(--muted);font-size:.78rem;font-weight:700}
body.dl-res #crr .rdl{
  background:var(--sage-deep);color:#fff;border:0;border-radius:999px;
  padding:11px 20px;font-weight:700;font-size:.88rem;box-shadow:var(--sh-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
body.dl-res #crr .rdl:hover{
  background:var(--sage-darker);transform:translateY(-2px);box-shadow:var(--sh-2)}
body.dl-res #crr .rdl svg{stroke:#fff;fill:none}
body.dl-res #crr .empty{color:var(--muted);background:var(--sand);
  border:1px dashed var(--line);border-radius:20px}

/* ══════════════ SHARED CTA ══════════════ */
body.dl-res #crr .cta{background:var(--bg);padding:0 0 84px}
body.dl-res #crr .cta::before{display:none}
body.dl-res #crr .cta-inner{
  background:var(--sand);border:1px solid var(--line);border-radius:36px;
  box-shadow:none;padding:52px 44px;text-align:center}
body.dl-res #crr .cta h2{
  color:var(--ink);font-family:"Plus Jakarta Sans",-apple-system,"Segoe UI",sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.5rem,2.4vw,2rem);text-shadow:none}
body.dl-res #crr .cta p{color:var(--body);opacity:1;font-size:1rem}
body.dl-res #crr .cta a{
  background:var(--sage-deep);color:#fff;border:0;border-radius:999px;
  padding:15px 30px;font-weight:700;font-size:.95rem;box-shadow:var(--sh-2);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
body.dl-res #crr .cta a:hover{
  background:var(--sage-darker);transform:translateY(-2px);box-shadow:var(--sh-3);color:#fff}

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width:760px){
  body.dl-res #crr .hero{padding:44px 0 52px}
  body.dl-res #crr .hero h1,
  body.dl-res #crr .wrap > h1,
  body.dl-res #crr .rhero h1{font-size:1.72rem;line-height:1.18;margin:14px 0 12px}
  body.dl-res #crr .cats{padding:8px 0 60px}
  body.dl-res #crr .stats{gap:10px}
  body.dl-res #crr .stats > *{padding:14px 18px}
  body.dl-res #crr .sn{font-size:1.6rem}
  body.dl-res #crr .cc{padding:26px 22px;border-radius:24px}
  body.dl-res #crr .rc{padding:22px 20px 20px;border-radius:22px}
  body.dl-res #crr .cta-inner{padding:38px 24px;border-radius:28px}
  body.dl-res #crr .cta{padding:0 0 60px}
  body.dl-res #crr .rfbar{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  body.dl-res #crr *{transition:none!important}
}

/* ── category hero tile ───────────────────────────────────────────────
   .rhi carries a hard-coded inline style="background: rgb(219,234,254)"
   (an old Tailwind blue) which beats any stylesheet, so these need
   !important. Each category keeps its own accent, but drawn from the
   Daylight palette instead of the old one. */
body.dl-res #crr .rhi{
  background:var(--sage-tint)!important;border-radius:19px!important;
  box-shadow:none!important}
body.dl-res #crr .rhi svg{stroke:var(--sage-deep)!important;fill:none!important}

body.page-id-729 #crr .rhi{background:var(--sage-tint)!important}
body.page-id-729 #crr .rhi svg{stroke:var(--sage-deep)!important}
body.page-id-733 #crr .rhi{background:var(--peach-tint)!important}
body.page-id-733 #crr .rhi svg{stroke:var(--peach-deep)!important}
body.page-id-736 #crr .rhi{background:var(--sky-tint)!important}
body.page-id-736 #crr .rhi svg{stroke:var(--sky-deep)!important}
body.page-id-738 #crr .rhi{background:var(--sage-tint-2)!important}
body.page-id-738 #crr .rhi svg{stroke:var(--sage-darker)!important}
body.page-id-741 #crr .rhi{background:var(--peach-tint)!important}
body.page-id-741 #crr .rhi svg{stroke:var(--peach-deep)!important}
body.page-id-743 #crr .rhi{background:var(--sage-tint)!important}
body.page-id-743 #crr .rhi svg{stroke:var(--sage-deep)!important}
body.page-id-745 #crr .rhi{background:var(--sky-tint)!important}
body.page-id-745 #crr .rhi svg{stroke:var(--sky-deep)!important}
body.page-id-747 #crr .rhi{background:var(--sand-2)!important}
body.page-id-747 #crr .rhi svg{stroke:var(--ink)!important}

/* ── legibility pass ──────────────────────────────────────────────────
   Measured on the live page: the old --muted #89908f scored 3.26:1 on
   the stat labels and 1.87:1 on .cn, which sits on a sage chip — grey on
   green, effectively invisible. Small supporting text now uses the sage
   ink, and the chip gets a tint background so its text can be dark. */
body.dl-res #crr .sl,
body.dl-res #crr .rhc .lbl,
body.dl-res #crr .rcn,
body.dl-res #crr .rcp{color:var(--sage-deep)!important;opacity:1}
body.dl-res #crr .cn{
  background:var(--sage-tint)!important;color:var(--sage-deep)!important;
  border:0!important;border-radius:999px;padding:5px 12px;font-weight:700}
body.dl-res #crr .cd,
body.dl-res #crr .rcdesc,
body.dl-res #crr .hero-p,
body.dl-res #crr .sh p,
body.dl-res #crr .cta p{color:#4f5759!important}