/* =====================================================================
   Sonia Amin CPA - responsive layer  (loaded last, after Bootstrap)
   Desktop (>=901px): custom text header (.sa-nav) with the logo centered.
   Mobile  (<=900px): fixed top bar (logo + hamburger) and a slide-out
                      panel from the right, styled to match the site.
   ===================================================================== */

body { font-family: "Montserrat", Arial, Helvetica, sans-serif; }
html, body { max-width: 100%; overflow-x: hidden; }

/* Remove the legacy CMS image menu + its burger overlay, and the old
   Bootstrap navbar (replaced by the custom menu below). */
[id^="mbmcpebul"],
ul.mbmcpebul_menulist,
.mbmcpebul_menulist,
#flatpack-mobile-nav { display: none !important; }

/* ---------- Desktop text header (.sa-nav inside the fixed .header) ---------- */
.header table { width: 100% !important; }
.sa-nav { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1150px; margin: 0 auto; height: 145px; padding: 0 30px; box-sizing: border-box; }
.sa-nav .sa-item, .sa-nav .sa-has-sub > a { color: #8a8a8a; text-decoration: none; font-family: Montserrat, Arial, sans-serif; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
.sa-nav a.sa-item:hover, .sa-nav .sa-has-sub > a:hover, .sa-nav .sa-sub a:hover { color: #333; }
.sa-logo { line-height: 0; }
.sa-logo img { height: 115px; width: auto; display: block; }
.sa-has-sub { position: relative; }
.sa-sub { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.12); padding: 8px 0; min-width: 240px; display: none; z-index: 1200; text-align: center; }
.sa-has-sub:hover .sa-sub { display: block; }
.sa-sub a { display: block; padding: 11px 20px; color: #8a8a8a; text-decoration: none; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }

/* Mobile menu elements are hidden on desktop */
#m-bar, #m-backdrop, #m-panel { display: none; }

/* ---------- Fluid containers ---------- */
.bigTable, .headerRow, .footerRow,
.subFooter1Row, .subFooter2Row, .subFooter3Row, .subFooter4Row { width: 100% !important; max-width: 100% !important; }
.contentTable { width: 100% !important; max-width: 1200px !important; margin: 0 auto; }
img, iframe, video, embed, object { max-width: 100%; height: auto; }

/* Expertise icons: breathing room between each icon and its heading */
.subfooter-four-2 em[class*="fa"] { display: inline-block; margin-bottom: 22px; }

/* ---------- Desktop (>=901px) ---------- */
@media (min-width: 901px) {
  .header { display: block !important; }
  body { padding-top: 145px !important; }   /* clear the fixed 145px header */
}

/* ---------- Mobile (<=900px) ---------- */
@media (max-width: 900px) {
  .header { display: none !important; }
  body { padding-top: 64px !important; }     /* clear the fixed mobile top bar */

  /* Fixed top bar: logo left, hamburger right */
  #m-bar {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 1100;
    background: #fff; padding: 0 14px; box-sizing: border-box;
    box-shadow: 0 1px 6px rgba(0,0,0,.08);
  }
  #m-bar .m-bar-logo { line-height: 0; }
  #m-bar .m-bar-logo img { height: 48px; width: auto; display: block; }

  /* Hamburger button */
  .m-toggle { width: 44px; height: 40px; padding: 8px 6px; background: transparent; border: 0; cursor: pointer; }
  .m-toggle span { display: block; width: 100%; height: 2px; margin: 6px 0; background: #8a8a8a; border-radius: 2px; transition: transform .3s ease, opacity .2s ease; }
  .m-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .m-toggle.open span:nth-child(2) { opacity: 0; }
  .m-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* Slide-out panel (from the right) */
  #m-panel {
    display: block; position: fixed; top: 0; right: 0;
    width: 84%; max-width: 330px; height: 100%; background: #fff; z-index: 1120;
    transform: translateX(100%); transition: transform .32s ease;
    padding: 22px 0 40px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    box-shadow: -3px 0 18px rgba(0,0,0,.16);
  }
  #m-panel.open { transform: translateX(0); }
  .m-panel-logo { display: block; text-align: center; padding: 4px 0 18px; margin-bottom: 8px; border-bottom: 1px solid #eee; line-height: 0; }
  .m-panel-logo img { height: 92px; width: auto; display: inline-block; }
  #m-panel a:not(.m-panel-logo) {
    display: block; color: #8a8a8a; text-decoration: none;
    font-family: Montserrat, Arial, sans-serif; font-size: 15px; letter-spacing: 1.5px;
    text-transform: uppercase; padding: 15px 26px; border-bottom: 1px solid #f2f2f2;
  }
  #m-panel a.m-sub { padding-left: 42px; font-size: 12px; color: #a9a9a9; text-transform: none; letter-spacing: .4px; }
  #m-panel a:not(.m-panel-logo):hover,
  #m-panel a:not(.m-panel-logo):active { color: #333; background: #faf6f6; }

  /* Backdrop */
  #m-backdrop { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.4); z-index: 1110; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
  #m-backdrop.open { opacity: 1; visibility: visible; }
  body.m-lock { overflow: hidden; }

  /* Content padding on the CELLS (padding on a <table> doesn't inset rows) */
  .homeCell, .subFooter1Cell, .subFooter2Cell, .subFooter3Cell, .subFooter4Cell, .footerCell { padding-left: 18px !important; padding-right: 18px !important; box-sizing: border-box; }
  .contentTable { max-width: 100% !important; }
  table[width], td[width] { width: 100% !important; max-width: 100% !important; }
  .bigTable [style*="width:"] { max-width: 100% !important; }
  .contentTable > tbody > tr > td,
  .contentTable table > tbody > tr > td,
  table[width] > tbody > tr > td { display: block !important; width: 100% !important; box-sizing: border-box; float: none !important; }

  /* Tall fixed section rows grow to fit stacked content */
  .subFooter1Row, .subFooter2Row, .subFooter3Row, .subFooter4Row, .footerRow,
  .subFooter1Cell, .subFooter2Cell, .subFooter3Cell, .subFooter4Cell { height: auto !important; }

  /* LayerSlider is responsive:false -> render the slide as a responsive banner */
  #layerslider-container-fw { display: none !important; }
  #rowSlideshow > td { background: url('/slideshow/8902002f-d8db-490f-8495-ee07f996629a.png') center / contain no-repeat; height: 9.64vw; min-height: 34px; }
  .slideshowRow { height: auto !important; }
}

@media (max-width: 600px) { body { font-size: 16px; line-height: 1.5; } }