/*
 Theme Name:   Twenty Ten Child
 Theme URI:    https://sarriagegants.cat/
 Description:  Child theme per Twenty Ten amb personalitzacions senzilles
 Author:       Sarrià
 Author URI:   https://sarriagegants.cat/
 Template:     twentyten
 Version:      1.0.0
*/

/* Importem el CSS del tema pare */
@import url("../twentyten/style.css");
/* Fonts: Lora per cos, Playfair Display per títols */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* ===============================
   Personalitzacions
=============================== */
/* Cos de text */
body, p, li {
    font-family: 'Lora', serif;
    font-weight: 400;
    line-height: 1.6;
    color: #333333; /* gris fosc llegible */
}

/* H1 — títols principals i títols de post */
h1, .entry-title, .post h1, .site-title {
    font-family: 'Lora', serif;
    font-weight: 700;
    line-height: 1.2;
    color: #111111;
}

/* H2–H6 */
h2, h3, h4, h5, h6 {
    font-family: 'Lora', serif;
    font-weight: 700;
    line-height: 1.3;
    color: #222222;
}

/* Menús */
#access a, #access a:visited {
    font-family: 'Lora', serif;
    font-weight: 400;
    color: #333333;
}

/* Menús al passar el cursor */
#access a:hover {
    color: #007acc;
}

/* Widgets i títols secundaris */
.widget-title {
    font-family: 'Lora', serif;
    font-size: 18px;
    font-weight: 600;
    color: #111111;
    line-height: 1.2;       /* ajusta segons necessiti */
    letter-spacing: normal;  /* evita estirament */
}
/* Cos de text dins els widgets */
/* Text widgets més equilibrat */
.widget, 
.widget p, 
.widget li, 
.widget a {
    font-size: 16px;
    line-height: 1.6;       /* com el cos del text */
    letter-spacing: normal;  /* evita estirament de lletres */
    font-stretch: normal;    /* evita que el navegador estiri la font */
}
/* Enllaços dins del contingut */
a, a:visited {
    font-family: 'Lora', serif;
    color: #007acc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Ajusts visuals addicionals per llegibilitat */
.entry-content img {
    max-width: 100%;
    height: auto;
}

.entry-content blockquote {
    font-family: 'Lora', serif;
    font-style: italic;
    color: #555555;
    border-left: 3px solid #007acc;
    padding-left: 10px;
}
/* Enllaços del menú */
#access a, #access a:visited {
    font-family: 'Lora', serif;
    font-weight: 200 !important;
    color: #ffffff; /* blanc sobre fons fosc */
    text-decoration: none;
}

/* Enllaços del menú al passar el cursor */
#access a:hover {
    color: #ffcc00; /* color destacat, visible */
}

/* Fons del menú */
#access {
    background-color: #111111; /* fosc, uniforme */
}
/* Menú principal */
#access a {
    font-size: 18px; /* pots canviar a la mida que vulguis, p.ex. 20px */
    font-weight: 400; /* opcional: fer-la una mica més gruixuda */
}
#access ul li a {
    font-size: 16px; /* submenu lleugerament més petit */
}

/* Menu principal flexible */
#access ul {
    display: flex;
    justify-content: center; separa elements uniformement
    background-color: #111111;
}

/* Elements del menú */
#access ul li {
    list-style: none;
}

/* Enllaços del menú */
#access ul li a {
    display: block;
    text-align: center;
    padding: 10px 30px;
    font-family: 'Lora', serif;
    font-weight: 600;
    font-size: 18px;
    color: #ffffff;
    text-decoration: none;
}

/* Hover / destacat */
#access ul li a:hover {
    color: #ebdcb5 !important;
}
/* Imatges dins del contingut */
.entry-content img {
    max-width: 100%;
    height: auto;
}

/* Blockquotes */
.entry-content blockquote {
    font-family: 'Lora', serif;
    font-style: italic;
    color: #555555;
    border-left: 3px solid #007acc;
    padding-left: 10px;
}

/* Enllaços dins del contingut */
a, a:visited {
    font-family: 'Lora', serif;
    color: #007acc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Contenidor de submenus */
#access ul li ul {
    position: absolute;     /* que surti per sota del menú principal */
    top: 100%;              /* just sota l'element pare */
    left: 0;
    z-index: 999;           /* que estigui per sobre de la resta de la web */
    background-color: #93001d !important; /* fons del submenu */
    min-width: 180px;       /* amplada mínima */
}

/* Elements del submenu */
#access ul li ul li {
    display: block;         /* vertical */
}

#access ul ul a {
    background-color: #93001d;
}

/* Enllaços del submenu */
#access ul li ul li a {
    display: block;
    padding: 10px 15px;
    color: #ffffff;
    text-decoration: none;
}

/* Hover al submenu */
#access ul li ul li a:hover {
    background-color: #007acc;
    color: #ffffff;
}
/* Parent menú: color groc quan el cursor està sobre ell o sobre el submenu */
#access ul li:hover > a {
    color: #ebdcb5; /* groc */
}

/* Enllaços del submenu */
#access ul li ul li a:hover {
    background-color: #93001d; /* fons blau clar del submenu al passar el cursor */
    color: #ffffff;             /* text blanc */
}


#branding img {
    border:0 !important;
    margin-top: -15px !important;
}
#site-title {
    margin-bottom: 30px !important;
}








/* 1. Netegem el contenidor principal */
#branding {
    padding: 20px 0 !important;
    display: block !important;
}

/* 2. El Logo: Flotant a l'esquerra per obrir espai */
#site-title img.logo-injected {
    float: left !important;
    margin: 0 20px 10px 0 !important;
    max-height: 85px !important; /* Mida ideal per al teu logo */
    width: auto !important;
}

/* 3. El Títol: Forcem que no ocupi tota la línia */
#site-title {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding-top: 5px !important; /* Per alinear-lo amb la part de dalt del logo */
}

#site-title a {
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: bold !important;
    display: inline-block !important; /* Important perquè el lema baixi */
}

/* 4. La Descripció (Lema): Forcem que baixi sota el text */
#site-description {
    display: block !important;
    float: none !important;
    clear: none !important; /* No fem clear per mantenir-lo al costat del logo */
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    font-style: italic !important;
    font-size: 15px !important;
    color: #555 !important;
    line-height: 1.4 !important;
}

/* 5. La Foto dels Gegants: Baixem-la perquè no toqui els textos */
#branding img:not(.logo-injected) {
    clear: both !important; /* Això talla el "float" i envia la foto a sota de tot */
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-top: 30px !important;
}

/* 6. Ajust per a mòbils (menys de 768px) */
@media (max-width: 768px) {
    #site-title img.logo-injected {
        float: none !important;
        margin: 0 auto 15px auto !important;
        max-height: 70px !important;
    }
    #site-title, #site-description {
        text-align: center !important;
        width: 100% !important;
    }
    #site-title a {
        font-size: 22px !important;
    }
}



/* Reduir espais superiors de la capçalera */
#header {
    padding: 0 0 0 0 !important; /* Estava a 30px o més */
}

#masthead {
    padding-bottom: 0 !important;
}

#branding {
    border-top: none !important; /* Treu una línia negra fina que a vegades surt a dalt */
    padding-top: 5px !important;
}

/* Ajustar el bloc que hem creat nosaltres */
#header-custom-block {
    padding: 10px 0 !important; /* Reduïm el marge de dalt i baix del logo/títol */
    margin-bottom: 0 !important;
}

/* Reduir l'espai entre el lema i la foto gran de sota */
#branding img:not(.logo-injected) {
    margin-top: 10px !important; /* Estava a 30px, ara molt més juntet */
}




/* Arrodonir l'encaixonat blanc principal */
#wrapper {
    border-radius: 20px;
    overflow: hidden; /* Això assegura que el contingut no surti de les cantonades */
    margin-top: 20px; /* Opcional: dóna una mica d'aire per sobre */
    margin-bottom: 20px; /* Opcional: dóna una mica d'aire per sota */
}

/* Opcional: Si vols arrodonir també la imatge de la capçalera */
#branding img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}


/* Fer que el menú ocupi tot l'ample de l'encaixonat */
#access {
    background: #93001d; /* Color per defecte, el canviarem a sota */
    display: block;
    float: left;
    margin: 0 auto;
    width: 100%; /* Força l'ample total */
    border-radius: 0 0 15px 15px; /* Ajusta el número segons l'arrodoniment del wrapper */
    margin-top:-15px;
    border-top:1px solid #ebdcb5;
}

/* Eliminar marges interns que puguin quedar */
#access .menu-header, div.menu {
    margin-left: 0;
}
#access li:hover > a, #access ul ul :hover > a {
    background-color: #93001d;
}

/* Convertir cada entrada en una "fitxa" */
.post, .hentry {
    background-color: #ebdcb550; /* Un gris molt subtil (pots provar #f2f2f2 si el vols més fosc) */
    padding: 5px 5px 5px 20px;             /* Espai intern perquè el text no toqui les vores de la fitxa */
    margin-bottom: 10px;       /* Separació entre una fitxa i la següent */
    border-radius: 15px;       /* Arrodoniment de les cantonades de la fitxa */
    border: 1px solid #eee;    /* Una línia molt fina per definir millor la vora */
/*     box-shadow: 0 2px 10px rgba(0,0,0,0.1); Ombra molt suau per donar relleu */
}

/* Ajustar el títol de la fitxa perquè no quedi massa enganxat a dalt */
.entry-title {
    margin-top: 0;
    padding-top: 10px;
}

/* Opcional: Treure la línia divisòria antiga del tema que ja no necessitem */
#content .post {
    border-bottom: none;
}


/* Eliminar els marges laterals del contingut principal */
#main {
    padding: 20px 0 0 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Afegir una mica de marge només als textos perquè no toquin la vora de la pantalla */
#content {
    margin-left: 0px; /* Ajusta-ho al teu gust */
}

/* Ajustar el widget lateral perquè també tingui una mica d'aire a la dreta */
#primary, #secondary {
    padding-right: 0px;
}
/* Color del títol quan hi passes el ratolí */
#content .entry-title a:hover,
#content .entry-title a:focus,
#content .entry-title a:active {
    color: #93001d; /* Blau corporatiu (canvia-ho pel teu color preferit) */
}

/* Color dels enllaços en repòs */
a:link,
a:visited {
    color: #93001d; /* Un blau una mica més fosc i elegant */
    text-decoration: none;
}

/* Color dels enllaços quan hi passes el ratolí */
a:active,
a:hover {
    color: #cc0000; /* Aquí podries posar el vermell si t'agrada, o un altre blau */
}


#nav-below {
    clear: both;      /* Això força l'enllaç a baixar sota les columnes */
    display: block;
    padding: 30px 0;  /* Dona-li una mica d'aire */
    margin-left: 10px; /* Alinia-ho amb el text dels teus posts */
    font-size: 16px;
    font-weight: bold;
}
/* Color de l'enllaç "Entrades més antigues" */
#nav-below a {
    color: #93001d; !important; /* Posa aquí el teu blau o el color que vulguis */
    font-weight: bold;         /* Opcional: el fa una mica més visible */
    text-decoration: none;
}

/* Color quan passes el ratolí per sobre */
#nav-below a:hover {
    color: #cc0000 !important; /* El color que vulguis al fer hover */
    text-decoration: none;
}

#colophon {
    border-top: 1px dotted #93001d; /* Una línia del teu blau per tancar la web */
    margin-top: 0px;
    padding-top: 20px;
}

/* Amaga el text del crèdit de WordPress */
#site-generator {
    display: none;
}

/* Si vols que la teva frase de "Colla Gegantera..." estigui centrada ara que no hi ha l'altre text */
#site-info {
    width: 100%;
    text-align: center;
    float: none;
}



/* Estilitzar la caixa on s'escriu (input) */
#s {
    border: 1px solid #ddd;   /* Una vora suau */
    border-radius: 10px 0 0 10px;      /* Arrodonit com la resta de la web */
    padding: 8px 8px;        /* Espai intern perquè el text no toqui la vora */
    width: 65%;               /* Ample de la caixa de text */
    outline: none;            /* Treure la vora blava lletja en clicar */
    transition: border-color 0.3s; /* Efecte suau al clicar */
}

/* Canviar el color de la vora quan l'usuari clica per escriure */
#s:focus {
    border-color: #93001d;    /* El teu blau corporatiu */
}

/* Estilitzar el botó de "Cerca" */
#searchsubmit {
    background-color: #93001d; /* Blau corporatiu */
    color: #fff !important;    /* Text en blanc */
    border: 1px solid #93001d;
    border-radius: 0 10px 10px 0;       /* També arrodonit */
    padding: 8px 11px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s;
}

/* Efecte quan passes el ratolí pel botó */
#searchsubmit:hover {
    background-color: #93001d; /* Blau més fosc */
}




/* 1. Contenidor de les fotos */
.entry-content p {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 2. Estil base de les imatges (Prioritat màxima) */
body .entry-content p img.alignnone, 
body .entry-content p img {
    width: calc(33.33% - 10px) !important;
    height: 250px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    cursor: zoom-in !important;
    transition: all 0.4s ease-in-out !important;
    display: inline-block !important;
    margin: 0 !important;
    transform: scale(1) !important;
}

/* 3. L'efecte Hover (Prioritat màxima) */
body .entry-content p img.alignnone:hover, 
body .entry-content p img:hover {
    transform: scale(1.05) !important;
    filter: brightness(1.1) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4) !important;
    z-index: 99 !important;
}

/* 4. Adaptació per a mòbils */
@media (max-width: 600px) {
    body .entry-content p img.alignnone, 
    body .entry-content p img {
        width: calc(50% - 10px) !important;
        height: 180px !important;
    }
}