/* ============================================
   FIXES OVERLAY - Add this to existing styles
   DO NOT REPLACE - This only ADDS to existing
   ============================================ */

/* FIX 1: Desktop Navigation Active Highlight - FULLY ROUNDED */
.main-nav a {
    padding: 0.5vw 1vw !important;
    border-radius: 50px !important;
    /* Match main header roundness */
    transition: color 0.3s ease, background-color 0.3s ease !important;
}

html body .main-nav a.active {
    color: #D3AA2C !important;
    /* Yellowish text */
    background-color: rgba(255, 255, 255, 0.12) !important;
    /* White background */
}

html body .main-nav a:hover {
    color: #D3AA2C !important;
    /* Yellowish text */
    background-color: rgba(255, 255, 255, 0.15) !important;
    /* White background */
}

/* FIX 2 & 3: Mobile Navigation & Logo Fixes */
@media (max-width: 768px) {

    /* Fix logo centering - PROPERLY CENTERED */
    .main-header {
        padding: 8px 20px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .main-header .logo {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Fix bottom nav text positioning */
    .mobile-bottom-nav {
        max-width: calc(100vw - 20px) !important;
        padding: 12px 18px !important;
        border-radius: 30px !important;
    }

    .mobile-bottom-nav nav {
        gap: 5px !important;
    }

    .mobile-bottom-nav nav a {
        font-size: 2.8vw !important;
        padding: 7px 11px !important;
        border-radius: 18px !important;
        letter-spacing: 0.02em !important;
        line-height: 1.3 !important;
    }

    .mobile-bottom-nav nav a.active {
        color: var(--accent-color) !important;
        /* Yellowish text */
        background-color: rgba(255, 255, 255, 0.15) !important;
        /* White background */
    }
}

/* FIX 1b: Desktop Top Header - Smaller, More Elegant */
@media (min-width: 769px) {
    .main-header {
        padding: 8px 20px !important;
        /* Reduced from 10px */
    }

    .main-header.expanded {
        padding: 8px 30px !important;
        /* Reduced from 10px */
    }

    .main-header .logo {
        font-size: 1.4vw !important;
        /* Slightly smaller */
    }

    .main-nav a {
        font-size: 1vw !important;
        /* Slightly smaller */
        padding: 0.4vw 1vw !important;
        /* Tighter padding */
    }
}

/* FIX 2: Line Break - Word Wrapping */
* {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -ms-hyphens: auto !important;
}

/* Specific elements that need careful wrapping */
.hero-headline,
.hero-subtext,
.section-title,
.about-headline,
.about-text,
.contact-text,
.skills-quote,
.education-item strong,
.education-item span,
.volunteering-card-title,
.volunteering-card-description,
.card-title,
.card-category {
    word-break: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    white-space: normal !important;
}

/* Prevent breaking inside navigation and buttons */
.main-nav a,
.mobile-bottom-nav nav a,
.about-button,
.contact-button {
    word-break: keep-all !important;
    hyphens: none !important;
    white-space: nowrap !important;
}

/* FIX 4: Mobile Education Cards - Removed as cards are replaced by text blocks */

/* FIX 5: Desktop Education Cursor - Remove transition delay */
@media (min-width: 769px) {
    .education-item {
        transition: box-shadow 0.05s linear, background 0.2s ease !important;
        /* Transform has NO transition - updated by JS instantly */
    }
}