/* --- LIPTAKO ACTUALITÉS (HELIX ULTIMATE OVERRIDES) --- */

/* 1. Style the Blog Article Card */
.layout-blog .article {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    margin-bottom: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Keeps images neatly inside the rounded corners */
}

.layout-blog .article:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* 2. Style the Content Padding inside the Card */
.layout-blog .article-body {
    padding: 25px;
}

/* 3. Titles: Green by default, Gold on hover */
.layout-blog .article-header h2 a,
.layout-blog .article-title a {
    color: #16462c !important; /* Liptako Green */
    font-weight: 700;
    text-decoration: none;
    transition: color 0.3s ease;
}

.layout-blog .article-header h2 a:hover,
.layout-blog .article-title a:hover {
    color: #c0993c !important; /* Liptako Gold */
}

/* 4. Style the "Read More" Button */
.layout-blog .readmore .btn {
    background-color: #16462c !important;
    border-color: #16462c !important;
    color: #ffffff !important;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.layout-blog .readmore .btn:hover {
    background-color: #c0993c !important;
    border-color: #c0993c !important;
}

/* 5. Style the new RSS Module */
.mod-syndicate img {
    background-color: #c0993c;
    border-radius: 4px;
    padding: 3px;
    transition: transform 0.3s ease;
}
.mod-syndicate a:hover img {
    transform: scale(1.1);
}

/* --- LIPTAKO TEAM GRID STYLING --- */

.team-card {
    transition: transform 0.3s ease;
}

.team-card:hover {
    transform: translateY(-8px); /* Card floats up slightly */
}

/* Make images grayscale by default, colored on hover */
.team-img {
    filter: grayscale(100%);
    transition: all 0.4s ease;
}

.team-card:hover .team-img {
    filter: grayscale(0%);
    transform: scale(1.05); /* Slight zoom into the circle */
}

/* Change the border color to Gold on hover */
.team-card .team-img-wrapper {
    transition: border-color 0.4s ease;
}

.team-card:hover .team-img-wrapper {
    border-color: #c0993c !important; /* Liptako Gold */
}

/* Turn Name to Gold on hover */
.team-card .team-name a {
    transition: color 0.3s ease;
}

.team-card:hover .team-name a {
    color: #c0993c !important;
}

/* --- LIPTAKO VIDEO GALLERY STYLING --- */

.video-gallery-card {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.video-gallery-card:hover {
    transform: translateY(-5px);
}

.video-gallery-card img {
    transition: transform 0.5s ease;
}

.video-gallery-card:hover img {
    transform: scale(1.08); /* Slow zoom in on image */
}

/* Play Button Animation */
.play-btn-overlay .fa-play-circle {
    opacity: 0.8;
    transition: all 0.3s ease;
}

.video-gallery-card:hover .play-btn-overlay .fa-play-circle {
    color: #c0993c !important; /* Turns Gold */
    opacity: 1;
    transform: scale(1.1);
}

.video-gallery-card:hover .video-title {
    color: #c0993c !important; /* Turns Gold */
}

/* Match Pagination to Brand */
.liptako-pagination .pagination .page-link {
    color: #16462c;
}
.liptako-pagination .pagination .page-item.active .page-link {
    background-color: #16462c;
    border-color: #16462c;
    color: #ffffff;
}

/* --- LIPTAKO VIDEO THEATER STYLING --- */

/* Hover effect for the playlist items */
.video-thumb-item {
    transition: background-color 0.3s ease;
}
.video-thumb-item:hover {
    background-color: #222222 !important;
}
.video-thumb-item:hover .video-thumb-title {
    color: #c0993c !important; /* Liptako Gold */
}

/* Custom Webkit Scrollbar for the Playlist */
.liptako-playlist::-webkit-scrollbar {
    width: 6px;
}
.liptako-playlist::-webkit-scrollbar-track {
    background: #111111; 
}
.liptako-playlist::-webkit-scrollbar-thumb {
    background: #333333; 
    border-radius: 4px;
}
.liptako-playlist::-webkit-scrollbar-thumb:hover {
    background: #c0993c; 
}

/* Highlights the currently playing video in the playlist */
.video-thumb-item.active-video {
    background-color: #222222 !important;
    border-left: 4px solid #c0993c !important; /* Gold accent bar on the left */
}

.video-thumb-item.active-video .video-thumb-title {
    color: #c0993c !important; /* Turns the title text gold */
}

/* --- JEVENTS LIPTAKO BRANDING OVERRIDES --- */

/* 1. Monthly Calendar Header (Days of the week) */
.jev_daysnames {
    background-color: #16462c !important; /* Liptako Green */
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 0 !important;
}

/* 2. Highlight Today's Date */
td.ev_td_today {
    background-color: rgba(192, 153, 60, 0.15) !important; /* Light Gold Background */
    border: 2px solid #c0993c !important; /* Solid Gold Border */
}

/* 3. Event Links on the Calendar */
a.cal_titlelink {
    color: #16462c !important;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

a.cal_titlelink:hover {
    color: #c0993c !important; /* Gold on hover */
}

/* 4. The "Upcoming Events" Module Styling */
.modlet_jevents {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-top: 4px solid #16462c; /* Green accent bar at the top */
}

.modlet_jevents .jev_modle_event {
    border-bottom: 1px solid #eaeaea;
    padding: 10px 0;
    margin-bottom: 5px;
}

.modlet_jevents .jev_modle_event:last-child {
    border-bottom: none;
}

/* --- LIPTAKO ARTICLE CAROUSEL --- */

/* Carousel Navigation Buttons */
.liptako-slide-btn {
    background-color: #a0a0a0; /* Grey resting state matching reference */
    color: #ffffff;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: none;
}

/* Turns Liptako Green on Hover */
.liptako-slide-btn:hover {
    background-color: #16462c !important;
    color: #ffffff !important;
}

/* Article Image Hover Effect */
.liptako-article-card .carousel-img {
    transition: transform 0.4s ease;
}
.liptako-article-card:hover .carousel-img {
    transform: scale(1.05);
}

/* Article Title Hover Effect */
.liptako-hover-title {
    transition: color 0.2s ease;
}
.liptako-article-card:hover .liptako-hover-title {
    color: #c0993c !important; /* Liptako Gold */
}

/* --- LIPTAKO CONTACT PAGE & FORM STYLING (JOOMLA 5) --- */

/* 1. Style the Contact Information Block */
.contact-address, .contact-contactinfo {
    background-color: #f8f9fa; 
    padding: 25px 30px;
    border-radius: 8px;
    border-left: 5px solid #16462c !important; /* Liptako Green accent line */
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* Force Joomla 5 Icons to Liptako Gold */
.contact-address span[class^="icon-"], 
.contact-address .fa, 
.contact-address .fas,
dl.contact-address dt span {
    color: #c0993c !important; 
    font-size: 1.2rem;
    margin-right: 10px;
}

/* 2. Constrain the Form Width and Box it */
.com-contact__form {
    max-width: 750px; /* Stops inputs from stretching across the whole screen */
    background: #ffffff;
    padding: 35px;
    border-radius: 8px;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* Hide the repetitive "Contact Form" title and "Send an Email" text */
.com-contact__form legend,
.com-contact__form h3 {
    display: none !important;
}

/* 3. Modernize the Form Input Fields */
.com-contact__form .form-control {
    border-radius: 4px;
    border: 1px solid #cccccc;
    padding: 12px 15px;
    background-color: #fcfcfc;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

/* Add the Gold Glow when typing */
.com-contact__form .form-control:focus {
    border-color: #c0993c !important;
    background-color: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(192, 153, 60, 0.25) !important;
}

/* 4. Style the Submit Button */
.com-contact__form .btn-primary {
    background-color: #16462c !important; /* Liptako Green */
    border-color: #16462c !important;
    padding: 12px 35px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    margin-top: 15px;
}

.com-contact__form .btn-primary:hover {
    background-color: #c0993c !important; /* Turns Gold on hover */
    border-color: #c0993c !important;
}

/* --- PROGRAMMES CATEGORY GRID --- */

.programmes-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 8px;
    background-color: #ffffff;
}

/* Subtle lift effect on hover */
.programmes-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1) !important;
}

/* Smooth Image Zoom */
.programmes-card .programmes-img {
    transition: transform 0.5s ease;
}
.programmes-card:hover .programmes-img {
    transform: scale(1.05);
}

/* Liptako Green Title with Gold Hover */
.programmes-title {
    color: #16462c !important; /* Liptako Green */
    transition: color 0.3s ease;
}
.programmes-card:hover .programmes-title {
    color: #c0993c !important; /* Liptako Gold */
}

/* --- "SEE ALL" LINK POSITIONING --- */

.listblock-see-all {
    position: absolute;
    /* This negative top margin pulls the link UP out of the module content and into the header area */
    top: -42px; 
    right: 0;
    
    /* The white background is crucial—it hides the grey tail line beneath it */
    background-color: #ffffff; 
    padding-left: 12px;
    
    /* Typography matching the editorial look */
    color: #999999;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    z-index: 10;
}

.listblock-see-all:hover {
    color: #c0993c !important; /* Turns Liptako Gold on hover */
}

/* --- 3-COLUMN NEWS MODULE HEADERS (UPDATED) --- */

/* 1. Prevent the tail from spilling outside the column */
.sp-module {
    overflow: hidden; 
}

/* 2. The Liptako Green Box hugging the text */
.sp-module .sp-module-title {
    display: inline-block; /* Forces background to hug text instead of going full width */
    background-color: #16462c !important; /* Liptako Green */
    color: #ffffff !important;
    padding: 8px 15px !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    position: relative;
    /* Adds a little space between the text box and the tail */
    margin-right: 15px; 
}

/* 3. The Thin Tail extending to the right */
.sp-module .sp-module-title::after {
    content: "";
    position: absolute;
    top: 50%; /* Centers the line vertically with the text */
    left: 100%; /* Starts exactly at the right edge of the green box */
    width: 2000px; /* Makes the line super long to guarantee it reaches the end */
    height: 1px; /* Thickness of the tail */
    background-color: #cccccc; /* Light grey tail (matches your reference image) */
    
    /* NOTE: If you want the tail to also be green, change #cccccc to #16462c */
}

/* 4. Retain the hover effect for the small list items */
.listblock-wrapper .list-group-item:hover h6 {
    color: #c0993c !important; /* Turns Liptako Gold on hover */
    text-decoration: underline;
}



/* --- HEROGRID SPACING OVERRIDE --- */

/* 1. Tighten the main outer container */
.herogrid-wrapper {
    margin-left: -1px !important;
    margin-right: -1px !important;
}

/* 2. Force all columns in the grid to have tiny horizontal gaps */
.herogrid-wrapper .col-lg-6,
.herogrid-wrapper .col-6 {
    padding-left: 1px !important;
    padding-right: 1px !important;
}

/* 3. Tighten the nested row on the right side */
.herogrid-wrapper .col-lg-6 .row {
    margin-left: -1px !important;
    margin-right: -1px !important;
    margin-bottom: -1px !important;
}

/* 4. Force the precise vertical gap between the top and bottom small grids */
.herogrid-wrapper .col-6 {
    margin-bottom: 1px !important; 
}

/* Ensure the cards stretch perfectly within the new tight columns */
.herogrid-wrapper .card {
    width: 100%;
}

/* Core Overlay Gradient */
.herogrid-gradient {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
    transition: background 0.4s ease;
}

/* Image Setup for Zoom */
.herogrid-card .herogrid-img {
    transition: transform 0.5s ease;
}

/* Hover Effects */
.herogrid-card:hover .herogrid-img {
    transform: scale(1.1); /* Zooms the image slightly */
}

/* Darkens the gradient slightly on hover to make text pop more */
.herogrid-card:hover .herogrid-gradient {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0.1) 100%);
}

/* Badge and Read More link hover states */
.herogrid-wrapper a:hover {
    color: #f8f9fa !important;
}

/* --- LIPTAKO PUBLICATIONS LIBRARY STYLING --- */

.pub-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-left: 4px solid #16462c !important; /* Green accent on the left */
}

.pub-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
}

/* Book Cover Styling */
.pub-cover {
    box-shadow: 2px 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
    border: 1px solid #eaeaea;
}

.pub-card:hover .pub-cover {
    transform: scale(1.05);
}

/* Title Hover */
.pub-card .pub-title a {
    transition: color 0.3s ease;
}

.pub-card:hover .pub-title a {
    color: #c0993c !important; /* Turns Gold */
}

/* Download Button (PDF) */
.pub-download-btn {
    background-color: #16462c !important;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    border: none;
}

.pub-download-btn:hover {
    background-color: #c0993c !important;
    color: #ffffff !important;
}

/* Read More Button (Fallback if no PDF link) */
.pub-read-btn {
    background-color: #f1f1f1 !important;
    color: #16462c !important;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: 1px solid #cccccc;
}

.pub-read-btn:hover {
    background-color: #16462c !important;
    color: #ffffff !important;
    border-color: #16462c !important;
}

/* --- LIPTAKO NEWSLETTER MODULE --- */

.liptako-newsletter-box {
    background-color: #171717;
    border-radius: 8px;
    border-top: 4px solid #c0993c; /* Liptako Gold accent */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.liptako-newsletter-box .form-control {
    border: 1px solid #cccccc;
    box-shadow: none;
}

.liptako-newsletter-box .form-control:focus {
    border-color: #c0993c;
    box-shadow: 0 0 0 0.25rem rgba(192, 153, 60, 0.25);
}

.liptako-newsletter-box .btn-primary:hover {
    background-color: #c0993c !important;
    border-color: #c0993c !important;
}

/* =========================================================
   LIPTAKO MASTER HEADER & MENU STYLING
   ========================================================= */

/* --- 1. TOP BAR STYLING --- */
#sp-top-bar {
    background-color: #16462c !important; /* Liptako Green */
    color: #ffffff !important;
    padding: 8px 0;
    font-size: 0.85rem;
    border-bottom: 2px solid #c0993c; /* Gold accent line */
}

/* Style the links and icons in the top bar */
#sp-top-bar a,
#sp-top-bar span,
#sp-top-bar i,
#sp-top-bar .fas,
#sp-top-bar .far,
#sp-top-bar .fa {
    color: #c0993c !important; /* Liptako Gold */
    transition: color 0.3s ease;
    text-decoration: none;
    margin-right: 5px;
}

#sp-top-bar a:hover {
    color: #ffffff !important;
}

/* ==========================================
   CUSTOM HEADER LAYOUT
   ========================================== */

/* --- 1. BIG LOGO SECTION (CENTERED) --- */
#sp-big-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    background-color: #ffffff;
}

#sp-big-logo .logo-image {
    max-height: 85px; /* Adjust size as needed */
    margin: 0 auto;
    display: block;
}

/* --- 2. HEADER & MENU CONTAINER --- */
#sp-header {
    background-color: #ffffff;
    border-top: 1px solid #f0f0f0;
    border-bottom: 3px solid #16462c; /* Liptako Green anchor line */
    height: auto !important; /* CRITICAL: Allows header to grow vertically */
    min-height: 60px;
    padding: 0 15px;
}

#sp-header .row {
    display: flex;
    justify-content: center; /* Centers the menu block */
    align-items: center;
    position: relative;
    width: 100%;
}

/* --- 3. MENU WRAPPING (PREVENT BODY OVERLAP) --- */
#sp-menu {
    flex: 1;
    display: flex;
    justify-content: center;
}

.sp-megamenu-parent {
    display: flex !important;
    flex-wrap: wrap !important; /* CRITICAL: Forces new items to a new line instead of bleeding out */
    justify-content: center;
    margin: 0;
    padding: 0;
}

.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {
    color: #16462c !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    padding: 15px 12px !important; /* Uses padding instead of strict line-height for safer wrapping */
    line-height: 1.2 !important;
}

.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a {
    color: #c0993c !important;
}



/* ==========================================
 /* --- PREVENT HAMBURGER DEAD ZONE --- */
/* Hide the hamburger menu ONLY on screens larger than 1024px */
@media (min-width: 1025px) {
    #offcanvas-toggler {
        display: none !important;
    }
    .d-lg-block #offcanvas-toggler {
        display: none !important; /* Overrides Helix default classes */
    }
}

/* ==========================================
   2. MOBILE RESPONSIVENESS (< 1024px)
   ========================================== */
@media (max-width: 1024px) {
    /* Center the Top Bar Content */
    #sp-top-bar, 
    #sp-top-bar .row {
        justify-content: center !important;
        text-align: center;
    }
    #sp-top-bar ul {
        justify-content: center !important;
        flex-wrap: wrap;
    }

    #sp-big-logo .logo-image {
        max-height: 55px; /* Shrink logo for mobile screens */
    }
    
    #sp-header .row {
        justify-content: space-between;
    }

    /* Hide Desktop Menu */
    .sp-megamenu-parent {
        display: none !important;
    }

    /* FORCE HAMBURGER MENU TO SHOW */
    #offcanvas-toggler {
        display: flex !important;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1001;
    }
    .burger-icon > span {
        background-color: #16462c !important; 
    }

    /* Shift the search icon slightly to the left of the hamburger */
    #sp-header .mod-finder {
        right: 60px;
    }

    /* --- MOBILE STICKY HEADER SETTINGS --- */
    #sp-header.header-sticky {
        height: 65px !important;
        display: flex;
        align-items: center;
    }

}

/* --- STRICT IMAGE LOCK FOR ALL HERO/LIST GRIDS --- */

/* 1. Make the card a rigid, immobile container */
.herogrid-card {
    position: relative !important;
    overflow: hidden !important;
    /* If the card has no height, it will fall back to the inline min-height (e.g., 200px) */
}

/* 2. Detach the image so it cannot push the grid boundaries */
.herogrid-card .herogrid-img {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    
    /* This is the magic rule: it autofits and crops without distorting */
    object-fit: cover !important; 
    z-index: 0;
}

/* 3. Ensure the text and gradient overlay always sit on top of the image */
.herogrid-card .herogrid-gradient {
    position: absolute !important;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

/* --- STRICT TEXT LIMITS FOR HERO GRIDS --- */

/* 1. Limit the Article Title to exactly 2 lines */
.herogrid-card .card-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; /* Change this to 1 or 3 if you prefer */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
}

/* 2. Limit the Article Summary/Date text (if applicable) */
.herogrid-card .card-text {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important; 
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 0 !important;
}

/* --- 6. LANGUAGE SWITCHER STYLING --- */
.mod-languages {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.mod-languages ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px; /* Space between the flags */
}

.mod-languages ul li {
    margin: 0;
    padding: 0;
}

.mod-languages ul li a img,
.mod-languages ul li span.active img {
    border-radius: 2px; /* Slight rounding for a modern look */
    opacity: 0.7;
    transition: opacity 0.3s ease, transform 0.3s ease;
    height: 16px; /* Keeps the flags perfectly sized for the top bar */
    width: auto;
}

/* Brighten the active language and hover state */
.mod-languages ul li span.active img,
.mod-languages ul li a:hover img {
    opacity: 1;
    transform: scale(1.1); /* Slight zoom effect on hover */
}