/*
 * NepalTechHub Phase 19A-1 — Premium UI Foundation
 * Presentation only. Scoped under body.nth-phase19a-ui.
 */

body.nth-phase19a-ui {
  --nth-ui-bg: #f7f9fc;
  --nth-ui-surface: #ffffff;
  --nth-ui-surface-soft: #f8fafc;
  --nth-ui-ink: #0f172a;
  --nth-ui-text: #334155;
  --nth-ui-muted: #64748b;
  --nth-ui-line: #e2e8f0;
  --nth-ui-line-strong: #cbd5e1;
  --nth-ui-primary: #2563eb;
  --nth-ui-primary-strong: #1d4ed8;
  --nth-ui-primary-soft: #eff6ff;
  --nth-ui-success: #15803d;
  --nth-ui-success-soft: #f0fdf4;
  --nth-ui-warning: #b45309;
  --nth-ui-danger: #b91c1c;
  --nth-ui-radius-sm: 10px;
  --nth-ui-radius: 14px;
  --nth-ui-radius-lg: 20px;
  --nth-ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px -16px rgba(15, 23, 42, .28);
  --nth-ui-shadow: 0 16px 36px -26px rgba(15, 23, 42, .34);
  --nth-ui-content: 1320px;
  color: var(--nth-ui-text);
  background: var(--nth-ui-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html:has(body.nth-phase19a-ui),
body.nth-phase19a-ui {
  max-width: 100%;
  overflow-x: clip;
}

body.nth-phase19a-ui *,
body.nth-phase19a-ui *::before,
body.nth-phase19a-ui *::after {
  box-sizing: border-box;
}

body.nth-phase19a-ui h1,
body.nth-phase19a-ui h2,
body.nth-phase19a-ui h3,
body.nth-phase19a-ui h4 {
  color: var(--nth-ui-ink);
  letter-spacing: -.025em;
  text-wrap: balance;
}

body.nth-phase19a-ui h1 {
  line-height: 1.08;
}

body.nth-phase19a-ui h2,
body.nth-phase19a-ui h3 {
  line-height: 1.2;
}

body.nth-phase19a-ui p,
body.nth-phase19a-ui li {
  text-wrap: pretty;
}

body.nth-phase19a-ui a {
  text-underline-offset: 3px;
}

body.nth-phase19a-ui :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid rgba(37, 99, 235, .26);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Global form rhythm: avoids iOS focus zoom and makes controls consistent.
 * ---------------------------------------------------------------------- */
body.nth-phase19a-ui :where(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], select, textarea) {
  max-width: 100%;
  border-color: var(--nth-ui-line-strong);
  border-radius: 12px;
  background: var(--nth-ui-surface);
  color: var(--nth-ui-ink);
  box-shadow: none;
}

body.nth-phase19a-ui :where(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], select) {
  min-height: 44px;
}

body.nth-phase19a-ui :where(button, input[type="submit"], .button, .wp-element-button) {
  min-height: 42px;
  border-radius: 11px;
}

/* -------------------------------------------------------------------------
 * Header shell. Existing managed navigation logic remains authoritative.
 * ---------------------------------------------------------------------- */
body.nth-phase19a-ui .site-header {
  background: rgba(255, 255, 255, .98);
  border-bottom: 1px solid var(--nth-ui-line);
  box-shadow: 0 1px 0 rgba(15, 23, 42, .02);
}

body.nth-phase19a-ui .site-header .inside-header,
body.nth-phase19a-ui .main-navigation .inside-navigation {
  width: min(var(--nth-ui-content), 100%);
  margin-inline: auto;
}

body.nth-phase19a-ui .site-header .site-logo img,
body.nth-phase19a-ui .site-header .custom-logo {
  object-fit: contain;
}

body.nth-phase19a-ui .main-navigation {
  border-bottom: 1px solid var(--nth-ui-line);
  background: rgba(255, 255, 255, .98);
  color: var(--nth-ui-ink);
  box-shadow: 0 9px 24px -24px rgba(15, 23, 42, .38);
}

body.nth-phase19a-ui .main-navigation .main-nav > ul,
body.nth-phase19a-ui .main-navigation ul#primary-menu {
  align-items: center;
}

body.nth-phase19a-ui .main-navigation .nth-nav-direct > a,
body.nth-phase19a-ui .main-navigation .nth-nav-trigger {
  color: var(--nth-ui-text) !important;
  font-weight: 760;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

body.nth-phase19a-ui .main-navigation .nth-nav-direct > a:hover,
body.nth-phase19a-ui .main-navigation .nth-nav-direct > a:focus-visible,
body.nth-phase19a-ui .main-navigation .nth-nav-trigger:hover,
body.nth-phase19a-ui .main-navigation .nth-nav-trigger:focus-visible {
  background: var(--nth-ui-surface-soft);
  color: var(--nth-ui-ink) !important;
}

body.nth-phase19a-ui .main-navigation .nth-mega-trigger {
  border: 1px solid #bfdbfe;
  background: var(--nth-ui-primary-soft);
  color: var(--nth-ui-primary-strong) !important;
  font-weight: 820;
}

body.nth-phase19a-ui .main-navigation .nth-mega-trigger:hover,
body.nth-phase19a-ui .main-navigation .nth-mega-trigger:focus-visible {
  border-color: #93c5fd;
  background: #dbeafe;
  color: #1e40af !important;
}

body.nth-phase19a-ui .main-navigation .menu-item-nth-login > a {
  border: 1px solid var(--nth-ui-primary-strong);
  background: var(--nth-ui-primary-strong);
  color: #fff !important;
  font-weight: 820;
  box-shadow: 0 8px 18px -13px rgba(29, 78, 216, .8);
}

body.nth-phase19a-ui .main-navigation .menu-item-nth-login > a:hover,
body.nth-phase19a-ui .main-navigation .menu-item-nth-login > a:focus-visible {
  background: #1e40af;
  color: #fff !important;
}

/* Search is prominent enough to find, but visually quieter than primary nav. */
body.nth-phase19a-ui .main-navigation .nth-hsearch-input {
  border: 1px solid var(--nth-ui-line-strong) !important;
  border-radius: 12px !important;
  background: var(--nth-ui-surface-soft) !important;
  color: var(--nth-ui-ink) !important;
  font-size: 14px;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

body.nth-phase19a-ui .main-navigation .nth-hsearch-input:focus {
  border-color: #93c5fd !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .09) !important;
}

/* Managed panels become one consistent surface language. */
body.nth-phase19a-ui .nth-managed-panel,
body.nth-phase19a-ui .nth-mega-panel,
body.nth-phase19a-ui .nth-nav-popover {
  border-color: var(--nth-ui-line) !important;
  background: var(--nth-ui-surface);
  box-shadow: 0 24px 54px -28px rgba(15, 23, 42, .38) !important;
}

body.nth-phase19a-ui .nth-mega-category-card,
body.nth-phase19a-ui .nth-mega-quick-link,
body.nth-phase19a-ui .nth-nav-popover-link {
  color: var(--nth-ui-text);
  transition: background-color .14s ease, color .14s ease, transform .14s ease;
}

body.nth-phase19a-ui .nth-mega-category-card:hover,
body.nth-phase19a-ui .nth-mega-category-card:focus-visible,
body.nth-phase19a-ui .nth-mega-quick-link:hover,
body.nth-phase19a-ui .nth-mega-quick-link:focus-visible,
body.nth-phase19a-ui .nth-nav-popover-link:hover,
body.nth-phase19a-ui .nth-nav-popover-link:focus-visible {
  background: var(--nth-ui-primary-soft);
  color: var(--nth-ui-primary-strong);
}

body.nth-phase19a-ui .nth-mega-category-copy strong,
body.nth-phase19a-ui .nth-nav-popover-link strong,
body.nth-phase19a-ui .nth-mega-quick-link strong {
  color: var(--nth-ui-ink);
}

body.nth-phase19a-ui .nth-mega-category-copy small,
body.nth-phase19a-ui .nth-nav-popover-link small,
body.nth-phase19a-ui .nth-mega-quick-link small {
  color: var(--nth-ui-muted);
}

/* -------------------------------------------------------------------------
 * Common public content surfaces. Deliberately restrained: no template rewrite.
 * ---------------------------------------------------------------------- */
body.nth-phase19a-ui :where(.site-content, #page, .grid-container) {
  min-width: 0;
}

body.nth-phase19a-ui :where(.nth-card, .nth-neo-card, .nth-product-card) {
  border-color: var(--nth-ui-line);
  border-radius: var(--nth-ui-radius);
  background: var(--nth-ui-surface);
  box-shadow: var(--nth-ui-shadow-sm);
}

body.nth-phase19a-ui :where(.nth-card, .nth-neo-card, .nth-product-card) img {
  max-width: 100%;
  height: auto;
}

body.nth-phase19a-ui :where(.nth-card, .nth-neo-card, .nth-product-card) h2,
body.nth-phase19a-ui :where(.nth-card, .nth-neo-card, .nth-product-card) h3 {
  overflow-wrap: anywhere;
}

/* Generic table containment: public spec/admin-like tables must not widen page. */
body.nth-phase19a-ui :where(.entry-content, main, article) table {
  max-width: 100%;
}

body.nth-phase19a-ui :where(.entry-content, main, article) :where(pre, code) {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------
 * Responsive shell.
 * Sitewide mobile header is intentionally non-sticky: previous NepalTechHub
 * screenshots showed sticky header overlap. Desktop behavior is preserved.
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.nth-phase19a-ui .site-header {
    position: relative !important;
    top: auto !important;
    inset-block-start: auto !important;
  }

  body.nth-phase19a-ui .site-header .inside-header {
    min-height: 56px;
    padding: 8px 14px;
  }

  body.nth-phase19a-ui .site-header .site-logo img,
  body.nth-phase19a-ui .site-header .custom-logo {
    max-height: 34px;
    width: auto;
  }

  body.nth-phase19a-ui .main-navigation {
    position: relative;
    z-index: 90;
  }

  body.nth-phase19a-ui .main-navigation .menu-toggle {
    min-height: 46px;
    margin: 7px 12px;
    border: 1px solid var(--nth-ui-line) !important;
    border-radius: 12px !important;
    background: var(--nth-ui-surface) !important;
    color: var(--nth-ui-ink) !important;
    box-shadow: var(--nth-ui-shadow-sm);
    font-weight: 800;
  }

  body.nth-phase19a-ui .main-navigation.toggled .main-nav {
    width: calc(100% - 24px) !important;
    margin: 0 12px 12px !important;
    overflow: hidden;
    border: 1px solid var(--nth-ui-line);
    border-radius: 16px;
    background: var(--nth-ui-surface);
    box-shadow: 0 20px 44px -28px rgba(15, 23, 42, .45);
  }

  body.nth-phase19a-ui .main-navigation .main-nav > ul,
  body.nth-phase19a-ui .main-navigation ul#primary-menu {
    max-width: 100%;
    overflow-x: hidden;
  }

  body.nth-phase19a-ui .nth-mobile-search-li {
    background: var(--nth-ui-surface);
  }

  body.nth-phase19a-ui .nth-mobile-search-li .nth-hsearch-input {
    min-height: 46px;
    font-size: 16px !important;
  }

  body.nth-phase19a-ui .main-navigation .nth-nav-direct > a,
  body.nth-phase19a-ui .main-navigation .nth-nav-trigger,
  body.nth-phase19a-ui .main-navigation .menu-item-nth-login > a {
    min-height: 50px;
    padding: 13px 14px !important;
    background: #fff;
    color: var(--nth-ui-ink) !important;
    font-size: 14.5px;
    font-weight: 780;
  }

  body.nth-phase19a-ui .main-navigation .menu-item-nth-login > a {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.nth-phase19a-ui .main-navigation .nth-mega-trigger {
    border: 0;
    background: #fff;
    color: var(--nth-ui-ink) !important;
  }

  body.nth-phase19a-ui .nth-managed-panel {
    box-shadow: none !important;
  }

  body.nth-phase19a-ui .nth-mega-category-card,
  body.nth-phase19a-ui .nth-nav-popover-link,
  body.nth-phase19a-ui .nth-mega-quick-link {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body.nth-phase19a-ui :where(input, select, textarea) {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  body.nth-phase19a-ui {
    --nth-ui-radius-lg: 16px;
  }

  body.nth-phase19a-ui .site-header .inside-header {
    padding-inline: 12px;
  }

  body.nth-phase19a-ui .main-navigation .menu-toggle {
    margin-inline: 10px;
  }

  body.nth-phase19a-ui .main-navigation.toggled .main-nav {
    width: calc(100% - 20px) !important;
    margin-inline: 10px !important;
  }
}

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

/* -------------------------------------------------------------------------
 * Phase 19A-2 — compact legacy primary-menu fallback.
 * The PHP layer adds .nth-19a-menu-* only when the old page-list menu is
 * detected. Existing managed navigation does not receive these classes.
 * ---------------------------------------------------------------------- */
body.nth-phase19a-ui .main-navigation .nth-19a-menu-item > a {
  color: var(--nth-ui-text) !important;
  font-weight: 760;
}

body.nth-phase19a-ui .main-navigation .nth-19a-menu-item > a:hover,
body.nth-phase19a-ui .main-navigation .nth-19a-menu-item > a:focus-visible {
  color: var(--nth-ui-primary-strong) !important;
  background: var(--nth-ui-primary-soft) !important;
}

body.nth-phase19a-ui .main-navigation .nth-19a-menu-compare > a {
  color: var(--nth-ui-primary-strong) !important;
  font-weight: 840;
}

body.nth-phase19a-ui .nth-19a-nav-search {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}

body.nth-phase19a-ui .nth-19a-nav-search input[type="search"] {
  min-width: 150px;
  min-height: 40px;
  margin: 0;
  padding: 8px 11px;
  border: 1px solid var(--nth-ui-line-strong);
  border-radius: 10px;
  background: var(--nth-ui-surface-soft);
  color: var(--nth-ui-ink);
  font-size: 14px;
}

body.nth-phase19a-ui .nth-19a-nav-search button {
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--nth-ui-primary);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

@media (min-width: 901px) {
  body.nth-phase19a-ui .main-navigation .nth-19a-menu-item > a {
    padding-inline: 12px !important;
    font-size: 14px;
  }

  body.nth-phase19a-ui .main-navigation .nth-19a-menu-search {
    display: flex;
    align-items: center;
    margin-inline-start: auto;
    padding-inline-start: 8px;
  }
}

@media (max-width: 900px) {
  /* GeneratePress/theme rules were making the toggle look like a 140px card. */
  body.nth-phase19a-ui .main-navigation .menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    width: calc(100% - 24px) !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 8px 12px !important;
    padding: 0 16px !important;
    line-height: 1 !important;
  }

  body.nth-phase19a-ui .main-navigation.toggled .main-nav {
    max-height: min(70vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.nth-phase19a-ui .main-navigation .nth-19a-menu-item {
    margin: 0 !important;
    border-bottom: 1px solid var(--nth-ui-line);
  }

  body.nth-phase19a-ui .main-navigation .nth-19a-menu-item > a {
    display: flex !important;
    align-items: center;
    min-height: 50px !important;
    padding: 12px 15px !important;
    background: #fff !important;
    color: var(--nth-ui-ink) !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  body.nth-phase19a-ui .main-navigation .nth-19a-menu-compare > a {
    color: var(--nth-ui-primary-strong) !important;
  }

  body.nth-phase19a-ui .main-navigation .nth-19a-menu-search {
    padding: 12px !important;
    background: var(--nth-ui-surface-soft);
  }

  body.nth-phase19a-ui .nth-19a-nav-search {
    width: 100%;
  }

  body.nth-phase19a-ui .nth-19a-nav-search input[type="search"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 44px;
    font-size: 16px;
    background: #fff;
  }

  body.nth-phase19a-ui .nth-19a-nav-search button {
    flex: 0 0 auto;
    min-height: 44px;
    padding-inline: 15px;
  }
}

@media (max-width: 480px) {
  body.nth-phase19a-ui .main-navigation .menu-toggle {
    width: calc(100% - 20px) !important;
    margin-inline: 10px !important;
  }
}

/* -------------------------------------------------------------------------
 * Phase 19A-3 — deterministic compact mobile navigation.
 * Marker text is also used by the admin health check.
 * nth-19a-compact-toggle
 * ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  body.nth-phase19a-ui .main-navigation .menu-toggle {
    width: min(156px, calc(100% - 24px)) !important;
    margin: 8px auto !important;
  }

  body.nth-phase19a-ui .main-navigation.toggled .main-nav {
    max-height: min(68vh, 560px) !important;
  }

  body.nth-phase19a-ui .main-navigation .main-nav > ul[data-nth-19a-curated="1"] .nth-19a-menu-item > a,
  body.nth-phase19a-ui .main-navigation .nth-19a-page-menu .nth-19a-menu-item > a {
    min-height: 48px !important;
    padding: 11px 14px !important;
    font-size: 15px !important;
  }
}