/* Gulf Luxe — page layouts (header, hero, grids, archive, single, footer). RTL via logical properties. */

/* ---------- Header ---------- */
.site-header__inner{display:flex;align-items:center;gap:var(--s-6);padding-block:var(--s-4)}
.brand{font-family:var(--font-display);font-weight:700;font-size:1.4rem;color:var(--c-primary-dark);white-space:nowrap}
.nav{display:flex;align-items:center;gap:var(--s-5,1.25rem);flex:1}
.nav>a,.nav__toggle{font-weight:500;color:var(--c-ink);background:none;border:0;cursor:pointer;font-size:1rem;font-family:inherit;padding:var(--s-2) 0}
.nav>a:hover,.nav__toggle:hover{color:var(--c-primary)}
.nav__drop{position:relative}
.nav__menu{position:absolute;inset-inline-start:0;top:100%;background:var(--c-surface);box-shadow:var(--shadow-2);border-radius:var(--r-btn);padding:var(--s-3);min-width:200px;display:grid;gap:var(--s-1);opacity:0;visibility:hidden;transform:translateY(8px);transition:all var(--dur-2) var(--ease-out-expo);z-index:60}
.nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu{opacity:1;visibility:visible;transform:none}
.nav__menu a{padding:var(--s-2) var(--s-3);border-radius:.5rem;color:var(--c-ink)}
.nav__menu a:hover{background:var(--c-surface-2);color:var(--c-primary)}
.site-header__cta{display:flex;align-items:center;gap:var(--s-4);margin-inline-start:auto}
.lang-switch{display:flex;gap:var(--s-2);list-style:none;margin:0;padding:0;font-size:var(--fs-sm)}
.lang-switch a{color:var(--c-muted)}
.lang-switch .current-lang a,.lang-switch a:hover{color:var(--c-primary);font-weight:600}

/* Header is always a solid frosted bar, so nav text stays dark for guaranteed contrast. */

/* ---------- Hero ---------- */
.hero,.page-hero,.single-hero{position:relative;background:var(--hero) center/cover no-repeat,var(--c-primary-dark);color:#fff;isolation:isolate}
.hero{min-height:86vh;display:flex;align-items:center}
.page-hero,.single-hero{min-height:46vh;display:flex;align-items:flex-end;padding-block:var(--s-12)}
.hero__overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,22,45,.30) 0%,rgba(10,22,45,.45) 55%,rgba(12,34,70,.80) 100%)}
.hero__content{max-width:720px}
.hero__title{color:#fff;font-size:var(--fs-display);margin-block:var(--s-3)}
.hero__sub{color:rgba(255,255,255,.92);font-size:1.2rem;max-width:48ch}
.hero__actions{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-6)}
.page-hero h1,.single-hero h1{color:#fff;font-size:var(--fs-h1);margin:0}
.single-hero__meta{display:flex;gap:var(--s-4);margin-top:var(--s-3);color:rgba(255,255,255,.92);font-weight:600}
.hero .eyebrow,.page-hero .eyebrow,.single-hero .eyebrow{color:var(--c-accent)}

/* ---------- Section scaffolding ---------- */
.section--alt{background:var(--c-surface-2)}
.section__head{text-align:center;max-width:620px;margin:0 auto var(--s-8)}
.section__head h2{margin-top:var(--s-2)}

/* ---------- Trust strip ---------- */
.trust{padding-block:var(--s-8)}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6);text-align:center}
.trust__grid>div{display:flex;flex-direction:column;gap:var(--s-1)}
.trust__num{font-family:var(--font-display);font-size:2.4rem;font-weight:700;color:var(--c-primary)}
.trust__grid span:last-child{color:var(--c-muted)}

/* ---------- Grids ---------- */
.grid{display:grid;gap:var(--s-6)}
.grid--cards{grid-template-columns:repeat(3,1fr)}
.grid--dest{grid-template-columns:repeat(4,1fr)}
.grid--types{grid-template-columns:repeat(3,1fr)}
.card__title{font-size:1.15rem;margin:var(--s-2) 0}
.card__title a{color:var(--c-ink)}
.card__title a:hover{color:var(--c-primary)}
.card .btn-wa{margin-top:var(--s-3)}

/* Destination tiles */
.dest{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;display:block;box-shadow:var(--shadow-1)}
.dest img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-3) var(--ease-out-expo)}
.dest:hover img{transform:scale(1.07)}
.dest__name{position:absolute;inset-inline:0;inset-block-end:0;padding:var(--s-4);color:#fff;font-family:var(--font-display);font-size:1.2rem;font-weight:600;background:linear-gradient(transparent,rgba(12,40,80,.85))}

/* Type tiles */
.tile{display:flex;align-items:center;justify-content:center;min-height:120px;border-radius:var(--r-card);background:var(--c-surface);box-shadow:var(--shadow-1);font-family:var(--font-display);font-size:1.3rem;font-weight:600;color:var(--c-ink);transition:transform var(--dur-2) var(--ease-out-expo),box-shadow var(--dur-2),color var(--dur-2)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);color:var(--c-primary)}

/* Why us */
.why{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6)}
.why__item{background:var(--c-surface);border-radius:var(--r-card);padding:var(--s-6);box-shadow:var(--shadow-1)}
.why__item h3{color:var(--c-primary)}

/* CTA band */
.cta-band{background:var(--c-primary);color:#fff;text-align:center;padding-block:var(--s-16)}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.9);max-width:46ch;margin-inline:auto}
.cta-band .btn-wa{margin-top:var(--s-4)}

/* ---------- Archive ---------- */
.filters{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-3);background:var(--c-surface);padding:var(--s-4);border-radius:var(--r-card);box-shadow:var(--shadow-1);margin-bottom:var(--s-4)}
.filters select{padding:.7em;border:1px solid var(--c-line);border-radius:var(--r-btn);background:var(--c-surface);font-family:inherit;font-size:.95rem;color:var(--c-ink)}
.result-count{color:var(--c-muted);margin-bottom:var(--s-6)}
[data-et-results][aria-busy="true"]{opacity:.5;transition:opacity var(--dur-1)}

/* ---------- Single ---------- */
.single-layout{display:grid;grid-template-columns:1fr 340px;gap:var(--s-8);align-items:start}
.single-main h2{margin-top:var(--s-8)}
.single-main h2:first-child{margin-top:0}
.prose{color:var(--c-ink)}
.io{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);margin-top:var(--s-4)}
.faq{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-btn);padding:var(--s-3) var(--s-4);margin-block:var(--s-2)}
.faq summary{font-weight:600;cursor:pointer}
.single-aside{position:sticky;top:90px}
.booking-card{background:var(--c-surface);border-radius:var(--r-card);box-shadow:var(--shadow-2);padding:var(--s-6);display:grid;gap:var(--s-3)}
.booking-card__price{font-family:var(--font-display);font-size:1.8rem;font-weight:700;color:var(--c-primary)}
.booking-card__dur{color:var(--c-muted)}
.booking-card .btn{justify-content:center}
.booking-card__note{font-size:var(--fs-sm);color:var(--c-muted);margin:0;text-align:center}

/* ---------- Footer ---------- */
.site-footer__cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s-8)}
.site-footer h4{color:#fff;margin-bottom:var(--s-3)}
.site-footer__cols a{display:block;padding-block:var(--s-1)}
.brand--footer{color:#fff;font-size:1.4rem;margin-bottom:var(--s-3)}
.site-footer__bottom{border-top:1px solid rgba(255,255,255,.15);margin-top:var(--s-8);padding-top:var(--s-4);color:rgba(255,255,255,.7);font-size:var(--fs-sm)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .grid--cards,.grid--types{grid-template-columns:repeat(2,1fr)}
  .grid--dest{grid-template-columns:repeat(2,1fr)}
  .why,.trust__grid{grid-template-columns:repeat(2,1fr)}
  .single-layout{grid-template-columns:1fr}
  .single-aside{position:static}
  .filters{grid-template-columns:repeat(2,1fr)}
  .site-footer__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav{display:none}
  .grid--cards,.grid--types,.grid--dest,.why,.trust__grid{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr}
  .hero{min-height:70vh}
  .site-footer__cols{grid-template-columns:1fr}
}

/* ---------- Floating WhatsApp ---------- */
.wa-float{position:fixed;inset-block-end:20px;inset-inline-end:20px;z-index:80;width:56px;height:56px;border-radius:50%;background:var(--c-whatsapp);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-2);transition:transform var(--dur-1) var(--ease-out-expo)}
.wa-float:hover{transform:scale(1.08);color:#fff}
.wa-float svg{width:30px;height:30px;fill:currentColor}

/* ---------- Narrow content + generic page ---------- */
.narrow{max-width:760px}
.page-hero--slim{min-height:36vh}
.prose p{margin-block:var(--s-4)}
.prose strong{color:var(--c-primary-dark)}

/* ---------- Contact ---------- */
.contact-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--s-8);align-items:start}
.contact-info .btn-wa{margin-block:var(--s-4)}
.contact-list{list-style:none;padding:0;margin:var(--s-4) 0 0;display:grid;gap:var(--s-2);color:var(--c-muted)}
.contact-list a{color:var(--c-ink)}
.contact-form{background:var(--c-surface);border-radius:var(--r-card);box-shadow:var(--shadow-1);padding:var(--s-6)}

/* ---------- Inquiry form ---------- */
.et-form{display:grid;gap:var(--s-3)}
.et-form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.et-form label{display:grid;gap:var(--s-1);font-size:var(--fs-sm);color:var(--c-muted);font-weight:500}
.et-form input,.et-form textarea{padding:.7em;border:1px solid var(--c-line);border-radius:var(--r-btn);font-family:inherit;font-size:1rem;color:var(--c-ink);background:var(--c-surface-2)}
.et-form input:focus,.et-form textarea:focus{outline:2px solid var(--c-primary);outline-offset:1px}
.et-form .btn{justify-self:start}
.et-form__msg{margin:0;padding:var(--s-3);border-radius:var(--r-btn);font-weight:500}
.et-form__msg.is-ok{background:#e6f4ea;color:#0d6b3f}
.et-form__msg.is-err{background:#fdecea;color:#b4533e}

/* ---------- Blog ---------- */
.card__body p{color:var(--c-muted);font-size:.95rem;margin:var(--s-2) 0 0}
.pagination{margin-top:var(--s-8);text-align:center}
.pagination .page-numbers{display:inline-block;padding:.5em .9em;margin:0 .15em;border-radius:var(--r-btn);background:var(--c-surface);box-shadow:var(--shadow-1);color:var(--c-ink)}
.pagination .page-numbers.current{background:var(--c-primary);color:#fff}

@media (max-width:1024px){.contact-layout{grid-template-columns:1fr}}
@media (max-width:640px){.et-form__row{grid-template-columns:1fr}}

/* ---------- How it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.step{text-align:center;padding:var(--s-4)}
.step__n{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--c-primary);color:#fff;font-family:var(--font-display);font-size:1.5rem;margin-bottom:var(--s-3)}
.step h3{margin-bottom:var(--s-2)}
.step p{color:var(--c-muted)}

/* ---------- Testimonials ---------- */
.testi{padding-block:var(--s-2)}
.testi .swiper-slide{height:auto}
.quote{background:var(--c-surface);border-radius:var(--r-card);box-shadow:var(--shadow-1);padding:var(--s-6);margin:0;height:100%}
.quote p{font-size:1.1rem;line-height:1.9;color:var(--c-ink)}
.quote footer{display:flex;flex-direction:column;margin-top:var(--s-4)}
.quote__name{font-weight:600;color:var(--c-primary-dark)}
.quote__loc{color:var(--c-muted);font-size:var(--fs-sm)}

/* ---------- Nav: underline micro-interaction + hamburger ---------- */
.nav>a{position:relative}
.nav>a::after{content:"";position:absolute;inset-inline:0;bottom:-3px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform var(--dur-2) var(--ease-out-expo)}
.nav>a:hover::after{transform:scaleX(1)}
.btn:active{transform:translateY(0)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--c-ink);border-radius:2px;transition:background var(--dur-1)}

@media (max-width:900px){ .nav{gap:1rem} }
@media (max-width:640px){
  .nav-toggle{display:flex}
  .nav{display:none}
  .nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;inset-inline:0;top:100%;background:var(--c-surface);box-shadow:var(--shadow-2);padding:var(--s-2) var(--s-4)}
  .nav.is-open>a{color:var(--c-ink)!important;width:100%;text-align:start;padding:var(--s-3) 0;border-bottom:1px solid var(--c-line)}
  .nav.is-open>a:last-child{border-bottom:0}
  .nav.is-open .nav__drop{display:none} /* destinations/types live in footer + home on mobile */
  .steps{grid-template-columns:1fr}
  .site-header__cta .lang-switch{display:none}
}