/* ONE HEADER FOR EVERY PAGE A CLIENT OPENS (Faisal 2026-09-24).
 *
 * "the quotation has an HTML link and tracking has an HTML link and everything has an HTML link.
 *  But all are different from each other ... some have the full logo with the text, some the icon
 *  only, some a wider header, some smaller. Take the good of everything."
 *
 * What was there, measured across the seven pages a client can reach:
 *   qpage      navy bar, FULL logo, left aligned        <- the brand asset, and the best frame
 *   track      centred, favicon.ico as the logo          <- a 32px browser-tab icon, stretched
 *   qok        centred, favicon.ico, Arabic hard-coded
 *   mok        centred, favicon.ico
 *   catalog    its own .ctop bar, full logo
 *   setbuilder / qform   no header at all
 *
 * The good of each, kept: the navy bar and the real logo from qpage; the plain "what is this page"
 * title and one-line subtitle from track and mok; the Arabic from qok, turned into a CHOICE the
 * client makes on every page instead of one page's hard-coded language.
 *
 * ⛔THE LOGO IS THE LOGO. tpx-logo-onnavy.png, never favicon.ico - a favicon is a 32px tab icon
 * and blowing it up to header size is what made three of these pages look unfinished.
 */

:root{
  --tpxh-navy:#04263F;
  --tpxh-orange:#D1812E;
  --tpxh-ink:#12283a;
  --tpxh-max:980px;
}

.tpxhead{
  background:var(--tpxh-navy);
  color:#fff;
  /* the phone notch is real estate we do not own - qpage was the only page that knew it */
  padding:max(16px,env(safe-area-inset-top)) 18px 17px;
  box-sizing:border-box;
}
.tpxhead-in{
  max-width:var(--tpxh-max);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.tpxhead-logo{
  height:40px;
  width:auto;
  display:block;
  flex:0 0 auto;
}
.tpxhead-txt{flex:1 1 220px;min-width:0}
.tpxhead-txt h1{
  margin:0;
  font-size:17px;
  font-weight:800;
  letter-spacing:.2px;
  line-height:1.3;
  color:#fff;
}
.tpxhead-txt p{
  margin:3px 0 0;
  font-size:12.5px;
  font-weight:600;
  line-height:1.45;
  color:rgba(255,255,255,.78);
}

/* a page's own line under the subtitle - the quotation reference, a validity date */
.tpxhead-slot{margin-top:5px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.92)}
.tpxhead-slot b{font-weight:800;color:#fff}
.tpxhead-slot span{opacity:.8;margin-inline-start:8px}

/* the language choice: quiet, always in the same corner, never a surprise */
.tpxhead-lang{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  font:inherit;
  font-size:12.5px;
  font-weight:700;
  /* 44px tall - a full thumb target on a phone (2026-10-08, the September header going live) */
  min-height:44px;
  padding:8px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s ease;
}
.tpxhead-lang:hover{background:rgba(255,255,255,.2)}
.tpxhead-lang:focus-visible{outline:2px solid var(--tpxh-orange);outline-offset:2px}

/* Arabic: the bar mirrors, the logo does not */
[dir="rtl"] .tpxhead-in{flex-direction:row-reverse}
[dir="rtl"] .tpxhead-txt{text-align:right}

/* a page that sets its own body font keeps it; this only fixes the Arabic fallback order */
[dir="rtl"] body,body.tpx-ar{
  font-family:Montserrat,"Geeza Pro","Noto Naskh Arabic","Droid Arabic Naskh","Segoe UI",Tahoma,Arial,sans-serif;
  line-height:1.65;
}
/* a code, a reference or a price inside an Arabic sentence must not be re-ordered by the browser */
[dir="rtl"] .tpx-ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* ON A PHONE THE BAR IS TWO DELIBERATE LINES, not whatever wrapping decides (2026-09-24).
   Measured at 375px before this: the logo sat alone on line one and the language button
   squeezed the subtitle, and the bar grew to 106-123px. Logo and button share the top
   line now - they are both chrome - and the words get the line below, whole. */
@media (max-width:559px){
  .tpxhead-in{
    display:grid;
    grid-template-columns:auto 1fr auto;
    grid-template-areas:'logo . lang' 'txt txt txt';
    align-items:center;
    row-gap:9px;
    column-gap:10px;
  }
  .tpxhead-logo{grid-area:logo}
  .tpxhead-lang{grid-area:lang}
  .tpxhead-txt{grid-area:txt;flex:none}
  [dir="rtl"] .tpxhead-in{grid-template-areas:'lang . logo' 'txt txt txt'}
}

@media (max-width:430px){
  .tpxhead{padding:max(14px,env(safe-area-inset-top)) 14px 15px}
  .tpxhead-logo{height:34px}
  .tpxhead-txt h1{font-size:15.5px}
  .tpxhead-txt p{font-size:12px}
  .tpxhead-lang{padding:6px 11px;font-size:12px}
}

@media print{
  /* white on navy vanishes on paper - the 2026-09-09 ruling, and it applies here too */
  .tpxhead{background:#fff;color:var(--tpxh-ink);border-bottom:2px solid var(--tpxh-navy)}
  .tpxhead-txt h1,.tpxhead-txt p{color:var(--tpxh-ink)}
  .tpxhead-lang{display:none}
}

/* ── SAME LOOK, MADE CONSISTENT (Faisal 6 Nov 2026, "Yes, as shown"): the same look, made consistent ─────────────────────────────
   Nothing new in colour or style: navy, orange, white rounded cards, Montserrat. What changes is that every page
   now shares the same header line, the same footer, one Arabic font, one button and one card. */
:root{
  --tpx-bg:#eef2f6;            /* the light page under the cards (track and the quotation already use it) */
  --tpx-line:#dfe7ee;
  --tpx-muted:#5b6f82;          /* 5.1:1 on white */
  --tpx-radius:18px;
  --tpx-shadow:0 1px 2px rgba(4,38,63,.06),0 10px 28px rgba(4,38,63,.08);
}
/* the orange line under the navy bar - the careers card's accent, now on every page */
.tpxhead{border-bottom:3px solid var(--tpxh-orange)}
/* ONE Arabic font everywhere: Tajawal (careers, apply and the booking page already load it; the header loads it for the rest) */
[dir="rtl"] body,body.tpx-ar,[dir="rtl"] button,[dir="rtl"] input,[dir="rtl"] textarea,[dir="rtl"] select{
  font-family:Tajawal,Montserrat,"Segoe UI",Tahoma,Arial,sans-serif;
}
/* one button */
.tpx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:14px;border:0;
  background:var(--tpxh-navy);color:#fff;font:inherit;font-size:15px;font-weight:800;text-decoration:none;cursor:pointer}
.tpx-btn.alt{background:#fff;color:var(--tpxh-navy);box-shadow:inset 0 0 0 1.5px #c9d6e2}
.tpx-btn svg{width:18px;height:18px;flex:none}
/* line icons in brand colours (they replace the emoji) */
.tpx-ico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fbf1e6;color:var(--tpxh-orange)}
.tpx-ico svg{width:26px;height:26px}
.tpx-ico.sm{width:22px;height:22px;background:none;vertical-align:-5px}
.tpx-ico.sm svg{width:18px;height:18px}

/* ── ONE FOOTER on every client page ── */
.tpxfoot{margin-top:28px;background:var(--tpxh-navy);color:#fff;border-top:3px solid var(--tpxh-orange);padding:22px 18px max(22px,env(safe-area-inset-bottom));font-size:13.5px;line-height:1.6}
.tpxfoot-in{max-width:var(--tpxh-max);margin:0 auto;display:grid;gap:14px}
.tpxfoot-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tpxfoot-top img{height:30px;width:auto;display:block}
.tpxfoot-top a{color:#fff;font-weight:700;text-underline-offset:3px}
.tpxfoot-rows{display:grid;gap:8px}
.tpxfoot-row{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;color:rgba(255,255,255,.86)}
.tpxfoot-row svg{width:18px;height:18px;margin-top:2px;color:var(--tpxh-orange)}
.tpxfoot-row a{color:#fff;font-weight:700;text-decoration:none}
.tpxfoot-acts{display:flex;flex-wrap:wrap;gap:8px}
.tpxfoot-acts a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:700;text-decoration:none}
.tpxfoot-acts a svg{width:17px;height:17px}
.tpxfoot-legal{font-size:11.5px;color:rgba(255,255,255,.62)}
@media (min-width:700px){.tpxfoot-in{grid-template-columns:1fr 1fr;column-gap:40px}.tpxfoot-top,.tpxfoot-legal{grid-column:1/-1}}
@media print{.tpxfoot{display:none}}