/* ================================================================
   VIDA WATER — COOKIE BANNER + FOOTER LEGAL LINKS
   ================================================================
   Loaded by EVERY page, including the blog pages, which use
   news.css rather than styles.css. Keeping these rules in their own
   file means the consent banner and the legal footer look and
   behave the same everywhere. Do not copy them back into
   styles.css or news.css.
   Pairs with assets/js/consent.js.
   ================================================================ */

/* =====================================================================
   COOKIE CONSENT BANNER
   ===================================================================== */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: var(--color-white);
  border-top: 3px solid var(--color-accent);
  box-shadow: 0 -6px 28px rgba(15, 29, 58, 0.16);
  transform: translateY(110%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.35s ease, visibility 0s linear 0.35s;
}
.cookie-banner.is-visible {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 0.35s ease, visibility 0s linear 0s;
}

.cookie-banner-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.4rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.cookie-banner-text { flex: 1 1 420px; }
.cookie-banner-title {
  font-weight: 700;
  color: var(--color-accent);
  font-size: 1.05rem;
  margin: 0 0 0.35rem;
}
.cookie-banner-text p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  font-weight: 300;
}
.cookie-banner-text a {
  color: var(--color-accent);
  text-decoration: underline;
  font-weight: 500;
}
.cookie-banner-text a:hover { color: var(--color-accent2); }

.cookie-banner-actions {
  display: flex;
  gap: 0.75rem;
  flex: 0 0 auto;
}
/* Accept and Reject are deliberately the same size and weight —
   the ICO requires equal prominence for both options. */
.cookie-btn {
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.75rem 1.9rem;
  border-radius: 999px;
  cursor: pointer;
  min-width: 130px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.cookie-btn-accept {
  background: var(--color-accent);
  color: var(--color-white);
  border: 1.5px solid var(--color-accent);
}
.cookie-btn-accept:hover {
  background: var(--color-accent2);
  border-color: var(--color-accent2);
}
.cookie-btn-reject {
  background: var(--color-white);
  color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
}
.cookie-btn-reject:hover {
  background: var(--color-surface);
}

@media (max-width: 700px) {
  .cookie-banner-inner { padding: 1.2rem 1.1rem; gap: 1.1rem; }
  .cookie-banner-actions { width: 100%; }
  .cookie-btn { flex: 1 1 0; min-width: 0; padding: 0.8rem 1rem; }
}

/* =====================================================================
   FOOTER LEGAL LINKS
   ===================================================================== */
.footer-legal {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 500;
  max-width: var(--max-width);
  margin: 2.5rem auto 0;
  border-top: 1px solid var(--color-border);
  padding-top: 1.5rem;
}
.footer-legal a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-legal a:hover { color: var(--color-accent2); text-decoration: underline; }
.footer-legal-sep { color: var(--color-border); margin: 0 0.65rem; }
/* the legal row now carries the divider, so the copyright line drops its own */
.footer-legal + .footer-copy {
  border-top: none;
  margin-top: 0.7rem;
  padding-top: 0;
}