/* ============================================================
   FIX-MOBILE – Extra layout corrections for small screens
   ============================================================ */

@media (max-width: 767px) {
    /* Home section layout */
    .home {
        position: relative;
        height: auto;
        min-height: calc(var(--vh, 1vh) * 100 - 7rem);
        padding: 10rem 7% 5rem;
        overflow: hidden;
    }

    /* Hide the profession carousel on small screens */
    .home .profession-container {
        display: none;
    }

    /* Centre content */
    .home-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0;
        margin: 0 auto;
        width: 100%;
    }

    /* Buttons – full-width on mobile */
    .home-content .btn {
        margin: 1rem auto;
        width: 90%;
        max-width: 300px;
    }

    /* Social icons */
    .social-media {
        display: flex;
        justify-content: center;
        margin: 2rem 0;
    }

    /* Paragraph spacing */
    .home-content p {
        margin-bottom: 1.5rem;
        max-width: 100%;
    }

    /* Language skills – keep inside flow, prevent overflow */
    .language-skills {
        position: static !important;
        width: calc(100% - 2rem) !important;
        max-width: 340px !important;
        min-width: unset !important;
        margin: 2.5rem auto 0 !important;
        z-index: 2 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .language-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .lang-name,
    .lang-track,
    .lang-level {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Language bar fill – ensure minimum visible width */
    .lang-fill {
        min-width: 30px;
    }

    /* Dark mode – header on small screens */
    body.dark-mode .header {
        background: rgba(20, 20, 35, 0.9);
    }

    body.dark-mode .language-skills {
        background: rgba(20, 20, 35, 0.9) !important;
    }

    /* Scroll offset so anchors clear the sticky header */
    html,
    body {
        scroll-padding-top: 5rem;
        scroll-behavior: smooth;
    }

    section {
        scroll-margin-top: 5rem;
    }
}

/* Very small screens */
@media (max-width: 380px) {
    html { font-size: 45%; }

    .home-content h1 { font-size: 3.4rem; }
    .home-content h3 { font-size: 2rem; }

    .home-content .social-media a {
        width: 3.5rem;
        height: 3.5rem;
        margin: 0 0.5rem;
    }

    .btn {
        padding: 0.8rem 0;
        font-size: 1.4rem;
    }

    .language-skills {
        padding: 1rem !important;
    }
}