/* Shared look for pages using the new design (body class "new-design"):
   fonts, colours, the top nav, the small logo and the language switcher.
   Loaded after style.css and pages.css. Pages without the class (the
   forlovere page) keep the old look. */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;0,700;1,400&display=swap');

/* TAN - GARLAND: note its capitals are a full 1em tall, so font-size here
   is (roughly) the cap height in pixels. */
@font-face {
  font-family: 'TAN Garland';
  src: url('/fonts/TAN-Garland.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body.new-design {
  --font-garland: 'TAN Garland', Georgia, 'Times New Roman', serif;
  --font-serif: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --color-bg: #EAB4BB;
  --color-text: #90414D;
  --color-green: #A0964C;
  --color-frame: #A0964C;
  /* Sizes are taken from the designs (drawn at 1728×1117) and expressed in
     this unit, so the nav sits in exactly the same place on every page. */
  --u: min(1vh, 0.65vw);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-garland);
}

/* Fixed header: logo + nav stay put while scrolling. At the top of the page
   they sit exactly as in the designs; once the page is scrolled (body gets
   "is-scrolled" from pagenav.js) a pink bar fades in behind them so the
   text underneath doesn't show through, and they tighten up a little. */
body.new-design::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--u) * 9.6);
  background: var(--color-bg);
  box-shadow: 0 1px 0 rgba(144, 65, 77, 0.18);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 19;
}

body.new-design.is-scrolled::before {
  opacity: 1;
}

/* Top-right nav */
body.new-design .hemmeliginfo-nav {
  position: fixed;
  top: calc(var(--u) * 5.8);
  right: calc(var(--u) * 7);
  transition: top 0.25s ease;
}

body.new-design.is-scrolled .hemmeliginfo-nav {
  top: calc(var(--u) * 2.7);
}

body.new-design .page-links {
  gap: calc(var(--u) * 3.3);
}

body.new-design .page-links a {
  --pad-y: 0.3rem;
  --pad-x: 0.6rem;
  position: relative;
  font-family: var(--font-garland);
  text-transform: none;
  font-size: max(1.8rem, calc(var(--u) * 3.15));
  line-height: 1.2;
  letter-spacing: 0;
  padding: var(--pad-y) var(--pad-x);
}

/* Hover: a thin wavy line in the same spot as the active page's underline,
   rolling sideways. Drawn as a repeating wave (SVG mask) in the text colour
   whose position is animated. Replaces the old wiggle from style.css. */
body.new-design .page-links a:hover {
  animation: none;
}

body.new-design .page-links a:not(.active)::after {
  content: "";
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  /* Line-height 1.2 puts the baseline 0.2765em above the content bottom;
     the active underline sits 0.12em below the baseline */
  bottom: calc(var(--pad-y) + 0.2765em - 0.12em - 0.09em);
  height: 0.18em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 6'%3E%3Cpath d='M0 3 Q5 0.6 10 3 T20 3' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E") 0 0 / 0.55em 100% repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 6'%3E%3Cpath d='M0 3 Q5 0.6 10 3 T20 3' fill='none' stroke='black' stroke-width='1.1'/%3E%3C/svg%3E") 0 0 / 0.55em 100% repeat-x;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

body.new-design .page-links a:not(.active):hover::after,
body.new-design .page-links a:not(.active):focus-visible::after {
  opacity: 1;
  animation: navWave 0.7s linear infinite;
}

@keyframes navWave {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to { -webkit-mask-position: 0.55em 0; mask-position: 0.55em 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.new-design .page-links a:not(.active):hover::after,
  body.new-design .page-links a:not(.active):focus-visible::after {
    animation: none;
  }
}

body.new-design .page-links a.active {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.12em;
}

/* Small "M + B" back-to-home mark, top-left */
body.new-design .mb-logo {
  position: fixed;
  top: calc(var(--u) * 4.4);
  left: calc(var(--u) * 3.4);
  transition: top 0.25s ease;
}

body.new-design .mb-logo img {
  width: max(4.4rem, calc(var(--u) * 6.4));
  transition: width 0.25s ease;
}

body.new-design.is-scrolled .mb-logo {
  top: calc(var(--u) * 1.6);
}

body.new-design.is-scrolled .mb-logo img {
  width: max(3.6rem, calc(var(--u) * 4.8));
}

/* Language switcher, fixed bottom-right on every page. The pink backing
   keeps it readable when text scrolls underneath. */
body.new-design .lang-switcher.page-lang,
body.new-design .lang-switcher.home-lang {
  position: fixed;
  top: auto;
  left: auto;
  right: 2.4rem;
  bottom: 2.4rem;
  margin: 0;
  padding: 0.5rem;
  border-radius: 6px;
  background: var(--color-bg);
  z-index: 20;
}

/* Language switcher buttons */
body.new-design .lang-option {
  font-family: var(--font-garland);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.05em;
  padding: 0.6rem 0 0.4rem;
}

body.new-design .lang-option.active {
  color: var(--color-bg);
}

@media (max-width: 900px) {
  body.new-design .hemmeliginfo-nav {
    top: 1.6rem;
    left: 1.6rem;
    right: 1.6rem;
    justify-content: center;
  }

  body.new-design .page-links {
    justify-content: center;
    gap: 0.4rem 1.6rem;
  }

  body.new-design .page-links a {
    font-size: 2.2rem;
  }

  /* Make room for the logo on pages that have one */
  body.new-design .mb-logo ~ .hemmeliginfo-nav {
    left: 7.2rem;
    justify-content: flex-end;
  }

  body.new-design .mb-logo ~ .hemmeliginfo-nav .page-links {
    justify-content: flex-end;
  }

  body.new-design .mb-logo ~ .hemmeliginfo-nav .page-links a {
    --pad-y: 0.2rem;
    --pad-x: 0.4rem;
    font-size: 1.9rem;
  }

  body.new-design .mb-logo,
  body.new-design.is-scrolled .mb-logo {
    top: 1.6rem;
    left: 1.6rem;
  }

  body.new-design .hemmeliginfo-nav,
  body.new-design.is-scrolled .hemmeliginfo-nav {
    top: 1.6rem;
  }

  /* The nav wraps onto two lines here, so the bar needs to be taller */
  body.new-design::before {
    height: 8.6rem;
  }

  body.new-design .lang-switcher.page-lang,
  body.new-design .lang-switcher.home-lang {
    right: 1.2rem;
    bottom: 1.2rem;
  }
}

/* ------------------------------------------------------------
   Subpage layout (Detaljer, Helgens tidsplan, ...): big title with the
   ribbon, an illustration, the page content, and the logo footer.
   Measurements come from the designs (1728px wide).
   ------------------------------------------------------------ */

body.new-design {
  /* Base text size for subpages: 24px on the design, 17px on phones.
     Everything below is sized relative to it. */
  --fs: clamp(1.7rem, 1.39vw, 2.4rem);
}

.page-main {
  font-size: var(--fs);
  padding: calc(var(--fs) * 11.75) 1.6rem 0;
  overflow-x: clip;
}

.page-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Wrapper so the ribbon can sit at the end of the title (the title's own
   text is replaced on language change, so the ribbon can't live inside it).
   The title is inline and followed by a zero-size anchor, so the ribbon
   follows the end of the last line even when the title wraps on phones. */
.page-title-wrap {
  font-size: calc(var(--fs) * 3.92);
  line-height: 1;
  text-align: center;
}

.page-title {
  display: inline;
  font-family: var(--font-garland);
  font-size: 1em;
  line-height: 1;
  color: var(--color-text);
}

.ribbon-anchor {
  display: inline-block;
  position: relative;
  width: 0;
  height: 0;
  vertical-align: baseline;
}

.title-ribbon {
  position: absolute;
  left: -1em;
  bottom: 0.13em;
  width: 1.69em;
  max-width: none;
  height: auto;
  pointer-events: none;
}

.page-illustration {
  display: block;
  width: calc(var(--fs) * 20.8);
  max-width: 100%;
  height: auto;
  margin-top: calc(var(--fs) * 1.83);
}

.page-footer {
  position: relative;
  font-size: var(--fs);
  display: flex;
  justify-content: center;
  padding: calc(var(--fs) * 5.3) 1.6rem calc(var(--fs) * 0.4);
}

.page-footer-logo {
  display: block;
  width: calc(var(--fs) * 17.2);
  max-width: 70vw;
  height: auto;
}

@media (max-width: 700px) {
  .page-main {
    padding-top: 13rem;
  }

  .page-title-wrap {
    font-size: 5.2rem;
    line-height: 1.1;
  }

  /* Leave room under the logo for the fixed language buttons */
  .page-footer {
    padding-bottom: 6.4rem;
  }

  .page-footer-logo {
    max-width: 60vw;
  }
}