/*
Theme Name: AVJ Journal
Theme URI: https://www.aivisibilityjournal.com/
Author: AI Visibility Journal
Description: Editorial block theme for AI Visibility Journal. Implements AVJ Design Guidelines v1.0 (21.10.2026). Tokens live in theme.json; this file only holds what theme.json cannot express (breakpoints, focus, motion, utilities).
Requires at least: 6.6
Requires PHP: 8.1
Version: 1.1.47.1

License: GPL-2.0-or-later
Text Domain: avj-journal
*/

/* ---------- Tokens not expressible in theme.json (Design Guidelines v1.0 §04–§05, §12) ---------- */
:root {
  --avj-page-pad: var(--wp--custom--space--page-pad);
  --avj-gutter: var(--wp--custom--space--gutter);
  --avj-columns: 4;
  --avj-section-gap: var(--wp--custom--space--section);
  --avj-title-dek: 16px;
  --avj-meta-body: 32px;
  --avj-focus: var(--wp--preset--color--ink);
  /* Shared shell: header / hubs / footer / home — same left edge at 1440/1024/390 */
  --avj-container: var(--wp--custom--measure--container);
  --avj-header-height: 64px;
  /* Spacing scale (hub + shell) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  /* Hub type scale (listing titles = H2, not Article H1 — guideline §03 / 1.1.41) */
  --avj-type-hub-h1: var(--wp--preset--font-size--h-2); /* section hub title 32/28 */
  --avj-type-hub-h2: var(--wp--preset--font-size--h-2); /* group / lead titles — serif ~32px */
  --avj-type-hub-item: 1.125rem; /* river/card — below H3 (24), keep compact news scale */
  --avj-type-hub-letter: 1.5rem; /* glossary letter / compact group */
  --avj-type-hub-intro: var(--wp--preset--font-size--dek);
  --avj-type-hub-meta: var(--wp--preset--font-size--meta);
  --avj-hub-intro-measure: 68ch;
  --avj-thumb-w: 160px;
  --avj-thumb-w-sm: 96px;
}
@media (max-width: 782px) {
  :root { --avj-header-height: 56px; }
}
html {
  scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--avj-header-height) + 16px);
}
@media (min-width: 768px) {
  :root { --avj-columns: 8; }
}
@media (min-width: 1200px) {
  :root { --avj-columns: 12; --avj-title-dek: 24px; --avj-meta-body: 40px; }
}
.wp-site-blocks {
  max-width: calc(var(--avj-container) + 2 * var(--avj-page-pad));
  margin-inline: auto;
  box-sizing: border-box;
}

/* One shell: header / hubs — container measure (hub CSS stays scoped to hubs) */
.avj-site-header,
.avj-main--wide {
  --wp--style--global--content-size: var(--avj-container);
  --wp--style--global--wide-size: var(--avj-container);
  width: 100%;
  max-width: var(--avj-container);
  margin-inline: auto;
  box-sizing: border-box;
}
/* A1: article main uses container measure so TOC + reading grid can lay out (1.1.33 singles) */
body.single .avj-main--article,
.avj-main--article {
  --wp--style--global--content-size: var(--wp--custom--measure--container);
  --wp--style--global--wide-size: var(--wp--custom--measure--container);
}
/* Footer shell = container + page-pad; columns live on .avj-footer__inner (--avj-container). */
.avj-footer {
  --wp--style--global--content-size: var(--avj-container);
  --wp--style--global--wide-size: var(--avj-container);
  width: 100%;
  max-width: calc(var(--avj-container) + 2 * var(--avj-page-pad));
  margin-inline: auto;
  box-sizing: border-box;
}
.avj-section > p,
.avj-section .avj-list-plain,
.avj-dek {
  max-width: min(100%, var(--wp--custom--measure--reading));
}
img, svg, video, iframe, .wp-block-table, table {
  max-width: 100%;
}

/* ---------- Reading rhythm (§03) + A3 / A14 ---------- */
body {
  text-align: left;
  letter-spacing: normal;
  font-kerning: normal;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}
p { margin-block: 0 1em; hyphens: manual; }
ul, ol { padding-left: 1.25em; }
.avj-kicker {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--kicker--tracking);
  color: var(--wp--preset--color--accent);
}
.avj-dek {
  font-size: var(--wp--preset--font-size--dek);
  line-height: var(--wp--custom--line-height--dek);
  color: var(--wp--preset--color--secondary);
  margin-top: var(--avj-title-dek);
  text-wrap: pretty;
  max-width: var(--wp--custom--measure--standfirst);
}
.avj-meta {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--meta);
  line-height: var(--wp--custom--line-height--meta);
  color: var(--wp--preset--color--secondary);
  margin-bottom: var(--avj-meta-body);
  font-variant-numeric: tabular-nums;
}
.has-feature-font-size { line-height: 1.1; }
:lang(vi) h1, :lang(vi) h2, :lang(vi) .has-feature-font-size { line-height: 1.22; }
.avj-num, table, figcaption, .wp-block-table, .avj-toc, .avj-byline, .avj-meta {
  font-variant-numeric: tabular-nums;
}
table td, table th { font-family: var(--wp--preset--font-family--sans); }

/* ---------- Links, buttons, focus (§09, §12) ---------- */
.entry-content a, .wp-block-post-content a {
  text-decoration: underline;
  text-underline-offset: var(--wp--custom--link--underline-offset);
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
  transition: text-decoration-thickness var(--wp--custom--motion--hover) ease, color var(--wp--custom--motion--hover) ease;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--avj-focus);
  outline-offset: 3px;
}
.wp-element-button, .wp-block-button__link, button, input, select, textarea { box-sizing: border-box; }
.wp-element-button, .wp-block-button__link {
  min-height: 44px;
  padding: 0 20px;
  line-height: 1;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--surface);
  background: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--ink);
  border-radius: var(--wp--custom--radius--control);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--ui);
  font-weight: 600;
}
button.wp-element-button { cursor: pointer; }
.wp-block-button.is-style-outline .wp-block-button__link,
.avj-button--secondary {
  background: transparent;
  color: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--control-border);
}
input, select, textarea {
  border: 1px solid var(--wp--preset--color--control-border);
  border-radius: 2px;
  min-height: 44px;
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--ui);
  background: var(--wp--preset--color--surface);
}
[aria-invalid="true"] { border-color: var(--wp--preset--color--error); }
.avj-icon-button { min-width: 44px; min-height: 44px; }
.avj-icon { width: 20px; height: 20px; stroke-width: 1.5; }
:target, [id] {
  scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--avj-header-height) + 16px);
}
h1, h2, h3, h4, h5, h6 {
  scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--avj-header-height) + 16px);
  text-wrap: balance;
}
/* Standalone CTA / arrow links ≥44px (not bare prose paragraph links). */
.avj-cta a,
.avj-list-plain a,
.avj-cite > p > a,
.avj-section[aria-labelledby="standards-heading"] > p > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- Panels, cards, rules (§05, §10) ---------- */
.avj-panel, .avj-evidence {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: var(--wp--custom--radius--panel);
  padding: 24px 28px;
  margin-block: 40px;
}
.avj-panel > :is(h2, h3),
.avj-cite > :is(h2, h3),
.avj-key-takeaways > :is(h2, h3),
.avj-corrections__label {
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--kicker--tracking);
  line-height: var(--wp--custom--line-height--meta);
  margin: 0 0 12px;
  color: var(--wp--preset--color--ink);
}
.avj-card { background: none; box-shadow: none; }
.avj-card img, .wp-block-post-featured-image img { border-radius: 0; }
hr, .wp-block-separator { border: 0; border-top: 1px solid var(--wp--preset--color--rule); }
.alignwide { max-width: var(--wp--custom--measure--breakout); }
.avj-table-scroll { overflow-x: auto; }

/* ---------- A1 Article grid (§05): TOC (left) + reading + balance — 1.1.33 singles ---------- */
body.single .avj-article-grid,
.avj-article-grid {
  width: 100%;
}
@media (min-width: 1200px) {
  body.single .avj-article-grid,
  .avj-article-grid {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, var(--wp--custom--measure--reading)) minmax(0, 200px);
    column-gap: 48px;
    justify-content: center;
  }
  body.single .avj-toc,
  .avj-toc {
    position: sticky;
    top: var(--wp--custom--toc--top);
    align-self: start;
    font-family: var(--wp--preset--font-family--sans);
    font-size: var(--wp--preset--font-size--meta);
  }
  /* Nested in .avj-article (not grid items): break out toward TOC + balance columns */
  body.single .avj-article .alignwide,
  body.single .avj-article .wp-block-table.alignwide,
  .avj-article .alignwide,
  .avj-article .wp-block-table.alignwide {
    width: min(var(--wp--custom--measure--breakout), calc(100vw - 2 * var(--avj-page-pad)));
    max-width: min(var(--wp--custom--measure--breakout), calc(100vw - 2 * var(--avj-page-pad)));
    margin-left: calc(50% - min(var(--wp--custom--measure--breakout), calc(100vw - 2 * var(--avj-page-pad))) / 2);
    margin-right: calc(50% - min(var(--wp--custom--measure--breakout), calc(100vw - 2 * var(--avj-page-pad))) / 2);
  }
}
@media (max-width: 1199px) {
  body.single .avj-article-grid,
  .avj-article-grid {
    display: block;
    width: 100%;
    max-width: min(100%, var(--wp--custom--measure--reading));
    margin-inline: auto;
  }
  body.single .avj-article-grid .avj-article,
  body.single .avj-article-grid .wp-block-post-content,
  .avj-article-grid .avj-article,
  .avj-article-grid .wp-block-post-content {
    max-width: 100%;
  }
  body.single .avj-toc,
  .avj-toc { position: static; }
}

/* ---------- A3 Body prose ---------- */
.wp-block-post-content {
  font-size: var(--wp--preset--font-size--body);
  line-height: var(--wp--custom--line-height--body);
  width: 100%;
  max-width: min(100%, var(--wp--custom--measure--reading));
  text-wrap: pretty;
  hanging-punctuation: first allow-end last;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-optical-sizing: auto;
  font-variant-numeric: lining-nums proportional-nums;
  overflow-wrap: break-word;
}
/* Oldstyle numerals in running prose only (not headings/tables/meta/takeaways). */
.avj-article .wp-block-post-content > p,
.avj-article .wp-block-post-content > ul > li,
.avj-article .wp-block-post-content > ol > li {
  font-variant-numeric: oldstyle-nums proportional-nums;
}
.avj-article .wp-block-post-content > :is(h1, h2, h3, h4, h5, h6),
.avj-key-takeaways,
.avj-key-takeaways li,
.avj-byline,
.avj-meta,
.avj-toc,
.avj-reading-time,
figcaption,
.wp-element-caption,
.avj-figure__source,
.wp-block-table,
.wp-block-table td,
.wp-block-table th {
  font-variant-numeric: lining-nums tabular-nums;
}
.wp-block-post-content > h2 {
  font-size: var(--wp--preset--font-size--h-2);
  line-height: var(--wp--custom--line-height--heading);
  margin: var(--wp--custom--space--article--heading-top) 0 16px;
  text-wrap: balance;
  scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--avj-header-height) + 16px);
}
.wp-block-post-content > h3 {
  font-size: var(--wp--preset--font-size--h-3);
  line-height: var(--wp--custom--line-height--heading);
  margin: 32px 0 12px;
  text-wrap: balance;
  scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--avj-header-height) + 16px);
}
.wp-block-post-content ul,
.wp-block-post-content ol {
  padding-left: 1.25em;
}
.wp-block-post-content li + li { margin-top: 0.4em; }
.wp-block-post-content :is(ul, ol) ::marker {
  color: var(--wp--preset--color--secondary);
}

/* ---------- Motion (§12) + A14 ---------- */
a, button, .wp-element-button {
  transition: color var(--wp--custom--motion--hover) ease,
    background-color var(--wp--custom--motion--hover) ease,
    border-color var(--wp--custom--motion--hover) ease,
    text-decoration-thickness var(--wp--custom--motion--hover) ease;
}
details > :not(summary) {
  transition: opacity var(--wp--custom--motion--disclosure-max) ease;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Logo (Brand Kit v1.0 + §02) — never recolour with filter ---------- */
.avj-logo img,
.avj-logo-link img { display: block; width: auto; max-width: none; }
.avj-logo-link .avj-logo--primary,
.avj-logo--primary { height: 30px; width: auto; aspect-ratio: 2320 / 510; }
.avj-logo-link .avj-logo--compact,
.avj-logo--compact { height: 28px; width: auto; aspect-ratio: 512 / 320; }

/* ---------- Hover ---------- */
.entry-content a:hover, .wp-block-post-content a:hover { text-decoration-thickness: 2px; }
.wp-element-button:hover, .wp-block-button__link:hover {
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--ink);
  border-color: var(--wp--preset--color--ink);
}