/* Shared responsive safeguards for public pages */

.site-typography main img,
.site-typography main iframe,
.site-typography main video {
    max-width: 100%;
}

.site-typography main .office-grid > *,
.site-typography main .contact-main-grid > *,
.site-typography main .quick-contact > *,
.site-typography main .projects-grid > *,
.site-typography main .highlight-grid > *,
.site-typography main .highlights-grid > *,
.site-typography main .career-cards > *,
.site-typography main .gallery-grid > * {
    min-width: 0;
}

.site-typography .services-grid,
.site-typography .projects-grid,
.site-typography .career-cards,
.site-typography .office-grid,
.site-typography .quick-contact,
.site-typography .gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    grid-auto-rows: 1fr;
    gap: 18px;
}

@media (min-width: 601px) and (max-width: 900px) {
    .site-typography .about-highlights .highlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .site-typography .about-highlights {
        padding: 30px 20px;
    }

    .site-typography main .contact-main-grid {
        grid-template-columns: minmax(0, 1fr);
    }

}

@media (max-width: 1100px) {
    .site-typography .mobile-menu-btn,
    .site-typography .mobile-menu-button,
    .site-typography .gallery-menu-button {
        box-sizing: border-box;
        display: inline-flex;
        width: 42px;
        min-width: 42px;
        height: 42px;
        flex: 0 0 42px;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 0 !important;
        border: 0;
        border-radius: 5px;
        background: #075fa8 !important;
        color: #ffffff !important;
        cursor: pointer;
    }

    .site-typography .mobile-menu-btn > i {
        color: #ffffff !important;
        font-size: 19px;
        line-height: 1;
    }

    .site-typography .mobile-menu-button > span,
    .site-typography .gallery-menu-button .menu-icon span {
        display: block;
        width: 20px !important;
        height: 2px !important;
        flex: 0 0 2px;
        margin: 0 !important;
        background: #ffffff !important;
    }

    .site-typography .mobile-menu-button > span {
        margin: 2px auto !important;
    }

    .site-typography .gallery-menu-button .menu-icon {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .site-typography .gallery-menu-button > span:not(.menu-icon) {
        display: none;
    }

    .site-typography .mobile-menu-btn:focus-visible,
    .site-typography .mobile-menu-button:focus-visible,
    .site-typography .gallery-menu-button:focus-visible {
        outline: 3px solid rgba(7, 95, 168, 0.28);
        outline-offset: 2px;
    }

    body.site-typography:not(.login-popup-page) .navbar > .nav-links,
    body.site-typography:not(.login-popup-page) .site-header .navbar > .nav-links {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 1001;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 10px 4% 15px;
        background: #ffffff;
        border-top: 1px solid #e6edf2;
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
    }

    body.site-typography:not(.login-popup-page) .navbar > .nav-links.open,
    body.site-typography:not(.login-popup-page) .navbar > .nav-links.show,
    body.site-typography:not(.login-popup-page) .site-header .navbar > .nav-links.open,
    body.site-typography:not(.login-popup-page) .site-header .navbar > .nav-links.show {
        display: flex;
    }

    body.site-typography:not(.login-popup-page) .navbar > .nav-links a,
    body.site-typography:not(.login-popup-page) .site-header .navbar > .nav-links a {
        width: 100%;
        min-height: 40px;
        justify-content: flex-start;
        padding: 10px !important;
        font-size: 14px;
    }

    body.site-typography:not(.login-popup-page) .navbar > .mobile-menu-btn {
        display: inline-flex;
    }

    .site-typography.has-responsive-nav .navbar > .mobile-menu-btn {
        display: inline-flex;
    }

    .site-typography .site-header .mobile-menu-button {
        display: flex;
        flex-direction: column;
    }

    .site-typography .gallery-navigation .gallery-nav-links {
        display: none;
    }

    .site-typography .gallery-navigation .gallery-menu-button {
        display: flex;
    }

    .site-typography .gallery-navigation {
        position: relative;
    }

    .site-typography .gallery-navigation .gallery-nav-links {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 1001;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 8px 15px 15px;
        border-top: 1px solid #e6edf2;
        background: #ffffff;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .site-typography .gallery-navigation .gallery-nav-links.show {
        display: flex;
    }

    .site-typography .gallery-navigation .gallery-nav-links a {
        width: 100%;
        min-height: 40px;
        justify-content: flex-start;
        padding: 11px !important;
        font-size: 13px;
    }

    .site-typography .gallery-navigation .gallery-nav-links .btn-contact {
        margin: 2px 0;
    }

}

@media (max-width: 600px) {
    .site-typography .topbar-left {
        min-width: 0;
        gap: 8px !important;
    }

    .site-typography .topbar-left span:nth-child(2) {
        display: none !important;
    }

    .site-typography .topbar-right {
        gap: 10px !important;
    }
}

@media (max-width: 768px) {
    .site-typography main .contact-page {
        padding: 24px 16px 30px;
    }

    .site-typography main .contact-intro {
        margin-bottom: 22px;
    }

    .site-typography main .office-section {
        margin-bottom: 22px;
    }

    .site-typography main .contact-map-box,
    .site-typography main .contact-form-box {
        padding: 14px;
    }

    .site-typography main .contact-map {
        min-height: 300px;
    }

    .site-typography main .gallery-main,
    .site-typography main .team-page-content,
    .site-typography main .services-page-content,
    .site-typography main .page-content {
        padding-left: 4%;
        padding-right: 4%;
    }

}

@media (max-width: 700px) {
    .site-typography main .contact-main-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 600px) {
    .site-typography main .contact-page {
        padding: 20px 12px 26px;
    }

    .site-typography main .office-card {
        padding: 14px;
    }

    .site-typography main .contact-map {
        min-height: 260px;
    }

    .site-typography main .quick-contact-item a {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 380px) {
    .site-typography main .contact-map-box,
    .site-typography main .contact-form-box {
        padding: 12px;
    }

    .site-typography main .office-card {
        gap: 9px;
        padding: 12px;
    }

    .site-typography main .office-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}