/* ------------------------------------
   RESET (modern minimal reset)
------------------------------------ */

html {
  box-sizing: border-box;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
    font-family: 'UniNeueRegular', Arial, Helvetica, sans-serif;
    font-size:1rem;
    color: #242a33;
    background-color: #f5f5f5;
}

:root {
  --cc-color-primary: #007dba;
  --cc-color-secondary: #005b95;
  --cc-color-accent: #007dba;
  --cc-color-white: #ffffff;
  --cc-color-off-white: #f2f2f2;
  --cc-color-light-white: #f7f7f7;
  --cc-color-black: #000000;
  --cc-color-off-black: #242a33;
  --cc-color-light-grey: #eff1f5;
  --cc-color-dark-grey: #b3b3b5;
  --cc-color-green: #71da00;
  --cc-color-red: #a81105;
}




h1  {
    font-family: 'UniNeueHeavy', Arial, Helvetica, sans-serif;
    font-weight:normal;
}

h2, h3, h4, h5, h6, legend {
    font-family: 'UniNeueBold', Arial, Helvetica, sans-serif;
    font-weight:normal;
}

h3, h4, h5, h6, legend {
    font-family: 'UniNeueRegular', Arial, Helvetica, sans-serif;
    font-weight:normal;
}

h1 {
    font-size: clamp(1.5rem, 1.25vw + 1.25rem, 2rem);
    margin-bottom:1rem;
}

h2 {
    font-size: 1.75rem;
    margin-bottom:0;
}

h3 {
  font-size: 1.5rem;
    margin-bottom:0;
}

p {
  margin: 0 0 1rem 0;
}



/* ------------------------------------
   LAYOUT
------------------------------------ */

.kraken-entry__content {
  max-width:960px;
  margin:0 auto;
  padding:3rem 2rem;
}

.kraken-entry__header {
  width: 100%;
  margin:0;
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color:#fe7206;
  background-image: url(https://contrastchecker.splashmg.ca/assets/img/hero-orange-bg.png);
  background-size: cover;
  background-position: center center;
  background-attachment: scroll;
  background-repeat: no-repeat;

  .kraken-entry__header--inner {
    max-width:960px;
    margin:0 auto;
    padding-left:2rem;
    padding-right:2rem;

    .header-logo {
      display:flex;
      align-items: center;
      gap:1rem;

      .logo-icon {
        display:block;
        width:80px;
      }

      .header-logo-text {
        border-left: 2px solid #242a33;
        padding-left:1rem;

        h1 {
          line-height: 1;
          text-transform: uppercase;
        }
      }
    }
  }
}





.contrast-form {
  margin-top:4rem;

    .contrast-form__column {
        width: 100%;
        margin: 0 0 2rem 0;
        padding: 1rem;
        background-color: var(--cc-color-white);
        /* border: 1px solid var(--cc-color-dark-grey); */
        border: none;
        border-radius: 6px;
        text-align: center;

        .contrast-form__title {
            margin-bottom: -.5em;
            color: var(--cc-color-black);
            font-size: 1.5rem;
            font-weight: bold;
        }

        .instructions {
            font-size: 0.8rem;
            margin-bottom: 1rem;
        }

        .contrast-form__field {
            width: 100%;
            padding: 0.5rem;

            &.contrast-form__field--flex {
                display: flex;
                justify-content: center;
                gap: 0.5rem;

                .contrast-form__label--color-picker {
                  width:100%;
                  max-width:206px;

                  label {
                    width:100%;
                  }
                }

                
            }
        }

        .contrast-form__label {
            display: block;
            margin-bottom: 0.3rem;
            color: var(--cc-color-black);
        }

        .contrast-form__input {
            background-color: var(--cc-color-white);
            color: var(--cc-color-black);
            border: 1px dashed var(--cc-color-dark-grey);
            border-radius: 3px;
            

            &.contrast-form__input--hex {
                width: 5.8em;
                padding: 0.5rem;
                font-size: 1.5em;
                text-transform: uppercase;
                display: inline-block;
            }

            &.contrast-form__input--alpha {
                width: 60px;
                min-height: 32px;
                padding: 0 0.5rem;
            }

            &.contrast-form__input--color-picker {
              width:100%;
              max-width: 206px;
              height: 32px;
              padding: 0;
              cursor: pointer;
            }

            &.contrast-form__input--lighter {
                accent-color: var(--cc-color-off-white);
                -webkit-appearance: none;
                margin-right: 15px;
                width: 100%;
                height: 8px;
                background: var(--cc-color-dark-grey);
                border-radius: 6px;
            }
        }

        .gradient {
            border:4px solid var(--cc-color-white);
            border-radius: 6px;
            padding: 6px 16px 9px 16px;
        }
    }
}

@media (min-width: 768px) {
    .contrast-form {
        display: flex;
        gap: 1rem;

        .contrast-form__column {
            width: 50%;
            margin-bottom: 0;
        }
    }
}

.contrast-score {
    margin: 2rem auto;
    border: 2px solid #666;
    border-radius: 6px;
    padding: 1rem;
    max-width: 250px;
    text-align: center;

    .contrast-score__result {
        font-size: 3em;

        &.contrast-score__result--pass {
            color: var(--cc-color-black);
        }

        &.contrast-score__result--fail {
            color: var(--cc-color-white);
        }
    }

    &:has(.contrast-score__result.contrast-score__result--pass) {
        color: var(--cc-color-black);
        border-color: var(--cc-color-green);
        background-color: var(--cc-color-green);
    }

    &:has(.contrast-score__result.contrast-score__result--fail) {
        color: var(--cc-color-white);
        border-color: var(--cc-color-red);
        background-color: var(--cc-color-red);
    }
}

.contrast-results {

    .contrast-results__wrapper {
      margin-bottom: 2rem;
    }

    .contrast-results__column {
        &.contrast-results__column--col-01 {
            width: 100%;
        }

        &.contrast-results__column--col-02 {
            width: 100%;
        }

        p {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 0.25rem;

            span {
                margin-left: auto;
            }
        }
    }

    .contrast-examples {
        display: block;
        width: 100%;
        padding: 2rem;
        border: none;
        border-radius:6px;
        text-align: center;

        &.contrast-examples--large {
            font-size: 14pt;
            font-weight: bold;
        }
    }

    .pass {
        background-color: var(--cc-color-green);
        color: var(--cc-color-black);
        font-weight: bold;
        padding: 0.5rem 0.5rem;
        border-radius: 6px;
        text-transform: capitalize;
    }

    .fail {
        color: var(--cc-color-white);
        background-color: var(--cc-color-red);
        padding: 0.5rem 0.5rem;
        border-radius: 6px;
        text-transform: capitalize;
    }
}

@media (min-width: 768px) {
    .contrast-results {
        .contrast-results__wrapper {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin: 0 0 2rem 0;
        }

        .contrast-results__column {
            &.contrast-results__column--col-01 {
                width: 20%;
            }

            &.contrast-results__column--col-02 {
                width: 80%;
            }
        }
    }
}

.contrast-instructions {
    margin-top: 5rem;
}

.gradient input {
    width: 100%;
}



/* ================================
  WEB FONTS
  ================================ */

@font-face {
  src: url('/assets/fonts/UniNeueThin/font.eot');
  font-family: 'UniNeueThin';
  src: url('/assets/fonts/UniNeueThin/font.woff2') format('woff2'), url('/assets/fonts/UniNeueThin/font.woff') format('woff'), url('/assets/fonts/UniNeueThin/font.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/UniNeueThin/font.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  src: url('/assets/fonts/UniNeueBlack/font.eot');
  font-family: 'UniNeueBlack';
  src: url('/assets/fonts/UniNeueBlack/font.woff2') format('woff2'), url('/assets/fonts/UniNeueBlack/font.woff') format('woff'), url('/assets/fonts/UniNeueBlack/font.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/UniNeueBlack/font.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  src: url('/assets/fonts/UniNeueBold/font.eot');
  font-family: 'UniNeueBold';
  src: url('/assets/fonts/UniNeueBold/font.woff2') format('woff2'), url('/assets/fonts/UniNeueBold/font.woff') format('woff'), url('/assets/fonts/UniNeueBold/font.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/UniNeueBold/font.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  src: url('/assets/fonts/UniNeueRegular/font.eot');
  font-family: 'UniNeueRegular';
  src: url('/assets/fonts/UniNeueRegular/font.woff2') format('woff2'), url('/assets/fonts/UniNeueRegular/font.woff') format('woff'), url('/assets/fonts/UniNeueRegular/font.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/UniNeueRegular/font.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  src: url('/assets/fonts/UniNeueLight/font.eot');
  font-family: 'UniNeueLight';
  src: url('/assets/fonts/UniNeueLight/font.woff2') format('woff2'), url('/assets/fonts/UniNeueLight/font.woff') format('woff'), url('/assets/fonts/UniNeueLight/font.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/UniNeueLight/font.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  src: url('/assets/fonts/UniNeueHeavy/font.eot');
  font-family: 'UniNeueHeavy';
  src: url('/assets/fonts/UniNeueHeavy/font.woff2') format('woff2'), url('/assets/fonts/UniNeueHeavy/font.woff') format('woff'), url('/assets/fonts/UniNeueHeavy/font.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/UniNeueHeavy/font.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  src: url('/assets/fonts/UniNeueBook/font.eot');
  font-family: 'UniNeueBook';
  src: url('/assets/fonts/UniNeueBook/font.woff2') format('woff2'), url('/assets/fonts/UniNeueBook/font.woff') format('woff'), url('/assets/fonts/UniNeueBook/font.eot?#iefix') format('embedded-opentype'), url('/assets/fonts/UniNeueBook/font.ttf') format('truetype');
  font-display: swap;
}