/*
 * Noroozi PC — modern CSS layer (small; complements the legacy compiled main.min.css design).
 * Only defines the show/hide states our vanilla JS toggles (replacing the legacy jQuery plugins)
 * and an HTMX swap fade. The legacy stylesheet remains the visual source of truth.
 */

/* Search fields toggled by the header search buttons */
.header__search.is-hidden,
.header__mobilesearch.is-hidden { display: none; }
.header__search.is-open,
.header__mobilesearch.is-open { display: flex; }

/* Off-canvas mobile menu (opened by the hamburger) */
#navmobile { transition: opacity .3s ease, visibility .3s ease; }
#navmobile.is-open { transform: none; visibility: visible; opacity: 1; pointer-events: auto; }
@keyframes nav-stagger-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#navmobile.is-open .js-animation-stagger {
  animation: nav-stagger-in 1s ease-out both;
  animation-delay: calc(var(--stagger-index, 0) * .1s);
}

@media (prefers-reduced-motion: reduce) {
  #navmobile, #page-tabs li.is-slider { transition: none; }
  #navmobile.is-open .js-animation-stagger { animation: none; }
}
body.is-nav-open { overflow: hidden; }

/* Tab panels (bio/practice) — modern replacement for the jQuery Tabs plugin */
[data-tab-panel] { display: none; }
[data-tab-panel].is-active { display: block; }
/* Sliding tab indicator (legacy TweenMax x/width, 0.3s). JS sets transform + width inline. */
#page-tabs li.is-slider { transition: transform .3s cubic-bezier(.5, 1, .89, 1), width .3s cubic-bezier(.5, 1, .89, 1); }

/* HTMX swap fade for filtered lists (news search, etc.) */
.htmx-swapping { opacity: 0; transition: opacity 120ms ease-out; }

/* Header-search typeahead dropdown (vanilla; replaces bsn.AutoSuggest) */
.autosuggest { list-style: none; margin: 0; padding: 0; position: absolute; z-index: 50;
  background: #fff; color: #111; min-width: 220px; max-height: 320px; overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.autosuggest li { margin: 0; }
.autosuggest a { display: block; padding: 8px 12px; text-decoration: none; color: inherit; font-size: 14px; }
.autosuggest a:hover, .autosuggest a:focus { background: #f2f2f2; }
.header__search-input { position: relative; }
.header__search-input > .autosuggest {
  left: 0; right: 0; top: 100%; margin-top: 0; width: auto; min-width: 0;
  font-size: 14px; text-transform: uppercase;
}
.header__search-input > .autosuggest a { padding: 10px; }
.autosuggest em { font-style: normal; font-weight: 700; }

/* Keep the native select in the form while exposing its accessible custom control. */
.jcf-hidden { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0, 0, 0, 0); pointer-events:none; }