/* Page-level layout: wrapper, header, navigation, breadcrumb, footer, hero, grids.
 * Adapted from accessibility.sk: no theme toggle or settings disclosure, no brand gradient,
 * no view transitions or hover movement (nothing on this site animates). */

.wrapper {
  inline-size: min(100% - 2 * var(--gutter), var(--content-max));
  margin-inline: auto;
}

.flow > * + * {
  margin-block-start: var(--flow-space, var(--space-s));
}

/* Headings are ink (user 2026-10-23), slightly condensed to echo the covers' type (PLAN §5).
 * base.css (shared with accessibility.sk) sets the size and weight; this layer only recolours. */
:is(h1, h2, h3, h4) {
  color: var(--heading);
  font-stretch: var(--width-heading);
}

/* ---- Skip links: the first focusable elements on every page ------------------ */
.skip-links {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  inline-size: auto;
  max-inline-size: calc(100% - 2 * var(--space-2xs));
  block-size: auto;
  clip-path: none;
  white-space: normal;
  padding: var(--space-2xs) var(--space-s);
  background: var(--bg-inverse);
  color: var(--text-inverse);
  font-weight: 650;
  text-decoration: none;
  border-radius: var(--radius-s);
}

/* ---- Staging note (preview build only) ------------------------------------------ */
.staging-note {
  padding: var(--space-3xs) var(--gutter);
  background: var(--amber);
  color: var(--text);
  font-size: var(--text--1);
  font-weight: 650;
  text-align: center;
}

.staging-note p {
  margin-inline: auto;
}

/* ---- Header ------------------------------------------------------------------- */
.site-header {
  background: var(--bg-raised);
  border-block-end: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-m);
  padding-block: var(--space-xs);
}

/* The lockup: the mark, then the name on three lines, "Informačné" / "Interakcie" / "2026"
 * (user, 2026-10-24). One size drives both: three lines at line-height 1 with two gaps of
 * 0.1em make a block 3.2em tall, and the mark is a 3.2em square, so the mark is exactly as
 * tall as the text at every size. The accessible name stays the text, one string,
 * "Informačné Interakcie 2026": the three spans are separated by spaces in the markup. */
.brand {
  --brand-block: 3.2em;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-block-size: var(--target-comfortable);
  color: var(--heading);
  text-decoration: none;
  font-size: var(--brand-size, var(--text-0));
  font-weight: 750;
  font-stretch: var(--width-heading);
  letter-spacing: -0.01em;
  line-height: 1;
  border-radius: var(--radius-s);
}

.brand:hover {
  color: var(--link-hover);
}

.brand__name {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
}

.brand__name-year {
  font-weight: 600;
  font-stretch: var(--width-normal);
  color: var(--ink-700);
}

.brand__mark {
  inline-size: var(--brand-block);
  block-size: var(--brand-block);
  color: var(--ink-700);
  flex: none;
}

/* Header sizes: on a phone the lockup stays compact next to the Menu button; from 42em it sits
 * in the grid's first column, and from 64em (desktop) the three lines are as tall as the menu's
 * two rows plus the search row beside them (3 × 2.75rem targets and the row gaps, about
 * 9.4rem), so the two columns end together. Sizes are in rem, so the match holds under zoom. */
.site-header .brand {
  --brand-size: 1.125rem;
}

@media (width >= 42em) {
  .site-header .brand {
    --brand-size: 1.75rem;
  }
}

@media (width >= 64em) {
  .site-header .brand {
    --brand-size: 2.95rem;
  }
}

/* The tools row (search and the language switcher) is a query container: the switcher
 * shortens its labels according to the row's own width. */
.site-header__tools {
  container: tools / inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs);
  margin-inline-start: auto;
}

/* ---- Primary navigation --------------------------------------------------------- */
.site-nav {
  display: contents;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-2xs);
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-comfortable);
  padding-inline: var(--space-xs);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.site-nav__link:hover {
  background: var(--bg-tint);
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The current page and its section: an underline bar under the label, never colour alone. */
.site-nav__link[aria-current]::after {
  content: "";
  position: absolute;
  inset-inline: var(--space-xs);
  inset-block-end: 0.35rem;
  block-size: 3px;
  border-radius: var(--radius-pill);
  background: var(--ink-700);
}

.site-nav__link[aria-current] {
  color: var(--heading);
}

@media (forced-colors: active) {
  .site-nav__link[aria-current]::after {
    background: currentColor;
    forced-color-adjust: none;
  }
}

/* From 42em the header is a grid: the brand in the first column, the menu and the tools
 * row stacked in the second (accessibility.sk). */
@media (width >= 42em) {
  .site-header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "brand nav"
      "brand tools";
    column-gap: var(--space-m);
    row-gap: var(--space-xs);
  }

  .site-header .brand {
    grid-area: brand;
  }

  .site-nav__nav {
    grid-area: nav;
  }

  .site-header__tools {
    grid-area: tools;
    margin-inline-start: 0;
  }
}

@media (width < 42em) {
  .site-header__tools {
    inline-size: 100%;
    margin-inline-start: 0;
    order: 10;
    justify-content: space-between;
  }
}

/* ---- Page structure ----------------------------------------------------------------- */
.site-main {
  padding-block: var(--space-xl) var(--space-3xl);
}

.site-main:focus {
  outline: none;
}

.page-header {
  --flow-space: var(--space-s);
  padding-block-end: var(--space-l);
  margin-block-end: var(--space-l);
  border-block-end: 1px solid var(--border);
  position: relative;
}

/* The accent under every page header: the ink, or the year's lead colour on an edition page. */
.page-header::after {
  content: "";
  position: absolute;
  inset-block-end: -2px;
  inset-inline-start: 0;
  inline-size: 5rem;
  block-size: 4px;
  background: var(--year-lead);
  border-radius: var(--radius-pill);
}

.page-title {
  max-inline-size: min(28ch, var(--measure));
}

/* ---- Breadcrumb bar ------------------------------------------------------------------ */
/* Full width under the header, sticky; plain on the page background (accessibility.sk
 * without the frosted-glass state). */
.breadcrumb-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
}

.breadcrumb-bar__surface {
  background: var(--bg);
  border-block-end: 1px solid var(--border);
}

@media (forced-colors: active) {
  .breadcrumb-bar__surface {
    background: Canvas;
    border-color: CanvasText;
  }
}

/* Focus and in-page anchors land below the bar (2.4.11 Focus Not Obscured). */
:root:has(.breadcrumb-bar) {
  scroll-padding-block-start: calc(var(--target-comfortable) + var(--space-2xs));
}

.breadcrumb {
  display: flex;
  align-items: center;
  min-block-size: var(--target-comfortable);
  font-size: var(--text--1);
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-inline-size: 0;
}

.breadcrumb__item:not(:last-child) {
  flex: none;
}

/* The separator is decoration: CSS alt text keeps it out of the accessible name. */
.breadcrumb__item + .breadcrumb__item::before {
  content: "›" / "";
  color: var(--text-muted);
}

.breadcrumb__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  color: var(--text-muted);
  text-underline-offset: 0.2em;
}

.breadcrumb__link:hover {
  color: var(--link-hover);
}

/* The home mark alone is narrower than 24 px at small sizes and sits close to the next crumb:
 * a full 24 × 24 px target (2.5.8, found by the B10 keyboard walk at 390 px). */
.breadcrumb__link--home {
  justify-content: center;
  min-inline-size: var(--target-min);
}

.breadcrumb__logo {
  block-size: 1.5em;
  inline-size: auto;
  color: var(--ink-700);
}

.breadcrumb__current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text);
}

/* ---- Hero (home): a white field in a low-poly corner frame ------------------------------ */
.hero {
  margin-block-start: calc(-1 * var(--space-l));
}

.hero__frame {
  position: relative;
  padding: clamp(1rem, 0.5rem + 3vw, 3rem);
  color: var(--ink-700);
}

.hero__frame > .poly {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.hero__field {
  --flow-space: var(--space-s);
  position: relative;
  padding: clamp(1.25rem, 0.75rem + 3vw, 3.5rem);
  background: var(--paper-raised);
  border: 1px solid var(--border-firm);
  border-radius: var(--radius-m);
  color: var(--text);
  box-shadow: var(--shadow-md);
}

.hero__title {
  font-size: var(--text-5);
  line-height: 1.05;
  max-inline-size: none;
}

/* On a phone (and at 400 % zoom) the largest step split "Informačné" inside the word; a
 * smaller step keeps whole words. An em query, so it follows zoom; no vw-only sizing (1.4.4). */
@media (width < 26em) {
  .hero__title {
    font-size: var(--text-3);
  }
}

.hero__when {
  font-size: var(--text-1);
  font-weight: 650;
  color: var(--text);
}

.hero__theme {
  font-size: var(--text-1);
  line-height: var(--leading-snug);
  max-inline-size: var(--measure-wide);
}

.hero__theme-label {
  font-weight: 650;
}

/* The buttons stand apart from the theme above them: a plain `margin: 0` here used to cancel
 * the .flow spacing (same specificity, later rule), leaving them glued to the theme line. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__field > .hero__actions {
  margin-block-start: var(--space-l);
}

.hero + * {
  margin-block-start: var(--space-2xl);
}

.home > * + * {
  margin-block-start: var(--space-2xl);
}

.home__editions {
  --flow-space: var(--space-m);
}

/* ---- Grids ---------------------------------------------------------------------------- */
.edition-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.home__editions .edition-grid {
  grid-template-columns: minmax(0, 24rem);
}

/* ---- Footer ---------------------------------------------------------------------------- */
.site-footer {
  background: var(--bg-sunken);
  border-block-start: 1px solid var(--border);
  padding-block: var(--space-xl) var(--space-l);
  font-size: var(--text--1);
  color: var(--text);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-l) var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.site-footer .brand {
  --brand-size: var(--text-0);
}

.site-footer__heading {
  font-size: var(--text-0);
}

.site-footer__tagline {
  font-weight: 550;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin: 0;
  padding: 0;
}

.site-footer__list a,
.site-footer__address a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
}