/* Reform Pilates LA — site footer
   Add after style.css (or append to the end of style.css).
   Colors match the tokens already used in style.css. */

.rp-footer {
  --rp-ink: #1a1612;
  --rp-ink-75: rgba(26, 22, 18, 0.75);
  --rp-ink-55: rgba(26, 22, 18, 0.55);
  --rp-ink-45: rgba(26, 22, 18, 0.45);
  --rp-line: rgba(26, 22, 18, 0.08);
  --rp-outline: rgba(26, 22, 18, 0.15);
  --rp-green: #99ad7a;

  /* reset the generic `footer { display: flex; ... }` rules from style.css */
  display: block;
  background: var(--bg, #f3f0eb);
  border-top: 1px solid var(--rp-line);
  color: var(--rp-ink);
  font-family: var(--ff, "Montserrat Alternates", sans-serif);
  font-weight: 300;
  padding: 56px 50px 26px;
}
.rp-footer a { color: inherit; text-decoration: none; }
.rp-footer__inner { max-width: 1200px; margin: 0 auto; }

/* top row: logo + contact */
.rp-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
  padding-bottom: 36px;
}
.rp-footer__logo { display: inline-block; }
.rp-footer .rp-footer__logo svg { height: 35px; width: auto; display: block; }
.rp-footer__tagline {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--rp-ink-55);
  max-width: 320px;
}

.rp-footer__contact { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.rp-footer__label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rp-ink-45);
}
.rp-footer__phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 400;
  color: var(--rp-ink);
  transition: color 0.2s;
}
.rp-footer__phone:hover { color: var(--rp-green); }
.rp-footer__phone-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--rp-green);
  color: #fff;
  display: grid;
  place-items: center;
}
.rp-footer__btn {
  display: inline-block;
  padding: 11px 22px;
  border: 1px solid var(--rp-outline);
  border-radius: var(--r, 16px);
  background: rgba(26, 22, 18, 0.04);
  color: var(--rp-ink-75);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.2s;
}
.rp-footer__btn:hover { background: var(--rp-green); border-color: var(--rp-green); color: #fff; }

/* studio cards */
.rp-footer__studios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rp-footer__studio { background: var(--card, #fff); border-radius: var(--r, 16px); padding: 24px; }
.rp-footer__studio h3 { margin: 0 0 10px; font-size: 17px; font-weight: 400; color: var(--rp-ink); }
.rp-footer__studio address { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--rp-ink-55); }
.rp-footer__studio address a:hover { color: var(--rp-green); }
.rp-footer__hours {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rp-line);
  font-size: 13px;
  line-height: 1.8;
  color: var(--rp-ink-55);
}
.rp-footer__hours b { display: inline-block; min-width: 80px; font-weight: 400; color: var(--rp-ink); }

/* bottom row: copyright + socials */
.rp-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--rp-line);
  font-size: 12px;
  color: var(--rp-ink-45);
}
.rp-footer__bottom p { margin: 0; }
.rp-footer__socials { display: flex; gap: 10px; }
.rp-footer__social {
  width: 38px;
  height: 38px;
  border: 1px solid var(--rp-outline);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--rp-ink-75);
  transition: all 0.2s;
}
.rp-footer__social:hover { background: var(--rp-green); border-color: var(--rp-green); color: #fff; }

/* override `footer a svg { height: 35px }` from style.css for the small icons */
.rp-footer .rp-footer__phone-icon svg { width: 20px; height: 20px; }
.rp-footer .rp-footer__social svg { width: 16px; height: 16px; }

@media (max-width: 1024px) {
  .rp-footer { padding: 48px 36px 24px; }
}
@media (max-width: 768px) {
  .rp-footer { padding: 40px 24px 20px; }
  .rp-footer .rp-footer__logo svg { height: 28px; }
  .rp-footer__top { flex-direction: column; align-items: flex-start; }
  .rp-footer__contact { align-items: flex-start; width: 100%; }
  .rp-footer__phone { font-size: 23px; }
  .rp-footer__btn { display: block; width: 100%; text-align: center; padding: 12px 10px; }
  .rp-footer__studios { grid-template-columns: 1fr; gap: 12px; }
  .rp-footer__bottom { flex-direction: column-reverse; align-items: flex-start; }
}
@media (max-width: 480px) {
  .rp-footer { padding: 32px 16px 16px; }
}