/* Mobile header fix for KinkyVidz
   Goal:
   - On narrow screens: logo centered and larger, search below it full width
   - No clipping, no overflow
   - Do not touch your main style.css
*/

.header-flex{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
}

/* Ensure search can shrink and not overflow */
.header-search{
  min-width:0;
}
.header-search input{
  min-width:0;
  width:100%;
}

/* MOBILE: stack logo + search */
@media (max-width: 720px){
  .header-flex{
    flex-direction:column;
    align-items:center;
    gap:12px;
  }

  .brand{
    width:100%;
    display:flex;
    justify-content:center;
  }

  /* Big centered logo on mobile */
  .logo{
    width: min(320px, 92vw) !important;
    height: 56px !important;
    background-size: contain !important;
  }

  /* Search under logo */
  .header-search{
    width:100%;
    max-width: 560px;
    justify-content:center;
  }

  .header-search input{
    width:100%;
  }

  .header-search button{
    flex:0 0 auto;
    white-space:nowrap;
  }
}

/* VERY SMALL PHONES */
@media (max-width: 380px){
  .logo{
    width: min(280px, 94vw) !important;
    height: 50px !important;
  }
}