/*
Theme Name: Women & Architecture Child
Theme URI: https://womenandarchitecture.com
Description: Child theme di Twenty Twenty-Five per Women & Architecture
Author: to5a
Template: twentytwentyfive
Version: 1.0.0
*/

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
    /* Colori Brand */
    --color-background: #DFDFFF;
    --color-blue: #1442FF;
    --color-hellblue: #5475FF;
    --color-red: #FF0000;
    --color-yellow: #F8FF4F;
    --color-purple: #9F6FE9;
    --color-black: #231012;
    --color-white: #FFFFFF;
    
    /* Font Families */
    --font-heading: 'Protesk Grotesk', Arial, sans-serif;
    --font-body: 'Giallo Roman', Arial, sans-serif;
}

.color-red { color: var(--color-red);}
.color-hellblue { color: var(--color-hellblue);}
.color-purple { color: var(--color-purple);}

.color-black,
.color-black h1,
.color-black h2,
.color-black h3,
.color-black p,
.color-black a:link,
.color-black a:visited { 
    color: var(--color-black) !important;
}

.color-white,
.color-white h1,
.color-white h2,
.color-white h3,
.color-white p,
.color-white a:link,
.color-white a:visited { 
    color: var(--color-white) !important;
}


.color-purple,
.color-purple h1,
.color-purple h2,
.color-purple h3,
.color-purple p,
.color-purple a:link,
.color-purple a:visited { 
    color: var(--color-purple) !important;
}


.color-background,
.color-background h1,
.color-background h2,
.color-background h3,
.color-background p,
.color-background a:link,
.color-background a:visited { 
    color: var(--color-background) !important;
}

.color-blue,
.color-blue h1,
.color-blue h2,
.color-blue h3,
.color-blue p,
.color-blue a:link,
.color-blue a:visited { 
    color: var(--color-blue) !important;
}


.bg-red { background-color: var(--color-red);}
.bg-blue { background-color: var(--color-blue);}
.bg-black { background-color: var(--color-black);}
.bg-white { background-color: var(--color-white);}
.bg-yellow { background-color: var(--color-yellow);}
.bg-background { background-color: var(--color-background);}
.bg-hellblue { background-color: var(--color-hellblue);}




/* ========================================
   TIPOGRAFIA BASE
   ======================================== */
body {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.6;
}


strong {
    font-weight: 800 !important;
}

.underline {
    text-decoration: underline;
}


/* Rimuovi outline focus da tutto il sito */
*:focus,
*:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

a:focus,
a:focus-visible,
button:focus,
button:focus-visible,
input:focus,
input:focus-visible {
    outline: none !important;
    border-color: inherit !important;
    box-shadow: none !important;
}


/* ========================================
   HEADINGS
   ======================================== */
h1,
.wp-block-heading.h1 {
    font-family: var(--font-heading);
    font-size: 64px;
    font-weight: 600;
    letter-spacing: -2px;
    color: var(--color-red);
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

h2,
.wp-block-heading.h2 {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 600;
    color: var(--color-blue);
    text-transform: uppercase;
    line-height: 1.3;
    margin-bottom: 1.25rem;
}

h3,
.wp-block-heading.h3 {
    font-family: var(--font-body);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-blue);
    line-height: 1.4;
    margin-bottom: 1rem;
}

.untertitle {
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 1.25rem;
}

/* ========================================
   LINKS
   ======================================== */
a:link,
a:visited {
    color: var(--color-blue);
    font-weight: 800 !important;
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}



.hidden {
    display: none;
}

/* ========================================
   LAYOUT BASE
   ======================================== */
body {
    background-color: var(--color-background);
}

p {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin: 0 !important;
    margin-top: 19px !important;
}




/* ========================================
   BLOCKS
   ======================================== */


.wp-block-group.block {
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 140px;
    padding-bottom: 140px;
}

.wp-block-group.block-fullscreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    z-index: -1;
}

.wp-block-group.bg-white.block-fullscreen::before {
    background-color: var(--color-white);
}

.wp-block-group.bg-blue.block-fullscreen::before {
    background-color: var(--color-blue);
}

.wp-block-group.bg-hellblue.block-fullscreen::before {
    background-color: var(--color-hellblue);
}

.wp-block-group.bg-yellow.block-fullscreen::before {
    background-color: var(--color-yellow);
}

/* Responsive: riduci padding su mobile */
@media (max-width: 768px) {
    .wp-block-group.block {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}


/* Contenitore cards - layout verticale */
.events-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 60px;
}

/* Singola card evento */
.event-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: none;
    min-width: auto;
    margin: 0 !important;
    background-color: color-mix(in srgb, var(--color-background) 50%, transparent);
    padding: 20px;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

.event-card:hover {
    background-color: var(--color-background);
}

/* Titolo e freccia diventano rossi al hover */
.event-card:hover h3,
.event-card:hover .event-arrow {
    color: var(--color-red) !important;
}

.event-card-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.event-card h1,
.event-card h2,
.event-card h3 {
    color: var(--color-blue) !important;
    font-family: var(--font-heading);
    margin: 0 !important;
    transition: color 0.3s ease; /* Transition smooth */
}

.event-card p {
    color: var(--color-black) !important;
    font-size: 20px;
    text-align: left;
    margin-top: 0 !important;
}

a.event-card:link,
a.event-card:visited,
a.event-card:hover,
a.event-card:active {
    text-decoration: none !important;
    color: inherit;
}

.event-arrow {
    font-size: 50px;
    color: var(--color-blue);
    margin-left: 20px;
    display: flex;
    align-items: center;
    transition: color 0.3s ease; /* Transition smooth */
}



/* Eventi nascosti */
.event-hidden {
    display: none;
}

/* Bottone "Weitere Termine anzeigen" */
.btn {
    display: block;
    padding: 30px;
    background: var(--color-background);
    border: none;
    color: var(--color-blue);
    font-family: var(--font-body);
    font-size: 25px;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: color 0.3s ease;
    width: 100%;
}

.btn:hover {
    color: var(--color-red);
}

.btn.hidden {
    display: none;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    h1,
    .wp-block-heading.h1 {
        font-size: 42px;
        letter-spacing: -1px;
    }
    
    h2,
    .wp-block-heading.h2 {
        font-size: 24px;
    }

    h3,
    .wp-block-heading.h3 {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    h1,
    .wp-block-heading.h1 {
        font-size: 32px;
    }
    
    h2,
    .wp-block-heading.h2 {
        font-size: 20px;
    }

    h2,
    .wp-block-heading.h3 {
        font-size: 18px;
    }
}


/* ========================================
   COLONNE TEAM
   ======================================== */

.wp-block-columns.column-margintop {
    margin-top: 40px;
}

@media (max-width: 782px) {
    .wp-block-columns.column-invert.is-layout-flex {
        flex-direction: column-reverse !important;
    }
}