/*
CSS personalizado para la web
- 1. HTML
- 2. Header
  - Navigation
- 3. Footer
- 4. Páginas
  - Página Clases
- 5. Otros elementos
  - Botones
- 6. Bloques
  - Barra iconos en home
- 7. WooCommerce
  - Ficha producto - Pestaña contenido
  - Checkout
  - Bloque grid de productos
  - Bloque descripción de producto
  - Mi cuenta
- 8. Gravity forms
*/

/* =============================================
   1. HTML
   ============================================= */

/* Tamaño base para escritorio */
html {
  font-size: 16px;
}

/* Tamaño base para dispositivos móviles */
@media only screen and (max-width: 768px) {
  html {
    font-size: 14px; /* Ajusta este valor según tus necesidades */
  }
}

/* =============================================
   2. Header
   ============================================= */

/* --- Navigation --- */

/* Estilos para el bloque que contiene el menú sticky */
.header-hidden {
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

.header-visible {
  transform: translateY(0);
  transition: transform 0.3s ease-in-out;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

/* Estilos para la barra que aparece debajo del mení */
/*.dm.dmkt-header-menu > li > a {*/
.dmkt-header-menu > li > a {
position: relative;
/*color:#0E83CD;*/
margin: 0px 15px;
}

/*.dmkt-header-menu > ul.wp-block-navigation__container > li > a:after{*/
.dmkt-header-menu > li > a:after {
position: absolute;
bottom: 7px;
left: 0px;
width: 100%;
height: 4px;
background-color: var(--wp--preset--color--secondary);
content: "";
opacity: 0;
transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
transform: translateY(20px);        
}

/*.dmkt-header-menu ul.wp-block-navigation__container > li > a:hover:after {*/
.dmkt-header-menu > li > a:hover:after {
opacity:1;
transform: translateY(15px)
}

.dmkt-header-menu > li.current-menu-item > a:after {
opacity: 1;
transform: translateY(15px);
}

.dmkt-header-menu .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content
/* Estilos para los submenus del menu principal */

/*.dmkt-header-menu .has-child .wp-block-navigation-submenu a{*/
.dmkt-header-menu .has-child .wp-block-navigation-submenu a {
color: var(--wp--preset--color--custom-dark-text) !important;
}

/*.dmkt-header-menu .has-child .wp-block-navigation-submenu a:hover {*/
.dmkt-header-menu .has-child .wp-block-navigation-submenu a:hover {
color: var(--wp--preset--color--custom-light-text) !important;
background-color: var(--wp--preset--color--primary) !important;
}

/*.dmkt-header-menu .has-child .wp-block-navigation__submenu-icon{*/
.dmkt-header-menu .wp-block-navigation__submenu-icon {
display: none;
}

/* Estilos para el primer nivel del menú en el bloque responsive */
.dmkt-header-menu .wp-block-navigation__responsive-container-content > ul > li > a {
  font-size: 18px; /* Aumenta el tamaño de la fuente */
  font-weight: bold; /* Aumenta el grosor de la fuente */
}

/* Mantiene el estilo normal para los submenús en el bloque responsive */
.dmkt-header-menu .wp-block-navigation__responsive-container-content ul ul a {
  font-size: 16px; /* Tamaño de letra estándar para submenús */
  font-weight: normal; /* Grosor de la fuente estándar para submenús */
}


/* =============================================
   3. Footer
   ============================================= */

/* Estilos de los enlaces en el footer */
.dmkt-footer-link a{
  color:#fff;
  text-decoration: none;
}
.dmkt-footer-link a:hover{
  color: var(--wp--preset--color--tertiary);
}

.dmkt-footer-menu a:hover{
  color: var(--wp--preset--color--tertiary) !important;

}


/* =============================================
   4. Páginas
   ============================================= */

/* --- página clases --- */

.dmkt-class-nav .wp-block-navigation-item__content{
  padding: 10px 35px;
}

.dmkt-class-nav .wp-block-navigation-item__content:hover{
  background-color: var(--wp--preset--color--primary);
  
}

.dmk-class-option-buttons .kt-blocks-modal-link,
.dmkt-modalidad-box{
  width: 259px;
  min-height: 129px;
}

.dmkt-modalidad-modal-link{
  margin-block-start:0.5rem;
}

/* =============================================
   5. Otros elementos
   ============================================= */

/* --- Botones --- */

.button {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--custom-light-text);
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 700;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.button:hover {
  background-color: var(--wp--preset--color--secondary);
  color: var(--wp--preset--color--custom-dark-text);
}

.dmkt-secondary-button:hover a{
  background-color: var(--wp--preset--color--primary) !important;
  color: var(--wp--preset--color--custom-light-text) !important;
}

/* =============================================
   6. Bloques
   ============================================= */

:where(.wp-block-quote){
  border-color: var(--wp--preset--color--primary) !important;
  }
  
/* --- Barra iconos en home --- */

.dmkt-class-icon img {
  transition: transform 0.3s ease;
}

.dmkt-class-icon a {
  color: var(--wp--preset--color--custom-light-text);
  text-decoration: none;
  transition: color 0.3s ease;
}

.dmkt-class-icon:hover img {
  transform: scale(1.1); /* Ajusta el valor para el nivel de zoom deseado */
}

.dmkt-class-icon:hover a {
  color: var(--wp--preset--color--secondary);
}

/* --- Scroll Block --- */

.ghub-scroll-box-front .ghub-scroll-box-content .wp-block-quote {
  width: 31rem;
}
.dmkt-bloque-disciplina--text {
background-color: rgba(255, 255, 255, 0.7);
}


/* =============================================
   7. WooCommerce
   ============================================= */

/* --- Ficha producto - Pestaña contenido --- */

.dmkt-product-lesson-list--class-name{
  color: var(--wp--preset--color--primary);
}

.dmkt-product-lesson-list--content {
  display: block
  /*flex-wrap: nowrap;*/
}

.dmkt-product-lesson-list--lesson-block {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px;
  color: #000;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  /*background-color: #f9f9f9;*/
  border-radius: 4px;
}

.dmkt-product-lesson-list--lesson-block:hover,
.dmkt-current-lesson{
  border: 1px solid var(--wp--preset--color--primary);

}

.dmkt-product-lesson-list--lesson-icon {
  font-size: 24px;
  margin-right: 15px;
}

.dmkt-product-lesson-list--lesson-content {
  display: flex;
  align-items: center;

}

.dmkt-product-lesson-list--lesson-content a{
  text-decoration: none;
}

.dmkt-product-lesson-list--lesson-order {
  font-weight: bold;
  margin-right: 10px;

}

/* --- Checkout --- */

/* Asegurar que la primera columna tenga suficiente espacio */
.woocommerce-billing-fields {
  width: 100%;
}

.woocommerce-checkout-payment, .woocommerce-terms-and-conditions-wrapper, .place-order {
  width: 100%;
  margin-top: 20px;
}

/* Asegurar que la segunda columna no interfiera si está vacía */
.col-2 {
  display: none;
}

/*Ajustar estilos de los bloques checkout y radiobutton en las reservas de clases privadas*/
/* Contenedor principal para los campos flex */
.dmkt-flex-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* Elementos flexibles (cada columna) */
.dmkt-flex-item {
  flex: 1;
}

/* Asegurarse de que los checkboxes y radios se alineen correctamente */
.dmkt-flex-item label {
  display: inline-block;
  margin-left: 8px;
}

/* Asegurarse de que los checkboxes y radios se alineen correctamente */
.dmkt-flex-item label {
  display: block;
  margin-left: 0;
}

.dmkt-flex-item input[type="radio"] {
  display: block; /* Asegura que el radio button se coloque en su propia línea */
  margin-bottom: 5px; /* Añade un pequeño espacio entre el radio button y el label */
}

/* Alinear el texto de los labels al inicio para asegurarse de que los labels no se superpongan */
.dmkt-flex-item input[type="radio"] + label {
  display: block;
  margin-left: 25px; 
  margin-top: -20px; 
  position: relative;
  top: -10px;
}

.form-row.place-order{
  display: flex;
  flex-direction: column;
}

.form-row.terms {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.form-row.terms label {
  margin-left: 8px;
  font-size: 16px;
}

.woocommerce-terms-and-conditions-wrapper {
  margin-top: 20px;
  font-size: 14px;
  color: #ffffff;
}

.woocommerce-terms-and-conditions-wrapper p {
  margin: 0;
}

.woocommerce-privacy-policy-text p{
  font-size: 14px;
}

.woocommerce-billing-fields__field-wrapper{
  margin-top: 0px !important; 
}

/* --- Bloque grid de productos --- */

.wc-block-grid__product-title {
  font-size: 24px;
  font-family: 'Cantata One';
  color: var(--wp--preset--color--primary);
  text-transform: uppercase;
  min-height: 75px;
}

.wc-block-grid__product-price.price {
  color: var(--wp--preset--color--custom-background);
  font-family: 'Cantata One';
  font-size: 24px;
}

/* --- Bloque descripción de producto --- */

.woocommerce-tabs ul.wc-tabs {
border-bottom:solid 1px #D22F27 !important;
}

.woocommerce-tabs .active{
background-color: #D22F27 !important;
}

.woocommerce-tabs li:hover{
background-color: #D22F27 !important;
}

.dmkt-hide{
display:none;
}

.dmkt-content-button td.label,.dmkt-content-button td.value {
  display: flex;
  align-items: center;  
  justify-content: flex-start; 
  flex-wrap: nowrap !important;
}

.dmkt-content-button td.label label, .dmkt-content-button td.value select, .dmkt-content-button td.value a {
  margin: 0;
}

/* --- Mi cuenta --- */

/* Navegación lateral */
.woocommerce-account .woocommerce-MyAccount-navigation{
border-right: 1px solid var(--wp--preset--color--primary);
}

.woocommerce-account .woocommerce-MyAccount-navigation li{
padding: 20px !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active{
background-color: var(--wp--preset--color--primary) !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:hover a{
color: var(--wp--preset--color--custom-light-content);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation li.is-active a::before {
  content: none !important;
}

/** Columna de contenido **/

.woocommerce-MyAccount-content{
  font-size: clamp(16px, 1.2vw + 1rem, 17px);
}

.woocommerce-MyAccount-content h2{
  font-size: clamp(28px, 1.2vw + 1rem, 30px);
  color: var(--wp--preset--color--primary);
}

/* =============================================
   8. Gravity Forms
   ============================================= */

.gform_button {
  /*background-color:var(--wp--preset--color--primary) !important;*/
  /*color: var(--wp--preset--color--base) !important;*/
  text-transform:uppercase !important;
  /*font-family: roboto;*/
  font-size: 20px !important;
  /*font-weight:700;*/
  padding: 14px 26px !important;
  border-radius: 0px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease, color 0.3s ease !important; /* Añadida la transición */
}

.gform_button:hover{
  background-color:var(--wp--preset--color--secondary) !important;
}