/*
Theme Name: Hello Elementor Child
Template: hello-elementor
*/

html,body{max-width:100%;overflow-x:hidden;}

body,button,input,select,textarea{
  font-family:'IBM Plex Sans Thai', system-ui, sans-serif;
}

/* ---- Sticky nav ---- */
#site-navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(250,250,250,0.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s, box-shadow .3s, border-color .3s;
}
#site-navbar.scrolled{
  background:rgba(250,250,250,0.85);
  border-bottom-color:#E8E8E8;
  box-shadow:0 1px 3px rgba(0,0,0,0.08);
}

.sabai-menu{list-style:none;display:flex;align-items:center;gap:36px;margin:0;padding:0;}
.sabai-menu li a{
  font-size:15px;font-weight:500;color:#3D3D3D;text-decoration:none;transition:color .2s;
  white-space:nowrap;
}
.sabai-menu li a:hover{color:#1B5E52;}
.sabai-menu li.nav-cta a{
  font-weight:600;color:#fff !important;background:#1B5E52;
  padding:10px 22px;border-radius:8px;transition:background .2s;
}
.sabai-menu li.nav-cta a:hover{background:#3D9E8C;color:#fff !important;}

@media(max-width:767px){
  .sabai-menu{gap:12px;}
  .sabai-menu li:not(.nav-cta):not(.menu-item-object-language_switcher):not(:first-child){display:none;}
  .sabai-menu li.menu-item-object-language_switcher a{display:flex;align-items:center;padding:8px 2px;}
  .sabai-menu li.menu-item-object-language_switcher .trp-ls-language-name{display:none;}
}

/* ---- Language switcher menu item (added after ติดต่อ) ---- */
.sabai-menu li.menu-item-object-language_switcher a{white-space:nowrap;}

/* ---- Placeholder image blocks (swap with real photos in the editor) ---- */
.maji-placeholder{
  background:linear-gradient(135deg,#1B5E52 0%,#3D9E8C 100%);
  display:flex;align-items:center;justify-content:center;
}
.maji-placeholder .elementor-icon{
  color:rgba(250,250,250,0.55) !important;
}

/* ---- Photo frame blocks (real photos, just rounded + clipped) ---- */
/* Elementor forces every .elementor-widget to position:relative, which makes
   the widget wrapper (not this frame) the containing block for an absolutely
   positioned img and collapses it to 0x0 (its only child is out-of-flow).
   Force the wrapper back to static so the img's containing block is the frame. */
.maji-photo-frame{background:#EEEEEE;position:relative;}
.maji-photo-frame .elementor-widget-image{position:static;}
.maji-photo-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0;}

/* ---- Section header text over image (absolute layout from design) ---- */
.maji-banner-text{position:relative;z-index:2;}

img{max-width:100%;}