/*
 Theme Name:   CBRA-Child
 Theme URI:    https://cbra.digital
 Description:  CBRA Child Theme
 Author:       CBRA Digital
 Author URI:   https://cbra.digital
 Template:     cbra-theme
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  cb-child
*/

/* FONTS */

/* Commissioner */
@font-face {
  font-family: "Commissioner";
  src: url("./assets/fonts/Commissioner-Thin.ttf");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Commissioner";
  src: url("./assets/fonts/Commissioner-ExtraLight.ttf");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Commissioner";
  src: url("./assets/fonts/Commissioner-Light.ttf");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Commissioner";
  src: url("./assets/fonts/Commissioner-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Commisioner";
  src: url("./assets/fonts/Commisioner-Regular.ttf");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Commissioner";
  src: url("./assets/fonts/Commissioner-Medium.ttf");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Commissioner";
  src: url("./assets/fonts/Commissioner-Semibold.ttf");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Commissioner";
  src: url("./assets/fonts/Commissioner-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Commissioner";
  src: url("./assets/fonts/Commissioner-ExtraBold.ttf");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "Commissioner";
  src: url("./assets/fonts/Commissioner-Black.ttf");
  font-weight: 900;
  font-style: normal;
}

:root {
  --font-primary: "Commissioner", sans-serif;
}

/* COLORS */
:root {
  --color-primary: #102e4a;
  --color-primary-dark: #0c2236;
  --color-text-primary: #6e7073;
  /* --color-text-secondary: #577898;  OLD */
  --color-text-secondary: #557594;
  --color-light: #f9f9f9;
  --color-border: #accbe1;
  --color-lightblue: #cee5f2;
  --color-btn-accent: #cbe88e;

  --sidebar-width: 280px;
}

/* GENERAL STYLES */
body {
  --width-content: min(1286px, 100%);
  --width-gutter: 1.56rem;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 1.063rem; /* 17px */
  background-color: var(--color-light);
  background-image: radial-gradient(#ccc 1px, transparent 1px);
  background-size: 20px 20px;

  #page {
    min-height: 100dvh;
  }
}

h1 {
  font-size: 3.375rem;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--color-primary);
}

h2 {
  font-size: 3rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-primary);
}

h2.new {
  font-size: 1.5rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  font-style: italic;
}

h2.secondary {
  font-size: 1.75rem;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-primary);
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  /* cursor: pointer; */

  &::after {
    content: "";
    position: absolute;
    bottom: -0.25rem;
    right: -30px;
    width: 1.25rem;
    height: 1.25rem;
    background: url("./assets/icons/arrow-headline.svg") no-repeat center center;
    background-size: contain;
    transform: translateY(0.5rem);
    opacity: 0;
    transition:
      transform 0.35s ease,
      opacity 0.35s ease;
  }

  &:hover::after {
    transform: translateY(-15px);
    opacity: 1;
  }
}

h3 {
  font-size: 2rem;
  font-weight: 400;
  font-style: italic;
  color: var(--color-text-secondary);
}

p {
  line-height: 1.56rem;
  color: var(--color-text-primary);
}

@media only screen and (max-width: 767px) {
  h1 {
    font-size: 1.75rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h2.new {
    text-transform: lowercase;
    line-height: normal;
  }

  h3 {
    font-size: 1.25rem;
  }

  p {
    font-size: 0.938rem;
  }
}

/* BUTTONS */

/* Button Primary */
.cb-btn--primary {
  width: fit-content;
  display: inline-flex;
  width: fit-content;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  padding: 0.625rem 2rem 0.625rem 1rem;
  border-radius: 3px;
  background-color: var(--color-primary);
  background-image: url("./assets/icons/arrow.svg");
  background-repeat: no-repeat;
  background-position: right 10px center;
  color: var(--color-light);
  transition:
    background-color 350ms ease,
    color 350ms ease;
}

.cb-btn--primary:hover {
  background-color: var(--color-light);
  color: var(--color-primary);
  background-image: url("./assets/icons/arrow-dark.svg");
}

/* Download Button */

.cb-btn--download {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  padding: 0.625rem 0.625rem 0.625rem 2rem;
  border-radius: 3px;
  background-color: var(--color-primary);
  background-image: url("./assets/icons/icon-download.svg");
  background-repeat: no-repeat;
  background-position: left 10px center;
  color: var(--color-light);
  transition:
    background-color 350ms ease,
    color 350ms ease;
}

.cb-btn--download:hover {
  background-color: var(--color-light);
  color: var(--color-primary);
  background-image: url("./assets/icons/icon-download--dark.svg");
}

/* Arrow Button */

.cb-btn--arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  padding: 0.625rem 0.625rem 0.625rem 0;
  border-radius: 3px;
  background-color: var(--color-primary);
  background-image: url("./assets/icons/icon-download.svg");
  background-repeat: no-repeat;
  background-position: left 10px center;
  color: var(--color-light);
  transition:
    background-color 350ms ease,
    color 350ms ease;
}

.cb-btn--arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  padding-right: 1rem;
  background: url("./assets/icons/arrow-dark.svg") no-repeat;
  background-position: right 18px;
  color: var(--color-primary);
  position: relative;
  transition: color 0.35s ease;
  width: fit-content;
}

.cb-btn--arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-primary);
  transition: width 0.35s ease;
}

.cb-btn--arrow:hover {
  color: var(--color-primary);
}

.cb-btn--arrow:hover::after {
  width: 100%;
}

/* Button Light */

.cb-btn--arrow-light {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  background: url("./assets/icons/arrow.svg") no-repeat;
  background-position: right 7px;
  color: var(--color-light);
  position: relative;
  transition: color 0.35s ease;
  width: fit-content;
}

.cb-btn--arrow-light::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-light);
  transition: width 0.35s ease;
}

.cb-btn--arrow-light:hover::after {
  width: 100%;
}

/* Button Alternative - Lightblue */

.cb-btn--arrow_alt {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  padding-right: 1rem;
  padding-bottom: 0.5rem;
  background: url("./assets/icons/arrow-light.svg") no-repeat right 7px;
  color: var(--color-text-secondary);
  position: relative;
  transition: color 0.35s ease;
  width: fit-content;
}

.cb-btn--arrow_alt::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-text-secondary);
  transition: width 0.35s ease;
}

.cb-btn--arrow_alt:hover::after {
  width: 100%;
}

.cb-btn--arrow_alt:hover {
  color: var(--color-text-secondary);
}

/* Secondary Button - Accent color */

.cb-btn--secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  font-weight: 500;
  padding: 0.625rem 0.875rem;
  border-radius: 3px;
  background-color: var(--color-btn-accent);
  color: var(--color-primary);
  transition: background-color ease 350ms;

  &:hover {
    background-color: var(--color-primary);
    color: var(--color-btn-accent);
  }
}

/* Page grid */
#page main {
  grid-template-columns: 1fr 1fr min(1286px, 100%) 1fr 1fr;
}
@media only screen and (max-width: 1440px) {
  #page main {
    grid-template-columns: 1fr 1fr calc(100% - 6rem) 1fr 1fr;
  }
}

@media only screen and (max-width: 1024px) {
  #page main {
    grid-template-columns: 1fr 1fr calc(100% - 3rem) 1fr 1fr;
  }
}

/* Sidebar Layout */
#content {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
}

main {
  grid-column: 2;
}

footer {
  grid-column: 2;
  grid-row: 3;
}

@media only screen and (max-width: 1024px) {
  #content {
    display: block;
    grid-template-columns: 1fr;
  }
  main {
    grid-template-columns: 100%;
  }
}

/* RECAPTCHA BADGE */
.grecaptcha-badge {
  display: none;
}