/*
  Site layout for opensportsdata.org.
  Components and tokens come from Designsystemet (designsystemet.css + osda-theme.css).
  This file only adds page layout and a few page-specific patterns, using Designsystemet tokens.
*/

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@layer site {
  :root {
    --site-max: 72rem;
    --site-gutter: var(--ds-size-6);
    --site-section: var(--ds-size-22);
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: var(--ds-size-18); }
  body {
    margin: 0;
    font-family: var(--ds-font-family), system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  img, svg { display: block; max-width: 100%; }

  .container {
    max-width: var(--site-max);
    margin-inline: auto;
    padding-inline: var(--site-gutter);
  }

  /* Header */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--ds-color-neutral-background-default);
    border-bottom: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
  }
  .site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-size-6);
    min-height: var(--ds-size-18);
  }
  .brand {
    display: flex;
    align-items: center;
    gap: var(--ds-size-3);
    color: var(--ds-color-neutral-text-default);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .brand img { width: 28px; height: 28px; }
  .brand-mark { color: var(--ds-color-accent-base-default); width: 28px; height: 28px; }
  .site-nav ul {
    display: flex;
    gap: var(--ds-size-6);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .site-nav a {
    color: var(--ds-color-neutral-text-subtle);
    text-decoration: none;
    font-size: var(--ds-body-sm-font-size);
  }
  .site-nav a:hover { color: var(--ds-color-neutral-text-default); text-decoration: underline; }

  /* Status banner */
  .status-bar {
    background: var(--ds-color-accent-background-tinted);
    border-bottom: var(--ds-border-width-default) solid var(--ds-color-accent-border-subtle);
    color: var(--ds-color-accent-text-default);
    font-size: var(--ds-body-sm-font-size);
  }
  .status-bar .container {
    display: flex;
    gap: var(--ds-size-2);
    align-items: center;
    padding-block: var(--ds-size-2);
    flex-wrap: wrap;
  }
  .status-bar strong { font-weight: 600; }

  /* Sections */
  .section { padding-block: var(--site-section); }
  .section + .section { border-top: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle); }
  .section--tinted { background: var(--ds-color-neutral-background-tinted); }
  .section-head { max-width: 46rem; margin-bottom: var(--ds-size-12); }
  .section-head > * + * { margin-top: var(--ds-size-4); }
  .overline {
    display: block;
    font-size: var(--ds-body-xs-font-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-color-accent-text-subtle);
  }
  .measure { max-width: 42rem; }
  .mt-1 { margin-top: var(--ds-size-1); }
  .mt-2 { margin-top: var(--ds-size-2); }
  .mt-3 { margin-top: var(--ds-size-3); }
  .mt-4 { margin-top: var(--ds-size-4); }
  .mt-12 { margin-top: var(--ds-size-12); }

  /* Hero */
  .hero { padding-block: var(--ds-size-22) var(--site-section); }
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--ds-size-15);
    align-items: start;
  }
  .hero h1 { letter-spacing: -0.025em; text-wrap: balance; }
  .hero-text > * + * { margin-top: var(--ds-size-6); }
  .actions { display: flex; flex-wrap: wrap; gap: var(--ds-size-3); }
  .actions.spaced { margin-top: var(--ds-size-8); }

  /* Example: data flow */
  .flow { --dsc-card-padding: var(--ds-size-6); }
  .flow-title { margin: 0; }
  .flow-intro { margin: var(--ds-size-1) 0 var(--ds-size-5); color: var(--ds-color-neutral-text-subtle); }
  .flow-zone {
    background: var(--ds-color-background-tinted);
    border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
    border-radius: var(--ds-border-radius-lg);
    padding: var(--ds-size-4);
  }
  .zone-head { margin-bottom: var(--ds-size-3); }
  .zone-title { display: block; font-weight: 600; color: var(--ds-color-text-default); }
  .zone-sub { display: block; font-size: var(--ds-body-sm-font-size); color: var(--ds-color-text-subtle); }
  .flow-step {
    background: var(--ds-color-neutral-background-default);
    border: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
    border-radius: var(--ds-border-radius-md);
    padding: var(--ds-size-3) var(--ds-size-4);
  }
  .step-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-size-3); }
  .step-name { font-weight: 600; }
  .step-note { margin: var(--ds-size-1) 0 0; font-size: var(--ds-body-sm-font-size); color: var(--ds-color-neutral-text-subtle); }
  .step-score { font-size: var(--ds-font-size-6); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ds-color-company-text-default); }
  .step-score small { font-size: var(--ds-body-sm-font-size); font-weight: 400; color: var(--ds-color-neutral-text-subtle); }
  .spark { width: 100%; height: 28px; margin-top: var(--ds-size-2); }
  .spark-raw { stroke: var(--ds-color-neutral-text-subtle); }
  .spark-clean { stroke: var(--ds-color-accent-base-default); }
  .flow-arrow {
    display: flex;
    align-items: center;
    gap: var(--ds-size-2);
    padding: var(--ds-size-2) 0 var(--ds-size-2) var(--ds-size-4);
    font-size: var(--ds-body-xs-font-size);
    color: var(--ds-color-neutral-text-subtle);
  }
  .flow-arrow svg { width: 16px; height: 16px; flex: none; }
  .flow-caption { margin: var(--ds-size-4) 0 0; font-size: var(--ds-body-xs-font-size); color: var(--ds-color-neutral-text-subtle); }

  /* Grids */
  .grid-2, .grid-3, .grid-5 { display: grid; gap: var(--ds-size-4); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-size-10); }
  .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stack > * + * { margin-top: var(--ds-size-3); }

  .card-pad { --dsc-card-padding: var(--ds-size-8); }
  .ds-card .ds-tag { max-width: 100%; white-space: normal; height: auto; padding-block: var(--ds-size-1); }
  .card-top { border-top: 4px solid var(--card-rule, var(--ds-color-accent-base-default)); }
  .card-top[data-rule="recommended"] { --card-rule: var(--ds-color-recommended-base-default); }

  .numbered .num {
    display: block;
    padding-bottom: var(--ds-size-3);
    margin-bottom: var(--ds-size-4);
    border-bottom: var(--ds-border-width-default) solid var(--ds-color-neutral-border-default);
    color: var(--ds-color-neutral-text-subtle);
    font-variant-numeric: tabular-nums;
    font-size: var(--ds-body-sm-font-size);
  }

  .checklist { list-style: none; padding: 0; margin: var(--ds-size-6) 0 0; display: grid; gap: var(--ds-size-3); }
  .checklist li { position: relative; padding-left: var(--ds-size-6); }
  .checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.7em;
    width: 0.75rem;
    height: 2px;
    background: var(--ds-color-neutral-border-strong);
  }

  /* Principles */
  .principles {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: p;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ds-size-12);
  }
  .principles li {
    counter-increment: p;
    display: grid;
    grid-template-columns: var(--ds-size-10) minmax(0, 1fr);
    padding-block: var(--ds-size-5);
    border-top: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
  }
  .principles li::before {
    content: counter(p, decimal-leading-zero);
    color: var(--ds-color-neutral-text-subtle);
    font-variant-numeric: tabular-nums;
    padding-top: 0.1em;
  }

  /* Progress */
  .progress { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
  .progress li {
    display: grid;
    grid-template-columns: var(--ds-size-8) minmax(0, 1fr);
    gap: var(--ds-size-4);
    padding-bottom: var(--ds-size-8);
    position: relative;
  }
  .progress li::before {
    content: '';
    width: 14px;
    height: 14px;
    margin: 0.35em 0 0 5px;
    border-radius: 50%;
    border: 2px solid var(--ds-color-neutral-border-strong);
    background: var(--ds-color-neutral-background-default);
    z-index: 1;
  }
  .progress li::after {
    content: '';
    position: absolute;
    left: 11px;
    top: 1.4em;
    bottom: 0;
    width: 2px;
    background: var(--ds-color-neutral-border-subtle);
  }
  .progress li:last-child::after { display: none; }
  .progress li[data-state="done"]::before { background: var(--ds-color-accent-base-default); border-color: var(--ds-color-accent-base-default); }
  .progress li[data-state="current"]::before { border-color: var(--ds-color-accent-base-default); box-shadow: 0 0 0 4px var(--ds-color-accent-surface-default); }
  .progress-title { display: flex; flex-wrap: wrap; gap: var(--ds-size-2) var(--ds-size-3); align-items: center; }

  .faq > * + * { margin-top: var(--ds-size-2); }

  .table-wrap { overflow-x: auto; }
  .source { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ds-color-neutral-text-subtle); }

  /* CTA */
  .cta { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--ds-size-10); align-items: end; }

  /* Document pages */
  .doc { max-width: 52rem; padding-block: var(--ds-size-10) var(--site-section); }
  .doc-crumbs { margin-bottom: var(--ds-size-10); }
  .doc-head { margin-bottom: var(--ds-size-8); }
  .doc-note { margin-bottom: var(--ds-size-12); }
  .doc-section + .doc-section { margin-top: var(--ds-size-15); }
  .doc-end { padding-top: var(--ds-size-8); border-top: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle); }
  .part-head { margin-bottom: var(--ds-size-6); }

  .roles { margin: var(--ds-size-6) 0 0; display: grid; gap: 0; }
  .role {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: var(--ds-size-4);
    padding-block: var(--ds-size-4);
    border-top: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
  }
  .role:last-child { border-bottom: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle); }
  .role dt { font-weight: 600; }
  .role dd { margin: 0; }

  .checks { list-style: none; margin: 0; padding: 0; }
  .check {
    display: grid;
    grid-template-columns: var(--ds-size-8) minmax(0, 1fr);
    gap: var(--ds-size-3);
    padding-block: var(--ds-size-5);
    border-top: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
  }
  .check:last-child { border-bottom: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle); }
  .check .ds-input { margin-top: 0.1em; }
  .check-title { display: block; font-weight: 600; cursor: pointer; margin-bottom: var(--ds-size-1); }
  .check-source {
    display: inline-block;
    margin-top: var(--ds-size-2);
    font-size: var(--ds-body-xs-font-size);
    color: var(--ds-color-neutral-text-subtle);
  }

  .check-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-size-1) var(--ds-size-4);
    margin: var(--ds-size-2) 0 var(--ds-size-3);
    font-size: var(--ds-body-xs-font-size);
    color: var(--ds-color-neutral-text-subtle);
  }
  .check .ds-details { margin-top: var(--ds-size-1); }
  .how { display: grid; gap: var(--ds-size-4); }
  .how ol, .how-list { margin: 0; padding-left: var(--ds-size-5); display: grid; gap: var(--ds-size-2); font-size: var(--ds-body-sm-font-size); }
  .how-note { margin: 0; font-size: var(--ds-body-sm-font-size); }
  .how-caption { text-align: left; font-weight: 600; font-size: var(--ds-body-sm-font-size); padding-bottom: var(--ds-size-2); }
  .how .ds-table { width: 100%; }
  .model-text {
    margin: 0;
    padding: var(--ds-size-4) var(--ds-size-5);
    background: var(--ds-color-neutral-background-tinted);
    border-left: 3px solid var(--ds-color-accent-base-default);
    border-radius: var(--ds-border-radius-md);
    font-size: var(--ds-body-sm-font-size);
  }
  .model-text figcaption {
    font-size: var(--ds-body-xs-font-size);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ds-color-accent-text-subtle);
    margin-bottom: var(--ds-size-2);
  }
  .model-text p { margin: 0 0 var(--ds-size-2); }
  .model-text p:last-child { margin-bottom: 0; }
  .doc-toc { margin-bottom: var(--ds-size-12); }
  .doc-toc ol { margin: var(--ds-size-2) 0 0; padding-left: var(--ds-size-5); display: grid; gap: var(--ds-size-1); }

  /* Resources */
  .resource { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-size-6); align-items: center; }

  /* Footer */
  .site-footer {
    padding-block: var(--ds-size-12);
    border-top: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
    color: var(--ds-color-neutral-text-subtle);
    font-size: var(--ds-body-sm-font-size);
  }
  .footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ds-size-8); }
  .footer-grid p { margin: 0 0 var(--ds-size-2); }

  @media (max-width: 1000px) {
    .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .site-nav { display: none; }
  }
  @media (max-width: 860px) {
    :root { --site-section: var(--ds-size-15); }
    .hero { padding-block: var(--ds-size-12) var(--site-section); }
    .hero-grid, .cta, .grid-3, .footer-grid { grid-template-columns: minmax(0, 1fr); }
    .grid-3 { gap: var(--ds-size-8); }
  }
  @media (max-width: 640px) {
    :root { --site-gutter: var(--ds-size-4); }
    .grid-2, .grid-5, .principles, .role, .resource { grid-template-columns: minmax(0, 1fr); }
    .role { gap: var(--ds-size-1); }
    .card-pad { --dsc-card-padding: var(--ds-size-6); }
    .site-header .ds-button { display: none; }
  }
  @media print {
    .site-header, .site-footer, .ds-skip-link, .doc-crumbs, .status-bar { display: none; }
    .doc { padding-block: 0; max-width: none; }
    .check { break-inside: avoid; }
    .doc-toc { display: none; }
    details::details-content { content-visibility: visible; display: block; }
    details > summary { list-style: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
}