/* =========================================================
   V5 — Corrections from annotated desktop review
   ========================================================= */

/* 1. Use the official supplied Samed Pavilion logo clearly. */
.site-header{
  height:102px!important;
}

.site-header.scrolled{
  height:90px!important;
}

.hero-progress{
  top:102px!important;
}

.site-header.scrolled + .hero-progress{
  top:90px!important;
}

.header-inner{
  width:min(1500px,calc(100% - 38px))!important;
  gap:20px!important;
}

.brand{
  flex:0 0 auto;
  width:310px!important;
  max-width:25vw!important;
  height:100%;
  margin-right:auto;
}

.brand img{
  display:block;
  width:100%!important;
  height:auto!important;
  max-width:100%!important;
  max-height:88px!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.55))
    drop-shadow(0 4px 9px rgba(66,21,81,.09))!important;
}

/* 2. Increase main navigation text slightly. */
.main-nav{
  gap:19px!important;
}

.main-nav a{
  font-size:.83rem!important;
  font-weight:800!important;
  letter-spacing:.005em!important;
}

.lang-switch,
.header-book{
  font-size:.80rem!important;
}

.header-book{
  min-width:92px;
  padding-inline:18px!important;
}

/* 3. Reduce the oversized Hero heading. */
.hero-caption{
  width:min(620px,calc(100% - 90px))!important;
}

.hero-caption h1,
.hero-caption h2{
  max-width:620px!important;
  font-size:clamp(2.55rem,3.85vw,4.25rem)!important;
  line-height:1.09!important;
  letter-spacing:-.018em!important;
}

html[lang="th"] .hero-caption h1,
html[lang="th"] .hero-caption h2{
  line-height:1.12!important;
}

.hero-caption p{
  max-width:560px!important;
  font-size:.98rem!important;
  line-height:1.76!important;
}

/* 4. Make booking information easier to read. */
.booking-dock{
  width:min(930px,calc(100% - 24px))!important;
}

.booking-shell{
  grid-template-columns:minmax(0,1.55fr) minmax(0,.72fr) auto!important;
  gap:5px!important;
  padding:27px 6px 6px!important;
}

.booking-label{
  min-height:21px!important;
  top:6px!important;
  font-size:.68rem!important;
}

.booking-label b{
  font-size:.60rem!important;
}

.booking-field{
  min-height:52px!important;
  padding:6px 13px!important;
}

.booking-field small{
  font-size:.72rem!important;
  line-height:1.2!important;
}

.booking-field strong{
  margin-top:2px;
  font-size:.92rem!important;
  line-height:1.25!important;
  white-space:nowrap;
}

/* 5. Search button fits its text instead of filling excessive width. */
.booking-search{
  width:auto!important;
  min-width:196px!important;
  min-height:52px!important;
  margin-left:5px!important;
  padding:0 22px!important;
  white-space:nowrap!important;
  font-size:.82rem!important;
  line-height:1.2!important;
  border-radius:10px!important;
}

/* Footer uses the same official artwork without changing its colours. */
.footer-logo{
  width:min(390px,100%)!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  padding:13px 17px!important;
  background:#fff!important;
  border-radius:13px!important;
  filter:drop-shadow(0 12px 28px rgba(5,10,38,.20))!important;
}

/* Keep subpage spacing aligned with the corrected header. */
.page-hero{
  padding-top:102px!important;
}

.error-page{
  padding-top:102px!important;
}

@media(max-width:1280px){
  .brand{
    width:270px!important;
    max-width:23vw!important;
  }

  .main-nav{
    gap:14px!important;
  }

  .main-nav a{
    font-size:.76rem!important;
  }

  .header-book{
    min-width:84px;
    padding-inline:14px!important;
  }
}

@media(max-width:1100px){
  .site-header{
    height:90px!important;
  }

  .site-header.scrolled{
    height:84px!important;
  }

  .hero-progress,
  .site-header.scrolled + .hero-progress{
    top:90px!important;
  }

  .brand{
    width:235px!important;
    max-width:55vw!important;
  }

  .brand img{
    max-height:74px!important;
  }

  .main-nav a{
    font-size:.85rem!important;
  }

  .page-hero,
  .error-page{
    padding-top:90px!important;
  }

  .booking-shell{
    grid-template-columns:minmax(0,1.45fr) minmax(0,.72fr) auto!important;
  }

  .booking-search{
    min-width:180px!important;
    padding-inline:17px!important;
  }
}

@media(max-width:640px){
  .site-header,
  .site-header.scrolled{
    height:82px!important;
  }

  .hero-progress,
  .site-header.scrolled + .hero-progress{
    top:82px!important;
  }

  .header-inner{
    width:calc(100% - 18px)!important;
  }

  .brand{
    width:205px!important;
    max-width:59vw!important;
  }

  .brand img{
    max-height:66px!important;
  }

  .hero-caption h1,
  .hero-caption h2{
    font-size:clamp(2.30rem,10.3vw,2.95rem)!important;
    line-height:1.14!important;
  }

  .hero-caption p{
    font-size:.90rem!important;
    line-height:1.65!important;
  }

  .booking-dock{
    width:calc(100% - 10px)!important;
  }

  .booking-shell{
    grid-template-columns:minmax(0,1fr) minmax(0,.72fr)!important;
    padding:26px 5px 5px!important;
  }

  .booking-field{
    min-height:44px!important;
    padding:4px 8px!important;
  }

  .booking-field small{
    font-size:.64rem!important;
  }

  .booking-field strong{
    font-size:.76rem!important;
  }

  .booking-search{
    grid-column:1/-1!important;
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    margin:5px 0 0!important;
    padding-inline:14px!important;
    font-size:.78rem!important;
  }

  .page-hero,
  .error-page{
    padding-top:82px!important;
  }
}