/* =====================================================================
   RIT - responsive corrections (linked last on every page).
   Desktop appearance is unchanged: every rule below either only applies
   below a breakpoint, or only stops content from escaping the viewport.
   Breakpoints: >=1600 | 1200-1599 | 1024-1199 | 768-1023 | 581-767 | 401-580 | <=400
   ===================================================================== */

/* ---- 0. nothing may create sideways scrolling (clip does not make a scroll container, sticky headers keep working) ---- */
html{max-width:100%;overflow-x:clip}
body{max-width:100%;overflow-x:clip}
img,video,canvas,svg{max-width:100%}
img,video{height:auto}
iframe,embed,object{max-width:100%}

/* ---- 1. desktop mega-menu: the right-hand panels open leftwards so they stay inside the screen ---- */
@media (min-width:1081px){
  header.site-header .main-nav > ul > li.has-dropdown:nth-last-child(-n+4) > .dropdown{left:auto;right:0}
  header.site-header .main-nav > ul > li.has-dropdown > .dropdown{max-width:calc(100vw - 24px)}
}
@media (min-width:1081px) and (max-width:1366px){
  header.site-header .main-nav > ul > li.has-dropdown:nth-child(-n+4) > .dropdown{left:0;right:auto}
}

/* ---- 1b. mobile / tablet drawer (<=1080): submenus are an in-drawer accordion on EVERY page.
   The desktop "<=1366px" rules (.dropdown{position:absolute;left:-110px}, min-width 420px !important) otherwise win
   on inner pages and leave the sub-links floating outside the drawer. ---- */
@media (max-width:1080px){
  header.site-header .main-nav .dropdown,
  header.site-header .main-nav .dropdown.mega-panel,
  header.site-header .main-nav .mega-panel--flat,
  header.site-header .main-nav .mega-panel--narrow{
    position:static !important;left:auto !important;right:auto !important;top:auto !important;
    min-width:0 !important;width:100% !important;max-width:100% !important;
    opacity:1 !important;visibility:visible !important;transform:none !important;
    box-shadow:none !important;border:0 !important;background:transparent !important;
    display:none;padding:6px 0 6px 12px !important;margin:0;
  }
  header.site-header .main-nav .has-dropdown.open > .dropdown{display:block}
  header.site-header .main-nav .has-dropdown{position:static}
  header.site-header .main-nav .mega-panel__grid{display:grid;grid-template-columns:1fr !important;gap:14px}
  header.site-header .main-nav .mega-panel--flat .mega-panel__links{columns:1}
  header.site-header .main-nav .mega-panel__links a{display:block;padding:7px 10px;font-size:14px;white-space:normal}
  header.site-header .main-nav{overflow-x:hidden}
}

/* ---- 2. grid / flex children may shrink (stops wide content stretching the whole page) ---- */
.about-layout > *,.about-main,.about-main > *,.content-card,.section-inner > *,.two-col > *,.row > *{min-width:0}
.about-main img,.content-card img,.section-inner img{max-width:100%}
.about-main iframe,.content-card iframe{max-width:100%}
.about-main,.content-card{overflow-wrap:break-word}

/* ---- 3. tables stay inside the page: wrappers scroll sideways instead of clipping ---- */
.fac-table-wrap,.table-wrap,.table-responsive,[class*="table-wrap"],[class*="table-scroll"]{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:767px){
  .about-main table,.content-card table,.section-inner table,main table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .fac-table-wrap table,.table-wrap table,.table-responsive table{display:table}
}

/* ---- 4. tablet (<=1023): sidebar layouts collapse ---- */
@media (max-width:1023px){
  .about-layout{grid-template-columns:1fr}
}

/* ---- 5. fluid headings that otherwise outgrow narrow screens ---- */
@media (max-width:767px){
  h1,h2,h3{overflow-wrap:break-word}
}

/* ---- 6. horizontal sliders keep their own scrolling, never widening the page ---- */
.uba-slider,.uba-slider-track,[class*="-slider-track"]{max-width:100%}

/* ---- 7. small phones ---- */
@media (max-width:400px){
  .container{padding-left:14px;padding-right:14px}
  .btn,.theme-btn{max-width:100%;white-space:normal}
}
