/* Final shared mobile safeguards. Desktop composition remains unchanged. */
@media (max-width: 767px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    html body main,
    html body main section,
    html body main article,
    html body main aside,
    html body main figure,
    html body main form {
        min-width: 0;
        max-width: 100%;
    }

    html body main img,
    html body main video,
    html body main iframe {
        max-width: 100%;
    }

    html body main h1,
    html body main h2,
    html body main h3,
    html body main .section-label,
    html body main [class$="-kicker"],
    html body main [class*="-kicker "] {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        overflow-wrap: anywhere;
        text-align: center !important;
    }

    html body main .section-heading,
    html body main .directory-heading,
    html body main .tourism-heading,
    html body main .contact-heading,
    html body main .updates-intro,
    html body main .panel-header,
    html body main .updates-column-heading {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    html body main .section-heading > *,
    html body main .directory-heading > *,
    html body main .tourism-heading > *,
    html body main .contact-heading > *,
    html body main .updates-intro > *,
    html body main .panel-header > *,
    html body main .updates-column-heading > * {
        margin-left: auto;
        margin-right: auto;
    }

    /* Compact utility bar without social marks. */
    html body .lgu-utility-inner {
        display: flex;
        min-height: 0;
        flex-direction: column;
        justify-content: center;
        gap: 3px;
        padding: 5px 0;
        text-align: center;
    }

    html body .lgu-official-site-label,
    html body .lgu-utility-links,
    html body .lgu-citizen-date {
        width: 100%;
        margin: 0;
        text-align: center;
    }

    html body .lgu-contact,
    html body .lgu-utility-socials .lgu-social-link {
        display: none !important;
    }

    /* Center the seal and wordmark while leaving the menu control independent. */
    html body .lgu-nav-inner {
        position: relative;
        min-height: 70px;
        justify-content: center;
        padding-right: 52px;
        padding-left: 52px;
    }

    html body .lgu-brand {
        width: min(230px, calc(100vw - 132px));
        min-width: 0;
        justify-content: center;
        gap: 7px;
    }

    html body .lgu-brand .lgu-seal {
        width: 43px;
        height: 43px;
        flex: 0 0 43px;
    }

    html body .lgu-brand-wordmark-wrap {
        justify-content: center;
    }

    html body .lgu-header-wordmark {
        width: min(142px, 100%);
        height: 54px;
        object-fit: contain;
        object-position: center;
    }

    html body .lgu-menu-toggle {
        position: absolute;
        right: 0;
        margin: 0;
    }

    /* One stable two-column search control; no collapsing flex children. */
    html body .municipal-homepage .hero-copy .service-search {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 50px !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 52px !important;
        margin: 22px 0 0 !important;
        padding: 0 !important;
        overflow: hidden;
        border: 1px solid rgba(0, 30, 65, .14) !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 8px 22px rgba(0, 30, 65, .10) !important;
    }

    html body .municipal-homepage .hero-copy .service-search input {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #001e41 !important;
        font-size: 13px !important;
    }

    html body .municipal-homepage .hero-copy .service-search button {
        position: static !important;
        display: grid !important;
        place-items: center !important;
        width: 50px !important;
        min-width: 50px !important;
        height: 52px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #0877c9 !important;
    }

    html body .municipal-homepage .hero-copy .service-search button svg {
        display: block;
        width: 21px;
        height: 21px;
    }

    html body .municipal-homepage .hero-copy,
    html body .municipal-homepage .hero-script,
    html body .municipal-homepage .hero-tagline,
    html body .municipal-homepage .hero-summary {
        margin-left: auto;
        margin-right: auto;
        text-align: center !important;
    }

    html body .municipal-homepage .hero-tagline::after {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    html body .about-hero__grid,
    html body .profile-layout,
    html body .narrative-grid,
    html body .mayor-corner,
    html body .official-grid,
    html body .office-directory,
    html body .barangay-layout,
    html body .programs-hero-grid,
    html body .program-card-grid,
    html body .tourism-hero__grid,
    html body .tourism-card-grid,
    html body .tourism-feature-grid,
    html body .tourism-safety-grid,
    html body .contact-hero__grid,
    html body .contact-form-layout,
    html body .direct-channel-grid,
    html body .contact-map-layout,
    html body .self-service-grid,
    html body .updates-hero-grid,
    html body .updates-bottom-grid,
    html body .calendar-layout,
    html body .calendar-content-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .about-hero__copy,
    html body .programs-hero-copy,
    html body .tourism-hero__grid > div,
    html body .contact-hero__grid > div,
    html body .updates-hero-grid > div {
        text-align: center !important;
    }

    html body .about-hero__copy p,
    html body .programs-hero-copy p,
    html body .tourism-hero__grid > div > p,
    html body .contact-hero__grid > div > p,
    html body .updates-hero-grid > div > p {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    html body .lgu-primary-nav {
        max-width: calc(100vw - 16px);
        overflow-x: hidden;
    }

    html body .lgu-primary-nav.open,
    html body .lgu-primary-nav.is-open {
        display: flex;
    }

    html body .lgu-primary-nav .lgu-dropdown-menu,
    html body .lgu-public-search-panel {
        width: 100%;
        max-width: 100%;
    }

    html body input,
    html body select,
    html body textarea,
    html body button {
        max-width: 100%;
    }

    html body table {
        max-width: 100%;
    }
}

/* Compact municipal footer on phones without reducing legibility. */
@media (max-width: 767px) {
    html body footer.lgu-footer .lgu-footer-grid,
    html body footer.lgu-footer .lgu-footer-grid--citizen {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        padding: 22px 0 18px !important;
    }

    html body footer.lgu-footer .lgu-footer-grid > section {
        min-width: 0;
        padding: 14px 12px !important;
        border-top: 1px solid rgba(217, 229, 240, .2);
    }

    html body footer.lgu-footer .lgu-footer-grid > section:nth-child(-n+2) {
        border-top: 0;
    }

    html body footer.lgu-footer h2 {
        margin-bottom: 5px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    html body footer.lgu-footer p,
    html body footer.lgu-footer a {
        font-size: 11px !important;
        line-height: 1.5 !important;
        overflow-wrap: anywhere;
    }

    html body footer.lgu-footer .lgu-footer-seal {
        width: 50px !important;
        height: 50px !important;
        margin-top: 8px !important;
    }

    html body footer.lgu-footer .lgu-footer-bottom {
        min-height: 0;
        padding: 12px 0 !important;
        gap: 8px !important;
    }
}

@media (max-width: 380px) {
    html body footer.lgu-footer .lgu-footer-grid > section {
        padding-inline: 8px !important;
    }
}

@media (max-width: 420px) {
    html body .lgu-official-site-label,
    html body .lgu-citizen-date {
        font-size: 9px;
        line-height: 1.35;
    }

    html body .lgu-nav-inner {
        padding-right: 48px;
        padding-left: 48px;
    }

    html body .lgu-brand {
        width: min(215px, calc(100vw - 112px));
    }

    html body .lgu-header-wordmark {
        width: min(132px, 100%);
    }
}

/* Unified mobile action alignment and content rhythm. */
@media (max-width: 767px) {
    html body main section,
    html body main section > header,
    html body main article,
    html body main aside,
    html body main figure,
    html body main blockquote {
        text-align: center;
    }

    html body main section p,
    html body main section small,
    html body main section em,
    html body main section cite,
    html body main [class*="source"],
    html body main [class*="note"],
    html body main [class*="status"] {
        margin-right: auto;
        margin-left: auto;
        text-align: center !important;
    }

    html body main :is(
        .services-all,
        .home-standard-button,
        .updates-view-all,
        .updates-button,
        .calendar-full-link,
        .contact-button,
        .tourism-button,
        .citizen-care-action,
        .emergency-action,
        .service-primary-link,
        .toolbar-primary
    ) {
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: min(100%, 240px) !important;
        min-height: 40px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding: 10px 18px !important;
        text-align: center !important;
        white-space: normal !important;
    }

    html body main :is(
        .services-all,
        .home-standard-button,
        .updates-view-all,
        .updates-button,
        .calendar-full-link,
        .contact-button,
        .tourism-button,
        .citizen-care-action,
        .service-primary-link,
        .toolbar-primary
    )::after {
        display: none !important;
        content: none !important;
    }

    html body main .updates-header-actions,
    html body main .facebook-more-wrap,
    html body main .map-actions,
    html body main .social-actions,
    html body main .toolbar-actions,
    html body main .travel-advisory > div:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        gap: 10px !important;
        text-align: center !important;
    }

    /* What's New uses a compact centered action rather than a full-width bar. */
    html body main .updates-header-actions .updates-view-all,
    html body main .facebook-more-wrap .updates-button {
        width: auto !important;
        max-width: 190px !important;
        padding-inline: 18px !important;
    }

    html body main .updates-view-all span,
    html body main .official-update-arrow,
    html body main .services-all > span[aria-hidden="true"],
    html body main .home-standard-button > span[aria-hidden="true"],
    html body main .program-card-body > a > span,
    html body main .service-card > a > span,
    html body main .support-card > a > span,
    html body main .quick-info-grid > a > b {
        display: none !important;
    }

    /* Home calendar, transparency, and program actions share one quiet treatment. */
    html body.municipal-homepage main .panel-header > a,
    html body.municipal-homepage main .calendar-full-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        max-width: 190px !important;
        min-height: 38px !important;
        margin: 8px auto 0 !important;
        padding: 9px 16px !important;
        border: 0 !important;
        border-radius: 4px !important;
        background: #dcecf6 !important;
        color: #003b70 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-decoration: none !important;
    }

    html body.municipal-homepage main .calendar-full-link {
        max-width: 180px !important;
    }

    html body main .panel-header,
    html body main .facebook-posts-heading,
    html body main .documents-panel > header,
    html body main .events-card > header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
    }

    html body main .panel-header > div,
    html body main .facebook-posts-heading > div,
    html body main .documents-panel > header > div,
    html body main .events-card > header > div {
        width: 100%;
        text-align: center !important;
    }

    html body main .program-card-body,
    html body main .tourism-card,
    html body main .tourism-feature-card,
    html body main .contact-panel,
    html body main .facebook-post-card,
    html body main .transparency-category-grid > a,
    html body main .calendar-help,
    html body main .sync-card {
        text-align: center !important;
    }

    html body main .program-card-body > a,
    html body main .transparency-actions a,
    html body main .transparency-category-grid a,
    html body main .calendar-help a,
    html body main .sync-card a {
        justify-content: center !important;
        width: fit-content !important;
        max-width: min(100%, 230px) !important;
        margin-right: auto !important;
        margin-left: auto !important;
        text-align: center !important;
    }

    /* Keep the final information strip light and integrated with the page. */
    html body main .quick-info {
        border-top: 1px solid #d9e5f0 !important;
        border-bottom: 1px solid #d9e5f0 !important;
        background: transparent !important;
        color: #002e5d !important;
    }

    html body main .quick-info-grid {
        background: transparent !important;
    }

    html body main .quick-info-grid > a,
    html body main .quick-info-grid > div {
        justify-content: center !important;
        min-height: 92px !important;
        padding: 18px 14px !important;
        border-color: #d9e5f0 !important;
        background: transparent !important;
        color: #002e5d !important;
        text-align: center !important;
        transition: background-color .22s ease, color .22s ease !important;
    }

    html body main .quick-info-grid > a:hover,
    html body main .quick-info-grid > a:focus-visible {
        background: #e8f2f8 !important;
        color: #002e5d !important;
    }

    html body main .quick-info-grid svg {
        color: #087ac7 !important;
    }

    html body main .quick-info-grid strong {
        color: #002e5d !important;
        text-align: center !important;
    }

    html body main .quick-info-grid small {
        color: #5f706f !important;
        text-align: center !important;
    }
}