/*
 * InfinityIT shared components - global remainder only.
 * Reduced 2026-09: the .site-hero-grid/.site-hero-photo/.site-proof/
 * .site-card-grid/.site-dark/.site-mini-grid family (home.php-exclusive)
 * moved to features/home.css. Both border-radius groupings and the
 * .contact-panel input/textarea transition were dropped entirely -
 * every token in them is now set directly (and, in several cases, more
 * specifically) by that page's own CSS file, which loads after this one.
 */

:root {
    --radius-sm: 14px;
    --radius-md: 22px;
    --radius-lg: 30px;
    --section-space: clamp(4.5rem, 8vw, 7rem);
}

/* .site-hero itself (not the home.php-only grid/photo/proof family below
   it in the old file) is also used, bare, by simple.php and lp/_template.php
   pages that load no page-specific hero CSS - so it and its h1 stay global. */
.site-hero {
    background: radial-gradient(
        circle at 12% 15%,
        color-mix(in srgb, var(--teal) 18%, transparent),
        transparent 30%
    );
}

.site-hero h1 {
    font-size: clamp(3rem, 7vw, 5.2rem);
}

.site-hero h1 em {
    color: var(--teal);
    font-style: normal;
}

/* Shared content sections */
.site-section,
.section,
.service-help,
.service-capabilities,
.service-faq,
.catalog-section,
.product-about,
.product-features,
.product-specs,
.product-faq,
.industry-challenges,
.industry-priority-section,
.industry-faq,
.team-work,
.contact-help {
    padding: var(--section-space) 0;
}

.site-heading {
    max-width: 780px;
    margin-bottom: 2.5rem;
}

.site-heading > p:not(.eyebrow) {
    font-size: 1.05rem;
}

/* Shared CTA */
.site-cta {
    padding: clamp(4rem, 7vw, 6rem) 0;
    background: linear-gradient(135deg, #0c686c, #0b2023);
    color: #fff;
}

.site-cta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

.site-cta-row > div {
    max-width: 760px;
}

.site-cta p {
    color: #d2edee;
}

/* Generic pages and interaction */
.simple-layout {
    max-width: 850px;
}

.standard-hover:focus-visible,
.button:focus-visible,
.nav a:focus-visible,
.nav button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--teal) 40%, transparent);
    outline-offset: 3px;
}

.faq-wrap details summary span,
.industry-faq summary span {
    transition: transform .2s;
}

.faq-wrap details[open] summary span,
.industry-faq details[open] summary span {
    transform: rotate(45deg);
}

@media (max-width: 650px) {
    .site-cta-row {
        align-items: flex-start;
        flex-direction: column;
    }
}