/*
* Theme Name: 2026
* Theme URI: https://www.brunogiliberto.com/
* Version: 1.0
* Author: Bruno Giliberto
* Author URI: https://www.brunogiliberto.com/
*/

/*************/
/* RESET     */
/*************/

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*************/
/* VARIABLES */
/*************/
:root {
    --columns: 4;
    --gutter: 1rem;
    --margin: 1.5rem;
    --baseline: 1.5rem;
}

/*************/
/* BASE      */
/*************/
body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 0.9rem;
    line-height: var(--baseline);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

main {
    flex: 1; /* this pushes the footer down */
}

h1, h2, h3, p, figure {
    margin-bottom: var(--baseline);
}

p {
    margin-bottom: 0rem;
    text-align: justify;  
    text-justify: none;
}

a, a:visited {
    color: black; /* takes the color of the surrounding text */
    text-decoration: none;
}
a:hover {
    color: blueviolet;
}

a:active {
    opacity: 0.7;
}
/*************/
/* GRID      */
/*************/
.grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
    gap: var(--gutter);
    padding: 0 var(--margin);
}

/* mobile — 4 columns */
.col-4  { grid-column: span 4; } /* full */
.col-3  { grid-column: span 4; } /* 3/4 */
.col-2  { grid-column: span 2; } /* half */
.col-1  { grid-column: span 4; } /* quarter */
.col-s { grid-column: span 4; }


#title {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    font-size: 2rem;
}
#title .col-3 {
    display: none;
}
#title .col-1 {
    min-height: 6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid;
}
#menu {
}
#menu .col-3 {
    display: none;
}
#menu .col-1 {
    min-height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid;
}
#container-26{
    flex: 1;
    align-content: start;
}
#container-26 .col-1 {
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
}
#container-26 .col-1 p{
    margin-bottom: 0.5rem;
}
#container-26 .col-1 a{
    border-bottom: 1px dotted;
}
#container-26 .col-1 a:hover{
    border-bottom: 1px solid;
}
#container-26 .col-3 {
    margin-top: 5dvw;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: min(70dvw, calc(100dvh - 13rem));
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}  
#container-26 .col-3 .prev, #container-26 .col-3 .next{
    height: 100%;
    width: 50%;
    color: #fff;
    font-size: 3rem;
    padding: 0 3%;
    opacity: 0.7;
    cursor: pointer;
    display: flex;
    align-items: center;
}
#container-26 .col-3 .prev:hover, #container-26 .col-3 .next:hover{
    opacity: 1;
}
#container-26 .col-3 .prev{
}
#container-26 .col-3 .next{
    justify-content: flex-end;
}

#bg-controls{
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.9rem;
}
#bg-arrows {
    color: #999;
    display: flex;
    gap: var(--gutter);
    font-size: 1.5rem;
}
#bg-counter{
    font-size: 0.9rem;
}
#bg-title{
    font-weight: normal;
    display: inline-block;
    width: fit-content;
    border-bottom: 1px dotted !important;
}
#bg-title:hover{
    border-bottom: 1px solid;
}
#bg-arrows .next:hover, #bg-arrows .prev:hover, #bg-arrows .stop:hover {
    cursor: pointer;
    color: blueviolet;
}
#contact-info{
    border-top: 1px solid #000;
    margin-top: 5rem;
    padding-top: 0.5rem;
}

/** IMPRESSUM % PRIVACY POLICY **/
.page-id-2944, .page-id-2947 {
    background-color: #F0D722;
}
#impressum{

}
#impressum .col-3 #title{
    min-height: 6rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    font-size: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid;
}
#impressum .col-3 #sub-title{
    font-weight: bold;
    min-height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid;
    margin-bottom: 1.5rem;
}
#impressum .col-3 p{
    margin-bottom: 1.5rem;
}
#flights{
    height: 100dvh;
}

/** LINKS  **/
.page-id-2795 {
    background-color: #f5f5f7;
}
.page-id-2795 #title .col-1 {
    border-bottom: none;
}
.page-id-2795 #container-26 .col-1 a{
    border-bottom: 0px dotted;
}
.page-id-2795 #container-26 .col-1 a:hover{
    border-bottom: 0px solid;
}
.letrasblancas{
    color: white !important;
}
.letrasrojas{
    color: white !important;
}
#container-links{
    display: flex;
    flex-direction: column;
}
.container-weddings{
    border-radius: 1rem;
    padding: 0rem;
    background-color: #8fa5b3;
    box-shadow: 5px 5px 20px #ccc;
    margin-bottom: 1.5rem;
}
.container-weddings:hover{
    opacity: 0.90;
}
.container-weddings a{
    color: white;
}
.container-architecture{
    color: #ddd;
    border-radius: 1rem;
    padding: 0rem;
    background-color: #91969c;
    box-shadow: 5px 5px 20px #ccc;
    margin-bottom: 1.5rem;
}
.container-architecture:hover{
    opacity: 0.90;
}
.container-catalogue{
    color: #fff;
    border-radius: 1rem;
    padding: 0rem;
    background-color: #bbb;
    box-shadow: 5px 5px 20px #ccc;
    margin-bottom: 1.5rem;
}
.container-catalogue:hover{
    opacity: 0.90;
}
.container-catalogue a{
    color: #fff;
}
#latest-catalogue{
    padding: 0 1rem 1rem 1rem;
}
#latest-catalogue a{
    color: #fff;
}
#latest-catalogue a:hover{
    color: #ddd;
}
#bookeddates-weddings{
    padding: 0 1rem 1rem 1rem;
}
#latest-architecture{
    padding: 0 1rem 1rem 1rem;
}
#latest-architecture a{
    color: #ddd;
}
#latest-architecture a:hover{
    color: #fff;
}
.latest-architecture-posts{
    font-size: 0.8rem;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-direction: row;
}
.latest-architecture-date{
    width: 5rem;
}
.latest-architecture-client{

}
.latest-architecture-type{
    margin-left: auto;
    font-style: italic;
    opacity: 0.6;
}
.angebote{
    display: flex;
    flex-direction: column;
    align-content: flex-end;
    border-radius: 1rem 1rem 0 0;
    padding: 3dvw;
    margin: 0;
}
.links-uppertitle{
    margin-top: auto;
    font-style: italic;
}
.links-title{
    font-size: 8dvw;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif !important;
    line-height: 100%;
}
.links-subtitle{
    border-top: 0px solid;
}
.links-weddings{
    background-image:   linear-gradient(to bottom, transparent 40%, #8fa5b3 100%), 
                        url('./images/links/weddpho.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    height: 60dvw;
    z-index: -999;
}

.links-architecture{
    background-image:   linear-gradient(to bottom, transparent 40%, #91969c 100%), 
                        url('./images/links/archph2.jpg');
    background-size: cover, cover;
    background-position: center, bottom;
    background-repeat: no-repeat, no-repeat;
    height: 60dvw;
}
.links-catalogue{
    background-image:   linear-gradient(to bottom, transparent 20%, #bbb 100%), 
                        url('./images/links/catalogue25.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    height: 60dvw;
}
/** GOOGLE CALENDAR **/
.google-calendar-list {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7rem;
    display: flex;
    flex-direction: column;
    margin: 0;
}

.google-calendar-list-inside{
    padding-bottom: 1rem;
}

.google-calendar-list h3 {
    font-weight: normal;
    color: #fff;
    padding: 0;
    margin: 0;
}

.google-calendar-list ul {
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.google-calendar-list li.event {
    padding: 0 0 0 1rem;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 0.5rem;
}

.calendar-year{
    font-weight: normal;
    font-size: 0.8rem;
    margin: 0;
}
.monthday{
    display: flex;
    flex-direction: row;
}
.calendar-month{
    width: 27%;
}

.google-calendar-list li.event.completed {
    opacity: 0.5;
}

/* Grayscale flags for completed events */
.google-calendar-list li.event.completed .event-flag {
    filter: grayscale(100%) opacity(0.7);
}

.google-calendar-list li.event.booked {
    color: white;
}

.google-calendar-list li.event.today {
    background: #e7ffe7;
    color: green;
    font-weight: bold;
}

.google-calendar-list li.event span.event-day {
    font-weight: normal;
}

.google-calendar-list li.event span.event-location {
    text-transform: none;
}

.google-calendar-list li.event span.event-flag{
    margin-left: auto;
    padding-right: 1rem;
}
/** GOOGLE CALENDAR **/

#footer {
    margin-top: auto;
}
#footer .col-3{
    display: none;
}
#footer .col-1 {
    min-height: 4rem;
    border-top: 1px solid #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#footer a {
    font-weight: normal;
    display: flex;
    align-items: center;
}
#footer img {
    width: 1rem;
    height: 1rem;
}
#footer svg {
    width: 1rem;
    height: 1rem;
    display: block;
}


/*** VCARD ***/

.page-id-2873{
    background-color: #f5f5f7;
}
#vcard-container{
    padding: 5dvw;
    display: flex;
    flex-direction: column;
}
.vcard-color1{
    color: #008009; 
}
.vcard-color2{
    color: #007aff; 
}
.vcard-color3{
    color: #008009; 
}
.vcard-color4{
    color: #ac39ff; 
}
.vcard-color5{
    color: #3f6eb8; 
}
.vcard-color6{
    color: #e47466; 
}

#vcard-share{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    position: sticky;
    top: 0;
    z-index: 100;
    padding: 1rem;
}
#vcard-addcontact{
    background-color: #2f77d8;
    color: #fff;
    border-radius: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 45%;
    padding: 0.5rem;

}
#vcard-wallet{
    margin-top: 1rem;
    border-radius: 1rem;
    box-shadow: 5px 5px 20px #ddd;
    background-image: url('./images/vcard/vcard-bk.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
#addcontact-text{
    line-height: 100%;
    padding-right: 2.5rem;
    text-align: left;
}
#addcontact-icon{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
#vcard-share{
    text-align: right;
}
.vcard-shareicon a{
    color: #2f77d8;
}
#vcard-image{
    padding: 2.5rem 0;
    width: 100%;
    aspect-ratio: 3 / 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#vcard-image img{
    width: 130px;
}
#vcard-name{
    font-size: 2rem;
    line-height: 100%;
    text-align: center;
}
#vcard-location{
    text-align: center;
}
#vcard-interact {
    margin: 2rem 0 1rem 0;
    display: flex;
    flex-direction: row;
}
.vcard-interact {
    border-top: 1px solid white;
    flex: 1;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0rem;
    text-align: center;
}
.vcard-interact svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}
#vcard-bio{
    padding: 1rem;
}
.vcard-link{
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 1rem;
    box-shadow: 5px 5px 20px #ddd;
    display: flex;
    flex-direction: row;
    margin: 0.5rem 0;
}
.vcard-link-icon{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 5rem;
}
.vcard-link-info{
    border-left: 1px solid #eee;
    padding: 1rem 1rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
}
.vcard-link-what{
    font-weight: bold;
}
.vcard-link-this{
    color: #1d1d1f;
}
#vcard-social{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 3rem;
    padding: 2rem;
}
.vcard-social-link{
    width: 10%;
    aspect-ratio: 1 / 1;
}
.vcard-social-link svg{
    width: 100%;
    height: 100%;
    display: block;
}


/***********/
/* TABLETS */
/***********/
@media (min-width: 600px) {
    :root {
        --columns: 8;
        --gutter: 1.25rem;
        --margin: 2rem;
    }

    .col-4  { grid-column: span 8; } /* full */
    .col-3  { grid-column: span 8; } /* 3/4 */
    .col-2  { grid-column: span 4; } /* half */
    .col-1  { grid-column: span 8; } /* quarter */
}


/***********/
/* DESKTOP */
/***********/
@media (min-width: 900px) {
    :root {
        --columns: 12;
        --gutter: 1.5rem;
        --margin: 3rem;
    }

    .col-4 { grid-column: span 12; }
    .col-3 { grid-column: span 8; }
    .col-2 { grid-column: span 6; }
    .col-1 { grid-column: span 4; }
    .col-s { grid-column: span 2; }


    #menu .col-3, #footer .col-3 {
        display: inherit;
    }

    #title .col-3 {
        display: inherit;
    }
    #container-26 .col-1 {
        padding-top: 1.5rem;
        display: flex;
        flex-direction: column;
        padding-bottom: 0.3rem;
    }
    #container-26 .col-3 {
        margin-top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }  
    /** LINKS  **/
    .page-id-2795 #footer .col-1{
        border-top: 1px solid black !important;
        width: 92dvw;
    }
    #container-links{
        display: flex;
        flex-direction: row;
        width: 92dvw;
        justify-content: space-between;
        align-items: flex-start;
    }
    .container-weddings{
        width: 29dvw;
    }
    .container-architecture{
        width: 29dvw;
    }
    .container-catalogue{
        width: 29dvw;
    }
    .angebote{
        padding: 0 1dvw 1dvw 1dvw;
    }
    .links-title{
        font-size: 3dvw;
    }
    .links-weddings{
        height: 20dvw;
    }
    .links-architecture{
        height: 20dvw;
    }
    .links-catalogue{
        height: 20dvw;
    }
    #footer .col-1 {
        min-height: 3rem;
    }

    #contact-info{
        padding-top: 1rem;
        margin-top: auto;
    }

    /*** VCARD ***/
    #vcard-container{
        width: 40dvw;
        margin: 0 auto;
    }

}