/* EDIT GUIDE: css/badges.css
   Page-specific or legacy styles. Shared theme files load later and can override these rules. Check the page stylesheet list before changing colours or spacing.
   Search EDIT BLOCK for selectors/functions; see EDITING-GUIDE.md for the file map.
*/
/* FILE GUIDE: Reusable material symbols and engineering icons. Keep sizing and hover colors consistent across cards. */
/* Shared card badges. Load after page styles on every new page. */
/* Hero section: introductory text, illustration layout and primary actions. */

/* EDIT BLOCK: .technical-hero-image. Change the declarations below; shared overrides may load later. */
.technical-hero-image {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 28px rgba(4, 26, 43, 0.25));
}

/* EDIT BLOCK: body :is(.product-icon, .fitting-category-icon, .material-icon, .elbow-material-icon, .standard-icon, .elbow-standard-icon, .industry-icon, .application-icon, .. Change the declarations below; shared overrides may load later. */
body :is(.product-icon, .fitting-category-icon, .material-icon, .elbow-material-icon,
    .standard-icon, .elbow-standard-icon, .industry-icon, .application-icon,
    .elbow-application-icon, .elbow-type-icon, .why-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    color: #f0ba4f;
    background: linear-gradient(135deg, #0b3a5b, #072a42);
    border: 1px solid rgba(215, 155, 50, 0.45);
    border-radius: 12px 12px 12px 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 14px rgba(7,42,66,0.16);
    font-size: 22px;
    transition: color 240ms ease, background 240ms ease, box-shadow 240ms ease;
}


/* EDIT BLOCK: body :is(.product-card, .fitting-category-card, .material-card, .elbow-material-card, .standard-card, .standard-item, .elbow-standard-card, .industry-card, .app. Change the declarations below; shared overrides may load later. */
body :is(.product-card, .fitting-category-card, .material-card, .elbow-material-card,
    .standard-card, .standard-item, .elbow-standard-card, .industry-card,
    .application-card, .elbow-application-card, .elbow-type-card, .why-card):is(:hover, :focus-visible)
    :is(.product-icon, .fitting-category-icon, .material-icon, .elbow-material-icon,
    .standard-icon, .elbow-standard-icon, .industry-icon, .application-icon,
    .elbow-application-icon, .elbow-type-icon, .why-icon) {
    color: #072a42;
    background: #f0ba4f;
    box-shadow: 0 6px 18px rgba(215,155,50,0.25);
    transform: none;
}

/* Material cards: grade labels, badges and responsive directory layouts. */

/* EDIT BLOCK: body .material-symbol. Change the declarations below; shared overrides may load later. */
body .material-symbol {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Standards content: reference cards and specification notes. */

/* EDIT BLOCK: body :is(.standard-icon, .elbow-standard-icon) svg. Change the declarations below; shared overrides may load later. */
body :is(.standard-icon, .elbow-standard-icon) svg {
    width: 32px;
    height: 32px;
}


/* EDIT BLOCK: body .standard-code. Change the declarations below; shared overrides may load later. */
body .standard-code {
    color: var(--accent-dark);
}

/* Responsive or accessibility override: @media (prefers-reduced-motion: reduce). Rules inside this block apply only when its condition matches. */

/* EDIT BLOCK: @media (prefers-reduced-motion: reduce). Change the declarations below; shared overrides may load later. */
@media (prefers-reduced-motion: reduce) {
    body :is(.product-icon, .fitting-category-icon, .material-icon, .elbow-material-icon,
        .standard-icon, .elbow-standard-icon, .industry-icon, .application-icon,
        .elbow-application-icon, .elbow-type-icon, .why-icon) {
        transition: none;
    }
}