:root {
    --myfont: 'Frank Ruhl Libre', serif;
    --heads: 'Encode Sans Semi Condended', sans-serif;
    --title: 'Mulish', sans-serif;
}

.underline {
    text-decoration: underline;
           }

.extra-bold {
  font-weight: 900;  
}

.ecol {
    color: #B71761;
}

.container-centered {
    justify-content: center;
}

.container-centered > main {
    flex-grow: 0;
}


/* ======================================= */
/* Desktop Styles (for screens > 1024px)    */
/* ======================================= */

body {
    font-family: var(--myfont);
    font-weight: 300;
    margin: 0;
    padding: 0;
    background-color: #f8f8f8;
}

header {
    position: relative;
    text-align: center;
    padding: 20px 180px;
    background-color: white;
    border-bottom: 1px solid #ddd;
    min-height: 250px;
}
header img.main-photo {
    width: 641px;
    height: auto;
}

.header-links {
    position: absolute;
    top: 20px;
    left: 20px;
}
.header-links a {
    display: block;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 10px;
    background-color: #a1b6d1;
}
.header-links a:last-child {
    margin-bottom: 0;
}

.header-info {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    align-items: center;
}


/* New styles for the top-right container */
.header-info {
    position: absolute;
    top: 15px;
    right: 15px;
    display: flex;
    flex-direction: column; /* Stacks the name and new nav vertically */
    align-items: flex-end; /* Aligns them to the right */
}
.name-logo-group {
    display: flex;
    align-items: center;
}

/* Stile per il nome */
.header-info span {
    color: #8D293F;
    font-size: 1.5em;
    font-weight: 900;
    text-transform: uppercase;
    margin-right: 15px;
}


.header-info img {
    height: 45px;
    width: auto;
}

.container {
    display: flex;
    padding: 20px;
}

nav {
    width: 273px;
    padding-right: 20px;
}
nav ul {
    list-style-type: none;
    padding: 0;
}
nav a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
    background-color: #eee;
    margin-bottom: 5px;
    border-radius: 5px;
}
nav a:hover {
    background-color: #869FBF;
    color: white;
}

main {
    flex-grow: 1;
}

/* Hide hamburger on desktop */
.hamburger-menu {
    display: none;
}
/* This class is used by JavaScript to show the menu */
.header-links.show {
    display: block;
}

/* "Send an email" button styles */
.button-container {

}

.contact-section {
    display: flex; /* Aligns items in a row */
    align-items: center; /* Vertically aligns the text and button */
    gap: 30px; /* Creates space between the text and button */
    flex-wrap: wrap; /* Allows them to stack on very small screens */
}

.email-button {
    display: inline-block;
    width: 161px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #778899;
    color: white;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 6px;
    text-align: center;
}


/* ======================================= */
/* Secondary Navigation Styles (Desktop)   */
/* ======================================= */

.secondary-nav {
    margin-top: 15px;
    text-align: right; /* This aligns the stacked buttons to the right */
}

.secondary-nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    /* 'display: flex' is removed to allow items to stack vertically */
}

.secondary-nav li {
    margin-bottom: 8px; /* This creates the space between the buttons */
}
.secondary-nav li:last-child {
    margin-bottom: 0; /* Removes space after the very last button */
}

.secondary-nav a {
    display: inline-block; /* Allows sizing while respecting text-align */
    padding: 5px 30px;     /* Thin height (5px), long width (30px) */
    background-color: #867979;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.9em;
    white-space: nowrap;   /* This guarantees the text stays on one line */
}

.secondary-nav a:hover {
    background-color: #5a6878;
}





/* ======================================= */
/* Tablet-Only Styles                      */
/* ======================================= */

@media (min-width: 769px) and (max-width: 1023px) {
    
    /* Style for your name on tablets */

    header img.main-photo {
        width: 50%;
        max-width: 450px;
    }
    
    .header-info span {
        font-size: 1.1em; /* Reduced from 1.7em on desktop */
    }

    /* Style for the logo on tablets */
    .header-info img {
        height: 35px; /* Reduced from 45px on desktop */
    }
}



/* =================================================================== */
/* --- SMARTPHONE STYLES (applies only to screens 768px wide or less) --- */
/* =================================================================== */
@media (max-width: 768px) {
    /* Reset header for a simple vertical layout */
    header {
        position: relative; /* Add this line to act as an anchor */
        flex-direction: column;
        gap: 20px;
        padding: 15px;
        padding-top: 80px; /* Make space at the top for the hamburger button */
    }

    /* --- Hamburger Buttons --- */
    .hamburger-menu {
        display: block;
        position: absolute;
        top: 15px;
        font-size: 24px;
        background: #f8f8f8;
        border: 1px solid #ddd;
        border-radius: 5px;
        cursor: pointer;
        z-index: 101;
    }
    .hamburger-menu.right {
        right: 15px;
        left: auto;
    }
    

    
.header-links.show, .secondary-nav.show {
    display: block !important;
}
    
    /* --- Name, Logo, and Photo Centering (THE FIX) --- */
.header-info {
    position: static;
    display: flex;
    flex-direction: row; /* This is the critical fix */
    justify-content: center;
    margin-bottom: 20px;
}

/* This is the FIX for the main photo */
header img.main-photo {
    display: block; /* Important: treat the image as a block */
    margin: 0 auto; /* Centers the block on the page */
    width: 80%;
    max-width: 300px;
}

.header-links,
.secondary-nav {
    display: none;
    position: absolute;
    top: 0;
    width: 80%;
    max-width: 280px;
    height: auto; /* Not full-screen */
    padding: 20px;
    padding-top: 70px;
    background-color: white;
    z-index: 100;
    box-sizing: border-box;
}

/* This positions the LEFT menu */
.header-links {
    left: 0;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

/* This positions the RIGHT menu */
.secondary-nav {
    right: 0;
    box-shadow: -2px 0 5px rgba(0,0,0,0.1);
}

/* This is the SHARED style for buttons inside BOTH menus */
.header-links a,
.secondary-nav a {
    display: block;
    padding: 10px 15px;
    margin-bottom: 5px;
    text-decoration: none;
    color: white;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}
.header-links a:last-child,
.secondary-nav li:last-child a {
    margin-bottom: 0;
}

/* This sets the ORIGINAL color for the left menu buttons */
.header-links a {
    background-color: #a1b6d1;
}

/* This sets the color YOU CHOSE for the right menu buttons */
.secondary-nav a {
    background-color: #867979;
}


    
.secondary-nav.show li:last-child a {
    margin-bottom: 0; /* Removes space after the last button */
}

    /* --- Main Content Stacking --- */
    .container {
        flex-direction: column;
    }
    nav {
        width: 100%;
        padding-right: 0;
        margin-bottom: 20px;
    }
}