/*
Theme Name: ENSET Theme
Theme URI: https://www.enset-media.ac.ma
Template: hello-elementor
Author: ENSET Mohammedia
Description: Thème enfant développé pour le site officiel de l’ENSET Mohammedia. Ce thème permet la création de pages modernes, accessibles et adaptées aux besoins institutionnels de l’établissement.
Version: 1.0.1765353601
Updated: 2025-12-10 08:00:01

*/


/* --- Custom Styling for Single Posts --- */
.single-article-header {
    background-image: url('http://enset.local/wp-content/uploads/2026/01/enset-mohammedia-bg-image-1.jpg');
    position: relative;
    min-height: 350px;
    display: flex; 
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    padding: 40px 20px;
    border-radius: 0 0 10% 10%;
    margin-bottom: 50px;
    z-index: 0;
}
.single-article-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0 0 10% 10%;
    background-color: #00406ee8;
}
.single-article-header .header-content-inner {
    position: relative;
    max-width: 900px;
    width: 100%;
}

/* Text styles */
.single-article-header .entry-title {
    color: #ffffff;
    font-size: 35px; 
    margin-bottom: 15px;
    font-weight: 800;
}
.single-article-header .post-meta a{

    color: #ffffff;
}
.single-article-header .post-meta p {
    font-size: 1.1em;
    font-weight: 500;

}
.single-article-header .post-meta .category-tags {
   margin-left: 10px;
}

.article-image img{
    width: 450px!important;
    max-height: unset!important;
    border-radius: 10px;
}
.article-image{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;

}
.single-article .page-content{
    position: relative;
    max-width:1200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    margin-top: -100px; 
    padding: 40px;
    background-color: #ffffff;
    border-radius: 10px ;
    z-index: 1;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);

}
.single-post main{
    max-width: 100% !important; 
    width: 100% !important;
}

/* --- Navigation Container (Parent) --- */
.article-navigation-container {
    display: grid;
    grid-template-columns: 1fr 50px 1fr;
    align-items: center; 
    padding: 30px 0;
    margin-top: 50px;
    border-top: 1px solid #eee;
}
.article-navigation-container .nav-previous {
    grid-column: 1 / 2;
    text-align: left;
}
.article-navigation-container .nav-next {
    grid-column: 3 / 4;
    text-align: right;
}
.article-navigation-container .nav-center-icon {
    grid-column: 2 / 3;
    justify-self: center; 
    align-self: center;
    font-size: 24px;
    color: #a0a0a0;
    z-index: 2;
}
.article-navigation-container a {
    color: #9d2235!important;
    text-decoration: none;
    font-weight: 600;
}
.article-navigation-container a:hover {
    color: #00345A;
    text-decoration: underline;
}

/*Styling the formation archive cards*/
 
.formations-cards .eael-entry-thumbnail {
    width: 50px;
}
.formations-cards .eael-post-elements-readmore-btn{
    width: fit-content;
}
.eael-grid-post {
    position: relative !important;
}
.enset-acc-badge {
    position: absolute !important;
    top: 15px;
    right: 15px;
    background-color: #059669 !important; 
    color: #ffffff !important;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    z-index: 50;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.formations-cards .eael-entry-media{ 
    margin-top: -30px;
}
.formations-cards .eael-grid-post .eael-entry-header-after{
    margin-top: 10px;
}
.formations-cards .meta-cat-icon { display: none; }
.formations-cards .eael-entry-wrapper { display: grid !important; gap: 10px; }
.formations-cards .eael-entry-content { order: 3 !important; }
.dept-label{
    font-weight:700; color:#868888; margin-right:5px;font-size: 13px;
}
/* Layout spécifique à la page formation Singular */
.formation-main{
    max-width: 100%!important;
    padding-inline-end: 0px!important;
    padding-inline-start: 0px!important;
}
.formation-header, .archive-header {
    background-color: #EEF6FE;
    border-bottom: 3px solid #EEF6FE;
    border-radius: 0 0 10% 10%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 20px; 
    text-align: center;
}
.formation-grid-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
}

.enset-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.formation-header h1 { 
    color: #212529!important; margin: 0 0 10px;font-size: 35px; font-family: 'Inter';
    max-width: 950px;
}
@media (max-width: 767px) {
   .formation-header h1 { font-size: 25px;}
}
.badge-accreditation-single { background: #28a745; color: #fff; padding: 4px 12px; border-radius: 4px; font-weight: bold; font-size: 13px; }
 .enset-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    margin-top: -35px;
    margin-bottom: 50px;
    border: 1px solid #EEF6FE;
}
.enset-grid-item { display: flex; align-items: center; gap: 12px; }
.enset-grid-icon { font-size: 20px; background: #9d2235; min-width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #eee; color:#fff }
.enset-grid-label { font-size: 13px; text-transform: uppercase; color: #999; display: block; font-weight: bold; }
.enset-grid-value { font-size: 14px; color: #02406E; font-weight: 600; }
.enset-content-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 768px) { .enset-content-grid { grid-template-columns: 1fr 1fr; } }
.enset-formation-poster-img {
    width: 100%;
    height: 550px;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: block;
    border: 1px solid #ddd;
    image-rendering: -webkit-optimize-contrast;
    cursor: zoom-in;
}
@media (max-width: 767px) {
    .enset-formation-poster-img {
    height: auto;
    }
}
.enset-acc-item { border: 1px solid #ddd; border-radius: 5px; margin-bottom: 8px; }
.enset-acc-trigger { width: 100%; padding: 15px; background: #EEF6FE; border: 0; cursor: pointer; display: flex; justify-content: space-between; font-weight: 600; color: #02406E; }
.enset-acc-panel { max-height: 0; overflow: hidden; transition: 0.3s; background: #fff; }
.enset-acc-item.active .enset-acc-panel { max-height: 1500px; border-top: 1px solid #eee; }
.enset-acc-inner { padding: 15px; line-height: 1.6; }
.enset-acc-inner p{
    font-weight: 600;
    margin-top: 11px;
}
/* Sidebar & Buttons */
.enset-sticky-card { padding: 20px; border: 1px solid #eee; border-radius: 8px; background: #fff; }
.enset-doc-link {background-color: #EEF6FE; display: block; padding: 10px; border: 1px solid #ddd; color: #02406E; text-decoration: none; text-align: center; border-radius: 4px; margin-bottom: 8px; font-weight: 500; }
.enset-doc-link:hover { background: #02406E; color: #fff; }

.container-formation{
    margin-bottom: 80px;
}
.enset-main-content h3{
    font-size: 24px;
}
.enset-accordion p{
    margin-bottom: 0px;
}
.enset-accordion ul{
    margin-bottom: 10px;
}

/* Ensure the video doesn't overlap the mobile menu */
.enset-video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin: 20px 0;
    border-radius: 8px;
    z-index: 1;
}

.enset-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
 
.formation-disclaimer {
    font-size: 0.85rem;
    font-style: italic;
    color: #666;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 3px solid #00447c;
    line-height: 1.4;
}

.eael-entry-meta .post-meta-categories li {
     white-space: normal !important; 
}
.formations-cards .post-meta-categories {
    flex-flow: unset!important;
}
.eael-entry-meta .post-meta-categories li i{
    display: none;
}
@media (max-width: 767px) {
    .formations-cards .eael-grid-post-holder .eael-entry-wrapper{
        height: 250px!important;
    }
}
 
.formations-grid, .article-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    gap: 25px;
    margin-bottom: 50px;
    margin-top: -20px;
    width: 100%; 
}
.formation-main .formations-grid{
    margin-top: 20px;

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

/* Mobile (1 column) */
@media (max-width: 767px) {
    .formations-grid {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 0; 
    }
}

/* Card Styling */
.archive-formation-card{
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%; 
    background-color: #fff;
}

.archive-article-card {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 100%; 
    background-color: #F8F9FA;
    box-shadow: 0px 5px 5px 0px rgba(221.95625, 221.95625, 221.95625, 0.38);
}
.archive-article-card .article-body{
    padding: 20px;
}
.archive-article-card .meta-date{
    font-size: 12px;
    font-weight: 500;
    color:#6b7280;
}
.archive-article-card .meta-date i{
    font-size: 14px;
    margin-right: 5px;


}
.article-grid .article-thumbnail img{
    height: 250px;
    object-fit: cover;
    border-radius:10px 10px 0 0;
}
.article-grid .btn-details{
    margin-top: 10px;
    background-color: #02010100;
    padding: 0px 0px 0px 0px;
    color: #9d2235!important;
    font-size: 15px;
}

/* Badge & Icon Layout */
.card-header {
    display: flex;
    justify-content: end;
    align-items: flex-start;
    margin-bottom: 20px;
}

.card-icon {
    background: #305b8b;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-footer .btn-details{
    margin-top: 10px;
}
.badge-accreditee {
    background-color: #059669;
    color: white;
    font-size: 10px;
    font-weight: 800;
     padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     margin-top: -30px;

}

/* Text & Titles */
.card-title {
    font-size: 16px;
    margin-bottom: 15px;
}
.card-title a{
    color: #00345a!important;
    font-weight:700;
 }

/* Button Styling */
.btn-details {
    display: inline-block;
    background-color: #305b8b;
    color: white !important;
    padding: 8px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}
/* --- 1. MAIN SLIDER CONTAINER --- */
.enset-post-slider .post-items {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory !important;
    gap: 0;
    padding: 20px 0 40px !important;
    margin: 0 !important;
    align-items: stretch; /* Forces all cards to equal height */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Hide scrollbar for Chrome/Safari */
.enset-post-slider .post-items::-webkit-scrollbar { 
    display: none; 
}

/* --- 2. SLIDE COLUMNS (THE CARDS) --- */
.enset-post-slider .post-items > div[class*="col-"] {
    flex: 0 0 33.333% !important; /* Default 3 columns */
    min-width: 33.333% !important;
    scroll-snap-align: start !important;
    padding: 0 10px;
    display: flex !important;
}

/* Ensure inner card content fills the column height */
.enset-post-slider .post-items > div[class*="col-"] > * {
    height: 100% !important;
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}

/* Specific Image Styling for the Slider */
.enset-post-slider img { 
    height: 230px !important; 
    object-fit: cover; 
    border-radius: 10px 10px 0 0; 
}

/* --- 3. NAVIGATION: ARROWS --- */
.enset-arrows .enset-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px; 
    height: 42px;
    background: #fff;
    color: #2c5e97;
    border: none; 
    border-radius: 50%;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    cursor: pointer; 
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}
.enset-arrows .prev { left: -20px;top: -250px; }
.enset-arrows .next { right: -20px;top: -250px;  }

/* --- 4. NAVIGATION: DOTS --- */
.slider-dots { 
    display: flex; 
    justify-content: center; 
    gap: 10px; 
    margin-top: -15px; 
}

.dot { 
    width: 8px; 
    height: 8px; 
    background: #d1d1d1; 
    border-radius: 50%; 
    cursor: pointer; 
    transition: 0.3s; 
}

.dot.active { 
    background: #8F8F8F; 
    transform: scale(1.3); 
}

/* --- 5. RESPONSIVE BREAKPOINTS --- */
@media (max-width: 1024px) {
    .enset-post-slider .post-items > div[class*="col-"] { 
        flex: 0 0 50% !important; 
        min-width: 50% !important; 
    }
}

@media (max-width: 767px) {
    .enset-post-slider .post-items > div[class*="col-"] { 
        flex: 0 0 100% !important; 
        min-width: 85% !important; 
        padding:0px;
    }
    /* Move arrows slightly inward on mobile or hide them */
    .enset-arrows .prev { left: 5px;top: unset; }
    .enset-arrows .next { right: 5px;top: unset;  }
    .enset-post-slider .post-items {
        gap:10px;
}
}
.post-items .btn-wraper i{
    margin-left:5px;
}
.slide-col{
    min-height: 250px!important;
}

/*Remove the link from the formations cards*/
.page-id-2366 .eael-entry-meta a{
    pointer-events: none; 
    cursor: default;
}