/* FashionMSP — shared mobile/responsive styles (loaded on every page). */

/* The mobile menu script clones the "Join the Community" CTA into the nav so it
   appears inside the hamburger. Hide that clone on desktop (the button already
   shows there); it's revealed only inside the open mobile menu below. */
.nav-links a.in-menu{ display: none; }

@media (max-width: 900px){
  html, body { overflow-x: hidden; }
  .wrap { padding-left: 22px !important; padding-right: 22px !important; }
  .nav-inner { padding-left: 22px !important; padding-right: 22px !important; }
  h1, h2, h3 { overflow-wrap: break-word; }
  .hero h1, header.head h1, .intro h1 { max-width: 100% !important; overflow-wrap: anywhere; }

  /* hamburger menu (JS adds .hasmenu + the button) */
  nav.hasmenu .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0 !important;
    background:#171512; padding:6px 22px 16px;
    display:none !important; box-shadow:0 22px 44px rgba(0,0,0,.4); z-index:60;
  }
  nav.hasmenu.mopen .nav-links{ display:flex !important; }
  nav.hasmenu.mopen .nav-links a.in-menu{ display:block !important; }
  nav.hasmenu .nav-links a{
    color:#e7ddce !important; padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,.09);
    font-size:13px !important; letter-spacing:.14em;
  }
  nav.hasmenu .fmsp-burger{ display:flex !important; }
  nav.hasmenu .nav-cta{ display:none !important; }
}

@media (max-width: 620px){
  .hero h1 { font-size: clamp(26px, 7.4vw, 40px) !important; }
  header.head h1 { font-size: clamp(25px, 7vw, 40px) !important; }
  .intro h1 { font-size: clamp(25px, 7vw, 40px) !important; }
  .hero-sub, header.head p { font-size: 16px !important; }
}

/* Home: the announcement bar + nav must stack (not overlap the logo) on phones */
@media (max-width: 900px){
  .topbar{ position: static !important; }
  .topbar ~ nav{ position: static !important; background: #141210; }
  .topbar ~ .hero{ height: auto !important; min-height: 66vh !important; }
  .topbar ~ .hero .inner{ padding-top: 40px !important; padding-bottom: 56px !important; }
}

/* No-overflow safety on phones: full-width stacked CTAs, constrained text */
@media (max-width: 620px){
  .hero p, header.head p, .psec .intro { max-width: 100% !important; }
  .cta2, .hero-ctas { flex-direction: column !important; align-items: stretch !important; }
  .cta2 > .btn, .hero-ctas > .btn { width: 100%; text-align: center; }
}

/* Legibility: soft shadow behind white hero copy over lighter photo crops on phones */
@media (max-width: 900px){
  .hero .inner{ text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.8); }
  .hero .inner .btn{ text-shadow: none; }
  .hero .scrim{ background: linear-gradient(to top, rgba(8,7,5,.95) 0%, rgba(8,7,5,.6) 48%, rgba(8,7,5,.5) 100%) !important; }
}

/* Homepage hero: focus the rotating photos on the outfit (crop faces) on phones */
@media (max-width: 640px){
  .hero .slide img{ object-position:center 62% !important; transform:scale(1.5) !important; animation:none !important; }
}

/* hamburger button (created by mobile.js) */
.fmsp-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; background:none; border:0; cursor:pointer; padding:8px; margin-left:auto; }
.fmsp-burger span{ display:block; width:24px; height:2px; background:currentColor; border-radius:2px; transition:.25s; }
nav.mopen .fmsp-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
nav.mopen .fmsp-burger span:nth-child(2){ opacity:0; }
nav.mopen .fmsp-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }