/* ==========================================================================
   DDI 2026 – BLOCK-EDITOR DESIGN SYSTEM
   Scoped to `body.ddi-block`. Loaded only on Block Editor pages so it can't
   bleed onto legacy Beaver Builder pages.
   ========================================================================== */

body.ddi-block {
	font-family: var(--ddi-font-body);
	font-weight: 300;
	font-size: 17px;
	line-height: 1.75;
	color: var(--ddi-body-text);
	background: var(--ddi-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* No global `body.ddi-block img` reset – it was fighting with block-
   specific img rules (e.g. brand-story / services-intro need
   `height: 130%` for the parallax slack). WP core's wp-block-library
   already gives core/image the standard `max-width:100%; height:auto`
   defaults. Each custom block sets its own img sizing. */

/* Anchors in block content inherit body colour. Chrome scopes
   (header / nav-overlay / start-overlay / footer) are excluded because
   they own their own anchor colours – leaving them in this rule made
   the menu/footer links inherit body-text grey instead of the intended
   white/gold. */
body.ddi-block a:not(.header a, .nav-overlay a, .start-overlay a, .footer a, .btn) {
	color: inherit;
	text-decoration: none;
}
/* .btn anchors keep their explicit colour rules so hover states
 * actually fire — the inherit-default reset above was higher
 * specificity than `.btn--white:hover` and stopped ghost buttons
 * from changing colour on hover. Excluding .btn anchors from the
 * reset lets the brand button rules win. */

body.ddi-block h1,
body.ddi-block h2,
body.ddi-block h3,
body.ddi-block h4,
body.ddi-block .brand-quote {
	font-family: var(--ddi-font-display);
	font-weight: 300;
	font-style: normal;
	line-height: 1.2;
	font-variant-ligatures: no-common-ligatures;
}

/* Hard reset – no italic anywhere on .ddi-block. The prototype originally
   used italic on display headings and the testimonial quote, but the
   client has explicitly removed italic across the site. Keeps any stray
   `<em>` content rendering upright too. */
body.ddi-block em,
body.ddi-block i,
body.ddi-block .hero__heading,
body.ddi-block .hero__heading-line,
body.ddi-block .brand-story__heading,
body.ddi-block .services__heading,
body.ddi-block .services-v__title,
body.ddi-block .tenets__heading,
body.ddi-block .dual-path__heading,
body.ddi-block .testimonials__heading,
body.ddi-block .testimonial-card__quote,
body.ddi-block .cta-final__heading,
body.ddi-block .pce-banner__heading {
	font-style: normal;
}

/* Block-editor pages have no overflow-x by default – needed because some
   sections use full-bleed images with translateX/parallax. */
body.ddi-block {
	overflow-x: hidden;
}

/* ==========================================================================
   CORE BLOCK DEFAULTS on .ddi-block
   --------------------------------------------------------------------------
   Most pages are built entirely from custom ddi/* blocks. These rules cover
   the small number of cases where an editor drops in a core block (a stray
   paragraph between sections, a quick list, an inline image) so it doesn't
   land naked.
   ========================================================================== */

/* Inline anchor styling – body copy inside core paragraphs / lists / quotes
   needs to surface links. The chrome-scoped anchor rule above strips
   underlines globally; this puts a sane treatment back for body-copy
   contexts (matches the `.text-link` accent – gold underline + ui-font). */
body.ddi-block .wp-block-paragraph a:not(.btn),
body.ddi-block .wp-block-list a:not(.btn),
body.ddi-block .wp-block-quote a:not(.btn) {
	color: var(--ddi-deep-navy);
	border-bottom: 1px solid var(--ddi-gold);
	padding-bottom: 1px;
	transition: color 0.3s ease, border-color 0.3s ease;
}
body.ddi-block .wp-block-paragraph a:not(.btn):hover,
body.ddi-block .wp-block-list a:not(.btn):hover,
body.ddi-block .wp-block-quote a:not(.btn):hover {
	color: var(--ddi-gold-darker);
	border-bottom-color: var(--ddi-gold-darker);
}

/* Core paragraph – match the body type already set on .ddi-block but give
   it a sensible default margin between blocks. */
body.ddi-block .wp-block-paragraph {
	margin: 0 0 1em;
}

/* --------------------------------------------------------------------------
   Body paragraph recipe — neutralise the parent theme's bare `p` rule
   --------------------------------------------------------------------------
   The parent theme's `ddi/css/screen.css` ships a bare element rule:

       p { font-size: 17px; line-height: 21px; font-weight: 400 }

   A bare element selector matches every <p> DIRECTLY, so it beats our
   container-level recipe (e.g. `.insight__body { line-height: 1.5 }`), which
   only sets values for children to INHERIT — and a direct match always wins
   over inheritance regardless of specificity. Symptom: naked prose paragraphs
   on new-look pages rendered at 21px line-height / weight 400 instead of the
   intended 1.5 / 300 (font-size 17px happened to match).

   screen.css can't be removed (legacy Beaver Builder pages depend on it until
   Phase 2), so re-assert the recipe here, scoped to .ddi-block (this file never
   loads on .legacy-page).

   SPECIFICITY IS DELIBERATE. `body:where(.ddi-block) p` — `:where()`
   contributes ZERO specificity, so the whole selector scores (0,0,2): two
   element selectors (body, p). That is JUST enough to beat the bare `p`
   (0,0,1), but it intentionally LOSES to ANY class-scoped paragraph rule:
     • classed module paragraphs — .eyebrow, .page-hero__subheading,
       .article-card__excerpt, .insight__meta … (0,1,0) keep their own type;
     • container paragraph rules — e.g. `.single-job__section-body p {
       line-height:1.8 }` and `.single-job__sidebar-help p { font-size:15px;
       line-height:1.7 }` (0,1,1) keep theirs.
   So this is a low-priority FALLBACK that only ever overrides the legacy bare
   rule, never a block's own intentional paragraph styling. (An earlier
   `.ddi-block p:not([class])` form scored too high (0,2,2) and stomped the
   job-vacancy line-heights — hence the :where() approach.)

   Colour is intentionally NOT set: it inherits from the container, and the
   white-on-dark (navy surface) rules must keep winning.

   `li` is included so list copy inherits the same recipe — the parent theme
   leaves <li> at its default weight/line-height, so prose lists in modules
   rendered heavier/tighter than the surrounding paragraphs. Same (0,0,2)
   specificity: any class-scoped list rule (nav, footer, cards) still wins. */
body:where(.ddi-block) p,
body:where(.ddi-block) li {
	font-size: 17px;
	line-height: 1.5;
	font-weight: 300;
}

/* Core headings – inherit the display font + weight from the .ddi-block
   rule above. Add a default bottom margin. */
body.ddi-block .wp-block-heading {
	margin: 0 0 0.6em;
	color: var(--ddi-midnight);
}

/* Core lists – establish indentation + a subtle gold marker tone. */
body.ddi-block .wp-block-list {
	margin: 0 0 1em;
	padding-left: 1.4em;
}
body.ddi-block .wp-block-list li {
	margin: 0 0 0.4em;
}
body.ddi-block .wp-block-list li::marker {
	color: var(--ddi-gold);
}

/* Core image – keep the responsive defaults from wp-block-library but
   add a tiny bit of breathing room above/below for inline images. */
body.ddi-block .wp-block-image {
	margin: 1.4em 0;
}
body.ddi-block .wp-block-image img {
	max-width: 100%;
	height: auto;
}

/* Core columns – fill the container, keep block-internal gutters readable. */
body.ddi-block .wp-block-columns {
	gap: 32px;
	margin: 1.6em 0;
}

/* Core button – map to the brand button style so editors who reach for the
   core block still get something on-brand. Custom blocks should still
   prefer the `.btn` utility. */
body.ddi-block .wp-block-button .wp-block-button__link {
	background: var(--ddi-deep-navy);
	color: var(--ddi-white);
	font-family: var(--ddi-font-ui);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 12px;
	padding: 14px 28px;
	border-radius: 0;
	transition: background 0.3s ease, color 0.3s ease;
}
body.ddi-block .wp-block-button .wp-block-button__link:hover {
	background: var(--ddi-gold-darker);
}

/* Phase 1: hide the "Roles & Responsibilities" band on /services/ (ddi/service-roles).
   Restored in Phase 2 — remove this rule and the block's "is-hidden-phase2" className. */
body.ddi-block .is-hidden-phase2 {
	display: none !important;
}

/* ============================================================
   Responsive visibility utilities
   ------------------------------------------------------------
   Show/hide any block per device. Apply via the block's
   Advanced → "Additional CSS class(es)" field — works on core
   blocks and DDI blocks alike. These also respond to the
   editor's Desktop / Tablet / Mobile preview, so you can check
   the result without leaving the editor.

   Breakpoints (the theme's dominant pair):
     mobile  ≤ 768px
     tablet  769–1024px
     desktop ≥ 1025px

   Classes:
     .ddi-hide-mobile        hide ≤768px
     .ddi-hide-tablet        hide 769–1024px
     .ddi-hide-desktop       hide ≥1025px
     .ddi-show-mobile-only   show ONLY ≤768px
     .ddi-show-tablet-only   show ONLY 769–1024px
     .ddi-show-desktop-only  show ONLY ≥1025px

   `display: none !important` so the hide always wins over a
   block's own display (flex/grid/etc.). The show-*-only helpers
   only force-hide on the OTHER devices, so the block keeps its
   natural display where it should appear.
   Note: this is a CSS hide, not conditional render — the markup
   still ships to every device. Fine for small sections; don't
   use it to strip heavy content for performance.
   ============================================================ */

/* Hide on one device */
@media (max-width: 768px) {
	body.ddi-block .ddi-hide-mobile { display: none !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
	body.ddi-block .ddi-hide-tablet { display: none !important; }
}
@media (min-width: 1025px) {
	body.ddi-block .ddi-hide-desktop { display: none !important; }
}

/* Show on ONE device only (force-hidden on the other two) */
@media (min-width: 769px) {
	body.ddi-block .ddi-show-mobile-only { display: none !important; }
}
@media (max-width: 768px) {
	body.ddi-block .ddi-show-tablet-only { display: none !important; }
}
@media (min-width: 1025px) {
	body.ddi-block .ddi-show-tablet-only { display: none !important; }
}
@media (max-width: 1024px) {
	body.ddi-block .ddi-show-desktop-only { display: none !important; }
}