/* ==========================================================================
   footer-2026 — the site footer, single owner.

   Replaces the tgz398eFooter / tgz40xFooter / tioFooterV4 component, whose
   styling was spread over 238 rules in nineteen bundles, many of them
   !important, loading in an order that made new rules lose regardless of where
   they were written. Those rules have been deleted along with the markup that
   used them; this file is the only thing that styles the footer now.

   Shape follows the footers we benchmarked (Surf Maroc, Much Better
   Adventures): a full-bleed band running edge to edge and down to the last
   pixel of the page, a centred inner column, link lists stacked one per line
   under a heading, and a separate legal bar across the bottom. Specifically
   NOT a rounded card floating in the page — that was the previous attempt and
   it read as a widget rather than the base of the site.

   Rules for keeping it that way:
     - every selector is namespaced .tgzF26*, so nothing outside this file can
       collide with it and it cannot collide with anything else
     - no !important anywhere in this file. If a rule here ever needs one,
       something else has started targeting the footer and that is the bug
     - the footer owns its own sticky-dock clearance as bottom padding INSIDE
       the band, never as margin below it. Margin below leaves a strip of page
       background under the footer, which is what produced the mystery gap in
       dark mode
     - mobile-first; one breakpoint at 900px, which is where the sticky
       quick-nav dock stops being on screen
   ========================================================================== */

.tgzF26{
  --f-bg:#0a1723;
  --f-bar:#071018;
  --f-ink:#f4f7f9;
  --f-dim:#9db0be;
  --f-line:rgba(255,255,255,.10);
  --f-accent:var(--tgz-ui-mint,#bfe7d4);
  /* Height of the fixed dock (62px) plus its 8px offset and a little air. */
  --f-dock:86px;
  width:100%;
  margin:28px 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:var(--f-bg);
  color:var(--f-ink);
}

.tgzF26 .tgzF26__inner{
  max-width:1180px;
  margin:0 auto;
  padding:26px 16px 22px;
}

/* --- top region --------------------------------------------------------- */
.tgzF26 .tgzF26__top{display:grid;gap:22px}

/* --- brand -------------------------------------------------------------- */
.tgzF26 .tgzF26__brand{display:grid;gap:3px}
.tgzF26 .tgzF26__name{
  font-family:"Inter Tight",Inter,system-ui,sans-serif;
  font-size:1.22rem;line-height:1.1;font-weight:850;letter-spacing:-.02em;
  color:var(--f-ink);
}
.tgzF26 .tgzF26__tag{font-size:12.5px;line-height:1.45;color:var(--f-dim);max-width:34ch}

/* --- primary actions: desktop only ------------------------------------
   Below 900px these duplicate the sticky dock (Home / Stay / Book / Forecast /
   Contact) that is fixed to the viewport, so they are not rendered there. */
.tgzF26 .tgzF26__actions{display:none}
.tgzF26 .tgzF26__action{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:9px 16px;border-radius:999px;
  border:1px solid var(--f-line);
  color:var(--f-ink);text-decoration:none;
  font-size:.85rem;font-weight:800;
  transition:background-color .16s ease,border-color .16s ease;
}
.tgzF26 .tgzF26__action:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.26)}
.tgzF26 .tgzF26__action.is-primary{
  background:var(--tgz-ui-teal,#0c7a76);border-color:var(--tgz-ui-teal,#0c7a76);color:#fff;
}
.tgzF26 .tgzF26__action.is-primary:hover{filter:brightness(1.08)}

/* --- newsletter --------------------------------------------------------- */
.tgzF26 .tgzF26__news{display:grid;gap:8px;max-width:420px}
.tgzF26 .tgzF26__newsLabel{font-size:12.5px;font-weight:800;color:var(--f-ink)}
.tgzF26 .tgzF26__newsRow{display:grid;grid-template-columns:1fr auto;gap:6px}
.tgzF26 .tgzF26__newsInput{
  min-height:44px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--f-line);background:rgba(255,255,255,.06);
  color:var(--f-ink);font-size:13px;min-width:0;
}
.tgzF26 .tgzF26__newsInput::placeholder{color:var(--f-dim)}
.tgzF26 .tgzF26__newsInput:focus-visible{outline:2px solid var(--f-accent);outline-offset:1px}
.tgzF26 .tgzF26__newsBtn{
  min-height:44px;padding:10px 16px;border-radius:10px;border:0;
  background:var(--f-accent);color:#0a2320;
  font-size:13px;font-weight:900;cursor:pointer;
  transition:filter .16s ease;
}
.tgzF26 .tgzF26__newsBtn:hover{filter:brightness(1.06)}
.tgzF26 .tgzF26__newsBtn:disabled{opacity:.6;cursor:default}
.tgzF26 .tgzF26__newsMsg{margin:0;font-size:11px;line-height:1.4;color:var(--f-dim)}
/* Honeypot. Clipped rather than moved off-screen: a negative offset is outside
   the viewport in LTR but inside the scrollable area in RTL, which is exactly
   how /ar/ ended up with a 10,000px horizontal scroll elsewhere on this site. */
.tgzF26 .tgzF26__hp{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  border:0;white-space:nowrap;
}

/* --- link columns -------------------------------------------------------
   Two columns on a phone, four-ish on desktop. One link per line, left
   aligned, so a label never starts on one row and finishes on the next. */
.tgzF26 .tgzF26__cols{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px}
/* min-width:0 so a long label shrinks its column instead of widening the grid. */
.tgzF26 .tgzF26__col{min-width:0}
.tgzF26 .tgzF26__colTitle{
  margin:0 0 8px;font-size:10px;font-weight:900;
  letter-spacing:.11em;text-transform:uppercase;color:var(--f-dim);
}
.tgzF26 .tgzF26__links{list-style:none;margin:0;padding:0}
.tgzF26 .tgzF26__links li{margin:0}
.tgzF26 .tgzF26__links a{
  display:block;
  padding:8px 0;
  color:var(--f-ink);text-decoration:none;
  font-size:13.5px;line-height:1.3;
  transition:color .14s ease;
}
.tgzF26 .tgzF26__links a:hover{color:var(--f-accent);text-decoration:underline}
.tgzF26 .tgzF26__links a:focus-visible{outline:2px solid var(--f-accent);outline-offset:2px;border-radius:4px}

/* --- trust line --------------------------------------------------------- */
.tgzF26 .tgzF26__trust{
  margin:0;padding:10px 12px;border-radius:10px;
  background:rgba(191,231,212,.09);
  border:1px solid rgba(191,231,212,.18);
  font-size:11.5px;line-height:1.45;color:var(--f-accent);
}

/* --- legal bar ----------------------------------------------------------
   Its own darker full-width strip, and it carries the dock clearance so the
   band reaches the bottom edge of the page with no gap in either theme. */
.tgzF26 .tgzF26__bar{
  background:var(--f-bar);
  border-top:1px solid var(--f-line);
  padding-bottom:calc(var(--f-dock) + env(safe-area-inset-bottom,0px));
}
.tgzF26 .tgzF26__barInner{
  max-width:1180px;margin:0 auto;padding:12px 16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;
}
.tgzF26 .tgzF26__copy{font-size:11.5px;color:var(--f-dim)}
.tgzF26 .tgzF26__legal{display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px}
.tgzF26 .tgzF26__legal a,
.tgzF26 .tgzF26__legal button{
  display:inline-flex;align-items:center;gap:5px;
  min-height:34px;padding:2px 0;
  background:none;border:0;cursor:pointer;
  color:var(--f-dim);text-decoration:none;
  font-size:11.5px;font-family:inherit;
}
.tgzF26 .tgzF26__legal a:hover,
.tgzF26 .tgzF26__legal button:hover{color:var(--f-ink);text-decoration:underline}
.tgzF26 .tgzF26__legal a:focus-visible,
.tgzF26 .tgzF26__legal button:focus-visible{outline:2px solid var(--f-accent);outline-offset:2px;border-radius:4px}
.tgzF26 .tgzF26__social svg{display:block}

/* --- page variants ------------------------------------------------------
   /build/ and the forecast/surf apps drop the columns in the markup; they only
   need the band to sit tighter under a page that already asked for everything. */
.tgzF26--build{margin-top:16px}
.tgzF26--build .tgzF26__inner{padding-top:18px;padding-bottom:16px}

/* --- 900px and up -------------------------------------------------------
   The dock is gone, so the footer stops reserving space for it and the
   actions row appears. */
@media (min-width:900px){
  .tgzF26{--f-dock:0px}
  .tgzF26 .tgzF26__inner{
    padding:40px 28px 30px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
    gap:28px 48px;
    align-items:start;
  }
  .tgzF26 .tgzF26__top{display:contents}
  .tgzF26 .tgzF26__brand{grid-column:1;grid-row:1}
  .tgzF26 .tgzF26__actions{grid-column:1;grid-row:2;display:flex;flex-wrap:wrap;gap:8px}
  .tgzF26 .tgzF26__news{grid-column:1;grid-row:3}
  .tgzF26 .tgzF26__cols{
    grid-column:2;grid-row:1 / span 3;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:24px;
  }
  .tgzF26 .tgzF26__trust{grid-column:1 / -1;grid-row:4;justify-self:start}
  .tgzF26 .tgzF26__name{font-size:1.35rem}
  .tgzF26 .tgzF26__barInner{padding:14px 28px;justify-content:space-between}
}

/* --- dark theme ---------------------------------------------------------
   theme-phase407 repaints every heading, paragraph, list item and link on the
   page when html[data-theme="dark"] is set, and does it with !important:

     :where(h1..h6,strong,b,dt,dd,.title,…)      -> var(--tgz379-ink-2)
     :where(p,li,small,em,label,span,…)          -> var(--tgz379-muted)
     :where(a:not(.tgzChromeBrandLink):not(…))   -> var(--tgz379-mint)

   The footer is the same dark band in both themes, so it must not be
   repainted -- left alone it turns every footer link mint. Rather than answer
   !important with more !important, each element redefines the variable those
   rules read, so they resolve to the footer's own palette. Custom properties
   resolve at the element the declaration applies to, so this lands exactly
   where it should, wins no specificity war, and keeps this file the single
   owner of how the footer looks.

   Successive phases each introduced their own muted/ink token, and which one
   wins depends on bundle order per page type, so every variant is mapped. */
.tgzF26{
  --tgz379-ink-2:var(--f-ink);
  --tgz376-text2:var(--f-ink);
  --tgz379-mint:var(--f-ink);
  --tgz379-muted:var(--f-dim);
  --tgz376-muted:var(--f-dim);
  --tgz387-muted:var(--f-dim);
  --tgz381-muted:var(--f-dim);
  --tgz4743-muted:var(--f-dim);
  --tgz-dark-muted:var(--f-dim);
}
.tgzF26 .tgzF26__colTitle{--tgz379-ink-2:var(--f-dim);--tgz376-text2:var(--f-dim)}
.tgzF26 .tgzF26__trust{
  --tgz379-muted:var(--f-accent);--tgz376-muted:var(--f-accent);
  --tgz387-muted:var(--f-accent);--tgz381-muted:var(--f-accent);
  --tgz4743-muted:var(--f-accent);--tgz-dark-muted:var(--f-accent);
}
.tgzF26 .tgzF26__newsLabel{--tgz379-muted:var(--f-ink);--tgz376-muted:var(--f-ink)}
.tgzF26 .tgzF26__links a:hover{--tgz379-mint:var(--f-accent)}
.tgzF26 .tgzF26__legal a,
.tgzF26 .tgzF26__legal button{--tgz379-mint:var(--f-dim);--tgz379-muted:var(--f-dim)}
.tgzF26 .tgzF26__legal a:hover,
.tgzF26 .tgzF26__legal button:hover{--tgz379-mint:var(--f-ink);--tgz379-muted:var(--f-ink)}
.tgzF26 .tgzF26__action.is-primary{--tgz379-mint:#fff}

@media (prefers-reduced-motion:reduce){
  .tgzF26 .tgzF26__action,
  .tgzF26 .tgzF26__links a,
  .tgzF26 .tgzF26__newsBtn{transition:none}
}