/* Shared foundations and shell. Load before home.css or content.css. */
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-bold-italic.ttf") format("truetype"); font-style: italic; font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-extra-light-italic.ttf") format("truetype"); font-style: italic; font-weight: 200; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-extra-light.ttf") format("truetype"); font-style: normal; font-weight: 200; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-italic.ttf") format("truetype"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-light-italic.ttf") format("truetype"); font-style: italic; font-weight: 300; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-light.ttf") format("truetype"); font-style: normal; font-weight: 300; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-medium-italic.ttf") format("truetype"); font-style: italic; font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-medium.ttf") format("truetype"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-regular.ttf") format("truetype"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-semibold-italic.ttf") format("truetype"); font-style: italic; font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-semibold.ttf") format("truetype"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-thin-italic.ttf") format("truetype"); font-style: italic; font-weight: 100; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-thin.ttf") format("truetype"); font-style: normal; font-weight: 100; font-display: swap; }
@font-face { font-family: "Noto Sans SC"; src: url("../fonts/noto-sans-sc-variable.ttf") format("truetype"); font-style: normal; font-weight: 100 900; font-display: swap; }
.nafa-site { --color-black: #000000; --color-white: #FFFFFF; --color-lavender: #A19BF4; --color-blue: #2553C8; --color-pink: #F16CDF; --color-gray-50: #F8F8F8; --color-gray-100: #F0F0F0; --color-gray-200: #E2E2E2; --color-gray-300: #C8C8C8; --color-gray-400: #A0A0A0; --color-gray-500: #787878; --color-gray-600: #545454; --color-gray-700: #363636; --color-gray-800: #1E1E1E; --color-gray-900: #111111; --status-open: #12B76A; --status-error: #D92D20; --surface-base: var(--color-white); --surface-elevated: var(--color-gray-50); --surface-subtle: var(--color-gray-100); --surface-inverse: var(--color-black); --fg-primary: var(--color-black); --fg-secondary: var(--color-gray-600); --fg-tertiary: var(--color-gray-400); --fg-inverse: var(--color-white); --fg-faculty-art: var(--color-pink); --fg-faculty-performing: var(--color-lavender); --fg-faculty-interdisciplinary: var(--color-blue); --border-subtle: var(--color-gray-200); --border-default: var(--color-gray-300); --border-strong: var(--color-black); --border-accent: var(--color-lavender); --interactive-primary: var(--color-black); --interactive-primary-hover: var(--color-gray-800); }
.nafa-site { --font-sans: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif; --font-chinese: "Noto Sans SC", "IBM Plex Sans", system-ui, sans-serif; --text-display: 72px; --text-heading: 30px; --text-body: 16px; --text-label: 14px; --text-caption: 12px; --text-display-zh: 44px; --text-heading-zh: 20px; --weight-regular: 400; --weight-strong-en: 600; --weight-strong-zh: 500; --leading-display-en: 1.05; --leading-heading-en: 1.2; --leading-body-en: 1.6; --leading-label-en: 1.4; --leading-caption-en: 1.4; --leading-display-zh: 1.3; --leading-heading-zh: 1.4; --leading-body-zh: 1.75; --leading-label-zh: 1.5; --leading-caption-zh: 1.5; --tracking-tighter: -0.03em; --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.15em; }
.nafa-site { --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; --space-40: 160px; --space-48: 192px; --gap-xs: var(--space-1); --gap-sm: var(--space-2); --gap-md: var(--space-4); --gap-lg: var(--space-6); --gap-xl: var(--space-8); --gap-2xl: var(--space-16); --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-full: 9999px; --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05); --shadow-sm: 0 2px 8px 0 rgba(0,0,0,0.06); --shadow-md: 0 4px 16px 0 rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px 0 rgba(0,0,0,0.10); --shadow-xl: 0 16px 48px 0 rgba(0,0,0,0.12); --max-width-sm: 640px; --max-width-md: 768px; --max-width-lg: 1024px; --max-width-xl: 1320px; --max-width-2xl: 1440px; }
.nafa-site { --duration-instant: 50ms; --duration-fast: 120ms; --duration-normal: 200ms; --duration-slow: 350ms; --duration-slower: 500ms; --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-color: color var(--duration-fast) var(--ease-out),
                           background-color var(--duration-fast) var(--ease-out),
                           border-color var(--duration-fast) var(--ease-out); --transition-transform: transform var(--duration-normal) var(--ease-spring); --transition-opacity: opacity var(--duration-normal) var(--ease-out); --transition-shadow: box-shadow var(--duration-normal) var(--ease-out); }
.nafa-site *,
.nafa-site *::before,
.nafa-site *::after { box-sizing: border-box; margin: 0; padding: 0; }
.nafa-site { --side-pad: max(24px, calc((100vw - 1440px) / 2)); --content-max: 1320px; }
.nafa-site { font-family: "Noto Sans SC", "IBM Plex Sans", sans-serif; background: #fff; color: #000; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.nafa-site a { color: inherit; text-decoration: none; }
.nafa-site a:hover { color: inherit; }
.nafa-site .notice-bar { background: #000; color: #fff; text-align: center; font-family: "Noto Sans SC", sans-serif; font-size: 12px; font-weight: 700; line-height: 1.5; padding: 8px var(--side-pad); }
.nafa-site .nav { position: sticky; top: 0; left: 0; right: 0; z-index: 160; background: transparent; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--side-pad); height: 72px; transition: background 200ms ease, backdrop-filter 200ms ease; }
.nafa-site .nav.scrolled { background: rgba(0,0,0,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.nafa-site .nav.scrolled .btn-on-dark { background: #EBE42D; color: #000; }
.nafa-site .nav.scrolled .btn-on-dark:hover { background: #fff; color: #000; }
.nafa-site .nav-logo { display: flex; align-items: center; }
.nafa-site .nav-logo img { height: 34px; width: auto; filter: invert(1); }
.nafa-site .nav-links { display: flex; align-items: center; gap: 36px; list-style: none; position: absolute; left: 50%; transform: translateX(-50%); }
.nafa-site .nav-links a { font-family: "Noto Sans SC", sans-serif; font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.80); text-decoration: none; letter-spacing: 0.02em; transition: color 120ms; }
.nafa-site .nav-links a:hover { color: #fff; }
.nafa-site .nav-links a.active { color: #fff; }
.nafa-site .nav-right { display: flex; align-items: center; gap: 20px; }
.nafa-site .lang-toggle { font-family: "Noto Sans SC", sans-serif; font-size: 16px; font-weight: 500; color: rgba(255,255,255,0.70); cursor: pointer; background: none; border: none; transition: color 120ms; }
.nafa-site .lang-toggle:hover { color: #fff; }
.nafa-site .btn-on-dark { font-family: "Noto Sans SC", "IBM Plex Sans", sans-serif; font-size: 16px; font-weight: 500; height: 48px; padding: 0 28px; border-radius: 9999px; border: none; background: #fff; color: #000; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background 150ms, color 150ms; white-space: nowrap; }
.nafa-site .btn-on-dark:hover { background: #000; color: #fff; }
.nafa-site .hamburger { display: none; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 4px 3px 4px 0; z-index: 200; }
.nafa-site .hamburger span { display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform 250ms ease, opacity 250ms ease; }
.nafa-site .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) scaleX(1.272727); background: #fff; }
.nafa-site .hamburger.open span:nth-child(2) { opacity: 0; }
.nafa-site .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) scaleX(1.272727); background: #fff; }
.nafa-site .mobile-drawer { display: none; position: fixed; inset: 0; background: #000; z-index: 150; flex-direction: column; padding: 0 var(--side-pad) 48px; }
.nafa-site .mobile-drawer.open,
.nafa-site .mobile-drawer.closing { display: flex; }
/* Keep the original button visible throughout both directions of the morph.
   Its placeholder preserves the header geometry while it belongs to the dialog. */
.nafa-site .hamburger-placeholder { display: block; flex: 0 0 44px; width: 44px; height: 44px; visibility: hidden; }
.nafa-site .mobile-drawer .hamburger { position: static; flex: 0 0 44px; width: 44px; height: 44px; margin: 0 0 0 auto; z-index: 1; }
.nafa-site .mobile-drawer .hamburger:focus-visible { outline-color: #ebe42d; }
.nafa-site .mobile-drawer a { font-family: "Noto Sans SC", sans-serif; font-size: 24px; font-weight: 500; color: #fff; text-decoration: none; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.10); display: block; }
.nafa-site .mobile-drawer .mobile-cta { margin-top: 32px; background: #fff; color: #000; border-radius: 9999px; padding: 14px 28px; font-size: 18px; text-align: center; border: none; transition: background 150ms, color 150ms; }
.nafa-site .mobile-drawer .mobile-cta:hover { background: transparent; color: #fff; outline: 1.5px solid #fff; }
.nafa-site .site-footer { background: #000; padding: 40px var(--side-pad) 0; }
.nafa-site .footer-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; padding-bottom: 32px; }
.nafa-site .footer-left { display: flex; flex-direction: column; gap: 24px; max-width: 480px; }
.nafa-site .footer-logo { height: 36px; width: auto; filter: invert(1); }
.nafa-site .footer-tagline { font-family: "Noto Sans SC", sans-serif; font-size: 14px; font-weight: 500; color: #fff; line-height: 1.75; }
.nafa-site .footer-cta { display: inline-flex; align-items: center; gap: 6px; font-family: "Noto Sans SC", "IBM Plex Sans", sans-serif; font-size: 16px; font-weight: 500; border-radius: 9999px; height: 48px; padding: 0 28px; text-decoration: none; width: fit-content; transition: background 150ms, color 150ms; }
.nafa-site .footer-cta:hover { background: #fff; color: #000; border-color: #fff; }
.nafa-site .btn-yellow { background: #EBE42D; color: #000 !important; }
.nafa-site .btn-yellow:hover { background: #fff !important; }
/* Ease the surface; keep the opposite text-colour fade brief at its midpoint. */
.nafa-site .nav .btn-on-dark { transition: background-color 200ms ease-in-out, color 40ms ease-in-out 80ms; }
.nafa-site .nav.scrolled .btn-on-dark { transition: background-color 200ms ease-in-out, color 40ms ease-in-out; }
.nafa-site .footer-qr-area { display: flex; gap: 32px; align-items: flex-start; flex-shrink: 0; }
.nafa-site .footer-qr-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.nafa-site .footer-qr-box { width: 110px; height: 110px; background: #fff; border-radius: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.nafa-site .footer-qr-box svg { width: 90px; height: 90px; }
.nafa-site .footer-qr-label { font-family: "Noto Sans SC", sans-serif; font-size: 14px; font-weight: 500; color: #fff; text-align: center; }
.nafa-site .footer-qr-sublabel { font-family: "Noto Sans SC", sans-serif; font-size: 14px; font-weight: 500; color: #fff; text-align: center; margin-top: -6px; }
.nafa-site .footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.15); margin: 0; }
.nafa-site .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; gap: 24px; flex-wrap: wrap; }
.nafa-site .footer-legal { font-family: "IBM Plex Sans", "Noto Sans SC", sans-serif; font-size: 14px; font-weight: 500; color: #fff; line-height: 1.5; }
.nafa-site .reveal-d1 { transition-delay: 100ms; }
.nafa-site .reveal-d2 { transition-delay: 220ms; }
@media (max-width: 768px) {
.nafa-site { --side-pad: 20px; }
}
@media (max-width: 768px) {
.nafa-site .nav-links,
.nafa-site .nav-right { display: none; }
}
@media (max-width: 768px) {
.nafa-site .hamburger { display: flex; }
}
@media (max-width: 768px) {
.nafa-site .nav { padding: 0 20px; gap: 4px; }
}
@media (max-width: 768px) {
.nafa-site .nav-logo img { width: 220px !important; height: auto !important; }
}
@media (max-width: 768px) {
.nafa-site .site-footer { padding: 24px 20px 0; }
}
@media (max-width: 768px) {
.nafa-site .footer-main { flex-direction: column; gap: 40px; }
}
@media (max-width: 768px) {
.nafa-site .footer-logo { width: 220px !important; height: auto !important; }
}
@media (max-width: 768px) {
.nafa-site .footer-tagline { font-size: 14px; font-weight: 500; }
}
@media (max-width: 768px) {
.nafa-site .footer-qr-area { justify-content: flex-start; }
}
@media (max-width: 768px) {
.nafa-site .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}
@media (max-width: 768px) {
.nafa-site .footer-uen { text-align: left !important; }
}

/* Shared appearance for explanatory hints on unlinked controls. */
.nafa-site .nafa-unlinked-hint,
.nafa-site .nafa-content .nafa-unlinked-hint {
  color: white;
  background: maroon;
  width: fit-content;
  max-width: 100%;
  padding: 2px 12px 4px 12px;
  border-radius: 24px;
  border: white 1px solid;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

/* Keep Sitefinity's editor outside the scoped site reset. */
body { margin: 0; }
.nafa-site { --color-yellow: #ebe42d; min-width: 0; }
.nafa-site img { max-width: 100%; }
.nafa-site button, .nafa-site select { font-family: inherit; }
.nafa-site [hidden] { display: none !important; }
.nafa-site .nav-logo img { width: 300px; height: auto; }
.nafa-site .footer-qr-box img { width: 90px; height: 90px; object-fit: contain; }
.nafa-site .footer-qr-area { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 312px; max-width: 100%; gap: 24px; }
.nafa-site .footer-qr-item { min-width: 0; width: 100%; }
.nafa-site .footer-qr-box { width: 100%; max-width: 144px; height: auto; aspect-ratio: 1; padding: 8px; }
/* Square QR assets keep their intrinsic ratio without percentage-height cropping. */
.nafa-site .footer-qr-box img { display: block; width: 100%; height: auto; }
.nafa-site .footer-qr-link { transition: box-shadow 150ms ease; }
.nafa-site .footer-qr-link:hover,
.nafa-site .footer-qr-link:focus-visible { box-shadow: 0 0 0 3px #ebe42d; }
.nafa-site .footer-uen { text-align: right; }
.nafa-site .nav-links a.active { color: #fff; }
.nafa-site .btn-yellow { background: #ebe42d; color: #000 !important; }
.nafa-site .btn-yellow:hover { background: #fff !important; }
.nafa-site .reveal { opacity: 1; transform: none; transition: opacity 640ms ease, transform 640ms ease; }
.nafa-site .reveal.nafa-reveal-ready:not(.visible) { opacity: 0; transform: translateY(24px); }
.nafa-site :where(a[href], button, input, select, textarea, summary, [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: 3px solid #2553c8; outline-offset: 5px; }
.nafa-site [tabindex="-1"]:focus { outline: none; }
.nafa-site .nav :focus-visible, .nafa-site .mobile-drawer :focus-visible { outline-color: #ebe42d; }
.nafa-site [aria-disabled="true"] { cursor: default; }
.nafa-site .skip-link { position: fixed; top: -100px; left: 12px; z-index: 1000; background: #fff; color: #000; padding: 12px 18px; }
.nafa-site .skip-link:focus { top: 12px; }
body.nafa-menu-open { overflow: hidden; }
/* The legacy close control remains a fallback; common.js hides it and moves the hamburger into the drawer header. */
.nafa-site .mobile-drawer-close { position: fixed; top: 14px; right: var(--side-pad); width: 44px; height: 44px; padding: 0; color: #fff; background: transparent; border: 0; font-size: 0; line-height: 1; cursor: pointer; z-index: 1; }
.nafa-site .mobile-drawer-close::before,
.nafa-site .mobile-drawer-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.nafa-site .mobile-drawer-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.nafa-site .mobile-drawer { overflow-y: auto; z-index: 300; }
@media (max-width: 768px) { .nafa-site .footer-uen { text-align: left; } }
@media (min-width: 769px) and (max-width: 1100px) {
 .nafa-site .nav-links, .nafa-site .nav-right { display: none; }
 .nafa-site .hamburger { display: flex; }
 .nafa-site .nav-logo img { width: 220px; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
 .nafa-site *, .nafa-site *::before, .nafa-site *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
 .nafa-site .reveal.nafa-reveal-ready:not(.visible) { opacity: 1; transform: none; }
}

/* One content measure and gutter scale for every Sitefinity page. */
.nafa-site, .nafa-site.nafa-site--home { --content-max: 1440px; --side-pad: 24px; --align-pad: max(var(--side-pad), calc((100% - var(--content-max)) / 2)); }
.nafa-site .nav, .nafa-site .site-footer { padding-inline: var(--align-pad); }
.nafa-site .footer-main, .nafa-site .footer-bottom { max-width: var(--content-max); margin-inline: auto; }
.nafa-site .nav-logo { min-width: 0; max-width: calc(100% - 60px); }
.nafa-site .hamburger { flex-shrink: 0; width: 44px; height: 44px; align-items: flex-end; }
@media (max-width: 768px) { .nafa-site, .nafa-site.nafa-site--home { --side-pad: 20px; } }

/* Shared QR popup: native modal keeps the background inert and traps focus. */
/* Leave the page scrollbar visible and allow scrolling behind the popup. */
.nafa-site .nafa-qr-dialog {
  width: min(380px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 64px 24px 24px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 20px;
  background: #fff;
  color: #111;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
  overflow: auto;
  overscroll-behavior: contain;
  text-align: center;
}
.nafa-site .nafa-qr-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.nafa-site .nafa-qr-dialog[open] { animation: nafa-qr-enter 180ms ease-out; }
.nafa-site .nafa-qr-dialog-close {
  position: absolute; top: 12px; right: 12px;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: #111; color: #fff;
  font-size: 30px; line-height: 1; cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.nafa-site .nafa-qr-dialog-close:hover { background: #ebe42d; color: #111; }
.nafa-site .nafa-qr-dialog-title { margin: 0 0 16px; font-size: 20px; line-height: 1.4; font-weight: 500; }
.nafa-site .nafa-qr-dialog-code {
  /* Keep the QR large; the dialog scrolls in short landscape windows. */
  width: min(280px, 100%);
  min-width: 120px; max-width: 100%; margin: 0 auto;
}
.nafa-site .nafa-qr-dialog-description { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: #555; }
@keyframes nafa-qr-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .nafa-site .nafa-qr-dialog[open] { animation: none; }
  .nafa-site .nafa-qr-dialog-close { transition: none; }
}

/* The menu header stays at the top while links scroll beneath it. */
.nafa-site .mobile-drawer-header { position: sticky; top: 0; z-index: 2; display: flex; flex: 0 0 72px; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; margin-bottom: 8px; background: #000; }
.nafa-site .mobile-drawer .mobile-drawer-logo { display: flex; flex: 0 1 220px; align-items: center; width: 220px; max-width: calc(100% - 56px); padding: 0; margin: 0; border: 0; }
.nafa-site .mobile-drawer .mobile-drawer-logo img { display: block; width: 100%; height: auto; object-fit: contain; filter: invert(1); }

/* Mobile footer QR tiles: 80% of their normal column width, with matching captions. */
@media (max-width: 768px) {
  .nafa-site .site-footer .footer-qr-area { width: 250.4px; gap: 20px; }
  .nafa-site .site-footer .footer-qr-box { width: 100%; max-width: 115.2px; }
}

/* Shared header dropdowns, matching the supplied sticky reference. */

/* Modern simple desktop dropdown demo */
@media (min-width: 1101px) {
  /* Keep the main navigation visible on scroll, matching the site's original black sticky state. */
  .nafa-site .nav {
    position: sticky !important;
    top: 0;
    z-index: 160;
  }

  .nafa-site .nav.scrolled {
    background: rgba(0, 0, 0, .96) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(255,255,255,.08);
  }

  .nafa-site .nav-links > .nav-item-dropdown {
    position: relative;
  }

  .nafa-site .nav-dropdown-trigger {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
  }

  .nafa-site .nav-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    width: 320px;
    transform: translateY(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #fff;
    color: #111;
    border-top: 3px solid #EBE42D;
    box-shadow: 0 18px 50px rgba(0,0,0,.14);
    transition: opacity .2s ease, transform .24s ease, visibility .2s ease;
    z-index: 1200;
  }

  .nafa-site .nav-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -17px;
    height: 17px;
  }

  .nafa-site .nav-dropdown-inner {
    padding: 18px 22px 16px;
  }

  .nafa-site .nav-dropdown-kicker {
    display: block;
    margin: 0 0 10px;
    color: #777;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .04em;
  }

  .nafa-site .nav-dropdown a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 46px;
    padding: 0 !important;
    color: #111 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.4;
    text-decoration: none !important;
    border-top: 1px solid #e9e9e9;
    transition: color .18s ease, padding-left .18s ease;
  }

  .nafa-site .nav-dropdown a:first-of-type {
    border-top: 0;
  }

  .nafa-site .nav-dropdown-arrow {
    flex: 0 0 auto;
    color: #111;
    font-size: 14px;
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity .18s ease, transform .18s ease;
  }

  .nafa-site .nav-dropdown a:hover,
  .nafa-site .nav-dropdown a:focus-visible {
    color: #111 !important;
    padding-left: 5px !important;
    outline: none;
  }

  .nafa-site .nav-dropdown a:hover .nav-dropdown-arrow,
  .nafa-site .nav-dropdown a:focus-visible .nav-dropdown-arrow {
    opacity: 1;
    transform: translateX(0);
  }

  .nafa-site .nav-item-dropdown.is-open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (max-width: 1100px) {
  .nafa-site .nav-dropdown { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
 .nafa-site .nav-dropdown, .nafa-site .nav-dropdown a, .nafa-site .nav-dropdown-arrow { transition: none; }
}

/* Always-visible secondary links in the mobile drawer. */
.nafa-site .mobile-drawer > a, .nafa-site .mobile-menu-group { flex-shrink: 0; }
.nafa-site .mobile-menu-group { border-bottom: 1px solid rgba(255,255,255,.10); }
.nafa-site .mobile-menu-group > a { border-bottom: 0; padding-bottom: 8px; }
.nafa-site .mobile-submenu { list-style: none; margin: 0; padding: 0 0 12px 16px; }
.nafa-site .mobile-submenu a { font-size: 16px; font-weight: 500; line-height: 1.5; min-height: 44px; padding: 10px 0; border-bottom: 0; }