/* Sirisup v1.6.14 — Desktop Header Alignment & Menu Spacing
 * Visual-only, scoped to Sirisup pages and header shortcode. Does not touch
 * footer, hero, content or mobile navigation (<=1024px). Supports both the
 * original shortcode header and the Elementor Saved Template header.
 */
@media (min-width:1200px) {
  /* Original shortcode header */
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) {
    box-sizing:border-box!important;
    width:100%!important;
    max-width:1450px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:clamp(18px,1.8vw,30px)!important;
    padding:10px clamp(19px,2.05vw,32px)!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) > .ss-brand {
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    gap:13px!important;
    min-width:0!important;
    max-width:clamp(290px,32vw,455px)!important;
    margin:0!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) > .ss-brand img {
    display:block!important;
    flex:0 0 auto!important;
    margin:0!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) > .ss-brand .ss-brand-words {
    display:block!important;
    min-width:0!important;
    margin:0!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) > ul.ss-menu {
    display:flex!important;
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:clamp(8px,1.05vw,17px)!important;
    margin:0!important;
    padding:0!important;
    white-space:nowrap!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) > ul.ss-menu > li {
    display:flex!important;
    align-items:center!important;
    flex:0 0 auto!important;
    margin:0!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) > ul.ss-menu > li > a {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:46px!important;
    padding:10px 4px!important;
    line-height:1.4!important;
    font-size:clamp(12.5px,1.05vw,15px)!important;
    white-space:nowrap!important;
    text-align:center!important;
  }
  body.ss-bionic-site .ss-header-section .ss-nav:not(.ss167-nav) > ul.ss-menu > li:last-child > a {
    padding:11px clamp(13px,1.25vw,19px)!important;
    margin-left:clamp(2px,.65vw,11px)!important;
  }

  /* Elementor Saved Template header: align logo + Thai/English name in a
     genuine two-column grid; eliminates the older negative-margin offset. */
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav {
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    min-height:88px!important;
    padding:9px clamp(19px,2.05vw,32px)!important;
  }
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-section > .elementor-container {
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:clamp(18px,1.8vw,30px)!important;
  }
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-brand-col {
    width:clamp(290px,31%,445px)!important;
    min-width:0!important;
    flex:0 0 clamp(290px,31%,445px)!important;
    margin:0!important;
    align-self:center!important;
  }
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-brand-col > .elementor-widget-wrap {
    display:grid!important;
    grid-template-columns:66px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:'logo name' 'logo subtitle'!important;
    align-items:center!important;
    align-content:center!important;
    column-gap:13px!important;
    row-gap:2px!important;
    padding:0!important;
    margin:0!important;
  }
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-brand-col .elementor-widget-image {
    grid-area:logo!important;
    width:66px!important;
    margin:0!important;
    align-self:center!important;
  }
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-brand-col .elementor-widget-heading {
    grid-area:name!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    align-self:end!important;
  }
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-brand-col .elementor-widget-text-editor {
    grid-area:subtitle!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    align-self:start!important;
  }
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-menu {
    width:auto!important;
    min-width:0!important;
    flex:1 1 auto!important;
    align-self:center!important;
  }
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-menu > .elementor-widget-wrap {
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:clamp(8px,.95vw,16px)!important;
    padding:0!important;
    margin:0!important;
  }
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-menu .elementor-widget-button {
    flex:0 0 auto!important;
    width:auto!important;
    margin:0!important;
    align-self:center!important;
  }
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-menu .elementor-button {
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:45px!important;
    padding:10px 5px!important;
    font-size:clamp(12.5px,1vw,15px)!important;
    line-height:1.4!important;
    white-space:nowrap!important;
  }
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-menu .ss167-menu-contact .elementor-button {
    padding:11px clamp(13px,1.1vw,18px)!important;
  }
}

/* Narrow desktop: the editable header still shows inline navigation down to
   1025px. Give it measured spacing without changing the legacy tablet menu. */
@media (min-width:1025px) and (max-width:1199px) {
  body.ss-bionic-site .ss-header-section .ss-nav.ss167-nav {align-items:center!important;}
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-section > .elementor-container {
    display:flex!important;align-items:center!important;gap:12px!important;
  }
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-brand-col {
    width:clamp(275px,30%,345px)!important;
    flex:0 0 clamp(275px,30%,345px)!important;
    align-self:center!important;
  }
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-brand-col > .elementor-widget-wrap {
    display:grid!important;
    grid-template-columns:60px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:'logo name' 'logo subtitle'!important;
    gap:2px 10px!important;
    align-items:center!important;
    padding:0!important;
    margin:0!important;
  }
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-brand-col .elementor-widget-image {grid-area:logo!important;width:60px!important;margin:0!important}
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-brand-col .elementor-widget-heading {grid-area:name!important;width:auto!important;margin:0!important;align-self:end!important}
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-brand-col .elementor-widget-text-editor {grid-area:subtitle!important;width:auto!important;margin:0!important;align-self:start!important}
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-menu {width:auto!important;min-width:0!important;flex:1 1 auto!important;align-self:center!important}
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-menu > .elementor-widget-wrap {display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important}
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-menu .elementor-button {font-size:12px!important;padding:10px 3px!important;white-space:nowrap!important}
  body.ss-bionic-site .ss-header-section .ss167-nav .ss167-header-menu .ss167-menu-contact .elementor-button {padding:10px 12px!important}
}