/* =========================================================
   Footer: two framed panels
   1. Olive newsletter panel with the mailbox animation
   2. Espresso footer with the croissant + coffee pattern
   Words come from settings, the Location record, and menus.
   Art colors come from theme.json (custom > art).
   ========================================================= */

/* ---------- 1. Newsletter ---------- */
.rr-newsletter {
  --mb-w: clamp(150px, 15vw, 230px);
  position: relative;
  overflow: hidden;
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
  text-align: center;
}
.rr-newsletter__content { position: relative; z-index: 1; }
/* Terracotta fails contrast on Olive, so labels use Gold Soft here */
.rr-newsletter .rr-newsletter__label { color: var(--gold-soft); margin-bottom: 10px; }
.rr-newsletter__title { color: var(--cream); margin: 0; font-size: clamp(32px, 3.4vw, 44px); }
.rr-newsletter__text { color: color-mix(in srgb, var(--cream) 82%, transparent); margin: 10px auto 18px; max-width: 420px; }
.rr-newsletter .rr-ghl-form iframe { width: 100%; border-radius: var(--radius-sm); }

/* Mailbox: planted in the bottom right corner, post runs off the panel edge.
   Layers, back to front: letter (z 2), body fill (z 3), line art (z 4). */
/* Stays inside the 1200px content width on wide screens, and at least
   one gutter in from the panel edge on smaller ones. */
.rr-mailbox {
  position: absolute;
  right: max(var(--wp--preset--spacing--40), calc((100% - var(--wp--style--global--content-size, 1200px)) / 2));
  bottom: -4px;
  width: var(--mb-w);
  aspect-ratio: 1075.03 / 1242.57;
  pointer-events: none;
}
.rr-mailbox > span,
.rr-letter > span {
  position: absolute;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
.rr-mailbox__fill {
  inset: 0;
  z-index: 3;
  background: var(--olive);
  -webkit-mask-image: url("../images/newsletter/mailbox-fill.svg");
          mask-image: url("../images/newsletter/mailbox-fill.svg");
}
.rr-mailbox__open {
  inset: 0;
  z-index: 4;
  background: var(--art-olive-line);
  -webkit-mask-image: url("../images/newsletter/mailbox-open.svg");
          mask-image: url("../images/newsletter/mailbox-open.svg");
  transition: opacity 0.35s ease;
}
.rr-mailbox__closed {
  left: 20.47%;
  top: -0.24%;
  width: 79.61%;
  aspect-ratio: 855.87 / 1215.5;
  z-index: 4;
  opacity: 0;
  background: var(--art-olive-line);
  -webkit-mask-image: url("../images/newsletter/mailbox-closed.svg");
          mask-image: url("../images/newsletter/mailbox-closed.svg");
  transition: opacity 0.35s ease;
}
.rr-newsletter.is-delivered .rr-mailbox__open { opacity: 0; }
.rr-newsletter.is-delivered .rr-mailbox__closed { opacity: 1; }

/* Letter: full size the whole way. Starts off the left edge; JS moves it. */
.rr-letter {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: calc(var(--mb-w) * 0.326);
  aspect-ratio: 419.02 / 278.43;
  transform: translate(-200px, 80px);
  pointer-events: none;
}
.rr-letter > span { inset: 0; }
.rr-letter__body {
  background: var(--olive);
  -webkit-mask-image: url("../images/newsletter/letter-body.svg");
          mask-image: url("../images/newsletter/letter-body.svg");
}
.rr-letter__lines {
  background: var(--art-olive-line);
  -webkit-mask-image: url("../images/newsletter/letter-lines.svg");
          mask-image: url("../images/newsletter/letter-lines.svg");
}

/* Phones: no flight path across the form, just a small closed mailbox */
@media (max-width: 700px) {
  .rr-newsletter { --mb-w: 110px; padding-bottom: calc(var(--wp--preset--spacing--60) + 40px); }
  .rr-letter { display: none; }
  .rr-mailbox__open { opacity: 0; }
  .rr-mailbox__closed { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rr-letter { display: none; }
  .rr-mailbox__open { opacity: 0; }
  .rr-mailbox__closed { opacity: 1; }
}

/* ---------- 2. Footer ---------- */
/* Pattern strength: raise or lower this one number (0 = off, 1 = full). */
.site-footer { --footer-pattern-opacity: 0.12; }
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  color: var(--cream);
}
/* Croissant + coffee pattern overlay */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--art-pattern);
  opacity: var(--footer-pattern-opacity);
  -webkit-mask-image: url("../images/patterns/croissant-coffee.svg");
          mask-image: url("../images/patterns/croissant-coffee.svg");
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-size: 1100px auto;
          mask-size: 1100px auto;
}
.site-footer a { color: var(--cream); text-decoration: none; transition: color var(--ease); }
.site-footer a:hover { color: var(--gold-soft); }
.site-footer p { margin: 0 0 8px; }

/* Three columns: brand (logo + tagline), Visit, Follow along.
   Navigation lives in the header's menu, so the footer doesn't repeat it. */
.site-footer__cols {
  gap: var(--wp--preset--spacing--40);
  padding-bottom: var(--wp--preset--spacing--40);
  margin: 0;
}
.site-footer__brand .site-header__logo--cream img { width: 190px; }
.site-footer .site-footer__tagline {
  margin: 14px 0 0;
  color: var(--cream);
  font-family: var(--font-drummond);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
/* Phones and tablets: one centered column, socials right under the logo */
@media (max-width: 781px) {
  .site-footer .site-footer__cols.wp-block-columns { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .site-footer .site-footer__brand { order: 1; }
  .site-footer .site-footer__follow { order: 2; }
  .site-footer .site-footer__visit { order: 3; }
  .site-footer__brand .site-header__logo--cream { display: flex; justify-content: center; }
  .site-footer .rr-social { justify-content: center; }
  .site-footer .site-footer__bottom { flex-direction: column; justify-content: center; text-align: center; }
  .site-footer .rr-policy-links { justify-content: center; }
}
.site-footer__label {
  margin: 0 0 14px;
  color: var(--gold);
  font-family: var(--font-archivo-narrow);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
}
.site-footer .site-footer__phone a, .site-footer .rr-directions { text-decoration: underline; text-underline-offset: 3px; }

.site-footer__bottom {
  gap: 12px 24px;
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid color-mix(in srgb, var(--cream) 14%, transparent);
  font-size: var(--wp--preset--font-size--label);
  color: var(--cream);
}
.site-footer .rr-copyright { margin: 0; }
.rr-policy-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* Social: large round icons, cream; fill in on hover */
.rr-social { display: flex; flex-wrap: wrap; gap: 12px; }
.site-footer a.rr-social__link {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--cream) 45%, transparent);
  border-radius: 50%;
  color: var(--cream);
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.rr-social__link svg { width: 26px; height: 26px; fill: currentColor; }
.site-footer a.rr-social__link:hover { background: var(--cream); border-color: var(--cream); color: var(--espresso); }
.site-footer__phone:empty { display: none; }