/* Force the vertical scrollbar to always stay, preventing width-jumping */
html {
    overflow-y: scroll;
    scroll-behavior: smooth;
}

/* Absolute lock on horizontal expansion */
html, body {
    overflow-x: hidden !important;
    width: 100%;
    margin: 0;
    padding: 0;
}
/* --- HERO BACKGROUND --- */
.hero-fixed-bg {
    background-image: url('/images/hero_image.png');
    background-size: cover;
    background-position: center;
}
/* This specific query only targets iOS Safari. It forces the image to scroll normally, fixing the massive zoom bug. */
@supports (-webkit-touch-callout: none) {
    .hero-fixed-bg {
        background-attachment: scroll !important;
    }
}

@media (max-width: 370px) {
    .brand-text-adaptive

{
    display: none !important;
}

}
/* Custom utility for text smaller than Bootstrap's .small */
.text-xs {
    font-size: 0.75rem !important; /* ~12px */
}

.text-xxs {
    font-size: 0.65rem !important; /* ~10px */
}

/* --- SECTION IMAGES --- */
.img-about {
    content: url('/images/about/about_old.jpg');
}

.img-svc-grain {
    content: url('/images/services/services_grain.jpg');
}

.img-svc-cattle {
    content: url('/images/services/services_cattle.jpg');
}

.img-svc-loading {
    content: url('/images/services/services_grainloading.jpg');
}

.img-svc-cargo {
    content: url('/images/services/services_gencargo.jpg');
}

.img-svc-train {
    content: url('/images/services/services_train.jpg');
}

/* --- TEAM IMAGES --- */
.img-team-kuri {
    content: url('/images/client-images/kuri-albert-resize.jpg');
}

.img-team-kurine {
    content: url('/images/client-images/kurine-polgar-dora-resize.jpg');
}

.img-team-czerny {
    content: url('/images/client-images/czerny-adrian-resize.jpg');
}

.img-team-steczina {
    content: url('/images/client-images/steczina-mate-resize.jpg');
}

.img-team-rafael {
    content: url('/images/client-images/rafael-angela-resize.jpg');
}

.img-team-halaszi {
    content: url('/images/client-images/halaszi-endre-resize.jpg');
}

.img-team-turcsanyi {
    content: url('/images/client-images/turcsanyi-eva-resize.jpg');
}

.img-team-kitti {
    content: url('/images/client-images/kuri-kitti-resize.jpg');
}

.img-team-czako {
    content: url('/images/client-images/czako-vanda-resize.jpg');
}

.img-team-group {
    content: url('/images/client-images/csapat.jpg');
}

/* --- PARTNER LOGOS --- */
.img-partner-dofer {
    content: url('/images/partners/partner_dofer.jpg');
}

.img-partner-pacorini {
    content: url('/images/partners/partner_pacorini.jpg');
}

.img-partner-pannobio {
    content: url('/images/partners/partner_pannobio.jpg');
}

.img-partner-hungrana {
    content: url('/images/partners/partner_hungrana.png');
}

.img-partner-agrimill {
    content: url('/images/partners/partner_agrimill.png');
}

/* Navigation Menu Styling */
.navbar {
    background-color: #ffffff !important;
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.navbar-brand {
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #212529 !important;
}

.brand-green {
    color: #198754 !important;
}

.overhanging-logo {
    height: 80px;
    /* Pull the image up*/
    margin-top: -15px;
    /* Let the image hang down*/
    margin-bottom: -15px;
    /* Keep it visually above the content below it */
    position: relative;
    z-index: 1050;
}

.brand-text-nudge {
    position: relative;
    top: 5px;
    left: 5px;
    outline: none !important;
}
.nav-link {
    color: #495057 !important;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.5rem 1rem !important;
}

    .nav-link:hover, .navbar-brand:hover {
        color: #198754 !important;
        outline: none !important;
    }

/* Contact Button in Navbar */
.nav-contact-btn {
    border: 1px solid #dee2e6;
    padding: 0.5rem 1.5rem !important;
    margin-left: 1rem;
}

[data-aos] {
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: transform, opacity;
}


/* The main hero container */
.hero-fixed-bg {
    clip-path: inset(0 0 0 0);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

    /* The elegant gradient overlay */
    .hero-fixed-bg::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Dark gradient on the left, fading completely out by the right side */
        background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
        z-index: 1;
    }

/* Subtle text shadow for maximum crispness */
.hero-text-shadow {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
}


/* The highlight effect (doesn't fight with AOS) */
/*@keyframes highlightPulse {
    0% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.08);
        box-shadow: 0 0 15px rgb(0, 0, 0);
    }

    100% {
        filter: brightness(1);
    }
}*/

@media (min-width: 768px) {
    .section-highlight {
        animation: highlightPulse 0.8s ease-in-out;
    }

    #about, #services, #contact, #team {
        scroll-margin-top: 100px;
    }
}

/* Scroll to Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 45px;
    height: 45px;
    background-color: #198754;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 999;
    /* Starts invisible */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    text-decoration: none;
}

    .scroll-to-top:hover {
        /* Slightly darker green on hover */
        background-color: #146c43;
        color: white;
        /* Gentle lift effect */
        transform: translateY(-3px);
    }

    /* Class added by JS when user scrolls down */
    .scroll-to-top.show {
        opacity: 1;
        visibility: visible;
    }

@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 15px;
        right: 15px;
        width: 38px;
        height: 38px;
        /* Scales down the chevron icon to match */
        font-size: 1rem;
    }
}

/* Custom responsive sizing for employee cards */
.employee-img {
    height: 250px;
    object-fit: contain;
    /* Focuses slightly below the top edge to catch faces, not empty headroom */
    object-position: center 15%;
}

/* Mobile-Specific Adjustment */
@media (max-width: 768px) {
    .employee-img {
        /* Gives the image more vertical room on mobile so faces aren't squished */
        height: 250px;
        object-position: bottom 15%;
    }
}

/* Executive Portrait Sizing */
.boss-img {
    /* Significantly taller than the 250px employee cards */
    height: 400px; 
    object-fit: cover;
    object-position: center 15%;
}

/* Distinctive Boss Card Styling */
.boss-cards {
    /* A sharp green accent line */
    border-top: 4px solid #198754 !important;
}

/* Mobile-Specific Adjustment */
@media (max-width: 768px) {
    .boss-img {
        /* Gives maximum vertical presence on mobile */
        height: 250px;
    }
}

/* Force a smooth transition on the collapse height */
.collapse.collapsing {
    transition: height 0.4s ease-in-out;
}

/* Ensure the inner content doesn't "jump" while the container is moving */
#employeeTeam .overflow-hidden {
    display: block !important;
    /* Prevents margin collapse bugs */
    padding-bottom: 1px;
}

/* Target anything the user tabs into (links, buttons, inputs) */
:focus-visible {
    border-radius: 2px;
    /* Bootstrap success green at 50% opacity */
    outline: 2px solid rgba(25, 135, 84, 0.5);
    /* Creates a small gap between the element and the line */
    outline-offset: 3px;
    transition: outline 0.2s ease-in-out;
}
/* Smooth color transition for all links */
.nav-link, .footer-link, a, span {
    transition: color 0.3s ease-in-out;
}
    /*Remove outline for invisible tab anchors throughout the website*/
    [tabindex="0"]:focus {
        outline: none !important;
    }

    /* Target the new anchor point specifically */
#team-focus-anchor:focus,
#team-focus-anchor:focus-visible {
    outline: none !important;
    /* Since the tabindex focuses the center of a large container, this makes sure
       the content is pulled up into view instead of being centered around the middle of the container */
    scroll-margin-top: -300px;
}

    /* Remove default button outlines to prevent double-rings */
    button {
        outline: none !important;
    }

    .nav-link:focus,
    .nav-link:focus-visible,
    #header-branding:focus,
    #header-branding:focus-visible {
        box-shadow: none !important;
    }

    /* Apply color transitions only to standard links */
    .nav-link:hover, .footer-link:hover, a:not(.btn):hover
    {
        color: #198754 !important;
        
    }
    /* Apply outline to elements that can have it and are not .btn classed on tab focus and hover*/
    .nav-link:focus-visible, .footer-link:focus-visible, a:not(.btn, #header-branding):focus-visible, a:not(#header-branding):hover {
    outline: 2px solid rgba(25, 135, 84, 0.5) !important;
    outline-offset: 3px !important;
    }
/* Ensure green buttons keep white text when focused */
.btn-success:focus-visible, .btn-success:hover {
    color: #ffffff !important;
    /* Slightly darker outline for visibility */
    outline: 2px solid rgba(25, 135, 84, 0.8) !important;
    outline-offset: 3px;
}

/* Styles the branding different on a tab focus */
#header-branding:focus-visible, span:focus-visible {
    outline: none !important;
    color: black !important;
    text-decoration: underline;
}

/* SMOOTH SERVICE CARDS (No Squishing) */
.service-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center; /* Keeps the closed card dead center */
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #dee2e6;
}

/* 1. The Card: Never changes size, eliminating the squish */
.service-card-wrapper {
    flex: 0 0 350px;
    width: 350px;
    z-index: 2;
}

/* 2. The Text Window: Acts as an expanding clipping mask */
.service-text-wrapper {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    /* Expands the window and pushes the card left */
    transition: max-width 0.7s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease 0.1s;
}

/* 3. The Text Content: Fully laid out, just sliding into view */
.service-text-inner {
    padding-left: 2.5rem;
    /* Starts shifted to the right for the slide effect */
    transform: translateX(40px);
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

/* DESKTOP OPEN STATE */
@media (min-width: 992px) {
    .service-text-inner {
        min-width: 600px; /* Locks text layout so it never wraps during animation */
    }

    .service-row.is-open .service-text-wrapper {
        max-width: 800px; /* Opens the window */
        opacity: 1;
    }

    .service-row.is-open .service-text-inner {
        transform: translateX(0); /* Physically slides the text into place */
    }
}

/* TABLET STATE */
@media (min-width: 768px) and (max-width: 991.98px) {
    .service-card-wrapper {
        flex: 0 0 300px;
        width: 300px;
    }

    .service-text-inner {
        min-width: 400px;
        padding-left: 1.5rem;
    }

    .service-row.is-open .service-text-wrapper {
        max-width: 500px;
        opacity: 1;
    }

    .service-row.is-open .service-text-inner {
        transform: translateX(0);
    }
}

/* MOBILE STATE (Slides down vertically like an accordion) */
@media (max-width: 767.98px) {
    .service-row {
        flex-wrap: wrap;
    }

    .service-card-wrapper {
        flex: 1 1 100%;
        width: 100%;
        max-width: 450px;
    }

    .service-text-wrapper {
        max-width: 100%;
        max-height: 0; /* Use height for vertical slide */
        width: 100%;
        transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease 0.1s;
    }

    .service-text-inner {
        padding-left: 0;
        padding-top: 1.5rem;
        transform: translateY(20px); /* Slides UP on mobile */
    }

    .service-row.is-open .service-text-wrapper {
        max-height: 1500px;
        opacity: 1;
    }

    .service-row.is-open .service-text-inner {
        transform: translateY(0);
    }
}