/* ==========================================================================
   Bølgebrud website styles
   Built on the design system: assets/css/tokens.css and assets/fonts/fonts.css
   are loaded first. Use only the --bb-* variables from tokens.css here:
   never a raw colour code, font or size that isn't in the design system.
   Mobile first. Breakpoints (from tokens.css): 30em, 48em, 68em.
   ========================================================================== */

/* ---- Base ---- */

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

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

body {
  margin: 0;
  background: var(--bb-bg);
  color: var(--bb-text);
  font-family: var(--bb-font-body);
  font-size: var(--bb-text-base);
  font-weight: var(--bb-weight-body);
  line-height: var(--bb-leading-body);
}

img { max-width: 100%; height: auto; display: block; }

p, ul, ol, dl { margin: 0 0 var(--bb-space-4); max-width: var(--bb-measure); }

strong, b { font-weight: var(--bb-weight-strong); }

a {
  color: var(--bb-link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  transition: color var(--bb-duration-fast) var(--bb-ease-wave);
}
a:hover { color: var(--bb-link-hover); }

:focus-visible {
  outline: var(--bb-border-thick) solid var(--bb-focus);
  outline-offset: 3px;
  border-radius: var(--bb-radius-sm);
}

/* Headlines: Epilogue Black in capitals, short and big.
   Never put the name Bølgebrud in these: its capitals belong only in the logo. */
h1, h2, .display {
  margin: 0 0 var(--bb-space-5);
  color: var(--bb-heading);
  font-family: var(--bb-font-display);
  font-weight: var(--bb-weight-display);
  line-height: var(--bb-leading-tight);
  letter-spacing: var(--bb-tracking-display);
  text-transform: uppercase;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: var(--bb-text-3xl); }
h2 { font-size: var(--bb-text-2xl); }

/* Smaller headings stay in DM Sans */
h3 {
  margin: 0 0 var(--bb-space-2);
  color: var(--bb-heading);
  font-size: var(--bb-text-lg);
  font-weight: var(--bb-weight-strong);
  line-height: var(--bb-leading-snug);
}

.lead { font-size: var(--bb-text-lg); }
.muted { color: var(--bb-text-muted); }

/* ---- Layout ---- */

.wrap {
  width: 100%;
  max-width: var(--bb-container);
  margin-inline: auto;
  padding-inline: var(--bb-gutter);
}

.section { padding-block: var(--bb-space-8); }
.section > .wrap > :last-child { margin-bottom: 0; }
.section--alt { background: var(--bb-bg-alt); }

.skip {
  position: absolute;
  left: var(--bb-space-4);
  top: -10rem;
  z-index: 100;
  padding: var(--bb-space-2) var(--bb-space-4);
  background: var(--bb-pink-200);
  color: var(--bb-navy);
  border-radius: var(--bb-radius-pill);
  font-weight: var(--bb-weight-strong);
}
.skip:focus { top: var(--bb-space-4); }

/* ---- Buttons: pills, as in the design system ---- */

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-3);
  margin-top: var(--bb-space-6);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-2);
  padding: 0.7em 1.3em;
  border: var(--bb-border-thick) solid transparent;
  border-radius: var(--bb-radius-pill);
  background: var(--bb-button-bg);
  color: var(--bb-button-text);
  font-family: inherit;
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-weight-strong);
  line-height: var(--bb-leading-snug);
  text-decoration: none;
  transition: background var(--bb-duration-fast) var(--bb-ease-wave);
}
.btn:hover { background: var(--bb-button-hover); color: var(--bb-button-text); }

/* Orange fill with navy text. Only on navy or cobalt, never on pink */
.btn--accent { background: var(--bb-accent); color: var(--bb-on-accent); }
.btn--accent:hover { background: var(--bb-orange-600); color: var(--bb-on-accent); }

.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: transparent; color: var(--bb-link-hover); }

/* ---- Header ---- */

.site-header { border-bottom: var(--bb-border-thin) solid var(--bb-border); }

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-3) var(--bb-space-5);
  padding-block: var(--bb-space-4);
}

.site-header__logo { display: block; padding-block: var(--bb-space-1); }
.site-header__logo img { height: 2.25rem; width: auto; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bb-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav { position: relative; }

.site-nav a:not(.btn) {
  display: block;
  padding: 0.45em 0.8em;
  color: var(--bb-text);
  font-size: var(--bb-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--bb-duration-base) var(--bb-ease-wave);
}
.site-nav a:not(.btn):hover,
.site-nav a[aria-current="page"] { color: var(--bb-link); }

/* Without JavaScript the current page gets a plain orange underline */
.site-nav a[aria-current="page"] {
  text-decoration: underline var(--bb-border-thick) var(--bb-accent);
  text-underline-offset: 0.45em;
}

/* With JavaScript (script.js adds .has-ink): one orange line glides to the link
   you point at or tab to, and settles back under the current page.
   Adapted from "Underline Follow" (Forever AI Components), rebuilt with our tokens. */
.site-nav.has-ink a[aria-current="page"] { text-decoration: none; }
.site-nav__ink {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: var(--bb-border-thick);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-accent);
  box-shadow: var(--bb-glow-accent); /* soft stage light: navy header only */
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--bb-duration-slow) var(--bb-ease-wave),
    width var(--bb-duration-slow) var(--bb-ease-wave),
    opacity var(--bb-duration-base) var(--bb-ease-wave);
}
.site-nav__ink.is-visible { opacity: 1; }
.site-nav__ink.is-instant { transition: none; }
.site-nav .btn { margin-left: var(--bb-space-2); padding: 0.45em 1em; }

/* ---- Hero: navy, with the page's one graphic as a thin band along its bottom edge ---- */

.hero { padding-top: var(--bb-space-8); }
.hero h1 { max-width: 16ch; }
.hero .lead { max-width: 58ch; }

.eyebrow {
  margin-bottom: var(--bb-space-4);
  color: var(--bb-text-muted);
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Full width, natural proportions: never stretched. The divider files are 1600 × 90 */
.band { margin-top: var(--bb-space-8); padding-bottom: var(--bb-space-5); overflow: hidden; } /* navy gap: the orange in the graphic never touches a pink section */
.band img { width: 100%; min-width: 40rem; height: auto; }

/* ---- Our line, big, on pink ---- */

.our-line {
  margin: 0;
  max-width: none;
  color: var(--bb-heading);
  font-family: var(--bb-font-display);
  font-size: var(--bb-text-2xl);
  font-weight: var(--bb-weight-display);
  line-height: var(--bb-leading-tight);
  letter-spacing: var(--bb-tracking-display);
  text-transform: uppercase;
}
/* The approved four-line break: Fordi kunsten / kun kan leve, / hvis kunstneren / kan leve af kunsten */
.our-line span { display: block; }

/* Photo beside text */
.split { display: grid; gap: var(--bb-space-6); align-items: center; }
.split .photo { max-width: 26rem; margin: 0; }

/* ---- Cards ---- */

.grid { display: grid; gap: var(--bb-space-5); margin-top: var(--bb-space-6); }

.card {
  display: flex;
  flex-direction: column;
  padding: var(--bb-space-5);
  background: var(--bb-surface);
  border: var(--bb-border-thin) solid var(--bb-border);
  border-radius: var(--bb-radius-lg);
}
.card p:last-child { margin-bottom: 0; }
.card .more { margin-top: auto; padding-top: var(--bb-space-3); font-weight: var(--bb-weight-strong); }

/* ---- Photos: soft shapes. Arch is the portrait crop ---- */

.photo {
  position: relative;
  margin: 0 0 var(--bb-space-4);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--bb-radius-lg);
  background: var(--bb-cobalt-700);
}
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--arch { aspect-ratio: 4 / 5; border-radius: var(--bb-radius-arch); }
.photo img.focus-upper { object-position: 50% 30%; } /* keeps the performer in frame in tall photos */

/* Until the real photos arrive: cobalt field with the pink B */
.photo--placeholder {
  display: flex;
  align-items: flex-end;
  padding: var(--bb-space-4);
  background: var(--bb-cobalt-700) url("assets/logo/bolgebrud-mark-pink.svg") no-repeat center 42% / 22%;
  color: var(--bb-pink-200);
  font-size: var(--bb-text-xs);
  font-weight: var(--bb-weight-strong);
}

/* ---- Events ---- */

.events { display: grid; gap: var(--bb-space-6); margin: var(--bb-space-6) 0 0; padding: 0; list-style: none; max-width: none; }
.event h3 { margin-top: var(--bb-space-1); }
.event p { margin-bottom: var(--bb-space-2); }
.event .when { color: var(--bb-text-muted); font-size: var(--bb-text-sm); margin-bottom: 0; }

/* ---- Offer sections (tilbud) ---- */

.offer + .offer { border-top: var(--bb-border-thin) solid var(--bb-border); }
.offer h2 { scroll-margin-top: var(--bb-space-5); }
.offer ul { padding-left: 1.2em; }
.offer li + li { margin-top: var(--bb-space-2); }

/* ---- Contact ---- */

.contact-list { margin: 0; }
.contact-list dt { font-weight: var(--bb-weight-strong); }
.contact-list dd { margin: 0 0 var(--bb-space-4); }
.big-link { font-size: var(--bb-text-lg); font-weight: var(--bb-weight-strong); overflow-wrap: anywhere; }

/* ---- Footer ---- */

.site-footer { padding-block: var(--bb-space-8); font-size: var(--bb-text-sm); }
.site-footer__grid { display: grid; gap: var(--bb-space-6); }
.site-footer__line img { width: 18rem; max-width: 100%; } /* tagline lockup: at least 260 px wide */
.site-footer h2 {
  margin-bottom: var(--bb-space-3);
  font-family: var(--bb-font-body);
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-weight-strong);
  line-height: var(--bb-leading-snug);
  text-transform: none; /* the name is only written in capitals inside the logo */
}
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li + li { margin-top: var(--bb-space-1); }
.site-footer address { font-style: normal; }
.site-footer p { margin-bottom: var(--bb-space-1); }

/* ---- Placeholders ----
   Text and data still to come. Everything marked data-placeholder must be gone
   before launch (see README: "Before launch"). */

.placeholder {
  padding: var(--bb-space-2) var(--bb-space-3);
  border: var(--bb-border-thin) dashed var(--bb-border-strong);
  border-radius: var(--bb-radius-sm);
  color: var(--bb-text-muted);
  font-style: italic;
}
span.placeholder { padding: 0 var(--bb-space-1); }

/* ---- Members ---- */

.members {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* four members: 2 + 2, or 4 in a row on wide screens */
  gap: var(--bb-space-6) var(--bb-space-4);
  margin: var(--bb-space-6) 0 0;
  padding: 0;
  max-width: none;
  list-style: none;
}
.member__link { display: block; color: inherit; text-decoration: none; }
.member__link .photo { transition: transform var(--bb-duration-base) var(--bb-ease-wave); }
.member__link:hover .photo { transform: translateY(-4px); }
.member__link h3 { margin-top: var(--bb-space-2); }
.member__link:hover h3 { text-decoration: underline; text-underline-offset: 0.18em; }
.member__role { margin: 0; color: var(--bb-text-muted); font-size: var(--bb-text-sm); }

.tags { display: flex; flex-wrap: wrap; gap: var(--bb-space-2); padding: 0; list-style: none; }
.tags li {
  padding: var(--bb-space-1) var(--bb-space-4);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-pink-200); /* pink chip with navy text, on light sections */
  color: var(--bb-navy);
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-weight-strong);
}

/* ---- Åbenhed: contents, tables, decisions, documents ---- */

.open { scroll-margin-top: var(--bb-space-4); }

.toc__title {
  margin-bottom: var(--bb-space-3);
  font-family: var(--bb-font-body);
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-weight-strong);
  letter-spacing: 0.06em;
}
.toc ul { display: flex; flex-wrap: wrap; gap: var(--bb-space-2); padding: 0; list-style: none; max-width: none; }
.toc a {
  display: inline-block;
  padding: var(--bb-space-1) var(--bb-space-4);
  border: var(--bb-border-thin) solid var(--bb-border);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-surface);
  font-size: var(--bb-text-sm);
  font-weight: var(--bb-weight-strong);
  text-decoration: none;
}

.table-wrap { overflow-x: auto; margin-bottom: var(--bb-space-5); }
.data-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--bb-text-sm);
}
.data-table caption {
  margin-bottom: var(--bb-space-3);
  color: var(--bb-text-muted);
  font-weight: var(--bb-weight-strong);
  text-align: left;
}
.data-table th,
.data-table td {
  padding: var(--bb-space-3) var(--bb-space-4) var(--bb-space-3) 0;
  border-bottom: var(--bb-border-thin) solid var(--bb-border);
  text-align: left;
  vertical-align: top;
}
.data-table thead th { border-bottom-color: var(--bb-border-strong); }
.data-table tbody th { font-weight: var(--bb-weight-strong); }
.data-table tr[data-placeholder] td { color: var(--bb-text-muted); }

.decisions { margin: var(--bb-space-6) 0 0; padding: 0; list-style: none; }
.decisions li { padding: var(--bb-space-4) 0; border-top: var(--bb-border-thin) solid var(--bb-border); }
.decision__date { margin-bottom: var(--bb-space-1); color: var(--bb-text-muted); font-size: var(--bb-text-sm); }

.doc-list { padding: 0; list-style: none; }
.doc-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--bb-space-2) var(--bb-space-4);
  padding: var(--bb-space-3) 0;
  border-bottom: var(--bb-border-thin) solid var(--bb-border);
}

.plain-list { padding-left: 1.2em; }
.plain-list li + li { margin-top: var(--bb-space-2); }

/* ---- Wider screens ---- */

@media (min-width: 48em) {
  .section { padding-block: var(--bb-space-9); }
  .hero { padding-top: var(--bb-space-9); }
  h1 { font-size: var(--bb-text-4xl); }
  .our-line { font-size: var(--bb-text-3xl); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 2fr 3fr; gap: var(--bb-space-8); }
  .events { grid-template-columns: repeat(2, 1fr); }
  .events--three { grid-template-columns: repeat(3, 1fr); }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .band img { min-width: 0; }
}

@media (min-width: 68em) {
  .events { grid-template-columns: repeat(3, 1fr); }
  .members { grid-template-columns: repeat(4, 1fr); gap: var(--bb-space-6); }
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ---- Client band: "Tidligere kunder" ----
   Client logos on white cards. Links open the client's site in a new window. On wide
   screens the cards scroll slowly in a seamless loop, pausing on hover, keyboard focus
   or the play/pause button. On phones, and for visitors who have turned off
   animation, it is a still grid. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.clients__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bb-space-4);
  margin-bottom: var(--bb-space-6);
}
.section.clients > .clients__head > h2 { margin: 0; }

.marquee {
  /* The loop's speed: a long, calm drift. Not a token: the design system's durations
     are for short interface movements. */
  --marquee-duration: 70s;
  overflow: hidden;
}

.marquee__track { padding-inline: var(--bb-gutter); }

.marquee__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bb-space-4);
  margin: 0;
  padding: 0;
  max-width: none;
  list-style: none;
}
/* Phones and reduced motion: a still grid of cards */
.marquee__list:not(.marquee__copy) { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }

/* Each client is a white card with its logo in the client's own colours (never recoloured) */
.client__card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.5rem;
  padding: var(--bb-space-3) var(--bb-space-5);
  background: var(--bb-white);
  border-radius: var(--bb-radius-md);
  color: var(--bb-navy);
  text-decoration: none;
  transition: transform var(--bb-duration-base) var(--bb-ease-wave);
}
a.client__card:hover { transform: translateY(-2px); }
.client__card img { width: auto; max-width: min(10rem, 100%); max-height: 3.25rem; object-fit: contain; }
.client__name { font-weight: var(--bb-weight-strong); font-size: var(--bb-text-base); white-space: nowrap; }

.marquee__copy { display: none; }

.marquee__toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: var(--bb-border-thin) solid var(--bb-border-strong);
  border-radius: var(--bb-radius-pill);
  background: transparent;
  color: var(--bb-link);
  cursor: pointer;
  transition: background var(--bb-duration-fast) var(--bb-ease-wave), color var(--bb-duration-fast) var(--bb-ease-wave);
}
.marquee__toggle:hover { background: var(--bb-button-bg); color: var(--bb-button-text); }
.marquee__toggle svg { width: 1rem; height: 1rem; fill: currentColor; }
.marquee__toggle .icon-play,
.marquee__toggle[aria-pressed="true"] .icon-pause { display: none; }
.marquee__toggle[aria-pressed="true"] .icon-play { display: block; }
.marquee__toggle[hidden] { display: none; }

@media (min-width: 48em) and (prefers-reduced-motion: no-preference) {
  .marquee__track {
    display: flex;
    width: max-content;
    padding-inline: 0;
    animation: marquee var(--marquee-duration) linear infinite;
  }
  .marquee__list { flex-wrap: nowrap; padding-right: var(--bb-space-4); }
  .client__card { min-width: 11rem; }
  .marquee__list:not(.marquee__copy),
  .marquee__copy { display: flex; }
  .marquee:hover .marquee__track,
  .marquee:focus-within .marquee__track,
  .marquee.is-paused .marquee__track { animation-play-state: paused; }
}

/* No movement, so no stop button: on phones and with reduced motion */
@media (max-width: 47.99em), (prefers-reduced-motion: reduce) {
  .marquee__toggle { display: none !important; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}