/* NYVS Phase 1E — responsive public header hotfix
   Scope: public header / brand / navigation presentation only.
   Goals:
   1) Site title must never collapse into one-character-per-line vertical text.
   2) Mobile header must stay compact instead of consuming half the viewport.
   3) Many configurable nav items scroll horizontally on phones instead of
      stacking into a very tall block.
   4) No route, config, database, homepage card, or report workflow changes. */

/* Desktop / notebook:
   keep the brand readable; when nav gets crowded it wraps as a group instead
   of squeezing the title into a narrow column. */
.public-header{
  height:auto !important;
  min-height:var(--public-header-height,82px);
  flex-wrap:wrap;
  column-gap:24px;
  row-gap:8px;
}

.public-header .brand{
  flex:0 0 auto;
  min-width:0;
  max-width:min(48vw,620px);
}

.public-header .brand-copy{
  min-width:0 !important;
  max-width:420px;
}

.public-header .brand strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  overflow-wrap:normal !important;
  word-break:keep-all;
}

.public-header .brand small{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.public-header .public-nav{
  flex:1 1 680px;
  min-width:0;
  justify-content:flex-end;
  flex-wrap:wrap;
}

.public-header .public-nav > a,
.public-header .public-nav > .public-nav-disabled{
  flex:0 0 auto;
  white-space:nowrap;
}

/* Tablet / narrower desktop:
   if the menu cannot share one line with the brand, move the menu below the
   brand without crushing the title. */
@media(max-width:1180px){
  .public-header{
    align-items:center !important;
  }

  .public-header .brand{
    max-width:100%;
  }

  .public-header .public-nav{
    flex-basis:100%;
    justify-content:flex-start !important;
  }
}

/* Phone:
   compact brand row + one horizontal scrolling nav strip.
   This prevents a large logo/title/nav stack from eating half the screen. */
@media(max-width:700px){
  .public-header{
    display:block !important;
    min-height:0 !important;
    padding:8px 10px 9px !important;
    position:sticky;
    top:0;
  }

  .public-header .brand{
    width:100%;
    max-width:100%;
    margin:0 0 7px !important;
    gap:9px !important;
    align-items:center;
  }

  .public-header .brand-mark.custom-logo.public-logo{
    height:min(var(--public-logo-size,120px),58px) !important;
    width:auto !important;
    max-width:92px !important;
    flex:0 0 auto !important;
  }

  .public-header .brand-mark.custom-logo.public-logo img{
    width:auto !important;
    height:100% !important;
    max-width:100% !important;
    object-fit:contain !important;
  }

  .public-header .brand-copy{
    display:block;
    flex:1 1 auto;
    min-width:0 !important;
    max-width:none !important;
  }

  .public-header .brand strong{
    display:block;
    max-width:100%;
    font-size:min(var(--public-title-size,22px),18px) !important;
    line-height:1.25 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    overflow-wrap:normal !important;
    word-break:keep-all !important;
  }

  /* Subtitle is useful on desktop, but on a phone it costs a full extra row. */
  .public-header .brand small{
    display:none !important;
  }

  .public-header .public-nav{
    display:flex !important;
    width:100%;
    max-width:100%;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:5px !important;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 0 2px;
    margin:0;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    overscroll-behavior-x:contain;
  }

  .public-header .public-nav > a,
  .public-header .public-nav > .public-nav-disabled{
    flex:0 0 auto !important;
    font-size:min(var(--public-nav-font-size,15px),14px) !important;
    line-height:1.2;
    padding:7px 9px !important;
    border-radius:min(var(--public-nav-radius,10px),9px) !important;
    white-space:nowrap !important;
  }
}

@media(max-width:420px){
  .public-header{
    padding-left:8px !important;
    padding-right:8px !important;
  }

  .public-header .brand-mark.custom-logo.public-logo{
    height:min(var(--public-logo-size,120px),50px) !important;
    max-width:80px !important;
  }

  .public-header .brand strong{
    font-size:min(var(--public-title-size,22px),16px) !important;
  }

  .public-header .public-nav > a,
  .public-header .public-nav > .public-nav-disabled{
    font-size:13px !important;
    padding:7px 8px !important;
  }
}