/**
 * Theme Name: rosa26
 * Theme URI: https://theclick.es/
 * Author: Ángel Pasamontes
 * Description: Tema personalizado para un portfolio personal.
 * Version: 1.0
 * Text Domain: rosa26
 */





.material-symbols-filled {
  font-size: var(--icon-font-size);
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  color: var(--black);
}

/*custom*/

/*LOADER*/

#loader-overlay {
  background: var(--black);
}

/* #loader-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
} */

#loader-overlay .spinner {
  width: 100px;
  height: 100px;
  border: 4px solid var(--white);
  border-top: 4px solid var(--black);
}

#loader-overlay {
  background-color: var(--black);
}

/*GENERAL*/






.main {
  position: relative;
  padding-bottom: var(--mobile-bottom-margin)
}

.content-wrapper {
  width:50%;
  margin: 0 auto;
}

.section {
  padding-right: var(--mobile-side-margin);
  padding-left: var(--mobile-side-margin);
  padding-bottom: var(--mobile-bottom-margin);
  padding-top: var(--mobile-top-margin);
}


.page-section {
  padding-right: var(--mobile-side-margin);
  padding-left: var(--mobile-side-margin);
  padding-bottom: var(--mobile-bottom-margin);
  padding-top: var(--mobile-bottom-margin);
}






.hero-wrapper {
  height: calc(100vh - 2.5rem - env(safe-area-inset-top));
  overflow: hidden;
  width: 100%;
  position: relative;
}




.entry-content {}

.entry-content .wp-block-heading {
  font-size: var(--h2-font-size)
}

.entry-content .wp-block-image img {
  margin-bottom: 1rem;
  /* width: 33vh; */
  margin: 0 auto;
  display: block;
}

/*Enlaces en párrafos*/

.entry-content figure img {
  margin: 0 auto;
}

.entry-content p a {
  color: var(--primary);
  font-weight: 300;
}

.entry-content p a:hover,
a:focus {}



/*-_FOOTER_-*/

.footer {
  padding-top: var(--mobile-top-margin);

}

.section-wrapper {
  margin-left: var(--mobile-side-margin);
  margin-right: var(--mobile-side-margin);

}

.footer .footer-header .logo-container {
  margin-bottom: 0.5rem;

}

.footer .footer-header .logo-container .custom-logo {
  margin: 0 auto;
  height: 4rem;

}

.footer .footer-header .tagline {
  font-weight: 300;
  font-size: var(--subheader-font-size);
  text-align: center;


}

.footer-section {
  padding-top: var(--mobile-top-margin);
  /* margin-bottom: var(--mobile-bottom-margin); */
}

.social-links-section {
  height: 100%;
  flex-flow: column nowrap;
  align-items: stretch;
  padding-top: 0;
}

.social-links-section.mobile {
  display: flex;
}

.social-links-section.desktop {
  display: none;
}

.social-links-section .menu-social {
  height: 100%;
}

.social-links-section .menu-social .menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.social-links-section .social-link {
  text-decoration: underline;
  height: 100%;

}

.social-links-section .social-link .icon {
  width: var(--icon-font-size);
  height: auto;

}



.contact-section {
  padding-top: 1rem;

}

.contact-section .menu-contact .menu .menu-item {
  margin-bottom: 1rem;
  height: 2rem;

}



.contact-section .menu-contact .menu .menu-item a {
  font-size: var(--p-font-size);
  line-height: 1.25em;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 1rem;
  width: fit-content;
}

.contact-mail {
  overflow: hidden;
  transition: max-height 0.5s ease;
  max-height: 0;
}

#contact-form .button.send-mail-button {
  width: 100%;
}

.quick-links:not(.menu-legal) .menu-quick .menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.quick-links .menu-quick .menu .menu-item a {
  height: 1.5rem;
  display: block;
  margin-bottom: 1rem;
  width: fit-content;
}

.footer {
  /* background-color:#04060e; */
}

.footer::before {}

.footer .footer-site-info {
  position: relative;
  padding-top: var(--mobile-top-margin);
  width: 100%;
  padding-left: 1.5rem;
}

.footer .footer-site-info .credits {
  position: absolute;
  top: 50%;
  right: 0rem;
  transform: rotate(-90deg) translateY(-50%) translateX(105%);
  transform-origin: right center;
  white-space: nowrap;
  font-size: 0.8rem;
  opacity: 0.6;
  writing-mode: initial;
}



/*COOKIES*/

.cookie-banner-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 100000;

}

.cookie-banner-wrapper .cookie-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--white);
  opacity: .3;
  inset: 0;


}

.cookie-banner-wrapper .cookie-banner {
  background: var(--black);
  position: relative;
  color: var(--white);
  top: auto;
  position: absolute;
  top: 50%;
  max-height: 90vh;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  padding: var(--mobile-side-margin);
  border-radius: 1rem;
  width: 90%;
  z-index: 100001;
  box-shadow: .5rem .5rem 10px var(--black-transparency);
}

.cookie-banner-wrapper .cookie-banner .cookie-message {
  width: 100%;
}

.cookie-banner-wrapper .cookie-banner .cookie-message h1 {
  size: var(--h2-font-size);
  margin-bottom: 1rem;
  width: 100%;
}

.cookie-banner-wrapper .cookie-banner .cookie-message a {
  color: var(--info);
  text-decoration: underline;
}

.cookie-banner-wrapper .language-selector-container {
  display: flex;
}

.cookie-buttons {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  gap: .5rem;
}


.cookie-list {
  display: flex;
  flex-flow: column wrap;
  gap: 1.5em;
  margin-bottom: 2rem;
}

.cookie-list .cookie-item {}

.cookie-item .cookie-checkbox {
  display: inline-block;
  margin-right: 1rem;
}

.cookie-item .cookie-title {
  width: fit-content;
  display: inline;
}

.cookie-save-result {
  width: fit-content
}


@supports (height: 100dvh) {

  .main-nav-mobile,
  .hero-wrapper {
    height: calc(100dvh - 2.5rem - env(safe-area-inset-top));
  }


}

/* Media query para cuando el dispositivo está en vertical (orientación portrait) */
@media (orientation: portrait) {
  .herozoo-image {
    /* height: 100%;
    width: auto; */
    /* La imagen se adapta al alto, manteniendo la proporción */
  }
}




@media only screen and (min-width: 480px) {
  :root {
    --mobile-side-margin: 4rem;
    --mobile-inner-margin: 1rem;
  }

}

@media only screen and (min-width: 600px) {
  :root {
    --mobile-inner-margin: 1rem;
    --max-width: 550px;

  }

}

/* 📱 TABLET (a partir de 768px): */
@media (min-width: 768px) {
  :root {
    --mobile-inner-margin: 2rem;
    --max-width: 700px;

  }


}

/* 💻 DESKTOP (a partir de 1024px o 1200px, según prefieras): */
@media (min-width: 1024px) {

  :root {
    --max-width: 900px;

  }

}













@media only screen and (max-height: 600px) and (max-width: 1000px) and (orientation: landscape) {
  .hero-wrapper .herozoo-content {
    width: 100%;
  }

  .hero-wrapper .herozoo-content .herozoo-headline,
  .hero-wrapper .herozoo-content .herozoo-paragraph {
    width: 70%;
  }

  .hero-wrapper .herozoo-content .herozoo-headline {
    font-size: var(--h2-font-size);
  }

  .hero-wrapper .herozoo-content .herozoo-paragraph {
    font-size: var(--button-font-size);
  }




}