/* ==========================================================================
   PattayaHomes — shared shell (header + language switcher + mobile menu)
   Extracted verbatim from the homepage. Loaded after tokens.css on every page.
   Footer is intentionally NOT here — the homepage footer is a rich contact
   section, so footers stay per-page for now (can be unified later if wanted).
   ========================================================================== */

/* Sticky header */
.header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(231,226,220,.92)}
.head-inner{height:82px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:26px}
.logo{height:42px;width:auto;display:block}

/* Anchor offset so #section links land below the sticky header */
html{scroll-padding-top:var(--sticky-header-height)}

/* Desktop nav */
.site-nav{display:flex;align-items:center;justify-content:center;gap:26px}
.site-nav a{text-decoration:none;font-size:14px;font-weight:700;color:#5F5750;transition:.15s}
.site-nav a:hover{color:var(--brand)}

/* Header right cluster */
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}

/* Desktop language pills */
.langs{display:flex;gap:2px;background:#F2EFEA;border-radius:9px;padding:3px}
.lng{width:32px;height:32px;border:0;background:none;cursor:pointer;padding:5px;border-radius:7px;font-size:0;display:flex;align-items:center;justify-content:center;opacity:.62}
.lng::before{content:"";width:22px;height:22px;border-radius:50%;background-position:center;background-size:cover;box-shadow:0 0 0 1px rgba(27,23,20,.12)}
.lng[data-lang="en"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23012169'/%3E%3Cpath d='M0 0L60 60M60 0L0 60' stroke='%23fff' stroke-width='13'/%3E%3Cpath d='M0 0L60 60M60 0L0 60' stroke='%23C8102E' stroke-width='6'/%3E%3Cpath d='M30 0V60M0 30H60' stroke='%23fff' stroke-width='18'/%3E%3Cpath d='M30 0V60M0 30H60' stroke='%23C8102E' stroke-width='10'/%3E%3C/svg%3E")}
.lng[data-lang="ru"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath fill='%23fff' d='M0 0h60v20H0z'/%3E%3Cpath fill='%230039A6' d='M0 20h60v20H0z'/%3E%3Cpath fill='%23D52B1E' d='M0 40h60v20H0z'/%3E%3C/svg%3E")}
.lng[data-lang="cn"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23DE2910'/%3E%3Cpath fill='%23FFDE00' d='M15 8l2.7 8.2h8.6l-7 5 2.7 8.2-7-5-7 5 2.7-8.2-7-5h8.6z'/%3E%3C/svg%3E")}
.lng[data-lang="th"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath fill='%23A51931' d='M0 0h60v60H0z'/%3E%3Cpath fill='%23fff' d='M0 10h60v40H0z'/%3E%3Cpath fill='%232D2A4A' d='M0 20h60v20H0z'/%3E%3C/svg%3E")}
.lng.active{background:var(--brand);opacity:1}
.lng.active::before{box-shadow:0 0 0 1px rgba(255,255,255,.55)}

/* Mobile hamburger + slide-down panel */
.mobile-menu{display:none}
.mobile-panel{display:none;position:fixed;z-index:50;inset:66px 0 auto;background:#fff;border-bottom:1px solid var(--line);padding:16px 14px 20px;box-shadow:0 18px 40px rgba(27,23,20,.12)}
.mobile-panel.open{display:block}
.mobile-panel a{display:block;text-decoration:none;padding:12px 4px;font-weight:800;border-bottom:1px solid var(--line)}
.mobile-langs{display:flex;margin-top:14px;gap:7px}
.mobile-langs button{border:1px solid var(--line);background:#F5F3F0;border-radius:9px;padding:8px 11px;font-weight:800}
.mobile-langs button.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* Mobile flag dropdown */
.mobile-lang-picker{display:none;position:relative}
.mobile-lang-current,.mobile-lang-option{border:0;background:#F2EFEA;border-radius:10px;cursor:pointer;padding:0;display:grid;place-items:center}
.mobile-lang-current{width:38px;height:38px;position:relative}
.mobile-lang-current::after{content:"";position:absolute;right:3px;bottom:3px;width:8px;height:8px;border-right:2px solid #776F67;border-bottom:2px solid #776F67;transform:rotate(45deg);border-radius:1px}
.mobile-lang-current::before,.mobile-lang-option::before{content:"";width:24px;height:24px;border-radius:50%;background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:0 0 0 1px rgba(27,23,20,.14)}
.mobile-lang-dropdown{display:none;position:absolute;right:0;top:44px;z-index:70;background:#fff;border:1px solid var(--line);border-radius:13px;padding:6px;box-shadow:0 14px 35px rgba(27,23,20,.16);gap:5px}
.mobile-lang-picker.open .mobile-lang-dropdown{display:grid}
.mobile-lang-option{width:38px;height:38px;background:#fff}
.mobile-lang-option:hover,.mobile-lang-option.active{background:#F2EFEA}
.mobile-lang-current[data-current-lang="en"]::before,.mobile-lang-option[data-mobile-lang="en"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23012169'/%3E%3Cpath d='M0 0L60 60M60 0L0 60' stroke='%23fff' stroke-width='13'/%3E%3Cpath d='M0 0L60 60M60 0L0 60' stroke='%23C8102E' stroke-width='6'/%3E%3Cpath d='M30 0V60M0 30H60' stroke='%23fff' stroke-width='18'/%3E%3Cpath d='M30 0V60M0 30H60' stroke='%23C8102E' stroke-width='10'/%3E%3C/svg%3E")}
.mobile-lang-current[data-current-lang="ru"]::before,.mobile-lang-option[data-mobile-lang="ru"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath fill='%23fff' d='M0 0h60v20H0z'/%3E%3Cpath fill='%230039A6' d='M0 20h60v20H0z'/%3E%3Cpath fill='%23D52B1E' d='M0 40h60v20H0z'/%3E%3C/svg%3E")}
.mobile-lang-current[data-current-lang="cn"]::before,.mobile-lang-option[data-mobile-lang="cn"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Crect width='60' height='60' fill='%23DE2910'/%3E%3Cpath fill='%23FFDE00' d='M15 8l2.7 8.2h8.6l-7 5 2.7 8.2-7-5-7 5 2.7-8.2-7-5h8.6z'/%3E%3C/svg%3E")}
.mobile-lang-current[data-current-lang="th"]::before,.mobile-lang-option[data-mobile-lang="th"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath fill='%23A51931' d='M0 0h60v60H0z'/%3E%3Cpath fill='%23fff' d='M0 10h60v40H0z'/%3E%3Cpath fill='%232D2A4A' d='M0 20h60v20H0z'/%3E%3C/svg%3E")}

/* ---- Responsive ---- */
@media(max-width:900px){
  .head-inner{grid-template-columns:auto 1fr auto;gap:10px}
  .header-actions{grid-column:3;gap:7px}
  .site-nav{display:none}
  .langs{display:none}
  .mobile-menu{display:block;justify-self:end;border:0;background:#F2EFEA;border-radius:10px;width:38px;height:38px;font-size:20px}
  .mobile-lang-picker{display:block}
}
@media(max-width:620px){
  .head-inner{height:66px}
  .logo{height:36px}
  .mobile-panel{top:66px;inset:66px 0 auto;max-height:calc(100svh - 66px);overflow:auto}
}
@media(max-width:390px){
  .logo{height:33px}
}