/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/

/* =========================
   LAYOUT BASE
========================= */

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
}

/* =========================
   HERO
========================= */

.hero-premium {
    padding: 50px 30px;
    background: #2E7D32;
    color: #fff;
    border-radius: 18px;
    margin-bottom: 25px;
}

.hero-content h1 {
    font-size: 34px;
    line-height: 1.2;
    margin-bottom: 15px;
}

.hero-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* badge */
.badge {
    background: rgba(255,255,255,0.15);
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    color: #fff;
}

/* link docente in hero */
.hero-meta a.badge {
    text-decoration: underline;
}

/* =========================
   GRID / LAYOUT CARDS
========================= */

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 25px;
}

/* card base */
.card {
    background: #fff;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

/* variante soft */
.card-soft {
    background: #f7f7f7;
}

/* card large */
.card-large {
    padding: 24px;
}

/* =========================
   INFO LIST
========================= */

.info-list div {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.info-list span {
    color: #888;
}

/* =========================
   TAGS
========================= */

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag {
    background: #e9e9e9;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
}

/* =========================
   LINK STYLE (IMPORTANTISSIMO)
========================= */

/* link dentro card */
.card a {
    color: #2E7D32;
    text-decoration: none;
    font-weight: 500;
}

.card a:hover {
    text-decoration: underline;
}

/* =========================
   PROGRAMMA
========================= */

.program-content {
    font-size: 15px;
    line-height: 1.6;
}

.card-large h2 {
    margin-bottom: 15px;
}

/* =========================
   TYPO UTILITY
========================= */

.big-text {
    font-size: 22px;
    font-weight: 600;
}

/* =========================
   MOBILE FIRST (FONDAMENTALE)
========================= */

@media (max-width: 768px) {

    .wrap {
        padding: 20px 15px;
    }

    .hero-premium {
        padding: 25px 18px;
        border-radius: 14px;
    }

    .hero-content h1 {
        font-size: 26px;
    }

    .grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .card {
        padding: 18px;
        border-radius: 14px;
    }

    .card-large {
        padding: 18px;
    }

    .hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}
.docente-image img {
    border-radius: 100%;
    width: 140px;
    height: 140px;
    object-fit: cover;
    margin-top: 20px;
}

.corso-card {
    transition: 0.3s;
    text-decoration: none;
    color: inherit;
}

.corso-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.meta {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}

/* SPLIT LAYOUT */
.docente-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

/* BLOCCO VERDE */
.docente-left {
    background: #2E7D32;
    color: #fff;
    padding: 40px;
    border-radius: 18px;
    text-align: center;
}

/* IMMAGINE */
.docente-image img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 100%;
    margin-bottom: 20px;
    border: 4px solid rgba(255,255,255,0.3);
}

/* NOME */
.docente-left h1 {
    font-size: 28px;
    margin-top: 10px;
}

/* BLOCCO BIO */
.docente-right {
    background: #fff;
    padding: 40px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.docente-right h2 {
    margin-bottom: 15px;
}

/* MOBILE */
@media (max-width: 768px) {
    .docente-split {
        grid-template-columns: 1fr;
    }

    .docente-left,
    .docente-right {
        padding: 25px;
    }

    .docente-image img {
        width: 100px;
        height: 100px;
    }
}
.corso-img img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 12px;
}

.corso-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.badge-corso {
    display: inline-block;
    background: #2E7D32;
    color: #fff;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    margin-top: 8px;
    width: fit-content;
}

/* GRID */
.courses-grid-premium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* CARD */
.course-card-premium {
    display: block;
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 45px rgba(0,0,0,0.08);
    transition: transform .35s ease, box-shadow .35s ease;
    text-decoration: none;
    color: inherit;
}

.course-card-premium:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 60px rgba(0,0,0,0.12);
}

/* IMAGE */
.course-image-premium {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.course-image-premium img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.course-card-premium:hover img {
    transform: scale(1.05);
}

.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.35), transparent);
}

/* CONTENT */
.course-content-premium {
    padding: 18px 18px 22px;
}

.course-content-premium h3 {
    margin: 0 0 10px;
    font-size: 18px;
}

/* META */
.meta-line {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

/* BADGE */
.badge-premium {
    display: inline-block;
    margin-top: 10px;
    background: #2E7D32;
    color: #fff;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .courses-grid-premium {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .courses-grid-premium {
        grid-template-columns: 1fr;
    }
}

/* BADGE RUOLO */
.badge-role {
    display: inline-block;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    margin: 8px 0;
}

.badge-role.docente {
    background: #2E7D32;
    color: #fff;
}

.badge-role.collab {
    background: #555;
    color: #fff;
}

/* SEPARAZIONE SEZIONI */
.section-title {
    margin: 50px 0 20px;
    font-size: 22px;
}
.courses-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* TABLET */
@media (max-width: 1024px) {
    .courses-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .courses-grid-3 {
        grid-template-columns: 1fr;
    }
}
.course-image-16x9 {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
}

.course-image-16x9 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.course-card {
    display: block;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease;
}

.course-card:hover {
    transform: translateY(-4px);
}

.course-content {
    padding: 15px;
}
.docenti-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.docente-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.docente-card-image img {
    width: 100%;
    border-radius: 12px;
}

.docente-excerpt {
    font-size: 14px;
    opacity: .8;
    margin: 10px 0;
}

/* MINI CORSI */
.mini-corso {
    font-size: 13px;
    margin-bottom: 6px;
}

.badge-role {
    font-size: 10px;
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
}

.badge-role.docente {
    background: #2E7D32;
    color: #fff;
}

.badge-role.collab {
    background: #666;
    color: #fff;
}

.btn-docente {
    display: inline-block;
    margin-top: 10px;
    color: #2E7D32;
    font-weight: 600;
}

/* MOBILE */
@media (max-width: 1024px) {
    .docenti-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .docenti-grid {
        grid-template-columns: 1fr;
    }
}



/* MODIFICHE MENU SECONDARIO TOPBAR */
/* DESIGN DEFINITIVO TOP BAR: SCROLL + SFUMATURA + ICONA A DESTRA */
@media (max-width: 959px) {
    
    /* 1. Reset allineamento per lo scorrimento */
    .topbar-col-right, 
    .top-enhanced-right, 
    .row-menu-inner {
        justify-content: flex-start !important;
        display: block !important;
        width: 100% !important;
        text-align: left !important;
    }

    /* 2. Contenitore dello scorrimento */
    .navbar-topmenu {
        display: block !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        position: relative !important;
    }

    /* 3. La lista dei contatti */
    ul#menu-menu-secondario-verde {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: max-content !important; 
        margin: 0 !important;
        padding: 12px 40px 12px 10px !important; 
    }

    ul#menu-menu-secondario-verde li {
        flex: 0 0 auto !important;
        margin-right: 5px !important;
    }

    /* 4. Reset Padre e Sfumatura a DESTRA */
    .top-menu.navbar {
        position: relative !important;
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .top-menu.navbar::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0; /* Ancorata a destra */
        left: auto; /* Impedisce la comparsa a sinistra */
        width: 80px;
        height: 100%;
        /* Gradiente direzionale: trasparente a sinistra, verde a destra */
        background: linear-gradient(90deg, rgba(46,125,50,0) 0%, rgba(46,125,50,1) 90%) !important;
        z-index: 10;
        pointer-events: none;
    }

    /* 5. Icona Freccia Semplice a destra */
    .top-menu.navbar::before {
        content: "〉"; 
        font-family: serif !important;
        position: absolute;
        right: 12px;
        left: auto;
        top: 50%;
        transform: translateY(-50%);
        color: #f9a825 !important;
        font-size: 20px;
        font-weight: bold;
        z-index: 20; 
        pointer-events: none;
        animation: hint-move 1.5s infinite;
    }
}

/* Animazione discreta della freccia */
@keyframes hint-move {
    0% { opacity: 0.4; transform: translateY(-50%) translateX(0); }
    50% { opacity: 1; transform: translateY(-50%) translateX(3px); }
    100% { opacity: 0.4; transform: translateY(-50%) translateX(0); }
}

/* Nasconde scrollbar */
.navbar-topmenu::-webkit-scrollbar { display: none; height: 0; }

/* Colore Hover Oro */
ul#menu-menu-secondario-verde li a:hover, 
ul#menu-menu-secondario-verde li a:active,
ul#menu-menu-secondario-verde li a:hover i {
    color: #f9a825 !important;
}
/* Layout Viaggio Mobile */
@media (max-width: 959px) {
    .viaggio-header {
        padding: 30px 15px !important;
    }
    .custom-h1 {
        font-size: 24px !important;
    }
    .sidebar-column {
        margin-top: 30px; /* Dà respiro quando la sidebar scende sotto il testo */
    }
    .viaggio-info-box {
        position: static !important; /* Rimuove lo sticky su mobile */
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
}

/* Stile icone/dettagli */
.viaggio-info-box p {
    margin-bottom: 15px;
    line-height: 1.4;
}



/* Container Navigazione Convenzioni Responsive */
.uncode-single-navigation .nav-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.uncode-single-navigation .nav-item {
    width: 100%;
    text-align: center;
}

.uncode-single-navigation .nav-item a {
    text-decoration: none;
    color: #1a1a1a;
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.uncode-single-navigation .nav-item .nav-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a1a;
    display: block;
}

.uncode-single-navigation .nav-item .nav-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888888;
    font-weight: 600;
}

/* Media Query Desktop (> 768px): 3 Colonne Allineate */
@media (min-width: 769px) {
    .uncode-single-navigation .nav-container {
        flex-direction: row;
        justify-content: space-between;
    }

    .uncode-single-navigation .nav-item.nav-prev {
        width: 40%;
        text-align: left;
    }
    .uncode-single-navigation .nav-item.nav-prev a {
        align-items: flex-start;
    }

    .uncode-single-navigation .nav-item.nav-grid {
        width: 20%;
        text-align: center;
    }

    .uncode-single-navigation .nav-item.nav-next {
        width: 40%;
        text-align: right;
    }
    .uncode-single-navigation .nav-item.nav-next a {
        align-items: flex-end;
    }

    .uncode-single-navigation .nav-item .nav-title {
        max-width: 280px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}