/**
 * Neytom — WCAG contrast helpers + mobile / foldable device rules.
 * Load after theme tokens. Safe for homepage, dashboard, admin, SA.
 */
:root {
  --nt-tap-min: 44px;
  --nt-type-min: 12px;
  --nt-safe-b: env(safe-area-inset-bottom, 0px);
  --nt-safe-t: env(safe-area-inset-top, 0px);
  --nt-safe-l: env(safe-area-inset-left, 0px);
  --nt-safe-r: env(safe-area-inset-right, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  overflow-x: clip;
  max-width: 100%;
}

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

/* Touch / coarse pointers — 44px targets (WCAG 2.5.5 / Apple HIG) */
@media (pointer: coarse), (hover: none) {
  button:not(.btn-xs):not(.xs):not([class*="close"]):not(.hp-modal-close):not(.auth-close),
  a.hp-btn,
  .hp-btn,
  .btn:not(.xs):not(.btn-xs),
  .nav-link,
  .sbi,
  .mobile-bottom-nav a,
  .hp-billing-btn,
  .hp-menu-toggle,
  input[type="submit"],
  input[type="button"],
  [role="button"]:not(.hp-plan) {
    min-height: var(--nt-tap-min);
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
  }

  .hp-header-actions .hp-btn,
  .hp-header-actions button {
    min-height: var(--nt-tap-min);
    padding-top: 10px;
    padding-bottom: 10px;
  }

  input, select, textarea {
    font-size: 16px !important; /* prevent iOS zoom */
  }
}

/* Meta / badge type floor — avoid 9–11px on phones */
@media (max-width: 900px), (pointer: coarse) {
  .hp-sticky-promo,
  .hp-plan-tag,
  .hp-billing-save,
  .hp-plans-chip,
  .hp-iso-hero-kicker,
  .hp-hero-kicker,
  .section-badge,
  .nav-label,
  .nav-section,
  .uc-label,
  .card-title,
  .mc-label,
  .sb-sec,
  .fl,
  .fg label,
  .sc-lbl,
  .m-lbl,
  th {
    font-size: max(var(--nt-type-min), 0.75rem) !important;
  }

  table {
    font-size: max(12px, 0.75rem);
  }
}

/* Foldable cover / ultra-narrow (Galaxy Z Fold cover ~280–344px, Flip) */
@media (max-width: 360px) {
  html { font-size: 14px; }

  .hp-wrap,
  .hp-wrap-wide {
    width: calc(100% - 16px) !important;
  }

  .hp-header-inner {
    gap: 6px;
    padding-inline: 8px;
  }

  .hp-header-demo,
  .hp-header-signin {
    display: none !important;
  }

  .hp-plans,
  .hp-plans-row,
  .hp-path-grid,
  .hp-isolation-grid,
  .hp-iso-compare-grid,
  .g2, .g3, .g4 {
    grid-template-columns: 1fr !important;
  }

  .hp-hero-copy h1 {
    font-size: clamp(1.5rem, 8vw, 2rem) !important;
  }

  /* SA uses .sidebar as a drawer — do not force full-bleed width (breaks ≤360 fold cover) */
  .neytom-app-sidebar {
    width: min(100vw, 100%) !important;
  }
}

/* Short landscape (fold open flat / laptop hinge) */
@media (max-height: 480px) and (orientation: landscape) {
  .hp-hero-split {
    padding-top: calc(var(--header-h, 58px) + 12px) !important;
    padding-bottom: 12px !important;
  }

  .hp-sticky-cta .hp-sticky-promo {
    display: none;
  }

  .neytom-cookie-banner__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Dual-pane / tablet fold: keep single column content, avoid cramped 6-col */
@media (min-width: 361px) and (max-width: 900px) {
  .hp-plans,
  .hp-plans-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hp-path-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  .hp-plans,
  .hp-plans-row,
  .hp-path-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Container queries — panels reflow inside shell, not only viewport */
@supports (container-type: inline-size) {
  main.main,
  .content,
  .neytom-app-main,
  body.hp main {
    container-type: inline-size;
    container-name: nt-main;
  }

  @container nt-main (max-width: 520px) {
    .g2, .g3, .g4,
    .hp-plans:not(.hp-plans-compare),
    .plans-grid--dense {
      grid-template-columns: 1fr !important;
    }
  }

  @container nt-main (min-width: 521px) and (max-width: 900px) {
    .g3, .g4 {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
}

/* Safe areas — notch / fold crease / home indicator */
.hp-header,
.neytom-app-header,
.mobile-bottom-nav,
.hp-sticky-cta,
.neytom-cookie-banner {
  padding-left: max(12px, var(--nt-safe-l));
  padding-right: max(12px, var(--nt-safe-r));
}

.mobile-bottom-nav,
.hp-sticky-cta {
  padding-bottom: max(6px, var(--nt-safe-b));
}

.neytom-cookie-banner {
  padding-bottom: max(12px, var(--nt-safe-b));
}

/* Sticky CTA + cookie: keep both usable on small screens */
@media (max-width: 900px) {
  body.hp--live:has(.neytom-cookie-banner.is-visible) .hp-sticky-cta.is-visible {
    margin-bottom: 0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}