/**
 * Hero Banner Widget - CSS
 */

.parallax-header {
    height: 100dvh;
    position: relative;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    justify-content: center;
    padding: var(--section-padding-desktop) 0;
}

/* Hero senza immagine - usa colore del tema */
.parallax-header.hero-no-image {
    background: linear-gradient(135deg, var(--color-cta-primary) 0%, var(--color-cta-primary-hover) 100%);
}

.parallax-header-small.hero-no-image {
    background: linear-gradient(135deg, var(--color-cta-primary) 0%, var(--color-cta-primary-hover) 100%);
}

.parallax-header .container {
    position: relative;
    z-index: 2;
}

.parallax-header h5 {
    color: var(--color-white);
    font-size: var(--font-size-large);
    margin-bottom: var(--spacing-md);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
}

/* Breadcrumb Yoast nell'hero banner */
.parallax-header .breadcrumb-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.parallax-header .yoast-breadcrumb,
.parallax-header .wpseo-breadcrumb {
    color: var(--color-white);
    font-size: var(--font-size-small);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.parallax-header .yoast-breadcrumb a,
.parallax-header .wpseo-breadcrumb a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
}

.parallax-header .yoast-breadcrumb a:hover,
.parallax-header .wpseo-breadcrumb a:hover {
    opacity: 1;
}

.parallax-header .yoast-breadcrumb span,
.parallax-header .wpseo-breadcrumb span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 400;
}

.parallax-header .yoast-breadcrumb span.breadcrumb_last,
.parallax-header .wpseo-breadcrumb span.breadcrumb_last {
    font-weight: 600;
}

/* Separatori breadcrumb */
.parallax-header .yoast-breadcrumb > span:not(:last-child):after,
.parallax-header .wpseo-breadcrumb > span:not(:last-child):after {
    content: '›';
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
}

.parallax-header h1 {
    color: var(--color-white);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-lg);
    line-height: var(--line-height-tight);
    font-family: var(--font-heading);
}

/* Overlay: use design system overlay color by default */
.parallax-header[data-overlay-dark]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-overlay);
    z-index: 1;
}

.parallax-header[data-overlay-dark="0"]:before { background: none; }
.parallax-header[data-overlay-dark="1"]:before { background: rgba(0,0,0,0.1); }
.parallax-header[data-overlay-dark="2"]:before { background: rgba(0,0,0,0.2); }
.parallax-header[data-overlay-dark="3"]:before { background: rgba(0,0,0,0.3); }
.parallax-header[data-overlay-dark="4"]:before { background: rgba(0,0,0,0.4); }
.parallax-header[data-overlay-dark="5"]:before { background: rgba(0,0,0,0.5); }
.parallax-header[data-overlay-dark="6"]:before { background: rgba(0,0,0,0.6); }
.parallax-header[data-overlay-dark="7"]:before { background: rgba(0,0,0,0.7); }
.parallax-header[data-overlay-dark="8"]:before { background: rgba(0,0,0,0.8); }
.parallax-header[data-overlay-dark="9"]:before { background: rgba(0,0,0,0.85); }

/* Migliora la leggibilità del testo */
.parallax-header h5,
.parallax-header h1 {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* Small hero layout for archive/taxonomy pages */
.parallax-header-small,
.parallax-header--small {
    height: auto;
    min-height: 400px;
    position: relative;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    justify-content: center;
    padding: var(--section-padding-desktop) 0;
}

.parallax-header-small .container,
.parallax-header--small .container {
    position: relative;
    z-index: 2;
}

.parallax-header-small h1,
.parallax-header--small h1 {
    color: var(--color-white);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-tight);
    font-family: var(--font-heading);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

.parallax-header-small h5,
.parallax-header--small h5 {
    color: var(--color-white);
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

/* Overlay per small hero */
.parallax-header-small[data-overlay-dark]:before,
.parallax-header--small[data-overlay-dark]:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-overlay);
    z-index: 1;
}

.parallax-header-small[data-overlay-dark="0"]:before { background: none; }
.parallax-header-small[data-overlay-dark="1"]:before { background: rgba(0,0,0,0.1); }
.parallax-header-small[data-overlay-dark="2"]:before { background: rgba(0,0,0,0.2); }
.parallax-header-small[data-overlay-dark="3"]:before { background: rgba(0,0,0,0.3); }
.parallax-header-small[data-overlay-dark="4"]:before { background: rgba(0,0,0,0.4); }
.parallax-header-small[data-overlay-dark="5"]:before { background: rgba(0,0,0,0.5); }
.parallax-header-small[data-overlay-dark="6"]:before { background: rgba(0,0,0,0.6); }
.parallax-header-small[data-overlay-dark="7"]:before { background: rgba(0,0,0,0.7); }
.parallax-header-small[data-overlay-dark="8"]:before { background: rgba(0,0,0,0.8); }
.parallax-header-small[data-overlay-dark="9"]:before { background: rgba(0,0,0,0.85); }

/* Breadcrumb per small hero */
.parallax-header-small .yoast-breadcrumb,
.parallax-header--small .yoast-breadcrumb {
    color: var(--color-white);
    font-size: 14px;
    font-weight: 500;
    margin-top: var(--spacing-lg);
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

.parallax-header-small .yoast-breadcrumb a,
.parallax-header--small .yoast-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.3s ease;
}

.parallax-header-small .yoast-breadcrumb a:hover,
.parallax-header--small .yoast-breadcrumb a:hover {
    text-decoration: underline;
}

.parallax-header-small .yoast-breadcrumb span,
.parallax-header--small .yoast-breadcrumb span {
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
    .parallax-header { min-height: 400px; }
    .parallax-header h5 { font-size: var(--font-size-small); }
    .parallax-header h1 { font-size: var(--font-size-h2); }
    
    .parallax-header-small,
    .parallax-header--small {
        min-height: 400px;
    }
    
    .parallax-header-small h1,
    .parallax-header--small h1 {
        font-size: var(--font-size-h2);
    }
    
    .parallax-header .breadcrumb-wrapper {
        margin-top: 15px;
        margin-bottom: 100px;
    }
    
    .parallax-header .yoast-breadcrumb,
    .parallax-header .wpseo-breadcrumb {
        padding: 8px 16px;
        font-size: 11px;
    }
    
    .parallax-header .yoast-breadcrumb a,
    .parallax-header .wpseo-breadcrumb a,
    .parallax-header .yoast-breadcrumb span,
    .parallax-header .wpseo-breadcrumb span {
        font-size: 11px;
    }
}
/* ======= Banner Header (legacy single post) ======= */
.banner-header {
    position: relative;
    background-position: center;
    background-size: cover;
    min-height: calc(55vh - 160px);
}
.banner-header.middle-height {
    min-height: calc(75vh - 160px);
}
.banner-header.full-height {
    min-height: calc(100vh - 160px);
}
.banner-header h5,
[data-overlay-dark].banner-header h5 {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    color: var(--color-white);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.banner-header[data-overlay-dark] h1,
.banner-header h1 {
    position: relative;
    font-size: 90px;
    line-height: 100px;
    color: var(--color-white);
    margin-bottom: 15px;
}
.banner-header .subtitle {
    font-weight: 400;
    margin-bottom: 10px;
    color: var(--color-white);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.banner-header .section-subtitle,
[data-overlay-dark].banner-header .section-subtitle {
    font-weight: 400;
    margin-bottom: 10px;
    color: var(--color-white) !important;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.banner-header .title {
    font-size: 45px;
    line-height: 55px;
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--color-white);
    position: relative;
    margin-bottom: 0;
}
.banner-header .title span {
    color: var(--color-cta-secondary);
}
.banner-header[data-overlay-dark] p,
.banner-header p {
    font-size: 21px;
    color: rgba(255, 255, 255, 0.8);
}
/* for post banner */
.banner-header .post {
    margin-top: 20px;
}
.banner-header .post div {
    display: inline-block;
}
.banner-header .post .author {
    margin-right: 20px;
    font-size: 17px;
}
.banner-header .post .author .avatar {
    width: 55px;
    height: 55px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 5px;
}
.banner-header .post .date-comment {
    position: relative;
    font-size: 17px;
    color: var(--color-white);
    margin-right: 20px;
}
.banner-header .post .date-comment i {
    color: var(--color-white);
    font-size: 17px;
    margin-right: 5px;
}
.banner-header .post .date-comment:last-of-type {
    margin-right: 0;
}
@media (max-width: 991px) {
    .banner-header[data-overlay-dark] h1,
    .banner-header h1 {
        font-size: 40px;
        line-height: 50px;
    }
    .banner-header .title {
        font-size: 36px;
        line-height: 46px;
    }
}