/* ---------------------------------------------------------------------------------------------

	Theme Name: Oaknut
    Text Domain: oaknut
	Version: 1.0.2
	Description: Oaknut is a block theme designed to help you create Linktree-esque profile pages. Get up and running quickly with one of the 23 prebuilt theme styles, or create your own design with the 14 fonts and 8 button styles included in the theme. Oaknut is built to be fast, easy to use, and fun!
	Tags: one-column, custom-background, custom-colors, custom-logo, editor-style, translation-ready, block-styles, wide-blocks, full-site-editing
	Author: Anders Norén
	Author URI: https://andersnoren.se
	Theme URI: https://andersnoren.se/teman/oaknut-wordpress-theme/
	License: GNU General Public License version 2.0
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Requires PHP: 5.6
	Tested up to: 6.5

	All files, unless otherwise stated, are released under the GNU General Public License
	version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

/* --------------------------------------------------------------------------------------------- */

:root {
	--oaknut-shape-angle: polygon(.44em 0%, 100% 0%, calc(100% - .44em) 100%, 0% 100%);
	--oaknut-shape-bevel: polygon( .44em 0%, calc(100% - .44em) 0%, 100% .44em, 100% calc(100% - .44em), calc(100% - .44em) 100%, .44em 100%, 0% calc(100% - .44em), 0% .44em );
	--oaknut-shape-chevron-left: polygon(100% 0%, calc( 100% - .88em ) 50%, 100% 100%, .88em 100%, 0% 50%, .88em 0%);
	--oaknut-shape-chevron-right: polygon(calc( 100% - .88em ) 0%, 100% 50%, calc( 100% - .88em ) 100%, 0% 100%, .88em 50%, 0% 0%);
	--oaknut-shape-pointed: polygon(.88em 0%, calc( 100% - .88em ) 0%, 100% 50%, calc( 100% - .88em ) 100%, .88em 100%, 0% 50%);
	--oaknut-shape-rabbet: polygon(0% .44em, .44em .44em, .44em 0%, calc(100% - .44em) 0%, calc(100% - .44em) .44em, 100% .44em, 100% calc(100% - .44em), calc(100% - .44em) calc(100% - .44em), calc(100% - .44em) 100%, .44em 100%, .44em calc(100% - .44em), 0% calc(100% - .44em));
	--oaknut-shape-ribbon: polygon(0% 0%, 100% 0%, calc( 100% - .88em ) 50%, 100% 100%, 0% 100%, .88em 50%);
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

a { text-underline-offset: .15em; }

/* ------------------------------------------- */
/* Blocks
/* ------------------------------------------- */

/* BLOCK: SHARED */

/* Block Style: Drop Shadow */ 

.wp-block-button.is-style-oaknut-drop-shadow .wp-block-button__link,
.is-style-oaknut-drop-shadow .wp-block-social-link {
	border: 2px solid;
	box-sizing: border-box;
	box-shadow: 0 1px currentColor, 0 2px currentColor, 0 3px currentColor, 0 4px currentColor, 0 5px currentColor, 0 6px currentColor;
}

/* Block Style: Angle Shape */ 

.is-style-oaknut-shape-angle .wp-block-button__link,
.is-style-oaknut-shape-angle .wp-block-social-link {
	-webkit-clip-path: var( --oaknut-shape-angle );
	clip-path: var( --oaknut-shape-angle );
}

/* Block Style: Bevel Shape */ 

.is-style-oaknut-shape-bevel .wp-block-button__link,
.is-style-oaknut-shape-bevel .wp-block-social-link {
	-webkit-clip-path: var( --oaknut-shape-bevel );
	clip-path: var( --oaknut-shape-bevel );
}

/* Block Style: Rabbet Shape */ 

.is-style-oaknut-shape-rabbet .wp-block-button__link,
.is-style-oaknut-shape-rabbet .wp-block-social-link {
	-webkit-clip-path: var( --oaknut-shape-rabbet );
	clip-path: var( --oaknut-shape-rabbet );
}

/* BLOCK: BUTTON */

.wp-block-button[class*="shape-angle"] > *:not([style*='border-radius']),
.wp-block-button[class*="shape-bevel"] > *:not([style*='border-radius']),
.wp-block-button[class*="shape-chevron"] > *:not([style*='border-radius']),
.wp-block-button[class*="shape-pointed"] > *:not([style*='border-radius']),
.wp-block-button[class*="shape-rabbet"] > *:not([style*='border-radius']),
.wp-block-button[class*="shape-ribbon"] > *:not([style*='border-radius']) {
	border-radius: 0;
}

/* Block Style: Chevron Left Shape */ 

.is-style-oaknut-shape-chevron-left .wp-block-button__link {
	-webkit-clip-path: var( --oaknut-shape-chevron-left );
	clip-path: var( --oaknut-shape-chevron-left );
}

/* Block Style: Chevron Right Shape */ 

.is-style-oaknut-shape-chevron-right .wp-block-button__link {
	-webkit-clip-path: var( --oaknut-shape-chevron-right );
	clip-path: var( --oaknut-shape-chevron-right );
}

/* Block Style: Pointed Shape */ 

.is-style-oaknut-shape-pointed .wp-block-button__link {
	-webkit-clip-path: var( --oaknut-shape-pointed );
	clip-path: var( --oaknut-shape-pointed );
}

/* Block Style: Ribbon Shape */ 

.is-style-oaknut-shape-ribbon .wp-block-button__link {
	-webkit-clip-path: var( --oaknut-shape-ribbon );
	clip-path: var( --oaknut-shape-ribbon );
}

/* BLOCK: COVER */

:root .wp-block-cover .wp-block-cover__inner-container {
	color: inherit;
}

/* Block Style: Space Between */

.wp-block-cover.is-style-oaknut-space-between .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: inherit;
}

/* BLOCK: SOCIAL LINKS */

.wp-block-social-links.is-style-default .wp-block-social-link-anchor,
.wp-block-social-links:not([class*="is-style-pill-shape"]):not([class*="is-style-logos-only"]) .wp-block-social-link-anchor {
	padding: .41em;
}

/* Block Style: Shapes */

.wp-block-social-links[class*="is-style-oaknut-shape"] .wp-block-social-link {
	border-radius: 0;
}

/* Block Style: Rounded Shape */

.wp-block-social-links.is-style-oaknut-shape-rounded .wp-block-social-link {
	border-radius: 6px;
}

/* Suaviza la transición del cambio de color */
.wp-block-button__link {
    transition: filter 0.3s ease, background-color 0.3s ease !important;
}

/* Aplica la inversión al pasar el ratón */
.wp-block-button__link:hover {
    filter: invert(1);
}

/* Añade la clase 'efecto-shake' en Avanzado */
.efecto-shake:hover {
    animation: shake 0.8s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.infinite-spin:hover {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* SOLUCIÓN AL SCROLL EXTRA EN MÓVIL */
@media (max-width: 600px) {
    /* Forzar que el contenedor se ajuste al contenido y no a una altura fija */
    .wp-block-cover.eplus-wrapper {
        min-height: 0 !important;
        height: auto !important;
    }
    /* Eliminar el margen extra del párrafo final */
    p.eplus-wrapper {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: none; /* Párrafo vacío, mejor ocultarlo */
    }
    
    /* Evitar que el cuerpo de la web baile horizontalmente */
    html, body {
        overflow-x: hidden;
    }
}

/* =============================================================================
   RAUL CEBALLOS CUSTOMIZATIONS
   ============================================================================= */

/* 1. BALANCE VISUAL DE LOGOS (_projects) */
/* Buscamos imágenes que contengan los nombres de archivo de los logos */
img[src*="ffl-logo"], 
img[src*="eer-logo"] {
    max-width: 140px !important; /* Igualamos por ancho como has pedido */
    height: auto !important;
    filter: brightness(0); /* Aseguramos que sean negros sólidos si no lo son */
    transition: transform 0.3s ease;
}

/* El logo de ESTOESRALLY es mucho más ancho (rectangular), así que 
   ajustamos el de FMX FOR LIFE para que no se vea enorme al compartir ancho */
img[src*="ffl-logo"] {
    max-width: 100px !important;
}

img[src*="ffl-logo"]:hover, 
img[src*="eer-logo"]:hover {
    transform: scale(1.05);
}

/* Opcional: Efecto al logo/avatar principal para que se sienta vivo */
.wp-block-image.is-style-rounded {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.wp-block-image.is-style-rounded:hover {
    transform: scale(1.1) rotate(5deg);
}

/* 2. MICRO-INTERACCIONES NEOBRUTALISTAS */
/* Mejoramos el hover de los botones con un desplazamiento de sombra */
.wp-block-button.is-style-oaknut-drop-shadow .wp-block-button__link {
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.wp-block-button.is-style-oaknut-drop-shadow .wp-block-button__link:hover {
    transform: translate(-2px, -2px);
    box-shadow: 0 1px currentColor, 0 2px currentColor, 0 3px currentColor, 0 4px currentColor, 0 5px currentColor, 0 6px currentColor, 0 7px currentColor, 0 8px currentColor !important;
    filter: none !important;
    background-color: #000 !important; /* Fondo negro en hover */
    color: #fff !important; /* Texto blanco para contraste */
}

/* 3. ACCESIBILIDAD SOCIAL LINKS */
/* Los iconos deben ser manejados vía PHP para añadir aria-hidden */