/* ==========================================================================
   THEME — what the templates print and the editor cannot touch

   Header, menu, language switcher, page frame, home page, footer.
   If you wonder whether a rule belongs here: it does, if the thing it styles
   does NOT exist in the page editor.

   Everything the editor creates is in assets/content.css
   Colors and measurements are in style.css

   Note: .page-frame and .homepage are deliberately not called .page and .home
   — WordPress adds those two as classes on <body>, so the rules would leak
   onto the whole document.
   ========================================================================== */


/* ==========================================================================
   BASICS
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-outer);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--link); }
a:hover { text-decoration: none; }

:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; }

/* Skip to content — visible only once reached with the keyboard. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand-blue); color: #fff; padding: .7rem 1.1rem;
}
.skip-link:focus { left: .5rem; top: .5rem; }

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


/* ==========================================================================
   THE BAR WITH THE LANGUAGE SWITCHER
   ========================================================================== */

.topbar {
  background: var(--surface-outer);
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 55%, transparent);
  font-size: .85rem;
}
.topbar .wrap { display: flex; justify-content: flex-end; padding: .45rem 0; }

.languages { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.languages a { color: var(--link); text-decoration: none; }
.languages a:hover { text-decoration: underline; }
.languages [aria-current] { color: var(--text); font-weight: 600; }
.languages .separator { color: var(--text-muted); opacity: .5; }


/* ==========================================================================
   HEADER AND MENU
   ========================================================================== */

.site-header { background: var(--surface-band); }
.site-header .wrap {
  display: flex; align-items: center; gap: 1.25rem;
  /* The horizontal indent is the same as for the text, so the mark and the
     menu do not hang off the very edge but sit on the same vertical line as
     the content below. */
  padding: .9rem var(--indent);
}

/* On the home page there is no mark in the header — the large one sits right
   below. The bar then blends into the white band of the home page, so it
   needs a thin line to show where it ends.

   ONLY the height changes. The horizontal indent has to stay the same as on
   the other pages, otherwise the menu would touch the edge on the home page
   while it stays indented on the inner ones. */
.site-header--home .wrap { padding-block: .7rem; }
.site-header--home { border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent); }

.site-header__mark { flex: none; display: block; }
.site-header__mark img { width: var(--mark-height); height: var(--mark-height); display: block; }

/* Menu alignment. Right by default. */
.site-header__menu { margin-left: auto; }

.menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 1.15rem;
}
.menu a {
  color: var(--text); text-decoration: none;
  display: block; padding: .35rem 0; font-size: .98rem;
}
.menu a:hover { color: var(--brand-blue); }
.menu .current-menu-item > a,
.menu .current_page_item > a,
.menu .current_page_ancestor > a {
  color: var(--brand-blue); font-weight: 600;
}

/* The menu button on narrow screens */
.hamburger {
  display: none; margin-left: auto;
  font: inherit; cursor: pointer;
  background: none; border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: .45rem .7rem;
  color: var(--text); align-items: center; gap: .5rem;
}
.hamburger__bars { display: block; width: 20px; height: 2px; background: currentColor; position: relative; }
.hamburger__bars::before,
.hamburger__bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor;
}
.hamburger__bars::before { top: -6px; }
.hamburger__bars::after  { top: 6px; }


/* ==========================================================================
   HOME PAGE — the white band with the mark, and the content frame
   ========================================================================== */

.homepage { display: flex; margin-block: 1rem 2rem; box-shadow: 0 1px 3px rgb(0 0 0 / .08); }

.homepage__band {
  flex: 0 0 var(--band-width);
  background: var(--surface-band);
  padding: 2.5rem 1.75rem;
  text-align: center;
}
.homepage__band img { width: min(100%, 220px); }

.homepage__body {
  flex: 1; min-width: 0;
  background: var(--surface-body);
  /* the same horizontal indent as in the header — menu and text on one vertical line */
  padding: 2.5rem var(--indent);
}

/* The buttons on the home page — printed by the template, from the main menu. */
.buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: 1.75rem; }
.button {
  display: block; padding: .85rem 1.1rem; text-align: center;
  background: var(--button-bg); color: var(--text-on-brand);
  text-decoration: none; border-radius: var(--radius);
  font-weight: 600;
}
.button:hover { background: var(--button-bg-hover); }


/* ==========================================================================
   THE FRAME OF AN INNER PAGE
   ========================================================================== */

.page-frame {
  background: var(--surface-body);
  margin-block: 1rem 2rem;
  padding: 2.25rem var(--indent);
  box-shadow: 0 1px 3px rgb(0 0 0 / .08);
}

/* The way back, so subpages are not a dead end. Printed by the template. */
.back-link { margin-bottom: 1.25rem; font-size: .9rem; }
.back-link a { color: var(--text-muted); text-decoration: none; }
.back-link a:hover { color: var(--brand-blue); text-decoration: underline; }

/* .title and .rule are used ONLY by the 404 and the fallback template, where
   there is no editable content. On ordinary pages the title is a block inside
   the content — that is in content.css */
.title {
  font-size: var(--fs-page-title); font-weight: 600;
  margin: 0 0 .55rem; color: var(--brand-blue);
  line-height: 1.2;
}
.rule { height: 2px; background: var(--rule); border: 0; margin: 0 0 1.5rem; }


/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  margin-top: auto;
  border-top: 1px dashed var(--hairline);
  padding: 1.1rem 0 2.5rem;
  font-size: .85rem;
  color: var(--text-muted);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; align-items: baseline; }
.site-footer__legal { margin-left: auto; display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; list-style: none; padding: 0; margin-block: 0; }
.site-footer a { color: var(--text-muted); }


/* ==========================================================================
   NARROW SCREENS
   ========================================================================== */

@media (max-width: 1023px) {
  .hamburger { display: inline-flex; }

  .site-header__menu {
    flex-basis: 100%;
    display: none;
    border-top: 1px solid var(--hairline);
    margin-top: .8rem;
    margin-left: 0;        /* on a narrow screen the menu is a row of its own, not aligned right */
    padding-top: .5rem;
  }
  .site-header__menu.is-open { display: block; }   /* the class is set by assets/nav.js */
  .menu { flex-direction: column; gap: 0; }
  .menu a { padding: .6rem 0; border-bottom: 1px solid color-mix(in srgb, var(--hairline) 50%, transparent); }

  .site-header .wrap { flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .homepage { display: block; }
  .homepage__band { padding: 2rem var(--indent); }
  .homepage__body { padding-block: 1.75rem; }
  .buttons { grid-template-columns: 1fr; }
  .page-frame { padding-block: 1.75rem; }
  .site-footer__legal { margin-left: 0; }
}