/**
 * Theme .octf-btn defaults to white text; .btn-border adds a white outline for dark CTA strips.
 * On light sections (service pages, FAQ, grey callouts) the label is invisible until hover.
 * These rules scope a teal outline + readable text; dark CTA blocks are reset below.
 */

.service-page .octf-btn.btn-border,
.faq .octf-btn.btn-border,
.contact-page .octf-btn.btn-border,
.page-body .bg-light .octf-btn.btn-border,
.page-body .about-top-wrap .about-intro-copy .octf-btn.btn-border,
.page-body .home-projects-aside .octf-btn.btn-border,
.page-body .home-projects-header .octf-btn.btn-border {
    color: #19a49e !important;
    border-color: #19a49e !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.service-page .octf-btn.btn-border:hover,
.service-page .octf-btn.btn-border:focus,
.faq .octf-btn.btn-border:hover,
.faq .octf-btn.btn-border:focus,
.contact-page .octf-btn.btn-border:hover,
.contact-page .octf-btn.btn-border:focus,
.page-body .bg-light .octf-btn.btn-border:hover,
.page-body .bg-light .octf-btn.btn-border:focus,
.page-body .about-top-wrap .about-intro-copy .octf-btn.btn-border:hover,
.page-body .about-top-wrap .about-intro-copy .octf-btn.btn-border:focus,
.page-body .home-projects-aside .octf-btn.btn-border:hover,
.page-body .home-projects-aside .octf-btn.btn-border:focus,
.page-body .home-projects-header .octf-btn.btn-border:hover,
.page-body .home-projects-header .octf-btn.btn-border:focus {
    color: #fff !important;
    background-color: #19a49e !important;
    border-color: #19a49e !important;
    box-shadow: 0 4px 12px rgba(25, 164, 158, 0.35);
}

/* Dark promotional strips: keep white outline + label (do not inherit teal from above) */
.cta .octf-btn.btn-border,
.cta-h2 .octf-btn.btn-border {
    color: #fff !important;
    border-color: #fff !important;
    background-color: transparent !important;
    box-shadow: none;
}

.cta .octf-btn.btn-border:hover,
.cta .octf-btn.btn-border:focus,
.cta-h2 .octf-btn.btn-border:hover,
.cta-h2 .octf-btn.btn-border:focus {
    color: #fff !important;
    background-color: #19a49e !important;
    border-color: #19a49e !important;
    box-shadow: none;
}

/* Footer Services: nested items under Mobile App Development */
.site-footer .footer-services-nested {
    padding-left: 1rem;
    margin-bottom: 0.35rem;
    font-size: 0.92em;
    opacity: 0.92;
}
