/*
 * ANANFX Academy — Global Mobile Typography System v3.0 — self-hosted 100% single spec
 * Single source of truth for mobile typography only (<=767px).
 * Desktop/tablet >=768px are intentionally untouched.
 */
@media (max-width: 767px) {
  @font-face {
    font-family: "Noto Sans Thai";
    src: url("../fonts/noto-sans-thai/noto-sans-thai-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }

  @font-face {
    font-family: "Noto Sans Thai";
    src: url("../fonts/noto-sans-thai/noto-sans-thai-semibold.woff2") format("woff2");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
  }

  @font-face {
    font-family: "Noto Sans Thai";
    src: url("../fonts/noto-sans-thai/noto-sans-thai-bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
  }

  @font-face {
    font-family: "Noto Sans Thai";
    src: url("../fonts/noto-sans-thai/noto-sans-thai-extrabold.woff2") format("woff2");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
  }

  :root {
    --anan-font-family: "Noto Sans Thai", sans-serif;
    --anan-type-page-title: 34px;
    --anan-type-section-title: 28px;
    --anan-type-card-title: 22px;
    --anan-type-card-subtitle: 20px;
    --anan-type-body: 17px;
    --anan-type-control: 17px;
    --anan-type-secondary: 15px;
    --anan-type-detail: 13px;
    --anan-type-caption: 12px;
    --anan-type-badge: 11px;
    --anan-type-result: 28px;

    /* Compatibility aliases: declared, documented and mapped to canonical roles. */
    --anan-type-large-title: var(--anan-type-page-title);
    --anan-type-title-1: var(--anan-type-section-title);
    --anan-type-title-2: var(--anan-type-card-title);
    --anan-type-title-3: var(--anan-type-card-subtitle);
    --anan-type-headline: var(--anan-type-control);
    --anan-type-subheadline: var(--anan-type-secondary);
    --anan-type-callout: var(--anan-type-body);
    --anan-type-footnote: var(--anan-type-detail);
    --anan-type-caption-small: var(--anan-type-badge);
  }

  body[data-page-key] {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-body);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Every DOM text carrier, including hidden and JavaScript-created nodes, inherits one real web font. */
  body[data-page-key],
  body[data-page-key] * {
    font-family: var(--anan-font-family) !important;
    font-synthesis: none;
  }

  body[data-page-key] :where(svg text, svg tspan) {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-badge) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    font-synthesis: none;
  }

  /* Pseudo-element text inherits its owning component. Empty decorative shapes are unaffected. */
  body[data-page-key] *::before,
  body[data-page-key] *::after {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }

  /* Safe default for ordinary copy. Specific semantic roles below override it. */
  body[data-page-key] :where(p, blockquote, li, dt, dd, cite) {
    font-size: var(--anan-type-body) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
  }

  /* Generic semantic fallback roles for text not covered by a page-specific component class. */
  body[data-page-key] :where(h4, h5, h6) {
    font-size: var(--anan-type-card-subtitle) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
  }

  body[data-page-key] :where(
    .route-toast, .toast, [role="alert"], [aria-live],
    .modal__message, .notification-message, .empty-state, .error-message
  ) {
    font-size: var(--anan-type-body) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
  }

  body[data-page-key] :where(
    .ananfx-mobile-drawer__profile-copy strong,
    .ananfx-mobile-drawer__avatar > span
  ) {
    font-size: var(--anan-type-card-title) !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    letter-spacing: -0.015em !important;
  }

  body[data-page-key] .ananfx-mobile-drawer__profile-copy > span {
    font-size: var(--anan-type-detail) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }

  /* Page title */
  body[data-page-key] :where(h1, .page-hero-title, .page-title, .hero-title, .about-hero-heading),
  body[data-page-key="home"] #heroTitle,
  body[data-page-key="about"] #aboutHeroTitle,
  body[data-page-key="about"] #aboutHeroTitle > span {
    font-size: var(--anan-type-page-title) !important;
    font-weight: 800 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.025em !important;
  }

  /* Section title */
  body[data-page-key] :where(main, .mobile-only, .about-page__main) section h2,
  body[data-page-key] :where(.section-title, .about-section-title, .about-founder-section-title),
  body[data-page-key] :where(.bottom-panel h2, .panel-header h2) {
    font-size: var(--anan-type-section-title) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
  }

  /* Card title */
  body[data-page-key] :where(h3, article h3, .card-title, .card__title, .item-title),
  body[data-page-key="home"] :where(
    .latest-article-card__title, .latest-event-card__title,
    .student-success-card__identity h3, .free-resource-card h3,
    .premium-resource-card h3, .learning-path-card h3,
    .czs-framework-card h3, .trust-card h3
  ),
  body[data-page-key="about"] :where(
    .about-founder-name, .about-founder-name-v021,
    .about-vision-mission-title, .about-teaching-item h3,
    .about-teaching-card h3, .about-czs-title, .about-large-card h3
  ) {
    font-size: var(--anan-type-card-title) !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    letter-spacing: -0.015em !important;
  }

  /* Card subtitle */
  body[data-page-key] :where(.card-subtitle, .card__subtitle, .item-subtitle),
  body[data-page-key="about"] :where(
    .about-czs-subtitle, .about-founder-role, .about-founder-role-v021
  ) {
    font-size: var(--anan-type-card-subtitle) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
  }

  /* Buttons, primary navigation, command links and eyebrow text */
  body[data-page-key] :where(
    .hero-eyebrow, .about-hero-eyebrow, .about-scene-01-eyebrow,
    .story-card__eyebrow, .eyebrow, .panel-kicker,
    .site-footer-accordion__toggle, .site-footer-link,
    .site-footer-social, .site-footer-contact__copy strong
  ),
  body[data-page-key] :where(
    button:not(.icon-button):not(.learning-path-card__chevron),
    a, a.button, a.about-button, [class*="__cta"], [class*="__action"]
  ),
  body[data-page-key] :where(
    .ananfx-mobile-drawer__close,
    .ananfx-mobile-drawer__direct,
    .ananfx-mobile-drawer__group-toggle,
    .ananfx-mobile-drawer__account-button
  ) {
    font-size: var(--anan-type-control) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  /* Body copy in every card and section */
  body[data-page-key] :where(
    .hero-description, .about-hero-description, .about-hero-text,
    .section-description, .about-section-description,
    .story-card__description, .czs-framework-scene__description,
    .start-learning-scene__description, .site-footer-scene__description,
    .body-copy, .body-text, .about-founder-story, .about-founder-story-v021,
    .about-vision-mission-text, .about-teaching-item p,
    .about-teaching-card p, .about-czs-text,
    .about-final-cta__banner > p,
    .student-success-card__review,
    .student-success-card__review p,
    .free-resource-card p, .premium-resource-card p,
    .czs-framework-card p
  ) {
    font-size: var(--anan-type-body) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
  }

  /* Secondary text */
  body[data-page-key] :where(
    .secondary-copy, .metadata, .meta,
    .latest-article-card__category,
    .site-footer-social__label,
    .site-footer-contact__copy > span,
    .trust-item > span,
    .student-success-card__result > span,
    .about-stat-card span:last-child,
    .about-founder-stat-label-v021,
    .form-label
  ) {
    font-size: var(--anan-type-secondary) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
  }

  /* Dates, times, levels and supporting details */
  body[data-page-key] :where(
    .latest-article-card__date,
    .latest-event-card__month,
    .latest-event-card__time,
    .latest-event-card__type,
    .latest-event-card__detail,
    .learning-path-card__level,
    .student-success-card__badge,
    .student-success-card__result small,
    .student-success-scene__note,
    .footnote, .helper-text, small
  ) {
    font-size: var(--anan-type-detail) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }

  /* Caption and legal */
  body[data-page-key] :where(
    .caption, figcaption, .site-footer-scene__copyright,
    .about-desktop-footer__copyright, .legal-copy,
    .bottom-navigation__label, .bottom-nav-label
  ) {
    font-size: var(--anan-type-caption) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
  }

  /* Compact badges and sequence markers */
  body[data-page-key] :where(
    .notification-badge, .bottom-navigation__badge, .bottom-nav-badge,
    .learning-path-step__marker, .student-success-step__marker
  ),
  body[data-page-key] :where(
    .learning-path-step__marker span, .student-success-step__marker span
  ) {
    font-size: var(--anan-type-badge) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  /* Key results, percentages and statistics */
  body[data-page-key] :where(
    .stat-number, .trust-item strong,
    .about-stat-card strong, .about-founder-stat-number-v021,
    .student-success-card__result strong, .latest-event-card__day
  ) {
    font-size: var(--anan-type-result) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
  }

  /* Prominent single-letter framework markers */
  body[data-page-key] :where(.czs-framework-card__badge, .about-czs-letter) {
    font-size: var(--anan-type-result) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  /* Drawer secondary navigation */
  body[data-page-key] .ananfx-mobile-drawer__sub-link {
    font-size: var(--anan-type-secondary) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
  }

  /* Form controls */
  body[data-page-key] :where(input, textarea, select, option, label, .search-field),
  body[data-page-key] :where(input, textarea)::placeholder {
    font-size: var(--anan-type-body) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
  }

  /* Trademark is a fixed compact typographic mark, never a fractional size. */
  body[data-page-key] :where(.anan-trademark, .about-czs-trademark, .about-czs-button-trademark) {
    display: inline !important;
    font-size: var(--anan-type-badge) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    vertical-align: super !important;
  }

  /* Decorative quote mark uses an allowed display size. */
  body[data-page-key] .student-success-card__review > span[aria-hidden="true"] {
    font-size: var(--anan-type-result) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
  }


  /* Hidden desktop-only markup still exists in the mobile DOM and is audited as text. */
  body[data-page-key="about"] :where(
    .about-desktop-footer__contact > span
  ) {
    font-size: var(--anan-type-detail) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }

  body[data-page-key="about"] :where(
    .about-founder-placeholder__mark,
    .about-founder-placeholder-mark-v021
  ) {
    font-size: var(--anan-type-result) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  body[data-page-key="about"] :where(
    .about-founder-placeholder__label,
    .about-founder-placeholder-label-v021
  ) {
    font-size: var(--anan-type-detail) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }

  body[data-page-key="about"] :where(
    .about-stat-card strong,
    .about-founder-stat-number-v021
  ) {
    font-size: var(--anan-type-result) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
  }

  body[data-page-key="about"] :where(
    .about-stat-card > span:last-child,
    .about-founder-stat-label-v021
  ) {
    font-size: var(--anan-type-secondary) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
  }

  /* Text overflow safety: solve width/wrapping, never by shrinking type. */
  body[data-page-key] :where(
    h1, h2, h3, h4, h5, h6, p, span, strong, small,
    label, a, button, li, time, blockquote
  ) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* High-specificity consolidation for legacy About mobile rules. */
  html body[data-page-key="about"] #pageTop #aboutFounder .about-founder-section-title,
  html body[data-page-key="about"] #pageTop #aboutVisionMission .about-section-title,
  html body[data-page-key="about"] #pageTop #aboutTeaching .about-section-title,
  html body[data-page-key="about"] #pageTop #aboutCzs .about-section-title,
  html body[data-page-key="about"] #pageTop #aboutFinalCta h2 {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-section-title) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
  }

  html body[data-page-key="about"] #pageTop #aboutFounder :where(.about-founder-name-v021, .about-founder-name),
  html body[data-page-key="about"] #pageTop #aboutVisionMission .about-vision-mission-title,
  html body[data-page-key="about"] #pageTop #aboutTeaching h3,
  html body[data-page-key="about"] #pageTop #aboutCzs .about-czs-title {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-card-title) !important;
    font-weight: 700 !important;
    line-height: 1.28 !important;
    letter-spacing: -0.015em !important;
  }

  html body[data-page-key="about"] #pageTop #aboutFounder :where(.about-founder-role-v021, .about-founder-role),
  html body[data-page-key="about"] #pageTop #aboutCzs .about-czs-subtitle {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-card-subtitle) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -0.01em !important;
  }

  html body[data-page-key="about"] #pageTop #aboutFounder :where(.about-founder-story-v021 p, .about-founder-story p),
  html body[data-page-key="about"] #pageTop #aboutVisionMission .about-vision-mission-text,
  html body[data-page-key="about"] #pageTop #aboutTeaching p,
  html body[data-page-key="about"] #pageTop #aboutCzs :where(.about-section-description, .about-czs-text, .about-czs-zone-copy-mobile),
  html body[data-page-key="about"] #pageTop #aboutFinalCta p,
  html body[data-page-key="about"] #pageTop #siteFooter .site-footer-scene__description {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-body) !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page-key="about"] #pageTop #aboutFounder .about-founder-stat-number-v021 {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-result) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
  }

  html body[data-page-key="about"] #pageTop #aboutFounder .about-founder-stat-label-v021 {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-secondary) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page-key="about"] #pageTop #aboutFounder .about-founder-placeholder-mark-v021,
  html body[data-page-key="about"] #pageTop #aboutCzs .about-czs-letter {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-result) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page-key="about"] #pageTop #aboutFounder .about-founder-placeholder-label-v021 {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-detail) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page-key="about"] #pageTop #siteFooter .site-footer-contact__copy > span {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-secondary) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page-key="about"] #pageTop #siteFooter .site-footer-scene__copyright {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-caption) !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page-key] #pageTop .hero-eyebrow > span {
    font-weight: 600 !important;
  }

  html body[data-page-key="about"] #pageTop #aboutCzs :where(.about-czs-trademark, .about-czs-button-trademark, .anan-trademark) {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-badge) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    vertical-align: super !important;
  }

  html body[data-page-key="about"] #pageTop #aboutCzs #aboutCzsTitle .about-czs-trademark,
  html body[data-page-key="about"] #pageTop #aboutCzs .about-button .about-czs-button-trademark {
    font-size: var(--anan-type-badge) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page-key="about"] #pageTop #aboutFinalCta #aboutFinalCtaTitle {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-section-title) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
  }

  html body[data-page-key="about"] #pageTop :where(.about-hero-eyebrow, .about-scene-01-eyebrow),
  html body[data-page-key="about"] #pageTop .about-button,
  html body[data-page-key="about"] #pageTop .about-button > span {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-control) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page-key] #pageTop #siteFooter .site-footer-accordion__toggle,
  html body[data-page-key] #pageTop #siteFooter .site-footer-accordion__toggle > span,
  html body[data-page-key] #pageTop #siteFooter .site-footer-contact__copy strong,
  html body[data-page-key] #pageTop :where(#searchPanel, #notificationPanel) strong {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-control) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page-key] #pageTop #siteFooter .site-footer-social > span:last-child {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-secondary) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page-key="about"] #pageTop #aboutCzs .about-button.about-button--outline,
  html body[data-page-key="about"] #pageTop #aboutCzs .about-button.about-button--outline > span,
  html body[data-page-key="about"] #pageTop #aboutFinalCta .about-button.about-button--primary,
  html body[data-page-key="about"] #pageTop #aboutFinalCta .about-button.about-button--primary > span {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-control) !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
  }


  /* Legacy founder markup remains hidden on mobile but is normalized for complete DOM coverage. */
  html body[data-page-key="about"] #pageTop #aboutFounder .about-founder-placeholder__mark {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-result) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page-key="about"] #pageTop #aboutFounder .about-founder-placeholder__label {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-detail) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
  }

  html body[data-page-key="about"] #pageTop #aboutFounder .about-stat-card > strong {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-result) !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.015em !important;
  }

  html body[data-page-key="about"] #pageTop #aboutFounder .about-stat-card > span:last-child {
    font-family: var(--anan-font-family) !important;
    font-size: var(--anan-type-secondary) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
  }

  /* Allow standardized type to wrap naturally instead of being line-clamped. */
  body[data-page-key="home"] #pageTop :where(
    .latest-article-card__title,
    .latest-event-card__title,
    .free-resource-card h3,
    .free-resource-card p,
    .premium-resource-card h3,
    .premium-resource-card p
  ) {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
  }

  body[data-page-key="home"] #pageTop :where(
    .latest-article-card,
    .latest-event-card,
    .free-resource-card,
    .premium-resource-card,
    .free-resource-card__top,
    .premium-resource-card__top,
    .free-resource-card__copy,
    .premium-resource-card__copy
  ) {
    height: auto !important;
    max-height: none !important;
    min-width: 0 !important;
  }

}