/* Force the body and all main wrappers to 100% width */
html, body {
    overflow-x: hidden; /* Prevent horizontal scroll */
}

body.home #page-wrapper,
body.home #body-wrapper,
body.home .container,
body.home .grid-container,
body.home #content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    left: 0 !important;
}



/* Disable Quark's vertical centering on the home page */
body.home .main-content {
    display: block !important;
    vertical-align: top !important;
}

/* This forces the specific grid-lg container to unlock its width */
body.home .container.grid-lg {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Kill any padding on the main content wrapper that Quark uses */
body.home #body-wrapper {
    padding: 0 !important;
}

/* Ensure the inner content doesn't have a horizontal margin */
body.home #content.column {
    padding: 0 !important;
}


/* Ensure the stack starts at the very top of the browser window */
.vertical-stack {
    margin-top: 0 !important;
    padding-top: 0 !important;
}



/* Container styling */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 1.5rem 0;
}

/* The Tag Pill */
.tag-pill {
    display: inline-block;
    padding: 4px 12px;
    font-size: 0.75rem; /* Small and clean */
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666; /* Subtle grey */
    background-color: #f0f0f0; /* Very light background */
    border-radius: 100px; /* Fully rounded "pill" shape */
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    border: 1px solid transparent;
}

/* Hover state: subtle interaction */
.tag-pill:hover {
    background-color: #e2e2e2;
    color: #222;
    cursor: pointer;
}

/* Optional: Outline style (if you prefer no background) */
.tag-pill-outline {
    background-color: transparent;
    border: 1px solid #ddd;
}

.models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.model-card {
    position: relative; /* Reference point for the absolute overlay */
    overflow: hidden;
    background: #000; /* Backdrop for when the image dims */
}

.model-thumb {
    width: 100%;
    display: block;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* The Overlay Container */
.model-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 20px 20px; /* Extra top padding for the gradient */
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    
    /* Initially hidden */
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease-in-out;
}

/* Hover States */
.model-card:hover .model-overlay {
    opacity: 1;
    transform: translateY(0);
}

.model-card:hover .model-thumb {
    transform: scale(1.05); /* Slight zoom for a premium feel */
    opacity: 0.8; /* Dims the image slightly to make text pop */
}

/* The Text Style */
.model-name {
    color: #fff;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 20px 0;
}

.gallery-thumb {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.gallery-thumb:hover {
    opacity: 0.8;
}

/* Customizing the GLightbox caption appearance */
.gslide-description {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #333 !important;
}

.gslide-title {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px !important;
}

.gslide-desc {
    font-size: 0.9rem;
    line-height: 1.4;
    color: #666;
}


/* DEFAULT HEADER (For Models, Contact, etc.) */
#header {
    background: #ffffff !important; /* White background for standard pages */
    border-bottom: 1px solid #eeeeee !important;
    position: relative; /* It pushes content down normally */
}

#header a, #header .logo {
    color: #000000 !important; /* Black text so you can see it */
   
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    font-weight: 400;
    transition: opacity 0.3s ease;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Subtle shadow for readability */	
}

/* HOME PAGE OVERRIDE (For the Stacked Images) */
body.home #header {
    position: absolute !important; /* Floats over the photo */
    background: transparent !important;
    border-bottom: none !important;
}

body.home #header a, 
body.home #header .logo,
body.home .navbar-toggler span {
    color: #ffffff !important; /* White text for dark/vibrant photos */
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    font-weight: 400;
    transition: opacity 0.3s ease;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3); /* Subtle shadow for readability */
	
}

/* Target the dropdown list when it becomes visible on hover */
body.home .dropmenu ul li:hover > ul,
body.home .dropmenu ul li.active > ul {
    background: rgba(0, 0, 0, 0.2) !important; /* Dark semi-transparent */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Ensure the links inside that specific hover-list are white */
body.home .dropmenu ul li ul li a {
    color: #ffffff !important;
    background: transparent !important;
}

/* Change the background color when hovering over an individual model name */
body.home .dropmenu ul li ul li a:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* 5. Mobile Burger Menu Fix */
.navbar-toggler span {
    background-color: #ffffff !important;
}


body.home #body-wrapper {
    padding-top: 0 !important;
    margin-top: 0 !important;
}





/* This removes the default Quark top-margin */
#page-wrapper {
    padding-top: 0 !important;
}


/* 1. Reset any Quark containers for the Home Page */
body.home #body-wrapper, 
body.home .main-content, 
body.home .container {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. The Stack Styling */
.vertical-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.stack-item {
    position: relative;
    width: 100vw;
    height: 100vh; /* Every image is exactly screen height */
    overflow: hidden;
}

/* Prevent horizontal shift from scrollbars */
html {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Applichiamo lo stile all'immagine dentro il tag picture */
picture img.stack-img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: 50% 0%; /* Mantiene la testa del soggetto in alto */
    display: block;
    
    /* Effetto Fade-in che abbiamo creato prima */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

picture img.stack-img.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Rimuoviamo eventuali margini del tema che potrebbero spostare l'immagine */
body.home .container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}









/* 3. Timo Volz Style Typography Overlay */
.stack-overlay {
    position: absolute;
    bottom: 40px;
    left: 40px;
    color: #fff;
    z-index: 5;
}

.stack-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 400;
    opacity: 0.8;
}

html {
    scroll-snap-type: y mandatory;
}

.stack-item {
    scroll-snap-align: start;
}

.stack-footer {
    background: #000; /* Or #fff if you prefer a white finish */
    color: #888;
    padding: 60px 40px;
    text-align: center;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.footer-nav {
    display: flex;
    gap: 30px;
}

.footer-nav a {
    color: #888;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: #ffffff;
}

/* Styling for footers on standard white pages */
body:not(.home) .stack-footer {
    background: #f9f9f9;
    color: #333;
    border-top: 1px solid #eee;
}


.cc-badge {
    margin: 15px 0;
}

.cc-badge img {
    opacity: 0.6;
    transition: opacity 0.3s ease;
    filter: grayscale(100%); /* Optional: makes it black and white to match the minimalism */
}

.cc-badge img:hover {
    opacity: 1;
    filter: none; /* Shows the colors on hover */
}

/* La larghezza 'auto' assicura che le proporzioni siano mantenute */
.svg-ethics {
    height: 30px;
    width: auto;
    display: inline-block;
    padding: 0 10px; /* Aggiunge 10px a destra e a sinistra */
    vertical-align: middle; /* Opzionale: aiuta l'allineamento con il testo */	
}

/* 1. Allineamento a destra della lista radice */
ul.treemenu.treemenu-root {
    text-align: right;
    list-style: none;
    padding-right: 2rem; /* Spazio dal bordo destro */
    background-color: #000; /* Assicura sfondo nero */
}

/* 2. Stile dei link (Home, Models, About, ecc.) */
ul.treemenu li a {
    color: #ffffff !important; /* Forza il bianco */
    font-size: 1.4rem; /* Più grande */
    text-decoration: none;
    display: block;
    padding: 12px 0;
    font-weight: 300;
    transition: color 0.3s ease;
}

/* 3. Stile specifico per i sotto-menu (i nomi delle modelle) */
ul.treemenu ul.treemenu {
    text-align: right;
    list-style: none;
    margin-right: 0;
    padding-right: 1rem; /* Rientro opzionale per i sottomenu */
}

ul.treemenu ul.treemenu li a {
    font-size: 1.1rem; /* Leggermente più piccoli dei genitori per gerarchia */
    color: #cccccc !important; /* Grigio chiaro per le modelle */
}

/* 4. Rimuovi i pallini o icone di default che potrebbero apparire a sinistra */
ul.treemenu li::before, 
ul.treemenu span.toggler {
    display: none !important; /* Nasconde il quadratino/freccia del menu ad albero */
}

/* 5. Stato attivo (pagina corrente) */
ul.treemenu li a.active {
    font-weight: 700;
    color: #ffffff !important;
}