/* ============================================================
   FOOTER
   Structure after DP World: logo column, four quiet link
   columns, legal bar.
   ============================================================ */

/* Dark variants of the shared buttons */
.on-night .btn-t{color:var(--on-night)}
.on-night .btn-t::after{background:rgba(255,255,255,.22)}
.on-night .btn-t .u{background:var(--on-night)}
.on-night .btn-t:focus-visible{outline-color:var(--focus-night)}
.on-night .btn-p:focus-visible{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px var(--red-active)}


/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.ft{background:var(--night);color:var(--on-night-2);border-top:1px solid var(--line-night)}
.ft-main{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:48px;padding-top:88px;padding-bottom:88px}
.ft-brand img{height:64px;width:auto}
.ft-brand p{margin-top:24px;max-width:28ch;font:400 var(--fs-footer)/1.55 var(--sans);color:var(--on-night-2)}
/* General email under the tagline, then the social icons */
.ft-brand .ft-mail{margin-top:16px}
.ft-mail a{color:var(--on-night);text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:4px;
  transition:text-decoration-color .2s var(--ease-press)}
.ft-mail a:hover{text-decoration-color:var(--on-night)}
.ft-mail a:focus-visible{outline:2px solid var(--focus-night);outline-offset:2px}
.ft-social{list-style:none;margin:24px 0 0;padding:0;display:flex;gap:8px}
.ft-social a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line-night);border-radius:0;color:var(--on-night-2);
  transition:color .2s var(--ease-press),border-color .2s var(--ease-press),background .2s var(--ease-press),transform .18s var(--ease-press)}
.ft-social a:hover{color:var(--on-night);border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}
.ft-social a:active{transform:scale(.95)}
.ft-social a:focus-visible{outline:2px solid var(--focus-night);outline-offset:2px}
.ft-ops{margin-top:28px;display:flex;flex-direction:column;gap:10px;font:400 12px/1.4 var(--mono);color:var(--on-night-3)}
.ft-ops span{display:flex;align-items:center;gap:8px}
.ft-ops i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(30,127,75,.22)}

.ft-col h2{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-3);padding-bottom:18px;margin-bottom:10px;border-bottom:1px solid var(--line-night)}
.ft-col ul{list-style:none;margin:0;padding:0}
/* Link hover like the DP World footer (user 2026-10-25): white at rest, a plain underline on hover and keyboard focus */
.ft-col li a{position:relative;display:inline-flex;padding:8px 0;font:400 var(--fs-footer)/1.3 var(--sans);color:var(--on-night);text-underline-offset:4px;text-decoration-thickness:1px}
.ft-col li a .u{display:none}
.ft-col li a:hover,.ft-col li a:focus-visible{text-decoration-line:underline}
.ft-col li a:focus-visible{outline:2px solid var(--focus-night);outline-offset:3px;border-radius:0}
.ft-col li a.is-key{color:var(--on-night)}

.ft-bar{border-top:1px solid var(--line-night)}
.ft-bar .container{display:flex;align-items:center;flex-wrap:wrap;row-gap:10px;padding-top:28px;padding-bottom:96px; /* clears the floating track + back-to-top buttons (24px offset + 48px button + 24px) */font:400 var(--fs-legal)/1.4 var(--sans);color:var(--on-night-3)}
.ft-legal{display:flex;align-items:center;flex-wrap:wrap;row-gap:10px;list-style:none;margin:0;padding:0}
.ft-legal li{display:flex;align-items:center}
.ft-legal li::before{content:"";display:inline-block;width:1px;height:12px;background:var(--line-night);margin:0 14px}
.ft-legal a,.ft-legal button{appearance:none;background:none;border:0;padding:0;font:inherit;color:var(--on-night-2);cursor:pointer;white-space:nowrap;transition:color .2s var(--ease-press);border-radius:0}
.ft-legal a:hover,.ft-legal button:hover,.ft-legal a:focus-visible,.ft-legal button:focus-visible{color:var(--on-night);text-decoration:underline;text-underline-offset:3px}
.ft-legal a:focus-visible,.ft-legal button:focus-visible{outline:2px solid var(--focus-night);outline-offset:3px}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width:1139px){
  .ft-main{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:56px}
  .ft-brand{grid-column:1 / -1;display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap}
  .ft-brand p{margin-top:0}
  .ft-social{margin-top:0}
  .ft-ops{margin-top:0}
}
@media (max-width:899px){
  .ft-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px;padding-top:64px;padding-bottom:56px}
  .ft-brand{display:block}
  .ft-brand p{margin-top:20px}
  .ft-social{margin-top:24px}
}
@media (max-width:599px){
  .ft-bar .container{flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:88px}
  .ft-legal{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;width:100%}
  .ft-legal li::before{display:none}
}

/* Touch targets: 44px minimum on phones (WCAG 2.5.5) */
@media (max-width:899px){
  .ft-col li a{padding:12px 0;min-height:44px;align-items:center}
  .ft-col li a .u{bottom:9px}
  .ft-social a{width:44px;height:44px}
  .ft-legal a,.ft-legal button{display:inline-flex;align-items:center;min-height:44px}
  .ft-legal{row-gap:0}
}

/* Short labels (SHEQ, PAIA, Sitemap) still get a 44px-wide tap area (ui-ux-pro-max touch-target-size) */
@media (max-width:899px){
  .ft-col li a,.ft-legal a,.ft-legal button{min-width:44px}
}

/* ---------- Cookie preferences dialog (_partials/bottom.html, opened by site.js). Same plate as the Track page's
   not-found pop-up: square, white, one overlay shadow token; Esc, backdrop and the close button dismiss it. ---------- */
.ck-dlg{width:min(560px,calc(100vw - 32px));max-width:none;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.ck-dlg::backdrop{background:rgba(11,14,18,.6)}
.ck-dlg-in{position:relative;margin:0;padding:30px 32px;background:var(--canvas);box-shadow:var(--shadow-overlay)}
.ck-lbl{margin:0;font:500 var(--fs-label)/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--subtle)}
.ck-dlg h2{margin:12px 44px 0 0;font:500 24px/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.ck-dlg h2:focus{outline:none}
.ck-dlg p{margin:12px 0 0;font:400 15px/1.55 var(--sans);color:var(--ink-2)}
.ck-opts{margin:20px 0 0;padding:0;border:0;display:grid;gap:10px}
.ck-opt{display:grid;grid-template-columns:18px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;background:var(--surface-2);font:400 14px/1.5 var(--sans);color:var(--ink-2)}
.ck-opt input{margin:3px 0 0;width:18px;height:18px;accent-color:var(--ink)}
.ck-opt strong{display:block;font-weight:500;color:var(--ink)}
.ck-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.ck-more{margin-top:16px!important;font-size:14px!important}
.ck-more a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
.ck-more a:hover{text-decoration-color:var(--ink)}
.ck-status{margin-top:8px!important;font-size:14px!important;color:var(--ok)}
.ck-status:empty{display:none}
.ck-x{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:36px;height:36px;border:0;background:none;color:var(--muted);cursor:pointer}
.ck-x:hover,.ck-x:focus-visible{color:var(--ink)}
.ck-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:640px){.ck-dlg-in{padding:24px 20px}.ck-actions .btn-p{flex:1 1 100%;justify-content:center}}