/*!
 * AiTravel.deals — Site-wide nav + footer styles
 * Canonical CSS for all pages that use /partials/nav-hub.html, /partials/nav-article.html,
 * and /partials/footer-main.html. Relies on CSS custom properties (--gold, --mint,
 * --aurora1, --aurora2, --muted, --text, --card-border) being defined at :root on the
 * including page.
 *
 * Loaded BEFORE the page's inline <style> block. Rules here use the .site-nav
 * and .site-footer scope (specificity 0,2,0) so they beat page-level bare-tag
 * or single-class rules (`nav{}`, `.nav-links{}`, `.logo{}`) regardless of
 * cascade order. Pages that need to override a specific rule can use higher
 * specificity (e.g. `.site-nav.my-page-class .nav-cta`) in their inline block.
 */

/* ─── NAV (both element and .site-nav variants, for safety) ───────────────── */
nav.site-nav,
.site-nav{
  position:relative;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 40px;border-bottom:1px solid var(--card-border);
  backdrop-filter:blur(20px);background:rgba(6,13,26,.7);
}

/* Logo — works for <a>, <div>, or <span>. text-decoration:none is mandatory because
   the partial wraps the logo in <a href="/">, and without it the gradient-transparent
   text shows a stray link underline. We scope to .site-nav / .site-footer so the
   rule beats any page-level `.logo{}` (spec 0,1,0) via higher specificity (0,2,0);
   this wins regardless of cascade order, so inline <style> blocks loaded AFTER
   site.css can't accidentally revert the underline. */
.site-nav .logo,
.site-footer .logo{
  font-family:'Playfair Display',serif;
  font-size:1.8rem;font-weight:900;
  background:linear-gradient(135deg,var(--gold),var(--mint));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-decoration:none;display:inline-block;line-height:1;
}
.site-nav .logo:hover,
.site-footer .logo:hover{text-decoration:none;}
.site-nav .logo span,
.site-footer .logo span{font-weight:400;}

/* Nav links */
.site-nav .nav-links{display:flex;gap:30px;}
.site-nav .nav-links a{
  color:var(--muted);text-decoration:none;
  font-size:.9rem;font-weight:500;transition:color .3s;
}
.site-nav .nav-links a:hover{color:var(--text);}

/* Primary CTA (desktop) */
.site-nav .nav-cta{
  background:linear-gradient(135deg,var(--aurora1),var(--aurora2));
  color:white;border:none;
  padding:10px 22px;border-radius:50px;
  font-size:.85rem;font-weight:600;cursor:pointer;
  transition:transform .2s;
  font-family:'DM Sans',sans-serif;
  text-decoration:none;display:inline-block;
}
.site-nav .nav-cta:hover{transform:translateY(-2px);}

/* Hamburger (mobile) */
.site-nav .nav-hamburger{
  display:none;background:none;border:none;cursor:pointer;padding:6px;
  flex-direction:column;gap:5px;z-index:20;
}
.site-nav .nav-hamburger span{
  display:block;width:22px;height:2px;background:var(--text);border-radius:2px;
  transition:transform .3s,opacity .3s;
}
.site-nav .nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-nav .nav-hamburger.open span:nth-child(2){opacity:0;}
.site-nav .nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile CTA (hidden on desktop, shown inside open menu on mobile) */
.site-nav .nav-mobile-cta{display:none;}

/* ─── FOOTER ──────────────────────────────────────────────────────────────── */
footer.site-footer,
.site-footer{
  position:relative;z-index:5;
  border-top:1px solid var(--card-border);
  padding:0;color:var(--muted);font-size:.82rem;
}
.site-footer .footer-main{
  max-width:1100px;margin:0 auto;padding:48px 40px 32px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
}
.site-footer .footer-brand{display:flex;flex-direction:column;gap:14px;}
.site-footer .footer-brand .logo{font-size:1.5rem;}
.site-footer .footer-brand p{
  font-size:.82rem;line-height:1.7;color:var(--muted);max-width:280px;
}
.site-footer .footer-col h4{
  font-size:.7rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--mint);margin-bottom:16px;font-weight:700;
}
.site-footer .footer-col a{
  display:block;color:var(--muted);text-decoration:none;
  font-size:.82rem;padding:5px 0;transition:color .2s;
}
.site-footer .footer-col a:hover{color:var(--text);}
.site-footer .footer-bottom{
  border-top:1px solid var(--card-border);
  padding:20px 40px;
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px;max-width:1100px;margin:0 auto;
}
.site-footer .footer-bottom-left{font-size:.76rem;color:rgba(255,255,255,.4);}
.site-footer .footer-bottom-right{font-size:.76rem;color:rgba(255,255,255,.35);}

/* ─── MOBILE ──────────────────────────────────────────────────────────────── */
@media(max-width:768px){
  nav.site-nav,
  .site-nav{padding:14px 16px;flex-wrap:wrap;}
  .site-nav .logo{font-size:1.4rem;}
  .site-nav .nav-hamburger{display:flex;}
  .site-nav .nav-cta{display:none;}
  .site-nav .nav-links{
    display:none;flex-direction:column;gap:0;
    width:100%;order:10;
    margin-top:12px;padding-top:12px;
    border-top:1px solid var(--card-border);
  }
  .site-nav .nav-links.open{display:flex;}
  .site-nav .nav-links a{
    padding:12px 0;font-size:.95rem;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .site-nav .nav-links a:last-child{border-bottom:none;}
  .site-nav .nav-mobile-cta{
    display:block;margin-top:12px;padding:11px 0;text-align:center;
    background:linear-gradient(135deg,var(--aurora1),var(--aurora2));color:white;
    border-radius:10px;font-size:.88rem;font-weight:600;text-decoration:none;
  }

  .site-footer .footer-main{
    grid-template-columns:1fr 1fr;gap:28px 20px;padding:32px 16px 24px;
  }
  .site-footer .footer-brand{grid-column:1/-1;}
  .site-footer .footer-brand p{max-width:100%;}
  .site-footer .footer-bottom{
    padding:16px;flex-direction:column;text-align:center;gap:6px;
  }
}
/* ─── STAY22 AFFILIATE LINKS ──────────────────────────────────────────────── */
a.hyperlink22,
[data-is-hyperlink22="true"] {
  color: var(--mint) !important;
  text-decoration: underline;
  text-decoration-color: rgba(61, 217, 179, 0.4);
  text-underline-offset: 3px;
}
a.hyperlink22:hover,
[data-is-hyperlink22="true"]:hover {
  color: var(--gold) !important;
  text-decoration-color: rgba(245, 200, 66, 0.5);
}