/* =========================================================
   HKCWCA — full-screen hero v4 (option A: words float on the photo) + unified glass header
   Hero modes (chosen by screen shape, not device):
     1. Landscape screens (default): photo fills the screen, anchored so every person stays in view.
     2. Extra-wide (wider than 11:5) or very short landscape screens: whole photo in the middle, brand colour on both sides.
     3. Portrait or square-ish screens (narrower than 5:4): photo fills the screen and slowly pans left and right so every member passes through (static and centred when animation is turned off); slogan on top, buttons at the bottom.
   Photo URL / ratio come from the hero's Elementor background image (CSS vars printed by hkcwca-fullhero.php).
   Rollback points: "fullhero4" (to v3), "fullhero3" (to v2), "fullhero2" (to v1), "fullhero" (to the old hero).
   ========================================================= */

/* ---------- Hero: base = landscape mode ---------- */
.elementor-15 .e-con.nm-fullhero{
  --nm-hdr-h:92px;--nm-bar:0px;
  position:relative !important;isolation:isolate;overflow:hidden !important;
  height:calc(100vh - var(--nm-bar));height:calc(100svh - var(--nm-bar));min-height:0 !important;
  padding:0 !important;display:block !important;
  background-image:none !important;background-color:#3A1418 !important;
  text-align:center;
}
.admin-bar .elementor-15 .e-con.nm-fullhero{--nm-bar:32px;}
@media (max-width:1024px){ .elementor-15 .e-con.nm-fullhero{--nm-hdr-h:76px;} }
@media (max-width:782px){ .admin-bar .elementor-15 .e-con.nm-fullhero{--nm-bar:46px;} }
@media (max-width:767px){ .elementor-15 .e-con.nm-fullhero{--nm-hdr-h:68px;} }
.elementor-15 .e-con.nm-fullhero::before,.elementor-15 .e-con.nm-fullhero::after{content:none !important;display:none !important;}

.elementor-15 .nm-fullhero > .nm-hero-media,
.elementor-15 .nm-fullhero > .nm-hero-media > .elementor-widget-container{position:absolute !important;inset:0 !important;width:auto !important;height:auto !important;max-width:none !important;margin:0 !important;padding:0 !important;z-index:0;}
.nm-hero-ext{display:none !important;}
.nm-hero-flow{position:absolute;inset:0;background:linear-gradient(120deg,#3A1418 0%,#7E1A28 28%,#BB1F2E 50%,#7E1A28 72%,#3A1418 100%);background-size:220% 220%;animation:nmHeroFlow 18s ease-in-out infinite alternate;}
.nm-hero-pic{position:absolute;inset:0;width:100%;height:100%;transform:none;
  background:var(--nm-hero-img) 50% 78% / cover no-repeat;
  -webkit-mask-image:none;mask-image:none;}
.nm-hero-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,8,12,.58) 0%,rgba(40,8,12,.28) 22%,rgba(40,8,12,0) 36%,rgba(40,8,12,0) 80%,rgba(40,8,12,.5) 100%);}

/* slogan block: sits between the header and the back row of heads */
.elementor-15 .e-con.nm-fullhero > .nm-hero-top{position:absolute !important;left:0 !important;right:0 !important;
  top:calc(var(--nm-hdr-h) + 1.2vh);top:calc(var(--nm-hdr-h) + 1.2svh);
  z-index:2;width:auto !important;display:flex !important;flex-direction:column !important;align-items:center !important;
  gap:1.1vh !important;gap:1.1svh !important;padding:0 24px !important;margin:0 !important;}
/* soft frosted halo behind the slogan so it stays readable over the photo's own banner */
.elementor-15 .e-con.nm-fullhero > .nm-hero-top::before{content:"" !important;display:block !important;position:absolute !important;
  left:50% !important;top:-3svh !important;width:min(980px,96%) !important;height:calc(100% + 6svh) !important;transform:translateX(-50%);
  z-index:-1 !important;opacity:1 !important;border:0 !important;border-radius:50% !important;mix-blend-mode:normal !important;pointer-events:none;
  background:radial-gradient(closest-side,rgba(40,8,12,.5),rgba(40,8,12,.3) 55%,rgba(40,8,12,0)) !important;
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent);}
.elementor-15 .e-con.nm-fullhero > .nm-hero-bottom{position:absolute !important;left:0 !important;right:0 !important;
  bottom:max(14px,2.6vh);bottom:max(14px,2.6svh);
  z-index:2;width:auto !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:14px !important;padding:0 24px !important;margin:0 !important;}

.nm-hero-eyebrow .elementor-heading-title{font-family:'Noto Sans TC',sans-serif !important;font-size:13px !important;letter-spacing:.32em !important;font-weight:500 !important;color:#fff !important;opacity:.95;line-height:1.6 !important;text-shadow:0 1px 8px rgba(0,0,0,.4);}
.nm-hero-slogan .elementor-heading-title{font-family:'Noto Serif TC',serif !important;font-weight:700 !important;
  font-size:clamp(22px,4.2vh,56px) !important;font-size:clamp(22px,4.2svh,56px) !important;
  line-height:1.3 !important;letter-spacing:.06em !important;color:#fff !important;text-shadow:0 2px 14px rgba(30,6,10,.6);text-wrap:balance;margin:0 !important;}
.nm-hero-sub{display:none !important;max-width:36em;margin:0 auto !important;}
.nm-hero-sub,.nm-hero-sub p{font-family:'Noto Sans TC',sans-serif !important;color:#fff !important;font-size:15px !important;line-height:1.85 !important;margin:0 !important;text-align:center !important;text-shadow:0 1px 10px rgba(0,0,0,.45);}
.elementor-15 .e-con.nm-hero-ctas{flex-direction:row !important;flex-wrap:wrap !important;justify-content:center !important;align-items:center !important;gap:14px !important;padding:0 !important;margin:0 !important;width:auto !important;}
.nm-hero-ctas .elementor-button{box-sizing:border-box;display:inline-flex !important;align-items:center;justify-content:center;min-height:48px;padding:0 30px !important;border-radius:999px !important;font-family:'Noto Sans TC',sans-serif !important;font-size:16px !important;font-weight:700 !important;letter-spacing:.04em;text-decoration:none !important;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease !important;}
.nm-hero-ctas .elementor-button .elementor-button-text{color:inherit !important;}
.nm-cta-primary .elementor-button{background:#fff !important;color:#BB1F2E !important;border:0 !important;box-shadow:0 12px 30px rgba(40,8,12,.32);}
.nm-cta-ghost .elementor-button{background:rgba(255,255,255,.16) !important;color:#fff !important;border:1px solid rgba(255,255,255,.7) !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(40,8,12,.22);}
.nm-hero-ctas .elementor-button:hover{transform:translateY(-3px);}
.nm-cta-primary .elementor-button:hover{box-shadow:0 18px 38px rgba(40,8,12,.38);}
.nm-cta-ghost .elementor-button:hover{background:rgba(255,255,255,.3) !important;}
.nm-hero-ctas .elementor-button:focus-visible{outline:2px solid #fff;outline-offset:3px;}
.nm-hero-cue{display:none !important;}
.nm-cue{display:flex;align-items:center;gap:8px;font-family:'Noto Sans TC',sans-serif;font-size:12px;letter-spacing:.2em;color:#fff !important;opacity:.85;text-decoration:none !important;}
.nm-cue i{width:18px;height:28px;border:1.5px solid rgba(255,255,255,.8);border-radius:10px;position:relative;display:block;}
.nm-cue i::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:nmWheel 1.8s ease-in-out infinite;}
@keyframes nmHeroFlow{0%{background-position:0% 40%}100%{background-position:100% 60%}}
@keyframes nmWheel{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(8px)}}

/* shorter landscape screens: drop the small line above the slogan and slim the buttons to save height */
@media (max-height:760px){
  .nm-hero-eyebrow{display:none !important;}
  .nm-hero-ctas .elementor-button{min-height:44px;font-size:15px !important;padding:0 24px !important;}
  .elementor-15 .e-con.nm-fullhero > .nm-hero-bottom{bottom:max(12px,2vh);bottom:max(12px,2svh);}
}

/* ---------- Extra-wide or very short landscape screens: whole photo in the middle, brand colour on both sides ---------- */
@media (min-aspect-ratio:11/5), (min-aspect-ratio:19/10) and (max-height:580px), (min-aspect-ratio:5/4) and (max-height:500px){
  .nm-hero-pic{inset:auto;top:0;bottom:0;left:50%;right:auto;width:auto;height:100%;aspect-ratio:var(--nm-hero-ratio,1.4775);transform:translateX(-50%);
    background-size:100% 100%;background-position:center;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);}
}

/* very short landscape screens (e.g. phones held sideways): tighter buttons */
@media (max-height:500px) and (min-aspect-ratio:5/4){
  .nm-hero-ctas .elementor-button{min-height:40px;font-size:14px !important;padding:0 20px !important;}
  .elementor-15 .e-con.nm-fullhero > .nm-hero-bottom{bottom:8px;}
}

/* ---------- Portrait or square-ish screens (A): photo fills the screen and pans; words on top, buttons at the bottom ---------- */
@media (max-aspect-ratio:5/4){
  .nm-hero-pic{inset:auto;top:0;bottom:0;left:0;right:auto;width:auto;height:100%;aspect-ratio:var(--nm-hero-ratio,1.4775);
    background-size:100% 100%;background-position:center;-webkit-mask-image:none;mask-image:none;
    transform:translateX(calc(50vw - 50%));will-change:transform;animation:nmHeroPan 57s ease-in-out infinite;}
  .nm-hero-shade{background:linear-gradient(180deg,rgba(40,8,12,.66) 0%,rgba(40,8,12,.42) 20%,rgba(40,8,12,0) 36%,rgba(40,8,12,0) 74%,rgba(40,8,12,.5) 100%);}
  .elementor-15 .e-con.nm-fullhero > .nm-hero-top{top:calc(var(--nm-hdr-h) + 2.4vh);top:calc(var(--nm-hdr-h) + 2.4svh);gap:8px !important;}
  .elementor-15 .e-con.nm-fullhero > .nm-hero-top::before{content:none !important;display:none !important;}
  .nm-hero-eyebrow{display:block !important;}
  .nm-hero-eyebrow .elementor-heading-title{font-size:11.5px !important;letter-spacing:.26em !important;}
  .nm-hero-slogan .elementor-heading-title{font-size:clamp(22px,min(7.6vw,4.4vh),46px) !important;font-size:clamp(22px,min(7.6vw,4.4svh),46px) !important;letter-spacing:.05em !important;}
  .elementor-15 .e-con.nm-fullhero > .nm-hero-bottom{bottom:max(16px,2.4vh);bottom:max(16px,2.4svh);padding:0 16px !important;}
  .elementor-15 .e-con.nm-hero-ctas{width:100% !important;max-width:420px;flex-wrap:nowrap !important;gap:10px !important;}
  .elementor-15 .e-con.nm-hero-ctas > .elementor-element{flex:1 1 0 !important;width:auto !important;min-width:0;}
  .nm-hero-ctas .elementor-button{width:100%;min-height:46px;padding:0 12px !important;font-size:15px !important;}
}
@media (max-aspect-ratio:5/4) and (max-height:600px){ .nm-hero-eyebrow{display:none !important;} }
@media (max-aspect-ratio:5/4) and (min-width:600px){
  .nm-hero-eyebrow .elementor-heading-title{font-size:13px !important;letter-spacing:.3em !important;}
  .nm-hero-sub{display:block !important;}
  .nm-hero-ctas .elementor-button{min-height:52px;font-size:16px !important;}
}
@keyframes nmHeroPan{
  0%,5.3%{transform:translateX(calc(50vw - 50%))}
  26.3%,31.6%{transform:translateX(0)}
  73.7%,78.9%{transform:translateX(calc(100vw - 100%))}
  100%{transform:translateX(calc(50vw - 50%))}
}
@media (prefers-reduced-motion:reduce){ .nm-hero-flow,.nm-cue i::after,.nm-hero-pic{animation:none !important;} }
/* ---------- Unified header: transparent at top of home, frosted glass elsewhere ---------- */
html body .elementor-location-header > .e-con{
  background:linear-gradient(180deg,rgba(40,10,14,.38),rgba(40,10,14,0)) !important;
  box-shadow:none !important;
  transition:background .35s ease,box-shadow .35s ease,padding .35s ease !important;
}
html body .elementor-location-header > .e-con > .elementor-motion-effects-container{display:none !important;}
html body .elementor-location-header nav.elementor-nav-menu--main .elementor-item{color:#fff !important;text-shadow:0 1px 6px rgba(0,0,0,.25) !important;transition:color .3s ease !important;}
html body .elementor-location-header nav.elementor-nav-menu--main .elementor-item:after{background-color:#fff !important;height:2px !important;border-radius:2px;}
html body .elementor-location-header .elementor-widget-image img{filter:brightness(0) invert(1);transition:filter .35s ease,height .35s ease !important;}

html body.nm-hdr-solid .elementor-location-header > .e-con{
  background:rgba(255,255,255,.72) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 1px 0 rgba(187,31,46,.08),0 10px 30px rgba(58,20,24,.08) !important;
}
html body.nm-hdr-solid .elementor-location-header nav.elementor-nav-menu--main .elementor-item{color:#3A1418 !important;text-shadow:none !important;}
html body.nm-hdr-solid .elementor-location-header nav.elementor-nav-menu--main .elementor-item:hover,
html body.nm-hdr-solid .elementor-location-header nav.elementor-nav-menu--main .elementor-item.elementor-item-active{color:#BB1F2E !important;}
html body.nm-hdr-solid .elementor-location-header nav.elementor-nav-menu--main .elementor-item:after{background-color:#BB1F2E !important;}
html body.nm-hdr-solid .elementor-location-header .elementor-widget-image img{filter:none;}
@media (min-width:1025px){
  html body.nm-hdr-scrolled .elementor-location-header .elementor-widget-image img{height:52px !important;}
}

/* mobile / tablet menu button + dropdown */
@media (max-width:1024px){
  html body .elementor-location-header .elementor-menu-toggle{background:rgba(255,255,255,.16) !important;border:1px solid rgba(255,255,255,.55) !important;color:#fff !important;box-shadow:none !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:14px !important;}
  html body .elementor-location-header .elementor-menu-toggle svg{fill:#fff !important;}
  html body.nm-hdr-solid .elementor-location-header .elementor-menu-toggle{background:rgba(255,255,255,.6) !important;border-color:rgba(187,31,46,.2) !important;color:#BB1F2E !important;}
  html body.nm-hdr-solid .elementor-location-header .elementor-menu-toggle svg{fill:#BB1F2E !important;}
  html body .elementor-location-header .elementor-menu-toggle.elementor-active{background:#BB1F2E !important;border-color:#BB1F2E !important;color:#fff !important;}
  html body .elementor-location-header .elementor-menu-toggle.elementor-active svg{fill:#fff !important;}
  html body .elementor-location-header nav.elementor-nav-menu--dropdown{background:rgba(255,255,255,.86) !important;-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border-radius:18px !important;padding:8px !important;box-shadow:0 18px 40px rgba(58,20,24,.2) !important;}
  html body .elementor-location-header nav.elementor-nav-menu--dropdown .elementor-item{background:transparent !important;border-bottom:0 !important;border-radius:12px;color:#3A1418 !important;text-shadow:none !important;}
  html body .elementor-location-header nav.elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
  html body .elementor-location-header nav.elementor-nav-menu--dropdown .elementor-item:hover{background:rgba(187,31,46,.08) !important;color:#BB1F2E !important;box-shadow:none !important;font-weight:700 !important;}
}