/* ============================================================
   HALAL SOJOURN — Component & section styles
   ============================================================ */

/* ---------- WORDMARK ---------- */
.wordmark { display: inline-flex; align-items: center; gap: 11px; }
.wordmark__text { display: flex; flex-direction: column; line-height: 1; }
.wordmark__name { font-family: var(--serif); font-weight: 600; font-size: 1.42rem; letter-spacing: 0.005em; }
.wordmark__tag { font-size: 0.56rem; letter-spacing: 0.34em; font-weight: 600; margin-top: 4px; }
[lang="ar"] .wordmark__name { font-family: var(--ar-serif); }
[lang="ar"] .wordmark__tag { letter-spacing: 0.1em; }

/* ---------- HEADER ---------- */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(250,246,236,0.88);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--line-soft);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--s5); }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); margin-inline-start: auto; }
.nav-link {
  font-size: 0.92rem; font-weight: 500; letter-spacing: 0.01em;
  color: inherit; position: relative; padding-block: 6px;
  transition: color 0.25s var(--ease);
}
.is-transparent .nav-link, .is-transparent .wordmark { color: var(--on-dark); }
.is-solid .nav-link { color: var(--text); }
.nav-link::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: var(--to, left); transition: transform 0.32s var(--ease);
}
[dir="rtl"] .nav-link::after { --to: right; }
.nav-link:hover { color: var(--gold-deep); }
.is-transparent .nav-link:hover { color: var(--gold-soft); }
.nav-link:hover::after { transform: scaleX(1); }
.site-header__right { display: flex; align-items: center; gap: var(--s4); margin-inline-start: clamp(14px,2vw,28px); }

/* ---------- LANGUAGE SWITCH ---------- */
.lang-switch { display: inline-flex; align-items: center; gap: 1px; padding: 3px; border-radius: var(--r-pill); border: 1px solid var(--line); background: rgba(255,255,255,0.5); }
.lang-switch--light { border-color: rgba(243,238,226,0.4); background: rgba(36,40,32,0.22); }
.lang-opt {
  border: 0; background: transparent; color: var(--text-muted);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.32em 0.72em; border-radius: var(--r-pill); line-height: 1;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
  min-width: 30px;
}
.lang-switch--light .lang-opt { color: var(--on-dark-muted); }
.lang-opt.is-active { background: var(--emerald); color: var(--paper); }
.lang-switch--light .lang-opt.is-active { background: var(--gold); color: #fff; }
.lang-opt[lang="ar"] { font-size: 0.92rem; }

.menu-btn { display: none; flex-direction: column; gap: 4px; background: none; border: 0; padding: 6px; }
.menu-btn span { width: 22px; height: 1.6px; background: var(--ink); display: block; }
.menu-btn--light span { background: var(--on-dark); }
.mobile-menu { display: none; }

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; color: var(--on-dark); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media .media { border-radius: 0; height: 100%; }
.hero__media .media img { height: 100%; }
.hero__scrim { position: absolute; inset: 0; background:
  linear-gradient(to top, rgba(20,30,24,0.82) 0%, rgba(20,30,24,0.34) 42%, rgba(20,30,24,0.18) 70%, rgba(20,30,24,0.40) 100%); }
.hero__inner { position: relative; z-index: 2; width: 100%; padding-block-end: clamp(48px, 8vh, 104px); padding-block-start: 140px; }
.hero__eyebrow { color: var(--gold-soft); }
.hero h1 { color: var(--paper); margin: 0.32em 0 0; max-width: 16ch; }
.hero__sub { color: rgba(243,238,226,0.92); max-width: 44ch; margin-top: 1.2em; font-size: var(--fs-lead); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s6); align-items: center; }
.hero__scroll { position: absolute; inset-inline-end: clamp(20px,5vw,56px); inset-block-end: 38px; z-index: 2; display: flex; align-items: center; }
.hero__scroll-line { display: block; width: 1px; height: 60px; background: linear-gradient(to bottom, transparent, var(--gold-soft)); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; inset-inline: 0; top: -40%; height: 40%; background: var(--paper); animation: scrollPulse 2.2s var(--ease) infinite; }
@keyframes scrollPulse { 0% { transform: translateY(-100%); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(260%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll-line::after { animation: none; } }
.hero__meta { position: absolute; z-index: 2; inset-block-start: 50%; inset-inline-end: clamp(20px,5vw,56px); transform: translateY(-50%); text-align: end; display: none; }

/* ---------- SECTION HEAD ---------- */
.sec-head { display: flex; flex-direction: column; gap: var(--s3); max-width: 60ch; }
.sec-head--center { align-items: center; text-align: center; margin-inline: auto; }
.sec-head__title { margin: 0; }
.sec-head__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }

/* ---------- TRUST ---------- */
.trust-band { background: var(--card); border-block: 1px solid var(--line-soft); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.trust-item { padding: clamp(20px,3vw,38px) clamp(18px,2.4vw,32px); border-inline-start: 1px solid var(--line-soft); }
.trust-item:first-child { border-inline-start: 0; padding-inline-start: 0; }
.trust-item__ic { color: var(--emerald); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--emerald-wash); margin-bottom: var(--s4); }
.trust-item__t { font-size: 1.34rem; margin: 0 0 0.4em; color: var(--ink); }
.trust-item__b { font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* ---------- DESTINATION CARD ---------- */
.dcard { cursor: pointer; display: flex; flex-direction: column; gap: var(--s4); }
.dcard__media { position: relative; overflow: hidden; border-radius: var(--r); }
.dcard__media .media { border-radius: var(--r); }
.dcard:hover .dcard__media .media img { transform: scale(1.06); }
.dcard__kicker { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; }
.dcard__region { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.dcard__name { font-size: 1.8rem; margin: 0.18em 0 0.2em; color: var(--ink); line-height: 1.05; }
.dcard--lg .dcard__name { font-size: 2.4rem; }
.dcard__tag { font-size: 0.98rem; line-height: 1.5; margin: 0 0 0.5em; max-width: 38ch; }
.dcard .link-arrow { font-size: 0.84rem; }

/* ---------- JOURNEY CARD ---------- */
.jcard { cursor: pointer; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-xs); transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.jcard:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.jcard__media { position: relative; overflow: hidden; }
.jcard:hover .jcard__media .media img { transform: scale(1.05); }
.jcard__dest { position: absolute; inset-block-start: 14px; inset-inline-start: 14px; }
.jcard__body { padding: clamp(20px,2.4vw,28px); display: flex; flex-direction: column; gap: 0; flex: 1; }
.jcard__meta { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; color: var(--text-muted); font-weight: 500; letter-spacing: 0.02em; }
.jcard__meta span { display: inline-flex; align-items: center; gap: 6px; }
.jcard__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }
.jcard__title { font-size: 1.7rem; margin: 0.4em 0 0.3em; color: var(--ink); line-height: 1.08; }
.jcard__sum { font-size: 0.96rem; line-height: 1.55; margin: 0 0 1.3em; flex: 1; }
.jcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
.jcard__price { font-size: 0.92rem; color: var(--text-muted); }
.jcard__price strong { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); font-weight: 600; }

/* ---------- TESTIMONIAL ---------- */
.testi-card { margin: 0; background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--r); padding: clamp(26px,3vw,40px); display: flex; flex-direction: column; gap: var(--s4); box-shadow: var(--shadow-xs); }
.testi-card__q { color: var(--gold); }
.testi-card__quote { font-size: 1.36rem; line-height: 1.42; color: var(--ink); font-weight: 500; margin: 0; font-style: italic; text-wrap: pretty; }
[lang="ar"] .testi-card__quote { font-style: normal; line-height: 1.7; }
.testi-card__cap { display: flex; flex-direction: column; gap: 2px; margin-top: auto; }
.testi-card__a { font-weight: 600; color: var(--ink); }
.testi-card__w { font-size: 0.85rem; letter-spacing: 0.02em; }

/* ---------- NEWSLETTER ---------- */
.news-row { display: flex; gap: var(--s3); max-width: 460px; }
.news-row .input { flex: 1; }

/* ---------- FOOTER ---------- */
.footer { position: relative; overflow: hidden; padding-block: clamp(56px,8vw,96px) 0; }
.footer__inner { position: relative; display: grid; grid-template-columns: 1.3fr 2fr; gap: clamp(40px,6vw,90px); }
.footer__tag { color: var(--on-dark-muted); max-width: 38ch; margin: var(--s5) 0; font-size: 1rem; line-height: 1.6; }
.footer__assoc { display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--gold-soft); text-transform: uppercase; }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.footer__col h4 { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 var(--s4); font-weight: 600; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer__col a, .footer__contact li { color: var(--on-dark-muted); font-size: 0.95rem; transition: color 0.25s var(--ease); }
.footer__col a:hover { color: var(--paper); }
.footer__contact { color: var(--on-dark-muted); }
.footer__langs { color: var(--on-dark-muted); font-size: 0.95rem; }
.footer__base { position: relative; margin-top: clamp(40px,6vw,72px); padding-block: var(--s5); border-top: 1px solid var(--line-dark); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; font-size: 0.84rem; color: var(--on-dark-muted); }
.footer__base-links { display: flex; gap: var(--s5); }
.footer__base-links a { color: var(--on-dark-muted); }
.footer__base-links a:hover { color: var(--paper); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1000px) {
  .site-nav { display: none; }
  .header-cta { display: none; }
  .menu-btn { display: flex; }
  .footer__inner { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
  .trust-item { border-block-start: 1px solid var(--line-soft); padding-block-start: 28px; margin-block-start: 8px; }
  .trust-item:nth-child(-n+2) { border-block-start: 0; }
}
@media (max-width: 760px) {
  .lang-switch { display: none; }
  .mobile-menu { display: flex; flex-direction: column; gap: 4px; padding: 18px clamp(20px,5vw,56px) 26px; background: var(--paper); border-bottom: 1px solid var(--line-soft); }
  .mobile-menu a { padding: 12px 0; font-size: 1.05rem; font-weight: 500; border-bottom: 1px solid var(--line-soft); }
  .mobile-menu .btn { margin-top: 14px; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item { border-inline-start: 0 !important; padding-inline-start: 0 !important; }
  .news-row { flex-direction: column; }
  .hero { min-height: 88vh; }
}