/* used on every page: colors, fonts, buttons, the header and footer,
   the bar at the top with the language and accessibility settings,
   and how each accessibility setting changes the site.
   each page also has its own css file (home.css, program.css, host.css, why.css). */


/* ---- colors and sizes ----
   change the colors here and the whole site follows */

:root {
  --bg: #ff6a00;      /* background. the orange from the poster */
  --fg: #201e1c;      /* text and lines. the black from the poster */
  --pop: #ffffff;     /* the white cross-out line, tags and dots */
  --on-pop: #201e1c;  /* text on top of --pop */
  --fg-soft: color-mix(in srgb, var(--fg) 12%, transparent); /* light hover background */

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1rem, 4vw, 3rem); /* space at the sides of the page */
  --max: 84rem;                     /* widest the content gets */
  --rule: 2px solid var(--fg);
  --rule-thick: 3px solid var(--fg);
  --ease: cubic-bezier(0.7, 0, 0.2, 1);
  --lift: 5px; /* how far buttons jump on hover */
}


/* ---- accessibility settings ----
   load-settings.js puts these classes on <html> when someone turns a setting on */

.high-contrast {
  --bg: #000000;
  --fg: #ffffff;
  --pop: #ffe600;
  --on-pop: #000000;
}
.text-large { font-size: 118.75%; }
.text-larger { font-size: 137.5%; }

/* easier reading: no wide letters, no all-caps, more space between lines */
.easy-reading body { line-height: 1.65; letter-spacing: 0.01em; }
.easy-reading :is(.label, .chip, .action, .pill, .tag, .btn, .nav a, .languages__button, .accessibility-button,
                  .event__time, .event__title, .type-card__name, .thing__name, .size-picker__button, .check) {
  font-stretch: 100%;
  letter-spacing: normal;
  text-transform: none;
}
.easy-reading .label { font-size: 0.85rem; }
.easy-reading p a { text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* less motion: turns off the animations. it's also on if the phone or computer asks for it */
.less-motion { scroll-behavior: auto; }
.less-motion *, .less-motion *::before, .less-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
.less-motion .strike[data-animate]::after { animation: none; transform: none; }
.less-motion [data-fade-in] { opacity: 1; transform: none; }

/* swedish and danish: hide the page for a moment while the text gets swapped,
   so you don't see the english first. shows anyway after 1.5 seconds just in case */
.translating body { visibility: hidden; animation: show-page 0s 1.5s forwards; }
@keyframes show-page { to { visibility: visible; } }


/* ---- basics ---- */

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 500;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { flex: 1; }
a { color: inherit; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }

/* hidden on screen but read out by screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* "skip to content" link, only shows when you tab to it */
.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--fg); color: var(--bg);
  font-weight: 800; text-decoration: none;
}
.skip:focus { top: 1rem; }


/* ---- text ---- */

/* the small wide capitals, like REPAIR or 14 EVENTS THIS WEEK */
.label {
  font-stretch: 125%;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* the white cross-out line from the poster. use it on short bits of text: <s class="strike">Black Week</s>
   add data-animate to have it draw across when the page loads */
.strike {
  --weight: 0.12em;
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.strike::after {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  top: 51%;
  height: var(--weight);
  margin-top: calc(var(--weight) / -2);
  background: var(--pop);
  pointer-events: none;
}
.js .strike[data-animate]::after {
  transform: scaleX(0);
  transform-origin: left center;
  animation: draw-strike 0.7s var(--ease) 0.35s forwards;
}
@keyframes draw-strike { to { transform: scaleX(1); } }

/* the pulsing white dot (home page status and the "today" button) */
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8); }
  100% { box-shadow: 0 0 0 0.7em rgba(255, 255, 255, 0); }
}


/* ---- buttons ---- */

/* the big black button, like "see what's on" */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 1em 1.5em;
  border: 0;
  background: var(--fg);
  color: var(--bg);
  font: inherit;
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn__arrow { transition: transform 0.18s var(--ease); }
.btn:hover {
  transform: translate(calc(var(--lift) * -1), calc(var(--lift) * -1));
  box-shadow: var(--lift) var(--lift) 0 var(--pop);
}
.btn:hover .btn__arrow { transform: translateX(0.25em); }
.btn:active { transform: none; box-shadow: none; }

/* small outlined button, like "add to calendar" */
.action {
  display: inline-flex;
  align-items: center;
  padding: 0.6em 0.9em;
  border: 2px solid currentColor;
  background: none;
  color: inherit;
  font: inherit;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.action:hover { background: var(--bg); color: var(--fg); border-color: var(--bg); }

/* a button that looks like a link */
.linkish {
  padding: 0; border: 0; background: none;
  color: inherit; font: inherit; font-weight: 800;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em;
  cursor: pointer;
}

.icon { width: 1.35em; height: 1.35em; flex: none; }


/* ---- the bar at the top: languages + accessibility ---- */

.settings-bar { min-height: 2.75rem; border-bottom: var(--rule); }
.settings-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0.45rem var(--gutter);
}

.languages { display: flex; gap: 0.25rem; }
.languages__button,
.accessibility-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 1.9rem;
  padding: 0.3em 0.6em;
  border: 2px solid transparent;
  background: none;
  color: inherit;
  font: inherit;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.languages__button:hover,
.accessibility-button:hover { border-color: var(--fg); }
.languages__button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.accessibility-button { text-transform: uppercase; }
.accessibility-button[aria-expanded="true"] { background: var(--fg); color: var(--bg); }

/* the panel that opens under the bar */
.accessibility-panel { background: var(--fg); color: var(--bg); }
.accessibility-panel :focus-visible { outline-color: var(--bg); }
.accessibility-panel__inner {
  display: grid;
  gap: 1.25rem 2.5rem;
  max-width: var(--max);
  margin-inline: auto;
  padding: 1.5rem var(--gutter) 1.25rem;
}
@media (min-width: 56em) {
  .accessibility-panel__inner { grid-template-columns: auto 1fr; align-items: start; }
  .accessibility-panel__intro,
  .accessibility-panel__note,
  .accessibility-panel__bottom { grid-column: 1 / -1; }
}
.accessibility-panel__intro { margin: 0; max-width: 50ch; font-weight: 700; font-size: 1.05rem; }
.accessibility-panel__note { margin: 0; max-width: 60ch; font-size: 0.9rem; font-weight: 600; }
.accessibility-panel__size { display: grid; gap: 0.5rem; }
.accessibility-panel__switches { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; }
.accessibility-panel__bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

/* normal / large / larger */
.size-picker { display: inline-flex; border: 2px solid currentColor; }
.size-picker__button {
  padding: 0.45em 0.9em;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.size-picker__button + .size-picker__button { border-left: 2px solid currentColor; }
.size-picker__button--normal { font-size: 0.85rem; }
.size-picker__button--large { font-size: 1rem; }
.size-picker__button--larger { font-size: 1.15rem; }
.size-picker__button[aria-pressed="true"] { background: var(--bg); color: var(--fg); }

/* on/off switches */
.switch {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.75em;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.switch__track {
  position: relative;
  flex: none;
  width: 2.75em; height: 1.5em;
  border: 2px solid currentColor;
  border-radius: 1em;
  transition: background-color 0.15s;
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 0.15em; left: 0.15em;
  width: 0.95em; height: 0.95em;
  border-radius: 50%;
  background: currentColor;
  transition: transform 0.2s var(--ease), background-color 0.15s;
}
.switch[aria-checked="true"] .switch__track { background: var(--bg); }
.switch[aria-checked="true"] .switch__track::after { transform: translateX(1.25em); background: var(--fg); }
.switch__text { display: grid; padding-top: 0.1em; }
.switch__hint { font-size: 0.8rem; font-weight: 600; opacity: 0.85; }


/* ---- header (logo + menu) ---- */

.site-header {
  display: flex;
  flex-wrap: wrap; /* the swedish and danish menu is longer, so on small phones it goes under the logo */
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding: 1rem var(--gutter);
}
.site-header--home { justify-content: flex-end; } /* home page has no logo, just the menu */

.wordmark {
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -0.04em;
  text-decoration: none;
  white-space: nowrap;
}

.nav { display: flex; gap: clamp(1rem, 3vw, 2.25rem); }
.nav a {
  padding-block: 0.25rem;
  font-stretch: 125%;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  /* the underline that slides in on hover */
  background: linear-gradient(var(--fg), var(--fg)) no-repeat 0 100% / 0 3px;
  transition: background-size 0.25s var(--ease);
}
.nav a:hover,
.nav a[aria-current="page"] { background-size: 100% 3px; }

@media (max-width: 30em) {
  .wordmark { font-size: 1rem; }
  .nav { gap: 0.9rem; }
  .nav a { font-stretch: 100%; font-size: 0.9rem; }
}


/* ---- top of the program, host and why pages ---- */

.page-head {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 4rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
}

.page-title {
  margin: 0;
  font-size: clamp(3.25rem, 14vw, 11rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.86;
}

.page-lead {
  max-width: 38ch;
  margin: clamp(1rem, 2.5vw, 1.75rem) 0 0;
  font-size: clamp(1.1rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 600;
  line-height: 1.3;
}

/* the line with "malmö · 23–29 november" on the left and "all events free" on the right */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: 0.9rem;
  border-top: var(--rule-thick);
  font-weight: 800;
}


/* ---- the dark box near the bottom of the program and why pages ---- */

.cta-band { background: var(--fg); color: var(--bg); }
.cta-band__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
}
.cta-band__title {
  margin: 0 0 0.75rem;
  font-size: clamp(2.25rem, 7vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.92;
}
.cta-band p { max-width: 40ch; margin: 0 0 2rem; font-size: 1.15rem; font-weight: 600; }
.cta-band .btn { background: var(--bg); color: var(--fg); }
.cta-band :focus-visible { outline-color: var(--bg); }


/* ---- footer ---- */

.site-footer { border-top: var(--rule-thick); }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  max-width: var(--max);
  margin-inline: auto;
  padding: 1.25rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom));
  font-weight: 800;
}
.site-footer a { text-decoration-thickness: 2px; text-underline-offset: 0.2em; }


/* ---- the message that pops up at the bottom, like "link copied" ---- */

.message {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 50;
  max-width: calc(100% - 2rem);
  padding: 0.85rem 1.25rem;
  background: var(--fg);
  color: var(--bg);
  font-weight: 800;
  overflow-wrap: anywhere;
  transform: translate(-50%, 150%);
  opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s;
  pointer-events: none;
}
.message.is-showing { transform: translate(-50%, 0); opacity: 1; }


/* ---- the pop-up box, like "remove this event?" (made by CW.ask in common.js) ---- */

.popup {
  width: min(34rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  overflow-y: auto;
  padding: 0;
  border: 0;
  background: var(--fg);
  color: var(--bg);
  box-shadow: 10px 10px 0 var(--pop);
}
.popup[open] { animation: popup-in 0.25s var(--ease); }
@keyframes popup-in { from { transform: translateY(1.5rem); opacity: 0; } }
.popup::backdrop { background: color-mix(in srgb, var(--fg) 70%, transparent); }
.popup :focus-visible { outline-color: var(--bg); }

.popup__box { padding: clamp(1.5rem, 5vw, 2.25rem); }
.popup__title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  font-stretch: 125%;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.popup__text { margin: 0 0 1.5rem; font-weight: 600; }
.popup__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.popup .btn { background: var(--bg); color: var(--fg); }

/* the report reasons */
.popup__choices { display: grid; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0; border: 0; }
.popup__choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 2px solid currentColor;
  font-weight: 700;
  cursor: pointer;
}
/* our own round button, instead of the browser's */
.popup__choice input {
  appearance: none;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: inherit;
}
.popup__choice input:checked { background: radial-gradient(currentColor 40%, transparent 45%); }
.popup__choice input:focus-visible { outline: none; }
.popup__choice:has(input:focus-visible) { outline: 3px solid var(--bg); outline-offset: 3px; }
.popup__choice:hover { background: color-mix(in srgb, var(--bg) 15%, transparent); }
.popup__choice:has(input:checked) { background: var(--bg); color: var(--fg); }
.popup__label { display: block; margin-bottom: 0.4rem; font-size: 0.9rem; font-weight: 700; }
.popup__note {
  display: block;
  width: 100%;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 2px solid currentColor;
  background: none;
  color: inherit;
  font: inherit;
  resize: vertical;
}
.popup__note:focus { outline: none; border-bottom-width: 3px; }


/* ---- fade in when you scroll to it (add data-fade-in to anything) ---- */

.js [data-fade-in] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.7s ease, transform 0.7s var(--ease);
}
.js [data-fade-in].is-in { opacity: 1; transform: none; }


/* ---- if the phone or computer is set to reduce motion ---- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .strike[data-animate]::after { animation: none; transform: none; }
  .js [data-fade-in] { opacity: 1; transform: none; }
}