/*
Theme Name: Twenty Twenty-Five Child - Blog
Theme URI: https://github.com/Borhane-alaa/blog
Description: Child theme for a focused IT and cybersecurity blog.
Author: Alaa
Template: twentytwentyfive
Version: 0.1.2
Text Domain: tt5-child-blog
*/

/* Readability tweaks for technical long-form posts */
.single-post .wp-block-post-content {
	line-height: 1.65;
}

.article-container {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted, #5a5c6b);
}

.article-meta a {
	color: inherit;
}

.article-subtitle {
	font-size: 1.1rem;
	color: var(--wp--preset--color--muted, #5a5c6b);
}

.callout-box {
	border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface, #f0efe8);
}

.callout-box.is-style-tldr-box {
	border-left: 4px solid var(--wp--preset--color--brand, #4338ca);
}

.checklist-box .is-style-checklist {
	list-style: none;
	padding-left: 0;
}

.checklist-box .is-style-checklist li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.5rem;
}

.checklist-box .is-style-checklist li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--brand, #4338ca);
}

.last-updated-note {
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted, #5a5c6b);
}

.article-cta {
	padding: var(--wp--preset--spacing--40);
	border-radius: 12px;
	background: color-mix(in srgb, var(--wp--preset--color--brand, #4338ca) 8%, transparent);
}

.single-post pre,
.single-post code {
	font-size: 0.95em;
}

/* Reusable monetization placeholder block style */
.is-style-monetization-slot {
	border: 1px dashed var(--wp--preset--color--muted, #5a5c6b);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface, #f0efe8);
}

/* Reusable disclosure callout style */
.is-style-disclosure-box {
	border-left: 4px solid var(--wp--preset--color--brand, #4338ca);
	padding: var(--wp--preset--spacing--40);
	background: color-mix(in srgb, currentColor 4%, transparent);
}

.affiliate-link-box {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand, #4338ca) 15%, transparent);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40);
	background: color-mix(in srgb, var(--wp--preset--color--brand, #4338ca) 8%, transparent);
}

.article-author-box,
.related-posts-placeholder {
	border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--surface, #f0efe8);
}
/* ===========================================================================
   WEBFONTS — v3
   Loaded via Google Fonts CSS2 API with font-display: swap so the page
   renders text immediately and the fonts swap in when they arrive
   (no FOIT). Fira Code is loaded directly via @font-face below because
   we use it in many places and want it to render with display: swap
   even if the Google CDN is slow. Outfit + Inter come from the link
   enqueued in functions.php.
   never blanks. Self-hosting is a future optimization (smaller payload, no
   third-party request); for now the Google CDN is the most reliable.
   ============================================================================ */

/* v21 (2026-07-21): Visual identity rebrand
   - Typography: Outfit (headings) + Inter (body), loaded from Google Fonts
     via a single CSS2 link in functions.php (see enqueue_google_fonts()).
     We deliberately do NOT @font-face these ourselves — Google already
     serves an optimised, subsetted, woff2-only CSS file that does the
     right thing. Adding our own @font-face would just shadow Google's
     and possibly fight their font-display: swap.
   - Fira Code stays as a local @font-face because we use it in many
     places (code blocks, inline code, command snippets) and want it
     to render with display: swap even if Google Fonts is slow.
   - Inter is for body / UI; Outfit is for headings. The
     `--wp--preset--font-family--*` CSS vars below point at the
     `outfit` / `inter` / `fira-code` slugs defined in theme.json.
*/

/* Fira Code (300..700) — code blocks, inline code, command snippets */
@font-face {
  font-family: 'Fira Code';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/firacode/v22/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJUK7KN4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* v21: theme.json fontFamilies slugs are `outfit`, `inter`, `fira-code`. */
  --wp--preset--font-family--outfit: 'Outfit', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --wp--preset--font-family--inter: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --wp--preset--font-family--fira-code: 'Fira Code', 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

/* ============================================================================
   HOME PAGE – HERO SECTION
   ============================================================================ */

.hero-section {
	text-align: center;
}

.hero-title {
	margin-bottom: var(--wp--preset--spacing--30);
	word-break: break-word;
}

.hero-subtitle {
	margin-bottom: var(--wp--preset--spacing--20);
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.trust-signal {
	margin-bottom: var(--wp--preset--spacing--40);
	font-weight: 500;
}

.hero-buttons {
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
}

/* ============================================================================
   POST CARD GRID STYLING
   ============================================================================ */

.post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--wp--preset--color--base, #fafaf7);
	transition: all 0.2s ease-in-out;
}

.post-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	border-color: var(--wp--preset--color--brand, #4338ca);
	transform: translateY(-2px);
}

.post-card img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.post-card-meta {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #5a5c6b);
	align-items: center;
}

.category-chip {
	display: inline-block;
	background: color-mix(in srgb, var(--wp--preset--color--brand, #4338ca) 15%, transparent);
	color: var(--wp--preset--color--brand, #4338ca);
	padding: 4px 10px;
	border-radius: 16px;
	font-size: 0.8rem;
	font-weight: 500;
}

.category-chip a {
	color: inherit;
	text-decoration: none;
}

.category-chip a:hover {
	text-decoration: underline;
}

.post-card-date {
	font-weight: 500;
}

.post-card-title {
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20) 0 !important;
	color: var(--wp--preset--color--contrast, #1a1d2e);
	transition: color 0.2s ease;
}

.post-card-title a {
	text-decoration: none;
	color: inherit;
}

.post-card-title a:hover {
	color: var(--wp--preset--color--brand, #4338ca);
}

.post-card-excerpt {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast, #1a1d2e);
	margin-bottom: 0;
}

.featured-posts-grid {
	margin-bottom: var(--wp--preset--spacing--60);
}

/* ============================================================================
   NEWSLETTER CTA SECTION
   ============================================================================ */

.newsletter-cta {
	text-align: center;
}

.newsletter-title {
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: 2rem;
}

.newsletter-cta p {
	margin-bottom: 0;
	font-size: 1.05rem;
	line-height: 1.6;
}

.newsletter-form-placeholder {
	text-align: center;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--40);
	font-style: italic;
}

/* ============================================================================
   SECTION TITLES
   ============================================================================ */

.section-title {
	margin-bottom: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast, #1a1d2e);
}

/* ============================================================================
   PAGINATION STYLING
   ============================================================================ */

.pagination-nav {
	margin-top: var(--wp--preset--spacing--60);
	gap: var(--wp--preset--spacing--20);
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	padding: 8px 16px;
	border-radius: 6px;
	background: var(--wp--preset--color--surface, #f0efe8);
	border: 1px solid var(--wp--preset--color--muted, #5a5c6b);
	text-decoration: none;
	transition: all 0.2s ease;
	font-weight: 500;
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background: var(--wp--preset--color--brand, #4338ca);
	color: var(--wp--preset--color--base, #fafaf7);
	border-color: var(--wp--preset--color--brand, #4338ca);
}

.wp-block-query-pagination-numbers {
	display: flex;
	gap: var(--wp--preset--spacing--20);
}

.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 6px;
	text-decoration: none;
	background: var(--wp--preset--color--surface, #f0efe8);
	border: 1px solid var(--wp--preset--color--muted, #5a5c6b);
	transition: all 0.2s ease;
	font-weight: 500;
	color: var(--wp--preset--color--contrast, #1a1d2e);
}

.wp-block-query-pagination-numbers a:hover {
	background: var(--wp--preset--color--brand, #4338ca);
	color: var(--wp--preset--color--base, #fafaf7);
	border-color: var(--wp--preset--color--brand, #4338ca);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--brand, #4338ca);
	color: var(--wp--preset--color--base, #fafaf7);
	border-color: var(--wp--preset--color--brand, #4338ca);
}

.wp-block-navigation-item__content,
.wp-block-social-link-anchor {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}

/* ============================================================================
   RESPONSIVE DESIGN (v3 — 5-tier device matrix)
   ----------------------------------------------------------------------------
   Breakpoints:
     - Phone (portrait):        <= 600px
     - Phone (landscape):       601-767px
     - Tablet (portrait):       768-1023px
     - Laptop / small desktop:  1024-1439px
     - Large desktop:           >= 1440px
   The parent theme (twentytwentyfive) provides fluid typography via clamp()
   in theme.json. We only override specific dimensions (hero, grid columns)
   that don't fluidly scale.
   ============================================================================ */

/* --- Base: every device, no media query --- */
html {
  -webkit-text-size-adjust: 100%;       /* prevent iOS text-zoom on rotation */
  -webkit-font-smoothing: antialiased;  /* macOS / iOS font rendering */
  -moz-osx-font-smoothing: grayscale;    /* Firefox macOS */
  scrollbar-gutter: stable;             /* reserve scrollbar space */
}

body {
  font-size: clamp(0.9375rem, 0.875rem + 0.25vw, 1.0625rem);
  line-height: clamp(1.55, 1.5 + 0.2vw, 1.7);
}

/* --- 1. Phone portrait (<= 600px) --- */
@media (max-width: 600px) {
  .hero-section { padding: clamp(2rem, 8vw, 3.5rem) 1rem !important; }
  .hero-title { font-size: clamp(1.5rem, 7vw, 1.85rem) !important; line-height: 1.15 !important; }
  .hero-subtitle { font-size: 1rem !important; }
  .hero-buttons { flex-direction: column; width: 100%; }
  .hero-buttons .wp-block-button { width: 100%; }
  .featured-posts-grid .wp-block-post-template,
  .latest-posts-grid .wp-block-post-template { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .post-card { padding: 1rem !important; }
  .article-title { font-size: 1.5rem !important; line-height: 1.2; }
  .header-utility-bar { display: none !important; }
  .header-topic-nav { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
  .header-topic-nav::-webkit-scrollbar { display: none; }
  .section-title { font-size: 1.35rem !important; }
  .newsletter-cta { padding: 1.5rem 1rem !important; }
  .newsletter-title { font-size: 1.4rem !important; }

  /* Task 1: Touch target sizing (WCAG 2.5.5 AAA) */
  .header-topic-nav a { padding: 0.5rem 0.75rem; min-height: 44px; }
  .curated-cat-link { min-height: 44px; padding: 0.6rem 0.75rem; }
  .archive-post-title a { display: block; padding: 0.25rem 0; }
  .about-author-link { min-height: 44px; display: inline-flex; align-items: center; }
  .tt5-newsletter-form button { min-height: 44px; }

  /* Task 2: About page mobile fixes */
  .about-topics-grid { grid-template-columns: 1fr !important; }
  .about-timeline::before { left: 8px !important; }
  .about-timeline-item { padding-left: 2rem !important; }
  .about-timeline-item::before { left: 4px !important; width: 10px !important; height: 10px !important; }
  .about-hero { padding: 2rem 1rem !important; }
  .about-hero h1 { font-size: clamp(1.75rem, 6vw, 2.25rem) !important; }
  .about-hero-badges { flex-wrap: wrap; gap: 0.5rem !important; }
  .about-hero-badges .badge { font-size: 0.75rem !important; padding: 0.3rem 0.6rem !important; }

  /* Task 3: Products/Services page mobile fixes */
  .services-hero { padding: 2rem 1rem !important; }
  .services-hero h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  .services-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .services-grid--combos { grid-template-columns: 1fr !important; }
  .services-card { padding: 1.25rem !important; }
  .services-card h3 { font-size: 1.1rem !important; }
  .about-cta { flex-direction: column !important; gap: 1rem !important; }
  .about-cta .wp-block-button { width: 100% !important; }
}

/* --- 2. Phone landscape / small tablet (601-767px) --- */
@media (min-width: 601px) and (max-width: 767px) {
  .hero-title { font-size: 1.75rem !important; }
  .featured-posts-grid .wp-block-post-template,
  .latest-posts-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; }

  /* Task 2: About page — 2-col on phone landscape */
  .about-topics-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Task 3: Services — 2-col on phone landscape */
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .services-grid--combos { grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- 3. Tablet portrait (768-1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-title { font-size: 2rem !important; }
  .featured-posts-grid .wp-block-post-template,
  .latest-posts-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; }
  .article-layout-70-30,
  .archive-layout-70-30 { grid-template-columns: 1fr !important; }
  .article-sidebar,
  .archive-sidebar { position: static !important; margin-top: 2rem !important; }

  /* Task 5: Tablet consistency */
  .about-topics-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .about-hero h1 { font-size: clamp(2rem, 4vw, 2.5rem) !important; }
  .services-hero h1 { font-size: clamp(2rem, 4vw, 2.5rem) !important; }
}

/* --- 4. Laptop / small desktop (1024-1439px) --- */
@media (min-width: 1024px) and (max-width: 1439px) {
  .featured-posts-grid .wp-block-post-template,
  .latest-posts-grid .wp-block-post-template { grid-template-columns: repeat(3, 1fr) !important; }
}

/* --- 5. Large desktop (>= 1440px) --- */
@media (min-width: 1440px) {
  :root {
    --wp--style--global--content-size: 1180px;
    --wp--style--global--wide-size: 1480px;
  }
  body { font-size: 1.0625rem; }
  .hero-title { font-size: 2.6rem; }
}

/* --- 6. Ultra-wide desktop (>= 1920px) --- */
@media (min-width: 1920px) {
  :root {
    --wp--style--global--content-size: 1280px;
    --wp--style--global--wide-size: 1600px;
  }
  body { font-size: 1.125rem; }
  .hero-title { font-size: 3rem; }
  .archive-header .wp-block-query-title { font-size: 3rem !important; }
  .featured-story-title { font-size: 2rem !important; }
}

/* --- HiDPI / Retina: thinner borders look better --- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .post-card,
  .sidebar-widget,
  .featured-post { border-width: 0.5px; }
}

/* --- Print: black-on-white, 1 column, no nav/ads/CTA --- */
@media print {
  .header-utility-bar, .header-topic-nav, .newsletter-cta,
  .hero-buttons, .ads-sidebar, .ads-in-content, .ads-footer,
  .sidebar-widget { display: none !important; }
  body { font-size: 11pt; line-height: 1.4; color: #000; background: #fff; }
  a { text-decoration: underline; color: #000; }
  .post-card { break-inside: avoid; border: 0; }
}


/* ============================================================================
   BUTTON STYLES (v3 — cross-device, no !important)
   ----------------------------------------------------------------------------
   The parent theme (twentytwentyfive) sets good defaults:
     - .wp-block-button__link: cursor:pointer, padding 1rem 2.25rem,
       border-radius 9999px (pill), text-decoration:none
   We OVERRIDE ONLY:
     - the colors (parent uses contrast/black, we want brand blue)
     - the border-radius (we want 6px, not 9999px pill)
     - the touch target (we guarantee >=44px on touch, >=40px on desktop)
     - hover/active/focus-visible/disabled states for mouse, touch, and keyboard
   The parent's fluid typography on the button font-size is preserved.
   ============================================================================ */

.wp-block-button__link,
.is-style-fill .wp-block-button__link,
.is-style-outline .wp-block-button__link {
  /* Layout — keep the parent's flex centering */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  /* Touch target — WCAG 2.5.5 target size >=44x44px */
  min-height: 44px;
  min-width: 44px;

  /* Spacing — fluid: bigger on desktop, compact on mobile */
  padding: clamp(0.6rem, 0.4rem + 0.5vw, 0.85rem) clamp(1.1rem, 0.6rem + 1.5vw, 1.75rem);

  /* Visual */
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;

  /* Interaction perf */
  cursor: pointer;
  touch-action: manipulation;       /* kill 300ms tap delay on touch */
  -webkit-tap-highlight-color: transparent;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

/* Primary: filled brand color (default style + explicit is-style-fill) */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.is-style-fill .wp-block-button__link {
  background: var(--wp--preset--color--brand, #4338ca);
  color: var(--wp--preset--color--base, #fafaf7);
  border: 1px solid var(--wp--preset--color--brand, #4338ca);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.is-style-fill .wp-block-button__link:hover {
  background: var(--wp--preset--color--brand, #4338ca);
  border-color: var(--wp--preset--color--brand, #4338ca);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:active,
.is-style-fill .wp-block-button__link:active {
  background: var(--wp--preset--color--brand, #4338ca);
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Outline style */
.is-style-outline > .wp-block-button__link {
  background: transparent;
  color: var(--wp--preset--color--brand, #4338ca);
  border: 1px solid var(--wp--preset--color--brand, #4338ca);
}

.is-style-outline > .wp-block-button__link:hover {
  background: color-mix(in srgb, var(--wp--preset--color--brand, #4338ca) 8%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.is-style-outline > .wp-block-button__link:active {
  background: color-mix(in srgb, var(--wp--preset--color--brand, #4338ca) 15%, transparent);
  transform: translateY(0);
}

/* Focus — visible only for keyboard nav (not mouse clicks) */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item__content:focus-visible,
.wp-block-social-link-anchor:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand, #4338ca);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Disabled state */
.wp-block-button__link[disabled],
.wp-block-button.is-style-fill .wp-block-button__link[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Block-level (full-width) button — used in mobile hero / CTA banners */
.wp-block-button.aligncenter .wp-block-button__link,
.hero-buttons .wp-block-button__link {
  width: auto;            /* default — desktop */
}

@media (max-width: 600px) {
  .wp-block-button__link,
  .is-style-fill .wp-block-button__link,
  .is-style-outline .wp-block-button__link {
    /* Larger hit target on touch */
    min-height: 48px;
    padding: 0.85rem 1.4rem;
    font-size: 1rem;        /* don't rely on fluid clamp below this size */
  }
  /* Full-width buttons on mobile (hero, CTAs) */
  .hero-buttons .wp-block-button__link,
  .newsletter-cta .wp-block-button__link {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link,
  .is-style-fill .wp-block-button__link,
  .is-style-outline .wp-block-button__link,
  .post-card .wp-block-post-featured-image img,
  .featured-post .wp-block-post-featured-image img,
  .header-topic-nav a,
  .header-topic-nav a::after,
  .wp-block-social-link-anchor,
  .article-nav a,
  .post-card,
  .badge,
  .category-chip,
  .secondary-title {
    transition: none !important;
    transform: none !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   IMPROVED ARTICLE TYPOGRAPHY
   ============================================================================ */

.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4 {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--30);
}

.wp-block-post-content ul,
.wp-block-post-content ol {
	margin-left: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
	line-height: 1.75;
}

.wp-block-post-content li {
	margin-bottom: 0.5rem;
}

.wp-block-post-content code,
.entry-content code,
p code,
li code {
	background: var(--wp--preset--color--surface, #f0efe8);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-weight: 500;
	font-size: 0.9em;
	font-family: var(--wp--preset--font-family--fira-code, 'Fira Code', 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace);
}

.wp-block-post-content pre,
.entry-content pre {
	background: var(--wp--preset--color--surface, #f0efe8);
	border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--40);
	overflow-x: auto;
	font-size: 0.9rem;
	font-family: var(--wp--preset--font-family--fira-code, 'Fira Code', 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace);
	line-height: 1.5;
}

/* ============================================================================
   ACCESSIBILITY & CLS FIXES
   ============================================================================ */

/* Ensure images have aspect ratio to prevent layout shift */
.wp-block-image img,
.wp-block-post-featured-image img {
	display: block;
	height: auto;
	/* v5: Material elevation — layered drop shadow (hexo-theme-fluid style) */
	box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
	border-radius: 4px;
}

/* v10: Featured images get a fixed 16:9 aspect ratio so the
   card grid doesn't shift when images load (CLS prevention).
   `aspect-ratio: 16/9` reserves the space; `object-fit: cover`
   fills it; `loading="lazy"` is added by functions.php. */
.wp-block-post-featured-image,
.post-card .wp-block-post-featured-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface, #f0efe8);
}
.post-card .wp-block-post-featured-image img,
.featured-post .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Hover zoom is on img, not the wrapper, so the wrapper stays
	   static and the zoom doesn't push neighboring cards around. */
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.post-card:hover .wp-block-post-featured-image img,
.featured-post:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* v5: same elevation on the hero/featured post image and on card thumbnails */
.hero-featured .wp-block-post-featured-image img,
.post-card img,
.wp-block-post-featured-image img {
	box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
	border-radius: 4px;
}

/* Ad slot placeholders: reserve space */
.is-style-monetization-slot {
	min-height: 250px;
}

/* Prevent button text wrapping on small screens */
.wp-block-button__link {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}



/* ============================================================================
   V2 MAGAZINE LAYOUT - HEADER, HERO, SECTIONS, SIDEBARS
   ============================================================================ */

/* HEADER LAYERS */
.header-utility-bar {
	font-size: 0.9rem;
	background-color: var(--wp--preset--color--surface, #f0efe8);
}

.header-brand {
	border-bottom: 1px solid var(--wp--preset--color--border, #d8d6cc);
}

.header-brand .wp-block-site-title {
	font-size: 2rem;
	margin: 0;
}

.header-tagline {
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted, #5a5c6b);
	margin: 0.5rem 0 0;
}

.header-primary-nav {
	background-color: var(--wp--preset--color--base, #fafaf7);
	border-bottom: 1px solid var(--wp--preset--color--border, #d8d6cc);
}

.header-primary-nav .wp-block-navigation {
	gap: var(--wp--preset--spacing--40);
}

.header-topic-nav {
	background-color: var(--wp--preset--color--surface, #f0efe8);
	border-bottom: 1px solid var(--wp--preset--color--border, #d8d6cc);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.topic-nav-label {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted, #5a5c6b);
	white-space: nowrap;
}

/* HERO SECTION (65% / 35% split) */
.hero-section {
	background-color: var(--wp--preset--color--base, #fafaf7);
}

.hero-featured {
	/* 2 columns out of 3 grid = ~67% */
}

.hero-featured .featured-post {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.hero-featured .hero-title {
	font-size: 2.2rem;
	line-height: 1.2;
	margin: 0;
}

.hero-featured .hero-excerpt {
	font-size: 1.1rem;
	color: var(--wp--preset--color--muted, #5a5c6b);
	line-height: 1.5;
}

.hero-featured .wp-block-post-featured-image img {
	border-radius: 8px;
	display: block;
}

.hero-secondary {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.hero-secondary .wp-block-group {
	border: 1px solid var(--wp--preset--color--border, #d8d6cc);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--20);
	transition: border-color 200ms ease;
}

.hero-secondary .wp-block-group:hover {
	border-color: var(--wp--preset--color--brand, #4338ca);
}

.secondary-title {
	font-size: 1.05rem;
	margin: 0;
	line-height: 1.3;
}

/* CATEGORY SECTIONS */
.category-section {
	scroll-margin-top: 100px; /* For anchor links below fixed header */
}

.section-title {
	font-size: 2rem;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--heading, #0d0f1c);
}

.category-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.post-card {
	border: 1px solid var(--wp--preset--color--border, #d8d6cc);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--20);
	transition: all 200ms ease;
	display: flex;
	flex-direction: column;
}

.post-card:hover {
	border-color: var(--wp--preset--color--brand, #4338ca);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.post-card-title {
	font-size: 1.05rem;
	line-height: 1.3;
	margin: 0;
}

.post-card-date {
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted, #5a5c6b);
	margin: 0;
}

/* NEWSLETTER SECTION */
.newsletter-section {
	background-color: var(--wp--preset--color--brand, #4338ca);
	color: var(--wp--preset--color--base, #fafaf7);
	border-radius: 8px;
}

.newsletter-title {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--30);
	color: inherit;
}

/* TWO-COLUMN ARTICLE LAYOUT */
.article-layout-70-30 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

.article-column-main {
	grid-column: span 2;
}

.article-sidebar {
	grid-column: span 1;
	position: sticky;
	top: 120px; /* Below fixed header */
}

.article-title {
	font-size: 2.2rem;
	line-height: 1.2;
	margin-top: 0;
	color: var(--wp--preset--color--heading, #0d0f1c);
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted, #5a5c6b);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border, #d8d6cc);
	margin-bottom: var(--wp--preset--spacing--40);
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40) 0;
	border-top: 1px solid var(--wp--preset--color--border, #d8d6cc);
	border-bottom: 1px solid var(--wp--preset--color--border, #d8d6cc);
	margin: var(--wp--preset--spacing--50) 0;
}

.tags-label {
	font-weight: 600;
	font-size: 0.95rem;
	margin: 0;
}

.article-author-box,
.article-author-box.wp-block-group {
	border: 1px solid var(--wp--preset--color--border, #d8d6cc);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--surface, #f0efe8);
}

.author-box-title {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: 1.1rem;
}

.author-bio {
	margin: 0;
	line-height: 1.6;
}

/* SIDEBAR WIDGETS */
.sidebar-widget {
	border: 1px solid var(--wp--preset--color--border, #d8d6cc);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--base, #fafaf7);
}

.sidebar-widget.newsletter-widget {
	background-color: var(--wp--preset--color--surface, #f0efe8);
	border-color: var(--wp--preset--color--brand, #4338ca);
}

.widget-title {
	font-size: 1.1rem;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--heading, #0d0f1c);
}

.most-popular-widget ul,
.categories-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.most-popular-widget a,
.categories-list a {
	color: var(--wp--preset--color--brand, #4338ca);
	text-decoration: none;
	font-size: 0.95rem;
}

.most-popular-widget a:hover,
.categories-list a:hover {
	text-decoration: underline;
}

/* ARCHIVE / SECTION PAGES */
.archive-layout-70-30 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

.archive-column-main {
	grid-column: span 2;
}

.archive-sidebar {
	grid-column: span 1;
	position: sticky;
	top: 120px;
}

/* Archive header — the category title banner */
.archive-header .wp-block-query-title {
	font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	color: var(--wp--preset--color--heading, #0A192F);
	line-height: 1.1;
}

.featured-story {
	border: 1px solid var(--wp--preset--color--border, #d8d6cc);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--surface, #f0efe8);
}

.featured-story-title {
	font-size: 1.8rem;
	line-height: 1.2;
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Post cards in the archive list — add separator borders */
.archive-column-main .wp-block-post-template .wp-block-post {
	border-bottom: 1px solid var(--wp--preset--color--border, #D1D9E0);
	padding-bottom: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--40);
}

.archive-post-title {
	font-size: 1.2rem;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--10);
}

.archive-post-date {
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted, #5a5c6b);
}

.archive-pagination {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--60);
	border-top: 1px solid var(--wp--preset--color--border, #d8d6cc);
}

/* Latest posts grid baseline */
.latest-posts-grid .wp-block-post-template.is-layout-grid {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: var(--wp--preset--spacing--40) !important;
}

/* RESPONSIVE: TABLET */


/* RESPONSIVE: MOBILE */


/* ============================================================================
   CLOUDSCAPE DESIGN SYSTEM (Optimized Dark Mode Baseline)
   ============================================================================ */

:root {
  /* v21: Visual identity rebrand — Deep Navy + Cyber Cyan.
     Background is cool off-white so the deep navy ink (#0A192F) and
     cyber cyan accent (#00E5FF) read with high contrast and avoid
     the "everything is dark" trap. */
  --cloudscape-color-background: #f4f7fb;        /* Cool off-white (matches theme.json base) */
  --cloudscape-color-text-default: #0A192F;      /* Deep Navy — body ink */
  --cloudscape-color-text-secondary: #5A6B7A;    /* Slate — secondary text */
  --cloudscape-color-text-inverse: #f4f7fb;      /* Light text on dark navy surfaces */
  --cloudscape-color-border-default: #D1D9E0;    /* Cool taupe */
  --cloudscape-color-border-strong: #5A6B7A;     /* Slate — UI focus rings + form fields (3:1) */
  --cloudscape-color-surface: #E8EEF5;           /* Cool gray — cards, code blocks */
  --cloudscape-color-brand: #00E5FF;             /* Cyber Cyan — primary accent */
  --cloudscape-color-brand-hover: #00B8CC;       /* Darker cyan for hover */
  --cloudscape-color-success: #15803d;           /* Forest green (kept from v8) */
  --cloudscape-color-warning: #FF5A5F;           /* Alert Orange (per user spec) */
  --cloudscape-color-error: #FF5A5F;             /* Alert Orange (per user spec) */
  --cloudscape-color-info: #00E5FF;              /* Cyber Cyan */
  --cloudscape-color-highlight: #112240;         /* Shield Blue — secondary dark accent */
  --cloudscape-color-heading: #0A192F;           /* Deep Navy — same as body ink for cohesion */
  --cloudscape-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cloudscape-font-heading: 'Outfit', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Dynamically map WordPress presets to Cloudscape system variables so Gutenberg block styles react to light/dark themes */
  --wp--preset--color--base: var(--cloudscape-color-background) !important;
  --wp--preset--color--contrast: var(--cloudscape-color-text-default) !important;
  --wp--preset--color--brand: var(--cloudscape-color-brand) !important;
  --wp--preset--color--highlight: var(--cloudscape-color-highlight) !important;
  --wp--preset--color--muted: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--surface: var(--cloudscape-color-surface) !important;
  --wp--preset--color--danger: var(--cloudscape-color-error) !important;
  --wp--preset--color--success: var(--cloudscape-color-success) !important;
  --wp--preset--color--warning: var(--cloudscape-color-warning) !important;
  --wp--preset--color--info: var(--cloudscape-color-info) !important;
  --wp--preset--color--heading: var(--cloudscape-color-heading) !important;
  --wp--preset--color--border: var(--cloudscape-color-border-default) !important;

  /* Parent theme variables remapping */
  --wp--preset--color--accent-1: var(--cloudscape-color-brand) !important;
  --wp--preset--color--accent-2: var(--cloudscape-color-brand) !important;
  --wp--preset--color--accent-3: var(--cloudscape-color-brand) !important;
  --wp--preset--color--accent-4: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--accent-5: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--contrast-2: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--contrast-3: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--contrast-4: var(--cloudscape-color-text-secondary) !important;
}

/* Global Styles */
body {
  font-family: var(--cloudscape-font-primary);
  color: var(--cloudscape-color-text-default);
  background-color: var(--cloudscape-color-background);
  /* v5: subtle letter-spacing for calmer reading (hexo-theme-fluid) */
  letter-spacing: 0.02em;

  /* Dynamically map WordPress presets to Cloudscape system variables so Gutenberg block styles react to light/dark themes */
  --wp--preset--color--base: var(--cloudscape-color-background) !important;
  --wp--preset--color--contrast: var(--cloudscape-color-text-default) !important;
  --wp--preset--color--brand: var(--cloudscape-color-brand) !important;
  --wp--preset--color--highlight: var(--cloudscape-color-highlight) !important;
  --wp--preset--color--muted: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--surface: var(--cloudscape-color-surface) !important;
  --wp--preset--color--danger: var(--cloudscape-color-error) !important;
  --wp--preset--color--success: var(--cloudscape-color-success) !important;
  --wp--preset--color--warning: var(--cloudscape-color-warning) !important;
  --wp--preset--color--info: var(--cloudscape-color-info) !important;
  --wp--preset--color--heading: var(--cloudscape-color-heading) !important;
  --wp--preset--color--border: var(--cloudscape-color-border-default) !important;

  /* Parent theme variables remapping */
  --wp--preset--color--accent-1: var(--cloudscape-color-brand) !important;
  --wp--preset--color--accent-2: var(--cloudscape-color-brand) !important;
  --wp--preset--color--accent-3: var(--cloudscape-color-brand) !important;
  --wp--preset--color--accent-4: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--accent-5: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--contrast-2: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--contrast-3: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--contrast-4: var(--cloudscape-color-text-secondary) !important;
}

/* Custom cards styling (removed generic .wp-block-group to prevent broken container boxes) */
.card, .widget, .entry, .post-card-legacy {
  background: var(--cloudscape-color-surface);
  border: 1px solid var(--cloudscape-color-border-default);
  border-radius: 8px;
  padding: 24px;
  margin: 16px 0;
}

/* v6: Badges and category chips.
   The chip is the *primary* visual surface for a post's category — it
   must be a pill (not square), not uppercase, and have a real hover state.
   We also style .category-cybersecurity (the per-category section block
   the theme emits) so a single category page reads as a chip group, not
   bare text. */
.badge, .label, .category-chip {
  background-color: color-mix(in srgb, var(--cloudscape-color-brand) 15%, transparent);
  color: var(--cloudscape-color-brand);
  padding: 4px 12px;
  border-radius: 9999px;
  font-weight: 600;
  text-transform: none;
  font-size: 0.8rem;
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.badge:hover, .label:hover, .category-chip:hover,
a.category-chip:hover {
  background-color: color-mix(in srgb, var(--cloudscape-color-brand) 15%, transparent);
  color: var(--cloudscape-color-brand);
  transform: translateY(-1px);
}

/* v6: per-category section block — render as a horizontally-scrolling chip row */
.category-cybersecurity {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0.5rem 0;
}
.category-cybersecurity a {
  text-decoration: none;
}

/* v6: when the chip sits inside a post meta line, tighten the spacing */
.post-card .category-chip,
.post-meta .category-chip {
  margin-right: 6px;
  font-size: 0.72rem;
  padding: 3px 9px;
}

/* SEO Report Styles */
.seo-report {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px;
  background: var(--cloudscape-color-surface);
  border: 1px solid var(--cloudscape-color-border-default);
  border-radius: 8px;
}

.seo-report .header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--cloudscape-color-border-default);
}

.seo-report .header h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  color: #ffffff;
}

.seo-report .score-card {
  background: var(--cloudscape-color-background);
  border: 1px solid var(--cloudscape-color-border-default);
  border-radius: 8px;
  padding: 24px;
  margin: 24px 0;
}

.seo-report .score-value {
  font-size: 32px;
  font-weight: 700;
  min-width: 80px;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  display: inline-block;
}

/* v7: SEO score colors — use the v2 consensus semantic palette, not raw Tailwind shades. */
.seo-score-excellent { background-color: var(--cloudscape-color-success, #15803d); color: #fafaf7; }
.seo-score-good      { background-color: var(--cloudscape-color-warning, #c2410c); color: #fafaf7; }
.seo-score-ok        { background-color: var(--cloudscape-color-info, #4338ca);    color: #fafaf7; }
.seo-score-poor      { background-color: var(--cloudscape-color-error, #be123c);   color: #fafaf7; }

/* ============================================================================
   PREMIUM HOVER, META, & CARD STYLES
   ============================================================================ */

/* Card image zoom-in on hover */
.post-card .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 6px;
	margin-bottom: var(--wp--preset--spacing--20);
}

.post-card .wp-block-post-featured-image img {
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	width: 100%;
	height: auto;
	display: block;
}

.post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

/* Featured Hero card styling */
.featured-post {
	background-color: var(--wp--preset--color--surface, #f0efe8) !important;
	border: 1px solid var(--wp--preset--color--border, #d8d6cc) !important;
	border-radius: 12px !important;
	padding: var(--wp--preset--spacing--40) !important;
	transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.featured-post:hover {
	border-color: var(--wp--preset--color--brand, #4338ca) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
	transform: translateY(-2px);
}

/* Featured Hero image zoom-in on hover */
.featured-post .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 8px;
	margin-bottom: var(--wp--preset--spacing--30);
}

.featured-post .wp-block-post-featured-image img {
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	width: 100%;
	height: auto;
	display: block;
}

.featured-post:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

/* Secondary hero updates card styling */
.hero-secondary-card {
	border: 1px solid var(--wp--preset--color--border, #d8d6cc) !important;
	background-color: var(--wp--preset--color--surface, #f0efe8) !important;
	border-radius: 8px !important;
	padding: var(--wp--preset--spacing--30) !important;
	transition: all 200ms ease !important;
}

.hero-secondary-card:hover {
	border-color: var(--wp--preset--color--brand, #4338ca) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
	transform: translateY(-2px);
}

/* Post card styling overrides */
.post-card {
	border: 1px solid var(--wp--preset--color--border, #d8d6cc) !important;
	background-color: var(--wp--preset--color--surface, #f0efe8) !important;
	border-radius: 8px !important;
	padding: var(--wp--preset--spacing--30) !important;
	transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1) !important;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.post-card:hover {
	border-color: var(--wp--preset--color--brand, #4338ca) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
	transform: translateY(-3px);
}

/* Read Time Badge Styling */
.read-time {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--muted, #5a5c6b) !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.post-card-meta .read-time {
	margin: 0 !important;
}

/* Topic nav item hover animations */
.header-topic-nav .wp-block-navigation-item a {
	position: relative;
	transition: color 200ms ease;
}

.header-topic-nav .wp-block-navigation-item a::after {
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 2px;
	bottom: -4px;
	left: 0;
	background-color: var(--wp--preset--color--brand, #4338ca) !important;
	transform-origin: bottom right;
	transition: transform 0.25s ease-out;
}

.header-topic-nav .wp-block-navigation-item a:hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
}

/* Premium Header styling */
.header-utility-bar {
	background-color: var(--wp--preset--color--surface, #f0efe8) !important;
	border-bottom: 1px solid var(--wp--preset--color--border, #d8d6cc) !important;
}

.header-brand {
	background-color: var(--wp--preset--color--base, #fafaf7) !important;
	border-bottom: 1px solid var(--wp--preset--color--border, #d8d6cc) !important;
}

.header-brand .wp-block-site-title a {
	color: var(--wp--preset--color--contrast, #1a1d2e) !important;
	text-decoration: none;
}

.header-tagline {
	color: var(--wp--preset--color--muted, #5a5c6b) !important;
}

.header-primary-nav {
	background-color: var(--wp--preset--color--base, #fafaf7) !important;
	border-bottom: 1px solid var(--wp--preset--color--border, #d8d6cc) !important;
	/* v5: ground-glass nav (hexo-theme-fluid). Only meaningful when the nav
	   is position:sticky/fixed; on a static in-flow nav the filter is a no-op. */
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
	background-color: color-mix(in srgb, var(--cloudscape-color-background) 85%, transparent) !important;
}

.header-primary-nav .wp-block-navigation a {
	color: var(--wp--preset--color--contrast, #1a1d2e) !important;
}

.header-topic-nav {
	background-color: var(--wp--preset--color--surface, #f0efe8) !important;
	border-bottom: 1px solid var(--wp--preset--color--border, #d8d6cc) !important;
}

.header-topic-nav .wp-block-navigation a {
	color: var(--wp--preset--color--contrast, #1a1d2e) !important;
}

/* Footer Styling */
.wp-block-template-part[slug="footer"] > .wp-block-group,
footer .wp-block-group,
.bs5-footer {
	border-top: 1px solid var(--wp--preset--color--border, #d8d6cc) !important;
	background-color: var(--cloudscape-color-surface) !important;
	color: var(--cloudscape-color-text-default) !important;
	text-align: center;
}
.bs5-footer p,
.bs5-footer span,
.bs5-footer div {
	color: var(--cloudscape-color-text-default) !important;
}
.bs5-footer p {
	opacity: 0.8;
}
.bs5-footer .wp-block-navigation a {
	color: var(--cloudscape-color-brand) !important;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
}
.bs5-footer .wp-block-navigation a:hover {
	color: var(--cloudscape-color-brand-hover) !important;
	text-decoration: underline;
}
.bs5-footer .wp-block-social-links a,
.bs5-footer .wp-block-social-links svg {
	color: var(--cloudscape-color-brand) !important;
	fill: currentColor !important;
}

/* Focus-visible: visible keyboard/touch focus without mouse :hover */
.post-card a:focus-visible,
.archive-post-title a:focus-visible,
.featured-story-title a:focus-visible,
.curated-cat-link:focus-visible,
.about-topic-card:focus-visible,
.about-author-link:focus-visible,
.services-card a:focus-visible {
  outline: 2px solid var(--wp--preset--color--brand, #4338ca);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-color-scheme: dark) {
  .post-card a:focus-visible,
  .archive-post-title a:focus-visible,
  .featured-story-title a:focus-visible,
  .curated-cat-link:focus-visible,
  .about-topic-card:focus-visible,
  .about-author-link:focus-visible,
  .services-card a:focus-visible {
    outline-color: #00E5FF;
  }
}

/* ============================================================================
   DARK MODE (auto-switch on user preference + `body.dark` opt-in for toggle)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* v21: Dark mode — Deep Navy as the page background, Shield Blue
       as the surface, Cyber Cyan stays the accent. Inter for text,
       Outfit for headings. Same typography as light mode. */
    --cloudscape-color-background: #0A192F;        /* Deep Navy (page bg in dark mode) */
    --cloudscape-color-text-default: #f4f7fb;      /* Cool off-white (text) */
    --cloudscape-color-text-secondary: #8a9bb0;    /* Muted slate */
    --cloudscape-color-text-inverse: #0A192F;      /* Dark text on cyan surfaces */
    --cloudscape-color-border-default: #112240;    /* Shield Blue (subtle borders) */
    --cloudscape-color-border-strong: #2a4068;     /* Stronger border for UI (3:1) */
    --cloudscape-color-surface: #112240;           /* Shield Blue (cards, code) */
    --cloudscape-color-brand: #00E5FF;             /* Cyber Cyan (same in dark mode) */
    --cloudscape-color-brand-hover: #66efff;       /* Lighter cyan for hover */
    --cloudscape-color-success: #4ade80;
    --cloudscape-color-warning: #FF5A5F;           /* Alert Orange */
    --cloudscape-color-error: #FF5A5F;
    --cloudscape-color-info: #00E5FF;
    --cloudscape-color-highlight: #00E5FF;         /* In dark mode, highlight reuses the cyan */
    --cloudscape-color-heading: #f4f7fb;           /* Light text for headings on dark bg */

    /* Preset color remapping for prefers-dark context */
    --wp--preset--color--base: var(--cloudscape-color-background) !important;
    --wp--preset--color--contrast: var(--cloudscape-color-text-default) !important;
    --wp--preset--color--brand: var(--cloudscape-color-brand) !important;
    --wp--preset--color--highlight: var(--cloudscape-color-highlight) !important;
    --wp--preset--color--muted: var(--cloudscape-color-text-secondary) !important;
    --wp--preset--color--surface: var(--cloudscape-color-surface) !important;
    --wp--preset--color--danger: var(--cloudscape-color-error) !important;
    --wp--preset--color--success: var(--cloudscape-color-success) !important;
    --wp--preset--color--warning: var(--cloudscape-color-warning) !important;
    --wp--preset--color--info: var(--cloudscape-color-info) !important;
    --wp--preset--color--heading: var(--cloudscape-color-heading) !important;
    --wp--preset--color--border: var(--cloudscape-color-border-default) !important;

    /* Parent theme variables remapping for prefers-dark */
    --wp--preset--color--accent-1: var(--cloudscape-color-brand) !important;
    --wp--preset--color--accent-2: var(--cloudscape-color-brand) !important;
    --wp--preset--color--accent-3: var(--cloudscape-color-brand) !important;
    --wp--preset--color--accent-4: var(--cloudscape-color-text-secondary) !important;
    --wp--preset--color--accent-5: var(--cloudscape-color-text-secondary) !important;
    --wp--preset--color--contrast-2: var(--cloudscape-color-text-secondary) !important;
    --wp--preset--color--contrast-3: var(--cloudscape-color-text-secondary) !important;
    --wp--preset--color--contrast-4: var(--cloudscape-color-text-secondary) !important;
  }
}

html.dark,
body.dark,
html.dark body,
body.dark-mode {
  /* v21: dark mode override — same as prefers-color-scheme: dark */
  --cloudscape-color-background: #0A192F;
  --cloudscape-color-text-default: #f4f7fb;
  --cloudscape-color-text-secondary: #8a9bb0;
  --cloudscape-color-text-inverse: #0A192F;
  --cloudscape-color-border-default: #112240;
  --cloudscape-color-border-strong: #2a4068;
  --cloudscape-color-surface: #112240;
  --cloudscape-color-brand: #00E5FF;
  --cloudscape-color-brand-hover: #66efff;
  --cloudscape-color-success: #4ade80;
  --cloudscape-color-warning: #FF5A5F;
  --cloudscape-color-error: #FF5A5F;
  --cloudscape-color-info: #00E5FF;
  --cloudscape-color-highlight: #00E5FF;
  --cloudscape-color-heading: #f4f7fb;

  /* Preset color remapping for dark theme class context */
  --wp--preset--color--base: var(--cloudscape-color-background) !important;
  --wp--preset--color--contrast: var(--cloudscape-color-text-default) !important;
  --wp--preset--color--brand: var(--cloudscape-color-brand) !important;
  --wp--preset--color--highlight: var(--cloudscape-color-highlight) !important;
  --wp--preset--color--muted: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--surface: var(--cloudscape-color-surface) !important;
  --wp--preset--color--danger: var(--cloudscape-color-error) !important;
  --wp--preset--color--success: var(--cloudscape-color-success) !important;
  --wp--preset--color--warning: var(--cloudscape-color-warning) !important;
  --wp--preset--color--info: var(--cloudscape-color-info) !important;
  --wp--preset--color--heading: var(--cloudscape-color-heading) !important;
  --wp--preset--color--border: var(--cloudscape-color-border-default) !important;

  /* Parent theme variables remapping for dark */
  --wp--preset--color--accent-1: var(--cloudscape-color-brand) !important;
  --wp--preset--color--accent-2: var(--cloudscape-color-brand) !important;
  --wp--preset--color--accent-3: var(--cloudscape-color-brand) !important;
  --wp--preset--color--accent-4: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--accent-5: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--contrast-2: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--contrast-3: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--contrast-4: var(--cloudscape-color-text-secondary) !important;
}

html.light,
body.light,
html.light body {
  /* v21: explicit light-mode override — same as :root default */
  --cloudscape-color-background: #f4f7fb;
  --cloudscape-color-text-default: #0A192F;
  --cloudscape-color-text-secondary: #5A6B7A;
  --cloudscape-color-text-inverse: #f4f7fb;
  --cloudscape-color-border-default: #D1D9E0;
  --cloudscape-color-border-strong: #5A6B7A;
  --cloudscape-color-surface: #E8EEF5;
  --cloudscape-color-brand: #00E5FF;
  --cloudscape-color-brand-hover: #00B8CC;
  --cloudscape-color-success: #15803d;
  --cloudscape-color-warning: #FF5A5F;
  --cloudscape-color-error: #FF5A5F;
  --cloudscape-color-info: #00E5FF;
  --cloudscape-color-highlight: #112240;
  --cloudscape-color-heading: #0A192F;

  /* Preset color remapping for light theme class context */
  --wp--preset--color--base: var(--cloudscape-color-background) !important;
  --wp--preset--color--contrast: var(--cloudscape-color-text-default) !important;
  --wp--preset--color--brand: var(--cloudscape-color-brand) !important;
  --wp--preset--color--highlight: var(--cloudscape-color-highlight) !important;
  --wp--preset--color--muted: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--surface: var(--cloudscape-color-surface) !important;
  --wp--preset--color--danger: var(--cloudscape-color-error) !important;
  --wp--preset--color--success: var(--cloudscape-color-success) !important;
  --wp--preset--color--warning: var(--cloudscape-color-warning) !important;
  --wp--preset--color--info: var(--cloudscape-color-info) !important;
  --wp--preset--color--heading: var(--cloudscape-color-heading) !important;
  --wp--preset--color--border: var(--cloudscape-color-border-default) !important;

  /* Parent theme variables remapping for light */
  --wp--preset--color--accent-1: var(--cloudscape-color-brand) !important;
  --wp--preset--color--accent-2: var(--cloudscape-color-brand) !important;
  --wp--preset--color--accent-3: var(--cloudscape-color-brand) !important;
  --wp--preset--color--accent-4: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--accent-5: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--contrast-2: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--contrast-3: var(--cloudscape-color-text-secondary) !important;
  --wp--preset--color--contrast-4: var(--cloudscape-color-text-secondary) !important;
}


/* ============================================================================
   v6: BACK TO TOP BUTTON
   Hidden by default; revealed by JS adding .back-to-top--visible to body
   (e.g. when scrollY > 400px). 100% CSS for the visual; the JS just toggles
   a class on <body>. The button itself is rendered by the page header part.
   ============================================================================ */
.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 1.1em;
  min-height: 44px;
  border-radius: 9999px;
  background: var(--wp--preset--color--brand, #4338ca);
  color: var(--wp--preset--color--base, #fafaf7);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, background-color 150ms ease;
}
.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--cloudscape-color-brand-hover, #312e81);
  outline: 2px solid var(--cloudscape-color-brand, #4338ca);
  outline-offset: 3px;
}
body.back-to-top--visible .back-to-top {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0ms; transform: none; }
}


/* ============================================================================
   v6: IN-ARTICLE PREV / NEXT NAV (after the article body)
   Two buttons side-by-side; first item is "Previous" (left), second is
   "Next" (right). The page template renders a <nav class="article-nav"> with
   two <a> children.
   ============================================================================ */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 2.5rem 0 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--wp--preset--color--border, #d8d6cc);
  border-bottom: 1px solid var(--wp--preset--color--border, #d8d6cc);
}
.article-nav a {
  display: flex;
  flex-direction: column;
  padding: 0.85rem 1rem;
  min-height: 64px;
  border: 1px solid var(--wp--preset--color--border, #d8d6cc);
  border-radius: 8px;
  background: var(--wp--preset--color--surface, #f0efe8);
  color: var(--wp--preset--color--contrast, #1a1d2e);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.3;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.article-nav a:hover,
.article-nav a:focus-visible {
  border-color: var(--wp--preset--color--brand, #4338ca);
  background: color-mix(in srgb, var(--cloudscape-color-brand) 8%, var(--cloudscape-color-surface, #f0efe8));
  transform: translateY(-1px);
  outline: none;
}
.article-nav .article-nav-direction {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--muted, #5a5c6b);
  margin-bottom: 0.25rem;
}
.article-nav .article-nav-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--wp--preset--color--contrast, #1a1d2e);
}
.article-nav .article-nav--next {
  text-align: right;
  align-items: flex-end;
}
@media (max-width: 600px) {
  .article-nav { grid-template-columns: 1fr; }
}


/* ============================================================================
   v6: SOCIAL ICONS — bigger, with a "Follow" label, two layouts
   .social-links-follow is the in-content / header "Follow us" block.
   .wp-block-social-links (the core block) gets bigger icon targets and
   a 2px ring on hover.
   ============================================================================ */
.social-links-follow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  background: var(--wp--preset--color--surface, #f0efe8);
  border: 1px solid var(--wp--preset--color--border, #d8d6cc);
  border-radius: 9999px;
}
.social-links-follow .social-links-follow-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--wp--preset--color--muted, #5a5c6b);
}
.social-links-follow .wp-block-social-links {
  margin: 0;
  gap: 4px;
}

/* Bigger social icon targets — the default 24px svg is too small to tap
   and too quiet visually. Bumping to 32px svg in a 40px box. */
.wp-block-social-links .wp-block-social-link-anchor {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--cloudscape-color-brand) 8%, transparent);
  color: var(--cloudscape-color-brand, #4338ca);
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.wp-block-social-links .wp-block-social-link-anchor svg {
  width: 20px;
  height: 20px;
}
.wp-block-social-links .wp-block-social-link-anchor:hover,
.wp-block-social-links .wp-block-social-link-anchor:focus-visible {
  background: var(--cloudscape-color-brand, #4338ca);
  color: var(--wp--preset--color--base, #fafaf7);
  transform: translateY(-1px);
  outline: none;
}


/* ============================================================================
   v6: CTA IN-CONTENT BUTTONS — strong primary / outline secondary
   The default .wp-block-button styles are fine; this gives the in-content
   CTA group a clearer visual rhythm.
   ============================================================================ */
.wp-block-buttons {
  margin: 1.5rem 0;
}
.wp-block-buttons .wp-block-button__link {
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
}


/* ============================================================================
   v7: COLOR DISCIPLINE RULES (the v1 → v7 drift that produced 178 hex literals)

   Three rules, enforced by reviewers (and by this comment):

   1. BRAND TINTS: use ONLY 2 opacities of the brand color:
        - 8%  = subtle surface wash (chip hovers, social icon bg, glass hover)
        - 15% = chip bg, outline hover, button-active bg
      Anything else (6%, 12%, 16%, 22%, 30%) was a one-off that drifted.
      For full brand, use the var directly, never a color-mix toward #000.

   2. SHADOWS: use ONLY 2 levels:
        - subtle:   rgba(0, 0, 0, 0.08) at 4px blur
        - raised:   rgba(0, 0, 0, 0.15) + rgba(0, 0, 0, 0.18) layered
                   (Material elevation; use for image shadows and the
                   back-to-top button)
      Brand-tinted shadows (rgba(29, 114, 167, *)) are forbidden — the brand
      is expressed via color, not via shadow tint.

   3. NAMING: --wp--preset--color--* is the source of truth for LIGHT MODE.
      --cloudscape-color-* is the dark-mode override layer (the :root block
      redeclares wp-preset values when prefers-color-scheme: dark or
      body.dark is active). Two naming rules follow:
        a. If a rule has no dark-mode variant (always light), use
           --wp--preset--color--* directly. Example: .article-cta bg.
        b. If a rule needs a dark-mode variant (chips, surfaces, borders,
           brand hover, brand itself in dark mode), use --cloudscape-color-*
           so the dark override applies. Example: .category-chip bg+color.
   ============================================================================ */

/* ============================================================================
   BS5-BLOG-HOME SHAPE (added 2026-07-03, StartBootstrap Blog Home rework)
   ----------------------------------------------------------------------------
   This block layers the StartBootstrap Blog Home structural shape on top of
   the v8 tokens. It does NOT change v8 colors, typography, or component
   styles. It only adds the layout vocabulary (navbar, page-header, card,
   sidebar, footer) that the new templates reference.
   ============================================================================ */

/* --- 1. BS5-style NAVBAR (1 row, brand + nav, deep-navy on light text) --- */
.bs5-navbar {
  /* v21: rebrand — navbar background is now Deep Navy (heading color),
     not the cyan brand. The cyan is reserved for accents / links /
     active states. White text on navy reads as the strongest header
     contrast possible. */
  background: var(--wp--preset--color--heading, #0A192F);
  border-bottom: 1px solid var(--wp--preset--color--border, #D1D9E0);
  position: relative;
  z-index: 50;
}
.bs5-navbar .wp-block-site-logo img {
  display: block;
  height: 40px;
  width: 40px;
  object-fit: contain;
}
.bs5-navbar .wp-block-site-title {
  margin: 0;
  color: var(--wp--preset--color--base, #f4f7fb);
  letter-spacing: -0.01em;
  font-family: var(--cloudscape-font-heading, 'Outfit', sans-serif);
  font-weight: 700;
}
.bs5-navbar .wp-block-site-title a {
  color: inherit;
  text-decoration: none;
}
.bs5-navbar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bs5-navbar-menu .wp-block-navigation a {
  /* v21: nav links are cyan on the navy bar, with a subtle hover
     background that lifts them off the bar. */
  color: var(--wp--preset--color--base, #f4f7fb);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.bs5-navbar-menu .wp-block-navigation a:hover,
.bs5-navbar-menu .wp-block-navigation a:focus-visible {
  color: var(--wp--preset--color--brand, #00E5FF);
  background: color-mix(in srgb, var(--wp--preset--color--base, #f4f7fb) 8%, transparent);
}

/* Hamburger toggle — visible below 768px */
.bs5-navbar-toggler {
  display: none;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--base, #fafaf7) 40%, transparent);
  color: var(--wp--preset--color--base, #fafaf7);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  align-items: center;
  justify-content: center;
}
.bs5-navbar-toggler-icon {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.bs5-navbar-toggler-icon::before,
.bs5-navbar-toggler-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
}
.bs5-navbar-toggler-icon::before { top: -7px; }
.bs5-navbar-toggler-icon::after  { top:  7px; }

@media (max-width: 768px) {
  .bs5-navbar-toggler { display: inline-flex; }
  .bs5-navbar-menu {
    display: none;
    width: 100%;
    flex-basis: 100%;
    margin-top: var(--wp--preset--spacing--30, 24px);
    flex-direction: column;
    align-items: flex-start !important;
  }
  .bs5-navbar-menu.is-open { display: flex; }
}

/* --- 2. BS5-style PAGE HEADER (hero strip with site name + tagline) --- */
.bs5-page-header {
  text-align: center;
}
.bs5-page-title {
  line-height: 1.1;
}
.bs5-page-tagline {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* --- 3. BS5-style PAGE CONTENT (67/33 grid) --- */
.bs5-page-content {
  max-width: 1400px;
}
.bs5-grid-67-33 {
  align-items: start;
}
@media (max-width: 1023px) {
  .bs5-grid-67-33 {
    grid-template-columns: 1fr !important;
  }
  .bs5-main-col, .bs5-sidebar { grid-column: span 1 !important; }
}

.bs5-section-title {
  line-height: 1.2;
}

/* --- 4. BS5-style CARDS (post cards, featured + grid) --- */
.bs5-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}
.bs5-card:hover {
  transform: translateY(-2px);
  border-color: var(--wp--preset--color--brand, #4338ca) !important;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--wp--preset--color--brand, #4338ca) 12%, transparent);
}
.bs5-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.bs5-card-meta {
  font-size: 0.85rem;
  color: var(--wp--preset--color--muted, #5a5c6b);
  align-items: center;
}
.bs5-card .category-chip {
  font-size: 0.75rem;
  padding: 3px 8px;
}

/* Featured card — slightly larger title */
.bs5-card-featured h2 {
  margin-top: 0;
}

/* --- 5. BS5-style SIDEBAR WIDGETS --- */
.bs5-widget-title {
  line-height: 1.2;
}
.bs5-widget .wp-block-search__inside-wrapper {
  border: 1px solid var(--wp--preset--color--border, #d8d6cc);
  border-radius: 6px;
  background: var(--wp--preset--color--base, #fafaf7);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: border-color 150ms ease;
}
.bs5-widget .wp-block-search__inside-wrapper:focus-within {
  border-color: var(--wp--preset--color--brand, #4338ca);
}
.bs5-widget .wp-block-search__input {
  border: none !important;
  background: transparent !important;
  color: var(--wp--preset--color--contrast, #1a1d2e) !important;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 6px 8px !important;
  outline: none !important;
  box-shadow: none !important;
  width: 100%;
}
.bs5-widget .wp-block-search__input::placeholder {
  color: var(--cloudscape-color-text-secondary) !important;
  opacity: 1 !important;
}
.bs5-widget .wp-block-search__button {
  background: var(--wp--preset--color--brand, #4338ca) !important;
  color: var(--wp--preset--color--base, #fafaf7) !important;
  border: 0 !important;
  border-radius: 4px !important;
  padding: 6px 14px !important;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease;
  min-height: 32px !important;
  margin: 0 !important;
}
.bs5-widget .wp-block-search__button:hover {
  background: var(--wp--preset--color--brand-hover, #312e81) !important;
}
.bs5-widget .wp-block-categories-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bs5-widget .wp-block-categories-list li {
  padding: 4px 0;
}
.bs5-widget .wp-block-categories-list a {
  color: var(--wp--preset--color--contrast, #1a1d2e);
  text-decoration: none;
  font-size: 0.95rem;
}
.bs5-widget .wp-block-categories-list a:hover {
  color: var(--wp--preset--color--brand, #4338ca);
}



/* --- 7. PAGINATION (BS5-style centered, gap between items) --- */
.bs5-pagination .page-numbers,
.bs5-pagination .wp-block-query-pagination-previous,
.bs5-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--wp--preset--color--border, #d8d6cc);
  background: var(--wp--preset--color--base, #fafaf7);
  color: var(--wp--preset--color--contrast, #1a1d2e);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.15s ease;
}
.bs5-pagination .page-numbers.current,
.bs5-pagination a:hover {
  background: var(--wp--preset--color--brand, #4338ca);
  color: var(--wp--preset--color--base, #fafaf7);
  border-color: var(--wp--preset--color--brand, #4338ca);
}

/* --- 8. ARTICLE (single post) specifics --- */
.bs5-article-title {
  line-height: 1.15;
  margin-top: 0;
}
.bs5-article-meta {
  align-items: center;
  color: var(--wp--preset--color--muted, #5a5c6b);
  font-size: 0.9rem;
}
.bs5-article-meta a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
}
.bs5-article-meta a:hover {
  color: var(--wp--preset--color--brand, #4338ca);
}
.bs5-article-tags {
  align-items: center;
}
.bs5-author-box {
  font-size: 0.95rem;
  line-height: 1.6;
}
.bs5-post-nav a {
  color: var(--wp--preset--color--brand, #4338ca);
  text-decoration: none;
}
.bs5-post-nav a:hover {
  text-decoration: underline;
}


/* ============================================================================
   v11 — P-04: topic nav slim secondary row under the BS5 navbar.
   CSS already existed in v9/v10 for `.header-topic-nav`; v11 finalizes the
   contrast for the v8 Trusted Indigo palette and tightens the spacing.
   ============================================================================ */
.header-topic-nav {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--wp--preset--color--border, #d8d6cc);
  background-color: var(--wp--preset--color--surface, #f0efe8);
}

@media (prefers-color-scheme: dark) {
  .header-topic-nav {
    background-color: var(--wp--preset--color--surface, #181a2e);
    border-bottom-color: var(--wp--preset--color--border, #252840);
  }
}

body.dark .header-topic-nav {
  background-color: var(--wp--preset--color--surface, #181a2e);
  border-bottom-color: var(--wp--preset--color--border, #252840);
}

body.light .header-topic-nav {
  background-color: var(--wp--preset--color--surface, #f0efe8);
  border-bottom-color: var(--wp--preset--color--border, #d8d6cc);
}

.header-topic-nav .wp-block-navigation-item__content {
  padding: 0 !important;
}

.header-topic-nav .topic-nav-label {
  color: var(--wp--preset--color--muted, #5a5d8e);
  user-select: none;
}

@media (max-width: 600px) {
  .header-topic-nav {
    padding-left: var(--wp--preset--spacing--30, 1.25rem) !important;
    padding-right: var(--wp--preset--spacing--30, 1.25rem) !important;
  }
  .header-topic-nav .wp-block-navigation {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  .header-topic-nav .wp-block-navigation::-webkit-scrollbar { display: none; }
  .topic-nav-label { display: none; }
}

/* ============================================================================
   v11 — P-10: 2-col related-posts rail with full-bleed on mobile.
   The query emits up to 4 cards in a 2-col grid; on narrow screens it
   collapses to 1-col so each card gets readable width.
   ============================================================================ */
.bs5-related-rail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--30, 1.25rem);
  margin-bottom: var(--wp--preset--spacing--50, 2rem);
}

.bs5-related-rail .wp-block-post-template {
  display: contents;
}

@media (max-width: 640px) {
  .bs5-related-rail { grid-template-columns: 1fr; }
}

/* ============================================================================
   v11 — P-12: dark-mode toggle button in footer.
   Cycles system → dark → light. Inherits footer text color; uses brand
   surface for the chip background so it reads in both light and dark.
   ============================================================================ */
.bs5-dark-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin: 0 auto var(--wp--preset--spacing--20, 0.85rem);
  padding: 0.4em 0.9em;
  min-height: 36px;
  border: 1px solid var(--wp--preset--color--border, #d8d6cc);
  border-radius: 9999px;
  background: var(--wp--preset--color--surface, #f0efe8);
  color: var(--wp--preset--color--contrast, #1a1d2e);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.bs5-dark-toggle:hover,
.bs5-dark-toggle:focus-visible {
  border-color: var(--wp--preset--color--brand, #4338ca);
  color: var(--wp--preset--color--brand, #4338ca);
  transform: translateY(-1px);
  outline: none;
}

.bs5-dark-toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--wp--preset--color--base, #fafaf7),
              0 0 0 4px var(--wp--preset--color--brand, #4338ca);
}

.bs5-dark-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 0;
}

body.dark .bs5-dark-toggle {
  background: var(--wp--preset--color--surface, #181a2e);
  border-color: var(--wp--preset--color--border, #252840);
  color: var(--wp--preset--color--contrast, #f0eee5);
}

/* v11: respect prefers-reduced-motion on the new toggle */
@media (prefers-reduced-motion: reduce) {
  .bs5-dark-toggle,
  .bs5-dark-toggle:hover,
  .bs5-dark-toggle:focus-visible {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   v21 (2026-07-21): Language switcher — re-skin to navy/cyan.
   - v20 had the active pill filled with --brand (was indigo #4338ca).
     After the v21 rebrand, --brand is cyber cyan #00E5FF, which would
     put cyan-on-cyan on the active pill (invisible). Switch the active
     fill to --heading (deep navy #0A192F) and reserve --brand for the
     hover/secondary state.
   - The pill container stays surface-colored on light mode; on dark
     mode it becomes a slightly-lifted dark surface.
   ============================================================ */

.bs5-lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 3px;
  list-style: none;
  background: var(--wp--preset--color--surface, #E8EEF5);
  border: 1px solid var(--wp--preset--color--border, #D1D9E0);
  border-radius: 9999px;
}

.bs5-lang-switcher-item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bs5-lang-switcher-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.32em 0.78em;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--wp--preset--color--contrast, #0A192F);
  border-radius: 9999px;
  border: none;
  background: transparent;
  transition: background-color 140ms ease, color 140ms ease;
  white-space: nowrap;
  line-height: 1;
}

.bs5-lang-switcher-link:hover,
.bs5-lang-switcher-link:focus-visible {
  background-color: var(--wp--preset--color--base, #f4f7fb);
  color: var(--wp--preset--color--brand, #00E5FF);
  outline: none;
}

/* Flag SVG: keep crisp, no inline padding quirks */
.bs5-lang-flag {
  display: inline-block;
  vertical-align: middle;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.bs5-lang-flag-fallback {
  display: inline-block;
  padding: 0.1em 0.4em;
  background: var(--wp--preset--color--border, #D1D9E0);
  color: var(--wp--preset--color--contrast, #0A192F);
  border-radius: 3px;
  font-size: 0.72rem;
  font-weight: 700;
}

.bs5-lang-switcher-label {
  display: inline-block;
  vertical-align: middle;
}

/* Active (current) language: filled deep-navy pill (cyan-on-cyan would
   be invisible, navy-on-surface is the highest-contrast choice). */
.bs5-lang-switcher-item.is-current .bs5-lang-switcher-link {
  background-color: var(--wp--preset--color--heading, #0A192F);
  color: var(--wp--preset--color--base, #f4f7fb);
  cursor: default;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
.bs5-lang-switcher-item.is-current .bs5-lang-switcher-link:hover,
.bs5-lang-switcher-item.is-current .bs5-lang-switcher-link:focus-visible {
  background-color: var(--wp--preset--color--heading, #0A192F);
  color: var(--wp--preset--color--base, #f4f7fb);
}
/* The flag stays visible on the navy fill — add a subtle white ring. */
.bs5-lang-switcher-item.is-current .bs5-lang-flag {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* Dark mode: swap the pill background so the inactive items don't
   blend into the dark page bg. */
body.dark .bs5-lang-switcher {
  background: var(--wp--preset--color--surface, #112240);
  border-color: var(--wp--preset--color--border, #2a4068);
}
body.dark .bs5-lang-switcher-link {
  color: var(--wp--preset--color--contrast, #f4f7fb);
}
body.dark .bs5-lang-switcher-link:hover,
body.dark .bs5-lang-switcher-link:focus-visible {
  background-color: var(--wp--preset--color--base, #0A192F);
  color: var(--wp--preset--color--brand, #00E5FF);
}

/* ============================================================
   v21: top utility bar
   - thin surface-colored strip ABOVE the deep-navy navbar
   - holds: small compliance tagline (left) + lang switcher (right)
   - 1px bottom border gives a clean visual seam from the navbar
   ============================================================ */

.bs5-utility-bar {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--wp--preset--color--border, #D1D9E0);
}

.bs5-utility-bar .wp-block-group {
  /* Force single-line layout; tagline ellipsises on overflow rather
     than wrapping and pushing the lang switcher onto a new line. */
  flex-wrap: nowrap;
}

.bs5-utility-tagline {
  margin: 0;
  /* v21: Outfit for the uppercase utility tagline (per the new typography spec). */
  font-family: var(--cloudscape-font-heading, 'Outfit', system-ui, sans-serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}

.bs5-utility-bar .bs5-lang-switcher {
  flex: 0 0 auto;
  margin-left: var(--wp--preset--spacing--20, 1em);
}

/* Mobile: drop the tagline to save horizontal space, keep switcher
   anchored to the right. */
@media (max-width: 600px) {
  .bs5-utility-tagline { display: none; }
  .bs5-utility-bar .wp-block-group { justify-content: flex-end; }

  .bs5-lang-switcher-link {
    padding: 0.28em 0.6em;
    font-size: 0.68rem;
    gap: 0.35em;
  }
  .bs5-lang-switcher-link .bs5-lang-switcher-label {
    /* On phones, the EN/FR text label adds clutter next to a small flag.
       Drop it; the flag is enough. */
    display: none;
  }
}

/* v20: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .bs5-lang-switcher-link,
  .bs5-lang-switcher-link:hover,
  .bs5-lang-switcher-link:focus-visible {
    transition: none;
  }
}

/* ============================================================
   v21 (2026-07-21): Brand assets — logo + category icons.
   - .bs5-brand-logo is the navbar shield. Sized 3rem (48px) so it
     matches the navbar padding and the 1.35rem site-title baseline.
     The user spec said 8-12rem for the main logo; that range is
     for a full hero-logo use case. In the navbar (where it sits
     inline with the site title) 3rem is the right size — same as
     the v8 site-logo default. The 8-12rem range applies if you
     later add a centered hero lockup.
   - .bs5-topic-nav-icon is the per-category icon in the topic row,
     sized 1.75rem (28px). Inline with the text label; aligned to
     the baseline.
   - .bs5-topic-nav-item is the link wrapper, with a hover state
     that lifts the icon's stroke to the cyan brand color via the
     `currentColor` SVG trick: the SVG strokes are set to
     currentColor in the inline `style` so they inherit from the
     parent link color. (Hand-edited — see "currentColor note" in
     the brand SVG dir.)
   ============================================================ */

.bs5-brand-logo {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  align-self: center;
  flex: 0 0 auto;
  /* Subtle drop shadow so the new mark pops on the navy bar;
     soft cyan glow echoes the watchful-eye dot. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25))
          drop-shadow(0 0 4px rgba(0, 229, 255, 0.25));
}

.bs5-topic-nav-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--30, 1.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bs5-topic-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  color: var(--wp--preset--color--contrast, #0A192F);
  font-family: var(--cloudscape-font-primary, 'Inter', sans-serif);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.25em 0.5em;
  border-radius: 6px;
  transition: color 140ms ease, background-color 140ms ease;
}

.bs5-topic-nav-item:hover,
.bs5-topic-nav-item:focus-visible {
  color: var(--wp--preset--color--brand, #00E5FF);
  background-color: color-mix(in srgb, var(--wp--preset--color--brand, #00E5FF) 8%, transparent);
  outline: none;
}

.bs5-topic-nav-icon {
  display: inline-block;
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.bs5-topic-nav-label {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 600px) {
  /* On phones, drop the topic icons — the text labels alone carry the row. */
  .bs5-topic-nav-icon { display: none; }
  .bs5-topic-nav-item  { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bs5-topic-nav-item,
  .bs5-topic-nav-item:hover {
    transition: none;
  }
}

/* ============================================================
   v24 (2026-07-21): Primary nav with icons (Home, About, Contact,
   Services, Products on a single row, on the deep-navy navbar).
   - Same icon+label pattern as the topic nav, but on the DARK navbar:
     icons are off-white (no currentColor trick — they come from
     individual SVG files, not inline), labels are off-white, hover
     lifts the label to cyber cyan with a subtle bg.
   - Slightly smaller (1.5rem / 24px) than the topic icons (1.75rem)
     so 5 of them fit in the navbar without crowding.
   - The divider is a 1px vertical line in cyan-with-low-opacity to
     split [primary entry points] from [commerce / catalog].
   - Privacy Policy + Disclaimer are NOT here — they live in the
     footer where legal links belong. The v23 placeholder nav had
     them; v24 removes them.
   ============================================================ */

.bs5-primary-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bs5-primary-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  text-decoration: none;
  color: var(--wp--preset--color--base, #f4f7fb);
  font-family: var(--cloudscape-font-primary, 'Inter', sans-serif);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4em 0.65em;
  border-radius: 6px;
  transition: color 140ms ease, background-color 140ms ease;
  white-space: nowrap;
}

.bs5-primary-nav-item:hover,
.bs5-primary-nav-item:focus-visible {
  color: var(--wp--preset--color--brand, #00E5FF);
  background-color: color-mix(in srgb, var(--wp--preset--color--base, #f4f7fb) 8%, transparent);
  outline: none;
}

/* Slight brightness boost on the icon on hover, so the whole item
   reads as one interactive unit rather than icon-static + label-hovers. */
.bs5-primary-nav-item:hover .bs5-primary-nav-icon,
.bs5-primary-nav-item:focus-visible .bs5-primary-nav-icon {
  filter: brightness(1.15) drop-shadow(0 0 4px rgba(0, 229, 255, 0.4));
}

.bs5-primary-nav-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.bs5-primary-nav-label {
  display: inline-block;
  white-space: nowrap;
}

.bs5-primary-nav-divider {
  display: inline-block;
  width: 1px;
  height: 1.5rem;
  margin: 0 var(--wp--preset--spacing--10, 0.25rem);
  background: color-mix(in srgb, var(--wp--preset--color--base, #f4f7fb) 25%, transparent);
}

@media (max-width: 900px) {
  /* At tablet width, drop the labels — the icons alone carry the row.
     5 icons + the brand mark + the lang switcher fit comfortably. */
  .bs5-primary-nav-label { display: none; }
  .bs5-primary-nav-item  { padding: 0.5em; }
  .bs5-primary-nav-divider { display: none; }
  /* Divider is also hidden — without labels, the gap between icons
     does the visual separation. */
}

@media (max-width: 600px) {
  /* On phones, hide the primary nav entirely — the hamburger toggler
     owns the row, and the topic nav is the only iconified row visible.
     This keeps the deep-navy bar from becoming a 5-icon clutter. */
  .bs5-primary-nav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bs5-primary-nav-item,
  .bs5-primary-nav-item:hover {
    transition: none;
  }
}

/* ============================================================
   v25 (2026-07-21): ONE-LINE TOP MENU.
   - Replaces the v24 split layout (primary on the dark navbar +
     topics on a separate light strip) with a single row inside
     the same .bs5-navbar: [primary: 5 items] [divider] [topics: 4 items].
   - The divider is a vertical gradient bar that fades top/bottom
     into the navy surface, so it reads as a soft separator rather
     than a hard line.
   - Topic items keep the .bs5-topic-nav-item class (the same one
     [tt5_topic_item] emits) but get recolored via the
     .bs5-topmenu-topics .bs5-topic-nav-item selector chain so they
     read on the dark navy background just like the primary items.
   - The <ul>/<li> wrappers carry .bs5-topmenu-list /
     .bs5-topmenu-item. The original .bs5-primary-nav rules still
     apply (the inner anchors emit bs5-primary-nav-item), so we
     don't redefine those -- we only style the new wrapper + the
     topic-item dark variant + the divider.
   - Responsive:
       * <900px: primary labels collapse to icons only; topic icons
         also collapse to icon-only to keep the row short.
       * <600px: the entire row collapses into the hamburger menu
         (toggler already controls .is-open).
   - Reduced motion: standard transition:none override.
   ============================================================ */

.bs5-topmenu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--20, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bs5-topmenu-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--10, 0.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bs5-topmenu-item {
  display: inline-flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Vertical separator between the primary group and the topic group. */
.bs5-topmenu-divider {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  margin: 0 var(--wp--preset--spacing--20, 0.5rem);
  /* Gradient: cyan core fading top and bottom into the navy surface,
     so the divider feels like a soft beam rather than a hard line. */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--wp--preset--color--brand, #00E5FF) 35%, transparent) 30%,
    color-mix(in srgb, var(--wp--preset--color--brand, #00E5FF) 55%, transparent) 50%,
    color-mix(in srgb, var(--wp--preset--color--brand, #00E5FF) 35%, transparent) 70%,
    transparent 100%
  );
  min-height: 1.75rem;
  flex: 0 0 auto;
}

/* Topic items inside the dark-navbar top menu:
   recolor text + icon to the off-white palette used by the primary
   items, with cyan hover. The .bs5-topic-nav-icon <img> gets a
   brightness boost on hover via the filter rule. */
.bs5-topmenu-topics .bs5-topic-nav-item {
  color: var(--wp--preset--color--base, #f4f7fb);
}

.bs5-topmenu-topics .bs5-topic-nav-item:hover,
.bs5-topmenu-topics .bs5-topic-nav-item:focus-visible {
  color: var(--wp--preset--color--brand, #00E5FF);
  background-color: color-mix(in srgb, var(--wp--preset--color--base, #f4f7fb) 8%, transparent);
  outline: none;
}

.bs5-topmenu-topics .bs5-topic-nav-item:hover .bs5-topic-nav-icon,
.bs5-topmenu-topics .bs5-topic-nav-item:focus-visible .bs5-topic-nav-icon {
  filter: brightness(1.15) drop-shadow(0 0 4px rgba(0, 229, 255, 0.4));
}

/* Slight typographic difference so the topic items read as a
   "secondary" group on the same row. The visual divider already
   separates them, but a 0.03rem font-size trim reinforces the
   hierarchy without breaking the single-line intent. */
.bs5-topmenu-topics .bs5-topic-nav-item {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4em 0.55em;
  border-radius: 6px;
  transition: color 140ms ease, background-color 140ms ease;
  white-space: nowrap;
}

.bs5-topmenu-topics .bs5-topic-nav-icon {
  width: 1.35rem;
  height: 1.35rem;
}

/* Brand logo sizing lives earlier in this file (v21 brand-assets
   block, .bs5-brand-logo at 2.25rem). v25 updated it to 2.25rem so
   the mark visually balances the menu row instead of towering over
   it; the v25-era duplicate rule that was here is removed. */

@media (min-width: 901px) {
  /* Desktop: keep both groups visible, labels on. */
  .bs5-topmenu { gap: var(--wp--preset--spacing--10, 0.25rem); }
}

@media (max-width: 1100px) and (min-width: 901px) {
  /* Mid-desktop: divider stays, but the topic icons can drop to keep
     the row short on 1024-wide screens. */
  .bs5-topmenu-topics .bs5-topic-nav-icon { width: 1.1rem; height: 1.1rem; }
}

@media (max-width: 900px) {
  /* Tablet: primary labels collapse to icons. Topic labels also drop.
     Divider stays so the two groups still feel grouped. */
  .bs5-primary-nav-label { display: none; }
  .bs5-primary-nav-item  { padding: 0.5em; }
  .bs5-topmenu-topics .bs5-topic-nav-label { display: none; }
  .bs5-topmenu-topics .bs5-topic-nav-item  { padding: 0.5em; font-size: 0.78rem; }
  .bs5-topmenu-topics .bs5-topic-nav-icon  { width: 1.25rem; height: 1.25rem; }
  .bs5-topmenu-divider  { margin: 0 0.35rem; }
}

@media (max-width: 600px) {
  /* Phone: hand the whole row to the hamburger. The primary
     block (which now includes the topics) hides; the toggler
     reveals the full nav on tap. */
  .bs5-topmenu { display: none; }
  .bs5-topmenu.is-open { display: flex; }
  .bs5-navbar-menu.is-open .bs5-topmenu { display: flex; flex-direction: column; align-items: flex-start; }
  .bs5-navbar-menu.is-open .bs5-topmenu-divider { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bs5-topmenu-topics .bs5-topic-nav-item,
  .bs5-topmenu-topics .bs5-topic-nav-item:hover,
  .bs5-topmenu-divider {
    transition: none;
  }
}

/* ============================================================
   v26 (2026-07-21): Hero banner + sr-only H1.
   - The home page header used to render a centred H1 (the site
     title) + a tagline <p>. v26 replaces that text block with
     a 3392x1248 hero banner image. The image carries the brand
     mark, the eyebrow "AdSystem Sentry" text, and the tagline
     "Practical cybersecurity for small IT teams." as baked-in
     artwork.
   - The H1 site-title block is kept in the DOM with a
     .bs5-sr-only class (visually hidden, still announced by
     screen readers) so the page still has a single logical H1
     for SEO and accessibility. The banner <figure> is
     aria-hidden because its text content would otherwise
     duplicate the H1 announcement.
   - v26b: the page-header carries two nested constrained groups
     (outer 800px, inner 700px centred). Both were right for the
     old H1+tagline pair but cap the banner to ~700px on a
     1920px desktop, which reads as a phone-width column. The
     rules below override those constraints when the banner is
     present, so the banner can fill the page-header at full
     available width (the page-header itself is alignfull, so
     it spans the viewport minus the 40px page gutter on each
     side, ~viewport - 80px).
   - The page-header bottom border stays so the banner reads
     as the page's "first band" against the warm-cream body.
   - Responsive:
       * Desktop (>1100px): banner spans the full page-header
         width (viewport - 80px).
       * Tablet (768-1100px): same; the image scales down via
         the intrinsic 8:3 ratio and max-width:100%.
       * Phone (<768px): banner stacks under the navbar; the
         negative margin trick on .bs5-hero-banner keeps it
         edge-to-edge with no awkward gutter.
   - Lazy/eager: loading="eager" + fetchpriority="high" on the
     banner because it is the LCP element on the home page.
   ============================================================ */

.bs5-hero-banner {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

.bs5-hero-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  /* The banner's own deep-navy background bleeds into the page
     surface; no extra border or shadow needed. */
  border-radius: 0;
  margin: 0;
}

/* v26b: when the hero banner is the visible H1 content, the
   page-header's 800px outer and 700px-inner constrained groups
   cap the banner at 700px wide, which reads as a phone column
   on a desktop. Override both: remove the inner 700px cap so
   the figure can fill the page-header at full width, and
   remove the page-header's own 800px cap so it can fill the
   full body width. The banner is then capped at 1400px (matches
   the body content max-width and the navbar) and centered, so
   it does not bleed to the viewport edges on a 1920px display.
   The page-header padding is also reduced to a thin top gap so
   the banner sits closer to the navbar. */
.bs5-page-header:has(.bs5-hero-banner) {
  max-width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom-width: 1px; /* keep the subtle separator under the banner */
}

.bs5-page-header:has(.bs5-hero-banner) > .wp-block-group {
  max-width: 1400px !important;  /* match the body content width */
  width: 100%;
  margin: 0 auto;
  text-align: left;
  padding-left: var(--wp--preset--spacing--40, 2rem);
  padding-right: var(--wp--preset--spacing--40, 2rem);
}

/* The figure itself spans the inner group's content area. We do
   NOT remove its border-radius / bleed it; it sits inside the
   1400px content column with a 8px radius so it reads as a
   "card" rather than a viewport-filling slab. */
.bs5-page-header:has(.bs5-hero-banner) .bs5-hero-banner {
  margin: var(--wp--preset--spacing--30, 1.5rem) 0;
  border-radius: 8px;
  overflow: hidden;
}

.bs5-page-header:has(.bs5-hero-banner) .bs5-hero-banner img {
  border-radius: 8px;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

@media (max-width: 768px) {
  /* Phone: drop the side padding and the radius so the banner
     bleeds to the page edges. No negative-margin trick needed
     because the inner group is already at the body content
     width and the page-header's own alignfull provides the
     outer bleed. */
  .bs5-page-header:has(.bs5-hero-banner) > .wp-block-group {
    padding-left: 0;
    padding-right: 0;
  }
  .bs5-page-header:has(.bs5-hero-banner) .bs5-hero-banner {
    margin: 0;
    border-radius: 0;
  }
  .bs5-page-header:has(.bs5-hero-banner) .bs5-hero-banner img {
    border-radius: 0;
  }
}

/* Screen-reader-only utility. Visually hides an element while
   keeping it announced. Used for the H1 site title now that the
   visual H1 is the hero banner. */
.bs5-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;
}

@media (prefers-reduced-motion: reduce) {
  .bs5-hero-banner img { transition: none; }
}

/* ============================================================
   v27 (2026-07-21): Unified post display type scale.

   BEFORE: every post surface (featured H2, card H3, section H2,
   single H1, body H2/H3/H4, excerpt, meta, button) had its own
   hand-typed font-size/weight/line-height. Result: featured H2
   was 1.75rem/800, card H3 was 1.15rem/700, section H2 was
   1.35rem/800, widget H4 was 1rem/700 -- four different sizes
   in the same column. The post body had no global rule, so each
   pattern (post-standard, post-checklist, post-sponsored) baked
   its own H2/H3 and the visible result was "every article looks
   different".

   AFTER: one type scale, applied uniformly. The scale is
   scoped to the post surfaces (`.bs5-main-col`, `.bs5-card`,
   `.bs5-card-featured`, `.bs5-related-rail`, `.bs5-section-title`)
   so the navbar, sidebar, and footer are untouched.

   The scale:
   ┌──────────────────────────────────────────────────────────┐
   │ Token              Size               Weight   LH    LS  │
   │ ─────────────────  ─────────────────  ───────  ────  ─── │
   │ article-title      clamp(1.875, 3.5vw, 2.5rem)  800  1.15 -0.02em  │
   │ section-title      1.5rem             800      1.15 -0.02em  │
   │ body-h2            clamp(1.5, 2.5vw, 1.875rem) 800  1.20 -0.015em │
   │ body-h3            1.375rem           700      1.25 -0.01em  │
   │ body-h4            1.125rem           700      1.30 -0.005em │
   │ body-p             1.0625rem (17px)   400      1.70  0      │
   │ body-ul/ol         1.0625rem          400      1.70  0      │
   │ body-blockquote    1.125rem           400 it.  1.60  0      │
   │ body-code          0.9375rem (Fira)   400      1.50  0      │
   │ card-title         1.0625rem          700      1.30 -0.01em  │
   │ card-meta          0.85rem            500      1.40  0      │
   │ card-excerpt       0.95rem            400      1.55  0      │
   │ button             0.9375rem          600      1.20  0.01em │
   └──────────────────────────────────────────────────────────┘

   Notes on the choices:
   - Body p is 17px (not 16px) because the v22 brand reads tighter
     at 16px; 17px gives the body paragraphs room to breathe at
     the 700px content width used by wp:post-content.
   - Card title is the same size as body p (1.0625rem) so the
     cards feel like "scales of the article" rather than "a
     different surface". This is the unification the user
     asked for.
   - Body-h2 max size (1.875rem) matches the article-title min
     size (1.875rem) at the 1024px breakpoint, so the H2 of the
     body doesn't feel smaller than the article H1 at the same
     viewport.
   - All font families follow the v22 contract: Inter (body),
     Outfit (headings), Fira Code (code only). The wp-block-code
     and <code> elements get Fira Code; everything else inherits
     from the body.
   - Color follows the existing contract: headings = heading
     token (deep navy), body = contrast token (deep ink), muted
     = muted token (taupe), links = brand token (deep indigo).
   - The `!important` on font-size/line-height/letter-spacing is
     intentional: the templates use `wp:post-title` and
     `wp:post-excerpt` with inline `style="font-size:..."` that
     would otherwise win. We kill those inline values in favour
     of the scale below; the inline `style="color:..."` and
     `style="margin:..."` are left alone (they're orthogonal).

   Reduced motion: no transitions on typography changes (none
   were added in this block).
   ============================================================ */

:root {
  /* v27: type-scale design tokens. Other rules reference these
     so future tuning happens in one place, not in 14 rules. */
  --bs5-article-title-size: clamp(1.875rem, 3.5vw, 2.5rem);
  --bs5-article-title-weight: 800;
  --bs5-article-title-lh: 1.15;
  --bs5-article-title-ls: -0.02em;

  --bs5-section-title-size: 1.5rem;
  --bs5-section-title-weight: 800;
  --bs5-section-title-lh: 1.15;
  --bs5-section-title-ls: -0.02em;

  --bs5-body-h2-size: clamp(1.5rem, 2.5vw, 1.875rem);
  --bs5-body-h2-weight: 800;
  --bs5-body-h2-lh: 1.2;
  --bs5-body-h2-ls: -0.015em;

  --bs5-body-h3-size: 1.375rem;
  --bs5-body-h3-weight: 700;
  --bs5-body-h3-lh: 1.25;
  --bs5-body-h3-ls: -0.01em;

  --bs5-body-h4-size: 1.125rem;
  --bs5-body-h4-weight: 700;
  --bs5-body-h4-lh: 1.3;
  --bs5-body-h4-ls: -0.005em;

  --bs5-body-p-size: 1.0625rem; /* 17px */
  --bs5-body-p-weight: 400;
  --bs5-body-p-lh: 1.7;

  --bs5-body-quote-size: 1.125rem;
  --bs5-body-quote-lh: 1.6;

  --bs5-body-code-size: 0.9375rem; /* 15px */
  --bs5-body-code-lh: 1.5;

  --bs5-card-title-size: 1.0625rem;
  --bs5-card-title-weight: 700;
  --bs5-card-title-lh: 1.3;
  --bs5-card-title-ls: -0.01em;

  --bs5-card-meta-size: 0.85rem;
  --bs5-card-meta-weight: 500;
  --bs5-card-meta-lh: 1.4;

  --bs5-card-excerpt-size: 0.95rem;
  --bs5-card-excerpt-weight: 400;
  --bs5-card-excerpt-lh: 1.55;

  --bs5-button-size: 0.9375rem;
  --bs5-button-weight: 600;
  --bs5-button-lh: 1.2;
  --bs5-button-ls: 0.01em;
}

/* ------------------------------------------------------------
   Article title (single post H1).
   ------------------------------------------------------------ */
.bs5-main-col .wp-block-post-title,
.bs5-article-title {
  font-size: var(--bs5-article-title-size) !important;
  font-weight: var(--bs5-article-title-weight) !important;
  line-height: var(--bs5-article-title-lh) !important;
  letter-spacing: var(--bs5-article-title-ls) !important;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
}

/* ------------------------------------------------------------
   Section title (e.g. "Latest articles", "Related articles").
   ------------------------------------------------------------ */
.bs5-section-title {
  font-size: var(--bs5-section-title-size) !important;
  font-weight: var(--bs5-section-title-weight) !important;
  line-height: var(--bs5-section-title-lh) !important;
  letter-spacing: var(--bs5-section-title-ls) !important;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
}

/* ------------------------------------------------------------
   Article body (wp:post-content) — uniform H2/H3/H4/p/ul/blockquote/code.
   The selector chain scopes to .bs5-main-col (single) and to
   the post-content area specifically, so the navbar/header/footer
   are not affected.
   ------------------------------------------------------------ */
.bs5-main-col .entry-content,
.bs5-main-col .wp-block-post-content,
.bs5-main-col .wp-block-post-content > * {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.bs5-main-col .wp-block-post-content h2,
.bs5-main-col .wp-block-post-content .wp-block-heading:not([class*="bs5-"]) {
  font-size: var(--bs5-body-h2-size) !important;
  font-weight: var(--bs5-body-h2-weight) !important;
  line-height: var(--bs5-body-h2-lh) !important;
  letter-spacing: var(--bs5-body-h2-ls) !important;
  margin-top: 2.25rem !important;
  margin-bottom: 0.75rem !important;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  color: var(--wp--preset--color--heading, #0A192F);
}

/* H3 inside the post content (the most common sub-heading). */
.bs5-main-col .wp-block-post-content h3,
.bs5-main-col .wp-block-post-content h3.wp-block-heading {
  font-size: var(--bs5-body-h3-size) !important;
  font-weight: var(--bs5-body-h3-weight) !important;
  line-height: var(--bs5-body-h3-lh) !important;
  letter-spacing: var(--bs5-body-h3-ls) !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.5rem !important;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  color: var(--wp--preset--color--heading, #0A192F);
}

/* H4 inside the post content (rare; used in some callouts). */
.bs5-main-col .wp-block-post-content h4 {
  font-size: var(--bs5-body-h4-size) !important;
  font-weight: var(--bs5-body-h4-weight) !important;
  line-height: var(--bs5-body-h4-lh) !important;
  letter-spacing: var(--bs5-body-h4-ls) !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.4rem !important;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  color: var(--wp--preset--color--heading, #0A192F);
}

/* Body paragraphs. The wp-block-post-content > p selector
   catches both top-level and pattern-baked <p>s. */
.bs5-main-col .wp-block-post-content p,
.bs5-main-col .wp-block-post-content li {
  font-size: var(--bs5-body-p-size) !important;
  font-weight: var(--bs5-body-p-weight) !important;
  line-height: var(--bs5-body-p-lh) !important;
  color: var(--wp--preset--color--contrast, #0A192F);
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

/* Lists: same size + line-height as paragraphs; the <li> rule
   above catches the items; this catches the <ul>/<ol> margin
   so the bullet/number spacing matches the body rhythm. */
.bs5-main-col .wp-block-post-content ul,
.bs5-main-col .wp-block-post-content ol {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  padding-left: 1.5rem !important;
}

.bs5-main-col .wp-block-post-content li {
  margin-bottom: 0.35rem !important;
}

/* Blockquote. The pattern `callout-box is-style-tldr-box` already
   gives the cyan/indigo treatment, but the typography was
   defaulting to the body p. Lock it to the quote scale. */
.bs5-main-col .wp-block-post-content blockquote,
.bs5-main-col .wp-block-post-content .wp-block-quote {
  font-size: var(--bs5-body-quote-size) !important;
  line-height: var(--bs5-body-quote-lh) !important;
  font-style: italic;
  color: var(--wp--preset--color--heading, #0A192F);
  border-left: 3px solid var(--wp--preset--color--brand, #00E5FF);
  padding: 0.5rem 0 0.5rem 1.25rem !important;
  margin: 1.5rem 0 !important;
}

/* Inline code + code blocks. Fira Code per the v22 contract. */
.bs5-main-col .wp-block-post-content code,
.bs5-main-col .wp-block-post-content kbd,
.bs5-main-col .wp-block-post-content samp,
.bs5-main-col .wp-block-post-content pre {
  font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: var(--bs5-body-code-size) !important;
  line-height: var(--bs5-body-code-lh) !important;
}

.bs5-main-col .wp-block-post-content code {
  background: color-mix(in srgb, var(--wp--preset--color--brand, #00E5FF) 8%, transparent);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  color: var(--wp--preset--color--heading, #0A192F);
}

.bs5-main-col .wp-block-post-content pre {
  background: var(--wp--preset--color--surface, #fafaf7);
  border: 1px solid var(--wp--preset--color--border, #d8d6cc);
  border-radius: 8px;
  padding: 1rem 1.25rem !important;
  overflow-x: auto;
  margin: 1.5rem 0 !important;
}

.bs5-main-col .wp-block-post-content pre code {
  background: transparent;
  border-radius: 0;
  padding: 0;
  color: var(--wp--preset--color--heading, #0A192F);
}

/* ------------------------------------------------------------
   Card surfaces (.bs5-card and .bs5-card-featured).
   The v22 rule set scoped these to .bs5-card but did not lock
   the typography; v27 unifies the title/meta/excerpt sizes
   across featured + small cards.
   ------------------------------------------------------------ */
.bs5-card .wp-block-post-title,
.bs5-card-featured .wp-block-post-title {
  font-size: var(--bs5-card-title-size) !important;
  font-weight: var(--bs5-card-title-weight) !important;
  line-height: var(--bs5-card-title-lh) !important;
  letter-spacing: var(--bs5-card-title-ls) !important;
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
}

/* Featured card title: a touch larger than the small cards, but
   still within the body-h2 range, so the featured card reads as
   "the lead" without breaking the scale. */
.bs5-card-featured .wp-block-post-title {
  font-size: var(--bs5-body-h2-size) !important;
  font-weight: var(--bs5-body-h2-weight) !important;
  line-height: var(--bs5-body-h2-lh) !important;
  letter-spacing: var(--bs5-body-h2-ls) !important;
}

.bs5-card .wp-block-post-excerpt,
.bs5-card-featured .wp-block-post-excerpt {
  font-size: var(--bs5-card-excerpt-size) !important;
  font-weight: var(--bs5-card-excerpt-weight) !important;
  line-height: var(--bs5-card-excerpt-lh) !important;
  color: var(--wp--preset--color--contrast, #0A192F);
}

.bs5-card .bs5-card-meta,
.bs5-card-featured .bs5-card-meta {
  font-size: var(--bs5-card-meta-size) !important;
  font-weight: var(--bs5-card-meta-weight) !important;
  line-height: var(--bs5-card-meta-lh) !important;
  color: var(--wp--preset--color--muted, #6b6b6b);
}

.bs5-card .bs5-card-tags .tag-chip,
.bs5-card-featured .bs5-card-tags .tag-chip {
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* ------------------------------------------------------------
   Buttons: featured "Read more", sidebar subscribe, single CTA.
   v27 unifies the button size across all three.
   ------------------------------------------------------------ */
.bs5-card-featured .wp-block-button__link,
.bs5-sidebar .wp-block-button__link,
.bs5-lead-cta .wp-block-button__link {
  font-size: var(--bs5-button-size) !important;
  font-weight: var(--bs5-button-weight) !important;
  line-height: var(--bs5-button-lh) !important;
  letter-spacing: var(--bs5-button-ls) !important;
  font-family: 'Inter', system-ui, sans-serif;
  border-radius: 6px;
}

/* ------------------------------------------------------------
   Author box + CTA banner typography (single post).
   ------------------------------------------------------------ */
.bs5-lead-cta h3,
.bs5-author-box h3 {
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
}

.bs5-lead-cta h3 {
  font-size: var(--bs5-body-h3-size) !important;
  font-weight: var(--bs5-body-h3-weight) !important;
  line-height: var(--bs5-body-h3-lh) !important;
  letter-spacing: var(--bs5-body-h3-ls) !important;
}

.bs5-author-box h3 {
  font-size: var(--bs5-body-h4-size) !important;
  font-weight: var(--bs5-body-h4-weight) !important;
  line-height: var(--bs5-body-h4-lh) !important;
}

.bs5-author-box .wp-block-post-author-biography {
  font-size: var(--bs5-card-excerpt-size) !important;
  line-height: 1.6 !important;
  color: var(--wp--preset--color--contrast, #0A192F);
}

.bs5-article-meta,
.bs5-article-meta p,
.bs5-article-meta time {
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: var(--wp--preset--color--muted, #6b6b6b);
}

.bs5-article-tags p {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* ------------------------------------------------------------
   Category and tag chips. The home template uses .category-chip
   and .tag-chip; the v22 rule set defined basic chip styling
   but did not lock the font-size. v27 does.

   Note on text-transform: we deliberately do NOT uppercase the
   chip text. The user-facing taxonomy terms ("ai-governance",
   "bill c-27", "canada") read as kebab-case slugs and uppercase
   would be aggressive against the brand voice. The size, weight,
   and color are unified; the case is left to the editor.
   ------------------------------------------------------------ */
.category-chip a,
.tag-chip a,
.wp-block-post-terms a {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none;
}

.category-chip a {
  color: var(--wp--preset--color--brand, #00E5FF);
  background: color-mix(in srgb, var(--wp--preset--color--brand, #00E5FF) 10%, transparent);
  border-radius: 4px;
  padding: 0.2em 0.5em;
}

.tag-chip a {
  color: var(--wp--preset--color--muted, #6b6b6b);
  background: var(--wp--preset--color--surface, #fafaf7);
  border: 1px solid var(--wp--preset--color--border, #d8d6cc);
  border-radius: 4px;
  padding: 0.15em 0.5em;
}

/* ---------------------------------------------------------------
   v27 (2026-07-21): EDITORIAL-DESK BYLINE.
   The article meta now renders a richer byline via the [tt5_byline]
   shortcode: "By [Author Name], [Specialty]". The name links to the
   author archive; the specialty sits inline in the muted color to
   stay subordinate. Rules:
     - prefix "By" / "Par" stays muted (inherits from bs5-article-meta)
     - name link: brand color, weight 600, hover underline + brand
     - specialty label: muted color, weight 500, slightly smaller
     - the whole byline is inline-block at the same line-height as
       the surrounding flex meta strip, so it doesn't break the
       "By Name · Date · Reading time" alignment
   ------------------------------------------------------------ */
.tt5-byline {
  display: inline;
  white-space: normal;
}
.tt5-byline__prefix {
  color: inherit;
  font-weight: 500;
}
.tt5-byline__name {
  color: var(--wp--preset--color--brand, #00E5FF);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.tt5-byline__name:hover,
.tt5-byline__name:focus-visible {
  color: var(--wp--preset--color--brand-hover, #00B8D4);
  border-bottom-color: var(--wp--preset--color--brand, #00E5FF);
}
.tt5-byline__specialty {
  color: var(--wp--preset--color--muted, #6b6b6b);
  font-weight: 500;
}
.tt5-byline__specialty-label {
  /* The specialty text shares the muted color from the parent, but we
     use a slightly lighter weight than the author name so the name
     stays the visual anchor. */
  font-weight: 500;
}

/* ---------------------------------------------------------------
   v28 (2026-07-21): NEWSLETTER-SUBSCRIBE FORM (sidebar).
   Renders the slim WPForms form (email + GDPR consent + Subscribe)
   inside the home + archive sidebar, replacing the v13 mailto:
   button. The form itself is built in WPForms admin; this CSS
   just constrains it to the 280px sidebar without breaking the
   button. Scoped under .tt5-newsletter-form so the cheat-sheet
   form 225 (same .wpforms-form root) is not affected.
   ------------------------------------------------------------ */
.tt5-newsletter-form .wpforms-field-email input,
.tt5-newsletter-form .wpforms-field-checkbox {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.tt5-newsletter-form .wpforms-field-email {
  margin-bottom: 0.65rem;
}
.tt5-newsletter-form .wpforms-field-email input {
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  border: 1px solid var(--wp--preset--color--border, #d8d6cc);
  border-radius: 6px;
  background: var(--wp--preset--color--base, #ffffff);
  color: var(--wp--preset--color--contrast, #0A192F);
}
.tt5-newsletter-form .wpforms-field-email input:focus {
  outline: 2px solid var(--wp--preset--color--brand, #00E5FF);
  outline-offset: 1px;
  border-color: var(--wp--preset--color--brand, #00E5FF);
}
.tt5-newsletter-form .wpforms-field-description {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--wp--preset--color--muted, #6b6b6b);
  margin-top: 0.25rem;
}
.tt5-newsletter-form .wpforms-field-checkbox {
  margin-top: 0.55rem;
  margin-bottom: 0.8rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--wp--preset--color--contrast, #0A192F);
}
.tt5-newsletter-form .wpforms-field-checkbox label {
  font-weight: 400;
}
.tt5-newsletter-form .wpforms-field-checkbox .wpforms-field-label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  font-size: 0.82rem;
}
.tt5-newsletter-form .wpforms-submit-container {
  margin-top: 0.5rem;
}
.tt5-newsletter-form .wpforms-submit {
  width: 100%;
  background: var(--wp--preset--color--brand, #00E5FF);
  color: #0A192F;
  border: none;
  border-radius: 6px;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 120ms ease;
}
.tt5-newsletter-form .wpforms-submit:hover,
.tt5-newsletter-form .wpforms-submit:focus-visible {
  filter: brightness(1.1);
}
.tt5-newsletter-form .wpforms-head-container {
  margin-bottom: 0.6rem;
}
.tt5-newsletter-form .wpforms-description {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--wp--preset--color--muted, #6b6b6b);
  font-style: italic;
  margin: 0;
}

/* Dark mode support for newsletter form */
@media (prefers-color-scheme: dark) {
  .tt5-newsletter-form .wpforms-field-email input {
    background: var(--wp--preset--color--surface, #181a2e);
    border-color: var(--wp--preset--color--border, #252840);
    color: var(--wp--preset--color--base, #f4f7fb);
  }
  .tt5-newsletter-form .wpforms-field-checkbox {
    color: var(--wp--preset--color--base, #f4f7fb);
  }
  .tt5-newsletter-form .wpforms-field-checkbox .wpforms-field-label {
    color: var(--wp--preset--color--base, #f4f7fb);
  }
  .tt5-newsletter-form .wpforms-field-checkbox label {
    color: var(--wp--preset--color--base, #f4f7fb);
  }
  .tt5-newsletter-form .wpforms-description {
    color: var(--wp--preset--color--muted, #8a8dab);
  }
}
body.dark .tt5-newsletter-form .wpforms-field-email input {
  background: var(--wp--preset--color--surface, #181a2e);
  border-color: var(--wp--preset--color--border, #252840);
  color: var(--wp--preset--color--base, #f4f7fb);
}
body.dark .tt5-newsletter-form .wpforms-field-checkbox {
  color: var(--wp--preset--color--base, #f4f7fb);
}
body.dark .tt5-newsletter-form .wpforms-field-checkbox .wpforms-field-label {
  color: var(--wp--preset--color--base, #f4f7fb);
}
body.dark .tt5-newsletter-form .wpforms-field-checkbox label {
  color: var(--wp--preset--color--base, #f4f7fb);
}
body.dark .tt5-newsletter-form .wpforms-description {
  color: var(--wp--preset--color--muted, #8a8dab);
}
body.light .tt5-newsletter-form .wpforms-field-email input {
  background: var(--wp--preset--color--base, #ffffff);
  border-color: var(--wp--preset--color--border, #d8d6cc);
  color: var(--wp--preset--color--contrast, #0A192F);
}
body.light .tt5-newsletter-form .wpforms-field-checkbox {
  color: var(--wp--preset--color--contrast, #0A192F);
}
body.light .tt5-newsletter-form .wpforms-field-checkbox .wpforms-field-label {
  color: var(--wp--preset--color--contrast, #0A192F);
}
body.light .tt5-newsletter-form .wpforms-field-checkbox label {
  color: var(--wp--preset--color--contrast, #0A192F);
}
body.light .tt5-newsletter-form .wpforms-description {
  color: var(--wp--preset--color--muted, #6b6b6b);
}

/* ============================================================
   v31: CODE BLOCK STYLING (inline pill vs block box)
   - Inline code: subtle pill, no border (was: 4px background pill)
   - Block code: subtle box, 1px border (was: parent-theme default)
   - Both use Fira Code (--wp--preset--font-family--fira-code)
   - No JS, no plugin, no SFTP plugin install needed
   ============================================================ */

:root {
  --bs5-code-bg: color-mix(in srgb,
    var(--wp--preset--color--contrast, #0A192F) 6%, transparent);
  --bs5-code-border: color-mix(in srgb,
    var(--wp--preset--color--contrast, #0A192F) 14%, transparent);
  --bs5-code-fg: var(--wp--preset--color--heading, #0A192F);
}

/* Inline code: subtle pill, no border. */
.single-post p code,
.single-post li code,
.single-post blockquote code,
.single-post h1 code,
.single-post h2 code,
.single-post h3 code,
.single-post h4 code,
.single-post td code,
.single-post th code,
.single-post :not(pre) > code {
  font-family: var(--wp--preset--font-family--fira-code, "Fira Code", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace);
  font-size: 0.9em;
  background: var(--bs5-code-bg);
  color: var(--bs5-code-fg);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  /* No border. No font-weight override. */
}

/* Block code: subtle box, 1px border. */
.single-post pre,
.single-post pre.wp-block-code,
.single-post .wp-block-code pre,
.single-post .wp-block-post-content pre {
  font-family: var(--wp--preset--font-family--fira-code, "Fira Code", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace);
  font-size: var(--bs5-body-code-size, 0.9375rem);
  line-height: var(--bs5-body-code-lh, 1.5);
  background: var(--bs5-code-bg);
  color: var(--bs5-code-fg);
  border: 1px solid var(--bs5-code-border);
  border-radius: 8px;
  padding: 1em 1.2em;
  overflow-x: auto;
  margin: 1.5rem 0;
}

/* ============================================================
   v32: EVIDENCE-SHARING FOLDER TREE PATTERN
   Converts markdown fenced code blocks with folder trees to a
   styled .evidence-tree block. Supports light/dark mode via
   WP color presets.
   ============================================================ */
.evidence-tree {
  background: var(--wp--preset--color--surface, #f0efe8);
  border: 1px solid var(--wp--preset--color--border, #d8d6cc);
  border-radius: 8px;
  padding: 1.25rem;
  margin: 1.5rem 0;
  overflow-x: auto;
}

.evidence-tree__code {
  font-family: var(--wp--preset--font-family--fira-code, "Fira Code", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--wp--preset--color--contrast, #0A192F);
  margin: 0;
  white-space: pre;
  font-weight: 400;
}

/* Dark mode for evidence tree */
@media (prefers-color-scheme: dark) {
  .evidence-tree {
    background: var(--wp--preset--color--surface, #181a2e);
    border-color: var(--wp--preset--color--border, #252840);
  }
  .evidence-tree__code {
    color: var(--wp--preset--color--base, #f4f7fb);
  }
}
body.dark .evidence-tree {
  background: var(--wp--preset--color--surface, #181a2e);
  border-color: var(--wp--preset--color--border, #252840);
}
body.dark .evidence-tree__code {
  color: var(--wp--preset--color--base, #f4f7fb);
}
body.light .evidence-tree {
  background: var(--wp--preset--color--surface, #f0efe8);
  border-color: var(--wp--preset--color--border, #d8d6cc);
}
body.light .evidence-tree__code {
  color: var(--wp--preset--color--contrast, #0A192F);
}

/* ============================================================
   v28 (2026-07-21): NEWSLETTER-SUBSCRIBE FORM (sidebar).
   Renders the slim WPForms form (email + GDPR consent + Subscribe)
   inside the right rail / post footer. Dark-mode aware via
   WP color presets + .dark/.light body classes.
   ============================================================ */
  .tt5-newsletter-form .wpforms-field-email input {
    background: var(--wp--preset--color--base, #111827);
    color: var(--wp--preset--color--contrast, #f4f7fb);
    border-color: var(--wp--preset--color--border, #252840);
  }
  .tt5-newsletter-form .wpforms-field-email input:focus {
    outline-color: var(--wp--preset--color--brand, #00E5FF);
    border-color: var(--wp--preset--color--brand, #00E5FF);
  }
  .tt5-newsletter-form .wpforms-field-description,
  .tt5-newsletter-form .wpforms-field-checkbox label,
  .tt5-newsletter-form .wpforms-field-checkbox .wpforms-field-label {
    color: var(--wp--preset--color--muted, #8b8db8);
  }
  .tt5-newsletter-form .wpforms-field-checkbox {
    color: var(--wp--preset--color--contrast, #f4f7fb);
  }
  .tt5-newsletter-form .wpforms-description {
    color: var(--wp--preset--color--muted, #8b8db8) !important;
  }
}

body.dark .tt5-newsletter-form .wpforms-field-email input {
  background: var(--wp--preset--color--base, #111827);
  color: var(--wp--preset--color--contrast, #f4f7fb);
  border-color: var(--wp--preset--color--border, #252840);
}
body.dark .tt5-newsletter-form .wpforms-field-email input:focus {
  outline-color: var(--wp--preset--color--brand, #00E5FF);
  border-color: var(--wp--preset--color--brand, #00E5FF);
}
body.dark .tt5-newsletter-form .wpforms-field-description,
body.dark .tt5-newsletter-form .wpforms-field-checkbox label,
body.dark .tt5-newsletter-form .wpforms-field-checkbox .wpforms-field-label {
  color: var(--wp--preset--color--muted, #8b8db8);
}
body.dark .tt5-newsletter-form .wpforms-field-checkbox {
  color: var(--wp--preset--color--contrast, #f4f7fb);
}
body.dark .tt5-newsletter-form .wpforms-description {
  color: var(--wp--preset--color--muted, #8b8db8) !important;
}

body.light .tt5-newsletter-form .wpforms-field-email input {
  background: var(--wp--preset--color--base, #ffffff);
  color: var(--wp--preset--color--contrast, #0A192F);
  border-color: var(--wp--preset--color--border, #d8d6cc);
}
body.light .tt5-newsletter-form .wpforms-field-email input:focus {
  outline-color: var(--wp--preset--color--brand, #00E5FF);
  border-color: var(--wp--preset--color--brand, #00E5FF);
}
body.light .tt5-newsletter-form .wpforms-field-description,
body.light .tt5-newsletter-form .wpforms-field-checkbox label,
body.light .tt5-newsletter-form .wpforms-field-checkbox .wpforms-field-label {
  color: var(--wp--preset--color--muted, #6b6b6b);
}
body.light .tt5-newsletter-form .wpforms-field-checkbox {
  color: var(--wp--preset--color--contrast, #0A192F);
}
body.light .tt5-newsletter-form .wpforms-description {
  color: var(--wp--preset--color--muted, #6b6b6b) !important;
}

/* Code inside pre: transparent bg, no padding, no radius (avoids double-pill). */
.single-post pre code,
.single-post .wp-block-code code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
}

/* Dark mode: same tokens, just slightly higher contrast. */
@media (prefers-color-scheme: dark) {
  :root {
    --bs5-code-bg: color-mix(in srgb,
      var(--wp--preset--color--contrast, #f4f7fb) 8%, transparent);
    --bs5-code-border: color-mix(in srgb,
      var(--wp--preset--color--contrast, #f4f7fb) 16%, transparent);
    --bs5-code-fg: var(--wp--preset--color--heading, #f4f7fb);
  }
}

/* ===========================================================================
   SERVICES PAGE — v31
   Uses existing theme tokens (brand, contrast, surface, muted, border).
   No new colors introduced. Works in light and dark mode.
   ============================================================================ */

.services-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--wp--preset--spacing--50, 24px) var(--wp--preset--spacing--40, 16px);
}

/* --- Hero --- */
.services-hero {
  text-align: center;
  padding: var(--wp--preset--spacing--70, 48px) 0 var(--wp--preset--spacing--60, 40px);
}
.services-hero h1 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--wp--preset--color--heading, #0A192F);
  margin-bottom: var(--wp--preset--spacing--30, 16px);
  line-height: 1.15;
}
.services-hero-subtitle {
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  font-size: 1.15rem;
  color: var(--wp--preset--color--muted, #5A6B7A);
  max-width: 640px;
  margin: 0 auto var(--wp--preset--spacing--40, 24px);
  line-height: 1.6;
}
.services-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wp--preset--spacing--20, 8px);
}
.services-badge {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  border: 1px solid var(--wp--preset--color--border, #D1D9E0);
  color: var(--wp--preset--color--contrast, #0A192F);
  background: var(--wp--preset--color--surface, #E8EEF5);
}

/* --- Why section --- */
.services-why {
  text-align: center;
  padding: var(--wp--preset--spacing--60, 40px) 0;
}
.services-why h2 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--wp--preset--color--heading, #0A192F);
  margin-bottom: var(--wp--preset--spacing--20, 8px);
}
.services-why p {
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  font-size: 1.05rem;
  color: var(--wp--preset--color--muted, #5A6B7A);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

/* --- Frameworks grid --- */
.services-frameworks {
  padding: var(--wp--preset--spacing--60, 40px) 0;
}
.services-frameworks h2 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--wp--preset--color--heading, #0A192F);
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--20, 8px);
}
.services-frameworks-subtitle {
  text-align: center;
  color: var(--wp--preset--color--muted, #5A6B7A);
  margin-bottom: var(--wp--preset--spacing--50, 24px);
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--wp--preset--spacing--40, 20px);
}

/* Combo packs: 3 cards side by side on desktop, tighter min */
.services-grid--combos {
  grid-template-columns: repeat(3, 1fr);
}

/* --- Framework cards --- */
.services-card {
  border: 1px solid var(--wp--preset--color--border, #D1D9E0);
  border-radius: 16px;
  padding: var(--wp--preset--spacing--50, 24px);
  background: var(--wp--preset--color--base, #f4f7fb);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.services-card:hover {
  border-color: var(--wp--preset--color--brand, #00E5FF);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--wp--preset--color--brand, #00E5FF) 12%, transparent);
}
.services-card--featured {
  border-color: var(--wp--preset--color--brand, #00E5FF);
  border-width: 2px;
}
.services-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--wp--preset--spacing--20, 8px);
}
.services-card-header h3 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--wp--preset--color--heading, #0A192F);
  margin: 0;
}
.services-card-tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--wp--preset--color--surface, #E8EEF5);
  color: var(--wp--preset--color--muted, #5A6B7A);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.services-card-tag--best {
  background: var(--wp--preset--color--brand, #00E5FF);
  color: var(--wp--preset--color--contrast, #0A192F);
}
.services-card-desc {
  font-size: 0.95rem;
  color: var(--wp--preset--color--muted, #5A6B7A);
  line-height: 1.55;
  margin-bottom: var(--wp--preset--spacing--30, 16px);
}

/* --- Tiers inside cards --- */
.services-card-tiers {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20, 8px);
  margin-bottom: var(--wp--preset--spacing--30, 16px);
  flex-grow: 1;
}
.services-tier {
  border: 1px solid var(--wp--preset--color--border, #D1D9E0);
  border-radius: 12px;
  padding: var(--wp--preset--spacing--30, 16px);
  background: var(--wp--preset--color--surface, #E8EEF5);
}
.services-tier--pro {
  border-color: var(--wp--preset--color--brand, #00E5FF);
  background: color-mix(in srgb, var(--wp--preset--color--brand, #00E5FF) 6%, var(--wp--preset--color--base, #f4f7fb));
}
.services-tier-name {
  display: inline-block;
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 1rem;
  color: var(--wp--preset--color--heading, #0A192F);
}
.services-tier-price {
  float: right;
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--wp--preset--color--muted, #5A6B7A);
}
.services-tier ul {
  list-style: none;
  padding: 0;
  margin: var(--wp--preset--spacing--20, 8px) 0 0;
}
.services-tier li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 4px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--wp--preset--color--contrast, #0A192F);
}
.services-tier li::before {
  content: "\\2713";
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--success, #15803d);
  font-weight: 700;
}

/* --- Card CTA link --- */
.services-card-cta {
  display: block;
  text-align: center;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--wp--preset--color--contrast, #0A192F);
  border: 1px solid var(--wp--preset--color--border, #D1D9E0);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.services-card-cta:hover {
  background: var(--wp--preset--color--surface, #E8EEF5);
  border-color: var(--wp--preset--color--brand, #00E5FF);
}

/* --- How it works --- */
.services-how {
  padding: var(--wp--preset--spacing--70, 48px) 0;
  text-align: center;
}
.services-how h2 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--wp--preset--color--heading, #0A192F);
  margin-bottom: var(--wp--preset--spacing--40, 24px);
}
.services-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--wp--preset--spacing--40, 20px);
}
.services-step {
  text-align: center;
  padding: var(--wp--preset--spacing--30, 16px);
}
.services-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--wp--preset--color--highlight, #112240);
  color: var(--wp--preset--color--brand, #00E5FF);
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: var(--wp--preset--spacing--20, 8px);
}
.services-step h3 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--wp--preset--color--heading, #0A192F);
  margin-bottom: var(--wp--preset--spacing--20, 8px);
}
.services-step p {
  font-size: 0.9rem;
  color: var(--wp--preset--color--muted, #5A6B7A);
  line-height: 1.55;
}

/* --- What's inside --- */
.services-inside {
  padding: var(--wp--preset--spacing--60, 40px) 0;
}
.services-inside h2 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--wp--preset--color--heading, #0A192F);
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--40, 24px);
}
.services-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--wp--preset--spacing--30, 16px);
  max-width: 900px;
  margin: 0 auto;
}
.services-feature {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--20, 8px);
}
.services-feature-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wp--preset--color--success, #15803d);
  color: var(--wp--preset--color--base, #f4f7fb);
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 2px;
}
.services-feature p {
  font-size: 0.95rem;
  color: var(--wp--preset--color--contrast, #0A192F);
  line-height: 1.55;
  margin: 0;
}

/* --- CTA section --- */
.services-cta {
  text-align: center;
  padding: var(--wp--preset--spacing--70, 48px) 0;
  margin-top: var(--wp--preset--spacing--40, 20px);
  border-top: 1px solid var(--wp--preset--color--border, #D1D9E0);
}
.services-cta h2 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--wp--preset--color--heading, #0A192F);
  margin-bottom: var(--wp--preset--spacing--20, 8px);
}
.services-cta p {
  color: var(--wp--preset--color--muted, #5A6B7A);
  margin-bottom: var(--wp--preset--spacing--30, 16px);
}
.services-cta-button {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 8px;
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--wp--preset--color--highlight, #112240);
  color: var(--wp--preset--color--brand, #00E5FF);
  border: 2px solid var(--wp--preset--color--highlight, #112240);
  transition: background 0.15s ease, color 0.15s ease;
}
.services-cta-button:hover {
  background: var(--wp--preset--color--brand, #00E5FF);
  color: var(--wp--preset--color--contrast, #0A192F);
  border-color: var(--wp--preset--color--brand, #00E5FF);
}
.services-cta-secondary {
  margin-top: var(--wp--preset--spacing--30, 16px) !important;
  font-size: 0.9rem;
}
.services-cta-secondary a {
  color: var(--wp--preset--color--contrast, #0A192F);
  text-decoration: underline;
}

/* --- Dark mode adjustments --- */
body.dark .services-card,
body.dark .services-tier {
  background: color-mix(in srgb, var(--wp--preset--color--contrast, #0A192F) 6%, transparent);
}
body.dark .services-tier--pro {
  background: color-mix(in srgb, var(--wp--preset--color--brand, #00E5FF) 8%, transparent);
}
body.dark .services-badge {
  background: color-mix(in srgb, var(--wp--preset--color--contrast, #0A192F) 12%, transparent);
}
body.dark .services-step-num {
  background: var(--wp--preset--color--contrast, #0A192F);
  color: var(--wp--preset--color--brand, #00E5FF);
}
body.dark .services-cta-button {
  background: transparent;
  color: var(--wp--preset--color--brand, #00E5FF);
  border-color: var(--wp--preset--color--brand, #00E5FF);
}

/* --- Lemon Squeezy checkout buttons --- */
.lemonsqueezy-button {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 8px;
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.lemonsqueezy-button--primary {
  background: var(--wp--preset--color--highlight, #112240);
  color: var(--wp--preset--color--brand, #00E5FF);
  border: 2px solid var(--wp--preset--color--highlight, #112240);
}
.lemonsqueezy-button--primary:hover {
  background: var(--wp--preset--color--brand, #00E5FF);
  color: var(--wp--preset--color--contrast, #0A192F);
  border-color: var(--wp--preset--color--brand, #00E5FF);
}
.lemonsqueezy-button--secondary {
  background: transparent;
  color: var(--wp--preset--color--contrast, #0A192F);
  border: 1px solid var(--wp--preset--color--border, #D1D9E0);
}
.lemonsqueezy-button--secondary:hover {
  background: var(--wp--preset--color--surface, #E8EEF5);
  border-color: var(--wp--preset--color--brand, #00E5FF);
}
body.dark .lemonsqueezy-button--primary {
  background: transparent;
  color: var(--wp--preset--color--brand, #00E5FF);
  border-color: var(--wp--preset--color--brand, #00E5FF);
}
body.dark .lemonsqueezy-button--secondary {
  color: var(--wp--preset--color--brand, #00E5FF);
  border-color: var(--wp--preset--color--border, #D1D9E0);
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
  .services-steps {
    grid-template-columns: 1fr;
  }
  .services-features {
    grid-template-columns: 1fr;
  }
  .services-tier-price {
    float: none;
    display: block;
    margin-top: 2px;
  }
}

/* ============================================================================
   v32 — SVG DARK MODE ADAPTATION
   Brand icons in assets/brand/ now use currentColor for strokes/fills.
   We set `color` on each icon container so the SVGs inherit the right
   palette shade per color scheme, without changing the SVG files at runtime.

   Design tokens (Trusted Indigo, locked):
     Light: icon color = #1a1d2e  (--tt5-text light)
     Dark:  icon color = #f0eee5  (--tt5-text dark)

   The #00E5FF cyan accents inside the SVGs are hardcoded and look
   correct in both light and dark modes — no change needed.
   ============================================================================ */

/* ── Inverted SVG Icon Palette Adaptation ──
   Navbar icons sit on a Deep Navy background (#0A192F) in both Light & Dark modes.
   - Light Mode default: icons inherit warm cream (#f0eee5) or white on navy
   - Dark Mode: icons inherit luminous Cyber Cyan (#00E5FF) on navy
   - Hover state: Cyber Cyan (#00E5FF) with soft glow
   - Footer / Light surfaces: dark navy (#1a1d2e) in light mode, cyan (#00E5FF) in dark mode
*/

/* Navbar / Brand logo & Header menu icons */
.bs5-navbar .bs5-brand-logo,
.bs5-brand-logo,
.bs5-primary-nav-icon,
.bs5-topic-nav-icon,
svg.bs5-primary-nav-icon,
svg.bs5-topic-nav-icon,
svg.bs5-brand-logo {
  color: #f0eee5 !important;   /* warm cream on deep navy navbar in light mode */
  transition: color 150ms ease, filter 150ms ease;
}

.bs5-primary-nav-item:hover .bs5-primary-nav-icon,
.bs5-primary-nav-item:focus-visible .bs5-primary-nav-icon,
.bs5-topmenu-topics .bs5-topic-nav-item:hover .bs5-topic-nav-icon,
.bs5-topmenu-topics .bs5-topic-nav-item:focus-visible .bs5-topic-nav-icon,
.bs5-brand-logo:hover {
  color: #00E5FF !important;   /* Cyber Cyan glow on hover */
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.5));
}

/* Dark mode overrides: Cyber Cyan for all brand icons in dark mode */
@media (prefers-color-scheme: dark) {
  .bs5-navbar .bs5-brand-logo,
  .bs5-brand-logo,
  .bs5-primary-nav-icon,
  .bs5-topic-nav-icon,
  .bs5-footer-social-icon,
  svg.bs5-primary-nav-icon,
  svg.bs5-topic-nav-icon,
  svg.bs5-brand-logo {
    color: #00E5FF !important;   /* Cyber Cyan in dark mode */
  }
}

html.dark .bs5-brand-logo,
html.dark .bs5-primary-nav-icon,
html.dark .bs5-topic-nav-icon,
html.dark .bs5-footer-social-icon,
html.dark svg.bs5-primary-nav-icon,
html.dark svg.bs5-topic-nav-icon,
body.dark .bs5-brand-logo,
body.dark .bs5-primary-nav-icon,
body.dark .bs5-topic-nav-icon,
body.dark .bs5-footer-social-icon,
body.dark svg.bs5-primary-nav-icon,
body.dark svg.bs5-topic-nav-icon,
body.dark-mode .bs5-brand-logo,
body.dark-mode .bs5-primary-nav-icon,
body.dark-mode .bs5-topic-nav-icon,
body.dark-mode .bs5-footer-social-icon,
body.dark-mode svg.bs5-primary-nav-icon,
body.dark-mode svg.bs5-topic-nav-icon {
  color: #00E5FF !important;
}

/* Footer & Light Surface brand icons */
.bs5-footer-social-icon,
.footer-social-link svg {
  color: #1a1d2e;
}
.bs5-footer-social-icon:hover,
.footer-social-link:hover svg {
  color: #00E5FF !important;
}

/* ── In-page illustrations (404, newsletter, empty-state) ──
   These SVGs use hardcoded #1a1d2e text on transparent backgrounds.
   In dark mode the page background turns dark, making the text near-invisible.
   A CSS filter (invert + hue-rotate) gives us a clean light version
   without adding new files.
   Scope tightly to the illustration wrapper classes used in the templates. */
@media (prefers-color-scheme: dark) {
  .bs5-illustration-404 img,
  .bs5-illustration-newsletter img,
  .bs5-illustration-empty img,
  img[src*="illustration-404"],
  img[src*="illustration-newsletter"],
  img[src*="illustration-empty"] {
    filter: invert(0.9) hue-rotate(180deg) brightness(0.9);
  }
}

html.dark .bs5-illustration-404 img,
html.dark .bs5-illustration-newsletter img,
html.dark .bs5-illustration-empty img,
html.dark img[src*="illustration-404"],
html.dark img[src*="illustration-newsletter"],
html.dark img[src*="illustration-empty"],
body.dark .bs5-illustration-404 img,
body.dark .bs5-illustration-newsletter img,
body.dark .bs5-illustration-empty img,
body.dark img[src*="illustration-404"],
body.dark img[src*="illustration-newsletter"],
body.dark img[src*="illustration-empty"],
body.dark-mode .bs5-illustration-404 img,
body.dark-mode .bs5-illustration-newsletter img,
body.dark-mode .bs5-illustration-empty img,
body.dark-mode img[src*="illustration-404"],
body.dark-mode img[src*="illustration-newsletter"],
body.dark-mode img[src*="illustration-empty"] {
  filter: invert(0.9) hue-rotate(180deg) brightness(0.9);
}

/* ── Navbar icon sizing fix ──
   The .bs5-primary-nav-icon and .bs5-topic-nav-icon are <img> tags
   rendered by [tt5_nav_item] and [tt5_topic_item] shortcodes.
   Ensure they stay at their intended 20px/18px sizes in all modes. */
.bs5-primary-nav-icon {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.bs5-topic-nav-icon {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ── v32 end ── */

/* ============================================================================
   v32 — STAY SECURE WIDGET + SIDEBAR WIDGET DARK MODE FIX

   Root issue: .bs5-widget uses inline block-editor styles
   (background-color: var(--wp--preset--color--surface) and
    border-color: var(--wp--preset--color--brand) on the container,
    color: var(--wp--preset--color--heading) on the h4).

   In the v21 dark mode palette:
     --cloudscape-color-surface  = #112240  (barely differs from page bg #0A192F)
     --cloudscape-color-border   = #112240  (same as surface → border invisible)
     --cloudscape-color-brand    = #00E5FF  (cyan → good for the brand border)

   The surface token is correct for cards but the contrast ratio of
   #112240 on #0A192F is ~1.2:1 — below the 3:1 threshold for non-text.
   We override .bs5-widget with a visually distinct surface and a stronger
   border so the box pops off the page in dark mode.

   Tokens used (all within Trusted Indigo palette, no new colors):
     bg:     #1a2d4a  (mid-navy — sits between surface and brand)
     border: #2a4068  (--cloudscape-color-border-strong)
     title:  #f0eee5  (--tt5-text dark)
     text:   #c8d0dc  (muted slate — readable on dark surface)
   ============================================================================ */

@media (prefers-color-scheme: dark) {
  .bs5-widget {
    background-color: #1a2d4a !important;
    border-color: #2a4068 !important;
    border-width: 1px !important;
    border-style: solid !important;
  }
  .bs5-widget-title {
    color: #f0eee5 !important;
  }
  .bs5-widget p,
  .bs5-widget label,
  .bs5-widget .wpforms-field-label,
  .bs5-widget .wpforms-description,
  .bs5-widget legend,
  .bs5-widget .wpforms-field-label-inline,
  .bs5-widget .wpforms-field-description {
    color: #c8d0dc !important;
  }
  /* WPForms input fields inside the widget */
  .bs5-widget .wpforms-field input[type="email"],
  .bs5-widget .wpforms-field input[type="text"],
  .bs5-widget .wpforms-field input {
    background: #0e1e36 !important;
    border: 1px solid #2a4068 !important;
    color: #f0eee5 !important;
  }
  .bs5-widget .wpforms-field input::placeholder {
    color: #8a9bb0 !important;
  }
  /* Subscribe button stays cyan-branded — already handled by brand token,
     but force it here in case the inline style overrides the token */
  .bs5-widget .wpforms-submit {
    background-color: #00E5FF !important;
    color: #0A192F !important;
  }
  .bs5-widget .wpforms-submit:hover {
    background-color: #66efff !important;
  }
  /* Search widget inside dark widget */
  .bs5-widget .wp-block-search__inside-wrapper {
    background: #0e1e36 !important;
    border-color: #2a4068 !important;
  }
  .bs5-widget .wp-block-search__input {
    color: #f0eee5 !important;
  }
  /* Category list links */
  .bs5-widget .wp-block-categories-list a {
    color: #c8d0dc !important;
  }
  .bs5-widget .wp-block-categories-list a:hover {
    color: #00E5FF !important;
  }
}

/* ── Repeat for manual dark-mode toggle classes ── */
html.dark .bs5-widget,
body.dark .bs5-widget,
body.dark-mode .bs5-widget {
  background-color: #1a2d4a !important;
  border-color: #2a4068 !important;
  border-width: 1px !important;
  border-style: solid !important;
}
html.dark .bs5-widget-title,
body.dark .bs5-widget-title,
body.dark-mode .bs5-widget-title {
  color: #f0eee5 !important;
}
html.dark .bs5-widget p,
html.dark .bs5-widget label,
html.dark .bs5-widget .wpforms-field-label,
html.dark .bs5-widget .wpforms-description,
html.dark .bs5-widget legend,
html.dark .bs5-widget .wpforms-field-label-inline,
html.dark .bs5-widget .wpforms-field-description,
body.dark .bs5-widget p,
body.dark .bs5-widget label,
body.dark .bs5-widget .wpforms-field-label,
body.dark .bs5-widget .wpforms-description,
body.dark .bs5-widget legend,
body.dark .bs5-widget .wpforms-field-label-inline,
body.dark .bs5-widget .wpforms-field-description,
body.dark-mode .bs5-widget p,
body.dark-mode .bs5-widget label,
body.dark-mode .bs5-widget .wpforms-field-label,
body.dark-mode .bs5-widget .wpforms-description,
body.dark-mode .bs5-widget legend,
body.dark-mode .bs5-widget .wpforms-field-label-inline,
body.dark-mode .bs5-widget .wpforms-field-description {
  color: #c8d0dc !important;
}
html.dark .bs5-widget .wpforms-field input,
body.dark .bs5-widget .wpforms-field input,
body.dark-mode .bs5-widget .wpforms-field input {
  background: #0e1e36 !important;
  border: 1px solid #2a4068 !important;
  color: #f0eee5 !important;
}
html.dark .bs5-widget .wpforms-submit,
body.dark .bs5-widget .wpforms-submit,
body.dark-mode .bs5-widget .wpforms-submit {
  background-color: #00E5FF !important;
  color: #0A192F !important;
}
html.dark .bs5-widget .wpforms-submit:hover,
body.dark .bs5-widget .wpforms-submit:hover,
body.dark-mode .bs5-widget .wpforms-submit:hover {
  background-color: #66efff !important;
}
html.dark .bs5-widget .wp-block-search__inside-wrapper,
body.dark .bs5-widget .wp-block-search__inside-wrapper,
body.dark-mode .bs5-widget .wp-block-search__inside-wrapper {
  background: #0e1e36 !important;
  border-color: #2a4068 !important;
}
html.dark .bs5-widget .wp-block-search__input,
body.dark .bs5-widget .wp-block-search__input,
body.dark-mode .bs5-widget .wp-block-search__input {
  color: #f0eee5 !important;
}
html.dark .bs5-widget .wp-block-categories-list a,
body.dark .bs5-widget .wp-block-categories-list a,
body.dark-mode .bs5-widget .wp-block-categories-list a {
  color: #c8d0dc !important;
}
html.dark .bs5-widget .wp-block-categories-list a:hover,
body.dark .bs5-widget .wp-block-categories-list a:hover,
body.dark-mode .bs5-widget .wp-block-categories-list a:hover {
  color: #00E5FF !important;
}

/* ============================================================================
   v32 — UNIFIED BUTTON & CONTROLS DARK/LIGHT SYSTEM
   Ensures ALL buttons across the site (Gutenberg block buttons, submit buttons,
   search buttons, back-to-top, dark-mode toggle, WPForms buttons, pagination,
   product/services CTAs, togglers) are high-contrast, fully visible, and
   interactive in both light and dark mode contexts.

   Palette (Trusted Indigo):
     Light Mode:
       Filled Button:   bg #4338ca (Deep Indigo), text #fafaf7, hover #312e81
       Outline Button:  bg transparent, border #4338ca, text #4338ca, hover bg rgba(67, 56, 202, 0.08)
     Dark Mode:
       Filled Button:   bg #00E5FF (Cyber Cyan), text #0A192F (Deep Navy), hover #66efff
       Outline Button:  bg transparent, border #00E5FF, text #00E5FF, hover bg rgba(0, 229, 255, 0.15)
   ============================================================================ */

/* ── 1. Filled Buttons (Primary) — Dark Mode Overrides ── */
@media (prefers-color-scheme: dark) {
  .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
  .is-style-fill .wp-block-button__link,
  .wp-element-button:not(.is-style-outline),
  .wpforms-submit,
  .adsy-form-submit input,
  .adsy-form-submit button,
  button[type="submit"],
  input[type="submit"],
  .lemonsqueezy-button--primary,
  .services-card-cta.lemonsqueezy-button--primary {
    background-color: #00E5FF !important;
    color: #0A192F !important;
    border-color: #00E5FF !important;
    font-weight: 700 !important;
  }

  .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
  .is-style-fill .wp-block-button__link:hover,
  .wp-element-button:not(.is-style-outline):hover,
  .wpforms-submit:hover,
  .adsy-form-submit input:hover,
  .adsy-form-submit button:hover,
  button[type="submit"]:hover,
  input[type="submit"]:hover,
  .lemonsqueezy-button--primary:hover,
  .services-card-cta.lemonsqueezy-button--primary:hover {
    background-color: #66efff !important;
    border-color: #66efff !important;
    color: #0A192F !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 229, 255, 0.35) !important;
  }

  .wp-block-button:not(.is-style-outline) > .wp-block-button__link:active,
  .is-style-fill .wp-block-button__link:active,
  .wp-element-button:not(.is-style-outline):active,
  .wpforms-submit:active,
  button[type="submit"]:active,
  input[type="submit"]:active,
  .lemonsqueezy-button--primary:active {
    background-color: #00b8cc !important;
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  }
}

/* Repeat for class-based dark mode (html.dark / body.dark / body.dark-mode) */
html.dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
html.dark .is-style-fill .wp-block-button__link,
html.dark .wp-element-button:not(.is-style-outline),
html.dark .wpforms-submit,
html.dark .adsy-form-submit input,
html.dark .adsy-form-submit button,
html.dark button[type="submit"],
html.dark input[type="submit"],
html.dark .lemonsqueezy-button--primary,
body.dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
body.dark .is-style-fill .wp-block-button__link,
body.dark .wp-element-button:not(.is-style-outline),
body.dark .wpforms-submit,
body.dark .adsy-form-submit input,
body.dark .adsy-form-submit button,
body.dark button[type="submit"],
body.dark input[type="submit"],
body.dark .lemonsqueezy-button--primary,
body.dark-mode .wp-block-button:not(.is-style-outline) > .wp-block-button__link,
body.dark-mode .is-style-fill .wp-block-button__link,
body.dark-mode .wp-element-button:not(.is-style-outline),
body.dark-mode .wpforms-submit,
body.dark-mode .adsy-form-submit input,
body.dark-mode .adsy-form-submit button,
body.dark-mode button[type="submit"],
body.dark-mode input[type="submit"],
body.dark-mode .lemonsqueezy-button--primary {
  background-color: #00E5FF !important;
  color: #0A192F !important;
  border-color: #00E5FF !important;
  font-weight: 700 !important;
}

html.dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
html.dark .is-style-fill .wp-block-button__link:hover,
html.dark .wp-element-button:not(.is-style-outline):hover,
html.dark .wpforms-submit:hover,
html.dark button[type="submit"]:hover,
html.dark input[type="submit"]:hover,
html.dark .lemonsqueezy-button--primary:hover,
body.dark .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
body.dark .is-style-fill .wp-block-button__link:hover,
body.dark .wp-element-button:not(.is-style-outline):hover,
body.dark .wpforms-submit:hover,
body.dark button[type="submit"]:hover,
body.dark input[type="submit"]:hover,
body.dark .lemonsqueezy-button--primary:hover,
body.dark-mode .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
body.dark-mode .is-style-fill .wp-block-button__link:hover,
body.dark-mode .wp-element-button:not(.is-style-outline):hover,
body.dark-mode .wpforms-submit:hover,
body.dark-mode button[type="submit"]:hover,
body.dark-mode input[type="submit"]:hover,
body.dark-mode .lemonsqueezy-button--primary:hover {
  background-color: #66efff !important;
  border-color: #66efff !important;
  color: #0A192F !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 229, 255, 0.35) !important;
}

/* ── 2. Outline Buttons — Dark Mode Overrides ── */
@media (prefers-color-scheme: dark) {
  .is-style-outline > .wp-block-button__link,
  .is-style-outline.wp-element-button,
  .lemonsqueezy-button--secondary,
  .services-cta-button {
    background-color: transparent !important;
    color: #00E5FF !important;
    border: 2px solid #00E5FF !important;
  }

  .is-style-outline > .wp-block-button__link:hover,
  .is-style-outline.wp-element-button:hover,
  .lemonsqueezy-button--secondary:hover,
  .services-cta-button:hover {
    background-color: rgba(0, 229, 255, 0.15) !important;
    border-color: #66efff !important;
    color: #66efff !important;
    transform: translateY(-1px);
  }
}

html.dark .is-style-outline > .wp-block-button__link,
html.dark .is-style-outline.wp-element-button,
html.dark .lemonsqueezy-button--secondary,
html.dark .services-cta-button,
body.dark .is-style-outline > .wp-block-button__link,
body.dark .is-style-outline.wp-element-button,
body.dark .lemonsqueezy-button--secondary,
body.dark .services-cta-button,
body.dark-mode .is-style-outline > .wp-block-button__link,
body.dark-mode .is-style-outline.wp-element-button,
body.dark-mode .lemonsqueezy-button--secondary,
body.dark-mode .services-cta-button {
  background-color: transparent !important;
  color: #00E5FF !important;
  border: 2px solid #00E5FF !important;
}

html.dark .is-style-outline > .wp-block-button__link:hover,
html.dark .lemonsqueezy-button--secondary:hover,
html.dark .services-cta-button:hover,
body.dark .is-style-outline > .wp-block-button__link:hover,
body.dark .lemonsqueezy-button--secondary:hover,
body.dark .services-cta-button:hover,
body.dark-mode .is-style-outline > .wp-block-button__link:hover,
body.dark-mode .lemonsqueezy-button--secondary:hover,
body.dark-mode .services-cta-button:hover {
  background-color: rgba(0, 229, 255, 0.15) !important;
  border-color: #66efff !important;
  color: #66efff !important;
  transform: translateY(-1px);
}

/* ── 3. Back-To-Top Button — Dark Mode Overrides ── */
@media (prefers-color-scheme: dark) {
  .back-to-top {
    background: #00E5FF !important;
    color: #0A192F !important;
    box-shadow: 0 4px 14px rgba(0, 229, 255, 0.35) !important;
  }
  .back-to-top:hover,
  .back-to-top:focus-visible {
    background: #66efff !important;
    color: #0A192F !important;
    outline: 2px solid #00E5FF !important;
  }
}

html.dark .back-to-top,
body.dark .back-to-top,
body.dark-mode .back-to-top {
  background: #00E5FF !important;
  color: #0A192F !important;
  box-shadow: 0 4px 14px rgba(0, 229, 255, 0.35) !important;
}
html.dark .back-to-top:hover,
body.dark .back-to-top:hover,
body.dark-mode .back-to-top:hover {
  background: #66efff !important;
  color: #0A192F !important;
}

/* ── 4. Search Button — Dark Mode Overrides ── */
@media (prefers-color-scheme: dark) {
  .wp-block-search__button {
    background-color: #00E5FF !important;
    color: #0A192F !important;
  }
  .wp-block-search__button:hover {
    background-color: #66efff !important;
    color: #0A192F !important;
  }
}
html.dark .wp-block-search__button,
body.dark .wp-block-search__button,
body.dark-mode .wp-block-search__button {
  background-color: #00E5FF !important;
  color: #0A192F !important;
}
html.dark .wp-block-search__button:hover,
body.dark .wp-block-search__button:hover,
body.dark-mode .wp-block-search__button:hover {
  background-color: #66efff !important;
  color: #0A192F !important;
}

/* ── 5. Pagination Controls — Light & Dark Mode ── */
@media (prefers-color-scheme: dark) {
  .page-numbers,
  .wp-block-query-pagination-previous,
  .wp-block-query-pagination-next {
    background-color: #112240 !important;
    color: #f0eee5 !important;
    border: 1px solid #2a4068 !important;
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
  }
  .page-numbers.current,
  .page-numbers:hover,
  .wp-block-query-pagination-previous:hover,
  .wp-block-query-pagination-next:hover {
    background-color: #00E5FF !important;
    color: #0A192F !important;
    border-color: #00E5FF !important;
  }
}

html.dark .page-numbers,
html.dark .wp-block-query-pagination-previous,
html.dark .wp-block-query-pagination-next,
body.dark .page-numbers,
body.dark .wp-block-query-pagination-previous,
body.dark .wp-block-query-pagination-next,
body.dark-mode .page-numbers,
body.dark-mode .wp-block-query-pagination-previous,
body.dark-mode .wp-block-query-pagination-next {
  background-color: #112240 !important;
  color: #f0eee5 !important;
  border: 1px solid #2a4068 !important;
}
html.dark .page-numbers.current,
html.dark .page-numbers:hover,
body.dark .page-numbers.current,
body.dark .page-numbers:hover,
body.dark-mode .page-numbers.current,
body.dark-mode .page-numbers:hover {
  background-color: #00E5FF !important;
  color: #0A192F !important;
  border-color: #00E5FF !important;
}

/* ── 6. Accessibility & Disabled States across ALL buttons ── */
button:focus-visible,
a.wp-block-button__link:focus-visible,
a.wp-element-button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.lemonsqueezy-button:focus-visible,
.bs5-dark-toggle:focus-visible,
.bs5-navbar-toggler:focus-visible {
  outline: 2px solid #00E5FF !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
}

button[disabled],
input[disabled],
.wp-block-button__link[disabled],
.wp-block-button__link[aria-disabled="true"],
.wp-element-button[disabled] {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ============================================================================
   v32 — ABOUT PAGE STYLES
   Reuses services-page design tokens. Bilingual EN/FR.
   ============================================================================ */

/* --- Page container (reuse services-page) --- */
.about-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--wp--preset--spacing--50, 24px) var(--wp--preset--spacing--40, 16px);
}

/* --- Hero --- */
.about-hero {
  text-align: center;
  padding: var(--wp--preset--spacing--70, 48px) 0 var(--wp--preset--spacing--60, 40px);
}
.about-hero h1 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--wp--preset--color--heading, #0A192F);
  margin-bottom: var(--wp--preset--spacing--30, 16px);
  line-height: 1.15;
}
.about-hero-tagline {
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  font-size: 1.15rem;
  color: var(--wp--preset--color--muted, #5A6B7A);
  max-width: 640px;
  margin: 0 auto var(--wp--preset--spacing--40, 24px);
  line-height: 1.6;
}
.about-hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wp--preset--spacing--20, 8px);
}

/* --- Author card --- */
.about-author {
  padding: var(--wp--preset--spacing--60, 40px) 0;
}
.about-author-card {
  border: 1px solid var(--wp--preset--color--border, #D1D9E0);
  border-radius: 16px;
  padding: var(--wp--preset--spacing--60, 40px);
  background: var(--wp--preset--color--base, #f4f7fb);
}
.about-author-info {
  max-width: 720px;
  margin: 0 auto;
}
.about-author-name {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--wp--preset--color--heading, #0A192F);
  margin-bottom: var(--wp--preset--spacing--20, 8px);
}
.about-author-title {
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--wp--preset--color--muted, #5A6B7A);
  margin-bottom: var(--wp--preset--spacing--40, 24px);
}
.about-author-bio {
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  font-size: 1rem;
  color: var(--wp--preset--color--contrast, #0A192F);
  line-height: 1.7;
  margin-bottom: var(--wp--preset--spacing--30, 16px);
}
.about-author-link {
  display: inline-block;
  margin-top: var(--wp--preset--spacing--20, 8px);
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--wp--preset--color--heading, #0A192F);
  text-decoration: none;
  border-bottom: 2px solid var(--wp--preset--color--brand, #00E5FF);
  padding-bottom: 2px;
  transition: color 0.15s ease;
}
.about-author-link:hover {
  color: var(--wp--preset--color--brand, #00E5FF);
}

/* --- What we cover (topics grid) --- */
.about-topics {
  padding: var(--wp--preset--spacing--60, 40px) 0;
}
.about-topics h2 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--wp--preset--color--heading, #0A192F);
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--20, 8px);
}
.about-section-subtitle {
  text-align: center;
  color: var(--wp--preset--color--muted, #5A6B7A);
  margin-bottom: var(--wp--preset--spacing--50, 24px);
}
.about-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--wp--preset--spacing--40, 20px);
}
.about-topic-card {
  border: 1px solid var(--wp--preset--color--border, #D1D9E0);
  border-radius: 16px;
  padding: var(--wp--preset--spacing--50, 24px);
  background: var(--wp--preset--color--base, #f4f7fb);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.about-topic-card:hover {
  border-color: var(--wp--preset--color--brand, #00E5FF);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--wp--preset--color--brand, #00E5FF) 12%, transparent);
}
.about-topic-card h3 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--wp--preset--color--heading, #0A192F);
  margin-bottom: var(--wp--preset--spacing--20, 8px);
}
.about-topic-card p {
  font-size: 0.92rem;
  color: var(--wp--preset--color--muted, #5A6B7A);
  line-height: 1.55;
  margin: 0;
}

/* --- Experience timeline --- */
.about-experience {
  padding: var(--wp--preset--spacing--60, 40px) 0;
}
.about-experience h2 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--wp--preset--color--heading, #0A192F);
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--50, 24px);
}
.about-timeline {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  padding-left: 24px;
}
.about-timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--wp--preset--color--border, #D1D9E0);
}
.about-timeline-item {
  position: relative;
  margin-bottom: var(--wp--preset--spacing--50, 24px);
  padding-left: 28px;
}
.about-timeline-item::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand, #00E5FF);
  border: 2px solid var(--wp--preset--color--base, #f4f7fb);
}
.about-timeline-period {
  display: inline-block;
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--wp--preset--color--muted, #5A6B7A);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.about-timeline-item h3 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--wp--preset--color--heading, #0A192F);
  margin-bottom: var(--wp--preset--spacing--20, 8px);
}
.about-timeline-item p {
  font-size: 0.95rem;
  color: var(--wp--preset--color--contrast, #0A192F);
  line-height: 1.6;
  margin: 0;
}

/* --- Certifications --- */
.about-creds {
  padding: var(--wp--preset--spacing--60, 40px) 0;
}
.about-creds h2 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--wp--preset--color--heading, #0A192F);
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--50, 24px);
}
.about-creds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--wp--preset--spacing--20, 8px);
  max-width: 800px;
  margin: 0 auto;
}
.about-cred-item {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--20, 8px);
  padding: var(--wp--preset--spacing--20, 8px) var(--wp--preset--spacing--30, 16px);
  border: 1px solid var(--wp--preset--color--border, #D1D9E0);
  border-radius: 12px;
  background: var(--wp--preset--color--base, #f4f7fb);
  font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
  font-size: 0.95rem;
  color: var(--wp--preset--color--contrast, #0A192F);
}
.about-cred-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wp--preset--color--success, #15803d);
  color: var(--wp--preset--color--base, #f4f7fb);
  font-size: 0.8rem;
  font-weight: 700;
}

/* --- Editorial standards --- */
.about-editorial {
  padding: var(--wp--preset--spacing--60, 40px) 0;
}
.about-editorial h2 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--wp--preset--color--heading, #0A192F);
  text-align: center;
  margin-bottom: var(--wp--preset--spacing--50, 24px);
}
.about-editorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--wp--preset--spacing--40, 20px);
  max-width: 900px;
  margin: 0 auto;
}
.about-editorial-item {
  text-align: left;
  padding: var(--wp--preset--spacing--30, 16px);
}
.about-editorial-item h3 {
  font-family: var(--wp--preset--font-family--outfit, 'Outfit', sans-serif);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--wp--preset--color--heading, #0A192F);
  margin-bottom: var(--wp--preset--spacing--20, 8px);
}
.about-editorial-item p {
  font-size: 0.92rem;
  color: var(--wp--preset--color--muted, #5A6B7A);
  line-height: 1.55;
  margin: 0;
}

/* --- Dark mode adjustments --- */
body.dark .about-author-card,
body.dark .about-topic-card,
body.dark .about-cred-item {
  background: color-mix(in srgb, var(--wp--preset--color--contrast, #0A192F) 6%, transparent);
}
body.dark .about-timeline::before {
  background: color-mix(in srgb, var(--wp--preset--color--contrast, #0A192F) 20%, transparent);
}
body.dark .about-timeline-item::before {
  border-color: var(--wp--preset--color--contrast, #0A192F);
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .about-topics-grid {
    grid-template-columns: 1fr;
  }
  .about-creds-grid {
    grid-template-columns: 1fr;
  }
  .about-editorial-grid {
    grid-template-columns: 1fr;
  }
  .about-author-card {
    padding: var(--wp--preset--spacing--40, 24px);
  }
}

/* ============================================================================
   v32 — CATEGORY & ARCHIVE PAGES DESIGN SYSTEM
   Full theme adaptation for category, tag, author, and archive pages
   (e.g. /en/category/cybersecurity/, /fr/category/cybersecurity/).
   Supports both Light Mode (Trusted Indigo) and Dark Mode (Cyber Cyan / Deep Navy).
   ============================================================================ */

/* ── 1. Archive Header ── */
.archive-header {
  background-color: var(--wp--preset--color--surface, #f0efe8);
  border-bottom: 3px solid var(--wp--preset--color--brand, #4338ca);
  border-radius: 8px;
  padding: 2.5rem 2rem !important;
  margin-bottom: 2.5rem !important;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.archive-header h1.wp-block-query-title,
.archive-header .wp-block-query-title {
  font-family: var(--cloudscape-font-heading, 'Outfit', 'Montserrat', sans-serif) !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--wp--preset--color--heading, #0A192F) !important;
  margin: 0 0 0.5rem 0 !important;
}

.archive-header .wp-block-term-description,
.archive-header p {
  font-family: var(--cloudscape-font-primary, 'Inter', sans-serif);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--wp--preset--color--muted, #5a5c6b);
  margin: 0;
}

/* ── 2. Two-Column Layout Grid ── */
.archive-layout-70-30 {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2.5rem;
  align-items: start;
}

.archive-column-main {
  min-width: 0;
}

.archive-sidebar {
  position: sticky;
  top: 100px;
}

/* ── 3. Featured Story Card (First Post) ── */
.featured-story {
  background-color: var(--wp--preset--color--surface, #fafaf7);
  border: 1px solid var(--wp--preset--color--border, #d8d6cc);
  border-radius: 10px;
  padding: 2rem !important;
  margin-bottom: 2.5rem !important;
  box-shadow: 0 2px 8px rgba(10, 25, 47, 0.04);
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.featured-story:hover {
  box-shadow: 0 6px 20px rgba(10, 25, 47, 0.08);
}

.featured-story-title,
.featured-story-title a {
  font-family: var(--cloudscape-font-heading, 'Outfit', 'Montserrat', sans-serif) !important;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--wp--preset--color--heading, #0A192F) !important;
  text-decoration: none;
  transition: color 150ms ease;
}

.featured-story-title a:hover {
  color: var(--wp--preset--color--brand, #4338ca) !important;
}

/* Category pills inside featured story */
.featured-story .wp-block-post-terms a,
.featured-story .taxonomy-category a {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background-color: color-mix(in srgb, var(--wp--preset--color--brand, #4338ca) 12%, transparent);
  color: var(--wp--preset--color--brand, #4338ca);
  text-decoration: none;
  margin-right: 0.5rem;
  transition: background-color 150ms ease;
}

.featured-story .wp-block-post-terms a:hover,
.featured-story .taxonomy-category a:hover {
  background-color: color-mix(in srgb, var(--wp--preset--color--brand, #4338ca) 20%, transparent);
}

.featured-story .read-time,
.featured-story .wp-block-post-date {
  font-size: 0.88rem;
  color: var(--wp--preset--color--muted, #5a5c6b);
  font-weight: 500;
}

.featured-story .wp-block-post-excerpt {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--wp--preset--color--contrast, #1a1d2e);
  margin-top: 1rem;
}

.featured-story .wp-block-post-excerpt__more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 1rem;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  background-color: var(--wp--preset--color--brand, #4338ca);
  color: var(--wp--preset--color--base, #fafaf7) !important;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 150ms ease, transform 150ms ease;
}

.featured-story .wp-block-post-excerpt__more-link:hover {
  background-color: var(--cloudscape-color-brand-hover, #312e81);
  transform: translateY(-1px);
}

/* ── 4. Main Column Post List ── */
.archive-column-main .wp-block-post-template > li {
  list-style: none;
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--wp--preset--color--border, #d8d6cc);
}

.archive-post-title,
.archive-post-title a {
  font-family: var(--cloudscape-font-heading, 'Outfit', 'Montserrat', sans-serif) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--wp--preset--color--heading, #0A192F) !important;
  text-decoration: none;
  transition: color 150ms ease;
}

.archive-post-title a:hover {
  color: var(--wp--preset--color--brand, #4338ca) !important;
}

.archive-post-date,
.archive-column-main .read-time {
  font-size: 0.85rem;
  color: var(--wp--preset--color--muted, #5a5c6b);
}

.archive-column-main .wp-block-post-excerpt {
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--wp--preset--color--contrast, #1a1d2e);
  margin-top: 0.5rem;
}

.archive-column-main .wp-block-post-excerpt__more-link {
  font-weight: 600;
  color: var(--wp--preset--color--brand, #4338ca);
  text-decoration: none;
}

.archive-column-main .wp-block-post-excerpt__more-link:hover {
  text-decoration: underline;
}

/* ── 5. Sidebar & Widgets ── */
.sidebar-widget {
  background-color: var(--wp--preset--color--surface, #f0efe8);
  border: 1px solid var(--wp--preset--color--border, #d8d6cc);
  border-radius: 8px;
  padding: 1.5rem !important;
  margin-bottom: 1.75rem !important;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.sidebar-widget h4.widget-title,
.sidebar-widget .widget-title {
  font-family: var(--cloudscape-font-heading, 'Outfit', 'Montserrat', sans-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: var(--wp--preset--color--heading, #0A192F) !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

/* Curated Categories widget list */
.sidebar-widget ul.categories-list,
.sidebar-widget .curated-categories-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.curated-cat-item {
  list-style: none;
  margin: 0 0 0.4rem 0;
  padding: 0;
}

.curated-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  font-family: var(--cloudscape-font-primary, 'Inter', sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--wp--preset--color--contrast, #1a1d2e);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.curated-cat-link:hover {
  background-color: color-mix(in srgb, var(--wp--preset--color--brand, #4338ca) 10%, transparent);
  color: var(--wp--preset--color--brand, #4338ca);
}

.curated-cat-count {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--wp--preset--color--muted, #5a5c6b);
  margin-left: 0.5rem;
}

/* ── 6. DARK MODE OVERRIDES FOR CATEGORY & ARCHIVE PAGES ── */
@media (prefers-color-scheme: dark) {
  .archive-header {
    background-color: #112240 !important;
    border-bottom-color: #00E5FF !important;
  }
  .archive-header h1.wp-block-query-title,
  .archive-header .wp-block-query-title {
    color: #f0eee5 !important;
  }
  .archive-header .wp-block-term-description,
  .archive-header p {
    color: #c8d0dc !important;
  }

  .featured-story {
    background-color: #112240 !important;
    border-color: #2a4068 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  }
  .featured-story-title,
  .featured-story-title a {
    color: #f0eee5 !important;
  }
  .featured-story-title a:hover {
    color: #00E5FF !important;
  }
  .featured-story .wp-block-post-terms a,
  .featured-story .taxonomy-category a {
    background-color: rgba(0, 229, 255, 0.15) !important;
    color: #00E5FF !important;
  }
  .featured-story .read-time,
  .featured-story .wp-block-post-date {
    color: #8a9bb0 !important;
  }
  .featured-story .wp-block-post-excerpt {
    color: #c8d0dc !important;
  }
  .featured-story .wp-block-post-excerpt__more-link {
    background-color: #00E5FF !important;
    color: #0A192F !important;
  }
  .featured-story .wp-block-post-excerpt__more-link:hover {
    background-color: #66efff !important;
  }

  .archive-column-main .wp-block-post-template > li {
    border-bottom-color: #2a4068 !important;
  }
  .archive-post-title,
  .archive-post-title a {
    color: #f0eee5 !important;
  }
  .archive-post-title a:hover {
    color: #00E5FF !important;
  }
  .archive-post-date,
  .archive-column-main .read-time {
    color: #8a9bb0 !important;
  }
  .archive-column-main .wp-block-post-excerpt {
    color: #c8d0dc !important;
  }
  .archive-column-main .wp-block-post-excerpt__more-link {
    color: #00E5FF !important;
  }

  .sidebar-widget {
    background-color: #1a2d4a !important;
    border-color: #2a4068 !important;
    color: #f0eee5 !important;
  }
  .sidebar-widget h4.widget-title,
  .sidebar-widget .widget-title {
    color: #f0eee5 !important;
  }
  .curated-cat-link {
    color: #c8d0dc !important;
  }
  .curated-cat-link:hover {
    background-color: rgba(0, 229, 255, 0.15) !important;
    color: #00E5FF !important;
  }
  .curated-cat-count {
    color: #8a9bb0 !important;
  }
}

/* Repeat for manual dark mode toggles (html.dark / body.dark / body.dark-mode) */
html.dark .archive-header,
body.dark .archive-header,
body.dark-mode .archive-header {
  background-color: #112240 !important;
  border-bottom-color: #00E5FF !important;
}
html.dark .archive-header h1.wp-block-query-title,
body.dark .archive-header h1.wp-block-query-title,
body.dark-mode .archive-header h1.wp-block-query-title {
  color: #f0eee5 !important;
}
html.dark .archive-header .wp-block-term-description,
body.dark .archive-header .wp-block-term-description,
body.dark-mode .archive-header .wp-block-term-description {
  color: #c8d0dc !important;
}

html.dark .featured-story,
body.dark .featured-story,
body.dark-mode .featured-story {
  background-color: #112240 !important;
  border-color: #2a4068 !important;
}
html.dark .featured-story-title a,
body.dark .featured-story-title a,
body.dark-mode .featured-story-title a {
  color: #f0eee5 !important;
}
html.dark .featured-story-title a:hover,
body.dark .featured-story-title a:hover,
body.dark-mode .featured-story-title a:hover {
  color: #00E5FF !important;
}
html.dark .featured-story .wp-block-post-terms a,
body.dark .featured-story .wp-block-post-terms a,
body.dark-mode .featured-story .wp-block-post-terms a {
  background-color: rgba(0, 229, 255, 0.15) !important;
  color: #00E5FF !important;
}
html.dark .featured-story .wp-block-post-excerpt,
body.dark .featured-story .wp-block-post-excerpt,
body.dark-mode .featured-story .wp-block-post-excerpt {
  color: #c8d0dc !important;
}
html.dark .featured-story .wp-block-post-excerpt__more-link,
body.dark .featured-story .wp-block-post-excerpt__more-link,
body.dark-mode .featured-story .wp-block-post-excerpt__more-link {
  background-color: #00E5FF !important;
  color: #0A192F !important;
}

html.dark .archive-post-title a,
body.dark .archive-post-title a,
body.dark-mode .archive-post-title a {
  color: #f0eee5 !important;
}
html.dark .archive-post-title a:hover,
body.dark .archive-post-title a:hover,
body.dark-mode .archive-post-title a:hover {
  color: #00E5FF !important;
}
html.dark .archive-column-main .wp-block-post-excerpt,
body.dark .archive-column-main .wp-block-post-excerpt,
body.dark-mode .archive-column-main .wp-block-post-excerpt {
  color: #c8d0dc !important;
}

html.dark .sidebar-widget,
body.dark .sidebar-widget,
body.dark-mode .sidebar-widget {
  background-color: #1a2d4a !important;
  border-color: #2a4068 !important;
  color: #f0eee5 !important;
}
html.dark .sidebar-widget .widget-title,
body.dark .sidebar-widget .widget-title,
body.dark-mode .sidebar-widget .widget-title {
  color: #f0eee5 !important;
}
html.dark .curated-cat-link,
body.dark .curated-cat-link,
body.dark-mode .curated-cat-link {
  color: #c8d0dc !important;
}
html.dark .curated-cat-link:hover,
body.dark .curated-cat-link:hover,
body.dark-mode .curated-cat-link:hover {
  background-color: rgba(0, 229, 255, 0.15) !important;
  color: #00E5FF !important;
}

/* ── 7. Responsive adjustments ── */
@media (max-width: 900px) {
  .archive-layout-70-30 {
    grid-template-columns: 1fr !important;
  }
  .archive-column-main {
    grid-column: span 1 !important;
  }
  .archive-sidebar {
    grid-column: span 1 !important;
    position: static !important;
    margin-top: 2rem !important;
  }
}