/*
Theme Name: Ideal Block Theme
Author: Ideal Agency
Version: 1.0
Text Domain: idealblocktheme
*/

:root {
  --spacing-small: 20px;
  --spacing-big: 90px;
  --transition-dur: 0.3s;
  --filter: invert(0);

  --color-primary: var(--wp--preset--color--primary);
  --color-textMain: var(--wp--preset--color--text-main);
  --color-secondary: var(--wp--preset--color--secondary);
  --color-accent: var(--wp--preset--color--accent);
  --color-detils: var(--wp--preset--color--details);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .destacado {
  color: var(--color-textMain);
  overflow: hidden;
  padding-bottom: 0.12em;
}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span, .destacado span {
  display: inline-block;
  transform: translateY(100%);
}

h2, h3 { letter-spacing: -1px;}


.wp-block-navigation .wp-block-navigation-item {  background-color: transparent;  }
.has-secondary-background-color { background-color: var(--color-secondary) !important; }

header .logo img, .logo-hero img, .clients-c img, .filter img { filter: var(--filter); }



ul.wp-block-list { padding-left: 20px; }

:root :where(.wp-block-cover h1:not(.has-text-color)), :root :where(.wp-block-cover h2:not(.has-text-color)), :root :where(.wp-block-cover h3:not(.has-text-color)), :root :where(.wp-block-cover h4:not(.has-text-color)), :root :where(.wp-block-cover h5:not(.has-text-color)), :root :where(.wp-block-cover h6:not(.has-text-color)), :root :where(.wp-block-cover p:not(.has-text-color)), ul.wp-block-list {
  color: var(--color-textMain);
}

.single section, .archive section {  padding-top: 10%; } 
.wrap { flex-wrap: wrap; } 


/* ----------------------------------------------------------------------------------------------------
* Header & Footer
* ---------------------------------------------------------------------------------------------------- */
header {
  position: fixed;
  transition: all .4s ease;
  transform: translateY(20px);
  opacity: 0;
  width: 100%;
  padding-top: var(--spacing-small);
  z-index: 9;
}

header ul {
  padding: 10px 20px !important;
  backdrop-filter: blur(10px);
  border-radius: 10px;
  background-color: var(--color-secondary);
}

span.italic {
  font-family: var(--wp--preset--font-family--playfair);
  display: inline;
}

footer {
  padding-bottom: var(--spacing-small);
  background-image: linear-gradient(180deg, var(--color-primary), var(--color-secondary) 20%);
}



/* ----------------------------------------------------------------------------------------------------
* Bottom Hero
* ---------------------------------------------------------------------------------------------------- */
.bottom-hero {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom:var(--spacing-small);
  z-index: 9;
  transform: translateY(40px);
  opacity: 0;
}

#datetime {
  text-transform: uppercase;
  opacity: 1;
}

.toggleTheme svg {
  overflow: visible;
}

.toggleTheme svg path {
  stroke: var(--color-textMain);
  transition: all ease var(--transition-dur);
}

.toggleTheme:hover svg path.top {
  transform: translateX(4px);
}
.toggleTheme:hover svg path.bottom {
  transform: translateX(-4px);
}


/* --------------------------------------------------------------------
  CURSOR
---------------------------------------------------------------------- */ 
#cursor {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  mix-blend-mode: difference;
  width: 20px; 
  height: 20px;
  border-radius: 50%;
  background: var(--color-textMain);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  /* transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease; */
  transition: width 0.2s ease, height 0.2s ease;
}

#cursor.hovered {
  width: 120px !important;
  height: 120px !important;
}


/* --------------------------------------------------------------------
   Buttons
---------------------------------------------------------------------- */
.wp-block-button__link {
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: color 0.25s ease-in-out;
  z-index: 9;
}
.wp-block-button__link span {
  position: absolute;
  width: 300%;
  height: 300%;
  background-color: var(--color-textMain); /* Color de relleno */
  transition: transform 0.4s ease-out;
  border-radius: 50%;
  transform-origin: center;
  transition: transform 0.4s ease-out;
  z-index: -1;
}

.wp-block-button__link:hover {
  color: var(--color-primary);
}

.wp-block-button__link:hover span {
  transform: translate(-50%, -50%) scale(1);
}



/* --------------------------------------------------------------------
   ANIMATIONS
---------------------------------------------------------------------- */
/* Preloader */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-textMain);
  overflow: hidden;
  z-index: 100;
  margin-block-start: 0;
}

.preloader .preloader-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
  overflow: hidden;
  opacity: 1;
  position: relative;
  height: 18vw;
  width: 90vw;
}


.preloader .preloader-text {
  position: absolute;
  color: var(--color-primary);
  font-size: 22vw;
  line-height: 0.9;
  letter-spacing: -2px;
  visibility: hidden;
}


/* --- Hero Arrow Effect --- */
.hero--arrow {
  transition: all 1s ease;
  --myRotation:0;
  position: absolute;
  padding-top: 27px;
  padding-left: 30px;
}

.hero--arrow svg {
  width: 60%;
  height: auto;
  transform: rotate(180deg);
}

.hero--arrow svg path {
  fill: var(--color-textMain);
}

.hero--arrow-text, .hero--arrow-c {
  display: inline-block;
}

.hero--arrow-text svg {
  transform: rotate(var(--myRotation));
  width: 70%;
  height: auto;
}

.hero--arrow-text svg path {
  fill: var(--color-detils);
}

.hero--arrow:hover {
  transform: translateY(10px);
}


/* Marquee Images */
.marquee-images {
  width: 100%;
  overflow-x: hidden;
  padding-top: 20px;
  padding-bottom: 20px;
}


.marquee-images img {
  min-width: 400px;
  object-fit: contain;
}

/* Arrow svg cta */
.cta-contacto svg path {
  stroke: var(--color-textMain);
}

/* --- Cursor follower --- */
.flair {
  position: fixed;
  opacity: 0;
  width: 50px;
  pointer-events: none;
  will-change: transform;
}


/* --------------------------------------------------------------------
   WORK SINGLE
---------------------------------------------------------------------- */
.work-single figure, .featured-work figure, .related-work figure {
  overflow: hidden;
  border-radius: 20px;
}

.work-single figure img {
  max-width: 100%;
  height: auto;
  object-position: center;
}

.wp-block-categories-list li {
  list-style: none;
}


/* --------------------------------------------------------------------
   FEATURED WORK (HOME)
---------------------------------------------------------------------- */
.featured-work, .servicios-c, .clientes-c {
   scroll-margin-top: 10vw;
}

.featured-work .wp-block-query {
	overflow-x: hidden;
    width: 100%;
}

.featured-work ul .wp-block-post, .related-work ul .wp-block-post {
  position: relative;
}

.featured-work ul {
  grid-row-gap: 60px;
}

.featured-work .taxonomy-categoria, .related-work .taxonomy-categoria {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: var(--color-primary);
  padding: 0px 9px;
  border-radius: 8px;
  line-height: 1;
}

.featured-work .taxonomy-categoria a, .related-work .taxonomy-categoria a {
  text-decoration: none;
}

.categoria-diseno-360o .taxonomy-categoria {
  background-color: #b3fcac;
}

.categoria-web-design .taxonomy-categoria {
  background-color: #97b3ff;
}



/* Posts que ocupan 7 columnas */
.featured-work ul .wp-block-post:nth-child(4n+1),
.featured-work ul .wp-block-post:nth-child(4n+4) {
    grid-column: span 7;
}

/* Posts que ocupan 5 columnas */
.featured-work ul .wp-block-post:nth-child(4n+2),
.featured-work ul .wp-block-post:nth-child(4n+3) {
    grid-column: span 5;
}


/* Related work */
.related-work ul .wp-block-post:nth-child(4n+1),
.related-work ul .wp-block-post:nth-child(4n+4) {
  grid-column: span 5;
}

.related-work ul .wp-block-post:nth-child(4n+2),
.related-work ul .wp-block-post:nth-child(4n+3) {
  grid-column: span 7;
}



/* ----------------------------------------------------------------------------------------------------
* Responsive
* ---------------------------------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {

  :root { --wp--style--global--content-size: 100%; }

  header nav { order: 3; }
  .wp-block-navigation__responsive-container.is-menu-open { z-index: 999; height: 100vh; }
  .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--color-textMain); color: var(--color-primary); }
  

  footer .row { flex-wrap: wrap;}
  footer .col1, footer .col2, footer .col3 { flex-basis: 100%;}
  footer .col2 { order: 3; flex-direction: row-reverse; }
  footer .col3 { order: 2; margin-bottom: 20px;   }
  footer .col2 .wp-block-group { width: 42%; }
  footer p, footer ul li { font-size: 3vw;}
  footer ul { gap: 10px;}

  .servicios-c .row { flex-direction: column; align-items: flex-start; justify-content: space-between; }
  .servicios-c .row p { border-radius: 10px !important; white-space: nowrap; }
  .servicios-c .row .wp-block-group { width: 100%; flex-wrap: wrap; }

  .work-single figure, .featured-work figure, .related-work figure { border-radius: 10px;}
  .wp-block-post-excerpt p, .featured-work .taxonomy-categoria, .related-work .taxonomy-categoria { font-size: 12px; }

  .single-work .entry-content { padding-top: 40%; }
  .work-single .general-info, .work-single .destacado-info { flex-direction: column; }
  .related-work ul { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .related-work ul .wp-block-post:nth-child(4n+1), .related-work ul .wp-block-post:nth-child(4n+4), .related-work ul .wp-block-post:nth-child(4n+2), .related-work ul .wp-block-post:nth-child(4n+3) {
    grid-column: span 3; }

  .featured-work ul { 
    display: flex ;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    margin-right: -6%;
    padding-right: 6%;
    scrollbar-color: var(--color-secondary) var(--color-primary);
    padding-bottom: 20px;
  }

  .featured-work ul .wp-block-post {
    width: 40%;
    min-width: 70%;
    height: auto;
    scroll-snap-align: start;
  }

}