/* ============================================================
   nav-drawer.css
   Mobile menu drawer + desktop "Sign In | Register" split menu.
   Replaces: bottom-app-dock (removed) and the old plain
   "Login / Sign Up" pill.

   Uses only the design tokens every public page already defines
   (--primary, --border, --text-*, --radius-*) — no new colors.
   Loaded on every public page (layouts/public.blade.php, home.blade.php,
   trainers/index.blade.php) alongside nav-drawer.js.
   ============================================================ */

/* Self-contained: home.blade.php and trainers/index.blade.php don't load
   public-shell.css, so this can't rely on its .sr-only existing. Same
   definition, duplicated safely (identical rule wins either way). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Self-contained keyboard-focus ring for everything in this file, so the
   drawer/auth-menu look right even if a future page includes this CSS
   without also loading public-shell.css's global :focus-visible rule. */
.header-hamburger-btn:focus-visible,
.auth-menu-wrap :focus-visible,
.nav-drawer :focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 2px;
}

/* ---------- Header search: icon opens a panel — dropdown on desktop, full-screen on mobile ---------- */
.header-search-wrap { position: relative; }

/* Self-contained copy of the /search page's input-box styling: search.css
   isn't loaded on every page this ships on, so this can't depend on it.
   Same rule either way — if both ever load together, nothing changes. */
.ss-form { position: relative; }
.header-search-top .ss-form { flex: 1 1 auto; min-width: 0; } /* fill the row instead of shrink-wrapping the input */
.ss-box {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1.5px solid var(--border, #e2e8f0); border-radius: var(--radius-full, 999px);
  padding: 5px 6px 5px 8px; transition: var(--transition, all .2s ease);
}
.ss-box:focus-within { border-color: var(--primary, #2563eb); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); }
.hs-submit {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; color: var(--text-subtle, #94a3b8); font-size: 1.15rem;
}
.ss-box:focus-within .hs-submit { color: var(--primary, #2563eb); }
.ss-box input[type="search"] {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit;
  font-size: 16px; /* iOS doesn't zoom the page on focus at 16px+ */ color: var(--text-main, #0f172a); padding: 10px 0;
  -webkit-appearance: none; appearance: none;
}
.ss-box input[type="search"]::-webkit-search-cancel-button,
.ss-box input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.ss-box input::placeholder { color: var(--text-subtle, #94a3b8); }
.ss-clear { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--text-subtle, #94a3b8); font-size: 1.15rem; }
.ss-clear:hover { color: var(--text-main, #0f172a); background: #f1f5f9; }

.header-search-panel {
  background: #fff; opacity: 0; visibility: hidden; pointer-events: none;
}
.header-search-panel.open { opacity: 1; visibility: visible; pointer-events: auto; }
.header-search-top { display: flex; align-items: center; gap: 8px; }
.header-search-close {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #f1f5f9;
  display: flex; align-items: center; justify-content: center; color: var(--text-main, #0f172a); font-size: 1.1rem;
}
.header-search-close:active { transform: scale(0.92); }

/* The suggestions list (search-suggest.js's .ss-panel) normally floats as
   its own separately-bordered, separately-shadowed card a few pixels below
   the input — fine on the homepage hero where it has a whole hero image of
   room to breathe. In this compact header panel that read as two unrelated
   boxes stacked with an odd gap. Flattening it into the panel's own single
   card (one border, one shadow, input at the top, results flowing right
   below) is what actually reads as "one search box" the way Google's own
   suggestion dropdown does. */
.header-search-panel .ss-panel {
  position: static; margin-top: 10px; border: none; box-shadow: none; animation: none; background: transparent;
}
.header-search-panel .ss-panel[hidden] { display: none !important; }
.header-search-panel .ss-scroll { padding: 2px 0; max-height: min(50vh, 340px); }

/* Desktop: a compact dropdown card under the icon (GitHub / Notion pattern) —
   a full-screen takeover would feel heavy-handed on a pointer-driven screen.
   Same fade + rise used by .auth-menu-panel, so every header popover in this
   file opens the same way. */
@media (min-width: 768px) {
  .header-search-panel {
    position: absolute; top: calc(100% + 10px); right: 0; width: 340px;
    border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-md, 14px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14); padding: 14px; z-index: 1200;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
  }
  .header-search-panel.open { transform: translateY(0); }
  .header-search-close { display: none; } /* outside click / Esc closes it instead */
}

/* Mobile: full screen (Google / Airbnb / Booking pattern) — fingers need
   room a small dropdown can't give, and results need the whole screen.
   Rises in with a short ease-out, matching the drawer's motion. */
@media (max-width: 767px) {

  .header-search-panel {
    position: fixed; inset: 0; z-index: 4200;
    display: flex; flex-direction: column;
    padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
    transform: translateY(14px);
    transition: opacity .2s ease, transform .2s cubic-bezier(.22, .9, .35, 1), visibility .2s;
  }
  .header-search-panel.open { transform: translateY(0); }

  /* The suggestions box (search-suggest.js's .ss-panel) isn't a sibling of
     .header-search-top in the DOM — search-suggest.js appends it INSIDE
     the <form> itself (form.appendChild(panel)), since this form doesn't
     use the "float to <body>" mode the homepage hero search uses. That's
     two levels deeper than these rules used to assume. Two bugs followed:
       1. .ss-form was `flex: 0 0 auto` — with no width to shrink into,
          its content (including the pill rows nested inside it) sized to
          its own max-content width instead of the screen's, so the
          "Popular searches" / "Browse by skill" chips ran off the right
          edge instead of wrapping.
       2. .ss-panel's `flex: 1` had no effect, because its real parent
          (.ss-form) wasn't a flex container — so results never grew to
          fill the screen, leaving the dead white space below the chips.
     Fix: make .ss-form itself the flex column that stacks the input box
     above the results, and let that column (via .header-search-top) grow
     to fill the remaining height of the full-screen panel. */
  .header-search-top { flex: 1; min-height: 0; align-items: stretch; }
  .header-search-panel .ss-form {
    flex: 1 1 auto; min-width: 0; min-height: 0;
    display: flex; flex-direction: column;
  }
  .header-search-panel .ss-box { flex: 0 0 auto; }

  /* Mobile already flattens .ss-panel above (universal rule) — here it just
     needs to grow and scroll to fill the rest of the screen instead of
     stopping at a fixed max-height like the desktop dropdown does. */
  .header-search-panel .ss-panel {
    flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 14px;
  }
  .header-search-panel .ss-scroll { flex: 1; min-height: 0; max-height: none; }
  .header-search-panel .ss-panel[hidden] { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .header-search-panel { transition: none !important; }
}

/* ---------- Hamburger button (mobile only) ---------- */
.header-hamburger-btn {
  width: 36px; height: 36px; border-radius: 50%; background: #f1f5f9;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-main, #0f172a); font-size: 1.15rem;
  transition: var(--transition, all .2s ease); flex-shrink: 0;
}
.header-hamburger-btn:active { transform: scale(0.92); }
@media (min-width: 768px) { .header-hamburger-btn { display: none; } }

/* On mobile the header only shows logo + search + hamburger.
   Sign in / register and the account avatar move into the drawer. */
@media (max-width: 767px) {
  .auth-menu-wrap, .user-avatar-wrap, #headerLogoutForm { display: none !important; }
}

/* ---------- Desktop: "Sign In | Register" split menu ---------- */
.auth-menu-wrap { position: relative; }

.btn-auth-header {
  display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px;
  border-radius: 999px; background: var(--primary, #2563eb); color: #fff;
  font-size: 0.82rem; font-weight: 700; white-space: nowrap; border: none; cursor: pointer;
  transition: var(--transition, all .2s ease);
}
.btn-auth-header:hover { background: var(--primary-hover, #1d4ed8); }
.btn-auth-header .auth-divider { opacity: .55; font-weight: 400; }
.btn-auth-header i { font-size: 1rem; transition: transform .18s ease; }
.auth-menu-wrap.open .btn-auth-header i { transform: rotate(180deg); }

.auth-menu-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 264px;
  background: #fff; border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius-md, 14px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14); padding: 6px; z-index: 1200;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.auth-menu-wrap.open .auth-menu-panel { opacity: 1; visibility: visible; transform: translateY(0); }

.auth-menu-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; }
.auth-menu-item:hover { background: var(--primary-light, #eff6ff); }
.auth-menu-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--primary-light, #eff6ff); color: var(--primary, #2563eb);
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.auth-menu-item strong { display: block; font-size: 0.86rem; font-weight: 700; color: var(--text-main, #0f172a); }
.auth-menu-item small { display: block; font-size: 0.72rem; color: var(--text-muted, #64748b); font-weight: 500; }

/* ---------- Mobile drawer ---------- */
.nav-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 3990;
  opacity: 0; transition: opacity .22s ease;
}
.nav-drawer-backdrop.show { opacity: 1; }

.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 82%; max-width: 320px;
  background: #fff; z-index: 4000; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.22, .9, .35, 1);
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.14);
}
.nav-drawer.open { transform: translateX(0); }
@media (min-width: 768px) { .nav-drawer, .nav-drawer-backdrop { display: none !important; } }

.nav-drawer-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border, #e2e8f0); flex-shrink: 0;
}
.nav-drawer-title { font-size: 0.95rem; font-weight: 800; color: var(--text-main, #0f172a); }
.nav-drawer-close {
  width: 34px; height: 34px; border-radius: 50%; background: #f1f5f9;
  display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--text-main, #0f172a);
}
.nav-drawer-close:active { transform: scale(0.92); }

.nav-drawer-user {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--border, #e2e8f0); flex-shrink: 0;
}
.nav-drawer-user img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--primary, #2563eb); }
.nav-drawer-user strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--text-main, #0f172a); }
.nav-drawer-user small { display: block; font-size: 0.74rem; color: var(--text-muted, #64748b); text-transform: capitalize; }

.nav-drawer-menu { flex: 1; overflow-y: auto; padding: 10px 10px 4px; }
.nav-drawer-item {
  display: block; padding: 12px; border-radius: 10px; font-size: 0.9rem; font-weight: 600;
  color: var(--text-main, #0f172a); margin-bottom: 2px;
}
.nav-drawer-item.active { background: var(--primary-light, #eff6ff); color: var(--primary, #2563eb); font-weight: 700; }

.nav-drawer-bottom {
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border, #e2e8f0); flex-shrink: 0;
}
.nav-drawer-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px;
  border-radius: 12px; background: var(--primary, #2563eb); color: #fff; font-size: 0.88rem; font-weight: 700;
}
.nav-drawer-cta i { font-size: 1.05rem; }
.nav-drawer-cta:active { transform: scale(0.98); }

.nav-drawer-signin-label {
  text-align: center; font-size: 0.68rem; font-weight: 700; letter-spacing: .04em;
  color: var(--text-muted, #64748b); text-transform: uppercase; margin: 14px 0 8px;
}
.nav-drawer-role-row { display: flex; gap: 8px; }
.nav-drawer-role-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  height: 58px; border-radius: 12px; border: 1px solid var(--border, #e2e8f0);
  font-size: 0.74rem; font-weight: 700; color: var(--text-main, #0f172a);
}
.nav-drawer-role-btn:active { transform: scale(0.97); background: var(--primary-light, #eff6ff); }
.nav-drawer-role-btn i { font-size: 1.1rem; color: var(--primary, #2563eb); }

.nav-drawer-logout {
  width: 100%; margin-top: 8px; height: 44px; border-radius: 12px; border: 1px solid var(--border, #e2e8f0);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.85rem; font-weight: 700; color: var(--accent-red, #ef4444); background: #fff;
}
.nav-drawer-logout:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-drawer-backdrop, .auth-menu-panel, .btn-auth-header i { transition: none !important; }
}

/* Simple "Log In | Sign Up" pill (replaces the learner/trainer dropdown) */
.btn-auth-header.auth-simple { display: inline-flex; align-items: center; gap: 8px; }
.btn-auth-header.auth-simple a { color: inherit; text-decoration: none; font-weight: inherit; padding: 6px 2px; }
.btn-auth-header.auth-simple a:hover { text-decoration: underline; text-underline-offset: 3px; }