/**
 * teal-theme.css
 * Scoped teal #0b808a color overrides for About Us, Product, and Contact Us pages.
 * Applied via body class selectors — does NOT affect Homepage, Header, or Footer.
 * Only overrides CSS custom properties and specific color rules; layout/spacing unchanged.
 */

/* ─── Shared teal token overrides ──────────────────────────────────────────
   Targets: .about-page, .starter-page-page (product + contact use same class)
   Overrides: --accent-color, --heading-color
   Effect: all elements that reference these vars (headings, buttons, links,
           icons, borders, highlights) automatically switch to teal.
─────────────────────────────────────────────────────────────────────────── */

.about-page,
.contact-page,
.starter-page-page {
  /* Primary brand teal → replaces blue #036dda everywhere on these pages */
  --accent-color:  #0b808a;

  /* Heading color → slightly deeper teal-navy for readability */
  --heading-color: #0a3d42;
}

/* ─── Accent links & hovers ─────────────────────────────────────────────── */
.about-page a,
.contact-page a,
.starter-page-page a {
  color: var(--accent-color);
}

.about-page a:hover,
.contact-page a:hover,
.starter-page-page a:hover {
  color: #096970; /* slightly darker teal */
}

/* ─── Section title underline / divider line ────────────────────────────── */
.about-page .section-title h2::after,
.contact-page .section-title h2::after,
.starter-page-page .section-title h2::after,
.about-page .section-title h2::before,
.contact-page .section-title h2::before,
.starter-page-page .section-title h2::before {
  background-color: #0b808a !important;
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.about-page .btn-primary,
.contact-page .btn-primary,
.starter-page-page .btn-primary,
.about-page .btn,
.contact-page .btn,
.starter-page-page .btn {
  background-color: #0b808a;
  border-color:     #0b808a;
  color: #fff;
}

.about-page .btn-primary:hover,
.contact-page .btn-primary:hover,
.starter-page-page .btn-primary:hover,
.about-page .btn:hover,
.contact-page .btn:hover,
.starter-page-page .btn:hover {
  background-color: #096970;
  border-color:     #096970;
}

/* ─── Bootstrap icon colors ─────────────────────────────────────────────── */
.about-page .bi,
.contact-page .bi,
.starter-page-page .bi {
  color: #0b808a;
}

/* ─── Check-circle icons used in feature lists ──────────────────────────── */
.about-page .bi-check-circle-fill,
.about-page .bi-check2-circle,
.contact-page .bi-check-circle-fill,
.starter-page-page .bi-check-circle-fill {
  color: #0b808a !important;
}

/* ─── Light-background sections background tint ─────────────────────────── */
.about-page .light-background {
  --background-color: #f0fbfc;
}
.starter-page-page .light-background {
  --background-color: #f0fbfc;
}

/* ─── Card / icon-box borders & outlines ────────────────────────────────── */
.about-page .icon-box,
.contact-page .icon-box,
.starter-page-page .icon-box {
  border-color: rgba(11, 128, 138, 0.2);
}

.about-page .icon-box:hover,
.contact-page .icon-box:hover,
.starter-page-page .icon-box:hover {
  box-shadow: 0 0 0 3px rgba(11, 128, 138, 0.12);
}

/* ─── Icon-box icon wrappers ─────────────────────────────────────────────── */
.about-page .icon-box .icon i,
.contact-page .icon-box .icon i,
.starter-page-page .icon-box .icon i {
  color: #0b808a !important;
}

/* ─── Info boxes (contact page phone/email/address icons) ───────────────── */
.about-page .info-box i,
.contact-page .info-box i,
.starter-page-page .info-box i {
  color: #0b808a !important;
}

/* ─── Form focus borders ────────────────────────────────────────────────── */
.about-page input:focus,
.about-page textarea:focus,
.about-page select:focus,
.contact-page input:focus,
.contact-page textarea:focus,
.contact-page select:focus,
.starter-page-page input:focus,
.starter-page-page textarea:focus,
.starter-page-page select:focus {
  border-color: #0b808a !important;
  box-shadow: 0 0 0 3px rgba(11, 128, 138, 0.12) !important;
  outline: none;
}

/* ─── php-email-form loading spinner ────────────────────────────────────── */
.about-page .php-email-form .loading::before,
.contact-page .php-email-form .loading::before,
.starter-page-page .php-email-form .loading::before {
  border-color: #0b808a transparent #0b808a transparent;
}

/* ─── Submit / send buttons inside forms ────────────────────────────────── */
.about-page .php-email-form button[type="submit"],
.contact-page .php-email-form button[type="submit"],
.starter-page-page .php-email-form button[type="submit"] {
  background-color: #0b808a;
  border-color:     #0b808a;
}

.about-page .php-email-form button[type="submit"]:hover,
.contact-page .php-email-form button[type="submit"]:hover,
.starter-page-page .php-email-form button[type="submit"]:hover {
  background-color: #096970;
  border-color:     #096970;
}

/* ─── Preloader accent ──────────────────────────────────────────────────── */
.about-page #preloader::before,
.contact-page #preloader::before,
.starter-page-page #preloader::before {
  border-color: #0b808a transparent #0b808a transparent;
}

/* ─── Scroll-top button ─────────────────────────────────────────────────── */
.about-page .scroll-top,
.contact-page .scroll-top,
.starter-page-page .scroll-top {
  background-color: #0b808a;
}

.about-page .scroll-top:hover,
.contact-page .scroll-top:hover,
.starter-page-page .scroll-top:hover {
  background-color: #096970;
}

/* ─── Highlighted / labeled spans ──────────────────────────────────────── */
.about-page span.accent,
.contact-page span.accent,
.starter-page-page span.accent {
  color: #0b808a;
}

/* ─── Background highlight chips / badges ───────────────────────────────── */
.about-page .badge-teal,
.contact-page .badge-teal,
.starter-page-page .badge-teal {
  background-color: rgba(11, 128, 138, 0.10);
  color: #0b808a;
}

/* ─── Divider / hr lines ────────────────────────────────────────────────── */
.about-page hr.teal-divider,
.contact-page hr.teal-divider,
.starter-page-page hr.teal-divider {
  border-color: #0b808a;
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER & FOOTER EXCLUSIONS
   Restore original colors — teal theme must NEVER affect header/footer.
═══════════════════════════════════════════════════════════════════════════ */

/* ─── Header: keep original bg & white text ────────── */
.about-page .header,
.contact-page .header,
.starter-page-page .header {
  --background-color: #ffffff;
  --default-color:    #ffffff;
  --heading-color:    #ffffff;
  --accent-color:     #ffffff;
}
.about-page .header a,
.contact-page .header a,
.starter-page-page .header a {
  color: #0b808a;
}
.about-page .header a:hover,
.contact-page .header a:hover,
.starter-page-page .header a:hover { color: #0b808a; }

.about-page .header .btn-getstarted,
.contact-page .header .btn-getstarted,
.starter-page-page .header .btn-getstarted {
  background-color: #036dda; border-color: #036dda; color: #ffffff;
}
.about-page .header .btn-getstarted:hover,
.contact-page .header .btn-getstarted:hover,
.starter-page-page .header .btn-getstarted:hover {
  background-color: #0257b5; border-color: #0257b5;
}
.about-page .header .bi,
.contact-page .header .bi,
.starter-page-page .header .bi { color: inherit; }

/* ─── Footer: restore dark bg & original link/icon colors ── */
.about-page .footer,
.contact-page .footer,
.starter-page-page .footer {
  --background-color: #014051;
  --default-color:    #ffffff;
  --heading-color:    #ffffff;
  --accent-color:     #036dda;
}
.about-page .footer a,
.contact-page .footer a,
.starter-page-page .footer a { color: rgba(255,255,255,0.8); }
.about-page .footer a:hover,
.contact-page .footer a:hover,
.starter-page-page .footer a:hover { color: #036dda; }
.about-page .footer .bi,
.contact-page .footer .bi,
.starter-page-page .footer .bi { color: #ffffff; }
.about-page .footer .social-links a:hover,
.contact-page .footer .social-links a:hover,
.starter-page-page .footer .social-links a:hover {
  color: #036dda; border-color: #036dda;
}