/* Nasrin Academy — UX refinement, additive layer v1.
   Intentionally preserves the current colors, sections, navigation and widgets.
   To reverse, remove this stylesheet and its paired script only. */

:root { --na-ux-ring: #6d57e9; }
html { scroll-padding-top: 102px; }
body { text-rendering: optimizeLegibility; }
:where(section[id], main[id], div[id="learning-paths"], #academy-guide) { scroll-margin-top: 98px; }

/* Keyboard navigation should be as visible as mouse hover. */
:where(a, button, summary, [role="tab"], input, select, textarea):focus-visible {
  outline: 3px solid var(--na-ux-ring) !important;
  outline-offset: 3px;
}
:where(a, button, summary) { -webkit-tap-highlight-color: rgba(99, 84, 221, .14); }

/* Header: preserve the same logo, items and palette, remove cramped targets. */
.site-header .header-inner { width: 100%; }
.site-header .main-nav.na-compact-nav > a { min-height: 44px; }
.site-header .header-actions .header-btn,
.site-header .lang-switcher a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; }
.site-header .mobile-toggle { flex: 0 0 44px; }

/* Main call-to-action and hero: more predictable spacing and text hierarchy. */
.advisor-game-hero .hero-content h1 { line-height: 1.22; }
.advisor-game-hero .hero-content p { max-width: 62ch; line-height: 1.9; }
.hero-game-actions { align-items: stretch; gap: 12px; }
.hero-game-actions .hero-btn { min-height: 50px; text-align: center; }
.hero-mini-stats { row-gap: 8px; }
.na-guide-hero-jump { min-height: 42px; align-items: center; }

/* Easier scanning: retain every card and existing destination. */
.na-guide-link-text strong, .hub-card-title strong { line-height: 1.5; }
.na-guide-link-text small, .na-guide-help p, .hub-card-title small,
.language-card-v2 p, .today-list small { line-height: 1.7; }
.na-guide-link, .language-card-v2, .today-list a, .goal-grid a,
.hero-map-tile, .na-trust-certificate-link { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.na-guide-link:hover, .language-card-v2:hover, .today-list a:hover, .goal-grid a:hover { transform: translateY(-2px); }
:where(.na-guide-link, .language-card-v2, .hub-card, .goal-grid a, .today-list a) { min-width: 0; }

/* Licenses remain the same size, with a clean, evenly balanced image viewport. */
.site-footer .na-trust-card .na-trust-certificate-link,
.site-footer .na-trust-card .na-enamad-code { max-width: 100%; }
.site-footer .na-trust-card .na-trust-certificate-image { object-fit: contain !important; }

/* Existing companion can obscure the license cards at the bottom of the page.
   Do not remove it: temporarily tuck it away only while the footer is in view. */
body.na-ux-footer-visible .advisor-gateway,
body.na-ux-footer-visible .learning-route-badge {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .22s ease, visibility .22s ease;
}
.advisor-hint { white-space: normal; overflow-wrap: anywhere; text-align: center; }

/* Small unobtrusive way back after browsing the long home page. */
.na-ux-to-top {
  position: fixed; inset-inline-start: 18px; bottom: 82px; z-index: 8990;
  width: 43px; height: 43px; border-radius: 50%;
  color: #fff; background: #26305e; border: 1px solid rgba(255,255,255,.20);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 9px 24px rgba(20,25,57,.20);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.na-ux-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.na-ux-to-top:hover { background: #423c9c; }
.na-ux-to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }

/* A proper close target without replacing the existing mobile menu. */
.na-ux-drawer-close {
  position: absolute; top: 20px; inset-inline-end: 20px;
  width: 44px; height: 44px; display: grid; place-items: center;
  color: #fff; background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.2); border-radius: 12px;
  cursor: pointer; font: inherit; font-size: 25px;
}
.mobile-drawer { overflow-y: auto; overscroll-behavior: contain; }
.mobile-drawer a { min-height: 46px; }

@media (max-width: 900px) {
  .advisor-game-hero .hero-content h1 { line-height: 1.28; }
  .hero-game-actions { justify-content: center; }
  .na-guide-heading p, .section-heading p { line-height: 1.85; }
}
@media (max-width: 650px) {
  html { scroll-padding-top: 82px; }
  :where(section[id], main[id], #academy-guide) { scroll-margin-top: 82px; }
  .site-header .header-inner { gap: 8px; }
  .site-header .lang-switcher a { min-width: 28px; min-height: 36px; }
  .advisor-game-hero .hero-content h1 { font-size: clamp(1.95rem, 7.2vw, 2.45rem); }
  .advisor-game-hero .hero-content p { font-size: .94rem; }
  .hero-game-actions { flex-direction: column; }
  .hero-game-actions .hero-btn { width: 100%; }
  .na-guide-link-text strong { font-size: .85rem; }
  .na-guide-link-text small { font-size: .73rem; }
  .na-ux-to-top { inset-inline-start: 12px; bottom: 84px; width: 40px; height: 40px; }
  .na-trust-heading p { max-width: 33ch; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .na-ux-to-top, .na-guide-link, .language-card-v2, .hero-map-tile,
  .advisor-game-hero *, .advisor-gateway * { animation: none !important; transition: none !important; }
}