/* Site-wide layout fixes:
   1) Horizontal breathing room for page containers (was flush against the
      viewport edge on several templates - header, single.php hero/article wrap).
   2) Mobile header: guarantee logo sits left and the hamburger toggle sits
      right and is actually visible, regardless of any other cascade rule. */

.container,
.max-w-8xl {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Mobile header (below Tailwind's md breakpoint, 768px) */
@media (max-width: 767px) {
    #masthead .site-branding {
        margin-right: auto;
    }
    #masthead #site-navigation {
        display: none !important;
    }
    #masthead #mobile-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        visibility: visible !important;
        opacity: 1 !important;
        margin-left: auto;
    }
}

/* Desktop/tablet: hide the hamburger, show the real nav */
@media (min-width: 768px) {
    #masthead #mobile-menu-toggle {
        display: none !important;
    }
}

/* Front page hero badge ("All Service Help" pill) */
.hero-badge {
    display: flex;
    align-items: center;
    border: 1px solid #D1D5DB;
    border-radius: 9999px;
    padding: 8px 18px;
    background-color: white;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #171717;
    word-wrap: break-word;
}

/* "Latest" section (home + archive) - taller card images on desktop */
@media (min-width: 1024px) {
    #latest-grid .card-image-wrap {
        height: 325px;
    }
    /* First (vertical) article in the Latest grid - slightly taller still */
    #latest-grid > div:first-child .card-image-wrap {
        height: 340px;
    }
}