/* =========================
   HOME OF OM — HEADER OVERRIDES (CLEAN)
   - Fixed, glassy header that always sticks
   - Centered logo + dropdowns
   - Social icons bottom-right (desktop), centered (mobile)
   - Works with your existing sidebar JS (width-based)
   - Keeps hero visible (no overlap)
   - Carousel fade (Bootstrap 3)
========================= */

/* --- Reserve space under the fixed header --- */
:root { --header-height: clamp(96px, 12vw, 120px); }
html  { scroll-padding-top: var(--header-height); }
body  { padding-top: var(--header-height); }

/* --- Fixed, translucent header --- */
header.site-header,
.site-header{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 5000;
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: saturate(180%) blur(6px);
  backdrop-filter: saturate(180%) blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  transition: background-color 220ms ease;
  overflow: visible; /* let dropdowns overflow */
}
.site-header::before{ content: none !important; }  /* never let overlays make it opaque */

/* --- Logo --- */
.site-header .site-logo{
  text-align: center;
  margin: 0 auto 6px;
}
.site-header .site-logo img{
  display: inline-block;
  max-width: 200px;
  height: auto;
}

/* --- Desktop dropdown row --- */
.site-header .toplinks{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0 0;
}
.site-header #menu{
  display: inline-flex;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.site-header #menu li{ display: inline-block; }

/* Drop buttons */
.site-header .dropbtn{
  background-color:#AACA3A;
  color:#fff;
  font-size:19px;
  font-weight:700;
  border:0; border-radius:6px;
  padding:.6rem 1.2rem;
  cursor:pointer;
  transition: background-color .3s ease, transform .15s ease, box-shadow .3s ease;
}
.site-header .dropbtn:hover,
.site-header .dropbtn:focus{
  background-color:#CC5B30;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  outline:none;
}

/* Dropdown panels */
.site-header .dropdown{ position: relative; z-index: 5300; }
.site-header .dropdown-content{
  display:none;
  position:absolute; top:100%; left:0;
  min-width:200px;
  background:#AACA3A;
  border-radius:8px;
  margin-top:6px; padding:6px 0;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}
.site-header .dropdown-content a{
  display:block; color:#fff; font-size:18px;
  text-decoration:none; padding:10px 14px; white-space:nowrap;
}
.site-header .dropdown-content a:hover{ background:#CC5B30; padding-left:16px; }
#myDropdown.show,#myDropdown1.show,#myDropdown2.show,#myDropdown3.show,#myDropdown4.show{ display:block; }

/* --- Social icons --- */
.site-header .social-icons{
  position:absolute; right:16px; bottom:8px;
  display:flex; gap:10px; align-items:center; justify-content:flex-end;
  z-index: 5200;
}
@media (min-width:1200px){
  .site-header .social-icons{ right: calc(50% - 600px + 16px); } /* align to 1200px grid */
}

/* --- Hero: no extra gap (body already reserved space) --- */
.hero, .hero-banner{ margin-top: 0 !important; text-align:center; }
/* Make sure “September” is white */
.hero h2, .hero-banner .hero-subtitle{ color:#fff !important; }

/* =========================
   MOBILE (<= 991.98px)
========================= */
@media (max-width: 991.98px){
  /* Hide desktop menu row; center icons under logo */
  .site-header .toplinks{ display:none !important; }
  .site-header .social-icons{ position:static; justify-content:center; margin-top:6px; }

  /* Slightly smaller logo */
  .site-header .site-logo img{ max-width: 160px; height:auto; }

  /* Green compact hamburger (shown by your existing HTML button) */
  .logo3.logo2{ display:block !important; } /* show wrapper on mobile */
  .openbtn.logo3{
    display:block !important;
    position:fixed;
    top:10px; left:12px;
    z-index:6000;

    width:40px; height:40px;
    border:0; border-radius:10px;

    background:#AACA3A; color:#fff;
    font-size:24px; line-height:40px; text-align:center;
    cursor:pointer;

    box-shadow:0 2px 10px rgba(0,0,0,.15);
    transition: background-color .25s ease, transform .1s ease;
  }
  .openbtn.logo3:hover{ background:#CC5B30; }
  .openbtn.logo3:active{ transform: scale(.96); }

  /* Shorter header padding on phones */
  .site-header{ padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 6px; }

  /* Since header is shorter on phones, give the hero a touch of top padding if needed */
  .hero-banner{ padding-top: clamp(72px, 14vw, 110px); }

  /* Mobile gutters for legacy float columns & wrappers */
  .col, .col-lg, .col-lg2,
  .colgrid, .colgrid-lg,
  .ubergrid, .ubergrid-lg,
  .coltext-lg, .colprice,
  .col-sm, .col-sm2,
  .colprice-md, .colgrid-sm,
  .col-lg-13{
    width:100% !important; float:none !important;
    padding-left:16px !important; padding-right:16px !important;
  }
  .wrap, .slide_calander, .yogatoday, .yogatoday1{
    padding-left:16px !important; padding-right:16px !important;
    margin-left:0 !important; margin-right:0 !important;
  }

  /* Align your “events” <section> text with the same gutter */
  section{ padding-left:16px; padding-right:16px; }

  /* Prevent horizontal scroll surprises */
  html, body{ overflow-x: hidden; }
  img, video{ max-width:100%; height:auto; display:block; }
}

/* =========================
   SIDEBAR (works with your current width-based JS)
========================= */
.sidebar{
  height:100vh;
  width:0;                      /* JS sets to ~250px when open */
  position:fixed; top:0; left:0;
  z-index:5500;
  background: rgba(255,255,255,0.88);   /* glassy */
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  overflow-x:hidden;
  transition: width .3s ease;
  box-shadow: 2px 0 24px rgba(0,0,0,.22);
  padding-top:10px;
}
.sidebar a{ display:block; padding:12px 18px; color:#235B04; text-decoration:none; font-size:18px; }
.sidebar a:hover{ background:#f2f6ea; }
.sidebar .closebtn{
  position:absolute; top:8px; right:12px;
  font-size:34px; line-height:1; color:#235B04; background:transparent; border:0;
}

/* Hide hamburger on desktop */
@media (min-width: 992px){
  .openbtn.logo3{ display:none !important; }
}

/* =========================
   CAROUSEL FADE (Bootstrap 3)
========================= */
.carousel.carousel-fade .item{
  opacity:0;
  transition: opacity 1000ms ease-in-out;
  -webkit-transition: opacity 1000ms ease-in-out;
}
.carousel.carousel-fade .item.active,
.carousel.carousel-fade .item.next.left,
.carousel.carousel-fade .item.prev.right{ opacity:1; }
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right{
  left:0; opacity:0; z-index:1;
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev{
  left:0; z-index:2;
}
.carousel.carousel-fade .carousel-control{ z-index:3; }
/* === DESKTOP RESTORE: rotator + calendar full width === */
@media (min-width: 992px){
  .slide_calander{ padding-left: 0 !important; padding-right: 0 !important; }

  .slide_calander > .col,
  .slide_calander > .col-lg,
  .slide_calander > .col-sm{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* keep the original aspect/width on desktop */
  .googlecalander,
  .googlecalander2{
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* carousel images edge-to-edge inside their column */
  #carousel1,
  #carousel1 .carousel-inner,
  #carousel1 .item,
  #carousel1 .item img{
    width: 100% !important;
  }
}
/* === HAMBURGER BOX TWEAK === */
@media (max-width: 991.98px){
  .openbtn.logo3{
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 0;                /* avoid overflow */
    border-radius: 10px;
    background: #AACA3A;
    color: #fff;
    font-size: 22px;           /* slightly smaller glyph so it fits */
    line-height: 40px;         /* perfect vertical centering */
    text-align: center;        /* horizontal centering */
    border: 0;
  }
}/* === DESKTOP RESTORE: carousel + calendar full width & aspect === */
@media (min-width: 992px){
  /* parent gutters back to normal (no unintended mobile padding) */
  .slide_calander{
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* inner columns edge-to-edge so media isn't squeezed */
  .slide_calander > .col,
  .slide_calander > .col-lg,
  .slide_calander > .col-sm{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* carousel media true full width in its column */
  #carousel1,
  #carousel1 .carousel-inner,
  #carousel1 .item,
  #carousel1 .item img{
    width: 100% !important;
  }
  #carousel1 .item img{ height: auto !important; display:block !important; }

  /* calendar wrappers: restore desktop aspect and remove extra padding */
  .googlecalander,
  .googlecalander2{
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* original desktop aspect ratios */
  .googlecalander{ padding-bottom: 62% !important; }
  .googlecalander2{ padding-bottom: 68% !important; }

  .googlecalander iframe,
  .googlecalander2 iframe{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
  }
}

/* === HAMBURGER BOX: center the ☰ perfectly === */
@media (max-width: 991.98px){
  .openbtn.logo3{
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 0;                 /* ensure glyph fits */
    border-radius: 10px;
    background: #AACA3A;
    color: #fff;
    font-size: 22px;            /* glyph size */
    line-height: 40px;          /* vertical centering */
    text-align: center;         /* horizontal centering */
    border: 0;
  }
}
/* === DESKTOP: make Google Calendar match the carousel size & avoid conflicts === */
@media (min-width: 992px){
  /* Put both carousel and calendar on equal footing */
  .slide_calander{
    display:flex;
    gap:16px;
    align-items:flex-start;
  }
  .slide_calander > .col,
  .slide_calander > .col-lg,
  .slide_calander > .col-sm{
    flex:1 1 0;
    min-width:0;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Carousel stays full width inside its column */
  #carousel1,
  #carousel1 .carousel-inner,
  #carousel1 .item,
  #carousel1 .item img{
    width:100% !important;
  }
  #carousel1 .item img{ height:auto; display:block; }

  /* Calendar column uses the same 16:9 aspect as a typical slide */
  .googlecalander,
  .googlecalander2{
    position:relative;
    width:100%;
    height:0;
    padding-bottom:56.25% !important;  /* 16:9 to match the carousel */
    margin:0 !important;
  }
  .googlecalander iframe,
  .googlecalander2 iframe{
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
    border:0;
  }
}

/* === MOBILE: make the extra Close buttons green (not gray) === */
@media (max-width: 991.98px){
  /* Middle and end buttons we added inside the drawer */
  .sidebar-close-btn{
    background:#AACA3A !important;  /* site green */
    color:#fff !important;
    border:0 !important;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
  }
  .sidebar-close-btn:hover{ background:#CC5B30 !important; }  /* site orange */

  /* (Leave the top “×” close icon styling as-is.) */
}

/* === MOBILE: carousel + calendar full-width and flush with gutters === */
@media (max-width: 991.98px){
  /* Parent gets the gutters */
  .slide_calander{
    padding-left:16px !important;
    padding-right:16px !important;
    gap:10px !important;
    margin:8px 0 12px 0 !important;
  }
  /* Children go edge-to-edge inside that gutter, so no double padding */
  .slide_calander > .col,
  .slide_calander > .col-lg,
  .slide_calander > .col-sm{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Carousel truly full width */
  #carousel1,
  #carousel1 .carousel-inner,
  #carousel1 .item,
  #carousel1 .item img{
    width:100% !important;
  }
  #carousel1 .item img{ height:auto !important; display:block !important; }

  /* Calendar full width + a bit taller on phones so it feels balanced */
  .googlecalander,
  .googlecalander2{
    position:relative;
    width:100% !important;
    height:0;
    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    padding-bottom:130% !important; /* taller for readability on phones */
  }
  .googlecalander iframe,
  .googlecalander2 iframe{
    position:absolute;
    inset:0;
    width:100% !important;
    height:100% !important;
    border:0;
  }
}
/* === MOBILE: align sidebar close buttons === */
@media (max-width: 991.98px){
  .sidebar-action{
    text-align: center;       /* center the content in its row */
  }
  .sidebar-close-btn{
    display: inline-block;    /* shrink to content instead of 100% width */
    width: auto;              /* auto width */
    min-width: 140px;         /* optional: give it some presence */
    padding: 10px 20px;
    margin: 6px auto;         /* center horizontally */
  }
}