/*
 * InfinityIT website refinements - global remainder only.
 * Reduced 2026-09: everything page-specific (contact form, printer
 * catalogue/product, home dark tiles, why-proof trust metrics) moved to
 * that page's own CSS file. The dead .services-index-hero/.pagehero/
 * .detail-hero/.service-directory-content family (superseded by
 * .directory-hero in directory-pages-v17.css) and the whole
 * .specs-shell/.spec-list.spec-cards/.spec-number redesign (superseded by
 * .specification-sheet in printers.css) were removed entirely - neither
 * matches any markup left in app/.
 * Load after site.css, menu-pages.css, team-contact.css, services.css,
 * printers.css, industries.css and site-components.css.
 */

/* ---------- Global layout and hero rhythm ---------- */
:root {
    --uniform-hero-top: clamp(2.75rem, 4vw, 4rem);
    --uniform-hero-bottom: clamp(3.5rem, 5vw, 5rem);
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
}

body > br:first-child,
body > p:empty:first-child,
body > div:empty:first-child,
body > section:empty:first-child {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.skip,
.top,
#main,
#main > :first-child {
    margin-top: 0 !important;
}

.top {
    top: 0 !important;
}

#main {
    padding-top: 0;
}

/* Uniform top/bottom rhythm across every hero variant on the site. */
.site-hero,
.home-hero,
.team-hero,
.contact-hero,
.why-hero,
.service-hero,
.printer-catalog-hero,
.industry-hero,
.simple-hero {
    box-sizing: border-box;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding-top: var(--uniform-hero-top) !important;
    padding-bottom: var(--uniform-hero-bottom) !important;
}

.site-hero-grid,
.why-hero-grid,
.service-hero-grid,
.printer-catalog-grid,
.industry-hero-grid,
.product-grid {
    min-height: 0 !important;
    height: auto !important;
    align-items: start !important;
}

.site-hero-photo,
.team-photo,
.why-photo,
.service-photo,
.printer-catalog-photo,
.industry-photo {
    align-self: start !important;
    margin-top: 0 !important;
}

.site-hero-photo > img,
.team-photo > img,
.why-photo > img,
.service-photo > img,
.printer-catalog-photo > img,
.industry-photo > img {
    width: 100%;
    min-height: 480px !important;
    max-height: 720px;
    object-fit: cover;
}

@media (prefers-color-scheme: dark) {
    html,
    body,
    .top,
    #main,
    .site-hero,
    .home-hero,
    .team-hero,
    .contact-hero,
    .why-hero,
    .service-hero,
    .printer-catalog-hero,
    .industry-hero,
    .product-hero,
    .simple-hero {
        background-color: var(--bg);
    }
}

@media (max-width: 950px) {
    :root {
        --uniform-hero-top: 2.25rem;
        --uniform-hero-bottom: 3.5rem;
    }

    .service-photo > img,
    .printer-catalog-photo > img,
    .industry-photo > img {
        min-height: 380px !important;
        max-height: 600px;
    }
}

@media (max-width: 600px) {
    :root {
        --uniform-hero-top: 1.75rem;
        --uniform-hero-bottom: 2.75rem;
    }
}