/*
 * article-nav.css — navbar for article/section pages (baanmaikaew.com).
 *
 * The homepage navbar is a Themify builder row (logo module + menu module)
 * laid out by generated grid rules scoped to the homepage
 * (.themify_builder_content-6 ...). This stylesheet is a static replica of
 * that row with the EXACT values sampled from the rendered homepage
 * (computed styles + bounding boxes, desktop 1280px / mobile 390px):
 *   band        bg rgb(255,224,199); padding 13px 60px 20px (desktop),
 *               39px 20px 10px (mobile); columns .807fr / 2.296fr
 *   logo col    26.01% wide, centered; image full column width
 *   menu module padding-top 45px; nav box inline-block, bg rgb(255,242,224)
 *               (= #fff2e0), radius 4px, ring 0 0 0 1px rgba(0,0,0,.1)
 *   links       19px/24.7px 'Public Sans', color #5c5959, padding
 *               11.875px 23.75px; current item bg #c9c9c9; hover #efefef
 *   burger      white (color:#fff, Themify rule), Themify burger markup
 * Mobile: the Themify drawer CSS (mobile-menu-slide.css etc.) was never
 * captured by the archive, so the shipped drawer JavaScript cannot render
 * a menu (verified over HTTP: it only flips body classes and throws).
 * The module's own inline media query (ships inside the markup) shows
 * .module-menu-container.is-open at ≤600px; the vertical dropdown below
 * reuses those exact computed colors. The same fallback is applied to the
 * homepages through css/content.css (both link it) + js/article-nav.js.
 */

/* ---------- band + columns ---------- */
.bm-header {
  display: flex;
  background: rgb(255, 224, 199);
  padding: 13px 60px 20px;
}
.bm-logo {
  width: 26.01%;
  text-align: center;
}
.bm-logo img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.bm-menu {
  flex: 1 1 auto;
  padding-left: 17px;
  padding-top: 45px;
}

/* ---------- menu box (tb_g2ir497 values) ---------- */
.bm-menu .module-menu {
  text-align: start;
}
.bm-menu .module-menu-container {
  text-align: inherit;
}
.bm-menu ul.ui.nav {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #fff2e0;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}
.bm-menu ul.ui.nav li {
  display: inline-block;
  margin: 0;
  border: 0;
}
.bm-menu ul.ui.nav li a {
  display: inline-block;
  padding: 11.875px 23.75px;
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 19px;
  line-height: 24.7px;
  color: #5c5959;
  text-decoration: none;
}
.bm-menu ul.ui.nav li.current-menu-item a,
.bm-menu ul.ui.nav li.current_page_item a {
  background-color: #c9c9c9;
}
.bm-menu ul.ui.nav li a:hover {
  background-color: #efefef;
}

/* ---------- burger (verbatim Themify rules, white on the band) ---------- */
.tf_hide { display: none; }
.tf_rel { position: relative; }
.tf_clearfix:after { content: ""; display: table; clear: both; }
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute; width: 1px; word-wrap: normal !important;
}
.bm-menu .menu-module-burger {
  cursor: pointer;
  color: #fff;
  box-shadow: none !important;
  width: 1.4em;
  line-height: 1;
  padding: 12px 10px 10px 12px;
  border-radius: 100%;
  box-sizing: unset;
  border: 0;
  background: none;
  font: inherit;
}
.bm-menu .menu-module-burger:hover { background-color: rgba(200, 200, 200, .25); }
.bm-menu .menu-module-burger-inner {
  display: inline-block;
  position: relative;
  width: 1.3em;
  height: 1em;
  border-bottom: 2px solid;
}
.bm-menu .menu-module-burger-inner:before,
.bm-menu .menu-module-burger-inner:after {
  content: '';
  display: block;
  border-bottom: 2px solid;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.bm-menu .menu-module-burger-inner:after { top: 50%; }

/* ---------- mobile (≤600px, module breakpoint) ---------- */
@media (max-width: 600px) {
  .bm-header {
    display: block;
    padding: 39px 20px 10px;
  }
  .bm-logo {
    width: 100%;
    margin: 0 auto;
  }
  .bm-menu {
    padding: 0;
    text-align: right;
  }
  .bm-menu .module-menu {
    text-align: right;
  }
  /* container show/hide comes from the module's own inline media query;
     the dropdown list reuses the homepage's exact computed colors */
  .module-menu .module-menu-container.is-open {
    display: block;
  }
  .module-menu .module-menu-container.is-open ul.ui.nav {
    display: block;
    width: 100%;
    background-color: rgb(255, 242, 224);
    border-radius: 4px;
    padding: 6px 0;
    box-sizing: border-box;
  }
  .module-menu .module-menu-container.is-open ul.ui.nav li {
    display: block;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
    text-align: right;
  }
  .module-menu .module-menu-container.is-open ul.ui.nav li:last-child {
    border-bottom: 0;
  }
  .module-menu .module-menu-container.is-open ul.ui.nav li a {
    display: block;
    padding: 11px 16px;
    font-size: 19px;
    color: rgb(92, 89, 89);
  }
  .module-menu .module-menu-container.is-open ul.ui.nav li a:hover,
  .module-menu .module-menu-container.is-open ul.ui.nav li.current-menu-item a,
  .module-menu .module-menu-container.is-open ul.ui.nav li.current_page_item a {
    background-color: rgb(201, 201, 201);
  }
}