/* SourceUSA shared responsive layer: one mobile menu pattern for every header design, plus overflow guards. */

/* ---- general overflow guards ---- */
html,body{max-width:100%;overflow-x:clip}
img,video,canvas,iframe,svg{max-width:100%}
p,li,td,th,dd,dt,h1,h2,h3,h4,label,a{overflow-wrap:break-word}
pre{white-space:pre-wrap;overflow-wrap:anywhere}
input,select,textarea,button{max-width:100%}

/* ---- language switcher: never wider than the screen ---- */
.sourceusa-language-switch{box-sizing:border-box;max-width:100%}
@media (max-width:1280px){
  header .sourceusa-language-switch label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  header .sourceusa-language-switch select{max-width:150px}
}
@media (max-width:850px){
  .sourceusa-language-switch{width:auto;margin:6px 0;padding:0 12px;justify-content:flex-end}
  body>.sourceusa-language-switch{display:flex;width:100%}
}

/* ---- hamburger + drawer (added by sourceusa-responsive.js) ---- */
.sx-burger,.sx-drawer{display:none}
@media (max-width:980px){
  header[data-sx-resp]{position:relative}
  header[data-sx-resp] .menu-toggle{display:none!important}
  .sx-bar{display:flex!important;flex-direction:row!important;position:relative!important;box-shadow:none;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;grid-template-columns:none!important;min-height:64px;padding-top:8px;padding-bottom:8px;box-sizing:border-box}
  .sx-bar>a:first-child img,.sx-bar .brand img,.sx-bar .usa-brand img,.sx-bar .v10-logo img{max-height:52px;width:auto;max-width:58vw}
  .sx-bar .brand{min-width:0}
  .sx-burger{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:46px;height:46px;flex:none;margin-left:auto;padding:0;border:1px solid rgba(128,128,128,.4);border-radius:10px;background:transparent;color:inherit;cursor:pointer}
  .sx-burger span{display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
  header.sx-open .sx-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.sx-open .sx-burger span:nth-child(2){opacity:0}
  header.sx-open .sx-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .sx-drawer{flex:0 0 100%;width:100%;order:99;box-sizing:border-box;max-height:calc(100vh - 90px);overflow-y:auto;padding:4px 2px 14px}
  header.sx-open .sx-drawer{display:block}
  .sx-drawer>nav,.sx-drawer>.nav,.sx-drawer>.usa-nav,.sx-drawer>.nav-left,.sx-drawer>.nav-right,.sx-drawer>.v10-actions,.sx-drawer>.header-actions,.sx-drawer>.head-actions{display:flex!important;flex-direction:column!important;align-items:stretch!important;position:static!important;width:100%!important;margin:0!important;padding:0!important;gap:0!important;border:0!important;box-shadow:none!important;background:transparent!important;font-size:0;transform:none!important}
  .sx-drawer a{display:block!important;font-size:16px!important;line-height:1.3!important;padding:13px 6px!important;margin:0!important;border:0!important;border-bottom:1px solid rgba(128,128,128,.22)!important;border-radius:0!important;text-align:left!important;white-space:normal!important;background:transparent!important;color:inherit!important;min-height:0!important;height:auto!important;box-shadow:none!important}
  .sx-drawer a.active{font-weight:700;text-decoration:underline}
  .sx-drawer>.v10-actions,.sx-drawer>.header-actions,.sx-drawer>.head-actions{flex-direction:row!important;gap:10px!important;padding-top:12px!important}
  .sx-drawer>.v10-actions a,.sx-drawer>.header-actions a,.sx-drawer>.head-actions a{flex:1;text-align:center!important;border:1px solid rgba(128,128,128,.4)!important;border-radius:8px!important;font-weight:700!important}
  .sx-drawer>.v10-actions a.join,.sx-drawer>.header-actions a.join{background:#d71920!important;border-color:#d71920!important;color:#fff!important}
  .sx-drawer>.sourceusa-language-switch{display:flex!important;width:100%;justify-content:space-between;margin:12px 0 0;padding:0 6px;font-size:14px}
  .sx-drawer>.sourceusa-language-switch label{position:static;width:auto;height:auto;clip:auto}
  .sx-drawer>.sourceusa-language-switch select{max-width:60%}
  /* simple headers (one or two links) just wrap */
  header.sx-simple{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
}

/* ---- page layouts: single-column grids must shrink to the screen, not to their widest content ---- */
@media (max-width:980px){
  .v11-top-grid,.market-shell,.profile-main{grid-template-columns:minmax(0,1fr)!important}
  .v11-top-grid>*,.market-shell>*,.profile-main>*{min-width:0}
  .tabs .wrap{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .tabs .wrap>a{flex:none}
}
@media (max-width:600px){
  .pagehead .wrap{flex-wrap:wrap}
  .pagehead .wrap>div{min-width:0;flex:1 1 200px}
  .pagehead h1{font-size:26px}
  .pagehead img{width:96px;height:48px}
}
/* ---- homepage/advertise menu bar between tablet and full desktop ---- */
@media (min-width:981px) and (max-width:1280px){
  .v10-header{padding:0 16px;gap:12px}
  .v10-logo{width:180px;flex:none}
  .v10-header nav{gap:14px}
  .v10-header nav a{font-size:13px}
  .v10-actions a{padding:9px 12px}
  .v10-header .sourceusa-language-switch{margin:0}
}
@media (min-width:981px) and (max-width:1100px){
  .v10-header nav{gap:10px}
  .v10-header .sourceusa-language-switch select{max-width:118px}
}
/* ---- homepage hero search and category icons on phones ---- */
@media (max-width:600px){
  .v10-hero{padding:56px 18px 40px!important;min-height:0}
  .v10-copy h1{font-size:24px}
  .v10-copy p{font-size:16px}
  .v10-search input{min-width:0;padding:0 12px}
  .v10-search button{padding:0 18px}
  .v10-cats{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:14px}
  .v10-cats i{width:54px;height:54px;font-size:26px;padding-top:11px}
}
/* ---- drawer polish: solid panel, header grows with it, logo + button stay on one line ---- */
@media (max-width:980px){
  header[data-sx-resp]{height:auto!important;min-height:0!important}
  .sx-bar{flex-wrap:wrap!important}
  .sx-bar>a:first-child,.sx-bar>.brand,.sx-bar>.usa-brand,.sx-bar>.v10-logo{flex:0 1 auto!important;width:auto!important;max-width:calc(100% - 60px);margin:0!important;display:flex!important;align-items:center;gap:8px;text-align:left}
  .sx-bar .v10-logo img{height:56px}
  header[data-sx-resp] .brand-text{display:flex;flex-direction:column;font-size:13px;line-height:1.2}
  .sx-drawer{background:#fff;color:#0b2346;border-top:1px solid #e3e9f1;margin:0 -2px;padding-left:4px;padding-right:4px;border-radius:0 0 10px 10px}
  .sx-drawer a{color:#0b2346!important}
}