/* ============================================================
   Emirae.Pro global footer — component CSS (loads site-wide).
   Adapted from the design prototype homepage footer styles.
   `.foot*` class family is footer-unique (0 collisions). Tokens
   resolve via `.uaec-ds` on the <footer> root.
   ============================================================ */
/* Footer — premium, information-rich */
.foot { position: relative; overflow: hidden; background: linear-gradient(180deg, #0a1322 0%, #0b1a31 52%, #081325 100%); color: rgba(255,255,255,.62); }
.foot__edge { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 90%, transparent) 30%, var(--navy-tint) 50%, color-mix(in srgb, var(--accent) 90%, transparent) 70%, transparent); opacity: .8; z-index: 2; }
.foot::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 380px at 80% -14%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 60%), radial-gradient(640px 320px at 2% 8%, color-mix(in srgb, var(--blue-stroke) 16%, transparent), transparent 60%); }
.foot__watermark { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); font-size: clamp(120px, 23vw, 380px); font-weight: var(--fw-bold); letter-spacing: -0.04em; line-height: 1; white-space: nowrap; color: rgba(255,255,255,.035); pointer-events: none; z-index: 0; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 88%); mask-image: linear-gradient(180deg, #000, transparent 88%); }
.foot__inner { position: relative; z-index: 1; }
.foot__brand { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px 48px; align-items: center; padding-block: 60px 38px; border-bottom: 1px solid rgba(255,255,255,.09); }
@media (max-width: 820px) { .foot__brand { grid-template-columns: 1fr; } }
.foot__brand .brand img { height: 36px; }
.foot__brand .brand__word { color: #fff; font-weight: var(--fw-medium); font-size: 18px; } .foot__brand .brand__word b { color: #fff; }
.foot__id { display: flex; align-items: center; gap: 18px; max-width: 540px; }
.foot__logo { flex: none; display: inline-flex; }
.foot__logo img { height: 66px; width: auto; opacity: 0.4; }
.foot__tag { font-size: var(--fs-sm); line-height: 1.65; color: rgba(255,255,255,.62); margin: 0; }
.foot__brandcta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; align-items: stretch; }
.foot__brandcta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-start; align-items: center; }
.foot-btn {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; height: 48px; padding: 0 24px;
  border-radius: 10px; border: 1px solid transparent;
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); line-height: 1;
  text-align: center; white-space: nowrap; cursor: pointer;
  box-shadow: none; appearance: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.foot a.foot-btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.foot a.foot-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; transform: translateY(-1px); }
.foot a.foot-btn--ghost { background: transparent; color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.24); }
.foot a.foot-btn--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.42); color: #fff; transform: translateY(-1px); }
@media (min-width: 821px) { .foot__brandcta { justify-content: flex-end; } }
.foot__cols { display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 28px; padding-block: 48px; border-bottom: 1px solid rgba(255,255,255,.09); }
@media (max-width: 980px) { .foot__cols { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .foot__cols { grid-template-columns: repeat(2, 1fr); } }
.foot h3 { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: #fff; margin-bottom: 18px; }
.foot h3::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: var(--accent); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.foot a { font-size: var(--fs-sm); color: rgba(255,255,255,.58); transition: color var(--dur) var(--ease), transform var(--dur) var(--ease); display: inline-block; white-space: nowrap; }
.foot a:hover { color: #fff; transform: translateX(3px); }
.foot a.accent { color: var(--navy-tint); font-weight: var(--fw-medium); }
.foot__emirates { display: flex; align-items: baseline; gap: 14px 30px; flex-wrap: wrap; padding-block: 30px; border-bottom: 1px solid rgba(255,255,255,.09); }
.foot__emirates h3 { margin-bottom: 0; flex: none; }
.foot-emirates__links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.foot-emirates__links a { position: relative; font-size: var(--fs-sm); color: rgba(255,255,255,.58); transition: color var(--dur) var(--ease); display: inline-block; }
.foot-emirates__links a:hover { color: #fff; }
.foot-emirates__links a.accent { color: var(--navy-tint); font-weight: var(--fw-medium); }
.foot-emirates__links a + a::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.28); }
@media (max-width: 600px) { .foot__emirates { flex-direction: column; align-items: flex-start; gap: 14px; } }
.foot__wide { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; padding-block: 48px; border-bottom: 1px solid rgba(255,255,255,.09); align-items: start; }
@media (max-width: 880px) { .foot__wide { grid-template-columns: 1fr; gap: 32px; } }
.foot-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.foot-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: rgba(255,255,255,.82); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.14); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.foot-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--navy-tint); transition: background var(--dur) var(--ease); }
.foot-chip:hover { background: var(--accent); border-color: transparent; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 40%, transparent); }
.foot-chip:hover::before { background: #fff; }
.foot-trust { position: relative; overflow: hidden; background: linear-gradient(158deg, rgba(17,106,204,.18), rgba(255,255,255,.03)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius-xl); padding: 26px; }
.foot-trust__h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.foot-trust__ic { width: 40px; height: 40px; border-radius: 11px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 45%, transparent); }
.foot-trust__ic svg { width: 22px; height: 22px; flex: none; }
.foot-trust h4 { font-size: var(--fs-body); font-weight: var(--fw-bold); color: #fff; }
.foot-trust p { font-size: var(--fs-sm); line-height: 1.65; color: rgba(255,255,255,.7); }
/* connect: compact single-line social + payments (extendable) */
.foot__connect { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
@media (min-width: 821px) { .foot__connect { justify-content: flex-end; } }
.foot-inline { display: inline-flex; align-items: center; gap: 10px; }
.foot-inline__label { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255,255,255,.45); white-space: nowrap; }
.foot-inline__sep { width: 1px; height: 22px; background: rgba(255,255,255,.14); flex: none; }
@media (max-width: 520px) { .foot-inline__sep { display: none; } }
.foot ul.foot-social__list, .foot ul.foot-pay__list { display: inline-flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.foot a.foot-social__link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.72); white-space: nowrap; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.foot a.foot-social__link svg { width: 17px; height: 17px; }
.foot a.foot-social__link:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); color: rgba(255,255,255,.95); transform: translateY(-1px); }
/* unified row: social icons + payment badges share one premium system */
.foot-pay__badge { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: rgba(255,255,255,.72); white-space: nowrap; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.foot-pay__badge svg { width: 17px; height: 17px; color: rgba(255,255,255,.6); flex: none; }
.foot-pay__badge:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); color: rgba(255,255,255,.95); }
.foot-pay__badge:hover svg { color: rgba(255,255,255,.82); }
/* Stripe wordmark — softened to light grey so it harmonizes with the row, never pure white */
.foot-pay__badge--brand .foot-pay__logo { display: block; height: 20px; width: auto; flex: none; fill: rgba(255,255,255,.72); transition: fill var(--dur) var(--ease); }
.foot-pay__badge--brand:hover .foot-pay__logo { fill: rgba(255,255,255,.95); }
.foot__bar { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.09); }
.foot__bar-inner { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: space-between; padding-block: 24px; }
@media (min-width: 640px) { .foot__bar-inner { flex-direction: row; } }
.foot__bar a, .foot__bar p { font-size: var(--fs-sm); color: rgba(255,255,255,.5); }
.foot__bar a:hover { color: #fff; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 24px; }

/* ============================================================
   TAIL LAYER - narrow-viewport column overflow guard.
   Appended last on purpose: it must outrank the rules above.

   `.foot a` is `white-space: nowrap`, so on the two-column mobile grid each
   track was sized by the min-content of its widest label instead of by its
   `1fr` share ("Corporate Tax Registration" = 171px, "Bank Account
   Assistance" = 157px). Tracks then totalled more than the grid box and the
   second column ran past the viewport: 60px at 320, 20px at 360, 5px at 375.

   `minmax(0, 1fr)` stops the track inflating to min-content; letting the
   column links wrap stops the label overflowing the narrower track it now
   sits in. Both halves are needed - either one alone still overflows at 320.
   Scoped to the two-column breakpoint, so every wider layout is unchanged.
   ============================================================ */
@media (max-width: 600px) {
  .foot .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot .foot__cols a { white-space: normal; overflow-wrap: break-word; }
}

/* ============================================================
   Compact footer (.foot-mini) - the app-screen variant.

   One white bar with a hairline on top: copyright left, links right.
   Rendered by template-parts/global/footer/compact.php on the routes
   inc/footer-variant.php marks compact; `.foot` above and this block
   are mutually exclusive, never both on a page. Tokens resolve through
   `.uaec-ds` on the <footer> root exactly like `.foot`.
   ============================================================ */
.foot-mini { background: var(--surface); border-top: 1px solid var(--border); }

/* `#page` is already a flex column with min-height:100vh (header.php). The tall
   marketing footer always overflowed it; a bar this short does not, so on the
   short app screens (the gate states) the leftover space showed the body's
   cream - first below the bar, and once the bar was pushed down, above it. So
   the bar goes to the bottom edge AND the screen above it takes the free space,
   which is what paints it (.uaec-dash-root carries background:var(--page)).
   Both rules are no-ops on a page long enough to overflow. */
.foot-mini { margin-top: auto; }
body:has(.foot-mini) #page > .site-main { flex-grow: 1; }
.foot-mini__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 24px; padding-block: 2px; }
.foot-mini__copy { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); }
.foot-mini__links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; }

/* The 44px minimum hangs off the link, not off the bar: it is the tap target
   that has to be 44px tall, and keeping it there leaves the bar as short as its
   own content. Copy and links sit on one row from ~560px up and stack on two
   below, which is what the flex-wrap does on its own - no breakpoint needed. */
.foot-mini a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--text-secondary); transition: color var(--dur) var(--ease); }
.foot-mini a:hover { color: var(--text-strong); }

/* The dashboard company-profile screen floats a fixed save pill at bottom:20px.
   While it is out it covers the last stretch of the scrolled page - that is
   this bar. Reserve the height only while the pill is actually shown:
   `[hidden]` is the attribute the profile script toggles, so this follows it
   live instead of padding the bar permanently.
   20px offset + the 56px pill + a 12px gap, measured on the live screen: at 76px
   the links cleared it by 2px, which is not clearance, it is luck. */
body:has(.pf-save:not([hidden])) .foot-mini { padding-bottom: 88px; }

/* Below 560px dashboard-a.css turns that pill into a full-width, two-row block
   ~92px tall, so the reserve has to grow with it - 76px left the links sitting
   under it, which is the whole failure this rule exists to prevent. */
@media (max-width: 560px) {
	body:has(.pf-save:not([hidden])) .foot-mini { padding-bottom: 132px; }

	/* 24px of gap costs the third link its row at 360px: the three labels are
	   266px and the container leaves 312px. 16px keeps them on one row down to
	   ~350px and still separates them clearly. */
	.foot-mini__inner, .foot-mini__links { column-gap: 16px; }
}