/*
Theme Name: kukulkite-child
Theme URI: https://github.com/cobianzo/kukulkite
Author: cobianzo
Author URI: https://cobianzo.com
Description: Child of Blockbase theme. Palette and Fonts especially designed for the site Kukulkite, by @cobianzo. It's been designed togethers with Polylang and some special plugins made on purpose for this website. So the git repo starts from wp-content (not just the theme)
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 1.27
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: blockbase
Text Domain: kukulkite-child
Tags: kukulkite, one column, hero content, Polylang, custom plugins
*/

@import url("./style-animations.css");


html {
    scroll-behavior: smooth;
}
html body {
  font-family: var(--wp--preset--font-family--montserrat);
}


/* generic */
/* ==== VERY GENERIC =====  */
.m-0 { margin: 0 !important; }
.m-auto { margin: auto !important; }
.max-w-100 { max-width: 100% !important; }
.max-w-none { max-width: none !important; }
.h-100 { height: 100%; }
.h-100vh { height: 100vh; }
.h-100px { height: 100px; }
.h-200 { height: 200px; }
.w-100 { width: 100%; }
.min-h-0 { min-height: 0 !important; }
.width-fit-content { width: fit-content !important; }
.text-center { text-align: center; }
.justify-center {
  display: flex;
  justify-content: center;
}
.align-center{ text-align: center; }
.p-absolute { position: absolute; }
.z-9 { z-index:9; }
.z-10 { z-index:10; }
.z-999 { z-index:999; }
.bg-center { background-position: center; }
.overflow-hidden { overflow: hidden; }

/* not so generic, but still generic */
/* for the hero image in home - not in use anymore */
.filter-blur {
  filter: blur(4px);
}
.filter-blur-parallax { /* no in use, I deactivated the plugin */
  > .psbParallaxImg {
    filter: blur(4px);
  }
}

.temp-small-nav {
  ul li > a > span {
    font-size: 0.8rem !important;
  }
}
/* para que en mobile se vea una sola columna */
@media (max-width: 768px) {
  .mobile-one-col {
    grid-template-columns: 1fr;
  }
}

/* All pages, title over parallax on top. */ /* i think not in use */
.h-200px-overflow-hidden {
  height: 200px;
  overflow: hidden;
}

/* any image of a post preview */
.wp-block-post-featured-image > a {
  > img {
    /* transition: 0.5s scale; */
  }
  &:hover > img {
    /* scale: 1.1 */
  }
}


/* Not so generic but still reusable tempaltes */


/* kalavaera speaking , not in use yet */
.kukul-talks-container {
  min-width: 320px;
  aspect-ratio: 2 / 1;
  padding: 10px 0;
  > * {
    padding-left: 35%;
  };
}

/* Generic images with fancy border, as a prominence */
.fancy, .fancy > img,
.wp-block-gallery figure img,
.sbi_item {
  box-shadow: var(--wp--preset--shadow--outlined);
  transition: box-shadow 1s;
}
.sbi_item img {
  /* instagram feed images */
  border: 5px solid var(--wp--custom--color--primary);
    border-radius: 5px;
}
.fancy {
  &:hover {
    img {
    box-shadow: 0 0 0;
    }
  }
}




/* ========  GUTENBERG SHIT and ELEMENTS ======== */

/* fix error in full side nested groups (not sure if I can remove it after a while  */
.wp-site-blocks > .wp-block-group > .wp-block-group.alignfull {
  margin-inline: 0 !important;
}

mark.has-inline-color {
  background-color: transparent !important;
}

/* .social-with-padding a {
  padding-block: 1rem !important; /* no se pq tengo que poner esto, hay un big y tengo q darle padding al boton de ig , fb...*
} */

/* elements styles (can it be in theme.json?) */
:root :where(.wp-block-list), ul {
  padding-left: 1em; /* o 0 si quieres sin sangría */
  margin-left: 0;
}

ul li {
  margin-left: 0;
  padding-bottom: 1rem;;
}

/* Botones estándar en FSE */
.wp-block-button__link.wp-element-button {
  transition: 0.5s ease-in-out;
  &:hover {
    background-color: white;
    color: var(--wp--preset--color--primary);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  }
}

/* ==== SECTIONS ==== */
/* header */
/* #wpadminbar { display: none;} html { margin-top: 0 !important; } */
/* header mobile responsive */
@media (width <= 768px) {
  #menu-and-language-switcher {
    display: flex;
    flex-direction: row-reverse;
  }
}

/* header only desktop*/
@media (width > 768px) {

}

/* Navigation: */
.wp-block-navigation-item__content {
  display: flex;
  flex-direction: column;

  .wp-block-navigation-item__description {
    display: flex;
    text-transform: none;
    font-size: 0.6rem !important;
    line-height: 1;
    color: gray;
  }
}

/* header - mobile navigation */
header .wp-block-navigation__responsive-container-open {
  margin-right: 1rem;
}


/* headaer for frontpage */
.header-overlay {
  position: fixed;
  left: 0;
  right: 0;
}



/* snippet tripadvisor */

.TA_rated {
  display: flex;
  justify-content: center;
}

/* =====  PAGES in particular ==== */

/* frontpage - spash screen */

/* video splash*/
#home-video-container {
  &:before{
        content: '';
        position: absolute;
        background: var(--wp--custom--color--secondary) url(https://kukulkite.com/wp-content/uploads/2025/08/cover-video-home.webp) center center;
        width: 100%;
        height: 100%;
        background-attachment: fixed;
        background-size: cover;
        filter: blur(7px);
  }
}




/* page for courses, lessons, js behaviour in snippets  */
.js-group-with-accordion:has(button[aria-expanded="false"]) {
    /* the banner for every course, extendeable with js */
    cursor: pointer;

    &:hover {
        > div {
            box-shadow: 0px 0px 24px hsl(55 100% 88.43%);
        }

        .accordion-item__toggle {
            color: var(--wp--custom--color--secondary);
            text-shadow: 0 0 10px var(--wp--custom--color--secondary); // Añadido color
        }
    }
}

.wc-block-product .pro_price_extra_info {
  display: none;;
}

/* === WOOCOMMERCE ======== */
/* woocoomerce elements styles */

/* course and prices page: list of products */
.product-img-200px-overflow-hidden, .product-img-100px-overflow-hidden {
  display: flex;
  align-items: center;
  max-height: 100px;
  overflow: hidden;
}
.product-img-200px-overflow-hidden {
  max-height: 200px;
}

/* single product page */
.pro_price_extra_info {
  /* text ' /per day' aside to the price */
  color: #f1d99c;
  display: block;
  font-size: 50% !important;
}
.link-to-button-wrapper {
  display: flex;
  justify-content: center;
}
.link-to-button {
  box-shadow: var(--wp--preset--shadow--outlined);
  color: white;
  &:hover {
    color: var(--wp--preset--color--primary) !important;
  }
}
.add-to-cart-xl {
  /* aplicado a Single Product template: add to basket / (overwritten to) 'BOOK NOW' button */
  a {
    margin: 0;
    padding: 1rem 2rem;
    font-size: 2rem !important;
  }
}

/* single product page - deposits plugin */
.awcdp-deposits-wrapper .awcdp-deposits-option {
  /* the container mentioning the deposit. */
  width: 100%;
}
.awcdp-deposits-wrapper .awcdp-deposits-option .awcdp-radio .awcdp-deposits-description {
  margin-left: 0;
}
.awcdp-radio {
  /* remove the radio button 'pay full amount'. Even if selected, it takes you to pay only the deposit. */
  display: none;


  &.pay-deposit {
    display: block;
    div:first-child { display: none; }
  }
}

  /* layout of the product page - thumbnails in row not in column */
  .wc-block-product-gallery-thumbnails.wc-block-product-gallery-thumbnails--thumbnails-size-50 {
    aspect-ratio: auto;
    flex-basis: 100%; /* not 50%, but full width, it s a row of images. */
  }
  .wc-block-product-gallery-thumbnails.wc-block-product-gallery-thumbnails--overflow-bottom {
    flex-basis: 100%;
  }
  .wc-block-product-gallery-thumbnails .wc-block-product-gallery-thumbnails__scrollable {
    flex-direction: row;
  }


  /* column left.- payment */
  #product-column-payment {

  }

/* checkout page */
.form-row.place-order {
  /* the row with the payment buttons */
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
  grid-gap: 2rem;

  button#place_order {
    height: 45px;
      padding: 0 20px;
      line-height: 1;
      margin-top: 20px;
      float: none;
  }
}
.__PrivateStripeElement {
  /* btn de google pay, es muy largo */
  width: 140px;
}
.payment-info-section {
  /* custom meg antes de pagar que hemos creaodo nosotros */
  flex-basis: 100%;
  .product-tag {
    background: #e3f2fd; color: #1976d2; padding: 3px 8px; border-radius: 12px; font-size: 12px;
  }
}

/* page order completed /checkout/order-received */
.woocommerce-table--order-details, .awcdp_deposits_summary {
  /* separar he header del resto conun borderbottom */
  thead tr {
    border-bottom: 1px solid gray;
  }
}
.woocommerce-table__product-name.product-name {
  text-align: center;
}
.woocommerce-table--custom-fields {
  /* tabla con los custom fields creados por el plugin (phone y notas) */
  background-color: lightgray;
  border-radius: 10px;
  margin-block: 40px;
}
.awcdp_deposits_summary {
  width: 100%;
}


/* ==== end Woo ==== */


/* contact page - contact form , not in use */
.wpcf7-form-control {
  background: white !important;
  width: 100%;
}

.wpcf7-form-control.wpcf7-submit {
  font-size: 1.5rem;
  text-transform: uppercase;
  padding: 2rem;
  border: 2px solid var(--wp--custom--color--primary);
  background: var(--wp--custom--color--primary) !important;
  color: white;
  border-radius: 5px;
}

.first-input-wrapper {
  margin-top: 0;
}