/* ================================================
   SITE FOOTER — Eden Atelier
   ================================================
   Shared by every page. All of them link this file,
   so the footer is styled once.
   ================================================ */
.site-footer {
  /* The hero no longer sits sticky behind the page, so the old 96px white
     border that masked its bleed-through is gone — the footer is purple from
     its very top edge. */
  margin-top:   0;
  background-color: #787e9f;
  color: #d8d5e6;
  font-family: 'Jost', sans-serif;
  padding: 72px 60px 0;
}

.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
}

/* ---- Brand column ---- */
.footer-logo {
  font-family: 'Cormorant Garamond', serif;
  line-height: 1.05;
  margin-bottom: 18px;
}

/* Eden Atelier logo image in the footer brand column. Black line-art on a
   transparent background, rendered white to sit on the purple footer. */
.footer-brand-logo {
  display: block;
  height: 140px;
  width: auto;
  margin-left: -10px; /* optical: nudge the vase artwork to align with the text below */
  filter: brightness(0) invert(1);
}

.footer-tagline {
  font-size: 13px;
  line-height: 1.7;
  color: #c7c3da;
  max-width: 230px;
  margin-bottom: 22px;
}

.footer-social {
  display: flex;
  gap: 14px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #6a6790;
  border-radius: 50%;
  color: #d8d5e6;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}

.footer-social a:hover {
  border-color: #d98a5a;
  background-color: #d98a5a;
  color: #4b4870;
}

.footer-social svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

/* ---- Link columns ---- */
.footer-col-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #f5f1ec;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #6a6790;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.footer-links a {
  font-size: 13.5px;
  color: #c7c3da;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #d98a5a;
}

/* ---- Contact column ---- */
.footer-contact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-bottom: 26px;
}

.footer-contact-list li {
  font-size: 13.5px;
  color: #c7c3da;
}

.footer-contact-list a {
  color: #c7c3da;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact-list a:hover {
  color: #d98a5a;
}

.footer-newsletter-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #f5f1ec;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.footer-newsletter-form {
  display: flex;
  max-width: 240px;
}

.footer-newsletter-form input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid #6a6790;
  border-right: none;
  color: #f5f1ec;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  padding: 10px 14px;
  outline: none;
}

.footer-newsletter-form input::placeholder {
  color: #9d99b8;
}

.footer-newsletter-form input:focus {
  border-color: #d98a5a;
}

.footer-newsletter-form button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  border: none;
  background-color: #ffffff;
  color: #000000;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.footer-newsletter-form button:hover {
  background-color: #e8e8e8;
}

.footer-newsletter-form button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* ---- Bottom bar ---- */
.footer-bottom {
  border-top: 1px solid #605d84;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-copyright {
  font-size: 12px;
  color: #a9a5c4;
}

.footer-legal {
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-size: 12px;
  color: #a9a5c4;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: #d98a5a;
}

/* ================================================
   FOOTER — RESPONSIVE
   ================================================ */
@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
}

/* Phones: keep it two columns and tighten everything so the footer is a short
   block, not a long stacked scroll. */
@media (max-width: 560px) {
  .site-footer { padding: 44px 22px 0; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 26px 22px;
    padding-bottom: 36px;
  }

  /* Brand spans both columns, above the link lists */
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand-logo { height: 96px; }
  .footer-tagline { margin-bottom: 16px; }

  .footer-col-title { margin-bottom: 10px; padding-bottom: 10px; }
  .footer-links,
  .footer-contact-list { gap: 9px; }
  .footer-links a,
  .footer-contact-list li,
  .footer-contact-list a { font-size: 13px; }

  .footer-bottom { flex-direction: column; align-items: flex-start; padding: 18px 0; }
}

/* ================================================
   iOS — the home-indicator strip under the footer
   ================================================
   The white band below the footer on an iPhone is the bottom safe area. The
   page cannot paint into it at all without viewport-fit=cover on the viewport
   meta (now set on every page), and once it can, the footer still has to be
   told to reach into it — otherwise the copyright line sits under the home
   indicator. Padding it by the inset does both: the purple runs to the very
   bottom edge of the screen and the wording stays clear of the bar.

   Last in the file so it wins over the base padding and the 560px override,
   both of which set padding-bottom to 0 as part of the shorthand. */
.site-footer {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}