/* Blog/menu responsive fixes extracted from blog_mob.html
   Load this file ONLY on pages that should use these fixes.
   It overrides some defaults from style.css / responsive.css on smaller screens. */

/* Phones (<= 991.98px) — full-width slide-in menu and no horizontal scroll */
@media (max-width: 991.98px){
  .mobile-menu{
    width:100vw !important;
    width:100svw !important; /* Safari iOS safe viewport */
    width:100dvw !important; /* dynamic viewport */
    max-width:100vw !important;
    max-width:100svw !important;
    max-width:100dvw !important;
    padding-right:env(safe-area-inset-right, 0) !important;
    right:0 !important;
    left:0 !important;
  }
  .mobile-menu .menu-box{
    width:100vw !important;
    width:100svw !important;
    width:100dvw !important;
    max-width:100vw !important;
    max-width:100svw !important;
    max-width:100dvw !important;
  }
  html, body, .page-wrapper{ overflow-x:hidden; }
  .main-header .nav-outer{
    width:100% !important;
    padding-right:0 !important;
    box-shadow:none !important;
  }
  .main-menu .navigation{ display:flex; flex-wrap:wrap; }
  .main-menu .navigation > li{ flex:1 1 auto; }
}

/* Tablets in portrait/landscape (≈ 992–1366px) */
@media (min-width: 992px) and (max-width: 1366px){
  .main-header .nav-outer{
    width:100% !important;
    padding-inline: clamp(8px, 2vw, 24px) !important;
    box-shadow:none !important;
  }
  .main-menu .navigation{
    display:flex !important;
    flex-wrap:wrap !important;
    column-gap: .75rem;
    row-gap: .25rem;
    justify-content:flex-start;
  }
  .main-menu .navigation > li{
    flex:0 1 auto;
    min-width:auto;
  }
  .mobile-menu,
  .mobile-menu .menu-box{
    width:100vw !important;
    width:100svw !important;
    width:100dvw !important;
    max-width:100vw !important;
    max-width:100svw !important;
    max-width:100dvw !important;
    right:0 !important;
    left:0 !important;
  }
  html, body, .page-wrapper{ overflow-x:hidden; }
  .container, .auto-container, .page-wrapper, .header-lower .outer-box{
    max-width:100% !important;
  }
}

/* Hide logo on phones & tablets; keep on desktop */
@media (max-width: 1366px){
  .logo-box{ display:none !important; }
}
@media (min-width: 1367px){
  .logo-box{ display:block !important; }
}

/* Menu font-size adjustments */
@media (min-width: 992px) and (max-width: 1366px){
  .header-style-two .main-menu .navigation > li > a,
  .sticky-header .main-menu .navigation > li > a,
  .header-style-two .main-menu .navigation > li > ul > li > a,
  .main-menu .navigation > li > a {
    font-size: 12px !important;
  }
  .mobile-menu .navigation li > a { font-size: 14px !important; }
}

@media (min-width: 768px) and (max-width: 991.98px){
  .header-style-two .main-menu .navigation > li > a,
  .sticky-header .main-menu .navigation > li > a,
  .header-style-two .main-menu .navigation > li > ul > li > a,
  .main-menu .navigation > li > a {
    font-size: 12px !important;
  }
  .mobile-menu .navigation li > a { font-size: 12px !important; }
}

@media (max-width: 767.98px){
  .header-style-two .main-menu .navigation > li > a,
  .sticky-header .main-menu .navigation > li > a,
  .header-style-two .main-menu .navigation > li > ul > li > a,
  .main-menu .navigation > li > a {
    font-size: 12px !important;
  }
  .mobile-menu .navigation li > a { font-size: 13px !important; }
}

@media (max-width: 600px){
  .header-style-two .main-menu .navigation > li > a,
  .sticky-header .main-menu .navigation > li > a,
  .header-style-two .main-menu .navigation > li > ul > li > a,
  .main-menu .navigation > li > a {
    font-size: 9px !important;
  }
  .mobile-menu .navigation li > a { font-size: 9px !important; }
}