/*
Theme Name: Delta Engineering Services
Theme URI: https://wwebdesign.co.uk/
Author: W Web Design & Hosting
Author URI: https://wwebdesign.co.uk/
Description: Custom theme for Delta Engineering Services Ltd. Code-registered ACF blocks, no page builder, no build step. Forked from the Safeguard theme, October 2026.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: deltaes
*/

/* ==========================================================================
   Fonts: self-hosted, latin subset, OFL-1.1 (see assets/fonts/LICENSE.md).
   Archivo (condensed, caps) for display; IBM Plex Sans for everything else,
   including the condensed utility face, which is the same file at 85% width.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600 900;
  font-stretch: 62% 100%;
  font-display: swap;
  src: url("assets/fonts/archivo-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 85% 100%;
  font-display: swap;
  src: url("assets/fonts/plex-sans-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/plex-sans-italic.woff2") format("woff2");
}

/* ==========================================================================
   Design tokens ("Mill Scale"). The only place cross-block values live.

   A colour is a FILL or an INK, never both until measured. Every pair used
   is listed with its WCAG ratio (computed 2026-10-21):

   On white #FFFFFF          On graphite #111317        On silver #E3E5E9
   ink      #111317 18.59    white   #FFFFFF 18.59      ink    #111317 14.74
   text     #262A31 14.40    text    #B9BEC7  9.96      steel  #4B515C  6.33
   steel    #4B515C  7.98    legal   #9AA0AA  7.07      navy   #05235E 11.82
   navy     #05235E 14.91    arc     #4FB2EE  7.91
   ui edge  #6E7480  4.69    ui edge #7A808B  4.68      On paper #F3F4F6
   error    #A4161A  7.75    error   #F08C84  7.78      ink 16.90, steel 7.25,
                                                        navy 13.55, ui 4.27
   On graphite-900 #1B1E24: white 16.70, text 8.95, arc 7.10.

   Arc blue FAILS on light (1.86:1 on silver, 2.35:1 on white), so it only
   exists inside dark bands; navy does its job on light. Bands below redefine
   --link and --focus, so moving a block between bands cannot make a bad pair.
   ========================================================================== */

:root {
  --deltaes-graphite-950: #111317;
  --deltaes-graphite-900: #1B1E24;
  --deltaes-graphite-800: #262A31;
  --deltaes-graphite-700: #3A3F48;
  --deltaes-steel-600:    #4B515C;
  --deltaes-steel-500:    #6E7480;
  --deltaes-steel-450:    #7A808B;
  --deltaes-silver-300:   #B9BEC7;
  --deltaes-silver-250:   #9AA0AA;
  --deltaes-silver-150:   #C9CDD4;
  --deltaes-silver-100:   #E3E5E9;
  --deltaes-paper:        #F3F4F6;
  --deltaes-white:        #ffffff;
  --deltaes-navy:         #05235E;
  --deltaes-arc:          #4FB2EE;

  /* Context tokens: what a block reads. Light bands are the default. */
  --deltaes-bg:        var(--deltaes-white);
  --deltaes-heading:   var(--deltaes-graphite-950);
  --deltaes-text:      var(--deltaes-graphite-800);
  --deltaes-muted:     var(--deltaes-steel-600);
  --deltaes-link:      var(--deltaes-navy);
  --deltaes-focus:     var(--deltaes-navy);
  --deltaes-rule:      var(--deltaes-silver-150);
  --deltaes-ui-edge:   var(--deltaes-steel-500);
  --deltaes-error:     #A4161A;
  --deltaes-btn-bg:    var(--deltaes-graphite-950);
  --deltaes-btn-ink:   #ffffff;
  --deltaes-btn-hover: var(--deltaes-graphite-700);

  --deltaes-font:         "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --deltaes-font-display: "Archivo", "Arial Narrow", "IBM Plex Sans", sans-serif;

  --deltaes-content-max:  1360px;
  --deltaes-gutter:       clamp(16px, 5vw, 72px);
  --deltaes-section-y:    clamp(64px, 9vw, 128px);
  --deltaes-header-height: 88px;

  /* The 60 degree chamfer: a 10px horizontal run gives a 17.32px drop
     (tan 60 = 1.732). The delta's own angle, used on buttons only. */
  --deltaes-cut-x: 10px;
  --deltaes-cut-y: 17.32px;

  /* Display type sizes, shared so the ground-line overlap can be computed. */
  --deltaes-h1: clamp(3rem, 1.2rem + 7.6vw, 9rem);
  --deltaes-h1-page: clamp(2.75rem, 1rem + 5.4vw, 6.5rem);
  --deltaes-h2: clamp(2.5rem, 1.4rem + 4vw, 4.75rem);
  --deltaes-h3: clamp(1.625rem, 1.1rem + 1.6vw, 2.75rem);

  --deltaes-ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
/* The sticky header would cover an in-page anchor's heading. */
html { scroll-padding-top: calc(var(--deltaes-header-height) + 16px); }

body {
  margin: 0;
  background: var(--deltaes-white);
  color: var(--deltaes-text);
  font-family: var(--deltaes-font);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
@media (max-width: 600px) { body { font-size: 1.0625rem; } }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* Display headings: Archivo at 62% width, heavy, in capitals. The capitals are
   CSS only, so the source (and what a screen reader reads) stays in sentence
   case. H4 and below are Plex, sentence case. */
h1, h2, h3 {
  font-family: var(--deltaes-font-display);
  font-stretch: 62%;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--deltaes-heading);
  margin: 0 0 .35em;
  letter-spacing: -.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--deltaes-h1-page); line-height: .88; }
h2 { font-size: var(--deltaes-h2); line-height: .92; }
h3 { font-size: var(--deltaes-h3); line-height: 1; font-weight: 750; }
h4, h5, h6 {
  font-family: var(--deltaes-font);
  color: var(--deltaes-heading);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .5em;
}
h4 { font-size: 1.375rem; }
h5 { font-size: 1.125rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

strong, b { color: var(--deltaes-heading); font-weight: 600; }

/* The condensed utility face: captions, contract numbers, register metadata,
   spec keys, form labels. Sentence case, never small capitals, never mono. */
.deltaes-utility {
  font-family: var(--deltaes-font);
  font-stretch: 85%;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Accessibility floor (acf-blocks skill, references/a11y/tokens.css).
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--deltaes-focus);
  outline-offset: 3px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus,
.screen-reader-text:focus-visible {
  position: fixed !important;
  top: 12px; left: 12px;
  width: auto; height: auto;
  padding: 12px 20px;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  z-index: 10000;
  background: #ffffff;
  color: var(--deltaes-navy);
  font-weight: 600;
  outline: 3px solid var(--deltaes-navy);
}

/* Standalone controls are at least 24x24 (WCAG 2.5.8). Prose links are exempt. */
.deltaes-social__link { min-width: 24px; min-height: 24px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.deltaes-wrap {
  width: 100%;
  max-width: calc(var(--deltaes-content-max) + 2 * var(--deltaes-gutter));
  margin-inline: auto;
  padding-inline: var(--deltaes-gutter);
}

.deltaes-section {
  padding-block: var(--deltaes-section-y);
  background: var(--deltaes-bg);
  color: var(--deltaes-text);
}

/* Two sections on the same ground would double their padding. */
.deltaes-section:not([class*="-band--"]) + .deltaes-section:not([class*="-band--"]) { padding-top: 0; }
.deltaes-band--paper + .deltaes-band--paper,
.deltaes-band--silver + .deltaes-band--silver,
.deltaes-band--graphite + .deltaes-band--graphite { padding-top: 0; }

.deltaes-section__head { max-width: 900px; margin-bottom: clamp(32px, 4vw, 56px); }
.deltaes-section__head > :last-child { margin-bottom: 0; }

/* The one short line under a heading. */
.deltaes-lede {
  font-size: 1.3125rem;
  line-height: 1.45;
  color: var(--deltaes-muted);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Bands: a surface and its inks, decided together. Doubled selectors so a
   band beats a block's own background.
   -------------------------------------------------------------------------- */

body .deltaes-band--paper.deltaes-band--paper   { --deltaes-bg: var(--deltaes-paper); }
body .deltaes-band--silver.deltaes-band--silver { --deltaes-bg: var(--deltaes-silver-100); --deltaes-rule: #C3C7CE; }

body .deltaes-band--graphite.deltaes-band--graphite,
body .deltaes-band--works.deltaes-band--works,
.deltaes-on-dark {
  --deltaes-bg:        var(--deltaes-graphite-950);
  --deltaes-heading:   #ffffff;
  --deltaes-text:      var(--deltaes-silver-300);
  --deltaes-muted:     var(--deltaes-silver-300);
  --deltaes-link:      #ffffff;
  --deltaes-focus:     var(--deltaes-arc);
  --deltaes-rule:      var(--deltaes-graphite-800);
  --deltaes-ui-edge:   var(--deltaes-steel-450);
  --deltaes-error:     #F08C84;
  --deltaes-btn-bg:    var(--deltaes-silver-100);
  --deltaes-btn-ink:   var(--deltaes-graphite-950);
  --deltaes-btn-hover: #ffffff;
  background-color: var(--deltaes-bg);
  color: var(--deltaes-text);
}
body .deltaes-band--works.deltaes-band--works { --deltaes-bg: var(--deltaes-graphite-900); }

/* Links in prose take the band's ink. Scoped to prose so a button keeps its
   own colour. */
:is(p, li, dd, td, blockquote, .deltaes-prose) a:not([class*="-btn"]) {
  color: var(--deltaes-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:is(p, li, dd, td, blockquote, .deltaes-prose) a:not([class*="-btn"]):hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   Buttons. Square, with the delta's 60 degree chamfer cut off the top right.
   The fill is a plain background-colour ON the button, so contrast checkers
   can read it; the cut is a small triangle painted in the surface colour
   (--deltaes-bg) over the corner. Anywhere a button sits on a surface that is
   not its band's --deltaes-bg, that component sets --deltaes-bg itself.
   The focus ring is the element's own outline, never clipped. Graphite on
   light bands, silver on dark.
   -------------------------------------------------------------------------- */

.deltaes-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 30px 4px 24px;
  border: 0;
  background-color: var(--deltaes-btn-bg);
  color: var(--deltaes-btn-ink);
  font-family: var(--deltaes-font-display);
  font-stretch: 62%;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s var(--deltaes-ease);
}
.deltaes-btn::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--deltaes-cut-x);
  height: var(--deltaes-cut-y);
  background: var(--deltaes-bg);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  pointer-events: none;
}
.deltaes-btn:hover { background-color: var(--deltaes-btn-hover); }
@media (max-width: 600px) { .deltaes-btn { min-height: 48px; } }

/* --------------------------------------------------------------------------
   The peel: every enquiry button (any button that leads to the Contact page,
   see deltaes_the_link(), plus the form's own submit) peels its corner back
   on hover and keyboard focus. The 60 degree cut deepens from 10px to 18px and
   the corner that was cut away folds over the crease as a shaded flap.

   Geometry: folding the corner B over the crease A-C (A = cut along the top,
   C = cut down the side, the delta's 60 degrees) puts its tip at
   (-1.5 x cut, 0.866 x cut) from the button's corner. So the flap is a box
   1.5 x cut wide and 1.732 x cut tall, clipped to A (33.3%, 0), C (100%, 100%)
   and the tip (0, 50%), and it grows out of the middle of the crease. At 18px
   the tip stops 27px in from the edge, clear of the label (30px of padding).

   The flap is the back of the plate: a lighter crease shading into the tip,
   graphite on light bands, chrome on dark ones. No text sits under it, and
   the focus ring (the element's own outline) is never covered.
   -------------------------------------------------------------------------- */

/* The shadow the lifted corner casts on the face. Its radius is a registered
   property so it can animate with the flap. It is drawn only while hovered:
   a background image at rest would make the button's contrast undecidable
   for checkers, which is why the fill is a plain colour in the first place. */
@property --deltaes-peel-shadow {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

:root {
  --deltaes-peel-ease: cubic-bezier(.2, .9, .25, 1.2);
  --deltaes-peel-shade: rgb(0 0 0 / .45);
  --deltaes-flap-crease: #7A808B;
  --deltaes-flap-tip: #262A31;
}
:is(.deltaes-band--graphite, .deltaes-band--works, .deltaes-on-dark) {
  --deltaes-flap-crease: #ffffff;
  --deltaes-flap-tip: #9AA0AA;
  --deltaes-peel-shade: rgb(17 19 23 / .3);
}

.deltaes-btn--peel { transition: background-color .16s var(--deltaes-ease), --deltaes-peel-shadow .32s var(--deltaes-peel-ease); }
.deltaes-btn--peel:is(:hover, :focus-visible) {
  --deltaes-peel-shadow: 30px;
  background-image: radial-gradient(circle at calc(100% - 16px) 14px, var(--deltaes-peel-shade), transparent var(--deltaes-peel-shadow));
}
.deltaes-btn--peel::after {
  transition: width .32s var(--deltaes-peel-ease), height .32s var(--deltaes-peel-ease);
}
.deltaes-btn--peel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: calc(var(--deltaes-cut-x) * 1.5);
  height: var(--deltaes-cut-y);
  background: linear-gradient(240deg, var(--deltaes-flap-crease) 25%, var(--deltaes-flap-tip) 100%);
  clip-path: polygon(33.333% 0, 100% 100%, 0 50%);
  transform: scale(0);
  transform-origin: 66.667% 50%;
  pointer-events: none;
  transition: width .32s var(--deltaes-peel-ease), height .32s var(--deltaes-peel-ease), transform .32s var(--deltaes-peel-ease);
}
.deltaes-btn--peel:is(:hover, :focus-visible)::after { width: 18px; height: 31.18px; }
.deltaes-btn--peel:is(:hover, :focus-visible)::before { width: 27px; height: 31.18px; transform: scale(1); }

.deltaes-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* A plain link with an arrow, where a button would be too loud. The arrow is
   SVG: the latin font subset has no right arrow. */
.deltaes-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  font-weight: 600;
  color: var(--deltaes-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.deltaes-arrow-link svg,
.deltaes-arrow { width: 18px; height: 18px; flex: none; transition: transform .16s var(--deltaes-ease); }
.deltaes-arrow-link:hover { text-decoration-thickness: 2px; }
.deltaes-arrow-link:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Photographs. One grade for the whole set so phone snapshots read as one
   body of work; a crop focus from the editor; fixed frames.
   -------------------------------------------------------------------------- */

.deltaes-photo { position: relative; overflow: hidden; background: var(--deltaes-graphite-800); margin: 0; }
.deltaes-photo img,
.deltaes-photo picture { width: 100%; height: 100%; }
.deltaes-photo img {
  object-fit: cover;
  object-position: var(--deltaes-focus-pos, 50% 50%);
  filter: saturate(.9) contrast(1.04);
}

.deltaes-ratio-16x9 { aspect-ratio: 16 / 9; }
.deltaes-ratio-21x9 { aspect-ratio: 21 / 9; }
.deltaes-ratio-3x2  { aspect-ratio: 3 / 2; }
.deltaes-ratio-3x4  { aspect-ratio: 3 / 4; }
.deltaes-ratio-4x3  { aspect-ratio: 4 / 3; }
.deltaes-ratio-1x1  { aspect-ratio: 1 / 1; }

/* The ground-line overlay: what makes white display type readable on any
   editor-chosen photo. In CSS, never baked in. Measured against a pure white
   pixel: 8.35:1 inside the bottom 16% (where the first headline line sits),
   4.12:1 at the 30% line (display type only, large-text minimum 3:1). No text
   under 24px may sit on a photo. */
.deltaes-ground::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    rgb(17 19 23 / .90) 0%,
    rgb(17 19 23 / .75) 16%,
    rgb(17 19 23 / .55) 30%,
    rgb(17 19 23 / .12) 48%,
    rgb(17 19 23 / .12) 100%);
}

/* Contract caption strip: white on SOLID graphite, 18.59:1 whatever the photo
   does. It was 85% graphite, which measures fine but no checker can decide,
   so every caption was reported as undecided (wweb-a11y, 2026-10-21). */
.deltaes-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 8px 14px;
  max-width: min(100%, 520px);
  background: var(--deltaes-graphite-950);
  /* 2px of the same graphite all round. A caption often sits at a fractional
     y; a checker that rounds its box out by a pixel then samples the photo
     under the strip's edge and reports a failure that is not there
     (wweb-a11y pixel probe, 1.47:1 on the featured band, 2026-10-21). */
  box-shadow: 0 0 0 2px var(--deltaes-graphite-950);
  color: #ffffff;
  font-size: .875rem;
  line-height: 1.35;
}
.deltaes-caption b { color: #ffffff; font-weight: 600; margin-right: .6em; }

/* A caption under a photo rather than on it (mobile, and galleries). */
.deltaes-caption--below {
  position: static;
  display: block;
  max-width: none;
  background: var(--deltaes-graphite-950);
}

/* --------------------------------------------------------------------------
   Spec list: key and value rows with hairlines. Facts are a list, never a
   stats band.
   -------------------------------------------------------------------------- */

.deltaes-spec { margin: 0; border-top: 1px solid var(--deltaes-rule); }
.deltaes-spec__row {
  display: grid;
  grid-template-columns: minmax(110px, 32%) minmax(0, 1fr);
  gap: 4px 24px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--deltaes-rule);
}
.deltaes-spec dt {
  margin: 0;
  font-stretch: 85%;
  font-weight: 500;
  color: var(--deltaes-muted);
}
.deltaes-spec dd {
  margin: 0;
  font-weight: 500;
  color: var(--deltaes-heading);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 400px) {
  .deltaes-spec__row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Filter tabs (projects, documents). Plain text, a 3px bar under the active
   one, so colour is never the only cue. They wrap onto a second line on a
   phone rather than scrolling sideways: a tab scrolled out of view but still
   in the tab order fails 2.4.3 (wweb-a11y, 2026-10-21).
   -------------------------------------------------------------------------- */

.deltaes-tabs {
  display: flex;
  gap: 4px 28px;
  flex-wrap: wrap;
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--deltaes-rule);
}
.deltaes-tabs li { flex: none; }
/* Doubled class: the tabs sit in <li>s, so without it the prose-link rule
   above would paint every tab in the link colour. */
.deltaes-tabs.deltaes-tabs > li > :is(a, button) {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--deltaes-muted);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.deltaes-tabs.deltaes-tabs > li > :is(a, button):hover { color: var(--deltaes-heading); }
.deltaes-tabs.deltaes-tabs > li > :is([aria-current="true"], [aria-current="page"], [aria-pressed="true"]) {
  color: var(--deltaes-heading);
  font-weight: 600;
  border-bottom-color: var(--deltaes-dark-bar, var(--deltaes-navy));
}
.deltaes-on-dark .deltaes-tabs,
:is(.deltaes-band--graphite, .deltaes-band--works) .deltaes-tabs { --deltaes-dark-bar: var(--deltaes-arc); }

.deltaes-filter-status { margin: -12px 0 24px; font-size: .9375rem; color: var(--deltaes-muted); }

/* --------------------------------------------------------------------------
   Prose: rich text from the editor.
   -------------------------------------------------------------------------- */

.deltaes-prose { max-width: 66ch; }
.deltaes-prose > * + :is(h2, h3, h4) { margin-top: 1.4em; }
.deltaes-prose :is(h2) { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem); }
.deltaes-prose :is(h3) { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); }
.deltaes-prose ul,
.deltaes-prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.deltaes-prose li { margin-bottom: .45em; }
.deltaes-prose li::marker { color: var(--deltaes-muted); }
.deltaes-prose img { margin-block: 1.5em; }
.deltaes-prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--deltaes-heading);
  font-size: 1.2rem;
  color: var(--deltaes-heading);
}

/* --------------------------------------------------------------------------
   Breadcrumbs (Yoast), printed by the page hero and the project header.
   -------------------------------------------------------------------------- */

.deltaes-breadcrumbs {
  margin: 0 0 18px;
  font-stretch: 85%;
  font-size: .9375rem;
  color: var(--deltaes-silver-300);
}
.deltaes-breadcrumbs a { color: inherit; }
.deltaes-breadcrumbs .breadcrumb_last { color: #ffffff; }

/* --------------------------------------------------------------------------
   Placeholders shown only in the editor canvas ($is_preview), so an empty
   block still has height and can be clicked.
   -------------------------------------------------------------------------- */

.deltaes-placeholder {
  margin: 0;
  padding: 28px;
  border: 1px dashed var(--deltaes-steel-500);
  background: var(--deltaes-paper);
  color: var(--deltaes-graphite-950);
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   WP core alignment classes
   -------------------------------------------------------------------------- */

.alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.alignwide { max-width: calc(var(--deltaes-content-max) + 160px); margin-inline: auto; }
.aligncenter { margin-inline: auto; }