
.header.type1, .head_inner { overflow: visible !important; position: relative; z-index: 60; }
.header-content-right { display:flex; align-items:center; gap:10px; }

/* ---- search & menu toggle buttons (native, theme-matched) ---- */
.hh-search-toggle, .hh-nav-toggle{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer; color:#fff; padding:6px; transition:color .25s ease, transform .25s ease; }
.hh-search-toggle:hover{ color:var(--hh-gold); transform:translateY(-1px); }
.hh-nav-toggle{ display:none; width:38px; height:34px; }
.hh-burger{ position:relative; width:24px; height:16px; display:block; }
.hh-burger span{ position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:#fff;
  transition:transform .3s ease, opacity .2s ease, top .3s ease; }
.hh-burger span:nth-child(1){ top:0; }
.hh-burger span:nth-child(2){ top:7px; }
.hh-burger span:nth-child(3){ top:14px; }
body.hh-drawer-open .hh-burger span:nth-child(1){ top:7px; transform:rotate(45deg); }
body.hh-drawer-open .hh-burger span:nth-child(2){ opacity:0; }
body.hh-drawer-open .hh-burger span:nth-child(3){ top:7px; transform:rotate(-45deg); }
@media (max-width:767px){ .hh-nav-toggle{ display:inline-flex; } }
/* Below 768 the inline desktop menu is hidden (theme handles <=1023; this makes
   the <=767 boundary explicit) so the hamburger is the sole nav on phones only. */
@media (max-width:767px){ #topmenu{ display:none !important; } }

/* ---- mobile drawer (native off-canvas) ---- */
.hh-drawer-backdrop{ position:fixed; inset:0; z-index:9990; background:rgba(4,12,9,0.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease; }
body.hh-drawer-open .hh-drawer-backdrop{ opacity:1; visibility:visible; }
.hh-drawer{ position:fixed; top:0; right:0; z-index:9991; height:100%; width:86%; max-width:360px;
  background:linear-gradient(180deg, #0c1c15 0%, #0a1812 100%);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-left:1px solid rgba(255,255,255,0.08); box-shadow:-18px 0 50px rgba(0,0,0,0.45);
  transform:translateX(100%); transition:transform .42s cubic-bezier(.3,.7,.2,1);
  display:flex; flex-direction:column; overflow:hidden; }
body.hh-drawer-open .hh-drawer{ transform:none; }
.hh-drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px;
  border-bottom:1px solid rgba(255,255,255,0.08); flex:0 0 auto; }
/* same lockup as the navbar; the drawer panel is dark so the white wordmark holds.
   No dimming filter here: it was tuned for the old mark and would grey out the type. */
.hh-drawer-head img{ height:42px; width:auto; }
.hh-drawer-close{ background:transparent; border:0; color:#fff; font-size:26px; line-height:1; cursor:pointer; padding:4px 8px; transition:color .25s ease, transform .25s ease; }
.hh-drawer-close:hover{ color:var(--hh-gold); transform:rotate(90deg); }
.hh-drawer-nav{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px 0 30px; flex:1 1 auto; }
.hh-drawer-nav ul{ list-style:none; margin:0; padding:0; }
.hh-drawer-nav li{ border-bottom:1px solid rgba(255,255,255,0.06); }
.hh-drawer-nav .hh-row{ display:flex; align-items:center; justify-content:space-between; }
.hh-drawer-nav a{ display:block; flex:1 1 auto; padding:14px 22px; color:rgba(255,255,255,0.9); text-decoration:none;
  font-family:'Inter',sans-serif; font-size:15px; font-weight:500; transition:color .2s ease, background .2s ease; }
.hh-drawer-nav a:hover{ color:#9fd6a8; background:rgba(255,255,255,0.04); }
.hh-drawer-nav .hh-caret{ flex:0 0 auto; width:48px; align-self:stretch; background:transparent; border:0; color:var(--hh-gold);
  font-size:22px; font-weight:300; cursor:pointer; transition:transform .3s ease; }
.hh-drawer-nav li.hh-open > .hh-row .hh-caret{ transform:rotate(45deg); }
.hh-drawer-nav ul ul{ max-height:0; overflow:hidden; background:rgba(0,0,0,0.22); transition:max-height .4s ease; }
.hh-drawer-nav li.hh-open > ul{ max-height:1600px; }
.hh-drawer-nav ul ul a{ padding:11px 22px 11px 34px; font-size:13.5px; color:rgba(255,255,255,0.7); }
.hh-drawer-nav ul ul li{ border-bottom:1px solid rgba(255,255,255,0.04); }
.hh-drawer-nav ul ul ul{ background:rgba(0,0,0,0.28); }
.hh-drawer-nav ul ul ul a{ padding-left:48px; font-size:13px; color:rgba(255,255,255,0.62); }
.hh-drawer-foot{ flex:0 0 auto; padding:18px 22px; border-top:1px solid rgba(255,255,255,0.08); display:flex; gap:18px; align-items:center; }
.hh-drawer-foot a{ color:rgba(255,255,255,0.72); display:inline-flex; transition:color .2s ease; }
.hh-drawer-foot a:hover{ color:var(--hh-gold); }
.hh-drawer-foot svg{ width:18px; height:18px; fill:currentColor; }

/* Touch-target accessibility (Phase 2, 2026-07-04): expand nav control hit areas to >=44px
   on touch devices via an invisible centered overlay. Visible button sizes are intentionally
   left unchanged — zero visual change. Gated on pointer:coarse so mouse/desktop is untouched. */
@media (pointer: coarse){
  .hh-drawer-close, .hh-drawer-foot a, .hh-footer-social a{ position:relative; }
  .hh-nav-toggle::after, .hh-search-toggle::after,
  .hh-drawer-close::after, .hh-search-close::after,
  .hh-drawer-foot a::after,
  .hh-footer-social a::after{  /* Phase 7 (2026-07-05): footer social icons are 40px */
    content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:44px; height:44px;
  }
}

/* ---- native search overlay ---- */
.hh-search-overlay{ position:fixed; inset:0; z-index:9995; display:flex; flex-direction:column; align-items:center;
  padding:14vh 20px 20px; background:rgba(7,17,12,0.86); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
body.hh-search-open .hh-search-overlay{ opacity:1; visibility:visible; }
.hh-search-close{ position:absolute; top:24px; right:26px; background:transparent; border:0; color:#fff; font-size:30px; line-height:1; cursor:pointer; transition:color .25s ease, transform .25s ease; }
.hh-search-close:hover{ color:var(--hh-gold); transform:rotate(90deg); }
.hh-search-box{ width:100%; max-width:620px; transform:translateY(-14px); transition:transform .3s ease; }
body.hh-search-open .hh-search-box{ transform:none; }
.hh-search-field{ display:flex; align-items:center; gap:12px; border-bottom:2px solid rgba(255,255,255,0.3); padding:0 4px 12px; }
.hh-search-field svg{ flex:0 0 auto; color:var(--hh-gold); }
.hh-search-field input{ flex:1 1 auto; background:transparent; border:0; outline:none; color:#fff;
  font-family:'Fraunces',serif; font-size:clamp(22px,4vw,34px); font-weight:500; }
.hh-search-field input::placeholder{ color:rgba(255,255,255,0.4); }
.hh-search-hint{ margin:14px 4px 0; font-family:'Inter',sans-serif; font-size:12.5px; letter-spacing:0.04em; color:rgba(255,255,255,0.45); }
.hh-search-results{ margin:16px 0 0; list-style:none; padding:0; max-height:52vh; overflow-y:auto; }
.hh-search-results li{ border-bottom:1px solid rgba(255,255,255,0.08); }
.hh-search-results a{ display:flex; align-items:baseline; gap:10px; padding:13px 4px; text-decoration:none; color:#fff; transition:color .2s ease, padding .2s ease; }
.hh-search-results a:hover, .hh-search-results a:focus{ color:var(--hh-gold); padding-left:10px; }
.hh-search-results .hh-sr-title{ font-family:'Fraunces',serif; font-size:18px; font-weight:500; }
.hh-search-results .hh-sr-group{ font-family:'Inter',sans-serif; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.45); }
.hh-search-empty{ margin-top:18px; color:rgba(255,255,255,0.55); font-family:'Inter',sans-serif; font-size:14px; }
