/* footer.css — the site footer. Self-contained: it brings its own colours so it
   looks the same whether the page above it is the dark or the light theme. */

/* The footer is white like the rest of the site; a tinted band and a red
   hairline are all that separate it from the page above. */
.site-footer{flex:none;position:relative;z-index:2;background:var(--paper);color:var(--fg);
  border-top:1px solid var(--surface-bd);padding:clamp(52px,8vh,78px) 0 0}
.site-footer .wrap{max-width:var(--maxw)}

.footer-grid{display:grid;gap:clamp(28px,4vw,52px);
  grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr))}

.footer-brand img{width:56px;height:auto;margin-bottom:16px}
.footer-brand p{font-size:.94rem;line-height:1.7;opacity:.68;max-width:34ch;margin-top:10px}
.footer-brand .fb-name{font-family:var(--font-head);font-weight:800;font-size:1.15rem;letter-spacing:-.015em}

.site-footer h2{font-family:var(--font-head);font-weight:700;font-size:.74rem;letter-spacing:.24em;
  text-transform:uppercase;opacity:.55;margin-bottom:18px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:11px;font-size:.95rem}
.site-footer li a{opacity:.78;transition:opacity .3s var(--ease),color .3s var(--ease)}
.site-footer li a:hover{opacity:1;color:var(--red)}
.site-footer address{font-style:normal;font-size:.95rem;line-height:1.75;opacity:.78}

/* compact opening hours, repeated on every page for local SEO and for people in a hurry */
.footer-hours{list-style:none;font-variant-numeric:tabular-nums}
.footer-hours li{display:flex;justify-content:space-between;gap:14px;opacity:.78;margin-bottom:9px}
.footer-hours li.shut{opacity:.42}
.footer-hours li.today{opacity:1;color:var(--red-2);font-weight:600}
.footer-hours b{font-weight:400}

.footer-social{display:flex;gap:10px;margin-top:18px}
.footer-social a{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--surface-bd);
  transition:background .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.footer-social a:hover{background:var(--red);color:#fff;transform:translateY(-3px)}
.footer-social svg{width:19px;height:19px}

.footer-base{margin-top:clamp(38px,6vh,58px);padding:22px 0 26px;
  border-top:1px solid var(--surface-bd);display:flex;flex-wrap:wrap;gap:10px 26px;
  align-items:center;justify-content:space-between;font-size:.84rem;opacity:.5}

@media(max-width:900px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:520px){
  .footer-grid{grid-template-columns:1fr}
  .footer-base{justify-content:flex-start}
}

@media(max-width:520px){
  /* On a narrow screen the footer columns stack, so they read better centred. */
  .site-footer{text-align:center}
  .footer-brand p{margin-inline:auto}
  .footer-social{justify-content:center}
  .footer-hours li{max-width:260px;margin-inline:auto}
  .footer-base{justify-content:center;text-align:center}
}