/*
 Theme Name:   Digital Kadence Child
 Template:     astra
 Author:       Digital Kadence
 Description:  Child theme for digitalkadence.com — holds DK-specific CSS, brand-system tokens, and template overrides.
 Version:      1.1.0
 Text Domain:  digital-kadence-child
*/

/* =============================================================================
 * DK Brand System v1.1.0
 * =============================================================================
 * Source of truth: specs/0011a-brand-system.md v0.4 §§5.1 (palette), 5.2 (type),
 *                  5.3 (surfaces + spacing), 5.4 (buttons + CTA hooks),
 *                  5.7 (motion), 5.8 (icons), 5.6 (frames).
 * Spec:            specs/0016-visual-identity-substrate-update.md
 * Authored by:     dk-website-tech-lead 2026-06-01 (Phase 3 Step 2 local authoring)
 * Substrate ver:   v1.1.0 (tag — chassis specs 0007/0009 build against this)
 *
 * Token inventory (must match 0011a v0.4 verbatim):
 *   - 16 palette tokens  (5 ink + 3 paper + 2 navy + 3 accent + 2 link + 1 focus)
 *   - 10 type tokens     (display / h1 / h2 / h3 / h4 / body-lg / body / small / eyebrow / display-numeral)
 *   - 10 space tokens    (space-1 .. space-10, 4 → 120px ladder)
 *   - 4  motion tokens   (quick / default / slow / translate-hover)
 *   - 5  icon-size tokens (xs / sm / md / lg / xl)
 *   - 1  focus-ring color (separate token; inverts on inverse surface)
 *   - 1  container-max-width (1200px)
 *
 * Lucide icons (ISC license) — https://lucide.dev
 *
 * Changelog
 * ---------
 * v1.1.0  2026-06-01  Initial substrate authoring. Replaces 263-byte header-only
 *                     stylesheet shipped with child theme 1.0.0.
 * v1.1.x  reserved    Post-Step-13 patches go here. Future Phase 3.x amendments
 *                     append a row; tag chassis substrate-version compatibility
 *                     check at execution time (0016 Risk #11 mitigation).
 * ============================================================================= */

:root {
  /* ---- Palette: ink (text + dark backgrounds) ---- */
  --dk-color-ink-900: #0F1B2D;   /* Display headings (H1, H2 large) */
  --dk-color-ink-800: #1A2A40;   /* Section heads (H2, H3) */
  --dk-color-ink-700: #2F3B4D;   /* Body text */
  --dk-color-ink-500: #5A6577;   /* Muted body, captions, metadata */
  --dk-color-ink-300: #CBD2DC;   /* Borders, dividers */

  /* ---- Palette: paper (light surfaces) ---- */
  --dk-color-paper-50:  #FFFFFF; /* Default surface (page bg) */
  --dk-color-paper-100: #F4EEE6; /* Warm inset surface (per §5.3 alternation) */
  --dk-color-paper-150: #EEF2F7; /* Cool inset surface (alt for navy-adjacent sections) */

  /* ---- Palette: navy (inverse surfaces) ---- */
  --dk-color-navy-900: #0F1B2D;  /* Alias of ink-900 for semantic clarity */
  --dk-color-navy-700: #22344F;  /* Inverse-surface bg (softer than navy-900) */

  /* ---- Palette: accent (brand teal) ---- */
  --dk-color-accent-600: #0E7C86; /* Primary brand accent / CTA fill */
  --dk-color-accent-700: #0A5F66; /* CTA hover, deep accent, focus-ring outer */
  --dk-color-accent-100: #D6EEF1; /* Accent-tint background (callout, badge, light-teal tint) */

  /* ---- Palette: link ---- */
  --dk-color-link:       #0A5F66; /* Inline text links (darker teal) */
  --dk-color-link-hover: #063E43; /* Link hover (deepest teal) */

  /* ---- Palette: focus ring ---- */
  --dk-color-focus-ring: #0E7C86; /* Matches accent-600; inverts to white inside .dk-surface-inverse */

  /* ---- Type scale (§5.2) ---- */
  --dk-text-display:           64px; /* Hero H1 only — Fraunces 500 */
  --dk-text-h1:                48px; /* Page-title H1 on non-hero pages — Inter 600 */
  --dk-text-h2:                36px; /* Section heads — Inter 600 */
  --dk-text-h3:                24px; /* Sub-section heads, tile titles — Inter 600 */
  --dk-text-h4:                18px; /* Card titles, small heads — Inter 600 */
  --dk-text-body-lg:           18px; /* Lead paragraphs, hero subhead — Inter 400 */
  --dk-text-body:              16px; /* Default body — Inter 400 */
  --dk-text-small:             14px; /* Captions, metadata, eyebrow — Inter 400 */
  --dk-text-eyebrow:           12px; /* Section eyebrow labels (uppercased) — Inter 600 */
  --dk-text-display-numeral:   56px; /* Numbered step strip (0007c §2 hook) — Inter 600 tabular-nums */

  /* ---- Spacing scale (§5.3 — base 4, modular ladder) ---- */
  --dk-space-1:   4px;
  --dk-space-2:   8px;
  --dk-space-3:  12px;
  --dk-space-4:  16px;
  --dk-space-5:  24px;
  --dk-space-6:  32px;
  --dk-space-7:  48px;
  --dk-space-8:  64px;
  --dk-space-9:  96px;
  --dk-space-10: 120px;

  /* ---- Motion tokens (§5.7) ---- */
  --dk-motion-quick:            120ms cubic-bezier(0.4, 0, 0.2, 1); /* Button hover/focus, icon, link underline */
  --dk-motion-default:          220ms cubic-bezier(0.4, 0, 0.2, 1); /* Surface fades, accent reveals */
  --dk-motion-slow:             400ms cubic-bezier(0.16, 1, 0.3, 1); /* Page-load hero fade-in (single, hero only) */
  --dk-motion-translate-hover:  translateY(-1px);                    /* Button hover lift (paired with quick easing) */

  /* ---- Icon sizes (§5.8) ---- */
  --dk-icon-xs: 16px; /* Inline with body text */
  --dk-icon-sm: 20px; /* Button-internal icons */
  --dk-icon-md: 24px; /* Tile-card icons, default content icon */
  --dk-icon-lg: 32px; /* Feature-section icons */
  --dk-icon-xl: 48px; /* Step-strip fallback icon (0007c §2 if numeric strip swaps) */

  /* ---- Container ---- */
  --dk-container-max-width: 1200px;
}


/* =============================================================================
 * Surface utility classes (§5.3)
 * Each surface sets background + default text colors. Containers and section
 * padding remain Elementor/Astra concerns; these utilities are bg + text only.
 * ============================================================================= */

.dk-surface-default {
  background-color: var(--dk-color-paper-50);
  color: var(--dk-color-ink-700);
}
.dk-surface-default h1,
.dk-surface-default h2,
.dk-surface-default h3,
.dk-surface-default h4 {
  color: var(--dk-color-ink-900);
}

.dk-surface-inset {
  background-color: var(--dk-color-paper-100);
  color: var(--dk-color-ink-700);
}
.dk-surface-inset h1,
.dk-surface-inset h2,
.dk-surface-inset h3,
.dk-surface-inset h4 {
  color: var(--dk-color-ink-900);
}

.dk-surface-inset-cool {
  background-color: var(--dk-color-paper-150);
  color: var(--dk-color-ink-700);
}
.dk-surface-inset-cool h1,
.dk-surface-inset-cool h2,
.dk-surface-inset-cool h3,
.dk-surface-inset-cool h4 {
  color: var(--dk-color-ink-900);
}

.dk-surface-inverse {
  background-color: var(--dk-color-navy-700);
  color: #CBD2DC;
  /* Override focus ring inside inverse: teal-on-navy = 2.57:1 (fails WCAG 1.4.11 3:1) */
  --dk-color-focus-ring: #FFFFFF;
}
.dk-surface-inverse h1,
.dk-surface-inverse h2,
.dk-surface-inverse h3,
.dk-surface-inverse h4 {
  color: #FFFFFF;
}

.dk-surface-accent {
  background-color: var(--dk-color-accent-100);
  color: var(--dk-color-ink-700);
}
.dk-surface-accent h1,
.dk-surface-accent h2,
.dk-surface-accent h3,
.dk-surface-accent h4 {
  color: var(--dk-color-ink-900);
}


/* =============================================================================
 * Contrast-mitigation scope rules (§5.1 re-validation table)
 *
 * Rule 1: primary-teal inline text on warm-tan inset is borderline 4.27:1
 *         (AA Large only). Inline text-link inside `.dk-surface-inset` is
 *         forced to darker teal `--dk-color-link` (6.51:1 AAA on warm-tan).
 *         Buttons (≥18.66px text rank) are exempt — they pass as Large.
 *
 * Rule 2: focus ring on inverse-navy surface inverts to white (handled in
 *         `.dk-surface-inverse` block above via --dk-color-focus-ring override;
 *         the :focus-visible rule below picks up the inverted token).
 * ============================================================================= */

.dk-surface-inset .dk-link,
.dk-surface-inset a:not(.dk-btn-primary):not(.dk-btn-secondary):not(.dk-btn-inverse) {
  color: var(--dk-color-link);
}
.dk-surface-inset .dk-link:hover,
.dk-surface-inset a:not(.dk-btn-primary):not(.dk-btn-secondary):not(.dk-btn-inverse):hover {
  color: var(--dk-color-link-hover);
}

.dk-surface-inverse :focus-visible {
  outline-color: #FFFFFF;
}


/* =============================================================================
 * Inline-link baseline (§5.1)
 * ============================================================================= */

.dk-link,
a.dk-link {
  color: var(--dk-color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--dk-motion-quick);
}
.dk-link:hover,
a.dk-link:hover {
  color: var(--dk-color-link-hover);
  text-decoration-thickness: 2px;
}


/* =============================================================================
 * Button system (§5.4)
 *
 * Five variants: primary (filled teal), secondary (outlined navy), inverse
 * (white on navy surfaces), text (tertiary inline), large (modifier).
 *
 * All variants share: 8px radius, 600 weight, focus-ring + tap-target rules,
 * disabled + active states.
 * ============================================================================= */

.dk-btn-primary,
.dk-btn-secondary,
.dk-btn-inverse,
.dk-btn-text {
  display: inline-block;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background-color var(--dk-motion-quick),
    color var(--dk-motion-quick),
    border-color var(--dk-motion-quick),
    transform var(--dk-motion-quick);
}

/* --- Focus state (all variants) --- */
.dk-btn-primary:focus-visible,
.dk-btn-secondary:focus-visible,
.dk-btn-inverse:focus-visible,
.dk-btn-text:focus-visible {
  outline: 2px solid var(--dk-color-focus-ring);
  outline-offset: 2px;
}

/* --- Disabled state (all variants) --- */
.dk-btn-primary[disabled],
.dk-btn-primary[aria-disabled="true"],
.dk-btn-secondary[disabled],
.dk-btn-secondary[aria-disabled="true"],
.dk-btn-inverse[disabled],
.dk-btn-inverse[aria-disabled="true"],
.dk-btn-text[disabled],
.dk-btn-text[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* --- Mobile tap target (≥48×48 per WCAG 2.5.5; exceeds 44×44 floor) --- */
@media (max-width: 768px) {
  .dk-btn-primary,
  .dk-btn-secondary,
  .dk-btn-inverse {
    min-height: 48px;
    min-width: 48px;
  }
}

/* ---------- .dk-btn-primary ---------- */
.dk-btn-primary {
  background-color: var(--dk-color-accent-600);
  color: #FFFFFF;
  border: none;
  padding: 14px 28px;
}
.dk-btn-primary:hover {
  background-color: var(--dk-color-accent-700);
  color: #FFFFFF;
  transform: var(--dk-motion-translate-hover);
}
.dk-btn-primary:active {
  background-color: #063E43; /* deepest teal — transient on click */
  transform: translateY(0);
}
@media (max-width: 768px) {
  .dk-btn-primary { padding: 14px 24px; }
}

/* ---------- .dk-btn-secondary ---------- */
.dk-btn-secondary {
  background-color: transparent;
  color: var(--dk-color-ink-900);
  border: 1.5px solid var(--dk-color-ink-900);
  padding: 14px 28px;
}
.dk-btn-secondary:hover {
  background-color: var(--dk-color-ink-900);
  color: #FFFFFF;
  transform: var(--dk-motion-translate-hover);
}
.dk-btn-secondary:active {
  transform: translateY(0);
}
@media (max-width: 768px) {
  .dk-btn-secondary { padding: 14px 24px; }
}

/* ---------- .dk-btn-inverse (for use on .dk-surface-inverse) ---------- */
.dk-btn-inverse {
  background-color: #FFFFFF;
  color: var(--dk-color-ink-900);
  border: none;
  padding: 14px 28px;
}
.dk-btn-inverse:hover {
  background-color: var(--dk-color-paper-100);
  color: var(--dk-color-ink-900);
  transform: var(--dk-motion-translate-hover);
  box-shadow: 0 2px 8px rgba(15, 27, 45, 0.10);
}
.dk-btn-inverse:active {
  transform: translateY(0);
  box-shadow: none;
}
@media (max-width: 768px) {
  .dk-btn-inverse { padding: 14px 24px; }
}

/* ---------- .dk-btn-text (tertiary / inline) ---------- */
.dk-btn-text {
  background-color: transparent;
  color: var(--dk-color-accent-700);
  border: none;
  border-radius: 0;
  padding: 0;
  text-decoration: none;
}
.dk-btn-text:hover {
  color: var(--dk-color-accent-600);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.dk-btn-text:active {
  color: #063E43;
}

/* ---------- .dk-btn-large (modifier — hero / final-CTA scale) ---------- */
.dk-btn-large {
  padding: 18px 36px;
  font-size: var(--dk-text-body-lg);
  border-radius: 8px;
}
@media (max-width: 768px) {
  .dk-btn-large { padding: 16px 28px; }
}


/* =============================================================================
 * Stable CTA-instance class hooks (§5.4 + 0007c §9 cross-coupling #5)
 *
 * These class names are the stable contract that 0007 chassis + 0009 pricing
 * page reference. They alias to the underlying button utility classes so the
 * Elementor author only needs to know the hook name, not the substrate detail.
 *
 * | Hook                     | Aliases to                                      |
 * |--------------------------|-------------------------------------------------|
 * | .dk-hero-primary-cta     | .dk-btn-primary.dk-btn-large                    |
 * | .dk-mid-primary-cta      | .dk-btn-secondary (de-weighted per 0007c §6)    |
 * | .dk-inline-pricing-cta   | .dk-btn-text → promotes to .dk-btn-primary <769 |
 * | .dk-final-primary-cta    | .dk-btn-primary.dk-btn-large inside .dk-surface-inverse |
 * ============================================================================= */

/* ---------- .dk-hero-primary-cta — primary + large ---------- */
.dk-hero-primary-cta {
  display: inline-block;
  background-color: var(--dk-color-accent-600);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 18px 36px;
  font-family: inherit;
  font-weight: 600;
  font-size: var(--dk-text-body-lg);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dk-motion-quick),
    color var(--dk-motion-quick),
    transform var(--dk-motion-quick);
}
.dk-hero-primary-cta:hover {
  background-color: var(--dk-color-accent-700);
  color: #FFFFFF;
  transform: var(--dk-motion-translate-hover);
}
.dk-hero-primary-cta:active {
  background-color: #063E43;
  transform: translateY(0);
}
.dk-hero-primary-cta:focus-visible {
  outline: 2px solid var(--dk-color-focus-ring);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .dk-hero-primary-cta {
    padding: 16px 28px;
    min-height: 48px;
    min-width: 48px;
  }
}

/* ---------- .dk-mid-primary-cta — outlined secondary (de-weighted per 0007c §6) ---------- */
.dk-mid-primary-cta {
  display: inline-block;
  background-color: transparent;
  color: var(--dk-color-ink-900);
  border: 1.5px solid var(--dk-color-ink-900);
  border-radius: 8px;
  padding: 14px 28px;
  font-family: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dk-motion-quick),
    color var(--dk-motion-quick),
    transform var(--dk-motion-quick);
}
.dk-mid-primary-cta:hover {
  background-color: var(--dk-color-ink-900);
  color: #FFFFFF;
  transform: var(--dk-motion-translate-hover);
}
.dk-mid-primary-cta:active {
  transform: translateY(0);
}
.dk-mid-primary-cta:focus-visible {
  outline: 2px solid var(--dk-color-focus-ring);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .dk-mid-primary-cta {
    padding: 14px 24px;
    min-height: 48px;
    min-width: 48px;
  }
}

/* ---------- .dk-inline-pricing-cta — text-link rank desktop; promotes to primary at ≤768 (0007c §7) ---------- */
.dk-inline-pricing-cta {
  display: inline;
  background-color: transparent;
  color: var(--dk-color-accent-700);
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dk-motion-quick);
}
.dk-inline-pricing-cta:hover {
  color: var(--dk-color-accent-600);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.dk-inline-pricing-cta:active {
  color: #063E43;
}
.dk-inline-pricing-cta:focus-visible {
  outline: 2px solid var(--dk-color-focus-ring);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  /* Promote to primary button at mobile per 0007c §7 */
  .dk-inline-pricing-cta {
    display: inline-block;
    background-color: var(--dk-color-accent-600);
    color: #FFFFFF;
    border-radius: 8px;
    padding: 14px 24px;
    text-decoration: none;
    min-height: 48px;
    min-width: 48px;
    transition:
      background-color var(--dk-motion-quick),
      color var(--dk-motion-quick),
      transform var(--dk-motion-quick);
  }
  .dk-inline-pricing-cta:hover {
    background-color: var(--dk-color-accent-700);
    color: #FFFFFF;
    text-decoration: none;
    transform: var(--dk-motion-translate-hover);
  }
  .dk-inline-pricing-cta:active {
    background-color: #063E43;
    transform: translateY(0);
  }
}

/* ---------- .dk-final-primary-cta — primary + large, lives inside .dk-surface-inverse ---------- */
.dk-final-primary-cta {
  display: inline-block;
  background-color: var(--dk-color-accent-600);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 18px 36px;
  font-family: inherit;
  font-weight: 600;
  font-size: var(--dk-text-body-lg);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dk-motion-quick),
    color var(--dk-motion-quick),
    transform var(--dk-motion-quick);
}
.dk-final-primary-cta:hover {
  background-color: var(--dk-color-accent-700);
  color: #FFFFFF;
  transform: var(--dk-motion-translate-hover);
}
.dk-final-primary-cta:active {
  background-color: #063E43;
  transform: translateY(0);
}
/* Inside inverse surface: focus-ring already inverts to white via .dk-surface-inverse override above */
.dk-final-primary-cta:focus-visible {
  outline: 2px solid var(--dk-color-focus-ring);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .dk-final-primary-cta {
    padding: 16px 28px;
    min-height: 48px;
    min-width: 48px;
  }
}


/* =============================================================================
 * Hero load-in motion (§5.7)
 *
 * Single page-load fade-in: hero display H1 + subhead opacity 0 → 1 over 400ms
 * with -8px → 0 translateY. Nothing else animates on page load.
 *
 * Authors opt-in by adding `.dk-hero-fade-in` to the hero wrapper element.
 * `prefers-reduced-motion: reduce` disables the animation entirely.
 * ============================================================================= */

.dk-hero-fade-in {
  opacity: 0;
  transform: translateY(-8px);
  animation: dk-hero-fade-in-kf var(--dk-motion-slow) forwards;
}

@keyframes dk-hero-fade-in-kf {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dk-hero-fade-in {
    opacity: 1;
    transform: none;
    animation: none;
  }
  /* Also kill button hover-lift translate for reduced-motion users */
  .dk-btn-primary:hover,
  .dk-btn-secondary:hover,
  .dk-btn-inverse:hover,
  .dk-hero-primary-cta:hover,
  .dk-mid-primary-cta:hover,
  .dk-final-primary-cta:hover {
    transform: none;
  }
}


/* =============================================================================
 * Frame utilities (§5.6 + 0017 SVG assets)
 *
 * Dimensional UI mockup frames — iPad landscape, iPad portrait, desktop browser.
 * The SVGs themselves use `stroke="currentColor"` so any element using a frame
 * utility class can control stroke color by setting `color:` on the wrapper.
 *
 * Default stroke color: `--dk-color-accent-600` (brand teal), per §5.6 brief.
 * ============================================================================= */

.dk-frame-ipad-landscape,
.dk-frame-ipad-portrait,
.dk-frame-desktop {
  display: block;
  width: 100%;
  height: auto;
  color: var(--dk-color-accent-600); /* SVG stroke inherits via currentColor */
}

.dk-frame-ipad-landscape svg,
.dk-frame-ipad-portrait svg,
.dk-frame-desktop svg {
  width: 100%;
  height: auto;
  display: block;
}

.dk-frame-ipad-landscape { max-width: 640px; }  /* viewBox 1024×768 — comfortable hero scale */
.dk-frame-ipad-portrait  { max-width: 480px; }  /* viewBox 768×1024 — narrower */
.dk-frame-desktop        { max-width: 800px; }  /* viewBox 1280×800 — widest */


/* =============================================================================
 * Step-strip illustration utility (§5.6 + 0017 S-1/S-2/S-3 SVG assets)
 *
 * Step illustrations (viewBox 0 0 96 96, 2px stroke, currentColor) sized for
 * "How it works" step strip on chassis (0007c §2). Display at 96px on desktop,
 * 72px on mobile. Color inherits from parent — typically ink-900 for default
 * surfaces, white for inverse.
 * ============================================================================= */

.dk-step-illustration {
  display: block;
  width: 96px;
  height: 96px;
  color: var(--dk-color-ink-900);
}
.dk-step-illustration svg {
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-width: 768px) {
  .dk-step-illustration {
    width: 72px;
    height: 72px;
  }
}


/* =============================================================================
 * Section padding rank utilities (§5.3)
 *
 * Section padding tokens — authors apply on Elementor section wrapper. These
 * complement the surface utility classes; padding rank is a separate axis from
 * surface color so any rank can sit on any surface.
 * ============================================================================= */

.dk-section-comfortable {
  padding-top: var(--dk-space-9);    /* 96px */
  padding-bottom: var(--dk-space-9); /* 96px */
}
.dk-section-tight {
  padding-top: var(--dk-space-8);    /* 64px */
  padding-bottom: var(--dk-space-8); /* 64px */
}
.dk-section-inverse-cta {
  padding-top: var(--dk-space-10);    /* 120px */
  padding-bottom: var(--dk-space-10); /* 120px */
}
@media (max-width: 768px) {
  .dk-section-comfortable {
    padding-top: var(--dk-space-8); /* 64px */
    padding-bottom: var(--dk-space-8);
  }
  .dk-section-tight {
    padding-top: var(--dk-space-7); /* 48px */
    padding-bottom: var(--dk-space-7);
  }
  .dk-section-inverse-cta {
    padding-top: var(--dk-space-8); /* 80px-ish → using 64px token; closest match per §5.3 */
    padding-bottom: var(--dk-space-8);
  }
}


/* =============================================================================
 * Container utility (§5.3)
 *
 * Contained content max-width = 1200px. Astra/Elementor sections still render
 * full-bleed bg; the inner content uses this container utility to constrain.
 * ============================================================================= */

.dk-container {
  width: 100%;
  max-width: var(--dk-container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--dk-space-5);  /* 24px gutter */
  padding-right: var(--dk-space-5);
}


/* =============================================================================
 * Tile-card utility (§5.3 + 0007c §9 cross-coupling #3)
 *
 * Default tile-card pattern: paper-50 surface, 1px ink-300 border, 8px radius.
 * Hover reveals a subtle shadow (per §5.7 motion language) — no card lift.
 * ============================================================================= */

.dk-tile-card {
  background-color: var(--dk-color-paper-50);
  border: 1px solid var(--dk-color-ink-300);
  border-radius: 8px;
  padding: var(--dk-space-6); /* 32px */
  transition: box-shadow var(--dk-motion-default);
}
.dk-tile-card:hover {
  box-shadow: 0 2px 8px rgba(15, 27, 45, 0.06);
}


/* =============================================================================
 * Eyebrow label utility (§5.2)
 *
 * Section eyebrow labels — uppercased, letter-spaced, Inter 600 12px.
 * Color inherits unless overridden.
 * ============================================================================= */

.dk-eyebrow {
  font-size: var(--dk-text-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}


/* =============================================================================
 * Display-numeral utility (§5.2 + 0007c §9 cross-coupling #4)
 *
 * Numbered step strip — 56px Inter 600 with tabular-nums + tightened tracking.
 * ============================================================================= */

.dk-display-numeral {
  font-family: 'Inter', sans-serif;
  font-size: var(--dk-text-display-numeral);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}


/* =============================================================================
 * Lucide icon utility (§5.8)
 *
 * Inline-SVG icons. SVGs themselves use `stroke="currentColor"`. The utility
 * class sets size + color (color inherits unless overridden).
 *
 * Authors apply: <span class="dk-icon dk-icon-md"><svg>...</svg></span>
 * or directly on the SVG: <svg class="dk-icon dk-icon-md">...</svg>
 * ============================================================================= */

.dk-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
}
.dk-icon svg,
svg.dk-icon {
  width: 100%;
  height: 100%;
  display: block;
}

.dk-icon-xs { width: var(--dk-icon-xs); height: var(--dk-icon-xs); }
.dk-icon-sm { width: var(--dk-icon-sm); height: var(--dk-icon-sm); }
.dk-icon-md { width: var(--dk-icon-md); height: var(--dk-icon-md); }
.dk-icon-lg { width: var(--dk-icon-lg); height: var(--dk-icon-lg); }
.dk-icon-xl { width: var(--dk-icon-xl); height: var(--dk-icon-xl); }

/* Accent-colored icon (reserved for CTA-button-internal + accent-tinted callouts per §5.8) */
.dk-icon-accent {
  color: var(--dk-color-accent-600);
}


/* =============================================================================
 * Typography baseline (§5.2)
 *
 * Body + heading defaults so any element picks up the new type scale even
 * without an explicit token class. Astra customizer state still drives most
 * of this; these rules are belt-and-suspenders for elements that escape
 * Astra/Elementor styling (e.g., raw HTML widgets).
 *
 * NOTE: heading sizes here are the non-hero defaults. The display rank (64px
 * Fraunces 500) is invoked only on hero H1 via `.dk-text-display` utility
 * (below) — NOT applied to all h1 globally — to preserve cross-page H1
 * consistency per F-10 fix.
 * ============================================================================= */

body {
  font-family: 'Inter', sans-serif;
  font-size: var(--dk-text-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--dk-color-ink-700);
  background-color: var(--dk-color-paper-50);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  color: var(--dk-color-ink-900);
}

/* Type-token utility classes — authors apply when they want a specific rank without relying on h-tag inheritance */
.dk-text-display {
  font-family: 'Fraunces', 'Inter', serif;
  font-size: var(--dk-text-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.dk-text-h1 {
  font-family: 'Inter', sans-serif;
  font-size: var(--dk-text-h1);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.dk-text-h2 {
  font-family: 'Inter', sans-serif;
  font-size: var(--dk-text-h2);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.dk-text-h3 {
  font-family: 'Inter', sans-serif;
  font-size: var(--dk-text-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.dk-text-h4 {
  font-family: 'Inter', sans-serif;
  font-size: var(--dk-text-h4);
  font-weight: 600;
  line-height: 1.3;
}
.dk-text-body-lg {
  font-family: 'Inter', sans-serif;
  font-size: var(--dk-text-body-lg);
  font-weight: 400;
  line-height: 1.6;
}
.dk-text-body {
  font-family: 'Inter', sans-serif;
  font-size: var(--dk-text-body);
  font-weight: 400;
  line-height: 1.6;
}
.dk-text-small {
  font-family: 'Inter', sans-serif;
  font-size: var(--dk-text-small);
  font-weight: 400;
  line-height: 1.5;
}

/* Mobile overrides (§5.2): display 40, h1 32, h2 26, h3 20 at 375 viewport */
@media (max-width: 768px) {
  .dk-text-display { font-size: 40px; }
  .dk-text-h1      { font-size: 32px; }
  .dk-text-h2      { font-size: 26px; }
  .dk-text-h3      { font-size: 20px; }
}


/* =============================================================================
 * End of DK Brand System v1.1.0
 *
 * Phase 3 Step 7 deploys this file to:
 *   /html/wp-content/themes/digital-kadence-child/style.css
 *
 * Rollback artifact: /tmp/style-css-pre-deploy-backup.css (captured during the
 * Thu 06-04 mutation cluster atomic-mv sequence per 0016 §Implementation Step 7).
 * ============================================================================= */


/* ============================================================================
 * 0007 closeout-bundle (2026-06-04) — items #3 + #4
 *
 * #3 (MED): /home-service/ hero column widen at >= 1400px viewport. The hero
 *   top container (#27bd4a7) inherits the site-default Elementor inner-container
 *   max-width (~1140px), leaving large empty gutters on 1920 desktops.
 *   Bump the inner-container max-width on THIS hero only.
 *
 * #4 (MED): The .dk-hero-primary-cta class is declared above as a button-style
 *   modifier (accent-600 background, padding 18px 36px). On /home-service/ the
 *   class is also used on the container wrapping the hero buttons (id #5893939e).
 *   The button-style background + padding bleeds onto the container, producing
 *   ~60px of dead teal space below the button on mobile (375).
 *   Scope a mobile reset for the container variant of .dk-hero-primary-cta
 *   (detected via Elementor's .e-con class which only appears on containers).
 * ============================================================================ */

/* Item #3 — widen hero container on large desktops only */
@media (min-width: 1400px) {
  .elementor-element-27bd4a7 > .e-con-inner,
  .elementor-element.elementor-element-27bd4a7 > .e-con-inner {
    max-width: 1440px;
  }
}

/* Item #4 — neutralise button-class side-effects when .dk-hero-primary-cta is
 * used on an Elementor container (.e-con) rather than directly on a button.
 * Targets the container variant only; the button variant rule above is preserved. */
.e-con.dk-hero-primary-cta {
  display: flex;
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: left;
}
@media (max-width: 768px) {
  .e-con.dk-hero-primary-cta {
    padding: 0;
    min-height: 0;
    min-width: 0;
  }
}
/* end 0007 closeout-bundle items #3 + #4 */

/* =============================================================================
 * Phase -1 F-CR-2 (spec 0026, Round 2) -- appended 2026-06-04
 * High-specificity override: Elementor buttons inside dk-surface-inset
 * regions that carry the dk-btn-primary class. Must beat Astra inline color.
 * =============================================================================
 */
.dk-surface-inset .dk-btn-primary .elementor-button,
.dk-surface-inset .dk-btn-primary a.elementor-button {
  color: var(--dk-color-on-accent) !important;
  background-color: var(--dk-color-accent-600) !important;
}
/* end F-CR-2 */