@import url('baseline.css');

/* Main sections */
body, :host {
  font: var(--theme-font-body-normal);
  background-color: var(--theme-color-body);
  color: var(--theme-color-body-content);
}

body {
  min-height: 100vh;
  display: grid;
  grid-template: 'main' 1fr;
  gap: var(--length-gap-group);

  /* Grid areas */
  & > :is(header, main, aside, footer) { padding: var(--length-gap-group); }
  & > header { grid-area: header; padding-block-end: 0; }
  & > main { grid-area: main; position: relative; }
  & > aside { grid-area: aside; padding-inline-start: 0; }
  & > footer { grid-area: footer; padding-block-start: 0; }

  /* Grid layout */
  &:has(> header) {
    grid-template:
      'header' auto
      'main' 1fr;
    & > :is(main, aside) { padding-block-start: 0; }
  }

  &:has(> aside) {
    grid-template: 'main aside' 1fr;
    & > main { padding-inline-end: 0; }
  }

  &:has(> footer) {
    grid-template:
      'main' 1fr
      'footer' auto;
    & > :is(main, aside) { padding-block-end: 0; }
  }

  &:has(> header):has(> footer) {
    grid-template:
      'header' auto
      'main' 1fr
      'footer' auto;
  }

  &:has(> header):has(> aside) {
    grid-template:
      'header header' auto
      'main aside' 1fr
      / var(--split-golden-ratio);
  }

  &:has(> footer):has(> aside) {
    grid-template:
      'main aside' 1fr
      'footer footer' auto
      / var(--split-golden-ratio);
  }

  &:has(> header):has(> aside):has(> footer) {
    grid-template:
      'header header' auto
      'main aside' 1fr
      'footer footer' auto
      / var(--split-golden-ratio);
  }

  /* Main content groups */
  & > :is(main, aside) {
    display: flex;
    flex-flow: column nowrap;
    place-content: stretch center;
    gap: var(--length-gap-group);

    & > :not(dialog) { flex: 1; width: 100%; }
  }
}

/* Links */
a {
  text-decoration: none;
  color: var(--theme-color-text-active);
  &:hover { color: var(--theme-color-text-highlight); }
  &:active { color: var(--theme-color-text-hit); }
  img, svg { padding: var(--length-gap-element); }
}

/* Text elements */
code, kbd, samp, pre { font: var(--theme-font-monospace-normal); }

/* Headers */
h1 {
  text-align: center;
  font: var(--theme-font-display-large);
}

hgroup h1 ~ p {
  text-align: center;
  font: var(--theme-font-display-normal-subtitle);
}

h2 {
  text-align: start;
  font: var(--theme-font-display-normal);
}

h3 {
  text-align: start;
  font: var(--theme-font-display-small);
}

/* Buttons */
button, .button {
  display: block;
  cursor: pointer;
  padding: var(--length-gap-element);
  background-color: var(--theme-color-active);
  color: var(--theme-color-active-content);
  border-radius: var(--length-radius-element);
  border: var(--theme-outline-active);
  box-shadow: var(--theme-shadow-element);
  text-align: center;

  &.wide { width: 100%; }
  &.inline { display: inline-block; }

  &:hover {
    background-color: var(--theme-color-active-highlight);
    color: var(--theme-color-active-highlight-content);
    border: var(--theme-outline-active-highlight);
  }

  &:active {
    background-color: var(--theme-color-active-hit);
    color: var(--theme-color-active-hit-content);
    border: var(--theme-outline-active-hit);
  }

  svg {
    display: block;
    width: var(--length-button-icon);
    height: var(--length-button-icon);
    fill: currentcolor;
  }

  &.neutral {
    background-color: var(--theme-color-neutral);
    color: var(--theme-color-neutral-content);
    border: var(--theme-outline-neutral);

    &:hover {
      background-color: var(--theme-color-neutral-highlight);
      color: var(--theme-color-neutral-highlight-content);
      border: var(--theme-outline-neutral-highlight);
    }

    &:active {
      background-color: var(--theme-color-neutral-hit);
      color: var(--theme-color-neutral-hit-content);
      border: var(--theme-outline-neutral-hit);
    }

    svg { fill: currentcolor; }

    &.light {
      border-color: transparent;
      box-shadow: none;

      &:hover {
        border-color: transparent;
        color: var(--theme-color-text-highlight);
      }

      &:active {
        border-color: transparent;
        color: var(--theme-color-text-hit);
      }
    }
  }

  &.icon {
    display: flex;
    align-items: center;
    gap: var(--length-gap-element);

    &.wide {
      display: grid;
      grid-template-columns: var(--length-button-icon) 1fr var(--length-button-icon);
    }
  }

  &.icon-toggle {
    .active { display: none; }
    .inactive { display: block; }

    background-color: transparent;
    border-color: transparent;
    box-shadow: none;

    &:is(:hover, :active) {
      background-color: transparent;
      border-color: transparent;
      box-shadow: none;
    }

    svg { fill: var(--theme-color-neutral-outline); }
    &:hover svg { fill: var(--theme-color-neutral-highlight-outline); }
    &:active svg { fill: var(--theme-color-neutral-hit-outline); }
  }
}

/* Navigation */
nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--length-gap-group);

  /* Logo */
  & > a.logo {
    justify-self: start;

    :is(img, svg) {
      box-sizing: content-box;
      height: var(--length-logo-height);
      max-width: none;
      fill: var(--theme-color-body-content);
    }

    &.flush :is(img, svg) { margin-inline-start: calc(-1 * var(--length-gap-element)); }
  }

  /* Menu & aside */
  & > :is(menu, aside) {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    gap: var(--length-gap-group);
  }

  & > menu {
    li {
      position: relative;

      a, button, .button { /* stylelint-disable-line no-descending-specificity */
        display: block;
        cursor: pointer;
        padding: var(--length-gap-element);
        font: var(--theme-font-body-normal-emphasis);
        color: inherit;
        width: max-content;
      }

      button, .button {
        display: flex;
        gap: var(--length-gap-element);
        align-items: baseline;
        background: none;
        border: none;
        box-shadow: none;
        text-align: inherit;
        &:hover { color: var(--theme-color-text-highlight); }
        &:active { color: var(--theme-color-text-hit); }

        &:is(:hover, :active) {
          background: none;
          border: none;
          box-shadow: none;
        }

        svg { /* stylelint-disable-line no-descending-specificity */
          font: inherit;
          flex-shrink: 0;
          width: 1.25ex;
          height: 1.25ex;
          transform: rotate(90deg);
          padding: 0;
          fill: currentcolor;
        }
      }

      /* Submenus */
      menu {
        display: none;
        position: absolute;
        z-index: 1000;
        top: 100%;
        border-radius: var(--length-radius-element);
        padding: var(--length-gap-element);
        margin-block-start: var(--length-gap-element);

        li :is(button, .button) svg { /* stylelint-disable-line no-descending-specificity */
          transform: none;
        }

        /* Sub-submenus */
        menu {
          top: 0;
          left: 100%;
          margin-block-start: calc(-1 * (var(--length-gap-element) + var(--length-edge)));
          margin-inline-start: calc(var(--length-gap-element) + var(--length-gap-element));
        }
      }

      /* Active and open states */
      &.active a {
        cursor: default;
        color: var(--theme-color-text-hit);
      }

      &.open {
        color: var(--theme-color-text-hit);
        & > menu { display: block; }
      }
    }

    & > li {
      &:has(> :is(button, .button) svg) { /* visual correction for items following an arrow icon */
        margin-inline-end: calc(-1 * var(--length-gap-subelement));
      }

      &.open > :is(button, .button) svg { /* stylelint-disable-line no-descending-specificity */
        transform: rotate(-90deg);
      }
    }

    &.mobile { display: none; }
  }

  .mobile-menu-icon {
    display: none;
  }

  & > aside { justify-self: end; }
}

/* Sections */
article {
  margin: 0 auto;

  & > :is(h1, hgroup) { margin: var(--length-margin-header); }
  & > h2 { margin: var(--length-margin-subheader); }
  & > :is(h3, h4, h5, h6) { margin: var(--length-margin-paragraph); }

  & > hgroup {
    h1 { margin: 0; }
    p { margin: var(--length-margin-header-tagline); }
  }
}

article, section { padding: var(--length-gap-group-large); }

/* Dialogs */
dialog[popover] {
  position: absolute;
  top: var(--length-gap-group);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--length-gap-group);

  &:popover-open {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--length-gap-group);
  }

  ul {
    display: flex;
    flex-flow: column nowrap;
    gap: var(--length-gap-element);
  }

  button { margin-inline: auto; }
}

/* Menus */
.dropdown-form-menu {
  position: relative;

  form {
    display: none;
    position: absolute;
    z-index: 1000;
    top: 100%;
    right: 0;
    border-radius: var(--length-radius-element);
    padding: var(--length-gap-element);
    margin-block-start: var(--length-gap-element);
    &.open { display: block; }

    menu { /* stylelint-disable-line no-descending-specificity */
      flex-direction: column;
      gap: 0;

      button {
        width: max-content;
        text-align: right;
        background: none;
        border: none;
        box-shadow: none;
        color: inherit;

        &:is(:hover, :active) {
          background: none;
          border: none;
          box-shadow: none;
        }

        &:hover { color: var(--theme-color-text-highlight); }
        &:active { color: var(--theme-color-text-hit); }
      }
    }
  }
}