/* the props */
@import "https://unpkg.com/open-props";

/* optional imports that use the props */
/*@import "https://unpkg.com/open-props/normalize.min.css";*/
/*@import "https://unpkg.com/open-props/buttons.min.css";*/

/* just dark or light themes */
/*@import "https://unpkg.com/open-props/normalize.dark.min.css";*/
/*@import "https://unpkg.com/open-props/buttons.dark.min.css";*/
/*@import "https://unpkg.com/open-props/normalize.light.min.css";*/
/*@import "https://unpkg.com/open-props/buttons.light.min.css";*/

/*@import "https://matcha.mizu.sh/matcha.css";*/

@import "base.css" layer(base);
@import "layout.css" layer(base);
@import "button.css" layer(components);
@import "table.css" layer(components);
@import "input.css" layer(components);
@import "details.css" layer(components);
@import "icons.css" layer(components);
@import "pages.css" layer(pages);
@import "utilities.css" layer(utilities);

@view-transition {
  navigation: auto;
}

:root {
  --clr-teal: hsl(182 100% 35%);
  --clr-teal-dark: hsl(199 100% 24%);
}

body {
  color: var(--clr-teal-dark);
}

.surface-1 {
  background-color: var(--surface-1);
  color: var(--text-2);
}

.surface-2 {
  background-color: var(--surface-2);
  color: var(--text-2);
}

.surface-3 {
  background-color: var(--surface-3);
  color: var(--text-1);
}

.surface-4 {
  background-color: var(--surface-4);
  color: var(--text-1);
}

.side-nav {
  ul {}

  a {
    text-decoration: none;
    display: block;
    padding-inline: var(--size-3);
    padding-block: var(--size-2);
  }

  [aria-current] {
    background: var(--gray-8);
  }
}

@layer components {
    .card {
      background: white;
      border-radius: var(--radius-2);
      border: var(--border-size-1) solid var(--gray-3);
      box-shadow: var(--shadow-2);
      padding: var(--size-3);

      &.--table {
        display: grid;
        gap: 1em;

        header {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }

      &.--summary {
        display: flex;
        align-items: center;
        gap: 1rem;
      }

      h2, h3, h4 {
          margin-block-start: 0;
      }

      p {
        margin: 0;
      }
    }

    rticle {
      display: grid;
      gap: 1em;
      background: var(--surface-1);
      color: var(--text-2);
      border: var(--border-size-2) solid var(--surface-4);
      /*box-shadow: var(--shadow-4);*/
      border-radius: var(--radius-2);
      padding: 1em;

      & > :is(header, footer) {
        padding-inline: 1em;
      }

      header {
        /*border-block-end: var(--border-size-2) solid var(--surface-4);*/
        /*padding-block-end: 1em;*/
      }

      footer {
        /*border-block-start: var(--border-size-2) solid var(--surface-4);*/
        /*padding-block-start: 1em;*/
      }

      footer > nav {
        display: flex;
        justify-content: end;
      }
    }
}


section:has(> table) {
  display: grid;
  gap: 1em;

  & > :not(table) {
    padding-inline: 1em;
  }

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

search > form {
  display: flex;
}

search > form label {
  display: none;
}

.munkavallalo-page {}