/* ================================
    Header Styles
=============================== 
Version: 1.0.34
Theme Name: avoimetpuutarhat-teema
*/

/* ==============================================
    ROOT VARIABLES & GLOBAL STYLES
    - Defines the color palette and base styles.
    - Uses a clean, nature-inspired theme.
============================================== */
:root {
    --firstVolor: #007824;
    --secondColor: #0a402b;
    --thirdColor: #fffdf1;
    --white: #ffffff;
    --black: #000000;
    --primaryfont-1: 'Josefin Sans', Arial, sans-serif;
    --slant-width: 50px;
    --nav-height: 68px;
    --pecodex-primary-green: #007824;
    --pecodex-light-green: #e6f2e9;
    --pecodex-accent-green: #009d30;
    --pecodex-background-light-gray: #f7f9f8;
    --pecodex-widget-background: #ffffff;
    --pecodex-text-dark: #2d3748;
    --pecodex-text-light: #5a6474;
    --pecodex-border-color: #e2e8f0;
    --pecodex-card-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    --pecodex-hover-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    --pecodex-border-radius: 4px;
}

/* ==============================================
    BODY STYLES
============================================== */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa;
    font-family: 'Inter', sans-serif;
    background-color: var(--pecodex-background-light-gray);
    color: var(--pecodex-text-dark);
}

/* ==============================================
    MAIN NAVIGATION DESKTOP
    - The core of the angled design using CSS clip-path
    - This custom CSS is independent of the framework (Bootstrap/Tailwind)
============================================== */
.nav-container-desktop {
    height: var(--nav-height);
    overflow: visible;
    /* Allows the dropdown to overflow */
}

.nav-left-section {
    background-color: #f8f9fa;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant-width)) 100%, 0% 100%);
    padding-right: var(--slant-width);
}

.nav-center-section {
    background-color: #228B22;
    /* Main green color */
    clip-path: polygon(var(--slant-width) 0, 100% 0, calc(100% - var(--slant-width)) 100%, 0% 100%);
    margin-left: calc(-1 * var(--slant-width));
    padding-left: calc(var(--slant-width) + 1rem);
    padding-right: calc(var(--slant-width) + 1rem);
}

.nav-right-section {
    background-color: #006400;
    /* Darker green color */
    clip-path: polygon(var(--slant-width) 0, 100% 0, 100% 100%, 0% 100%);
    margin-left: calc(-1 * var(--slant-width));
    padding-left: calc(var(--slant-width) + 1.5rem);
}

/* ==============================================
    TOP BAR STYLES
============================================== */
.top-bar-icon {
    background-color: #006400;
    color: white;
    width: 44px;
    /* Reduced size */
    height: 44px;
    /* Reduced size */
}

.top-bar a,
.social-icons a {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.3s;
}

.top-bar a:hover,
.social-icons a:hover {
    color: #228B22;
}

/* ==============================================
    NAV CTA BUTTON STYLES
============================================== */
.nav-cta-button {
    background-color: rgb(40, 167, 69);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    gap: 0.5rem;
    transition: 0.3s;
    white-space: nowrap;
}

.nav-cta-button:hover {
    background-color: rgb(33, 136, 56);
    color: white;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

/* ==============================================
    NAVIGATION LINK STYLES
============================================== */
.nav-center-section .nav-link {
    color: white;
    padding-top: 0.5rem;
    /* Reduced padding */
    padding-bottom: 0.5rem;
    /* Reduced padding */
}

.nav-center-section .nav-link:hover {
    color: #e9ecef;
}

/* ==============================================
    DROPDOWN MENU STYLES - BOOTSTRAP COMPATIBLE
============================================== */

/* Hover dropdown logic for desktop screens */
@media (min-width: 992px) {

    /* lg breakpoint */
    .nav-center-section .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
        /* Adjust if you want space between nav link and dropdown */
        border-radius: 0.5rem;
        /* Rounded corners for the dropdown */
        border: none;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        /* Add shadow to dropdown */
        opacity: 1;
    }

    .nav-center-section .dropdown .dropdown-menu {
        /* Hide the dropdown by default and use a fade-in animation */
        display: none;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }

    .nav-center-section .dropdown:hover .dropdown-menu {
        /* Show on hover */
        display: block;
        opacity: 1;
    }
}

/* Default dropdown styles */
.dropdown-menu {
    margin-top: 0.5rem !important;
    /* Reduced margin */
    position: absolute !important;
    z-index: 1000000 !important;
    /* Much higher z-index */
    overflow: visible !important;
}

.nav-center-section .dropdown {
    position: relative;
    overflow: visible !important;
    /* Allow dropdown to overflow */
}

.nav-center-section .dropdown-menu {
    background-color: white;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .175);
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000000 !important;
    /* Much higher z-index */
    display: none;
    overflow: visible !important;
    /* Ensure content is not cut off */
}

.nav-center-section .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.nav-center-section .dropdown-item:hover {
    color: #1e2125;
    background-color: #e9ecef;
}

/* Enhanced dropdown styling */
.nav-center-section .dropdown-item i {
    vertical-align: middle;
}

.nav-center-section .dropdown-divider {
    margin: 0.25rem 0;
    border-color: #dee2e6;
}

/* Ensure dropdowns show on hover */
.nav-center-section .dropdown:hover .dropdown-menu {
    display: block;
}

/* Dropdown toggle arrow styling */
.nav-center-section .dropdown-toggle::after {
    margin-left: 0.5em;
    vertical-align: middle;
}

/* Force all parent containers to allow overflow for dropdowns */
.nav-center-section,
.nav-container-desktop,
header,
body {
    overflow: visible !important;
}

/* Additional dropdown positioning fixes */
.nav-center-section .dropdown-menu {
    transform: none !important;
    /* Prevent any transforms that might affect positioning */
    will-change: auto !important;
    /* Optimize for positioning changes */
}

/* ==============================================
    LEFT SECTION TEXT STYLES
============================================== */
.left-section-text {
    font-size: 0.8rem;
    /* Smaller text */
}

/* ==============================================
    SUB-HEADER NAVIGATION STYLES
============================================== */
/* Main navigation link styles for sub-header */
.main-nav-link {
    transition: all 0.3s ease;
    border-radius: 8px;
    margin: 0 2px;
}

.main-nav-link:hover {
    background-color: rgba(34, 139, 34, 0.1);
    transform: translateY(-1px);
}

.main-nav-link.active {
    /*background-color: rgba(34, 139, 34, 0.15);*/
    box-shadow: 0 2px 8px rgba(34, 139, 34, 0.2);
}

/* ==============================================
    RESPONSIVE HEADER STYLES
============================================== */
@media (max-width: 991.98px) {
    .nav-container-desktop {
        display: none;
    }

    .nav-left-section,
    .nav-center-section,
    .nav-right-section {
        clip-path: none;
        margin-left: 0;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 767.98px) {
    :root {
        --nav-height: 60px;
        --slant-width: 30px;
    }

    .top-bar-icon {
        width: 36px;
        height: 36px;
    }

    .left-section-text {
        font-size: 0.7rem;
    }
}

/* ==============================================
    HEADER UTILITY CLASSES
============================================== */
.header-shadow {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.header-sticky {
    position: sticky;
    top: 0;
    z-index: 9999;
}

/* Ensure all header elements are on top */
header {
    z-index: 9999;
    position: relative;
    overflow: visible !important;
    /* Ensure header doesn't clip dropdowns */
}

/* ==============================================
    LUCIDE ICON STYLES
============================================== */
.lucide {
    width: 1em;
    height: 1em;
}

/* ==============================================
    MOBILE NAVIGATION TOGGLE
============================================== */
.pecodex-mobile-nav-toggle {
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    cursor: pointer;
}

.pecodex-mobile-nav-links {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out;
    background-color: #f8f9fa;
}

.pecodex-mobile-nav-links.pecodex-is-active {
    max-height: 500px;
    /* Large enough to show all content */
}