/*
 Theme Name:   GeneratePerf Child Theme
 Theme URI:    https://agencewebperformance.fr/prestations/creation-site-performant/
 Author:       Agence Web Performance
 Author URI:   https://agencewebperformance.fr/
 Template:     generatepress
 Text Domain:  generateperf_child
 Version:      1.2.0
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/**
 * Custom Hand of Sean font.
 */

@font-face {
  font-family: 'Hand of Sean';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/hand-of-sean.woff2') format('woff2');
}

/**
 * Components spacing based on root 10px (1 rem).
 */

:root {
  --spacing-100: 8px;
  --spacing-200: 16px;
  --spacing-300: 24px;
  --spacing-400: 32px;
  --spacing-500: 40px;
  --spacing-600: 48px;
  --spacing-700: 56px;
  --spacing-800: 64px;
  --spacing-900: 80px;
  --spacing-1000: 100px;
  --spacing-section: 120px;
}

@media (min-width: 768px) {
  :root {
    --spacing-section: 160px;
  }
}

/**
 * Scrollbar color.
 */

:root {
  scrollbar-color: var(--primary) var(--lightest);
}

/**
 * Beautiful lists.
 */

ul:not(.simple-list) li::marker, ol li::marker {
  color: var(--primary);
}

/**
 * Beautiful inputs.
 */

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
}

/**
 * Add missing space.
 */

.wp-block-image,
.wp-block-embed {
  margin-bottom: var(--spacing-300);
}

/**
 * Add external icons to _blank links.
 */

.entry-content p a[target="_blank"]::after,
.entry-content li a[target="_blank"]::after {
  display: inline-block;
  content: "";
  margin-left: .25em;
  width: .8em;
  height: .8em;
  aspect-ratio: 1;
	clip-path: shape(from 62.5% 0%,arc by 0% 12.5% of 6.25% large ccw,hline by 16.15%,line to 39.34% 51.84%,arc by 8.85% 8.85% of 6.25% small ccw,line to 87.5% 21.35%,vline to 37.5%,arc by 12.5% 0% of 6.25% large ccw,vline to 6.25%,arc by -6.25% -6.25% of 6.25% small ccw,hline to 62.5%,close,move to 15.63% 6.25%,arc by -15.63% 15.63% of 15.63% small ccw,vline by 62.5%,arc by 15.63% 15.63% of 15.63% small ccw,hline by 62.5%,arc by 15.63% -15.63% of 15.63% small ccw,vline to 62.5%,arc by -12.5% 0% of 6.25% large ccw,vline by 21.88%,arc by -3.13% 3.13% of 3.13% small cw,hline to 15.63%,arc by -3.13% -3.13% of 3.13% small cw,vline to 21.88%,arc by 3.13% -3.13% of 3.13% small cw,hline by 21.88%,arc by 0% -12.5% of 6.25% large ccw,hline to 15.63%,close);
  vertical-align: -.075em;
  background-color: currentColor;
 }

/**
 * Separator.
 */

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

/**
 * Featured images full width.
 */

.featured-image img {
	width: 100%;
}

/**
 * Custom design for main images captions.
 */

.featured-image figcaption::before {
  content: "";
  display: block;
  position: absolute;
  top: -24px;
  left: 25px;
  height: 0px;
  width: 0px;
  border-right: solid 25px transparent;
  border-left: solid 25px transparent;
  border-bottom: solid 25px var(--light);
}

/**
 * Custom subtitles styling.
 */

p[role="doc-subtitle"] {
  padding-left: var(--spacing-200);
  border-left: 4px solid var(--primary);
}

/**
 * Beautiful SVGs in menus.
 */

.menu-item-icon {
  width: 22px;
  height: 22px;
  margin-right: var(--spacing-100);
  fill: currentColor;
  vertical-align: sub;
}

/**
 * Prevent footer rendering on initial rendering.
 */

.site-footer {
  content-visibility: auto;
  contain-intrinsic-height: 400px;
}

@media(min-width: 768px) {
  .site-footer {
    contain-intrinsic-height: 300px;
  }
}

/**
 * Citation.
 */

blockquote {
  border-left-color: var(--primary);
}

blockquote .icon {
  color: var(--primary);
  margin-bottom: var(--spacing-200);
}

blockquote cite {
  display: block;
  font-style: normal;
  font-size: 1rem;
  margin-top: var(--spacing-200);
  color: var(--dark);
}

/**
 * Listes à puces personnalisées.
 */

ul.styled-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

ul.styled-list li,
.accordion-title {
  position: relative;
  padding-left: var(--spacing-400);
}

ul.styled-list li + li {
  margin-top: var(--spacing-300);
}

ul.styled-list li::before,
.accordion-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1em;
  height: 1em;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 16"><path fill="currentColor" d="M12.37 5.02 4.89.47C2.72-.86 0 .8 0 3.45v9.1c0 2.65 2.72 4.3 4.9 2.98l7.47-4.55a3.54 3.54 0 0 0 0-5.96Z"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 16"><path fill="currentColor" d="M12.37 5.02 4.89.47C2.72-.86 0 .8 0 3.45v9.1c0 2.65 2.72 4.3 4.9 2.98l7.47-4.55a3.54 3.54 0 0 0 0-5.96Z"/></svg>') no-repeat center / contain;
  background-color: currentColor;
}

.accordion-title::before {
  top: 0.3em;
  width: 16px;
  height: 16px;
}

ul.styled-list.list-primary li::before {
  color: var(--primary);
}

ul.styled-list.list-secondary li::before,
.accordion-title::before {
  color: var(--secondary);
}

ul.styled-list.list-ternary li::before {
  color: var(--ternary);
}

ul.styled-list.list-quadrary li::before {
  color: var(--quadrary);
}

/**
 * En-tête.
 */

.gb-submenu-toggle {
  color: var(--secondary);
  font-size: 1.2rem;
}

.gb-menu-link {
  column-gap: 2px !important;
}

/**
 * Effets spéciaux.
 */

.noised,
.noised-hover:hover,
.types-card:hover {
  background-image:url("/wp-content/themes/generateperf/images/noise-effect.png");
  background-repeat: repeat;
  background-size: 250px 250px;
}

/**
 * Utilitaire.
 */

.text-wrap-balance {
  text-wrap: balance;
}

/**
 * Boutons.
 */

.button-primary {
  border-radius: 2em !important;
}

.button-primary:hover {
  background-color: var(--primary) !important;
}

.button-secondary {
  background-image: linear-gradient(var(--lightest), var(--lightest)), linear-gradient(132deg, var(--primary) 15.5%, var(--primdary) 66%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.button-secondary:hover {
  background-image: linear-gradient(var(--lightest), var(--lightest)), linear-gradient(132deg, var(--primdary) 15.5%, var(--primary) 66%);
}

.gb-site-header .button-secondary {
  background-image: linear-gradient(var(--darkest), var(--darkest)), linear-gradient(132deg, var(--primary) 15.5%, var(--primdary) 66%);
}

.gb-site-header .button-secondary:hover {
  background-image: linear-gradient(var(--darkest), var(--darkest)), linear-gradient(132deg, var(--primdary) 15.5%, var(--primary) 66%);
}

/**
 * Formulaires.
 */

.fluentform .ff-el-group {
  margin-bottom: var(--spacing-400) !important;
}

.ff-default .ff-el-form-control {
  font-family: inherit !important;
}

/**
 * Filtres projets et blog.
 */

body.post-type-archive-project .filter-bar [href$="/project/"],
body.term-101 .filter-bar [href$="/project_category/corporate/"],
body.term-97 .filter-bar [href$="/project_category/motion-design/"],
body.term-93 .filter-bar [href$="/project_category/publicite-tv-et-web/"],
body.term-98 .filter-bar [href$="/project_category/showreel/"]{
  color: var(--primary);
}

body.category-conseils .filter-bar [href$="/conseils/"],
body.category-tendances .filter-bar [href$="/tendances/"],
body.category-outils .filter-bar [href$="/outils/"],
body.blog .filter-bar [href$="/blog/"]{
  color: var(--primary);
}

/**
 * Bouton lire plus.
 */

.smart-cut {
  display: block;
  overflow: hidden;
}

.smart-cut-btn {
  display: inline;
  cursor: pointer;
  color: var(--secondary);
  font-weight: 600;
  text-decoration: underline;
  margin-top: -16px;
}

/**
 * Custom code.
 */

.no-text-balance {
	text-wrap: unset !important;
}

.featured-image {
  margin-top: 0 !important;
}

.featured-image img {
  border-radius: 30px;
}

.post-image {
  border-radius: 20px;
}

.d-none {
  display: none !important;
}

#steps[aria-expanded="false"] {
  display: none !important;
}

[data-target]:hover,
.clickable:has(a) {
  cursor: pointer;
}

.light-card h3 {
  word-break: break-word;
}
.meta-separator {opacity: .5;margin-inline: .15rem;}

.inside-article:has(> .entry-content > .wp-block-embed:first-child) .featured-image {
  display: none;
}

.entry-content:has(> .wp-block-embed:first-child) {
  margin-top: 0 !important;
}

.entry-content > .wp-block-embed:first-child iframe {
  aspect-ratio: 1086 / 611;
  height: auto;
}