/* footer — the frame at the bottom of every page (footer.twig). Loaded by the
   layout itself, like the header's. Colours only through var(--*).

   One markup for every look; the look is a class on <body> (footer_layout-*,
   footer-minimal), so the Design drawer switches it in place. The languages'
   look here (lang_footer-*) is styled with the switcher, in header.css. */

.ftr { margin-top: 3rem; background: var(--footer-bg); border-top: 1px solid var(--line); color: var(--body-text, var(--ink)); font-size: .95rem; }
.ftr a { color: var(--ink); text-decoration: none; }
.ftr a:hover { color: var(--mark, var(--primary)); }
.ftr-main { padding-block: 3.25rem 2.5rem; display: grid; gap: 2.5rem 3rem; }
.ftr-title { margin: 0 0 .9rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-family: var(--font-body); }

.ftr .brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); text-decoration: none; }
.ftr .brand__mark { display: inline-flex; flex: none; }
.ftr .brand__mark svg { width: 30px; height: 30px; display: block; }
.ftr .brand__name { font: 650 1.15rem/1.15 var(--font-display); max-width: 20rem; }
.ftr .brand:focus-visible { outline: 2px solid var(--mark, var(--primary)); outline-offset: 4px; border-radius: 6px; }
.ftr-about { margin: .9rem 0 0; max-width: 40ch; line-height: 1.6; font-size: .92rem; }

.ftr-menu ul { list-style: none; margin: 0; padding: 0; }
.ftr-menu li { margin: .15rem 0; break-inside: avoid; }
.ftr-menu a { display: inline-block; padding: .2rem 0; color: var(--body-text, var(--ink)); }
.ftr-menu a:hover { color: var(--ink); }
.ftr-menu__group { display: inline-block; margin-top: .5rem; font-weight: 600; color: var(--ink) !important; }
.ftr-menu__group + ul a { padding-left: .75rem; font-size: .9rem; }
.ftr-menu.is-two .ftr-menu__list { columns: 2; column-gap: 1.5rem; }

.ftr-contacts { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.ftr-tel { font: 700 1.15rem/1.3 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ftr .open-status { font-size: .88rem; margin-top: .35rem; }
.ftr-hours { margin: .35rem 0 0; display: grid; grid-template-columns: auto auto; justify-content: start; gap: .15rem 1.25rem; font-size: .88rem; font-variant-numeric: tabular-nums; }
.ftr-hours dt { color: var(--body-text, var(--ink)); }
.ftr-hours dd { margin: 0; color: var(--ink); }
.ftr-hours dd.is-off { color: var(--muted); }

.ftr-soc { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.1rem 0 0; }
.ftr-soc a, .ftr-soc span { display: inline-flex; align-items: center; height: 2.1rem; padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--line); font-size: .82rem; font-weight: 600; color: var(--ink); background: var(--bg); }
.ftr-soc a:hover { border-color: var(--mark, var(--primary)); color: var(--mark, var(--primary)); }

.ftr-bottom { border-top: 1px solid var(--line); }
.ftr-bottom__in { min-height: 3.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .84rem; color: var(--muted); }

/* columns (the default): brand · menu · contacts, 5 / 3 / 4 */
.ftr-main { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
.ftr-main.ftr-n2 { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.ftr-main.ftr-n1 { grid-template-columns: minmax(0, 1fr); }
.ftr-main.has-wide-menu { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); }

/* brand-split: the signature large on the left, the links on the right */
body.footer_layout-brand-split .ftr-main { grid-template-columns: minmax(0, 6fr) minmax(0, 3.5fr) minmax(0, 2.5fr); }
body.footer_layout-brand-split .ftr-main.ftr-n2 { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
body.footer_layout-brand-split .ftr-main.ftr-n1 { grid-template-columns: minmax(0, 1fr); }
body.footer_layout-brand-split .ftr-brand .brand { flex-direction: column; align-items: flex-start; gap: 1rem; }
body.footer_layout-brand-split .ftr-brand .brand__mark svg { width: 44px; height: 44px; }
body.footer_layout-brand-split .ftr-brand .brand__name { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.05; letter-spacing: -.02em; max-width: 14ch; }

/* centered and bar: rows, not columns — the brand's parts stand loose among the rest */
body:is(.footer_layout-centered, .footer_layout-bar) .ftr-brand { display: contents; }
body:is(.footer_layout-centered, .footer_layout-bar) .ftr-title { display: none; }
body:is(.footer_layout-centered, .footer_layout-bar) .ftr-menu__list { display: flex; flex-wrap: wrap; columns: auto; }
body:is(.footer_layout-centered, .footer_layout-bar) .ftr-menu__list ul { display: none; } /* a group is its name */
body:is(.footer_layout-centered, .footer_layout-bar) .ftr-menu li { margin: 0; }
body:is(.footer_layout-centered, .footer_layout-bar) .ftr-menu__group { margin: 0; font-weight: 400; color: var(--body-text, var(--ink)) !important; }
body:is(.footer_layout-centered, .footer_layout-bar) .ftr-hours { display: none; }

/* centered: everything on one axis — brand, about, the menu, the contacts in a row, open now, socials */
body.footer_layout-centered .ftr-main { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.75rem; }
body.footer_layout-centered .ftr-main > .ftr-brand > .brand { order: 1; flex-direction: column; gap: .75rem; }
/* on its own axis the signature can be large: it is what the column stands under */
body.footer_layout-centered .ftr-brand .brand__mark svg { width: 44px; height: 44px; }
body.footer_layout-centered .ftr-brand .brand__name { font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.1; letter-spacing: -.01em; max-width: 24ch; }
body.footer_layout-centered .ftr-about { order: 2; margin: 0 auto; max-width: 58ch; } /* not narrower than the name above it */
body.footer_layout-centered .ftr-menu { order: 3; }
body.footer_layout-centered .ftr-contacts { order: 4; }
body.footer_layout-centered .ftr-soc { order: 5; justify-content: center; margin: 0; }
body.footer_layout-centered .ftr-menu__list { justify-content: center; gap: .35rem 1.4rem; }
body.footer_layout-centered .ftr-contacts { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem 1.4rem; }
body.footer_layout-centered .ftr-contacts .ftr-tel { font: 600 1rem/1.3 var(--font-body); }
body.footer_layout-centered .ftr-contacts .open-status { flex-basis: 100%; justify-content: center; }
body.footer_layout-centered .ftr-bottom__in { justify-content: center; flex-direction: column; gap: .4rem; padding-block: 1rem; text-align: center; }

/* bar: one line — brand · the menu · the phone · socials */
body.footer_layout-bar .ftr-main { padding-block: 1.4rem; display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; }
body.footer_layout-bar .ftr-about,
body.footer_layout-bar .ftr-contacts > :not(.ftr-tel) { display: none; }
body.footer_layout-bar .brand__name { font-size: 1rem; max-width: 14rem; }
body.footer_layout-bar .ftr-menu { flex: 1; min-width: 16rem; }
body.footer_layout-bar .ftr-menu__list { gap: .25rem 1.1rem; }
body.footer_layout-bar .ftr-menu__list a { font-size: .9rem; }
body.footer_layout-bar .ftr-soc { margin: 0; }
body.footer_layout-bar .ftr-tel { font-size: 1rem; }

/* minimal: the bottom line alone */
body.footer-minimal .ftr-main { display: none; }

@media (max-width: 899px) {
  .ftr-main, .ftr-main.has-wide-menu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ftr-main > .ftr-brand { grid-column: 1 / -1; }
  .ftr-main.ftr-n1 { grid-template-columns: minmax(0, 1fr); }
  body.footer_layout-brand-split .ftr-main, body.footer_layout-brand-split .ftr-main.ftr-n2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 559px) {
  .ftr-main, .ftr-main.has-wide-menu, .ftr-main.ftr-n2,
  body.footer_layout-brand-split .ftr-main, body.footer_layout-brand-split .ftr-main.ftr-n2 { grid-template-columns: minmax(0, 1fr); }
  body.footer_layout-bar .ftr-main { flex-direction: column; align-items: flex-start; }
  .ftr-bottom__in { flex-direction: column; align-items: flex-start; justify-content: center; padding-block: 1rem; gap: .5rem; }
  body.footer_layout-centered .ftr-bottom__in { align-items: center; }
}

/* bar: the parts in the line's order — brand · menu · phone · socials */
body.footer_layout-bar .ftr-main > .ftr-brand > .brand { order: 1; }
body.footer_layout-bar .ftr-menu { order: 2; }
body.footer_layout-bar .ftr-contacts { order: 3; }
body.footer_layout-bar .ftr-soc { order: 4; }