/*
Theme Name: Prosem Theme
Author: PROSEM
Author URI: https://prosem.pl/
Requires at least: 5.9
Requires PHP: 5.6
Version: 11.1
Text Domain: prosem
Tags: prosem

Prosem Theme, (C) 2022 WordPress.org
*/

/* dm-sans-regular - latin */
@font-face {
  font-family: "DM Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  src: url("./assets/fonts/dm-sans-v11-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("./assets/fonts/dm-sans-v11-latin-regular.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("./assets/fonts/dm-sans-v11-latin-regular.woff2") format("woff2"),
    /* Super Modern Browsers */ url("./assets/fonts/dm-sans-v11-latin-regular.woff")
      format("woff"),
    /* Modern Browsers */ url("./assets/fonts/dm-sans-v11-latin-regular.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("./assets/fonts/dm-sans-v11-latin-regular.svg#DMSans") format("svg"); /* Legacy iOS */
}
/* dm-sans-italic - latin */
@font-face {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 400;
  src: url("./assets/fonts/dm-sans-v11-latin-italic.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("./assets/fonts/dm-sans-v11-latin-italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("./assets/fonts/dm-sans-v11-latin-italic.woff2") format("woff2"),
    /* Super Modern Browsers */ url("./assets/fonts/dm-sans-v11-latin-italic.woff")
      format("woff"),
    /* Modern Browsers */ url("./assets/fonts/dm-sans-v11-latin-italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("./assets/fonts/dm-sans-v11-latin-italic.svg#DMSans") format("svg"); /* Legacy iOS */
}
/* dm-sans-500 - latin */
@font-face {
  font-family: "DM Sans", sans-serif;
  font-style: normal;
  font-weight: 500;
  src: url("./assets/fonts/dm-sans-v11-latin-500.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("./assets/fonts/dm-sans-v11-latin-500.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("./assets/fonts/dm-sans-v11-latin-500.woff2") format("woff2"),
    /* Super Modern Browsers */ url("./assets/fonts/dm-sans-v11-latin-500.woff")
      format("woff"),
    /* Modern Browsers */ url("./assets/fonts/dm-sans-v11-latin-500.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("./assets/fonts/dm-sans-v11-latin-500.svg#DMSans")
      format("svg"); /* Legacy iOS */
}
/* dm-sans-500italic - latin */
@font-face {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 500;
  src: url("./assets/fonts/dm-sans-v11-latin-500italic.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("./assets/fonts/dm-sans-v11-latin-500italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("./assets/fonts/dm-sans-v11-latin-500italic.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("./assets/fonts/dm-sans-v11-latin-500italic.woff")
      format("woff"),
    /* Modern Browsers */ url("./assets/fonts/dm-sans-v11-latin-500italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("./assets/fonts/dm-sans-v11-latin-500italic.svg#DMSans") format("svg"); /* Legacy iOS */
}
/* dm-sans-700 - latin */
@font-face {
  font-family: "DM Sans", sans-serif;
  font-style: normal;
  font-weight: 700;
  src: url("./assets/fonts/dm-sans-v11-latin-700.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("./assets/fonts/dm-sans-v11-latin-700.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("./assets/fonts/dm-sans-v11-latin-700.woff2") format("woff2"),
    /* Super Modern Browsers */ url("./assets/fonts/dm-sans-v11-latin-700.woff")
      format("woff"),
    /* Modern Browsers */ url("./assets/fonts/dm-sans-v11-latin-700.ttf")
      format("truetype"),
    /* Safari, Android, iOS */ url("./assets/fonts/dm-sans-v11-latin-700.svg#DMSans")
      format("svg"); /* Legacy iOS */
}
/* dm-sans-700italic - latin */
@font-face {
  font-family: "DM Sans", sans-serif;
  font-style: italic;
  font-weight: 700;
  src: url("./assets/fonts/dm-sans-v11-latin-700italic.eot"); /* IE9 Compat Modes */
  src: local(""),
    url("./assets/fonts/dm-sans-v11-latin-700italic.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("./assets/fonts/dm-sans-v11-latin-700italic.woff2")
      format("woff2"),
    /* Super Modern Browsers */ url("./assets/fonts/dm-sans-v11-latin-700italic.woff")
      format("woff"),
    /* Modern Browsers */ url("./assets/fonts/dm-sans-v11-latin-700italic.ttf")
      format("truetype"),
    /* Safari, Android, iOS */
      url("./assets/fonts/dm-sans-v11-latin-700italic.svg#DMSans") format("svg"); /* Legacy iOS */
}

/* VARIABLES */
:root {
  --prosem-primary-color: #fceb4e;
  --prosem-dark-color: #12131d;
  --prosem-light-color: #ffffff;
  --prosem-light-blue-color: #b2bde6;
  --prosem-green-color: #33eabe;
  --prosem-red-color: #ee5c5d;
  --prosem-neutral-color: #f5f5f5;
  --prosem-dark-blue-color: #12142d;
  --prosem-gray-color: #a5aabb;
  --prosem-light-gray-color: #f5f5f5;
  --prosem-dark-gray-color: #65666a;
  --prosem-dark-neutral-color: #EFEFEF;
  --prosem-brand-blue-color: #69749F;
  --prosem-brand-red-color: #EA3334;

  --prosem-light-blue-highlight: #b2bde680;
  --prosem-primary-highlight: #fceb4e80;
  --prosem-dark-overlay: #12131deb;
  --prosem-primary-overlay: #fceb4eeb;

  --prosem-navbar-height: 96px;
}

/* GLOBAL STYLES */

body {
  color: var(--prosem-light-color);
  background-color: var(--prosem-dark-color);
}

* {
  font-family: "DM Sans", sans-serif;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* **************** BUTTON STYLES **************** */

.button {
  background-color: var(--prosem-primary-color);
  color: var(--prosem-dark-color);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  padding: 15px 28px;
  border-radius: 26px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s linear;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.button:active,
.button:focus {
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
  outline: none;
}

.button:hover {
  background-color: var(--prosem-light-blue-highlight);
}

.button.outline {
  background-color: transparent;
  color: var(--prosem-light-color);
  border: 2px solid var(--prosem-primary-color);
}

.button.outline:hover {
  background-color: var(--prosem-light-blue-highlight);
}

/*  **************** BUTTON STYLES **************** */

/*  **************** INPUT STYLES **************** */

.input {
  display: block;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 14px 16px;
  color: var(--prosem-light-color);
  border: none;
  margin-bottom: 10px;
  width: 100%;
}

.input:focus,
.input:active {
  outline: none;
  border: 2px solid var(--prosem-light-blue-color);
}

.input::placeholder {
  color: var(--prosem-light-blue-color);
}

textarea.input {
  resize: none;
}

.valid .input {
  background-image: url("data:image/svg+xml,%3Csvg width='19' height='14' viewBox='0 0 19 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.9571 1.04289C18.3476 1.43342 18.3476 2.06658 17.9571 2.45711L7.45711 12.9571C7.06658 13.3476 6.43342 13.3476 6.04289 12.9571L0.792893 7.70711C0.402369 7.31658 0.402369 6.68342 0.792893 6.29289C1.18342 5.90237 1.81658 5.90237 2.20711 6.29289L6.75 10.8358L16.5429 1.04289C16.9334 0.652369 17.5666 0.652369 17.9571 1.04289Z' fill='%2333EABE'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 16px);
}

.invalid .input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 320 512'%3E%3C!--! Font Awesome Pro 6.1.2 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons  Inc. --%3E%3Cpath d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z' fill='%23EE5C5D' /%3E%3C/svg%3E");
  border: 2px solid var(--prosem-red-color);
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: calc(100% - 16px);
}

.invalid .feedback {
  color: var(--prosem-red-color);
  font-size: 10px;
  font-weight: 500;
}

.valid .feedback {
  color: var(--prosem-green-color);
  font-size: 10px;
  font-weight: 500;
}

/*  **************** INPUT STYLES **************** */

/*  **************** HEADER STYLES **************** */

.h1 {
  font-style: normal;
  font-weight: 700;
  font-size: 64px;
  line-height: 70px;
}

.h2 {
  font-style: normal;
  font-weight: 400;
  font-size: 64px;
  line-height: 70px;
}

.h3 {
  font-weight: 700;
  font-size: 32px;
  line-height: 40px;
}

.h4 {
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
}

@media screen and (max-width: 860px) {
  .h1 {
    font-size: 42px;
    line-height: 48px;
  }

  .h2 {
    font-style: normal;
    font-weight: 400;
    font-size: 42px;
    line-height: 48px;
  }

  .h3 {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
  }
}

@media screen and (max-width: 420px) {
  .h1 {
    font-size: 36px;
    line-height: 42px;
  }

  .h2 {
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 36px;
  }

  .h3 {
    font-weight: 700;
    font-size: 18px;
    line-height: 24px;
  }
}

/*  **************** HEADER STYLES **************** */

/*  **************** UTILS **************** */

/* GRADIENTS */
.dark-blue-gradient {
  background: linear-gradient(180deg, #12142d 0%, #1b2b5a 100%);
}

.neutral-gradient {
  background: linear-gradient(180deg, #efefef 0%, #ffffff 100%);
}

/* BACKGOUNDS */

.primary-background {
  background-color: var(--prosem-primary-color);
}

.neutral-background {
  background-color: var(--prosem-neutral-color);
}

.dark-blue-background {
  background-color: var(--prosem-dark-blue-color);
}

.light-background {
  background-color: var(--prosem-light-color);
}

.light-gray-background {
  background-color: var(--prosem-light-gray-color);
}

.brand-blue-background {
  background-color: var(--prosem-brand-blue-color);
}

.brand-red-background {
  background-color: var(--prosem-brand-red-color);
}

.brand-yellow-background {
  background-color: var(--prosem-primary-color);
}

/* TEXTS */

.dark-text {
  color: var(--prosem-dark-color);
}

.primary-text {
  color: var(--prosem-primary-color);
}

.gray-text {
  color: var(--prosem-gray-color);
}

.light-text {
  color: var(--prosem-light-color);
}

.font-normal {
  font-weight: 400;
}

.font-bold {
  font-weight: 700;
}
/*  **************** UTILS **************** */