/* SUITS BESPOKE — PUBLIC RESPONSIVE SYSTEM */
html{scroll-behavior:smooth;overflow-x:hidden}
html,body{width:100%;max-width:100%;margin:0;padding:0;overflow-x:hidden}
body{min-width:0}
*,*::before,*::after{box-sizing:border-box}
img,video,svg,canvas,iframe{max-width:100%;height:auto}
input,textarea,select,button{max-width:100%;box-sizing:border-box}
#root{width:100%;max-width:100%;min-width:0;overflow-x:clip}
main,section,header,footer,nav,article,div,form{min-width:0}
.grid{min-width:0}
.grid>*{min-width:0}
.flex>*{min-width:0}
h1,h2,h3,h4,p,a,span,button,label{overflow-wrap:anywhere}

/* Shared content containers */
.public-container{width:100%;max-width:1400px;margin-inline:auto;padding-inline:40px}
.public-section{width:100%;max-width:100%;overflow:hidden}

/* Clean public navigation */
.site-nav{display:flex;align-items:center;gap:4px;min-width:0}
.site-nav-link{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 13px;border-radius:999px;white-space:nowrap;line-height:1}
.site-nav-link:hover{background:rgba(255,255,255,.05)}
.site-cta{white-space:nowrap;min-height:38px;padding-inline:18px;border-radius:999px}
.mobile-nav{width:100%;max-width:100%;padding:14px 20px 20px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.mobile-nav-link{display:flex;align-items:center;width:100%;min-height:44px;padding:11px 14px;border:1px solid rgba(255,255,255,.06);border-radius:10px;white-space:nowrap;line-height:1}

/* Prevent grid/flex children from forcing the viewport wider */
[class*="grid-cols-"]{min-width:0}

@media (max-width:1023px){
  .public-container{padding-inline:28px}
}

@media (max-width:767px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  #root{overflow-x:clip}
  .public-container{width:100%;max-width:100%;padding-inline:18px}

  /* Every 12-column public layout becomes a single fluid column. */
  .grid.grid-cols-12{grid-template-columns:minmax(0,1fr)!important;width:100%!important}
  .grid.grid-cols-12>*{grid-column:1 / -1!important;width:100%;max-width:100%;min-width:0}
  .grid.grid-cols-2{grid-template-columns:minmax(0,1fr)!important}
  .grid.grid-cols-3{grid-template-columns:minmax(0,1fr)!important}
  .grid.grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Reset large desktop paddings that make forms/cards feel cropped. */
  form{width:100%;max-width:100%;padding:22px!important}
  form .grid{width:100%;min-width:0}
  input,textarea,select{width:100%;min-width:0;font-size:16px!important}
  textarea{max-width:100%}

  /* Images/cards always stay inside the viewport. */
  .aspect-\[4\/5\],.aspect-\[16\/10\]{width:100%;max-width:100%}
  img{max-width:100%;}

  /* Typography tuned for narrow screens. */
  h1{max-width:100%;font-size:clamp(36px,11vw,52px)!important;line-height:.96!important}
  h2{max-width:100%;font-size:clamp(26px,8vw,38px)!important}
  p{max-width:100%}

  /* Public content cards */
  .p-8,.p-10{padding:20px!important}
  .px-10{padding-inline:18px!important}
  .px-8{padding-inline:18px!important}
  .gap-10{gap:22px!important}
  .gap-8{gap:18px!important}
  .gap-6{gap:16px!important}

  /* Mobile header */
  #custom-header{width:100%;max-width:100%;overflow:visible}
  #custom-header>div:first-child{width:100%;max-width:100%;padding-inline:16px!important}
  #custom-header .mobile-nav{position:absolute;left:0;right:0;width:100%;max-width:100%;}
  .mobile-nav-link{font-size:12px;letter-spacing:.24em}
}

@media (min-width:768px){
  .mobile-nav{display:none!important}
}

/* Fix images that were stored as relative paths by older uploads. */
.public-gallery-image{display:block;width:100%;height:100%;object-fit:cover}

/* Small touch-friendly controls without oversized buttons */
@media (max-width:767px){
  button,.site-cta{min-height:44px}
}

/* FINAL PUBLIC UI POLISH — compact navigation + true viewport fitting */
html,body{overflow-x:hidden!important}
body{min-width:0!important}
#custom-header{width:100%!important;max-width:100%!important}
#custom-header > div:first-child{min-height:60px;height:60px}
.site-nav{gap:2px!important}
.site-nav-link{min-height:34px!important;height:34px!important;padding:6px 10px!important;font-size:10px!important;letter-spacing:.16em!important;border-radius:7px!important}
.site-nav-link:hover{background:rgba(255,255,255,.055)}
.site-cta{height:34px!important;min-height:34px!important;padding:0 14px!important;font-size:9px!important;letter-spacing:.18em!important;border-radius:7px!important}

/* Never let a public page's content create a wider layout. */
body:not(.admin-body) main,
body:not(.admin-body) section,
body:not(.admin-body) article,
body:not(.admin-body) .max-w-\[1400px\],
body:not(.admin-body) .max-w-\[1200px\],
body:not(.admin-body) .max-w-\[1100px\],
body:not(.admin-body) .max-w-\[1000px\]{max-width:100%;min-width:0}
body:not(.admin-body) [class*="col-span-"]{min-width:0;max-width:100%}
body:not(.admin-body) form,body:not(.admin-body) form *{min-width:0;max-width:100%}
body:not(.admin-body) input,body:not(.admin-body) textarea,body:not(.admin-body) select{width:100%;max-width:100%;min-width:0}
body:not(.admin-body) img{max-width:100%;}

@media (max-width:767px){
  #custom-header > div:first-child{height:60px;min-height:60px;padding-inline:14px!important}
  #custom-header .mobile-nav{top:60px!important}
  .mobile-nav{padding:10px 14px 14px!important;gap:6px!important}
  .mobile-nav-link{min-height:40px!important;height:40px!important;padding:9px 12px!important;font-size:11px!important;letter-spacing:.18em!important;border-radius:8px!important}
  #custom-header .site-cta{display:none!important}
  #custom-header .mobile-menu-btn{width:38px;height:38px}
  body:not(.admin-body) .max-w-\[1400px\]{padding-left:16px!important;padding-right:16px!important}
  body:not(.admin-body) form{padding:18px!important}
}

@media (min-width:768px){
  #custom-header .site-nav{margin-left:auto;margin-right:10px}
}

/* FINAL NAVIGATION SYSTEM — desktop + mobile */
#custom-header { min-height: 60px; }
#custom-header > div:first-child { height: 60px; min-height: 60px; }
.site-nav { gap: 6px !important; }
.site-nav-link {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
  border-radius: 7px !important;
  line-height: 1 !important;
}
.site-cta {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  font-size: 9px !important;
  letter-spacing: .18em !important;
  border-radius: 7px !important;
}
@media (min-width: 768px) {
  .mobile-nav { display: none !important; visibility: hidden !important; pointer-events: none !important; }
}
@media (max-width: 767px) {
  #custom-header > div:first-child { padding-inline: 14px !important; }
  .site-nav { display: none !important; }
  .mobile-nav {
    top: 60px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    padding: 14px !important;
    gap: 8px !important;
    background: #0A0A0A !important;
  }
  .mobile-nav-link {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    letter-spacing: .22em !important;
  }
}
/* React homepage mobile menu */
@media (min-width: 1024px) {
  .site-mobile-menu { display: none !important; visibility: hidden !important; pointer-events: none !important; }
}
@media (max-width: 1023px) {
  .site-mobile-menu { width: 100% !important; }
}

/* Homepage React menu button: visible only below desktop breakpoint */
@media (min-width: 1024px) {
  .site-mobile-toggle { display:none !important; }
}
@media (max-width: 1023px) {
  .site-mobile-toggle { display:inline-flex !important; width:46px !important; height:38px !important; min-height:38px !important; padding:0 !important; }
  .site-mobile-menu { padding:14px !important; }
  .site-mobile-menu nav { gap:8px !important; }
  .site-mobile-menu nav a { min-height:46px !important; height:46px !important; padding:0 14px !important; border-radius:8px !important; display:flex !important; align-items:center !important; }
}