/*
 * The layout of the site, written for the phone first. LO-TEK styles the
 * components; the columns, the space between the parts, the header and the
 * footer belong to the page. Every value is a LO-TEK token. The site is always
 * light: data-theme="light" on <html> chooses LO-TEK's light colours.
 *
 * The look: white header and footer, the page on a granite surface, the
 * content in white cards, fjord blue for what you can press.
 */

@layer lotek, lotek-theme, site;

/* optional, not swap: Inter is preloaded, so it is nearly always there in
   time. When it is not, the page keeps the system font for that visit rather
   than redrawing the text a moment later, which made it jump. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: optional;
  font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}

@layer site {
  body {
    margin: 0;
    background: var(--lt-color-neutral-surface);
    color: var(--lt-color-neutral-text-strong);
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
  }

  main {
    flex: 1;
  }

  main:focus {
    outline: none;
  }

  .page-width {
    box-sizing: border-box;
    max-inline-size: 72rem;
    margin-inline: auto;
    padding-inline: var(--lt-spacing-4);
  }

  /* Header */

  .site-header {
    position: relative;
    background: var(--lt-color-neutral-canvas);
    border-block-end: 1px solid var(--lt-color-neutral-border-subtle);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lt-spacing-4);
    min-block-size: 4rem;
  }

  .site-header__home {
    display: inline-flex;
    align-items: center;
    gap: var(--lt-spacing-3);
    color: inherit;
    text-decoration: none;
    font-size: var(--lt-font-size-l);
  }

  .site-header__home img {
    inline-size: 2.5rem;
    block-size: 2.5rem;
  }

  /* On the phone the menu is a popover that opens as a panel under the
     header. The browser draws it in the top layer, so it is placed by hand. */
  .site-menu:popover-open {
    position: fixed;
    inset: 4rem 0 auto;
    /* The browser sizes a popover to its content; this one spans the screen. */
    inline-size: auto;
    max-inline-size: none;
    margin: 0;
    padding: var(--lt-spacing-2) var(--lt-spacing-4) var(--lt-spacing-4);
    border: 0;
    border-block-end: 1px solid var(--lt-color-neutral-border-subtle);
    background: var(--lt-color-neutral-canvas);
    box-shadow: var(--lt-shadow-overlay);
  }

  .site-nav {
    display: grid;
    gap: var(--lt-spacing-1);
  }

  .site-nav > li {
    margin: 0;
  }

  /* The menu is navigation, not running text, so no underline. The page you
     are on is marked with a bar instead. */
  .site-nav__link {
    display: block;
    padding: var(--lt-spacing-3);
    border-radius: var(--lt-spacing-1);
    color: var(--lt-color-neutral-text-strong);
    font-weight: var(--lt-font-weight-medium);
    text-decoration: none;
  }

  .site-nav__link:hover {
    background: var(--lt-color-neutral-surface);
  }

  .site-nav__link:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: var(--lt-spacing-1);
  }

  .site-nav__link[aria-current="page"] {
    color: var(--lt-color-accent-text);
    box-shadow: inset 3px 0 0 var(--lt-color-accent-fill);
  }

  @media (min-width: 52rem) {
    .site-menu-button {
      display: none;
    }

    /* On a wide screen the menu is always shown in the header. Author CSS
       beats the browser's own rule that hides a closed popover. */
    .site-menu {
      display: block;
      position: static;
      inset: auto;
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      overflow: visible;
      color: inherit;
    }

    .site-nav {
      display: flex;
      gap: var(--lt-spacing-1);
    }

    .site-nav__link {
      padding: var(--lt-spacing-2) var(--lt-spacing-3);
    }

    .site-nav__link[aria-current="page"] {
      box-shadow: inset 0 -3px 0 var(--lt-color-accent-fill);
    }
  }

  /* Front page */

  .front-page {
    padding-block: var(--lt-spacing-8) var(--lt-spacing-12);
  }

  /* The badge beside the slogan is as tall as it and the year together. The
     slogan's height depends on the width the badge leaves it, so CSS cannot
     size the badge from the text; it is sized from the number of lines the
     slogan takes at each width instead, measured in Safari and Chrome. */
  .welcome {
    --welcome-lines: 3;
    margin: 0 0 var(--lt-spacing-8);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--lt-spacing-4);
  }

  @media (min-width: 25rem) {
    .welcome {
      --welcome-lines: 2;
    }
  }

  @media (min-width: 35rem) {
    .welcome {
      --welcome-lines: 1;
    }
  }

  .welcome__logo {
    --welcome-size: calc(
      var(--welcome-lines) * var(--lt-font-size-xxl) * var(--lt-line-height-heading) + var(--lt-spacing-1) + 1.25em
    );
    inline-size: var(--welcome-size);
    block-size: var(--welcome-size);
  }

  .welcome__text > * {
    margin: 0;
  }

  .welcome__since {
    margin-block-start: var(--lt-spacing-1);
    line-height: 1.25;
    color: var(--lt-color-neutral-text);
    font-weight: var(--lt-font-weight-semibold);
    letter-spacing: 0.02em;
  }

  .front-columns {
    display: grid;
    gap: var(--lt-spacing-8);
  }

  @media (min-width: 52rem) {
    .front-columns {
      grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
      grid-template-areas:
        "news groups"
        "meeting vestvatn";
      align-items: start;
    }

    .front-section--siste-nytt { grid-area: news; }
    .front-section--grupper { grid-area: groups; }
    .front-section--moter { grid-area: meeting; }
    .front-section--vestvatn { grid-area: vestvatn; }
  }

  .front-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--lt-spacing-1) var(--lt-spacing-4);
    margin-block-end: var(--lt-spacing-3);
  }

  .front-section__head h2 {
    margin: 0;
  }

  /* A short line in the logo's red under each heading, like the stripe on a
     team shirt. The only red on the page besides the logo. */
  .front-section__head h2::after {
    content: "";
    display: block;
    inline-size: var(--lt-spacing-8);
    block-size: 3px;
    margin-block-start: var(--lt-spacing-1);
    border-radius: 2px;
    background: var(--lt-color-brand1-fill);
  }

  .join {
    margin: 0 0 var(--lt-spacing-3);
    color: var(--lt-color-neutral-text);
  }

  .more-link {
    color: var(--lt-color-accent-text);
    font-weight: var(--lt-font-weight-semibold);
    text-decoration: none;
  }

  .more-link::after {
    content: " →";
  }

  .more-link:hover {
    text-decoration: underline;
  }

  /* Every link gets LO-TEK's focus ring with the same room around the text.
     Without this the site's own links get the browser's ring, tight against
     the text, and LO-TEK's links sit 2 px from it. */
  .more-link:focus-visible,
  .site-header__home:focus-visible,
  .lt-link:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: var(--lt-spacing-1);
    border-radius: var(--lt-spacing-1);
  }

  .panel {
    position: relative;
  }

  .panel > p {
    margin: 0;
  }

  .panel > p + p {
    margin-block-start: var(--lt-spacing-3);
  }

  /* A link with this class covers its whole row or card, so the row is one
     target. The nearest positioned ancestor decides how far it reaches. */
  .card-link {
    color: inherit;
    text-decoration: none;
  }

  .card-link::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .card-link:focus-visible {
    outline: none;
  }

  .card-link:focus-visible::after {
    outline: var(--lt-focus-ring);
    outline-offset: -2px;
    border-radius: var(--lt-spacing-1);
  }

  /* News: each item is a LO-TEK accordion in the card. The card has no
     padding of its own; the rows carry it, so the hover and the focus ring
     reach the card's edges with room around the text. */

  /* The items share one line between them. Two things put a white band
     between that line and the grey hover of the next item, 8 px each: the
     card's gap between its children, and LO-TEK's margin between accordions
     that stand apart. Both are taken away here. */
  .news-panel {
    --lt-card-padding: 0;
    gap: 0;
    overflow: hidden;
  }

  .news-item + .news-item {
    margin-block-start: 0;
  }

  .news-panel > p {
    padding: var(--lt-spacing-4);
  }

  .news-item:last-child {
    border-block-end: 0;
  }

  .news-item summary {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--lt-spacing-1) var(--lt-spacing-3);
    padding: var(--lt-spacing-4) var(--lt-spacing-5);
    font-weight: var(--lt-font-weight-regular);
  }

  /* The picture, when there is one, sits between the text and the arrow. */
  .news-item summary:has(.news-item__thumb) {
    grid-template-columns: 4rem minmax(0, 1fr) auto auto;
  }

  .news-item__thumb {
    grid-column: 3;
    grid-row: 1 / span 3;
    /* Room before the arrow, which otherwise sits tight against it. */
    margin-inline-end: var(--lt-spacing-3);
    inline-size: 4rem;
    block-size: 4rem;
    object-fit: cover;
    border-radius: var(--lt-spacing-1);
  }

  /* LO-TEK's arrow, in its own column at the top right. */
  .news-item summary::after {
    grid-column: -2;
    grid-row: 1;
    margin-block-start: var(--lt-spacing-2);
  }

  .news-item summary:focus-visible {
    outline-offset: calc(var(--lt-spacing-1) * -1);
    border-radius: var(--lt-spacing-2);
  }

  .news-item__date {
    grid-column: 1;
    grid-row: 1 / span 3;
    display: flex;
    flex-direction: column;
    color: var(--lt-color-neutral-text);
    font-size: var(--lt-font-size-s);
    font-weight: var(--lt-font-weight-semibold);
    font-variant-numeric: tabular-nums;
  }

  .news-item__year {
    font-weight: var(--lt-font-weight-regular);
    color: var(--lt-color-neutral-text-subtle);
  }

  .news-item__title,
  .news-item__summary,
  .news-item__badge {
    grid-column: 2;
  }

  .news-item .news-item__title {
    font-size: var(--lt-font-size-m);
    font-weight: var(--lt-font-weight-semibold);
    line-height: var(--lt-line-height-heading);
    /* Titles such as "Generalforsamling/ekstraordinært" have no space to
       break at and would run out of the card on a phone. */
    overflow-wrap: anywhere;
  }

  .news-item summary:hover .news-item__title {
    color: var(--lt-color-accent-text);
  }

  .news-item__summary {
    color: var(--lt-color-neutral-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }

  /* Open, the whole summary is shown; it is the lead of the text below. */
  .news-item[open] .news-item__summary {
    display: block;
  }

  /* Unless it is only the start of that text. */
  .news-item[open] .news-item__summary--start {
    display: none;
  }

  .news-item__badge {
    justify-self: start;
    margin-block-start: var(--lt-spacing-1);
  }

  /* The text lines up with the title, not with the date. */
  .news-item__content {
    padding: 0 var(--lt-spacing-5) var(--lt-spacing-5) calc(4rem + var(--lt-spacing-3) + var(--lt-spacing-5));
  }

  .news-item__content > * {
    margin-block: 0 var(--lt-spacing-3);
    max-inline-size: 44rem;
  }

  .news-item__content h2,
  .news-item__content h3,
  .news-item__content h4 {
    font-size: var(--lt-font-size-m);
    margin-block-start: var(--lt-spacing-4);
  }

  .news-item__content blockquote {
    margin-inline: 0;
    padding-inline-start: var(--lt-spacing-4);
    border-inline-start: 3px solid var(--lt-color-accent-border);
    color: var(--lt-color-neutral-text);
  }

  .news-item__files {
    margin: 0 0 var(--lt-spacing-3);
  }

  /* .facts sets its margin to 0 further down, which would otherwise win and
     leave the minutes tight under the facts of an opened meeting. */
  .news-item__content > .facts {
    margin-block-end: var(--lt-spacing-3);
  }

  .news-item__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lt-spacing-2) var(--lt-spacing-4);
    color: var(--lt-color-neutral-text);
    font-size: var(--lt-font-size-s);
  }

  /* On a phone the text uses the whole width under the summary. */
  @media (max-width: 30rem) {
    .news-item summary {
      grid-template-columns: 3.5rem minmax(0, 1fr) auto;
      padding-inline: var(--lt-spacing-4);
    }

    .news-item__content {
      padding-inline: var(--lt-spacing-4);
    }
  }

  /* The share button is sent hidden and shown by share.js. LO-TEK's button
     sets display, which beats the browser's own rule for hidden. */
  .share[hidden] {
    display: none;
  }

  /* A ghost button has room at the sides. First in the row, it is moved out
     by that much, so the word lines up with the text above. */
  .news-item__footer > .share:first-child {
    margin-inline-start: calc(var(--lt-spacing-4) * -1);
  }

  .share__status {
    color: var(--lt-color-success-text);
  }

  /* Groups */

  .group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lt-spacing-2);
    margin: 0;
  }

  .group-grid > li {
    margin: 0;
  }

  .group-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--lt-spacing-2);
    padding: var(--lt-spacing-4) var(--lt-spacing-2);
    border: 1px solid var(--lt-color-neutral-border-subtle);
    border-radius: var(--lt-spacing-2);
    background: var(--lt-color-neutral-canvas);
    color: var(--lt-color-neutral-text-strong);
    font-weight: var(--lt-font-weight-medium);
    text-decoration: none;
  }

  .group-tile:hover {
    border-color: var(--lt-color-accent-border);
    color: var(--lt-color-accent-text);
  }

  .group-tile:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: var(--lt-spacing-1);
  }

  .group-tile__icon {
    display: block;
    inline-size: var(--lt-spacing-10);
    block-size: var(--lt-spacing-10);
    color: var(--lt-color-accent-text);
  }

  .group-tile__icon svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .association-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lt-spacing-2) var(--lt-spacing-5);
    margin: var(--lt-spacing-3) 0 0;
  }

  /* Pages other than the front page */

  .page {
    display: flex;
    flex-direction: column;
    gap: var(--lt-spacing-8);
    padding-block: var(--lt-spacing-8) var(--lt-spacing-12);
  }

  .page > * {
    margin: 0;
  }

  /* Text pages read best at a measure of about 70 characters. */
  .page--text {
    max-inline-size: 48rem;
  }

  .page-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lt-spacing-2);
  }

  .page-intro > * {
    margin: 0;
  }

  .page-intro p {
    color: var(--lt-color-neutral-text);
    max-inline-size: 48rem;
  }

  .page-intro__icon {
    display: block;
    inline-size: var(--lt-spacing-12);
    block-size: var(--lt-spacing-12);
    color: var(--lt-color-accent-text);
  }

  .page-intro__icon svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  /* Buttons side by side under an intro, with room between them, and one
     under the other when the line is too short for both. */
  .actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lt-spacing-3);
  }

  /* The about page: the badge large, above the title on a phone and beside
     it on a wide screen. */
  .about-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lt-spacing-6);
  }

  .about-intro__logo {
    inline-size: 10rem;
    block-size: 10rem;
  }

  @media (min-width: 40rem) {
    .about-intro {
      flex-direction: row;
      align-items: center;
    }

    .about-intro__logo {
      flex: none;
      inline-size: 12.5rem;
      block-size: 12.5rem;
    }
  }

  .page__note {
    color: var(--lt-color-neutral-text);
  }

  .back-link::after {
    content: none;
  }

  .back-link::before {
    content: "← ";
  }

  /* The filter on the news page: a row of tags that wraps on the phone. */
  .filter__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lt-spacing-2);
    margin: 0;
  }

  .filter__list > li {
    margin: 0;
  }

  .filter__list a {
    text-decoration: none;
  }

  .filter__list a:hover {
    border-color: var(--lt-color-accent-border);
  }

  /* LO-TEK's filled tag is a quiet grey. The chosen filter has to stand out
     from eleven others, so it gets the fjord blue that marks what is chosen
     elsewhere on the site. */
  .filter__list a[aria-current="page"] {
    background: var(--lt-color-accent-fill);
    border-color: var(--lt-color-accent-fill);
    color: var(--lt-color-accent-content);
  }

  .filter__list a:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: var(--lt-spacing-1);
  }

  .pages ul {
    justify-content: center;
  }

  /* Images in a news item */

  .article__image {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--lt-spacing-2);
  }

  /* Training times */

  .training-list {
    margin: 0;
  }

  .training p {
    margin: 0;
  }

  .training__when {
    font-variant-numeric: tabular-nums;
  }

  .training__day {
    font-weight: var(--lt-font-weight-semibold);
  }

  .training__where {
    color: var(--lt-color-neutral-text);
  }

  /* Facts: a label and a value on each line. */
  .facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--lt-spacing-2) var(--lt-spacing-6);
    margin: 0;
  }

  .facts dt {
    color: var(--lt-color-neutral-text);
  }

  .facts dd {
    margin: 0;
  }

  /* People and their contact details */

  .contact-list {
    margin: 0;
  }

  .contact {
    display: grid;
    gap: var(--lt-spacing-1);
  }

  .contact p {
    margin: 0;
  }

  .contact__name {
    font-weight: var(--lt-font-weight-semibold);
  }

  .contact__role,
  .contact__missing {
    color: var(--lt-color-neutral-text);
  }

  .contact__details {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--lt-spacing-1) var(--lt-spacing-4);
    margin: var(--lt-spacing-2) 0 0;
  }

  .contact__details dt {
    color: var(--lt-color-neutral-text);
  }

  .contact__details dd {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .contacts__reveal {
    margin-block-start: var(--lt-spacing-4);
  }

  /* While the contact details are on their way. */
  .contacts__reveal button[aria-busy="true"] {
    cursor: progress;
  }

  /* Footer */

  .site-footer {
    background: var(--lt-color-neutral-canvas);
    border-block-start: 1px solid var(--lt-color-neutral-border-subtle);
  }

  .site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--lt-spacing-6);
    padding-block: var(--lt-spacing-8);
  }

  .site-footer p {
    margin: 0 0 var(--lt-spacing-1);
  }
}