/* dl-combined.css — bundled at build time 2026-05-23 05:04:40 */

/* === dl-tokens.css (6,542 bytes) === */
/*
  DigitallyLearn Design Tokens v2
  Single source of truth for every design value used across the site.
  Loaded first, sitewide, by inc/dl-modern-loader.php.
  Defines no rules - only CSS custom properties on :root.

  Editing a brand value? Change it once here. Don't grep for hex.

  Locked Editorial palette: 2026-05-05 (memory: feedback_brand_palette_editorial.md)
*/

:root {

  /* ==================================================================
     1. COLOR - Newsroom Black palette (locked 2026-05-06 by user)
     Logo: pure wordmark (L6). No icon; typography with vertical red bar.
     Anchor: NYT-style newsroom - sharp ink-black + news red + cream.
     ================================================================== */

  --dl-ink:        #0f0f0f;                  /* Newsroom ink - primary text, dark surfaces */
  --dl-ink-soft:   #1a1a1a;                  /* Body text (slight lift for readability) */
  --dl-ink-mute:   rgba(15, 15, 15, 0.65);   /* Captions, meta */
  --dl-ink-faint:  rgba(15, 15, 15, 0.45);   /* Disabled, hairlines */

  --dl-paper:      #ffffff;                  /* Card surface, primary white */
  --dl-paper-soft: #fafaf8;                  /* Subtle background */
  --dl-paper-warm: #f7f5f0;                  /* Page background = newsroom cream */

  --dl-accent:        #E63946;               /* News red - CTAs, hover, marks (sparingly) */
  --dl-accent-hover:  #C72D3A;               /* News red deepened, on hover */
  --dl-accent-soft:   rgba(230, 57, 70, 0.08); /* Soft tint for badges, callouts */

  --dl-line:         rgba(15, 15, 15, 0.10);
  --dl-line-strong:  rgba(15, 15, 15, 0.20);
  --dl-line-on-dark: rgba(247, 245, 240, 0.18);

  /* Status palette */
  --dl-success: #15803D;                     /* Editorial green */
  --dl-warning: #B45309;
  --dl-error:   #E63946;                     /* Aligns with brand red */
  --dl-info:    #E63946;

  /* Dark surfaces - two-tier so the newsletter CTA band reads as distinct
     from the footer beneath it (was a single shade - visually identical).
     Component E fix, locked 2026-05-07. */
  --dl-bg-dark:        #0a0a0a;   /* Footer + hero overlays = deep near-black */
  --dl-bg-newsletter:  #1A1714;   /* Newsletter CTA band = warm night (matches Logo Primary night) */
  --dl-on-dark:        #f7f5f0;

  /* ==================================================================
     2. TYPOGRAPHY - Plus Jakarta Sans display + Inter body + Noto Hindi
     ================================================================== */

  --dl-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --dl-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --dl-font-mono:    ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;
  --dl-font-hindi:   'Noto Sans Devanagari', system-ui, sans-serif;

  /* Type scale - modular, anchored at 16.5px body for long-form readability */
  --dl-text-xs:   11px;
  --dl-text-sm:   13px;
  --dl-text-base: 15px;
  --dl-text-md:   16.5px;   /* article body */
  --dl-text-lg:   18px;
  --dl-text-xl:   21px;
  --dl-text-2xl:  26px;
  --dl-text-3xl:  32px;
  --dl-text-4xl:  38px;
  --dl-text-5xl:  48px;

  --dl-lh-tight:   1.15;
  --dl-lh-snug:    1.30;
  --dl-lh-base:    1.50;
  --dl-lh-relaxed: 1.70;

  --dl-tracking-tight:  -0.015em;
  --dl-tracking-snug:   -0.005em;
  --dl-tracking-normal:  0;
  --dl-tracking-wide:    0.08em;
  --dl-tracking-wider:   0.16em;

  /* ==================================================================
     3. SPACING - 4 px base, modular
     ================================================================== */

  --dl-space-1:   4px;
  --dl-space-2:   8px;
  --dl-space-3:   12px;
  --dl-space-4:   16px;
  --dl-space-5:   20px;
  --dl-space-6:   24px;
  --dl-space-8:   32px;
  --dl-space-10:  40px;
  --dl-space-12:  48px;
  --dl-space-16:  64px;
  --dl-space-20:  80px;
  --dl-space-24:  96px;

  /* ==================================================================
     4. RADIUS, SHADOW, BORDER
     ================================================================== */

  --dl-radius-sm:   2px;
  --dl-radius-md:   4px;
  --dl-radius-lg:   8px;
  --dl-radius-pill: 999px;

  --dl-shadow-1:        0 1px 2px rgba(0,0,0,0.06);
  --dl-shadow-2:        0 2px 8px rgba(0,0,0,0.08);
  --dl-shadow-3:        0 8px 24px rgba(0,0,0,0.12);
  --dl-shadow-popover:  0 4px 12px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.12);

  --dl-border-thin:   1px solid var(--dl-line);
  --dl-border-strong: 1px solid var(--dl-line-strong);

  /* ==================================================================
     5. CONTAINERS - content widths
     ================================================================== */

  --dl-container-narrow:  720px;
  --dl-container-medium:  960px;
  --dl-container-reading: 1080px;
  --dl-container-wide:    1240px;

  /* ==================================================================
     6. BREAKPOINTS - documented for reference (use directly in @media)
     ================================================================== */

  /* mobile     ≤ 600 px  */
  /* tablet     ≤ 1023 px */
  /* desktop    ≤ 1240 px */
  /* wide      > 1240 px */

  /* ==================================================================
     7. Z-INDEX scale
     ================================================================== */

  --dl-z-base:     1;
  --dl-z-sticky:   100;
  --dl-z-header:   200;
  --dl-z-dropdown: 300;
  --dl-z-modal:    1000;
  --dl-z-tooltip:  9999;
  --dl-z-toast:    10000;

  /* ==================================================================
     8. MOTION
     ================================================================== */

  --dl-duration-fast: 150ms;
  --dl-duration-base: 250ms;
  --dl-duration-slow: 400ms;
  --dl-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --dl-ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dl-ease-out:      cubic-bezier(0, 0, 0.2, 1);

  /* ==================================================================
     9. COLOR-SCHEME LOCK (light only; matches locked palette)
     ================================================================== */

  color-scheme: light only;
}

html { color-scheme: light only; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* === dl-reset.css (4,755 bytes) === */
/*
  DigitallyLearn Reset v2
  Modern minimal reset + targeted Astra parent-theme de-leak.
  Loaded after dl-tokens.css, before dl-base.css and component CSS.

  Goal: replace the !important hammer-chains by getting the cascade
  right at the foundation level. Astra parent CSS still loads (per
  Phase 2 we'll dequeue most of it). What we do here is preempt its
  defaults at the body/element level so child rules don't need to
  fight back with !important.
*/

/* ====================================================================
   1. BOX MODEL + BASE
   ==================================================================== */

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

html {
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

html, body { margin: 0; padding: 0; }

/* Defensive horizontal-overflow guard. Anything that exceeds viewport width
   stops scroll-bouncing the page sideways on mobile (key when a wide grid
   or a long inline element accidentally pushes past the viewport). */
html { overflow-x: hidden; }
body { overflow-x: hidden; }

body {
  background: var(--dl-paper-warm);
  color: var(--dl-ink-soft);
  font-family: var(--dl-font-body);
  font-size: var(--dl-text-md);
  line-height: var(--dl-lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ====================================================================
   2. MEDIA SAFETY
   ==================================================================== */

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

img { font-style: italic; vertical-align: middle; }

/* ====================================================================
   3. FORM RESET (just the inheritance, components style the rest)
   ==================================================================== */

button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: 0; padding: 0; }
[disabled], [aria-disabled="true"] { cursor: not-allowed; }

/* ====================================================================
   4. ASTRA DE-LEAK - the surgical fixes that replace 50% of !important
   ==================================================================== */

/* Astra wraps the single-post article in a card with shadow + border.
   Editorial layout is a single canvas, no card. Flat to page bg. */
body.dl-modern .ast-article-single,
body.dl-modern .ast-article-post,
body.dl-modern .ast-article-inner {
  background: transparent;
  box-shadow: none;
  border: 0;
}

/* Astra applies display: flex; flex-direction: column-reverse to
   .ast-container in some breakpoints. Reset to standard block flow.
   This is the long-known three-part fix from CLAUDE.md, hoisted to
   the foundation level. */
body.dl-modern .ast-container {
  display: block;
  flex-direction: row;
  float: none;
}

/* Hide Astra masthead/colophon in case anything brings them back
   (third-party plugin, customizer). Replaces the inline-style band
   that lives in dl-modern-loader.php today. */
body.dl-modern #masthead,
body.dl-modern #colophon,
body.dl-modern .ast-mobile-header-wrap {
  display: none;
}

/* Astra entry-content max-width fights with our container system.
   Let our .dl-container rules drive width. */
body.dl-modern .entry-content > * {
  max-width: 100%;
}

/* Astra `.entry-content img` defaults to inline-block; we want them
   to behave as block-level elements scaling to their parent. */
body.dl-modern .entry-content img {
  height: auto;
}

/* ====================================================================
   5. ACCESSIBILITY HELPERS
   ==================================================================== */

/* Force visible focus on keyboard nav; suppress on mouse via :focus-visible */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--dl-accent);
  outline-offset: 2px;
  border-radius: var(--dl-radius-sm);
}

/* Skip-link helper - make screen-reader skip-links visible on focus */
.dl-sr-only:not(:focus):not(:active) {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ====================================================================
   6. RECAPTCHA BADGE - site footer carries the required attribution
   ==================================================================== */

.grecaptcha-badge { visibility: hidden; }

/* === dl-base.css (6,736 bytes) === */
/*
  DigitallyLearn Base Typography v2
  Default styles for prose elements (h1-h6, p, a, lists, blockquote,
  code, hr, etc.). Uses tokens from dl-tokens.css. Loaded after
  dl-reset.css.

  Components and pages override these with class-scoped rules. We
  avoid !important here so component-level rules win naturally.
*/

/* ====================================================================
   1. HEADINGS
   ==================================================================== */

body.dl-modern h1,
body.dl-modern h2,
body.dl-modern h3,
body.dl-modern h4,
body.dl-modern h5,
body.dl-modern h6 {
  font-family: var(--dl-font-display);
  color: var(--dl-ink);
  line-height: var(--dl-lh-tight);
  margin: 0 0 var(--dl-space-3);
  letter-spacing: var(--dl-tracking-snug);
  font-weight: 600;
}

body.dl-modern h1 {
  font-size: clamp(28px, 4vw, var(--dl-text-5xl));
  letter-spacing: var(--dl-tracking-tight);
}
body.dl-modern h2 { font-size: var(--dl-text-2xl); line-height: var(--dl-lh-snug); }
body.dl-modern h3 { font-size: var(--dl-text-xl); }
body.dl-modern h4 { font-size: var(--dl-text-lg); }
body.dl-modern h5 { font-size: var(--dl-text-base); }
body.dl-modern h6 { font-size: var(--dl-text-sm); text-transform: uppercase; letter-spacing: var(--dl-tracking-wider); }

/* H1 in entry-content (post titles via theme) gets editorial spacing */
body.dl-modern.single-post h1.entry-title,
body.dl-modern.archive   h1.page-title,
body.dl-modern.search    h1.page-title,
body.dl-modern.error404  h1.page-title,
body.dl-modern.page:not(.home) h1.entry-title {
  font-size: clamp(28px, 4vw, var(--dl-text-5xl));
  line-height: var(--dl-lh-tight);
  letter-spacing: var(--dl-tracking-tight);
  margin-bottom: var(--dl-space-4);
}

/* ====================================================================
   2. PARAGRAPHS, LINKS, INLINE
   ==================================================================== */

body.dl-modern p {
  margin: 0 0 var(--dl-space-4);
  line-height: var(--dl-lh-relaxed);
}

/* Link color: scoped to prose containers so header/footer/nav don't all turn
   crimson. Header, footer, sidebar, breadcrumbs etc. style their own anchors. */
body.dl-modern .entry-content a,
body.dl-modern .dl-prose a {
  color: var(--dl-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color var(--dl-duration-fast) var(--dl-ease);
}
body.dl-modern .entry-content a:hover,
body.dl-modern .dl-prose a:hover { color: var(--dl-accent-hover); }
body.dl-modern .entry-content a:focus-visible,
body.dl-modern .dl-prose a:focus-visible { color: var(--dl-accent-hover); }

body.dl-modern strong,
body.dl-modern b {
  font-weight: 600;
  color: var(--dl-ink);
}
body.dl-modern em,
body.dl-modern i { font-style: italic; }
body.dl-modern small { font-size: var(--dl-text-sm); }
body.dl-modern mark {
  background: var(--dl-accent-soft);
  color: var(--dl-ink);
  padding: 0 3px;
  border-radius: var(--dl-radius-sm);
}

/* ====================================================================
   3. LISTS
   ==================================================================== */

body.dl-modern ul,
body.dl-modern ol {
  margin: 0 0 var(--dl-space-4);
  padding-left: var(--dl-space-6);
  line-height: var(--dl-lh-relaxed);
}
body.dl-modern li { margin-bottom: var(--dl-space-2); }
body.dl-modern li > ul,
body.dl-modern li > ol { margin: var(--dl-space-2) 0; }
body.dl-modern dl { margin: 0 0 var(--dl-space-4); }
body.dl-modern dt { font-weight: 600; color: var(--dl-ink); }
body.dl-modern dd { margin: 0 0 var(--dl-space-2); color: var(--dl-ink-mute); }

/* ====================================================================
   4. BLOCKQUOTE, HR
   ==================================================================== */

body.dl-modern blockquote {
  border-left: 3px solid var(--dl-accent);
  padding: var(--dl-space-1) var(--dl-space-5);
  margin: var(--dl-space-6) 0;
  font-style: italic;
  color: rgba(10,10,10,0.78);
  background: var(--dl-accent-soft);
}
body.dl-modern blockquote p:last-child { margin-bottom: 0; }
body.dl-modern blockquote cite {
  display: block;
  margin-top: var(--dl-space-2);
  font-size: var(--dl-text-sm);
  color: var(--dl-ink-mute);
  font-style: normal;
}

body.dl-modern hr {
  border: none;
  border-top: 1px solid var(--dl-line);
  margin: var(--dl-space-8) 0;
}

/* ====================================================================
   5. CODE
   ==================================================================== */

body.dl-modern code,
body.dl-modern kbd,
body.dl-modern samp {
  font-family: var(--dl-font-mono);
  font-size: 0.9em;
  background: var(--dl-paper-soft);
  padding: 1px 6px;
  border-radius: var(--dl-radius-sm);
  border: var(--dl-border-thin);
}
body.dl-modern pre {
  background: var(--dl-paper-soft);
  border: var(--dl-border-thin);
  padding: var(--dl-space-4);
  border-radius: var(--dl-radius-md);
  overflow-x: auto;
  font-size: var(--dl-text-sm);
  line-height: var(--dl-lh-base);
}
body.dl-modern pre code { border: 0; padding: 0; background: transparent; }

/* ====================================================================
   6. TABLES - base styling; pages/components can extend
   ==================================================================== */

body.dl-modern table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--dl-space-6) 0;
  font-size: var(--dl-text-base);
}
body.dl-modern th,
body.dl-modern td {
  text-align: left;
  padding: var(--dl-space-3) var(--dl-space-4);
  border-bottom: var(--dl-border-thin);
  vertical-align: top;
}
body.dl-modern thead th {
  background: var(--dl-paper-soft);
  border-bottom: 2px solid var(--dl-line-strong);
  font-weight: 600;
  color: var(--dl-ink);
}
/* Comparison-table header strip: dark bg + cream text for ALL header cells.
   After the global design flip, 1-id rules (#dl-main .article-prose .dl-comparison-table th)
   forced color:white over the base rule, producing invisible WHITE-ON-WHITE headers
   (Haemophilia A / Haemophilia B unreadable). Double-id (2 ids) beats them and the
   first-child red rule, restoring the brand dark strip. 2026-05-30. */
#dl-main#dl-main .dl-comparison-table thead th,
#dl-main#dl-main .dl-comparison-table thead th:first-child {
  background: #1a1714 !important;
  color: #f6f1e8 !important;
}
body.dl-modern tbody tr:hover { background: var(--dl-paper-soft); }

/* ====================================================================
   7. FIGURES - minimal default; per-component overrides build on this
   ==================================================================== */

body.dl-modern figure {
  margin: var(--dl-space-6) 0;
}
body.dl-modern figcaption {
  font-size: var(--dl-text-sm);
  color: var(--dl-ink-mute);
  margin-top: var(--dl-space-2);
  line-height: var(--dl-lh-base);
}

/* ====================================================================
   8. SELECTION
   ==================================================================== */

body.dl-modern ::selection {
  background: var(--dl-accent);
  color: var(--dl-paper);
}

/* === dl-layout.css (15,142 bytes) === */
/*
  DigitallyLearn Layout v2
  Container, grid, and layout utilities. Loaded after dl-base.css.

  Containers anchor on the design tokens. Pages and components compose
  by adding a single class instead of redefining widths each time.
*/

/* ====================================================================
   1. CONTAINERS - width-bounded, centered, with consistent gutters
   ==================================================================== */

.dl-container {
  width: 100%;
  max-width: var(--dl-container-wide);
  margin-inline: auto;
  padding-inline: var(--dl-space-5);
}

.dl-container--narrow  { max-width: var(--dl-container-narrow); }
.dl-container--medium  { max-width: var(--dl-container-medium); }
.dl-container--reading { max-width: var(--dl-container-reading); }
.dl-container--wide    { max-width: var(--dl-container-wide); }

@media (max-width: 600px) {
  .dl-container { padding-inline: var(--dl-space-4); }
}

/* Astra container compatibility. Astra's parent main.min.css is now
   dequeued sitewide; its `.ast-container` / `.ast-article-single` /
   `.entry-content` width rules went with it. Reproduce the essentials
   here so layouts that still rely on Astra's template markup keep
   their column width. Locked 2026-05-11. */
body.dl-modern .ast-container {
  width: 100%;
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
body.dl-modern .ast-article-single {
  background: transparent;
  padding: 3em 0;
  margin-bottom: 1.5em;
  box-sizing: border-box;
}

/* Screen-reader skip link - hidden visually but reachable on TAB.
   Astra's parent CSS handled this; our dequeue removed it. Restore
   here. 2026-05-11. */
body.dl-modern .skip-link.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;
}
body.dl-modern .skip-link.screen-reader-text:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  clip: auto;
  background: var(--dl-ink, #1a1714);
  color: #ffffff;
  z-index: 999999;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
}
body.dl-modern .entry-content {
  width: 100%;
  max-width: 100%;
}

/* Below 1024 the boxed 850 container becomes a fluid full-width
   container with comfortable side padding. The previous rule fired
   at 1024 inclusive, which dropped the cap for tablet-landscape (1024)
   and exposed a width mismatch between blog (1024) and CA (still 850
   via its own override). Tighten to 1023 so 1024 keeps the 850 cap. */
@media (max-width: 1023px) {
  body.dl-modern .ast-container { max-width: 100%; padding-left: 24px; padding-right: 24px; }
  body.dl-modern .ast-article-single { padding: 2.5em 1.5em; }
}
@media (max-width: 600px) {
  body.dl-modern .ast-container { padding-left: 16px; padding-right: 16px; }
  body.dl-modern .ast-article-single { padding: 1.5em 1em; }
}

/* ====================================================================
   2. STACK - consistent vertical rhythm; child margins controlled
       by parent so siblings don't fight margin-collapse
   ==================================================================== */

.dl-stack > * + *      { margin-top: var(--dl-space-4); }
.dl-stack--xs > * + *  { margin-top: var(--dl-space-2); }
.dl-stack--sm > * + *  { margin-top: var(--dl-space-3); }
.dl-stack--lg > * + *  { margin-top: var(--dl-space-8); }
.dl-stack--xl > * + *  { margin-top: var(--dl-space-12); }

/* ====================================================================
   3. CLUSTER - horizontal flex with gap; wraps on narrow viewports
   ==================================================================== */

.dl-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dl-space-3);
  align-items: center;
}
.dl-cluster--start  { justify-content: flex-start; }
.dl-cluster--center { justify-content: center; }
.dl-cluster--end    { justify-content: flex-end; }
.dl-cluster--spread { justify-content: space-between; }

/* ====================================================================
   4. GRID - content-aware grid with explicit-track helpers
   ==================================================================== */

.dl-grid {
  display: grid;
  gap: var(--dl-space-6);
}
.dl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.dl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.dl-grid--4 { grid-template-columns: repeat(4, 1fr); }
.dl-grid--auto-fit-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.dl-grid--auto-fit-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

@media (max-width: 1023px) {
  .dl-grid--3, .dl-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .dl-grid--2, .dl-grid--3, .dl-grid--4 { grid-template-columns: 1fr; }
}

/* ====================================================================
   5. SECTIONS - consistent vertical padding for site sections
   ==================================================================== */

.dl-section {
  padding-block: var(--dl-space-12);
}
.dl-section--sm { padding-block: var(--dl-space-8); }
.dl-section--lg { padding-block: var(--dl-space-20); }

.dl-section-band--soft { background: var(--dl-paper-soft); }
.dl-section-band--warm { background: var(--dl-paper-warm); }
.dl-section-band--dark {
  background: var(--dl-bg-dark);
  color: var(--dl-on-dark);
}
.dl-section-band--accent {
  background: var(--dl-accent);
  color: var(--dl-paper);
}

/* ====================================================================
   6. UTILITY CLASSES
   ==================================================================== */

.dl-text-center { text-align: center; }
.dl-text-left   { text-align: left; }
.dl-text-right  { text-align: right; }

.dl-text-mute   { color: var(--dl-ink-mute); }
.dl-text-faint  { color: var(--dl-ink-faint); }
.dl-text-accent { color: var(--dl-accent); }

.dl-uppercase { text-transform: uppercase; letter-spacing: var(--dl-tracking-wider); font-size: var(--dl-text-xs); font-weight: 600; }

.dl-mt-0 { margin-top: 0; }
.dl-mb-0 { margin-bottom: 0; }
.dl-my-0 { margin-block: 0; }

.dl-hide-mobile  { }
.dl-hide-desktop { }
@media (max-width: 600px)  { .dl-hide-mobile  { display: none; } }
@media (min-width: 601px)  { .dl-hide-desktop { display: none; } }

/* ====================================================================
   7. FULL-WIDTH BLEED - let figures break out of narrow article column
   Used by .alignfull / .alignwide in Gutenberg blocks and by figures
   that want to span the full content area.
   ==================================================================== */

.dl-bleed-wide {
  width: calc(100% + 2 * var(--dl-space-8));
  margin-inline: calc(-1 * var(--dl-space-8));
  max-width: none;
}
@media (max-width: 720px) {
  .dl-bleed-wide {
    width: calc(100% + 2 * var(--dl-space-4));
    margin-inline: calc(-1 * var(--dl-space-4));
  }
}

/* ====================================================================
   8. ASPECT-RATIO box - image / video frames
   ==================================================================== */

.dl-ratio-16x9 { aspect-ratio: 16 / 9; }
.dl-ratio-4x3  { aspect-ratio: 4 / 3; }
.dl-ratio-1x1  { aspect-ratio: 1 / 1; }
.dl-ratio-21x9 { aspect-ratio: 21 / 9; }


/* ====================================================================
   9. 404 + WordPress default search-form fallback
   When users land on a 404 or any page where Astra's default
   `get_search_form()` is called (e.g. the 404.php template), this
   minimal styling makes the input + button look on-brand instead of
   raw browser default. The previous Astra parent CSS handled this;
   our dequeue removed it. Locked 2026-05-11.
   ==================================================================== */
body.dl-modern .search-form,
body.dl-modern form[role="search"] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 16px 0 32px;
}
body.dl-modern .search-form label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex: 1;
    min-width: 240px;
}
body.dl-modern .search-form label > span,
body.dl-modern .search-form .search-field {
    line-height: 1.4;
}
body.dl-modern .search-form .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;
}
body.dl-modern .search-form input[type="search"],
body.dl-modern .search-form .search-field {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--dl-ink, #1a1714);
    background: #fff;
    border: 1px solid var(--dl-rule-strong, rgba(26,23,20,0.22));
    border-radius: 4px;
    line-height: 1.4;
}
body.dl-modern .search-form input[type="search"]:focus,
body.dl-modern .search-form .search-field:focus {
    outline: 2px solid var(--dl-accent, #E63946);
    outline-offset: 1px;
    border-color: var(--dl-accent, #E63946);
}
body.dl-modern .search-form input[type="submit"],
body.dl-modern .search-form .search-submit {
    min-height: 44px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--green-deep,#E8352B) 0%, var(--green,#E8352B) 100%);
    border: 1px solid var(--green-deep,#E8352B);
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.3;
    box-shadow: 0 2px 6px rgba(232, 53, 43, 0.22);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
body.dl-modern .search-form input[type="submit"]:hover,
body.dl-modern .search-form .search-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(232, 53, 43, 0.30);
    color: #FFFFFF;
    background: linear-gradient(135deg, var(--green-deep,#E8352B) 0%, var(--green,#E8352B) 100%);
    border-color: var(--green-deep,#E8352B);
}
body.dl-modern .search-form input[type="search"],
body.dl-modern .search-form .search-field {
    min-height: 44px;
}
/* Astra's get_search_form() filter injects a magnifier-icon <button
   class="search-submit ast-search-submit"> INSIDE the label, in
   addition to the canonical <input type="submit"> that WP outputs.
   Since Astra's parent CSS is now dequeued, the button renders as
   a tiny unstyled black square. Hide it; the input is the visible
   Search button. */
body.dl-modern .search-form button.search-submit,
body.dl-modern .search-form .ast-search-submit {
    display: none;
}

/* 404 page wrapper - give it enough breathing room so the
   content-to-footer gap (filled by body bg) doesn't look like a band. */
body.error404 .entry-content,
body.error404 .ast-article-single,
body.error404 main {
    min-height: 50vh;
}


/* ====================================================================
   10. WordPress comment form fallback (post comments + reply form)
   Astra parent CSS used to lay out the comment form via .ast-row /
   .ast-grid-common-col / .ast-width-lg-33 grid classes and override
   the legacy <textarea cols="45"> width. Our dequeue dropped that.
   These rules give the form a clean column-stacked layout that
   widens to 3 columns on tablet+. Locked 2026-05-11.
   ==================================================================== */
body.dl-modern #comments,
body.dl-modern #respond,
body.dl-modern .comment-form {
    max-width: 100%;
    box-sizing: border-box;
}
body.dl-modern .comment-form {
    margin: 32px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
body.dl-modern .comment-form .comment-notes {
    font-size: 13px;
    color: var(--dl-text-muted, #4a443c);
    margin: 0;
}
body.dl-modern .comment-form .comment-form-comment,
body.dl-modern .comment-form fieldset.comment-form-comment {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}
body.dl-modern .comment-form .comment-form-comment > .comment-form-textarea {
    padding: 0;
}
body.dl-modern .comment-form textarea,
body.dl-modern .comment-form #comment {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 15px;
    font-family: inherit;
    color: var(--dl-ink, #1a1714);
    background: #fff;
    border: 1px solid var(--dl-rule-strong, rgba(26,23,20,0.22));
    border-radius: 4px;
    line-height: 1.55;
    min-height: 140px;
    resize: vertical;
}
body.dl-modern .comment-form input[type="text"],
body.dl-modern .comment-form input[type="email"],
body.dl-modern .comment-form input[type="url"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--dl-ink, #1a1714);
    background: #fff;
    border: 1px solid var(--dl-rule-strong, rgba(26,23,20,0.22));
    border-radius: 4px;
    line-height: 1.4;
}
body.dl-modern .comment-form textarea:focus,
body.dl-modern .comment-form input:focus {
    outline: 2px solid var(--dl-accent, #E63946);
    outline-offset: 1px;
    border-color: var(--dl-accent, #E63946);
}
/* Astra wraps each input in <p class="comment-form-author"> with
   .ast-width-lg-33 grid hints; reset those wrappers to plain blocks. */
body.dl-modern .comment-form .comment-form-author,
body.dl-modern .comment-form .comment-form-email,
body.dl-modern .comment-form .comment-form-url {
    width: 100%;
    margin: 0;
    padding: 0;
    float: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.dl-modern .comment-form .ast-comment-formwrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    margin: 0;
}
@media (min-width: 720px) {
    body.dl-modern .comment-form .ast-comment-formwrap {
        grid-template-columns: repeat(3, 1fr);
    }
}
body.dl-modern .comment-form .form-submit {
    margin: 0;
}
body.dl-modern .comment-form input[type="submit"],
body.dl-modern .comment-form .submit {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    color: #fff;
    background: var(--dl-accent, #E63946);
    border: 1px solid var(--dl-accent, #E63946);
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.02em;
}
body.dl-modern .comment-form input[type="submit"]:hover,
body.dl-modern .comment-form .submit:hover {
    background: var(--dl-accent-hover, #a02b1f);
    border-color: var(--dl-accent-hover, #a02b1f);
}
/* Comment list itself */
body.dl-modern .comments-area .comment-list {
    list-style: none;
    margin: 24px 0;
    padding: 0;
}
body.dl-modern .comments-area .comment {
    margin: 0 0 24px;
    padding: 18px;
    background: rgba(247, 245, 240, 0.5);
    border: 1px solid var(--dl-rule, rgba(26,23,20,0.12));
    border-radius: 6px;
}
body.dl-modern .comments-title,
body.dl-modern .comment-reply-title {
    font-family: var(--dl-font-display, Plus Jakarta Sans, serif);
    font-size: 24px;
    font-weight: 700;
    color: var(--dl-ink, #1a1714);
    margin: 32px 0 16px;
}

/* === dl-design-system.css (51,521 bytes) === */
/*
  DigitallyLearn Design System v1
  Loaded site-wide. Single source of truth for tokens + base components.
  Spec: astra-child/DESIGN_SYSTEM.md
*/

/* ========================================================================
   0. COLOR-SCHEME LOCK
   Force light scheme so OS dark-mode and Dark-Reader extensions don't
   invert our editorial palette (which would hide article body text on
   dark backgrounds). Site is intentionally light-mode-only.
   ======================================================================== */
:root,
html {
  color-scheme: light only;
}

html, body {
  background-color: var(--dl-on-dark);
  color: var(--dl-ink);
  /* Canonical Inter stack on <body> per feedback_font_canonical_stacks.md.
   * Normalises away the Astra Customizer-injected "Segoe UI, Roboto"
   * extras so the runtime probe returns exactly 2 unique font-family
   * values across the DOM (Inter for body, Plus Jakarta Sans for headings).
   * !important is necessary because Astra outputs Customizer typography
   * as inline <style> in <head>, which beats normal-cascade external CSS.
   * Locked 2026-05-17 evening after live-DOM probe surfaced 3 stacks. */
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
}

body.dl-modern,
body.dl-modern .site,
body.dl-modern #page {
  background-color: var(--dl-on-dark);
}

/* Astra single-post container must stay white-on-white at all times */
body.dl-modern .ast-article-single,
body.dl-modern .entry-content,
body.dl-modern .entry-content > *,
body.dl-modern .ast-container {
  color: var(--dl-ink);
}
body.dl-modern .ast-article-single {
  background: var(--dl-on-dark);     /* match page bg - single canvas, no card */
  box-shadow: none;
  border: none;
}
/* Astra puts a border-radius + shadow on archive posts; flatten those too */
body.dl-modern .ast-article-post,
body.dl-modern .ast-article-inner {
  background: var(--dl-on-dark);
  box-shadow: none;
  border-color: rgba(26,23,20,0.12);
}

/* ========================================================================
   0.1 GLOBAL EDITORIAL OVERRIDES
   Patches Astra defaults that leak through on non-KB templates (404,
   archives, search, regular blog posts) so the editorial palette and
   responsive H1 scale stay consistent across every page type.
   ======================================================================== */

/* 404 + non-KB H1 colour: pin to editorial near-black (was Astra slate #0f172a) */
body.error404 .page-title,
body.search .page-title,
body.archive .page-title,
body.dl-modern .ast-archive-description .page-title,
body.dl-modern h1.entry-title,
body.dl-modern h1.page-title {
  color: var(--dl-ink);
  font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif;
}

/* Responsive H1 scale for non-KB, non-home templates.
   28px on phones → 48px on wide desktop, smoothly via clamp(). */
body.dl-modern.single-post h1.entry-title,
body.dl-modern.archive h1.page-title,
body.dl-modern.search h1.page-title,
body.dl-modern.error404 h1.page-title,
body.dl-modern.page:not(.home) h1.entry-title {
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}

/* Hide Google reCAPTCHA floating badge - required attribution is in the
   privacy policy + footer (compliant with Google's "hide if attribution
   present" guidance). */
.grecaptcha-badge {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ========================================================================
   0.3 CONTRAST CRISIS REPAIRS
   Astra and theme leak cream/very-pale-gold text on cream backgrounds in
   several spots a user actually reads: comment heading, related-articles
   heading, 404 body text, search no-results body. Force ink colour with
   high specificity. Confirmed bug from user report 2026-05-06.
   ======================================================================== */

/* Comment section heading ("Leave a Comment" / reply title). Astra applies
   a gold-on-cream colour on these by default in some templates. */
body.dl-modern .comments-title,
body.dl-modern .comment-reply-title,
body.dl-modern h2.comments-title,
body.dl-modern h3.comment-reply-title,
body.dl-modern #reply-title,
body.dl-modern #comments h2,
body.dl-modern #comments h3 {
  color: var(--dl-ink);
  font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px);
}

/* "Related Articles" / "Related Posts" heading - Astra default heading
   variant inherits a near-cream tone on cream paper. */
body.dl-modern .ast-related-posts-title-section h2,
body.dl-modern .ast-related-posts-title,
body.dl-modern .ast-blog-related-section h2,
body.dl-modern .ast-related-section h2,
body.dl-modern .related-posts h2,
body.dl-modern .related-articles h2,
body.dl-modern .ast-related-post-title-section h2,
body.dl-modern .post-related h2 {
  color: var(--dl-ink);
  font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif;
  font-weight: 600;
}

/* 404 page body text + search no-results body - Astra .page-content
   inherits a very pale tone on cream. Pin to readable ink. */
body.dl-modern.error404 .page-content p,
body.dl-modern.error404 .page-content,
body.dl-modern.error404 .ast-404-layout-1 .page-sub-title,
body.dl-modern.error404 .ast-404-layout-1 p,
body.dl-modern.search-no-results .page-content p,
body.dl-modern.search-no-results .page-content,
body.dl-modern.search-no-results p {
  color: var(--dl-ink);
}

/* Hide Astra's built-in related-posts section site-wide. We render our
   own dl-related ("Read next") via inc/dl-article-tail.php. Astra was
   stacking a duplicate "Related Articles for UPSC - IAS" white card
   ABOVE ours, hiding our terracotta-styled section entirely (user
   report 2026-05-06). Hiding by class wins because Astra's wrapper has
   a fixed class. */
body.dl-modern .ast-single-related-posts,
body.dl-modern .ast-single-related-posts-container,
body.dl-modern .ast-related-posts-title-section,
body.dl-modern .ast-related-posts-section,
body.dl-modern .ast-related-posts {
  display: none;
}

/* Comments-area + Post Comment submit button colour-match.
   Astra renders comments-area as a white card and the submit button as
   `#de3000` Astra-red - both off-palette. Match cream + terracotta. */
body.dl-modern .comments-area,
body.dl-modern #comments,
body.dl-modern .comment-respond,
body.dl-modern .comments-title-wrap,
body.dl-modern .comment-list,
body.dl-modern .comment-form {
  background: var(--dl-on-dark);
  box-shadow: none;
  border: none;
}
/* Form inputs keep a light fill for input affordance but with cream-card
   tint instead of pure white, plus terracotta focus ring. */
body.dl-modern .comment-form input[type="text"],
body.dl-modern .comment-form input[type="email"],
body.dl-modern .comment-form input[type="url"],
body.dl-modern .comment-form textarea {
  background: var(--dl-paper-soft);
  border: 1px solid rgba(26,23,20,0.18);
  border-radius: 4px;
  color: var(--dl-ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  padding: 10px 12px;
}
body.dl-modern .comment-form input:focus,
body.dl-modern .comment-form textarea:focus {
  border-color: var(--dl-accent);
  outline: 3px solid rgba(230, 57, 70, 0.15);
  outline-offset: 0;
}
/* Post Comment submit button - restyle to brand terracotta with cream text. */
body.dl-modern .comment-form input[type="submit"],
body.dl-modern .comment-form button[type="submit"],
body.dl-modern #submit,
body.dl-modern input#submit,
body.dl-modern .submit {
  background: var(--dl-accent);
  color: var(--dl-on-dark);
  border: 1px solid var(--dl-accent);
  border-radius: 4px;
  padding: 12px 28px;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  transition: background 150ms ease, transform 80ms ease, box-shadow 150ms ease;
  box-shadow: none;
}
body.dl-modern .comment-form input[type="submit"]:hover,
body.dl-modern .comment-form button[type="submit"]:hover,
body.dl-modern #submit:hover {
  background: var(--dl-accent-hover);
  border-color: var(--dl-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(230, 57, 70, 0.25);
}

/* 404 + search-no-results inner containers were rendering as a WHITE
   card against the cream page bg - visible mismatch. Pin every wrapper
   to the same cream as the page bg so the layout reads as one
   continuous editorial canvas (user report 2026-05-06). The actual
   white-bg element is <section class="error-404 not-found"> for 404 and
   <section class="no-results not-found"> for empty search. */
body.dl-modern.error404 .error-404,
body.dl-modern.error404 .not-found,
body.dl-modern.error404 section.error-404,
body.dl-modern.error404 .ast-article-single,
body.dl-modern.error404 .ast-no-results,
body.dl-modern.error404 article,
body.dl-modern.error404 .site-content,
body.dl-modern.error404 #primary,
body.dl-modern.error404 .ast-container,
body.dl-modern.search-no-results .no-results,
body.dl-modern.search-no-results .not-found,
body.dl-modern.search-no-results section.no-results,
body.dl-modern.search-no-results .ast-article-single,
body.dl-modern.search-no-results .ast-no-results,
body.dl-modern.search-no-results article,
body.dl-modern.search-no-results .site-content,
body.dl-modern.search-no-results #primary,
body.dl-modern.search-no-results .ast-container {
  background: var(--dl-on-dark);
  box-shadow: none;
  border: none;
}

/* Single-post page bottom "Leave a Comment" form helper text + labels
   need readable contrast too. */
body.dl-modern .comment-form .comment-notes,
body.dl-modern .comment-form label,
body.dl-modern .comment-respond .comment-notes,
body.dl-modern .comment-respond p {
  color: var(--dl-ink);
}

/* ========================================================================
   0.35 BRAND-AWARE TEXT SELECTION
   Browsers default to a saturated blue (or saffron-red on some Windows
   themes) for selected text. On our cream paper this looks alarming -
   the user reported "Read next" appearing as white-on-red after they
   accidentally double-clicked. Force a calm warm-tan highlight.
   ======================================================================== */
::selection {
  background: #efe7d6;     /* paper-deep - calm cream highlight */
  color: var(--dl-ink);
}
::-moz-selection {
  background: #efe7d6;
  color: var(--dl-ink);
}

/* ========================================================================
   0.4 LINK UNDERLINE CLEANUP
   Astra defaults underline every <a> inside .entry-content. That floods
   the article with terracotta-underlined TOC links, byline name links,
   related-posts thumbnails, and share-bar entries - visually noisy and
   makes the layout look like a 2015 WP blog. Remove underlines from
   structural links (TOC, byline, related cards, share buttons, breadcrumb)
   while keeping underlines on inline body-content paragraph/list links
   for accessibility. User report 2026-05-06.
   ======================================================================== */
/* Higher-specificity selectors needed because Astra's `.entry-content a`
   wins source-order against the same-specificity `.dl-toc a`. We prefix
   with `.entry-content` and `.ast-article-single` where TOC + byline
   actually render. */
body.dl-modern .dl-toc a,
body.dl-modern .dl-toc-list a,
body.dl-modern .dl-toc-summary,
body.dl-modern .entry-content .dl-toc a,
body.dl-modern .entry-content .dl-toc-list a,
body.dl-modern .ast-article-single .dl-toc a,
body.dl-modern .ast-article-single .dl-toc-list a,
body.dl-modern .dl-byline a,
body.dl-modern .dl-byline a *,
body.dl-modern .dl-byline-avatar,
body.dl-modern .dl-byline-name,
body.dl-modern .dl-byline-name a,
body.dl-modern .ast-article-single .dl-byline a,
body.dl-modern .ast-article-single .dl-byline-avatar,
body.dl-modern .entry-content .dl-byline a,
body.dl-modern .dl-related-item,
body.dl-modern .dl-related-item a,
body.dl-modern .dl-related-item h4 a,
body.dl-modern .dl-related a,
body.dl-modern .entry-content .dl-related a,
body.dl-modern .ast-article-single .dl-related a,
body.dl-modern .dl-share-btn,
body.dl-modern .dl-share-btn:hover,
body.dl-modern .dl-breadcrumb-band a,
body.dl-modern .dl-newsletter-band a,
body.dl-modern .dl-kb-widget a,
body.dl-modern .dl-article-tail a,
body.dl-modern .ast-related-post-title a,
body.dl-modern .ast-related-post a {
  text-decoration: none;
  border-bottom: none;
  background-image: none;     /* defeat Astra's gradient-underline trick */
}
/* Hover treatment for these structural links - colour change instead of
   underline so the affordance still reads as "link". */
body.dl-modern .dl-toc a:hover,
body.dl-modern .dl-byline a:hover,
body.dl-modern .dl-related-item:hover h4 a {
  color: var(--dl-accent);
  text-decoration: none;
}

/* ========================================================================
   0.2 NEWSLETTER BAND POLISH
   Input + Subscribe button must be a matched pair: same height, same
   radius, same internal padding rhythm. Placeholder text needs proper
   contrast against the dark input background.
   ======================================================================== */
body.dl-modern .dl-newsletter-band input[type="email"],
body.dl-modern .dl-newsletter-form input[type="email"] {
  height: 48px;
  min-height: 48px;
  padding: 0 18px;
  background: var(--dl-ink);
  border: 1px solid #4a3a30;
  border-radius: 8px;
  color: var(--dl-on-dark);
  font-size: 16px;
  line-height: 46px;          /* matches inner-height (height − borders) so caret centres */
  font-family: var(--dl-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  box-sizing: border-box;
  width: 100%;
  display: block;
  flex: 0 0 auto;             /* prevent column-flex parent from shrinking it */
}
body.dl-modern .dl-newsletter-band input[type="email"]:focus,
body.dl-modern .dl-newsletter-band input[type="email"]:focus-visible {
  outline: none;
  border: 1px solid var(--dl-accent);
  box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.25);
}
body.dl-modern .dl-newsletter-band input[type="email"]::placeholder {
  color: #bfb4a3;
  opacity: 1;
}
/* Subscribe button INVERTED for the terracotta newsletter band: cream
   filled button with deep-ink text. Previous design had terracotta-on-
   terracotta = invisible button rectangle (user report 2026-05-06). The
   inverted treatment matches the Anthropic Ink & Paper spec (Direction A,
   "ink-on-cream Subscribe button on terracotta band"). */
body.dl-modern .dl-newsletter-band button[type="submit"] {
  height: 48px;
  padding: 0 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--dl-on-dark);       /* cream paper fill */
  color: var(--dl-ink);            /* deep ink text */
  border: 1px solid var(--dl-on-dark);
  transition: background 150ms ease, transform 80ms ease, box-shadow 150ms ease;
  box-sizing: border-box;
  width: 100%;
  cursor: pointer;
}
body.dl-modern .dl-newsletter-band button[type="submit"]:hover {
  background: var(--dl-paper-soft);
  color: var(--dl-ink);
  border-color: var(--dl-paper-soft);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
body.dl-modern .dl-newsletter-band button[type="submit"]:focus-visible {
  outline: 3px solid #d4a373;     /* warm tan outline on terracotta */
  outline-offset: 3px;
}
body.dl-modern .dl-newsletter-band button[type="submit"]:active {
  transform: translateY(0);
  background: #efe7d6;
  color: var(--dl-ink);
}

/* Newsletter band: center-aligned typography so the H2, sub-paragraph,
   and trust line share the same visual axis as the centred form below. */
body.dl-modern .dl-newsletter-band .dl-container {
  text-align: center;
}
body.dl-modern .dl-newsletter-band h2 {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
body.dl-modern .dl-newsletter-band p {
  max-width: 560px;
  margin: 12px auto 28px;
  font-size: 15px;
  line-height: 1.55;
  color: #bfb4a3;
}
body.dl-modern .dl-newsletter-band form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
  margin: 0 auto;
  text-align: left;             /* keeps input placeholder + label left-aligned */
}
body.dl-modern .dl-newsletter-band small,
body.dl-modern .dl-newsletter-band .dl-trust-line {
  display: block;
  margin: 18px auto 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

/* Remove decorative crimson hairline rules above/below newsletter band, they
   read as visual noise. The black band against white footer/content already
   provides sufficient separation. */
body.dl-modern .dl-newsletter-band {
  border-top: none;
  border-bottom: none;
}
body.dl-modern .dl-newsletter-band::before,
body.dl-modern .dl-newsletter-band::after {
  display: none;
}

/* ========================================================================
   0.5 INTERACTION STATES (sitewide hover, focus, active)
   Every interactive element must give the user feedback. Without these
   rules Astra parent CSS strips state changes, leaving the page feeling
   dead. All rules use to defeat Astra's broad-stroke resets.
   ======================================================================== */

/* --- HEADER NAV LINKS --- */
body.dl-modern .dl-main-header nav a,
body.dl-modern .dl-main-header .dl-nav-link {
  position: relative;
  transition: color 150ms ease, opacity 150ms ease;
}
body.dl-modern .dl-main-header nav a:hover,
body.dl-modern .dl-main-header .dl-nav-link:hover {
  color: var(--dl-accent);       /* terracotta - readable on cream header */
  background: rgba(230, 57, 70, 0.08);
  opacity: 1;
}
body.dl-modern .dl-main-header nav a::after,
body.dl-modern .dl-main-header .dl-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 2px;
  background: var(--dl-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms ease;
}
body.dl-modern .dl-main-header nav a:hover::after,
body.dl-modern .dl-main-header .dl-nav-link:hover::after,
body.dl-modern .dl-main-header nav a[aria-current="page"]::after,
body.dl-modern .dl-main-header .dl-nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}
body.dl-modern .dl-main-header nav a:focus-visible,
body.dl-modern .dl-main-header .dl-nav-link:focus-visible {
  outline: 2px solid var(--dl-on-dark);
  outline-offset: 4px;
  border-radius: 2px;
}

/* --- HEADER PRIMARY CTA (Test Series) --- */
body.dl-modern .dl-main-header .dl-btn-primary {
  transition: background 150ms ease, transform 80ms ease, box-shadow 150ms ease;
}
body.dl-modern .dl-main-header .dl-btn-primary:hover {
  background: var(--dl-accent-hover);
  border-color: var(--dl-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(230, 57, 70, 0.4);
}
body.dl-modern .dl-main-header .dl-btn-primary:active {
  transform: translateY(0);
  background: var(--dl-accent-hover);
  border-color: var(--dl-accent-hover);
}
body.dl-modern .dl-main-header .dl-btn-primary:focus-visible {
  outline: 3px solid var(--dl-on-dark);
  outline-offset: 2px;
}

/* --- HEADER SEARCH TRIGGER --- */
body.dl-modern .dl-main-header .dl-search-trigger,
body.dl-modern .dl-main-header [data-action*="search"],
body.dl-modern .dl-main-header [aria-label*="search" i] {
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
body.dl-modern .dl-main-header .dl-search-trigger:hover,
body.dl-modern .dl-main-header [data-action*="search"]:hover,
body.dl-modern .dl-main-header [aria-label*="search" i]:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
  transform: scale(1.05);
}
body.dl-modern .dl-main-header .dl-search-trigger:focus-visible {
  outline: 2px solid var(--dl-on-dark);
  outline-offset: 2px;
}

/* --- UTILITY BAR LINKS (Login, Sign up, lang toggles) --- */
/* Touch-target size: visual chrome stays compact, but tap area is ≥44x44 via padding */
body.dl-modern .dl-utility-bar a,
body.dl-modern .dl-utility-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 12px;
  transition: color 150ms ease, opacity 150ms ease;
}
body.dl-modern .dl-utility-bar a:hover,
body.dl-modern .dl-utility-bar button:hover {
  color: var(--dl-accent);
  opacity: 1;
}
body.dl-modern .dl-utility-bar a:focus-visible,
body.dl-modern .dl-utility-bar button:focus-visible {
  outline: 2px solid var(--dl-on-dark);
  outline-offset: 2px;
}
/* Compact the utility bar visual height so 44px tap area doesn't make it bulky */
body.dl-modern .dl-utility-bar {
  padding: 0;
  min-height: 44px;
}
body.dl-modern .dl-utility-bar > .dl-container {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* --- HOMEPAGE HERO CTAS --- */
body.dl-modern #dl-home a.dl-btn-primary,
body.dl-modern #dl-home .dl-btn-primary {
  transition: background 150ms ease, transform 80ms ease, box-shadow 150ms ease;
}
body.dl-modern #dl-home a.dl-btn-primary:hover,
body.dl-modern #dl-home .dl-btn-primary:hover {
  background: var(--dl-accent-hover);
  border-color: var(--dl-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(230, 57, 70, 0.35);
}
body.dl-modern #dl-home a.dl-btn-primary:active,
body.dl-modern #dl-home .dl-btn-primary:active {
  transform: translateY(0);
  background: var(--dl-accent-hover);
}
body.dl-modern #dl-home a.dl-btn-ghost {
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
body.dl-modern #dl-home a.dl-btn-ghost:hover {
  border-color: var(--dl-ink);
  background: var(--dl-paper-soft);
  color: var(--dl-ink);
}
body.dl-modern #dl-home a.dl-btn-primary:focus-visible,
body.dl-modern #dl-home a.dl-btn-ghost:focus-visible {
  outline: 3px solid var(--dl-accent);
  outline-offset: 3px;
}

/* --- HOMEPAGE PILLAR CARDS --- */
body.dl-modern #dl-home .dl-pillar {
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
body.dl-modern #dl-home .dl-pillar:hover {
  border-color: var(--dl-ink);
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.10);
}
body.dl-modern #dl-home .dl-pillar:focus-visible {
  outline: 3px solid var(--dl-accent);
  outline-offset: 4px;
}
body.dl-modern #dl-home .dl-pillar:hover .dl-pillar-cta svg {
  transform: translateX(5px);
}

/* --- HOMEPAGE SUBJECT CARDS --- */
body.dl-modern #dl-home .dl-subject {
  transition: border-color 200ms ease, background 200ms ease, transform 150ms ease;
}
body.dl-modern #dl-home .dl-subject:hover {
  border-color: var(--dl-accent);
  background: var(--dl-paper-soft);
  transform: translateY(-2px);
}
body.dl-modern #dl-home .dl-subject:hover .dl-subject-icon {
  background: var(--dl-accent);
  color: var(--dl-on-dark);
}
body.dl-modern #dl-home .dl-subject:focus-visible {
  outline: 3px solid var(--dl-accent);
  outline-offset: 2px;
}

/* --- HOMEPAGE POST CARDS (latest blog) --- */
body.dl-modern #dl-home .dl-post {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
body.dl-modern #dl-home .dl-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.10);
}
body.dl-modern #dl-home .dl-post:hover h3 {
  color: var(--dl-accent);
}
body.dl-modern #dl-home .dl-post:hover .dl-post-thumb img {
  transform: scale(1.05);
}
body.dl-modern #dl-home .dl-post:focus-visible {
  outline: 3px solid var(--dl-accent);
  outline-offset: 4px;
}

/* --- FOOTER LINKS --- */
body.dl-modern footer a {
  transition: color 150ms ease, opacity 150ms ease;
}
body.dl-modern footer a:hover {
  color: var(--dl-on-dark);
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--dl-accent);
}
body.dl-modern footer a:focus-visible {
  outline: 2px solid var(--dl-on-dark);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- SCROLL TO TOP --- */
#ast-scroll-top.ast-scroll-top-icon:hover,
#ast-scroll-top:hover {
  background: var(--dl-accent-hover);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
#ast-scroll-top:focus-visible {
  outline: 3px solid var(--dl-accent);
  outline-offset: 3px;
}

/* --- BREADCRUMB LINKS --- */
body.dl-modern .dl-breadcrumb a {
  transition: color 150ms ease;
}
body.dl-modern .dl-breadcrumb a:hover {
  color: var(--dl-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.dl-modern .dl-breadcrumb a:focus-visible {
  outline: 2px solid var(--dl-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- BODY-CONTENT INLINE LINKS (blog post + KB topic) ---
   Scoped to <p> / <li> descendants so it never overrides our component
   buttons (.dl-btn-*, .dl-kb-practice-btn, .dl-byline a, etc.) */
body.dl-modern .entry-content p a,
body.dl-modern .entry-content li a,
body.dl-modern .dl-kb-content p a,
body.dl-modern .dl-kb-content li a {
  color: var(--dl-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
body.dl-modern .entry-content p a:hover,
body.dl-modern .entry-content li a:hover,
body.dl-modern .dl-kb-content p a:hover,
body.dl-modern .dl-kb-content li a:hover {
  color: var(--dl-accent-hover);
  text-decoration-thickness: 2px;
}
body.dl-modern .entry-content a:focus-visible,
body.dl-modern .dl-kb-content a:focus-visible {
  outline: 2px solid var(--dl-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- GLOBAL FOCUS FALLBACK ---
   Anything that has nothing else gets a high-contrast crimson ring on focus. */
body.dl-modern *:focus-visible {
  outline: 2px solid var(--dl-accent);
  outline-offset: 2px;
}

/* ========================================================================
   0.6 ASTRA OFF-PALETTE OVERRIDES
   The Astra parent theme injects two hard-coded colours that aren't in our
   editorial palette. Catch them in CSS so old posts and parent-theme widgets
   inherit the editorial brand.
     #E63946  - Astra default error/scroll-top neon red
     #454f5e  - Astra default secondary/slate text
     #0f172a  - Astra default H1 slate (already partly handled in 0.1)
   ======================================================================== */
body.dl-modern [style*="#E63946" i],
body.dl-modern [style*="#E63946" i] {
  background-color: var(--dl-accent);
  color: inherit;
}
body.dl-modern .ast-related-post a:hover,
body.dl-modern .ast-related-meta a,
body.dl-modern .ast-related-post-content a {
  color: var(--dl-accent);
}
body.dl-modern .ast-secondary-color,
body.dl-modern .ast-meta-text,
body.dl-modern .post-meta {
  color: #5a4f44;
}
body.dl-modern .ast-related-post-title a,
body.dl-modern .ast-blog-related-section h2 {
  color: var(--dl-ink);
  font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif;
}
/* Astra single-post entry header colour */
body.dl-modern .ast-single-post .entry-title,
body.dl-modern .single .entry-header .entry-title {
  color: var(--dl-ink);
}
/* Astra category badges / tag pills */
body.dl-modern .ast-cat-link,
body.dl-modern .post-categories a,
body.dl-modern .tags-links a {
  color: var(--dl-accent);
}
body.dl-modern .ast-cat-link:hover,
body.dl-modern .post-categories a:hover {
  color: var(--dl-accent-hover);
}

/* ============================================================
   0.7 ASTRA ENTRY-META - hide duplicate red byline on single posts
   ============================================================ */
/* Hide Astra's default byline strip on single posts (we render .dl-byline). */
body.dl-modern.single .ast-article-single > .entry-meta:first-of-type,
body.dl-modern.single header.entry-header .entry-meta,
body.dl-modern.single .ast-single-post-entry-header .entry-meta {
  display: none;
}
/* Repaint Astra's #E63946 byline color anywhere it still renders (archive
   listings, related-posts cards). Wins specificity over Astra parent. */
body.dl-modern .entry-meta,
body.dl-modern .entry-meta *,
body.dl-modern .entry-meta a,
body.dl-modern .ast-byline,
body.dl-modern .ast-byline *,
body.dl-modern .posted-on,
body.dl-modern .posted-on *,
body.dl-modern .byline,
body.dl-modern .byline *,
body.dl-modern .ast-author-name,
body.dl-modern .ast-author-meta {
  color: #5a4f44;
}
body.dl-modern .entry-meta a:hover,
body.dl-modern .ast-byline a:hover,
body.dl-modern .ast-author-name a:hover {
  color: var(--dl-accent);
}

/* Archive post titles: dark slate heading-style (the body-content link
   rule below was wrongly painting them blue + underlined). */
body.dl-modern.archive h2.entry-title a,
body.dl-modern.archive h2.entry-title,
body.dl-modern.search h2.entry-title a,
body.dl-modern .ast-related-post-title a,
body.dl-modern .ast-archive-list h2 a {
  color: var(--dl-ink);
  text-decoration: none;
  font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif;
  text-decoration-thickness: 0;
}
body.dl-modern.archive h2.entry-title a:hover,
body.dl-modern.search h2.entry-title a:hover,
body.dl-modern .ast-related-post-title a:hover {
  color: var(--dl-accent);
}

/* Disable text-transform: capitalize on archive/search/blog/404 H1s
   (Astra parent applies it; we want sentence-case as authored). */
body.dl-modern.archive h1.page-title,
body.dl-modern.search h1.page-title,
body.dl-modern.error404 h1.page-title,
body.dl-modern.single h1.entry-title,
body.dl-modern .dl-search-empty-title {
  text-transform: none;
}
/* Catch the literal Astra neon red wherever it leaks */
body.dl-modern [style*="color: #E63946"],
body.dl-modern [style*="color: #E63946"],
body.dl-modern [style*="color:#E63946"],
body.dl-modern [style*="color:#E63946"] {
  color: #5a4f44;
}

/* ========================================================================
   0.3 TRUST PILL CONSISTENCY
   "SSL Secured" + "Razorpay verified" were rendering with mismatched
   tints (peach vs blue). Unify to subtle neutral pills with crimson icon
   so the editorial palette stays coherent.
   ======================================================================== */
body.dl-modern .dl-footer-trust { display: flex; gap: 10px; flex-wrap: wrap; }
body.dl-modern .dl-footer-trust .dl-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(26,23,20,0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
body.dl-modern .dl-footer-trust .dl-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dl-accent);
}

/* ========================================================================
   0.4 ASTRA SCROLL-TO-TOP RESTYLE
   Default Astra scroll-to-top is a 2px-radius near-square in off-palette
   neon red (#E63946). Restyle to editorial: circular, crimson, soft
   shadow, white chevron icon. Hidden on mobile to avoid covering content.
   ======================================================================== */
#ast-scroll-top.ast-scroll-top-icon,
#ast-scroll-top {
  background: var(--dl-accent);
  color: var(--dl-on-dark);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, transform 150ms ease;
}
#ast-scroll-top.ast-scroll-top-icon:hover {
  background: var(--dl-accent-hover);
  transform: translateY(-2px);
}
#ast-scroll-top .ast-icon,
#ast-scroll-top svg { fill: var(--dl-on-dark); color: var(--dl-on-dark); }
@media (max-width: 600px) {
  #ast-scroll-top.ast-scroll-top-icon { width: 40px; height: 40px; bottom: 16px; right: 16px; }
}

/* ========================================================================
   1. DESIGN TOKENS (CSS custom properties)
   ======================================================================== */

:root {
  /* ====================================================================
     BRAND PALETTE: INK & PAPER (Direction A)
     Cream paper background + deep ink text + terracotta accent + Plus Jakarta Sans
     serif headlines. Mood: serious literary magazine, library reading
     room, premium textbook. Locked 2026-05-06.
     Legacy crimson/amber tokens retained as aliases for backward-compat.
     ==================================================================== */

  /* Color - Brand (Ink & Paper)
     NOTE: --dl-ink, --dl-paper, --dl-accent are defined canonically in
     dl-tokens.css. Re-declaring them here would either shadow the token
     (breaking the cascade) or self-reference (CSS error → empty value).
     Aliases below MAP onto the canonical tokens for backward-compat
     with legacy class names that referenced --dl-paper-card / --dl-warm
     etc. Do NOT redefine --dl-ink, --dl-accent, or --dl-paper here. */
  --dl-paper-card:   var(--dl-paper-soft);  /* card / subtle elevation */
  --dl-paper-deep:   var(--dl-paper-soft);  /* section break */
  --dl-ink-deep:     #000000;  /* deepest dark - pure black */
  --dl-ink-2:        rgba(26,23,20,0.72);  /* secondary text */
  --dl-ink-3:        rgba(26,23,20,0.55);  /* tertiary / meta */
  --dl-terracotta:   var(--dl-accent);  /* primary accent - eyebrows, links, badges */
  --dl-terracotta-700:var(--dl-accent-hover); /* hover */
  --dl-terracotta-100:#f1e1d6; /* light tint badge bg */
  --dl-warm:         #d4a373;  /* warm tan for accents on dark bg */
  --dl-rule:         rgba(26,23,20,0.12);  /* subtle borders / dividers */

  /* Legacy aliases - old crimson/black refs map onto new ink/terracotta */
  --dl-black:        var(--dl-ink);
  --dl-black-soft:   var(--dl-ink);
  --dl-crimson:      var(--dl-accent);
  --dl-crimson-700:  var(--dl-accent-hover);
  --dl-crimson-100:  #f1e1d6;
  --dl-crimson-900:  var(--dl-accent-hover);
  --dl-navy-900:     var(--dl-ink);
  --dl-navy-800:     var(--dl-ink);
  --dl-navy-600:     #4a3a30;
  --dl-amber-600:    var(--dl-accent);
  --dl-amber-500:    var(--dl-accent-hover);
  --dl-amber-100:    #f1e1d6;

  /* Color - Surface */
  --dl-bg:         var(--dl-on-dark);
  --dl-bg-soft:    var(--dl-paper-soft);
  --dl-bg-muted:   #efe7d6;

  /* Color - Text */
  --dl-text:       var(--dl-ink);
  --dl-text-muted: rgba(26,23,20,0.7);
  --dl-text-faint: rgba(26,23,20,0.55);
  --dl-text-on-dark: var(--dl-on-dark);

  /* Color - Border */
  --dl-border:        rgba(26,23,20,0.12);
  --dl-border-strong: rgba(26,23,20,0.25);

  /* Color - Semantic */
  --dl-success: #10B981;
  --dl-warning: #F59E0B;
  --dl-error: #EF4444;
  --dl-info: #E63946;

  /* Typography - Editorial: Playfair Display headings + Inter body */
  --dl-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --dl-font-serif: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --dl-font-hindi:   "Noto Sans Devanagari", "Mangal", sans-serif;
  --dl-font-mono:    "JetBrains Mono", "Menlo", monospace;
  --dl-font-heading: var(--dl-font-serif);  /* headings use serif by default */

  --dl-text-xs: 0.75rem;       /* 12px */
  --dl-text-sm: 0.875rem;      /* 14px */
  --dl-text-base: 1rem;        /* 16px mobile */
  --dl-text-lg: 1.125rem;      /* 18px */
  --dl-text-xl: 1.25rem;       /* 20px */
  --dl-text-2xl: 1.5rem;       /* 24px */
  --dl-text-3xl: 1.75rem;      /* 28px */
  --dl-text-4xl: 2rem;         /* 32px */
  --dl-text-5xl: 2.5rem;       /* 40px */

  --dl-fw-regular: 400;
  --dl-fw-medium: 500;
  --dl-fw-semibold: 600;
  --dl-fw-bold: 700;

  --dl-leading-tight: 1.2;
  --dl-leading-snug: 1.4;
  --dl-leading-normal: 1.5;
  --dl-leading-relaxed: 1.65;

  /* Spacing - 8px grid */
  --dl-space-1: 0.25rem;
  --dl-space-2: 0.5rem;
  --dl-space-3: 0.75rem;
  --dl-space-4: 1rem;
  --dl-space-5: 1.25rem;
  --dl-space-6: 1.5rem;
  --dl-space-8: 2rem;
  --dl-space-10: 2.5rem;
  --dl-space-12: 3rem;
  --dl-space-16: 4rem;
  --dl-space-20: 5rem;
  --dl-space-24: 6rem;

  /* Layout */
  --dl-container-sm: 640px;
  --dl-container-md: 768px;
  --dl-container-lg: 1024px;
  --dl-container-xl: 1280px;
  --dl-container-2xl: 1440px;

  /* Radius */
  --dl-radius-sm: 4px;
  --dl-radius-md: 8px;
  --dl-radius-lg: 12px;
  --dl-radius-xl: 16px;
  --dl-radius-full: 9999px;

  /* Shadow */
  --dl-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --dl-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --dl-shadow-lg: 0 8px 20px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --dl-shadow-cta: 0 4px 12px rgba(233, 125, 44, 0.25);

  /* Motion */
  --dl-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dl-duration-fast: 150ms;
  --dl-duration-normal: 250ms;

  /* Z-index */
  --dl-z-dropdown: 100;
  --dl-z-sticky: 200;
  --dl-z-overlay: 300;
  --dl-z-modal: 400;
  --dl-z-toast: 500;
}

/* Desktop overrides */
@media (min-width: 768px) {
  :root {
    --dl-text-base: 1.125rem;    /* 18px */
    --dl-text-lg: 1.25rem;       /* 20px */
    --dl-text-xl: 1.5rem;        /* 24px */
    --dl-text-2xl: 1.75rem;      /* 28px */
    --dl-text-3xl: 2.25rem;      /* 36px */
    --dl-text-4xl: 3rem;         /* 48px */
    --dl-text-5xl: 3.75rem;      /* 60px */
  }
}

/* Dark mode - pure black surface, near-white text */
[data-theme="dark"] {
  --dl-bg:         var(--dl-ink);
  --dl-bg-soft:    #171717;
  --dl-bg-muted:   #262626;
  --dl-text:       var(--dl-paper-soft);
  --dl-text-muted: #bfb4a3;
  --dl-border:        #262626;
  --dl-border-strong: #4a3a30;
  --dl-crimson:    #EF4444;   /* slightly brighter for dark bg */
  --dl-amber-600:  #EF4444;   /* alias remap */
  --dl-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
  --dl-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Auto-detect system preference if no manual override */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dl-bg:         var(--dl-ink);
    --dl-bg-soft:    #171717;
    --dl-bg-muted:   #262626;
    --dl-text:       var(--dl-paper-soft);
    --dl-text-muted: #bfb4a3;
    --dl-border:     #262626;
  }
}

/* ========================================================================
   2. RESET + BASE
   ======================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body.dl-modern {
  margin: 0;
  font-family: var(--dl-font-sans);
  font-size: var(--dl-text-base);
  line-height: var(--dl-leading-relaxed);
  font-weight: var(--dl-fw-regular);
  color: var(--dl-text);
  background: var(--dl-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hindi pages get Devanagari font automatically */
body.dl-modern[lang="hi"],
body.dl-modern .dl-hindi {
  font-family: var(--dl-font-hindi), var(--dl-font-sans);
}

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

/* ========================================================================
   3. TYPOGRAPHY UTILITIES
   ======================================================================== */

/* Editorial headings: Playfair Display serif. Body stays Inter sans. */
.dl-modern h1, .dl-modern .dl-h1 { font-family: var(--dl-font-heading); font-size: var(--dl-text-4xl); font-weight: var(--dl-fw-bold); line-height: var(--dl-leading-tight); letter-spacing: -0.015em; margin: 0 0 var(--dl-space-6); color: var(--dl-text); }
.dl-modern h2, .dl-modern .dl-h2 { font-family: var(--dl-font-heading); font-size: var(--dl-text-3xl); font-weight: var(--dl-fw-bold); line-height: var(--dl-leading-tight); letter-spacing: -0.01em; margin: var(--dl-space-12) 0 var(--dl-space-4); color: var(--dl-text); }
.dl-modern h3, .dl-modern .dl-h3 { font-family: var(--dl-font-heading); font-size: var(--dl-text-2xl); font-weight: var(--dl-fw-semibold); line-height: var(--dl-leading-snug); margin: var(--dl-space-8) 0 var(--dl-space-3); color: var(--dl-text); }
.dl-modern h4, .dl-modern .dl-h4 { font-family: var(--dl-font-heading); font-size: var(--dl-text-xl); font-weight: var(--dl-fw-semibold); line-height: var(--dl-leading-snug); margin: var(--dl-space-6) 0 var(--dl-space-2); color: var(--dl-text); }
.dl-modern p { margin: 0 0 var(--dl-space-4); max-width: 70ch; }
/* Generic prose-link colour. Uses :where() so the rule contributes zero
   specificity from the anchor selector - any per-component override
   (.dl-breadcrumb a, .dl-byline-author a, .dl-hub-btn--primary, etc.)
   wins naturally without needing !important or specificity hacks. */
.dl-modern :where(a) { color: var(--dl-navy-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--dl-duration-fast) var(--dl-ease); }
.dl-modern :where(a):hover { color: var(--dl-amber-600); }
.dl-modern small { font-size: var(--dl-text-sm); color: var(--dl-text-muted); }
.dl-modern code { font-family: var(--dl-font-mono); font-size: 0.9em; background: var(--dl-bg-muted); padding: 2px 6px; border-radius: var(--dl-radius-sm); }

.dl-text-center { text-align: center; }
.dl-text-muted { color: var(--dl-text-muted); }
.dl-text-amber { color: var(--dl-amber-600); }
.dl-text-navy { color: var(--dl-navy-800); }

/* ========================================================================
   4. LAYOUT UTILITIES
   ======================================================================== */

.dl-container { width: 100%; max-width: var(--dl-container-xl); margin: 0 auto; padding: 0 var(--dl-space-4); }
@media (min-width: 768px) { .dl-container { padding: 0 var(--dl-space-6); } }
@media (min-width: 1024px) { .dl-container { padding: 0 var(--dl-space-10); } }

.dl-container-sm { max-width: var(--dl-container-sm); }
.dl-container-md { max-width: var(--dl-container-md); }
.dl-container-lg { max-width: var(--dl-container-lg); }

.dl-section { padding: var(--dl-space-12) 0; }
@media (min-width: 768px) { .dl-section { padding: var(--dl-space-20) 0; } }

.dl-grid { display: grid; gap: var(--dl-space-6); }
.dl-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dl-grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dl-grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.dl-flex { display: flex; }
.dl-flex-col { flex-direction: column; }
.dl-items-center { align-items: center; }
.dl-justify-between { justify-content: space-between; }
.dl-gap-2 { gap: var(--dl-space-2); }
.dl-gap-4 { gap: var(--dl-space-4); }
.dl-gap-6 { gap: var(--dl-space-6); }

/* ========================================================================
   5. BUTTONS
   ======================================================================== */

.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dl-space-2);
  padding: 0 var(--dl-space-4);
  height: 44px;
  font-family: var(--dl-font-sans);
  font-size: var(--dl-text-base);
  font-weight: var(--dl-fw-semibold);
  line-height: 1;
  text-decoration: none;
  border-radius: var(--dl-radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--dl-duration-fast) var(--dl-ease);
  white-space: nowrap;
  min-width: 44px;
}

.dl-btn:focus-visible {
  outline: 2px solid var(--dl-amber-600);
  outline-offset: 2px;
}

/* Primary CTA - crimson bg + WHITE text (4.83:1 ✓ AA pass for normal text). */
.dl-btn-primary {
  background: var(--dl-accent);
  color: var(--dl-on-dark);
  box-shadow: 0 2px 8px rgba(230, 57, 70, 0.25);
  font-weight: var(--dl-fw-semibold);
  border-color: var(--dl-accent);
}
.dl-btn-primary:hover { background: var(--dl-accent-hover); transform: translateY(-1px); color: var(--dl-on-dark); }
.dl-btn-primary:active { background: var(--dl-accent-hover); }

/* Secondary CTA - outlined black, no fill */
.dl-btn-secondary { color: var(--dl-text); border-color: var(--dl-text); }
.dl-btn-secondary:hover { background: var(--dl-text); color: var(--dl-bg); }

.dl-btn-secondary {
  background: transparent;
  color: var(--dl-navy-800);
  border-color: var(--dl-navy-800);
}
.dl-btn-secondary:hover { background: var(--dl-navy-800); color: white; }

[data-theme="dark"] .dl-btn-secondary {
  color: var(--dl-text);
  border-color: var(--dl-text);
}

.dl-btn-ghost {
  background: transparent;
  color: var(--dl-navy-600);
}
.dl-btn-ghost:hover { background: var(--dl-bg-muted); color: var(--dl-amber-600); }

.dl-btn-sm { height: 32px; padding: 0 var(--dl-space-3); font-size: var(--dl-text-sm); }
.dl-btn-lg { height: 52px; padding: 0 var(--dl-space-6); font-size: var(--dl-text-lg); }

/* ========================================================================
   6. CARDS
   ======================================================================== */

.dl-card {
  background: var(--dl-bg-soft);
  border: 1px solid var(--dl-border);
  border-radius: var(--dl-radius-lg);
  padding: var(--dl-space-6);
  transition: all var(--dl-duration-normal) var(--dl-ease);
}
.dl-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--dl-shadow-lg);
  border-color: var(--dl-amber-600);
}

.dl-card-title {
  font-size: var(--dl-text-xl);
  font-weight: var(--dl-fw-semibold);
  margin: 0 0 var(--dl-space-2);
  color: var(--dl-text);
}
.dl-card-meta {
  font-size: var(--dl-text-sm);
  color: var(--dl-text-muted);
  margin-bottom: var(--dl-space-3);
}

/* ========================================================================
   7. CALLOUT BOXES
   ======================================================================== */

.dl-callout {
  display: flex;
  gap: var(--dl-space-3);
  padding: var(--dl-space-4) var(--dl-space-5);
  border-left: 4px solid;
  border-radius: var(--dl-radius-md);
  margin: var(--dl-space-6) 0;
}
.dl-callout-icon { flex-shrink: 0; font-size: var(--dl-text-xl); line-height: 1; }
.dl-callout-body { flex: 1; }
.dl-callout-title { font-weight: var(--dl-fw-semibold); margin-bottom: var(--dl-space-1); }

.dl-callout-pyq { background: var(--dl-amber-100); border-left-color: var(--dl-amber-600); }
.dl-callout-info { background: #EFF6FF; border-left-color: var(--dl-info); }
.dl-callout-warn { background: #FEF3C7; border-left-color: var(--dl-warning); }
.dl-callout-tip { background: #ECFDF5; border-left-color: var(--dl-success); }

[data-theme="dark"] .dl-callout-pyq { background: rgba(233, 125, 44, 0.15); }
[data-theme="dark"] .dl-callout-info { background: rgba(59, 130, 246, 0.15); }
[data-theme="dark"] .dl-callout-warn { background: rgba(245, 158, 11, 0.15); }
[data-theme="dark"] .dl-callout-tip { background: rgba(16, 185, 129, 0.15); }

/* ========================================================================
   8. BADGES + CHIPS
   ======================================================================== */

.dl-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  font-size: var(--dl-text-xs);
  font-weight: var(--dl-fw-medium);
  border-radius: var(--dl-radius-full);
  background: var(--dl-bg-muted);
  color: var(--dl-text);
}
.dl-badge-amber { background: var(--dl-amber-100); color: #7C2D12; }
.dl-badge-info { background: #DBEAFE; color: #E63946; }
.dl-badge-success { background: #D1FAE5; color: #064E3B; }
.dl-badge-new { background: var(--dl-amber-600); color: white; }

/* ========================================================================
   9. FORMS
   ======================================================================== */

.dl-input,
.dl-textarea,
.dl-select {
  width: 100%;
  height: 44px;
  padding: 0 var(--dl-space-4);
  font-family: var(--dl-font-sans);
  font-size: var(--dl-text-base);
  color: var(--dl-text);
  background: var(--dl-bg);
  border: 1.5px solid var(--dl-border);
  border-radius: var(--dl-radius-md);
  transition: border-color var(--dl-duration-fast) var(--dl-ease), box-shadow var(--dl-duration-fast) var(--dl-ease);
}
.dl-textarea { height: auto; padding: var(--dl-space-3) var(--dl-space-4); min-height: 120px; resize: vertical; }
.dl-input:focus,
.dl-textarea:focus,
.dl-select:focus {
  outline: none;
  border-color: var(--dl-amber-600);
  box-shadow: 0 0 0 3px rgba(233, 125, 44, 0.15);
}

.dl-label {
  display: block;
  font-size: var(--dl-text-sm);
  font-weight: var(--dl-fw-medium);
  margin-bottom: var(--dl-space-2);
  color: var(--dl-text);
}

/* ========================================================================
   10. ACCESSIBILITY HELPERS
   ======================================================================== */

.dl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dl-skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--dl-navy-800);
  color: white;
  padding: var(--dl-space-3) var(--dl-space-5);
  z-index: var(--dl-z-toast);
  text-decoration: none;
  border-radius: 0 0 var(--dl-radius-md) 0;
}
.dl-skip-to-content:focus { top: 0; }

*:focus-visible {
  outline: 2px solid var(--dl-amber-600);
  outline-offset: 2px;
}

/* Reduce motion if user prefers */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}


/* ============================================================
   0.8 ASTRA DUPLICATES - hide elements Astra renders that we already
   provide via dl-breadcrumb-band, dl-byline, etc.
   ============================================================ */
/* Astra renders its own breadcrumb inside .ast-archive-description on
   search/archive pages. Our .dl-breadcrumb-band is already the canonical
   one (above the page content), so hide Astra's duplicate to prevent
   visual confusion. */
body.dl-modern .ast-breadcrumbs-wrapper,
body.dl-modern .ast-breadcrumbs,
body.dl-modern nav.breadcrumb-trail.breadcrumbs {
  display: none;
}

/* === dl-header-footer.css (52,639 bytes) === */
/*

  DigitallyLearn Header + Footer styles

  Loaded after dl-design-system.css



  IMPORTANT: All header/footer selectors use body.dl-modern prefix to win

  specificity against Astra parent theme defaults. Do not weaken without

  contrast-testing.

*/



/* ========================================================================

   HEADER - high-specificity wrapper to defeat Astra

   ======================================================================== */



/* Header is NOT sticky (reverted 2026-05-07 by user request).

   The body overflow override and html overflow:clip are kept - they were

   added to defeat Astra's sticky-breaking body scroll container, but they

   are also harmless when the header is non-sticky and protect against

   future regressions if sticky is reintroduced. */

html { overflow-x: clip; }

/* Two-axis split: clip horizontally so off-canvas drawer/header transforms

   don't pad documentElement.scrollWidth (WCAG 1.4.10 reflow at 320 px @ 200 %

   zoom). Vertical stays visible so the body remains the page scroll

   container, which Astra's sticky helpers rely on. */

body.dl-modern { overflow-x: clip; overflow-y: visible; }



body.dl-modern .dl-header {

  position: relative;

  z-index: var(--dl-z-sticky);

  background: var(--dl-paper);

  box-shadow: 0 1px 0 rgba(15,15,15,0.06);

}

body.dl-modern .dl-header,

body.dl-modern .dl-header * { box-sizing: border-box; }



/* Editorial - pure black bg, white text (contrast 21:1 ✓) */

body.dl-modern .dl-utility-bar {

  background: var(--dl-ink);

  color: rgba(246,241,232,0.7);

  font-size: 12px;

  padding: 8px 0;

  letter-spacing: 0.02em;

  border-bottom: none;

}

body.dl-modern .dl-utility-bar .dl-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--dl-space-4);

}

body.dl-modern .dl-utility-message { display: flex; align-items: center; gap: var(--dl-space-2); color: rgba(246,241,232,0.7); }

body.dl-modern .dl-utility-actions { display: flex; align-items: center; gap: var(--dl-space-5); }

body.dl-modern .dl-utility-actions a {

  color: var(--dl-on-dark);

  text-decoration: none;

  font-weight: 500;

  font-size: 12px;

}

body.dl-modern .dl-utility-actions a:hover { color: #d4a373; }

body.dl-modern .dl-lang-toggle { display: flex; gap: var(--dl-space-1); align-items: center; }

body.dl-modern .dl-lang-toggle button {

  background: transparent;

  border: 1px solid rgba(246,241,232,0.3);

  color: rgba(246,241,232,0.85);

  padding: 3px 10px;

  border-radius: 2px;

  font-size: 11px;

  font-weight: 600;

  cursor: pointer;

  font-family: inherit;

}

body.dl-modern .dl-lang-toggle button:hover { border-color: var(--dl-amber-600); color: var(--dl-amber-600); }

body.dl-modern .dl-lang-toggle button.active {

  background: var(--dl-accent);

  border-color: var(--dl-accent);

  color: var(--dl-on-dark);  /* white on crimson = 4.83:1 ✓ AA pass */

}



@media (max-width: 767px) {

  .dl-utility-message { display: none; }

  .dl-utility-bar { padding: var(--dl-space-1) 0; }

}



/* Main header - pure black bg, white text (contrast 21:1 ✓), 1px crimson hairline */

body.dl-modern .dl-main-header {

  background: var(--dl-on-dark);

  color: var(--dl-ink);

  border-bottom: 1px solid rgba(26,23,20,0.1);

}

body.dl-modern .dl-main-header::after {

  /* No bold underline rule per Ink & Paper - masthead uses a quiet 1px ink/10 border instead */

  content: none;

}

body.dl-modern .dl-main-header .dl-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--dl-space-4);

  padding-top: 6px;

  padding-bottom: 6px;

}



/* Logo */

body.dl-modern .dl-logo {

  display: flex;

  align-items: center;

  gap: var(--dl-space-2);

  text-decoration: none;

  color: var(--dl-ink);

  font-weight: var(--dl-fw-bold);

  font-size: var(--dl-text-xl);

  flex-shrink: 0;

}

body.dl-modern .dl-logo:hover { color: var(--dl-ink); opacity: 0.85; }

body.dl-modern .dl-logo-mark { width: 34px; height: 34px; }

/* Logo: L6 Pure Wordmark - typography only, vertical news-red bar between

   the two words. No icon. Renders identically in header, drawer, footer.

   Newsroom Black palette. */

body.dl-modern .dl-logo {

  display: inline-flex;

  align-items: center;

  gap: 0;

  text-decoration: none;

}

body.dl-modern .dl-logo-text {

  font-family: 'Playfair Display', 'Plus Jakarta Sans', Georgia, serif;

  font-weight: 800;

  letter-spacing: -0.02em;

  font-size: 22px;

  line-height: 1;

  color: var(--dl-ink);

  display: inline-flex;

  align-items: center;

}

body.dl-modern .dl-logo-bar {

  display: inline-block;

  width: 3px;

  height: 0.78em;

  background: var(--dl-accent);

  margin: 0 0.42em;

  vertical-align: -0.05em;

  border-radius: 1px;

}

/* On dark surfaces (footer, drawer overlay) flip the wordmark color */

body.dl-modern .dl-footer .dl-logo-text,

body.dl-modern .dl-footer-logo .dl-logo-text {

  color: var(--dl-on-dark);

}

/* Legacy .dl-logo-accent still supported in case any markup references it */

body.dl-modern .dl-logo-text .dl-logo-accent { color: var(--dl-accent); }

body.dl-modern .dl-logo-mark { display: none; } /* pure wordmark hides any leftover icon */



/* Component K (locked 2026-05-07): image-based wordmark logo.

   Replaces the CSS-text "Digitally | Learn" lockup with the canonical

   primary wordmark PNG (capital-D 'Digitally Learn' with red dots over

   each i). Light variant for cream surfaces (header), dark variant for

   ink surfaces (footer). Width is intrinsic; height locks to ~36 px on

   desktop and ~30 px on mobile to fit existing header/footer band heights. */

body.dl-modern .dl-logo-img {

  display: block;

  height: 36px;

  width: auto;

  max-width: 100%;

  object-fit: contain;

}

/* Stacked variant (DL monogram + red rule + wordmark) - used in footer where

   vertical space allows. ~120px tall fits the footer-about column nicely. */

body.dl-modern .dl-logo-img--stacked {

  height: 120px;

}

@media (max-width: 1023px) {

  body.dl-modern .dl-logo-img { height: 30px; }

  body.dl-modern .dl-logo-img--stacked { height: 100px; }

}

@media (max-width: 479px) {

  body.dl-modern .dl-logo-img { height: 26px; }

  body.dl-modern .dl-logo-img--stacked { height: 88px; }

}

/* Hide the old CSS-text wordmark when the image is in use, but keep the

   selector here in case any legacy markup still emits the text-only form. */

body.dl-modern .dl-logo:has(.dl-logo-img) .dl-logo-text { display: none; }

body.dl-modern .dl-logo:has(.dl-logo-img) .dl-logo-bar  { display: none; }



/* Nav links - white on navy (12.6:1 ✓), amber on hover (4.5:1 ✓) */

body.dl-modern .dl-nav { display: flex; align-items: center; gap: var(--dl-space-1); }

body.dl-modern .dl-nav-link,

body.dl-modern .dl-nav a.dl-nav-link {

  color: var(--dl-ink);

  text-decoration: none;

  padding: var(--dl-space-2) var(--dl-space-4);

  font-weight: var(--dl-fw-semibold);

  font-size: var(--dl-text-base);

  border-radius: var(--dl-radius-md);

  display: inline-flex;

  align-items: center;

  gap: var(--dl-space-1);

  cursor: pointer;

  background: transparent;

  border: none;

  font-family: inherit;

  transition: all var(--dl-duration-fast) var(--dl-ease);

  line-height: 1.2;

}

body.dl-modern .dl-nav-link:hover,

body.dl-modern .dl-nav a.dl-nav-link:hover {

  color: var(--dl-accent);

  background: rgba(230, 57, 70, 0.06);

}

body.dl-modern .dl-nav-link[aria-expanded="true"] { color: var(--dl-accent); background: rgba(230, 57, 70, 0.10); }

body.dl-modern .dl-nav-caret { width: 12px; height: 12px; transition: transform var(--dl-duration-fast) var(--dl-ease); }

body.dl-modern .dl-nav-link[aria-expanded="true"] .dl-nav-caret { transform: rotate(180deg); }



/* Mega menu */

.dl-megamenu {

  position: absolute;

  top: 100%;

  left: 0;

  right: 0;

  background: var(--dl-bg);

  color: var(--dl-text);

  border-top: 1px solid var(--dl-border);

  box-shadow: var(--dl-shadow-lg);

  display: none;

  z-index: var(--dl-z-dropdown);

}

.dl-megamenu.dl-open { display: block; }

.dl-megamenu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dl-space-8); padding: var(--dl-space-10) 0; }

.dl-megamenu-col h3 { font-size: var(--dl-text-sm); font-weight: var(--dl-fw-semibold); color: var(--dl-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 var(--dl-space-3); }

.dl-megamenu-col ul { list-style: none; padding: 0; margin: 0; }

.dl-megamenu-col li { margin-bottom: var(--dl-space-2); }

.dl-megamenu-col a { color: var(--dl-text); text-decoration: none; font-size: var(--dl-text-base); display: block; padding: var(--dl-space-1) 0; border-radius: var(--dl-radius-sm); }

.dl-megamenu-col a:hover { color: var(--dl-amber-600); }



/* Header actions */

body.dl-modern .dl-header-actions { display: flex; align-items: center; gap: var(--dl-space-3); flex-shrink: 0; }

body.dl-modern .dl-search-trigger {

  background: transparent;

  color: var(--dl-ink);

  border: 1px solid rgba(26,23,20,0.18);

  width: 38px;

  height: 38px;

  padding: 0;

  border-radius: 2px;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  transition: background 150ms ease, border-color 150ms ease;

}

/* Force SVG inside search button to render visibly (defeats Astra svg-fill rules) */

body.dl-modern .dl-search-trigger svg {

  width: 22px;

  height: 22px;

  display: block;

  flex-shrink: 0;

}

body.dl-modern .dl-search-trigger svg path {

  fill: var(--dl-ink);

}

body.dl-modern .dl-search-trigger:hover {

  background: rgba(26,23,20,0.06);

  border-color: rgba(26,23,20,0.4);

}

body.dl-modern .dl-search-trigger:hover {

  background: var(--dl-accent);

  border-color: var(--dl-accent);

  transform: scale(1.05);

}

body.dl-modern .dl-search-trigger:hover svg path {

  fill: var(--dl-on-dark);

}



/* Header CTA - crimson filled per Editorial palette */

body.dl-modern .dl-header-cta-desktop,

body.dl-modern a.dl-header-cta-desktop {

  background: var(--dl-accent);

  color: #ffffff;

  border: 1px solid var(--dl-accent);

  font-weight: var(--dl-fw-semibold);

  text-decoration: none;

  padding: 0 var(--dl-space-5);

  height: 40px;

  display: inline-flex;

  align-items: center;

  border-radius: var(--dl-radius-md);

  box-shadow: 0 2px 8px rgba(230, 57, 70, 0.25);

  transition: all var(--dl-duration-fast) var(--dl-ease);

  font-size: var(--dl-text-sm);

  letter-spacing: 0.01em;

}

body.dl-modern .dl-header-cta-desktop:hover,

body.dl-modern a.dl-header-cta-desktop:hover {

  background: var(--dl-accent-hover);

  border-color: var(--dl-accent-hover);

  color: #ffffff;

  transform: translateY(-1px);

  box-shadow: 0 4px 14px rgba(230, 57, 70, 0.35);

}



/* Mobile hamburger - explicit visible bg + white SVG bars */

body.dl-modern .dl-hamburger {

  display: none;

  background: transparent;

  border: 1px solid rgba(26,23,20,0.18);

  color: var(--dl-ink);

  width: 44px;

  height: 44px;

  border-radius: 2px;

  cursor: pointer;

  align-items: center;

  justify-content: center;

  padding: 0;

}

body.dl-modern .dl-hamburger:hover { background: var(--dl-accent); border-color: var(--dl-accent); }

body.dl-modern .dl-hamburger:hover svg rect { fill: var(--dl-on-dark); }

body.dl-modern .dl-hamburger svg { display: block; flex-shrink: 0; }

body.dl-modern .dl-hamburger svg rect { fill: var(--dl-ink); }



/* Mobile + tablet (< 1024px) - collapse nav to hamburger */

@media (max-width: 1023px) {

  body.dl-modern .dl-nav,

  body.dl-modern .dl-header-cta-desktop { display: none; }

  body.dl-modern .dl-hamburger { display: inline-flex; }

  body.dl-modern .dl-utility-message { display: none; }

  body.dl-modern .dl-utility-actions { gap: var(--dl-space-3); }

  body.dl-modern .dl-utility-actions a { font-size: var(--dl-text-xs); }

  body.dl-modern .dl-main-header .dl-container { padding-top: var(--dl-space-2); padding-bottom: var(--dl-space-2); }

  body.dl-modern .dl-logo { font-size: var(--dl-text-lg); }

  body.dl-modern .dl-logo-mark { width: 32px; height: 32px; }

  body.dl-modern .dl-search-trigger { width: 44px; height: 44px; }

  body.dl-modern .dl-hamburger { width: 44px; height: 44px; }

}



/* Small mobile (< 480px) - extra-tight */

@media (max-width: 479px) {

  body.dl-modern .dl-utility-bar { padding: 4px 0; }

  body.dl-modern .dl-utility-actions a { padding: 0; }

  body.dl-modern .dl-logo-text { font-size: var(--dl-text-base); }

}



/* ========================================================================

   SEARCH MODAL

   ======================================================================== */



body.dl-modern .dl-search-modal {

  position: fixed;

  inset: 0;

  background: rgba(44, 54, 64, 0.78);  /* dark slate 78% */

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  z-index: var(--dl-z-modal);

  display: none;

  padding: var(--dl-space-12) var(--dl-space-4);

  overflow-y: auto;

}

body.dl-modern .dl-search-modal.dl-open { display: block; }



body.dl-modern .dl-search-modal-inner {

  max-width: 720px;

  margin: 0 auto;

  background: var(--dl-bg);

  color: var(--dl-text);

  border-radius: var(--dl-radius-xl);

  padding: var(--dl-space-10) var(--dl-space-8);

  position: relative;

  box-shadow: 0 24px 64px rgba(0,0,0,0.4);

}



body.dl-modern .dl-search-close {

  position: absolute;

  top: var(--dl-space-4);

  right: var(--dl-space-4);

  background: var(--dl-bg-muted);

  border: none;

  width: 40px;

  height: 40px;

  border-radius: var(--dl-radius-full);

  font-size: 28px;

  line-height: 1;

  color: var(--dl-text);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: inherit;

}

body.dl-modern .dl-search-close:hover { background: var(--dl-amber-600); color: #0B1426; }



body.dl-modern .dl-search-title {

  font-size: var(--dl-text-2xl);

  font-weight: var(--dl-fw-bold);

  margin: 0 0 var(--dl-space-2);

  color: var(--dl-text);

}

body.dl-modern .dl-search-hint {

  color: var(--dl-text-muted);

  margin: 0 0 var(--dl-space-6);

  font-size: var(--dl-text-base);

}



body.dl-modern .dl-search-form {

  display: flex;

  gap: var(--dl-space-3);

  margin-bottom: var(--dl-space-6);

}

body.dl-modern .dl-search-form input {

  flex: 1;

  height: 56px;

  padding: 0 var(--dl-space-5);

  font-size: var(--dl-text-lg);

  font-family: var(--dl-font-sans);

  border: 2px solid var(--dl-border);

  border-radius: var(--dl-radius-md);

  color: var(--dl-text);

  background: var(--dl-bg);

}

body.dl-modern .dl-search-form input:focus {

  outline: none;

  border-color: var(--dl-amber-600);

  box-shadow: 0 0 0 4px rgba(233,125,44,0.15);

}

body.dl-modern .dl-search-form .dl-btn { height: 56px; }



body.dl-modern .dl-search-quick {

  display: flex;

  flex-wrap: wrap;

  gap: var(--dl-space-2);

  align-items: center;

  font-size: var(--dl-text-sm);

}

body.dl-modern .dl-search-quick-label { color: var(--dl-text-muted); margin-right: var(--dl-space-1); }

body.dl-modern .dl-search-quick a {

  display: inline-flex;

  padding: 4px 12px;

  background: var(--dl-bg-muted);

  color: var(--dl-text);

  border-radius: var(--dl-radius-full);

  text-decoration: none;

  font-weight: var(--dl-fw-medium);

  transition: all var(--dl-duration-fast) var(--dl-ease);

}

body.dl-modern .dl-search-quick a:hover {

  background: var(--dl-amber-600);

  color: #0B1426;

}



@media (max-width: 600px) {

  body.dl-modern .dl-search-modal { padding: var(--dl-space-4); }

  body.dl-modern .dl-search-modal-inner { padding: var(--dl-space-6); }

  body.dl-modern .dl-search-form { flex-direction: column; }

}



/* Mobile drawer */

.dl-mobile-drawer {

  position: fixed;

  top: 0;

  left: 0;

  bottom: 0;

  width: 80%;

  max-width: 320px;

  background: var(--dl-bg);

  color: var(--dl-text);

  z-index: var(--dl-z-modal);

  transform: translateX(-100%);

  transition: transform var(--dl-duration-normal) var(--dl-ease);

  overflow-y: auto;

  padding: var(--dl-space-6);

}

.dl-mobile-drawer.dl-open { transform: translateX(0); }

.dl-mobile-overlay {

  position: fixed; inset: 0;

  background: rgba(0,0,0,0.4);

  z-index: var(--dl-z-overlay);

  opacity: 0;

  pointer-events: none;

  transition: opacity var(--dl-duration-normal) var(--dl-ease);

}

.dl-mobile-overlay.dl-open { opacity: 1; pointer-events: auto; }

.dl-mobile-drawer ul { list-style: none; padding: 0; margin: 0; }

.dl-mobile-drawer li { border-bottom: 1px solid var(--dl-border); }

.dl-mobile-drawer a, .dl-mobile-drawer summary { display: block; padding: var(--dl-space-4) 0; color: var(--dl-text); text-decoration: none; font-weight: var(--dl-fw-medium); cursor: pointer; }

.dl-mobile-drawer details ul { padding-left: var(--dl-space-4); }

.dl-mobile-drawer details ul li { border: none; }

.dl-mobile-drawer details ul a { padding: var(--dl-space-2) 0; font-weight: var(--dl-fw-regular); color: var(--dl-text-muted); }



/* ========================================================================

   FOOTER

   ======================================================================== */



.dl-footer { background: var(--dl-bg-dark); color: rgba(246,241,232,0.6); margin-top: var(--dl-space-20); border-top: none; }



/* Newsletter band - Component E (locked 2026-05-07).

   Uses --dl-bg-newsletter (warm night #1A1714) so it is visually distinct

   from --dl-bg-dark (#0a0a0a) used by the footer immediately below.

   sRGB distance ≈ 23, passes the audit-tool newsletter_vs_footer_color

   detector at threshold 15. Crimson reserved for the Subscribe CTA only,

   never the band fill. Centered composition. */

body.dl-modern .dl-newsletter-band {

  background: var(--dl-bg-newsletter);

  color: var(--dl-on-dark);

  padding: var(--dl-space-12) 0;

  text-align: center;

  border-bottom: none;

  border-top: 1px solid rgba(247,245,240,0.06);

}

body.dl-modern .dl-newsletter-band > .dl-container { text-align: center; max-width: 720px; }

/* Newsletter disclaimer line under the form. Solid-tier color (no rgba alpha
 * on text per feedback_text_color_discipline.md). Replaces an inline-style
 * attribute that the G8 inline_style_project detector flagged 2026-05-21. */
body.dl-modern .dl-newsletter-band .dl-newsletter-disclaimer {
  color: #a89880;
  margin-top: var(--dl-space-3);
  display: block;
}

body.dl-modern .dl-newsletter-band h2,

body.dl-modern .dl-newsletter-band h2#dl-newsletter-title {

  color: #ffffff;

  font-family: var(--dl-font-display);

  font-size: var(--dl-text-3xl);

  line-height: var(--dl-lh-snug);

  margin: 0 auto var(--dl-space-3);

  text-align: center;

  max-width: 640px;

}

body.dl-modern .dl-newsletter-band p {

  color: rgba(255,255,255,0.92);

  margin: 0 auto var(--dl-space-6);

  text-align: center;

  max-width: 540px;

}

body.dl-modern .dl-newsletter-band small {

  display: block;

  text-align: center;

  color: rgba(255,255,255,0.7);

}

body.dl-modern .dl-newsletter-form {

  display: flex;

  gap: var(--dl-space-2);

  max-width: 520px;

  margin: 0 auto;

}

body.dl-modern .dl-newsletter-form input[type="email"] {

  flex: 1;

  height: 52px;

  padding: 0 var(--dl-space-4);

  font-size: var(--dl-text-base);

  border: 1px solid rgba(246,241,232,0.18);

  background: rgba(246,241,232,0.06);

  color: var(--dl-on-dark);

  border-radius: var(--dl-radius-md);

}

body.dl-modern .dl-newsletter-form input[type="email"]::placeholder {

  color: rgba(246,241,232,0.45);

}

body.dl-modern .dl-newsletter-form input[type="email"]:focus {

  outline: none;

  border-color: var(--dl-accent);

  background: rgba(246,241,232,0.10);

}

/* Subscribe button = the ONE CTA in this band. Crimson allowed sparingly per

   locked palette (CTAs only, not fill).  */

body.dl-modern .dl-newsletter-form button[type="submit"],

body.dl-modern .dl-newsletter-band button {

  height: 52px;

  padding: 0 var(--dl-space-8);

  background: var(--dl-accent);

  color: #ffffff;

  border: 1px solid var(--dl-accent);

  border-radius: var(--dl-radius-md);

  font-weight: 600;

  font-size: var(--dl-text-base);

  letter-spacing: 0.02em;

  cursor: pointer;

  transition: background var(--dl-duration-fast) var(--dl-ease), transform 100ms ease;

}

body.dl-modern .dl-newsletter-form button[type="submit"]:hover,

body.dl-modern .dl-newsletter-band button:hover {

  background: var(--dl-accent-hover);

  border-color: var(--dl-accent-hover);

  color: #ffffff;

  transform: translateY(-1px);

}

@media (max-width: 600px) {

  body.dl-modern .dl-newsletter-band { padding: var(--dl-space-10) 0 var(--dl-space-8); }

  body.dl-modern .dl-newsletter-form { flex-direction: column; max-width: 440px; gap: var(--dl-space-3); }

  body.dl-modern .dl-newsletter-band h2 { font-size: var(--dl-text-2xl); }

}



/* Main footer */

body.dl-modern .dl-footer-main { padding: var(--dl-space-12) 0 var(--dl-space-8); }

@media (max-width: 1023px) {

  body.dl-modern .dl-footer-main { padding: var(--dl-space-10) 0 var(--dl-space-6); }

}

@media (max-width: 600px) {

  body.dl-modern .dl-footer-main { padding: var(--dl-space-8) 0 var(--dl-space-4); }

}

body.dl-modern .dl-footer-main > .dl-container,

body.dl-modern .dl-footer-bottom > .dl-container,

body.dl-modern .dl-newsletter-band > .dl-container {

  width: 100%;

  max-width: var(--dl-container-wide);

  margin-inline: auto;

  padding-inline: var(--dl-space-6);   /* 24px gutter so content never touches edge */

}

@media (max-width: 600px) {

  body.dl-modern .dl-footer-main > .dl-container,

  body.dl-modern .dl-footer-bottom > .dl-container,

  body.dl-modern .dl-newsletter-band > .dl-container {

    padding-inline: var(--dl-space-4);

  }

}

body.dl-modern .dl-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--dl-space-10); }

body.dl-modern .dl-footer-grid h4 {

  color: rgba(246,241,232,0.92);

  font-family: var(--dl-font-body);

  font-size: 11px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.18em;

  margin: 0 0 var(--dl-space-5);

}

body.dl-modern .dl-footer-grid ul { list-style: none; padding: 0; margin: 0; }

body.dl-modern .dl-footer-grid li { margin-bottom: var(--dl-space-2); }

body.dl-modern .dl-footer-grid a,

body.dl-modern .dl-footer-bottom-links a {

  color: rgba(246,241,232,0.72);

  text-decoration: none;

  font-size: 13.5px;

  transition: color 150ms ease;

  /* WCAG 2.5.5 - make each footer nav link a 44 px+ tap target on both

     axes. Block fills the column for short labels (Blog, NDA, CDS). */

  display: flex;

  align-items: center;

  min-height: 44px;

  min-width: 44px;

  line-height: 1.3;

}

body.dl-modern .dl-footer-grid a:hover,

body.dl-modern .dl-footer-bottom-links a:hover { color: var(--dl-on-dark); }



.dl-footer-about { display: flex; flex-direction: column; gap: var(--dl-space-3); }

.dl-footer-about > .dl-footer-logo { margin-bottom: var(--dl-space-1); }

.dl-footer-about p { color: rgba(246,241,232,0.62); font-size: 13.5px; margin: 0; max-width: 320px; line-height: 1.6; }

.dl-footer-trust { display: flex; gap: var(--dl-space-2); align-items: center; flex-wrap: wrap; margin: 0; }

.dl-footer-trust img { height: 24px; opacity: 0.8; }



.dl-footer-social { display: flex; gap: var(--dl-space-2); align-items: center; margin: 0; flex-wrap: wrap; }

.dl-footer-social a {

  width: 44px; height: 44px;

  display: inline-flex; align-items: center; justify-content: center;

  background: rgba(246,241,232,0.06); border: 1px solid rgba(246,241,232,0.18); border-radius: 6px;

  color: rgba(246,241,232,0.88);

  transition: background var(--dl-duration-fast) var(--dl-ease), border-color var(--dl-duration-fast) var(--dl-ease), transform var(--dl-duration-fast) var(--dl-ease);

}

.dl-footer-social a:hover {

  background: var(--dl-accent);

  color: var(--dl-on-dark);

  border-color: var(--dl-accent);

  transform: translateY(-1px);

}

.dl-footer-social svg { width: 20px; height: 20px; }

.dl-footer-social-label {

  color: rgba(246,241,232,0.6);

  font-size: 12.5px;

  letter-spacing: 0.04em;

}



@media (max-width: 1023px) {

  body.dl-modern .dl-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--dl-space-8); }

}

@media (max-width: 600px) {

  body.dl-modern .dl-footer-grid {

    grid-template-columns: 1fr;

    gap: 0;

  }

  body.dl-modern .dl-footer-about {

    margin-bottom: var(--dl-space-2);

    padding-bottom: var(--dl-space-4);

    border-bottom: 0;

  }

  body.dl-modern .dl-logo-img--stacked { height: 76px; }

  body.dl-modern .dl-footer-about p { font-size: 13px; }

}



/* Footer accordion sections (Exams / Subjects / Resources)

   Desktop: behave like a normal column (always open, no chevron).

   Mobile: native <details> accordion, collapsed by default. */

.dl-footer-acc { border: 0; }

.dl-footer-acc > summary { list-style: none; cursor: default; }

.dl-footer-acc > summary::-webkit-details-marker { display: none; }

.dl-footer-acc > summary::marker { content: ''; }

.dl-footer-acc > summary h4 { display: inline-block; margin: 0 0 var(--dl-space-5); }

.dl-footer-acc-icon { display: none; }



/* Desktop and tablet: force the <ul> visible regardless of [open] state,

   and disable the toggle on summary so clicks do nothing visible. */

@media (min-width: 601px) {

  .dl-footer-acc > ul { display: block; }

  .dl-footer-acc > summary { pointer-events: none; }

}



@media (max-width: 600px) {

  .dl-footer-acc { border-bottom: 1px solid rgba(246,241,232,0.08); }

  .dl-footer-acc > summary {

    cursor: pointer;

    display: flex; align-items: center; justify-content: space-between;

    padding: var(--dl-space-4) 0;

    min-height: 44px; /* WCAG 2.5.5 touch target */

    transition: color 150ms ease;

  }

  .dl-footer-acc > summary:hover h4 { color: rgba(246,241,232,1); }

  .dl-footer-acc > summary h4 { margin: 0; transition: color 150ms ease; }

  .dl-footer-acc-icon {

    display: inline-block;

    width: 10px; height: 10px;

    border-right: 2px solid rgba(246,241,232,0.55);

    border-bottom: 2px solid rgba(246,241,232,0.55);

    transform: rotate(45deg);

    transition: transform 200ms ease;

    margin-right: 4px;

  }

  .dl-footer-acc[open] .dl-footer-acc-icon { transform: rotate(-135deg); }

  .dl-footer-acc > ul { padding-bottom: var(--dl-space-4); }

  .dl-footer-acc > ul > li { margin-bottom: var(--dl-space-3); }

  .dl-footer-acc > ul > li > a { display: inline-block; padding: 4px 0; min-height: 32px; }

}



/* Bottom bar */

.dl-footer-bottom {

  border-top: 1px solid rgba(246,241,232,0.08);

  padding: var(--dl-space-5) 0;

  font-size: 12px;

  color: rgba(246,241,232,0.5);

}

.dl-footer-bottom .dl-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--dl-space-3); }

.dl-footer-bottom-links { display: flex; gap: var(--dl-space-4) var(--dl-space-5); flex-wrap: wrap; }

.dl-footer-bottom-links a { color: rgba(246,241,232,0.55); text-decoration: none; transition: color 150ms ease; }

.dl-footer-bottom-links a:hover { color: var(--dl-on-dark); }

@media (max-width: 600px) {

  .dl-footer-bottom { padding: var(--dl-space-4) 0 calc(var(--dl-space-4) + env(safe-area-inset-bottom, 0px)); }

  .dl-footer-bottom .dl-container { flex-direction: column; align-items: flex-start; gap: var(--dl-space-3); }

  .dl-footer-bottom-links { gap: var(--dl-space-3) var(--dl-space-4); width: 100%; }

  .dl-footer-bottom-links a { padding: 4px 0; min-height: 32px; display: inline-flex; align-items: center; }

}





/* Footer logo wordmark: dark slate text on white footer (was white on black) */

body.dl-modern .dl-footer .dl-logo {

  color: var(--dl-on-dark);

}

body.dl-modern .dl-footer .dl-logo-text {

  color: var(--dl-on-dark);

}

body.dl-modern .dl-footer .dl-logo-text .dl-logo-accent {

  color: var(--dl-accent);

}



/* Trust pills inside footer: subtle bg with dark text */

body.dl-modern .dl-footer .dl-footer-trust .dl-badge {

  background: transparent;

  color: rgba(246,241,232,0.7);

  border: 1px solid rgba(246,241,232,0.2);

  border-radius: 2px;

}

body.dl-modern .dl-footer .dl-footer-trust .dl-badge::before {

  background: #d4a373;

}



/* Override universal footer link rule from dl-design-system.css that

   was tuned for dark footer (text-decoration underline on hover with

   crimson). On white footer, just colour shift is enough. */

body.dl-modern footer a:hover {

  color: var(--dl-on-dark);

  text-decoration: none;

}



/* ========================================================================

   H14b - Subject-tile strip + Live CA ticker (locked 2026-05-07)

   Three-row main header: utility / main / tilebar / ca-ticker

   ======================================================================== */



/* Row 2 main bar: collapse the inner so it acts as logo + actions only */

body.dl-modern .dl-header--h14b .dl-main-header__inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--dl-space-4);

}

body.dl-modern .dl-header--h14b .dl-header-actions {

  display: flex;

  align-items: center;

  gap: var(--dl-space-3);

}

body.dl-modern .dl-header--h14b .dl-search-trigger,

body.dl-modern .dl-header--h14b .dl-hamburger {

  width: 40px; height: 40px;

  display: inline-flex; align-items: center; justify-content: center;

  background: transparent;

  border: 1px solid var(--dl-line-strong);

  border-radius: 6px;

  color: var(--dl-ink);

  cursor: pointer;

  transition: background var(--dl-duration-fast) var(--dl-ease), border-color var(--dl-duration-fast) var(--dl-ease);

}

body.dl-modern .dl-header--h14b .dl-search-trigger:hover,

body.dl-modern .dl-header--h14b .dl-hamburger:hover {

  background: var(--dl-accent-soft);

  border-color: var(--dl-accent);

  color: var(--dl-accent);

}

/* Hamburger is visible at ALL widths in H14b - subjects live inside the drawer */

body.dl-modern .dl-header--h14b .dl-hamburger { display: inline-flex; }

/* Hide the legacy CTA on very narrow screens; drawer carries it */

@media (max-width: 600px) {

  body.dl-modern .dl-header--h14b .dl-header-cta-desktop { display: none; }

}



/* Row 3 - Subject-tile strip */

body.dl-modern .dl-mh-tilebar {

  background: var(--dl-paper);

  border-top: 1px solid var(--dl-line);

  border-bottom: 1px solid var(--dl-line);

}

body.dl-modern .dl-mh-tilebar-inner {

  max-width: var(--dl-container-wide);

  margin: 0 auto;

  padding: 0 var(--dl-space-4);

  display: flex;

  align-items: stretch;

}

body.dl-modern .dl-subj-tile {

  flex: 1;

  display: inline-flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 4px;

  padding: 12px 16px;

  text-decoration: none;

  color: var(--dl-ink);

  border-right: 1px solid var(--dl-line);

  transition: background var(--dl-duration-fast) var(--dl-ease), color var(--dl-duration-fast) var(--dl-ease);

  min-height: 56px;

}

body.dl-modern .dl-subj-tile:last-child { border-right: 0; }

body.dl-modern .dl-subj-tile:hover {

  background: var(--dl-paper-warm);

  color: var(--dl-accent);

}

body.dl-modern .dl-subj-tile-icon {

  display: inline-flex;

  width: 22px; height: 22px;

  opacity: 0.8;

}

body.dl-modern .dl-subj-tile-icon svg { width: 100%; height: 100%; }

body.dl-modern .dl-subj-tile-label {

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.04em;

}



/* Row 4 - Live CA ticker (auto-scroll marquee) */

body.dl-modern .dl-mh-ca {

  background: var(--dl-ink);

  color: var(--dl-on-dark);

  border-bottom: 1px solid rgba(247,245,240,0.08);

  overflow: hidden;

}

body.dl-modern .dl-mh-ca-inner {

  max-width: var(--dl-container-wide);

  margin: 0 auto;

  padding: 0 var(--dl-space-6);

  display: flex;

  align-items: center;

  gap: var(--dl-space-4);

  height: 40px;

}

body.dl-modern .dl-mh-ca-label {

  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: var(--dl-accent);

  font-weight: 700;

  font-size: 11px;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  padding-right: 14px;

  border-right: 1px solid rgba(247,245,240,0.18);

}

body.dl-modern .dl-mh-ca-dot {

  width: 6px; height: 6px;

  background: var(--dl-accent);

  border-radius: 50%;

  animation: dl-pulse-dot 1.4s ease-in-out infinite;

}

@keyframes dl-pulse-dot {

  0%, 100% { opacity: 1; }

  50%      { opacity: 0.3; }

}

body.dl-modern .dl-ticker-track {

  flex: 1;

  height: 40px;

  overflow: hidden;

  position: relative;

}

body.dl-modern .dl-ticker-tape {

  display: inline-flex;

  align-items: center;

  gap: var(--dl-space-6);

  height: 40px;

  white-space: nowrap;

  animation: dl-marquee 38s linear infinite;

  padding-left: var(--dl-space-4);

}

body.dl-modern .dl-ticker-tape a {

  color: var(--dl-on-dark);

  opacity: 0.85;

  font-size: 13px;

  text-decoration: none;

  transition: color var(--dl-duration-fast) var(--dl-ease), opacity var(--dl-duration-fast) var(--dl-ease);

}

body.dl-modern .dl-ticker-tape a:hover {

  color: var(--dl-accent);

  opacity: 1;

}

body.dl-modern .dl-ticker-sep { color: rgba(247,245,240,0.35); }

@keyframes dl-marquee {

  0%   { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}

/* Respect prefers-reduced-motion */

@media (prefers-reduced-motion: reduce) {

  body.dl-modern .dl-ticker-tape { animation: none; }

  body.dl-modern .dl-mh-ca-dot { animation: none; opacity: 1; }

}



/* Mobile: collapse the tile strip; ticker stays as a thin band */

@media (max-width: 768px) {

  body.dl-modern .dl-mh-tilebar { display: none; }

  body.dl-modern .dl-mh-ca-inner { padding: 0 var(--dl-space-4); height: 34px; gap: var(--dl-space-3); }

  body.dl-modern .dl-mh-ca-label { font-size: 10px; padding-right: 10px; letter-spacing: 0.14em; }

  body.dl-modern .dl-ticker-track { height: 34px; }

  body.dl-modern .dl-ticker-tape { height: 34px; gap: var(--dl-space-5); animation-duration: 28s; }

  body.dl-modern .dl-ticker-tape a { font-size: 12px; }

}



/* ========================================================================

   Mobile drawer - H14b drawer with Subjects / Exams / Resources groups

   ======================================================================== */



body.dl-modern .dl-mobile-drawer {

  position: fixed;

  top: 0; right: 0; bottom: 0;

  width: min(420px, 92vw);

  background: var(--dl-paper);

  z-index: calc(var(--dl-z-sticky) + 100);

  transform: translateX(100%);

  transition: transform 240ms var(--dl-ease);

  overflow-y: auto;

  padding: 0 0 calc(var(--dl-space-6) + env(safe-area-inset-bottom, 0px));

  box-shadow: -8px 0 32px rgba(0,0,0,0.12);

  /* When closed, the off-screen drawer must not intercept pointer events.

     Without this, links inside the drawer block clicks on the hamburger

     button beneath it (mobile, where stacking contexts overlap). */

  pointer-events: none;

  visibility: hidden;

}

body.dl-modern .dl-mobile-drawer.dl-open { transform: translateX(0); pointer-events: auto; visibility: visible; }

body.dl-modern .dl-mobile-overlay {

  position: fixed; inset: 0;

  background: rgba(15,15,15,0.55);

  opacity: 0;

  pointer-events: none;

  transition: opacity 200ms var(--dl-ease);

  z-index: calc(var(--dl-z-sticky) + 99);

}

body.dl-modern .dl-mobile-overlay.dl-open { opacity: 1; pointer-events: auto; }

body.dl-modern .dl-mobile-drawer-head {

  display: flex; align-items: center; justify-content: space-between;

  padding: var(--dl-space-4) var(--dl-space-5);

  border-bottom: 1px solid var(--dl-line);

  background: var(--dl-paper-warm);

}

body.dl-modern .dl-mobile-drawer-head .dl-logo-img { height: 28px; width: auto; }

body.dl-modern .dl-drawer-close {

  background: var(--dl-ink);

  color: #fff;

  border: 0;

  width: 44px; height: 44px;

  border-radius: 6px;

  font-size: 22px;

  line-height: 1;

  cursor: pointer;

  display: inline-flex; align-items: center; justify-content: center;

}

body.dl-modern .dl-drawer-group { padding: var(--dl-space-3) var(--dl-space-5); }

body.dl-modern .dl-drawer-group-label {

  font-size: 11.5px;

  font-weight: 800;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--dl-ink);

  margin: var(--dl-space-3) 0 var(--dl-space-2);

}

body.dl-modern .dl-drawer-row {

  display: flex; align-items: center; gap: var(--dl-space-3);

  padding: 7px 0;

  border-bottom: 1px solid var(--dl-line);

  text-decoration: none;

  color: var(--dl-ink);

  font-size: 14px;

  min-height: 44px; /* WCAG 2.5.5 touch target */

}

body.dl-modern .dl-drawer-row:last-child { border-bottom: 0; }

body.dl-modern .dl-drawer-row:hover { color: var(--dl-accent); }

body.dl-modern .dl-drawer-row-icn {

  width: 20px; height: 20px;

  opacity: 0.55;

  flex-shrink: 0;

  display: inline-flex;

}

body.dl-modern .dl-drawer-row-icn svg { width: 100%; height: 100%; }

body.dl-modern .dl-drawer-row-arrow {

  margin-left: auto;

  opacity: 0.4;

  font-size: 18px;

}

body.dl-modern .dl-drawer-cta {

  display: block;

  margin: var(--dl-space-4) var(--dl-space-5) 0;

  padding: 14px;

  background: var(--dl-accent);

  color: #fff;

  text-align: center;

  border-radius: 6px;

  font-weight: 600;

  font-size: 14px;

  text-decoration: none;

}

body.dl-modern .dl-drawer-cta:hover { background: var(--dl-accent-hover); }



/* ========================================================================

   H14d v2 - Full primary nav on desktop + ticker band; hamburger only on

   mobile (locked 2026-05-07).

   Three-row main header:

     Row 1 - utility bar

     Row 2 - main bar (logo + primary nav + actions)

     Row 3 - Live CA ticker band (full-width marquee)

   Breakpoints:

     ≥1024 px: primary nav visible, hamburger hidden

     ≤1023 px: primary nav hidden, hamburger visible

     ≤768  px: ticker band hidden as well

   ======================================================================== */



body.dl-modern .dl-header--h14d .dl-main-header__inner {

  display: flex;

  align-items: center;

  gap: var(--dl-space-5);

  min-height: 72px;

}

body.dl-modern .dl-header--h14d .dl-logo {

  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  /* WCAG 2.5.5 - expand the logo link's tappable area to ≥44 px even when

     the wordmark image itself shrinks at narrow widths. */

  padding-block: 10px;

}

body.dl-modern .dl-header--h14d .dl-logo-img {

  height: 38px;

  width: auto;

}

body.dl-modern .dl-header--h14d .dl-header-actions {

  display: flex;

  align-items: center;

  gap: var(--dl-space-2);

  flex-shrink: 0;

  margin-left: auto; /* push actions to the right when nav is hidden */

}

body.dl-modern .dl-header--h14d .dl-search-trigger,

body.dl-modern .dl-header--h14d .dl-hamburger {

  width: 44px; height: 44px;

  display: inline-flex; align-items: center; justify-content: center;

  background: transparent;

  border: 1px solid var(--dl-line-strong);

  border-radius: 6px;

  color: var(--dl-ink);

  cursor: pointer;

  transition: background var(--dl-duration-fast) var(--dl-ease), border-color var(--dl-duration-fast) var(--dl-ease);

}

body.dl-modern .dl-header--h14d .dl-search-trigger:hover,

body.dl-modern .dl-header--h14d .dl-hamburger:hover {

  background: var(--dl-accent-soft);

  border-color: var(--dl-accent);

  color: var(--dl-accent);

}



/* Primary nav (desktop ≥1024 px) */

body.dl-modern .dl-primary-nav { display: none; flex: 0 1 auto; }

body.dl-modern .dl-primary-nav-list {

  list-style: none;

  margin: 0; padding: 0;

  display: flex;

  align-items: center;

  gap: var(--dl-space-5);

}

body.dl-modern .dl-primary-nav-item { position: relative; }

body.dl-modern .dl-primary-nav-link {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  padding: 24px 0;

  font-size: 14px;

  font-weight: 600;

  color: var(--dl-ink);

  text-decoration: none;

  letter-spacing: 0.01em;

  position: relative;

  transition: color var(--dl-duration-fast) var(--dl-ease);

}

body.dl-modern .dl-primary-nav-link::after {

  content: '';

  position: absolute;

  left: 0; right: 0; bottom: 18px;

  height: 2px;

  background: var(--dl-accent);

  transform: scaleX(0);

  transform-origin: center;

  transition: transform var(--dl-duration-fast) var(--dl-ease);

}

body.dl-modern .dl-primary-nav-link:hover,

body.dl-modern .dl-primary-nav-link:focus-visible {

  color: var(--dl-accent);

}

body.dl-modern .dl-primary-nav-link:hover::after,

body.dl-modern .dl-primary-nav-link:focus-visible::after {

  transform: scaleX(1);

}

body.dl-modern .dl-nav-caret {

  margin-left: 2px;

  opacity: 0.7;

  transition: transform var(--dl-duration-fast) var(--dl-ease);

}

body.dl-modern .dl-has-dropdown:hover .dl-nav-caret,

body.dl-modern .dl-has-dropdown:focus-within .dl-nav-caret {

  transform: rotate(180deg);

}



/* Mega-menu dropdown - appears on hover/focus of Subjects */

body.dl-modern .dl-mega-menu {

  position: absolute;

  top: 100%;

  left: -16px;

  min-width: 480px;

  background: var(--dl-paper);

  border: 1px solid var(--dl-line);

  border-radius: 8px;

  box-shadow: 0 12px 32px rgba(15,15,15,0.10);

  padding: 16px;

  opacity: 0;

  visibility: hidden;

  transform: translateY(6px);

  pointer-events: none;

  transition: opacity 160ms var(--dl-ease), transform 160ms var(--dl-ease), visibility 160ms;

  z-index: 5;

}

body.dl-modern .dl-has-dropdown:hover .dl-mega-menu,

body.dl-modern .dl-has-dropdown:focus-within .dl-mega-menu {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

  pointer-events: auto;

}

body.dl-modern .dl-mega-menu-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 4px;

}

body.dl-modern .dl-mega-item {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 10px 12px;

  border-radius: 6px;

  text-decoration: none;

  color: var(--dl-ink);

  font-size: 13px;

  font-weight: 500;

  transition: background var(--dl-duration-fast) var(--dl-ease), color var(--dl-duration-fast) var(--dl-ease);

}

body.dl-modern .dl-mega-item:hover,

body.dl-modern .dl-mega-item:focus-visible {

  background: var(--dl-paper-warm);

  color: var(--dl-accent);

}

body.dl-modern .dl-mega-item-icn {

  width: 18px; height: 18px;

  display: inline-flex;

  flex-shrink: 0;

  color: var(--dl-accent);

  opacity: 0.8;

}

body.dl-modern .dl-mega-item-icn svg { width: 100%; height: 100%; }

body.dl-modern .dl-mega-item-label { white-space: nowrap; }



/* Ticker band specific to H14d (overrides H14b global rules where needed) */

body.dl-modern .dl-header--h14d .dl-mh-ca .dl-ticker-item {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--dl-on-dark);

  opacity: 0.85;

  font-size: 13px;

  text-decoration: none;

  transition: color var(--dl-duration-fast) var(--dl-ease), opacity var(--dl-duration-fast) var(--dl-ease);

}

body.dl-modern .dl-header--h14d .dl-mh-ca .dl-ticker-item:hover {

  color: var(--dl-accent);

  opacity: 1;

}

body.dl-modern .dl-header--h14d .dl-mh-ca .dl-ticker-icn {

  width: 14px; height: 14px;

  display: inline-flex;

  flex-shrink: 0;

  color: var(--dl-accent);

  opacity: 0.9;

}

body.dl-modern .dl-header--h14d .dl-mh-ca .dl-ticker-icn svg { width: 100%; height: 100%; }



/* ---- Breakpoint behaviour ---- */



/* Desktop ≥1024 px - show full nav, hide hamburger */

@media (min-width: 1024px) {

  body.dl-modern .dl-primary-nav { display: block; }

  body.dl-modern .dl-header--h14d .dl-hamburger { display: none; }

  body.dl-modern .dl-header--h14d .dl-header-actions { margin-left: 0; }

}



/* Tablet 769–1023 - hamburger visible, primary nav hidden, ticker still shown */

@media (max-width: 1023px) {

  body.dl-modern .dl-primary-nav { display: none; }

  body.dl-modern .dl-header--h14d .dl-hamburger { display: inline-flex; }

}



/* Hide the desktop CTA on mobile; the hamburger drawer carries it.
   Extended from 600px to 768px on 2026-05-15: the CTA at 40px height
   fails WCAG 2.5.5 touch-target between 600-768px viewports. The
   drawer's own CTA is full-width and meets 44px. */

@media (max-width: 768px) {

  body.dl-modern .dl-header--h14d .dl-header-cta-desktop { display: none; }

}



/* Mobile ≤768 px - ticker band hides; bar collapses to logo + search + hamburger */

@media (max-width: 768px) {

  body.dl-modern .dl-header--h14d .dl-mh-ca { display: none; }

  body.dl-modern .dl-header--h14d .dl-main-header__inner {

    min-height: 60px;

    justify-content: space-between;

    gap: var(--dl-space-3);

  }

  body.dl-modern .dl-header--h14d .dl-logo-img { height: 30px; }

}



/* Narrow mobile + zoom-200 reflow safety (WCAG 1.4.10).

   At ≤480 px CSS px (or 320 px viewport at 200 % zoom) the desktop button

   row overflows. Drop search-trigger (drawer + Ctrl+K still expose search),

   tighten gap and logo height so logo + hamburger fit within the viewport. */

@media (max-width: 480px) {

  body.dl-modern .dl-header--h14d .dl-main-header__inner {

    gap: var(--dl-space-2);

    padding-inline: var(--dl-space-3);

  }

  body.dl-modern .dl-header--h14d .dl-logo-img { height: 24px; max-width: 60vw; width: auto; object-fit: contain; object-position: left center; }

  body.dl-modern .dl-header--h14d .dl-search-trigger { display: none; }

}



/* ========================================================================

   F16c - Footer stat row (logo inside) + mobile collapsibles (locked 2026-05-07)

   Stat row sits between Newsletter band and the link grid.

   Desktop: logo left + 4 stats inline; Mobile: logo top + 2x2 stat grid;

   Link sections (Exams / Subjects / Resources) collapse to <details>

   accordions ≤600 px (existing behaviour, retained).

   ======================================================================== */



body.dl-modern .dl-footer-stat-row {

  background: var(--dl-bg-newsletter, var(--dl-ink));

  border-top: 0;

  border-bottom: 0;

  padding: var(--dl-space-8) 0;

  color: var(--dl-on-dark);

}

body.dl-modern .dl-footer-stat-row__inner {

  display: flex;

  align-items: center;

  gap: var(--dl-space-8);

  width: 100%;

  max-width: var(--dl-container-wide);

  margin-inline: auto;

  padding-inline: var(--dl-space-6);

}

body.dl-modern .dl-footer-stat-logo {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: var(--dl-space-2);

  flex-shrink: 0;

  min-width: 0;

}

body.dl-modern .dl-footer-stat-logo .dl-footer-logo {

  display: inline-flex;

  align-items: center;

}

body.dl-modern .dl-footer-stat-logo .dl-logo-img--stacked {

  height: 64px;

  width: auto;

}

body.dl-modern .dl-footer-est {

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: rgba(246,241,232,0.55);

}

body.dl-modern .dl-footer-stats {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: var(--dl-space-6);

  flex: 1 1 auto;

  min-width: 0;

}

body.dl-modern .dl-footer-stat-tile {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 4px;

  padding-left: var(--dl-space-4);

  border-left: 1px solid rgba(246,241,232,0.10);

}

body.dl-modern .dl-footer-stat-num {

  font-family: var(--dl-font-display, var(--dl-font-body));

  font-size: clamp(26px, 2.4vw, 36px);

  font-weight: 700;

  line-height: 1.05;

  color: var(--dl-on-dark);

  letter-spacing: -0.01em;

}

body.dl-modern .dl-footer-stat-num small {

  font-size: 0.6em;

  color: var(--dl-accent);

  margin-left: 1px;

  font-weight: 700;

}

body.dl-modern .dl-footer-stat-label {

  font-size: 12px;

  letter-spacing: 0.04em;

  color: rgba(246,241,232,0.62);

}

/* Text-headline tiles (non-numeric) - smaller headline, slightly stronger label

   so the visual weight stays consistent with the numeric tiles. */

body.dl-modern .dl-footer-stat-tile--text .dl-footer-stat-num {

  font-family: var(--dl-font-display, var(--dl-font-body));

  font-size: clamp(18px, 1.5vw, 22px);

  font-weight: 700;

  line-height: 1.15;

  letter-spacing: -0.005em;

}

body.dl-modern .dl-footer-stat-tile--text .dl-footer-stat-label {

  font-size: 12.5px;

  color: rgba(246,241,232,0.7);

  line-height: 1.45;

  max-width: 26ch;

}



/* Tablet: stats as 2x2 grid, logo still on left */

@media (max-width: 1023px) {

  body.dl-modern .dl-footer-stat-row__inner {

    gap: var(--dl-space-6);

  }

  body.dl-modern .dl-footer-stats {

    grid-template-columns: repeat(2, 1fr);

    gap: var(--dl-space-5) var(--dl-space-6);

  }

}



/* Mobile: stack - logo on top, then 2x2 stat grid */

@media (max-width: 600px) {

  body.dl-modern .dl-footer-stat-row {

    padding: var(--dl-space-6) 0;

  }

  body.dl-modern .dl-footer-stat-row__inner {

    flex-direction: column;

    align-items: stretch;

    gap: var(--dl-space-5);

    padding-inline: var(--dl-space-4);

  }

  body.dl-modern .dl-footer-stat-logo {

    align-items: center;

    text-align: center;

  }

  body.dl-modern .dl-footer-stat-logo .dl-logo-img--stacked {

    height: 56px;

  }

  body.dl-modern .dl-footer-est {

    text-align: center;

  }

  body.dl-modern .dl-footer-stats {

    grid-template-columns: repeat(2, 1fr);

    gap: var(--dl-space-4);

  }

  body.dl-modern .dl-footer-stat-tile {

    align-items: center;

    text-align: center;

    padding-left: 0;

    border-left: 0;

    border-top: 1px solid rgba(246,241,232,0.08);

    padding-top: var(--dl-space-3);

  }

}

/* === dl-components.css (34,710 bytes) === */
/*
  DigitallyLearn - Components stylesheet.
  Consolidated CSS for editorial components shipped on single posts and KB
  pages: byline, inline newsletter, KB widgets, TOC, share buttons, related
  posts, breadcrumb band. Loaded once and cached across pages so that
  multi-page sessions don't re-download ~140 KB of inline styles.

  Source PHP files (markup + behaviour):
    inc/breadcrumbs.php           breadcrumb band
    inc/dl-byline.php             byline strip
    inc/dl-inline-newsletter.php  mid-article newsletter
    inc/dl-kb-widgets.php         KB topic widgets
    inc/dl-toc.php                table of contents
    inc/dl-article-tail.php       social share + related posts
*/

/* ============================================================
   1. BREADCRUMB BAND
   ============================================================ */
.dl-breadcrumb-band {
    background: var(--dl-on-dark);
    border-bottom: 1px solid rgba(26,23,20,0.12);
}
.dl-breadcrumb-band .dl-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 42.5px;
}
.dl-breadcrumb-band .dl-breadcrumb {
    background: transparent;
    border-bottom: none;
    margin: 0;
}
.dl-breadcrumb {
    font-size: 14px;
    color: #5a4f44;
    padding: 14px 0;
    background: var(--dl-on-dark);
    border-bottom: 1px solid rgba(26,23,20,0.12);
    margin: 0 0 28px;
}
.dl-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}
.dl-breadcrumb li {
    display: flex;
    align-items: center;
}
.dl-breadcrumb a {
    color: #5a4f44;
    text-decoration: none;
    transition: color 150ms ease;
}
.dl-breadcrumb a:hover {
    color: var(--dl-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dl-breadcrumb .sep {
    margin: 0 10px;
    color: #bfb4a3;
}
.dl-breadcrumb [aria-current="page"] {
    color: var(--dl-ink);
    font-weight: 600;
}
@media (max-width: 600px) {
    .dl-breadcrumb-band .dl-container { padding: 0 16px; }
    .dl-breadcrumb { font-size: 13px; padding: 10px 0; }
    .dl-breadcrumb .sep { margin: 0 6px; }
}

/* ============================================================
   2. BYLINE STRIP
   ============================================================ */
/* Editorial byline - 5th rewrite 2026-05-06 (final). Single-line layout
   per user request:
     [S]  By Shikher Goyal · Published Aug 26, 2020 · Updated Jul 4, 2025 · 11 min read
   Avatar is a flex sibling on the left; the entire meta string is one
   paragraph at uniform 13px so all four facts fit on one line within
   the ~720-810px article column. Falls back to natural wrap on mobile. */
.dl-byline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 32px;
    padding: 16px 0 18px;
    border-top: 1px solid rgba(26,23,20,0.12);
    border-bottom: 1px solid rgba(26,23,20,0.12);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
.dl-byline-line {
    margin: 0;
    align-self: center;
}
.dl-byline-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dl-accent);
    color: var(--dl-on-dark);
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
    align-self: center;
}
/* Photo-based avatar - same 36px circle as the letter variant.
   Two markups are supported:
     1. Legacy <img class="dl-byline-avatar dl-byline-avatar--photo">
     2. New <picture class="dl-byline-avatar dl-byline-avatar--photo"><source><img></picture>
       (round-2 fix 2026-05-07: only the INNER <img> carries the circle
       styling. The outer <picture> is a transparent inline-block wrapper -
       earlier the wrapper ALSO had bg+border+circle, which produced a
       two-stacked-circles bug when wpautop injected <br> between source
       and img.)
   The locks defeat Astra's default `.entry-content img { width:
   auto }` rule which was rendering the photo at native ~852px width.
   object-fit: cover crops the photo into the circle; object-position biases
   up to keep the face centred. */
picture.dl-byline-avatar--photo {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    flex-shrink: 0;
    align-self: center;
}
img.dl-byline-avatar--photo,
picture.dl-byline-avatar--photo > img {
    width: 36px;
    height: 36px;
    max-width: 36px;
    min-width: 36px;
    object-fit: cover;
    object-position: 50% 30%;
    background: #efe7d6;
    border: 1px solid rgba(26,23,20,0.15);
    border-radius: 50%;
    margin: 0;
    padding: 0;
    display: block;
    flex-shrink: 0;
    align-self: center;
    vertical-align: middle;
}
.dl-byline-line {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #5a4f44;
    flex: 1 1 auto;
    min-width: 0;
    /* Flex with wrap so author / sep / fact spans break naturally to
       the next row. The previous nowrap + ellipsis approach truncated
       Updated date on tablet/desktop columns narrower than ~500px
       (notably on the blog post where the byline carries 4 facts).
       The PHP renderer implodes spans with no whitespace between them,
       so a plain white-space: normal does not provide break
       opportunities; flex-wrap fixes that. 2026-05-11. */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    row-gap: 2px;
    overflow: visible;
}
.dl-byline-by {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
    font-weight: 700;
    color: #7a6f64;
    margin-right: 1px;
    vertical-align: 1px;
}
.dl-byline-author {
    color: var(--dl-ink);
    white-space: nowrap;
}
.dl-byline-author a {
    color: var(--dl-ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 150ms ease, color 150ms ease;
    /* Touch-target via padding on the parent .dl-byline-line, not by
       inflating this inline link to 44px tall. The previous
       inline-block + min-height: 44px + padding-block: 11px forced the
       byline to wrap across 3 lines on mobile (the avatar at 28px
       height was visually disconnected from the 66px-tall link block).
       Locked 2026-05-11 after mobile byline broke. */
}
.dl-byline-author a:hover {
    color: var(--dl-accent);
    border-bottom-color: var(--dl-accent);
}
/* Touch-target on the byline container, not on the link itself. */
.dl-byline-line { padding-block: 6px; }
@media (max-width: 700px) {
    .dl-byline-line { padding-block: 4px; }
}
.dl-byline-fact {
    color: #5a4f44;
    white-space: nowrap;
}
.dl-byline-fact time {
    color: var(--dl-ink);
    font-weight: 500;
}
.dl-byline-sep {
    color: #b5a594;
    margin: 0 7px;
    font-weight: 700;
}
@media (max-width: 700px) {
    .dl-byline { gap: 10px; }
    .dl-byline-avatar { width: 28px; height: 28px; font-size: 12px; }
    .dl-byline-line { font-size: 12px; }
    .dl-byline-sep { margin: 0 5px; }
    /* Force the byline to render as exactly two lines on mobile:
         Line 1: BY Shikher Goyal
         Line 2: Published <date> . N min read
       Achieved by giving the author full flex-basis (pushes the rest
       to row 2), hiding the separator that would dangle after author
       on row 1, AND hiding the Updated fact + its leading separator
       (3 facts plus 2 separators would otherwise overflow row 2 at
       320 / 375 / 414 viewports). 2026-05-11. */
    .dl-byline-author { flex-basis: 100%; }
    .dl-byline-author + .dl-byline-sep { display: none; }
    .dl-byline-fact--updated { display: none; }
    .dl-byline-fact--updated + .dl-byline-sep { display: none; }
}
/* Very narrow phones (320 / 375) can't fit "Published date . N min read"
   on line 2 even with Updated hidden. Drop the reading-time fact too
   so the byline stays strict 2-line on every mobile width. */
@media (max-width: 400px) {
    .dl-byline-fact--reading { display: none; }
    .dl-byline-fact--reading + .dl-byline-sep,
    .dl-byline-sep:has(+ .dl-byline-fact--reading) { display: none; }
}

/* ============================================================
   3. INLINE NEWSLETTER (mid-article)
   ============================================================ */
body.dl-modern .dl-inline-newsletter,
body.dl-modern .entry-content .dl-inline-newsletter {
    margin: 36px 0;
    background: var(--dl-ink);
    color: var(--dl-on-dark);
    border-radius: 4px;
    padding: 28px 28px;
    font-family: var(--dl-font-body);
    position: relative;
    overflow: hidden;
}
.dl-inline-newsletter::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--dl-accent);
}
.dl-inline-newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: center;
}
body.dl-modern #dl-main#dl-main .dl-inline-newsletter-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    font-weight: 700;
    color: #FF6A5E !important;   /* bright Swiss-red tint; double-id beats the #dl-main heading/prose !important */
    margin: 0 0 8px;
}
body.dl-modern #dl-main#dl-main .dl-inline-newsletter-title {
    font-family: var(--dl-font-display);
    font-size: 22px;
    font-weight: 700;
    color: #FBF3EC !important;   /* crisp cream; was forced to #555 by the #dl-main h2-h5 rule */
    line-height: 1.25;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
    background: transparent;
}
body.dl-modern #dl-main#dl-main .dl-inline-newsletter-sub {
    font-size: 13px;
    color: rgba(251,243,236,0.92) !important;   /* lifted + double-id to beat the prose #555 */
    line-height: 1.55;
    margin: 0;
}
.dl-inline-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dl-inline-newsletter-form input[type="email"] {
    height: 46px;
    min-height: 46px;
    padding: 0 16px;
    background: var(--dl-ink);
    border: 1px solid rgba(246,241,232,0.20);
    border-radius: 8px;
    color: var(--dl-on-dark);
    font-size: 15px;
    font-family: var(--dl-font-body);
    line-height: 44px;
    box-sizing: border-box;
    width: 100%;
}
.dl-inline-newsletter-form input[type="email"]:focus,
.dl-inline-newsletter-form input[type="email"]:focus-visible {
    outline: none;
    border: 1px solid var(--dl-accent);
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.25);
}
.dl-inline-newsletter-form input[type="email"]::placeholder {
    color: rgba(246,241,232,0.55);
    opacity: 1;
}
.dl-inline-newsletter-form button[type="submit"] {
    height: 46px;
    padding: 0 22px;
    background: var(--dl-accent);
    color: var(--dl-on-dark);
    border: none;
    border-radius: 2px;
    font-size: 15px;
    font-weight: 600;
    font-family: var(--dl-font-body);
    cursor: pointer;
    transition: background 150ms ease, transform 80ms ease, box-shadow 150ms ease;
}
.dl-inline-newsletter-form button[type="submit"]:hover {
    background: var(--dl-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(230, 57, 70, 0.35);
}
.dl-inline-newsletter-form button[type="submit"]:active {
    transform: translateY(0);
    background: var(--dl-accent-hover);
}
@media (max-width: 720px) {
    .dl-inline-newsletter { padding: 24px 22px; }
    .dl-inline-newsletter-inner {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .dl-inline-newsletter-title { font-size: 19px; }
}

/* ============================================================
   4. KB WIDGETS (Practice CTA + Linked CA + PYQs + Read Next)
   ============================================================ */
.dl-kb-widgets {
    margin: 48px 0 24px;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
.dl-kb-practice-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 24px 28px;
    background: var(--dl-paper-soft);
    border: 1px solid var(--dl-accent);
    border-radius: 4px;
    margin-bottom: 32px;
}
.dl-kb-practice-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    font-weight: 600;
    color: var(--dl-accent);
    margin: 0 0 6px;
}
.dl-kb-practice-title {
    font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--dl-ink);
    margin: 0;
    line-height: 1.3;
}
.dl-kb-practice-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 12px 22px;
    background: var(--dl-accent);
    color: var(--dl-on-dark);
    border-radius: 2px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background 150ms ease, transform 80ms ease, box-shadow 150ms ease;
}
.dl-kb-practice-btn:hover {
    background: var(--dl-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(230, 57, 70, 0.35);
}
.dl-kb-practice-btn:active {
    transform: translateY(0);
    background: var(--dl-accent-hover);
}
.dl-kb-widget {
    margin: 32px 0;
}
.dl-kb-widget-title {
    font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--dl-ink);
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--dl-accent);
    letter-spacing: -0.01em;
}
.dl-kb-widget-list {
    display: grid;
    gap: 10px;
}
.dl-kb-widget-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--dl-on-dark);
    border: 1px solid rgba(26,23,20,0.12);
    border-radius: 4px;
    text-decoration: none;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.dl-kb-widget-item:hover {
    border-color: var(--dl-accent);
    transform: translateX(4px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.dl-kb-widget-item-title {
    color: var(--dl-ink);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
}
.dl-kb-widget-item:hover .dl-kb-widget-item-title { color: var(--dl-accent); }
.dl-kb-widget-item-meta {
    flex-shrink: 0;
    font-size: 12px;
    color: #7a6f64;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
@media (max-width: 720px) {
    .dl-kb-practice-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 22px;
    }
    .dl-kb-practice-btn { width: 100%; justify-content: center; }
    .dl-kb-widget-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}

/* ============================================================
   5. TABLE OF CONTENTS
   ============================================================ */
.dl-toc {
    /* 2026-05-17: constrain to article column width (728px) so the TOC
     * stops overflowing into the wider entry-content area. !important
     * needed to beat `body.dl-modern .entry-content > * { max-width: 100% }`
     * in dl-reset.css which has higher specificity. */
    margin: 0 auto 32px !important;
    padding: 0;
    background: var(--dl-paper-soft);
    border: 1px solid rgba(26,23,20,0.12);
    border-radius: 4px;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    max-width: 728px !important;
    box-sizing: border-box;
}
.dl-toc details { padding: 0; }
.dl-toc-summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 20px;
    display: flex;
    align-items: baseline;            /* baseline-align label + count + chevron */
    gap: 12px;
    user-select: none;
    line-height: 1.2;
}
.dl-toc-summary::-webkit-details-marker { display: none; }
.dl-toc-summary::marker { content: ""; }
.dl-toc-label {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dl-ink);
}
.dl-toc-count {
    font-size: 13px;
    color: #7a6f64;
}
.dl-toc-chevron {
    margin-left: auto;
    width: 12px;
    height: 12px;
    color: #5a4f44;
    flex-shrink: 0;
    align-self: center;               /* override baseline so the SVG centres vertically */
    transition: transform 200ms ease;
}
.dl-toc details[open] .dl-toc-chevron { transform: rotate(180deg); }
.dl-toc-list {
    list-style: none;
    padding: 0 20px 20px;
    margin: 0;
    border-top: 1px solid rgba(26,23,20,0.12);
    padding-top: 14px;
    counter-reset: toc-h2-counter;
}
/* TOC numbering — only H2 items increment the counter. H3/H4 sub-items
   render with a "·" bullet so they don't pollute the H2 sequence.
   Locked 2026-05-16 after ENSO Part 1 TOC audit showed "18", "27" etc.
   because the previous selector incremented on every .dl-toc-item. */
.dl-toc-item {
    margin: 4px 0;
    line-height: 1.55;
}
.dl-toc-h2 {
    counter-increment: toc-h2-counter;
}
/* High specificity to defeat body.dl-modern .entry-content li a */
body.dl-modern .dl-toc-item a,
.dl-toc-item a {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    color: var(--dl-ink);
    text-decoration: none;
    text-decoration-thickness: 0;
    font-size: 14px;
    padding: 6px 0;
    transition: color 150ms ease;
}
body.dl-modern .dl-toc-item a:hover {
    color: var(--dl-accent);
    text-decoration: none;
}
.dl-toc-h2 a::before {
    content: counter(toc-h2-counter, decimal-leading-zero);
    font-size: 11px;
    font-weight: 600;
    color: var(--dl-accent);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.dl-toc-item a:hover { color: var(--dl-accent); }
.dl-toc-h3 { padding-left: 18px; }
.dl-toc-h3 a::before {
    content: "·";
    color: #bfb4a3;
}
.dl-toc-h4 { padding-left: 36px; }
.dl-toc-h4 a::before {
    content: "·";
    color: #bfb4a3;
}
.dl-toc-h4 a {
    font-size: 13px;
    color: #5a4f44;
}
.dl-toc-item a:focus-visible {
    outline: 2px solid var(--dl-accent);
    outline-offset: 2px;
    border-radius: 2px;
}
html { scroll-padding-top: 100px; }

/* ============================================================
   6. SOCIAL SHARE
   ============================================================ */
.dl-share {
    /* Component I (locked 2026-05-07): bounded share-row with strong, even
       top + bottom hairlines. Earlier 0.35 ink hairlines were inconsistent
       with the related-posts row (2px red) and comments (no rule), so the
       share section read as half-finished. Now uses 0.22 ink hairlines on
       both edges, paired with white-bg buttons matching the unified card
       treatment from Component H. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 36px 0 28px;
    padding: 22px 0;
    border-top: 1px solid rgba(26,23,20,0.22);
    border-bottom: 1px solid rgba(26,23,20,0.22);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
.dl-share-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #5a4f44;
    margin-right: 6px;
}
.dl-share-btn {
    /* Component I: bulletproof box-shadow inset outline (immune to Astra's
       `a { border-bottom: 0 }` which strips border-based bottoms
       on anchor-cards; share buttons are <a> elements). Locked 2026-05-11. */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(26,23,20,0.32);
    background: var(--dl-paper);
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--dl-ink);
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 150ms ease, color 150ms ease, background 150ms ease, transform 80ms ease;
}
.dl-share-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.dl-share-btn:hover {
    box-shadow: inset 0 0 0 1px var(--dl-accent);
    color: var(--dl-accent);
    transform: translateY(-1px);
}
.dl-share-copied {
    border-color: #16A34A;
    color: #16A34A;
}
.dl-share-btn:focus-visible {
    outline: 2px solid var(--dl-accent);
    outline-offset: 2px;
}

/* ============================================================
   7. RELATED POSTS
   ============================================================ */
.dl-related {
    margin: 56px 0 56px;
    padding-top: 36px;
    padding-bottom: 36px;
    border-top: 2px solid var(--dl-accent);
    border-bottom: 2px solid var(--dl-accent);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    /* Defend against any parent-theme hide rule on .entry-content sections. */
    display: block;
    visibility: visible;
    opacity: 1;
}
.dl-related-title {
    font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--dl-ink);
    margin: 0 0 24px;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-indent: 0;
    /* Defend against Astra's `.entry-content h3` rules that could otherwise
       indent / hide / restyle this title. */
    display: block;
    visibility: visible;
    opacity: 1;
}
.dl-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.dl-related-item {
    display: flex;
    flex-direction: column;
    /* Component H: bulletproof box-shadow inset outline (immune to Astra's
       `a { border-bottom: 0 }`; .dl-related-item is an <a>).
       The drop-shadow gives elevation; the inset shadow draws the hairline
       outline that border can't deliver reliably. Locked 2026-05-11. */
    background: var(--dl-paper);
    border: 0;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(26,23,20,0.32), 0 1px 2px rgba(20,18,16,0.04);
    overflow: hidden;
    text-decoration: none;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.dl-related-item:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px rgba(26,23,20,0.45), 0 14px 30px rgba(0, 0, 0, 0.07);
}
.dl-related-thumb {
    aspect-ratio: 16 / 9;
    /* Per-card fallback gradient is set via --dl-fallback-bg inline style
       in dl-article-tail.php (different gradient per post slug). Default
       to paper-deep when no inline value provided. */
    background: var(--dl-fallback-bg, #efe7d6);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dl-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms ease;
}
/* Fallback gradient block when post has no featured image. The PHP sets
   the gradient inline. We just style the centred initial overlay. */
.dl-related-thumb--fallback {
    background: linear-gradient(135deg, var(--dl-accent) 0%, #d4a373 100%);
}
.dl-related-thumb-initial {
    font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif;
    font-size: 56px;
    font-weight: 600;
    color: rgba(246, 241, 232, 0.85);
    line-height: 1;
    letter-spacing: -0.02em;
}
/* Hide broken <img> + reveal the dark thumb bg behind it. The
   onerror attribute (added inline) will set this class. */
.dl-related-thumb img[src=""],
.dl-related-thumb img:not([src]) {
    display: none;
}
.dl-related-item:hover .dl-related-thumb img { transform: scale(1.04); }
.dl-related-body { padding: 18px 20px; flex-grow: 1; display: flex; flex-direction: column; }
.dl-related-cat {
    font-size: 11px;
    font-weight: 600;
    color: var(--dl-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}
.dl-related-body h4 {
    font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--dl-ink);
    line-height: 1.3;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.dl-related-meta {
    margin-top: auto;
    padding-top: 12px;
    font-size: 12px;
    color: #7a6f64;
}
@media (max-width: 720px) {
    .dl-related-grid { grid-template-columns: 1fr; }
    .dl-share-btn { padding: 8px 12px; font-size: 12px; }
    .dl-share-text { display: none; }
    .dl-share-btn[aria-label="Copy link"] .dl-share-text,
    .dl-share-copy.dl-share-copied .dl-share-text { display: inline; }
}

/* ============================================================
   8. SEARCH (no-results recovery panel)
   ============================================================ */
.dl-search-empty {
    margin: 0 auto;
    padding: 60px 0 80px;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
.dl-search-empty-inner {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}
.dl-search-empty-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    font-weight: 600;
    color: var(--dl-accent);
    margin: 0 0 16px;
}
.dl-search-empty-title {
    font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    color: var(--dl-ink);
    margin: 0 0 14px;
    line-height: 1.2;
    letter-spacing: -0.015em;
}
.dl-search-empty-sub {
    font-size: 16px;
    color: #5a4f44;
    margin: 0 auto 32px;
    max-width: 50ch;
    line-height: 1.6;
}
.dl-search-empty-form {
    display: flex;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto 40px;
}
.dl-search-empty-form input[type="search"] {
    flex: 1;
    height: 48px;
    padding: 0 18px;
    border: 1px solid rgba(26,23,20,0.25);
    border-radius: 2px;
    font-size: 15px;
    font-family: inherit;
    color: var(--dl-ink);
    box-sizing: border-box;
}
.dl-search-empty-form input[type="search"]:focus,
.dl-search-empty-form input[type="search"]:focus-visible {
    outline: none;
    border-color: var(--dl-accent);
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.18);
}
.dl-search-empty-form button {
    height: 48px;
    padding: 0 22px;
    background: var(--dl-accent);
    color: var(--dl-on-dark);
    border: none;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease, transform 80ms ease;
}
.dl-search-empty-form button:hover {
    background: var(--dl-accent-hover);
    transform: translateY(-1px);
}
.dl-search-empty-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    text-align: left;
}
.dl-search-empty-card {
    display: block;
    padding: 20px 22px;
    background: var(--dl-on-dark);
    border: 1px solid rgba(26,23,20,0.12);
    border-radius: 4px;
    text-decoration: none;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.dl-search-empty-card:hover {
    border-color: var(--dl-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.dl-search-empty-card-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    font-weight: 600;
    color: var(--dl-accent);
    margin: 0 0 6px;
}
.dl-search-empty-card-title {
    font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--dl-ink);
    margin: 0 0 4px;
}
.dl-search-empty-card-sub {
    font-size: 13px;
    color: #5a4f44;
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 600px) {
    .dl-search-empty-grid { grid-template-columns: 1fr; }
    .dl-search-empty-form { flex-direction: column; }
}

/* Search results filter bar */
.dl-search-meta {
    margin: 0 0 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(26,23,20,0.12);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
.dl-search-count {
    font-size: 14px;
    color: #5a4f44;
    margin: 0 0 14px;
}
.dl-search-count strong { color: var(--dl-ink); }
.dl-search-count em { font-style: italic; color: var(--dl-ink); }
.dl-search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.dl-search-filter {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid rgba(26,23,20,0.25);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: #5a4f44;
    text-decoration: none;
    background: var(--dl-on-dark);
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.dl-search-filter:hover {
    border-color: var(--dl-accent);
    color: var(--dl-accent);
}
.dl-search-filter.is-active {
    background: var(--dl-ink);
    border-color: var(--dl-ink);
    color: var(--dl-on-dark);
}
.dl-search-filter:focus-visible {
    outline: 2px solid var(--dl-accent);
    outline-offset: 2px;
}

/* ============================================================
   9. CATEGORY SUBSCRIBE INLINE
   ============================================================ */
.dl-category-subscribe {
    margin: 0 0 36px;
    padding: 28px 32px;
    background: var(--dl-paper-soft);
    border: 1px solid rgba(26,23,20,0.12);
    border-left: 4px solid var(--dl-accent);
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 28px;
    align-items: center;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
.dl-category-subscribe-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    font-weight: 600;
    color: var(--dl-accent);
    margin: 0 0 6px;
}
.dl-category-subscribe-title {
    font-family: 'Plus Jakarta Sans', 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--dl-ink);
    margin: 0 0 6px;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.dl-category-subscribe-sub {
    font-size: 14px;
    color: #5a4f44;
    margin: 0;
    line-height: 1.55;
}
.dl-category-subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.dl-category-subscribe-form input[type="email"] {
    height: 44px;
    padding: 0 14px;
    border: 1px solid rgba(26,23,20,0.25);
    border-radius: 2px;
    font-size: 14px;
    font-family: inherit;
    color: var(--dl-ink);
    box-sizing: border-box;
}
.dl-category-subscribe-form input[type="email"]:focus,
.dl-category-subscribe-form input[type="email"]:focus-visible {
    outline: none;
    border-color: var(--dl-accent);
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.18);
}
.dl-category-subscribe-form button {
    height: 44px;
    padding: 0 18px;
    background: var(--dl-accent);
    color: var(--dl-on-dark);
    border: none;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease, transform 80ms ease;
}
.dl-category-subscribe-form button:hover {
    background: var(--dl-accent-hover);
    transform: translateY(-1px);
}
@media (max-width: 720px) {
    .dl-category-subscribe {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 22px 22px;
    }
}


/* =====================================================================
   CSS containment - isolate large widgets from each other so paint and
   layout work for one widget doesn't invalidate neighbours.

   `contain: layout style` is the safe pairing: tells the browser the
   widget's box won't affect outside layout, and its style changes
   don't escape. Skips `paint` and `size` since some widgets have
   absolute-positioned children or content that overflows for visual
   effect (figure captions, related-in left rail).

   Added 2026-05-11 for the 15k-page perf pass.
   ===================================================================== */
.dl-toc,
.dl-related-in,
.dl-byline,
.dl-context-badge,
.dl-ca-figure,
.dl-ca-data-table,
.dl-ca-channel-card,
.dl-ca-timeline-item {
    contain: layout style;
}


/* ====================================================================
   Overview H2 - article landmark between TOC and first body section.
   Injected by dl-toc.php on every article that gets a TOC. Slightly
   stronger weight than regular section H2 to read as a top-of-article
   anchor; same family + size so the rhythm is consistent.
   Locked 2026-05-11 per user direction.
   ==================================================================== */
body.dl-modern .dl-section-overview {
    font-family: var(--dl-font-display, 'Plus Jakarta Sans', Georgia, serif);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--dl-ink, #1a1714);
    /* 2026-05-17 (v2): H2 sits as sibling of <article> inside entry-content
     * (810px wide). Keep display:inline-block so the red border-bottom
     * stays as a SHORT under-text accent (not a full-width divider).
     * Shift the H2 to the article column's left edge using calc margin-left:
     * (containing-block-width - article-width) / 2 = article's centered offset.
     * Works at every entry-content width. */
    display: inline-block;
    margin: 36px 0 18px !important;
    margin-left: calc((100% - 728px) / 2) !important;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--dl-accent, #E63946);
    padding-right: 8px;
}
@media (max-width: 600px) {
    body.dl-modern .dl-section-overview {
        font-size: 22px;
        margin: 28px 0 14px;
    }
}


/* PYQ list - converted from paragraph-form question enumerations.
   Slightly tighter spacing than the default <ul> so the four UPSC
   Mains question lines read as a compact unit, with terracotta
   bullets to match the .dl-pyq-promise card it sits inside.
   2026-05-11. */
body.dl-modern ul.dl-pyq-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 14px;
}
body.dl-modern ul.dl-pyq-list > li {
    position: relative;
    padding: 4px 0 4px 22px;
    line-height: 1.55;
}
body.dl-modern ul.dl-pyq-list > li::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 0;
    width: 12px;
    height: 2px;
    background: var(--dl-accent, #E63946);
}

/* === dl-astra-overrides.css (5,374 bytes) === */
/*
  dl-astra-overrides.css - single canonical override bucket loaded LAST in
  the dependency chain.

  Pattern: every rule here uses `body.dl-modern` (plus at least one more
  class) as the first qualifier so the selector specificity climbs above
  Astra's typical 0,3,1 maximum. With higher specificity in an unlayered
  stylesheet that loads AFTER Astra's CSS, our rules win the cascade
  without needing the !important keyword.

  Why specificity boost instead of @layer:
    Per CSS Cascade Level 5, unlayered styles win over ANY @layer for
    regular declarations. Since Astra ships unlayered CSS, putting our
    overrides into @layer overrides would LOSE to Astra, the opposite
    of what we want. Specificity boost in an unlayered file is the
    correct solution.

  Migration progress (completed 2026-05-11):
    File                          before   now    delta
    dl-design-system.css            244      0    -244
    dl-header-footer.css            104      0    -104
    dl-components.css                89      0     -89
    dl-page-hub.css                  85      0     -85
    dl-blog-post.css                 80      0     -80
    dl-page-subject.css              38      0     -38
    dl-page-home.css                 17      0     -17
    dl-preview.css                   13      0     -13
    dl-ca-entry.css                  13      0     -13
    dl-related-in.css                 7      0      -7
    dl-tokens.css                     2      2       0  (prefers-reduced-motion, MUST stay)
    TOTAL                           707      2    -705  (99.7 percent reduction)

  How the migration worked in practice:
    1. The earlier specificity-boost migration (h1 entry-title block)
       confirmed the pattern works.
    2. Most !important declarations in our dl-*.css were defensive
       against Astra parent CSS rules. Once Astra was dequeued sitewide
       (dl-modern-loader.php), the !important defenses became dead
       weight.
    3. Bulk-strip with a single regex per file removed the keyword from
       every declaration; visual audit on CA + blog + home + hub
       confirmed nothing broke.
    4. One regression: the migrated entry-title block was scoped to
       `body.dl-modern.single` which matched blog posts too, shrinking
       their headlines to 30 px. Re-scoped to
       `body.dl-modern.single-current_affairs` and blogs went back to
       48 px.

  Lessons learned:
    1. To beat Astra without important, need at LEAST (0,4,1)
       specificity. Astra's customizer outputs inline style in HEAD,
       which sorts AFTER external CSS, so external (0,3,1) loses to
       inline Astra (0,3,1) on source order.
    2. Do NOT write substrings that look like CSS comment delimiters
       inside CSS comments. CSS does not support nested comments and
       the inner closer ends the outer block prematurely.
    3. No em dashes anywhere (project rule, includes CSS comments).
    4. Dequeue parent-theme CSS first; then most defensive !important
       can be removed without further work.

  Migration pattern, per rule:
    1. Copy the rule (with !important) here.
    2. Add a body.dl-modern prefix so specificity climbs.
    3. Drop the !important keyword.
    4. Delete the rule from its origin file (no duplication).
    5. Visually verify on one blog + one CA page + one hub page.

  When the keyword MUST stay:
    If Astra also marks its rule important on the same property, our
    rule needs it too. Tag with the comment "astra-important" on the
    declaration line so audits can find them later.

  Avoid putting CSS-comment delimiter substrings inside this header
  block. The parser does not allow nested comments and would treat the
  inner closer as the end of this block.

  Locked 2026-05-11. Replaces the earlier @layer-based scheme.
*/


/* ---------------------------------------------------------------------
   From: dl-ca-entry.css (h1.entry-title block)
   Migrated 2026-05-11. Originally 8 important declarations.

   Astra's strongest competing rule for the title font-size is
     header.entry-header:not(.related-entry-header) .entry-title  (0,3,1)
   Astra's customizer outputs as INLINE style in HEAD, which sorts AFTER
   external stylesheets. So an equal-specificity external rule loses to
   Astra. Our migrated selector climbs to (0,4,1) and wins without
   needing the important keyword.

   Selector breakdown:
     body                  (0,0,1)
     .dl-modern            (0,1,0)
     .single               (0,1,0)
     .ast-article-single   (0,1,0)
     .entry-title          (0,1,0)
   Total: (0,4,1).
   --------------------------------------------------------------------- */
/* Sitewide single-post H1 size. Same 30 / 24 sentence-case ink on
   blog posts AND current_affairs articles. Earlier rule was scoped to
   `single-current_affairs` only, which let dl-design-system's
   `clamp(28, 4vw, 48)` rule push blog headlines to 48 px on desktop.
   2026-05-11 user direction: unify blog + CA heading sizes. */
body.dl-modern.single .ast-article-single .entry-title {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-transform: none;
    margin: 0 0 18px;
    color: var(--dl-ink, #1a1714);
}
@media (max-width: 600px) {
    body.dl-modern.single .ast-article-single .entry-title {
        font-size: 24px;
    }
}

/* === Plus Jakarta Sans unified (embedded mirror of dl-fonts-local.css, Phase 2E.22) === */
/* Plus Jakarta Sans 400 normal latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/wp-content/themes/astra-child/assets/fonts/PlusJakartaSans-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Plus Jakarta Sans 500 normal latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/wp-content/themes/astra-child/assets/fonts/PlusJakartaSans-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Plus Jakarta Sans 600 normal latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/wp-content/themes/astra-child/assets/fonts/PlusJakartaSans-600-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Plus Jakarta Sans 700 normal latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/wp-content/themes/astra-child/assets/fonts/PlusJakartaSans-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Plus Jakarta Sans 800 normal latin */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/wp-content/themes/astra-child/assets/fonts/PlusJakartaSans-800-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Phase 2E.14 (2026-05-25) — Sitewide chrome match.
   Lifted from front-page.php inline <style> so every page header looks
   like the home page: WHITE main bar + GREEN primary CTA.
   Overrides the cream (--dl-on-dark) bar + red (--dl-accent) button that
   page-types-other-than-home were inheriting.
   ========================================================================== */
body.dl-modern .dl-main-header {
    background: #FFFFFF !important;
    color: #15212F !important;
    border-bottom: 1px solid #E6E1F0 !important;
}
body.dl-modern a.dl-btn-primary,
body.dl-modern .dl-header-cta-desktop {
    background: var(--green,#E8352B) !important;
    color: #FFFFFF !important;
    border-color: var(--green,#E8352B) !important;
    border-radius: 8px !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    box-shadow: 0 4px 14px rgba(232, 53, 43,0.28) !important;
}
body.dl-modern a.dl-btn-primary:hover {
    background: var(--green-deep,#E8352B) !important;
    border-color: var(--green-deep,#E8352B) !important;
}

/* Phase 2E.15 (2026-05-25) — Sitewide utility-bar match.
   Lifted from front-page.php inline so utility bar = #2a2b2d charcoal
   (not the legacy --dl-ink #0f0f0f) + compact 20px min-height + tighter
   font on every page. */
body.dl-modern .dl-utility-bar {
    background: #2a2b2d !important;
    padding: 2px 0 !important;
    min-height: 20px !important;
}
body.dl-modern .dl-utility-bar .dl-container {
    min-height: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.dl-modern .dl-utility-bar .dl-utility-message,
body.dl-modern .dl-utility-bar .dl-utility-actions {
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* Phase 2E.16 (2026-05-25) — Sitewide chrome match, remaining 5 rules.
   Lifted from front-page.php inline; nav font family + nav link color +
   mega-menu chrome. With 2E.14 (white bar + green CTA) and 2E.15 (charcoal
   utility) this completes the home-chrome sitewide port. */
body.dl-modern .dl-primary-nav-link {
    color: #5A6675 !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-weight: 600 !important;
}
body.dl-modern .dl-primary-nav-link:hover,
body.dl-modern .dl-primary-nav-link:focus {
    color: #15212F !important;
}
body.dl-modern .dl-mega-menu {
    background: #FFFFFF !important;
    border-color: #E6E1F0 !important;
}
body.dl-modern .dl-mega-item:hover {
    background: #F8FAFC !important;
}
body.dl-modern .dl-mega-item-icn {
    color: var(--green,#E8352B) !important;
}
/* Force the Plus Jakarta family on utility bar text (currently inheriting
   Inter through Astra cascade on non-home pages). */
body.dl-modern .dl-utility-bar,
body.dl-modern .dl-utility-bar .dl-utility-message,
body.dl-modern .dl-utility-bar .dl-utility-actions,
body.dl-modern .dl-utility-bar .dl-utility-actions a {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}

/* Phase 2E.17 (2026-05-25) — Sitewide chrome font + color match.
   Forces Plus Jakarta Sans on EVERY header/footer chrome element so
   subject hubs / articles / company pages stop falling through to Inter.
   Scoped to chrome surfaces only — article body prose keeps its Inter. */
body.dl-modern .dl-utility-bar,
body.dl-modern .dl-utility-bar *,
body.dl-modern .dl-main-header,
body.dl-modern .dl-main-header *,
body.dl-modern .dl-mobile-drawer,
body.dl-modern .dl-mobile-drawer *,
body.dl-modern .dl-search-modal,
body.dl-modern .dl-search-modal * {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
}
/* Logo + search trigger color match (was #0f0f0f on non-home, now ink-blue
   #15212F to match home). */
body.dl-modern .dl-logo,
body.dl-modern .dl-search-trigger {
    color: #15212F !important;
}

/* Phase 2E.18 (2026-05-25) — Mobile drawer dark-mode regression fix.
   Drawer bg is hardcoded #FFFFFF (var(--dl-paper)) but text inherits
   var(--dl-text) which flips to light in @media (prefers-color-scheme: dark).
   On a phone in OS dark mode this makes drawer rows white-on-white = invisible.
   Force drawer text color to explicit #15212F ink regardless of OS theme. */
body.dl-modern .dl-mobile-drawer,
body.dl-modern .dl-mobile-drawer .dl-drawer-row,
body.dl-modern .dl-mobile-drawer .dl-drawer-row-arrow,
body.dl-modern .dl-mobile-drawer .dl-drawer-group-label,
body.dl-modern .dl-mobile-drawer a {
    color: #15212F !important;
}
body.dl-modern .dl-mobile-drawer .dl-drawer-row-icn {
    color: var(--green-deep,#E8352B) !important;
}
body.dl-modern .dl-mobile-drawer .dl-drawer-row:hover {
    color: var(--green,#E8352B) !important;
}
body.dl-modern .dl-mobile-drawer {
    background: #FFFFFF !important;
}

/* Phase 2E.23 (2026-05-25) — Footer inline-style cleanup.
   Moved from inline style="..." on dl-footer-logo-link + dl-footer-tagline
   to CSS classes so the G8 inline_style_project detector passes clean. */
body.dl-modern .dl-footer-logo-link { display: inline-block; }
body.dl-modern .dl-footer-tagline {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255,255,255,0.62);
    max-width: 300px;
}

/* Phase 2E.21 (2026-05-25) — Drawer Test Series CTA: green bg already correct,
   but Phase 2E.18 blanket "drawer a { color: #15212F }" was forcing the CTA
   label to dark ink against the green surface. Force white per the
   white-text-on-green-bg binding rule. */
body.dl-modern .dl-mobile-drawer a.dl-drawer-cta {
    color: #FFFFFF !important;
}

/* Phase 2E.24 (2026-05-25) — In-banner breadcrumbs.
   Sits inside .dl-subject-hero (subject hubs + test-series) AND .dl-page-hero
   (company pages). White-on-green styling matches the dark hero surface.
   Cream .dl-breadcrumb-band is hidden per-template; this is its replacement. */
.dl-subject-hero .dl-banner-breadcrumb,
.dl-page-hero .dl-banner-breadcrumb {
    margin-bottom: 20px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 13px;
}
.dl-subject-hero .dl-banner-breadcrumb ol,
.dl-page-hero .dl-banner-breadcrumb ol {
    list-style: none; margin: 0; padding: 0;
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.dl-subject-hero .dl-banner-breadcrumb li,
.dl-page-hero .dl-banner-breadcrumb li { display: flex; align-items: center; }
.dl-subject-hero .dl-banner-breadcrumb a,
.dl-page-hero .dl-banner-breadcrumb a {
    color: rgba(255,255,255,0.7);
    text-decoration: none; font-weight: 500;
    transition: color 0.15s;
}
.dl-subject-hero .dl-banner-breadcrumb a:hover,
.dl-page-hero .dl-banner-breadcrumb a:hover { color: #FFFFFF; }
.dl-subject-hero .dl-banner-breadcrumb .sep,
.dl-page-hero .dl-banner-breadcrumb .sep { color: rgba(255,255,255,0.4); }
.dl-subject-hero .dl-banner-breadcrumb [aria-current="page"],
.dl-page-hero .dl-banner-breadcrumb [aria-current="page"] {
    color: rgba(255,255,255,0.9); font-weight: 500;
}

/* Phase 2E.25 (2026-05-25) — Hero top-padding -30% on test-series, subject hubs,
   company pages, and any page using .dl-page-hero. Bottom padding unchanged.
   Inline <style> blocks in templates take precedence over external CSS by load
   order, so !important is required to win the cascade. */
.dl-subject-hero { padding-top: clamp(39px, 4.9vw, 59px) !important; }
.dl-page-hero    { padding-top: clamp(42px, 5.6vw, 62px) !important; }

/* ==========================================================================
   Phase 3A.3 (2026-05-25) - WooCommerce brand alignment.
   Styles WC default markup (cart / checkout / my-account / shop / product)
   to PJS + brand-green palette WITHOUT requiring PHP template overrides.
   ========================================================================== */

body.dl-modern.woocommerce-page .ast-container,
body.dl-modern.woocommerce .ast-container {
    max-width: none !important;
    padding: 0 !important;
    display: block !important;
    flex-direction: row !important;
    float: none !important;
}
body.dl-modern.woocommerce-page,
body.dl-modern.woocommerce-page html,
html body.dl-modern.woocommerce-page .hfeed.site,
html body.dl-modern.woocommerce-page #content,
html body.dl-modern.woocommerce-page #primary { background: #FFFFFF !important; }

body.dl-modern.woocommerce-page .ast-breadcrumbs-wrapper,
body.dl-modern.woocommerce-page .ast-breadcrumbs,
body.dl-modern.woocommerce-page nav.dl-breadcrumb,
body.dl-modern.woocommerce-page .dl-breadcrumb-band { display: none !important; }

body.dl-modern.woocommerce-page #primary article > .entry-content,
body.dl-modern.woocommerce-page #primary .woocommerce {
    max-width: 1100px;
    margin: 32px auto 56px;
    padding: 0 clamp(20px, 4vw, 64px);
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 16px;
    color: #15212F;
}

body.dl-modern.woocommerce-page .entry-header h1.entry-title,
body.dl-modern.woocommerce-page .woocommerce-products-header__title {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(28px, 4vw, 38px) !important;
    color: #15212F !important;
    margin: 0 0 24px !important;
    letter-spacing: -0.01em !important;
}
body.dl-modern.woocommerce-page .woocommerce h2,
body.dl-modern.woocommerce-page .woocommerce h3 {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-weight: 700 !important;
    color: #15212F !important;
    letter-spacing: -0.005em;
}
body.dl-modern.woocommerce-page .woocommerce-MyAccount-content h2 { font-size: 22px; margin: 0 0 16px; }

/* Buttons */
body.dl-modern.woocommerce-page .button,
body.dl-modern.woocommerce-page .woocommerce a.button,
body.dl-modern.woocommerce-page .woocommerce button.button,
body.dl-modern.woocommerce-page .woocommerce input.button,
body.dl-modern.woocommerce-page .woocommerce-button,
body.dl-modern.woocommerce-page .woocommerce #respond input#submit {
    background: var(--green,#E8352B) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 22px !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(232, 53, 43,0.22) !important;
    transition: background 0.18s, transform 0.18s !important;
}
body.dl-modern.woocommerce-page .button:hover,
body.dl-modern.woocommerce-page .woocommerce a.button:hover,
body.dl-modern.woocommerce-page .woocommerce button.button:hover,
body.dl-modern.woocommerce-page .woocommerce-button:hover {
    background: var(--green-deep,#E8352B) !important;
    transform: translateY(-1px) !important;
}

/* Forms */
body.dl-modern.woocommerce-page .woocommerce form .form-row label,
body.dl-modern.woocommerce-page .woocommerce-form-login label,
body.dl-modern.woocommerce-page .woocommerce-form-register label {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #15212F !important;
    margin-bottom: 6px !important;
    display: block !important;
}
body.dl-modern.woocommerce-page .woocommerce form .form-row input.input-text,
body.dl-modern.woocommerce-page .woocommerce-form-login input,
body.dl-modern.woocommerce-page .woocommerce-form-register input,
body.dl-modern.woocommerce-page .woocommerce form select,
body.dl-modern.woocommerce-page .woocommerce form textarea {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid #E6E1F0 !important;
    border-radius: 8px !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: 15px !important;
    color: #15212F !important;
    background: #FFFFFF !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
body.dl-modern.woocommerce-page .woocommerce form input:focus,
body.dl-modern.woocommerce-page .woocommerce form select:focus,
body.dl-modern.woocommerce-page .woocommerce form textarea:focus {
    border-color: var(--green,#E8352B) !important;
    box-shadow: 0 0 0 3px rgba(232, 53, 43,0.15) !important;
    outline: none !important;
}

/* Tables */
body.dl-modern.woocommerce-page .woocommerce table.shop_table,
body.dl-modern.woocommerce-page .woocommerce-account table {
    border: 1px solid #E6E1F0 !important;
    border-radius: 12px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: 14px !important;
    overflow: hidden !important;
}
body.dl-modern.woocommerce-page .woocommerce table.shop_table th {
    background: #F8FAFC !important;
    color: #15212F !important;
    font-weight: 700 !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #E6E1F0 !important;
}
body.dl-modern.woocommerce-page .woocommerce table.shop_table td {
    padding: 14px 18px !important;
    border-bottom: 1px solid #F0EDF7 !important;
    color: #2A3441 !important;
}

/* My-account navigation */
body.dl-modern.woocommerce-account .woocommerce-MyAccount-navigation {
    width: 25% !important;
    float: left !important;
}
body.dl-modern.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #E6E1F0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
body.dl-modern.woocommerce-account .woocommerce-MyAccount-navigation li {
    border-bottom: 1px solid #F0EDF7 !important;
    margin: 0 !important;
}
body.dl-modern.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none !important; }
body.dl-modern.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block !important;
    padding: 14px 18px !important;
    color: #2A3441 !important;
    text-decoration: none !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: background 0.15s, color 0.15s !important;
}
body.dl-modern.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: #F8FAFC !important;
    color: var(--green-deep,#E8352B) !important;
}
body.dl-modern.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--green-soft,#E8F6F0) !important;
    color: var(--green-deep,#E8352B) !important;
    border-left: 4px solid var(--green,#E8352B) !important;
    padding-left: 14px !important;
}
body.dl-modern.woocommerce-account .woocommerce-MyAccount-content {
    width: 72% !important;
    float: right !important;
}

/* Login + Register two-column on /my-account/ */
body.dl-modern.woocommerce-account.logged-out .woocommerce > .u-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    margin-top: 24px !important;
}
@media (max-width: 768px) {
    body.dl-modern.woocommerce-account.logged-out .woocommerce > .u-columns {
        grid-template-columns: 1fr !important;
    }
    body.dl-modern.woocommerce-account .woocommerce-MyAccount-navigation,
    body.dl-modern.woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        float: none !important;
    }
}
body.dl-modern.woocommerce-account.logged-out .col-1,
body.dl-modern.woocommerce-account.logged-out .col-2 {
    max-width: none !important;
    width: 100% !important;
    background: #FAFAF7 !important;
    border: 1px solid #E6E1F0 !important;
    border-radius: 14px !important;
    padding: 28px !important;
    float: none !important;
}

/* Notices */
body.dl-modern.woocommerce-page .woocommerce-message,
body.dl-modern.woocommerce-page .woocommerce-info,
body.dl-modern.woocommerce-page .woocommerce-error {
    border-radius: 10px !important;
    border-width: 0 0 0 4px !important;
    padding: 16px 20px !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: 14px !important;
    margin: 0 0 24px !important;
}
body.dl-modern.woocommerce-page .woocommerce-message {
    background: var(--green-soft,#E8F6F0) !important; border-left-color: var(--green,#E8352B) !important; color: var(--green-deep,#E8352B) !important;
}
body.dl-modern.woocommerce-page .woocommerce-info {
    background: #E6F0FA !important; border-left-color: #1d4f7a !important; color: #1d4f7a !important;
}
body.dl-modern.woocommerce-page .woocommerce-error {
    background: #FAE6E6 !important; border-left-color: #8C2A2A !important; color: #8C2A2A !important;
}

/* Empty cart */
body.dl-modern.woocommerce-cart .cart-empty {
    text-align: center !important;
    padding: 48px 24px !important;
    background: #F8FAFC !important;
    border-radius: 14px !important;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-size: 16px !important;
    color: #5A6675 !important;
}
body.dl-modern.woocommerce-cart .return-to-shop {
    text-align: center !important;
    margin-top: 24px !important;
}

/* Product cards */
body.dl-modern.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 32px 0 !important;
}
body.dl-modern.woocommerce ul.products li.product {
    background: #FFFFFF !important;
    border: 1px solid #E6E1F0 !important;
    border-radius: 14px !important;
    padding: 20px !important;
    text-align: left !important;
    width: 100% !important;
    margin: 0 !important;
}
body.dl-modern.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #15212F !important;
    padding: 0 !important;
    margin: 12px 0 8px !important;
}
body.dl-modern.woocommerce ul.products li.product .price {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-weight: 700 !important;
    color: var(--green-deep,#E8352B) !important;
    font-size: 18px !important;
}


/* === Header-chrome a11y pass (2026-05-30). Two G8 defects on touch/zoom widths:
   (1) touch_target_size: dark-toggle/search/hamburger/search-close rendered <44x44 on
       tablet+phone; enforce a >=44x44 hit box (WCAG 2.5.5).
   (2) h_overflow_zoom200 @320: the .dl-logo--wordmark SVG was not height-constrained at
       the narrowest widths / 200% zoom and rendered ~440px wide, forcing horizontal scroll;
       cap it. !important so it wins over dl-theme.css (priority 1000) + dl-header-footer.css. === */
@media (max-width: 1024px) {
  body.dl-modern .dl-mode-toggle,
  body.dl-modern .dl-search-trigger,
  body.dl-modern .dl-hamburger,
  body.dl-modern .dl-search-close {
    min-width: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 480px) {
  body.dl-modern .dl-logo--wordmark,
  body.dl-modern .dl-logo--wordmark svg,
  body.dl-modern .dl-logo--wordmark img {
    height: 26px !important;
    width: auto !important;
    max-width: 150px !important;
  }
}