.skip-link {
    position: absolute;
    top: -80px;
    left: 16px;
    z-index: 9999;
    padding: 12px 16px;
    border-radius: 10px;
    background: #1B3A6B;
    color: #FFFFFF;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(27, 58, 107, 0.2);
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 16px;
    outline: 3px solid #E3B23C;
    outline-offset: 3px;
}

.mobile-bottom-bar {
    display: none;
}

@media (max-width: 767px) {
    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    body {
        padding-bottom: 76px;
        background: #F9F8F5;
        line-height: 1.6;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    nav {
        padding-top: 10px;
        padding-bottom: 10px;
        background: rgba(249, 248, 245, 0.98);
    }

    nav .container {
        min-height: 48px;
        flex-wrap: nowrap;
        gap: 12px;
    }

    nav .brand-logo {
        width: 138px;
        height: 38px;
        flex: 0 0 auto;
    }

    nav svg {
        width: 28px;
        height: 28px;
        flex: 0 0 auto;
    }

    #mobileMenu {
        position: fixed;
        top: 64px;
        left: 12px;
        right: 12px;
        width: auto;
        border: 1px solid rgba(27, 58, 107, 0.12);
        border-radius: 18px;
        box-shadow: 0 24px 60px rgba(27, 58, 107, 0.18);
    }

    main,
    main.pt-24 {
        padding-top: 68px;
    }

    section {
        scroll-margin-top: 84px;
    }

    section[class*="py-24"],
    section[class*="py-32"],
    section[class*="lg:py-36"],
    section[class*="lg:py-40"],
    section[class*="py-16"] {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    #home {
        padding-top: 88px;
        padding-bottom: 44px;
    }

    h1,
    .text-5xl,
    .lg\:text-6xl {
        font-size: clamp(2.15rem, 10vw, 3.1rem);
        line-height: 1.07;
        letter-spacing: 0;
        overflow-wrap: normal;
    }

    h2,
    .text-4xl,
    .lg\:text-5xl {
        font-size: clamp(1.75rem, 7vw, 2.35rem);
        line-height: 1.12;
        letter-spacing: 0;
    }

    h3,
    .text-3xl {
        font-size: clamp(1.35rem, 5.8vw, 1.75rem);
        line-height: 1.18;
    }

    p,
    li {
        font-size: 0.98rem;
        line-height: 1.68;
    }

    .text-xl,
    .text-lg {
        font-size: 1rem;
        line-height: 1.68;
    }

    .rounded-\[3rem\],
    .rounded-\[2\.5rem\],
    .rounded-3xl,
    .rounded-2xl {
        border-radius: 18px;
    }

    .shadow-2xl,
    .shadow-xl,
    .shadow-lg {
        box-shadow: 0 12px 32px rgba(27, 58, 107, 0.10);
    }

    .grid {
        gap: 16px;
    }

    .gap-16,
    .gap-12,
    .gap-10,
    .gap-8,
    .gap-6 {
        gap: 16px;
    }

    .mb-16,
    .mb-12 {
        margin-bottom: 28px;
    }

    .mb-10,
    .mb-8 {
        margin-bottom: 20px;
    }

    .p-10,
    .p-8,
    .md\:p-12,
    .md\:p-10,
    .md\:p-8 {
        padding: 22px;
    }

    .px-12,
    .px-10,
    .px-8 {
        padding-left: 18px;
        padding-right: 18px;
    }

    .py-5,
    .py-4 {
        padding-top: 13px;
        padding-bottom: 13px;
    }

    a,
    button {
        min-height: 44px;
    }

    .flex.flex-col.sm\:flex-row,
    .flex.flex-col.lg\:flex-row {
        width: 100%;
    }

    .flex.flex-col.sm\:flex-row > a,
    .flex.flex-col.lg\:flex-row > a {
        width: 100%;
        justify-content: center;
    }

    .stats-card {
        min-height: 104px;
        padding: 16px;
        border-radius: 18px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .stats-card .text-4xl,
    .stats-card .text-5xl {
        font-size: 1.55rem;
        line-height: 1.1;
    }

    #services .grid.lg\:grid-cols-3 > div,
    #universities a[href^="universities/"],
    #blog a[href^="articles/"] {
        border-radius: 18px;
    }

    #services .border-t {
        align-items: stretch;
        flex-direction: column;
    }

    #services .border-t a {
        width: 100%;
        text-align: center;
    }

    #universities .h-48,
    #blog .aspect-video {
        height: 150px;
    }

    #universities a[href^="universities/"] .p-6 {
        padding: 18px;
    }

    #universities a[href^="universities/"] h3 {
        margin-bottom: 12px;
    }

    #universities a[href^="universities/"] .space-y-3 {
        display: grid;
        gap: 8px;
    }

    #blog .grid {
        grid-template-columns: 1fr;
    }

    #contact .max-w-3xl,
    #contact .max-w-6xl {
        max-width: 100%;
    }

    details summary {
        padding: 16px;
        gap: 12px;
        align-items: flex-start;
    }

    details summary h3 {
        font-size: 1rem;
        line-height: 1.3;
    }

    details summary .w-12.h-12 {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    details [class*="px-6"] {
        padding-left: 16px;
        padding-right: 16px;
    }

    [id="contact-bottom"] h2 {
        font-size: 2rem;
    }

    [id="contact-bottom"] .flex {
        width: 100%;
    }

    [id="contact-bottom"] a {
        width: 100%;
        text-align: center;
    }

    footer {
        padding-bottom: 96px;
    }

    footer .grid {
        gap: 28px;
    }

    footer .text-right {
        text-align: left;
    }

    .article-body {
        border-radius: 18px;
        padding: 22px;
    }

    .article-body h2 {
        font-size: 1.55rem;
        line-height: 1.18;
        margin-top: 2rem;
    }

    .article-body h3 {
        font-size: 1.18rem;
    }

    .article-body p,
    .article-body li {
        font-size: 0.98rem;
        line-height: 1.76;
    }

    .article-body > p:first-child {
        font-size: 1rem;
    }

    .article-media {
        margin-top: 28px;
        margin-bottom: 28px;
    }

    .article-media img,
    .article-body img {
        height: 190px;
        width: 100%;
        object-fit: cover;
    }

    .article-body .grid {
        grid-template-columns: 1fr;
    }

    article header {
        min-height: auto;
    }

    article header .py-24,
    article header .lg\:py-32 {
        padding-top: 64px;
        padding-bottom: 56px;
    }

    article header p.max-w-3xl {
        max-width: 100%;
    }

    .mobile-bottom-bar {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 80;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        padding: 8px;
        border: 1px solid rgba(27, 58, 107, 0.12);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 18px 50px rgba(27, 58, 107, 0.22);
        backdrop-filter: blur(14px);
    }

    .mobile-bottom-bar a {
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        color: #1B3A6B;
        font-size: 0.76rem;
        font-weight: 800;
        text-align: center;
        line-height: 1.15;
        background: #F9F8F5;
    }

    .mobile-bottom-bar a.primary {
        color: #FFFFFF;
        background: #D4A843;
    }
    
    /* CRITICAL FIXES */
    
    /* 1. Language switcher - make visible on mobile */
    nav .hidden.lg\:flex {
        display: flex !important;
        align-items: center;
        gap: 16px;
    }
    
    .language-switcher {
        display: flex !important;
    }
    
    /* 2. Fix cropped images - use cover to fill the space */
    .aspect-video,
    .aspect-\[21\/9\] {
        aspect-ratio: 16 / 9 !important;
    }
    
    .aspect-video img,
    .aspect-\[21\/9\] img {
        object-fit: cover !important;
        object-position: center !important;
    }
    
    /* Article cards images - SPECIFIC FIX */
    #blog .aspect-video,
    a[href^="articles/"] .aspect-video,
    a[href^="../articles/"] .aspect-video {
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
    }
    
    #blog .aspect-video img,
    a[href^="articles/"] .aspect-video img,
    a[href^="../articles/"] .aspect-video img {
        object-fit: cover !important;
        object-position: center !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    #universities .h-48,
    #blog .aspect-video {
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
    
    #universities .h-48 img,
    #blog .aspect-video img {
        object-fit: cover !important;
    }
    
    /* 3. Fix spacing between sections - MORE AGGRESSIVE */
    section {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    section + section {
        margin-top: 0 !important;
    }
    
    main > section {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* 4. Horizontal padding 20px */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    section.px-6 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* 5. Table horizontal scroll */
    .overflow-hidden.rounded-\[2\.5rem\] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        min-width: 600px;
        font-size: 0.85rem;
    }
    
    /* 6. University cards - 1 column on mobile (MAIN PAGE) */
    #universities .grid.sm\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    /* 7. Related university cards - 2 columns on mobile (keep 2 columns) */
    /* Removed the 1fr override - keeping default 2 columns */
    
    /* 8. Fix SVG icons size in footer */
    footer .social-icon svg {
        width: 20px !important;
        height: 20px !important;
        fill: currentColor;
    }
    
    /* 9. Lucide icons styling */
    i[data-lucide] {
        display: inline-block !important;
        width: 20px;
        height: 20px;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
        vertical-align: middle;
    }
    
    /* Icons in navigation */
    nav i[data-lucide],
    button i[data-lucide] {
        width: 24px;
        height: 24px;
    }
    
    /* Icons in content sections - larger and colored */
    section i[data-lucide],
    article i[data-lucide] {
        width: 48px;
        height: 48px;
        margin-bottom: 16px;
        color: #D4A843;
        stroke-width: 1.5;
    }
    
    /* Icons in "Why Slovakia" cards */
    #why-slovakia-grid i[data-lucide] {
        width: 56px;
        height: 56px;
        color: #D4A843;
        stroke-width: 1.5;
    }
    
    /* Icons in services cards */
    #services i[data-lucide] {
        width: 28px;
        height: 28px;
        color: #D4A843;
        stroke-width: 2;
    }
    
    /* Icons in list items - checkmarks */
    li i[data-lucide="check"] {
        width: 20px;
        height: 20px;
        color: #D4A843;
        stroke-width: 2.5;
        flex-shrink: 0;
    }
    
    /* Icons in "Why us" section */
    #about i[data-lucide] {
        width: 24px;
        height: 24px;
        color: #FFFFFF;
        stroke-width: 2;
    }
    
    /* Icons in footer and social links */
    footer svg,
    .social-icon svg {
        width: 20px !important;
        height: 20px !important;
        fill: currentColor !important;
        stroke: none !important;
    }
    
    /* 10. Header transition for hide/show */
    nav#navbar,
    header#navbar {
        transition: transform 0.3s ease-in-out !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    nav .container {
        gap: 16px;
    }

    nav .hidden.md\:flex {
        gap: 14px;
    }

    nav .hidden.md\:flex a {
        font-size: 0.78rem;
        padding-left: 13px;
        padding-right: 13px;
    }

    section[class*="py-24"],
    section[class*="py-32"],
    section[class*="lg:py-36"],
    section[class*="lg:py-40"] {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    h1 {
        font-size: 3.4rem;
        line-height: 1.08;
    }

    h2 {
        font-size: 2.35rem;
        line-height: 1.15;
    }

    .gap-16,
    .gap-12 {
        gap: 32px;
    }

    .p-12,
    .p-10 {
        padding: 32px;
    }

    .rounded-\[3rem\],
    .rounded-\[2\.5rem\] {
        border-radius: 32px;
    }

    .stats-card {
        padding: 24px;
    }

    table {
        min-width: 680px;
    }

    [class~="overflow-hidden"][class*="rounded-[2.5rem]"][class~="border"][class~="shadow-sm"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* Additional Mobile Improvements */

@media (max-width: 767px) {
    /* Instagram widget section */
    .elfsight-app-dd94a1ed-e2dc-4abb-8c91-ad30877b1d18 {
        width: 100%;
        overflow-x: hidden;
    }
    
    /* Language switcher mobile */
    .language-switcher {
        position: relative;
        z-index: 100;
    }
    
    .lang-dropdown-menu {
        position: absolute;
        right: 0;
        min-width: 200px;
    }
    
    /* University cards on related blocks (article/university pages) */
    .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    
    .grid.grid-cols-2.md\:grid-cols-4 a {
        padding: 14px;
        font-size: 0.85rem;
    }
    
    .grid.grid-cols-2.md\:grid-cols-4 h3 {
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
    /* Article cards grid */
    .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    /* Article content section - full width on mobile */
    article section.px-6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Article body - remove border radius on mobile for full-width effect */
    article .article-body {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }
    
    /* Testimonials section */
    section[class*="py-"] .text-center.mb-12 h2 {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    
    /* Stats cards in "Why us" section - 1 column on mobile */
    .grid.grid-cols-2.gap-4 {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    
    .grid.grid-cols-2.gap-4 > div {
        padding: 18px;
        min-height: 110px;
    }
    
    .grid.grid-cols-2.gap-4 .text-5xl {
        font-size: 2rem;
    }
    
    /* Hero section adjustments */
    section[class*="py-24"][class*="lg:py-40"] {
        padding-top: 56px;
        padding-bottom: 44px;
    }
    
    /* Horizontal stats bar */
    .flex.flex-wrap.justify-between.gap-8 {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
    
    .flex.flex-wrap.justify-between.gap-8 > div {
        width: 100%;
    }
    
    /* Services cards */
    #services .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    /* FAQ accordions */
    details {
        border-radius: 14px;
    }
    
    details summary {
        padding: 14px;
    }
    
    details summary h3 {
        font-size: 0.95rem;
    }
    
    /* Contact section */
    #contact .grid {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    footer .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    /* Article hero images */
    .aspect-\[21\/9\] {
        aspect-ratio: 16 / 9;
    }
    
    /* Related blocks section padding */
    section.py-10 {
        padding-top: 32px;
        padding-bottom: 32px;
    }
    
    /* Ensure no horizontal overflow */
    * {
        max-width: 100%;
    }
    
    img {
        height: auto;
    }
    
    /* Touch-friendly buttons */
    a[class*="bg-brand-gold"],
    button[class*="bg-brand-gold"] {
        min-height: 48px;
        padding: 14px 24px;
        font-size: 0.95rem;
    }
    
    /* Navigation mobile menu */
    #mobileMenu a {
        padding: 14px 18px;
        font-size: 1rem;
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 1023px) {
    /* University cards - 2 columns on tablet */
    #universities .grid.sm\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    /* Related blocks - 3 columns on tablet */
    .grid.grid-cols-2.md\:grid-cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    /* Article cards - 2 columns on tablet */
    .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* Lucide Icons Styling */
@media (max-width: 767px) {
    /* Base icon size */
    [data-lucide] {
        width: 24px;
        height: 24px;
        stroke-width: 2;
    }
    
    /* Icons with w-8 h-8 classes - GOLD COLOR, 32px */
    .w-8.h-8[data-lucide] {
        width: 32px !important;
        height: 32px !important;
        color: #D4A843 !important;
        stroke: #D4A843 !important;
        display: block;
    }
    
    /* Icons with w-4 h-4 classes - GOLD COLOR, 16px (university cards) */
    .w-4.h-4[data-lucide] {
        width: 16px !important;
        height: 16px !important;
        color: #D4A843 !important;
        stroke: #D4A843 !important;
    }
    
    /* Icons in article cards - GOLD COLOR, LARGER SIZE */
    article [data-lucide] {
        width: 32px !important;
        height: 32px !important;
        color: #D4A843 !important;
        stroke: #D4A843 !important;
        margin-bottom: 24px;
        display: block;
    }
    
    /* Icons in service cards and university characteristics */
    .w-12.h-12 [data-lucide],
    .w-10.h-10 [data-lucide],
    .w-12 [data-lucide],
    .w-10 [data-lucide] {
        width: 24px !important;
        height: 24px !important;
        color: #D4A843 !important;
        stroke: #D4A843 !important;
        margin-bottom: 0;
    }
    
    /* Icons in rounded circles */
    .rounded-full [data-lucide] {
        width: 24px !important;
        height: 24px !important;
        color: #D4A843 !important;
        stroke: #D4A843 !important;
    }
    
    /* Icons in lists */
    li [data-lucide] {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0;
        margin-bottom: 0;
        color: currentColor !important;
    }
    
    /* Icons in buttons */
    button [data-lucide],
    a [data-lucide] {
        width: 20px !important;
        height: 20px !important;
        margin-bottom: 0;
    }
    
    /* Override any conflicting text-brand-blue */
    .text-brand-blue [data-lucide] {
        color: #D4A843 !important;
        stroke: #D4A843 !important;
    }
}