/*
Theme Name: UEO
Theme URI: https://ueolot.com/
Author: MSF
Author URI: https://ueolot.com/
Description: Tema per a la UE Olot.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ue-olot
*/


/* -------------------------------------------
   VARIABLES DE COLORS (Recomanat)
---------------------------------------------- */
:root {
    --color-principal: #AB162B; /* Vermell UEO */
    --color-secundari: #363636; /* Negre/Blau fosc */
    --color-blau-UEO: #011576;
    --color-text: #333333;
    --color-fons: #f9f9f9;
    --color-blanc: #ffffff;
    --font-principal: 'Montserrat', sans-serif;
}
.input_amb_errors {
	background-color: var(--color-principal) !important;
	color: white !important;
}
#radio-control-wc-payment-method-options-redsys__content::after {
	content: "Si ho prefereixes, ens pots facilitar el número IBAN del teu compte bancari i cada any et girarem el rebut.";
	display: block;
	margin-top: 20px;
}
.woocommerce-notices-wrapper .woocommerce-message a {
	display: none !important;
}
.price {
        color: var(--color-blau-UEO) !important;
}
.sku_wrapper {
	display: none !important;
}
select {
	padding:10px;
	border-radius:5px;	
}
input.input-text.qty.text {
	padding-top:10px;
	padding-bottom:10px;
}
.add_to_cart_button {
	text-align:center;
	line-height:1.6;
	background-color: var(--color-principal) !important;
	font-weight: 700;
	color: var(--color-blanc) !important;
	text-transform: uppercase;
	border: 2px solid var(--color-principal) !important;
	border-radius: 5px;
	transition: background-color 0.3s, border-color 0.3s;
	cursor: pointer;
}
.single_add_to_cart_button {
        min-width:260px;
        text-align:center;
        line-height:1.6;
        display: inline-block;
        padding: 10px 20px;
        background-color: var(--color-principal) !important;
        color: var(--color-blanc) !important;
        font-weight: 700;
	text-transform: uppercase;
	border: 2px solid var(--color-principal) !important;
	border-radius: 5px;
	transition: background-color 0.3s, border-color 0.3s;
	cursor: pointer;
}
 
.woocommerce-ordering, .woocommerce-result-count {
        display: none !important;
}


/* -------------------------------------------
   ESTILS BÀSICS I TIPOGRAFIA
---------------------------------------------- */
body {
    font-family: var(--font-principal);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--color-fons);
    color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-principal);
    font-weight: 700; /* Negreta */
    color: var(--color-secundari);
    margin-top: 0;
}

a {
    color: var(--color-principal); /* Enllaços vermells */
    text-decoration: none;
}
a.button {
	 background-color: var(--color-principal) !important; /* Enllaços vermells */
}
button.button {
         background-color: var(--color-principal) !important; /* Enllaços vermells */
}
a:hover {
    color: var(--color-secundari);
    text-decoration: underline;
}

/* -------------------------------------------
   CAPÇALERA (HEADER)
---------------------------------------------- */
.site-header {
    /* background-color: var(--color-secundari); */
    color: var(--color-blanc);
    padding: 15px 0;
    text-align: center;
    background-color: #AB162B;
    position: relative;
    background-image: url(images/page-title-background.jpg);
    background-repeat: repeat-x;
    background-position: center;

}

.site-title a {
    color: var(--color-blanc);
    font-size: 2em;
    font-weight: 700;
    text-transform: uppercase;
}

/* -------------------------------------------
   ESTRUCTURA DEL CONTINGUT PRINCIPAL
---------------------------------------------- */

/* Contenidor central que simula l'estructura de la botiga */
#content-area {
    width: 90%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 30px;
    background-color: var(--color-blanc);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 5px;
    /* Afegim Flexbox per gestionar dues columnes fàcilment */
    display: flex;
    gap: 30px; /* Espai entre les columnes */
}

/* -------------------------------------------
   ESTILITZACIÓ D'ELEMENTS CLAU (Botons, etc.)
---------------------------------------------- */

/* Simulació de botons d'acció amb el color principal */
.button,
input[type="submit"],
.wp-block-button a {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--color-principal);
    color: var(--color-blanc) !important;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid var(--color-principal);
    border-radius: 5px;
    transition: background-color 0.3s, border-color 0.3s;
    cursor: pointer;
}

.button:hover,
input[type="submit"]:hover,
.wp-block-button a:hover {
    background-color: var(--color-secundari); /* Canvia a fosc en passar el ratolí */
    border-color: var(--color-secundari);
}

/* -------------------------------------------
   PEU DE PÀGINA (FOOTER)
---------------------------------------------- */
.site-footer {
    background-color: var(--color-secundari); /* Fons fosc */
    color: #aaaaaa;
    padding: 20px 0;
    font-size: 0.9em;
}

.footer-widgets-area {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0 40px;
    border-bottom: 1px solid #333333; /* Separador del site-info */
}

.footer-column {
    flex: 1;
    padding: 0 15px;
}

.footer-column h3 {
    color: var(--color-blanc);
    font-size: 1.1em;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: 700;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column ul li a {
    color: #aaaaaa;
    display: block;
    padding: 5px 0;
}
.footer-column ul li a:hover {
    color: var(--color-principal);
    text-decoration: none;
}

.site-info {
    text-align: center;
    padding: 10px 0;
}

/* Columna de contingut principal (la part del text del producte) */
.site-main {
    flex: 2; /* Ocupa 2/3 de l'espai */
    min-width: 0; /* Important per evitar desbordaments */
}

/* Columna de la Cistella/Barra lateral (la part dreta) */
.sidebar-area {
    flex: 1; /* Ocupa 1/3 de l'espai */
    padding-top: 50px; /* Per alinear-se millor amb el contingut */
}

/* ** ESTILS ADICIONALS BASATS EN LA IMATGE ** */

/* Títols de Secció */
.entry-title {
    font-size: 2.5em;
    color: var(--color-secundari);
    margin-bottom: 20px;
}

/* Preu o destacat */
.product-price {
    font-size: 2em;
    font-weight: 700;
    color: var(--color-principal);
    margin-top: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 10px;
}

/* Ajustament per dispositius petits (responsive) */
@media (max-width: 768px) {
    #content-area {
        flex-direction: column; /* Apila les columnes */
    }
    .sidebar-area {
        padding-top: 0;
    }
    .footer-widgets-area {
        flex-direction: column;
    }
    .footer-column {
        margin-bottom: 20px;
        text-align: center;
    }
    .footer-column ul {
        text-align: center;
    }

}