@import url('./project-visuals.css?v=20260917-1');

/* Final mobile header alignment — single real row */
@media (max-width:760px){
  .site-header{
    width:calc(100% - 28px) !important;
    height:60px !important;
    min-height:60px !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) 44px !important;
    grid-template-rows:60px !important;
    align-items:center !important;
    column-gap:8px !important;
    padding:0 !important;
    margin:0 auto !important;
    position:relative !important;
    overflow:visible !important;
  }

  /* Keep the star in column 1, but make the nav position relative to the whole header */
  .site-header .header-left{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:center !important;
    justify-self:start !important;
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
    position:static !important;
    z-index:95 !important;
  }

  .site-header .brand-mark{
    width:26px !important;
    height:26px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    position:relative !important;
    z-index:96 !important;
  }

  .site-header .brand-mark span{
    display:block !important;
    line-height:1 !important;
  }

  .site-header .star-travel-manifesto{
    grid-column:2 !important;
    grid-row:1 !important;
    position:relative !important;
    left:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    align-self:center !important;
    justify-self:center !important;
    width:min(230px,100%) !important;
    min-width:0 !important;
    height:24px !important;
    margin:0 !important;
    padding:0 0 0 14px !important;
    overflow:hidden !important;
    line-height:24px !important;
    z-index:70 !important;
    pointer-events:none !important;
  }

  .site-header .manifesto-words{
    width:100% !important;
    height:24px !important;
    display:grid !important;
    grid-template-columns:58px 66px 42px !important;
    column-gap:10px !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
  }

  .site-header .travel-word{
    display:block !important;
    line-height:24px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .site-header .travel-star{
    top:50% !important;
  }

  .site-header .menu-toggle{
    grid-column:3 !important;
    grid-row:1 !important;
    align-self:center !important;
    justify-self:end !important;
    width:44px !important;
    height:44px !important;
    margin:0 !important;
    padding:4px 0 !important;
    display:block !important;
    position:relative !important;
    z-index:100 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
  }

  /* Full-width dropdown anchored to the whole mobile header */
  .site-header .desktop-nav.open{
    display:flex !important;
    position:absolute !important;
    top:60px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    padding:28px 24px 30px !important;
    margin:0 !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:18px !important;
    background:var(--bg) !important;
    border-top:1px solid var(--line) !important;
    border-bottom:1px solid var(--line) !important;
    box-shadow:0 18px 34px rgba(17,17,17,.07) !important;
    z-index:120 !important;
    overflow:visible !important;
  }

  .site-header .desktop-nav.open a{
    display:block !important;
    width:auto !important;
    max-width:100% !important;
    padding:2px 0 !important;
    margin:0 !important;
    white-space:nowrap !important;
    font-family:"Cormorant Garamond", Georgia, serif !important;
    font-size:26px !important;
    font-weight:500 !important;
    line-height:1.08 !important;
  }

  .site-header .desktop-nav.open a::after{
    bottom:-4px !important;
  }
}

@media (max-width:380px){
  .site-header{
    grid-template-columns:30px minmax(0,1fr) 40px !important;
    column-gap:6px !important;
  }

  .site-header .star-travel-manifesto{
    width:min(210px,100%) !important;
    padding-left:12px !important;
  }

  .site-header .desktop-nav.open{
    padding:24px 20px 26px !important;
  }

  .site-header .desktop-nav.open a{
    font-size:24px !important;
  }
}