/* ═══════════════════════════════════════════════════════════════
   Heritage Persia — SITE HEADER
   Pairs with the <nav> markup in each page, and header.js.

   Every rule carries a `body` ancestor on purpose: pages across this
   site ship their own `nav{...}` / `.logo{...}` rules in five separate
   stylesheets, and that extra specificity is what keeps the shared
   header identical everywhere.
   ═══════════════════════════════════════════════════════════════ */

/* The "Free Tour" nav link below needs the Italianno webfont, but each
   page loads its own Google Fonts <link> and picks whichever families
   its own body content needs — many (all 37 hostel pages, hotels, etc.)
   never request Italianno, so the browser silently fell back to a
   generic cursive font that doesn't match pages that do request it
   (destinations, the homepage). Importing it here, in the one
   stylesheet every page shares, guarantees it loads everywhere
   regardless of what each page's own <head> asks for. */
@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap');

/* NAV */
/* Header height lives here only — .hero reads the same value, so the two
   can never drift apart again. 63px + 3mm. */
:root{--nav-h:calc(63px + 3mm);}
/* The bar is fixed, so it takes no space in the flow — this is what keeps
   every page's content from sliding underneath it. Fixed-position layers
   (star canvases, the chat bubble) are unaffected, as they should be. */
body{padding-top:var(--nav-h);}
/* The mobile drawer (.nav-links below) sits off-canvas via translateX so it
   can slide in. Some pages' own text/CSS make its hidden half a few hundred
   px wider than the drawer's box, and because it's fixed to the *viewport*
   (not to body), a plain `body{overflow-x:hidden}` on the page does not
   clip it — only the html root's own overflow does. Setting it here, once,
   keeps every page's hidden drawer from ever becoming a sideways scroll. */
html{overflow-x:hidden;}
body nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 0.6rem 0 0.4rem;height:var(--nav-h);background:rgba(5,22,40,0.95);backdrop-filter:blur(18px);border-bottom:1px solid rgba(29,233,182,0.1);}
body .logo{font-family:'Cinzel',serif;font-size:1.35rem;letter-spacing:3px;color:var(--teal);font-weight:600;}
body .logo .logo-text{display:flex;flex-direction:column;line-height:1.1;white-space:nowrap;}
body .logo .logo-text small{display:block;font-family:'Raleway',sans-serif;font-size:0.42rem;letter-spacing:3.5px;color:rgba(29,233,182,0.45);font-weight:300;text-transform:uppercase;margin-top:3px;white-space:nowrap;}
@media(max-width:1180px){body .logo .logo-text small{display:none;}}
body .logo small{display:block;font-family:'Raleway',sans-serif;font-size:0.45rem;letter-spacing:6px;color:rgba(29,233,182,0.4);font-weight:300;text-transform:uppercase;margin-top:2px;}
body .nav-links{display:flex;align-items:center;gap:3rem;list-style:none;flex-shrink:0;}
body .nav-links a{color:rgba(223,246,244,0.75);text-decoration:none;font-size:0.68rem;letter-spacing:2.5px;text-transform:uppercase;font-weight:400;transition:color .3s;white-space:nowrap;}
body .nav-links a:hover{color:var(--teal);}

/* ── Mobile hamburger toggle ── */
body .nav-hamburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:38px;height:38px;background:transparent;border:1px solid rgba(29,233,182,0.25);border-radius:8px;cursor:pointer;z-index:260;flex-shrink:0;}
body .nav-hamburger span{display:block;width:18px;height:2px;background:var(--teal);border-radius:2px;transition:transform .3s,opacity .3s;}
body .nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body .nav-hamburger.open span:nth-child(2){opacity:0;}
body .nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
body .nav-overlay{position:fixed;inset:0;background:rgba(2,8,16,0.6);backdrop-filter:blur(2px);z-index:230;opacity:0;visibility:hidden;transition:opacity .3s;}
body .nav-overlay.open{opacity:1;visibility:visible;}

@media(max-width:1100px){
  body nav{padding:0 5%;}
  body .nav-hamburger{display:flex;}
  body .nav-links{
    position:fixed;top:0;right:0;height:100vh;width:min(82vw,340px);
    background:#0c2340;flex-direction:column;align-items:flex-start;
    gap:0;padding:88px 1.8rem 2rem;box-sizing:border-box;
    overflow-y:auto;
    box-shadow:-8px 0 40px rgba(0,0,0,0.5);
    border-left:1px solid rgba(29,233,182,0.15);
    transform:translateX(100%);transition:transform .35s cubic-bezier(.22,.68,0,1.2);
    z-index:250;
  }
  body .nav-links.open{transform:translateX(0);}
  body .nav-links li{width:100%;border-bottom:1px solid rgba(255,255,255,0.06);}
  body .nav-links li a{display:block;padding:.95rem 0;font-size:0.8rem;letter-spacing:2px;}
  body .nav-services{width:100%;padding-bottom:0!important;margin-bottom:0!important;}
  body .nav-services-menu{
    position:static!important;opacity:1!important;visibility:visible!important;
    transform:none!important;display:none;
    background:rgba(255,255,255,0.03)!important;border-radius:8px;
    margin:.3rem 0 .6rem;padding:.4rem .9rem!important;box-shadow:none!important;
    min-width:0!important;
  }
  body .nav-services.mobile-open .nav-services-menu{display:block;}
  body .nav-services-menu a{padding:.6rem 0!important;font-size:0.74rem!important;border-bottom:1px solid rgba(255,255,255,0.05);}
  body .nav-free-tour{width:100%;border-bottom:none;margin-top:.8rem;margin-right:0;}
}

/* Free Tour's oversized cursive glyph + glow (drop-shadow) paint well past
   its own box, so a plain flex gap isn't enough — at laptop widths
   (~1400-1650px, a very common 125%-scaled 1920px screen) it visually
   crowds into the currency switcher next to it even though the boxes
   themselves don't overlap. A fixed margin guarantees real clearance at
   every width instead of depending on how much free space happens to be
   left over from justify-content:space-between. */
body .nav-free-tour{display:flex;align-items:center;margin-right:1.4rem;}
body .nav-free-tour a{
  position:relative;
  display:inline-block;
  font-family:'Italianno',cursive;
  font-size:2.55rem;
  line-height:1;
  text-transform:none;
  letter-spacing:normal;
  padding:0 6px 4px;
  text-decoration:none;
  background:linear-gradient(90deg,#ffd54f 15%,#fff9c4 30%,#fffde7 40%,#fff9c4 50%,#ffd54f 70%);
  background-size:250% auto;
  background-position:0% center;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 10px rgba(255,213,79,0.65));
  animation:ftShimmer 2.8s ease-in-out infinite;
  transition:transform .25s ease,filter .25s ease;
}
body .nav-free-tour a:hover{transform:scale(1.1);filter:drop-shadow(0 0 16px rgba(255,213,79,0.9));}
@keyframes ftShimmer{
  0%{background-position:0% center;}
  50%{background-position:100% center;}
  100%{background-position:0% center;}
}
body .nav-services{position:relative;padding-bottom:10px;margin-bottom:-10px;}
body .nav-services>a{display:flex;align-items:center;gap:5px;cursor:pointer;padding-top:4px;}
body .nav-services .nav-caret{font-size:0.5rem;opacity:0.6;transition:transform .2s;}
body .nav-services:hover .nav-caret{transform:rotate(180deg);color:var(--teal);}
body .nav-services-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);
  background:rgba(7,22,42,0.97);
  border:1px solid rgba(29,233,182,0.25);
  backdrop-filter:blur(16px);
  min-width:210px;border-radius:14px;overflow:hidden;
  opacity:0;visibility:hidden;
  transition:opacity .25s,transform .25s,visibility .25s;
  z-index:300;
  box-shadow:0 16px 36px rgba(0,0,0,0.45);
}
body .nav-services:hover .nav-services-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px);}
body .nav-services-menu a{
  display:block;padding:11px 18px;
  font-family:'Raleway',sans-serif;font-size:0.66rem;letter-spacing:1.5px;text-transform:uppercase;
  color:rgba(210,245,240,0.75);
  border-bottom:1px solid rgba(255,255,255,0.05);
  transition:background .2s,color .2s;
  white-space:nowrap;
}
body .nav-services-menu a:last-child{border-bottom:none;}
body .nav-services-menu a:hover{background:rgba(29,233,182,0.1);color:var(--teal);}


/* ── LANGUAGE SWITCHER ── */
body .lang-switcher{position:relative;display:flex;align-items:center;margin-left:0.15rem;}
body .lang-btn{border-radius:8px;
  background:transparent;
  border:1px solid rgba(29,233,182,0.3);
  color:var(--teal);
  font-family:'Raleway',sans-serif;
  font-size:0.68rem;letter-spacing:1.5px;
  padding:6px 12px 6px 10px;
  height:30px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .25s;
  white-space:nowrap;
}
body .lang-btn:hover{background:rgba(29,233,182,0.1);}
body .lang-btn .flag{font-size:1rem;line-height:1;}
body .lang-btn .arrow{font-size:0.55rem;opacity:0.6;transition:transform .2s;}
body .lang-btn.open .arrow{transform:rotate(180deg);}
body .lang-dropdown{border-radius:14px;overflow:hidden;
  position:absolute;top:calc(100% + 8px);right:0;
  background:rgba(7,22,42,0.97);
  border:1px solid rgba(29,233,182,0.25);
  backdrop-filter:blur(16px);
  min-width:160px;
  opacity:0;visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .25s,transform .25s,visibility .25s;
  z-index:300;
}
body .lang-dropdown.open{opacity:1;visibility:visible;transform:translateY(0);}
body .lang-option{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;cursor:pointer;
  font-family:'Raleway',sans-serif;font-size:0.72rem;
  color:rgba(210,245,240,0.75);
  letter-spacing:1px;
  transition:background .2s,color .2s;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
body .lang-option:last-child{border-bottom:none;}
body .lang-option:hover{background:rgba(29,233,182,0.1);color:var(--teal);}
body .lang-option.active{color:var(--teal);background:rgba(29,233,182,0.06);}
body .lang-option .flag{font-size:1.1rem;}
body .lang-name{flex:1;}
body .lang-native{font-size:0.62rem;opacity:0.5;margin-left:auto;}

/* ─── CURRENCY SWITCHER ─── */
body .curr-switcher{position:relative;display:flex;align-items:center;}
body .curr-btn{border-radius:8px;
  background:transparent;
  border:1px solid rgba(255,213,79,0.3);
  color:var(--gold);
  font-family:'Raleway',sans-serif;
  font-size:0.68rem;letter-spacing:1.5px;
  padding:6px 12px 6px 10px;
  height:30px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
  transition:all .25s;
  white-space:nowrap;
}
body .curr-btn:hover{background:rgba(255,213,79,0.1);}
body .curr-btn .curr-symbol{font-size:0.9rem;line-height:1;font-weight:600;}
body .curr-btn .arrow{font-size:0.55rem;opacity:0.6;transition:transform .2s;}
body .curr-btn.open .arrow{transform:rotate(180deg);}
body .curr-dropdown{border-radius:14px;overflow:hidden;
  position:absolute;top:calc(100% + 8px);right:0;
  background:rgba(7,22,42,0.97);
  border:1px solid rgba(255,213,79,0.2);
  backdrop-filter:blur(16px);
  min-width:170px;
  opacity:0;visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .25s,transform .25s,visibility .25s;
  z-index:300;
}
body .curr-dropdown.open{opacity:1;visibility:visible;transform:translateY(0);}
body .curr-option{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;cursor:pointer;
  font-family:'Raleway',sans-serif;font-size:0.7rem;
  color:rgba(210,245,240,0.75);
  letter-spacing:1px;
  transition:background .2s,color .2s;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
body .curr-option:last-child{border-bottom:none;}
body .curr-option:hover{background:rgba(255,213,79,0.1);color:var(--gold);}
body .curr-option.active{color:var(--gold);background:rgba(255,213,79,0.06);}
body .curr-option .curr-sym{font-size:1rem;font-weight:700;min-width:18px;text-align:center;}
body .curr-name{flex:1;}

/* ══════════════════════════════════════════════════════════
   HOMEPAGE HEADER OVERRIDES
   Re-asserts the homepage header layout over the generic nav
   rules in hp-shared.css (which are meant for the simpler
   sub-page navs: airport-transfer, bus-tickets, free-tour...).
   Scoped with body nav so other pages are unaffected.
   ══════════════════════════════════════════════════════════ */
body nav{
  position:fixed;top:0;left:0;right:0;
  z-index:200;
  padding:0 0.6rem 0 0.4rem;
  height:var(--nav-h);
  background:rgba(5,22,40,0.95);
  border-bottom:1px solid rgba(29,233,182,0.1);
}
body nav .logo{
  font-size:1.35rem;
  letter-spacing:3px;
}
body nav .nav-links{gap:3rem;}
body nav .nav-free-tour a{font-size:2.55rem;letter-spacing:normal;text-transform:none;}
body nav .lang-switcher{margin-left:0.15rem;}

/* Laptop range: logo + 8 menu items + Free Tour + two switchers do not fit
   between 1025px and ~1400px at full desktop sizing, so the bar steps down
   instead of overflowing. Prefixed with `body nav` so these win over the
   base rules above, same as the rest of this block. */
@media(min-width:1101px) and (max-width:1499px){
  body nav .logo{font-size:1.15rem;letter-spacing:2px;}
  body nav .logo svg{height:42px;}
  body nav .nav-links a{font-size:0.6rem;letter-spacing:1.6px;}
  body nav .nav-free-tour a{font-size:1.95rem;}
  body nav .nav-links{gap:clamp(0.85rem,1.25vw,1.8rem);}
  body nav .curr-btn,body nav .lang-btn{font-size:0.62rem;padding:5px 9px;}
}
body nav .curr-btn,body nav .lang-btn{
  font-size:0.68rem;
  padding:6px 12px 6px 10px;
  height:30px;
  gap:6px;
  justify-content:center;
}

/* Phones: logo + hamburger + both switchers, at full desktop sizing, run
   past 390-430px wide and push the language flag off the right edge
   (clipped by the html{overflow-x:hidden} above, so it just disappears
   rather than causing a scrollbar). Shrinking the logo and dropping the
   currency/language *text* — the flag and symbol alone still say what
   each button does — brings the row back under the viewport. */
@media(max-width:480px){
  body nav{padding:0 3.5%;}
  body nav .logo{font-size:1.05rem;letter-spacing:1.5px;}
  body nav .logo svg{height:38px;}
  body nav .curr-btn,body nav .lang-btn{
    font-size:0.68rem;padding:5px 7px;gap:3px;height:28px;
  }
  body nav .curr-btn #currentCurrCode,
  body nav .lang-btn #currentLang{display:none;}
  body nav .curr-switcher,body nav .lang-switcher{margin-left:0;}
}

/* Homepage section headings — hp-shared.css turns these into small
   Cinzel labels (1rem) meant for sub-pages; restore the large
   Italianno display headings the homepage was designed with. */
body .section-title{
  font-family:'Italianno',cursive;
  font-weight:400;
  font-size:clamp(3.2rem,7vw,5.5rem);
  color:#edfffe;
  line-height:1;
  margin:0 0 1.4rem;
  letter-spacing:1px;
  display:block;
}