/*
 * Catfe Mao V23: refined responsive header and balanced desktop layouts.
 * Intentionally last in the cascade. Mobile booking forms from V22 remain intact.
 */
.header{
  background:rgba(250,250,245,.97);
  border-bottom:1px solid #dfe5d8;
  box-shadow:0 5px 24px rgba(34,56,40,.055);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  z-index:100;
}
.header .nav{
  position:relative;
  min-height:83px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(14px,1.9vw,26px);
}
.header .brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:11px;
  min-width:0;
}
.header .brand-mark img{
  width:48px;
  height:48px;
  filter:drop-shadow(0 4px 9px rgba(62,91,66,.12));
}
.header .brand-wordmark strong{
  font-size:clamp(21px,1.75vw,24px);
  line-height:1.12;
  white-space:nowrap;
  color:#2e4b37;
}
.header .brand-wordmark small{
  font-size:9px;
  letter-spacing:.13em;
  line-height:1.4;
  color:#50634f;
}
.header .site-navigation{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  align-items:center;
  justify-content:center;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:clamp(7px,.85vw,13px);
}
.header .site-navigation :is(.site-link,.nav-link){
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  justify-content:center;
  min-height:42px;
  padding:8px 3px;
  margin:0;
  white-space:nowrap;
  font-family:var(--catfe-font-body);
  font-size:clamp(12px,.91vw,13.5px);
  font-weight:650;
  letter-spacing:0;
  line-height:1.45;
  color:#536a58;
  text-decoration:none;
  transition:color .18s ease;
}
.header .site-navigation .site-link:hover,
.header .site-navigation .site-link-active,
.header .site-navigation .nav-link:hover{
  color:#284d37;
}
.header .site-navigation .site-link{
  text-underline-offset:7px;
  text-decoration-thickness:1.5px;
}
.header .site-navigation .site-link-active{
  text-decoration:underline;
}
.header .site-navigation .nav-cta{
  display:inline-flex;
  flex:0 0 auto;
  justify-content:center;
  align-items:center;
  min-height:42px;
  padding:11px 17px;
  margin:0 0 0 5px;
  border-radius:999px;
  white-space:nowrap;
  font-size:13px;
  font-weight:750;
  box-shadow:0 6px 17px rgba(46,70,38,.13);
  transition:background .2s, transform .2s,box-shadow .2s;
}
.header .site-navigation .nav-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 9px 20px rgba(46,70,38,.19);
}
.header-actions{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
}
.header .header-language{
  display:inline-flex;
  align-items:center;
  gap:2px;
  min-height:42px;
  padding:4px;
  border:1px solid #cfd9c7;
  border-radius:999px;
  background:#f4f6ed;
  color:#456044;
  white-space:nowrap;
  box-shadow:0 2px 7px rgba(50,71,50,.045);
  transition:border-color .2s,background .2s;
}
.header .header-language:hover{
  border-color:#a4b79a;
  background:#edf2e8;
}
.header .header-language .lang-choice{
  min-width:30px;
  display:grid;
  place-items:center;
  padding:7px 8px;
  border-radius:999px;
  color:#60705f;
  font-family:var(--catfe-font-body);
  font-size:12px;
  line-height:1.2;
  font-weight:650;
  transition:background .18s,color .18s;
}
.header .header-language .lang-choice-zh{
  font-size:12px;
}
.header .header-language .lang-divider{
  display:none;
}
.header .header-language[data-active-lang="en"] .lang-choice-en,
.header .header-language[data-active-lang="zh"] .lang-choice-zh{
  color:#fff;
  background:#415d43;
  box-shadow:0 2px 5px rgba(30,60,37,.12);
}
.header .site-menu-toggle{
  display:none;
}
.header .site-menu-toggle .menu-bars{
  display:flex;
  width:19px;
  height:17px;
  flex-direction:column;
  justify-content:space-between;
}
.header .site-menu-toggle .menu-bars i{
  display:block;
  height:2px;
  width:100%;
  border-radius:99px;
  background:currentColor;
  transition:transform .2s,opacity .2s;
}
.header .site-menu-toggle .menu-text{
  font-size:13px;
  font-weight:750;
}
.v8-menu-open .header .site-menu-toggle .menu-bars i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.v8-menu-open .header .site-menu-toggle .menu-bars i:nth-child(2){opacity:0}
.v8-menu-open .header .site-menu-toggle .menu-bars i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.header :is(a,button):focus-visible{
  outline:3px solid #68856c;
  outline-offset:3px;
}

/* Keep the full menu visible on laptops and medium desktop windows.
   At 800–1119px it receives its own slim row instead of becoming a hamburger. */
@media (min-width:800px) and (max-width:1119px){
  .header .nav{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:auto auto;
    min-height:0;
    row-gap:0;
    padding-top:12px;
    padding-bottom:0;
  }
  .header .brand{grid-column:1;grid-row:1;justify-self:start}
  .header .header-actions{grid-column:2;grid-row:1;justify-self:end}
  .header .site-navigation{
    grid-column:1/-1;
    grid-row:2;
    display:flex;
    position:static;
    width:100%;
    min-width:0;
    height:auto;
    padding:8px 0 10px;
    margin-top:10px;
    gap:6px;
    justify-content:space-between;
    border:0;
    border-top:1px solid #e4e9df;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    overflow:visible;
    max-height:none;
  }
  .header .site-navigation :is(.site-link,.nav-link){
    min-height:38px;
    padding:7px 2px;
    margin:0;
    font-size:12.5px;
  }
  .header .site-navigation .nav-cta{
    min-height:39px;
    padding:8px 15px;
    margin-left:3px;
    font-size:12px;
  }
}

/* Phone and tablet: logo, always-visible bilingual switch, menu.
   Only the navigation links themselves are inside the dropdown. */
@media (max-width:799px){
  .header .nav{
    display:flex;
    min-height:68px;
    gap:9px;
    padding-top:9px;
    padding-bottom:9px;
  }
  .header .brand-mark img{width:43px;height:43px}
  .header .brand-wordmark strong{font-size:21px}
  .header .brand-wordmark small{font-size:9px}
  .header-actions{margin-left:auto;gap:8px}
  .header .header-language{
    min-height:42px;
    padding:3px;
  }
  .header .header-language .lang-choice{padding:8px 7px;min-width:29px}
  .header .site-menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    width:auto;
    padding:10px 11px;
    gap:8px;
    margin:0;
    border-radius:14px;
    border:1px solid #d1dccd;
    background:#fffef9;
    color:#3b5d43;
    box-shadow:none;
  }
  .header .site-navigation{
    display:none;
    position:absolute;
    z-index:80;
    top:calc(100% + 4px);
    left:12px;
    right:12px;
    width:auto;
    max-height:calc(100dvh - 85px);
    overflow-y:auto;
    overscroll-behavior:contain;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    justify-content:flex-start;
    gap:3px;
    padding:12px;
    border:1px solid #dce6d8;
    border-radius:20px;
    background:#fffefb;
    box-shadow:0 22px 48px rgba(27,53,32,.18);
  }
  .v8-menu-open .header .site-navigation{
    display:flex;
  }
  .header .site-navigation :is(.site-link,.nav-link){
    display:flex;
    justify-content:flex-start;
    flex:0 0 auto;
    width:100%;
    min-height:44px;
    margin:0;
    padding:10px 14px;
    border-radius:10px;
    font-size:15px;
    color:#3f5948;
    text-align:left;
  }
  .header .site-navigation .site-link-active{
    background:#f0f4ec;
    text-decoration:none;
    color:#294b32;
  }
  .header .site-navigation .nav-cta{
    display:flex;
    justify-content:center;
    width:100%;
    min-height:46px;
    margin:8px 0 0;
    font-size:14px;
  }
}
@media(max-width:510px){
  .header .nav{gap:7px}
  .header .brand-mark img{width:39px;height:39px}
  .header .brand-wordmark strong{font-size:19px}
  .header .brand-wordmark small{font-size:8px}
  .header .site-menu-toggle{padding:10px;gap:6px}
  .header .site-menu-toggle .menu-text{font-size:12px}
  .header .header-language .lang-choice{padding:8px 6px}
}
@media(max-width:380px){
  .header .brand{gap:5px}
  .header .brand-mark img{width:35px;height:35px}
  .header .brand-wordmark strong{font-size:18px}
  .header .brand-wordmark small{display:none}
  .header .site-menu-toggle .menu-text{display:none}
  .header .site-menu-toggle{width:44px;flex:0 0 44px}
  .header .header-language .lang-choice{font-size:11px;padding:8px 5px;min-width:26px}
}

/* Desktop editorial polish: maintain content, colours, and existing brand motifs. */
@media(min-width:1120px){
  .hero.shell{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    align-items:center;
    column-gap:clamp(34px,4.2vw,64px);
    min-height:550px;
    padding-top:42px;
    padding-bottom:40px;
  }
  .hero-copy{min-width:0}
  .hero.shell h1{
    font-size:clamp(50px,4.45vw,68px);
    line-height:1.12;
    margin:18px 0 19px;
    text-wrap:balance;
  }
  .hero.shell .hero-sub{
    max-width:540px;
    font-size:16px;
    line-height:1.75;
  }
  .hero .hero-actions{margin:23px 0 28px;gap:18px}
  .hero-art{min-width:0}
  .v8-intro{gap:clamp(25px,3.5vw,52px)}
  .v9-specials-home{margin-bottom:58px}
  .v9-special-home-cards{gap:17px}
  .v9-special-home-cards article{min-width:0}
}
@media(min-width:800px){
  .v9-specials-head,.v8-gallery-head{gap:22px}
  .v9-specials-head h2,.v8-gallery-head h2{
    text-wrap:balance;
  }
  .v9-special-home-cards article{
    transition:transform .2s ease,box-shadow .2s ease;
  }
  .v9-special-home-cards article:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(36,61,39,.16);
  }
  .booking-intro,.faq-heading{max-width:880px}
}
@media(prefers-reduced-motion:reduce){
  .header .site-navigation .nav-cta,
  .header .site-menu-toggle .menu-bars i,
  .v9-special-home-cards article{transition:none}
}