/* =====================================================================
   responsive.css  —  Majesty Group   (v7)
   Additive & non-destructive. Loaded AFTER css/StyleSheet.css.

   Root cause of the bugs: the white panels have hard-coded heights and
   the "What We Do" list is taller than its box AND uses floated items,
   so it overflowed onto the gray background.

   Fix (no flexbox, no device-specific breakpoint for the layout):
     1. Panels grow to fit their content (height:auto) at EVERY width.
     2. Panels CONTAIN their floats (display:flow-root) so nothing
        escapes onto the gray wrapper.
   The original 3-column desktop layout is kept as-is; a single <=992px
   rule stacks columns and reflows the header on small phones only.
   ===================================================================== */

/* ---- SEO helper (homepage H1) ---- */
.visually-hidden{
    position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---- Safe global guards ---- */
*{box-sizing:border-box;}
html,body{max-width:100%;overflow-x:hidden;}
img{max-width:100%;height:auto;}
iframe{max-width:100%;}
.headerlogo img,#demo1 img,#demo1 li img{width:100%!important;height:auto!important;}

/* =====================================================================
   UNIVERSAL FIX — applies at every width, no breakpoint, no flexbox
   ===================================================================== */

/* 1200px frame -> max-width so it never forces horizontal scrolling */
.content{width:auto!important;max-width:1200px!important;margin:0 auto;padding:0 10px;}
.top,.down{width:auto!important;height:auto!important;}

/* THE KEY RULES: panels grow with content AND contain their floats.
   display:flow-root is the modern clearfix — it makes the white box wrap
   around floated list items instead of letting them spill onto the gray. */
.lefttop,.leftbuttom,.middleContent,.righttop,.rightbuttom,
.downleftcontent,.downrightcontent{
    height:auto!important;min-height:0!important;
    overflow:visible!important;display:flow-root!important;
    padding-bottom:24px!important;
}

/* "Our Work" image strip had a fixed height + overflow:hidden -> release it */
.mm{height:auto!important;overflow:visible!important;margin-left:0!important;display:flow-root!important;}
.mm img{margin-right:0!important;}

/* The list/area wrappers inside the panels also clear their floats */
.do,.events,.team,.faceheader{display:flow-root!important;width:auto!important;}

/* =====================================================================
   SMALL SCREENS (<=992px) — stack to one column + reflow header.
   (Standard breakpoint; the fixes above already work at all widths.)
   ===================================================================== */
@media (max-width:992px){

    /* Columns stack */
    .left,.middle,.right{float:none!important;width:auto!important;margin:0 0 12px 0!important;}
    .downleft,.downright{float:none!important;width:auto!important;margin:0 0 12px 0!important;}

    /* HEADER: nav drops below the skyline instead of floating on it */
    #header,.header{position:static!important;height:auto!important;}
    .headerlogo{position:static!important;}
    .menuleft{position:static!important;float:none!important;width:100%!important;height:auto!important;right:auto;bottom:auto;text-align:center;padding:8px 0;}
    .logo{position:static!important;float:none!important;margin:0 auto!important;display:inline-block;}
    .logo img{width:auto!important;max-height:46px;}
    .menu{position:static!important;float:none!important;width:100%!important;height:auto!important;right:auto;bottom:auto;background-color:#c4161c;text-align:center;}
    .menu ul{margin:0;padding:6px 4px;list-style:none;}
    .menu ul li{float:none!important;display:inline-block;margin:2px 4px!important;letter-spacing:0;}
    .menu ul li a{font-size:16px;padding:8px 6px;display:inline-block;}

    /* Comfortable padding + readable copy */
    .lefttop,.leftbuttom,.middleContent,.righttop,.rightbuttom,
    .downleftcontent,.downrightcontent{padding:0 14px 24px!important;}
    .details{margin:16px 0!important;}
    .events{margin-left:0!important;}
    .do{margin-top:16px!important;}
    .content p{margin:8px 14px!important;font-size:16px;line-height:1.5;}

    /* Un-pin "Read More", fix download button + footer overlaps */
    .viewall{position:static!important;width:auto!important;right:auto!important;bottom:auto!important;margin:12px 0 0 0!important;text-align:center;}
    #header div[style*="absolute"]{position:static!important;margin:8px auto;text-align:center;}
    #footer,.footer{height:auto!important;}
    .footermap img[style*="absolute"]{position:static!important;height:auto!important;}

    /* Modals + social */
    .modal-demo{width:95vw!important;max-width:95vw!important;height:auto!important;min-height:0!important;padding:12px!important;}
    .modal-demo iframe{width:100%!important;height:60vw!important;}
    .downdown,.social{text-align:center;}
    .social a{display:inline-block;margin:6px;}
}

@media (max-width:420px){
    .menu ul li a{font-size:15px;}
    .content p{margin:8px 12px!important;}
}