/* Holistic Journeys – shared on every page: tokens, buttons, header tweaks, footer */
@font-face{font-family:"HJ Against";src:url(/wp-content/uploads/2026/09/against-regular.woff2) format("woff2"),url(/wp-content/uploads/2026/09/against-regular.woff) format("woff");font-display:swap}

:root{
  --hj-navy:#081337;
  --hj-navy-2:#0f1d4a;
  --hj-bronze:#6b4a2a;
  --hj-sand:#d9b98f;
  --hj-cream:#f7f2ea;
  --hj-ink:#1b2033;
  --hj-display:"HJ Against","against",Georgia,serif;
  --hj-sans:"Inter","Roboto",system-ui,-apple-system,sans-serif;
}

html{scroll-padding-top:140px}

/* Buttons (also used by the home page) */
.hj-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font:600 1rem/1 var(--hj-sans);text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.hj-btn svg{width:18px;height:18px;flex:none;transition:transform .2s}
.hj-btn:hover svg{transform:translateX(3px)}
.hj-btn--light{background:#fff;color:var(--hj-navy)}
.hj-btn--light:hover{background:var(--hj-sand);color:var(--hj-navy)}
.hj-btn--ghost{border:1.5px solid rgba(255,255,255,.7);color:#fff}
.hj-btn--ghost:hover{background:#fff;color:var(--hj-navy);border-color:#fff}
.hj-btn--navy{background:var(--hj-navy);color:#fff}
.hj-btn--navy:hover{background:var(--hj-bronze);color:#fff}
.hj-btn:focus-visible{outline:3px solid var(--hj-sand);outline-offset:3px}

/* ---------- Header (Elementor nav pill): same width as the page content, one font, a clear CTA ---------- */
[data-elementor-type=header] .e-con.blur-section{--width:min(1240px,calc(100% - 48px));width:min(1240px,calc(100% - 48px))!important;max-width:none!important;margin-inline:auto;padding:10px 12px 10px 26px!important;gap:24px;box-shadow:0 8px 30px rgba(8,19,55,.12)!important}
[data-elementor-type=header] .e-con.blur-section > .elementor-widget-image{width:auto!important;max-width:none!important;--container-widget-width:auto;flex:none}
[data-elementor-type=header] .e-con.blur-section > .elementor-widget-image img{width:178px!important;height:auto;max-width:none}
[data-elementor-type=header] .e-con.blur-section > .elementor-widget-nav-menu{width:auto!important;max-width:none!important;flex:1;margin:0!important}
[data-elementor-type=header] .elementor-nav-menu--main .elementor-item{font-family:var(--hj-sans)!important;font-weight:500!important;font-size:15px!important;letter-spacing:0;padding:10px 14px!important}
[data-elementor-type=header] .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var(--hj-bronze)!important}
.hj-nav-cta{min-height:46px;padding:0 22px;font-size:.95rem;flex:none}
@media (max-width:1024px){
  [data-elementor-type=header] .e-con.blur-section{padding:8px 10px 8px 20px!important}
  [data-elementor-type=header] .e-con.blur-section > .elementor-widget-nav-menu{flex:none;order:3}
  .hj-nav-cta{margin-left:auto;order:2}
}
@media (max-width:767px){
  [data-elementor-type=header] .e-con.blur-section{--width:calc(100% - 40px);width:calc(100% - 40px)!important;padding:8px 8px 8px 16px!important}
  [data-elementor-type=header] .e-con.blur-section > .elementor-widget-image img{width:142px!important}
  .hj-nav-cta{display:none}
}

/* ---------- Footer: white card resting on the Sahara dunes ---------- */
.hj-footer{position:relative;isolation:isolate;background:var(--hj-cream);color:#4a5068;font:400 .98rem/1.65 var(--hj-sans);padding-top:clamp(64px,8vw,104px);overflow:hidden}
.hj-footer a{color:inherit;text-decoration:none;transition:color .2s}
.hj-footer a:hover{color:var(--hj-bronze)}
.hj-footer a:focus-visible{outline:2px solid var(--hj-bronze);outline-offset:3px;border-radius:4px}
.hj-footer__in{width:min(1240px,100% - 48px);margin:0 auto}
.hj-footer__card{position:relative;z-index:1;background:#fff;border-radius:28px;padding:clamp(32px,4vw,52px) clamp(28px,4vw,56px) 0;box-shadow:0 30px 80px rgba(8,19,55,.14)}
.hj-footer__top{display:grid;grid-template-columns:1.3fr .8fr .8fr .75fr 1.45fr;gap:40px}
.hj-footer__logo img{width:200px;height:auto;display:block}
.hj-footer__about p{margin:22px 0 0;max-width:22rem}
.hj-footer h2{font:600 .82rem/1 var(--hj-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--hj-bronze);margin:6px 0 20px}
.hj-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.hj-footer nav a{display:inline-block;padding:9px 0}
.hj-footer nav a,.hj-footer__contact a,.hj-footer__contact span{color:var(--hj-navy)}
.hj-footer nav a:hover,.hj-footer__contact a:hover{color:var(--hj-bronze)}
.hj-footer__contact li{display:flex;gap:12px;align-items:center;min-height:44px}
.hj-footer__contact svg{width:18px;height:18px;flex:none;color:var(--hj-bronze)}
.hj-footer__contact a{white-space:nowrap}
@media (max-width:767px){.hj-footer__contact a{white-space:normal}}
.hj-footer__bottom{margin-top:clamp(40px,5vw,56px);border-top:1px solid rgba(8,19,55,.1);padding:22px 0 26px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.9rem;color:#6b7086}
.hj-footer__social{display:flex;gap:10px}
.hj-footer__social a{width:44px;height:44px;border-radius:50%;border:1px solid rgba(8,19,55,.14);display:grid;place-items:center;color:var(--hj-navy)}
.hj-footer__social a:hover{background:var(--hj-navy);border-color:var(--hj-navy);color:#fff}
.hj-footer__social svg{width:17px;height:17px}
.hj-footer__scene{display:block;position:relative;z-index:0;margin-top:clamp(-220px,-14vw,-120px);height:clamp(380px,40vw,620px)}
.hj-footer__scene img{width:100%;height:100%;object-fit:cover;object-position:50% 70%;display:block;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34%);mask-image:linear-gradient(to bottom,transparent 0,#000 34%)}
@media (max-width:1180px){.hj-footer__top{grid-template-columns:repeat(3,1fr)}.hj-footer__about,.hj-footer__contact{grid-column:span 3}}
@media (max-width:1024px) and (min-width:768px){.hj-footer__contact{grid-column:span 3}}
@media (max-width:767px){
  .hj-footer__in{width:calc(100% - 32px)}
  .hj-footer__card{border-radius:22px;padding:28px 22px 0}
  .hj-footer__top{grid-template-columns:1fr 1fr;gap:36px 20px}
  .hj-footer__about,.hj-footer__contact{grid-column:1/-1}
  .hj-footer__bottom{flex-direction:column-reverse;align-items:flex-start}
  .hj-footer__scene{margin-top:-90px;height:300px}
}

/* Mobile/tablet dropdown: a rounded card under the pill instead of a full-bleed strip */
@media (max-width:1024px){
  [data-elementor-type=header] .e-con.blur-section{position:relative}
  [data-elementor-type=header] .e-con.blur-section > .elementor-widget-nav-menu{position:static!important}
  [data-elementor-type=header] nav.elementor-nav-menu--dropdown{top:calc(100% + 10px)!important;left:0!important;width:100%!important;background:#fff!important;border-radius:22px;box-shadow:0 18px 50px rgba(8,19,55,.18);padding:8px;overflow:hidden}
  [data-elementor-type=header] nav.elementor-nav-menu--dropdown a.elementor-item{font-family:var(--hj-sans)!important;font-size:17px!important;font-weight:500!important;color:var(--hj-navy)!important;background:transparent!important;padding:14px 16px!important;border-radius:14px}
  [data-elementor-type=header] nav.elementor-nav-menu--dropdown a.elementor-item:hover,
  [data-elementor-type=header] nav.elementor-nav-menu--dropdown a.elementor-item-active{background:var(--hj-cream)!important;color:var(--hj-bronze)!important}
  [data-elementor-type=header] nav.elementor-nav-menu--dropdown .hj-menu-cta{padding:8px 0 4px}
  [data-elementor-type=header] nav.elementor-nav-menu--dropdown .hj-menu-cta a{display:flex;width:100%;color:#fff!important}
}

/* Tour pages: keep the floating WhatsApp button above the "Book Now" bar on phones */
@media (max-width:767px){body:has(.tf-bottom-booking-bar) #ht-ctc-chat{bottom:88px!important}}

/* header logo link: a comfortable tap target */
[data-elementor-type=header] .e-con.blur-section > .elementor-widget-image a{display:flex;align-items:center;min-height:44px}
/* no underline under the menu items (active or hover); the active item stays bronze */
[data-elementor-type=header] .elementor-nav-menu--main .elementor-item::before,
[data-elementor-type=header] .elementor-nav-menu--main .elementor-item::after{display:none!important}

/* ---- language switcher (header pill + footer) ---- */
.hj-lang{position:relative;display:flex;align-items:center;margin-inline-start:6px}
.hj-lang__btn,.hj-lang__btn:hover,.hj-lang__btn:focus{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:999px;border:1px solid rgba(8,19,55,.15)!important;background:transparent!important;color:var(--hj-navy)!important;font:600 .9rem/1 var(--hj-sans)!important;cursor:pointer;text-transform:none;letter-spacing:0}
.hj-lang__btn:hover{border-color:var(--hj-navy)!important}
.hj-lang__btn svg{width:18px;height:18px}
.hj-lang__menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:50;min-width:170px;margin:0;padding:6px;list-style:none;background:#fff;border-radius:16px;box-shadow:0 24px 50px -18px rgba(8,19,55,.35)}
.hj-lang__menu[hidden]{display:none}
.hj-lang__menu a{display:block;padding:11px 14px;border-radius:10px;color:var(--hj-navy)!important;font:500 .95rem/1.2 var(--hj-sans);text-decoration:none!important}
.hj-lang__menu a:hover{background:var(--hj-cream)}
.hj-lang__menu a[aria-current]{font-weight:700;color:var(--hj-bronze)!important}
.hj-footer__langs{display:flex;flex-wrap:wrap;gap:4px 16px}
.hj-footer__langs a{color:#6b7086;padding:6px 0}
.hj-footer__langs a[aria-current]{color:var(--hj-navy);font-weight:600}
@media (max-width:767px){.hj-lang{margin-inline-start:auto;margin-inline-end:6px}.hj-lang__btn{padding:0 10px;min-height:40px}}

/* ---- Arabic (right to left) ---- */
html[dir=rtl]{--hj-display:"Noto Kufi Arabic","HJ Against",serif;--hj-sans:"Noto Naskh Arabic",Inter,system-ui,sans-serif}
html[dir=rtl] body{font-family:var(--hj-sans)}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3,html[dir=rtl] .hj-way__body strong,html[dir=rtl] .hj-ride__note strong{font-family:var(--hj-display)!important;letter-spacing:0!important;line-height:1.35!important}
html[dir=rtl] h1{font-size:clamp(2.2rem,5vw,4.2rem)!important}
html[dir=rtl] h2{font-size:clamp(1.8rem,3.4vw,3rem)}
html[dir=rtl] .hj-btn svg,html[dir=rtl] .hj-link svg,html[dir=rtl] .hj-jcard__more svg,html[dir=rtl] .hj-way__body em svg,html[dir=rtl] .hj-ride__form button svg,html[dir=rtl] .hj-pager__step svg,html[dir=rtl] .hj-booking__submit svg{transform:scaleX(-1)}
html[dir=rtl] .hj-search select,html[dir=rtl] .hj-search input,html[dir=rtl] .hj-search__people-btn{text-align:right}
html[dir=rtl] .hj-footer__contact a[href^="tel"],html[dir=rtl] .hj-footer__contact a[href^="mailto"]{direction:ltr;unicode-bidi:embed}

/* header pill with the language button: one row on tablets and phones (logo · language · [Plan your trip] · menu) */
@media (max-width:1024px){
  [data-elementor-type=header] .e-con.blur-section{flex-wrap:nowrap!important;align-items:center;gap:10px}
  [data-elementor-type=header] .e-con.blur-section > .hj-lang{order:1;margin-inline-start:auto}
  .hj-nav-cta{margin-inline-start:0;margin-left:0;order:2}
  [data-elementor-type=header] .e-con.blur-section > .elementor-widget-nav-menu{order:3}
}
@media (max-width:767px){
  [data-elementor-type=header] .e-con.blur-section{gap:6px}
  [data-elementor-type=header] .e-con.blur-section > .elementor-widget-image{flex:0 1 auto;min-width:0}
  [data-elementor-type=header] .e-con.blur-section > .elementor-widget-image img{width:min(142px,36vw)!important}
}

/* ---- "Pages" dropdown in the menu (About us, Contact, Stories) ---- */
[data-elementor-type=header] .elementor-nav-menu--main .hj-menu-pages{position:relative}
[data-elementor-type=header] .elementor-nav-menu--main .hj-menu-pages > a.has-submenu{display:inline-flex;align-items:center;gap:6px}
[data-elementor-type=header] .elementor-nav-menu--main .hj-menu-pages > a.has-submenu::after{content:"";display:inline-block!important;position:static!important;width:6px;height:6px;margin-top:-3px;border:solid currentColor;border-width:0 1.8px 1.8px 0;transform:rotate(45deg);background:none!important;opacity:.75;transition:transform .2s}
[data-elementor-type=header] .elementor-nav-menu--main .hj-menu-pages.is-open > a.has-submenu::after{transform:rotate(-135deg);margin-top:3px}
[data-elementor-type=header] .elementor-nav-menu--main .hj-submenu{position:absolute;top:calc(100% + 14px);inset-inline-start:50%;translate:-50% 0;z-index:60;min-width:190px;margin:0;padding:6px;list-style:none;background:#fff;border-radius:16px;box-shadow:0 24px 50px -18px rgba(8,19,55,.35);display:none!important}
[data-elementor-type=header] .elementor-nav-menu--main .hj-menu-pages:hover > .hj-submenu,
[data-elementor-type=header] .elementor-nav-menu--main .hj-menu-pages:focus-within > .hj-submenu,
[data-elementor-type=header] .elementor-nav-menu--main .hj-menu-pages.is-open > .hj-submenu{display:block!important}
[data-elementor-type=header] .elementor-nav-menu--main .hj-submenu::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
[data-elementor-type=header] .elementor-nav-menu--main .hj-submenu a{display:block;padding:11px 14px!important;border-radius:10px;color:var(--hj-navy)!important;font:500 .95rem/1.2 var(--hj-sans)!important;text-decoration:none!important;white-space:nowrap}
[data-elementor-type=header] .elementor-nav-menu--main .hj-submenu a:hover,
[data-elementor-type=header] .elementor-nav-menu--main .hj-submenu a:focus-visible{background:var(--hj-cream)}
[data-elementor-type=header] .elementor-nav-menu--main .hj-submenu a.elementor-item-active{color:var(--hj-bronze)!important;font-weight:700!important;background:none}
/* phone menu: the group is a small label with its pages indented under it */
[data-elementor-type=header] nav.elementor-nav-menu--dropdown .hj-menu-pages > a.has-submenu{pointer-events:none;font-size:.74rem!important;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#6b7086!important;padding-top:14px!important;padding-bottom:4px!important;background:none!important}
[data-elementor-type=header] nav.elementor-nav-menu--dropdown .hj-submenu{position:static;display:block!important;margin:0;padding:0;list-style:none;background:none;box-shadow:none;translate:none}
[data-elementor-type=header] nav.elementor-nav-menu--dropdown .hj-submenu a{padding-inline-start:24px!important}

/* Arabic: the three numbers keep their divider on the correct side */
@media (min-width:768px){
  html[dir=rtl] .hj-stat{padding:26px 0 30px 24px}
  html[dir=rtl] .hj-stat + .hj-stat{padding-left:24px;padding-right:32px;border-left:0;border-right:1px solid rgba(255,255,255,.22)}
}
@media (min-width:768px) and (max-width:1024px){
  html[dir=rtl] .hj-stat{padding:26px 0 30px 16px}
  html[dir=rtl] .hj-stat + .hj-stat{padding-left:16px;padding-right:24px}
}
