/* --- Footer (full sitemap + quick contact) --- */
#footer-placeholder {
  min-height: 24rem;
  background-color: var(--bg-secondary);
}

@media (min-width: 768px) {
  #footer-placeholder {
    min-height: 20rem;
  }
}

.footer-telamorph {
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 3rem 0 1.5rem;
  font-size: 1.02rem;
  color: var(--text-primary);
}

/* Quick contact strip */
.footer-contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  background-color: rgba(24, 26, 32, 0.55);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  padding: 1.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.55);
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.footer-contact:hover {
  border-color: var(--border-light);
}

@media (min-width: 768px) {
  .footer-contact {
    grid-template-columns: 1.4fr 1fr;
    align-items: stretch;
    padding: 1.75rem;
    gap: 2rem;
  }
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  justify-content: center;
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background-color: var(--accent-subtle);
  color: var(--accent);
}

.footer-contact-icon svg {
  width: 20px;
  height: 20px;
}

.footer-contact-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.footer-contact-label {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

/* Glass "pill" links — hover lift + cursor streak (::before) come from
   streak.css, which also drives --streak-x via main.js */
.footer-contact-value {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  margin-top: 0.4rem;
  padding: 0.45rem 0.8rem;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.96rem;
  line-height: 1.35;
  text-decoration: none;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(24, 26, 32, 0.45);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  word-break: break-word;
  transition:
    color var(--transition),
    border-color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.footer-contact-value:hover,
.footer-contact-value:focus-visible {
  color: var(--accent);
  border-color: var(--border-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.5);
}

/* Two phone numbers sit side by side */
.footer-phones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.6rem;
}

.footer-contact-map {
  display: block;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  background-color: rgba(24, 26, 32, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  /* Enough vertical room for the Maps UI (header + tiles + footer strip)
     so the tiled area doesn't look clipped on narrow viewports */
  min-height: 280px;
  transition: border-color var(--transition);
}

@media (min-width: 768px) {
  .footer-contact-map {
    min-height: 220px;
  }
}

.footer-contact-map:hover {
  border-color: var(--accent);
}

.footer-contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  /* The classic Google "output=embed" map can't be themed via params and is
     cross-origin (no CSS reach-in), so we fake a dark theme: invert the light
     map and rotate the hue back so water/greens read roughly correctly. */
  /* filter: invert(0.92) hue-rotate(180deg) brightness(0.9) contrast(0.9)
    saturate(0.85); */
  transition: filter var(--transition);
  pointer-events: none;
}

/* .footer-contact-map:hover iframe {
  filter: invert(0.88) hue-rotate(180deg) brightness(1) contrast(0.95)
    saturate(0.95);
} */

/* Sitemap columns */
.footer-sitemap {
  margin-top: 0;
  justify-content: center;
}

.footer-heading {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1;
  margin-bottom: 0.85rem;
}

.footer-heading:not(.footer-brand) {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.footer-heading:not(.footer-brand)::before {
  content: "";
  width: 1.1rem;
  height: 2px;
  background: var(--accent);
  flex-shrink: 0;
}

.footer-brand {
  font-size: 1.32rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.footer-tagline {
  color: var(--text-primary);
  font-size: 0.96rem;
  line-height: 1.55;
}

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

.footer-links li {
  margin-bottom: 0.5rem;
}

/* Glass "pill" links — hover lift + cursor streak (::before) come from
   streak.css, which also drives --streak-x via main.js */
.footer-links a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.6rem 0.9rem;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.96rem;
  line-height: 1.35;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(24, 26, 32, 0.45);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition:
    color var(--transition),
    border-color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--accent);
  border-color: var(--border-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.5);
}

.footer-divider {
  border-color: var(--border-color);
  opacity: 1;
  margin: 2.5rem 0 1rem;
}

.footer-copy {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

@media (max-width: 767.98px) {
  .footer-sitemap {
    --bs-gutter-y: 1.65rem;
  }

  .footer-heading:not(.footer-brand) {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
  }
}

/* Products & Company sit side by side (col-6) below md. Once each column drops
   under ~200px wide the long labels ("Composite Development", and the
   "Products & Services" heading) wrap to two lines while their Company
   counterparts stay on one — so the pills, and the columns as a whole, ended up
   different heights. Pin the headings and every pill to a uniform two-line box
   and centre the text: all pills become the same size, the two link lists start
   and end at the same y, and both columns match in width and height while the
   text still fits the longest label. */
@media (max-width: 475px) {
  .footer-sitemap .footer-heading:not(.footer-brand) {
    min-height: 3.1rem;
    line-height: 1.25;
  }

  .footer-links a {
    justify-content: center;
    text-align: center;
    min-height: 3.9rem;
    padding-inline: 0.6rem;
    line-height: 1.25;
  }
}