/* HANJAWONGVILLAGE R01 — compact public header + rounded sticky actions; green bar background.
   Contains only UI overrides. Loaded after existing page stylesheets. */

/* Header: symbol-and-domain logo remains the same asset, but scales down. */
.top .brand-hv,.site-header .logo-hv{
 display:flex;align-items:center;justify-content:flex-start;flex:0 0 auto;min-width:0;gap:0;text-decoration:none;
}
.top .brand-hv .brand-logo,.site-header .logo-hv .brand-logo{
 display:block;width:auto!important;height:46px!important;max-width:100%!important;
 object-fit:contain;flex:0 0 auto;
}
.top .navshell{height:58px!important;min-height:58px!important;}
.top .nav{height:58px!important;min-height:58px!important;}
.site-header .nav{min-height:58px!important;}
.top .brand-hv--contrast{background:#f6f1e6;border-radius:8px;padding:1px;}
.site-header .logo-hv:before{display:none!important;}
.top .navcta,.top .wa{min-height:36px;font-size:11px;padding:0 14px;}

/* Fixed lower action bar: compact surface, real rounded individual CTA buttons.
   Preserves original link destinations, event tracking and labels. */
.sticky.sticky-personal,
body .sticky:not(.sticky-hidden){
 height:auto!important;min-height:0!important;
 padding:7px 9px calc(7px + env(safe-area-inset-bottom,0px))!important;
 gap:7px!important;
 background:#0b3023!important;
 border-top:1px solid rgba(13,52,37,.12);
 box-shadow:0 -5px 18px rgba(0,0,0,.10);
 backdrop-filter:blur(10px);
 align-items:stretch;
}
.sticky.sticky-personal{
 grid-template-columns:minmax(0,1.24fr) minmax(0,.9fr) minmax(0,.9fr)!important;
}
.sticky.sticky-personal .sticky-id,
.sticky:not(.sticky-personal) span{
 display:flex;justify-content:center;flex-direction:column;min-width:0;
 padding:6px 9px!important;border-radius:12px!important;
 background:#0b3023!important;color:#fff!important;
}
.sticky.sticky-personal .sticky-id strong,
.sticky:not(.sticky-personal) span strong{
 color:#fff!important;font-size:10.5px!important;line-height:1.18!important;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sticky.sticky-personal .sticky-id small,
.sticky:not(.sticky-personal) span small{
 margin-top:2px;color:#b9c8bd!important;font-size:9px!important;line-height:1.2!important;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sticky.sticky-personal>a,
.sticky:not(.sticky-personal)>a{
 display:flex;align-items:center;justify-content:center;
 min-width:0;min-height:42px!important;height:auto!important;
 border:0!important;border-radius:12px!important;
 padding:7px 9px!important;font-size:10.5px!important;
 text-align:center;text-decoration:none!important;font-weight:900;
 box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.sticky.sticky-personal>a:nth-of-type(1),
.sticky:not(.sticky-personal)>a:first-of-type{background:#0d3a2a!important;color:#fff!important;}
.sticky.sticky-personal>a:nth-of-type(2),
.sticky:not(.sticky-personal)>a:nth-of-type(2){background:#c39a50!important;color:#10261d!important;}
/* Page-info sticky has the same three columns but is not .sticky-personal. */
.sticky:not(.sticky-personal){grid-template-columns:minmax(0,1.24fr) minmax(0,.9fr) minmax(0,.9fr)!important;}
.sticky>a:focus-visible{outline:3px solid #fff;outline-offset:-3px;}
@media(min-width:720px){
 .top .brand-hv .brand-logo,.site-header .logo-hv .brand-logo{height:54px!important;}
 .top .navshell{height:68px!important;min-height:68px!important;}
 .top .nav{height:68px!important;min-height:68px!important;}
 .site-header .nav{min-height:68px!important;}
}
@media(max-width:390px){
 .top .brand-hv .brand-logo,.site-header .logo-hv .brand-logo{height:42px!important;}
 .top .navshell{height:54px!important;min-height:54px!important;}
 .top .nav{height:54px!important;min-height:54px!important;}
 .site-header .nav{min-height:54px!important;}
 .sticky.sticky-personal,.sticky:not(.sticky-personal){gap:6px!important;padding-left:7px!important;padding-right:7px!important;}
 .sticky.sticky-personal .sticky-id,.sticky:not(.sticky-personal) span{padding-left:7px!important;padding-right:7px!important;}
 .sticky.sticky-personal>a,.sticky:not(.sticky-personal)>a{font-size:10px!important;padding-left:6px!important;padding-right:6px!important;}
}


/* R06 — Title beside icon; mobile header WhatsApp omitted only visually.
   Sticky footer from R05, referral and all links are unchanged. */
.top .brand-hv,.site-header .logo-hv{
  gap:10px!important;
  flex:0 1 auto;
  max-width:100%;
}
.top .brand-hv .brand-title,.site-header .logo-hv .brand-title{
  display:block;
  color:#123c2b;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:900;
  font-size:clamp(15px,4.5vw,19px);
  letter-spacing:.015em;
  line-height:1.12;
  white-space:nowrap;
}
.site-header .logo-hv .brand-title{font-size:clamp(13px,3.7vw,16px)}
.top .navshell{justify-content:space-between}
.top .navshell .brand-hv{margin-right:auto}
.top .brand-hv--contrast .brand-title{color:#123c2b}
/* Gallery uses a separate .nav header and article has its own back navigation. */
.site-header .nav{gap:10px}
.site-header .back{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:719px){
  /* Keep WhatsApp via the sticky CTA, remove duplicate only in mobile header. */
  .top .navshell > a.navcta,
  .top .nav > a.wa{display:none!important}
  .top .navshell{justify-content:flex-start!important;padding-inline:14px}
  .top .navshell .brand-hv{margin-right:0;flex:0 1 auto}
  .top .brand-hv .brand-title{font-size:18px;letter-spacing:.01em}
  .top .nav:not(.navshell) .brand-hv .brand-title{font-size:clamp(13px,4vw,17px)}
  .site-header .back{flex:0 1 115px;font-size:10.5px;letter-spacing:0}
}
@media(max-width:390px){
  .top .brand-hv,.site-header .logo-hv{gap:8px!important}
  .top .brand-hv .brand-title{font-size:16px}
  .top .nav:not(.navshell) .brand-hv .brand-title{font-size:14px}
  .site-header .logo-hv .brand-title{font-size:13px}
  .site-header .back{flex-basis:75px;font-size:10px}
}
@media(min-width:720px) and (max-width:999px){
  .top .brand-hv,.site-header .logo-hv{gap:7px!important}
  .top .brand-hv .brand-title{font-size:13px}
  .top .navshell nav{gap:9px}
  .top .navshell nav a{font-size:11px}
  .top .navcta{padding-inline:10px}
}


/* R07 — reinstate mobile WhatsApp button; keep brand and CTA legible on narrow screens.
   No change to sticky bottom bar, form, routes, or desktop navigation. */
@media(max-width:719px){
  .top .navshell > a.navcta,
  .top .nav > a.wa{
    display:inline-flex!important;align-items:center;justify-content:center;
    flex:0 0 auto;white-space:nowrap;
    min-height:34px!important;
    padding:0 12px!important;
    font-size:10.5px!important;
    border-radius:999px;
  }
  .top .navshell{justify-content:space-between!important;gap:8px!important;padding-inline:13px!important;}
  .top .navshell .brand-hv{margin-right:0!important;flex:0 1 auto;min-width:0;}
  .top .brand-hv,.top .brand-hv--contrast{min-width:0;max-width:calc(100% - 98px);gap:7px!important;}
  .top .brand-hv .brand-title{font-size:clamp(15px,4.6vw,18px)!important;letter-spacing:-.015em!important;line-height:1.12;}
  .top .nav:not(.navshell){gap:8px;}
  .top .nav:not(.navshell) .brand-hv .brand-title{font-size:clamp(12px,3.7vw,17px)!important;}
  .top .nav > a.wa{margin-left:auto;}
}
@media(max-width:390px){
  .top .navshell > a.navcta,.top .nav > a.wa{padding-inline:9px!important;font-size:9.8px!important;min-height:32px!important;}
  .top .brand-hv,.top .brand-hv--contrast{max-width:calc(100% - 87px);gap:6px!important;}
  .top .brand-hv .brand-title{font-size:clamp(13px,4.15vw,16.2px)!important;letter-spacing:-.02em!important;}
  .top .nav:not(.navshell) .brand-hv .brand-title{font-size:clamp(11.7px,3.5vw,14px)!important;}
  .top .navshell{padding-inline:10px!important;gap:6px!important;}
}
@media(max-width:340px){
  .top .brand-hv .brand-logo{height:38px!important;}
  .top .navshell > a.navcta,.top .nav > a.wa{padding-inline:7px!important;font-size:9.2px!important;}
  .top .brand-hv .brand-title{font-size:12px!important;}
  .top .nav:not(.navshell) .brand-hv .brand-title{font-size:11.5px!important;}
}

/* Village-specific refinements: preserve survey header, room for the longer brand label. */
.top .brand-hv .brand-title,.site-header .logo-hv .brand-title{letter-spacing:-.022em!important}
.top .brand-hv .brand-logo,.site-header .logo-hv .brand-logo{flex-shrink:0}
.top .navshell>.brand-hv{min-width:0}
.top .navshell>.navcta{white-space:nowrap;flex-shrink:0}
.top .brand-hv--contrast{padding:3px 6px!important;max-width:calc(100% - 106px)}
.top .brand-hv--contrast .brand-title{color:#123c2b!important}
.top .nav:not(.navshell) .brand-hv{min-width:0}
.top .nav:not(.navshell) .brand-hv .brand-title{font-size:clamp(12px,3.6vw,16px)!important}
.site-header .logo-hv{min-width:0}
.site-header .logo-hv .brand-title{font-size:clamp(11px,3.3vw,15px)!important}
@media (max-width:719px){
 .top .navshell .brand-hv .brand-title{font-size:clamp(13px,4.1vw,17px)!important}
 .top .navshell{gap:7px!important}
 .top .navshell .brand-hv{max-width:calc(100% - 102px)}
 .top .nav:not(.navshell) .brand-hv{flex:0 1 auto;max-width:calc(100% - 84px)}
 .top .nav:not(.navshell) .brand-hv .brand-title{font-size:clamp(11.4px,3.45vw,15px)!important}
 .top .nav:not(.navshell)>a:last-child{white-space:nowrap;font-size:11px}
 .site-header .logo-hv .brand-title{font-size:clamp(10px,3.1vw,13px)!important}
}
@media (max-width:390px){
 .top .navshell .brand-hv .brand-title{font-size:clamp(12px,3.85vw,15px)!important}
 .top .navshell .brand-hv{max-width:calc(100% - 86px)}
 .top .nav:not(.navshell) .brand-hv .brand-title{font-size:clamp(10.3px,3.1vw,13px)!important}
 .site-header .back{flex:0 1 72px!important;font-size:9px!important}
}
@media (max-width:340px){
 .top .navshell .brand-hv .brand-title{font-size:11.8px!important}
 .top .nav:not(.navshell) .brand-hv .brand-logo{height:37px!important}
 .site-header .logo-hv .brand-title{font-size:10px!important}
}
/* Maintain horizontal alignment on pages whose legacy .brand uses flex-direction:column. */
.top .brand-hv{flex-direction:row!important;align-items:center!important;justify-content:flex-start!important}
.top .brand-hv .brand-title{flex:0 1 auto;min-width:0}
.top .brand-hv--contrast{box-sizing:border-box}
@media(max-width:719px){
 .top .nav:not(.navshell) .brand-hv{gap:6px!important}
 .top .nav:not(.navshell)>a:last-child{flex-shrink:0}
}