/* ================================================================
   DLH Web - Webflow Design System Override (Public Website)
   Primary Color : Lighter Blue (#3b89ff) replacing Sea (#0ab596)
   Typography    : Inter (replaces Open Sans / Dosis / Playfair)
   Based on      : DESIGN.md  |  Phase 2 - corrected selectors
   ================================================================ */

/* -- 1. Google Fonts ------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&display=swap');

/* -- 2. Design Tokens ----------------------------------------------- */
:root {
  --wf-blue:         #3b89ff;
  --wf-blue-hover:   #1a6fe0;
  --wf-blue-darker:  #0055d4;
  --wf-blue-tint:    rgba(59, 137, 255, 0.12);
  --wf-blue-light:   #eef4ff;
  --wf-near-black:   #080808;
  --wf-gray-800:     #222222;
  --wf-gray-700:     #363636;
  --wf-gray-500:     #5a5a5a;
  --wf-gray-300:     #ababab;
  --wf-border:       #d8d8d8;
  --wf-border-hover: #898989;
  --wf-white:        #ffffff;
  --wf-radius:       4px;
  --wf-radius-md:    8px;
  --wf-shadow-sm:    rgba(0,0,0,0.09) 0px 3px 7px, rgba(0,0,0,0.08) 0px 13px 13px;
  --wf-shadow:       rgba(0,0,0,0) 0px 84px 24px, rgba(0,0,0,0.01) 0px 54px 22px, rgba(0,0,0,0.04) 0px 30px 18px, rgba(0,0,0,0.08) 0px 13px 13px, rgba(0,0,0,0.09) 0px 3px 7px;
  --wf-font:         'Inter', 'Open Sans', Arial, sans-serif;
}

/* -- 3. Base Typography & Color Override ---------------------------- */
body {
  font-family: var(--wf-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--wf-font) !important;
  color: var(--wf-near-black);
}

p, li, td, th, label, input, select, textarea, button, span {
  font-family: var(--wf-font);
}

/* Override default teal link hover (#0ab596 -> #3b89ff) */
a:hover, a:focus {
  color: var(--wf-blue) !important;
  text-decoration: none;
}

/* Override hr teal border-color */
hr { border-color: var(--wf-border); }

/* Override Dosis font class used on nav + some headings */
.custom-font3,
#nav > ul > li > a,
.mobile-nav,
.mobile-nav li a {
  font-family: var(--wf-font) !important;
}

/* -- 4. Color Utilities --------------------------------------------- */
.skin-color  { color: var(--wf-blue) !important; }
.skin-bg     { background-color: var(--wf-blue) !important; }
.skin-bg-alpha { background-color: rgba(59,137,255,0.75) !important; }
.hover-color-skin:hover { color: var(--wf-blue) !important; }

/* -- 5. Header ------------------------------------------------------ */
#header {
  font-family: var(--wf-font);
}

#header.header-color-white {
  background-color: var(--wf-white);
  box-shadow: 0 1px 0 var(--wf-border);
}

#header .branding .logo,
#header .branding .logo a {
  font-family: var(--wf-font) !important;
  font-weight: 700;
}

/* -- 6. Main Navigation --------------------------------------------- */
#nav > ul > li > a {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.1px;
  color: var(--wf-gray-700);
}

#nav li.active > a {
  color: var(--wf-blue) !important;
}

#nav > ul > li:hover > a,
#nav > ul > li.menu-item-has-children:hover > a {
  color: var(--wf-blue) !important;
  background: rgba(59,137,255,0.06) !important;
}

/* Sub-nav dropdown */
#nav li.menu-item-has-children > .sub-nav {
  background: var(--wf-white) !important;
  border: 1px solid var(--wf-border);
  border-radius: 0 0 var(--wf-radius-md) var(--wf-radius-md);
  box-shadow: var(--wf-shadow-sm);
}

#nav .sub-nav { color: var(--wf-gray-700); }

#nav .sub-nav li a {
  font-family: var(--wf-font);
  font-size: 13.5px;
  color: var(--wf-gray-700);
}

#nav .sub-nav li:hover > a,
#nav .sub-nav li.active > a {
  color: var(--wf-blue) !important;
}

#nav .sub-nav li:hover > a .fa,
#nav .sub-nav li.active > a .fa {
  color: var(--wf-blue) !important;
}

/* Cart button hover */
#nav .btn-cart-view-hover-style,
#nav .mini-cart .cart-content .btn-view-cart:hover,
#nav.style-dark .mini-cart .cart-content .btn-view-cart:hover {
  background: var(--wf-blue) !important;
  border-color: var(--wf-blue) !important;
  color: var(--wf-white) !important;
}

#nav .mini-cart .cart-content .product-title:hover { color: var(--wf-blue); }
#nav .mini-cart .cart-content .total-price { color: var(--wf-blue); }

/* Mobile nav */
.mobile-nav > li.active > a { color: var(--wf-blue); }

/* -- 7. Section & Heading Titles ------------------------------------ */
.section h2.section-title {
  font-family: var(--wf-font);
  font-weight: 600;
  color: var(--wf-near-black);
  letter-spacing: -0.3px;
}
.section h2.section-title:after { background: var(--wf-blue) !important; }

.section.has-border { border-bottom-color: var(--wf-border); }

.heading-box .box-title,
.heading-box .section-title {
  font-family: var(--wf-font);
  font-weight: 600;
  color: var(--wf-near-black);
}

.sidebar .section-title,
.widget-title {
  font-family: var(--wf-font);
  font-weight: 600;
  color: var(--wf-near-black);
  border-bottom: 2px solid var(--wf-blue);
  padding-bottom: 8px;
}

/* -- 8. Buttons ----------------------------------------------------- */
.btn {
  font-family: var(--wf-font) !important;
  font-weight: 500;
  border-radius: var(--wf-radius) !important;
  letter-spacing: -0.1px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* style1 - filled primary (was teal) */
.btn.style1 { background: var(--wf-blue) !important; color: var(--wf-white) !important; }
.btn.style1:hover,
.btn.style1:active,
.btn.style1:focus,
.btn.style1.active { background: var(--wf-blue-hover) !important; color: var(--wf-white) !important; }

/* style3 - light tinted (was #edf6ff teal tint) */
.btn.style3 { background: var(--wf-blue-light) !important; color: var(--wf-blue) !important; }
.btn.style3:hover,
.btn.style3:active,
.btn.style3:focus,
.btn.style3.active { background: var(--wf-blue) !important; color: var(--wf-white) !important; }

/* style4 outlined hover */
.btn.style4:hover,
.btn.style4:active,
.btn.style4:focus,
.btn.style4.active { background: var(--wf-blue) !important; border-color: var(--wf-blue) !important; color: var(--wf-white) !important; }

/* Bootstrap */
.btn-primary { background-color: var(--wf-blue); border-color: var(--wf-blue); color: var(--wf-white); }
.btn-primary:hover,
.btn-primary:focus { background-color: var(--wf-blue-hover) !important; border-color: var(--wf-blue-hover) !important; }

.post-read-more { font-family: var(--wf-font); font-size: 13px; font-weight: 500; }

/* -- 9. Page Title Banner ------------------------------------------- */
.page-title-container { font-family: var(--wf-font); }
.page-title-container .page-title h1,
.page-title-container .entry-title { font-family: var(--wf-font) !important; font-weight: 600; }

/* -- 10. Post / Blog ------------------------------------------------ */
.post-item .post-title a,
.blog-post .post-title a,
.entry-title a,
article .entry-title a { font-family: var(--wf-font); font-weight: 600; color: var(--wf-near-black); }
.post-item .post-title a:hover,
.blog-post .post-title a:hover,
article .entry-title a:hover { color: var(--wf-blue) !important; }

.post-meta,
.recent-posts .post-meta { font-family: var(--wf-font); font-size: 12px; color: var(--wf-gray-300); }
.recent-posts .post-title:hover { color: var(--wf-blue) !important; }

/* -- 11. Sidebar ---------------------------------------------------- */
.sidebar { font-family: var(--wf-font); }
.sidebar a, .widget a { font-family: var(--wf-font); font-size: 13.5px; }
.sidebar a:hover, .widget a:hover { color: var(--wf-blue) !important; }

/* -- 12. Footer ----------------------------------------------------- */
#footer { font-family: var(--wf-font); }

/* Override sea-tint background (#edf6ff) with dark navy */
#footer .footer-wrapper { background: #0c1a30 !important; }
#footer .footer-wrapper .container > .row > div:last-child,
#footer .footer-wrapper .container:after { background: #0a1628 !important; }

/* Footer text */
#footer,
#footer p,
#footer li,
#footer span { font-family: var(--wf-font); color: rgba(255,255,255,0.65); }

#footer .section-title,
#footer h5,
#footer h4 { font-family: var(--wf-font) !important; color: var(--wf-white) !important; font-weight: 600; }

#footer .recent-posts .post-title { font-family: var(--wf-font); color: rgba(255,255,255,0.82); }
#footer .recent-posts .post-title:hover { color: var(--wf-blue) !important; }
#footer .recent-posts .post-content { border-bottom-color: rgba(255,255,255,0.08) !important; }
#footer .recent-posts .post-meta { color: rgba(255,255,255,0.45); font-size: 11.5px; }

#footer .useful-links a { color: rgba(255,255,255,0.7); }
#footer .useful-links li:hover a { color: var(--wf-white) !important; }
#footer .useful-links li:hover:before { color: var(--wf-blue) !important; }

/* Footer copyright bar */
.footer-bottom-area,
#footer .copyright-area { background-color: #060e1d; color: rgba(255,255,255,0.45) !important; font-size: 12.5px; font-family: var(--wf-font); }
#footer .copyright-area a { color: var(--wf-blue); }
#footer .copyright-area a:hover { color: var(--wf-blue-hover) !important; }

/* Secondary menu */
#footer .secondary-menu .nav > li > a:hover,
#footer .secondary-menu .nav > li > a:focus { color: var(--wf-blue) !important; background: none; }
#footer .secondary-menu .nav > li.active > a { color: var(--wf-blue) !important; }

/* Social icons (Miracle theme: .social-icons .social-icon i) */
.social-icons .social-icon i {
  color: rgba(255,255,255,0.75);
  border-color: rgba(255,255,255,0.2);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.social-icons .social-icon:hover i {
  background: var(--wf-blue) !important;
  border-color: var(--wf-blue) !important;
  color: var(--wf-white) !important;
  transform: translateY(-2px);
}

/* Override: footer social hover border-color originally #0ab596 */
.footer-common-hover-style .social-icons .social-icon:hover i,
#footer.style1 .footer-wrapper .social-icons .social-icon:hover i,
#footer.style2 .footer-wrapper .social-icons .social-icon:hover i,
#footer.style3 .footer-wrapper .social-icons .social-icon:hover i,
#footer.style4 .footer-wrapper .social-icons .social-icon:hover i,
.footer-common-hover-style .tags .tag:hover,
#footer.style1 .footer-wrapper .tags .tag:hover,
#footer.style2 .footer-wrapper .tags .tag:hover,
#footer.style3 .footer-wrapper .tags .tag:hover,
#footer.style4 .footer-wrapper .tags .tag:hover { border-color: var(--wf-blue) !important; }

/* Back-to-top button: was #0ab596 */
#footer .back-to-top span { border-color: var(--wf-blue) !important; background: var(--wf-blue) !important; }
#footer .back-to-top span:before { background: var(--wf-blue-hover) !important; }

/* -- 13. Breadcrumb ------------------------------------------------- */
.breadcrumbs { font-family: var(--wf-font); font-size: 12.5px; }
.breadcrumbs li a { font-family: var(--wf-font); }
.breadcrumbs li.active a,
.breadcrumbs li:hover a { color: var(--wf-blue) !important; }

/* -- 14. Blockquote ------------------------------------------------- */
blockquote.style1 { border-left-color: var(--wf-blue); }
blockquote.style1:before,
blockquote.style2:before,
blockquote.style3:before { color: var(--wf-blue); }
blockquote.style2,
blockquote.style3 { border-top-color: var(--wf-blue); }

/* -- 15. Tabs ------------------------------------------------------- */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus { color: var(--wf-near-black); border-top: 3px solid var(--wf-blue); font-family: var(--wf-font); font-weight: 500; }
.nav-tabs > li > a { font-family: var(--wf-font); font-size: 13.5px; color: var(--wf-gray-700); }
.nav-tabs > li > a:hover { color: var(--wf-blue); background-color: var(--wf-blue-light); }

/* -- 16. Accordion panels ------------------------------------------- */
.panel-group .panel .panel-title a:hover { color: var(--wf-blue); }
.panel-group .panel.style2 .panel-title .open-sub,
.panel-group .panel.style3 .panel-title .open-sub { background-color: var(--wf-blue); border-color: var(--wf-blue); }
.panel-group .panel.style3 .panel-title a.active,
.panel-group .panel.style3 .panel-content { background: var(--wf-blue-light); }

/* -- 17. Pagination ------------------------------------------------- */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover { background-color: var(--wf-blue); border-color: var(--wf-blue); color: var(--wf-white); }
.pagination > li > a,
.pagination > li > span { color: var(--wf-blue); border-color: var(--wf-border); font-family: var(--wf-font); font-size: 13.5px; }
.pagination > li > a:hover { background-color: var(--wf-blue-light); color: var(--wf-blue-hover); border-color: var(--wf-border); }

/* -- 18. Forms ----------------------------------------------------- */
.form-control { font-family: var(--wf-font); font-size: 14px; border-color: var(--wf-border); border-radius: var(--wf-radius); color: var(--wf-near-black); box-shadow: none; }
.form-control:focus { border-color: var(--wf-blue); box-shadow: 0 0 0 3px var(--wf-blue-tint) !important; outline: none; }
label { font-family: var(--wf-font); font-weight: 500; color: var(--wf-gray-800); }

/* -- 19. Tables ---------------------------------------------------- */
.table { font-family: var(--wf-font); font-size: 14px; }
.table thead > tr > th { font-weight: 600; color: var(--wf-gray-800); border-bottom-color: var(--wf-border); font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #f7f9fc; }
.table > tbody > tr > td { border-color: var(--wf-border); vertical-align: middle; }

/* -- 20. Icons ----------------------------------------------------- */
.icon-box .icon i,
.icon-box .icon-container i { color: var(--wf-blue); }
.icon-box.style1 .icon,
.icon-box.style-boxed-1 .icon-container { background-color: var(--wf-blue-light); }
.icon-box.style2 .icon,
.icon-box.style-boxed-2 .icon-container { background-color: var(--wf-blue); }

/* -- 21. Progress bar ---------------------------------------------- */
.progress-bar { background-color: var(--wf-blue); }

/* -- 22. Slider overlay --------------------------------------------- */
.slider-overlay-box { background: rgba(10,22,40,0.82); border-radius: var(--wf-radius-md); border: 1px solid rgba(59,137,255,0.2); }
.dot.active, .dot:hover { background-color: var(--wf-blue) !important; }

/* -- 23. Search ---------------------------------------------------- */
.main-mini-search-form button,
#header .mini-search .main-nav-search-form button { background-color: var(--wf-blue); border-color: var(--wf-blue); }
.main-mini-search-form button:hover,
#header .mini-search .main-nav-search-form button:hover { background-color: var(--wf-blue-hover); border-color: var(--wf-blue-hover); }

/* -- 24. Alert ----------------------------------------------------- */
.alert-info { border-color: var(--wf-blue); background-color: var(--wf-blue-light); color: var(--wf-near-black); }

/* -- 25. Scrollbar -------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--wf-gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--wf-blue); }

/* -- 26. Default .btn background (was sea teal #0ab596) ------------- */
.btn {
  background: var(--wf-blue) !important;
  color: var(--wf-white) !important;
}
/* style2 keeps its navy bg */
.btn.style2 { background: #20466c !important; }
.btn.style2:hover,
.btn.style2:active,
.btn.style2:focus,
.btn.style2.active { background: #1b4268 !important; }
/* style3 is light tint (already covered above, ensure btn base doesnt override) */
.btn.style3 { background: var(--wf-blue-light) !important; color: var(--wf-blue) !important; }
/* style4 is outline (bg: none) */
.btn.style4 { background: none !important; color: inherit !important; }
/* Caption buttons on Revolution Slider */
.tp-caption .btn:not(.color-black):hover { color: var(--wf-blue) !important; }

/* -- 27. Section Title Banner (was teal bg with white text) ---------- */
.section h2.section-title {
  background: var(--wf-blue) !important;
  color: var(--wf-white) !important;
}
.section h2.section-title:after {
  border-top-color: var(--wf-blue) !important;
}

/* -- 28. Native input focus (was teal border + teal box-shadow) ------ */
input.input-text:focus,
textarea:focus {
  border-color: var(--wf-blue) !important;
  box-shadow: 0 0 0 3px var(--wf-blue-tint) !important;
}

/* -- 29. FontAwesome circle icon border ----------------------------- */
.fa.has-circle {
  border-color: var(--wf-blue) !important;
  color: var(--wf-blue);
}

/* -- 30. Styled lists (arrow-circle, decimal, disc) ----------------- */
ul.arrow-circle li.active:before,
ul.arrow li.active:before {
  color: var(--wf-white) !important;
  background: var(--wf-blue) !important;
  border-color: var(--wf-blue) !important;
}
ul.arrow-circle.hover-effect li:hover { color: var(--wf-blue) !important; }
ul.arrow-circle.hover-effect li:hover:before {
  color: var(--wf-white) !important;
  background: var(--wf-blue) !important;
  border-color: var(--wf-blue) !important;
}
ul.decimal-zero > li:before { color: var(--wf-blue) !important; }
ul.disc li:before { background: var(--wf-blue) !important; }
ul.decimal > li::before { color: var(--wf-blue) !important; }

/* -- 31. Dropcap ---------------------------------------------------- */
.dropcap { background: var(--wf-blue) !important; }

/* -- 32. Highlight text utility ------------------------------------- */
.highlight { background: var(--wf-blue) !important; color: var(--wf-white) !important; }

/* -- 33. Tags hover ------------------------------------------------- */
.tags .tag:hover {
  background: var(--wf-blue) !important;
  border-color: var(--wf-blue) !important;
  color: var(--wf-white) !important;
}

/* -- 34. Styled table header (style1) -------------------------------- */
table.table.style1 > thead > tr > th {
  background: var(--wf-blue) !important;
  border-right-color: rgba(255,255,255,0.2) !important;
}
table.table.style1 > thead > tr > th:first-child { border-left-color: var(--wf-blue) !important; }
table.table.style1 > thead > tr > th:last-child  { border-right-color: var(--wf-blue) !important; }

/* -- 35. Sidebar filter categories active bullet -------------------- */
ul.filter-categories > li.category-has-children > a.active:before {
  background: var(--wf-blue) !important;
  color: var(--wf-white) !important;
}

/* -- 36. Twitter widget --------------------------------------------- */
.twitter-holder .tweet .tweet-text a { color: var(--wf-blue); }
.twitter-holder .tweet:hover:before { background-color: var(--wf-blue) !important; color: var(--wf-white) !important; }

/* -- 37. jQuery UI slider ------------------------------------------- */
.ui-slider.ui-widget-content { background: var(--wf-blue) !important; }
.ui-slider .ui-slider-handle { background: var(--wf-blue) !important; }

/* -- 38. Search minibox hover --------------------------------------- */
.main-mini-search-form button:hover i { color: var(--wf-blue) !important; }

/* -- 39. Recent posts title hover ----------------------------------- */
.recent-posts .post-title:hover { color: var(--wf-blue) !important; }

/* -- 40. Post date badge -------------------------------------------- */
.blog-posts .post-grid .post-date { background: var(--wf-blue) !important; }

/* -- 41. Owl carousel dots (Miracle theme) -------------------------- */
.banner-slider .owl-page.active span,
.post-slider .owl-page.active span,
.brand-slider .owl-page.active span { background: var(--wf-blue) !important; }

/* -- 42. back-to-top scrollspy (non-footer) ------------------------- */
.back-to-top-btn { background: var(--wf-blue) !important; border-color: var(--wf-blue) !important; }

/* -- 43. Sea-tint background (#edf6ff) overrides -------------------- */
/* recent posts widget tint → very light blue */
.recent-posts > li { background: var(--wf-blue-light) !important; }

/* twitter widget tint */
.twitter-holder .tweet { background: var(--wf-blue-light) !important; }

/* blockquote style1 bg tint */
blockquote.style1 { background: var(--wf-blue-light) !important; color: var(--wf-near-black) !important; }
blockquote.style2,
blockquote.style3 { border-color: var(--wf-border) !important; }
blockquote.style2:before,
blockquote.style3:before { color: var(--wf-border) !important; }
blockquote.style2:after { border-top-color: var(--wf-border) !important; }

/* native form fields tint */
input.input-text,
select,
textarea,
.customSelect { background: var(--wf-blue-light) !important; }

/* filter categories tint */
ul.filter-categories > li { background: var(--wf-blue-light) !important; }
ul.archives li { border-bottom-color: var(--wf-border) !important; }

/* table style1/style2 row stripe tint */
table.table.style1 > tbody > tr:nth-child(2n) > td,
table.table.style2 > tbody > tr:nth-child(2n) > td { background: var(--wf-blue-light) !important; }
table.table.style1 > tbody,
table.table.style2 > tbody { border-color: var(--wf-border) !important; }

/* form bordered tint */
form.form-bordered { border-color: var(--wf-border) !important; }

/* hr color-light1 tint */
hr.color-light1 { border-color: var(--wf-border) !important; }