/*
 * Phone and tablet menu (below 1100px): the header's menu button opens a panel that slides in from the right with every
 * header link. The theme hides its header icons below 1100px, so the white bar shows only the menu button there.
 * The panel uses the theme's Body font (WP Coupon → Typography, see functions.php); IDs keep the page styles out.
 */
@media (max-width: 1099px) {
  /* The menu button sits on the logo's line at the right of the black bar, and the white bar under the header (which held only
     the button) is folded away. --kpc-logo-mid is the logo's vertical middle, measured by mobile-menu.js (41px without it). */
  #masthead { position: relative; }
  #masthead #site-header-nav { position: static; height: 0; min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
  #masthead #site-header-nav .container, #masthead .primary-navigation { position: static; float: none; height: 0; min-height: 0; padding: 0; }
  #masthead .primary-navigation .st-menu, #masthead #site-header-nav .nav-user-action { display: none !important; }
  #masthead #nav-toggle { display: block; position: absolute; z-index: 2; top: var(--kpc-logo-mid, 41px); right: 22px; transform: translateY(-50%); margin: 0; padding: 8px; color: #fff; font-size: 22px; line-height: 1; }
  #masthead #nav-toggle i.icon { margin: 0; }
  /* Tablets: logo, search box and menu button in one row; the search box makes room for the button. */
  #masthead .header_right { margin-right: 40px; }
}
@media (max-width: 790px) { #masthead #nav-toggle { right: 17px; } }
/* Phones: logo centred with the button on its right, the search box below; the logo never runs under the button. */
@media (max-width: 500px) {
  #masthead #nav-toggle { right: 8px; }
  #masthead .header_right { margin-right: 0; }
  #masthead .logo_area img { max-width: calc(100vw - 120px); height: auto; }
}
#nav-toggle:focus-visible { outline: 2px solid #0675ed; outline-offset: 2px; }

#kpc-drawer[hidden] { display: none; }
#kpc-drawer { position: fixed; inset: 0; z-index: 100000; }
#kpc-drawer .kpc-drawer-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, .32); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
#kpc-drawer .kpc-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(78vw, 320px); box-sizing: border-box; padding: 64px 24px 24px; overflow-y: auto; background: #fff; box-shadow: -8px 0 24px rgba(17, 24, 39, .12); transform: translateX(100%); transition: transform .25s ease; outline: none; }
#kpc-drawer.is-open .kpc-drawer-backdrop { opacity: 1; }
#kpc-drawer.is-open .kpc-drawer-panel { transform: none; }
html.kpc-drawer-open, html.kpc-drawer-open body { overflow: hidden; }

#kpc-drawer .kpc-drawer-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #8a94a6; font-size: 26px; line-height: 1; cursor: pointer; }
#kpc-drawer .kpc-drawer-close:hover { background: #f1f4f8; color: #111827; }
#kpc-drawer .kpc-drawer-close:focus-visible { outline: 2px solid #0675ed; outline-offset: 1px; }

#kpc-drawer .kpc-drawer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#kpc-drawer .kpc-drawer-links li { margin: 0; padding: 0; }
#kpc-drawer .kpc-drawer-links a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: 8px; color: #1f2937; font-size: 15px; font-weight: 500 !important; line-height: 1.3; text-decoration: none; }
#kpc-drawer *:not(i):not(.icon) { font-family: inherit !important; }
#kpc-drawer .kpc-drawer-links a:hover { background: #f1f4f8; color: #111827; }
#kpc-drawer .kpc-drawer-links a:focus-visible { outline: 2px solid #0675ed; outline-offset: 1px; }
#kpc-drawer .kpc-drawer-links a[aria-current="page"] { background: #eef5ff; color: #0675ed; }
#kpc-drawer .kpc-drawer-icon { flex: none; width: 22px; display: inline-flex; align-items: center; justify-content: center; color: #6b7280; }
#kpc-drawer a[aria-current="page"] .kpc-drawer-icon { color: #0675ed; }
#kpc-drawer .kpc-drawer-icon i.icon { margin: 0; width: auto; height: auto; font-size: 17px; line-height: 1; }
#kpc-drawer .kpc-drawer-icon img { width: 20px; height: 20px; object-fit: contain; }
#kpc-drawer .kpc-drawer-ext { margin-left: 2px; font-size: 13px; color: #9ca3af; }

@media (prefers-reduced-motion: reduce) {
  #kpc-drawer .kpc-drawer-backdrop, #kpc-drawer .kpc-drawer-panel { transition: none; }
}