/* ==========================================================================
   GAK CONSTRUCTION — FOOTER  (Midnight Ocean & Rustic Ivory)
   File: public/css/footer.css

   Drop-in replacement: every class name is preserved. The original colour
   tokens stay available and are remapped, so any template override still
   resolves against the new palette.

   PALETTE
   Midnight Navy #071A3A · Ocean Blue #234B78 · Steel Blue #669BC5
   Ice Blue #B7D9EF · Denim #6593BC · Ivory #E5E0D7 · Ink #0A1526

   SECTIONS
   01. Tokens
   02. Footer shell & layered background
   03. Grid & brand column
   04. Link columns
   05. Contact column & quote button
   06. Bottom bar
   07. Motion
   08. Responsive
   09. Accessibility & print
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   ========================================================================== */
.site-footer {
  /* original names — remapped */
  --footer-green: #071A3A;
  --footer-dark: #04101F;
  --footer-gold: #669BC5;
  --footer-text: #C9D7E3;
  --footer-muted: #9FB2C4;

  /* new helpers */
  --footer-navy: #071A3A;
  --footer-navy-2: #04101F;
  --footer-navy-3: #102E5C;
  --footer-ocean: #234B78;
  --footer-steel: #669BC5;
  --footer-ice: #B7D9EF;
  --footer-ice-50: #DCEBF7;

  --footer-ease: cubic-bezier(.16, 1, .3, 1);
  --footer-sheen: linear-gradient(115deg, transparent 26%, rgba(255,255,255,.55) 46%, transparent 64%);

  --footer-grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");

  --footer-grid: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M64 0H0v64' fill='none' stroke='%23B7D9EF' stroke-opacity='.1' stroke-width='1'/%3E%3C/svg%3E");

  --footer-tex-denim: url("../img/textures/denim.jpg");

  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(56px, 6vw, 80px);
  color: var(--footer-text);
  background:
    radial-gradient(70% 90% at 8% 0%, rgba(35, 75, 120, .55), transparent 60%),
    linear-gradient(180deg, #061530 0%, var(--footer-navy-2) 100%);
  font-family: "DM Sans", "Inter", sans-serif;
}

.site-footer * { box-sizing: border-box; }


/* ==========================================================================
   02. SHELL & LAYERED BACKGROUND
   ========================================================================== */

/* denim twill + grain + blueprint grid, faded out at the edges */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: var(--footer-tex-denim), var(--footer-grain), var(--footer-grid);
  background-size: cover, 180px 180px, 64px 64px;
  background-position: center, 0 0, 0 0;
  opacity: .16;
  mix-blend-mode: soft-light;
  mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.45) 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.45) 70%, transparent);
}

/* hairline of ice light along the top edge */
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(183, 217, 239, .55), transparent);
  pointer-events: none;
}


/* ==========================================================================
   03. GRID & BRAND COLUMN
   ========================================================================== */
.footer-container {
  display: grid;
  grid-template-columns: 1.5fr .8fr 1.2fr 1fr;
  gap: clamp(30px, 3.4vw, 48px);
  width: min(100% - 64px, 1440px);
  margin-inline: auto;
  padding: clamp(52px, 6vw, 76px) 0 clamp(42px, 5vw, 60px);
}

/* brand */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 22px;
  color: #fff;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.045em;
  text-decoration: none;
  transition: filter .25s var(--footer-ease);
}
.footer-brand:hover { filter: brightness(1.08); }

.footer-brand span {
  color: var(--footer-ice);
  background: linear-gradient(120deg, #fff, var(--footer-ice) 60%, var(--footer-steel));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* if the template uses an <img> logo instead of text */
.footer-brand img { display: block; height: 44px; width: auto; }

.footer-description {
  max-width: 350px;
  margin: 0 0 24px;
  color: var(--footer-muted);
  font-size: .88rem;
  line-height: 1.9;
}

.footer-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 11px 18px;
  border: 1px solid rgba(183, 217, 239, .32);
  border-radius: 999px;
  background: rgba(183, 217, 239, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  color: var(--footer-ice);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  backdrop-filter: blur(10px);
  transition: background .25s var(--footer-ease), border-color .25s var(--footer-ease),
              color .25s var(--footer-ease), transform .25s var(--footer-ease);
}
.footer-contact-link:hover {
  color: #fff;
  background: rgba(183, 217, 239, .18);
  border-color: rgba(183, 217, 239, .6);
  transform: translateY(-2px);
}

.footer-contact-link span { transition: transform .3s var(--footer-ease); }
.footer-contact-link:hover span { transform: translate(3px, -3px); }


/* ==========================================================================
   04. LINK COLUMNS
   ========================================================================== */
.footer-column h3 {
  position: relative;
  margin: 5px 0 25px;
  color: #fff;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* gold rule → steel→ice gradient rule */
.footer-column h3::after {
  display: block;
  width: 38px;
  height: 2px;
  margin-top: 12px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--footer-ice), var(--footer-steel) 70%, rgba(102, 155, 197, 0));
  content: "";
}

.footer-column ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-column li a {
  display: inline-block;
  color: var(--footer-muted);
  font-size: .82rem;
  line-height: 1.7;
  text-decoration: none;
  transition: color .22s var(--footer-ease), padding-left .22s var(--footer-ease);
}
.footer-column li a:hover {
  padding-left: 5px;
  color: var(--footer-ice);
}


/* ==========================================================================
   05. CONTACT COLUMN & QUOTE BUTTON
   ========================================================================== */
.footer-contact-column p {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  color: var(--footer-muted);
  font-size: .82rem;
  line-height: 1.7;
}

.footer-contact-column p i,
.footer-contact-column p svg {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  margin-top: 1px;
  border-radius: 8px;
  background: rgba(183, 217, 239, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  color: var(--footer-ice);
  font-size: 11px;
}
.footer-contact-column p svg { padding: 5px; stroke: var(--footer-ice); }

.footer-contact-column p a { color: inherit; text-decoration: none; }
.footer-contact-column p a:hover { color: var(--footer-ice); text-decoration: underline; text-underline-offset: 3px; }

/* quote button — ice gradient with a lacquered edge */
.footer-quote-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  margin-top: 10px;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(180deg, #E5F2FB 0%, var(--footer-ice) 48%, var(--footer-steel) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    inset 0 -2px 0 rgba(7, 26, 58, .2),
    0 16px 30px -18px rgba(183, 217, 239, .8);
  color: var(--footer-navy);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .25s var(--footer-ease), transform .25s var(--footer-ease),
              box-shadow .25s var(--footer-ease), color .25s var(--footer-ease);
}

.footer-quote-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--footer-sheen);
  transform: translateX(-130%);
  transition: transform .85s var(--footer-ease);
}
.footer-quote-button > * { position: relative; }

.footer-quote-button:hover {
  background: linear-gradient(180deg, #F2F9FE 0%, #D6EAF8 48%, #7FADD4 100%);
  color: var(--footer-navy);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 22px 38px -20px rgba(183, 217, 239, 1);
}
.footer-quote-button:hover::after { transform: translateX(130%); }
.footer-quote-button:active { transform: translateY(1px); }


/* ==========================================================================
   06. BOTTOM BAR
   ========================================================================== */
.footer-bottom {
  position: relative;
  border-top: 1px solid rgba(183, 217, 239, .16);
  padding: 0;
  text-align: left;
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(100% - 64px, 1440px);
  min-height: 78px;
  margin-inline: auto;
}

.footer-bottom-inner p {
  margin: 0;
  color: var(--footer-muted);
  font-size: .74rem;
  line-height: 1.7;
}

.footer-back-top {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: 1px solid rgba(183, 217, 239, .28);
  border-radius: 999px;
  background: rgba(183, 217, 239, .06);
  color: var(--footer-ice);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition: background .25s var(--footer-ease), border-color .25s var(--footer-ease),
              color .25s var(--footer-ease), transform .25s var(--footer-ease);
}
.footer-back-top:hover {
  color: #fff;
  background: rgba(183, 217, 239, .16);
  border-color: rgba(183, 217, 239, .55);
  transform: translateY(-2px);
}
.footer-back-top::before {
  content: "";
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .25s var(--footer-ease);
}
.footer-back-top:hover::before { transform: translateY(-2px); }


/* ==========================================================================
   07. MOTION
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .footer-container > * {
    animation: footerRise .8s var(--footer-ease) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  .footer-container > *:nth-child(1) { --i: 0; }
  .footer-container > *:nth-child(2) { --i: 1; }
  .footer-container > *:nth-child(3) { --i: 2; }
  .footer-container > *:nth-child(4) { --i: 3; }
}

@keyframes footerRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   08. RESPONSIVE
   ========================================================================== */
@media (max-width: 1050px) {
  .footer-container {
    grid-template-columns: 1.2fr 1fr;
    gap: 42px;
  }
  .footer-description { max-width: 100%; }
}

@media (max-width: 600px) {
  .site-footer { margin-top: 48px; }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 34px;
    width: calc(100% - 36px);
    padding: 46px 0 38px;
  }

  .footer-column h3 { margin-bottom: 18px; }
  .footer-column ul { gap: 12px; }

  .footer-quote-button { width: 100%; justify-content: space-between; }

  .footer-bottom-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    width: calc(100% - 36px);
    min-height: 0;
    padding: 20px 0 26px;
  }
}

/* keep the footer clear of the fixed mobile bottom bar */
@media (max-width: 900px) {
  .site-footer { margin-bottom: 0; }
  .footer-bottom-inner { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
}


/* ==========================================================================
   09. ACCESSIBILITY & PRINT
   ========================================================================== */
.site-footer a:focus-visible {
  outline: 2px solid var(--footer-ice);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .site-footer *,
  .site-footer *::before,
  .site-footer *::after {
    transition-duration: .01ms !important;
    animation: none !important;
  }
}

@media (prefers-contrast: more) {
  .site-footer { background: #04101F; }
  .footer-description,
  .footer-column li a,
  .footer-contact-column p,
  .footer-bottom-inner p { color: #E4EDF5; }
  .footer-column li a:hover,
  .footer-contact-link,
  .footer-back-top { color: #fff; }
}

@media print {
  .site-footer {
    margin-top: 0;
    color: #000;
    background: #fff !important;
  }
  .site-footer::before,
  .site-footer::after { display: none !important; }
  .footer-brand,
  .footer-column h3 { color: #000; }
  .footer-description,
  .footer-column li a,
  .footer-contact-column p,
  .footer-bottom-inner p { color: #333; }
  .footer-quote-button,
  .footer-back-top,
  .footer-contact-link { border: 1px solid #ccc; background: none; color: #000; box-shadow: none; }
  .footer-container { padding: 8mm 0; }
}