/* Footer 2.0 — the demo notice and its countdown.
 *
 * Scoped entirely under .lds-demo. Footer 1.0 is kept verbatim at
 * /footer/footer-1.0-en.html and /footer/footer-1.0-ar.html; everything here is
 * additive, so the rest of the footer renders exactly as it did.
 *
 * Colours are taken from the footer itself with currentColor and translucent
 * borders, so the block sits correctly whatever the footer is painted on.
 */

/* ---- where the block sits --------------------------------------------- */
/* The block IS the contents of <div class="lodisna"> now: footer 2.0 replaces
 * the "© 2026 LODISNA" line rather than sitting beside it. So the block is a
 * plain in-flow child and .lodisna's height is the block's height plus the
 * theme's 3vw padding — but .lodisna is absolutely positioned, and which edge
 * it is pinned by decides which way that height grows.
 *
 * DESKTOP — the theme pins bottom:0, so the box grows upward from the footer's
 * bottom edge, exactly as the copyright's box did. Measured at 1440x900 with
 * footer 1.0: the copyright box was 763.5..900.3 and the whole band
 * x 0..700, y 639..900.3 was empty — the address columns' text stops at y 639
 * (EN) / 644 (AR), the Navarra logo starts at x 705.6, .silencio and .linkedin
 * at x 1178.6. The taller block reaches up to y ~713..724 there, well inside
 * that band, so nothing here has to change.
 *
 * PHONE — the theme pins bottom:20vw, and growing upward from that runs the
 * block into .silencio: measured at 390x844 its text ink is 691.4..707.4 (EN)
 * / 685.6..711.6 (AR), and a bottom-pinned block would start at y ~680.
 * Below the copyright, on the other hand, footer 1.0 leaves 78px completely
 * empty — .footer-copy is display:none on phones. So the phone rule below
 * re-pins .lodisna by its TOP at the exact y footer 1.0 gave it, and the box
 * grows down into that empty band instead.
 *
 * .lodisna is 5vw/12.4vw with line-height 0.7 for a copyright line that no
 * longer exists; the block sets its own type so that strut cannot leak into
 * its line boxes (it used to add 28px of leading above the timer).
 */
.lds-demo {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  font-family: Type2, "Segoe UI", Arial, sans-serif;
  color: inherit;
}
html[dir="rtl"] .lds-demo { text-align: right; }

/* ---- the countdown ----------------------------------------------------- */
/* Deliberately left-to-right in both languages: a clock reads the same way
 * everywhere, and forcing it to mirror only invites bidi surprises around the
 * digits. In Arabic the whole block is right-aligned instead. */
.lds-demo__timer {
  display: inline-flex;
  direction: ltr;
  gap: 6px;
  align-items: stretch;
  margin: 0 0 14px;
}

.lds-demo__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 8px 9px 7px;
  border: 1px solid currentColor;
  border-radius: 8px;
  /* The border alone would read as heavy against the footer copy. */
  border-color: color-mix(in srgb, currentColor 34%, transparent);
  background: color-mix(in srgb, currentColor 7%, transparent);
}

.lds-demo__cell b {
  font-family: Type1, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.05;
  /* Tabular figures and a fixed cell width: the row must not twitch once a
   * second as the digits change. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.02em;
}

.lds-demo__cell i {
  font-style: normal;
  margin-top: 3px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.68;
  white-space: nowrap;
}
html[dir="rtl"] .lds-demo__cell i {
  letter-spacing: normal;
  text-transform: none;
  font-size: 10px;
  font-family: "Cairo", Type2, sans-serif;
}

/* The last day is worth noticing. */
.lds-demo--soon .lds-demo__cell { border-color: rgba(243, 39, 53, 0.65); }
.lds-demo--soon .lds-demo__cell b { color: #F32735; }

/* Once it runs out the cells are meaningless; the note carries the message. */
.lds-demo--expired .lds-demo__timer { display: none; }

/* ---- the notice -------------------------------------------------------- */
.lds-demo__note {
  margin: 0;
  font-size: clamp(14px, 1.55vw, 22px);
  line-height: 1.4;
  letter-spacing: 0.01em;
  opacity: 0.95;
  max-width: 30ch;
}
html[dir="rtl"] .lds-demo__note {
  letter-spacing: normal;
  font-size: clamp(15px, 1.6vw, 23px);
  line-height: 1.9;
  font-family: "Cairo", Type2, sans-serif;
  margin-left: 0;
  margin-right: 0;
}
.lds-demo__note b { font-weight: 600; }

/* ---- phone ------------------------------------------------------------- */
/* The placement switch keys on the SAME query the theme uses for its mobile
 * footer (max-device-width: 440px). Keying it on width alone would flip the
 * block below the copyright in a narrow desktop window, where .lodisna still
 * has bottom:0 and there is nothing below it but the end of the page. */
@media screen and (max-device-width: 440px) {
  /* Pin the box by its top instead of its bottom, at the SAME y footer 1.0 put
   * it: the theme's own numbers are bottom:20vw and a height of 3vw padding
   * twice plus 0.7 x 12.4vw of copyright line, i.e. 34.68vw of footer measured
   * up from the bottom. Reproducing that as a top offset keeps the notice
   * starting where the copyright started — content top y 719.95, against the
   * copyright's own line box at 719.8 — while letting the block grow down into
   * the 78px of empty footer below rather than up into .silencio. */
  .lodisna { top: calc(100% - 34.68vw); bottom: auto; }
  .lds-demo__timer { margin-bottom: 6px; }
  html[dir="rtl"] .lds-demo__note { line-height: 1.65; font-size: 14px; }
}

@media (max-width: 899px) {
  .lds-demo__timer { gap: 5px; }
  .lds-demo__cell { min-width: 48px; padding: 7px 7px 6px; border-radius: 7px; }
  .lds-demo__cell b { font-size: 19px; }
  .lds-demo__cell i { font-size: 8px; letter-spacing: 0.08em; }
  html[dir="rtl"] .lds-demo__cell i { font-size: 9.5px; }
  .lds-demo__note { font-size: 13px; line-height: 1.45; max-width: none; }
}

/* Very narrow phones: keep all four cells on one line rather than wrapping one
 * cell onto a second row, which looks broken. */
@media (max-width: 380px) {
  .lds-demo__cell { min-width: 0; flex: 1 1 0; padding: 6px 3px 5px; }
  .lds-demo__timer { display: flex; width: 100%; }
  .lds-demo__cell b { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .lds-demo__cell { transition: none; }
}

/* ---------------------------------------------------------------- footer end
 *
 * 20px of breathing room after the last line of the footer.
 *
 * A border, not padding: every child of .footer is absolutely positioned
 * against its padding box, so padding-bottom drags the copyright block and the
 * LinkedIn link down with it and the gap never appears — measured on the live
 * page, .lodisna and .footer-copy moved from 11808 to 11828 and still ended
 * flush with the bottom edge. A border sits outside that box, so the content
 * stays where it is and the navy band grows by 20px underneath it. */
section.footer {
  border-bottom: 20px solid var(--azul, #011c4d);
}

/* ------------------------------------------------------------------- hero fit
 *
 * The hero was sized for "Transport". "Transportation" is five letters longer
 * and ran off the right edge at every width tested: 1480px of text in a 1354px
 * line at 1440, 1974 in 1805 at 1920, and 526 in 367 on a 390px phone — the
 * final N was simply cut off by the viewport. The ratio is the same at every
 * width (the theme sizes this in vw), so one value fixes all of them: the
 * longest line fits at 11.43vw, and 11vw leaves a 4% margin.
 *
 * Arabic is exempt: النقل / والسفر are short, they never came close to the
 * edge, and shrinking them would only make the Arabic hero look timid. */
html:not([lang="ar"]) #uno h1 {
  font-size: 11vw;
}

/* The phone menu's tagline lives in a 94vw box at 16vw, and the menu itself is
 * parked off-screen to the left. "TRANSPORTATION" needs 525px of that 366px
 * line, and the overflow is not clipped — so its tail painted straight across
 * the hero, a stray "ATION" floating under the headline on a 390px phone.
 * Sized to fit rather than hidden, so the tagline still reads in full when the
 * menu is open. The media query mirrors the theme's own, which is the only
 * place #tralog2 is given a size. Arabic is short and keeps it. */
@media screen and (max-device-width: 440px) {
  html:not([lang="ar"]) #tralog2 {
    font-size: 11vw;
  }
}