/* =========================================================
   CECIL Official v1.0.123 — smartphone compact chrome
   Scope: <= 760px only.
   - Removes the closed hamburger panel from normal document flow.
   - Reduces header/logo/menu-button footprint.
   - Makes the persistent 3-way booking bar compact and touch-safe.
   LINE promotion banner is intentionally untouched.
========================================================= */

@media (max-width:760px){
  :root{
    --cecil-mobile-header-height:60px;
    --cecil-mobile-contact-height:46px;
  }

  /* -------------------------------------------------------
     Header
     The hidden navigation panel used display:block + visibility:hidden,
     which kept its height in normal flow and visually enlarged the brown
     header. Keep the panel absolute even while closed.
  ------------------------------------------------------- */
  body .site-header,
  body.home .site-header{
    height:auto;
    min-height:0;
  }

  body .site-header .header-main,
  body.home .site-header .header-main{
    box-sizing:border-box;
    height:calc(var(--cecil-mobile-header-height) + env(safe-area-inset-top));
    min-height:calc(var(--cecil-mobile-header-height) + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 14px 0;
    gap:10px;
  }

  body .site-header .site-brand,
  body.home .site-header .site-brand{
    width:92px;
    min-width:92px;
    max-width:92px;
  }

  body .site-header .site-brand img,
  body.home .site-header .site-brand img{
    width:100%;
    height:auto;
    max-height:40px;
    object-fit:contain;
  }

  body .site-header .menu-toggle,
  body.home .site-header .menu-toggle{
    flex:0 0 38px;
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;
    gap:5px;
  }

  body .site-header .menu-toggle span,
  body.home .site-header .menu-toggle span{
    width:24px;
    height:1.5px;
  }

  body .site-header .primary-nav,
  body.home .site-header .primary-nav{
    position:absolute;
    top:calc(var(--cecil-mobile-header-height) + env(safe-area-inset-top));
    left:0;
    right:0;
    width:100%;
    height:auto;
    margin:0;
  }

  body .site-header.nav-open,
  body.home .site-header.nav-open{
    min-height:calc(var(--cecil-mobile-header-height) + env(safe-area-inset-top));
  }

  body .site-header.nav-open .primary-nav,
  body.home .site-header.nav-open .primary-nav{
    top:calc(var(--cecil-mobile-header-height) + env(safe-area-inset-top));
    max-height:calc(100dvh - var(--cecil-mobile-header-height) - env(safe-area-inset-top));
  }

  /* Re-tune the hamburger-to-close movement for the smaller control. */
  body .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1),
  body.home .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(6.5px) rotate(45deg);
  }
  body .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3),
  body.home .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-6.5px) rotate(-45deg);
  }

  /* -------------------------------------------------------
     Persistent WEB / LINE / Phone bar
     46px keeps a practical mobile tap target while removing the oversized
     icon/card appearance seen in the supplied screenshot.
  ------------------------------------------------------- */
  .mobile-contact{
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    bottom:max(6px,env(safe-area-inset-bottom))!important;
    min-height:var(--cecil-mobile-contact-height)!important;
    max-width:calc(100vw - 16px)!important;
    border-radius:11px!important;
    box-shadow:0 7px 22px rgba(75,66,56,.20)!important;
  }

  .mobile-contact a{
    box-sizing:border-box!important;
    height:var(--cecil-mobile-contact-height)!important;
    min-height:var(--cecil-mobile-contact-height)!important;
    padding:0 7px!important;
    gap:5px!important;
    flex-direction:row!important;
    font-size:.69rem!important;
    line-height:1!important;
    letter-spacing:.01em!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }

  .mobile-contact svg{
    display:block!important;
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    max-width:18px!important;
    min-height:18px!important;
    max-height:18px!important;
    flex:0 0 18px!important;
  }

  /* The smaller fixed bar no longer needs the old 88px footer reserve. */
  .site-footer{
    padding-bottom:66px;
  }
}

@media (max-width:360px){
  :root{
    --cecil-mobile-header-height:58px;
    --cecil-mobile-contact-height:44px;
  }

  body .site-header .header-main,
  body.home .site-header .header-main{
    padding-left:12px;
    padding-right:12px;
  }

  body .site-header .site-brand,
  body.home .site-header .site-brand{
    width:88px;
    min-width:88px;
    max-width:88px;
  }

  body .site-header .site-brand img,
  body.home .site-header .site-brand img{
    max-height:38px;
  }

  .mobile-contact a{
    padding-left:5px!important;
    padding-right:5px!important;
    gap:4px!important;
    font-size:.64rem!important;
  }

  .mobile-contact svg{
    width:16px!important;
    height:16px!important;
    min-width:16px!important;
    max-width:16px!important;
    min-height:16px!important;
    max-height:16px!important;
    flex-basis:16px!important;
  }
}