/* ================================================================
   MOBILE.CSS  –  Mobile-responsive overrides for OnceBeauty
   All rules are inside media queries; desktop design unchanged.
   ================================================================ */

/* ── Global: images never wider than their container ── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Fluid max-width ceilings (safe at every viewport width) ── */
.largeheader  { max-width: 100%; }
#map-canvas   { max-width: 100% !important; }
#dcontainer   { max-width: 100%; }
#dscontainer  { max-width: 100%; }
.section-right { box-sizing: border-box; }

/* ================================================================
   TABLET  ≤ 768 px
   ================================================================ */
@media screen and (max-width: 768px) {

  /* ── Foreground image slider ── */
  .csslider2,
  .csslider2 > ul {
    height: 300px !important;
  }
  .csslider2 img {
    height: 300px;
    object-fit: cover;
  }

  /* ── Parallax sections: switch from absolute/float to flex column ──
     Root cause of the heading/button overlap: .news was position:absolute
     and .capture was float:right. Setting position:static on both and
     using flexbox eliminates all overlap at any screen width.           */
  .parallax [class*="para_"] {
    background-attachment: scroll; /* iOS fix */
    height:    auto !important;
    max-height: none !important;
    min-height: 130px;
    padding:    16px 20px;
    display:    flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap:        10px;
    border-radius: 10px !important;
    overflow: hidden;
  }

  /* News / testimonial text: in-flow, full width */
  .parallax .news {
    position:   static !important;
    float:      none   !important;
    top:        auto   !important;
    left:       auto   !important;
    width:      100%   !important;
    max-width:  100%   !important;
    max-height: none   !important;
    overflow:   visible !important;
    font-size:  15px;
    padding:    10px 14px !important;
    margin:     0 !important;
    box-sizing: border-box;
  }

  /* Book-Now / More-Reviews button: in-flow, below text */
  .parallax .capture {
    float:    none   !important;
    position: static !important;
    padding:  0      !important;
    margin:   0      !important;
    align-self: flex-start;
  }

  /* Small description line: irrelevant at this size, hide it */
  .parallax .desc {
    display: none !important;
  }

  /* ── Other tablet fixes ── */
  #map-canvas  { width: 100% !important; height: 260px; }
  .section-right { width: 100%; float: none; text-align: left; }
  .usefullinks { width: 100%; }
  #dscontainer { width: 100%; float: none; margin-bottom: 20px; }
  #dcontainer  { width: 100%; }
  .smallsec    { height: auto !important; }
  .remedy-frame { flex-direction: column; height: auto; }
  .card        { width: 100% !important; margin-bottom: 20px; }
  .bottest     { width: 96%; float: none; }
  .video       { min-height: 260px; }
  .contact-card { left: 0 !important; max-width: 100% !important; }
}

/* ================================================================
   PHONE  ≤ 480 px
   ================================================================ */
@media screen and (max-width: 480px) {

  /* ── Hamburger: pin to top so it stays visible on scroll ── */
  .menuicon {
    position: fixed  !important;
    top:      0      !important;
    left:     0      !important;
    width:    100%   !important;
    height:   50px   !important;
    z-index:  10001  !important;
    margin:   0      !important;
  }
  /* .absolute-center padding-top is set by menu_toggle.js dynamically */

  /* ── Foreground slider: phone-friendly height ── */
  .csslider2,
  .csslider2 > ul {
    height: 220px !important;
  }
  .csslider2 img {
    height: 220px;
    object-fit: cover;
  }

  /* Slider caption: smaller and repositioned */
  .caption {
    font-size: 15px !important;
    top:  58%  !important;
    width: 88% !important;
    left:  6%  !important;
  }

  /* ── Parallax: tighter on phone ── */
  .parallax [class*="para_"] {
    min-height: 100px;
    padding:    12px 14px;
    gap:        8px;
    border-radius: 8px !important;
  }
  .parallax .news {
    font-size: 13px !important;
    padding:   8px 10px !important;
  }
  .dwl-button {
    padding:   7px 14px !important;
    font-size: 13px     !important;
    margin:    0        !important;
  }

  /* ── Custom service cards: ensure h3 fits at the 476-479 px gap ──
     osbq.css applies h3:36px at ≥476px; index.html inline styles
     only start at 480px — this closes the 4 px gap.                */
  .custom-card {
    height: 100px !important;
  }
  .custom-card h3 {
    font-size:   0.85rem !important;
    line-height: 1.2;
  }

  /* ── Main content frame ── */
  .main-frame {
    padding-left:  10px !important;
    padding-right: 10px !important;
    border-radius: 10px !important;
    margin-top:    10px !important;
  }

  /* ── Service-pricing columns ── */
  .servdesc {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0   !important;
  }
  .servprice,
  .servdur,
  .servextra,
  .specialprice {
    width:     33% !important;
    min-width: 0   !important;
    max-width: 33% !important;
    text-align: left;
  }

  /* ── Section boxes ── */
  .smallsec {
    float:  none !important;
    width:  95%  !important;
    height: auto !important;
  }

  /* ── Staff photos ── */
  .staffpic {
    max-width: 100%  !important;
    float:     none  !important;
    text-align: center;
  }
  .staffpic img {
    max-width: 180px;
    display:   block;
    margin:    0 auto;
  }
  .staffdesc {
    max-width: 100% !important;
    float:     none !important;
  }

  /* ── Misc layout ── */
  .largeheader   { width: 100%    !important; }
  .section-right { width: 100%    !important; float: none; text-align: left; }
  .video         { min-height: 180px; }
  .calcblock     { width: 90%     !important; }
  .award         { max-width: 50%; }
  .bank          { max-width: 50%; }
  .product       { width: 90%; float: none; }
  .popcont       { width: 95%     !important; max-width: 300px; }
  .cg_header,
  .cg_text       { width: 98%     !important; float: none; }
  .selectar      { width: 90%     !important; float: none; }
  .remedy-frame  { padding-left: 10px; padding-right: 10px; }
  .card          { width: 100%    !important; }
  .bottest       { font-size: 16px; }

  .anushamob,
  .ramamob {
    float:     none !important;
    max-width: 70%  !important;
    margin:    0 auto;
    display:   block;
  }

  /* ── Footer ── */
  .top-bottom {
    height: auto !important;
    padding-top: 20px;
  }
  .bottom-links {
    min-width:     55px !important;
    padding-right: 5px;
    margin-right:  6px;
    font-size:     10px;
  }
  .sponsors img {
    max-width:  90px;
    max-height: 28px;
  }
}

/* ================================================================
   MOBILE NAV — expand fixed container when hamburger opens menu.
   #container { height:80px } has specificity (1,0,0), needs !important.
   padding-top clears the fixed .menuicon (50 px) above the links.
   ================================================================ */
@media screen and (max-width: 480px) {
  .menucontainer:target {
    display:        table !important;
    height:         auto  !important;
    max-height:     100vh !important;
    overflow-y:     auto  !important;
    padding-top:    55px  !important;
    padding-bottom: 20px  !important;
  }
}

/* ================================================================
   VERY SMALL PHONE  ≤ 360 px
   ================================================================ */
@media screen and (max-width: 360px) {

  /* Service values: fully stacked */
  .servprice,
  .servdur,
  .servextra,
  .specialprice {
    width:     100% !important;
    max-width: 100% !important;
    text-align: left;
  }

  /* Parallax text: tightest size */
  .parallax .news {
    font-size: 12px !important;
  }

  /* Footer links: ultra-tight */
  .bottom-links {
    min-width:     45px !important;
    font-size:      9px;
    padding-right:  3px;
    margin-right:   3px;
  }
}