/**
 * Responsive Styles for Lifetime11 Theme
 * Using Bootstrap 5 breakpoints
 *
 * Bootstrap 5 Breakpoints:
 * - xs: <576px
 * - sm: ≥576px
 * - md: ≥768px
 * - lg: ≥992px
 * - xl: ≥1200px
 * - xxl: ≥1400px
 */

/* ===================================
   SLIDESHOW - Managed in components.css
   =================================== */

/* ===================================
   HOME PROGRAMS - Large (≤1350px)
   =================================== */
@media screen and (max-width: 1350px) {
  /* Tour & Events Day Circles */
  #block-lifetime11-views-block__group-tours-block .home-tour-day,
  #block-lifetime11-views-block__events-block .home-events-day {
    font-size: 37px;
    width: 94px;
    max-width: 94px;
    min-width: 94px;
    line-height: 90px;
    margin-right: 20px;
    max-height: 94px;
  }

  /* Preblocks Program Headers */
  #block-lifetime11-16elementaryprogram h2,
  #block-lifetime11-primaryprogram h2,
  #block-lifetime11-toddlerprogram h2 {
    font-size: 16px;
  }

  #block-lifetime11-16elementaryprogram h2 strong,
  #block-lifetime11-primaryprogram h2 strong,
  #block-lifetime11-toddlerprogram h2 strong {
    font-size: 24px;
  }
}



/* ===================================
   GENERAL SECTIONS - Extra Large (≤1150px)
   =================================== */
@media screen and (max-width: 1150px) {
  /* Butterflies */
  .butterfly1,
  .butterfly2 {
    display: none;
  }

  .butterfly1a,
  .butterfly2a {
    display: block;
  }

  /* Block Padding */
  #block-lifetime11-views-block__group-tours-block,
  #block-lifetime11-zoombookatourhomepage,
  #block-lifetime11-bilingualwelcometolifetimemontessorischool,
  #block-lifetime11-views-block__events-block,
  #blue,
  #block-lifetime11-whychooselifetimemontessorischool,
  .region-preblocks,
  #block-lifetime11-schoolphotogallery,
  #block-lifetime11-views-block__testimonials-block-1,
  #block-lifetime11-views-block__home-blog-block,
  #block-lifetime11-webform,
  #block-lifetime11-phone {
    padding: 70px 50px;
  }

  /* Section Headers */
  #block-lifetime11-views-block__group-tours-block h2,
  #block-lifetime11-zoombookatourhomepage h2,
  #block-lifetime11-views-block__events-block h2,
  #block-lifetime11-bilingualwelcometolifetimemontessorischool h2 {
    font-size: 47px;
  }

  /* Blue Steps Section */
  #blue h1,
  .blue-steps-wrapper h1 {
    font-size: 40px;
    padding-bottom: 20px;
  }

  #blue h3,
  .blue-steps-wrapper h3 {
    font-size: 30px;
  }
}

/* ===================================
   NAVIGATION - Large (≤1040px)
   =================================== */
@media screen and (max-width: 1040px) {
  .region-nav {
    padding-top: 8px;
  }

  .region-nav ul.menu li {
    width: 33.333%;
    padding: 0;
  }

  .region-nav ul.menu li a {
    display: block;
    padding: 5px 0;
  }

  .region-nav ul.menu li li {
    width: auto;
  }

  .region-nav ul.menu li a:hover,
  .region-nav ul.menu li a.is-active {
    border: 0;
  }
/* ===================================
   FOOTER & FEATURED - Large (≤992px)
   =================================== */
@media screen and (max-width: 992px) {
  /* Footer Menu */
  #block-lifetime11-footermenu {
    width: 40%;
  }

  #block-lifetime11-footermenuloggedin {
    width: 58%;
  }

  /* Footer Info */
  #block-lifetime11-footerinfo {
    float: none;
    width: auto;
    clear: both;
    padding-top: 20px;
  }

  /* Featured Slide Content */
  .region-featured .slide-content {
    width: 70%;
    max-width: 500px;
  }
/* ===================================
   STACKING LAYOUTS - Medium (≤860px)
   =================================== */
@media screen and (max-width: 860px) {
  /* Navigation */
  .region-nav ul.menu li {
    font-size: 14px;
  }

  /* Preblocks - Stack Programs */
block-lifetime11-16elementaryprogram,
  #block-lifetime11-primaryprogram,
  #block-lifetime11-toddlerprogram {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2px auto;
  }

  /* Home Blog - Stack Items */
  #block-lifetime11-views-block__home-blog-block .view-home-blog {
    display: block;
  }

  #block-lifetime11-views-block__home-blog-block .views-row-1,
  #block-lifetime11-views-block__home-blog-block .views-row-2 {
    padding: 0;
    width: 100%;
    border: 0;
    margin-bottom: 40px;
  }

}

/* Medium devices (≤768px - Bootstrap md breakpoint) */
@media screen and (max-width: 768px) {
  a.logo {
    float: left;
    text-align: left;
    margin: 0;
  }

  a.logo img {
    display: block;
    height: 85px;
  }

  .front #header {
    padding-bottom: 0;
  }

  /* === MOBILE NAVIGATION === */

  /* Hamburger Button */
  .nav-button {
    display: block !important;
    position: absolute;
    top: 0;
    right: 5px;
    width: 32px;
    height: 28px;
    background-color: transparent;
    background-image: url("../images/menu-icon-large-blue.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    border: 0 none;
    z-index: 10001;
    text-indent: -9999px;
    transition: all 0.3s ease;
  }

  .front .nav-button {
    background-image: url("../images/menu-icon-large.png");
  }

  .nav-button.open {
    background-image: url("../images/close-icon-large.png") !important;
    background-size: 21px auto;
  }

  /* Overlay */
  body.mobile-menu-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    animation: fadeIn 0.3s ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* === MOBILE MENU CONTAINER === */
  .region-nav {
    position: fixed !important;
    top: 0;
    right: -100%;
    width: 85%;
    max-width: 380px;
    height: 100vh;
    background: linear-gradient(180deg, #109bd2 0%, #0d7fa8 100%);
    z-index: 9999;
    overflow-y: auto;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    display: block !important;
    text-align: left !important;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
  }

  .region-nav.open {
    right: 0 !important;
  }

  /* === MENU BLOCK === */
  .region-nav #block-lifetime11-mainmenu {
    width: 100%;
    padding: 80px 0 30px 0;
  }

  .region-nav #block-lifetime11-mainmenu h2 {
    display: none !important;
  }

  .region-nav #block-lifetime11-mainmenu nav {
    width: 100%;
  }

  /* === MENU LIST RESET === */
  .region-nav #block-lifetime11-mainmenu nav > ul,
  .region-nav #block-lifetime11-mainmenu > ul {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    flex-flow: column !important;
    justify-content: flex-start !important;
  }

  /* === MENU ITEMS === */
  .region-nav #block-lifetime11-mainmenu nav > ul > li,
  .region-nav #block-lifetime11-mainmenu > ul > li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
    position: relative !important;
  }

  .region-nav #block-lifetime11-mainmenu nav > ul > li::after {
    content: '';
    display: block;
    width: 90%;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 auto;
  }

  /* === MENU LINKS === */
  .region-nav #block-lifetime11-mainmenu nav > ul > li > a,
  .region-nav #block-lifetime11-mainmenu > ul > li > a {
    display: block !important;
    width: 100% !important;
    padding: 16px 25px !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
    white-space: normal !important;
    background: none !important;
    background-image: none !important;
    position: relative !important;
    text-align: left !important;
  }

  .region-nav #block-lifetime11-mainmenu nav > ul > li > a::before,
  .region-nav #block-lifetime11-mainmenu nav > ul > li > a::after,
  .region-nav #block-lifetime11-mainmenu > ul > li > a::before,
  .region-nav #block-lifetime11-mainmenu > ul > li > a::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
  }

  /* Indicator for menu items with submenus */
  .region-nav #block-lifetime11-mainmenu nav > ul > li:has(> ul) > a::after,
  .region-nav #block-lifetime11-mainmenu > ul > li:has(> ul) > a::after {
    display: inline-block !important;
    content: "▼" !important;
    float: right !important;
    font-size: 10px !important;
    margin-left: 8px !important;
    transition: transform 0.3s ease !important;
    background: none !important;
    background-image: none !important;
  }

  .region-nav #block-lifetime11-mainmenu nav > ul > li.submenu-open > a::after,
  .region-nav #block-lifetime11-mainmenu > ul > li.submenu-open > a::after {
    transform: rotate(180deg) !important;
  }

  .region-nav #block-lifetime11-mainmenu nav > ul > li > a:hover,
  .region-nav #block-lifetime11-mainmenu > ul > li > a:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    padding-left: 30px !important;
    color: #ffffff !important;
  }

  .region-nav #block-lifetime11-mainmenu nav > ul > li > a.is-active,
  .region-nav #block-lifetime11-mainmenu > ul > li > a.is-active {
    background: rgba(255, 255, 255, 0.2) !important;
    border-left: 4px solid #a0d840 !important;
    padding-left: 21px !important;
    color: #ffffff !important;
  }
  /* === SUBMENU === */
  .region-nav #block-lifetime11-mainmenu nav > ul > li > ul,
  .region-nav #block-lifetime11-mainmenu > ul > li > ul {
    display: none !important;
    position: static !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.15) !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    left: auto !important;
    list-style: none !important;
    float: none !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }

  .region-nav #block-lifetime11-mainmenu nav > ul > li.submenu-open > ul,
  .region-nav #block-lifetime11-mainmenu > ul > li.submenu-open > ul {
    display: block !important;
    left: auto !important;
    max-height: 500px;
    padding: 8px 0 !important;
  }

  .region-nav #block-lifetime11-mainmenu nav > ul > li > ul > li,
  .region-nav #block-lifetime11-mainmenu > ul > li > ul > li {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    float: none !important;
  }

  .region-nav #block-lifetime11-mainmenu nav > ul > li > ul > li > a,
  .region-nav #block-lifetime11-mainmenu > ul > li > ul > li > a {
    display: block !important;
    padding: 10px 25px 10px 40px !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    background: none !important;
    background-image: none !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    text-align: left !important;
  }

  .region-nav #block-lifetime11-mainmenu nav > ul > li > ul > li > a::before,
  .region-nav #block-lifetime11-mainmenu nav > ul > li > ul > li > a::after,
  .region-nav #block-lifetime11-mainmenu > ul > li > ul > li > a::before,
  .region-nav #block-lifetime11-mainmenu > ul > li > ul > li > a::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
  }

  .region-nav #block-lifetime11-mainmenu nav > ul > li > ul > li > a:hover,
  .region-nav #block-lifetime11-mainmenu > ul > li > ul > li > a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    padding-left: 45px !important;
    color: rgba(255, 255, 255, 0.9) !important;
  }

  /* Old deprecated menu styles */
  .region-nav #block-lifetime11-footermenuloggedin ul.menu {
    width: 100%;
    float: none;
    background-color: #22aae0;
    display: block;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 998;
    clear: both;
  }

  .region-nav #block-lifetime11-footermenuloggedin ul.menu li {
    display: none;
    width: 100%;
  }

  .region-nav #block-lifetime11-footermenuloggedin ul.menu li {
    padding: 0 !important;
  }

  .region-nav #block-lifetime11-footermenuloggedin ul.menu li a {
    display: block;
    width: 90%;
    padding: 6px 5%;
    font-size: 14px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .region-nav #block-lifetime11-footermenuloggedin ul.menu li a:hover {
    background-color: #168bb9;
    border-top-color: transparent;
  }

  .region-nav #block-lifetime11-footermenuloggedin ul.menu li ul {
    display: block;
    position: inherit;
    width: auto;
    left: auto;
    background-color: #22aae0;
    padding-top: 0 !important;
  }

  .region-nav #block-lifetime11-footermenuloggedin ul.menu li ul li {
    border: 0;
  }

  .region-nav #block-lifetime11-footermenuloggedin ul.menu li ul li a {
    padding: 6px 10%;
    box-sizing: border-box;
    margin: 0 auto;
  }

  .region-nav ul.menu li a:hover:before,
  /* Toggle navigation open */
  .region-nav #block-lifetime11-footermenuloggedin ul.menu.open {
    height: auto;
  }

  .region-nav #block-lifetime11-footermenuloggedin ul.menu.open li {
    display: block !important;
  }

  /* Sidebar - Full Width */
  /* Toggle navigation open */
  .region-nav #block-lifetime11-footermenuloggedin ul.menu.open {
    height: auto;
  /* Sidebar - Full Width */
  .region-sidebar-first,
  .sidebar-first .content-column {
    width: 100% !important;
    float: none;
  }

  /* Block Padding - Reduced */
  #block-lifetime11-views-block__group-tours-block,
  #block-lifetime11-zoombookatourhomepage,
  #block-lifetime11-bilingualwelcometolifetimemontessorischool,
  #block-lifetime11-views-block__events-block,
  #blue,
  .blue-steps-wrapper,
  #block-lifetime11-whychooselifetimemontessorischool,
    padding: 50px;
  }
}

/* Small devices (≤576px - Bootstrap sm breakpoint) */
@media screen and (max-width: 576px) {
  /* Additional mobile styles if needed */
}

/* ===================================
   MOBILE OPTIMIZATIONS - XS (≤470px)
   =================================== */

/* Small devices (≤576px - Bootstrap sm breakpoint) */
@media screen and (max-width: 576px) {
/* ===================================
   MOBILE OPTIMIZATIONS - XS (≤470px)
   =================================== */
@media screen and (max-width: 470px) {
  /* Header */
  .nav-button {
    margin-top: 10px;
  }

  #header-wrap .mast {
    padding: 15px 20px 0;
  }

  a.logo {
    margin: 0 0 0 0;
    display: inline-block;
    width: auto;
  }

  a.logo img {
    height: 60px;
  }

  /* Block Padding - Minimal */
  #block-lifetime11-views-block__group-tours-block,
  #block-lifetime11-zoombookatourhomepage,
  #block-lifetime11-views-block__events-block,
  #blue,
  .blue-steps-wrapper,
  #block-lifetime11-whychooselifetimemontessorischool,
  .region-preblocks,
  #block-lifetime11-schoolphotogallery,
  #block-lifetime11-views-block__testimonials-block-1,
  #block-lifetime11-views-block__home-blog-block,
  #block-lifetime11-webform,
  #block-lifetime11-phone {
    padding: 50px 25px;
  }

  /* Section Headers - Small */
  #block-lifetime11-views-block__group-tours-block h2,
  #block-lifetime11-zoombookatourhomepage h2,
  #block-lifetime11-views-block__events-block h2 {
    font-size: 30px;
  }

  #blue h1,
  .blue-steps-wrapper h1 {
    font-size: 30px;
    padding-bottom: 10px;
  }

  #blue h3,
  .blue-steps-wrapper h3 {
    font-size: 22px;
  }

  /* Webform Fields - Full Width */
  #block-lifetime11-webform .webform-component--first-name,
  #block-lifetime11-webform .webform-component--last-name,
  #block-lifetime11-webform .webform-component--phone-number,
  #block-lifetime11-webform .webform-component--email {
    width: 100%;
    margin-bottom: 10px;
  }

  /* Images */
  .img-right {
    float: none;
    max-width: 100%;
/* ===================================
   TINY SCREENS - XS (≤375px)
   =================================== */
@media screen and (max-width: 375px) {
  body {
    font-size: 14px;
  }

  /* All Section Headers */
  #block-lifetime11-views-block__group-tours-block h2,
  #block-lifetime11-zoombookatourhomepage h2,
  #block-lifetime11-views-block__events-block h2,
  #block-lifetime11-bilingualwelcometolifetimemontessorischool h2,
  #block-lifetime11-whychooselifetimemontessorischool h2,
  #block-lifetime11-schoolphotogallery h2,
  #block-lifetime11-phone h2,
  #block-lifetime11-views-block__testimonials-block-1 h2,
  #block-lifetime11-views-block__home-blog-block h2,
  #block-lifetime11-webform h2 {
    font-size: 26px;
  }

  /* Buttons */
  a.grn-btn,
  #block-lifetime11-views-block__testimonials-block-1 .view-footer p a,
  #block-lifetime11-views-block__home-blog-block .view-footer p a,
  #block-lifetime11-zoombookatourhomepage p a {
    font-size: 16px;
    padding: 15px 30px;
  }
/* ===================================
   CONTAINER WIDTH - All Devices
   =================================== */
.mast {
  position: relative;
  margin: 0 auto;
  width: 90%;
  max-width: 1200px;
}

@media screen and (min-width: 1024px) {
  .mast {
    width: 1000px;
  }
}

@media screen and (max-width: 1024px) {
  .mast {
    width: 95%;
    max-width: none;
  }
}

@media screen and (max-width: 768px) {
  .mast {
    width: 95%;
    max-width: none;
  }
}

@media screen and (max-width: 640px) {
  .mast {
    width: 95%;
    max-width: none;
  }
}

@media screen and (max-width: 445px) {
  .mast {
    width: 95%;
    max-width: none;
  }
}
/* ===================================
   NOTE: Additional responsive rules for flex, float, and layout
   are now consolidated in their respective CSS files:

   - components.css: @media queries at the end for all component blocks
   - layout.css: @media queries at the end for footer and layout elements
   - regions.css: @media queries at the end for region-specific adjustments
   - navigation.css: @media queries at the end for navigation and menu
   - typography.css: @media queries at the end for text and buttons
   - forms.css: @media queries at the end for form elements

   This approach keeps responsive rules close to their base styles
   for better maintainability.
   =================================== */