/*
 * Masthead, navigation, footer, breadcrumbs.
 *
 * One utility line above a white bar: the name on the left, the catalogue in the middle, the one
 * call to action on the right. The panels are toggled by the behaviour runtime through the
 * `hidden` attribute, so the styling below describes the open panel only.
 */

.sf-topbar { background: var(--surface); border-bottom: var(--rule); font-size: var(--step--2); color: var(--muted); }
.sf-topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  min-height: 2.35rem;
  padding-block: .35rem;
}
.sf-topbar__link { color: var(--muted); text-decoration: none; }
.sf-topbar__link:hover { color: var(--accent); }
.sf-topbar__note { margin: 0; letter-spacing: .06em; text-align: center; flex: 1 1 auto; }
.sf-topbar__aside { display: flex; align-items: center; gap: var(--space-3); }

.sf-header { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: var(--rule); }
.sf-header__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-2);
}
.sf-brand { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.sf-brand__name { font-size: var(--step-2); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; }
.sf-brand__sub { font-size: var(--step--2); color: var(--muted); letter-spacing: .03em; margin-top: .2rem; }
.sf-header__aside { display: flex; align-items: center; gap: var(--space-3); justify-self: end; }
.sf-header__aside .sf-btn { white-space: nowrap; padding: .62em 1.05em; }
.sf-header__contact { font-size: var(--step--1); color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.sf-header__contact:hover { color: var(--accent); }

.sf-lang { display: inline-flex; gap: .35rem; font-size: var(--step--2); letter-spacing: .06em; }
.sf-lang a { color: var(--muted); text-decoration: none; padding: .1rem .15rem; }
.sf-lang a.is-current { color: var(--ink); border-bottom: 1px solid var(--ink); }

.sf-nav { min-width: 0; }
.sf-nav__list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sf-nav__item { position: relative; margin: 0; }
.sf-nav__toggle {
  display: inline-block;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: .55rem .7rem;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.sf-nav__toggle:hover, .sf-nav__toggle[aria-expanded="true"] { color: var(--accent); border-bottom-color: var(--accent); }

.sf-nav__panel {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  z-index: 50;
  min-width: 20rem;
  max-width: 26rem;
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--paper);
  border: var(--rule);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.sf-nav__label { font-size: var(--step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--space-2); }
.sf-nav__sub { list-style: none; margin: 0; padding: 0; }
.sf-nav__sub li { margin: 0; border-bottom: var(--rule); }
.sf-nav__sub li:last-child { border-bottom: 0; }
.sf-nav__sub a { display: block; padding: .45rem 0; color: var(--ink); text-decoration: none; font-size: var(--step--1); }
.sf-nav__sub a:hover { color: var(--accent); }
.sf-nav__hint { display: block; font-size: var(--step--2); color: var(--muted); }
.sf-nav__all { display: inline-block; margin-top: var(--space-3); font-size: var(--step--1); font-weight: 500; }

@media (max-width: 1060px) {
  .sf-header__bar { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); }
  .sf-nav { grid-column: 1 / -1; order: 3; }
  .sf-nav__list { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .sf-nav__item { flex: 0 0 auto; }
  .sf-nav__toggle { padding-inline: .55rem; }
  .sf-nav__toggle:first-child { padding-left: 0; }
  .sf-nav__panel { position: fixed; left: var(--space-3); right: var(--space-3); top: auto; min-width: 0; max-width: none; }
}

@media (max-width: 640px) {
  .sf-topbar__note { display: none; }
  .sf-brand__sub { display: none; }
  .sf-header__aside .sf-btn { padding: .55em .8em; font-size: var(--step--2); }
}

/* ---------- breadcrumbs ---------- */
.sf-crumbs { padding-block: var(--space-3); border-bottom: var(--rule); }
.sf-crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; font-size: var(--step--2); letter-spacing: .03em; color: var(--muted); }
.sf-crumbs li { display: inline-flex; gap: .4rem; margin: 0; }
.sf-crumbs li + li::before { content: "/"; color: var(--line-strong); }
.sf-crumbs a { color: var(--muted); text-decoration: none; }
.sf-crumbs a:hover { color: var(--accent); }
.sf-crumbs [aria-current="page"] { color: var(--ink); }

/* ---------- footer ---------- */
.sf-footer { border-top: var(--rule); background: var(--surface); }
.sf-footer__inner {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 2.6fr);
  gap: var(--space-5) var(--space-6);
  padding-block: var(--space-6) var(--space-5);
}
.sf-footer__brand { display: grid; gap: var(--space-3); align-content: start; }
.sf-footer__contact { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); color: var(--ink-soft); display: grid; gap: .25rem; max-width: 30ch; }
.sf-footer__contact li { margin: 0; }
.sf-footer__contact a { color: var(--ink-soft); text-decoration: none; }
.sf-footer__contact a:hover { color: var(--accent); }
.sf-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4) var(--space-5);
}
.sf-footer__head { font-size: var(--step--1); font-weight: 600; letter-spacing: -.005em; color: var(--ink); margin: 0 0 var(--space-2); }
.sf-footer__list { list-style: none; margin: 0; padding: 0; }
.sf-footer__list li { margin: 0; padding: .2rem 0; font-size: var(--step--1); }
.sf-footer__list a { color: var(--ink-soft); text-decoration: none; }
.sf-footer__list a:hover { color: var(--accent); text-decoration: underline; }
.sf-footer__text { color: var(--ink-soft); max-width: 26ch; }
.sf-footer__legal {
  border-top: var(--rule);
  padding-block: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  font-size: var(--step--2);
  color: var(--muted);
}
.sf-footer__legal p { margin: 0; }
.sf-footer__safety { flex: 1 1 24rem; max-width: 78ch; order: 3; }
.sf-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.sf-footer__legal-links a { color: var(--muted); text-decoration: none; }
.sf-footer__legal-links a:hover { color: var(--accent); }

.sf-main { display: block; }

@media (max-width: 900px) {
  .sf-footer__inner { grid-template-columns: 1fr; }
}

/* ---------- cookie banner ----------
   One quiet bar at the foot of the page, drawn only until the visitor has chosen. The runtime
   hides it through the `hidden` attribute, so the rules below describe the open state. */
.sf-consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  background: var(--paper);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -8px 24px -18px rgba(17, 24, 32, .45);
}
.sf-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding-block: var(--space-3);
}
.sf-consent__text { margin: 0; flex: 1 1 22rem; font-size: var(--step--1); color: var(--ink-soft); }
.sf-consent__text a { color: var(--accent); }
.sf-consent__option {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--step--2);
  letter-spacing: .04em;
  color: var(--ink-soft);
  cursor: pointer;
}
.sf-consent__option input { accent-color: var(--accent); margin: 0; }
.sf-consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
.sf-consent__actions .sf-btn { padding: .5em .9em; font-size: var(--step--2); }

/* The way back into the banner: the last line of the footer, drawn as a link. */
.sf-consent__open {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: var(--muted);
  cursor: pointer;
  text-decoration: none;
}
.sf-consent__open:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 640px) {
  .sf-consent__inner { padding-block: var(--space-2) var(--space-3); }
  .sf-consent__actions { margin-left: 0; width: 100%; }
  .sf-consent__actions .sf-btn { flex: 1 1 auto; justify-content: center; }
}