/* Isolation reset — neutralize ONLY the live site's global Custom-CSS-JS leak (7277.css:
   a{color:#7e2f40}, --s-heading:Kanit, --s-body:Prompt, h1 center+gold-border) inside ARAYA
   pages. Must NOT override the design's own section/button colors (that broke the CTA + the
   dark timeline/hero text — they inherited dark ink and vanished). Loaded LAST. */

/* fonts: force the design families over legacy Kanit/Prompt */
.an-page, .an-page * { font-family: var(--an-font-body); }
.an-page h1, .an-page h2, .an-page h3, .an-page h4,
.an-page .an-h2, .an-page .an-hero h1, .an-page [class*="title"], .an-page [class*="Title"] {
  font-family: var(--an-font-display) !important;
}

/* headings: kill the legacy centre + gold underline; keep the design's own colors untouched */
.an-page h1, .an-page h2, .an-page h3, .an-page h4 {
  font-weight: 400; border: 0 !important; text-align: start; padding-bottom: 0; line-height: 1.16;
}
/* headings inherit their SECTION color (dark sections=cream, light=ink), overriding the legacy
   bare-element h1..h6{color:#333/#7e2f40} that was making dark-section titles invisible.
   :where() = 0 specificity, so (.an-page :where(hN)) = (0,1,0): beats legacy element rules but
   loses to the design's own class-scoped heading colors (e.g. .an-cert-card.light h3). */
.an-page :where(h1, h2, h3, h4, h5, h6) { color: inherit; }

/* links: only reset BARE content links (legacy a{color:#7e2f40}); design buttons/nav keep
   their own classed colors (.an-cta, .an-btn-*, .an-nav a, footer links, …). */
.an-page a:not([class]) { color: inherit; text-decoration: none; }

/* base page text color; every section/button with its own color overrides this normally */
.an-page { color: var(--an-ink); }

/* timeline anchor-cards on the maroon section: legacy a{color:#7e2f40} must NEVER win here.
   Lives in reset.css because it loads LAST (cascade-final). */
.an-page .an-timeline a.an-step,
.an-page .an-timeline a.an-step p,
.an-page .an-timeline .an-step p { color: var(--an-cream) !important; }
/* founder 2026-07-13: link color = GOLD (never red) */
.an-page .an-timeline a.an-step h3,
.an-page .an-timeline .an-step h3,
.an-page .an-timeline .an-step-when { color: var(--an-gold-bright) !important; }
.an-page .an-timeline a.an-step:hover h3 { color: var(--an-gold) !important; text-decoration: underline; }

/* systematic: plain links inside DARK (maroon) containers are GOLD — never the legacy red
   (buttons keep their own colors via :not guards) */
.an-page .an-course-fee a:not(.an-course-cta),
.an-page .an-about a:not([class*="an-btn"]),
.an-page .an-acad-onsite a:not([class*="an-btn"]):not(.an-acad-card-cta),
.an-page .an-acad-stats a { color: var(--an-gold-bright) !important; }

/* type boxes: no underline soup (legacy a rules), clean card anatomy — loads last so it wins */
.an-page a.an-typebox, .an-page a.an-typebox * { text-decoration: none !important; }
.an-page a.an-typebox h3 { border-bottom: 1px solid var(--an-cream-tint); padding-bottom: 12px; margin-bottom: 14px; }
.an-page a.an-typebox li { margin: 8px 0; }
.an-page a.an-typebox p:last-of-type { border-top: 1px dashed rgba(198,161,91,.45); padding-top: 12px; margin-top: 14px; }
.an-page a.an-typebox:hover .an-typebox-go { text-decoration: underline !important; }

/* Gold pill buttons inside article prose (e.g. checklist -> master wali article):
 * prose link color/underline must never repaint the button text gold-on-gold. */
.an-prose a.an-btn-gold { color: var(--an-maroon-ink) !important; text-decoration: none !important; display: inline-block; line-height: 1.5; }
.an-prose a.an-btn-gold:hover { color: var(--an-maroon-ink) !important; }

/* ═══ Zero-Overflow Contract (founder 2026-07-14): everything stays in its box ═══ */
/* buttons & pills: allow wrapping, never push past their container */
.an-page .an-btn-gold, .an-page .an-btn-ghost, .an-page .an-btn-ghost-dark,
.an-page .an-menu-wa, .an-page .an-menu-secbtn, .an-page .an-typebox-go,
.an-page .an-nk-card-cta, .an-page .an-sx-cta {
  white-space: normal !important; max-width: 100%; text-align: center; overflow-wrap: anywhere; box-sizing: border-box;
}
/* headings, card titles, chips: long words/URLs break inside the box */
.an-page h1, .an-page h2, .an-page h3, .an-page .an-banner, .an-page .an-kicker,
.an-page .an-trust-flag, .an-page .an-pricedag-name, .an-page .an-menu-name {
  overflow-wrap: break-word; max-width: 100%;
}
/* classic flex/grid overflow root cause */
.an-page .an-menu-name, .an-page .an-pricedag-name, .an-page .an-wali-body,
.an-page .an-svc-body, .an-page .an-nk-card, .an-page .an-menuboard-col { min-width: 0; }
/* journey DAG icon circle: 5px slack seen at 390 */
.an-page .an-journey-ico-wrap { min-width: 0; max-width: 100%; overflow: hidden; }
/* small phones (<=360px): single-column the two grids that burst at 320, soften paddings */
@media (max-width: 360px) {
  .an-page .an-cert-grid, .an-page .an-sx-grid { grid-template-columns: 1fr !important; display: grid; }
  .an-page .an-contact-box { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .an-page .an-contact-ctas { flex-wrap: wrap; }
  .an-page .an-banner { padding: 8px 12px; font-size: 12.5px; }
  .an-page .an-contact .an-wrap, .an-page section.an-contact { padding-left: 12px; padding-right: 12px; }
  .an-page .an-wrap { padding-left: 14px; padding-right: 14px; }
}
/* last-resort guard: clip (NOT hidden) — clip blocks horizontal overflow WITHOUT creating a
 * scroll container, so position:sticky keeps working. !important beats the Simple-Custom-CSS
 * plugin's inline body,html{overflow-x:hidden} that was breaking sticky sitewide (audit 2026-07-14). */
html, body { overflow-x: clip !important; }
/* audit #2: while the push-drawer is open, .an-page's transform re-parents fixed children —
 * the mobilebar would teleport off-screen; just hide it for the open duration. */
html.an-drawer-open .an-mobilebar { display: none !important; }
/* audit #3: mobilebar vanished at exact page bottom (compositor boundary w/ backdrop-filter) */
.an-page .an-mobilebar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: translateZ(0); }
/* 320px: contact box padding too wide */
@media (max-width: 360px) { .an-page .an-contact-box { padding: 18px 14px; gap: 18px; } }