/*
 * article-nav.css — navbar for article/section pages (spbparadise.com).
 *
 * The homepage navbar is an Adobe Muse widget whose markup relies on Muse's
 * absolute-position machinery (margin-right:-10000px offsets, require.js,
 * museMenu init), so it cannot be lifted onto the builder pages as-is.
 * This stylesheet is a faithful static replica: every geometry, color and
 * font value below was transcribed from the Muse CSS —
 *   css/index@crc_145199795.css, css/master_a-master@crc_238456700.css,
 *   css/site_global@crc_444006867.css  (extracted 2026-10-29):
 *   header band  = #u421/#u421-bw (height 114px, #fff, opacity .95,
 *                  shadow 6px 6px 8px rgba(0,0,0,.35))
 *   logo         = #u428/#u424 (top 8px, left 4.99%, width 8.5% of 1024px)
 *   site name    = #u7407-4 (21px 'Julius Sans One', #29ABE2, top 83px)
 *   icons        = #u7084/#u15451/#u7107/#u7117/#u7097 (top 9px, width 2.93%,
 *                  lefts 72.56/77.45/82.23/87.11/92%)
 *   lang switch  = #u6531/#u4595 (top 46px, left 85.75%, width 9.18%)
 *   menu         = #menuu217 (top 72px, left 33.99%, width 61.04%),
 *                  items min-height 41px, label 15px/18px '__Avenir Next_5'
 *                  #534741, top offset 11px
 *   hairline     = #u7092 (1px, #29ABE2, same geometry as the menu)
 *   hover        = #u219:hover etc. (bg #29ABE2, white text, radius 2px,
 *                  transition .4s ease .1s)
 *   @font-face   = same declarations as the homepage stylesheet (Avenir Next
 *                  absolute https URLs, Julius Sans One ../fonts/*.woff).
 * Mobile (<=760px): the Muse site redirects phones to phone/, but article
 * pages are shared by every device, so the header collapses to a compact
 * bar with a burger that opens the same items (site palette).
 */

@font-face {
  font-family: '__Avenir Next_5';
  src: url('https://spbparadise.com/fonts/avenirnext-regular.eot');
  src: local('☺'), url('https://spbparadise.com/fonts/avenirnext-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: '__Avenir Next_5';
  src: url('https://spbparadise.com/fonts/avenirnext-bolditalic.eot');
  src: local('☺'), url('https://spbparadise.com/fonts/avenirnext-bolditalic.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: '__Julius Sans One_5';
  src: url('https://spbparadise.com/fonts/juliussansone-regular.eot');
  src: local('☺'), url('../fonts/juliussansone-regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

.sp-header {
  position: relative;
  z-index: 50;
  background-color: #FFFFFF;
  opacity: 0.95;
  box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.35);
  min-height: 114px;
}
.sp-header-in {
  position: relative;
  max-width: 1024px;
  margin: 0 auto;
  min-height: 114px;
}
.sp-header a { text-decoration: none; }
.sp-header img { border: 0; }

/* logo + site name (as #u428/#u424 and #u7407-4) */
.sp-logo {
  position: absolute; top: 8px; left: 4.99%; width: 8.5%;
}
.sp-logo img { width: 100%; display: block; }
.sp-sitename {
  position: absolute; top: 83px; left: 1.18%; width: 16.12%;
  min-height: 30px; line-height: 25px; text-align: center;
  font-family: '__Julius Sans One_5', 'Julius Sans One', serif;
  font-size: 21px; font-weight: 400; color: #29ABE2;
}

/* social icon row (as #u7084 mail, #u15451 LINE, #u7107 facebook,
   #u7117 phone, #u7097 map) */
.sp-icon { position: absolute; top: 9px; width: 2.93%; }
.sp-icon img { width: 100%; display: block; }
.sp-icon--mail  { left: 72.56%; }
.sp-icon--line  { left: 77.45%; }
.sp-icon--fb    { left: 82.23%; }
.sp-icon--phone { left: 87.11%; }
.sp-icon--map   { left: 92%; }

/* language switch (as #u6531/#u4595 with the two click zones) */
.sp-lang {
  position: absolute; top: 46px; left: 85.75%; width: 9.18%;
}
.sp-lang img { width: 85.11%; display: block; margin-left: 9.58%; }
.sp-lang-zones { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.sp-lang-zones a, .sp-lang-zones span {
  position: absolute; top: 0; height: 100%; width: 46.81%; display: block;
}
.sp-lang-zones a { cursor: pointer; }
.sp-lang-zones span { cursor: default; }
.sp-lang-zones .sp-lang--th { left: 0; }
.sp-lang-zones .sp-lang--en { left: 52.13%; width: 47.88%; }

/* menu (as #menuu217 + hairline #u7092) */
.sp-menubar {
  position: absolute; top: 72px; left: 33.99%; width: 61.04%;
  border-top: 1px solid #29ABE2;
}
.sp-menu {
  display: flex; margin: 0; padding: 0; list-style: none;
}
.sp-menu li { flex: 1 1 auto; min-height: 41px; }
.sp-menu a {
  display: block; height: 41px; box-sizing: border-box; padding-top: 11px;
  text-align: center; white-space: nowrap;
  line-height: 18px; font-size: 15px; font-weight: 400;
  color: #534741; border-radius: 2px;
  font-family: '__Avenir Next_5', 'Avenir Next', 'Segoe UI', sans-serif;
  transition-property: background-color, color;
  transition-duration: 0s; transition-delay: 0s;
}
.sp-menu a:hover {
  background-color: #29ABE2; color: #FFFFFF; border-radius: 2px;
  transition-duration: 0.4s; transition-delay: 0.1s; transition-timing-function: ease;
}

/* ---------- mobile (article pages serve every device) ---------- */
.sp-burger {
  display: none;
  position: absolute; top: 32px; right: 4%;
  width: 44px; height: 40px; padding: 8px 10px;
  border: 0; border-radius: 2px; background: #29ABE2; cursor: pointer;
}
.sp-burger span {
  display: block; height: 3px; margin: 3px 0; border-radius: 2px;
  background: #FFFFFF;
}
.sp-mobile-menu { display: none; }

@media (max-width: 760px) {
  .sp-header { min-height: 74px; }
  .sp-header-in { min-height: 74px; }
  .sp-logo { top: 12px; left: 4%; width: 15%; }
  .sp-sitename { top: 34px; left: 22%; width: auto; font-size: 17px; text-align: left; }
  .sp-menubar, .sp-icon, .sp-lang { display: none; }
  .sp-burger { display: block; }
  .sp-mobile-menu {
    display: none;
    border-top: 1px solid #29ABE2;
    background: #FFFFFF;
  }
  .sp-mobile-menu.is-open { display: block; }
  .sp-mobile-menu ul { margin: 0; padding: 0; list-style: none; }
  .sp-mobile-menu li { border-bottom: 1px solid rgba(41, 171, 226, .25); }
  .sp-mobile-menu a {
    display: block; padding: 12px 6%;
    font-family: '__Avenir Next_5', 'Avenir Next', 'Segoe UI', sans-serif;
    font-size: 15px; line-height: 18px; color: #534741;
  }
  .sp-mobile-menu a:active, .sp-mobile-menu a:hover {
    background: #29ABE2; color: #FFFFFF;
  }
  .sp-mobile-menu .sp-mm-lang {
    display: flex; gap: 10px; padding: 10px 6%;
  }
  .sp-mobile-menu .sp-mm-lang a {
    padding: 6px 14px; border: 1px solid #29ABE2; border-radius: 2px;
    color: #29ABE2;
  }
}