/*
Theme Name: ActiveNoon
Theme URI: https://activenoon.com
Author: ActiveNoon
Author URI: https://activenoon.com
Description: A premium, AI-first editorial WordPress theme for ActiveNoon.com. Built for SEO, GEO, AEO, LLMO and EEAT with a clean SaaS-inspired design language. Classic + theme.json hybrid, block-pattern driven, performance and schema focused.
Version: 1.0.0
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: activenoon
Tags: news, blog, editorial, full-site-editing, block-patterns, accessibility-ready, translation-ready, rtl-language-support
*/

/* =========================================================
   0. Design tokens (mirrors theme.json for PHP-rendered UI)
   ========================================================= */
:root {
  --an-primary: #2563EB;
  --an-primary-700: #1D4ED8;
  --an-secondary: #0F172A;
  --an-accent: #06B6D4;
  --an-success: #10B981;
  --an-bg: #FFFFFF;
  --an-surface: #F8FAFC;
  --an-border: #E2E8F0;
  --an-text: #111827;
  --an-muted: #64748B;

  --an-radius: 12px;
  --an-radius-sm: 8px;
  --an-radius-lg: 18px;
  --an-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --an-shadow: 0 4px 16px rgba(15, 23, 42, .08);
  --an-shadow-lg: 0 18px 48px rgba(15, 23, 42, .12);

  --an-ease: cubic-bezier(.16, 1, .3, 1);
  --an-header-h: 68px;

  --an-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --an-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --an-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --an-secondary: #E2E8F0;
  --an-bg: #0B1120;
  --an-surface: #111827;
  --an-border: #1E293B;
  --an-text: #E2E8F0;
  --an-muted: #94A3B8;
  --an-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --an-shadow: 0 4px 16px rgba(0, 0, 0, .45);
  --an-shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);
}

/* =========================================================
   1. Reset & base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--an-font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--an-text);
  background: var(--an-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s var(--an-ease), color .3s var(--an-ease);
}
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--an-primary); text-decoration: none; }
a:hover { color: var(--an-primary-700); }
h1, h2, h3, h4 { color: var(--an-secondary); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; }
p { margin: 0 0 1.25rem; }
:focus-visible { outline: 3px solid var(--an-accent); outline-offset: 2px; border-radius: 4px; }

/* Accessibility helpers */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden; position: absolute; word-wrap: normal !important;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--an-primary); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--an-radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* =========================================================
   2. Layout primitives
   ========================================================= */
.an-container { max-width: 1180px; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.an-container--narrow { max-width: 760px; }
.an-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.an-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.an-section__title { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.an-section__title::after { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--an-primary); margin-top: .6rem; }
.an-section__link { font-weight: 600; font-size: .9375rem; display: inline-flex; align-items: center; gap: .35rem; }
.an-section__link::after { content: "→"; transition: transform .25s var(--an-ease); }
.an-section__link:hover::after { transform: translateX(4px); }

.an-grid { display: grid; gap: 1.75rem; }
.an-grid--3 { grid-template-columns: repeat(3, 1fr); }
.an-grid--4 { grid-template-columns: repeat(4, 1fr); }
.an-grid--feature { grid-template-columns: 1.6fr 1fr; align-items: start; }

/* =========================================================
   3. Header & navigation
   ========================================================= */
.an-progress { position: fixed; inset: 0 auto auto 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--an-primary), var(--an-accent)); z-index: 1000; transition: width .1s linear; }

.an-header {
  position: sticky; top: 0; z-index: 900;
  background: color-mix(in srgb, var(--an-bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--an-border);
}
.an-header__bar { display: flex; align-items: center; gap: 1.5rem; height: var(--an-header-h); }
.an-logo { font-family: var(--an-font-sans); font-weight: 800; font-size: 1.35rem; letter-spacing: -.03em; color: var(--an-secondary); }
.an-logo span { color: var(--an-primary); }
.an-nav { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; }
.an-nav__item { position: relative; }
.an-nav__link {
  display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .8rem; border-radius: var(--an-radius-sm);
  color: var(--an-text); font-weight: 600; font-size: .9375rem; transition: background-color .2s, color .2s;
}
.an-nav__link:hover, .an-nav__item[aria-expanded="true"] > .an-nav__link { background: var(--an-surface); color: var(--an-primary); }

/* Mega menu */
.an-mega {
  position: absolute; top: calc(100% + 10px); inset-inline-start: 50%; transform: translateX(-50%) translateY(8px);
  width: min(680px, 92vw); background: var(--an-bg); border: 1px solid var(--an-border); border-radius: var(--an-radius-lg);
  box-shadow: var(--an-shadow-lg); padding: 1.5rem; opacity: 0; visibility: hidden; transition: opacity .2s var(--an-ease), transform .2s var(--an-ease); z-index: 950;
}
.an-nav__item:hover .an-mega, .an-nav__item:focus-within .an-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.an-mega__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 2rem; }
.an-mega__col h4 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--an-muted); margin-bottom: .65rem; }
.an-mega__link { display: block; padding: .35rem 0; color: var(--an-text); font-weight: 500; font-size: .9375rem; }
.an-mega__link:hover { color: var(--an-primary); }

.an-header__actions { display: flex; align-items: center; gap: .5rem; }
.an-icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--an-radius-sm);
  border: 1px solid var(--an-border); background: var(--an-bg); color: var(--an-text); cursor: pointer; transition: background-color .2s, border-color .2s;
}
.an-icon-btn:hover { background: var(--an-surface); border-color: var(--an-primary); color: var(--an-primary); }
.an-btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: var(--an-radius-sm);
  background: var(--an-primary); color: #fff; font-weight: 600; font-size: .9375rem; border: 0; cursor: pointer; transition: transform .2s var(--an-ease), background-color .2s;
}
.an-btn:hover { background: var(--an-primary-700); color: #fff; transform: translateY(-1px); }
.an-btn--ghost { background: transparent; color: var(--an-text); border: 1px solid var(--an-border); }
.an-btn--ghost:hover { background: var(--an-surface); color: var(--an-primary); }
.an-burger { display: none; }

/* =========================================================
   4. Cards
   ========================================================= */
.an-card {
  background: var(--an-bg); border: 1px solid var(--an-border); border-radius: var(--an-radius-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: transform .3s var(--an-ease), box-shadow .3s var(--an-ease), border-color .3s;
}
.an-card:hover { transform: translateY(-4px); box-shadow: var(--an-shadow-lg); border-color: color-mix(in srgb, var(--an-primary) 35%, var(--an-border)); }
.an-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--an-surface); }
.an-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--an-ease); }
.an-card:hover .an-card__media img { transform: scale(1.04); }
.an-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.an-card__title { font-size: 1.1875rem; line-height: 1.3; margin: 0; }
.an-card__title a { color: var(--an-secondary); }
.an-card__title a:hover { color: var(--an-primary); }
.an-card__excerpt { color: var(--an-muted); font-size: .9375rem; margin: 0; }
.an-card__meta { display: flex; align-items: center; gap: .6rem; font-size: .8125rem; color: var(--an-muted); margin-top: auto; }
.an-card__meta a { color: var(--an-muted); font-weight: 600; }

.an-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--an-primary); background: color-mix(in srgb, var(--an-primary) 10%, transparent);
  padding: .25rem .6rem; border-radius: 999px;
}

/* Hero */
.an-hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.75rem; align-items: stretch; }
.an-hero__main { position: relative; border-radius: var(--an-radius-lg); overflow: hidden; min-height: 440px; color: #fff; display: flex; align-items: flex-end; }
.an-hero__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.an-hero__main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,.05) 0%, rgba(15,23,42,.82) 100%); }
.an-hero__content { position: relative; z-index: 1; padding: 2rem; }
.an-hero__content h2 { color: #fff; font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin-bottom: .5rem; }
.an-hero__content p { color: rgba(255,255,255,.85); margin: 0; }
.an-hero__side { display: grid; gap: 1rem; }
.an-trend { display: flex; gap: .9rem; padding: .5rem 0; border-bottom: 1px solid var(--an-border); }
.an-trend:last-child { border-bottom: 0; }
.an-trend__num { font-family: var(--an-font-mono); font-weight: 700; color: var(--an-primary); font-size: 1.1rem; min-width: 1.6rem; }
.an-trend__title { font-size: .95rem; font-weight: 600; line-height: 1.35; }
.an-trend__title a { color: var(--an-secondary); }
.an-trend__title a:hover { color: var(--an-primary); }

/* Breaking news ticker */
.an-breaking { display: flex; align-items: center; gap: 1rem; background: var(--an-secondary); color: #fff; border-radius: var(--an-radius); padding: .6rem 1rem; overflow: hidden; }
.an-breaking__tag { background: var(--an-primary); color: #fff; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; }
.an-breaking__track { display: flex; gap: 2.5rem; white-space: nowrap; animation: an-marquee 32s linear infinite; }
.an-breaking__track a { color: #fff; font-weight: 500; font-size: .9rem; }
@keyframes an-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================
   5. Article (single)
   ========================================================= */
.an-article { max-width: 760px; margin-inline: auto; }
.an-article__header { margin-bottom: 2rem; }
.an-article__title { font-size: clamp(2rem, 4.5vw, 3rem); margin: .75rem 0; }
.an-article__subtitle { font-size: 1.25rem; color: var(--an-muted); font-weight: 400; line-height: 1.5; margin: 0 0 1.25rem; }
.an-byline { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; padding-block: 1rem; border-block: 1px solid var(--an-border); }
.an-byline__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.an-byline__name { font-weight: 700; color: var(--an-secondary); }
.an-byline__meta { font-size: .85rem; color: var(--an-muted); display: flex; gap: .75rem; flex-wrap: wrap; }
.an-byline__meta time[itemprop="dateModified"] { color: var(--an-success); font-weight: 600; }

.an-figure { margin: 1.75rem 0; }
.an-figure img { width: 100%; border-radius: var(--an-radius); }
.an-figure figcaption { font-size: .85rem; color: var(--an-muted); margin-top: .5rem; text-align: center; }

.an-content { font-size: 1.125rem; line-height: 1.8; }
.an-content > h2 { font-size: 1.75rem; margin-top: 2.5rem; scroll-margin-top: calc(var(--an-header-h) + 1rem); }
.an-content > h3 { font-size: 1.375rem; margin-top: 2rem; scroll-margin-top: calc(var(--an-header-h) + 1rem); }
.an-content img { border-radius: var(--an-radius); }
.an-content blockquote { border-left: 4px solid var(--an-primary); margin: 1.75rem 0; padding: .25rem 0 .25rem 1.25rem; font-size: 1.2rem; font-style: italic; color: var(--an-secondary); }

/* =========================================================
   6. AI / GEO / AEO editorial blocks
   ========================================================= */
.an-block { border: 1px solid var(--an-border); border-radius: var(--an-radius); padding: 1.5rem 1.75rem; margin: 2rem 0; background: var(--an-surface); }
.an-block__label { display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--an-primary); margin-bottom: .85rem; }
.an-block__label svg { width: 16px; height: 16px; }

.an-tldr { border-left: 4px solid var(--an-primary); background: color-mix(in srgb, var(--an-primary) 5%, var(--an-surface)); }
.an-tldr p { margin: 0; font-size: 1.05rem; }

.an-takeaways ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.an-takeaways li { position: relative; padding-left: 1.9rem; }
.an-takeaways li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.25rem; height: 1.25rem; background: var(--an-success); color: #fff; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; }

.an-quickanswer { border-color: var(--an-accent); background: color-mix(in srgb, var(--an-accent) 6%, var(--an-surface)); }
.an-quickanswer .an-block__label { color: var(--an-accent); }

.an-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.an-stat { text-align: center; padding: 1rem; background: var(--an-bg); border: 1px solid var(--an-border); border-radius: var(--an-radius-sm); }
.an-stat__num { font-family: var(--an-font-mono); font-size: 2rem; font-weight: 800; color: var(--an-primary); line-height: 1; }
.an-stat__label { font-size: .8125rem; color: var(--an-muted); margin-top: .35rem; }

.an-expert { display: flex; gap: 1rem; border-left: 4px solid var(--an-accent); }
.an-expert img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.an-expert cite { font-style: normal; font-weight: 700; color: var(--an-secondary); display: block; margin-top: .5rem; }
.an-expert small { color: var(--an-muted); }

/* FAQ (AEO) — native <details> disclosure, no JS required */
.an-faq { margin: 2.5rem 0; }
.an-faq details { border-bottom: 1px solid var(--an-border); }
.an-faq summary { list-style: none; cursor: pointer; padding: 1.1rem 0; font-size: 1.0625rem; font-weight: 700; color: var(--an-secondary); display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.an-faq summary::-webkit-details-marker { display: none; }
.an-faq summary::after { content: "+"; color: var(--an-primary); font-size: 1.5rem; line-height: 1; transition: transform .25s var(--an-ease); }
.an-faq details[open] summary::after { transform: rotate(45deg); }
.an-faq details > :not(summary) { padding-bottom: 1.1rem; color: var(--an-text); }

/* Comparison table */
.an-compare { width: 100%; border-collapse: collapse; margin: 2rem 0; border: 1px solid var(--an-border); border-radius: var(--an-radius); overflow: hidden; }
.an-compare th, .an-compare td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--an-border); font-size: .95rem; }
.an-compare thead th { background: var(--an-surface); color: var(--an-secondary); font-weight: 700; }
.an-compare tbody tr:hover { background: var(--an-surface); }

/* Sources / references (GEO citations) */
.an-sources ol { margin: 0; padding-left: 1.25rem; display: grid; gap: .6rem; }
.an-sources li { font-size: .9rem; color: var(--an-muted); }
.an-sources a { word-break: break-word; }

/* =========================================================
   7. EEAT — author box
   ========================================================= */
.an-authorbox { display: flex; gap: 1.25rem; padding: 1.75rem; border: 1px solid var(--an-border); border-radius: var(--an-radius-lg); background: var(--an-surface); margin: 2.5rem 0; }
.an-authorbox img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.an-authorbox__name { font-size: 1.2rem; margin: 0 0 .15rem; }
.an-authorbox__role { font-size: .85rem; color: var(--an-muted); margin: 0 0 .6rem; }
.an-authorbox__bio { font-size: .95rem; margin: 0 0 .75rem; }
.an-authorbox__creds { display: flex; gap: .5rem; flex-wrap: wrap; }
.an-chip { font-size: .75rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; background: var(--an-bg); border: 1px solid var(--an-border); color: var(--an-muted); }

/* =========================================================
   8. AJAX search
   ========================================================= */
.an-search { position: fixed; inset: 0; z-index: 1100; background: color-mix(in srgb, var(--an-secondary) 55%, transparent); backdrop-filter: blur(4px); display: none; padding-top: 12vh; }
.an-search.is-open { display: block; }
.an-search__panel { max-width: 640px; margin-inline: auto; background: var(--an-bg); border-radius: var(--an-radius-lg); box-shadow: var(--an-shadow-lg); overflow: hidden; }
.an-search__input { width: 100%; border: 0; padding: 1.25rem 1.5rem; font-size: 1.2rem; background: var(--an-bg); color: var(--an-text); }
.an-search__input:focus { outline: none; }
.an-search__results { max-height: 50vh; overflow-y: auto; border-top: 1px solid var(--an-border); }
.an-search__result { display: flex; gap: .9rem; padding: .9rem 1.5rem; border-bottom: 1px solid var(--an-border); }
.an-search__result:hover, .an-search__result.is-active { background: var(--an-surface); }
.an-search__result img { width: 56px; height: 42px; border-radius: 6px; object-fit: cover; }
.an-search__result h4 { font-size: .95rem; margin: 0; }
.an-search__result small { color: var(--an-muted); }
.an-search__hint { padding: .9rem 1.5rem; font-size: .8rem; color: var(--an-muted); }
.an-search__hint strong { color: var(--an-primary); }

/* =========================================================
   9. Footer
   ========================================================= */
.an-footer { background: var(--an-secondary); color: #cbd5e1; margin-top: 4rem; padding-block: 3rem 1.5rem; }
[data-theme="dark"] .an-footer { background: #060912; }
.an-footer a { color: #cbd5e1; }
.an-footer a:hover { color: #fff; }
.an-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2rem; }
.an-footer h4 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; }
.an-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .9rem; }
.an-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2.5rem; padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }

/* Newsletter */
.an-newsletter { background: linear-gradient(135deg, var(--an-primary), var(--an-primary-700)); color: #fff; border-radius: var(--an-radius-lg); padding: clamp(2rem, 5vw, 3rem); text-align: center; }
.an-newsletter h2 { color: #fff; }
.an-newsletter p { color: rgba(255,255,255,.9); max-width: 480px; margin-inline: auto; }
.an-newsletter__form { display: flex; gap: .6rem; max-width: 440px; margin: 1.5rem auto 0; }
.an-newsletter__form input { flex: 1; border: 0; border-radius: var(--an-radius-sm); padding: .8rem 1rem; font-size: 1rem; }
.an-newsletter__form .an-btn { background: var(--an-secondary); }
.an-newsletter__form .an-btn:hover { background: #000; }

/* =========================================================
   10. Pagination, breadcrumbs, misc
   ========================================================= */
.an-breadcrumb { font-size: .85rem; color: var(--an-muted); margin-bottom: 1.5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.an-breadcrumb a { color: var(--an-muted); }
.an-breadcrumb a:hover { color: var(--an-primary); }
.an-breadcrumb [aria-current] { color: var(--an-text); font-weight: 600; }

.an-pagination { display: flex; justify-content: center; gap: .35rem; margin-top: 3rem; }
.an-pagination .page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .5rem; border: 1px solid var(--an-border); border-radius: var(--an-radius-sm); color: var(--an-text); font-weight: 600; }
.an-pagination .page-numbers.current { background: var(--an-primary); color: #fff; border-color: var(--an-primary); }
.an-pagination a.page-numbers:hover { border-color: var(--an-primary); color: var(--an-primary); }

.an-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2.5rem 0; }
.an-postnav a { padding: 1rem 1.25rem; border: 1px solid var(--an-border); border-radius: var(--an-radius); display: block; }
.an-postnav a:hover { border-color: var(--an-primary); }
.an-postnav span { font-size: .75rem; color: var(--an-muted); text-transform: uppercase; letter-spacing: .05em; }
.an-postnav strong { display: block; color: var(--an-secondary); margin-top: .25rem; }
.an-postnav .next { text-align: right; }

.an-toolbar { position: sticky; top: calc(var(--an-header-h) + 1rem); display: flex; flex-direction: column; gap: .5rem; }

/* =========================================================
   11. Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .an-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .an-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .an-nav, .an-newsletter-cta-desktop { display: none; }
  .an-burger { display: inline-grid; }
  .an-hero, .an-grid--feature { grid-template-columns: 1fr; }
  .an-hero__main { min-height: 320px; }
  .an-grid--3 { grid-template-columns: 1fr; }
  .an-nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: .25rem;
    position: absolute; top: 100%; left: 0; right: 0; background: var(--an-bg);
    border-bottom: 1px solid var(--an-border); padding: 1rem; box-shadow: var(--an-shadow);
  }
  .an-nav.is-open .an-mega { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; padding: .5rem 0 .5rem 1rem; width: auto; }
  .an-mega__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .an-grid--4, .an-footer__grid { grid-template-columns: 1fr; }
  .an-newsletter__form { flex-direction: column; }
  .an-postnav { grid-template-columns: 1fr; }
}

/* RTL niceties */
[dir="rtl"] .an-section__link::after { content: "←"; }
[dir="rtl"] .an-takeaways li { padding-left: 0; padding-right: 1.9rem; }
[dir="rtl"] .an-takeaways li::before { left: auto; right: 0; }
[dir="rtl"] .an-tldr, [dir="rtl"] .an-expert { border-left: 0; border-right: 4px solid var(--an-primary); }

/* ============================================================
   Added components: author profile, search results list,
   inline search forms, empty states, 404, prose, page.
   ============================================================ */

/* Prevent body scroll when an overlay / mobile nav is open */
.an-no-scroll { overflow: hidden; }

/* Instant-search results list (AJAX) */
.an-search__list { list-style: none; margin: 0; padding: 0; }
.an-search__item a { display: flex; gap: .9rem; padding: .9rem 1.5rem; border-bottom: 1px solid var(--an-border); text-decoration: none; color: var(--an-text); align-items: center; }
.an-search__item a:hover, .an-search__item.is-active a { background: var(--an-surface); }
.an-search__item img { width: 56px; height: 42px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; }
.an-search__noimg { width: 56px; height: 42px; border-radius: 6px; background: var(--an-surface); flex: 0 0 auto; }
.an-search__meta { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.an-search__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--an-primary); font-weight: 600; }
.an-search__title { font-size: .95rem; font-weight: 600; line-height: 1.3; }
.an-search__excerpt { font-size: .82rem; color: var(--an-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-search__label { padding: .9rem 1.5rem .25rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--an-muted); margin: 0; }
.an-search__chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: .5rem 1.5rem 1.25rem; margin: 0; }
.an-search__empty { padding: 1.5rem; color: var(--an-muted); text-align: center; }

/* Inline search forms (search.php, 404.php) */
.an-search-inline { display: flex; gap: .5rem; max-width: 520px; }
.an-search-inline input { flex: 1; padding: .75rem 1rem; border: 1px solid var(--an-border); border-radius: var(--an-radius); background: var(--an-bg); color: var(--an-text); font-size: 1rem; }
.an-search-inline input:focus { outline: 2px solid var(--an-primary); outline-offset: 1px; }

/* Empty states */
.an-empty { text-align: center; padding: 2.5rem 1rem; color: var(--an-text); }
.an-empty h2 { margin: 0 0 .5rem; }

/* 404 */
.an-404 { text-align: center; padding-block: 3rem 1rem; }
.an-404 .an-search-inline { margin-inline: auto; }

/* Author profile header */
.an-authorprofile { display: flex; gap: 1.5rem; align-items: flex-start; padding: 2rem 0 1.5rem; border-bottom: 1px solid var(--an-border); margin-bottom: 1rem; }
.an-authorprofile__avatar { border-radius: 50%; flex: 0 0 auto; }
.an-authorprofile__name { font-size: clamp(1.6rem, 3vw, 2.25rem); margin: .25rem 0; }
.an-authorprofile__role { color: var(--an-primary); font-weight: 600; margin: 0 0 .5rem; }
.an-authorprofile__bio { color: var(--an-muted); max-width: 60ch; margin: 0 0 .75rem; }
.an-authorprofile__social { display: flex; gap: 1rem; margin-top: .75rem; }
.an-authorprofile__social a { font-size: .9rem; font-weight: 600; }

/* Bookmark / copy active states */
.an-toolbar [data-action].is-active { color: var(--an-primary); }
.an-toolbar [data-action].is-copied { color: var(--an-success); }

/* Static page + prose */
.an-page__head { padding: 1.5rem 0 1rem; }
.an-prose { max-width: var(--an-content, 720px); margin-inline: auto; }
.an-page-links { margin-top: 1.5rem; font-weight: 600; }

@media (max-width: 560px) {
  .an-authorprofile { flex-direction: column; gap: 1rem; }
  .an-search-inline { flex-direction: column; }
}

/* RTL additions for new components */
[dir="rtl"] .an-search__item a { flex-direction: row-reverse; }
[dir="rtl"] .an-authorprofile { flex-direction: row-reverse; }

/* ============================================================
   Single-post optimization: table of contents, scrollable
   tables, and reading polish for editor (raw HTML) content.
   ============================================================ */

/* Table of contents */
.an-toc { max-width: var(--an-content, 720px); margin: 1.75rem auto 2.25rem; background: var(--an-surface); border: 1px solid var(--an-border); border-radius: var(--an-radius); padding: 1rem 1.25rem; }
.an-toc__title { cursor: pointer; font-weight: 700; font-size: .95rem; letter-spacing: .01em; list-style: none; display: flex; align-items: center; gap: .5rem; }
.an-toc__title::-webkit-details-marker { display: none; }
.an-toc__title::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--an-primary); border-bottom: 2px solid var(--an-primary); transform: rotate(45deg); transition: transform .2s ease; }
.an-toc[open] .an-toc__title::before { transform: rotate(225deg); }
.an-toc__list { list-style: none; margin: .85rem 0 0; padding: 0; counter-reset: toc; }
.an-toc__item { margin: .35rem 0; }
.an-toc__item a { color: var(--an-text); text-decoration: none; border-bottom: 1px solid transparent; }
.an-toc__item a:hover { color: var(--an-primary); border-bottom-color: currentColor; }
.an-toc__item--h2 { counter-increment: toc; padding-left: 1.6rem; position: relative; font-weight: 500; }
.an-toc__item--h2::before { content: counter(toc) "."; position: absolute; left: 0; color: var(--an-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.an-toc__item--h3 { padding-left: 2.75rem; font-size: .95rem; color: var(--an-muted); }
.an-toc__item--h3 a { color: var(--an-muted); }

/* Scrollable tables (wraps the comparison table etc.) */
.an-table-wrap { max-width: var(--an-content, 720px); margin: 1.75rem auto; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--an-border); border-radius: var(--an-radius); }
.an-content table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.an-content th, .an-content td { padding: .7rem .9rem; border-bottom: 1px solid var(--an-border); text-align: left; vertical-align: top; }
.an-content thead th { background: var(--an-surface); font-weight: 700; white-space: nowrap; position: sticky; top: 0; }
.an-content tbody tr:nth-child(even) { background: color-mix(in srgb, var(--an-surface) 55%, transparent); }

/* Reading polish for editor content */
.an-content { max-width: var(--an-content, 720px); margin-inline: auto; }
.an-content p { margin: 0 0 1.25rem; }
.an-content > h2:first-child, .an-content > h3:first-child { margin-top: 0; }
.an-content a { color: var(--an-primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.an-content a:hover { text-decoration-thickness: 2px; }
.an-content ul, .an-content ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.an-content li { margin: .4rem 0; }
.an-content figure { margin: 1.75rem auto; }
.an-content figure img { display: block; margin-inline: auto; }
.an-content figcaption { font-size: .85rem; color: var(--an-muted); margin-top: .5rem; text-align: center; }
/* "Source: …" attribution lines often follow images */
.an-content p > em:only-child { color: var(--an-muted); font-size: .85rem; }

@media (max-width: 560px) {
  .an-toc, .an-table-wrap, .an-content { max-width: 100%; }
}