/* ============================================
   Brand Gradient (reusable)
   Single source of truth for the header/footer
   gradient. Use `.brand-gradient` for surfaces
   and `.brand-gradient-btn` for buttons (adds an
   orange hover state).
   ============================================ */

:root {
    --brand-gradient: linear-gradient(135deg, #282828 0%, #20486b 55%, #15293b 100%);
    --brand-gradient-hover: linear-gradient(135deg, #F05D21 0%, #d24e1b 100%);
}

.brand-gradient {
    background-image: var(--brand-gradient);
}

.brand-gradient-btn {
    background-image: var(--brand-gradient);
    transition: background-image 0.3s ease, filter 0.3s ease;
}
.brand-gradient-btn:hover {
    background-image: var(--brand-gradient-hover);
}

/* ============================================
   Mobile Navigation — Hamburger Menu
   Controls the animated hamburger icon and
   drawer open/close state.
   ============================================ */

/* Base transform origin for smooth line animation */
.hamburger-line {
    transform-origin: center;
}

/* Default positions of the three lines */
#line1 { top: 6px; }
#line2 { top: 12px; }
#line3 { top: 18px; }

/* Active state: lines rotate into an X */
.hamburger-active #line1 {
    transform: rotate(45deg);
    top: 12px;
}
.hamburger-active #line2 {
    opacity: 0;
    transform: translateX(20px);
}
.hamburger-active #line3 {
    transform: rotate(-45deg);
    top: 12px;
}

/* Prevent background scroll while the mobile drawer is open */
body.drawer-open {
    overflow: hidden;
}

/* ============================================
   Global Scrollbar
   Custom thin scrollbar using brand colors.
   Applied to all scrollable elements.
   ============================================ */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #5298D3 #f1f5f9;
}

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
*::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}
*::-webkit-scrollbar-thumb {
    background: #5298D3; /* custom-blue */
    border-radius: 10px;
    transition: background 0.2s ease;
}
*::-webkit-scrollbar-thumb:hover {
    background: #F05D21; /* custom-orange on hover */
}
*::-webkit-scrollbar-corner {
    background: transparent;
}