/* ==========================================================================
   layout.css
   The parts shared by every page: page width, sticky top bar with the menu
   and the reading-progress line, page
   head (title, subtitle, wave line), footer (Get in touch, Subscribe, with
   the two circles). Colours and shapes come from the tokens in base.css.

   Contents
     1. Page width
     2. Top bar: name and menu
     3. Menu on tablets and phones
     4. Page head
     5. Footer ("Circles")
     6. Top / Bottom buttons
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Page width: header, content and footer share one width and margins
   -------------------------------------------------------------------------- */

.wrap {
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  padding-left: max(var(--gutter), env(safe-area-inset-left));
}


/* --------------------------------------------------------------------------
   2. Top bar: "CoDesign Lab EU", tagline, menu
   -------------------------------------------------------------------------- */

/* The header stays at the top while scrolling (as on mehulbhatt.org); site.js
   measures its height into --header-height, so links to a spot on the page
   (e.g. an item) stop just below it */
html {
  scroll-padding-top: calc(var(--header-height, 7rem) + .5rem);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  color: var(--bar-ink);
  background: var(--bar-bg);
}

/* Reading progress: a thin line along the bottom of the header that fills
   from left to right as the page is read (width set by site.js) */
.reading-progress {
  position: absolute;
  bottom: -1px;                        /* on the header's bottom line */
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--progress);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

@media (forced-colors: active) {
  .reading-progress {
    background: Highlight;
  }
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.header-inner {
  padding-top: 1.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  color: inherit;
  text-decoration: none;
}

/* the logo ("Confluence": assets/js/icons.js, made by tools/make_icons.py) */
.brand-mark {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--logo);
}

.brand-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .75rem;
}

.brand-name {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.brand-tagline {
  font-size: var(--fs-small);
  font-weight: 400;
  opacity: .8;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--bar-current);
}

.site-nav a[aria-current] {                 /* the page, or the section it belongs to */
  color: var(--bar-current);
  box-shadow: inset 0 -2px 0 var(--bar-current);
}

.site-nav .icon {
  font-size: .75em;
}

.menu-button {
  display: none;
}


/* --------------------------------------------------------------------------
   3. Menu on tablets and phones: an icon (three lines, × when open)
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    margin-right: -10px;
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }

  .menu-icon-close,
  .menu-button[aria-expanded="true"] .menu-icon-open {
    display: none;
  }

  .menu-button[aria-expanded="true"] .menu-icon-close {
    display: block;
  }

  .site-nav {
    display: none;
    flex-basis: 100%;
  }

  .site-nav.is-open {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
    padding-bottom: .5rem;
  }

  .site-nav li + li {
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  }

  .site-nav a {
    min-height: var(--tap);
    font-size: var(--fs-body);
  }

  .site-nav a[aria-current] {
    box-shadow: none;
  }

  .brand {
    flex: 1 1 0;                       /* name and tagline on the left, the menu icon stays top right */
    min-width: 0;
  }

  .brand-tagline {
    flex-basis: 100%;
  }
}


/* --------------------------------------------------------------------------
   4. Page head: title, subtitle, (Media) the filter buttons, and one wave
   line underneath, the look's only ornament (its colour is --wave in
   base.css; its shape is drawn here)
   -------------------------------------------------------------------------- */

.page-head-inner {
  padding-top: clamp(2.5rem, 7vw, 4rem);
  padding-bottom: clamp(1rem, 3vw, 1.5rem);
}

.page-head-inner::after {
  --wave-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 26' preserveAspectRatio='none'%3E%3Cpath d='M0 13 C60 1 110 25 170 13 S270 1 330 13 430 25 490 13 570 3 600 13' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  content: "";
  display: block;
  height: 26px;
  margin-top: 2.25rem;
  background: var(--wave);             /* the colour; the shape is the mask */
  -webkit-mask: var(--wave-line) center / 100% 100% no-repeat;
  mask: var(--wave-line) center / 100% 100% no-repeat;
}

.page-title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.03em;
}

.page-sub {
  margin: .6rem 0 0;
  font-size: var(--fs-sub);
  font-weight: 400;
  color: var(--ink-soft);
}


/* --------------------------------------------------------------------------
   5. Footer: a pine-green field; the brand (logo, name, tagline), Get in
   touch and Subscribe in three columns; the copyright below a thin line;
   the logo's four discs as a faint watermark at the bottom right (Mehul,
   7 October 2026: option A of preview/footer-rework.html). Links are not
   underlined until pointed at. Texts in site-config.js.
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  overflow: hidden;
  margin-top: var(--space);
  color: var(--footer-ink);
  background: var(--footer-bg);
}

.footer-watermark {
  position: absolute;
  right: -6rem;
  bottom: -7rem;
  width: 26rem;
  height: 26rem;
  color: var(--footer-ink);
  opacity: var(--footer-watermark);
  pointer-events: none;
}

.footer-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem 3rem;
  padding: clamp(2.75rem, 6vw, 3.5rem) 0 2.5rem;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

.footer-brand {
  display: flex;
  align-items: center;
  align-self: start;
  gap: .8rem;
}

.site-footer .footer-brand:hover {
  text-decoration: none;
}

.footer-logo {
  flex: none;
  width: 3rem;
  height: 3rem;
}

.footer-name {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.2;
}

.footer-tagline {
  display: block;
  font-size: var(--fs-small);
  opacity: .8;
}

.site-footer h2 {
  margin: 0 0 1rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  opacity: .75;
}

.site-footer h3 {
  margin: 0 0 .2rem;
  font-size: var(--fs-label);
  font-weight: 500;
  opacity: .75;
}

.site-footer p {
  margin: 0 0 1.1rem;
  line-height: 1.5;
}

.footer-email {
  font-size: 1.15rem;
  font-weight: 700;
  white-space: nowrap;
}

.footer-line {
  white-space: nowrap;                 /* "Örebro University / Sweden" stays on one line */
}

.footer-button {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: 0 1.25rem;
  font-weight: 600;
  color: var(--footer-button-ink) !important;
  background: var(--footer-button-bg);
  border-radius: var(--pill);
}

.site-footer .footer-button:hover {
  text-decoration: none;
  background: color-mix(in srgb, var(--footer-button-bg) 88%, transparent);
}

.footer-bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding: 1.1rem 0 1.4rem;
  font-size: var(--fs-label);
  border-top: 1px solid var(--footer-line);
}

.footer-copyright {
  margin: 0 !important;
}

/* Contact, Sitemap: beside the copyright */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   6. Top / Bottom buttons (as on mehulbhatt.org): floating at the bottom
   right. "Top" appears once the page has been scrolled 400px down; "Bottom"
   on pages longer than a screen, until the footer is near (site.js).
   -------------------------------------------------------------------------- */

.scroll-aids {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .4rem;
}

.scroll-aid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 60px;
  min-height: var(--tap);
  padding: .5rem .85rem;
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  box-shadow: 0 2px 12px rgba(28, 29, 26, .12);
  transition: background-color .15s ease, color .15s ease;
}

.scroll-aid[hidden] {
  display: none;
}

.scroll-aid:hover {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* the jump targets receive focus; no outline around the whole area */
#main:focus,
.site-footer:focus {
  outline: none;
}

@media (forced-colors: active) {
  .scroll-aid {
    border-color: ButtonText;
  }
}


@media print {
  .menu-button,
  .reading-progress,
  .scroll-aids {
    display: none;
  }

  .site-header {
    position: static;
  }

  .site-footer {
    color: #000;
    background: none;
  }

  .site-footer::before,
  .site-footer::after {
    display: none;
  }
}