/* 
Theme Name: EGA - Priscille
Author: EGA Digital
Author URI: https://ega.digital
Version: 1.0
*/
/* Breakpoints
sm: 20rem
md: 40rem
lg: 60rem
xl: 80rem
*/
:root {
  --neutral-50: #fff;
  --neutral-100: #eaf0ed;
  --neutral-950: #160d13;

  --green: #87d7a5;
  --green-a: #136f63;
  --green-s-1: #d7f4de;
  --green-s-2: #4cbb7a;
  --green-s-3: #15673c;
  --pink: #813352;

  --font-sans: "Raleway", sans-serif, emoji;
  --font-serif: "Noto Serif Display", serif, emoji;

  --transition: 0.3s ease-out;

  --container-x: 1rem;
  --container-y: 0.75rem;
  --grid-gap: 0.75rem;
  --block-space: 0.5rem;
  --element-space: 0.5rem;

  font-size: clamp(1rem, 0.75vw, 1.5rem);

  @media (min-width: 20rem) {
    --container-x: 1rem;
    --container-y: 1.25rem;
    --grid-gap: 1rem;
    --block-space: 0.75rem;
  }
  @media (min-width: 40rem) {
    --container-x: 2.5rem;
    --container-y: 1.5rem;
    --grid-gap: 1.5rem;
    --block-space: 1rem;
    --element-space: 0.75rem;
  }
  @media (min-width: 60rem) {
    --container-x: 3.75rem;
    --container-y: 2rem;
    --grid-gap: 2rem;
    --block-space: 1.5rem;
  }
  @media (min-width: 80rem) {
    --container-x: 5rem;
    --container-y: 2.5rem;
    --grid-gap: 2.5rem;
    --block-space: 2rem;
    --element-space: 1rem;
  }
}
body {
  background-color: var(--neutral-100);
  color: var(--neutral-950);
  line-height: 1.5;
  font-family: var(--font-sans);
  scroll-behavior: smooth;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

* {
  scroll-margin: 4rem;
}
h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: bold;
  margin-bottom: var(--element-space);
  line-height: 1.2;
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
  @media (min-width: 20rem) {
    font-size: 2.185rem;
  }
  @media (min-width: 40rem) {
    font-size: 2.3125rem;
  }
  @media (min-width: 60rem) {
    font-size: 2.5rem;
  }
  @media (min-width: 80rem) {
    font-size: 2.6875rem;
  }
}

h2 {
  font-size: 1.5rem;
  @media (min-width: 20rem) {
    font-size: 1.6875rem;
  }
  @media (min-width: 40rem) {
    font-size: 1.8125rem;
  }
  @media (min-width: 60rem) {
    font-size: 2rem;
  }
  @media (min-width: 80rem) {
    font-size: 2.1875rem;
  }
}
h3 {
  font-size: 1.25rem;
  color: var(--green-a);
  font-weight: 600;
  @media (min-width: 40rem) {
    font-size: 1.375rem;
  }
  @media (min-width: 60rem) {
    font-size: 1.5rem;
  }
  @media (min-width: 80rem) {
    font-size: 1.625rem;
  }
}
.pbh-container {
  padding: var(--container-y) var(--container-x);
}
.pbh-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gap);
  & > * {
    grid-column: 1 / -1;
  }
}
.pbh-btn {
  display: block;
  width: fit-content;
  padding: 0.5rem 1rem;
  color: var(--neutral-100);
  font-weight: bold;
  border: 1px solid var(--green-a);
  background-color: var(--green-a);
  transition: background-color var(--transition), color var(--transition);
  &:hover {
    background-color: var(--neutral-100);
    color: var(--green-a);
  }
}
.pbh-space-b {
  margin-bottom: var(--block-space);
}
.pbh-space-t {
  margin-top: var(--block-space);
}
.pbh-space-y {
  margin-block: var(--block-space);
}
.pbh-space_e-b {
  margin-bottom: var(--element-space);
}
.pbh-space_e-t {
  margin-top: var(--element-space);
}
.pbh-space_e-y {
  margin-block: var(--element-space);
}

[hidden] {
  display: none;
}

.pbh-header {
  position: sticky;
  top: 0;
  z-index: 999;
  nav {
    padding-inline: var(--container-x);
    background-color: var(--green-s-1);
    box-shadow: 0 0 0.5rem
      color-mix(in oklab, var(--neutral-950) 25%, transparent);
  }

  li {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  a:not(.logo) {
    text-align: center;
    color: var(--green-a);
    font-weight: bold;
    position: relative;
    padding: 0.5rem;
    &::before {
      content: "";
      position: absolute;
      inset-inline: 50%;
      bottom: 0.5rem;
      height: 1px;
      /* width: 0100%; */
      margin-inline: auto;
      background-color: var(--green-a);
      transition: inset-inline var(--transition);
    }
    &:hover::before,
    &[data-active]::before {
      inset-inline: 0.5rem;
    }
  }
  a.logo {
    color: var(--neutral-950);
    padding: 0.5rem;
    transition: color var(--transition);
    svg {
      height: 2.5rem;
    }
    &:hover {
      color: var(--green-a);
    }
  }
  .desktop {
    display: none;
    ul {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      @media (min-width: 60rem) {
        grid-column: 2 / -2;
      }
      @media (min-width: 80rem) {
        grid-column: 3 / -3;
      }
    }
  }
  .mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    ul {
      position: absolute;
      z-index: 1;
      padding: var(--element-space);
      inset-inline: 0;
      top: 100%;
      box-shadow: 0 0 0.5rem
        color-mix(in oklab, var(--neutral-950) 25%, transparent);
      display: none;
      background-color: var(--green-s-1);
    }
    ul.active {
      display: block;
    }
    &:has(ul.active)::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      background-color: color-mix(
        in oklab,
        var(--neutral-950) 25%,
        transparent
      );
      backdrop-filter: blur(0.5rem);
    }
  }
  @media (min-width: 60rem) {
    .desktop {
      display: grid;
    }
    .mobile {
      display: none;
    }
  }
}

.pbh-footer {
  row-gap: var(--grid-gap);
  background-color: var(--green-s-1);

  .so {
    .network {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: var(--element-space);
      .logo svg {
        height: 6rem;
        width: auto;
      }
      li:not(.logo) {
        a {
          color: var(--green-a);
          transition: color var(--transition);
          &:hover {
            color: var(--neutral-950);
          }
        }
        svg {
          width: 2.5rem;
          height: 2.5rem;
        }
      }
    }
    .copyright a {
      color: var(--green-a);
      transition: font-weight var(--transition);
      &:hover {
        font-weight: bold;
      }
    }
  }
  .links,
  .legal {
    & > p {
      font-family: var(--font-serif);
      font-size: 1.25rem;
      color: var(--green-a);
      font-weight: 600;
      margin-bottom: 0.5rem;
      @media (min-width: 40rem) {
        font-size: 1.375rem;
      }
      @media (min-width: 60rem) {
        font-size: 1.5rem;
      }
      @media (min-width: 80rem) {
        font-size: 1.625rem;
      }
    }
    li a {
      display: inline-block;
      padding-block: 0.25rem;
    }
    @media (min-width: 40rem) {
      grid-column: span 6 / span 6;
    }
  }
  .links ul {
    @media (min-width: 20rem) {
      columns: 2;
    }
    li a {
      position: relative;
      transition: font-weight var(--transition), padding-left var(--transition);
      &::before {
        content: "";
        position: absolute;
        bottom: 0.25rem;
        left: 0;
        height: 1px;
        width: 0;
        background-color: var(--green-a);
        transition: width var(--transition);
      }
      &:hover {
        font-weight: bold;
        padding-left: 0.5rem;
        &::before {
          width: 100%;
        }
      }
    }
  }
  .legal li a {
    color: var(--green-a);
    transition: font-weight var(--transition);
    &:hover {
      font-weight: bold;
    }
  }
  @media (min-width: 60rem) {
    .links,
    .legal,
    .so {
      grid-column: span 4 / span 4;
    }
  }
}
.pbh-prose {
  * + * {
    margin-top: var(--element-space);
  }
  ul,
  ol {
    padding-left: 2rem;
  }
  ul {
    list-style-type: disc;
  }
  ol {
    list-style-type: decimal;
  }
  p,
  li {
    max-width: 80ch;
  }
  a {
    color: var(--green-a);
    text-decoration: underline;
  }
}
.pbh-hero {
  --noise: url(data:image/png;base64,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);
  position: relative;
  /* background: color-mix(in oklab, var(--green-a) 35%, transparent) var(--bg-img)
    no-repeat center / cover;
  background-blend-mode: multiply; */
  background: var(--bg-img) no-repeat center / cover;
  color: var(--neutral-100);
  min-height: 32rem;
  align-items: center;
  margin-bottom: var(--container-y);
  &::before {
    inset: 0;
    content: "";
    pointer-events: none;
    z-index: 0;
    position: absolute;
    background: color-mix(in oklab, var(--green-a) 15%, transparent)
      var(--noise);
    background-blend-mode: multiply;
    opacity: 0.8;
  }
  .content {
    /* height: fit-content; */
    z-index: 1;
    text-align: center;
    /* grid-column: 3 / -3; */
    display: grid;
    grid-template-columns: subgrid;
    & > * {
      grid-column: 1 / -1;
    }

    .pbh-btn {
      margin-inline: auto;
    }
    @media (min-width: 40rem) {
      & > div {
        grid-column: 2 / -2;
      }
    }
    @media (min-width: 60rem) {
      grid-column: 3 / -3;
      /* & > div {
        grid-column: 2 / -2;
      } */
    }
    @media (min-width: 80rem) {
      & > div {
        grid-column: 3 / -3;
      }
    }
  }
  &::after {
    content: "";
    position: absolute;
    top: 100%;
    inset-inline: 0;
    display: block;
    height: var(--container-y);
    background-color: var(--neutral-50);
  }
}

.fluentform {
  background-color: var(--neutral-50);
  padding: var(--element-space);

  fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--element-space);
  }
  label {
    font-weight: bold;
    margin-bottom: 0.25rem;
    display: inline-block;
    .ff-el-is-required &::after {
      content: "*";
      color: var(--pink);
      margin-left: 0;
    }
  }
  input,
  textarea,
  select {
    background-color: var(--neutral-100);
    color: var(--neutral-950);
    padding: 0.5rem;
    accent-color: var(--green-s-1);
    width: 100%;
    &::placeholder {
      font-style: italic;
      opacity: 1;
      color: var(--green-s-3);
    }
  }
  textarea {
    min-height: 3em;
  }
  .ff-el-form-check-label {
    display: flex;
    gap: 0.5rem;
  }
  .ff-t-container {
    display: grid;
    column-gap: var(--grid-gap);
    row-gap: var(--element-space);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  }
  button {
    margin-left: auto;
  }
  .required-text,
  .error {
    color: var(--pink);
    font-weight: bold;
  }
  .required-text {
    padding-left: 1rem;
  }
}

.pbh-filtres {
  .inactive-list,
  .active-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    button {
      border: var(--green-a) 1px solid;
      border-radius: 99rem;
      padding: 0.25rem 0.5rem;
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }
  }
  .inactive,
  .active {
    &:has(li button) span {
      display: none;
    }
  }
  .active {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    p {
      font-weight: bold;
    }
  }
  .active-list {
    button {
      background-color: var(--green-a);
      color: var(--neutral-100);
      svg {
        rotate: 45deg;
      }
    }
  }
}
.pbh-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--element-space);
  button {
    background-color: var(--neutral-100);
    border: 1px solid var(--green);
    padding: 0.25rem 0.5rem;
    min-width: 2rem;
    cursor: pointer;
    transition: background-color var(--transition),
      border-color var(--transition), font-weight var(--transition),
      border-width var(--transition);
    &[data-active],
    &:hover {
      background-color: var(--green);
      font-weight: bold;
      border-width: 2px;
      border-color: var(--green-a);
    }
  }
}