/* Set some variables */
  :root {
    --font-size-small: 0.9rem;
    --font-size-regular: 1.2rem;
    --font-size-large: clamp( 1.4rem, calc( 0.8909090909090909rem + 2.545454545454545vw ), 2.8rem );

    --flow: max(3vw, 1.5rem);

     /* https://colorpalettes.colorion.co/#26 */
     --color-bg: #F9F9F9;
     --color-text: #222;
     --color-primary:  #a3128a;
     --color-secondary:  #7B7BA9;
     --color-tertiary:  #F3B888;
     --color-accent:  var(--color-primary);

     accent-color: var(--color-accent);

     --border-radius:  6px;
     --header-logo-height: min(28vw, 140px);
 }

   @font-face {
   font-family: 'Clash';
   src: url('../fonts/ClashGrotesk-Variable.woff2') format('woff2');
  font-weight: 400 600;        /* declares supported weight range */
    /* font-stretch: 75% 125%; */
          /* declares supported width range */
    font-style: normal;   /* declares upright and slanted */
    font-display: swap;
 }


/**

https://github.com/schalkneethling/css-community-reset/blob/main/reset.css

 * A combination of the following resets:
 * https://piccalil.li/blog/a-more-modern-css-reset/
 * https://www.joshwcomeau.com/css/custom-css-reset/
 * https://dbushell.com/2025/09/12/css-reset/
 */

/* Use a more-intuitive box-sizing model. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */

/* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */

/* https://caniuse.com/text-size-adjust */
html {
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -moz-text-size-adjust: none;
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-text-size-adjust: none;
  /* stylelint-disable-next-line plugin/use-baseline */
  text-size-adjust: none;
}

@media (prefers-reduced-motion: no-preference) {
html {
    scroll-behavior: smooth;
}
}

/* Google Translate RTL support */

/* https://dbushell.com/2025/09/12/css-reset/#:~:text=translated%2Drtl */
html.translated-rtl {
  direction: rtl;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

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

/* Set core body defaults */
body {
  /* If supported, inherits the iOS font settings
     More at https://frontendmasters.com/blog/letting-ios-text-size-setting-affect-font-size-on-the-web/ */
  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
  font: -apple-system-body;
  font-size: 100%; /* Respect user choice */
  line-height: var(--minimalist-typography-document-line-height);

  /* fallback for older browsers */
  min-block-size: 100vh;

  /* dynamic viewport block size - https://developer.mozilla.org/en-US/docs/Web/CSS/length#vb */
  min-block-size: 100dvb;

  /* https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering#browser_compatibility */
  /* stylelint-disable-next-line value-keyword-case */
  text-rendering: optimizeLegibility;
}

summary {
  cursor: pointer;
}

/* Set shorter line heights on interactive elements */
button,
input,
label {
  line-height: var(--minimalist-typography-interactive-line-height);
}

/* Remove built-in form typography styles */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-block-size: 10em;
}

/* Balance text wrapping on headings */

/* https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap#balance */
h1,
h2,
h3,
h4 {
  /* stylelint-disable-next-line plugin/use-baseline */
  text-wrap: balance;
}

h1, h2 {
    line-height: 1.2;
}

/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
  block-size: auto;
  display: block;
  max-inline-size: 100%;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

abbr {

   text-decoration: underline #ccc dotted 0.05em;
   text-underline-offset: 0.1em;
}

/* Better link hit area */
 a {
     position: relative;
 }

   a::after {
    content: '';
    position: absolute;
    inset: -0.1rem -0.3rem;

  }

/* Helpers */
.flow > * + * {
    margin-block-start: var(--flow);
}

[data-flow-small] > * + * {
    margin-block-start: calc(var(--flow)/2);
}

.visually-hidden {
    position: absolute;
      overflow: hidden;
      clip: rect(0 0 0 0);
      height: 1px;
      width: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
}

/* Body */
body {
      --body-padding: max(7vw,20px);
   background-color: var(--color-bg);
   color: var(--color-text);
   padding: var(--body-padding);
   margin: 0;
   font-family: 'Clash';
}
/* Header */
.header-logo {

    height: var(--header-logo-height);
    aspect-ratio: 1;
}
.header-logo svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Layout */
.page-wrapper {
    display: grid;
    gap: calc(var(--flow)*2);
    grid-template:
    "header header"
    "main  main"
    "footer footer"
    / 140px 1fr;
}

  @media (width >= 950px) {
    .page-wrapper {
        grid-template:
        "header main"
        "header  main"
        ". footer"
        / 140px 1fr;
    }
  }


    /* Stacked, factor in all the gaps */
            .declaration {
                min-height: calc(100dvb - var(--body-padding) - var(--header-logo-height) - var(--flow)*2);
              }

  @media (width >= 950px) {
          .declaration {
      min-height: calc(100dvb - var(--body-padding));
    }
  }

.badge-downloads {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: calc(var(--flow)*1);
}

/* ------- */



header {
    grid-area: header;
}

main {
    grid-area: main;
    max-width: 800px;
}

footer {
    grid-area: footer;
}

.badges {
    padding: calc(var(--flow)*1);
    background-color: rgba(172, 164, 141, 0.3);
    border-radius: var(--border-radius);
    /* Peek over the bottom */
    transform: translateY(-1.5rem);
}

/* Footer */
footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: calc(var(--flow)/2);
}

/* Type */
body {
    font-size: var(--font-size-regular);
    line-height: 1.5;
}

footer {
   font-size: var(--font-size-small);
}

main p:first-child {
    font-size: var(--font-size-large);
    font-weight: 900;
    text-wrap: balance;
    line-height: 1.1;
    border-block-end: 1px #CCC dotted;
    padding-block-end: calc(var(--flow)*1);
}

/* Links */



a {
color: var(--color-accent);
text-underline-offset: 0.1em;
text-decoration-color: currentColor;
text-decoration-style: solid;
text-decoration-line: underline;
text-decoration-thickness: 0.075em;
}

a:not(:is(:hover, :focus)) {
  text-decoration-color: color-mix(in srgb, currentcolor, transparent 80%)
}

/* Badge downloads */
.badge-downloads {

    h3 span {
        text-indent: -9999px;

      display: block;
        aspect-ratio: 1;
        background-repeat: no-repeat;
        background-size: contain;
        width: 100px;

    }


    ul {
        margin-inline: 0;
        padding: 0;
        list-style: none;
        padding-inline-start: 0.5rem;
    }

    li {

        text-transform: uppercase;
        /* list-style-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%3E%3Cg%20fill=%22%23d100ba%22%3E%3Cpath%20d=%22M14%2014H2a1%201%200%200%200%200%202h12a1%201%200%200%200%200-2Z%22%20data-color=%22color-2%22%2F%3E%3Cpath%20d=%22M7.293%2011.707a1%201%200%200%200%201.414%200l5-5a1%201%200%201%200-1.414-1.414L9%208.586V1a1%201%200%200%200-2%200v7.586L3.707%205.293a1%201%200%200%200-1.414%201.414Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); */
    }
    li + li {
        margin-block-start: calc(var(--flow)*0.25)
    }
    li a {
        display: block;
        width: fit-content;



          &::before {
              display: inline-block;
              content: "";
              width: 20px;
              aspect-ratio: 1;
              background-size: contain;
              background-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%3E%3Cg%20fill=%22%23d100ba%22%3E%3Cpath%20d=%22M14%2014H2a1%201%200%200%200%200%202h12a1%201%200%200%200%200-2Z%22%20data-color=%22color-2%22%2F%3E%3Cpath%20d=%22M7.293%2011.707a1%201%200%200%200%201.414%200l5-5a1%201%200%201%200-1.414-1.414L9%208.586V1a1%201%200%200%200-2%200v7.586L3.707%205.293a1%201%200%200%200-1.414%201.414Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
              background-repeat: no-repeat;
              margin-inline-end: 0.2em;
              transform: translateY(0.2em);

          }

    }

    li span {
        display: block;
        font-size: var(--font-size-small);
        text-transform: lowercase;
    }



    /* li::marker {
      font-size: 1.2em;
      color: var(--color-accent);
    } */

}

.badge-style + .badge-style {
    margin-block-start: calc(var(--flow)*1.5);
}

.badge-style--square h3 span {
    width: 85px;
}

.badge-style--text h3 span {
    width: 70px;
}