/*
 Theme Name:   Dev Portfolio
 Theme URI:    https://djament.com.br/desenvolvedor-full-stack
 Description:  A Dev Portfolio focused theme
 Author:       Marcelo Diament
 Author URI:   https://github.com/Marcelo-Diament
 Template:     twentytwenty
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  devportfolio
*/

/* VARIABLES */
:root {
  --black: rgba(0, 0, 0, 1);
  --dark-dark: rgba(33, 37, 41, 1);
  --dark: rgba(51, 51, 51, 1);
  --dark-light: rgba(73, 73, 73, 1);
  --light-dark: rgba(189, 189, 189, 1);
  --light: rgba(219, 219, 219, 1);
  --light-light: rgba(240, 240, 240, 1);
  --white: rgba(255, 255, 255, 1);
  --blue: rgba(38, 152, 205, 1);
  --green: rgb(12, 180, 82);
  --yellow: rgba(233, 164, 35, 1);
  --red: rgb(179, 23, 65);
  --spacing: 1rem;
  --spacing-quarter: calc(var(--spacing) / 4);
  --spacing-third: calc(var(--spacing) / 3);
  --spacing-half: calc(var(--spacing) / 2);
  --spacing-double: calc(var(--spacing) * 2);
  --spacing-triple: calc(var(--spacing) * 3);
  --font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-size-min: 14px;
  --font-size: 16px;
  --font-size-md: 20px;
  --font-size-lg: 24px;
  --font-size-xl: 28px;
  --font-size-xxl: 32px;
  --font-size-h1: 64px;
  --font-size-h2: 48px;
  --font-size-h3: 40px;
  --font-size-h4: 36px;
  --font-size-h5: 32px;
  --font-size-h6: 28px;
  --img-size-thumb: 96px;
}

/* RESET */
* {
  box-sizing: border-box;
  font-family: var(--font-family);
  font-size: var(--font-size);
  margin: 0;
  padding: 0;
}

body {
  background-color: white;
}

main#site-content {
  padding: 0;
}

section {
  margin: 0 auto;
  padding: var(--spacing-triple);
}

section h2 {
  margin-bottom: 0;
}

section h2+a.display-5 {
  color: var(--red);
  font-weight: 400;
}

section h2+a+div.glide {
  margin-top: var(--spacing-double);
}

h1 {
  color: var(--dark-dark);
  font-size: var(--font-size-h1);
  margin: var(--spacing-double) 0 var(--spacing);
}

h2 {
  color: var(--dark-dark);
  font-size: var(--font-size-h2);
  margin: var(--spacing-double) 0 var(--spacing);
}

h3 {
  color: var(--dark-dark);
  font-size: var(--font-size-h3);
  margin: var(--spacing-double) 0 var(--spacing);
}

h4 {
  color: var(--dark-dark);
  font-size: var(--font-size-h4);
  margin: var(--spacing-double) 0 var(--spacing);
}

h5 {
  color: var(--dark-dark);
  font-size: var(--font-size-h5);
  margin: var(--spacing-double) 0 var(--spacing);
}

h6 {
  color: var(--dark-dark);
  font-size: var(--font-size-h6);
  margin: var(--spacing-double) 0 var(--spacing);
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  width: 100%;
}

li {
  margin: 0;
}

hr {
  border-color: var(--dark-light) !important;
  margin: var(--spacing-double);
}

.color-accent,
.color-accent-hover:hover,
.color-accent-hover:focus,
:root .has-accent-color,
.has-drop-cap:not(:focus):first-letter,
.wp-block-button.is-style-outline {
  color: var(--red) !important;
}

.btn {
  font-family: var(--font-family);
  text-transform: uppercase;
}

.btn:hover,
.btn:focus,
.btn:active {
  text-decoration: none;
}

.hidden {
  visibility: hidden;
  color: transparent;
  margin: 0;
  max-height: 0;
  max-width: 0;
  padding: 0;
}

#topBanner {
  align-items: flex-start;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  min-height: 80vh;
  padding: var(--spacing-triple) !important;
}

#topBanner h1 {
  color: var(--light-light);
}

#topBanner p:first-of-type strong {
  color: var(--light-dark);
  font-weight: 400;
}

/* HARD SKILLS */
.hard-skills {
  align-items: stretch;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.hard-skills h2 {
  flex: 1 0 100%;
}

.hard-skills nav.filters {
  display: flex;
  flex: 1 0 100%;
  flex-flow: row nowrap;
  margin: var(--spacing) auto var(--spacing-double);
}

.hard-skills nav.filters select.filter {
  flex: 1 1 50%;
}

.hard-skills nav.filters select.filter:not(:first-child) {
  margin-left: var(--spacing) !important;
}

.hard-skills article {
  align-items: center;
  display: flex;
  flex: 1 1 100%;
  flex-flow: column nowrap;
  justify-content: space-between;
  margin: var(--spacing) auto;
}

.hard-skills article .img-container {
  display: block;
  height: var(--img-size-thumb);
  margin: var(--spacing-half) auto var(--spacing);
  width: var(--img-size-thumb);
}

.hard-skills article .hard-skill-description {
  display: flex;
  flex-flow: column nowrap;
  height: -webkit-fill-available;
  justify-content: space-between;
}

.hard-skills article .hard-skill-description p {
  font-size: var(--font-size-min);
  margin: 0 auto var(--spacing-half) auto;
  text-align: center;
}

.hard-skills article h3 {
  font-size: var(--font-size-md);
  margin: 0 auto var(--spacing);
  text-align: center;
}

/* SOFT SKILLS */
.soft-skills {
  align-items: stretch;
  background-color: var(--dark-dark);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.soft-skills h2 {
  color: var(--light-light);
  flex: 1 0 100%;
}

.soft-skills h2+a.display-5 {
  color: var(--yellow);
}

.soft-skills article {
  align-items: center;
  color: var(--light);
  display: flex;
  flex: 1 0 100%;
  flex-flow: column nowrap;
  justify-content: flex-start;
  margin-top: var(--spacing);
  padding: var(--spacing-double);
}

.soft-skills article h3 {
  color: var(--light-light);
  font-size: var(--font-size-h4);
  margin: var(--spacing) auto var(--spacing-half);
  min-height: 90px;
  text-align: left;
}

.soft-skills article p {
  font-size: var(--font-size-md);
}

/* ACADEMIC TRAINING */
.formacoes {
  align-items: stretch;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.formacoes h2 {
  flex: 1 0 100%;
}

.formacoes article {
  align-items: center;
  border: 1px solid var(--dark);
  display: flex;
  flex: 1 0 100%;
  flex-flow: column nowrap;
  justify-content: flex-start;
  margin-top: var(--spacing);
  padding: var(--spacing-double);
}

.formacoes article h3 {
  font-size: var(--font-size-md);
  margin: var(--spacing) auto var(--spacing-half);
  text-align: center;
}

.formacoes article p {
  font-size: var(--font-size-md);
}

/* CERTIFICATES */
.certificados {
  align-items: stretch;
  background-color: var(--light);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.certificados h2 {
  flex: 1 0 100%;
}

.certificados article {
  align-items: center;
  display: flex;
  flex: 1 0 100%;
  flex-flow: column nowrap;
  justify-content: flex-start;
  margin-top: var(--spacing);
}

.certificados article h3 {
  font-size: var(--font-size-md);
  margin: var(--spacing) auto var(--spacing-half);
  text-align: center;
}

.certificados article p {
  font-size: var(--font-size-md);
}

.certificacao-certificate-thumb {
  border: 1px solid var(--light-dark);
}

/* WORK XP */
.experiencias {
  align-items: stretch;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.experiencias h2,
.experiencias h2+a {
  flex: 1 0 100%;
}

.experiencias article {
  align-items: center;
  display: flex;
  flex: 1 0 100%;
  flex-flow: column nowrap;
  justify-content: flex-start;
  margin-top: var(--spacing);
  padding: var(--spacing-double);
}

.experiencias article p {
  font-size: var(--font-size-md);
}

.experiencia h3 {
  font-size: var(--font-size-md);
  margin: var(--spacing) auto var(--spacing-half);
  text-align: center;
}

.experiencia h4 {
  font-size: var(--font-size);
  margin: var(--spacing) auto var(--spacing-third);
}

.experiencia .cargo-date {
  font-size: var(--font-size-min);
  font-weight: bolder;
}

.experiencia .cargo-description p {
  font-size: var(--font-size);
}

/* TESTIMONIALS */
.depoimentos {
  align-items: stretch;
  background-color: var(--light);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.depoimentos h2 {
  flex: 1 0 100%;
}

.depoimentos article {
  align-items: center;
  border: 1px solid var(--dark);
  background-color: var(--light-light);
  display: flex;
  flex: 1 0 100%;
  flex-flow: column nowrap;
  justify-content: space-between;
  margin-top: var(--spacing);
  padding: var(--spacing) var(--spacing-double);
}

.depoimentos article p {
  font-size: var(--font-size-md);
}

.depoimentos article .depoimento-description {
  font-style: italic;
  margin: 0 auto;
}

.depoimentos article .depoent {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: 100%;
}

.depoimentos article .depoent img {
  margin-right: var(--spacing);
}

.depoimentos article .depoent .depoimento-depoent .depoimento-title {
  font-size: var(--font-size-md);
  font-weight: bolder;
  margin-bottom: 0;
}

.depoimentos article .depoent .depoimento-depoent .depoimento-subtitle {
  font-size: var(--font-size);
}

/* PORTFOLIO */
.portfolio {
  align-items: stretch;
  background-color: var(--light);
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0;
}

/* .portfolio .glide {
  margin: auto calc(-1 * var(--spacing));
} */

.portfolio h2 {
  flex: 1 0 100%;
  padding: 0 var(--spacing-triple);
}

.portfolio h2+a {
  padding: 0 var(--spacing-triple) var(--spacing);
}

.portfolio article.case {
  align-items: flex-start;
  display: flex;
  flex: 1 0 100%;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin-bottom: var(--spacing);
  margin-top: var(--spacing);
  padding: var(--spacing-double) 0;
}

.portfolio article .case-left {
  flex: 0 1 50%;
  margin-right: var(--spacing);
}

.portfolio article:nth-child(even) .case-right {
  order: -1;
}

.portfolio article .case-right {
  flex: 0 1 50%;
  margin-left: var(--spacing);
}

.portfolio article p,
.portfolio article p strong {
  font-size: var(--font-size-md);
}

.portfolio article .case-cover {
  width: 100%;
}

.portfolio .glide ul li article a .case-cover img {
  filter: drop-shadow(2px 4px 6px rgb(0, 0, 0, .85));
}

.portfolio article .case-title {
  align-items: center;
  display: flex;
  flex: 1 0 100%;
  flex-flow: row nowrap;
  justify-content: flex-start;
  margin: 0 auto var(--spacing);
  width: 100%;
}

.portfolio article .case-title img {
  margin-right: var(--spacing-double);
  max-width: 96px;
}

.portfolio article .case-meta {
  align-items: flex-start;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0;
  width: 100%;
}

.portfolio article .case-meta p {
  margin-bottom: var(--spacing-quarter);
}

.portfolio article .case-description {
  text-align: left;
  width: 100%;
}

.portfolio article .case-description h4 {
  font-size: var(--font-size-md);
  margin-top: 0;
}

.portfolio article .case-meta .case-meta-general,
.portfolio article .case-meta .case-meta-technical {
  flex: 1 0 100%;
  margin-top: 0;
  padding: 0;
}

.portfolio article .case-meta .case-meta-general p,
.portfolio article .case-meta .case-meta-technical p {
  text-align: left;
  width: 100%;
}

.footer-inner.section-inner {
  max-width: 100%;
}

/* MEDIA QUERIES */
@media only screen and (min-width: 480px) {

  .hard-skills article {
    flex: 1 1 calc(100% / 2);
  }
}

@media only screen and (min-width: 648px) {

  .hard-skills article {
    flex: 1 1 calc(100% / 3);
  }
}

@media only screen and (min-width: 1000px) {
  .header-titles-wrapper {
    max-width: 30%;
  }

  .header-navigation-wrapper {
    align-items: center;
    max-width: 85%;
    display: flex;
    flex: 1 1 auto;
  }

  .hard-skills nav.filters select.filter {
    flex: 0 1 33%;
  }

  .hard-skills article {
    flex: 1 1 calc(100% / 4);
  }

  .soft-skills article {
    flex: 1 0 45%;
  }

  .soft-skills article:nth-child(even) {
    margin-right: var(--spacing-half);
  }

  .soft-skills article:nth-child(odd) {
    margin-left: var(--spacing-half);
  }

  .formacoes article {
    flex: 1 0 45%;
  }

  .formacoes article:nth-child(even) {
    margin-right: var(--spacing-half);
  }

  .formacoes article:nth-child(odd) {
    margin-left: var(--spacing-half);
  }

  .certificados article {
    flex: 1 0 45%;
  }

  .certificados article:nth-child(even) {
    margin-right: var(--spacing-half);
  }

  .certificados article:nth-child(odd) {
    margin-left: var(--spacing-half);
  }

  .experiencias article {
    flex: 1 0 30%;
  }

  .experiencias article:nth-child(odd) {
    margin-left: var(--spacing);
    margin-right: var(--spacing);
  }

  .depoimentos article {
    flex: 1 0 45%;
  }

  .depoimentos article:nth-child(even) {
    margin-right: var(--spacing-half);
  }

  .depoimentos article:nth-child(odd) {
    margin-left: var(--spacing-half);
  }

  #carouselDepoimentos .carousel-inner::after {
    height: 40px;
  }

  .depoimento-description.fst-italic.p-2 {
    min-height: 240px;
  }

  .portfolio article {
    flex-wrap: nowrap;
  }

  .portfolio article .case-meta .case-meta-general,
  .portfolio article .case-meta .case-meta-technical {
    flex: 1 0 45%;
  }
}

@media only screen and (min-width: 1200px) {

  .portfolio .glide ul li article a .case-cover img {
    margin: auto;
    max-height: 66vh;
    width: auto;
  }

  .portfolio .glide ul li article a .case-title {
    margin: auto;
  }

  .hard-skills nav.filters select.filter {
    flex: 0 1 25%;
  }

  .hard-skills article {
    flex: 1 1 calc(100% / 6);
  }
}

@media only screen and (min-width: 1920px) {

  .hard-skills nav.filters select.filter {
    flex: 0 1 20%;
  }

  .hard-skills article {
    flex: 1 1 calc(100% / 8);
  }
}