@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
/* @import "https://unpkg.com/open-props" layer(openprops);
@import "https://unpkg.com/open-props/normalize.min.css" layer(openprops);
@import "https://unpkg.com/open-props/buttons.min.css" layer(buttons); */
@import "./basic.css" ;

/*
GRID BY @kevinpowell popover
https://codepen.io/kevinpowell/pen/MYgReqz
Buttons 
https://codepen.io/argyleink/pen/gOXbvjj?editors=0100
normalize
https://codepen.io/argyleink/pen/KKvRORE
*/

@view-transition {
  navigation: auto;
}
:root {
  --main-col: #294179;
  --sec-col: #4c863c;
  --third-col: #6b7074;
  --main-width: 1400px;
  --col-width: 670px;
  --size-fluid-2x: max(1.2rem,min(2.4vw,1.8rem));
  --size-fluid-3x: max(1.7rem, min(3.5vw, 2.5rem));
  --breakpoint_mobile: 400px;
  --breakpoint_tablet: 900px;
}

body {
  margin: 0;
  font-size: var(--font-size-fluid-05);
  & :where(p, a, ul, ol, dl, h6) {
    font-size: var(--font-size-fluid-05);
  }
}
.jost-std {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400; /* 100 to 900 */
  font-style: normal;
}

@layer basic {
h1, h2, h3, h4, h5, h6 {
    color: var(--main-col);
    max-inline-size: unset;
  font-weight: 500;
}
  h1 {
  font-size: var(--size-fluid-3x);
    margin-bottom: 0.7rem;
}
h2 {
  font-size: var(--size-fluid-2x);
}
h3 {
  font-size: var(--font-size-fluid-05);
}
  h4 {
    font-size: inherit;
    font-weight: 400;
    color: var(--main-col);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap-style: balance;
}

a {
  color: var( --third-col );
  text-decoration: none;
}
p {
  margin-bottom: var(--size-3);
}
li, p {
  max-inline-size: 100%;
}
fieldset {
  border-color: var(--geay-7);
}
}
h4:has(button) {
  position: relative;
  width: 100%;
  max-width: 100%;
  & button {
    position: absolute;
    right: 0px;
    top: 0;
  }
}

legend {
  font-weight: var(--font-weight-6);
}
ul,
.list-std {
  list-style-type: none;
  padding-inline-start: 0;
}

div.secial {
  background-color: var(--gray-2);
}

#btn-tip-1-1 {
  anchor-name: --myAnchor-1-1;
}

#tip-1-1 {
  position-anchor: --myAnchor-1-1;
}
div.btns {
  display: flex;
  flex-direction: row;
  gap: var(--size-2);
  justify-content: space-between;
}

@layer buttons {
  .btn-custom {
    --_bg: linear-gradient(var(--col-secondary), var(--col-primary));
    --_border: var(--green-7);
    --_text: #fff;
    --_ink-shadow: 0 1px 0 var(--green-7);
    font-weight: var(--font-weight-4);
  }
  .btn-custom-blue {
    --_bg: linear-gradient(#717171, #5f5f5f);
    --_border: var(--green-7);
    --_text: #fff;
    --_ink-shadow: 0 1px 0 var(--green-7);
    font-weight: var(--font-weight-4);
  }
  .btn-tip {
    font-size: var(--size-3);
    font-weight: var(--font-weight-4);
  }
}

@layer form {
  form {
    display: flex;
    flex-direction: row;
    flex-direction: column;
    & label {
      display: grid;
      margin-top: var(--size-3);
    }
    & .input {
      display: grid;
      grid-template-columns: 1fr max-content;
    }
  }
}

@layer checkbox {
  [type="radio"] {
    --dim: 26px;
    width: var(--dim);
    height: var(--dim);
  }
  label:has([type="radio"]) {
    display: flex;
    gap: var(--size-2);
    align-items: center;
  }
  label:has(:checked) {
    color: green;
    font-weight: var(--font-weight-6);
  }
  .checkbox {
    input {
      appearance: none;
      position: relative;
      display: inline-block;
      background: var(--gray-4);
      height: 1.65rem;
      width: 2.75rem;
      vertical-align: middle;
      border-radius: 2rem;
      box-shadow: 0px 1px 3px #0003 inset;
      transition: 0.25s linear background;
    }
    input::before {
      content: "";
      display: block;
      width: 1.25rem;
      height: 1.25rem;
      background: #fff;
      border-radius: 1.2rem;
      position: absolute;
      top: 0.2rem;
      left: 0.2rem;
      box-shadow: 0px 1px 3px #0003;
      transition: 0.25s linear transform;
      transform: translatex(0rem);
    }

    :checked {
      background: var(--col-primary);
    }
    :checked::before {
      transform: translatex(1rem);
    }
    input:focus-visible {
      outline: 2px solid dodgerblue;
      outline-offset: 2px;
    }
    input:focus {
      /* outline: none; */
      outline-color: transparent;
    }
  }
}

@layer grid {
  .primary-layout {
    /* user settings */
    --padding-inline: 1rem;
    --content-max-width: 1200px;
    --narrow-size-reduction: 200px;
    --popout-extra-distance: 100px;
    --breakout-extra-distance: 200px;

    /* for calculations */
    --_narrow-column-size: calc(
      (var(--content-max-width) - var(--narrow-size-reduction)) / 2
    );
    --_content-column-size: var(--narrow-size-reduction);
    --_breakout-column-size: calc(
      var(--breakout-extra-distance) - var(--popout-extra-distance)
    );

    display: grid;
    grid-template-columns:
      [full-width-start] minmax(var(--padding-inline), 1fr)
      [breakout-start] minmax(0, var(--_breakout-column-size))
      [popout-start] minmax(0, var(--popout-extra-distance))
      [content-start] minmax(0, var(--_content-column-size))
      [narrow-start]
      min(50% - var(--padding-inline), var(--_narrow-column-size))
      [center-line]
      min(50% - var(--padding-inline), var(--_narrow-column-size))
      [narrow-end]
      minmax(0, var(--_content-column-size))
      [content-end]
      minmax(0, var(--popout-extra-distance)) [popout-end]
      minmax(0, var(--_breakout-column-size)) [breakout-end]
      minmax(var(--padding-inline), 1fr) [full-width-end];
  }

  :is(.primary-layout, .full-width) > * {
    grid-column: content;
  }

  :is(.primary-layout, .full-width) > .narrow {
    grid-column: narrow;
  }
  :is(.primary-layout, .full-width) > .narrow-left-only {
    grid-column: narrow-start / content-end;
  }
  :is(.primary-layout, .full-width) > .narrow-right-only {
    grid-column: content-start / narrow-end;
  }
  :is(.primary-layout, .full-width) > .popout {
    grid-column: popout;
  }
  :is(.primary-layout, .full-width) > .popout-left-only {
    grid-column: popout-start / content-end;
  }
  :is(.primary-layout, .full-width) > .popout-right-only {
    grid-column: content-start / popout-end;
  }
  :is(.primary-layout, .full-width) > .breakout {
    grid-column: breakout;
  }
  :is(.primary-layout, .full-width) > .breakout-left-only {
    grid-column: breakout-start / content-end;
  }
  :is(.primary-layout, .full-width) > .breakout-right-only {
    grid-column: content-start / popout-end;
  }
  :is(.primary-layout, .full-width) > .full-width {
    display: grid;
    grid-template-columns: inherit;
    grid-column: full-width;
  }
  :is(.primary-layout, .full-width) > .full-width-left-only {
    grid-column: full-width-start / content-end;
  }
  :is(.primary-layout, .full-width) > .full-width-right-only {
    grid-column: content-start / full-width-end;
  }

  .full-width-content-split,
  .full-width-popout-split,
  .full-width-narrow-split,
  .full-width-breakout-split {
    grid-column: full-width;
    display: grid;
    grid-template-columns: inherit;

    > :is(:first-child, :last-child) {
      display: grid;
      grid-template-columns: subgrid;
      align-content: center;
    }

    > :where(:first-child) {
      grid-column: full-width-start / center-line;
      padding-right: 2rem;
      > * {
        grid-column: var(--_size, content) / center-line;
      }
    }

    > :where(:last-child) {
      grid-column: center-line / full-width-end;
      padding-left: 2rem;

      > * {
        grid-column: center-line / var(--_size);
      }
    }
  }

  .full-width-content-split {
    --_size: content;
  }
  .full-width-narrow-split {
    --_size: narrow;
  }
  .full-width-popout-split {
    --_size: popout;
  }
  .full-width-content-split {
    --_size: content;
  }
  .full-width-breakout-split {
    --_size: breakout;
  }

  .full-half {
    padding: 0;
    > * {
      grid-column: 1 / -1;
    }
  }
}

@layer popover {
  /**[popover]:before {
    --dimensions: 80px;

    border-radius: 1000rem;
    width: var(--dimensions);
    height: var(--dimensions);
    top: 0;
    left: 20px;
    content: "x";
    color: transparent;
    position: absolute;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="75px" viewBox="0 -960 960 960" width="75px" fill="%235f6368"><path d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>');
  }**/
  [popover] {
    position: fixed;
    place-self: center;
    padding: 0;
    padding-top: 50px;
    max-width: min(700px, 90%);
    background: transparent;
    overflow: hidden;
    background: #fff;
    padding: 1rem;
    border-radius: 5px;

    & p {
      text-wrap-style: pretty;
    }
    & .inner {
      max-height: 90vh;
      padding: 3rem 2rem 2rem 2rem;
      color: #fff;
      background-color: var(--col-primary);
      border-radius: var(--radius-4);
      overflow: auto;
    }
  }
  ::backdrop {
    background-color: #0002;
  }
}
/* helper classes */
.col2 {
  columns: 2;
  gap: 4rem;
 
}
/* @media (width < var(--size-sm)) { */
@media (width < 480px) {
  .col2 {
    columns:1;
  }
}