/* ============================================================================
   footer.css — Taamsi Technology
   ============================================================================
   A quiet conclusion to the page rather than a second hero.

   REMOVED from the previous footer:
     · the decorative wave
     · the animated particle layer
     · the grid/map placeholder box
     · the newsletter block — js/site.js carried a
       "TODO: send `input.value` to a real subscription endpoint" and told
       visitors signups were "launching soon", so the UI was promising
       something the site cannot deliver
     · four spread columns and the card-like borders around them

   MOBILE-FIRST. Every rule below is the small-screen rule; the media
   queries only add columns as width becomes available. No fixed heights
   anywhere — height comes from content and padding.
   ========================================================================= */

.footer-premium {
  position: relative;
  background: #063A78;
  color: #FFFFFF;
  padding: 2.25rem 0 0;
}

.footer-premium .container { position: relative; z-index: 1; }


/* ----------------------------------------------------------------------------
   TOP
   ------------------------------------------------------------------------- */
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.65rem;
  padding-bottom: 1.65rem;
}


/* ----------------------------------------------------------------------------
   BRAND
   ------------------------------------------------------------------------- */
.footer-brand-link {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  margin-bottom: .8rem;
}

/* Flat white plate. The artwork is dark red and navy on transparency —
   1.77:1 against this background, 9.00:1 on white — so the plate is a
   legibility requirement, not decoration. */
.footer-premium .brand-logo-footer {
  width: 44px;
  height: 44px;
  flex: none;
  background: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .16),
    0 6px 18px -10px rgba(0, 14, 34, .85);
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
}

.footer-premium .brand-logo-footer .brand-logo-img {
  height: 31px;
  width: auto;
  max-width: 100%;
}

.footer-brand-link:hover .brand-logo-footer,
.footer-brand-link:focus-visible .brand-logo-footer { transform: scale(1.02); }

.footer-brand-text { display: block; }

.brand-text-footer {
  display: block;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: #FFFFFF;
}

.brand-tagline-footer {
  display: block;
  margin-top: .12rem;
  font-size: .78rem;
  font-weight: 600;
  color: #A9BBD4;
}

.footer-blurb {
  margin: 0 0 .85rem;
  font-size: .85rem;
  line-height: 1.6;
  color: #A9BBD4;
  max-width: 34ch;
}


/* ----------------------------------------------------------------------------
   SOCIAL — no boxes. 44px touch target, small visual mark.
   ------------------------------------------------------------------------- */
.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem;
  list-style: none;
  margin: 0 0 0 -.7rem;   /* pulls the row into optical line with the text */
  padding: 0;
}

.footer-social a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #A9BBD4;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 8px;
  transition:
    color 240ms cubic-bezier(.22, 1, .36, 1),
    transform 240ms cubic-bezier(.22, 1, .36, 1),
    text-shadow 240ms cubic-bezier(.22, 1, .36, 1);
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: #FFFFFF;
  transform: translateY(-2px);
  text-shadow: 0 0 14px rgba(167, 21, 1, .55);   /* the accent, used once */
}

.footer-social a:focus-visible { outline: 2px solid rgba(255, 255, 255, .6); outline-offset: -6px; }


/* ----------------------------------------------------------------------------
   COLUMNS
   ------------------------------------------------------------------------- */
.footer-heading {
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #FFFFFF;
  margin: 0 0 .6rem;
}

.footer-links { list-style: none; margin: 0; padding: 0; }

.footer-links a {
  display: inline-block;
  padding: .32rem 0;      /* tap area without stretching the footer */
  font-size: .875rem;
  color: #A9BBD4;
  text-decoration: none;
  transition: color 240ms cubic-bezier(.22, 1, .36, 1);
}

.footer-links a:hover,
.footer-links a:focus-visible { color: #FFFFFF; }

.footer-address {
  margin: 0 0 .6rem;
  font-size: .875rem;
  font-style: normal;
  line-height: 1.65;
  color: #A9BBD4;
  overflow-wrap: anywhere;   /* never force a horizontal scrollbar */
}

.footer-contact { list-style: none; margin: 0 0 .7rem; padding: 0; }

.footer-contact li {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .5rem;
  padding: .16rem 0;
  font-size: .875rem;
  line-height: 1.6;
}

.footer-contact span { color: #9FB1CA; flex: none; }
.footer-contact span::after { content: " :"; }

.footer-contact a {
  color: #A9BBD4;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 240ms cubic-bezier(.22, 1, .36, 1);
}

.footer-contact a:hover,
.footer-contact a:focus-visible { color: #FFFFFF; }

.footer-maplink {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem 0;
  font-size: .84rem;
  font-weight: 700;
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  transition: border-color 240ms cubic-bezier(.22, 1, .36, 1);
}

.footer-maplink i { font-size: .8rem; }
.footer-maplink:hover { color: #FFFFFF; border-color: #A71501; }


/* ----------------------------------------------------------------------------
   BOTTOM BAR
   ------------------------------------------------------------------------- */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .95rem 0 4.25rem;   /* bottom clears the fixed back-to-top button */
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.footer-copy { margin: 0; font-size: .8rem; color: #9FB1CA; }

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-legal-links a {
  font-size: .8rem;
  color: #9FB1CA;
  text-decoration: none;
  transition: color 240ms cubic-bezier(.22, 1, .36, 1);
}

.footer-legal-links a:hover,
.footer-legal-links a:focus-visible { color: #FFFFFF; }


/* ----------------------------------------------------------------------------
   340px — Quick Links and Contact share a row
   ----------------------------------------------------------------------------
   Stacking these two short lists cost 110px of height at 360-375px. Side by
   side from 340px covers every common phone width; the address simply wraps
   to more lines in the narrower column, which is cheaper than an extra row.
   ------------------------------------------------------------------------- */
@media (min-width: 340px) {
  .footer-top {
    /* Not 1fr 1fr: Quick Links is three short words while Contact carries an
       address and an email. An even split forced "taamsi.mail@gmail.com" onto
       a second line and the address onto four. */
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    column-gap: 1rem;
  }

  .footer-brand { grid-column: 1 / -1; }
}

/* The <br> tags shape the address on wide screens; below 576px they are
   neutralised so it reflows to the column instead of overflowing it. */
@media (max-width: 575.98px) {
  .footer-address br { display: none; }
}


/* ----------------------------------------------------------------------------
   768px — three columns
   ------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .footer-premium { padding-top: 3.25rem; }

  .footer-top {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, .85fr) minmax(0, 1.25fr);
    column-gap: 2.5rem;
    row-gap: 0;
    padding-bottom: 2.25rem;
  }

  .footer-brand { grid-column: auto; }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 0 1.4rem;
  }

  /* From here the bottom bar is one row, so the button needs horizontal
     clearance rather than vertical: at 1440px the 1320px container leaves
     60px margins while the button reaches 74px in, intruding ~14px over the
     last legal link. */
  .footer-legal-links { gap: 1.5rem; padding-right: 2.5rem; }
}


/* ----------------------------------------------------------------------------
   992px
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .footer-premium { padding-top: 3.75rem; }

  .footer-top {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, .8fr) minmax(0, 1.2fr);
    column-gap: 3.5rem;
    padding-bottom: 2.5rem;
  }
}


/* ----------------------------------------------------------------------------
   BACK TO TOP — functional, reduced so it does not compete
   ------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: #063A78;
  color: #FFFFFF;
  display: grid;
  place-items: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 300ms cubic-bezier(.22, 1, .36, 1),
    visibility 300ms cubic-bezier(.22, 1, .36, 1),
    transform 300ms cubic-bezier(.22, 1, .36, 1),
    background 300ms cubic-bezier(.22, 1, .36, 1);
  z-index: 900;
  box-shadow: 0 8px 22px -12px rgba(0, 20, 46, .8);
}

/* js/site.js toggles .visible — the class name has to match. */
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #003A82; }
.back-to-top:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

.back-to-top i { font-size: .95rem; position: relative; z-index: 1; }

.back-to-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.back-to-top .bg { stroke: rgba(255, 255, 255, .16); }
.back-to-top .progress { stroke: #FFFFFF; }

@media (min-width: 768px) {
  .back-to-top { bottom: 28px; right: 28px; width: 46px; height: 46px; }
}


/* ----------------------------------------------------------------------------
   MOTION SAFETY
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .footer-social a,
  .footer-social a:hover,
  .footer-premium .brand-logo-footer,
  .footer-brand-link:hover .brand-logo-footer,
  .back-to-top,
  .back-to-top.visible {
    transition: none;
    transform: none;
  }
}