/*
 * Homepage masthead and mega navigation — v3 color scheme
 * Indigo-purple + cyan palette.
 */

.home-refined #top {
  position: fixed;
  z-index: 80;
  top: 0;
  right: 0;
  left: 0;
  height: 110px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: height .35s ease, background-color .35s ease, box-shadow .35s ease;
}

.home-refined #top::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(23,17,44,.68) 0%, rgba(33,18,63,.32) 55%, transparent 100%);
  pointer-events: none;
  transition: background .35s ease;
}

.home-refined #topbar {
  position: absolute;
  z-index: 4;
  top: 5px;
  right: 178px;
  width: auto;
  border: 0;
  background: transparent;
}

.home-refined #topbar .inner { width: auto; margin: 0; }
.home-refined #welcome { display: none; }
.home-refined #pagelist { padding: 0; line-height: 32px; white-space: nowrap; }
.home-refined #pagelist li { padding-left: 25px; }
.home-refined #pagelist li::after { left: 12px; background: rgba(255,255,255,.32); }
.home-refined #pagelist a { color: rgba(255,255,255,.72); font-size: 12px; font-weight: 500; }
.home-refined #pagelist a:hover { color: #fff; }

.home-refined #header {
  position: static;
  z-index: auto;
  padding: 0;
  background: transparent;
}

.home-refined #header .inner { position: static; width: auto; max-width: none; margin: 0; }

.home-refined #logo {
  position: fixed;
  z-index: 84;
  top: 24px;
  left: clamp(28px, 3.2vw, 64px);
  width: clamp(190px, 14vw, 260px);
}

.home-refined #logo a { width: 100%; }
.home-refined #logo a::after { display: none; }

.home-refined #header #logo img {
  width: auto;
  max-width: 100%;
  height: 68px;
  filter: brightness(0) invert(1);
  object-fit: contain;
  object-position: left center;
  transition: height .35s ease, opacity .25s ease;
}

.home-refined #topBtn { display: none; }

.home-refined #search {
  display: block;
  position: fixed;
  z-index: 86;
  top: 5px;
  right: 118px;
  width: 46px;
  padding: 0;
  overflow: visible;
  transform: none;
}

.home-refined #search form {
  position: absolute;
  top: 0;
  right: 0;
  width: 42px;
  height: 34px;
  margin: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  transition: width .3s ease, background-color .3s ease, border-color .3s ease;
}

.home-refined.home-search-active #search form,
.home-refined #search form:focus-within {
  width: min(300px, 42vw);
  border-color: rgba(255,255,255,.28);
  background: rgba(23,17,44,.92);
}

.home-refined #search .submit {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  float: none;
  width: 40px;
  height: 32px;
  background-color: transparent;
  background-size: 17px;
  opacity: .84;
}

.home-refined #search .submit:hover { background-color: transparent; opacity: 1; }

.home-refined #search .input {
  position: absolute;
  top: 0;
  right: 40px;
  left: 0;
  height: 32px;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.home-refined #search .input:focus-within { border: 0; box-shadow: none; }
.home-refined #search .text { box-sizing: border-box; width: 100%; height: 32px; padding: 0 6px 0 14px; color: #fff; font-size: 13px; text-indent: 0; }
.home-refined #search .text::placeholder { color: rgba(255,255,255,.58); }

/* Main navigation floats directly over the hero image. */
.home-refined #nav {
  display: block;
  position: fixed;
  z-index: 82;
  top: 37px;
  right: 112px;
  left: clamp(290px, 23vw, 420px);
  width: auto;
  height: 70px;
  margin: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}

.home-refined #nav .inner {
  position: static;
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 0 15px;
  margin: 0;
  overflow: visible;
  background: transparent;
  box-sizing: border-box;
}

.home-refined #nav .inner::after { display: none; }
.home-refined #nav .inner > ul { display: flex; height: 100%; padding: 0; align-items: stretch; justify-content: flex-end; }

.home-refined #nav > .inner > ul > li {
  display: block;
  flex: 1 1 auto;
  width: auto;
  max-width: 170px;
  line-height: 70px;
  text-align: center;
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 700;
  letter-spacing: .025em;
}

.home-refined #nav > .inner > ul > li > a {
  padding: 0 11px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}

.home-refined #nav > .inner > ul > li > a::before { bottom: 8px; height: 3px; background: var(--brand-gold, #C9A45C); }

.home-refined #nav > .inner > ul > li:hover > a,
.home-refined #nav > .inner > ul > li:focus-within > a,
.home-refined #nav > .inner > ul > li.current-menu-item > a,
.home-refined #nav > .inner > ul > li.current-menu-parent > a {
  color: #D7B872;
  background: transparent;
}

.home-refined #nav > .inner > ul > li.hasSub > a::after { border-color: rgba(255,255,255,.82); }

/* Dropdown */
.home-refined #nav li > ul {
  top: calc(100% - 2px);
  min-width: 210px;
  border-top-color: #C9A45C;
  border-radius: 0 0 2px 2px;
}

.home-refined #nav li > ul::before { display: none; }
.home-refined #nav li:hover > ul,
.home-refined #nav li:focus-within > ul { top: calc(100% - 2px); }

/* Dedicated square menu button. */
.home-refined .home-menu-toggle {
  display: flex;
  position: fixed;
  z-index: 92;
  top: 0;
  right: 0;
  width: 100px;
  height: 96px;
  padding: 0;
  border: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(145deg, #603580 0%, #4B246B 100%);
  box-shadow: -12px 12px 36px rgba(23,17,44,.2);
  cursor: pointer;
}

.home-refined .home-menu-toggle::before {
  content: "MENU";
  position: absolute;
  right: 0;
  bottom: -18px;
  left: 0;
  color: rgba(255,255,255,.62);
  font: 600 8px/1 Arial, sans-serif;
  letter-spacing: .24em;
  opacity: 0;
  transition: bottom .25s ease, opacity .25s ease;
}

.home-refined .home-menu-toggle span {
  display: block;
  width: 38px;
  height: 3px;
  background: #fff;
  transition: width .25s ease, transform .25s ease;
}

.home-refined .home-menu-toggle span:nth-child(2) { width: 30px; margin-left: 8px; }
.home-refined .home-menu-toggle:hover span:nth-child(2) { width: 38px; margin-left: 0; }
.home-refined .home-menu-toggle:hover::before { bottom: 8px; opacity: 1; }

/* Compact masthead after scrolling. */
.home-refined.home-nav-scrolled #top {
  height: 88px;
  background: rgba(33,18,63,.96);
  box-shadow: 0 9px 30px rgba(23,17,44,.22);
  backdrop-filter: blur(14px);
}

.home-refined.home-nav-scrolled #top::after { background: transparent; }
.home-refined.home-nav-scrolled #logo { top: 14px; }
.home-refined.home-nav-scrolled #header #logo img { height: 58px; }
.home-refined.home-nav-scrolled #topbar { opacity: 0; visibility: hidden; transform: translateY(-8px); }
.home-refined.home-nav-scrolled #search { top: 27px; right: 96px; }
.home-refined.home-nav-scrolled #nav { top: 9px; right: 148px; height: 78px; }
.home-refined.home-nav-scrolled .home-menu-toggle { width: 88px; height: 88px; }

/* Search owns the masthead while expanded. */
.home-refined.home-search-active #nav { opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; }
.home-refined.home-search-active #topbar { opacity: 0; visibility: hidden; pointer-events: none; }
.home-refined.home-search-active #search { z-index: 94; }

/* Full-screen menu. */
.home-menu-panel {
  position: fixed;
  z-index: 200;
  inset: 0;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

.home-menu-panel.is-open { opacity: 1; visibility: visible; }
.home-menu-backdrop { position: absolute; inset: 0; background: rgba(15,8,18,.72); backdrop-filter: blur(8px); }

.home-menu-panel-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(1500px, 92vw);
  padding: 0 clamp(32px, 5vw, 86px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 90% 10%, rgba(85,183,232,.28), transparent 30%),
    linear-gradient(135deg, #2E173F 0%, #4B246B 58%, #603580 100%);
  box-sizing: border-box;
  transform: translateX(6%);
  transition: transform .45s cubic-bezier(.2,.75,.2,1);
}
/* —— menu background image overlay, subtle blend with gradient ——
   ::after lives on panel-inner (NOT the scroll container — overflow moved to
   .home-menu-content), so position:absolute inset:0 covers the full panel
   and never scrolls away, regardless of how tall the menu content grows. */
.home-menu-panel-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../images/menu-bg.webp') top right / cover no-repeat;
  opacity: .28;
  pointer-events: none;
}

.home-menu-panel.is-open .home-menu-panel-inner { transform: translateX(0); }

.home-menu-panel-head {
  display: flex;
  min-height: 130px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.2);
}

.home-menu-brand img { max-width: 240px; max-height: 66px; filter: brightness(0) invert(1); }
.home-menu-panel-head > div { display: flex; align-items: center; gap: 35px; }
.home-menu-panel-head small { color: rgba(255,255,255,.56); font: 600 14px/1 Arial, sans-serif; letter-spacing: .22em; }

.home-menu-close {
  position: relative;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color .25s ease, transform .25s ease;
}

.home-menu-close:hover { background: rgba(255,255,255,.12); transform: rotate(90deg); }
.home-menu-close span { position: absolute; top: 25px; left: 14px; width: 23px; height: 2px; background: #fff; transform: rotate(45deg); }
.home-menu-close span:last-child { transform: rotate(-45deg); }

.home-menu-content { padding: clamp(42px, 6vh, 78px) 0; overflow-y: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.home-menu-content::-webkit-scrollbar { display: none; }
.home-menu-content > ul { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 44px 5%; counter-reset: mega-nav; }
.home-menu-content > ul > li { min-width: 0; counter-increment: mega-nav; }
.home-menu-content > ul > li > a { display: block; position: relative; padding: 0 0 18px 42px; border-bottom: 1px solid rgba(255,255,255,.24); color: #fff; font: 600 22px/1.35 "Noto Serif SC", "Songti SC", serif; }
.home-menu-content > ul > li > a::before { content: counter(mega-nav, decimal-leading-zero); position: absolute; top: 7px; left: 0; color: #C9A45C; font: 600 20px/1 Arial, sans-serif; }
.home-menu-content > ul > li > a::after { content: "→"; position: absolute; right: 0; color: rgba(255,255,255,.5); font: 400 17px/1 Arial, sans-serif; transition: transform .25s ease; }
.home-menu-content > ul > li > a:hover { color: #D7B872; }
.home-menu-content > ul > li > a:hover::after { transform: translateX(5px); }
.home-menu-content em { display: none !important; }
.home-menu-content .sub-menu { display: block !important; position: static; padding-top: 13px; background: none; box-shadow: none; }
.home-menu-content .sub-menu li { line-height: 34px; }
.home-menu-content .sub-menu a { display: inline-block; color: rgba(255,255,255,.64); font-size: 14px; }
.home-menu-content .sub-menu a:hover { color: #fff; transform: translateX(4px); }

.home-menu-scroll-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 78px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 28px 0 8px;
  background: linear-gradient(to top, rgba(96,53,128,.92) 20%, transparent);
  color: rgba(255,255,255,.5);
  font-size: 11px;
  letter-spacing: .18em;
  pointer-events: none;
  transition: opacity .3s ease;
}
.home-menu-scroll-hint.is-hidden { opacity: 0; }
.home-menu-scroll-hint i {
  display: block;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid rgba(255,255,255,.45);
  animation: menuHintBounce 1.5s ease-in-out infinite;
}
@keyframes menuHintBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

.home-menu-panel-foot {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  border-top: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.48);
  font-size: 13px;
}

.home-menu-panel-foot span { max-width: 70%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.home-menu-panel-foot a { color: #fff; }
.home-menu-panel-foot a i { margin-left: 9px; color: #C9A45C; font-style: normal; }
.home-menu-open { overflow: hidden; }

@media only screen and (max-width: 1360px) {
  .home-refined #logo { width: 205px; }
  .home-refined #nav { left: 255px; }
  .home-refined #nav > .inner > ul > li { font-size: 14px; }
  .home-refined #nav > .inner > ul > li > a { padding: 0 7px; }
}

@media only screen and (max-width: 1100px) {
  .home-refined #top { height: 82px; background: rgba(33,18,63,.94); }
  .home-refined #top::after { display: none; }
  .home-refined #topbar,
  .home-refined #search,
  .home-refined #nav { display: none !important; }
  .home-refined #logo { top: 13px; left: 4%; width: 190px; }
  .home-refined #header #logo img { height: 54px; }
  .home-refined .home-menu-toggle,
  .home-refined.home-nav-scrolled .home-menu-toggle { width: 82px; height: 82px; }
  .home-refined.home-nav-scrolled #top { height: 82px; }
  .home-refined.home-nav-scrolled #logo { top: 13px; }
  .home-refined.home-nav-scrolled #header #logo img { height: 54px; }
  .home-menu-content > ul { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media only screen and (max-width: 768px) {
  .home-refined #top { border: 0; }
  .home-refined #logo { top: 15px; width: min(190px, 58vw); }
  .home-refined #header #logo img { height: 48px; }
  .home-refined .home-menu-toggle,
  .home-refined.home-nav-scrolled .home-menu-toggle { width: 74px; height: 74px; gap: 6px; }
  .home-refined .home-menu-toggle span { width: 30px; height: 2px; }
  .home-refined .home-menu-toggle span:nth-child(2) { width: 24px; }
  .home-menu-panel-inner { width: 100%; padding: 0 6%; }
  .home-menu-panel-head { min-height: 94px; }
  .home-menu-brand img { max-width: 180px; max-height: 48px; }
  .home-menu-panel-head small { display: none; }
  .home-menu-close { width: 44px; height: 44px; }
  .home-menu-close span { top: 21px; left: 12px; width: 19px; }
  .home-menu-content { padding: 30px 0; }
  .home-menu-content > ul { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px 7%; }
  .home-menu-content > ul > li > a { padding: 0 0 13px 30px; font-size: 20px; }
  .home-menu-content .sub-menu { padding-top: 9px; }
  .home-menu-content .sub-menu li { line-height: 30px; }
  .home-menu-content .sub-menu a { font-size: 13px; }
  .home-menu-panel-foot span { display: none; }
  .home-menu-panel-foot { justify-content: flex-end; }
}

@media only screen and (max-width: 460px) {
  .home-menu-content > ul { grid-template-columns: 1fr; }
  .home-menu-content > ul > li > a { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-refined #top,
  .home-refined #nav,
  .home-menu-panel,
  .home-menu-panel-inner { transition: none !important; }
}