/*
Theme Name: AionWell
Author: AionWell Inc.
Description: Gutenberg-only block theme for AionWell Inc. — AI-native translational medicine. Navy, graphite, ivory, silver, teal and champagne; Manrope headings, Inter body, IBM Plex Mono labels. No page builder.
Version: 2.0.4
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: Proprietary
Text Domain: aionwell-v2
Tags: block-theme, custom-logo, editor-style
*/

/* ============================================================
   AionWell v2.0.4 — design tokens (approved artifact system)
   ============================================================ */
:root {
  --navy: #0D1C2B;
  --graphite: #172532;
  --white: #FFFFFF;
  --ivory: #F7F8F6;
  --silver: #CAD4DA;
  --silver-soft: #E4E9EC;
  --teal: #4B777D;
  --teal-dark: #3A5E63;
  --champagne: #B5A07C;
  --ink: #18242E;
  --secondary: #63717B;
  --line: #D8DEE2;
  --wrap: 1280px;
  --header-wrap: 1400px;
  --gutter: clamp(20px, 5vw, 72px);
  --section-pad: clamp(72px, 8.5vw, 124px);
  --header-h: 74px;
}

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

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17.5px;
  line-height: 1.68;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family: "Manrope", Inter, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.06; font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.14; font-weight: 800; }
h3 { font-size: 1.3rem; line-height: 1.25; font-weight: 700; }
h4 { font-size: 1.1rem; line-height: 1.3; font-weight: 700; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--navy); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: 0.35em; }

blockquote {
  margin: 0 0 1.4em;
  padding-left: 1.25rem;
  border-left: 3px solid var(--champagne);
  color: var(--secondary);
  font-size: 1.15rem;
}

hr, .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* Skip link + focus */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 10px 18px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; color: var(--white); }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

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

/* ---------- Layout ---------- */
.page-content,
.page-hero-inner,
.hero-inner,
.closing-cta-inner,
.single-post-head,
.archive-wrap,
.insights-hub {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.closing-cta { text-align: left; }

section, .wp-block-group { padding-top: 0; padding-bottom: 0; }

.page-section,
.home-section,
.section-pad {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

.content-narrow { max-width: 760px; }

/* WordPress constrained layout centres block children; the theme adds the
   side gutter through the wrappers above. */

/* ---------- Eyebrow / lede ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-dark);
  margin: 0 0 1.1rem;
}
.eyebrow::before {
  content: "";
  flex: 0 0 26px;
  height: 2px;
  background: var(--champagne);
}
.eyebrow-centred { justify-content: center; }

.lede {
  font-size: clamp(1.08rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  color: var(--secondary);
  max-width: 58ch;
}
.lede-centred { margin-left: auto; margin-right: auto; }

/* ---------- Buttons (rectangular) ---------- */
.wp-block-button__link,
.btn,
button,
input[type="submit"] {
  border-radius: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  padding: 14px 26px;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.wp-block-button__link:hover,
.btn:hover { transform: translateY(-1px); }

.btn-primary,
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--navy);
  color: var(--white);
  border: 1px solid var(--navy);
}
.btn-primary:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--graphite);
  border-color: var(--graphite);
  color: var(--white);
}
.btn-primary::after { content: " \2192"; }

.btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
}
.btn-outline:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--navy);
  color: var(--white);
}

.btn-light {
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--white);
}
.btn-light:hover { background: var(--silver-soft); border-color: var(--silver-soft); color: var(--navy); }
.btn-light::after { content: " \2192"; }

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); color: var(--white); }

.btn-sm { padding: 11px 20px; font-size: 0.95rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-h);
  background: rgba(247, 248, 246, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding-top: 0;
  padding-bottom: 0;
}
.site-header.is-scrolled { border-bottom-color: var(--silver); }
.site-header-inner {
  max-width: var(--header-wrap);
  margin: 0 auto;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 var(--gutter);
}

.site-brand { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
.site-brand img,
.custom-logo { height: 34px; width: auto; }
.site-brand .custom-logo-link { display: flex; align-items: center; }

.aionwell-primary-nav { flex: 1 1 auto; }
.aionwell-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.aionwell-nav-list > li { margin: 0; flex-shrink: 0; }
.aionwell-nav-list a {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 11px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border-radius: 999px;
  line-height: 1.3;
}
.aionwell-nav-list a:hover { background: var(--silver-soft); color: var(--navy); }
/* Top-level nav labels never wrap: a label on two lines stretched the header
   past its 74px height (observed ~85px at desktop widths, with the label
   wrapping inside the header container). The spacing above (24px inner gap,
   1400px header wrap, 11px link padding, 24px header gutters below 1240px)
   is sized so the six top-level items + logo + CTA fit on one line. */
.aionwell-nav-list > li > a { white-space: nowrap; }
/* Current page: restrained — navy text with a champagne underline, never a
   filled pill. (A filled pill over a two-line link rendered as a giant oval
   while the submenu was in flow; see the dropdown rules below.) */
.aionwell-nav-list > li > a[aria-current="page"] {
  background: transparent;
  color: var(--navy);
  box-shadow: inset 0 -2px 0 var(--champagne);
}
.aionwell-nav-list > li > a[aria-current="page"]:hover { background: var(--silver-soft); }
.menu-item-desc {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--secondary);
  letter-spacing: 0.01em;
}

/* Desktop dropdown (Solutions submenu). WordPress renders the submenu as
   <ul class="sub-menu"> (the walker overrides start_el only, so start_lvl
   is the WP default). It MUST be taken out of flow and hidden until
   hover/focus: with no .sub-menu rules at all, the nested list rendered as
   a static vertical list inside the header, stretching the header to
   ~470px and blowing the parent <li> — and the current link's navy pill —
   out to a giant oval. Pure CSS hover + :focus-within: no JS is involved,
   and keyboard tabbing keeps the menu open via :focus-within. */
.aionwell-nav-list > li.menu-item-has-children { position: relative; }
.aionwell-nav-list .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 110;
  min-width: 320px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(13, 28, 43, 0.16);
}
.aionwell-nav-list > li.menu-item-has-children:hover > .sub-menu,
.aionwell-nav-list > li.menu-item-has-children:focus-within > .sub-menu { display: block; }
.aionwell-nav-list .sub-menu li { margin: 0; }
.aionwell-nav-list .sub-menu a {
  display: flex;
  width: 100%;
  border-radius: 0;
  padding: 10px 18px;
}
.aionwell-nav-list .sub-menu a:hover { background: var(--silver-soft); color: var(--navy); }
.aionwell-nav-list .sub-menu a[aria-current="page"] { background: var(--navy); color: var(--white); }
.aionwell-nav-list .sub-menu a[aria-current="page"] .menu-item-desc { color: var(--silver); }

.header-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: 1.35rem;
  line-height: 1;
}
.menu-btn:hover { border-color: var(--navy); transform: none; }
.menu-btn[aria-expanded="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }

/* Mobile nav (below 1060px) */
.mobile-nav {
  display: none;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
  padding: 12px var(--gutter) 22px;
}
.mobile-nav.is-open { display: block; }
.mobile-nav-list { list-style: none; margin: 0 0 16px; padding: 0; }
.mobile-nav-list li { margin: 0; border-top: 1px solid var(--line); }
.mobile-nav-list li:first-child { border-top: 0; }
.mobile-nav-list a {
  display: block;
  padding: 13px 2px;
  color: var(--ink);
  font-weight: 600;
  font-size: 1.08rem;
  text-decoration: none;
}
.mobile-nav-list a:hover { color: var(--teal-dark); }
.mobile-nav-list a[aria-current="page"] { color: var(--teal-dark); }
.mobile-nav .menu-item-desc { display: block; font-weight: 400; }
.mobile-nav-cta { display: inline-block; }

/* ---------- Hero / page hero ---------- */
.hero,
.site-hero {
  background: linear-gradient(180deg, var(--white) 0%, var(--ivory) 100%);
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}
.hero h1 { max-width: 16ch; }
.page-hero {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(44px, 5.5vw, 72px);
}
.page-hero h1 { max-width: 16ch; margin-bottom: 0; }
.page-hero .lede { margin-top: 1.2rem; }

/* ---------- Dark sections / closing CTA ---------- */
.dark-section,
.closing-cta {
  background: var(--navy);
  color: #D9E1E7;
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}
.dark-section h1, .dark-section h2, .dark-section h3,
.closing-cta h1, .closing-cta h2, .closing-cta h3 { color: var(--white); }
.dark-section .lede, .closing-cta .lede { color: #B9C6CF; }
.dark-section .eyebrow, .closing-cta .eyebrow { color: var(--silver); }
.dark-section a:not(.btn):not(.wp-block-button__link) { color: var(--silver); }
.closing-cta-inner { max-width: 760px; }

/* ---------- Cards / rows: borders, no shadows, no radius ---------- */
.card-grid { display: grid; gap: 0; }
.card, .post-card, .draft-card, .row-item {
  border-top: 1px solid var(--line);
  padding: 28px 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.card:first-child, .post-card:first-child, .draft-card:first-child { border-top-width: 2px; border-top-color: var(--navy); }
.card h3, .post-card h3, .draft-card h3 { margin-bottom: 0.4em; }
.card h3 a, .post-card h3 a, .draft-card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover, .post-card h3 a:hover, .draft-card h3 a:hover { color: var(--teal-dark); text-decoration: underline; }

/* Category pills (999px only) */
.cat-pill,
.pill {
  display: inline-block;
  border: 1px solid var(--silver);
  border-radius: 999px;
  padding: 6px 14px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-dark);
  background: var(--white);
  margin: 0 8px 8px 0;
}
.pill-row { margin: 1.6rem 0 0.4rem; }

/* Tick list */
.tick-list { list-style: none; padding: 0; margin: 0 0 1.4em; }
.tick-list li { position: relative; padding-left: 26px; margin-bottom: 0.7em; }
.tick-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
}

/* Note line (champagne left border) */
.note-line {
  border-left: 3px solid var(--champagne);
  padding: 4px 0 4px 18px;
  color: var(--secondary);
  font-size: 1rem;
  max-width: 760px;
}

/* Draft label */
.draft-label {
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #7A5E2E;
  background: rgba(181, 160, 124, 0.16);
  border: 1px solid var(--champagne);
  padding: 5px 10px;
  margin-bottom: 0.9rem;
}

/* ---------- Evidence path pattern ---------- */
.evidence-path { margin: 2rem 0; }
.evidence-path svg { width: 100%; height: auto; }
.evidence-path-caption {
  font-size: 0.85rem;
  color: var(--secondary);
  margin-top: 0.8rem;
}
.evidence-path-pulse { animation: aionwell-pulse 3.2s ease-in-out infinite; }
.evidence-path-pulse:nth-of-type(2n) { animation-delay: 0.8s; }
.evidence-path-pulse:nth-of-type(3n) { animation-delay: 1.6s; }
@keyframes aionwell-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.evidence-path-flow { stroke-dasharray: 6 8; animation: aionwell-flow 3.2s linear infinite; }
@keyframes aionwell-flow {
  to { stroke-dashoffset: -28; }
}

/* ---------- Post lists (Insights hub / archives) ---------- */
.wp-block-query .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.wp-block-query .wp-block-post-template > li {
  border-top: 1px solid var(--line);
  padding: 28px 0;
  margin: 0;
}
.wp-block-query .wp-block-post-template > li:first-child { border-top-width: 2px; border-top-color: var(--navy); }
.wp-block-post-title { margin-bottom: 0.35em; }
.wp-block-post-title a { color: var(--ink); text-decoration: none; }
.wp-block-post-title a:hover { color: var(--teal-dark); text-decoration: underline; }
.wp-block-post-date,
.wp-block-post-terms,
.post-meta {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
}
.wp-block-post-date a, .wp-block-post-terms a { color: var(--teal-dark); text-decoration: none; }
.wp-block-post-excerpt { color: var(--secondary); max-width: 58ch; }

.post-standfirst { font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.65; color: var(--secondary); max-width: 58ch; }

/* ---------- Single post ---------- */
.single-post-head { padding-top: clamp(56px, 7vw, 96px); padding-bottom: 24px; }
.single-post-head h1 { max-width: 16ch; }
.entry-content { max-width: 760px; margin: 0 auto; }
.entry-content > * { margin-left: auto; margin-right: auto; }

/* ---------- Footer (navy) ---------- */
.site-footer {
  background: var(--navy);
  color: #D9E1E7;
  padding-top: clamp(56px, 6vw, 84px);
  padding-bottom: 36px;
}
.site-footer-inner { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.footer-brand { margin-bottom: 40px; }
.footer-brand img { height: 40px; width: auto; }
.footer-brand-name {
  font-family: "Manrope", Inter, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--white);
  margin: 18px 0 6px;
}
.footer-brand-tag {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
  margin: 0 0 14px;
}
.footer-brand-desc { color: #B9C6CF; max-width: 52ch; margin: 0; }

.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.footer-column h2 {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--silver);
  margin: 0 0 16px;
}
.footer-column ul { list-style: none; margin: 0; padding: 0; }
.footer-column li { margin-bottom: 9px; }
.footer-column a { color: #D9E1E7; text-decoration: none; font-size: 0.98rem; }
.footer-column a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.footer-column a[aria-current="page"] { color: var(--white); text-decoration: underline; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 24px;
  font-size: 0.88rem;
  color: #B9C6CF;
}
.footer-base p { margin: 0; }

/* ---------- Forms (contact page content) ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], textarea, select {
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--silver);
  border-radius: 0;
  padding: 12px 14px;
  width: 100%;
}
input:focus, textarea:focus, select:focus { border-color: var(--teal-dark); outline: 2px solid var(--teal); outline-offset: 1px; }
label { font-weight: 600; font-size: 0.95rem; display: block; margin-bottom: 6px; }
.wp-block-search__input { width: auto; }

/* ---------- Scroll entrances (JS-gated; content visible without JS) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Breakpoints ---------- */
/* Mid-desktop header: tighten the header gutters so the six top-level nav
   items + logo + CTA still fit on one line down to the 1060px breakpoint,
   where the desktop nav is replaced by the hamburger. */
@media (max-width: 1240px) {
  .site-header-inner { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 1060px) {
  .aionwell-primary-nav, .header-actions .btn-primary { display: none; }
  .menu-btn { display: inline-flex; }
  .site-header-inner { gap: 16px; }
  .header-actions { margin-left: auto; }
}

@media (max-width: 900px) {
  .hero, .site-hero { padding-top: clamp(56px, 9vw, 80px); }
  .footer-columns { grid-template-columns: 1fr 1fr; }
  .card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .site-header-inner { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 820px) {
  .footer-columns { gap: 24px; }
}

@media (max-width: 760px) {
  .footer-columns { grid-template-columns: 1fr; }
  .footer-base { flex-direction: column; gap: 6px; }
}

@media (max-width: 700px) {
  h1 { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .eyebrow { letter-spacing: 0.18em; }
}

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .wp-block-button__link, .btn { padding: 13px 20px; }
  .site-brand img, .custom-logo { height: 30px; }
}

@media (max-width: 540px) {
  .mobile-nav { padding-left: 20px; padding-right: 20px; }
  .pill-row .pill { margin-bottom: 6px; }
}

/* ---------- Reduced motion: disable all animation ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .evidence-path-pulse, .evidence-path-flow { animation: none; }
}