/* =========================================================================
   Overrides — loaded AFTER css/style.css.

   style.css is the vendor Plax stylesheet and is left as shipped (minus the
   Google Fonts @import, which is self-hosted below). Every rule here fixes a
   defect recorded in docs/07-index-page-visual-audit.md, or adds something
   Plax never had. Nothing here restyles the template for taste.
   ========================================================================= */

/* ---- self-hosted Questrial ------------------------------------------------
   style.css set body text with `* { font-family: Questrial }` and pulled the
   face from fonts.googleapis.com. Under CITRA Resolution 42/2021 that is a
   third-party request carrying visitor data, so it is now local. */
@font-face {
  font-family: 'Questrial';
  src: url('../fonts/fonts/questrial-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---- FIX #1: header went white-on-white on scroll (measured 1.06:1) -------
   style.css:  .mil-top-panel.mil-active { background-color:#fff }
   while nav links stay #f2fafa via .mil-dark-2. main.js adds .mil-active on
   every scroll past 60px, AND unconditionally on mobile. On a dark theme the
   scrolled panel should darken, not invert. */
.mil-top-panel.mil-dark-2.mil-active {
  background-color: rgba(27, 23, 23, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(242, 250, 250, 0.08), 0 8px 30px rgba(0, 0, 0, 0.35);
}
/* Dropdown panels inherited the white background from the same rule. */
.mil-top-panel.mil-dark-2.mil-active .mil-top-menu ul li ul {
  background-color: #1b1717;
}

/* ---- FIX #2: primary button failed AA (white on coral, 2.83:1) -----------
   Dark ink on the same coral measures 6.15:1, so the template's accent
   colour is preserved and only the ink changes.
   .mil-border and .mil-transp have higher specificity and keep their own
   light colours on dark backgrounds — deliberately untouched. */
.mil-btn { color: #14100f; }
.mil-btn.mil-light { color: #0d5152; }   /* was #898d96 on #f2fafa = 3.14:1 */
.mil-btn.mil-grey  { color: #14100f; }   /* was #fff on #c4c4c4 */

/* ---- FIX #2c: the preloader counter is the same failure again ------------
   .mil-preloader puts .mil-light (#f2fafa) on the coral ground: 2.68:1 against
   a 3:1 requirement at that size. Transient — the preloader collapses to
   height:0 once loading finishes — but it is the first text a visitor sees and
   it was missed by earlier audits, which only ever measured the preloader
   under prefers-reduced-motion, where the rule below hides it outright. */
.mil-preloader .mil-light { color: #14100f; }

/* ---- FIX #2b: .mil-bg-2 is the same failure in a different component -----
   .mil-bg-2 is linear-gradient(#f27457 -> #a08488). Plax puts .mil-light text
   on it, which measures 2.89:1 at the coral end and 3.41:1 at the mauve end.
   Same remedy as the button: dark ink, which reaches 5.54:1 at the worst
   point on the gradient. */
.mil-bg-2 h1, .mil-bg-2 h2, .mil-bg-2 h3, .mil-bg-2 h4, .mil-bg-2 h5, .mil-bg-2 h6,
.mil-bg-2 p, .mil-bg-2 li, .mil-bg-2 .mil-light, .mil-bg-2 .h2,
.mil-bg-2 strong, .mil-bg-2 em, .mil-bg-2 span:not(.mil-todo) { color: #14100f; }
.mil-bg-2 .mil-btn.mil-border { color: #14100f; border-color: rgba(20, 16, 15, 0.5); }
.mil-bg-2 .mil-btn.mil-border:hover { border-color: #14100f; background-color: rgba(20, 16, 15, 0.08); }
.mil-bg-2 .mil-todo { background-color: #1a1509; color: #f0b429; }

/* ---- .mil-price-card has no background of its own ------------------------
   In price.html it sits on a light section, so the deep-teal default ink
   reads fine. On our dark pages it is transparent, leaving the card's text at
   1.96:1. Give the non-featured card the same dark surface Plax uses for
   .mil-icon-box.mil-with-bg. */
.mil-price-card:not(.mil-featured) {
  background-color: #272626;
  border-radius: 20px;
  padding: 40px;
}
.mil-price-card:not(.mil-featured) h4,
.mil-price-card:not(.mil-featured) h6,
.mil-price-card:not(.mil-featured) label,
.mil-price-card:not(.mil-featured) [data-calc-fee] { color: #f2fafa; }
.mil-price-card:not(.mil-featured) .mil-soft,
.mil-price-card:not(.mil-featured) [data-calc-rate] { color: #a8adb6; }

/* ---- FIX #4: sticky header sliced section headings on mobile -------------- */
html { scroll-padding-top: 110px; }

/* ---- accessibility Plax shipped without --------------------------------- */
:focus-visible {
  outline: 3px solid #03a6a6;
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.mil-skip-link {
  position: absolute; top: -100%; left: 16px; z-index: 1000;
  padding: 12px 24px; border-radius: 0 0 10px 10px;
  background: #f27457; color: #14100f;
  font-family: Switzer-Variable; font-weight: 600; text-decoration: none;
}
.mil-skip-link:focus { top: 0; }

/* Honeypot: off-screen rather than display:none, because some bots skip
   display:none fields. Kept out of the accessibility tree and the tab order. */
.mil-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
/* The universal selector matches the label directly, and `inherit` only
   propagates the same teal, so set it explicitly. The element is invisible
   either way — this just keeps automated contrast audits honest. */
.mil-honeypot, .mil-honeypot * { color: #f2fafa; }

.mil-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Plax had no prefers-reduced-motion support at all. GSAP sets inline
   opacity/transform on .mil-up, so those need overriding explicitly. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
  .mil-up, .mil-scale-img {
    opacity: 1 !important;
    transform: none !important;
  }
  .mil-preloader { display: none !important; }
}

/* 44px minimum touch target — mobile menu items measured 38px. */
@media (max-width: 992px) {
  .mil-top-menu ul li a { min-height: 44px; display: flex; align-items: center; }
}

/* ---- cookie consent (CITRA 42/2021) ------------------------------------- */
.mil-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
  background: #221e1e;
  border-top: 1px solid rgba(242, 250, 250, 0.1);
  padding: 20px 0;
}
.mil-consent .container {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
}
.mil-consent p { margin: 0; max-width: 62ch; }
.mil-consent .mil-consent-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 768px) {
  .mil-consent .mil-consent-actions { width: 100%; }
  .mil-consent .mil-consent-actions .mil-btn { flex: 1; padding: 0 14px; }
}

/* ---- unresolved client facts -------------------------------------------
   Deliberately loud. It must be impossible to ship one of these by accident.
   See docs/PLACEHOLDERS.md. */
.mil-todo {
  display: inline-block;
  padding: 1px 8px; border-radius: 6px;
  /* Solid base colour under the stripes so a contrast audit measures the real
     worst case instead of walking past a transparent gradient. */
  background-color: #2a2210;
  background-image: repeating-linear-gradient(45deg, rgba(240,180,41,.16) 0 8px, rgba(240,180,41,.05) 8px 16px);
  border: 1px dashed #f0b429;
  color: #f0b429;
  font-size: 0.9em; font-weight: 600;
}

/* ---- Plax's `* { color:#0d5152 }` gotcha --------------------------------
   style.css opens with a universal selector setting deep teal. A universal
   selector matching an element directly beats a colour inherited from its
   parent, so any <li>, <em>, <strong> or bare <span> inside a light-on-dark
   block silently renders dark teal on a dark background. Restoring
   inheritance for the elements our content uses. Deliberately NOT applied to
   .mil-price-card, which is a light card where the dark ink is correct. */
.mil-text-list li,
.mil-notice li,
.mil-notice em,
.mil-notice strong,
.mil-pale-2 em,
.mil-pale-2 strong,
.mil-light em,
.mil-ltr,
.mil-consent p span,
.mil-prose li,
.mil-prose em,
.mil-prose td,
.mil-prose th { color: inherit; }

.mil-prose strong { color: #f2fafa; }
/* Legal-page headings were rendering deep teal on the dark page at 1.96:1 —
   the same universal-selector trap. */
.mil-prose h1, .mil-prose h2, .mil-prose h3,
.mil-prose h4, .mil-prose h5, .mil-prose h6 { color: #f2fafa; }

/* The featured price card sits on a dark teal gradient. Its bare <label> and
   the calculator's output <span> inherited the deep-teal default (1.3:1), and
   Plax's own .mil-dark-soft measured 4.03:1 there. */
.mil-price-card.mil-featured label,
.mil-price-card.mil-featured [data-calc-fee] { color: #f2fafa; }
.mil-price-card.mil-featured .mil-dark-soft { color: #c8e4e4; }   /* 5.22:1 */

/* ---- small additions used by the escrow content ------------------------- */
/* Numbers, phone numbers and wallet addresses must never mirror under RTL. */
.mil-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* Fee table — the plain-HTML table that beats every Gulf incumbent (docs/06). */
.mil-fee-table { width: 100%; border-collapse: collapse; }
.mil-fee-table th, .mil-fee-table td {
  text-align: left; padding: 18px 16px;
  border-bottom: 1px solid rgba(242, 250, 250, 0.1);
}
.mil-fee-table thead th { font-size: 14px; color: #898d96; font-weight: 600; }
.mil-fee-table tbody tr:last-child th,
.mil-fee-table tbody tr:last-child td { border-bottom: 0; }
.mil-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Notice blocks for risk / regulatory disclosure. */
.mil-notice {
  padding: 24px; border-radius: 14px;
  background: #221e1e; border: 1px solid rgba(242, 250, 250, 0.1);
}
.mil-notice.mil-notice-warn { border-color: rgba(240, 180, 41, 0.4); }
.mil-notice p:last-child { margin-bottom: 0; }

/* Long-form legal pages. */
.mil-prose { max-width: 70ch; }
.mil-prose h2 { margin: 48px 0 16px; }
.mil-prose h3 { margin: 32px 0 12px; }
.mil-prose h2:first-child { margin-top: 0; }
.mil-prose p, .mil-prose li { color: #a8adb6; margin-bottom: 16px; }
.mil-prose ul, .mil-prose ol { padding-left: 20px; margin-bottom: 16px; }
.mil-prose li { list-style-type: disc; }
.mil-prose a { color: #f27457; }
.mil-prose table { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.mil-prose th, .mil-prose td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid rgba(242, 250, 250, 0.1);
  color: #a8adb6;
}
.mil-prose code { color: #03a6a6; font-size: 0.9em; }

/* =========================================================================
   VISUAL PASS — 10 Aug 2026
   Findings from a full-page Playwright review at 390px and 1440px. Each rule
   below closes a measured defect; the measurement is recorded with it so the
   next person can tell a fix from a preference.
   ========================================================================= */

/* ---- FIX #5: form controls disagreed with each other ---------------------
   Measured on /contact/: inputs and selects rendered 14px text in a 20px-radius
   pill, while the submit button next to them rendered 16px text in a 10px
   radius. Two visual languages inside one form. The fee calculator's input was
   70px tall against the contact form's 69px — same component, different page,
   one pixel apart, which is the signature of a value typed twice rather than
   shared. Controls now resolve to one height, one radius and one type size. */
.mil-input,
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], select {
  font-size: 16px;              /* was 14px; also stops iOS zooming on focus */
  border-radius: 12px;          /* was 20px — the pill fought the 10px buttons */
  height: 68px;                 /* explicit: /fees/ rendered 70px, /contact/ 69px */
  box-sizing: border-box;
}
textarea {
  font-size: 16px;
  border-radius: 12px;
  box-sizing: border-box;
}
.mil-btn { border-radius: 12px; }

/* ---- FIX #6: the textarea was the height of a single-line input ----------
   "About the deal" asks for three things — what is exchanged, by when, and
   what counts as delivered — in a box measured at 69px, i.e. one line. It read
   as a text field and invited a one-line answer to a three-part question. */
textarea, textarea.mil-input {
  min-height: 150px;
  padding-top: 18px;
  padding-bottom: 18px;
  line-height: 1.6;
  resize: vertical;
}

/* ---- FIX #7: three different button heights ------------------------------
   Measured 48px (header CTA, consent bar), 71px (Send enquiry) and 72px
   (Message us on WhatsApp) — the last two sitting directly above one another,
   one pixel apart.

   Root cause, measured: .mil-btn is inline-flex with zero padding, so its
   height is driven entirely by line-height. An <a class="mil-btn"> inherits the
   body's 1.6 (25.6px → 72px tall); a <button class="mil-btn"> inherits the user
   agent's line-height:normal for form controls (→ 70.56px). Identical classes,
   different elements, 1.44px apart. Normalising the inherited value makes the
   element type stop mattering. */
button.mil-btn, input[type="submit"].mil-btn, button.mil-btn * { line-height: 1.6; }
.mil-btn { min-height: 56px; }
.mil-btn.mil-sm { min-height: 44px; }
.mil-top-panel .mil-btn { min-height: 48px; }
.mil-consent .mil-btn { min-height: 48px; }

/* ---- FIX #8: proof-bar cards sat on a staircase --------------------------
   The row used align-items-center, so four cards holding between 2 and 6 lines
   of text were vertically centred against each other — each card starting and
   ending at a different height, reading as a layout bug rather than a rhythm.
   Stretch them and let the content set one shared height. */
.icon-boxes .row { align-items: stretch !important; }
.icon-boxes .row > [class*="col-"] { display: flex; }
.icon-boxes .mil-icon-box { width: 100%; display: flex; flex-direction: column; }
/* The four SVGs have different intrinsic heights, so once the cards were
   aligned the titles still sat on four different baselines. Reserve one box. */
.icon-boxes .mil-icon-box > img {
  flex: none; height: 48px; width: auto; object-fit: contain; object-position: center;
}

/* ---- FIX #9: heading orphans --------------------------------------------
   "Do not take our word for it" broke with "it" alone on the second line.
   Balanced wrapping removes single-word last lines without hard <br> tags,
   which would only move the problem to another breakpoint. */
h1, h2, h3, .mil-display { text-wrap: balance; }
p.mil-text-l { text-wrap: pretty; }

/* ---- credential strip (replaced the regulatory wall in slot 2) ----------- */
.mil-credential-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  padding: 28px 32px;
  border-radius: 16px;
  background: #221e1e;
  border: 1px solid rgba(242, 250, 250, 0.1);
}
.mil-credential + .mil-credential { border-left: 1px solid rgba(242, 250, 250, 0.08); padding-left: 24px; }
.mil-credential-label {
  display: block; margin-bottom: 8px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #898d96;
}
.mil-credential p { margin-bottom: 4px; }
.mil-credential p:last-child { margin-bottom: 0; }
@media (max-width: 992px) {
  .mil-credential-strip { padding: 24px; gap: 20px; }
  .mil-credential + .mil-credential {
    border-left: 0; padding-left: 0;
    border-top: 1px solid rgba(242, 250, 250, 0.08); padding-top: 20px;
  }
}

/* Stat unit suffix — "min" must not render at the same size as the numeral. */
.mil-stat-unit { font-size: 0.45em; letter-spacing: 0.02em; margin-left: 4px; }