/*
 Theme Name: Iberica Fruits Theme
 Theme URI: https://elementor.com/
 Description: Child theme para Hello Elementor
 Author: ACF coder
 Author URI: https://ibericafruits.com
 Template: hello-elementor
 Version: 1.0.0
 Text Domain: Iberica Fruits
*/

/* ==========================================================================
   IBERICA FRUIT - SYSTEM DESIGN & STYLE SHEET (CSS)
   ==========================================================================
   Basado en la identidad corporativa de https://ibericafruit.com/
   Generado para replicar colores, tipografías, tamaños e interlineados.
*/

/* 1. VARIABLES DE DISEÑO (Custom Properties)
   ========================================================================== */
:root {
    /* Paleta de Colores Principal */
    --color-primary: #1B3B2B;        /* Verde oliva / bosque oscuro (corporativo) */
    --color-primary-light: #2D4E35;  /* Verde secundario aclarado */
    --color-accent: #E27D24;         /* Naranja fruta / Oro vibrante (Valenciano) */
    --color-accent-hover: #D47A2A;   /* Naranja oscuro para estados hover */
    
    /* Colores de Fondo y Superficie */
    --color-bg-pure: #FFFFFF;        /* Blanco puro */
    --color-bg-soft: #F9F8F6;        /* Tono hueso / crema suave para secciones */
    
    /* Colores de Texto */
    --color-text-dark: #2B2B2B;      /* Gris carbón oscuro para alta legibilidad */
    --color-text-muted: #555555;     /* Gris medio para textos secundarios o fechas */
    --color-text-light: #FFFFFF;     /* Texto blanco sobre fondos oscuros */

    /* Tipografías  */
    --font-headings: 'Tilt Warp', 'Inter', sans-serif;
    --font-body: 'Lora', 'Open Sans', serif;
}

/* 2. RESETS Y ESTILOS BASE
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    font-size: 16px;                  /* 1rem - Estándar de accesibilidad */
    line-height: 1.55;                /* Interlineado amplio (155%) para párrafos */
    color: var(--color-text-dark);
    background-color: var(--color-bg-pure);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 3. TIPOGRAFÍA Y ENCABEZADOS (Headings)
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 1.25rem;
}

/* Título principal de la web (Hero / Portada) */
h1, .heading-xl {
    font-size: 2.5rem;                /* ~40px en escritorio */
    line-height: 1.15;                /* Interlineado compacto para títulos grandes */
    letter-spacing: 0.02em;
}

/* Títulos de secciones principales (ej. "Favourites this month") */
h2, .heading-lg {
    font-size: 1.875rem;              /* ~30px en escritorio */
    line-height: 1.25;                /* 125% */
}

/* Títulos de bloques menores o nombres de producto (ej. "Clementine") */
h3, .heading-md {
    font-size: 1.375rem;              /* ~22px */
    line-height: 1.3;                 /* 130% */
    font-weight: 600;
}

/* Párrafos de texto regular */
p, .body-text {
    font-family: var(--font-body);
    font-size: 1rem;                  /* 16px */
    line-height: 1.55;                /* Separación óptima entre líneas (155%) */
    color: var(--color-text-dark);
    margin-bottom: 1.5rem;
}

/* Párrafos destacados o introductorios (Lead text) */
p.lead, .text-lead {
    font-size: 1.125rem;              /* 18px */
    line-height: 1.6;
    color: var(--color-primary);
}

/* 4. COMPONENTES COMUNES (Botones de ejemplo con la identidad)
   ========================================================================== */
.btn-primary {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-light);
    background-color: var(--color-primary);
    padding: 0.75rem 2rem;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: var(--color-accent); /* Cambia al naranja corporativo en hover */
}

/* 5. DISEÑO DE SECCIONES ALTERNAS (Estructura de la web)
   ========================================================================== */
.section-default {
    background-color: var(--color-bg-pure); /* Fondo Blanco */
    padding: 5rem 2rem;
}

.section-alt {
    background-color: var(--color-bg-soft); /* Fondo Crema Suave */
    padding: 5rem 2rem;
}


.duotone * img {
	filter: invert(1) brightness(100)!important;
	max-height: 125px;
	

}

/* SINGLE PRODUCT */

.product-single {
	width: 100%;
	display: flex;
	margin: 0 auto;
	flex-direction: column;
	align-items: center;
	width: 100%;
	.product-single__cover {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		background-color: var(--color-bg-soft);	
		width: 100%;
		> div {
			width: 50%;
		}
		.product-single__cover--meta {
		   	display: flex;
    		justify-content: flex-end;
		}
		.product-single__cover--meta--content {
			padding: 64px;
			max-width: 660px;
		}
		.product-single__cover--image img {
		  width: 100%;
		  max-height: 70vh;    
		  object-fit: cover; 
		  object-position: center; 
			
		}
	}
}


.product-image {
	width: 50%;
	height: auto;
	img {
	
	}
}

/* Season Varieties */
.season-container {
	width: 100%;
	margin-top: 36px;
	h2 {
		text-align: left;
		padding-left:36px;
	}
}


.season-chart {
  font-family: inherit;
  margin: 2rem 0;
  max-width: 100%;
	width: 100%;
	padding: 36px;
  overflow: hidden;
	border: 2px solid var(--color-primary-light);
	border-radius: 24px;
}
.season-chart__title {
  text-align: center;
  margin-bottom: 1rem;
}
.season-chart__header {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  margin-bottom: 4px;
}
.season-chart__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
}
.season-chart__spacer {
  width: 160px;
}
.season-chart__months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.season-chart__months span {
	font-family: var(--font-headings);
  text-align: center;
  text-transform: uppercase;
  color: #888;
  letter-spacing: .04em;
}
.season-chart__label {
  padding-right: 24px;
  border-top: 1px solid #eee;
  min-height: 38px;
  display: flex;
  align-items: center;
  text-align: right;
  justify-content: flex-end;
	line-height: 1em;
}
.season-chart__track {
  position: relative;
  min-height: 38px;
  border-top: 1px solid #eee;
}
.season-chart__bar {
  position: absolute;
  top: 50%;
  left: -6%;
	
  transform: translateY(-50%);
  height: 10px;
  border-radius: 5px;
  background: #1D6B3A;
	width: 112%;
}

/* Growing region */
.growing-region {
	display:flex;
	flex-direction: row;
	align-content: center;
	flex-wrap: nowrap;
	.growing-region__image {
		padding: 0 24px;
		max-width: 50%;
		min-width:360px;
		display: flex;
		align-content: center;
		img {
			width: 100%;
			border-radius: 24px;	
			border: 2px solid var(--color-bg-soft);
		}
	}
		
	.growing-region__description {
		padding: 0 24px;
	}
	
}

/* Related products */

.related-products {
	margin: 36px auto;
	max-width: 90%;
	width:90%;
	h2 {
		text-align: left;
		padding-left: 36px;
	}
	.related-products__list {
	display: inline-flex;
	list-style-type: none;
	margin-left: 0;
	li { 
		display: flex;

		padding: 24px;
		align-content: center;
		a {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: var(--color-primary);
			font-family: var(--font-headings);
			&:hover {
				color: var(--color-accent-hover);
			}
		}
	}
}
}


/* Ajustes adicionales para la nueva plantilla */
.product-nav ul li a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.variety-group {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.variety-group:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.fp-global-season-block span {
    display: inline-block;
    background: var(--color-primary-light, #e8f5e9);
    padding: 8px 24px;
    border-radius: 40px;
    font-weight: 600;
    color: var(--color-primary, #2e7d32);
}

/* Responsive para growing region */
@media (max-width: 768px) {
    .growing-region {
        flex-direction: column;
        align-items: center;
    }
    
    .growing-region__image {
        max-width: 100%;
        min-width: auto;
        margin-bottom: 24px;
    }
    
    .growing-region__image img {
        width: 100%;
    }
    
    .season-chart {
        padding: 20px;
        overflow-x: auto;
    }
    
    .season-chart__label {
        font-size: 12px;
        padding-right: 12px;
    }
    
    .season-chart__months span {
        font-size: 10px;
    }
    
    .related-products__list {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .related-products__list li {
        flex: 0 0 calc(50% - 48px);
        min-width: 150px;
    }
}


/* 6. RESPONSIVE / MEDIA QUERIES (Adaptación a Móviles)
   ========================================================================== */
@media (max-width: 768px) {
    body {
        font-size: 15px;              /* Un punto más pequeño en pantallas móviles */
    }

    h1, .heading-xl {
        font-size: 2rem;              /* Reducción a ~32px en móvil */
        line-height: 1.2;
    }

    h2, .heading-lg {
        font-size: 1.5rem;            /* Reducción a ~24px */
        line-height: 1.3;
    }

    h3, .heading-md {
        font-size: 1.25rem;           /* Reducción a ~20px */
    }
    
    .section-alt, .section-default {
        padding: 3rem 1rem;           /* Reducción de espaciados laterales y verticales */
    }
	
	.season-chart {
		padding:16px;
	}
	
	
	.season-chart__header {
		grid-template-columns: 80px 1fr;
	}
	
	.season-chart__row { 
		grid-template-columns: 80px 1fr;
	}

	.season-chart__months{
		span {
			 transform: rotate(-45deg);
  				display: inline-block; 
			font-size: .6rem;
		}
	}       
	
	.season-chart__label {
		max-width: 116px;
		font-size: .7rem;
		padding-right:16px;
	}
	
	.growing-region .growing-region__image {
        padding: 0 24px;
        max-width: 30%;
        min-width: 260px;
		img {
			height:fit-content;
		}
	}
	
	.season-container {
		h2 {
			text-align: center;
			padding-left:0;
		}
	}
	
	.related-products {

		h2 {
			text-align: center;
			padding-left: 0;
		}

}

@media (max-width: 600px) {

	.growing-region {
			flex-wrap: wrap;
		.growing-region__image {
			padding: 0 24px;
			max-width: 100%;
			min-width: 260px;
		}
	}
	
	
}