/**
 * Theme Name:     wse
 * Author:         N1 Design
 * Template:       twentytwentyfive
 * Text Domain:	   wse
 * Description:    Twenty Twenty-Five child theme for WorldSkills Europe
 */


html {
    scroll-behavior: smooth;
}

/* header */

.logged-in header {
	top: 32px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  transition: all 0.3s ease;
}

header.header--hidden {
background: #ffffffba;
  backdrop-filter: blur(15px);
  box-shadow: 0px 1px 2px #0000001a;
}

.header-logo svg {
  height: 80px;
  display: block;
  transition: margin-top 0.3s ease;
}

header.header--hidden .header-logo svg {
  margin-top: -36px;
}

header svg #hand {
  transform-box: fill-box;
  transform-origin: bottom center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#hand > * {
  transition: opacity 0.2s ease;
}

header.header--hidden #hand > * { opacity: 0; }
header.header--hidden #hand > :nth-child(1) { transition-delay: 0s; }
header.header--hidden #hand > :nth-child(2) { transition-delay: 0.05s; }
header.header--hidden #hand > :nth-child(3) { transition-delay: 0.1s; }
header.header--hidden #hand > :nth-child(4) { transition-delay: 0.15s; }
header.header--hidden #hand > :nth-child(5) { transition-delay: 0.2s; }

#hand > :nth-child(1) { transition-delay: 0.2s; }
#hand > :nth-child(2) { transition-delay: 0.15s; }
#hand > :nth-child(3) { transition-delay: 0.1s; }
#hand > :nth-child(4) { transition-delay: 0.05s; }
#hand > :nth-child(5) { transition-delay: 0s; }

/* hero */
.hero {
	display: flex;
	align-items: center;
}

@media screen and (min-width: 1024px) {
  .hero-content {
    max-width: 660px;
    margin-left: 10%;
  }
}

.is-style-hero-slideshow {
	position: absolute;
	bottom: 0;
  right: 0;
  height: 80%;
}

.is-style-hero-slideshow .wp-block-gallery figure {
width: 100%;
  position: absolute;
  bottom: 0;
}

/* icons */
.wp-block-button[class*="has-icon-"] .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.wp-block-button[class*="has-icon-"] .wp-block-button__link::after {
  content: "";
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
  transition: transform 0.2s ease;
}

.wp-block-button[class*="has-icon-"] .wp-block-button__link:hover::after {
  transform: translateX(3px);
}

ul[class*="has-icon-"],
ul[class*="has-icon-"] ul {
  list-style: none;
  padding-left: 0;
}

ul[class*="has-icon-"] li {
  position: relative;
  padding-left: 1.75em;
}

ul[class*="has-icon-"] li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.5lh - 0.5em); /* centres icon on the first line */
  width: 1em;
  height: 1em;
  background-color: var(--icon-color, currentColor);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}

/* icons svg */
.has-icon-check { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 5 5 9-10' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.has-icon-dot   { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='black'/%3E%3C/svg%3E"); }
.has-icon-arrow    { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.has-icon-external { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.has-icon-mail     { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m3 7 9 6 9-6' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }