/**
 * Theme Name:     Tanja Photography
 * Author:         Tanja Urzinger
 * Template:       spectra-one
 * Text Domain:	   tanja-photography
 * Description:    Spectra One is a beautiful and modern WordPress theme built with the Full Site Editing (FSE) feature. But my own customized optimisations are better :)
 */

 html {
  scroll-behavior: smooth;
  transition: 0.3s ease;
 }

  ::selection {
  background: var(--wp--preset--color--secondary);
  color: #fff; 
}

::-moz-selection {
  background: var(--wp--preset--color--secondary);
  color: #fff;
}

/* Navigations-Links Hover Effekt */
.wp-block-navigation .wp-block-navigation-item__content, .search-icon{
  transition: color 0.3s ease;
}

.wp-block-navigation-item__content{
  border-bottom: 2px solid transparent;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:active,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"], .wp-block-breadcrumbs li a:hover
{
  color: var(--wp--preset--color--secondary);
  border-bottom: 2px solid;
}

.search-icon:hover{
  color: var(--wp--preset--color--secondary);
}

.search-button-navigation button{
  background: none;
  color: var(--wp--preset--color--primary);
}


/* Social Buttons */
.wp-block-social-links .wp-social-link svg{
    width: 1.2em !important;
    height: 1.2em !important;
}

.wp-block-social-link:hover{
    transform: none;
    color: var(--wp--preset--color--secondary) !important;
}

/* header scroll */

/* Wenn du im Backend eingeloggt bist: WP-Adminbar beachten */
body.admin-bar .nav-sticky {
  top: 32px;              /* Desktop-Adminbar */
}
@media (max-width: 782px) {
  body.admin-bar .nav-sticky { top: 46px; }  /* Mobile-Adminbar */
}

.announce-bar{
  padding: .5rem 1rem;
}

header{
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: none;
  transition: .25s ease, box-shadow .25s ease;
  margin: 0 0 -90px 0;
}

header.is-scrolled{
  background: var(--wp--preset--color--white);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

header .custom-logo{
  filter: invert(1);
  transition: filter .25s ease;
}

header.is-scrolled .custom-logo{
  filter: invert(0);
}

header .custom-logo-black .custom-logo{
  filter: invert(0);
}

@media (max-width: 1390px){
  header{
    background: var(--wp--preset--color--white);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    margin: 0;
  }

  header .custom-logo{
    filter: invert(0);
  }

}

@media (max-width: 976px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
      flex-basis: 100% !important;}

    .wp-block-columns {
      flex-wrap: wrap !important;
  }
    .split-header-white-space{
      background-color: var(--wp--preset--color--primary);    
    }

    .split-header-white-space div{
      margin: 0 !important;
    }

}

@media screen and (max-width: 1366px) {
  .wp-container-core-post-template-is-layout-30e1d851{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 670px) {

  .wp-block-navigation .wp-block-navigation-item__label{
    font-size: 1.1rem !important;
  }

  .wp-block-navigation__container{
    gap: 15px !important;
  }

  .wp-block-site-logo.is-default-size img{
      width: 100px;
  }

  h1{
    font-size: 4rem !important;
  }
  
  h2{
    font-size: 2.5rem !important;
  }

  h3{
    font-size: 1.75rem !important;
  }
}

.swiper-wrapper{
  min-height: 0 !important;
}

.search-button-custom{
  padding: 14px 0 18px 14px;
}

.wp-block-search__input{
  margin-left: 8px;
}

.announcement-mail a{
  text-decoration: none;
}

.main-heading{
  margin: 0;
  color: #fff;
  font-size: clamp(32px, 8vw, 60px);
}

.main-heading-profile{
  font-size: clamp(32px, 13vw, 59px);
}

.search-category a{
  text-decoration: none;
}

.h1-subline{
  text-transform: uppercase;
  font-size: clamp(55px, 14vw, 110px);
  font-weight: 600;
}

.heading-clamp{
  font-size: clamp(50px, 10vw, 110px);
}

footer p a{
  font-size: inherit;
}

.footer-menu{
  gap: 10px;
}

body{
    padding-top: 0 !important;
}

/* Basis für ALLE Core-Buttons */
.wp-block-button .wp-block-button__link{
  font-weight: 600;
  border-radius: 10px;
  padding: 16px 22px 14px 22px;
  border: 2px solid transparent;
  transition: all .2s ease;
  text-decoration: none;
}

/* 1) FILL: BG Primär, Text Weiß  — Hover invertiert */
.wp-block-button.is-style-fill > .wp-block-button__link,
.wp-block-button.is-style-fill .wp-element-button{
  background: var(--wp--preset--color--primary);
  color: #fff !important;
  border-color: #fff;
}
.wp-block-button.is-style-fill > .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-element-button:hover,
.wp-block-button.is-style-fill > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-fill .wp-element-button:focus-visible{
  background: #fff;
  color: var(--wp--preset--color--primary) !important;
  border-color: var(--wp--preset--color--primary);
}

/* 2) OUTLINE: BG Weiß, Border/Text Primär — Hover: BG Primär, Text Weiß */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button{
  background: #fff;
  color: var(--wp--preset--color--primary) !important;
  border-color: var(--wp--preset--color--primary);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-element-button:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-outline .wp-element-button:focus-visible{
  background: var(--wp--preset--color--primary);
  color: #fff !important;
}

/* 3) SEKUNDÄR (Spectra): wie Füllen, aber Sekundärfarbe */
.wp-block-button.is-style-swt-button-secondary > .wp-block-button__link,
.wp-block-button.is-style-swt-button-secondary .wp-element-button{
  background: var(--wp--preset--color--secondary);
  color: #fff !important;
  border-color: var(--wp--preset--color--secondary);
}
.wp-block-button.is-style-swt-button-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-swt-button-secondary .wp-element-button:hover,
.wp-block-button.is-style-swt-button-secondary > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-swt-button-secondary .wp-element-button:focus-visible{
  background: #fff;
  color: var(--wp--preset--color--secondary) !important;
  border-color: var(--wp--preset--color--secondary);
}

/* 4) INVERSE (Spectra): wie Kontur, aber Sekundärfarbe */
.wp-block-button.is-style-swt-button-inverse > .wp-block-button__link,
.wp-block-button.is-style-swt-button-inverse .wp-element-button{
  background: #fff;
  color: var(--wp--preset--color--secondary) !important;
  border-color: var(--wp--preset--color--secondary);
}
.wp-block-button.is-style-swt-button-inverse > .wp-block-button__link:hover,
.wp-block-button.is-style-swt-button-inverse .wp-element-button:hover,
.wp-block-button.is-style-swt-button-inverse > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-swt-button-inverse .wp-element-button:focus-visible{
  background: var(--wp--preset--color--secondary);
  color: #fff !important;
}

.is-style-swt-post-terms-pill a{
  background-color: var(--wp--preset--color--white) !important;
  border: 1px solid var(--wp--preset--color--secondary) !important;
  color: var(--wp--preset--color--secondary) !important;
  text-decoration: none;
  border-radius: 0px !important;
  font-size: var(--wp--preset--font-size--small) !important;
  font-weight: 400 !important;
  transition: all .2s ease !important;
  padding: 8px 12px 6px 12px !important;
}

.is-style-swt-post-terms-pill a:hover{
  background-color: var(--wp--preset--color--secondary) !important;
  color: var(--wp--preset--color--white) !important;
  border-color: var(--wp--preset--color--secondary) !important;
}

.heading-refs h3{
  font-size: 1.5em;
}

.heading-refs article span a{
  font-weight: 400;
  font-size: 1.4em;
  color: var(--wp--preset--color--secondary) !important;
}

.heading-refs article span a:hover{
  color: var(--wp--preset--color--foreground) !important;
}

.uagb-post__image img{
  object-fit: cover;
}

.uagb-post__cta .wp-block-button__link{
  background: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;

  font-weight: 600;
  padding: 16px 22px 14px 22px;
  border-radius: 12px !important;

  text-decoration: none;
  transition: all .2s ease;
}

/* Hover / Fokus */
.uagb-button__link:hover,
.uagb-post__cta .wp-block-button__link:hover,
.uagb-button__link:focus-visible,
.uagb-post__cta .wp-block-button__link:focus-visible{
  background: #000 !important;
  color: #fff !important;
}


.error-heading h1{
  font-size: clamp(6em, 35vw, 16em);
  font-weight: 800;
  filter: blur(3px);
}

.wp-block-breadcrumbs li, .wp-block-breadcrumbs li a {
  font-size: 1.1em;
  text-decoration: none;
  color: var(--wp--preset--color--secondary);
  font-weight: 300;
  border-bottom: 2px solid transparent;
}

.wp-block-breadcrumbs li span{
  font-weight: 500;
}

.post-taxonomy-category a, .wp-block-post-navigation-link a{
  text-decoration: none;  
}

.post-taxonomy-category a:hover{
  color: var(--wp--preset--color--secondary) !important;
}

.social-logos li{
  margin-right: 5px !important;
}

.social-logos li:last-child{
  margin-right: 0 !important;
}

.table-of-contents li{
  list-style: none;
}

.table-of-contents > li{
  list-style-image: url(http://localhost/tanja_photography/wp-content/uploads/arrow-solid.webp);
}

.table-of-contents ul li {
    list-style-image: url(http://localhost/tanja_photography/wp-content/uploads/arrow-narrow.webp);

}

/*Formular*/

#fluentform_3{
  padding: 50px 0;
}

label{
    font-size: 1rem;
}

.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after{
  color: var(--wp--preset--color--secondary);
}

form p > a{
  text-decoration: underline;
  color: var(--wp--preset--color--secondary);
}

form p > a:hover{
  text-decoration: underline;
  color: var(--wp--preset--color--foreground)
}

.ff-conditions{
  border-top: solid 1px var(--wp--preset--color--primary);
  margin: 10px 0 0 0 !important;
  padding: 10px 0 0 0;
}

.ff-default .ff-btn-sm{
  margin: 20px 0 0 0;
  padding: 12px 18px 10px 18px;
}

/* Summary Details Block */
.wp-block-details {
  border: 1px solid var(--wp--preset--color--secondary);
  border-radius: 10px;
  margin-bottom: 1rem;
  overflow: hidden;
  background: #fff;
}

.wp-block-details summary {
  cursor: pointer;
  font-weight: 600;
  padding: 1rem 3rem 1rem 1rem;
  list-style: none;
  position: relative;
  color: var(--wp--preset--color--secondary);
}

.wp-block-details summary::after {
  content: "+";
  position: absolute;
  top: 0;
  font-size: 2em;
  right: 1rem;
  color: var(--wp--preset--color--secondary);
  transition: transform .3s ease, color .3s ease;
}

.wp-block-details[open] summary::after {
  content: "–";
  font-size: 2em;
  transform: rotate(180deg);
  top: 0;
  color: var(--wp--preset--color--secondary);
}

.wp-block-details > :not(summary) {
  padding: 1rem 3rem 1rem 1rem;
  color: var(--wp--preset--color--primary);
  max-height: 0;
  opacity: 0;
  transition: max-height .3s ease, opacity .3s ease;
}

.wp-block-details[open] > :not(summary) {
  max-height: 500px;
  opacity: 1;
}

.wp-block-details[open] summary {
  border-bottom: 1px solid var(--wp--preset--color--secondary);
}

.agb-container p{
  margin: 0 0 10px 0;
}

.agb-container h2{
  margin: 50px 0 10px 0;
}