/* ============================================================================
   DOROSHKE — WordPress bridge layer  (v1.0, LIGHT MODE ONLY)
   ----------------------------------------------------------------------------
   WordPress core, the block editor and the comment system emit markup and class
   names this theme does not control. This file maps that markup onto the
   DOROSHKE theme system so core output obeys the same contract as the .dk-*
   components.

   Load order: theme-tokens.css -> theme-components.css -> THIS FILE -> rtl.css

   HARD CONTRACT — identical to theme-components.css:
     - No raw hex, no raw px font-size, no raw font-family. Tokens only.
       Every literal length here is a structural value (0, 1px hairline via
       --border-width, 100%, auto) or a token reference.
     - border-radius comes from the radius tokens (7 / 10 / 14 px). The 45° cut is retired.
     - No box-shadow except an inset used as a border and the dialog shadow token. No blur. No gradient.
     - Logical properties only (margin-inline-*, padding-inline-*, inset-inline-*).
     - No prefers-color-scheme, no .dark, no second palette.
   ============================================================================ */

/* ============================================================================
   CORRECTIONS TO THE PACKAGED REFERENCE IMPLEMENTATION
   ----------------------------------------------------------------------------
   Four defects in tokens/theme-components.css as shipped. Each is corrected
   here rather than by editing that file, so every deviation from the handoff
   sits in one auditable place and the reference stays diffable against the
   package. All four are behaviour, not taste; each cites the rule it restores.

   (A separate, smaller set of corrections WAS applied inside theme-tokens.css
   and theme-components.css: three hardcoded literals — an 11px badge below the
   13px floor, a 20px price step, and the skeleton sweep colour — were lifted
   into tokens, because the acceptance criteria forbid a raw px font-size or
   colour inside a component. Those are commented at their declarations.)
   ============================================================================ */

/* 1. An overlay's own display value beats the [hidden] attribute.
      .dk-modal declares display:flex, which is (0,1,0) in an author sheet and
      therefore outranks the user-agent's [hidden]{display:none}. The modal
      stayed laid out while hidden and its scrim swallowed every click on the
      page beneath it — the Theme Preview page was unusable below the overlay
      section until this was found. Compound selectors at (0,2,0) fix it
      without reaching for !important. */
.dk-modal[hidden],
.dk-drawer[hidden],
.dk-mobile-nav[hidden] { display: none; }

/* 2. The header mark had no default state.
      theme-components.css reveals .dk-header__logo--mark below 360px but never
      hides it above that width, while .dk-header__logo sets display:block for
      both assets — so the lockup AND the mark rendered together at every width,
      which is two logos on one page (docs/logo-usage-rules.md, prohibition 12).
      The reveal is restated here rather than left in the component file: this
      sheet loads later, so a bare hide would have outranked that media query at
      equal specificity and suppressed the mark at every width instead. The pair
      has to travel together. The lockup may never render under 140px wide and
      there is no third fallback; on phones (≤600) the header also carries the
      primary CTA and the burger, so the mark takes over there. */
.dk-header__logo--mark { display: none; }

@media (max-width: 600px) {
  .dk-header__logo--lockup { display: none; }
  .dk-header__logo--mark { display: block; height: 32px; }
}

/* 3. The documented mobile toast width was not implemented.
      docs/responsive-rules.md: "Toasts are full width minus 32px with a 16px
      bottom inset, above any sticky bar." The reference ships a flat 360px
      max-width, which is wider than the content box of a 359px viewport and
      pushed the page sideways. */
@media (max-width: 600px) {
  .dk-toast {
    inset-inline: var(--space-3);
    bottom: var(--space-3);
    max-width: none;
    width: auto;
  }
}

/* 4. A one-column grid track must be minmax(0, 1fr), not 1fr.
      "1fr" resolves its minimum to min-content, so one nowrap child — and the
      price row is nowrap BY SPECIFICATION — widens the track past the viewport
      and scrolls the whole page. The rule that nothing scrolls horizontally is
      absolute, so the track is pinned to zero minimum and the child is allowed
      to shrink. */
@media (max-width: 600px) {
  .dk-cards-4up { grid-template-columns: minmax(0, 1fr); }
}
.dk-cards-4up > * { min-width: 0; }

/* ------------------------------------------------------- DOCUMENT SHELL --- */
html { -webkit-text-size-adjust: 100%; }

body.dk-body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: start;
}

.dk-site-main { flex: 1 0 auto; }

/* Block templates wrap the page in .wp-site-blocks. Give it the same column
   flex so short pages (a guest on the demand hall) still push the footer to
   the bottom instead of leaving it mid-screen. */
.dk-body .wp-site-blocks { display: flex; flex-direction: column; flex: 1 0 auto; }
.dk-body .dk-main { flex: 1 0 auto; width: 100%; }

/* Form controls do not inherit font-family from the UA stylesheet. Element
   selectors only (0,0,1): any component class (.dk-input--latin, .dk-qty input)
   still wins, so Latin/VIN fields keep Inter. */
button, input, select, textarea { font-family: inherit; }

/* Sticky header must clear the WordPress admin bar when it is present. */
.admin-bar .dk-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .dk-header { top: 46px; }
}

/* ------------------------------------------------------------ SKIP LINK --- */
/* Accessibility floor: keyboard users reach the content without traversing nav.

   The type selector is load-bearing. theme-tokens.css styles inline links with
   ".dk-body a:not(:where(…))" at (0,1,1); a bare ".dk-skip-link" is (0,1,0) and
   LOSES to it, which painted the skip link Petrol on its own Petrol ground —
   1:1, an invisible skip link, the exact failure mode the token file warns
   about for the header CTA. "a.dk-skip-link" matches that specificity and wins
   on order, since this sheet loads later. */
a.dk-skip-link { text-decoration: none; }

a.dk-skip-link,
.dk-skip-link {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: calc(var(--space-3) * -10);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  height: var(--control-h);
  padding-inline: var(--space-4);
  background: var(--surface-brand);
  color: var(--text-on-brand);
  font-size: var(--text-button);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease);
}
a.dk-skip-link:focus,
.dk-skip-link:focus {
  top: var(--space-3);
  color: var(--text-on-brand);
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* The eyebrow on a diagonal field.
   .dk-diagonal's ground is the photo placeholder (#D9DAD6), not Bone. Graphite
   measures 5.4:1 on Bone but only 4.38:1 there — under the 4.5 floor. The
   eyebrow is the one caption-scale element that routinely sits on that ground,
   so on it the eyebrow takes body Ink (13.9:1) instead of secondary. */
.dk-diagonal .dk-eyebrow { color: var(--text-body); }

/* WordPress core's own hidden-text convention, mapped to the theme utility. */
.screen-reader-text,
.says,
.sub-menu-toggle .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ---------------------------------------------------------- ENTRY TYPE --- */
/* The long-form reading surface. Persian measure is capped at 70ch by
   specification: on a wide viewport the text column stops growing. */
.dk-entry { font-size: var(--text-size-body); line-height: var(--lh-body); }
.dk-entry > * { max-width: var(--measure-body); }

.dk-entry h1,
.dk-entry h2,
.dk-entry h3,
.dk-entry h4,
.dk-entry h5,
.dk-entry h6 {
  color: var(--text-body);
  margin-block: var(--space-5) var(--space-3);
  font-weight: var(--weight-bold);
}
.dk-entry h1 { font-size: var(--text-h1); line-height: var(--lh-h1); }
.dk-entry h2 { font-size: var(--text-h2); line-height: var(--lh-h2); }
.dk-entry h3 { font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: var(--weight-semibold); }
.dk-entry h4,
.dk-entry h5,
.dk-entry h6 { font-size: var(--text-size-body); line-height: var(--lh-h3); font-weight: var(--weight-semibold); }
.dk-entry > :first-child { margin-block-start: 0; }

.dk-entry p { margin-block: 0 var(--space-3); }
.dk-entry ul,
.dk-entry ol { margin-block: 0 var(--space-3); padding-inline-start: var(--space-4); }
.dk-entry li { margin-block-end: var(--space-1); }
.dk-entry li > ul,
.dk-entry li > ol { margin-block-start: var(--space-1); }

/* Blockquote: a rule on the logical start edge. No radius, no shadow, no tint. */
.dk-entry blockquote,
.dk-entry .wp-block-quote {
  margin: 0 0 var(--space-4);
  padding-inline-start: var(--space-3);
  border-inline-start: var(--space-1) solid var(--border-accent);
  color: var(--text-secondary);
  font-style: normal;      /* Vazirmatn has no true italic; a synthetic slant is wrong */
}
.dk-entry blockquote cite,
.dk-entry .wp-block-quote cite {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--text-caption);
  font-style: normal;
  color: var(--text-secondary);
}

/* Separator / hr: a hairline, never a decorated rule. */
.dk-entry hr,
.dk-entry .wp-block-separator {
  max-width: var(--measure-body);
  height: 0;
  margin-block: var(--space-5);
  border: 0;
  border-top: var(--border-width) solid var(--border-default);
}

/* Code. Latin by definition, so it is bidi-isolated like every Latin run. */
.dk-entry code,
.dk-entry kbd,
.dk-entry samp,
.dk-entry pre {
  font-family: var(--font-en);
  font-size: var(--text-table);
  direction: ltr;
  unicode-bidi: isolate;
}
.dk-entry code {
  padding-inline: var(--space-1);
  background: var(--surface-muted);
  color: var(--text-body);
}
.dk-entry pre,
.dk-entry .wp-block-code {
  max-width: 100%;
  margin-block: 0 var(--space-4);
  padding: var(--space-3);
  overflow-x: auto;
  background: var(--surface-muted);
  border: var(--border-width) solid var(--border-default);
  line-height: var(--lh-table);
  text-align: start;
}
.dk-entry pre code { padding: 0; background: none; }

.dk-entry b,
.dk-entry strong { font-weight: var(--weight-bold); }
/* No italics anywhere: Vazirmatn has no true italic. Emphasis is weight. */
.dk-entry i,
.dk-entry em,
.dk-entry cite,
.dk-entry dfn { font-style: normal; font-weight: var(--weight-semibold); }
.dk-entry abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; }
.dk-entry mark { background: var(--surface-muted); color: var(--text-body); }
.dk-entry small { font-size: var(--text-caption); }
.dk-entry sub,
.dk-entry sup { font-size: var(--text-caption); line-height: 0; }

.dk-entry dl { margin-block: 0 var(--space-3); }
.dk-entry dt { font-weight: var(--weight-semibold); }
.dk-entry dd { margin-inline-start: var(--space-4); margin-block-end: var(--space-2); color: var(--text-secondary); }

/* Tables inside post content adopt the SpecTable contract. */
.dk-entry table,
.dk-entry .wp-block-table table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin-block: 0 var(--space-4);
  font-size: var(--table-font-size);
  line-height: var(--lh-table);
}
.dk-entry th {
  padding: var(--table-cell-padding);
  border-bottom: var(--border-width) solid var(--table-header-rule);
  text-align: start;
  font-weight: var(--weight-semibold);
  color: var(--text-body);
}
.dk-entry td {
  padding: var(--table-cell-padding);
  border-bottom: var(--border-width) solid var(--table-row-border);
}
/* A table is the one element permitted to scroll sideways in prose — a
   SPECIFICATION table is not (see docs/responsive-rules.md). */
.dk-entry .wp-block-table { max-width: 100%; overflow-x: auto; }

/* ------------------------------------------------------------- MEDIA ------ */
.dk-entry img,
.dk-entry video,
.dk-entry iframe,
.dk-entry embed,
.dk-entry object { max-width: 100%; height: auto; }
.dk-entry img { display: block; border-radius: var(--radius); }
.dk-entry figure { margin: 0 0 var(--space-4); }

.dk-entry figcaption,
.dk-entry .wp-caption-text,
.dk-entry .wp-element-caption {
  margin-block-start: var(--space-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
  text-align: start;
}
.dk-entry .wp-caption { max-width: 100%; }
.dk-entry .wp-caption img { width: 100%; }

.dk-entry .wp-block-gallery,
.dk-entry .blocks-gallery-grid { margin-block-end: var(--space-4); }
.dk-entry .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-2);
  margin-block-end: var(--space-4);
}
.dk-entry .gallery-item { margin: 0; }

/* WordPress alignment classes. */
.dk-entry .alignleft  { float: left;  margin: 0 var(--space-4) var(--space-3) 0; }
.dk-entry .alignright { float: right; margin: 0 0 var(--space-3) var(--space-4); }
.dk-entry .aligncenter { margin-inline: auto; display: block; }
.dk-entry .alignnone { margin: 0 0 var(--space-3); }
.dk-entry .alignwide,
.dk-entry .alignfull { max-width: 100%; }
.dk-entry::after { content: ""; display: table; clear: both; }

/* Core blocks that must not reintroduce forbidden geometry. */
.dk-entry .wp-block-button__link,
.dk-entry .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--button-height);
  padding-inline: var(--button-padding-x);
  background: var(--button-primary-background);
  color: var(--button-primary-text);
  border: 0;
  border-radius: var(--radius-sm);
  font-family: var(--font-fa);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1;
  text-decoration: none;
}
.dk-entry .wp-block-button__link:hover { background: var(--button-primary-hover); }
.dk-entry .wp-block-button__link:active { background: var(--button-primary-pressed); }
.dk-entry .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--button-secondary-text);
  box-shadow: inset 0 0 0 var(--border-width) var(--button-secondary-border);
}
.dk-entry .wp-block-pullquote {
  padding: var(--space-4);
  border-block: var(--border-width) solid var(--border-strong);
  text-align: start;
}
.dk-entry .wp-block-image { margin-block-end: var(--space-4); }
.dk-entry .wp-block-embed { margin-block-end: var(--space-4); }

/* ----------------------------------------------------------- POST LIST --- */
/* An archive entry is a Card. The card supplies surface, border and cut; this
   block only arranges what sits inside it. */
.dk-post-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gutter);
}
@media (max-width: 900px) { .dk-post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .dk-post-list { grid-template-columns: 1fr; gap: var(--grid-gutter-mobile); } }

.dk-post-card { position: relative; display: flex; flex-direction: column; padding: 0; }
.dk-post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  padding: var(--card-padding);
}
.dk-post-card__title {
  margin: 0;
  font-size: var(--card-title-size);
  line-height: var(--lh-h3);
  font-weight: var(--weight-semibold);
}
.dk-post-card__title a { color: inherit; text-decoration: none; }
/* One link target per card — the whole card is the hit area. */
.dk-post-card__title a::after { content: ""; position: absolute; inset: 0; }
.dk-post-card__excerpt {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
}
.dk-post-card__foot {
  margin-block-start: auto;
  padding-block-start: var(--space-2);
  border-top: var(--border-width) solid var(--border-default);
}
.dk-post-card:focus-within {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: calc(var(--focus-offset) * -1);
}

/* Entry meta: caption scale, secondary colour, bidi-safe separators. */
.dk-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
}
.dk-meta a { color: var(--text-secondary); }
.dk-meta__sep { direction: ltr; unicode-bidi: isolate; color: var(--text-secondary); }

.dk-page-header { margin-block-end: var(--space-5); }
.dk-page-header__title { margin: 0; font-size: var(--text-h1); line-height: var(--lh-h1); font-weight: var(--weight-bold); }
.dk-page-header__lead { margin-block: var(--space-2) 0; max-width: var(--measure-body); color: var(--text-secondary); }

.dk-hero { padding-block: var(--space-7); }
.dk-hero__title { margin: 0; font-size: var(--text-display); line-height: var(--lh-display); font-weight: var(--weight-bold); }
@media (max-width: 600px) { .dk-hero__title { font-size: var(--text-h1); line-height: var(--lh-h1); } }

/* Sticky / password-protected / no-thumbnail affordances. */
.dk-post-card--sticky { border-color: var(--border-accent); }

/* ----------------------------------------------------------- SINGLE ------- */
.dk-single__media { margin: 0 0 var(--space-5); max-width: 100%; }
.dk-single__caption {
  margin-block-start: var(--space-2);
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
}
.dk-single__tags { margin-block-start: var(--space-5); }

/* Icons inherit the component's colour and never introduce one of their own. */
.dk-icon { display: block; flex: 0 0 auto; }

/* State furniture. The component supplies the frame; these place what is in it. */
.dk-state__actions { justify-content: center; }
.dk-state__search,
.dk-searchform-wrap { width: 100%; max-width: 420px; }

.dk-search-again { margin-block-start: var(--space-4); max-width: 480px; }

.dk-aside { min-width: 0; }

/* ------------------------------------------------------- POST NAVIGATION -- */
.dk-post-nav {
  display: flex;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-4);
  border-top: var(--border-width) solid var(--border-default);
}
.dk-post-nav__item { flex: 1; min-width: 0; }
.dk-post-nav__item--next { text-align: end; }
.dk-post-nav__label { display: block; font-size: var(--text-caption); color: var(--text-secondary); margin-block-end: var(--space-1); }
.dk-post-nav__link { color: var(--text-body); text-decoration: none; font-weight: var(--weight-semibold); font-size: var(--text-label); }
.dk-post-nav__link:hover { color: var(--text-accent); }
@media (max-width: 600px) {
  .dk-post-nav { flex-direction: column; }
  .dk-post-nav__item--next { text-align: start; }
}

/* ------------------------------------------------------------- COMMENTS --- */
.dk-comments { margin-block-start: var(--space-6); }
.dk-comments__title {
  margin: 0 0 var(--space-4);
  padding-block-end: var(--space-2);
  border-bottom: var(--border-width) solid var(--border-strong);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: var(--weight-bold);
}
.dk-comments__list,
.dk-comments__list .children { list-style: none; margin: 0; padding: 0; }
.dk-comments__list .children { padding-inline-start: var(--space-4); margin-block-start: var(--space-3); }
.dk-comments__list li.comment { margin-block-end: var(--space-3); }

.dk-comment {
  padding: var(--card-padding);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-default);
}
.dk-comment__head { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-2); }
.dk-comment__avatar { display: block; border-radius: var(--radius); }
.dk-comment__author { font-weight: var(--weight-semibold); font-size: var(--text-label); }
.dk-comment__meta { font-size: var(--text-caption); color: var(--text-secondary); }
.dk-comment__body { font-size: var(--text-size-body); line-height: var(--lh-body); }
.dk-comment__body > :last-child { margin-block-end: 0; }
.dk-comment__actions { margin-block-start: var(--space-2); display: flex; gap: var(--space-3); font-size: var(--text-caption); }
.dk-comment--pending { border-color: var(--state-warning); }

.dk-comment-form { margin-block-start: var(--space-5); }
.dk-comment-form .dk-field { margin-block-end: var(--space-3); }
.dk-comment-form__notes,
.dk-comment-form .comment-notes,
.dk-comment-form .logged-in-as {
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
  margin-block: 0 var(--space-3);
}

/* --------------------------------------------------- FOOTER FURNITURE ----- */
/* The Footer component supplies the ground, the columns and the legal rule.
   These three are the theme's own additions inside it. */
.dk-footer__title {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  color: var(--footer-text);
}
.dk-footer__note {
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--lh-caption);
  color: var(--footer-text-secondary);
}
.dk-footer__legal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.dk-footer__legal-list a { color: var(--footer-text-secondary); text-decoration: none; }
.dk-footer__legal-list a:hover { color: var(--footer-text); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------- MOBILE NAV FURNITURE --- */
/* The drawer panel itself is a component; these three rows are the theme's own
   chrome inside it and carry no values of their own. */
.dk-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--border-default);
}
.dk-mobile-nav__list { overflow-y: auto; }
.dk-mobile-nav__foot {
  margin-block-start: auto;
  padding: var(--space-3);
  border-top: var(--border-width) solid var(--border-default);
}

/* ----------------------------------------- LINKS ON DARK GROUNDS --------- */
/* A light theme still contains dark surfaces: the footer, the inverse strip and
   the Petrol brand bands. On those grounds the inline-link colour is WRONG and
   forbidden — --text-link is Petrol, which measures 1.66:1 on Ink. "Petrol is
   never text on Ink" is one of the two hard colour prohibitions in the package.
   It bit the footer widget area specifically: a nav-menu link is styled by
   .dk-footer__list a, but a widget emits a bare <a> that fell through to the
   generic inline-link rule and rendered Petrol on Ink.

   On a dark ground the text is Bone and the accent is Mist — Mist's only
   legitimate use in the whole system.

   The :not() chain mirrors the one in theme-tokens.css: an <a> carrying a
   control class is a CONTROL, not a link, and keeps its own component colour.
   The exclusions sit inside :where() so they add no specificity, leaving these
   rules at (0,1,1) — enough to beat the generic inline-link rule from the
   earlier sheet, and still beatable by a component-scoped rule. */
.dk-footer a:not(:where([class*="dk-btn"], [class*="dk-icon-btn"], [class*="__link"], .dk-chip)),
.dk-section--inverse a:not(:where([class*="dk-btn"], [class*="dk-icon-btn"], [class*="__link"], .dk-chip)),
.dk-section--brand a:not(:where([class*="dk-btn"], [class*="dk-icon-btn"], [class*="__link"], .dk-chip)),
.dk-section--brand-deep a:not(:where([class*="dk-btn"], [class*="dk-icon-btn"], [class*="__link"], .dk-chip)) {
  color: var(--text-on-inverse);
}
.dk-footer a:not(:where([class*="dk-btn"], [class*="dk-icon-btn"], [class*="__link"], .dk-chip)):hover,
.dk-section--inverse a:not(:where([class*="dk-btn"], [class*="dk-icon-btn"], [class*="__link"], .dk-chip)):hover,
.dk-section--brand a:not(:where([class*="dk-btn"], [class*="dk-icon-btn"], [class*="__link"], .dk-chip)):hover,
.dk-section--brand-deep a:not(:where([class*="dk-btn"], [class*="dk-icon-btn"], [class*="__link"], .dk-chip)):hover {
  color: var(--text-accent-on-inverse);
}

/* Secondary copy on a dark ground is Ash, not Graphite. */
.dk-footer .dk-meta,
.dk-footer .dk-meta a,
.dk-section--inverse .dk-meta,
.dk-section--brand .dk-meta { color: var(--footer-text-secondary); }

/* ------------------------------------------- STICKY HEADER CLEARANCE ----- */
/* The header is sticky, so an in-page anchor would otherwise land with its
   target hidden underneath it. The offset follows the header token, so it
   stays correct when the header height is changed in Theme Settings. */
[id] { scroll-margin-block-start: calc(var(--header-h) + var(--space-3)); }
@media (max-width: 900px) {
  [id] { scroll-margin-block-start: calc(var(--header-h-mobile) + var(--space-3)); }
}

/* ------------------------------------------------------------- WIDGETS --- */
.dk-widget { margin-block-end: var(--space-5); }
.dk-widget__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.dk-widget ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.dk-widget ul ul { margin-block-start: var(--space-2); padding-inline-start: var(--space-3); }
.dk-widget a { font-size: var(--text-label); }

/* ------------------------------------------------------------- LAYOUT ----- */
.dk-with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
@media (max-width: 900px) { .dk-with-aside { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }

/* A search form is an input group plus a submit; both are already components. */
.dk-searchform { display: flex; gap: var(--space-2); align-items: stretch; }
.dk-searchform .dk-input-group { flex: 1; min-width: 0; }
.dk-searchform .dk-btn { flex: 0 0 auto; }
@media (max-width: 600px) {
  .dk-searchform { flex-direction: column; }
  .dk-searchform .dk-btn { width: 100%; }
}