/*
 * Quark 2 — user customizations
 *
 * This file is safe to edit. It is loaded last so anything here overrides
 * theme.css without having to mark rules !important.
 */

html {
  scroll-behavior: smooth;
}

:root {
  --q2-nav-bg: var(--q2-bg);
  --q2-brand-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --q2-h1-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  --q2-h2-size: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  --q2-hero-text: #ffffff;
  --q2-hero-text-size: clamp(2rem, 7.5vw, 6rem);
  --q2-hero-shadow: 0 45 45;
  --q2-hero-shadow-alpha: 1;
}

h1 {
  font-size: var(--q2-h1-size);
}

h2 {
  font-size: var(--q2-h2-size);
}

:root[data-theme="dark"] {
  --q2-nav-bg: var(--q2-bg);
  --q2-hero-text: #ffffff;
  --q2-hero-shadow: 0 20 20;
}

.container,
.container-narrow {
  width: 100%;
  max-width: none;
  padding-inline: 1rem;
}

#body-wrapper {
  padding-block: 0.5rem;
  margin-bottom: 0;
}

#body-wrapper > .container > .content-item {
  max-width: none;
  margin: 0;
  padding: 0;
  background: var(--q2-bg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

:root[data-theme="dark"] #body-wrapper > .container > .content-item {
  box-shadow: none;
}

body #header {
  background: var(--q2-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#footer {
  padding-block: 1rem;
}

.navbar-section.logo {
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding-block: 0.5rem;
}

.brand-tagline {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--q2-text);
  white-space: normal;
}

.navbar-brand {
  font-size: var(--q2-brand-size);
  line-height: 1.1;
  white-space: nowrap;
}

.navbar-brand img,
.navbar-brand svg {
  height: 1em;
}

.navbar-brand .logo-dark,
:root[data-theme="dark"] .navbar-brand .logo-light {
  display: none;
}

:root[data-theme="dark"] .navbar-brand .logo-dark {
  display: block;
}

.content-item .dropmenu a.active {
  background: var(--q2-accent);
  color: var(--q2-accent-contrast);
}

.about-full .about-fixed {
  top: var(--q2-header-offset, var(--q2-header-height));
}

#body-wrapper > .container > .content-item.about-full {
  padding: 0.5rem 1rem;
}

@media (max-width: 899px) {
  .about-full .about-gallery figure {
    flex-basis: 100%;
  }
}


/* home page above-the-fold hero: full-bleed image, uncropped.
   The image is pinned to the top while the page scrolls over it;
   the overlay text is pulled back over the image by a negative margin
   equal to the image height, so it scrolls away with the page. */
.home-hero {
  padding: 0;
  position: sticky;
  top: 0;
}
.home-hero-overlay {
  --q2-hero-h: calc(2558 / 5654 * 100vw);
  --q2-hero-shadow-em-active: var(--q2-hero-shadow-em);
  position: relative;
  margin-top: calc(-1 * var(--q2-hero-h));
  height: var(--q2-hero-h);
  box-sizing: border-box;
  padding-top: var(--q2-header-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
main {
  position: relative;
  z-index: 1;
}
.home-hero img {
  display: block;
  width: 100%;
  height: auto;
}
.home-hero-text {
  /* hero_shadow_size_em: total halo width as a multiple of the font size;
     1.5 -> the glow extends (1.5 - 1) = 0.5em on each edge */
  --q2-hero-r: max(0em, calc((var(--q2-hero-shadow-em-active, 1) - 1) * 1em));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  column-gap: .3em;
  font-size: var(--q2-hero-text-size);
  font-weight: bold;
  color: var(--q2-hero-text);
  text-shadow:
    0 0 calc(var(--q2-hero-r) * .3) rgb(var(--q2-hero-shadow) / var(--q2-hero-shadow-alpha)),
    0 0 calc(var(--q2-hero-r) * .3) rgb(var(--q2-hero-shadow) / var(--q2-hero-shadow-alpha)),
    0 0 var(--q2-hero-r) rgb(var(--q2-hero-shadow) / var(--q2-hero-shadow-alpha)),
    0 0 var(--q2-hero-r) rgb(var(--q2-hero-shadow) / var(--q2-hero-shadow-alpha)),
    0 0 var(--q2-hero-r) rgb(var(--q2-hero-shadow) / var(--q2-hero-shadow-alpha)),
    0 2px calc(var(--q2-hero-r) * .25) rgb(var(--q2-hero-shadow) / var(--q2-hero-shadow-alpha));
}
.home-hero-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  margin-left: .35em;
  border-radius: 50%;
  background: var(--q2-accent);
  color: var(--q2-accent-contrast);
  font-weight: bold;
  text-decoration: none;
  text-shadow: none;
  box-shadow: 0 0 10px rgba(0, 0, 0, .7);
}

/* keep the target heading below the fixed header when the ? link is used */
.anchor-target {
  display: block;
  scroll-margin-top: calc(var(--q2-header-height) + 2.5rem);
}

.home-hero-tagline {
  --q2-hero-r: max(0em, calc((var(--q2-hero-shadow-em-active, 1) - 1) * 1em));
  color: var(--q2-hero-text);
  font-size: 2rem;
  max-width: 90%;
  text-align: center;
  text-shadow:
    0 0 calc(var(--q2-hero-r) * .3) rgb(var(--q2-hero-shadow) / var(--q2-hero-shadow-alpha)),
    0 0 calc(var(--q2-hero-r) * .3) rgb(var(--q2-hero-shadow) / var(--q2-hero-shadow-alpha)),
    0 1px calc(var(--q2-hero-r) * .2) rgb(var(--q2-hero-shadow) / var(--q2-hero-shadow-alpha));
}

/* over the hero the header shows menu items only;
   logo, brand text and tagline fade in together once .scrolled is set */
#header .navbar-brand,
#header .brand-tagline {
  transition: opacity .25s ease;
}
body.header-transparent:not(.scrolled) #header .navbar-brand,
body.header-transparent:not(.scrolled) #header .brand-tagline {
  opacity: 0;
}
/* in hero mode the transparent header spans the top of the image — let clicks
   reach the image except on real controls (menu, burger, flags, theme toggle);
   mobile only, where the ? button sits inside the header area */
@media (max-width: 700px) {
  body.header-transparent:not(.scrolled) #header {
    pointer-events: none;
  }
  body.header-transparent:not(.scrolled) #header :is(a, button, summary) {
    pointer-events: auto;
  }
}

/* mobile (theme burger breakpoint): no solid menu bar when scrolled —
   the floating burger button is enough */
@media (max-width: 860px) {
  body.header-transparent.scrolled #header {
    display: none;
  }
}

/* mobile overrides: everything tunable for ≤700px lives here */
@media (max-width: 700px) {
  .home-hero-overlay {
    --q2-hero-shadow-em-active: var(--q2-hero-shadow-em-mob, var(--q2-hero-shadow-em));
    padding-top: 2.5rem;
  }
  .home-hero-text {
    --q2-hero-text-size: clamp(1.2rem, 6.5vw, 2rem);
  }
  .home-hero-tagline {
    font-size: 1rem;
  }
  .anchor-target {
    scroll-margin-top: calc(var(--q2-header-height) + 2.5rem);
  }
}