/* --- hk header (namespaced) --- */
.hk-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
   /* moderate default; lets logo keep intrinsic height */
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* DO NOT set fixed height on the logo; keep its intrinsic size */
.hk-header > a > img {
  display: block;
  height: auto;
  width: auto;
  max-height: none;
}

/* Fresh hamburger */
.hk-hamburger-container { margin-left: auto; }

.hk-hamburger-btn {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background: transparent;
  color: inherit;
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: visible !important;
}







.hk-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 9998;
}
.hk-backdrop.open { opacity: 1; pointer-events: auto; }




.hk-menu, .hk-menu ul { list-style: none; margin: 0; padding: 0; }
.hk-menu a { display: block; padding: 12px 8px; color: inherit; text-decoration: none; }


/* --- Robust hamburger lines (override any theme conflicts) --- */
.hk-hamburger-btn { line-height: 0; }



/* --- Force correct hamburger stacking --- */
.hk-hamburger-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
}



/* --- Header spacing aligned to reference --- */
.hk-header {
  padding: 12px 20px !important; /* top/bottom, left/right */
}
.hk-header > a { margin-left: 0 !important; }
.hk-header .hk-hamburger-container { margin-right: 0 !important; }

@media (min-width: 1024px) {
  .hk-header { padding: 18px 40px !important; }
}

\








@media (min-width: 960px) {
  .hk-header {
    padding: 24px 132px !important;
  }
}


/* --- Robust pseudo-element hamburger --- */
.hk-hamburger-btn {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  line-height: 0;
}

.hk-hamburger-btn .hk-hb-core,
.hk-hamburger-btn .hk-hb-core::before,
.hk-hamburger-btn .hk-hb-core::after {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}

.hk-hamburger-btn .hk-hb-core {
  position: relative;
}

.hk-hamburger-btn .hk-hb-core::before,
.hk-hamburger-btn .hk-hb-core::after {
  position: relative;
}

.hk-hamburger-btn .hk-hb-core::before { transform: translateY(-7px); }
.hk-hamburger-btn .hk-hb-core::after  { transform: translateY(7px); }

/* open state */
.hk-hamburger-btn[aria-expanded="true"] .hk-hb-core       { transform: rotate(45deg); }
.hk-hamburger-btn[aria-expanded="true"] .hk-hb-core::before { opacity: 0; }
.hk-hamburger-btn[aria-expanded="true"] .hk-hb-core::after  { transform: rotate(-90deg); }

/* Desktop spacing override with strong selectors */
@media (min-width: 1025px) {
  header.hk-header,
  header.site-header.hk-header {
    padding: 24px 132px !important;
  }
}


/* width constraint for PC */
.hk-header-inner { width: 100%; display:flex; align-items:center; justify-content:space-between; }
@media (min-width: 960px) {
  .hk-header-inner { max-width:1080px; margin:0 auto; }
}


/* --- Adjusted hamburger spacing (more visible 3 lines) --- */

@media (min-width: 960px) {
  
}


/* improved hb-bar spacing */

@media (min-width: 960px) {
  
}

/* gap-based spacing for hamburger bars (6px) */

@media (min-width: 960px) {
  
}

/* unified hamburger line rules */
.hk-hamburger-btn {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important; /* per user spec */
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
}

.hk-hamburger-btn > .hk-hb-line,
.hk-hamburger-btn > .hk-hb-bar {
  display: block !important;
  width: 28px !important;
  height: 3px !important;
  background: currentColor !important;
  margin: 0 !important;
  border-radius: 2px;
}

@media (min-width: 960px) {
  .hk-hamburger-btn { width: 52px; height: 52px; }
  .hk-hamburger-btn > .hk-hb-line,
  .hk-hamburger-btn > .hk-hb-bar { width: 30px !important; }
}

/* open state transforms aligned for gap=6px, thickness=3px */
.hk-hamburger-btn[aria-expanded="true"] > .hk-hb-line:nth-child(1),
.hk-hamburger-btn[aria-expanded="true"] > .hk-hb-bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hk-hamburger-btn[aria-expanded="true"] > .hk-hb-line:nth-child(2),
.hk-hamburger-btn[aria-expanded="true"] > .hk-hb-bar:nth-child(2) { opacity: 0; }
.hk-hamburger-btn[aria-expanded="true"] > .hk-hb-line:nth-child(3),
.hk-hamburger-btn[aria-expanded="true"] > .hk-hb-bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }


/* --- Full-screen overlay menu --- */
.hk-backdrop { display: none !important; } /* not needed when drawer covers whole screen */



.hk-drawer.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Fullscreen menu list styling (kept minimal; easy to theme later) */
.hk-menu { max-width: 1080px; margin: 0 auto; }
.hk-menu ul { display: grid; gap: 16px; }
.hk-menu a {
  font-size: clamp(18px, 2.2vw, 22px);
  padding: 14px 8px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
@media (min-width: 960px) {
  
  .hk-menu ul { gap: 18px; }
  .hk-menu a { font-size: 20px; }
}


/* above drawer content */
}
.hk-drawer-close:hover { background: rgba(0,0,0,0.10); }
@media (min-width: 960px) {
  
}


/* Elegant, fixed close button */

.hk-drawer.open 
.hk-drawer-close:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.12); background: rgba(255,255,255,0.9); }
.hk-drawer-close:active { transform: translateY(0); box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.hk-drawer-close svg { display: block; }
.hk-drawer-close:focus-visible { outline: 3px solid rgba(0,120,255,.45); outline-offset: 2px; }



/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  
}

/* subtle blur for overlay */


/* show close button when drawer is open */
.hk-drawer.open + 
@media (min-width: 960px) {
  
}

/* --- Pattern B: fullscreen menu BELOW the header --- */

.hk-drawer.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (min-width: 960px) {
  
}

/* inner close button minimal (inside drawer top-right) */


/* hover color on menu items */


/* Drawer opens UNDER header; closed state never blocks header */
.hk-drawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  /* top is set on open() to header height; cleared on close() */
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px) saturate(180%);
  z-index: 999;              /* below header (1000) */
  padding: 32px 24px;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;       /* no click-catching when closed */
  height: 0;                  /* no layout space when closed */
  transition: opacity .25s ease, transform .25s ease;
}
.hk-drawer.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  /* height is set in JS to calc(100dvh - headerHeight) */
}
@media (min-width: 960px) {
  .hk-drawer { padding: 48px 64px; }
}

/* Ensure header and button are clickable */
.hk-header { pointer-events: auto; }
.hk-hamburger-btn { pointer-events: auto; }

/* Tap feedback */
.hk-hamburger-btn:active { opacity: .8; transform: scale(0.98); }


/* brand color on menu item hover/focus */
.hk-menu a {
  transition: color .2s ease;
}
.hk-menu a:hover,
.hk-menu a:focus-visible {
  color: var(--brand, #E60012);
}

/* brand-colored underline on hover */
.hk-menu a {
  position: relative;
  text-decoration: none;
}
.hk-menu a:hover {
  color: var(--brand, #E60012);
}
.hk-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--brand, #E60012);
  transition: width .25s ease;
}
.hk-menu a:hover::after {
  width: 100%;
}

/* Reinstate stylish close button (fixed & elegant) */
.hk-drawer-close {
  position: fixed !important;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 50%;
  backdrop-filter: blur(8px) saturate(150%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001;
  transition: background .25s ease, box-shadow .25s ease;
}
.hk-drawer-close:hover {
  background: rgba(255,255,255,0.9);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.hk-drawer-close::before, .hk-drawer-close::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background: #333;
  border-radius: 2px;
  transition: background .25s ease;
}
.hk-drawer-close::before { transform: rotate(45deg); }
.hk-drawer-close::after  { transform: rotate(-45deg); }

/* show when drawer is open */
.hk-drawer.open + .hk-drawer-close {
  display: flex;
}
@media (min-width: 960px) {
  .hk-drawer-close { top: 28px; right: 28px; width: 48px; height: 48px; }
  .hk-drawer-close::before, .hk-drawer-close::after { width: 24px; }
}


/* === Added by ChatGPT: Hover effects for hamburger and drawer close === */
.hk-hamburger-btn,
.hamburger,
.hamburger-btn,
.drawer-close {
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, opacity .2s ease;
}

/* Change icon/bars to brand color on hover/focus */
.hk-hamburger-btn:hover,
.hk-hamburger-btn:focus-visible,
.hamburger:hover,
.hamburger:focus-visible,
.hamburger-btn:hover,
.hamburger-btn:focus-visible {
  color: var(--brand);
}

/* Ensure hamburger inner bars adopt the color via currentColor */
.hk-hamburger-btn:hover .hk-hb-line,
.hk-hamburger-btn:focus-visible .hk-hb-line {
  background: currentColor;
}

/* Close button hover: colorize with brand */
.drawer-close:hover,
.drawer-close:focus-visible {
  color: var(--brand);
  border-color: var(--brand);
}

/* If close button uses SVG, colorize paths via currentColor */
.drawer-close:hover svg,
.drawer-close:focus-visible svg {
  fill: currentColor;
  stroke: currentColor;
}
/* === End hover effects === */


/* === Auto-added by ChatGPT: center .footer-left on small screens === */
@media (max-width: 1024px){
  .footer-left { 
    text-align: center !important; 
  }
  .footer-left, .footer-left * {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
  }
  .footer-left {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .footer-left a, .footer-left p, .footer-left li, .footer-left span, .footer-left h1, .footer-left h2, .footer-left h3, .footer-left h4, .footer-left h5, .footer-left h6 {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
/* === End auto-added === */

/* ==== footer tel button (added) ==== */
.footer-left .footer-tel {
  margin-top: 8px;
}
.footer-left .footer-tel a {
  display: inline-block;
  font-size: 16.7px;
  font-weight: 700;
  padding: 10px 10px;
  border-radius: 8px;
  color: #FFF;
  text-decoration: none;
  border: 1px solid #ddd;}
.footer-left .footer-tel a:hover {
  opacity: 0.7 !important;
  color: inherit !important;
  background: none !important;
}
@media (max-width: 768px) {
  .footer-left { text-align: center; }
  .footer-left .footer-tel { display: block; margin-top: 8px; }
}
.site-footer .footer-nav li {
  margin-bottom: 16px;
}
.site-footer .footer-nav ul {
  margin-top: 35px !important;
}

/* === TEL HOVER PATCH (2025-11-06) ===
   Enforce: no color swap on tel hover; opacity only.
   Applies to: tel: links and common tel classes.
*/
a[href^="tel"]:hover,
.footer-left .footer-tel a:hover,
.contact-tel a:hover,
.tel a:hover,
a.tel:hover {
  opacity: 0.7 !important;
  color: inherit !important;
  background: none !important;
}
/* === END TEL HOVER PATCH === */