/* ==========================================================================
   Likoma Airlines — Footer
   --------------------------------------------------------------------------
   Deep navy band closing the page: newsletter, link columns, app download,
   social, then a quiet legal strip. Uses the dark token context, so every
   nested component (buttons, inputs, badges) adapts without extra rules.
   ========================================================================== */

.lk-footer {
  position: relative;
  margin-block-start: auto;
  background: var(--gradient-sky);
  color: rgb(255 255 255 / 0.72);
  overflow: hidden;
  isolation: isolate;
}

/* Faint tail-fin watermark, cropped by the footer's overflow */
.lk-footer__watermark {
  position: absolute;
  inset-block-start: -12%;
  inset-inline-end: -4%;
  inline-size: clamp(18rem, 34vw, 36rem);
  opacity: 0.045;
  pointer-events: none;
  z-index: -1;
  user-select: none;
}

/* --- Newsletter band ------------------------------------------------------ */

.lk-footer__newsletter {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: clamp(var(--space-6), 4vw, var(--space-16));
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
  border-block-end: 1px solid rgb(255 255 255 / 0.1);
}

.lk-footer__newsletter-title {
  font-size: var(--text-display-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: #fff;
  text-wrap: balance;
}

.lk-footer__newsletter-text {
  margin-block-start: var(--space-3);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: rgb(255 255 255 / 0.7);
  max-inline-size: 42ch;
}

.lk-footer__newsletter-form {
  inline-size: min(28rem, 100%);
}

/* The inline form inherits the dark context but needs a translucent shell */
.lk-footer .lk-inline-form {
  background-color: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.18);
}

.lk-footer .lk-inline-form:focus-within {
  border-color: rgb(255 255 255 / 0.5);
  box-shadow: 0 0 0 4px rgb(255 255 255 / 0.08);
}

.lk-footer .lk-inline-form .lk-input {
  color: #fff;
}

.lk-footer .lk-inline-form .lk-input::placeholder {
  color: rgb(255 255 255 / 0.5);
}

/* --- Link columns --------------------------------------------------------- */

.lk-footer__main {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr));
  gap: clamp(var(--space-8), 4vw, var(--space-12));
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}

.lk-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
  max-inline-size: 30ch;
}

/* Width-constrained, not height-constrained: the horizontal lockup is 2.7:1,
   so a height cap makes the "Airlines Limited" line too small to read. */
.lk-footer__brand img {
  inline-size: clamp(180px, 60%, 240px);
  block-size: auto;
}

.lk-footer__tagline {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: rgb(255 255 255 / 0.66);
}

.lk-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-inline-size: 0;
}

.lk-footer__heading {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: #fff;
}

.lk-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lk-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: fit-content;
  max-inline-size: 100%;
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  color: rgb(255 255 255 / 0.7);
  transition: color var(--duration-fast) var(--ease-soft),
              transform var(--duration-fast) var(--ease-out);
}

.lk-footer__link:hover {
  color: #fff;
  transform: translateX(2px);
}

.lk-footer__link:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.7);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* --- Contact block --------------------------------------------------------- */

.lk-footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lk-footer__contact-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: rgb(255 255 255 / 0.7);
}

.lk-footer__contact-row svg {
  inline-size: 18px;
  block-size: 18px;
  margin-block-start: 2px;
  color: var(--blue-500);
  flex-shrink: 0;
}

/* --- Social --------------------------------------------------------------- */

.lk-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lk-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-full);
  color: rgb(255 255 255 / 0.78);
  transition: var(--transition-colors),
              transform var(--duration-fast) var(--ease-out);
}

.lk-social-btn:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: var(--lift-sm);
}

.lk-social-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.lk-social-btn svg { inline-size: 18px; block-size: 18px; }

/* --- App download --------------------------------------------------------- */

.lk-store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.lk-store-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2-5) var(--space-4);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--radius-lg);
  color: #fff;
  transition: var(--transition-colors), transform var(--duration-fast) var(--ease-out);
}

.lk-store-badge:hover {
  background-color: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.34);
  transform: var(--lift-sm);
}

.lk-store-badge svg { inline-size: 22px; block-size: 22px; }

.lk-store-badge__label {
  display: flex;
  flex-direction: column;
  line-height: var(--leading-tight);
}

.lk-store-badge__sm {
  font-size: var(--text-2xs);
  color: rgb(255 255 255 / 0.62);
}

.lk-store-badge__lg {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
}

/* --- Certification / trust row --------------------------------------------- */

.lk-footer__certs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-8);
  border-block-start: 1px solid rgb(255 255 255 / 0.1);
}

.lk-footer__certs img {
  block-size: 30px;
  inline-size: auto;
  opacity: 0.6;
  filter: brightness(0) invert(1);
  transition: opacity var(--duration-base) var(--ease-soft);
}

.lk-footer__certs img:hover { opacity: 0.95; }

/* --- Legal strip ------------------------------------------------------------ */

.lk-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  padding-block: var(--space-6);
  border-block-start: 1px solid rgb(255 255 255 / 0.1);
  font-size: var(--text-sm);
  color: rgb(255 255 255 / 0.52);
}

.lk-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
}

.lk-footer__legal a {
  color: inherit;
  transition: color var(--duration-fast) var(--ease-soft);
}

.lk-footer__legal a:hover { color: #fff; }

/* --- Back to top ------------------------------------------------------------ */

.lk-to-top {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);
  z-index: var(--z-sticky);
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-full);
  background-color: var(--color-secondary);
  color: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity var(--duration-base) var(--ease-soft),
    transform var(--duration-base) var(--ease-out),
    visibility var(--duration-base),
    background-color var(--duration-fast) var(--ease-soft);
}

.lk-to-top[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lk-to-top:hover { background-color: var(--color-primary); }

.lk-to-top:focus-visible {
  outline: none;
  box-shadow: var(--shadow-lg), var(--focus-ring);
}