/*
Theme Name: Cronomat.io Theme
Theme URI: https://wpastra.com/
Template: astra
Author: Disruptivos
Author URI: www.disruptivos.com
Description: Tema hijo personalizado para cronomat.io basado en componentes de Figma
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 1.0.1
Updated: 2025-01-08 15:00:00

*/

/**
 * Cronomatio Custom Fonts
 */
@font-face {
    font-family: 'Satoshi';
    src: url('./assets/fonts/satoshi/Satoshi-Variable.woff2') format('woff2-variations'),
         url('./assets/fonts/satoshi/Satoshi-Variable.woff') format('woff-variations'),
         url('./assets/fonts/satoshi/Satoshi-Regular.woff2') format('woff2'),
         url('./assets/fonts/satoshi/Satoshi-Regular.woff') format('woff');
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('./assets/fonts/satoshi/Satoshi-VariableItalic.woff2') format('woff2-variations'),
         url('./assets/fonts/satoshi/Satoshi-VariableItalic.woff') format('woff-variations'),
         url('./assets/fonts/satoshi/Satoshi-Italic.woff2') format('woff2'),
         url('./assets/fonts/satoshi/Satoshi-Italic.woff') format('woff');
    font-weight: 300 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('./assets/fonts/satoshi/Satoshi-Black.woff2') format('woff2'),
         url('./assets/fonts/satoshi/Satoshi-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('./assets/fonts/satoshi/Satoshi-Bold.woff2') format('woff2'),
         url('./assets/fonts/satoshi/Satoshi-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Clash Display Font Faces */
@font-face {
    font-family: 'Clash Display';
    src: url('./assets/fonts/clash-display/ClashDisplay-Regular.woff2') format('woff2'),
         url('./assets/fonts/clash-display/ClashDisplay-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Display';
    src: url('./assets/fonts/clash-display/ClashDisplay-Medium.woff2') format('woff2'),
         url('./assets/fonts/clash-display/ClashDisplay-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Display';
    src: url('./assets/fonts/clash-display/ClashDisplay-Semibold.woff2') format('woff2'),
         url('./assets/fonts/clash-display/ClashDisplay-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Clash Display';
    src: url('./assets/fonts/clash-display/ClashDisplay-Bold.woff2') format('woff2'),
         url('./assets/fonts/clash-display/ClashDisplay-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



/**
 * Base Styles Override
 */
:root {
    /* Typography */
    --font-family-primary: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-secondary: 'Clash Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --base-font-size: 16px;
    
    /* Colors */
    --cronomatio-primary: #000000;
    --cronomatio-accent: #00FFBF;
    --cronomatio-text: #000000;
    --cronomatio-background: #ffffff;
}

html {
    font-size: var(--base-font-size);
}

/* Override Astra theme fonts - Forzar tipografías */
body,
.ast-container,
.entry-content,
.ast-single-post,
.ast-page-builder-template,
.elementor-page,
div,
span,
a,
li,
td,
th {
    font-family: 'Clash Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 400;
}

/* Forzar Clash Display en párrafos con máxima especificidad */
p,
.entry-content p,
.ast-container p,
.ast-single-post p,
div p,
article p {
    font-family: 'Clash Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 400;
    font-size: 1rem; /* 16px */
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Aplicar Satoshi a elementos de navegación */
.ast-theme-transparent-header .main-header-menu .menu-link {
    font-family: var(--font-family-primary);
    font-weight: 500;
}

.ast-container{
    margin-top:30px;
}

/* Hide Astra default header when using custom header */
.ast-theme-transparent-header .ast-above-header,
.ast-theme-transparent-header .ast-below-header,
.main-header-bar-wrap {
    display: none !important;
}

/* Ensure proper spacing after custom header */
.cronomatio-header + .site-content {
    margin-top: 0;
    padding-top: 0;
}

/* Forzar Satoshi en headings con máxima especificidad */
h1, h2, h3, h4, h5, h6,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.ast-container h1,
.ast-container h2,
.ast-container h3,
.ast-container h4,
.ast-container h5,
.ast-container h6,
.ast-single-post h1,
.ast-single-post h2,
.ast-single-post h3,
.ast-single-post h4,
.ast-single-post h5,
.ast-single-post h6 {
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    line-height: 1.2;
}

h1 {
    font-size: 4rem; /* 64px */
    font-weight: 600 !important;
}

h2 {
    font-size: 3.125rem; /* 50px */
    font-weight: 500 !important;
}

h3 {
    font-size: 1.875rem; /* 30px */
    font-weight: 500  !important;
}

h4 {
    font-size: 2rem;
    font-weight: 500  !important;
}

h5 {
    font-size: 1.5rem;
    font-weight: 500;
}

h6 {
    font-size: 1.25rem;
    font-weight: 700;
}
a{
	color:#DD702B;
}

/* Sobrescribir específicamente las clases de Astra */
.ast-article-single h1,
.ast-article-single h2,
.ast-article-single h3,
.ast-article-single h4,
.ast-article-single h5,
.ast-article-single h6 {
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.ast-article-single p,
.ast-article-single div,
.ast-article-single span,
.ast-article-single li {
    font-family: 'Clash Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Forzar tipografías en el editor de bloques */
.wp-block,
.wp-block p,
.wp-block h1,
.wp-block h2,
.wp-block h3,
.wp-block h4,
.wp-block h5,
.wp-block h6 {
    font-family: inherit !important;
}

/* Asegurar que los elementos de Gutenberg hereden correctamente */
.has-text-color,
.has-background {
    font-family: inherit !important;
}

.white-card{
    background-color: #ffffff;
    padding: 20px;
    border-radius: 16px; 
}
.brown-card{
	background-color:#F7F4ED;
	border-radius:16px;
	padding:20px;
	border:1px solid #C8C7C7;
	min-height:250px;
}
.brown-card img{
	max-width:200px;
}

/* Estilos para el bloque details - mover marker después del texto */
.wp-block-details summary {
    list-style: none !important;
    position: relative;
    cursor: pointer;
    font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    color: #3a3a3a;
    margin-bottom: 0;
    padding-right: 30px;
}

/* Ocultar el marker por defecto */
.wp-block-details summary::-webkit-details-marker {
    display: none;
}

.wp-block-details summary::marker {
    content: none;
}

/* Crear nuestro propio marker al final */
.wp-block-details summary::after {
    content: '▼';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    color: #00FFBF;
    font-size: 14px;
    font-weight: 700;
}

/* Rotar el marker cuando está abierto */
.wp-block-details[open] summary::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Estilos adicionales para mejorar la apariencia */
.wp-block-details {
    border-bottom: 1px solid #3A3A3A;
    padding: 20px;
    margin: 1.5rem 0;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

.wp-block-details[open] summary {
    margin-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

.wp-block-details p {
    margin-top: 15px;
    margin-bottom: 0;
    color: #666666;
    font-size: 16px;
    line-height: 1.6;
}

@media (max-width: 768px) {
	.custom-logo{
		max-width:150px;
	}
}