/*==================================================================
=            gWorks Brand Color Overrides & Custom CSS            =
==================================================================*/

/* 1) Define your core brand colors as CSS variables */
:root {
  --bs-primary: #008be2;        /* Save / primary button color */
  --bs-secondary: #e3e3e3;      /* Normal button color */
  --bs-secondary-active: #676767; /* Active/selected normal button */
}

/* 2) Typography & Links */
h3, h4, h5 {
  color: #37424b;
}

a {
  color: #3a5063;
}
a:hover {
  color: var(--bs-primary);
}
a:active {
  color: #3a5063;
}

/* 3) Special “alternative” text */
.alternative-font {
  color: var(--bs-primary);
}

/* 4) Nav‐Pills active state */
.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
  background-color: var(--bs-primary);
}

/* 5) Buttons */

/* Primary (Save) button */
.btn-primary {
  color: #fff;
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  background-image: none; /* flat look */
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #007ac1;  /* slightly darker hover */
  border-color: #007ac1;
}
.btn-primary:active,
.btn-primary.active {
  background-color: #006ba3;
  border-color: #006ba3;
}

/* Secondary (Normal) button */
.btn-secondary {
  color: #000;
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #d5d5d5;
  border-color: #d5d5d5;
}
.btn-secondary:active,
.btn-secondary.active,
.btn-secondary.disabled,
.btn-secondary[disabled] {
  background-color: var(--bs-secondary-active);
  border-color: var(--bs-secondary-active);
  color: #fff;
}

/* 6) Layout accents */
body.boxed div.body {
  border-top-color: var(--bs-primary);
}

/* 7) Highlighted sections */
section.highlight {
  background-color: var(--bs-primary);
  border-color: #3a5063;
}
section.page-top h2 {
  border-bottom-color: var(--bs-primary);
}
section.toggle label {
  color: var(--bs-primary);
  border-left-color: var(--bs-primary);
}
section.toggle.active > label {
  background-color: #f1f2f3;
  border-color: var(--bs-primary);
}
section.page-top.custom-product {
  background-color: #3a5063;
  border-top-color: var(--bs-primary);
}

/* 8) Feature icons & boxes */
div.feature-box div.feature-box-icon,
ul.timeline li div.featured-box div.box-content,
a.thumb-info span.thumb-info-type,
a.thumb-info span.thumb-info-action-icon,
.thumbnail span.zoom,
span.thumb-info-social-icons a,
.inverted {
  background-color: var(--bs-primary);
}
a.thumb-info span.thumb-info-type,
a.thumb-info span.thumb-info-action-icon {
  /* if you need separate styling, you can split these */
}

/* 9) Tabs */
div.tabs ul.nav-tabs a,
div.tabs ul.nav-tabs a:hover {
  color: var(--bs-primary);
}
div.tabs ul.nav-tabs a:hover {
  border-top-color: var(--bs-primary);
}
div.tabs ul.nav-tabs li.active a {
  border-top-color: var(--bs-primary);
  color: var(--bs-primary);
}

/* 10) Icons */
ul.list.icons li i,
i.icon-featured {
  color: var(--bs-primary);
}

/* 11) Header dropdowns */
header nav ul.nav-main ul.dropdown-menu,
header nav ul.nav-main li.dropdown.open a.dropdown-toggle,
header nav ul.nav-main li.active a,
header nav ul.nav-main li.dropdown:hover a {
  color: #fff;
  background-color: var(--bs-primary) !important;
}
header nav ul.nav-main ul.dropdown-menu {
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  background-image: none;
  border-color: var(--bs-primary);
}

/* 12) Slider timer */
div.slider div.tp-bannertimer {
  background-color: var(--bs-primary);
}

/* 13) Emphasis on home intro */
div.home-intro p em,
div.home-concept strong,
blockquote.testimonial,
div.testimonial-arrow-down {
  color: var(--bs-primary);
  background: var(--bs-primary);
}
div.testimonial-arrow-down {
  border-top-color: var(--bs-primary);
}

/* 14) Recent posts date */
div.recent-posts div.date span.month,
article.post div.post-date span.month {
  background-color: var(--bs-primary);
}
div.recent-posts div.date span.day,
article.post div.post-date span.day {
  color: var(--bs-primary);
}

/* 15) Pricing table highlights */
div.pricing-table div.most-popular {
  border-color: var(--bs-primary);
}
div.pricing-table div.most-popular h3 {
  background-color: var(--bs-primary);
  background-image: none;
}

/* 16) Footer ribbon */
footer div.footer-ribon {
  background: var(--bs-primary);
}
footer div.footer-ribon::before {
  border-right-color: #006ba3; /* darker shade for contrast */
}

/* 17) Form controls focus */
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: #aaa;
  box-shadow: 0 0 8px 2px #ebebeb;
}