/* Shared Component Styles */
/* Note: Button styles are now in buttons.css */

/* Global padding - used for navbar, footer, and other full-width components */
/* Follows Bootstrap breakpoints: sm(576px), md(768px), lg(992px), xl(1200px) */
.global-padding {
    padding-left: 20px;
    padding-right: 20px;
}

/* Tablet - iPad Air and similar (768px - 991px) */
@media (min-width: 768px) {
    .global-padding {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* iPad Air Portrait (820px) - Specific padding */
@media (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
    .global-padding {
        padding-left: 34px;
        padding-right: 34px;
    }
}

/* Tablet landscape and larger iPads (835px - 991px) */
@media (min-width: 835px) and (max-width: 991px) {
    .global-padding {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Large Tablet - iPad Pro and similar (992px - 1024px, still shows burger menu) */
@media (min-width: 992px) {
    .global-padding {
        padding-left: 78px;
        padding-right: 78px;
    }
}

/* Desktop - Full menu visible (1025px+) */
@media (min-width: 1025px) {
    .global-padding {
        padding-left: 90px;
        padding-right: 90px;
    }
}

/* iPad Air Landscape (1180x820) - Only target tablet screens with height around 820px */
@media (min-width: 1024px) and (max-width: 1194px) and (orientation: landscape) and (min-height: 800px) and (max-height: 850px) {
    .global-padding {
        padding-left: 95px;
        padding-right: 95px;
    }
}

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .global-padding {
        padding-left: 104px;
        padding-right: 104px;
    }
}

/* 4K and Ultra-wide (2560px+) */
@media (min-width: 2560px) {
    .global-padding {
        padding-left: 103px;
        padding-right: 103px;
    }
}

/* Custom navbar breakpoint to match our responsive system */
/* Show mobile menu on tablet and below (up to 1024px) */
@media (min-width: 1025px) {
    .navbar-expand-custom .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-expand-custom .navbar-toggler {
        display: none;
    }

    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
}

/* Nav link styling - applies to all screen sizes */
.navbar-light .navbar-nav .nav-link {
    color: var(--color-text) !important;
}

/* Mobile and Tablet menu - full screen with buttons at bottom */
@media (max-width: 1024px) {
    /* Force toggler to show on tablet and mobile */
    .navbar-expand-custom .navbar-toggler {
        display: block !important;
    }
    /* Prevent body scroll when menu is open */
    body:has(.navbar-collapse.show) {
        overflow: hidden;
    }

    /* Menu fills viewport below navbar */
    .navbar-collapse {
        position: absolute;
        top: 70px;
        left: 0;
        width: 100vw;
        height: calc(100vh - 70px);
        height: calc(100dvh - 70px);
        background-color: white;
        z-index: 9999;
        padding: 0;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    .navbar-collapse.show {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        padding: 1rem 0;
    }

    .navbar-collapse:not(.show) {
        display: none !important;
    }

    /* Toggler button styling */
    .navbar-toggler {
        position: relative;
        z-index: 10000;
        border: none !important;
        padding: 0.5rem;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none !important;
        box-shadow: none !important;
    }
    
    .navbar-toggler:focus,
    .navbar-toggler:active {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    
    .navbar-toggler-icon {
        width: 100%;
        height: 100%;
    }
    
    /* Show X icon only when menu is fully open */
    body:has(.navbar-collapse.show) .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-image: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    body:has(.navbar-collapse.show) .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        content: "×";
        font-size: 48px;
        font-weight: 100;
        line-height: 1;
        color: var(--color-icon-light);
    }

    /* Navigation items */
    .navbar-nav {
        margin: 0 0 clamp(0.5rem, 1.5vh, 1rem) 0;
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        flex-shrink: 1;
        min-height: 0;
        overflow-y: auto;
    }

    @media (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
        .navbar-nav {
            padding-left: 34px;
            padding-right: 34px;
        }
    }

    @media (min-width: 835px) and (max-width: 991px) {
        .navbar-nav {
            padding-left: 30px;
            padding-right: 30px;
        }
    }

    @media (min-width: 992px) {
        .navbar-nav {
            padding-left: 78px;
            padding-right: 78px;
        }
    }

    .navbar-nav .nav-item {
        margin: 0;
        padding: 0;
        border-bottom: 1px solid var(--color-divider) !important;
        opacity: 1 !important;
    }

    .navbar-light .navbar-nav .nav-link {
        font-family: 'Lexend', sans-serif !important;
        font-weight: 500 !important;
        font-size: clamp(18px, 4vw, 22px) !important;
        text-align: left;
        padding: clamp(0.625rem, 1.5vh, 0.875rem) 0 !important;
        color: var(--color-text) !important;
    }

    /* Button container at bottom */
    .navbar-collapse .d-flex {
        flex-direction: column !important;
        margin-top: auto;
        width: 100%;
        gap: 0.75rem !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 0.5rem !important;
        flex-shrink: 0;
    }

    @media (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
        .navbar-collapse .d-flex {
            padding-left: 34px !important;
            padding-right: 34px !important;
        }
    }

    @media (min-width: 835px) and (max-width: 991px) {
        .navbar-collapse .d-flex {
            padding-left: 30px !important;
            padding-right: 30px !important;
        }
    }

    @media (min-width: 992px) {
        .navbar-collapse .d-flex {
            padding-left: 78px !important;
            padding-right: 78px !important;
        }
    }

    /* Full width buttons with consistent styling */
    .navbar-collapse .btn,
    .navbar-collapse .nav-btn,
    .navbar-collapse .bmc-btn {
        width: 100% !important;
        flex: none !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 0.75rem 1rem !important;
        height: 48px !important;
    }

    .navbar-collapse .d-flex > .flex-fill {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Keep navbar brand visible above menu */
    .navbar-brand {
        position: relative;
        z-index: 1052;
    }
}

/* Tablet button height for header buttons */
@media (min-width: 769px) and (max-width: 1024px) {
    .navbar .btn-primary,
    .navbar .bmc-btn {
        height: 48px !important;
    }
}

/* Section subtitle - used under headings */
.section-subtitle {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Shared Spacing Utilities */
.title-spacing {
    margin-bottom: 12px;
}

.image-spacing {
    margin-bottom: 30px;
}

/* Shared Text Colors */
.text-color-light {
    color: var(--color-text-light) !important;
}

/* Footer */
.footer {
    padding-top: 3rem;
    padding-bottom: 5rem;
}

@media (min-width: 769px) {
    .footer {
        padding-bottom: 3rem;
    }
}

@media (min-width: 1025px) {
    .footer {
        padding-bottom: 5rem;
    }
}

/* Footer content spacing - 45px on mobile between logo and cards */
.footer-content-spacing {
    row-gap: 45px;
}

@media (min-width: 769px) {
    .footer-content-spacing {
        row-gap: 1.5rem;
    }
}

/* Footer divider spacing - 32px on mobile */
.footer-divider-spacing {
    margin-top: 32px;
}

@media (min-width: 769px) {
    .footer-divider-spacing {
        margin-top: 3rem;
    }
}

/* Footer cards spacing - 32px row gap on mobile */
.footer-cards-spacing {
    row-gap: 32px;
}

@media (min-width: 769px) {
    .footer-cards-spacing {
        row-gap: 3rem;
        column-gap: 0.75rem;
    }
}

@media (min-width: 1025px) {
    .footer-cards-spacing {
        column-gap: 3rem;
    }
}

/* Buy Me a Coffee button */
.bmc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 15px;
    background-color: #171c2f;
    border-radius: 8px;
    text-decoration: none;
    color: #ffffff;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 500;
}

.bmc-btn svg {
    height: 20px;
    width: 20px;
    margin-right: 8px;
}

.bmc-btn:hover {
    background-color: var(--color-accent);
    color: var(--color-heading);
}

.bmc-btn svg .logo-outline {
    transition: fill 0.2s ease-in-out;
}

.bmc-btn:hover svg .logo-outline {
    fill: #000000;
}