/* BVH Header - Egyedi CSS Stílusok */

/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700;900&display=swap');

/* --- CSS Változók (egyszeri definíció) --- */
:root {
    --bvh-green: rgb(94, 108, 48);
    --bvh-green-dark: rgb(74, 88, 38);
    --bvh-green-light: rgb(114, 128, 68);
    --bvh-green-hover: rgba(94, 108, 48, 0.1);
}

/* === Teljes Gradient Rendszer (minden bg-linear-to-* variáció) === */
/* Bottom-Right (br) gradients */
.bg-linear-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops, transparent, transparent));
}

/* Top-Left (tl) gradients */
.bg-linear-to-tl {
    background-image: linear-gradient(to top left, var(--tw-gradient-stops, transparent, transparent));
}

/* Top-Right (tr) gradients */
.bg-linear-to-tr {
    background-image: linear-gradient(to top right, var(--tw-gradient-stops, transparent, transparent));
}

/* Bottom-Left (bl) gradients */
.bg-linear-to-bl {
    background-image: linear-gradient(to bottom left, var(--tw-gradient-stops, transparent, transparent));
}

/* Right (r) gradients */
.bg-linear-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops, transparent, transparent));
}

/* Left (l) gradients */
.bg-linear-to-l {
    background-image: linear-gradient(to left, var(--tw-gradient-stops, transparent, transparent));
}

/* Bottom (b) gradients */
.bg-linear-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops, transparent, transparent));
}

/* Top (t) gradients */
.bg-linear-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops, transparent, transparent));
}

/* Gradient from/via/to color stop system */
.from-gray-900 { --tw-gradient-from: #111827; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(17, 24, 39, 0)); }
.via-gray-800 { --tw-gradient-stops: var(--tw-gradient-from), #1f2937, var(--tw-gradient-to, rgba(31, 41, 55, 0)); }
.to-gray-900 { --tw-gradient-to: #111827; }
.from-gray-50 { --tw-gradient-from: #f9fafb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 250, 251, 0)); }
.to-white { --tw-gradient-to: #ffffff; }
.from-gray-700 { --tw-gradient-from: #374151; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(55, 65, 81, 0)); }
.to-gray-600 { --tw-gradient-to: #4b5563; }
.from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); }
.via-gray-300 { --tw-gradient-stops: var(--tw-gradient-from), #d1d5db, var(--tw-gradient-to, rgba(209, 213, 219, 0)); }
.to-transparent { --tw-gradient-to: transparent; }
.from-blue-600 { --tw-gradient-from: #2563eb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0)); }
.to-blue-500 { --tw-gradient-to: #3b82f6; }
.via-blue-300 { --tw-gradient-stops: var(--tw-gradient-from), #93c5fd, var(--tw-gradient-to, rgba(147, 197, 253, 0)); }
.from-amber-600 { --tw-gradient-from: #d97706; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(217, 119, 6, 0)); }
.to-amber-500 { --tw-gradient-to: #f59e0b; }
.via-amber-300 { --tw-gradient-stops: var(--tw-gradient-from), #fcd34d, var(--tw-gradient-to, rgba(252, 211, 77, 0)); }
.via-bvh-green { --tw-gradient-stops: var(--tw-gradient-from), var(--bvh-green), var(--tw-gradient-to, rgba(94, 108, 48, 0)); }
.from-purple-50 { --tw-gradient-from: #faf5ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(250, 245, 255, 0)); }
.to-indigo-50 { --tw-gradient-to: #eef2ff; }
.from-green-50 { --tw-gradient-from: #f0fdf4; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(240, 253, 244, 0)); }
.to-emerald-50 { --tw-gradient-to: #ecfdf5; }
.from-black\/60 { --tw-gradient-from: rgba(0, 0, 0, 0.6); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); }
.via-black\/20 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0, 0, 0, 0.2), var(--tw-gradient-to, rgba(0, 0, 0, 0)); }
.from-black\/70 { --tw-gradient-from: rgba(0, 0, 0, 0.7); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); }
.via-black\/30 { --tw-gradient-stops: var(--tw-gradient-from), rgba(0, 0, 0, 0.3), var(--tw-gradient-to, rgba(0, 0, 0, 0)); }
.from-purple-50 { --tw-gradient-from: #faf5ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(250, 245, 255, 0)); }
.to-indigo-50 { --tw-gradient-to: #eef2ff; }
.from-blue-50 { --tw-gradient-from: #eff6ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0)); }
.to-cyan-50 { --tw-gradient-to: #ecfeff; }
.from-indigo-50 { --tw-gradient-from: #eef2ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(238, 242, 255, 0)); }
.to-purple-50 { --tw-gradient-to: #faf5ff; }
.from-blue-50 { --tw-gradient-from: #eff6ff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0)); }
.to-indigo-50 { --tw-gradient-to: #eef2ff; }
.from-gray-50 { --tw-gradient-from: #f9fafb; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 250, 251, 0)); }
.to-gray-100 { --tw-gradient-to: #f3f4f6; }
.from-purple-600 { --tw-gradient-from: #9333ea; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(147, 51, 234, 0)); }
.to-indigo-600 { --tw-gradient-to: #4f46e5; }
.from-purple-900 { --tw-gradient-from: #581c87; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(88, 28, 135, 0)); }
.to-indigo-900 { --tw-gradient-to: #312e81; }

/* BVH-specific gradients */
.from-bvh-green { --tw-gradient-from: var(--bvh-green); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(94, 108, 48, 0)); }
.to-bvh-green-dark { --tw-gradient-to: var(--bvh-green-dark); }

/* Enhanced gradient cards and headers */
.bg-linear-to-br.from-bvh-green.to-bvh-green-dark,
.bg-linear-to-r.from-bvh-green.to-bvh-green-dark {
    background: linear-gradient(135deg, var(--bvh-green) 0%, var(--bvh-green-dark) 100%);
    position: relative;
    z-index: 20;
}

/* Ensure text is readable on gradient backgrounds */
.bg-linear-to-br.from-bvh-green.to-bvh-green-dark *,
.bg-linear-to-r.from-bvh-green.to-bvh-green-dark * {
    position: relative;
    z-index: 21;
}

/* Alapok */
body {
    font-family: 'Roboto', 'Rajdhani', sans-serif;
    min-height: 100vh;
}

/* Ensure default body text is dark for better contrast (overridable by components) */
body { color: #374151; }

.font-technical {
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.5px;
}

/* Utility / Brand classes (egyszer definiált) */
.bg-bvh-green { background-color: var(--bvh-green); }
.text-bvh-green { color: var(--bvh-green); }
.border-bvh-green { border-color: var(--bvh-green); }
.from-bvh-green { --tw-gradient-from: var(--bvh-green); }
.to-bvh-green-dark { --tw-gradient-to: var(--bvh-green-dark); }

/* Mobile menu */
.mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.mobile-menu.active { max-height: 1000px; transition: max-height 0.5s ease-in; }

/* Navigation */
.nav-item { position: relative; }
.nav-link {
    position: relative;
    padding: 0.75rem 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0.625rem;
    font-size: 1rem;
    font-weight: 500;
}
.nav-link:hover { background-color: rgba(255,255,255,0.15); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.nav-link.active { background-color: var(--bvh-green-dark); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; top: 100%; left: 0; min-width: 260px;
    background: white; box-shadow: 0 20px 40px rgba(0,0,0,0.12);
    border-radius: 0.75rem; opacity: 0; visibility: hidden; transform: translateY(-15px);
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1); z-index: 1000; margin-top: 0.75rem; overflow: hidden;
}
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-item {
    padding: 0.875rem 1.5rem; color: #374151; transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    display: block; border-bottom: 1px solid #f3f4f6; font-size: 0.9375rem; position: relative;
}
.dropdown-item:last-child { border-bottom: none; border-radius: 0 0 0.75rem 0.75rem; }
.dropdown-item:first-child { border-radius: 0.75rem 0.75rem 0 0; }
.dropdown-item:hover { background: linear-gradient(90deg, var(--bvh-green-hover) 0%, transparent 100%); color: var(--bvh-green); padding-left: 2rem; border-left: 3px solid var(--bvh-green); }
.dropdown-subitem { padding-left: 2.5rem; font-size: 0.875rem; background-color: #f9fafb; }
.dropdown-subitem:hover { background: linear-gradient(90deg, var(--bvh-green-hover) 0%, #f9fafb 100%); padding-left: 3rem; }
.dropdown-icon { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.dropdown:hover .dropdown-icon { transform: rotate(180deg); }

/* Mobile dropdown content */
.mobile-dropdown-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.mobile-dropdown-content.active { max-height: 600px; }

/* Responsive tweak */
@media (max-width: 1279px) { .nav-link { font-size: 0.9375rem; padding: 0.625rem 1rem; } }

/* Misc */
html { scroll-behavior: smooth; }
a[href="kapcsolat.php"].bg-white { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
a[href="kapcsolat.php"].bg-white:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(94,108,48,0.2); }

.line-clamp-3 {
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis; min-height: 4.5rem;
}

/* --- Page / Card / UI components (egyszeri, egyesítve) --- */
.bvh-gradient { background: linear-gradient(135deg, var(--bvh-green) 0%, var(--bvh-green-light) 100%); }

/* Modern összecsukható szűrő panel */
.filter-panel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.filter-panel:not(.hidden) {
    max-height: 2000px;
    opacity: 1;
}

/* Accessibility / anchor offset */
[id] {
    scroll-margin-top: 5.5rem; /* default offset for header */
}

/* Small screens: mobilbarát layout */
@media (max-width: 640px) {
    [id] { scroll-margin-top: 6rem; }

    /* Ensure doc-card contents wrap and badges don't overflow */
    .doc-card .file-icon { width: 40px; height: 40px; font-size: 20px; }
    .doc-card .badge { font-size: 9px; }
}

/* Fix: on very small screens disable sticky behaviour for the filter so it doesn't overlay list */
/* Prevent mobile header/menu from overlaying page content: make header non-sticky on small screens
     so the mobile menu will push the page content instead of covering it. */
@media (max-width: 768px) {
    header.sticky, header.sticky.top-0 {
        position: static !important;
    }

    /* Ensure mobile menu flows and can expand without absolute overlay */
    /* Keep the default collapsed behaviour; only expand when JS toggles the "active" class. */
    #mobile-menu, .mobile-menu {
        position: relative;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease-in-out;
    }

    /* When the mobile menu is toggled open (has .active), allow it to expand and flow in the document. */
    #mobile-menu.active, .mobile-menu.active {
        position: relative !important;
        max-height: 1000px !important;
        overflow: visible !important;
    }

    /* Keep header visual stacking safe */
    header { z-index: 2; }
}

/* If the sticky filter is tall on medium screens, give a slightly larger offset */
@media (min-width: 641px) and (max-width: 1024px) {
    [id] { scroll-margin-top: 7.5rem; }
}

/* Document cards styling */
.doc-card {
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1); border: 2px solid transparent; background: white;
}
.doc-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(94,108,48,0.3); border-color: var(--bvh-green); }
.file-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 24px; border-radius: 12px; transition: all 0.3s ease; }
.doc-card:hover .file-icon { transform: scale(1.1); }
.badge { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }

.category-title { position: relative; padding-left: 1rem; }
.category-title::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bvh-green); border-radius: 2px; }
.year-badge { background: var(--bvh-green); color: white; padding: 0.5rem 1rem; border-radius: 8px; font-weight: 600; display: inline-block; }

/* Buttons & inputs */
.btn { transition: all 0.2s ease; font-weight: 500; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--bvh-green); color: white; }
.btn-primary:hover { background: var(--bvh-green-dark); }

input, select { transition: all 0.2s ease; font-family: 'Roboto', sans-serif; }
input:focus, select:focus { outline: none; border-color: var(--bvh-green); box-shadow: 0 0 0 3px rgba(94,108,48,0.1); }

@media (min-width: 768px) {
    .page-header {
        min-height: 140px;
    }
    
    .page-header h1 {
        font-size: 2rem;
    }
    
    .page-header > .max-w-7xl > .flex {
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .page-header {
        min-height: 160px;
    }
    
    .page-header h1 {
        font-size: 2.25rem;
    }
    
    /* Enhanced spacing for larger screens */
    .page-header > .max-w-7xl > .flex {
        gap: 3rem;
    }
}

.from-bvh-green { --tw-gradient-from: var(--bvh-green); --tw-gradient-to: rgba(94,108,48,0); }

/* Pagination and stats-badge improvements */

/* Pagination: avoid overflowing the main container on small screens
     Allow horizontal scrolling if the control is wider than the viewport */
nav[role="navigation"] {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    nav[role="navigation"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 0.75rem; /* small horizontal padding so controls don't touch edges */
    }

    nav[role="navigation"] .flex { display: inline-flex; white-space: nowrap; }
    nav[role="navigation"] .flex > * { flex: 0 0 auto; }

    /* Make the page indicator compact and prevent it pushing layout */
    nav[role="navigation"] .text-xl { font-size: 1rem; }
    nav[role="navigation"] .px-6 { padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* Stats badge: cleaner card-like counter */
.stats-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.12);
    color: white;
    backdrop-filter: blur(6px);
}
.stats-badge > .text-2xl {
    font-size: 1.35rem;
    line-height: 1;
    font-weight: 700;
}
.stats-badge > .text-sm {
    font-size: 0.75rem;
    opacity: 0.95;
    margin-top: 0.15rem;
    text-transform: lowercase;
}

/* Desktop: keep badge visually separated in header */
@media (min-width: 1025px) {
    .stats-badge { margin-left: 1rem; }
}

/* Mobile: make stats-badge full width under title and right-aligned content */
@media (max-width: 640px) {
    .page-header > .max-w-7xl .flex { align-items: center; }
    .stats-badge { width: 100%; display: flex; flex-direction: row; justify-content: flex-end; gap: 0.5rem; padding: 0.5rem 0.75rem; }
    .stats-badge > .text-2xl { font-size: 1.1rem; }
    .stats-badge > .text-sm { font-size: 0.75rem; }
}

/* CTA styling in page header (used on szolgaltatasok.php) */
.header-cta { 
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-weight: 500;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.header-cta:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (max-width: 640px) {
    .header-cta { 
        display: block; 
        width: 100%; 
        box-sizing: border-box; 
        text-align: center; 
        margin-top: 1.25rem;
        background: white;
        color: var(--bvh-green);
        border: none;
        font-weight: 600;
    }
    .header-cta:hover {
        background: rgba(255, 255, 255, 0.95);
        color: var(--bvh-green-dark);
    }
    .page-header h1 { font-size: 1.75rem; }
}

/* Questions section styling */
.page-header + section.py-16 { 
    position: relative;
    margin-top: -1rem;
    padding-top: 3rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 24px 24px 0 0;
}

/* Contact CTA section styling */
section.contact-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1a2234 0%, #2a364f 100%);
    padding: 6rem 0;
}

.contact-cta::before,
.contact-cta::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.contact-cta::before { top: 0; }
.contact-cta::after { bottom: 0; }

.contact-cta .decorative-circle {
    position: absolute;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    pointer-events: none;
}

.contact-cta .decorative-circle:nth-child(1) {
    top: 2rem;
    right: 2rem;
    width: 8rem;
    height: 8rem;
    transform: rotate(45deg);
}

.contact-cta .decorative-circle:nth-child(2) {
    bottom: 2rem;
    left: 2rem;
    width: 6rem;
    height: 6rem;
}

.contact-cta .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 0.875rem 2rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.contact-cta .cta-button:hover {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.3);
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.contact-cta .cta-button svg {
    transition: transform 0.3s ease;
}

.contact-cta .cta-button:hover svg {
    transform: translateX(4px);
}

/* Ensure the header visually separates from the next section (avoid visual overlap) */
.page-header + section { margin-top: 1rem; }

/* Business sections: ensure they're visible and prominent */
section .bg-white { 
    position: relative; 
}

/* Enhanced business unit headers */
.bg-linear-to-r.from-bvh-green.to-bvh-green-dark {
    background: linear-gradient(135deg, var(--bvh-green) 0%, var(--bvh-green-dark) 100%);
    border-bottom: 3px solid var(--bvh-green);
    padding: 1.5rem 2rem;
    position: relative;
}

.bg-linear-to-r.from-bvh-green.to-bvh-green-dark h2 {
    font-size: 1.75rem;
    letter-spacing: 0.5px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bg-linear-to-r.from-bvh-green.to-bvh-green-dark h2 svg {
    width: 2rem;
    height: 2rem;
    opacity: 0.9;
}

/* Business unit card enhancements */
.bg-white.rounded-xl {
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.bg-white.rounded-xl:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-color: var(--bvh-green);
}

/* Footer safety: ensure footer sits above any accidental overlaps and has correct background */
footer { 
    position: relative; 
    background: linear-gradient(135deg, #1a2234 0%, #2a364f 100%); 
}