/* ==========================================================================
   Site chrome — header, navigation, breadcrumbs, footer
   --------------------------------------------------------------------------
   The frame around every page. None of it reads the database (the cart
   counter is written by cart.js), which is what lets the error templates
   extend base.html safely: put a query in here and every 500 becomes a
   second 500. See test_500_renders_with_the_database_gone.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 2px solid var(--gold-rule);
}

/* The header is sticky, so a link to #firmy would otherwise scroll the
   heading underneath it and the visitor lands mid-paragraph. Roughly the
   72px bar plus breathing room. */
section[id],
:target { scroll-margin-top: 6rem; }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 72px;
}

.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand__mark { height: 44px; width: auto; }
.brand__text { font-weight: 800; font-size: 1.0625rem; line-height: 1.15; }
.brand__text > span { display: block; }
/* The s.r.o. is the second organisation, not a subtitle of the first, but it
   stays quieter: the ústav is what the site is mostly about. */
.brand__sro { font-weight: 500; font-size: .8125rem; color: var(--muted); }

.nav { display: flex; align-items: center; gap: .25rem; }
.nav__item { position: relative; }

.nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: .5rem .875rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link:hover,
.nav__link[aria-current="page"] { background: var(--gold-wash); }

.nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 16rem;
  margin: 0;
  padding: .5rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.nav__panel[hidden] { display: none; }
.nav__panel a {
  display: block;
  min-height: var(--tap);
  padding: .75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.nav__panel a:hover { background: var(--gold-wash); }

.nav-toggle { display: none; }

/* The phone header: the row of links becomes a panel under the bar, and the
   button that opens it appears. These rules override the ones above at the
   same specificity, so they have to stay after them in this file. */
@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--tap);
    padding: .5rem 1rem;
    background: transparent;
    border: 2px solid var(--ink);
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  .nav {
    display: none;
    position: absolute;
    inset: 72px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 1.5rem;
    background: var(--cream);
    border-bottom: 2px solid var(--gold-rule);
    box-shadow: var(--shadow);
  }
  .nav[data-open="true"] { display: flex; }

  .nav__panel {
    position: static;
    border: 0;
    box-shadow: none;
    padding-left: 1rem;
    background: transparent;
  }
  .nav__panel[hidden] { display: none; }
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumb {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--muted); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--cream-deep);
  border-top: 2px solid var(--gold-rule);
  padding-block: 3rem 2rem;
  margin-top: 4rem;
}
.site-footer h3 { font-size: 1.0625rem; text-transform: uppercase; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .375rem; }
.site-footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
}