/* ======== Media Query (Mobile/Tablet - Using 900px breakpoint) ======== */
@media (max-width: 900px) {
    .nav-links-left,
    .nav-links-right,
    .language-switcher,
    .logo-placeholder:not(header.sticky-active .logo-placeholder):not(body.page-content header .logo-placeholder) {
        display: none;
    }

    .hamburger-menu {
        display: flex;
    }

    .navbar {
        justify-content: flex-start;
        padding: 1rem 1.5rem;
    }

    header.sticky-active .navbar,
    body.page-content header .navbar {
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem 1.5rem;
    }

    header.sticky-active .logo-placeholder,
    body.page-content header .logo-placeholder {
        display: block;
        opacity: 1;
        transform: scale(1);
    }

    body.page-content {
        padding-top: calc(70px + var(--safe-top)); /* Adjust mobile padding top */
    }

    .hero {
        min-height: 60vh;
        height: auto;
    }

    .hero-content {
        margin-top: 0; /* Let header handle safe area */
    }

    .hero-content h1 {
        font-size: 2rem;
    }
    .hero-content p {
        font-size: 1rem;
    }

    section:not(.hero) {
        padding: 2.5rem 0;
    }

    .footer {
        padding-top: 2rem;
        padding-bottom: 1rem;
    }

    .knowledge-sidebar-col {
        display: none;
    }
    .knowledge-content-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 901px) {
    section:not(.hero) {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* ======== Safe Area Supports ======== */
@supports (padding-top: env(safe-area-inset-top)) {
    .mobile-sidebar {
        height: 100%;
    }

    body.page-content header,
    header.sticky-active {
        padding-top: env(safe-area-inset-top);
    }

    body.page-content {
        padding-top: calc(82px + env(safe-area-inset-top));
    }

    .hero-content {
        margin-top: env(safe-area-inset-top);
    }

    #cfo-section,
    #cfp-section,
    #netzero-section,
    #cbam-section,
    #ghg-section,
    #esg-section {
        scroll-margin-top: calc(6rem + env(safe-area-inset-top));
    }

    .knowledge-sidebar-col .sticky-top {
        top: calc(6rem + env(safe-area-inset-top));
    }
}