/* ==========================================
   LAYOUT.CSS - Semantic HTML Structure
   ==========================================

   Purpose:
   - Styles for semantic HTML elements (body, header, main, footer, section)
   - Page structure and layout foundation
   - Navigation components (shared between header and footer)

   DO NOT put here:
   - Reusable component classes (those go in core.css)
   - Page-specific customizations (those go in dating.css)

   ========================================== */

/* ==========================================
   Body & Main Layout Structure
   ========================================== */
body {
    height: 100dvh; /* 100vh or 100dvh for mobile-friendly */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* prevent body scroll */
}

/* ==========================================
   Header
   ========================================== */
header {
    height: var(--header-height);
    flex-shrink: 0; /* prevent header from shrinking */
    position: relative;
    z-index: 1001;
    isolation: isolate; /* Prevent blur from affecting header */

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--x-padding);
    animation: fadeInDown var(--duration-base) ease-out;

    /* Performance optimizations */
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Header Logo */
.header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Prevent logo from shrinking */
}

.header__logo img {
    height: auto;
    max-height: 50px;
    width: auto;
}

/* Burger Menu Button - Hidden on desktop */
.header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    transition: transform var(--transition-smooth);
    flex-shrink: 0; /* Prevent burger from shrinking */
}

.header__burger:hover {
    transform: scale(1.1);
}

.burger__line {
    width: 28px;
    height: 3px;
    background-color: var(--nadiyno-navy);
    border-radius: 2px;
    transition: all var(--transition-smooth);
}

/* Burger animation when active */
.header__burger.active .burger__line:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.header__burger.active .burger__line:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.header__burger.active .burger__line:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Navigation */
.header__navbar {
    display: flex;
    gap: var(--gap-s);
    font-size: 24px;
}

/* ==========================================
   Main Content Area
   ========================================== */
main {
    flex: 1 1 auto;
    gap: 69px;
    overflow-x: hidden;
    overflow-y: auto; /* Allow vertical scrolling */
    scroll-behavior: smooth;

    display: flex;
    flex-direction: column;

}

/* ==========================================
   Footer
   ========================================== */
footer {
    margin-top: var(--section-gap);
    background-color: var(--nadiyno-navy);
    border-radius: 76px 76px 0 0;
    color: var(--nadiyno-white);
    padding: var(--footer-padding-y) 0 var(--gap-md);
    display: flex;
    flex-direction: column;
    animation: fadeInUp var(--duration-slower) ease-out;

    /* Performance optimizations */
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    contain: layout style;
}

.footer__sponsors {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--footer-logos-gap);
    flex-wrap: wrap;
    padding: 0 var(--gap-md) var(--footer-section-gap);
}

.footer__logo {
    display: block;
    height: var(--footer-logo-height);
    width: auto;
    object-fit: contain;
    transition: transform var(--transition-smooth), opacity var(--transition-smooth);
    opacity: 0.9;
    animation: fadeIn var(--duration-slow) ease-out;
    animation-fill-mode: both;
}

/* Stagger footer logo animations */
.footer__logo:nth-child(1) { animation-delay: 0.1s; }
.footer__logo:nth-child(2) { animation-delay: 0.2s; }
.footer__logo:nth-child(3) { animation-delay: 0.3s; }
.footer__logo:nth-child(4) { animation-delay: 0.4s; }
.footer__logo:nth-child(5) { animation-delay: 0.5s; }

.footer__logo:hover {
    transform: translateY(-3px);
    opacity: 1;
}

.footer__divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0;
}

.footer__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);
    padding: var(--footer-section-gap) var(--gap-md);
}

.footer__logo-nadiyno {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-md);
    width: 100%;
}

.footer__logo-nadiyno a {
    display: inline-block;
    transition: transform var(--transition-smooth), opacity var(--transition-smooth);
}

.footer__logo-nadiyno img {
    height: 60px;
    width: auto;
}

.footer__logo-nadiyno a:hover {
    transform: scale(1.05);
    opacity: var(--opacity-hover);
}

.footer__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-sm);
    flex-wrap: wrap;
}

.footer__socials {
    display: flex;
    justify-content: center;
    gap: var(--gap-xs-plus);
    align-items: center;
}

.footer__social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: transform var(--transition-smooth), background-color var(--transition-smooth);
    animation: fadeIn var(--duration-base) ease-out;
    animation-fill-mode: both;
}

/* Stagger social icon animations */
.footer__social-icon:nth-child(1) { animation-delay: 0.6s; }
.footer__social-icon:nth-child(2) { animation-delay: 0.7s; }
.footer__social-icon:nth-child(3) { animation-delay: 0.8s; }

.footer__social-icon:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

.footer__social-icon_instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z'/%3E%3C/svg%3E");
}

.footer__social-icon_facebook {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'/%3E%3C/svg%3E");
}

.footer__social-icon_mail {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E");
}

.footer__copyright {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-xs);
    padding: var(--gap-md) var(--gap-md) 0;
}

.footer__copyright-text {
    font-size: var(--font-size-b6);
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    font-weight: 400;
}

.footer__policy {
    text-align: center;
}

.footer__policy-link {
    font-size: var(--font-size-b6);
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color var(--transition-smooth);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.footer__policy-link:hover {
    color: var(--nadiyno-white);
    border-bottom-color: var(--nadiyno-pnnk);
}

/* ==========================================
   Section Styles
   ========================================== */
section {
    display: flex;
    flex-direction: column;
    padding: var(--full-section-padding);
    border-radius: var(--border-radius-l);
    gap: var(--gap-lg);
    animation: fadeInUp var(--duration-slower) ease-out;
    animation-fill-mode: both;

    /* Performance optimizations */
    contain: layout style; /* CSS containment for better performance */
    will-change: opacity, transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    scroll-margin-top: 10px;
    @media (max-width: 600px) {
        border-radius: var(--border-radius-m);
    }
}


.section__header {
    display: flex;
    flex-direction: column;
    padding: 0 calc(69px * 3);
    text-align: left;
    gap: var(--gap-xs);

    position: relative;
    animation: fadeIn var(--duration-slow) ease-out;
}

.section__footer {
    display: flex;
    flex-direction: column;
    gap: 21px;
    justify-content: center;
    align-items: center;
    .section__subtitle {
        display: block;
        text-align: center;
        width: 100%;
        margin-left: -69px;
        margin-right: -69px;
        font-size: var(--font-size-b3);
        font-family: var(--body-font-family);
    }
}

.section__subtitle {
    font-weight: normal;
}

.section__item_full-bleed {
    margin: calc(-1 * var(--section-padding-y)) calc(-1 * var(--section-padding-x));
}

.section__item_x-bleed {
    margin-left: calc(-1 * var(--section-padding-x));
    margin-right: calc(-1 * var(--section-padding-x));
}

.section__item_y-bleed {
    margin-top: calc(-1 * var(--section-padding-y));
    margin-bottom: calc(-1 * var(--section-padding-y));
}


/* Automatic bleed for section__body containing table */
/* .section__body:has(table) {
    margin-left: calc(-1 * var(--section-padding-x));
    margin-right: calc(-1 * var(--section-padding-x));
} */

.section__icon {
    width: 100px;
    transition: var(--transition-smooth);
}

/* Animated icon with alternating SVGs */
.section__icon_animated {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
}

.section__icon-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
}

.section__icon-svg_1 {
    opacity: 1;
    animation: iconSwap 2s step-end infinite;
}

.section__icon-svg_2 {
    opacity: 0;
    animation: iconSwap 2s step-end infinite reverse;
}

@keyframes iconSwap {
    0%, 49.99% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

/* Note: section__body display is handled by specific sections
   Default is block to allow flexibility for grid/flex layouts */

/* ==========================================
   Navigation Links (Header & Footer)
   ========================================== */
.navbar__links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--gap-xs);
    color: var(--nadiyno-navy);
}

/* Common navigation link styles */
.navbar__link,
.footer__nav-link {
    font-family: var(--heading-font-family);
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--link-transition);
    animation: fadeInDown var(--duration-base) ease-out;
    animation-fill-mode: both;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--nadiyno-navy);
}

/* Stagger navbar link animations */
.navbar__link:nth-child(1) { animation-delay: 0.1s; }
.navbar__link:nth-child(2) { animation-delay: 0.2s; }
.navbar__link:nth-child(3) { animation-delay: 0.3s; }
.navbar__link:nth-child(4) { animation-delay: 0.4s; }
.navbar__link:nth-child(5) { animation-delay: 0.5s; }
.navbar__link:nth-child(6) { animation-delay: 0.6s; }

.navbar__link span::after,
.footer__nav-link::after {
    content: "";
    display: block;
    position: relative;
    width: 100%;
    height: 2px;
    top: 2px;
    background: transparent;
    transition: var(--link-transition);
}

.navbar__link:hover span::after,
.footer__nav-link:hover::after {
    background: var(--nadiyno-pink);
}

.navbar__link:hover {
    color: var(--nadiyno-navy);
    transform: translateY(-2px);
}

/* Navbar icon styles */
.navbar__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Footer-specific navigation styles */
.footer__nav-link {
    color: var(--nadiyno-white);
}

.footer__nav-link:hover {
    color: var(--nadiyno-white);
    transform: translateY(-2px);
}

/* ==========================================
   Table Styles - Brand Colors
   ========================================== */
/* ==========================================
   TABLE - Complete Refactor
   ========================================== */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--nadiyno-white);
    border-radius: var(--border-radius-m);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* ==========================================
   TABLE HEAD
   ========================================== */

thead {
    background: var(--nadiyno-navy);
}

thead tr {
    border-bottom: 2px solid var(--nadiyno-pink);
}

thead th {
    padding: 16px 12px;
    text-align: center;
    font-family: var(--heading-font-family);
    font-size: var(--font-size-b5);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--nadiyno-white);
    letter-spacing: 0.05em;
}

/* First row - add extra top padding */
thead tr:first-child th {
    padding-top: 33px;
}

thead th:first-child {
    text-align: left;
    padding-left: 24px;
}

/* ==========================================
   TABLE BODY - Regular Rows
   ========================================== */

tbody tr {
    border-bottom: 1px solid rgba(200, 214, 255, 0.3);
    transition: background-color var(--transition-smooth);
}

tbody tr:last-child {
    border-bottom: none;
}

tbody tr:hover:not([data-category]):not([data-total]) {
    background: rgba(255, 91, 217, 0.05);
}

tbody td {
    padding: 12px;
    text-align: center;
    color: var(--nadiyno-navy);
    font-size: var(--font-size-b4);
}

tbody td:first-child {
    text-align: left;
    font-weight: 600;
    padding-left: 24px;
}

tbody td strong {
    font-weight: 700;
    color: var(--nadiyno-navy);
}

/* ==========================================
   CATEGORY ROWS - Collapsible Headers
   ========================================== */

tbody tr[data-category] {
    background: var(--nadiyno-navy);
    cursor: pointer;
    user-select: none;
    transition: all var(--transition-smooth);
}

tbody tr[data-category]:hover {
    background: var(--nadiyno-pink);
    transform: translateX(4px);
}

tbody tr[data-category] td {
    padding: 14px 12px;
    color: var(--nadiyno-white);
    font-family: var(--heading-font-family);
    font-size: var(--font-size-b5);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

tbody tr[data-category] td:first-child {
    padding-left: 20px;
    padding-right: 40px;
    position: relative;
}

/* Make the entire first cell content flex */
tbody tr[data-category] td:first-child {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Category icons */
tbody tr[data-category] td:first-child i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke-width: 2.5;
    display: inline-flex;
}

tbody tr[data-category] td:first-child i svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Expand/collapse arrow */
tbody tr[data-category] td:first-child::after {
    content: '▶';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    transition: transform var(--transition-smooth);
    color: var(--nadiyno-white);
}

tbody tr[data-category].expanded td:first-child::after {
    transform: translateY(-50%) rotate(90deg);
}

tbody tr[data-category] td strong {
    color: var(--nadiyno-white);
}

/* ==========================================
   DETAIL ROWS - Category Group Items
   ========================================== */

tbody tr[data-category-group] {
    background: rgba(200, 214, 255, 0.08);
}

tbody tr[data-category-group]:hover {
    background: rgba(200, 214, 255, 0.15);
}

tbody tr[data-category-group].visible {
    display: table-row;
}

/* ==========================================
   TOTAL ROW
   ========================================== */

tbody tr[data-total] {
    background: var(--nadiyno-navy);
    border-top: 2px solid var(--nadiyno-pink);
    border-bottom: 2px solid var(--nadiyno-pink);
}

tbody tr[data-total]:hover {
    background: var(--nadiyno-navy);
    transform: none;
}

tbody tr[data-total] td {
    padding: 16px 12px;
    font-family: var(--heading-font-family);
    font-size: var(--font-size-b4);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--nadiyno-yellow);
}

tbody tr[data-total]:last-child td {
    padding: 16px 12px 33px 12px;
}

tbody tr[data-total]:last-child {
    border-bottom: none;
}

tbody tr[data-total] td:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 20px;
}

tbody tr[data-total] td:first-child i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke-width: 2.5;
    color: var(--nadiyno-yellow);
}

tbody tr[data-total] td:first-child i svg {
    display: block;
    width: 100%;
    height: 100%;
}

tbody tr[data-total] td strong {
    color: var(--nadiyno-yellow);
}

/* Rating row - yellow bottom border to connect with percentage row */
tbody tr[data-rating] {
    border-bottom: 2px solid var(--nadiyno-yellow);
}

/* Percentage row - pink text variant */
tbody tr[data-percentage] {
    background: var(--nadiyno-navy) !important;
    border-top: 2px solid var(--nadiyno-yellow);
    border-bottom: 2px solid var(--nadiyno-yellow);
}

tbody tr[data-percentage]:hover {
    background: var(--nadiyno-navy) !important;
}

tbody tr[data-percentage] td {
    color: var(--nadiyno-pink) !important;
}

tbody tr[data-percentage] td:first-child i {
    color: var(--nadiyno-pink) !important;
}

tbody tr[data-percentage] td strong {
    color: var(--nadiyno-pink) !important;
}

/* ==========================================
   Responsive Design - Layout Elements
   ========================================== */

/* Laptop (1200px - 1439px) */
@media screen and (max-width: 1439px) {
    footer {
        padding: var(--footer-padding-y) 0 var(--gap-sm);
    }
}

/* Tablet (768px - 1199px) */
@media screen and (max-width: 1199px) {
    footer {
        padding: var(--footer-padding-y) 0 var(--gap-sm);
    }

    .footer__sponsors {
        gap: var(--gap-sm);
        padding: 0 var(--gap-sm) var(--gap-md);
    }

    .footer__logo {
        height: 50px;
    }

    .footer__main {
        padding: var(--gap-md) var(--gap-sm);
    }

    .footer__logo-nadiyno img {
        height: 50px;
    }

    .footer__nav {
        gap: var(--gap-xs-plus);
    }

    .footer__nav-link {
        font-size: var(--font-size-b6);
    }

    .footer__social-icon {
        width: 40px;
        height: 40px;
        background-size: 22px 22px;
    }

    .footer__copyright {
        padding: var(--gap-sm) var(--gap-sm) 0;
    }

    /* Table responsive */
    table {
        font-size: var(--font-size-b5);
    }

    thead th {
        padding: var(--gap-2xs) var(--gap-3xs);
        font-size: var(--font-size-b4);
    }

    tbody td {
        padding: var(--gap-2xs) var(--gap-3xs);
    }

    tbody td.yes,
    tbody td.no {
        font-size: var(--font-size-h5);
    }
}

/* Mobile (below 768px) */
@media screen and (max-width: 767px) {
    footer {
        padding: var(--gap-md) 0 var(--gap-2xs);
        border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;
    }

    .footer__sponsors {
        flex-wrap: wrap;
        gap: var(--gap-sm);
        padding: 0 var(--gap-xs) var(--gap-sm);
    }

    .footer__logo {
        height: 40px;
    }

    .footer__main {
        padding: var(--gap-sm) var(--gap-xs);
        gap: var(--gap-sm);
    }

    .footer__logo-nadiyno img {
        height: 44px;
    }

    .footer__nav {
        flex-wrap: wrap;
        gap: var(--gap-2xs);
    }

    .footer__nav-link {
        font-size: 12px;
    }

    .footer__socials {
        gap: var(--gap-2xs);
    }

    .footer__social-icon {
        width: 38px;
        height: 38px;
        background-size: 20px 20px;
    }

    .footer__copyright {
        padding: var(--gap-2xs) var(--gap-xs) 0;
        gap: var(--gap-3xs);
    }

    .footer__copyright-text {
        font-size: 11px;
    }

    .footer__policy-link {
        font-size: 11px;
    }

    /* Table responsive - horizontal scroll */
    table {
        min-width: 600px;
        font-size: 14px;
    }

    thead th {
        padding: var(--gap-3xs);
        font-size: 14px;
    }

    thead th:first-child {
        padding-left: var(--gap-2xs);
    }

    tbody td {
        padding: var(--gap-3xs);
    }

    tbody td:first-child {
        padding-left: var(--gap-2xs);
    }

    tbody td.yes,
    tbody td.no {
        font-size: var(--font-size-h6);
    }

    tbody td small {
        font-size: 10px;
    }
}

/* Small Mobile (below 480px) */
@media screen and (max-width: 479px) {
    table {
        min-width: 500px;
        font-size: 12px;
    }
}

/* ==========================================
   GLOBAL MOBILE RESPONSIVENESS
   ========================================== */

/* Tablet (max-width: 900px) */
@media (max-width: 900px) {
    header {
        padding: 0 var(--gap-m);
    }

    .header__navbar {
        gap: var(--gap-xs);
        font-size: 20px;
    }

    .section__header {
        padding: 0 var(--gap-xl);
    }

    .section__title {
        text-align: center;
    }

    .section__subtitle {
        text-align: center;
    }

    footer {
        padding: var(--gap-l) 0 var(--gap-s);
    }

    .footer__sponsors {
        gap: var(--gap-m);
        padding: 0 var(--gap-s) var(--gap-l);
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer__logo {
        height: 28px;
    }

    .footer__main {
        padding: var(--gap-l) var(--gap-s);
    }

    .footer__nav {
        flex-wrap: wrap;
        gap: var(--gap-xs);
        justify-content: center;
    }
}

/* Mobile (max-width: 600px) */
@media (max-width: 600px) {
    :root {
        --header-height: 60px;
        --paddding: var(--gap-m);
    }

    header {
        padding: 0 var(--gap-s);
    }

    /* Adjust logo size for mobile header */
    .header__logo img {
        max-height: 40px;
    }

    /* Show burger menu button */
    .header__burger {
        display: flex;
    }

    /* Mobile navigation backdrop overlay - blurs and shadows the page */
    .menu-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(37, 44, 62, 0.5);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: 999;

        /* Hidden by default */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    /* Show backdrop when menu is active */
    .menu-backdrop.active {
        opacity: 1;
        pointer-events: auto;
    }

    /* Mobile navigation - hidden by default, slides down when active */
    .header__navbar {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: auto;

        background: var(--nadiyno-white);
        box-shadow: 0 10px 40px rgba(37, 44, 62, 0.3);
        border-radius: 0 0 var(--border-radius-m) var(--border-radius-m);

        flex-direction: column;
        gap: 0;
        padding: var(--gap-s) 0;
        z-index: 1000;

        /* Hidden by default */
        transform: translate3d(0, -100%, 0);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease;

        /* Performance optimizations */
        will-change: transform, opacity;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Show navbar when burger is active */
    .header__navbar.active {
        transform: translate3d(0, 0, 0);
        opacity: 1;
        pointer-events: auto;
    }

    .header__navbar a {
        padding: var(--gap-xs) var(--gap-m);
        font-size: 18px;
        color: var(--nadiyno-navy);
        text-align: left;
        border-bottom: 1px solid rgba(37, 44, 62, 0.1);
        transition: background-color var(--transition-fast),
                    padding-left var(--transition-fast);
    }

    .header__navbar a:last-child {
        border-bottom: none;
    }

    .header__navbar a:hover,
    .header__navbar a:focus {
        background-color: var(--nadiyno-light-blue);
        padding-left: calc(var(--gap-m) + var(--gap-xs));
    }

    main {
        gap: var(--gap-m);
    }

    .section__header {
        padding: 0 var(--gap-s);
    }

    .section__title {
        text-align: left;
        line-height: 1.2;
    }

    .section__subtitle {
        text-align: left;
    }

    .section__footer {
        align-items: flex-start;
        padding: 0 var(--gap-s);
    }

    .section__footer .section__subtitle {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
    }

    footer {
        border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;
        padding: var(--gap-m) 0 var(--gap-2xs);
    }

    .footer__sponsors {
        gap: var(--gap-s);
        padding: 0 var(--gap-2xs) var(--gap-m);
    }

    .footer__logo {
        height: 24px;
    }

    .footer__main {
        padding: var(--gap-m) var(--gap-2xs);
    }

    .footer__logo-nadiyno img {
        max-width: 120px;
    }

    .footer__nav {
        flex-direction: column;
        gap: var(--gap-2xs);
        text-align: center;
        font-size: 14px;
    }

    .footer__socials {
        justify-content: center;
    }

    .footer__copyright {
        padding: var(--gap-s) var(--gap-2xs) 0;
    }
}

/* ==========================================
   Scroll to Top Button
   ========================================== */
.scroll-top {
    position: fixed;
    bottom: var(--gap-l);
    right: var(--gap-l);
    width: 48px;
    height: 48px;

    background: var(--nadiyno-navy);
    color: var(--nadiyno-white);
    border: 2px solid var(--nadiyno-pink);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);

    transition: opacity 0.3s ease,
                visibility 0.3s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color var(--transition-smooth);

    box-shadow: 0 4px 12px rgba(37, 44, 62, 0.3);
    z-index: 999;

    /* Performance optimizations */
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top:hover {
    background: var(--nadiyno-pink);
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(255, 91, 217, 0.4);
}

.scroll-top svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .scroll-top {
        bottom: var(--gap-m);
        right: var(--gap-m);
        width: 44px;
        height: 44px;
    }

    .scroll-top svg {
        width: 20px;
        height: 20px;
    }
}