/*
 Theme Name:     clearclicks (Divi Child)
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    clearclicks - a Divi child theme
 Author:         clearclicks / Elegant Themes
 Author URI:     https://clearclicks.de
 Template:       Divi
 Version:        1.0.0
*/

/* =Theme customization starts here
------------------------------------------------------- */

:root {
  --white: rgba(255, 255, 255, 1);
  --black: #272727;
  --offwhite: #d4d4d4;
  --accent1: #ff6600;
  --accent2: #006699;
  --accent3: #e3ff00;
  --accent1-2: rgba(255, 102, 0, 0.2);
  --accent2-2: rgba(0, 102, 153, 0.2);
  --accent3-2: rgba(227, 255, 0, 0.2);

  --font-family-headlines: 'Blinker', Helvetica, Arial, Lucida, sans-serif;
  --font-family-copytext: 'Hind', Helvetica, Arial, Lucida, sans-serif;

  /* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1240,20,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --step--2: clamp(0.7901rem, 0.7867rem + 0.0172vw, 0.8rem);
  --step--1: clamp(0.8889rem, 0.8502rem + 0.1932vw, 1rem);
  --step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
  --step-1: clamp(1.125rem, 0.9728rem + 0.7609vw, 1.5625rem);
  --step-2: clamp(1.2656rem, 1.0265rem + 1.1957vw, 1.9531rem);
  --step-3: clamp(1.4238rem, 1.0699rem + 1.7697vw, 2.4414rem);
  --step-4: clamp(1.6018rem, 1.0975rem + 2.5217vw, 3.0518rem);
  --step-5: clamp(1.802rem, 1.102rem + 3.5003vw, 3.8147rem);
  --step-6: clamp(2.0273rem, 1.0739rem + 4.7671vw, 4.7684rem);

  --text-line-height-base: 1.65;

  --gradient-b-y: linear-gradient(
    30deg,
    #006699 0%,
    #006a9e 9.09%,
    #0076aa 18.18%,
    #0089b8 27.27%,
    #009fbf 36.36%,
    #00b7b8 45.45%,
    #00cda3 54.55%,
    #00e182 63.64%,
    #6cf05e 72.73%,
    #acf93a 81.82%,
    #d4fe18 90.91%,
    #e3ff00 100%
  );
  --gradient-y-b: linear-gradient(
    30deg,
    #e3ff00 0%,
    #d4fe18 9.09%,
    #acf93a 18.18%,
    #6cf05e 27.27%,
    #00e182 36.36%,
    #00cda3 45.45%,
    #00b7b8 54.55%,
    #009fbf 63.64%,
    #0089b8 72.73%,
    #0076aa 81.82%,
    #006a9e 90.91%,
    #006699 100%
  );
  --gradient-o-y: linear-gradient(
    30deg,
    #ff6600 0%,
    #ff6a00 9.09%,
    #ff6d00 11.98%,
    #ff7500 18.18%,
    #ff8400 27.27%,
    #ff8b00 30.73%,
    #ff9700 36.36%,
    #ffab00 45.45%,
    #feba00 52.08%,
    #fdc000 54.55%,
    #f8d300 63.64%,
    #f2e200 72.72%,
    #f1e500 72.73%,
    #eaf300 81.82%,
    #e9f600 85.41%,
    #e8f700 85.42%,
    #e5fc00 90.91%,
    #e5fc00 90.92%,
    #e5fc00 90.93%,
    #e3ff00 100%
  );
  --gradient-y-o: linear-gradient(
    30deg,
    #e3ff00 0%,
    #e5fc00 9.09%,
    #eaf300 18.18%,
    #f1e500 27.27%,
    #f8d300 36.36%,
    #fdc000 45.45%,
    #ffab00 54.55%,
    #ff9700 63.64%,
    #ff8400 72.73%,
    #ff7500 81.82%,
    #ff6a00 90.91%,
    #ff6600 100%
  );
  --gradient-b-y-o: linear-gradient(
    90deg,
    #006699 0%,
    #006a9e 4.35%,
    #0076aa 8.7%,
    #0089b8 13.04%,
    #009fbf 17.39%,
    #00b7b8 21.74%,
    #00cda3 26.09%,
    #00e182 30.43%,
    #6cf05e 34.78%,
    #acf93a 39.13%,
    #d4fe18 43.48%,
    #e3ff00 47.83%,
    #e3ff00 52.17%,
    #e5fc00 56.52%,
    #eaf300 60.87%,
    #f1e500 65.22%,
    #f8d300 69.57%,
    #fdc000 73.91%,
    #ffab00 78.26%,
    #ff9700 82.61%,
    #ff8400 86.96%,
    #ff7500 91.3%,
    #ff6a00 95.65%,
    #ff6600 100%
  );
}

::selection {
  background-color: var(--accent1-2);
  /* cursor: copy;
    outline: 1px dashed var(--accent1);
    text-decoration: underline overline var(--accent3); */
}

/* ============== TYPOGRAPHY ============== */

html {
  font-size: var(--step-0);
  -webkit-hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -webkit-hyphenate-limit-chars: 6 3 3;
  -webkit-hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-last: always;
  -webkit-hyphenate-limit-zone: 8%;
  -moz-hyphens: auto;
  -moz-hyphenate-limit-chars: 6 3 3;
  -moz-hyphenate-limit-lines: 2;
  -moz-hyphenate-limit-last: always;
  -moz-hyphenate-limit-zone: 8%;
  -ms-hyphens: auto;
  -ms-hyphenate-limit-chars: 6 3 3;
  -ms-hyphenate-limit-lines: 2;
  -ms-hyphenate-limit-last: always;
  -ms-hyphenate-limit-zone: 8%;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
  /* hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%; */
}

body {
  font-family: 'Hind', sans-serif;
  font-weight: 400;
  line-height: var(--text-line-height-base);
}

a {
  text-decoration-color: var(--accent3);
}

p,
li,
td,
dt,
dd {
  font-size: var(--step-0);
  line-height: var(--text-line-height-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.15;
}

h1,
h2 {
  font-family: var(--font-family-headlines);
  font-weight: 700;
}

h1 {
  margin-top: 0;
  font-size: var(--step-5);
}

h2 {
  font-size: var(--step-4);
}

h3,
h4,
th {
  font-family: var(--font-family-copytext);
  font-weight: 600;
}

h3 {
  font-size: var(--step-3);
}

h4,
th {
  font-size: var(--step-2);
}

h5,
h6 {
  font-family: var(--font-family-copytext);
  font-weight: 400;
}

h5 {
  font-size: var(--step-1);
}

h6 {
  font-size: var(--step-0);
}

small,
caption {
  font-size: var(--step--1);
}

/* ============== LINKS & BUTTONS ============== */

p > a:not(.et_pb_button),
td > a:not(.et_pb_button),
.et_pb_text li > a:not(.et_pb_button) {
  text-decoration: none;
  background-image: 
      linear-gradient(var(--black), var(--black)),
      linear-gradient(var(--accent3), var(--accent3));
  background-position: 
      0 calc(100% - 1px),
      0 100%;
  background-repeat: no-repeat;
  background-size: 
      100% 1px,
      100% 0.25em;
  transition: background-size 0.3s ease-out;
  padding: 0 .25em;
}

p > a:not(.et_pb_button):hover,
td > a:not(.et_pb_button):hover,
.et_pb_text li > a:not(.et_pb_button):hover {
  background-size: 
      100% 1px,
      100% 100%;
}

footer #contact .et_pb_contact_submit::after {
  content: '';
  display: inline-block;
  opacity: 1;
  content: attr(data-icon);
}

/* ============== FOOTER ============== */

footer .et_pb_menu__menu {
  display: block !important;
}

footer .et_mobile_nav_menu {
  display: none !important;
}

/* ============== HEADER / MENU ============== */

.hide-header {
  opacity: 0;
  margin-top: -200px !important;
}

.show-header {
  opacity: 1;
  margin-top: 0px !important;
}

#global-header-section {
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
}

#global-header-section.et_pb_sticky.et_pb_sticky--top .et_pb_row.clearfix {
  width: 100% !important;
}

/* ------------------------------------------
Header Menu Animation 
------------------------------------------ */

@media all and (min-width: 980px) {
  header .hover {
    background-image: url(/wp-content/uploads/2023/04/clearclicks-circle-y.svg);
    background-size: 0rem;
    background-repeat: no-repeat;
    background-position: center center;
    transition: background-size 1s ease, opacity 1s ease;
  }

  header .hover:hover {
    background-size: 3rem;
  }

  header .hover:after {
    display: block;
    z-index: 1;
    font-family: var(--font-family-headlines);
    font-size: var(--step-2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 1s ease;
  }

  header .hover:hover:after {
    opacity: 1;
  }

  header .hover a {
    transition: opacity 1s ease;
  }

  header .hover:hover a {
    opacity: 0.1;
    z-index: 2;
  }

  header .hover.hover-go {
    background-image: url(/wp-content/uploads/2023/04/clearclicks-circle-o.svg);
  }

  header .hover.hover-grow {
    background-image: url(/wp-content/uploads/2023/04/clearclicks-circle-b.svg);
  }

  header .hover.hover-flow {
    background-image: url(/wp-content/uploads/2023/04/clearclicks-circle-y.svg);
  }

  header .hover.hover-go:after {
    content: 'GO';
  }

  header .hover.hover-flow:after {
    content: 'FLOW';
  }

  header .hover.hover-grow:after {
    content: 'GROW';
  }
}

/* ============== TABLES ============== */

table,
.entry-content table:not(.variations) {
  border: none !important;
  margin: 0;
}

th,
td {
  font-size: var(--step-0);
}

thead tr th {
  background-color: var(--accent2);
  color: var(--white) !important;
  padding: 0 2em 0 .25em;
}

tr th,
tr.sub_head {
  background-color: var(--accent3);
  color: var(--accent2) !important;
}

tr td {
  border-top: 1px solid var(--offwhite);
  padding: .25em;
}

td.ja {
  color: var(--accent2);
  text-align: center;
}

td.nein {
  color: var(--accent1);
  text-align: center;
}

td.vllt {
  color: var(--black);
  text-align: center;
}

/* ============== MOBILE ROW REVERS ============== */

@media all and (max-width: 980px) {
  .et_pb_row.mob_col_rev {
    display: flex;
    flex-direction: column-reverse;
  }

  .et_pb_row.mob_col_rev .et_pb_column.et-last-child,
  .et_pb_row.mob_col_rev .et_pb_column:last-child {
    margin-bottom: var(--step-0);
  }
}

/* ============== BLOG GRIDS ============== */

.cc_grid_1 a.entry-featured-image-url {
  float: left;
  max-width: 10vw;
  margin: 0 4rem 0 0;
}

.cc_grid_1 article:nth-child(2n) a.entry-featured-image-url {
  float: right;
  max-width: 10vw;
  margin: 0 0 0 4rem;
}

/* ============== PORTFOLIO LONG LIST ============== */

.portfolio_longlist {
  margin: var(--step-0) 0;
}

.portfolio_longlist .item {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--step-0);
}

.portfolio_longlist .project_year_from {
  flex: 0 0 25%;
  padding-right: var(--step-0);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-family: var(--font-family-headlines);
  font-size: var(--step-0);
}

.portfolio_longlist .project_info {
  flex: 0 0 75%;
}

.portfolio_longlist .project_title {
  font-size: var(--step-0);
  font-weight: 600;
}

.portfolio_longlist .project_text_timeline {
  font-size: var(--step--1);
}

@media (max-width: 768px) {
  .portfolio_longlist .item {
    flex-direction: column;
  }

  .portfolio_longlist .project_year_from,
  .portfolio_longlist .project_info {
    flex: 0 0 100%;
    padding-right: 0;
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

/* ============== FORMS ============== */

/*Make The Divi Contact Form Checkbox Or Radio Buttons Inline*/

.pa-checkboxes-radio-buttons-inline .et_pb_contact_field_options_list span {
  display: inline-block;
  margin-right: 30px;
}

/* ============== Gallery Lightbox Overlay ============== */

.mfp-wrap {
  overflow: hidden;
}

.mfp-wrap img.mfp-img {
  object-fit: contain;
  width: 100%;
  height: auto;
}

/* ============== START DIVI BREAKPOINTS ============== */

@media all and (min-width: 1405px) {
}

@media all and (min-width: 1100px) and (max-width: 1405px) {
}

@media all and (max-width: 980px) {
}

@media all and (min-width: 768px) and (max-width: 980px) {
}

@media all and (max-width: 767px) {
}

@media all and (max-width: 479px) {
}

/* ============== END DIVI BREAKPOINTS ============== */