/* Velocity Arena site header (ribbon) — extracted from style.css so pages
   with their own card/component styles can include just the ribbon without
   inheriting layout collisions. Imports the design tokens so colors stay
   consistent with the rest of the site. */
@import url('/styles/va-tokens.css');

#site-header { font-family: var(--font-sans); }

.site-header{background:var(--navy);padding-bottom:2em;border-bottom:0.1875rem solid var(--cyan);}
.header-inner{max-width:90rem;margin:0 auto;padding:1.75rem 2rem 0;display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem;}
.logo-block{text-decoration:none;}
.logo-program{font-size:0.75rem;font-weight:700;color:var(--cyan);text-transform:uppercase;letter-spacing:.1em;margin-bottom:0.375rem;}
.logo-name{font-size:2.625rem;font-weight:800;color:var(--white);letter-spacing:-.02em;line-height:1;}
.logo-name span{color:var(--cyan);}
.logo-sub{font-size:0.875rem;color:var(--slate);margin-top:0.5rem;font-weight:400;}
.header-robot{width:5rem;height:5rem;background:var(--navy2);border:0.125rem solid var(--cyan);border-radius:0.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:0.25rem;}
.header-robot svg{width:2.875rem;height:2.875rem;}

.site-picker{display:flex;flex-direction:column;gap:0.25rem;margin-bottom:0.25rem;}
.site-picker label{font-size:0.625rem;font-weight:700;color:var(--cyan);text-transform:uppercase;letter-spacing:.08em;}
.site-picker select{background:var(--navy2);color:var(--white);border:0.09375rem solid var(--navy3);border-radius:0.375rem;padding:0.4375rem 0.625rem;font-family:var(--font-sans);font-size:0.8125rem;font-weight:600;cursor:pointer;outline:none;transition:border-color .15s;min-width:8rem;}
.site-picker select:hover{border-color:var(--cyan);}
.site-picker select:focus{border-color:var(--cyan);}
.site-picker option{background:var(--navy2);color:var(--white);}

.site-nav{background:var(--navy);border-bottom:0.0625rem solid var(--border);}
.nav-inner{max-width:90rem;margin:0 auto;padding:0 2rem;display:flex;gap:0;flex-wrap:wrap;}
.nav-link{font-size:0.6875rem;font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;padding:0.875rem 0.75rem 1.125rem;border-bottom:0.1875rem solid transparent;text-decoration:none;display:block;transition:color .15s;white-space:nowrap;font-family:var(--font-sans);}
.nav-link:hover{color:var(--white);}
.nav-link.active{color:var(--cyan);border-bottom-color:var(--cyan);}

.site-footer{background:var(--navy2);border-top:0.0625rem solid var(--border);padding:1.5rem 1.75rem;text-align:center;font-size:0.875rem;color:var(--slate);font-family:var(--font-sans);}
.site-footer a{color:var(--cyan);text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}

/* ── PHONES / NARROW WINDOWS ─────────────────────────────────────────────
   .header-inner is a non-wrapping flex row, and its right-hand cluster
   (site picker + NYC FIRST logo + robot button) measures ~426px on its own.
   On a 390px phone that forced the whole header — and therefore every page
   using it — to ~1025px, giving the entire site a horizontal scrollbar.

   These rules only add behaviour below 768px; the desktop layout above that
   width is untouched. */

@media (max-width: 767px){
  .header-inner{
    flex-wrap:wrap;              /* let the right cluster drop to its own line */
    align-items:flex-start;
    padding:1.25rem 1rem 0;
    gap:0.875rem;
  }
  .logo-block{flex:1 1 100%;}
  .logo-name{font-size:1.875rem;}
  .logo-program{font-size:0.6875rem;}
  .logo-sub{font-size:0.8125rem;margin-top:0.375rem;}

  /* The cluster is a bare inline-styled div, so it's reached through the
     child selector rather than a class of its own. */
  .header-inner > div{flex:1 1 100%;flex-wrap:wrap;}

  .site-picker{flex:1 1 auto;}
  .site-picker select{width:100%;min-width:0;padding:0.625rem;font-size:1rem;}

  .site-header{padding-bottom:1.25rem;}
  .nav-inner{padding:0 0.5rem;}
  .nav-link{padding:0.75rem 0.625rem 0.875rem;font-size:0.6875rem;}
}

@media (max-width: 480px){
  .header-inner{padding:1rem 0.875rem 0;}
  .logo-name{font-size:1.625rem;}
  .logo-sub{display:none;}          /* the long strapline wraps to 3+ lines */
  .header-robot{display:none;}      /* decorative; the logo already links home */
  .header-inner > div img{height:36px;}
}