/* ============================================================
   HOVER & TRANSITION EFFECTS
   ============================================================ */

/* --- Nav items -------------------------------------------- */
.navbar .nav-item {
    transition: background-color 0.25s ease;
}
.navbar .nav-item:hover {
    background-color: rgba(176, 145, 79, 0.07);
}
.navbar .nav-item a {
    transition: color 0.25s ease, transform 0.25s ease;
    display: block;
}
.navbar .nav-item a:hover {
    color: #b0914f !important;
    text-decoration: none;
    transform: translateY(-2px);
}
.navbar .nav-item i {
    transition: transform 0.25s ease, color 0.25s ease;
}
.navbar .nav-item a:hover i {
    transform: scale(1.2);
    color: #b0914f;
}

/* --- Social media icons ----------------------------------- */
.navbar .social-media a {
    display: inline-block;
    transition: color 0.25s ease, transform 0.25s ease !important;
}
.navbar .social-media a:hover {
    transform: scale(1.25) translateY(-2px);
}

/* --- Logo: move to right, aligned with nav items --------- */
@media (min-width: 992px) {
    /* Ensure container is a flex row */
    .navbar > .container {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
    }
    /* Put collapse back in flex flow so logo can sit beside it */
    .navbar .collapse {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        height: auto !important;
        width: auto !important;
        flex: 1 1 auto !important;
        display: flex !important;
        box-shadow: none !important;
        order: 2;
    }
    /* Push nav items to the right inside the collapse */
    .navbar .navbar-nav {
        margin-left: auto !important;
        width: auto !important;
        flex-direction: row-reverse !important;
        align-items: center !important;
        box-shadow: none !important;
    }
    /* Logo becomes the last flex item → sits on the right */
    .navbar .logo {
        order: 10;
        flex-shrink: 0;
        margin-left: 20px !important;
        margin-right: 0 !important;
        align-self: center;
    }
    .navbar .navbar-toggler {
        display: none !important;
    }
    .navbar .collapse-menu {
        display: none !important;
    }
}

/* --- Logo hover ------------------------------------------ */
.navbar .logo img {
    transition: opacity 0.25s ease, transform 0.3s ease;
}
.navbar .logo:hover img {
    opacity: 0.85;
    transform: scale(1.04);
}

/* --- Hero buttons ----------------------------------------- */
.home .title .btn-home a {
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.home .title .btn-home a:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(176, 145, 79, 0.4);
}

/* --- Workplace / lightbox cards --------------------------- */
.lightbox-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
}
.lightbox-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

/* --- Buttons inside cards / content ----------------------- */
.workplace-actions .btn,
.btn-gold {
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.workplace-actions .btn:hover,
.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(176, 145, 79, 0.35);
    opacity: 0.9;
}

/* --- Thumbnail / gallery images --------------------------- */
.thumbnail {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}
.thumbnail:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* --- About page tab links --------------------------------- */
.tabs-about .nav-link {
    transition: color 0.2s ease, border-color 0.2s ease,
                background-color 0.2s ease;
}
.tabs-about .nav-link:hover {
    color: #b0914f !important;
    background-color: rgba(176, 145, 79, 0.06);
}

/* --- Fancybox / data-fancybox links ----------------------- */
[data-fancybox] img {
    transition: transform 0.25s ease, opacity 0.25s ease;
}
[data-fancybox]:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

/* --- Inline links inside content (coloured links) --------- */
a[style*="color:#7b680a"],
a[style*="color:#b0914f"] {
    transition: opacity 0.2s ease, letter-spacing 0.2s ease;
    text-decoration: underline;
}
a[style*="color:#7b680a"]:hover,
a[style*="color:#b0914f"]:hover {
    opacity: 0.75;
    letter-spacing: 0.3px;
}

/* --- YouTube iframes -------------------------------------- */
iframe {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    border-radius: 4px;
}
iframe:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
}

/* --- Alert / info boxes ----------------------------------- */
.alert {
    transition: box-shadow 0.2s ease;
}
.alert:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

/* --- Footer ----------------------------------------------- */
footer p {
    transition: color 0.25s ease;
}

/* --- Nav toggle (mobile hamburger) ------------------------ */
.nav-toggle,
.navbar-toggler {
    transition: opacity 0.2s ease;
}
.nav-toggle:hover,
.navbar-toggler:hover {
    opacity: 0.7;
}