/**
 * Mind Fitness site shell — header, nav, buttons, footer.
 *
 * These rules used to live only inside index.html's inline <style>, so any
 * page that copied the shell markup (services, booking-manual, corporate)
 * rendered unstyled: a full-size logo, a bulleted nav and a horizontal
 * scrollbar. css/ui-refresh.css only refines the shell, it never defined it.
 *
 * Load order on every shell page:
 *   style.css -> ui-refresh.css -> site-shell.css -> page <style> -> mobile-fix.css
 *
 * Moved verbatim from index.html so the homepage keeps rendering exactly the
 * CSS it shipped before. Add shell-wide rules here, not in a page.
 */

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'IBM Plex Sans Thai','Sarabun',sans-serif;color:#0B1E47;line-height:1.6}

/* Glassmorphism — translucent + blur, lower z-index to stay out of
   the way of horizontal carousel scrolling. */
.site-header{
  background:rgba(255,255,255,0.78);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  box-shadow:0 1px 0 rgba(11,30,71,0.06);
  position:sticky;top:0;z-index:100;
}
.header__inner{max-width:1200px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand__logo{width:36px;height:36px;border-radius:10px}
.brand__name{font-size:18px;font-weight:800;color:#0B1E47}
.nav__list{display:flex;gap:28px;list-style:none;align-items:center}
.nav__link{text-decoration:none;color:#64748b;font-weight:500;transition:all 0.2s}
.nav__link:hover{color:#00A8A8}
.nav-toggle{display:none;background:#0B1E47;color:white;border:none;padding:12px 16px;font-size:20px;border-radius:10px;cursor:pointer}
/* Dropdown nav */
.nav-dropdown{position:relative}
.nav-dropdown-toggle{display:flex;align-items:center;gap:4px;text-decoration:none;color:#64748b;font-weight:500;cursor:pointer;transition:all 0.2s;background:none;border:none;font-size:inherit;font-family:inherit;padding:0}
.nav-dropdown-toggle:hover{color:#00A8A8}
.nav-dropdown-toggle svg{width:12px;height:12px;transition:transform 0.2s}
.nav-dropdown.open .nav-dropdown-toggle svg{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);background:white;border-radius:16px;box-shadow:0 10px 40px rgba(0,0,0,0.12);padding:8px;min-width:220px;opacity:0;visibility:hidden;transition:all 0.25s;z-index:1001}
.nav-dropdown.open .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dropdown-menu a{display:flex;align-items:center;gap:10px;padding:12px 16px;text-decoration:none;color:#0B1E47;border-radius:10px;font-weight:500;font-size:14px;transition:all 0.2s;white-space:nowrap}
.nav-dropdown-menu a:hover{background:#f0fdfa;color:#00A8A8}
.nav-dropdown-menu a span.dd-icon{font-size:18px;width:24px;text-align:center}
.nav-dropdown-menu a img.dd-mascot{width:28px;height:28px;flex-shrink:0}
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;background:linear-gradient(135deg,#00A8A8,#0B1E47);color:white;text-decoration:none;border-radius:14px;font-weight:700;font-size:17px;transition:all 0.3s;box-shadow:0 4px 20px rgba(0,168,168,0.3)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,168,168,0.4)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;background:white;color:#0B1E47;text-decoration:none;border-radius:14px;font-weight:700;font-size:17px;border:2px solid #e2e8f0;transition:all 0.3s}
.btn-outline:hover{border-color:#00A8A8;color:#00A8A8}

.site-footer{background:#0B1E47;color:white;padding:50px 24px;text-align:center}
.site-footer p{opacity:1;margin-bottom:10px;color:rgba(255,255,255,0.95)}
.footer-links{display:flex;gap:24px;justify-content:center;margin-top:20px}
.footer-links a{color:rgba(255,255,255,0.9);text-decoration:none;font-size:14px}
.footer-links a:hover{color:#00A8A8}

@media(max-width:768px) {
  .nav-toggle{display:block}
  .nav{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:white;z-index:9999;padding:80px 20px}
  .nav.active{display:flex;flex-direction:column}
  .nav__list{flex-direction:column;gap:0}
  .nav__link{display:block;padding:18px 20px;font-size:18px;border-bottom:1px solid #f0f0f0}
  .nav-dropdown-toggle{padding:18px 20px;font-size:18px;border-bottom:1px solid #f0f0f0;width:100%;justify-content:space-between}
  .nav-dropdown-menu{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border-radius:0;padding:0 0 0 20px;display:none;min-width:auto}
  .nav-dropdown.open .nav-dropdown-menu{display:block;transform:none}
  .nav-dropdown-menu a{padding:14px 20px;border-bottom:1px solid #f8f8f8}}

/* The TH·EN·CH pill used to be reserved for here, with 144px of padding on
   the header's right edge, because js/translate-banner.js pinned it over the
   page and it landed on the mobile menu button. Reserving edge space per page
   was the wrong fix: it only ever protected the six pages that load this
   file, while eight pages carrying their own copy of the shell CSS kept the
   collision — on desktop over the login button, on mobile over the menu
   button, which could not be opened at all. The pill is now mounted inside
   .header__inner as an ordinary flex child, so no page has to reserve
   anything and a new page cannot reintroduce the bug by forgetting to. */

/* Between the mobile breakpoint and a comfortable desktop the nav has to
   share the row with the brand and the pill, and at ~1020px the
   wordmark and the links were both wrapping onto two lines. Keep the
   wordmark on one line and tighten the link gap through that band. */
@media (min-width: 769px) and (max-width: 1200px) {
  .brand__name { white-space: nowrap; }
  .nav__list { gap: 16px; }
  .nav__link, .nav-dropdown-toggle { white-space: nowrap; font-size: 15px; }
}