/* Version A "Avis": newsprint paper, black ink, condensed slab headlines, Molteni orange only in the masthead and the links. */
/* Fonts (SIL Open Font License 1.1, licence texts in /assets/fonts/): Rokkitt by The Rokkitt Project Authors, Newsreader by The Newsreader Project Authors. */
@font-face { font-family: "Rokkitt"; src: url(/assets/fonts/rokkitt-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/assets/fonts/newsreader-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/assets/fonts/newsreader-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/assets/fonts/newsreader-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Squadra Molteni colours, taken from the club's logo and jersey */
  --molteni-orange: #f98d2a;
  --molteni-black: #130d11;
  --molteni-rust-dark: #9a3f15; /* the jersey rust #b75a33, darkened for text */

  --color-paper: #f4efe4;
  --color-ink: #1a1714;
  --color-heading: var(--color-ink);
  --color-muted: #5c564d;
  --color-rule: #c9bfae;
  --color-link: var(--molteni-rust-dark);
  --color-link-hover: var(--color-ink);
  --color-focus: var(--molteni-rust-dark);
  --color-accent: var(--color-ink);
  --color-quote: var(--color-ink);

  --color-header-bg: var(--molteni-orange);
  --color-header-text: var(--color-ink);
  --color-header-edge: var(--molteni-orange);
  --color-header-edge-bottom: var(--molteni-black);
  --header-edge-top: 0;
  --header-edge-bottom: 0.375rem;
  --header-padding: 0.75rem;
  --stripe: none;
  --stripe-height: 0;

  --color-h2-rule: var(--color-ink);
  --h2-rule-width: 1px;
  --h2-rule-gap: 0.375rem;

  --color-nameplate-rule: var(--color-ink);
  --nameplate-rule-top: 0.375rem;
  --nameplate-rule-bottom: 1px;
  --nameplate-transform: uppercase;
  --nameplate-letter-spacing: 0.02em;
  --nameplate-align: center;
  --intro-style: italic;

  --color-tile-bg: transparent;
  --color-tile-hover-bg: #e9e1d0;
  --color-tile-border: var(--color-ink);
  --color-tile-link: var(--color-ink);
  --color-tile-count: var(--color-muted);
  --tile-border-width: 1px;

  /* Year and category chips on the front page (ink on paper 15.57:1, count 6.33:1; on hover 13.72:1 and 5.58:1) */
  --chip-padding-y: var(--space-xs);
  --chip-padding-x: var(--space-s);
  --chip-gap: var(--space-s);
  --font-size-chip: 1rem;
  --chip-fade-width: var(--space-l);
  --chip-focus-room: var(--space-xs);
  --chip-scrollbar-width: thin;
  --chip-mask: linear-gradient(to right, black calc(100% - var(--chip-fade-width)), transparent);
  /* The "År" and "Kategorier" headings are small labels on phones and full headings on wide screens */
  --chip-h2-size: var(--font-size-small);
  --chip-h2-margin: var(--space-s) 0 var(--space-xs);
  --chip-h2-rule-width: 0;
  --chip-h2-rule-gap: 0;

  /* Menu button in the masthead (ink on orange 7.54:1; open: orange on ink 7.54:1) */
  --color-menu-open-bg: var(--color-header-text);
  --color-menu-open-text: var(--color-header-bg);
  --menu-button-border-width: 0; /* no frame: just the icon */
  --font-size-menu-icon: 1.75rem;

  /* Search field next to the menu button, and its results panel under the masthead (Pagefind's own script and styles) */
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: var(--color-link);
  --pagefind-ui-text: var(--color-ink);
  --pagefind-ui-background: var(--color-paper);
  --pagefind-ui-border: var(--color-rule);
  --pagefind-ui-tag: var(--color-tile-hover-bg);
  --pagefind-ui-border-width: var(--border-width);
  --pagefind-ui-border-radius: 0;
  --pagefind-ui-image-border-radius: 0;
  --pagefind-ui-font: var(--font-body);
  --search-height: 2.5rem; /* the menu button is as tall as the field */
  --font-size-search: 1rem; /* at least 16px, so phones do not zoom into the field */
  --color-search-field-border: var(--color-header-text);
  --color-search-field-bg: var(--color-header-bg); /* the field sits in the orange header like the menu button */
  --color-search-placeholder: var(--color-header-text); /* ink on orange 7.54:1 */
  --search-placeholder-opacity: 1;
  --search-field-border-width: 2px; /* the line under the search field */
  --search-icon-indent: var(--space-s);
  --search-icon-room: 2.25rem;
  --search-clear-room: 4.5rem;
  --search-cell: 1 / 1;
  --search-panel-top: calc(100% + var(--header-edge-bottom));
  /* the panel fills the screen below the masthead, so no page content shows under it */
  --header-height: calc(var(--header-edge-top) + var(--header-padding) + var(--search-height) + var(--header-padding) + var(--header-edge-bottom));
  --search-panel-height: calc(100dvh - var(--header-height));
  --color-search-mark-bg: #f6cda3; /* Molteni orange 35% on paper; ink on it 12:1 */
  --color-search-mark-text: var(--color-ink);
  --color-search-panel-edge: var(--color-ink);
  --search-panel-edge-width: var(--border-width-thick);
  --z-search-panel: 10;

  /* Footer (rust links on paper 5.92:1) */
  --color-footer-rule: var(--color-ink);
  --footer-rule-width: var(--border-width-thick);

  /* Band under the masthead (paper text on rust: contrast 5.92:1) */
  --color-band-bg: var(--molteni-rust-dark);
  --color-band-text: var(--color-paper);
  --color-band-link: var(--color-paper);
  --color-band-edge: var(--molteni-black);
  --band-edge-width: 0.25rem;
  --band-padding: var(--space-s);
  --font-size-band: 1rem;

  /* Højdepunkter cards on the front page */
  --color-card-bg: transparent;
  --color-card-hover-bg: var(--color-tile-hover-bg);
  --color-card-border: var(--color-ink);
  --card-border-width: 1px;
  --card-columns: 2;
  --wide-width: 56rem;
  --screen-width: 100vw;
  --centre: 50%;
  --centre-back: -50%;
  --card-gap: var(--space-m);
  --card-image-ratio: 3 / 2;
  --font-size-card-title: 1.0625rem;

  /* Location label under a card image: muted on paper 6.33:1 */
  --color-place-text: var(--color-muted);
  --font-size-place: 0.875rem;
  --flag-height: 0.75em; /* about the height of a capital letter */
  --line-height-place: 1;

  --color-panel-bg: #ebe3d2;
  --color-panel-border: var(--color-ink);
  --panel-border-width: 2px;

  --font-body: "Newsreader", Georgia, "Times New Roman", serif;
  --font-heading: "Rokkitt", "Rockwell", Georgia, serif;
  --font-nav: var(--font-heading);
  --font-meta: var(--font-body);
  --font-caption: var(--font-body);
  --font-weight-heading: 700;
  --font-weight-nav: 700;
  --heading-variation: normal;
  --nav-variation: normal;
  --heading-transform: none;
  --heading-letter-spacing: normal;
  --nav-transform: uppercase;
  --nav-letter-spacing: 0.03em;
  --meta-transform: uppercase;
  --meta-letter-spacing: 0.06em;
  --caption-style: italic;
  --quote-style: normal;

  --font-size-base: 1.125rem;
  --font-size-small: 0.9375rem;
  --font-size-nav: 0.9375rem;
  --font-size-h1: 2.25rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1.25rem;
  --font-size-nameplate: 2.75rem;
  --line-height: 1.6;
  --line-height-heading: 1.1;

  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 2rem;
  --border-width: 1px;
  --border-width-thick: 3px;
  --leader-width: 2px;
  --link-underline-width: 1px;
  --link-underline-offset: 0.15em;
  --focus-width: 2px;
  --focus-offset: 2px;
  --page-max-width: 40rem;
  --gallery-min: 9rem;
  --gallery-ratio: 4 / 3;
  --player-ratio: 16 / 9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
}

main, .header-row, .site-footer nav {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--space-m);
}

a {
  color: var(--color-link);
  text-decoration-thickness: var(--link-underline-width);
  text-underline-offset: var(--link-underline-offset);
}
a:hover { color: var(--color-link-hover); }
a:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-variation-settings: var(--heading-variation);
  text-transform: var(--heading-transform);
  letter-spacing: var(--heading-letter-spacing);
  line-height: var(--line-height-heading);
  color: var(--color-heading);
}
h1 { font-size: var(--font-size-h1); margin: var(--space-m) 0 var(--space-s); }
h2 {
  font-size: var(--font-size-h2);
  margin: var(--space-l) 0 var(--space-s);
  padding-top: var(--h2-rule-gap);
  border-top: var(--h2-rule-width) solid var(--color-h2-rule);
}
h3 { font-size: var(--font-size-h3); margin: var(--space-l) 0 var(--space-s); }

/* Masthead: the band at the top of every page with the menu */
.site-header {
  position: relative;
  background: var(--color-header-bg);
  color: var(--color-header-text);
  border-top: var(--header-edge-top) solid var(--color-header-edge);
  border-bottom: var(--header-edge-bottom) solid var(--color-header-edge-bottom);
}
.site-header::after {
  content: "";
  display: block;
  height: var(--stripe-height);
  background: var(--stripe);
}
.header-row { display: flex; align-items: flex-start; gap: var(--space-s); padding-top: var(--header-padding); padding-bottom: var(--header-padding); }
.header-row nav { flex: none; }
.site-header nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); line-height: var(--line-height-heading); }
.site-header nav a {
  color: var(--color-header-text);
  font-family: var(--font-nav);
  font-weight: var(--font-weight-nav);
  font-variation-settings: var(--nav-variation);
  font-size: var(--font-size-nav);
  text-transform: var(--nav-transform);
  letter-spacing: var(--nav-letter-spacing);
  text-decoration: none;
}
.site-header nav a:hover { text-decoration: underline; }
.site-header nav a:focus-visible { outline-color: var(--color-header-text); }

/* Menu: a button that opens the list of links, the same on every screen, without script */
.menu summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  min-height: var(--search-height);
  padding: var(--space-xs) var(--space-s);
  border: var(--menu-button-border-width) solid var(--color-header-text);
  color: var(--color-header-text);
  font-family: var(--font-nav);
  font-weight: var(--font-weight-nav);
  font-variation-settings: var(--nav-variation);
  font-size: var(--font-size-nav);
  text-transform: var(--nav-transform);
  letter-spacing: var(--nav-letter-spacing);
  line-height: var(--line-height-heading);
  list-style: none;
  cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { font-size: var(--font-size-menu-icon); }
.menu summary:focus-visible { outline: var(--focus-width) solid var(--color-header-text); outline-offset: var(--focus-offset); }
.menu[open] summary { background: var(--color-menu-open-bg); color: var(--color-menu-open-text); }
.menu ul { flex-direction: column; padding-top: var(--space-s); }
.menu a { display: block; padding: var(--space-xs) 0; }

/* Search: Pagefind draws the field into #search. The field takes the rest of the header row;
   icon, field and clear button share one grid cell, so the results panel can be placed against the whole masthead. */
.site-search { flex: auto; min-width: 0; }
.site-search .pagefind-ui__form { position: static; display: grid; }
.site-search .pagefind-ui__form::before,
.site-search .pagefind-ui__search-input,
.site-search .pagefind-ui__search-clear { grid-area: var(--search-cell); }
.site-search .pagefind-ui__form::before { position: static; align-self: center; margin-left: var(--search-icon-indent); }
.site-search .pagefind-ui__search-input {
  position: static; /* paints in source order, under the clear button */
  height: var(--search-height);
  padding: 0 var(--search-clear-room) 0 var(--search-icon-room);
  border: 0;
  border-bottom: var(--search-field-border-width) solid var(--color-search-field-border);
  background: var(--color-search-field-bg);
  color: var(--color-header-text);
  font-family: var(--pagefind-ui-font);
  font-size: var(--font-size-search);
}
.site-search .pagefind-ui__search-input::placeholder {
  color: var(--color-search-placeholder);
  opacity: var(--search-placeholder-opacity);
  font-family: var(--font-nav);
  font-weight: var(--font-weight-nav);
  font-size: var(--font-size-nav);
  text-transform: var(--nav-transform);
  letter-spacing: var(--nav-letter-spacing);
}
.site-search .pagefind-ui__search-clear { position: static; justify-self: end; align-self: stretch; height: auto; margin: var(--search-field-border-width); border: 0; background: var(--color-search-field-bg); color: var(--color-header-text); }
/* Results: a panel under the masthead across the whole page, above the content, scrolling on its own */
.site-search .pagefind-ui__drawer {
  position: absolute;
  top: var(--search-panel-top);
  left: 0;
  right: 0;
  z-index: var(--z-search-panel);
  height: var(--search-panel-height);
  overflow-y: auto;
  padding: 0 var(--space-m) var(--space-m);
  background: var(--color-paper);
  border-bottom: var(--search-panel-edge-width) solid var(--color-search-panel-edge);
}
.site-search .pagefind-ui__results-area { max-width: var(--page-max-width); margin-left: auto; margin-right: auto; }
.site-search mark { background: var(--color-search-mark-bg); color: var(--color-search-mark-text); }
.site-search .pagefind-ui__result-title { font-family: var(--font-heading); line-height: var(--line-height-heading); }

/* Footer: the menu links again, on every page */
.site-footer { margin-top: var(--space-l); border-top: var(--footer-rule-width) solid var(--color-footer-rule); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); line-height: var(--line-height-heading); }
.site-footer a {
  font-family: var(--font-nav);
  font-weight: var(--font-weight-nav);
  font-variation-settings: var(--nav-variation);
  font-size: var(--font-size-nav);
  text-transform: var(--nav-transform);
  letter-spacing: var(--nav-letter-spacing);
}

/* Band under the masthead: one line of news with a link to Facebook, wraps on a phone */
.facebook-band {
  margin: 0;
  padding: var(--band-padding) var(--space-m);
  background: var(--color-band-bg);
  color: var(--color-band-text);
  border-bottom: var(--band-edge-width) solid var(--color-band-edge);
  font-size: var(--font-size-band);
  line-height: var(--line-height-heading);
  text-align: center;
}
.facebook-band a { color: var(--color-band-link); font-weight: var(--font-weight-nav); }
.facebook-band a:hover { color: var(--color-band-link); text-decoration-thickness: var(--border-width-thick); }
.facebook-band a:focus-visible { outline-color: var(--color-band-link); }

/* Date, author, categories and tags under an article title */
.meta {
  color: var(--color-muted);
  font-family: var(--font-meta);
  font-size: var(--font-size-small);
  text-transform: var(--meta-transform);
  letter-spacing: var(--meta-letter-spacing);
  margin: 0 0 var(--space-s);
}
.count, time { color: var(--color-muted); font-size: var(--font-size-small); }

/* Front page: the name as a newspaper nameplate, the intro line as its dateline */
h1:has(+ .intro) {
  font-size: var(--font-size-nameplate);
  text-transform: var(--nameplate-transform);
  letter-spacing: var(--nameplate-letter-spacing);
  text-align: var(--nameplate-align);
  margin: var(--space-m) 0 0;
  padding: var(--space-s) 0;
  border-top: var(--nameplate-rule-top) solid var(--color-nameplate-rule);
  border-bottom: var(--nameplate-rule-bottom) solid var(--color-nameplate-rule);
}
.intro {
  font-family: var(--font-meta);
  font-style: var(--intro-style);
  text-align: var(--nameplate-align);
  color: var(--color-muted);
  margin: 0 0 var(--space-l);
  padding: var(--space-s) 0;
  border-bottom: var(--border-width) solid var(--color-nameplate-rule);
}

ul.article-list, ul.tag-list { list-style: none; padding: 0; }
ul.article-list li, ul.tag-list li {
  padding: var(--space-s) 0;
  border-bottom: var(--border-width) solid var(--color-rule);
}
ul.article-list time { display: block; font-family: var(--font-meta); }

/* Front page years and categories: small chips, the whole chip is the link */
ul.chips {
  list-style: none;
  margin: 0 0 var(--space-s);
  padding: var(--chip-focus-room) 0;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: var(--chip-gap);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: var(--chip-scrollbar-width);
  -webkit-mask-image: var(--chip-mask);
  mask-image: var(--chip-mask);
}
ul.chips li { flex: none; white-space: nowrap; scroll-snap-align: start; }
.chip-section h2 {
  font-size: var(--chip-h2-size);
  margin: var(--chip-h2-margin);
  padding-top: var(--chip-h2-rule-gap);
  border-top: var(--chip-h2-rule-width) solid var(--color-h2-rule);
}
ul.chips li {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  padding: var(--chip-padding-y) var(--chip-padding-x);
  background: var(--color-tile-bg);
  border: var(--tile-border-width) solid var(--color-tile-border);
  font-size: var(--font-size-chip);
  line-height: var(--line-height-heading);
}
ul.chips li:hover { background: var(--color-tile-hover-bg); }
ul.chips a {
  color: var(--color-tile-link);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  font-variation-settings: var(--heading-variation);
  text-decoration: none;
}
ul.chips a::after { content: ""; position: absolute; inset: 0; }
ul.chips span { color: var(--color-tile-count); font-size: var(--font-size-chip); font-family: var(--font-meta); }

/* Front page "Højdepunkter": one card per chosen article, the whole card is the link */
ul.cards {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--card-columns), minmax(0, 1fr));
  gap: var(--card-gap);
}
ul.cards li { background: var(--color-card-bg); border: var(--card-border-width) solid var(--color-card-border); }
ul.cards li:hover { background: var(--color-card-hover-bg); }
ul.cards a { display: block; height: 100%; color: var(--color-ink); text-decoration: none; }
.card-image { display: block; position: relative; }
img.photo { display: block; width: 100%; aspect-ratio: var(--card-image-ratio); object-fit: cover; }
ul.cards h3 { font-size: var(--font-size-card-title); margin: var(--space-xs) var(--space-s); }
ul.cards time { display: block; margin: 0 var(--space-s) var(--space-s); font-family: var(--font-meta); }

/* Location label under the card image: flag and country, the flag centred on the text */
.place {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-s) var(--space-s) 0;
  color: var(--color-place-text);
  font-family: var(--font-meta);
  font-size: var(--font-size-place);
  line-height: var(--line-height-place);
}
.place img { display: block; height: var(--flag-height); width: auto; }

/* Categories and tags: name, a dotted leader, then the count */
ul.tag-list a { display: flex; flex: auto; align-items: baseline; gap: var(--space-s); }
ul.tag-list li { display: flex; align-items: baseline; gap: var(--space-s); }
ul.tag-list a::after {
  content: "";
  flex: auto;
  border-bottom: var(--leader-width) dotted var(--color-rule);
}

img, video { max-width: 100%; height: auto; }
img.featured { display: block; margin: var(--space-m) 0; }

figure { margin: var(--space-m) 0; }
figure img { display: block; }
figcaption {
  color: var(--color-muted);
  font-family: var(--font-caption);
  font-style: var(--caption-style);
  font-size: var(--font-size-small);
  padding-top: var(--space-xs);
}

.body blockquote {
  margin: var(--space-m) 0;
  padding-left: var(--space-m);
  border-left: var(--border-width-thick) solid var(--color-accent);
  color: var(--color-quote);
  font-style: var(--quote-style);
}

.body hr { border: 0; border-top: var(--border-width) solid var(--color-rule); margin: var(--space-l) 0; }

.body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.body td, .body th { border: var(--border-width) solid var(--color-rule); padding: var(--space-s); }

/* WordPress one-cell tables were fact boxes: show them as a boxed panel */
.body table:has(td:only-child) {
  margin: var(--space-l) 0;
  padding: var(--space-m);
  background: var(--color-panel-bg);
  border: var(--panel-border-width) solid var(--color-panel-border);
}
.body td:only-child { display: block; border: 0; padding: 0; }
.body td:only-child h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.body td:only-child p:last-child { margin-bottom: 0; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--gallery-min), 1fr));
  gap: var(--space-s);
  margin: var(--space-m) 0;
}
.gallery figure { margin: 0; }
.gallery img { display: block; width: 100%; aspect-ratio: var(--gallery-ratio); object-fit: cover; }

.player { position: relative; aspect-ratio: var(--player-ratio); margin: var(--space-m) 0; }
.player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

.prev-next { display: flex; flex-direction: column; gap: var(--space-s); margin-top: var(--space-l); padding-top: var(--space-m); border-top: var(--border-width) solid var(--color-rule); }
.prev-next .next { text-align: right; }

@media (min-width: 48rem) {
  :root {
    --font-size-base: 1.25rem;
    --font-size-small: 1rem;
    --font-size-h1: 3.25rem;
    --font-size-h2: 1.75rem;
    --font-size-nameplate: 5rem;
    --header-padding: 1rem;
    --gallery-min: 12rem;
    --card-columns: 3;
    --font-size-card-title: 1.25rem;
    --font-size-nav: 1.0625rem;
    --chip-h2-size: var(--font-size-h2);
    --chip-h2-margin: var(--space-l) 0 var(--space-s);
    --chip-h2-rule-width: var(--h2-rule-width);
    --chip-h2-rule-gap: var(--h2-rule-gap);
  }
  ul.chips { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; -webkit-mask-image: none; mask-image: none; padding: 0; margin: 0; }
  /* Højdepunkter is wider than the text column, centred on it, never wider than the screen */
  #hoejdepunkter { width: var(--wide-width); max-width: calc(var(--screen-width) - var(--space-m) - var(--space-m)); margin-left: var(--centre); transform: translateX(var(--centre-back)); }
  .prev-next { flex-direction: row; justify-content: space-between; }
}