/* =========================================================================
   TT Header & Footer — global shell. Sticky header, mobile drawer,
   sticky mobile booking CTA. Token-driven, RTL-safe, accessible.
   ========================================================================= */

/* --- Skip link (a11y) -------------------------------------------------
   Was physical left/border-radius — in RTL (Arabic) the link hid off the
   wrong edge and, on focus, would anchor to the visual left instead of
   the RTL-correct start edge. Logical properties fix both. */
.tt-skip { position:absolute; inset-inline-start:-9999px; inset-block-start:0; z-index:200; padding: var(--tt-space-12) var(--tt-space-16); background: var(--tt-color-primary); color:#fff; border-end-end-radius: var(--tt-radius-md); }
.tt-skip:focus { inset-inline-start:0; }

/* --- Utility bar (above header) — Homepage Redesign Spec / Milestone 2 -- */
.tt-utility-bar { background: var(--tt-color-text); color: rgba(255,255,255,.75); }
.tt-utility-bar__inner { display:flex; align-items:center; justify-content:space-between; gap: var(--tt-space-16); padding-block: var(--tt-space-8); font-size: 11px; }
.tt-utility-bar__claims { display:flex; gap: var(--tt-space-16); }
.tt-utility-bar__claims span { display:inline-flex; align-items:center; gap: 5px; }
.tt-utility-bar__claims svg { width:13px; height:13px; }
.tt-utility-bar__phone { display:inline-flex; align-items:center; gap:5px; color:#fff; font-weight: var(--tt-fw-medium); }
.tt-utility-bar__phone svg { width:13px; height:13px; }
/* Claims collapse to the two highest-value on narrow screens; phone link always visible */
@media (max-width: 719px) { .tt-utility-bar__claims span:nth-child(n+3) { display:none; } }
@media (max-width: 479px) { .tt-utility-bar { display:none; } } /* utility bar yields to viewport space on small phones */

/* --- Header ----------------------------------------------------------- */
.tt-header { position: sticky; top:0; z-index:100; background: var(--tt-color-bg); border-bottom:1px solid var(--tt-color-border); }
.tt-header__inner { display:flex; align-items:center; justify-content:space-between; gap: var(--tt-space-24); min-height:72px; }
.tt-logo { display:inline-flex; align-items:center; gap: var(--tt-space-8); font-family: var(--tt-font-heading); font-weight: var(--tt-fw-bold); font-size: var(--tt-fs-h6); color: var(--tt-color-text); }
.tt-logo svg { width:28px; height:28px; color: var(--tt-color-primary); }

/* --- Primary nav (desktop) ------------------------------------------- */
.tt-nav { display:none; }
@media (min-width:980px){ .tt-nav { display:flex; gap: var(--tt-space-24); align-items:center; } }
.tt-nav > ul { display:flex; gap: var(--tt-space-24); align-items:center; list-style:none; margin:0; padding:0; }
.tt-nav a { font-size: var(--tt-fs-small); font-weight: var(--tt-fw-medium); color: var(--tt-color-text); padding-block: var(--tt-space-8); border-bottom:2px solid transparent; transition: color var(--tt-motion-fast) var(--tt-motion-ease), border-color var(--tt-motion-fast) var(--tt-motion-ease); }
.tt-nav a:hover, .tt-nav a[aria-current="page"] { color: var(--tt-color-primary); border-color: var(--tt-color-primary); }

/* --- Desktop dropdown (Services -> Coming Soon pages) ------------------ */
.tt-nav li.menu-item-has-children { position: relative; }
.tt-nav .sub-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  min-width: 200px;
  background: var(--tt-color-bg);
  border: 1px solid var(--tt-color-border);
  border-radius: var(--tt-radius-md);
  box-shadow: var(--tt-shadow-2);
  list-style: none;
  margin: 0;
  padding: var(--tt-space-8);
  display: none;
  z-index: 120;
}
.tt-nav li.menu-item-has-children:hover .sub-menu,
.tt-nav li.menu-item-has-children:focus-within .sub-menu { display: block; }
.tt-nav .sub-menu li { list-style: none; }
.tt-nav .sub-menu a { display: block; padding: var(--tt-space-8) var(--tt-space-12); border-bottom: none; border-radius: var(--tt-radius-sm); }
.tt-nav .sub-menu a:hover { background: var(--tt-color-surface); }
/* Coming Soon items get a quiet badge so the nav itself doesn't overpromise */
.tt-nav .sub-menu a::after { content: "Soon"; margin-inline-start: var(--tt-space-8); font-size: 10px; font-weight: var(--tt-fw-semibold); color: var(--tt-color-text-soft); background: var(--tt-color-surface); padding: 2px 6px; border-radius: var(--tt-radius-pill); vertical-align: middle; }

.tt-header__actions { display:flex; align-items:center; gap: var(--tt-space-12); }
.tt-lang { display:none; }
@media (min-width:980px){ .tt-lang { display:inline-flex; align-items:center; gap: var(--tt-space-4); font-size: var(--tt-fs-small); font-weight: var(--tt-fw-medium); background:none; border:none; color: var(--tt-color-text-soft); cursor:pointer; } }
.tt-header__book { display:none; }
@media (min-width:560px){ .tt-header__book { display:inline-flex; } }

/* --- Mobile menu button ---------------------------------------------- */
.tt-burger { display:inline-flex; align-items:center; justify-content:center; width: var(--tt-tap-min); height: var(--tt-tap-min); background:none; border:1px solid var(--tt-color-border); border-radius: var(--tt-radius-md); color: var(--tt-color-text); }
@media (min-width:980px){ .tt-burger { display:none; } }
.tt-burger svg { width:24px; height:24px; }

/* --- Mobile drawer ---------------------------------------------------- */
.tt-drawer { position: fixed; inset:0; z-index:150; visibility:hidden; }
.tt-drawer[aria-hidden="false"] { visibility:visible; }
.tt-drawer__overlay { position:absolute; inset:0; background: rgba(17,24,39,.45); opacity:0; transition: opacity var(--tt-duration) var(--tt-ease); }
.tt-drawer[aria-hidden="false"] .tt-drawer__overlay { opacity:1; }
.tt-drawer__panel { position:absolute; inset-block:0; inset-inline-end:0; width: min(86vw, 360px); background: var(--tt-color-bg); padding: var(--tt-space-24); display:flex; flex-direction:column; gap: var(--tt-space-8); transform: translateX(100%); transition: transform var(--tt-duration) var(--tt-ease); overflow-y:auto; }
[dir="rtl"] .tt-drawer__panel { transform: translateX(-100%); }
.tt-drawer[aria-hidden="false"] .tt-drawer__panel { transform: translateX(0); }
.tt-drawer__head { display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--tt-space-16); }
.tt-drawer__close { width: var(--tt-tap-min); height: var(--tt-tap-min); background:none; border:none; color: var(--tt-color-text); }
.tt-drawer__close svg { width:24px; height:24px; }
.tt-drawer nav > ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.tt-drawer nav a { display:block; padding: var(--tt-space-16) 0; font-family: var(--tt-font-heading); font-weight: var(--tt-fw-semibold); font-size: var(--tt-fs-body); border-bottom:1px solid var(--tt-color-border); }
.tt-drawer .sub-menu { list-style:none; margin: 0; margin-inline-start: var(--tt-space-16); padding:0; }
.tt-drawer .sub-menu a { font-family: var(--tt-font-body); font-weight: var(--tt-fw-regular); font-size: var(--tt-fs-small); padding-block: var(--tt-space-12); color: var(--tt-color-text-soft); }
.tt-drawer .tt-btn { margin-top: var(--tt-space-24); }

/* --- Footer ----------------------------------------------------------- */
.tt-footer { background: var(--tt-color-text); color: rgba(255,255,255,.75); padding-block: var(--tt-space-64) var(--tt-space-32); }
.tt-footer__grid { display:grid; gap: var(--tt-space-32); grid-template-columns: 1fr; }
@media (min-width:560px){ .tt-footer__grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:780px){ .tt-footer__grid { grid-template-columns: repeat(3,1fr); } }
/* 5 columns now (brand + Services/Destinations/Support/Legal) — was a
   hardcoded 4-column track that silently wrapped the 5th column onto a
   new row at 2fr width once the Legal column was added. */
@media (min-width:1100px){ .tt-footer__grid { grid-template-columns: 1.6fr repeat(4,1fr); } }
.tt-footer h2 { font-size: var(--tt-fs-caption); text-transform:uppercase; letter-spacing:.08em; color: rgba(255,255,255,.5); margin-bottom: var(--tt-space-16); }
.tt-footer__brand .tt-logo { color:#fff; margin-bottom: var(--tt-space-16); }
.tt-footer__brand p { color: rgba(255,255,255,.6); font-size: var(--tt-fs-small); }
.tt-footer ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: var(--tt-space-12); }
.tt-footer a { color: rgba(255,255,255,.75); font-size: var(--tt-fs-small); }
.tt-footer a:hover { color:#fff; }
.tt-footer__bottom { margin-top: var(--tt-space-48); padding-top: var(--tt-space-24); border-top:1px solid rgba(255,255,255,.12); font-size: var(--tt-fs-caption); color: rgba(255,255,255,.5); display:flex; flex-wrap:wrap; gap: var(--tt-space-16); justify-content:space-between; }

/* --- Payment trust marks (Content Pages Spec §Footer) ------------------- */
.tt-footer__payments { display:flex; flex-wrap:wrap; gap: var(--tt-space-8); margin-top: var(--tt-space-32); padding-top: var(--tt-space-24); border-top:1px solid rgba(255,255,255,.12); }
.tt-footer__payment-badge { font-size: 11px; font-weight: var(--tt-fw-semibold); letter-spacing:.02em; color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); border-radius: var(--tt-radius-sm); padding: var(--tt-space-4) var(--tt-space-8); }

/* --- Sticky mobile booking CTA (conversion lever) -------------------- */
.tt-sticky-cta { position:fixed; inset-inline:0; inset-block-end:0; z-index:90; padding: var(--tt-space-12) var(--tt-space-16); background: var(--tt-color-bg); box-shadow: 0 -4px 16px rgba(17,24,39,.10); }
@media (min-width:980px){ .tt-sticky-cta { display:none; } }
body { padding-bottom: 76px; } /* room for sticky CTA on mobile */
@media (min-width:980px){ body { padding-bottom:0; } }
/* Dashboard suppresses the sticky CTA (its own bottom nav takes that
   screen position instead) — don't reserve space for a bar that isn't
   rendered. */
body.tt-no-sticky-cta { padding-bottom: 0; }

/* --- Language switcher ------------------------------------------------ */
.tt-langswitch { position:relative; }
.tt-langswitch__btn { display:inline-flex; align-items:center; gap:4px; min-height:40px; padding:0 12px; background:none; border:1px solid var(--tt-color-border); border-radius:var(--tt-radius-md); font-size:var(--tt-fs-caption); font-weight:var(--tt-fw-semibold); color:var(--tt-color-text); cursor:pointer; }
.tt-langswitch__menu { position:absolute; inset-block-start:calc(100% + 6px); inset-inline-end:0; min-width:160px; background:var(--tt-color-bg); border:1px solid var(--tt-color-border); border-radius:var(--tt-radius-md); box-shadow:var(--tt-shadow-2); list-style:none; margin:0; padding:6px; display:none; z-index:120; }
.tt-langswitch:hover .tt-langswitch__menu, .tt-langswitch:focus-within .tt-langswitch__menu { display:block; }
.tt-langswitch__menu a { display:block; padding:8px 12px; border-radius:var(--tt-radius-sm); font-size:var(--tt-fs-small); color:var(--tt-color-text); }
.tt-langswitch__menu a:hover, .tt-langswitch__menu a[aria-current="true"] { background:var(--tt-color-surface); color:var(--tt-color-primary); }