/*
 * Theme Name:  Nepal Insurance Guide
 * Theme URI:   https://example.com/nepal-insurance-guide
 * Description: A lightweight, SEO-optimised WordPress theme for a Nepal-focused life insurance information website. Built for speed, topical authority, and gentle lead generation.
 * Version:     1.0.0
 * Author:      Your Name
 * Author URI:  https://example.com
 * License:     GPL-2.0-or-later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: nepal-insurance-guide
 * Tags:        blog, custom-menu, featured-images, translation-ready, responsive-layout
 */

/* ==========================================================================
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   1.  CSS Layers Declaration
   2.  Design Tokens (Custom Properties)
   3.  Reset & Base
   4.  Typography
   5.  Layout & Grid
   6.  Header & Navigation
   7.  Hero Section
   8.  Homepage Sections
       8a. Quick Actions
       8b. Calculator Cards
       8c. Insurance Categories
       8d. Company Directory
       8e. Featured Guides
       8f. FAQ
       8g. Latest Articles
       8h. Contact CTA
   9.  Article Cards (reusable)
   10. Single Post / Guide
       10a. Entry Header
       10b. Entry Content (typography)
       10c. Table of Contents
       10d. Highlight Box
       10e. Comparison Table
       10f. Expert Box
       10g. Inline CTA Strip
   11. Archive Pages
   12. Sidebar
   13. Footer
   14. Forms & Inputs
   15. Buttons
   16. Breadcrumbs
   17. Pagination
   18. 404 Page
   19. Search Results
   20. Utility Classes
   21. Print Styles
   22. Reduced Motion
   ========================================================================== */


/* ==========================================================================
   1. CSS LAYERS DECLARATION
   Explicit layer order controls cascade priority without specificity wars.
   Lower layers lose to higher ones when specificity is equal.
   ========================================================================== */

@layer reset, tokens, base, layout, components, pages, utilities;


/* ==========================================================================
   2. DESIGN TOKENS
   Single source of truth for all visual decisions.
   Every value in the theme traces back to a token defined here.
   ========================================================================== */

@layer tokens {

  :root {

    /* ------------------------------------------------------------------
       COLOUR PALETTE
       Primary   — Deep navy. Conveys trust, authority, and professionalism.
       Accent    — Nepal crimson. Provides energy and signals action.
       Success   — Green. Used for positive indicators (claim paid, verified).
       Warning   — Amber. Used for alerts and important notices.
       ------------------------------------------------------------------ */

    --clr-primary-900: #0d1f3c;
    --clr-primary-800: #1a3c6e;   /* Brand primary */
    --clr-primary-700: #1e4d8c;
    --clr-primary-600: #2563a8;
    --clr-primary-100: #dbeafe;
    --clr-primary-50:  #eff6ff;

    --clr-accent-700:  #922b21;
    --clr-accent-600:  #c0392b;   /* Brand accent */
    --clr-accent-500:  #e74c3c;
    --clr-accent-100:  #fde8e8;
    --clr-accent-50:   #fff5f5;

    --clr-success-700: #1e8449;
    --clr-success-600: #27ae60;
    --clr-success-100: #d4efdf;
    --clr-success-50:  #f0fdf4;

    --clr-warning-600: #e67e22;
    --clr-warning-100: #fdebd0;
    --clr-warning-50:  #fffbf0;

    /* Neutrals — semantic names preferred over numeric scales in usage */
    --clr-text:        #1a202c;   /* Body text */
    --clr-text-muted:  #4a5568;   /* Secondary text, captions */
    --clr-text-faint:  #718096;   /* Meta text, placeholders */
    --clr-bg:          #f8f9fa;   /* Page background */
    --clr-surface:     #ffffff;   /* Card and panel surfaces */
    --clr-border:      #e2e8f0;   /* Dividers and input borders */
    --clr-border-dark: #cbd5e0;   /* Stronger borders */

    /* Semantic aliases — use these in components, not raw palette tokens */
    --color-link:         var(--clr-primary-800);
    --color-link-hover:   var(--clr-primary-600);
    --color-link-visited: #5a3e7a;
    --color-focus:        var(--clr-accent-600);

    /* ------------------------------------------------------------------
       TYPOGRAPHY
       Hind     — Humanist sans-serif. Excellent Latin + Devanagari support.
                  Used for body text, UI labels, and navigation.
       Mukta    — Geometric sans-serif. High-impact at display sizes.
                  Used for headings and hero text.
       Mono     — System monospace. Used for code blocks only.

       The system-ui fallback stacks ensure readable text loads instantly
       before web fonts arrive (font-display: swap handles the swap).
       ------------------------------------------------------------------ */

    --font-body:    'Hind', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Mukta', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;

    /* ------------------------------------------------------------------
       TYPE SCALE  (mobile-first — desktop overrides via clamp())
       Fluid type: scales linearly between 375px and 1200px viewport.
       Formula: clamp(min, preferred, max)
       ------------------------------------------------------------------ */

    --text-xs:   0.75rem;                               /* 12px — labels, meta  */
    --text-sm:   0.875rem;                              /* 14px — captions      */
    --text-base: 1rem;                                  /* 16px — body          */
    --text-lg:   1.125rem;                              /* 18px — lead text     */
    --text-xl:   clamp(1.125rem, 2vw, 1.25rem);        /* 18–20px              */
    --text-2xl:  clamp(1.25rem,  2.5vw, 1.5rem);       /* 20–24px              */
    --text-3xl:  clamp(1.5rem,   3vw,   1.875rem);     /* 24–30px              */
    --text-4xl:  clamp(1.75rem,  4vw,   2.25rem);      /* 28–36px              */
    --text-5xl:  clamp(2rem,     5vw,   3rem);         /* 32–48px — hero h1    */

    /* Line heights */
    --leading-tight:  1.25;
    --leading-snug:   1.375;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    /* Font weights */
    --weight-normal:    400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-extrabold: 800;

    /* Letter spacing */
    --tracking-tight:  -0.025em;
    --tracking-normal:  0em;
    --tracking-wide:    0.025em;
    --tracking-wider:   0.05em;
    --tracking-widest:  0.1em;

    /* ------------------------------------------------------------------
       SPACING SCALE
       Based on a 4px base unit (--space-1 = 4px).
       Use tokens for all margins, paddings, and gaps.
       ------------------------------------------------------------------ */

    --space-px:  1px;
    --space-0:   0;
    --space-1:   0.25rem;    /*  4px */
    --space-2:   0.5rem;     /*  8px */
    --space-3:   0.75rem;    /* 12px */
    --space-4:   1rem;       /* 16px */
    --space-5:   1.25rem;    /* 20px */
    --space-6:   1.5rem;     /* 24px */
    --space-7:   1.75rem;    /* 28px */
    --space-8:   2rem;       /* 32px */
    --space-10:  2.5rem;     /* 40px */
    --space-12:  3rem;       /* 48px */
    --space-14:  3.5rem;     /* 56px */
    --space-16:  4rem;       /* 64px */
    --space-20:  5rem;       /* 80px */
    --space-24:  6rem;       /* 96px */
    --space-32:  8rem;       /* 128px */

    /* Section vertical rhythm — consistent spacing between homepage sections */
    --section-gap: clamp(var(--space-12), 6vw, var(--space-24));

    /* ------------------------------------------------------------------
       LAYOUT
       ------------------------------------------------------------------ */

    --container-sm:  680px;    /* Narrow: single column articles */
    --container-md:  960px;    /* Default: most content          */
    --container-lg: 1200px;    /* Wide: homepage sections        */

    /* Sidebar proportions */
    --sidebar-width: 300px;

    /* ------------------------------------------------------------------
       BORDER RADIUS
       ------------------------------------------------------------------ */

    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ------------------------------------------------------------------
       SHADOWS
       Each shadow is defined at two levels so components can pick depth.
       ------------------------------------------------------------------ */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.09), 0 10px 10px rgba(0, 0, 0, 0.04);

    /* ------------------------------------------------------------------
       TRANSITIONS
       ------------------------------------------------------------------ */

    --transition-fast:   150ms ease;
    --transition-base:   200ms ease;
    --transition-slow:   300ms ease;
    --transition-slower: 400ms ease;

    /* ------------------------------------------------------------------
       Z-INDEX SCALE
       Named z-indices prevent magic number collisions.
       ------------------------------------------------------------------ */

    --z-below:   -1;
    --z-base:     0;
    --z-raised:   10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;

    /* ------------------------------------------------------------------
       HEADER HEIGHT
       Used to offset sticky elements (TOC, anchor links).
       ------------------------------------------------------------------ */

    --header-height: 64px;

  }

  /* Dark mode — minimal, system-preference only.
     Only surface and text tokens change; brand colours stay consistent. */
  @media (prefers-color-scheme: dark) {
    :root {
      --clr-text:       #e2e8f0;
      --clr-text-muted: #a0aec0;
      --clr-text-faint: #718096;
      --clr-bg:         #0f1117;
      --clr-surface:    #1a1f2e;
      --clr-border:     #2d3748;
      --clr-border-dark:#4a5568;

      --clr-primary-50:  #0d1f3c;
      --clr-primary-100: #1a3c6e;
      --clr-accent-50:   #2d0a0a;
      --clr-accent-100:  #5c1a1a;

      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
      --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
    }
  }

}


/* ==========================================================================
   3. RESET & BASE
   Consistent cross-browser foundation.
   Based on modern-normalize principles — only what is actually needed.
   ========================================================================== */

@layer reset {

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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
    scroll-behavior: smooth;
    /* Offset anchor jumps by header height so targets are not hidden */
    scroll-padding-top: calc(var(--header-height) + var(--space-4));
  }

  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--clr-text);
    background-color: var(--clr-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100svh;
  }

  /* Remove list styles when lists have a role attribute (nav, etc.) */
  ul[role],
  ol[role] {
    list-style: none;
  }

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

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  /* Ensure headings don't overflow their containers */
  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    text-wrap: balance; /* Modern browsers: better heading line breaks */
  }

  p,
  li,
  figcaption {
    overflow-wrap: break-word;
    text-wrap: pretty; /* Avoid orphans in body text */
  }

  /* Focus visible — visible ring only for keyboard navigation */
  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  /* Remove focus ring for mouse/touch (browsers that support :focus-visible) */
  :focus:not(:focus-visible) {
    outline: none;
  }

  a {
    color: var(--color-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
  }

  a:hover {
    color: var(--color-link-hover);
  }

  a:visited {
    color: var(--color-link-visited);
  }

  strong, b {
    font-weight: var(--weight-semibold);
  }

  em, i {
    font-style: italic;
  }

  hr {
    border: none;
    border-top: 1px solid var(--clr-border);
    margin-block: var(--space-8);
  }

  /* Tables default reset */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  /* Remove default button styles */
  button {
    cursor: pointer;
    border: none;
    background: none;
  }

  /* Ensure fieldset has no intrinsic minimum width */
  fieldset {
    border: none;
    min-width: 0;
  }

  /* Code and pre */
  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  pre {
    overflow-x: auto;
    white-space: pre;
  }

  /* Details / summary — remove default marker in Safari */
  summary {
    cursor: pointer;
    list-style: none;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  /* Abbr with title — show dotted underline */
  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
  }

  /* Sub and sup don't affect line height */
  sub,
  sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sup { top: -0.5em; }
  sub { bottom: -0.25em; }

  /* Blockquote reset (styled in typography) */
  blockquote {
    margin-inline: 0;
  }

  /* Hidden attribute support */
  [hidden] {
    display: none !important;
  }

  /* WordPress-specific resets */
  .wp-caption {
    max-width: 100%;
  }

  .wp-caption-text {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--clr-text-faint);
    text-align: center;
  }

  .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .screen-reader-text:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    white-space: normal;
    width: auto;
  }

}


/* ==========================================================================
   4. TYPOGRAPHY
   Global typographic styles for headings, body copy, and prose content.
   ========================================================================== */

@layer base {

  /* Skip link — first focusable element in the DOM */
  .skip-link {
    position: absolute;
    top: var(--space-2);
    left: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--clr-primary-800);
    color: #fff;
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-md);
    z-index: var(--z-toast);
    transform: translateY(-200%);
    transition: transform var(--transition-base);
    text-decoration: none;
  }

  .skip-link:focus {
    transform: translateY(0);
  }

  /* ------------------------------------------------------------------
     GLOBAL HEADING STYLES
  ------------------------------------------------------------------ */

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--clr-text);
    letter-spacing: var(--tracking-tight);
  }

  h1 { font-size: var(--text-5xl); font-weight: var(--weight-extrabold); }
  h2 { font-size: var(--text-4xl); }
  h3 { font-size: var(--text-3xl); }
  h4 { font-size: var(--text-2xl); }
  h5 { font-size: var(--text-xl);  }
  h6 { font-size: var(--text-lg);  font-weight: var(--weight-semibold); }

  /* ------------------------------------------------------------------
     PROSE / ENTRY CONTENT
     Applied to .entry-content — the main article body.
     Every rule here uses the descendant selector to be precise and
     avoid bleeding into card layouts or sidebars.
  ------------------------------------------------------------------ */

  .entry-content {
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--clr-text);
  }

  .entry-content > * + * {
    margin-top: var(--space-6);
  }

  .entry-content h2 {
    font-size: var(--text-4xl);
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--clr-border);
  }

  .entry-content h3 {
    font-size: var(--text-3xl);
    margin-top: var(--space-10);
    margin-bottom: var(--space-3);
  }

  .entry-content h4 {
    font-size: var(--text-2xl);
    margin-top: var(--space-8);
    margin-bottom: var(--space-2);
  }

  .entry-content p {
    max-width: 68ch; /* Optimal reading line length */
  }

  .entry-content ul,
  .entry-content ol {
    padding-inline-start: var(--space-6);
    max-width: 68ch;
  }

  .entry-content ul {
    list-style-type: disc;
  }

  .entry-content ol {
    list-style-type: decimal;
  }

  .entry-content li {
    margin-block: var(--space-2);
    padding-inline-start: var(--space-2);
  }

  .entry-content li::marker {
    color: var(--clr-primary-800);
  }

  .entry-content a {
    font-weight: var(--weight-medium);
    text-decoration-color: currentColor;
  }

  .entry-content blockquote {
    border-inline-start: 4px solid var(--clr-primary-800);
    padding-inline-start: var(--space-6);
    padding-block: var(--space-2);
    color: var(--clr-text-muted);
    font-style: italic;
    font-size: var(--text-xl);
  }

  .entry-content code {
    background: var(--clr-primary-50);
    color: var(--clr-primary-800);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.875em;
  }

  .entry-content pre {
    background: var(--clr-primary-900);
    color: #e2e8f0;
    padding: var(--space-6);
    border-radius: var(--radius-md);
    overflow-x: auto;
    tab-size: 2;
  }

  .entry-content pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: var(--text-sm);
  }

  .entry-content figure {
    margin-block: var(--space-8);
  }

  .entry-content figure img {
    border-radius: var(--radius-md);
    width: 100%;
  }

  .entry-content figcaption {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--clr-text-faint);
    text-align: center;
  }

  .entry-content table {
    font-size: var(--text-sm);
    margin-block: var(--space-8);
  }

  .entry-content th {
    background: var(--clr-primary-800);
    color: #fff;
    font-weight: var(--weight-semibold);
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
  }

  .entry-content td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--clr-border);
    vertical-align: top;
  }

  .entry-content tr:nth-child(even) td {
    background: var(--clr-primary-50);
  }

  .entry-content tr:hover td {
    background: var(--clr-accent-50);
  }

  /* Lead paragraph — first <p> after H1 or .entry-header */
  .entry-content > p:first-of-type,
  .entry-content .lead {
    font-size: var(--text-xl);
    color: var(--clr-text-muted);
    line-height: var(--leading-snug);
    max-width: 60ch;
  }

}


/* ==========================================================================
   5. LAYOUT & GRID
   ========================================================================== */

@layer layout {

  /* ------------------------------------------------------------------
     CONTAINERS
     Three widths, centred with auto inline margin.
     Use .container by default; narrow with .container--sm for articles;
     wide with .container--lg for full-bleed homepage sections.
  ------------------------------------------------------------------ */

  .container {
    width: 100%;
    max-width: var(--container-lg);
    margin-inline: auto;
    padding-inline: var(--space-4);
  }

  @media (min-width: 640px) {
    .container {
      padding-inline: var(--space-6);
    }
  }

  @media (min-width: 1024px) {
    .container {
      padding-inline: var(--space-8);
    }
  }

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

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

  /* ------------------------------------------------------------------
     SITE WRAPPER
     Ensures footer sticks to the bottom of the viewport on short pages.
  ------------------------------------------------------------------ */

  .site {
    display: flex;
    flex-direction: column;
    min-height: 100svh;
  }

  .site-main {
    flex: 1;
  }

  /* ------------------------------------------------------------------
     SECTION WRAPPER
     Consistent vertical rhythm between homepage sections.
  ------------------------------------------------------------------ */

  .section {
    padding-block: var(--section-gap);
  }

  .section--alt {
    background-color: var(--clr-surface);
  }

  .section--dark {
    background-color: var(--clr-primary-800);
    color: #fff;
  }

  .section__header {
    text-align: center;
    margin-bottom: var(--space-10);
  }

  .section__eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--clr-accent-600);
    margin-bottom: var(--space-3);
  }

  .section__title {
    font-size: var(--text-4xl);
    color: var(--clr-text);
    margin-bottom: var(--space-4);
  }

  .section--dark .section__title {
    color: #fff;
  }

  .section__subtitle {
    font-size: var(--text-lg);
    color: var(--clr-text-muted);
    max-width: 56ch;
    margin-inline: auto;
    line-height: var(--leading-normal);
  }

  .section--dark .section__subtitle {
    color: rgba(255, 255, 255, 0.75);
  }

  /* ------------------------------------------------------------------
     CARD GRID LAYOUTS
  ------------------------------------------------------------------ */

  /* Auto-fit grid — fills row with as many columns as fit (min 240px) */
  .grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-6);
  }

  /* Fixed 2-column grid */
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  @media (min-width: 640px) {
    .grid-2 {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Fixed 3-column grid */
  .grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  @media (min-width: 640px) {
    .grid-3 {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (min-width: 960px) {
    .grid-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  /* Fixed 4-column grid */
  .grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }

  @media (min-width: 960px) {
    .grid-4 {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }

  /* Content + Sidebar layout */
  .layout-with-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: start;
  }

  @media (min-width: 960px) {
    .layout-with-sidebar {
      grid-template-columns: 1fr var(--sidebar-width);
    }
  }

  /* Flex row with wrap — useful for tag lists, action bars */
  .flex-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }

}


/* ==========================================================================
   6. HEADER & NAVIGATION
   ========================================================================== */

@layer components {

  /* ------------------------------------------------------------------
     SITE HEADER
  ------------------------------------------------------------------ */

  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    box-shadow: var(--shadow-sm);
    height: var(--header-height);
    contain: layout style; /* Performance: skip paint for elements outside */
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--space-4);
  }

  /* ------------------------------------------------------------------
     LOGO
  ------------------------------------------------------------------ */

  .site-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    flex-shrink: 0;
  }

  .site-logo__img {
    height: 36px;
    width: auto;
  }

  .site-logo__text {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--clr-primary-800);
    line-height: 1;
  }

  .site-logo__text span {
    color: var(--clr-accent-600);
  }

  /* ------------------------------------------------------------------
     PRIMARY NAVIGATION
  ------------------------------------------------------------------ */

  .nav-primary {
    display: none; /* Hidden on mobile — toggled by JS */
  }

  .nav-primary__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
  }

  .nav-primary__item {
    position: relative;
  }

  .nav-primary__link {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--clr-text);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
  }

  .nav-primary__link:hover,
  .nav-primary__link:focus-visible {
    background: var(--clr-primary-50);
    color: var(--clr-primary-800);
  }

  /* Current page / active ancestor */
  .nav-primary__item.current-menu-item .nav-primary__link,
  .nav-primary__item.current-menu-ancestor .nav-primary__link,
  .nav-primary__item.current-page-ancestor .nav-primary__link {
    color: var(--clr-primary-800);
    font-weight: var(--weight-semibold);
  }

  /* Dropdown */
  .nav-primary__item:has(.sub-menu) > .nav-primary__link::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 5px;
    margin-inline-start: var(--space-2);
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    vertical-align: middle;
    transition: transform var(--transition-fast);
  }

  .nav-primary__item:hover > .nav-primary__link::after {
    transform: rotate(180deg);
  }

  .sub-menu {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    list-style: none;
    padding: var(--space-2);
    z-index: var(--z-dropdown);
  }

  .nav-primary__item:hover .sub-menu,
  .nav-primary__item:focus-within .sub-menu {
    display: block;
  }

  .sub-menu li a {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    color: var(--clr-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast);
  }

  .sub-menu li a:hover {
    background: var(--clr-primary-50);
    color: var(--clr-primary-800);
  }

  /* ------------------------------------------------------------------
     HEADER CTA BUTTON
  ------------------------------------------------------------------ */

  .header-cta {
    display: none;
    flex-shrink: 0;
  }

  /* ------------------------------------------------------------------
     HAMBURGER MENU (mobile)
  ------------------------------------------------------------------ */

  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: none;
    border: 1px solid var(--clr-border);
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast);
  }

  .menu-toggle:hover {
    background: var(--clr-primary-50);
  }

  .menu-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--clr-text);
    border-radius: var(--radius-full);
    transition: transform var(--transition-base), opacity var(--transition-base);
    transform-origin: center;
  }

  /* Animated X state */
  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* ------------------------------------------------------------------
     MOBILE NAVIGATION OVERLAY
  ------------------------------------------------------------------ */

  .mobile-nav {
    display: none;
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: var(--clr-surface);
    overflow-y: auto;
    z-index: var(--z-overlay);
    padding: var(--space-6);
    border-top: 1px solid var(--clr-border);
  }

  .mobile-nav.is-open {
    display: block;
  }

  .mobile-nav__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .mobile-nav__list a {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--clr-text);
    text-decoration: none;
    border-radius: var(--radius-md);
    border-bottom: 1px solid var(--clr-border);
    transition: background var(--transition-fast);
  }

  .mobile-nav__list a:hover {
    background: var(--clr-primary-50);
    color: var(--clr-primary-800);
  }

  .mobile-nav__cta {
    margin-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  /* ------------------------------------------------------------------
     DESKTOP BREAKPOINT — show nav, hide toggle
  ------------------------------------------------------------------ */

  @media (min-width: 768px) {
    .nav-primary {
      display: flex;
      align-items: center;
    }

    .header-cta {
      display: block;
    }

    .menu-toggle {
      display: none;
    }
  }


  /* ========================================================================
     7. HERO SECTION
     ======================================================================== */

  .hero {
    position: relative;
    background: linear-gradient(
      135deg,
      var(--clr-primary-900) 0%,
      var(--clr-primary-800) 60%,
      var(--clr-primary-700) 100%
    );
    color: #fff;
    padding-block: clamp(var(--space-16), 10vw, var(--space-32));
    overflow: hidden;
  }

  /* Subtle texture overlay */
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
  }

  /* Accent stripe — Nepal red vertical line */
  .hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: clamp(40px, 10vw, 120px);
    bottom: 0;
    width: 4px;
    background: var(--clr-accent-600);
    opacity: 0.6;
  }

  .hero__inner {
    position: relative;
    z-index: 1;
  }

  .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--clr-accent-500);
    margin-bottom: var(--space-5);
  }

  .hero__eyebrow::before {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--clr-accent-600);
    flex-shrink: 0;
  }

  .hero__title {
    font-size: var(--text-5xl);
    font-weight: var(--weight-extrabold);
    color: #fff;
    line-height: var(--leading-tight);
    max-width: 16ch;
    margin-bottom: var(--space-6);
    letter-spacing: var(--tracking-tight);
  }

  .hero__title em {
    font-style: normal;
    color: var(--clr-accent-500);
  }

  .hero__subtitle {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.8);
    max-width: 48ch;
    line-height: var(--leading-normal);
    margin-bottom: var(--space-8);
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-10);
  }

  /* Trust badges row */
  .hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: var(--space-8);
  }

  .hero__trust-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .hero__trust-number {
    font-size: var(--text-3xl);
    font-weight: var(--weight-extrabold);
    color: #fff;
    font-family: var(--font-heading);
    line-height: 1;
  }

  .hero__trust-label {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: var(--tracking-wide);
  }


  /* ========================================================================
     8a. QUICK ACTIONS
     ======================================================================== */

  .quick-actions {
    background: var(--clr-surface);
    padding-block: var(--space-10);
    border-bottom: 1px solid var(--clr-border);
  }

  .quick-actions__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  @media (min-width: 640px) {
    .quick-actions__grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .quick-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--clr-text);
    text-align: center;
    transition:
      border-color var(--transition-base),
      box-shadow var(--transition-base),
      transform var(--transition-base);
    contain: layout style;
  }

  .quick-action-card:hover {
    border-color: var(--clr-primary-800);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: var(--clr-primary-800);
  }

  .quick-action-card__icon {
    width: 40px;
    height: 40px;
    background: var(--clr-primary-50);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .quick-action-card__icon svg {
    width: 20px;
    height: 20px;
    color: var(--clr-primary-800);
  }

  .quick-action-card:hover .quick-action-card__icon {
    background: var(--clr-primary-800);
  }

  .quick-action-card:hover .quick-action-card__icon svg {
    color: #fff;
  }

  .quick-action-card__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
  }


  /* ========================================================================
     8b. CALCULATOR CARDS
     ======================================================================== */

  .calculator-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
    position: relative;
    overflow: hidden;
    contain: layout style;
  }

  .calculator-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--clr-primary-800), var(--clr-accent-600));
  }

  .calculator-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--clr-primary-800);
  }

  .calculator-card__icon {
    width: 48px;
    height: 48px;
    background: var(--clr-primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .calculator-card__icon svg {
    width: 24px;
    height: 24px;
    color: var(--clr-primary-800);
  }

  .calculator-card__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--clr-text);
    font-family: var(--font-heading);
  }

  .calculator-card__desc {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: var(--leading-normal);
    flex: 1;
  }


  /* ========================================================================
     8c. INSURANCE CATEGORIES
     ======================================================================== */

  .category-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: var(--clr-text);
    transition:
      background var(--transition-base),
      border-color var(--transition-base),
      transform var(--transition-base);
    contain: layout style;
  }

  .category-card:hover {
    background: var(--clr-primary-50);
    border-color: var(--clr-primary-700);
    transform: translateY(-3px);
    color: var(--clr-text);
  }

  .category-card__icon {
    font-size: 2rem;
    line-height: 1;
  }

  .category-card__name {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    font-family: var(--font-heading);
    color: var(--clr-primary-800);
  }

  .category-card__desc {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: var(--leading-normal);
  }

  .category-card__count {
    font-size: var(--text-xs);
    color: var(--clr-text-faint);
    font-weight: var(--weight-medium);
    margin-top: auto;
    padding-top: var(--space-3);
    border-top: 1px solid var(--clr-border);
  }


  /* ========================================================================
     8d. COMPANY DIRECTORY
     ======================================================================== */

  .company-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--clr-text);
    transition: box-shadow var(--transition-base), border-color var(--transition-base);
    contain: layout style;
  }

  .company-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--clr-primary-800);
    color: var(--clr-text);
  }

  .company-card__logo {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
    object-fit: contain;
    padding: var(--space-1);
    flex-shrink: 0;
    background: var(--clr-surface);
  }

  .company-card__logo-placeholder {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--clr-primary-50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--clr-primary-800);
    flex-shrink: 0;
    font-family: var(--font-heading);
  }

  .company-card__body {
    flex: 1;
    min-width: 0;
  }

  .company-card__name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--clr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .company-card__meta {
    font-size: var(--text-xs);
    color: var(--clr-text-faint);
    margin-top: var(--space-1);
  }

  .company-card__badge {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    background: var(--clr-success-50);
    color: var(--clr-success-700);
    white-space: nowrap;
    flex-shrink: 0;
  }


  /* ========================================================================
     8e. FEATURED GUIDES
     ======================================================================== */

  .guide-card {
    display: flex;
    flex-direction: column;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    color: var(--clr-text);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    contain: layout style;
  }

  .guide-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    color: var(--clr-text);
  }

  .guide-card__image {
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: var(--clr-primary-50);
  }

  .guide-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slower);
  }

  .guide-card:hover .guide-card__image img {
    transform: scale(1.04);
  }

  .guide-card__body {
    padding: var(--space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .guide-card__tag {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--clr-accent-600);
  }

  .guide-card__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    font-family: var(--font-heading);
    line-height: var(--leading-snug);
    color: var(--clr-text);
  }

  .guide-card:hover .guide-card__title {
    color: var(--clr-primary-800);
  }

  .guide-card__excerpt {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: var(--leading-normal);
    flex: 1;
  }

  .guide-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--clr-text-faint);
    padding-top: var(--space-3);
    border-top: 1px solid var(--clr-border);
    margin-top: auto;
  }

  .guide-card__reading-time::before {
    content: '📖 ';
  }


  /* ========================================================================
     8f. FAQ SECTION
     ======================================================================== */

  .faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: var(--container-md);
    margin-inline: auto;
  }

  .faq-item {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition-base);
  }

  .faq-item[open] {
    border-color: var(--clr-primary-800);
  }

  .faq-item__question {
    padding: var(--space-5) var(--space-6);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--clr-text);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    user-select: none;
    transition: background var(--transition-fast);
  }

  .faq-item__question:hover {
    background: var(--clr-primary-50);
    color: var(--clr-primary-800);
  }

  .faq-item[open] .faq-item__question {
    color: var(--clr-primary-800);
    border-bottom: 1px solid var(--clr-border);
  }

  /* Chevron icon via CSS */
  .faq-item__question::after {
    content: '';
    display: block;
    width: 10px;
    height: 6px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    flex-shrink: 0;
    transition: transform var(--transition-base);
  }

  .faq-item[open] .faq-item__question::after {
    transform: rotate(180deg);
  }

  .faq-item__answer {
    padding: var(--space-5) var(--space-6);
    font-size: var(--text-base);
    color: var(--clr-text-muted);
    line-height: var(--leading-loose);
  }

  .faq-item__answer > * + * {
    margin-top: var(--space-4);
  }


  /* ========================================================================
     8g. LATEST ARTICLES (see also: Article Cards below)
     ======================================================================== */

  /* Latest Articles uses .article-card — see section 9 */

  .articles-footer {
    text-align: center;
    margin-top: var(--space-10);
  }


  /* ========================================================================
     8h. CONTACT CTA SECTION
     ======================================================================== */

  .cta-section {
    background: linear-gradient(135deg, var(--clr-primary-900), var(--clr-primary-800));
    color: #fff;
    text-align: center;
    padding-block: var(--section-gap);
    position: relative;
    overflow: hidden;
  }

  .cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse at center bottom,
      rgba(192, 57, 43, 0.2) 0%,
      transparent 70%
    );
    pointer-events: none;
  }

  .cta-section__inner {
    position: relative;
    z-index: 1;
    max-width: var(--container-sm);
    margin-inline: auto;
  }

  .cta-section__title {
    font-size: var(--text-4xl);
    font-weight: var(--weight-extrabold);
    color: #fff;
    margin-bottom: var(--space-4);
  }

  .cta-section__subtitle {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: var(--space-8);
    line-height: var(--leading-normal);
  }

  .cta-section__channels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
  }

  .cta-section__disclaimer {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: var(--tracking-wide);
  }


  /* ========================================================================
     9. ARTICLE CARDS (reusable — used in home + archives)
     ======================================================================== */

  .article-card {
    display: flex;
    flex-direction: column;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    text-decoration: none;
    color: var(--clr-text);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    contain: layout style;
    height: 100%; /* Allows grid to stretch cards to equal height */
  }

  .article-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
    color: var(--clr-text);
  }

  .article-card__thumbnail {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--clr-primary-50);
    flex-shrink: 0;
  }

  .article-card__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slower);
  }

  .article-card:hover .article-card__thumbnail img {
    transform: scale(1.04);
  }

  /* Placeholder when no featured image is set */
  .article-card__thumbnail--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--clr-primary-50), var(--clr-primary-100));
  }

  .article-card__thumbnail--placeholder svg {
    width: 48px;
    height: 48px;
    color: var(--clr-primary-700);
    opacity: 0.4;
  }

  .article-card__body {
    padding: var(--space-5);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .article-card__categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .article-card__cat {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--clr-accent-600);
    text-decoration: none;
  }

  .article-card__cat:hover {
    text-decoration: underline;
  }

  .article-card__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    font-family: var(--font-heading);
    line-height: var(--leading-snug);
    color: var(--clr-text);
    transition: color var(--transition-fast);
  }

  .article-card:hover .article-card__title {
    color: var(--clr-primary-800);
  }

  .article-card__excerpt {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: var(--leading-normal);
    flex: 1;

    /* Clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .article-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--clr-border);
    margin-top: auto;
  }

  .article-card__date {
    font-size: var(--text-xs);
    color: var(--clr-text-faint);
  }

  .article-card__reading-time {
    font-size: var(--text-xs);
    color: var(--clr-text-faint);
    white-space: nowrap;
  }

  /* Horizontal card variant — used in sidebar or list views */
  .article-card--horizontal {
    flex-direction: row;
    border-radius: var(--radius-lg);
  }

  .article-card--horizontal .article-card__thumbnail {
    width: 100px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 0;
  }

  .article-card--horizontal .article-card__body {
    padding: var(--space-4);
  }

  .article-card--horizontal .article-card__title {
    font-size: var(--text-base);
  }


  /* ========================================================================
     10. SINGLE POST / GUIDE
     ======================================================================== */

  /* ---- 10a. ENTRY HEADER ---- */

  .entry-header {
    padding-block: var(--space-12) var(--space-8);
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: var(--space-8);
  }

  .entry-header__category {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--clr-accent-600);
    text-decoration: none;
    margin-bottom: var(--space-4);
  }

  .entry-header__category:hover {
    text-decoration: underline;
  }

  .entry-header__title {
    font-size: var(--text-5xl);
    font-weight: var(--weight-extrabold);
    color: var(--clr-text);
    line-height: var(--leading-tight);
    max-width: 24ch;
    margin-bottom: var(--space-5);
    letter-spacing: var(--tracking-tight);
  }

  .entry-header__lead {
    font-size: var(--text-xl);
    color: var(--clr-text-muted);
    max-width: 56ch;
    line-height: var(--leading-normal);
    margin-bottom: var(--space-6);
  }

  .entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    font-size: var(--text-sm);
    color: var(--clr-text-faint);
  }

  .entry-meta__author {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-medium);
    color: var(--clr-text-muted);
    text-decoration: none;
  }

  .entry-meta__author-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    object-fit: cover;
  }

  .entry-meta__sep {
    color: var(--clr-border-dark);
    user-select: none;
  }

  .entry-meta__updated {
    font-style: italic;
  }

  .entry-header__featured-image {
    margin-top: var(--space-8);
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 2 / 1;
  }

  .entry-header__featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  /* ---- 10b. ENTRY CONTENT typography in section 4 ---- */

  /* ---- 10c. TABLE OF CONTENTS ---- */

  .toc {
    background: var(--clr-primary-50);
    border: 1px solid var(--clr-primary-100);
    border-inline-start: 4px solid var(--clr-primary-800);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-block: var(--space-8);
    max-width: 480px;
  }

  .toc__title {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--clr-primary-800);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .toc__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    counter-reset: toc-counter;
  }

  .toc__list li {
    counter-increment: toc-counter;
  }

  .toc__list a {
    font-size: var(--text-sm);
    color: var(--clr-primary-800);
    text-decoration: none;
    display: flex;
    gap: var(--space-2);
    line-height: var(--leading-snug);
  }

  .toc__list a::before {
    content: counter(toc-counter) '.';
    font-weight: var(--weight-semibold);
    color: var(--clr-text-faint);
    min-width: 1.5em;
    flex-shrink: 0;
  }

  .toc__list a:hover {
    text-decoration: underline;
    color: var(--clr-primary-600);
  }

  /* Nested H3 items */
  .toc__list .toc__sub {
    list-style: none;
    padding-inline-start: var(--space-5);
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .toc__list .toc__sub a::before {
    content: none;
  }

  .toc__list .toc__sub a {
    color: var(--clr-text-muted);
    font-size: var(--text-xs);
  }

  /* Sticky TOC in sidebar on desktop */
  @media (min-width: 960px) {
    .toc--sticky {
      position: sticky;
      top: calc(var(--header-height) + var(--space-6));
      max-height: calc(100vh - var(--header-height) - var(--space-12));
      overflow-y: auto;
    }
  }


  /* ---- 10d. HIGHLIGHT BOX ---- */

  .highlight-box {
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
    border-inline-start: 4px solid;
    margin-block: var(--space-8);
  }

  .highlight-box--info {
    background: var(--clr-primary-50);
    border-color: var(--clr-primary-800);
    color: var(--clr-primary-900);
  }

  .highlight-box--tip {
    background: var(--clr-success-50);
    border-color: var(--clr-success-600);
    color: var(--clr-success-700);
  }

  .highlight-box--warning {
    background: var(--clr-warning-50);
    border-color: var(--clr-warning-600);
    color: #7a4100;
  }

  .highlight-box--alert {
    background: var(--clr-accent-50);
    border-color: var(--clr-accent-600);
    color: var(--clr-accent-700);
  }

  .highlight-box__title {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .highlight-box__body {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  .highlight-box__body a {
    font-weight: var(--weight-semibold);
    text-decoration: underline;
  }


  /* ---- 10e. COMPARISON TABLE ---- */

  .comparison-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-border);
    margin-block: var(--space-8);
  }

  .comparison-table {
    min-width: 600px;
    width: 100%;
    font-size: var(--text-sm);
  }

  .comparison-table thead th {
    background: var(--clr-primary-800);
    color: #fff;
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
  }

  .comparison-table thead th:first-child {
    border-radius: var(--radius-lg) 0 0 0;
  }

  .comparison-table thead th:last-child {
    border-radius: 0 var(--radius-lg) 0 0;
  }

  .comparison-table tbody td {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--clr-border);
    vertical-align: middle;
    color: var(--clr-text);
  }

  .comparison-table tbody tr:last-child td {
    border-bottom: none;
  }

  .comparison-table tbody tr:nth-child(even) td {
    background: var(--clr-bg);
  }

  .comparison-table tbody tr:hover td {
    background: var(--clr-primary-50);
  }

  /* Check / cross mark helpers */
  .comparison-table .mark-yes {
    color: var(--clr-success-600);
    font-weight: var(--weight-bold);
  }

  .comparison-table .mark-no {
    color: var(--clr-text-faint);
  }

  .comparison-table td:first-child {
    font-weight: var(--weight-medium);
    color: var(--clr-text);
  }


  /* ---- 10f. EXPERT / AUTHOR BOX ---- */

  .expert-box {
    display: flex;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--clr-primary-50);
    border: 1px solid var(--clr-primary-100);
    border-radius: var(--radius-xl);
    margin-block: var(--space-10);
    align-items: flex-start;
  }

  .expert-box__avatar {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid var(--clr-primary-800);
  }

  .expert-box__avatar-placeholder {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    background: var(--clr-primary-800);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: #fff;
    font-family: var(--font-heading);
    flex-shrink: 0;
  }

  .expert-box__content {
    flex: 1;
    min-width: 0;
  }

  .expert-box__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--clr-accent-600);
    margin-bottom: var(--space-1);
  }

  .expert-box__name {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--clr-text);
    margin-bottom: var(--space-1);
    font-family: var(--font-heading);
  }

  .expert-box__credentials {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    margin-bottom: var(--space-3);
  }

  .expert-box__bio {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: var(--leading-normal);
  }


  /* ---- 10g. INLINE CTA STRIP ---- */

  .cta-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, var(--clr-primary-50), var(--clr-primary-100));
    border: 1px solid var(--clr-primary-100);
    border-inline-start: 4px solid var(--clr-primary-800);
    border-radius: var(--radius-lg);
    margin-block: var(--space-10);
  }

  .cta-inline__text {
    flex: 1;
    min-width: 200px;
  }

  .cta-inline__heading {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--clr-primary-800);
    margin-bottom: var(--space-1);
    font-family: var(--font-heading);
  }

  .cta-inline__subtext {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
  }

  .cta-inline__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex-shrink: 0;
  }

  /* Floating mobile CTA button */
  .cta-float {
    display: none;
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-4);
    z-index: var(--z-modal);
  }

  @media (max-width: 767px) {
    .cta-float {
      display: block;
    }
  }

  .cta-float__btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: var(--clr-success-600);
    color: #fff;
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: var(--shadow-xl);
    transition: background var(--transition-fast), transform var(--transition-fast);
  }

  .cta-float__btn:hover {
    background: var(--clr-success-700);
    transform: scale(1.04);
    color: #fff;
  }


  /* ========================================================================
     11. ARCHIVE PAGES
     ======================================================================== */

  .archive-header {
    padding-block: var(--space-10) var(--space-8);
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: var(--space-8);
  }

  .archive-header__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--clr-accent-600);
    margin-bottom: var(--space-2);
  }

  .archive-header__title {
    font-size: var(--text-4xl);
    font-weight: var(--weight-extrabold);
    color: var(--clr-text);
    margin-bottom: var(--space-4);
    letter-spacing: var(--tracking-tight);
  }

  .archive-header__desc {
    font-size: var(--text-lg);
    color: var(--clr-text-muted);
    max-width: 60ch;
    line-height: var(--leading-normal);
  }

  .archive-header__meta {
    font-size: var(--text-sm);
    color: var(--clr-text-faint);
    margin-top: var(--space-3);
  }

  /* Sort / filter bar */
  .archive-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--clr-border);
  }

  .archive-bar__count {
    font-size: var(--text-sm);
    color: var(--clr-text-faint);
  }


  /* ========================================================================
     12. SIDEBAR
     ======================================================================== */

  .sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .widget {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
  }

  .widget__title {
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    color: var(--clr-text);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--clr-primary-800);
    font-family: var(--font-heading);
  }

  /* Sidebar CTA widget */
  .sidebar-cta {
    background: linear-gradient(135deg, var(--clr-primary-800), var(--clr-primary-900));
    border: none;
    text-align: center;
  }

  .sidebar-cta .widget__title {
    color: #fff;
    border-bottom-color: var(--clr-accent-600);
  }

  .sidebar-cta__text {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--space-5);
    line-height: var(--leading-normal);
  }

  .sidebar-cta__channels {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Taxonomy tag cloud in sidebar */
  .widget .tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
  }

  .widget .tagcloud a {
    font-size: var(--text-xs) !important; /* Override WP inline style */
    font-weight: var(--weight-medium);
    padding: var(--space-1) var(--space-3);
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    text-decoration: none;
    color: var(--clr-text-muted);
    transition: background var(--transition-fast), border-color var(--transition-fast);
  }

  .widget .tagcloud a:hover {
    background: var(--clr-primary-50);
    border-color: var(--clr-primary-800);
    color: var(--clr-primary-800);
  }


  /* ========================================================================
     13. FOOTER
     ======================================================================== */

  .site-footer {
    background: var(--clr-primary-900);
    color: rgba(255, 255, 255, 0.7);
    padding-top: var(--section-gap);
  }

  .footer-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    padding-bottom: var(--space-12);
  }

  @media (min-width: 640px) {
    .footer-main {
      grid-template-columns: 1fr 1fr;
    }
  }

  @media (min-width: 960px) {
    .footer-main {
      grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }
  }

  .footer-brand__logo {
    display: inline-block;
    margin-bottom: var(--space-4);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: #fff;
  }

  .footer-brand__logo span {
    color: var(--clr-accent-500);
  }

  .footer-brand__desc {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-6);
    max-width: 36ch;
  }

  .footer-social {
    display: flex;
    gap: var(--space-3);
  }

  .footer-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .footer-social__link:hover {
    background: var(--clr-accent-600);
    color: #fff;
  }

  .footer-social__link svg {
    width: 18px;
    height: 18px;
  }

  .footer-col__title {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: #fff;
    margin-bottom: var(--space-4);
  }

  .footer-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .footer-nav a {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .footer-nav a:hover {
    color: #fff;
  }

  /* Footer bottom bar */
  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-block: var(--space-6);
  }

  .footer-bottom__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  .footer-copyright {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.45);
  }

  .footer-legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    list-style: none;
  }

  .footer-legal-nav a {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .footer-legal-nav a:hover {
    color: rgba(255, 255, 255, 0.8);
  }

  /* Editorial disclaimer */
  .footer-disclaimer {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, 0.35);
    line-height: var(--leading-normal);
    max-width: 80ch;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: var(--space-6);
  }


  /* ========================================================================
     14. FORMS & INPUTS
     ======================================================================== */

  .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .form-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--clr-text);
  }

  .form-label--required::after {
    content: ' *';
    color: var(--clr-accent-600);
  }

  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base);
    font-family: var(--font-body);
    color: var(--clr-text);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-dark);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
  }

  .form-input:hover,
  .form-select:hover,
  .form-textarea:hover {
    border-color: var(--clr-primary-800);
  }

  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    border-color: var(--clr-primary-800);
    box-shadow: 0 0 0 3px rgba(26, 60, 110, 0.15);
    outline: none;
  }

  .form-input::placeholder,
  .form-textarea::placeholder {
    color: var(--clr-text-faint);
  }

  .form-textarea {
    min-height: 120px;
    resize: vertical;
  }

  .form-hint {
    font-size: var(--text-xs);
    color: var(--clr-text-faint);
  }

  .form-error {
    font-size: var(--text-xs);
    color: var(--clr-accent-600);
    font-weight: var(--weight-medium);
  }

  .form-input--error,
  .form-select--error,
  .form-textarea--error {
    border-color: var(--clr-accent-600);
  }

  /* Range input (calculator sliders) */
  .form-range {
    width: 100%;
    height: 6px;
    accent-color: var(--clr-primary-800);
    cursor: pointer;
  }

  /* Search form — WordPress default */
  .search-form {
    display: flex;
    gap: var(--space-2);
  }

  .search-form .search-field {
    flex: 1;
  }


  /* ========================================================================
     15. BUTTONS
     ======================================================================== */

  /* Base button */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-family: var(--font-body);
    line-height: 1.25;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition:
      background var(--transition-fast),
      border-color var(--transition-fast),
      color var(--transition-fast),
      box-shadow var(--transition-fast),
      transform var(--transition-fast);
    white-space: nowrap;
    user-select: none;
  }

  .btn:active {
    transform: scale(0.98);
  }

  /* Primary — used for main CTAs */
  .btn--primary {
    background: var(--clr-accent-600);
    color: #fff;
    border-color: var(--clr-accent-600);
  }

  .btn--primary:hover {
    background: var(--clr-accent-700);
    border-color: var(--clr-accent-700);
    box-shadow: var(--shadow-md);
    color: #fff;
  }

  /* Secondary — used for supporting actions */
  .btn--secondary {
    background: var(--clr-primary-800);
    color: #fff;
    border-color: var(--clr-primary-800);
  }

  .btn--secondary:hover {
    background: var(--clr-primary-900);
    border-color: var(--clr-primary-900);
    color: #fff;
  }

  /* Outline — used on dark backgrounds */
  .btn--outline {
    background: transparent;
    color: var(--clr-primary-800);
    border-color: var(--clr-primary-800);
  }

  .btn--outline:hover {
    background: var(--clr-primary-800);
    color: #fff;
  }

  .btn--outline-white {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
  }

  .btn--outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
  }

  /* Ghost — minimal */
  .btn--ghost {
    background: transparent;
    color: var(--clr-primary-800);
    border-color: transparent;
    padding-inline: var(--space-3);
  }

  .btn--ghost:hover {
    background: var(--clr-primary-50);
    color: var(--clr-primary-800);
  }

  /* WhatsApp button */
  .btn--whatsapp {
    background: #25d366;
    color: #fff;
    border-color: #25d366;
  }

  .btn--whatsapp:hover {
    background: #1ebe5d;
    border-color: #1ebe5d;
    color: #fff;
  }

  /* Messenger button */
  .btn--messenger {
    background: #0084ff;
    color: #fff;
    border-color: #0084ff;
  }

  .btn--messenger:hover {
    background: #006edb;
    border-color: #006edb;
    color: #fff;
  }

  /* Email button */
  .btn--email {
    background: var(--clr-text-muted);
    color: #fff;
    border-color: var(--clr-text-muted);
  }

  .btn--email:hover {
    background: var(--clr-text);
    border-color: var(--clr-text);
    color: #fff;
  }

  /* Size variants */
  .btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
  }

  .btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
    border-radius: var(--radius-lg);
  }

  /* Full width */
  .btn--full {
    width: 100%;
  }

  /* Disabled state */
  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  /* Loading state — show spinner via pseudo-element */
  .btn--loading {
    pointer-events: none;
    position: relative;
    color: transparent !important;
  }

  .btn--loading::after {
    content: '';
    position: absolute;
    inset: 50% 50% auto auto;
    transform: translate(50%, -50%);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: var(--radius-full);
    animation: nig-spin 0.7s linear infinite;
  }

  @keyframes nig-spin {
    to { transform: translate(50%, -50%) rotate(360deg); }
  }


  /* ========================================================================
     16. BREADCRUMBS
     ======================================================================== */

  .breadcrumbs {
    padding-block: var(--space-4);
  }

  .breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
  }

  .breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-sm);
  }

  /* Separator */
  .breadcrumbs__item:not(:first-child)::before {
    content: '/';
    color: var(--clr-border-dark);
    user-select: none;
  }

  .breadcrumbs__link {
    color: var(--clr-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
  }

  .breadcrumbs__link:hover {
    color: var(--clr-primary-800);
    text-decoration: underline;
  }

  .breadcrumbs__current {
    color: var(--clr-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }


  /* ========================================================================
     17. PAGINATION
     ======================================================================== */

  .pagination {
    margin-top: var(--space-12);
  }

  .pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    list-style: none;
  }

  .pagination__item a,
  .pagination__item span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-md);
    text-decoration: none;
    border: 1px solid var(--clr-border);
    background: var(--clr-surface);
    color: var(--clr-text);
    transition: background var(--transition-fast), border-color var(--transition-fast);
  }

  .pagination__item a:hover {
    background: var(--clr-primary-50);
    border-color: var(--clr-primary-800);
    color: var(--clr-primary-800);
  }

  .pagination__item.active span,
  .pagination__item .page-numbers.current {
    background: var(--clr-primary-800);
    border-color: var(--clr-primary-800);
    color: #fff;
  }

  /* WordPress default pagination class overrides */
  .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    border-radius: var(--radius-md);
    text-decoration: none;
    border: 1px solid var(--clr-border);
    background: var(--clr-surface);
    color: var(--clr-text);
    transition: background var(--transition-fast), border-color var(--transition-fast);
  }

  a.page-numbers:hover {
    background: var(--clr-primary-50);
    border-color: var(--clr-primary-800);
    color: var(--clr-primary-800);
  }

  .page-numbers.current {
    background: var(--clr-primary-800);
    border-color: var(--clr-primary-800);
    color: #fff;
  }

  .page-numbers.dots {
    border-color: transparent;
    background: transparent;
  }

  .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
  }


  /* ========================================================================
     18. 404 PAGE
     ======================================================================== */

  .error-404 {
    padding-block: var(--section-gap);
    text-align: center;
  }

  .error-404__code {
    font-size: clamp(6rem, 20vw, 12rem);
    font-weight: var(--weight-extrabold);
    font-family: var(--font-heading);
    color: var(--clr-primary-100);
    line-height: 1;
    margin-bottom: var(--space-4);
    user-select: none;
  }

  .error-404__title {
    font-size: var(--text-4xl);
    color: var(--clr-text);
    margin-bottom: var(--space-4);
  }

  .error-404__message {
    font-size: var(--text-lg);
    color: var(--clr-text-muted);
    max-width: 48ch;
    margin-inline: auto;
    margin-bottom: var(--space-8);
  }

  .error-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3);
  }


  /* ========================================================================
     19. SEARCH RESULTS
     ======================================================================== */

  .search-results-header {
    padding-block: var(--space-10) var(--space-6);
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: var(--space-8);
  }

  .search-results-header__term {
    font-size: var(--text-4xl);
    font-weight: var(--weight-extrabold);
    color: var(--clr-text);
    margin-bottom: var(--space-2);
  }

  .search-results-header__term em {
    font-style: normal;
    color: var(--clr-primary-800);
    text-decoration: underline;
    text-decoration-color: var(--clr-accent-600);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
  }

  .search-results-header__count {
    font-size: var(--text-sm);
    color: var(--clr-text-faint);
  }

  .search-no-results {
    text-align: center;
    padding-block: var(--space-16);
  }

  .search-no-results__icon {
    font-size: 4rem;
    margin-bottom: var(--space-4);
    opacity: 0.4;
  }

}


/* ==========================================================================
   20. UTILITY CLASSES
   Single-purpose classes for spacing, display, and alignment.
   Use sparingly in templates — prefer component classes.
   ========================================================================== */

@layer utilities {

  /* Display */
  .d-none    { display: none; }
  .d-block   { display: block; }
  .d-flex    { display: flex; }
  .d-grid    { display: grid; }
  .d-inline  { display: inline; }
  .d-inline-block { display: inline-block; }
  .d-inline-flex  { display: inline-flex; }

  /* Responsive visibility */
  @media (max-width: 639px) {
    .hide-mobile { display: none !important; }
  }

  @media (min-width: 640px) and (max-width: 959px) {
    .hide-tablet { display: none !important; }
  }

  @media (min-width: 960px) {
    .hide-desktop { display: none !important; }
  }

  /* Text alignment */
  .text-left   { text-align: left; }
  .text-center { text-align: center; }
  .text-right  { text-align: right; }

  /* Text size */
  .text-xs   { font-size: var(--text-xs); }
  .text-sm   { font-size: var(--text-sm); }
  .text-base { font-size: var(--text-base); }
  .text-lg   { font-size: var(--text-lg); }
  .text-xl   { font-size: var(--text-xl); }
  .text-2xl  { font-size: var(--text-2xl); }
  .text-3xl  { font-size: var(--text-3xl); }

  /* Text colour */
  .text-primary { color: var(--clr-primary-800); }
  .text-accent  { color: var(--clr-accent-600); }
  .text-success { color: var(--clr-success-600); }
  .text-muted   { color: var(--clr-text-muted); }
  .text-faint   { color: var(--clr-text-faint); }
  .text-white   { color: #fff; }

  /* Font weight */
  .font-normal   { font-weight: var(--weight-normal); }
  .font-medium   { font-weight: var(--weight-medium); }
  .font-semibold { font-weight: var(--weight-semibold); }
  .font-bold     { font-weight: var(--weight-bold); }

  /* Spacing — margin */
  .mt-0 { margin-top: 0; }
  .mt-2 { margin-top: var(--space-2); }
  .mt-4 { margin-top: var(--space-4); }
  .mt-6 { margin-top: var(--space-6); }
  .mt-8 { margin-top: var(--space-8); }
  .mb-0 { margin-bottom: 0; }
  .mb-2 { margin-bottom: var(--space-2); }
  .mb-4 { margin-bottom: var(--space-4); }
  .mb-6 { margin-bottom: var(--space-6); }
  .mb-8 { margin-bottom: var(--space-8); }

  /* Spacing — padding */
  .p-0  { padding: 0; }
  .p-4  { padding: var(--space-4); }
  .p-6  { padding: var(--space-6); }
  .p-8  { padding: var(--space-8); }
  .py-4 { padding-block: var(--space-4); }
  .py-6 { padding-block: var(--space-6); }
  .py-8 { padding-block: var(--space-8); }

  /* Border radius */
  .rounded-sm { border-radius: var(--radius-sm); }
  .rounded    { border-radius: var(--radius-md); }
  .rounded-lg { border-radius: var(--radius-lg); }
  .rounded-xl { border-radius: var(--radius-xl); }
  .rounded-full { border-radius: var(--radius-full); }

  /* Width helpers */
  .w-full  { width: 100%; }
  .max-w-sm  { max-width: var(--container-sm); margin-inline: auto; }
  .max-w-md  { max-width: var(--container-md); margin-inline: auto; }
  .max-w-prose { max-width: 68ch; }

  /* Flex helpers */
  .items-center  { align-items: center; }
  .items-start   { align-items: flex-start; }
  .justify-center  { justify-content: center; }
  .justify-between { justify-content: space-between; }
  .flex-wrap   { flex-wrap: wrap; }
  .flex-col    { flex-direction: column; }
  .flex-1      { flex: 1; }
  .gap-2 { gap: var(--space-2); }
  .gap-3 { gap: var(--space-3); }
  .gap-4 { gap: var(--space-4); }
  .gap-6 { gap: var(--space-6); }

  /* Overflow */
  .overflow-hidden { overflow: hidden; }
  .overflow-auto   { overflow: auto; }

  /* Aspect ratios */
  .aspect-video { aspect-ratio: 16 / 9; }
  .aspect-square { aspect-ratio: 1 / 1; }

  /* Visually hidden (accessible) */
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  /* Divider */
  .divider {
    border: none;
    border-top: 1px solid var(--clr-border);
  }

  /* Tag / badge */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    border-radius: var(--radius-full);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .tag--primary {
    background: var(--clr-primary-50);
    color: var(--clr-primary-800);
    border-color: var(--clr-primary-100);
  }

  .tag--primary:hover {
    background: var(--clr-primary-100);
    color: var(--clr-primary-800);
  }

  .tag--accent {
    background: var(--clr-accent-50);
    color: var(--clr-accent-700);
    border-color: var(--clr-accent-100);
  }

  .tag--success {
    background: var(--clr-success-50);
    color: var(--clr-success-700);
    border-color: var(--clr-success-100);
  }

  .tag--warning {
    background: var(--clr-warning-50);
    color: #7a4100;
    border-color: var(--clr-warning-100);
  }

  /* Notice bar */
  .notice-bar {
    background: var(--clr-primary-800);
    color: #fff;
    text-align: center;
    padding-block: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
  }

  .notice-bar a {
    color: var(--clr-accent-500);
    font-weight: var(--weight-semibold);
    text-decoration: underline;
  }

  /* Sticky positioning */
  .sticky-top {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }

  /* Shadow utilities */
  .shadow-sm { box-shadow: var(--shadow-sm); }
  .shadow-md { box-shadow: var(--shadow-md); }
  .shadow-lg { box-shadow: var(--shadow-lg); }

  /* WordPress alignment classes */
  .alignleft {
    float: left;
    margin-inline-end: var(--space-6);
    margin-bottom: var(--space-4);
    max-width: 50%;
  }

  .alignright {
    float: right;
    margin-inline-start: var(--space-6);
    margin-bottom: var(--space-4);
    max-width: 50%;
  }

  .aligncenter {
    display: block;
    margin-inline: auto;
  }

  .alignwide {
    max-width: var(--container-lg);
    margin-inline: calc(-1 * ((var(--container-lg) - var(--container-md)) / 2));
  }

  .alignfull {
    width: 100vw;
    margin-inline: calc(-50vw + 50%);
    max-width: none;
  }

}


/* ==========================================================================
   21. PRINT STYLES
   Hide non-essential UI; make text readable on paper.
   ========================================================================== */

@media print {

  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .site-header,
  .site-footer,
  .sidebar,
  .nav-primary,
  .mobile-nav,
  .cta-inline,
  .cta-float,
  .quick-actions,
  .pagination,
  .menu-toggle {
    display: none !important;
  }

  .entry-content {
    font-size: 12pt;
    line-height: 1.5;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  p, blockquote {
    orphans: 3;
    widows: 3;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #555 !important;
  }

  /* Don't show URLs for internal links */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: '';
  }

}


/* ==========================================================================
   22. REDUCED MOTION
   Respect user preference for less animation.
   ========================================================================== */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .guide-card:hover .guide-card__image img,
  .article-card:hover .article-card__thumbnail img {
    transform: none;
  }

}