/*
Theme Name: Sanwa Vacuum Lightning Child
Theme URI: https://www.sanwa-vacuum.co.jp/
Description: 三和真空株式会社 リニューアルサイト用 Lightning 子テーマ
Author: Sanwa Vacuum
Template: lightning
Version: 1.0.0
Text Domain: sanwa-vacuum-lightning-child
*/

/*
 * SANWA VACUUM renewal custom styles
 * この下にサイト固有のCSSを追加していきます。
 */
/* =========================================================
   SANWA VACUUM
   GLOBAL HEADER / NAVIGATION
   Lightning 15.39+
   ========================================================= */

:root {
  --svc-header-navy: #063d73;
  --svc-header-dark: #052f5b;
  --svc-header-blue: #0879ba;
  --svc-header-text: #173e57;
  --svc-header-gray: #607986;
  --svc-header-border: #d9e6ec;
  --svc-header-light: #f3f8fa;
}


/* =========================================================
   SITE HEADER
   ========================================================= */

.site-header {
  position: relative;
  z-index: 1000;

  width: 100%;

  background: #fff;

  border-bottom: 1px solid var(--svc-header-border);

  box-shadow:
    0 2px 12px
    rgba(9, 51, 80, .05);
}


/* Lightning header inner */

.site-header-container {
  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;

  gap: 30px;

  width: min(1180px, calc(100% - 48px)) !important;
  max-width: 1180px !important;

  min-height: 76px;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  overflow: visible !important;
}


/* =========================================================
   LOGO
   ========================================================= */

.site-header-logo {
  flex: 0 0 auto !important;

  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


.site-header-logo a {
  display: flex !important;

  align-items: center;

  width: auto !important;

  padding: 0 !important;
}


.site-header-logo img {
  display: block;

  width: auto !important;
  max-width: 125px !important;
  max-height: 52px !important;

  margin: 0 !important;
}


/* =========================================================
   GLOBAL NAV
   ========================================================= */

.global-nav {
  flex: 1 1 auto;

  width: auto !important;

  margin: 0 0 0 auto !important;

  overflow: visible !important;
}


.global-nav-list {
  display: flex !important;

  align-items: stretch;
  justify-content: flex-end;

  gap: 0;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  list-style: none;
}


/* Remove Lightning default current-line styling */

.global-nav-list > li::before {
  content: none !important;
}


/* Main items */

.global-nav-list > li {
  position: relative;

  display: flex;

  align-items: center;

  margin: 0 !important;
  padding: 0 !important;
}


.global-nav-list > li > a {
  display: flex !important;

  align-items: center;
  justify-content: center;

  min-height: 76px;

  padding: 0 14px !important;

  border: 0 !important;

  background: transparent;

  color: var(--svc-header-text) !important;

  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;

  white-space: nowrap;

  text-decoration: none !important;

  transition:
    color .18s ease,
    background .18s ease;
}


.global-nav-list > li > a:hover,
.global-nav-list > li:hover > a,
.global-nav-list > li.current-menu-item > a,
.global-nav-list > li.current-menu-ancestor > a {
  background: var(--svc-header-light);

  color: var(--svc-header-blue) !important;
}


/* Lightning inner menu label */

.global-nav-list > li > a .global-nav-name {
  display: flex;

  align-items: center;

  width: auto !important;

  font-size: inherit !important;
  line-height: inherit !important;

  white-space: nowrap;
}


/* =========================================================
   ONLINE STORE BUTTON
   ========================================================= */

.global-nav-list > li.svc-menu-store {
  margin-left: 9px !important;
}


.global-nav-list > li.svc-menu-store > a {
  min-height: 44px !important;

  margin: 16px 0 !important;

  padding: 0 18px !important;

  border-radius: 4px;

  background: var(--svc-header-navy) !important;

  color: #fff !important;

  font-size: 12px;
  font-weight: 800;

  letter-spacing: .025em;

  box-shadow:
    0 3px 10px
    rgba(5, 47, 91, .10);
}


.global-nav-list > li.svc-menu-store > a::after {
  content: "↗";

  display: inline-block;

  margin-left: 10px;

  font-size: 12px;
  font-weight: 400;
}


.global-nav-list > li.svc-menu-store > a:hover {
  background: var(--svc-header-blue) !important;

  color: #fff !important;
}


/* ONLINE STORE has no underline/current decoration */

.global-nav-list > li.svc-menu-store::before {
  display: none !important;
}


/* =========================================================
   COMMON DROPDOWN
   ========================================================= */

.global-nav-list > li.menu-item-has-children {
  overflow: visible !important;
}


.global-nav-list > li.menu-item-has-children > .sub-menu {
  position: absolute !important;
  z-index: 9999;

  top: 100% !important;

  margin: 0 !important;
  padding: 8px !important;

  border: 1px solid var(--svc-header-border);

  border-radius: 0 0 7px 7px;

  background: #fff;

  box-shadow:
    0 12px 30px
    rgba(8, 50, 78, .13);
}


/* Individual dropdown item */

.global-nav-list .sub-menu > li {
  position: relative;

  margin: 0 !important;
  padding: 0 !important;

  background: #fff;
}


.global-nav-list .sub-menu > li > a {
  display: flex !important;

  align-items: center;
  justify-content: space-between;

  min-height: 43px;

  padding: 8px 13px !important;

  border: 0 !important;
  border-bottom: 1px solid #e7eff3 !important;

  background: #fff !important;

  color: #365a70 !important;

  font-size: 12px;
  line-height: 1.45;
  font-weight: 600;

  white-space: normal;

  text-decoration: none !important;

  transition:
    background .16s ease,
    color .16s ease;
}


.global-nav-list .sub-menu > li:last-child > a {
  border-bottom-color: transparent !important;
}


.global-nav-list .sub-menu > li > a:hover {
  background: #edf6fa !important;

  color: var(--svc-header-navy) !important;
}


/* Small arrow after dropdown items */

.global-nav-list .sub-menu > li > a::after {
  content: "→";

  flex: 0 0 auto;

  margin-left: 12px;

  color: #77a8bf;

  font-size: 10px;
  font-weight: 400;
}


/* =========================================================
   ORIGINAL FITTINGS DROPDOWN
   19 products / 3 columns
   ========================================================= */

@media (min-width: 900px) {

  .global-nav-list
  > li.svc-menu-original
  > .sub-menu {
    left: 0 !important;
    right: auto !important;

    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(205px, 1fr));

    width: 690px !important;

    gap: 0;

    padding: 10px !important;
  }


  .global-nav-list
  > li.svc-menu-original
  > .sub-menu
  > li {
    width: auto !important;

    border-right: 1px solid #e8eff3;
  }


  .global-nav-list
  > li.svc-menu-original
  > .sub-menu
  > li:nth-child(3n) {
    border-right: 0;
  }


  .global-nav-list
  > li.svc-menu-original
  > .sub-menu
  > li
  > a {
    height: 100%;

    min-height: 47px;

    border-bottom: 1px solid #e8eff3 !important;
  }

}


/* =========================================================
   PRODUCTS DROPDOWN
   8 categories / 2 columns
   ========================================================= */

@media (min-width: 900px) {

  .global-nav-list
  > li.svc-menu-products
  > .sub-menu {
    left: 50% !important;
    right: auto !important;

    transform: translateX(-50%);

    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(225px, 1fr));

    width: 500px !important;

    gap: 0;

    padding: 10px !important;
  }


  .global-nav-list
  > li.svc-menu-products
  > .sub-menu
  > li {
    width: auto !important;

    border-right: 1px solid #e8eff3;
  }


  .global-nav-list
  > li.svc-menu-products
  > .sub-menu
  > li:nth-child(2n) {
    border-right: 0;
  }


  .global-nav-list
  > li.svc-menu-products
  > .sub-menu
  > li
  > a {
    min-height: 49px;

    border-bottom: 1px solid #e8eff3 !important;
  }

}


/* =========================================================
   DESKTOP / TABLET PC NAV
   Keep horizontal menu until 899px
   ========================================================= */

@media (min-width: 900px) {

  .site-header-container {
    display: flex !important;
  }


  .global-nav {
    display: block !important;
  }


  .vk-mobile-nav-menu-btn {
    display: none !important;
  }

}


/* =========================================================
   NARROW DESKTOP
   ========================================================= */

@media (min-width: 900px) and (max-width: 1080px) {

  .site-header-container {
    width: calc(100% - 32px) !important;

    gap: 15px;
  }


  .site-header-logo img {
    max-width: 105px !important;
    max-height: 46px !important;
  }


  .global-nav-list > li > a {
    padding-left: 9px !important;
    padding-right: 9px !important;

    font-size: 11px;
  }


  .global-nav-list > li.svc-menu-store {
    margin-left: 4px !important;
  }


  .global-nav-list > li.svc-menu-store > a {
    padding-left: 12px !important;
    padding-right: 12px !important;

    font-size: 10px;
  }


  .global-nav-list
  > li.svc-menu-original
  > .sub-menu {
    width: 650px !important;

    grid-template-columns:
      repeat(3, minmax(190px, 1fr));
  }


  .global-nav-list
  > li.svc-menu-products
  > .sub-menu {
    width: 470px !important;

    grid-template-columns:
      repeat(2, minmax(210px, 1fr));
  }

}


/* =========================================================
   MOBILE HEADER
   Under 900px
   Lightning mobile navigation is used
   ========================================================= */

@media (max-width: 899.98px) {

  .site-header {
    min-height: 62px;
  }


  .site-header-container {
    display: flex !important;

    align-items: center !important;

    width: calc(100% - 32px) !important;

    min-height: 62px;

    padding: 0 !important;

    overflow: visible !important;
  }


  .site-header-logo {
    margin-left: auto !important;
    margin-right: auto !important;
  }


  .site-header-logo img {
    max-width: 92px !important;
    max-height: 40px !important;
  }


  /*
   * Desktop global navigation is hidden.
   * Lightning mobile navigation handles the menu.
   */

  .global-nav {
    display: none !important;
  }


  .vk-mobile-nav-menu-btn {
    display: block !important;
  }

}


/* =========================================================
   SCROLLED HEADER
   ========================================================= */

.header_scrolled .site-header {
  background: rgba(255, 255, 255, .98);

  border-bottom: 1px solid var(--svc-header-border);

  box-shadow:
    0 4px 18px
    rgba(6, 47, 78, .10);
}


.header_scrolled .site-header-container {
  min-height: 68px;
}


@media (min-width: 900px) {

  .header_scrolled
  .global-nav-list
  > li
  > a {
    min-height: 68px;
  }


  .header_scrolled
  .global-nav-list
  > li.svc-menu-store
  > a {
    min-height: 40px !important;

    margin-top: 14px !important;
    margin-bottom: 14px !important;
  }

}


/* =========================================================
   ACCESSIBILITY / KEYBOARD
   ========================================================= */

.global-nav-list a:focus-visible {
  outline: 2px solid var(--svc-header-blue) !important;
  outline-offset: -2px;
}


.global-nav-list
> li.svc-menu-store
> a:focus-visible {
  outline-color: #fff !important;
  outline-offset: -4px;
}