/*
 Theme Name:   My Theme Spectra Child
 Template:     spectra-one
 Description:  Mein Child-Theme für Spectra One mit Sticky Header
 Version:      1.0
*/

/* 
 Template note:
 Block templates live in /templates. They include template parts via:
 <!-- wp:template-part {"slug":"my-header","className":"site-header"} /-->
 The className is applied to the wrapper element, so CSS can target it here. 
*/

/* ------------ */

/* Verstecke .begone-thot auf Bildschirmen > 750px */
@media (min-width: 782px) {
  .begone-thot {
    display: none !important;
  }
}

/* social links */
.wp-social-link-gitlab {
  background-color: var(--wp--preset--color--primary);
}
.wp-social-link-gitlab svg,
.wp-social-link-gitlab img {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.6);
  transform-origin: center;
}
.wp-social-link-gitlab .wp-block-social-link-anchor {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-social-link-email,
.wp-social-link-mail {
  background-color: #cecece !important;
}
.wp-social-link-pixelfed {
  background-color: var(--wp--preset--color--secondary);
}
.wp-social-link-pixelfed svg,
.wp-social-link-pixelfed img {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.3);
  transform-origin: center;
}
.wp-social-link-pixelfed .wp-block-social-link-anchor {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-social-link-itch {
  background-color: #fa5c5c;
}
.wp-social-link-itch svg,
.wp-social-link-itch img {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1);
  transform-origin: center;
}
.wp-social-link-itch .wp-block-social-link-anchor {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* custom font */
.custom-font-epitaph {
  	color: var(--wp--preset--color--secondary) !important;
    font-family: "epitaph", sans-serif !important;
}

/* sticky header configuration */
.site-header,
.site-header .wp-block-navigation,
.site-header .wp-block-navigation__container,
.site-header .wp-block-navigation-item__label {
  font-family: "epitaph", sans-serif !important;
}

/* width-control */
@media (max-width: 785px) {
  .witdth-control {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
.witdth-control {
    width: 328px !important;
    min-width: 328px !important;
    max-width: 328px !important;
}

/* header */
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 9999;
  transition: background-color 0.6s ease, box-shadow 0.1s ease;
  background-color: rgba(255, 0, 0, 0);
  font-family: "epitaph", sans-serif !important;
  font-weight: 400;
  font-style: normal;
}

/* header settings when in normal state */
.site-header .wp-block-group.has-primary-background-color,
.site-header .wp-block-group.has-heading-background-color {
  background-color: transparent !important;
  transition: background-color 0.2s ease, padding 0.3s ease;
  padding-top: calc(var(--wp--preset--spacing--small) + 10px);
  padding-bottom: calc(var(--wp--preset--spacing--small) + 15px);
}

/* only wrapper when scrolled */
.site-header.scrolled {
  box-shadow: rgba(0, 0, 0, 0.33) 0px 3px 6px 0px;
}

/* block itself when scrilled */
.site-header.scrolled .wp-block-group.has-primary-background-color,
.site-header.scrolled .wp-block-group.has-heading-background-color {
  background-color: var(--wp--preset--color--primary) !important;
  /* background-image: url("Noise-Alpha-Coarse-3.svg"); */
  background-size: 240px 240px;
  mix-blend-mode: hard-light;
  padding-top: var(--wp--preset--spacing--xx-small);
  padding-bottom: 14px;
}

/* button */
.site-header .wp-block-button__link {
  white-space: nowrap;
}

/* current menu item */
.site-header .wp-block-navigation .current-menu-item>a,
.site-header .wp-block-navigation .current_page_item>a,
.site-header .wp-block-navigation .current-menu-ancestor>a {
  color: #575757;
}

/* hide back-to-top button */
.swt-scroll-top {
  display: none !important;
}

/* demo: anchor style */
#test-class {
  color: red !important;
}

/* ------------ */
/* hero banner configuration */
.hero-wrap {
  margin-top: calc(-1 * var(--header-height));
  padding-top: var(--header-height);
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  --hero-side-gap: 32px;
}

.hero-wrap .wp-block-image,
.hero-wrap .wp-block-image.size-large {
  width: calc(100% - var(--hero-side-gap)) !important;
  max-width: 1125px !important;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 14px;
  
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.06),
    inset 3px 0 6px rgba(0,  0, 0, 0.03),
    inset -3px 0 6px rgba(0, 0, 0, 0.03),
    inset 0 -3px 6px rgba(0, 0, 0, 0.03);

  border-radius: 22px;
  overflow: hidden;
  
  padding-left: var(--wp--preset--spacing--xx-small);
  padding-right: var(--wp--preset--spacing--xx-small);
  background-image: url("pixelated-image.png");
  background-size: cover;
}

.hero-wrap .wp-block-image img {
  width: 100% !important;
  height: 600px !important;
  object-fit: cover;
  display: block;
  opacity: 0;
}

.hero-wrap .swt-block-page-banner-group {
  margin-bottom: 0 !important;
}

.wp-site-blocks > .hero-wrap {
  margin-bottom: 0 !important;
}

.wp-site-blocks > .hero-wrap + * {
  margin-top: 0 !important;
}

/* MOBILE ONLY */
@media (max-width: 766px) {
  
  .hero-wrap .wp-block-image img {
    width: 100% !important;
    min-width: 100% !important;
    
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: 400px !important;
  }

  .wp-block-image {
    width: 100% !important;
    min-width: 100% !important;
    
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  /* shadow settings */
  .hero-wrap .wp-block-image,
  .hero-wrap .wp-block-image.size-large {
  	padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    box-shadow:
      inset 0 3px 3px rgba(0, 0, 0, 0.05),
      inset 0 -3px 3px rgba(0, 0, 0, 0.05) !important;
  }
  
  /* parent container */
  .hero-wrap .swt-block-page-banner-group {
    width: 100% !important;
    padding: 0 !important;
  }
}

/* ------------ */
/* header behaviour overwrites */

@media (max-width: 800px) {

  .wp-block-buttons[swthidemob],
  .wp-block-buttons[data-swthidemob="true"],
  .wp-block-buttons.SWTHideMob,
  .wp-block-buttons.swt-hide-mob {
    display: none !important;
  }

  .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }

  /* Hide nav list only when overlay is closed */
  .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
    display: none !important;
  }

  /* Shift core container-layout breakpoint from 600px to 900px */
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
    width: auto !important;
    position: static !important;
    z-index: auto !important;
    background-color: inherit !important;
  }
}

@media (min-width: 700px) {

  /* Core container layout only above 900px */
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    z-index: auto !important;
    background-color: inherit !important;
  }
}

/* special behavior no old projects */
@media (min-width: 700px) and (max-width: 766px) {
  .wp-block-navigation__container .hide-on-tablet {
    display: none !important;
  }
}

/* button in header */
.site-header .wp-block-button.has-custom-width,
.site-header .wp-block-button.wp-block-button__width-100 {
  width: 53px !important;
  flex: 0 0 53px;
}

/* avatar */
.site-header .admin-avatar .wp-block-button__link {
  width: 53px;
  height: 53px;
  min-width: 53px;
  min-height: 53px;
  border-radius: 999px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image: url("Leo%28Lele%29_Orig.png");
  background-size: cover;
  background-position: center;
  overflow: visible;
  box-sizing: border-box;
  font-size: 0;
  line-height: 0;
  color: transparent !important;
  text-indent: 0;
  /* border: 2px solid var(--wp--preset--color--tertiary); */
  /* box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 6px 0px; */
  position: relative;
  pointer-events: none;
  transform: translateY(2px);
}

/* clickable lock wrapper */
.site-header .admin-cta-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* clickable lock + spacing */
.site-header .admin-lock {
  position: absolute;
  right: -43px !important;
  top: 50%;
  transform: translateY(-50%);
  margin-top: -3px;
}

.site-header .admin-lock .wp-block-button__link {
  width: 19px;
  height: 19px;
  padding: 0 !important;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  text-indent: 0 !important;
  color: transparent !important;
  background-color: var(--wp--preset--color--secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V6Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 8h-1V6a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2Zm-7-2a2 2 0 1 1 4 0v2h-4V6Z'/%3E%3C/svg%3E") center/contain no-repeat;
}



/* mobile menu close: use custom svg icon */
.wp-block-navigation__responsive-container-close svg {
  display: none;
}

.wp-block-navigation__responsive-container-close {
  width: 24px;
  height: 24px;
  padding: 0;
  background-color: currentColor;
  -webkit-mask: url("close_24dp_404040_FILL0_wght400_GRAD0_opsz24.svg") center/contain no-repeat;
  mask: url("close_24dp_404040_FILL0_wght400_GRAD0_opsz24.svg") center/contain no-repeat;
}

.wp-block-navigation__responsive-container {
  color: var(--wp--preset--color--secondary) !important;
}