@import "./pico-css/pico.fuchsia.min.css";
@import "./phospor-icons/duotone/style.css";
@import url("https://fonts.bunny.net/css?family=big-shoulders-stencil-display:600|rasa:300,300i,700");

/*
 * Reset
 */

:root {
  --pico-border-radius: 0;
}

/*
 * Typography
 */

:root {
  --font-body: 'Rasa', serif;
  --font-display: 'Big Shoulders Stencil Display', display;
  --font-weight-normal: 300;
  --font-weight-bold: 700;
  --font-weight-display: 600;
}

body {
  font-family: var(--font-body);
}

h1 {
  font-family: var(--font-display);
}

h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: var(--font-weight-bold);

}

mark {
  background-color: var(--pico-muted-border-color);
}

/*
 * Layout
 */

.main-container {
  container: main / inline-size;
}

.with-sidebar {
  --space-block: 2rem;
  --space-padding: 1rem;
  display: grid;
  gap: 1rem;
  align-items: start;
  margin-block: var(--space-block);
}

.sidebar {
  padding-inline: var(--space-padding);
  padding-block: var(--space-padding);
  border: 0.1rem solid var(--pico-primary-border);

  display: grid;
  grid-template:
    "foto text" 1fr
    "foto buttons" max-content
    / 15rem 1fr;
  gap: var(--space-padding);

  img {
    grid-area: foto;
  }
}

@container main (width >=40rem) {
  .with-sidebar {
    grid-template-columns: 15rem 1fr;
  }

  .sidebar {
    min-block-size: calc(100vh - 2 * var(--space-block));
    position: sticky;
    inset-block-start: var(--space-block);

    grid-template:
      "foto" max-content
      "text" 1fr
      "buttons" max-content
      / 1fr;

    h1 {
      text-align: center;
    }
  }
}

/*
 * Sidebar
 */

.sidebar {
  img {
    aspect-ratio: 1 / 1;
    object-fit: cover;

  }

  .summary {
    h1 {
      line-height: 0.9;
      font-size: 2.5rem;

      em {
        font-family: var(--font-body);
        display: block;
        font-weight: var(--font-weight-normal);
        font-size: 0.7em;
        color: var(--pico-primary);
      }
    }
  }

  .buttons button {
    line-height: 1;
  }
}


/*
 * Light / Dark
 */

[data-theme='dark'] .when-light {
  display: none;
}

[data-theme='light'] .when-dark {
  display: none;
}

/*
 * Button
 */

button.icon-only {
  background: transparent;
  border-width: 0;
  padding: 0;
  position: relative;
  inset-block-end: -10px;
}

/*
 * Lists
 */

.no-list-style {
  padding: 0;

  li {
    list-style: none;

    --item-color: var(--pico-secondary-border);
    --item-indent: 1rem;
    border: 0.1rem solid var(--item-color);
    margin-inline-start: var(--item-indent);
    padding-inline: 1rem;
    padding-block: 0.5rem;
  }

  .active {
    --item-color: var(--pico-primary-border);
    --item-indent: 0;
  }
}

/*
 * Card
 */

.card {
  background: linear-gradient(15deg, oklch(from var(--pico-primary-background) l c h / .3), 15%, transparent 60%);
  padding-inline: 1rem;
  padding-block-end: 0.5rem;

  >:last-child {
    margin-block-end: 0;
  }

  ~ :is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: var(--pico-typography-spacing-top);
  }
}

/*
 * Footer
 */

footer {
  border-block-start: 0.1rem solid var(--pico-secondary-border);
  margin-block-start: 5rem;
  padding-block-start: 0.1rem;
  text-wrap: balance;
}