/* =========================================================
   SUNNY HOMESTAY — Header & Footer
   PURELY VISUAL — uses your existing class names and IDs.
   Your nav.js (hamburger + dropdown logic) should keep working.
   ========================================================= */

/* =========================================================
   HEADER
   ========================================================= */

.header {
   position: sticky;
   top: 0;
   z-index: 1000;
   background: rgba(255, 255, 255, 0.96);
   backdrop-filter: saturate(180%) blur(12px);
   -webkit-backdrop-filter: saturate(180%) blur(12px);
   border-bottom: 1px solid var(--line, #E8E8EC);
   min-height: 76px;
   display: flex;
}

.header .header-row {
   max-width: 1180px;
   margin: 0 auto;
   padding: 0 24px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   position: relative;
}

/* Logo */
.header .header-left .logo .nav__logo {
   display: inline-flex;
   align-items: center;
   font-weight: 600;
   column-gap: .25rem;
}

.header .nav__logo-img {
   width: auto;
   height: 56px;
   display: block;
}

/* Right side wrapper */
.header .header-right {
   display: flex;
   align-items: center;
   gap: 12px;
}

/* Hidden utility (kept for compatibility) */
.hidden { display: none; }

/* Animations (your existing slideInDown/slideInUp preserved) */
.slideInDown {
   animation-name: slideInDown;
   animation-duration: .4s;
   animation-fill-mode: both;
}
.slideInUp {
   animation-name: slideInUp;
   animation-duration: .4s;
   animation-fill-mode: both;
}
@keyframes slideInDown {
   0%   { transform: translateY(-12%); opacity: 0; visibility: visible; }
   100% { transform: translateY(0);    opacity: 1; }
}
@keyframes slideInUp {
   0%   { transform: translateY(12%);  opacity: 0; visibility: visible; }
   100% { transform: translateY(0);    opacity: 1; }
}

/* =====================================
   DESKTOP NAVIGATION (≥ 48em)
   ===================================== */
@media (min-width: 48em) {

   .header .main-menu {
      display: flex;
      align-items: center;
      list-style: none;
      gap: 2px;
   }

   .header .main-menu li.menu-item > a {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 12px 14px;
      font-size: 13px;
      font-weight: 500;
      color: var(--ink-soft, #4A4A52);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      border-radius: 8px;
      line-height: 20px;
      transition: color 0.15s ease, background 0.15s ease;
   }

   .header .main-menu li.menu-item > a:hover,
   .header .main-menu li.menu-item > a.active {
      color: var(--brand-blue, #0033A0);
      background: var(--brand-blue-soft, #E8F0FF);
   }

   .header .main-menu li.menu-item > a .chev {
      font-size: 16px;
      transition: transform 0.15s ease;
   }

   .header .main-menu li.mega-menu:hover > a .chev {
      transform: rotate(180deg);
   }

   /* Mega menu wrapper */
   .header .main-menu .mega-menu {
      position: relative;
   }

   .header .main-menu .mega-menu .mega-menu-wrapper {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 100%;
      display: none;
      padding: 24px;
      background: var(--surface, #fff);
      border: 1px solid var(--line, #E8E8EC);
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(0, 51, 160, 0.08);
      min-width: 720px;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-top: 8px;
      z-index: 111;
   }

   .header .main-menu .mega-menu:hover .mega-menu-wrapper {
      display: grid;
   }

   .header .main-menu .mega-menu .mega-menu-col h5 {
      font-size: 11px;
      font-weight: 600;
      color: var(--brand-blue, #0033A0);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 12px;
      padding: 0;
   }

   .header .main-menu .mega-menu .mega-menu-col ul,
   .header .main-menu .mega-menu .mega-menu-col .mega-sub-menu {
      list-style: none;
      margin: 0;
      padding: 0;
   }

   .header .main-menu .mega-menu .mega-menu-col ul li a {
      display: block;
      padding: 8px 10px;
      font-size: 14px;
      font-weight: 400;
      color: var(--ink-soft, #4A4A52);
      text-decoration: none;
      text-transform: none;
      letter-spacing: 0;
      border-radius: 6px;
      transition: background 0.15s ease, color 0.15s ease;
   }

   .header .main-menu .mega-menu .mega-menu-col ul li a:hover {
      background: var(--surface-tint, #FAFAFB);
      color: var(--brand-blue, #0033A0);
   }

   /* Desktop CTA */
   .header .header-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 16px;
      margin-left: 8px;
      background: var(--brand-blue, #0033A0);
      color: white !important;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 500;
      text-decoration: none;
      transition: background 0.15s ease, transform 0.15s ease;
      white-space: nowrap;
   }

   .header .header-cta:hover {
      background: var(--brand-blue-dark, #002274);
      transform: translateY(-1px);
   }

   .header .header-cta i { font-size: 15px; }

   /* Hide hamburger and mobile menu on desktop */
   .header .mobile-toggler { display: none; }
   .header .mobile-menu { display: none !important; }
}

/* =====================================
   MOBILE NAVIGATION (< 48em)
   nav.js handles open/close toggling
   ===================================== */
@media (max-width: 48em) {
   .header { min-height: 64px; }
   .header .nav__logo-img { height: 44px; }

   .header .main-menu { display: none; }
   .header .header-cta { display: none; }

   /* Hamburger button */
   .header .mobile-toggler {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      color: var(--ink, #1A1A1F);
      cursor: pointer;
      font-size: 20px;
      border: 1px solid var(--line, #E8E8EC);
      border-radius: 8px;
      background: white;
      text-decoration: none;
      padding: 0;
      margin: 0;
      vertical-align: middle;
      line-height: 1;
   }

   .header .mobile-toggler:hover {
      background: var(--surface-tint, #FAFAFB);
   }

   /* Mobile drawer */
   .header .mobile-menu {
      position: fixed;
      top: 64px;
      left: 0;
      right: 0;
      width: 100%;
      max-height: calc(100vh - 64px);
      height: auto;
      overflow-y: auto;
      background: white;
      z-index: 9999;
      padding: 16px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
   }

   .header .mobile-menu.hidden { display: none; }

   .header .mobile-menu ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 2px;
      margin: 0;
      padding: 0;
   }

   .header .mobile-menu ul li { margin: 0; }

   .header .mobile-menu ul li.menu-item > a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 16px;
      font-size: 15px;
      font-weight: 500;
      color: var(--ink, #1A1A1F);
      text-decoration: none;
      border-radius: 8px;
   }

   .header .mobile-menu ul li.menu-item > a:hover,
   .header .mobile-menu ul li.menu-item > a.active {
      background: var(--brand-blue-soft, #E8F0FF);
      color: var(--brand-blue, #0033A0);
   }

   /* Mobile mega-menu — tap to expand, tap again to collapse */
   .header .mobile-menu li.mega-menu .mega-menu-wrapper {
      display: none;
      padding: 8px 0 8px 16px;
   }

   .header .mobile-menu li.mega-menu.is-open .mega-menu-wrapper {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
   }

   /* Rotate chevron when open */
   .header .mobile-menu li.mega-menu > a .chev {
      transition: transform 0.2s ease;
   }
   .header .mobile-menu li.mega-menu.is-open > a .chev {
      transform: rotate(180deg);
   }

   .header .mobile-menu .mega-menu-col h5 {
      font-size: 11px;
      font-weight: 600;
      color: var(--brand-blue, #0033A0);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin: 12px 0 6px;
      padding: 0;
   }

   .header .mobile-menu .mega-menu-col ul,
   .header .mobile-menu .mega-menu-col .mega-sub-menu {
      list-style: none;
      margin: 0;
      padding: 0;
   }

   .header .mobile-menu .mega-menu-col ul li a {
      display: block;
      padding: 10px 12px;
      font-size: 14px;
      font-weight: 400;
      color: var(--ink-soft, #4A4A52);
      text-decoration: none;
      border-radius: 6px;
   }

   .header .mobile-menu .mega-menu-col ul li a:hover {
      background: var(--brand-blue-soft, #E8F0FF);
      color: var(--brand-blue, #0033A0);
   }

   /* Mobile call CTA */
   .header .mobile-menu .mobile-call > a {
      background: var(--brand-blue, #0033A0);
      color: white !important;
      justify-content: center;
      gap: 8px;
      margin-top: 12px;
      padding: 14px;
   }

   .header .mobile-menu .mobile-call > a i { font-size: 18px; }
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
   background: #0F1419;
   color: rgba(255, 255, 255, 0.7);
   padding: 72px 24px 32px;
   margin-top: 0;
}

.site-footer__inner {
   max-width: 1180px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
   gap: 48px;
}

.site-footer__logo {
   width: auto;
   height: 60px;
   margin-bottom: 16px;
   background: transparent;
   filter: brightness(0) invert(1);
   opacity: 0.95;
}

.site-footer__tagline {
   font-size: 14px;
   line-height: 1.7;
   max-width: 280px;
   color: rgba(255, 255, 255, 0.65);
   margin-bottom: 20px;
}

.site-footer__social {
   display: flex;
   gap: 10px;
}

.site-footer__social a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.08);
   color: white;
   font-size: 18px;
   transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
   text-decoration: none;
}

.site-footer__social a:hover {
   background: var(--brand-sun, #FFB627);
   color: var(--brand-blue, #0033A0);
   transform: translateY(-2px);
}

.site-footer__col h4 {
   color: white;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 18px;
}

.site-footer__col a,
.site-footer__col p {
   display: block;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.65);
   margin-bottom: 10px;
   text-decoration: none;
   transition: color 0.15s ease;
   line-height: 1.5;
}

.site-footer__col a:hover {
   color: var(--brand-sun, #FFB627);
}

.site-footer__contact {
   display: flex !important;
   align-items: flex-start;
   gap: 10px;
   margin-bottom: 12px !important;
}

.site-footer__contact i {
   color: var(--brand-sun, #FFB627);
   font-size: 16px;
   flex-shrink: 0;
   margin-top: 2px;
}

.site-footer__map {
   margin-top: 16px;
   border-radius: 10px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__map iframe {
   display: block;
   width: 100%;
}

.site-footer__bottom {
   max-width: 1180px;
   margin: 56px auto 0;
   padding-top: 24px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 13px;
   color: rgba(255, 255, 255, 0.4);
   flex-wrap: wrap;
   gap: 12px;
}

@media (max-width: 880px) {
   .site-footer { padding: 56px 20px 24px; }
   .site-footer__inner {
      grid-template-columns: 1fr 1fr;
      gap: 32px;
   }
   .site-footer__brand { grid-column: 1 / -1; }
   .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 540px) {
   .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
   .site-footer__logo { height: 52px; }
}