/* nf-mobile.css — mobile-only overrides for neurofibers.com
   every rule lives inside a max-width media query so desktop (>=1024px) is untouched */

/* ---------- phones + tablets: working nav overlay ---------- */
@media (max-width: 1023px) {

  /* bigger hit area for the hamburger without moving it visually */
  .wp-block-navigation__responsive-container-open {
    padding: 10px;
    margin: -10px;
    align-items: center;
    justify-content: center;
    color: var(--cream, #F5F1E8);
  }

  /* the open overlay: brand navy instead of the core white default */
  .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
    background: linear-gradient(160deg, #0d2540 0%, #050f1d 100%) !important;
    color: var(--cream, #F5F1E8) !important;
    padding: 1.25rem 1.5rem 2.5rem !important;
    overscroll-behavior: contain;
  }

  /* the theme hides this list below 1024px (.fibers-nav-desktop), so force it back inside the overlay */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 0 !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 3.5rem !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    display: block !important;
    width: 100%;
    border-bottom: 1px solid rgba(245, 241, 232, 0.12);
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: block !important;
    width: 100%;
    padding: 0.95rem 0 !important;
    font-family: var(--font-display, "Crimson Pro", serif);
    font-size: 1.5rem !important;
    font-weight: 400;
    letter-spacing: 0 !important;
    line-height: 1.2;
    color: rgba(245, 241, 232, 0.92) !important;
  }

  /* submenu (The FIG Procedure) shows indented under its parent.
     something shifts it by -50% once the overlay opens, hence the transform reset */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 0 0 1rem !important;
    gap: 0 !important;
  }

  /* repeated class beats the core rule that paints the submenu navy-deep */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
    border-bottom: 0;
    border-top: 1px solid rgba(245, 241, 232, 0.08);
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-family: var(--font-sans, "Roboto", sans-serif);
    font-size: 1rem !important;
    padding: 0.8rem 0 !important;
    color: rgba(245, 241, 232, 0.7) !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
    display: none !important;
  }

  /* close button: 44px target, clear of the overlay padding */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    top: 0.4rem;
    right: 0.2rem;
    padding: 10px;
    color: var(--cream, #F5F1E8);
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
    height: 28px;
    width: 28px;
  }

  /* phone CTA appended to the overlay by nf-mobile.js */
  .nf-mobile-nav-phone {
    display: block;
    margin-top: 1.75rem;
    padding: 0.9rem 1.25rem;
    border: 1px solid rgba(245, 241, 232, 0.35);
    border-radius: 9999px;
    text-align: center;
    font-size: 1rem;
    letter-spacing: 0.05em;
    color: var(--cream, #F5F1E8);
  }
}

/* the overlay phone CTA must never show in the desktop nav row */
@media (min-width: 1024px) {
  .nf-mobile-nav-phone {
    display: none !important;
  }
}

/* ---------- phones: typography, forms, tap targets ---------- */
@media (max-width: 640px) {

  /* 60px display headings do not wrap well at 390px; the two hero titles that
     already have their own mobile sizes are left alone */
  h1.wp-block-heading:not(.intake-hero__title):not(.fig-hero__title) {
    font-size: clamp(2.6rem, 11vw, 3.25rem) !important;
  }

  /* 11.2px eyebrow labels are hard to read on a phone */
  .eyebrow,
  h4.eyebrow,
  p.eyebrow {
    font-size: 0.8125rem !important;
    letter-spacing: 0.14em !important;
  }

  /* 13.3px form controls make iOS zoom the page on focus */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  input[type="search"],
  input:not([type]),
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100%;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  input:not([type]),
  select {
    min-height: 44px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
  }

  /* buttons and CTA links: legible label, thumb-sized target */
  .wp-block-button__link,
  .wp-element-button,
  button[type="submit"] {
    font-size: 0.9375rem !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* footer links were 20px tall and hard to hit */
  .fibers-footer__list li {
    margin-bottom: 0.25rem;
  }

  .fibers-footer__list a {
    display: inline-block;
    padding: 0.35rem 0;
  }

  /* the intake chat bubble is fixed bottom-right; keep the last footer line clear of it */
  .fibers-footer {
    padding-bottom: 5.5rem;
  }

  /* long emails / urls must not push the page wide */
  body {
    overflow-wrap: break-word;
  }

  img,
  video,
  iframe,
  table {
    max-width: 100%;
  }

  table {
    display: block;
    overflow-x: auto;
  }
}