/* ========================================
   Scroll Direction - Hide/Show Header
   ======================================== */

/* Add smooth transition to header elements */
.action-bar,
.navigation-menu {
    transition: transform 0.3s ease-in-out;
}

/* Hide header when scrolling down */
.action-bar.header-hidden {
    transform: translateY(-100%);
}

.navigation-menu.header-hidden {
    transform: translateY(-100%);
}

/* ========================================
   Back to Top Button
   ======================================== */

.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: var(--black-bar, #2b2b2b);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 99;
    transition: all 0.3s ease;
    opacity: 0.2;
}

.back-to-top:hover {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    background: #555555;
}

.back-to-top.at-bottom {
    opacity: 1;
    background: #555555;
}

.back-to-top:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 45px;
        height: 45px;
    }
}

/* ========================================
   Info Button (Bottom Left)
   ======================================== */

.info-button {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 50px;
    height: 50px;
    background: var(--black-bar, #2b2b2b); /* Dark by default like other buttons */
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 99;
    transition: all 0.3s ease;
    opacity: 0.6; /* Increased from 0.2 for better discoverability */
}

.info-button:hover {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    background: #3498db; /* Blue - different from back-to-top green */
}

.info-button.at-bottom {
    opacity: 1;
    background: #3498db; /* Blue - different from back-to-top green */
}

.info-button:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

/* Default icon sizes for floating buttons (desktop) */
.download-btn iconify-icon,
.print-friendly-btn iconify-icon,
.fixed-btn.contact-btn iconify-icon,
.shortcuts-btn iconify-icon,
.info-button iconify-icon,
.back-to-top iconify-icon,
.color-theme-switcher iconify-icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

/* ==========================================================================
   Floating Button Icon Hover Animations
   - Rotate: PDF, leaf, info, theme, close (symmetric icons)
   - Wiggle: email (envelope notification feel)
   - Pulse: keyboard (key press feel)
   - Bounce up: back-to-top arrow (reinforces direction)
   ========================================================================== */

/* All floating icons: smooth transition */
.download-btn iconify-icon,
.print-friendly-btn iconify-icon,
.fixed-btn.contact-btn iconify-icon,
.shortcuts-btn iconify-icon,
.info-button iconify-icon,
.back-to-top iconify-icon,
.color-theme-switcher iconify-icon,
.chat-toggle-btn iconify-icon {
    transition: transform 0.3s ease;
}

/* Rotate clockwise: PDF, leaf, info, theme, chat close */
.download-btn:hover iconify-icon,
.print-friendly-btn:hover iconify-icon,
.info-button:hover iconify-icon,
.color-theme-switcher:hover iconify-icon {
    transform: rotate(90deg);
}

/* Wiggle: email envelope */
.fixed-btn.contact-btn:hover iconify-icon {
    animation: iconWiggle 0.5s ease;
}

@keyframes iconWiggle {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(-12deg); }
    40%  { transform: rotate(10deg); }
    60%  { transform: rotate(-8deg); }
    80%  { transform: rotate(5deg); }
    100% { transform: rotate(0deg); }
}

/* Scale pulse: keyboard */
.shortcuts-btn:hover iconify-icon {
    animation: iconPulse 0.4s ease;
}

@keyframes iconPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Bounce up: back-to-top arrow */
.back-to-top:hover iconify-icon {
    animation: iconBounceUp 0.4s ease;
}

@keyframes iconBounceUp {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-4px); }
    70%  { transform: translateY(1px); }
    100% { transform: translateY(0); }
}

/* Hide keyboard shortcuts button on real mobile devices (no keyboard) */
.is-mobile-device .shortcuts-btn,
.is-mobile-device .zoom-toggle-btn,
.is-mobile-device .zoom-control {
    display: none !important;
}

/* Mobile adjustments - Flexbox button layout at bottom center */
@media (max-width: 900px) {
    /* Hide zoom control on mobile (keyboard shortcuts now visible on desktop mobile view) */
    .zoom-toggle-btn,
    .zoom-control {
        display: none !important;
    }

    /* Reset fixed positioning for FLEXBOX buttons on mobile (exclude back-to-top) */
    /* Use fluid sizing: at 900px = 50px, at 380px = 36px, scales linearly */
    /* Formula: 2.7vw + 25.7px gives 36px at 380px and 50px at 900px */
    .download-btn,
    .print-friendly-btn,
    .fixed-btn.contact-btn,
    .shortcuts-btn,
    .info-button {
        position: fixed !important;
        bottom: 1.5rem !important;
        left: auto !important;
        right: auto !important;
        /* Fluid button size: 36px at 380px, 50px at 900px */
        width: clamp(36px, calc(2.7vw + 25.7px), 50px) !important;
        height: clamp(36px, calc(2.7vw + 25.7px), 50px) !important;
        /* Removed opacity: 1 !important to allow .footer-hovered to work */
        transform: none !important;
    }

    /* Also apply fluid sizing to back-to-top */
    .back-to-top {
        width: clamp(36px, calc(2.7vw + 25.7px), 50px) !important;
        height: clamp(36px, calc(2.7vw + 25.7px), 50px) !important;
    }

    /* Scale icons to fit buttons properly */
    /* Icons ~50% of button size: 18px at 36px button, 24px at 50px button */
    /* Formula: 1.15vw + 13.6px gives 18px at 380px and 24px at 900px */
    .download-btn iconify-icon,
    .print-friendly-btn iconify-icon,
    .fixed-btn.contact-btn iconify-icon,
    .shortcuts-btn iconify-icon,
    .info-button iconify-icon,
    .back-to-top iconify-icon,
    .color-theme-switcher iconify-icon {
        width: clamp(18px, calc(1.15vw + 13.6px), 24px) !important;
        height: clamp(18px, calc(1.15vw + 13.6px), 24px) !important;
        font-size: clamp(18px, calc(1.15vw + 13.6px), 24px) !important;
        /* Force override HTML width/height attributes */
        min-width: 0 !important;
        max-width: clamp(18px, calc(1.15vw + 13.6px), 24px) !important;
    }

    /* Mobile: Show colors at full opacity (no transparency with blur bar) */
    .download-btn {
        background: rgba(205, 96, 96, 1) !important; /* PDF red - full opacity */
        opacity: 1 !important; /* Override base opacity */
    }

    .print-friendly-btn {
        background: rgba(255, 255, 255, 1) !important; /* White - full opacity */
        opacity: 1 !important; /* Override base opacity */
    }

    .print-friendly-btn iconify-icon {
        color: #27ae60 !important; /* Green icon */
    }

    .fixed-btn.contact-btn {
        background: rgba(52, 152, 219, 1) !important; /* Blue - full opacity */
        opacity: 1 !important; /* Override base opacity */
    }

    .shortcuts-btn {
        background: rgba(243, 156, 18, 1) !important; /* Orange - full opacity */
        opacity: 1 !important; /* Override base opacity */
    }

    .info-button {
        background: rgba(52, 152, 219, 1) !important; /* Blue - full opacity, different from back-to-top */
        opacity: 1 !important; /* Override base opacity */
    }

    .back-to-top {
        background: rgba(39, 174, 96, 1) !important; /* Green - full opacity */
        opacity: 1 !important; /* Full opacity (no transparency with blur bar) */
    }

    /* Flexbox container behavior - buttons arrange themselves */
    /* Fluid positioning that scales with viewport */
    /* 7 buttons: At 900px: 7 * 50px + 6 * 8px = 398px total, start at -199px */
    /* At 380px: 7 * 36px + 6 * 4px = 276px total, start at -138px */

    .download-btn {
        /* First button: -199px at 900px, -138px at 380px */
        left: calc(50% - clamp(138px, calc(138px + (199 - 138) * ((100vw - 380px) / (900 - 380))), 199px)) !important;
    }

    .print-friendly-btn {
        /* Second button: -141px at 900px, -98px at 380px */
        left: calc(50% - clamp(98px, calc(98px + (141 - 98) * ((100vw - 380px) / (900 - 380))), 141px)) !important;
    }

    .fixed-btn.contact-btn {
        /* Third button: -83px at 900px, -58px at 380px */
        left: calc(50% - clamp(58px, calc(58px + (83 - 58) * ((100vw - 380px) / (900 - 380))), 83px)) !important;
    }

    .shortcuts-btn {
        /* Fourth button: -25px at 900px, -18px at 380px */
        left: calc(50% - clamp(18px, calc(18px + (25 - 18) * ((100vw - 380px) / (900 - 380))), 25px)) !important;
    }

    /* Theme switcher button - fifth position (defined in _themes.css) */
    /* +33px at 900px, +22px at 380px */

    .info-button {
        /* Sixth button: +91px at 900px, +62px at 380px */
        left: calc(50% + clamp(62px, calc(62px + (91 - 62) * ((100vw - 380px) / (900 - 380))), 91px)) !important;
    }

    /* Back-to-top button - now part of the button row (seventh button) */
    .back-to-top {
        position: fixed !important;
        bottom: 1.5rem !important;
        /* Seventh button: +149px at 900px, +102px at 380px */
        left: calc(50% + clamp(102px, calc(102px + (149 - 102) * ((100vw - 380px) / (900 - 380))), 149px)) !important;
        right: auto !important; /* Override previous right positioning */
        /* Fluid size already set above, no need to repeat */
        display: flex !important; /* Ensure it's always displayed */
    }

    /* REAL MOBILE DEVICES: 6 buttons without shortcuts */
    /* At 900px: 6 * 50px + 5 * 8px = 340px, start at -170px */
    /* At 380px: 6 * 36px + 5 * 4px = 236px, start at -118px */
    .is-mobile-device .download-btn {
        left: calc(50% - clamp(118px, calc(118px + (170 - 118) * ((100vw - 380px) / (900 - 380))), 170px)) !important;
    }

    .is-mobile-device .print-friendly-btn {
        left: calc(50% - clamp(78px, calc(78px + (112 - 78) * ((100vw - 380px) / (900 - 380))), 112px)) !important;
    }

    .is-mobile-device .fixed-btn.contact-btn {
        left: calc(50% - clamp(38px, calc(38px + (54 - 38) * ((100vw - 380px) / (900 - 380))), 54px)) !important;
    }

    /* Theme switcher on mobile - fourth position (see _themes.css for override) */
    /* +4px at 900px, +2px at 380px */

    .is-mobile-device .info-button {
        left: calc(50% + clamp(42px, calc(42px + (62 - 42) * ((100vw - 380px) / (900 - 380))), 62px)) !important;
    }

    .is-mobile-device .back-to-top {
        left: calc(50% + clamp(82px, calc(82px + (120 - 82) * ((100vw - 380px) / (900 - 380))), 120px)) !important;
    }

    /* Always show back-to-top on mobile (don't wait for scroll) */
    .back-to-top:hover {
        opacity: 1 !important;
    }

    /* Hover effects - Full color opacity on hover */
    .download-btn:hover,
    .download-btn.pdf-hover-sync {
        background: rgba(205, 96, 96, 1) !important; /* Full red opacity */
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    }

    .print-friendly-btn:hover,
    .print-friendly-btn.print-hover-sync {
        background: rgba(255, 255, 255, 1) !important; /* Full white opacity */
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    }

    .fixed-btn.contact-btn:hover {
        background: rgba(52, 152, 219, 1) !important; /* Full blue opacity */
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    }

    .shortcuts-btn:hover {
        background: rgba(243, 156, 18, 1) !important; /* Full orange opacity */
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    }

    .info-button:hover {
        background: rgba(52, 152, 219, 1) !important; /* Full blue opacity */
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    }

    .back-to-top:hover {
        background: rgba(39, 174, 96, 1) !important; /* Full green opacity */
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
    }

    /* Keep at-bottom state - full opacity colors for each button */
    .download-btn.at-bottom {
        background: rgba(205, 96, 96, 1) !important; /* Full red opacity */
        opacity: 1 !important;
        transform: none !important;
    }

    .print-friendly-btn.at-bottom {
        background: rgba(255, 255, 255, 1) !important; /* Full white opacity */
        opacity: 1 !important;
        transform: none !important;
    }

    .fixed-btn.contact-btn.at-bottom {
        background: rgba(52, 152, 219, 1) !important; /* Full blue opacity */
        opacity: 1 !important;
        transform: none !important;
    }

    .shortcuts-btn.at-bottom {
        background: rgba(243, 156, 18, 1) !important; /* Full orange opacity */
        opacity: 1 !important;
        transform: none !important;
    }

    .info-button.at-bottom {
        background: rgba(52, 152, 219, 1) !important; /* Full blue opacity */
        opacity: 1 !important;
        transform: none !important;
    }

    .back-to-top.at-bottom {
        background: rgba(39, 174, 96, 1) !important; /* Full green opacity - NO transparency */
        opacity: 1 !important;
        transform: none !important;
    }

    /* Make all buttons semi-transparent when footer is hovered (applied via JS) */
    .download-btn.footer-hovered,
    .print-friendly-btn.footer-hovered,
    .fixed-btn.contact-btn.footer-hovered,
    .shortcuts-btn.footer-hovered,
    .info-button.footer-hovered,
    .back-to-top.footer-hovered,
    .color-theme-switcher.footer-hovered {
        opacity: 0.2 !important; /* Make buttons very transparent to see footer */
        pointer-events: none !important; /* Prevent interaction when footer is hovered */
    }
}

/* ========================================
   Very Small Screens: iPhone 13 mini (375px) and smaller
   Tighter button spacing to prevent overflow
   ======================================== */
@media (max-width: 400px) {
    /* Smaller buttons for very small screens */
    .download-btn,
    .print-friendly-btn,
    .fixed-btn.contact-btn,
    .shortcuts-btn,
    .info-button,
    .back-to-top,
    .color-theme-switcher {
        width: 34px !important;
        height: 34px !important;
    }

    /* Smaller icons */
    .download-btn iconify-icon,
    .print-friendly-btn iconify-icon,
    .fixed-btn.contact-btn iconify-icon,
    .shortcuts-btn iconify-icon,
    .info-button iconify-icon,
    .back-to-top iconify-icon,
    .color-theme-switcher iconify-icon {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
        max-width: 16px !important;
    }

    /* REAL MOBILE DEVICES: 6 buttons tightly spaced */
    /* 6 buttons * 34px + 5 gaps * 6px = 234px total, center offset = -117px */
    .is-mobile-device .download-btn {
        left: calc(50% - 117px) !important;
    }

    .is-mobile-device .print-friendly-btn {
        left: calc(50% - 77px) !important;
    }

    .is-mobile-device .fixed-btn.contact-btn {
        left: calc(50% - 37px) !important;
    }

    /* Theme switcher - fourth position: +3px from center */
    .is-mobile-device .color-theme-switcher {
        left: calc(50% + 3px) !important;
    }

    .is-mobile-device .info-button {
        left: calc(50% + 43px) !important;
    }

    .is-mobile-device .back-to-top {
        left: calc(50% + 83px) !important;
    }

    /* Non-mobile (desktop in mobile emulation): 7 buttons */
    /* 7 buttons * 34px + 6 gaps * 6px = 274px total, center offset = -137px */
    .download-btn {
        left: calc(50% - 137px) !important;
    }

    .print-friendly-btn {
        left: calc(50% - 97px) !important;
    }

    .fixed-btn.contact-btn {
        left: calc(50% - 57px) !important;
    }

    .shortcuts-btn {
        left: calc(50% - 17px) !important;
    }

    .color-theme-switcher {
        left: calc(50% + 23px) !important;
    }

    .info-button {
        left: calc(50% + 63px) !important;
    }

    .back-to-top {
        left: calc(50% + 103px) !important;
    }
}

/* ========================================
   Mobile: Keep action bar visible (prevent hiding on scroll)
   ======================================== */
@media (max-width: 900px) {
    /* Prevent action bar from hiding on scroll on mobile */
    .action-bar.header-hidden {
        transform: translateY(0) !important; /* Override hide behavior */
    }

    .navigation-menu.header-hidden {
        transform: translateY(0) !important; /* Override hide behavior */
    }

    /* Add bottom padding to footer so text isn't hidden behind button bar */
    footer.no-print {
        padding-bottom: 100px !important; /* Clearance for 7 buttons + spacing */
        transition: all 0.3s ease;
        z-index: 1 !important; /* Keep footer behind buttons (buttons have z-index: 99) */
        position: relative;
    }

    /* Footer hover effect - enlarge text when touched (for button transparency) */
    footer.no-print.footer-hovered {
        /* Only used for button transparency interaction */
    }

    /* Footer text automatically enlarges when at page bottom */
    footer.no-print.at-bottom {
        padding-bottom: 110px !important; /* Extra space when enlarged */
    }

    footer.no-print.at-bottom p,
    footer.no-print.at-bottom a {
        font-size: 1.2em !important;
        font-weight: 500 !important;
        transition: all 0.3s ease;
    }
}