/* ================================================
   Sterilization & Safety Page — sterilization.css
   ================================================ */

/* ── Page Title Banner ── */
.steri-pagetitle {
    background: #fff9f3;
    padding: 50px 0 40px;
    text-align: center;
}
.steri-pagetitle h1 {
    font-family: var(--heading-font, 'Roboto Slab', serif);
    font-size: 46px;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
    line-height: 1.2;
}
.steri-pagetitle h1 span { color: #7da341; }
.steri-pagetitle p {
    font-size: 16px;
    color: #555;
    max-width: 700px;
    margin: 0 auto 20px;
    line-height: 1.7;
}
.steri-pagetitle .breadcrumbs ol {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    font-size: 14px;
    color: #888;
}
.steri-pagetitle .breadcrumbs ol li a { color: #7da341; text-decoration: none; }
.steri-pagetitle .breadcrumbs ol li:not(:last-child)::after {
    content: '›'; margin-left: 8px; color: #bbb;
}

/* ── Shared headings ── */
.steri-section { padding: 70px 0; }
.steri-section .mainheading {
    font-family: var(--heading-font, 'Roboto Slab', serif);
    font-size: 34px;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    margin-bottom: 14px;
}
.steri-section .mainheading span { color: #7da341; }
.steri-section .section-sub {
    font-size: 16px;
    color: #555;
    line-height: 1.75;
    max-width: 760px;
    margin: 0 auto 40px;
}
.steri-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #b07d00;
    margin-bottom: 10px;
}

/* ── Intro ── */
.steri-intro { background: #fff; }
.steri-intro p { font-size: 16px; color: #555; line-height: 1.8; margin-bottom: 16px; }
.steri-intro .steri-callout {
    border-left: 4px solid #7da341;
    background: #edf5e4;
    padding: 18px 22px;
    border-radius: 6px;
    font-size: 15.5px;
    color: #33501a;
    line-height: 1.7;
    margin-top: 8px;
}

/* ── Protocol steps ── */
.steri-protocol { background: #fff9f3; }
.steri-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: steri;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}
.steri-steps li {
    counter-increment: steri;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 26px 22px 22px;
    position: relative;
}
.steri-steps li::before {
    content: counter(steri);
    position: absolute;
    top: -16px;
    left: 22px;
    width: 34px; height: 34px;
    background: #fecd29;
    color: #222;
    font-weight: 700;
    font-size: 15px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.steri-steps li h3 {
    font-size: 17px;
    font-weight: 700;
    color: #222;
    margin: 6px 0 8px;
}
.steri-steps li p { font-size: 14.5px; color: #555; line-height: 1.7; margin: 0; }

/* ── Standards grid ── */
.steri-standards { background: #fff; }
.steri-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}
.steri-card {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 24px 22px;
    background: #fff;
    transition: box-shadow .2s ease, transform .2s ease;
}
.steri-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.07); transform: translateY(-2px); }
.steri-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
}
.steri-card h3 em {
    font-style: normal;
    color: #7da341;
}
.steri-card p { font-size: 14.5px; color: #555; line-height: 1.7; margin: 0; }

/* ── Patient checklist ── */
.steri-checklist { background: #fff9f3; }
.steri-checklist ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 820px;
}
.steri-checklist ul li {
    position: relative;
    padding: 14px 0 14px 38px;
    border-bottom: 1px solid #f0e6d8;
    font-size: 15.5px;
    color: #444;
    line-height: 1.7;
}
.steri-checklist ul li:last-child { border-bottom: 0; }
.steri-checklist ul li::before {
    content: '✓';
    position: absolute;
    left: 6px; top: 14px;
    color: #7da341;
    font-weight: 700;
    font-size: 16px;
}

/* ── FAQ ── */
.steri-faq { background: #fff; }
.steri-faq .faqbox {
    max-width: 860px;
    margin: 0 auto;
}
.steri-faq .faqbox h3 {
    font-size: 17px;
    font-weight: 700;
    color: #222;
    margin: 0 0 8px;
}
.steri-faq .faqbox > div {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}
.steri-faq .faqbox > div:last-child { border-bottom: 0; }
.steri-faq .faqbox p { font-size: 15px; color: #555; line-height: 1.75; margin: 0; }

/* ── CTA ── */
.steri-cta {
    background: linear-gradient(135deg, #7da341 0%, #4e7a1e 100%);
    padding: 60px 0;
    text-align: center;
    color: #fff;
}
.steri-cta h2 {
    font-family: var(--heading-font, 'Roboto Slab', serif);
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
}
.steri-cta h2 span { color: #fecd29; }
.steri-cta p {
    font-size: 16px;
    max-width: 620px;
    margin: 0 auto 24px;
    line-height: 1.7;
    opacity: .95;
}
.steri-cta .btn-cta {
    display: inline-block;
    background: #fecd29;
    color: #222;
    font-weight: 600;
    font-size: 16px;
    padding: 14px 34px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .2s ease;
}
.steri-cta .btn-cta:hover { background: #ffc107; color: #222; }

/* ── Responsive ── */
@media (max-width: 767px) {
    .steri-pagetitle { padding: 36px 0 30px; }
    .steri-pagetitle h1 { font-size: 30px; }
    .steri-section { padding: 48px 0; }
    .steri-section .mainheading { font-size: 26px; }
    .steri-cta h2 { font-size: 25px; }
}