/* ==========================================================================
   Bytewise Agency - Custom CSS Overrides
   Place any overrides to the Harry theme styles here.
   ========================================================================== */

/* --- Hide variant-mismatched fields (Bootstrap's .col-* can fight `display:none` at some breakpoints) --- */
form#contact-form [data-field][hidden] { display: none !important; }

/* --- Harry theme calls $('select').niceSelect() which wraps every <select> with a
       <div class="nice-select"> UI. We want our own native-select styling on the
       contact form, so hide the generated .nice-select divs and keep the native
       <select> visible (forced by the rules below). ------------------------------- */
form#contact-form .contact__input-2 .nice-select,
.contact__form-2 .contact__input-2 .nice-select {
   display: none !important;
}

/* --- Unified typography for every contact-form control (inputs, textareas, selects). --- */
form#contact-form .contact__input-2 input,
form#contact-form .contact__input-2 textarea,
form#contact-form .contact__input-2 select,
.contact__form-2 .contact__input-2 input,
.contact__form-2 .contact__input-2 textarea,
.contact__form-2 .contact__input-2 select {
   font-family: var(--tp-ff-body, 'Inter'), sans-serif !important;
   font-size: 15px !important;
   font-weight: 400 !important;
   letter-spacing: 0 !important;
   color: #0d1117 !important;
}
form#contact-form .contact__input-2 input::placeholder,
form#contact-form .contact__input-2 textarea::placeholder,
.contact__form-2 .contact__input-2 input::placeholder,
.contact__form-2 .contact__input-2 textarea::placeholder {
   color: #85858B !important;
   font-family: var(--tp-ff-body, 'Inter'), sans-serif !important;
   font-size: 15px !important;
   font-weight: 400 !important;
}

/* --- Contact form <select> fields: match the flat grey text inputs --- */
form#contact-form .contact__input-2 select,
.contact__form-2 .contact__input-2 select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 0 52px 0 25px !important;
  border: 1px solid #f3f6fa !important;
  border-radius: 0 !important;
  background-color: #f3f6fa !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'><path d='M1 1.25L7 7.25L13 1.25' stroke='%230d1117' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 22px center !important;
  background-size: 14px 9px !important;
  color: #0d1117 !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 60px !important;
  outline: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, background-image 0.2s ease;
}
form#contact-form .contact__input-2 select::-ms-expand,
.contact__form-2 .contact__input-2 select::-ms-expand {
  display: none !important;
}
form#contact-form .contact__input-2 select:hover,
.contact__form-2 .contact__input-2 select:hover {
  border-color: #d8dde5 !important;
}
form#contact-form .contact__input-2 select:focus,
.contact__form-2 .contact__input-2 select:focus {
  border-color: #006487 !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'><path d='M1 1.25L7 7.25L13 1.25' stroke='%23006487' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}
form#contact-form .contact__input-2 select option,
.contact__form-2 .contact__input-2 select option {
  color: #0d1117;
  background: #fff;
  font-size: 15px;
  padding: 10px;
}

/* --- Bytewise brand button color (#007ba7) --- */
.tp-btn,
.tp-btn-blue,
.tp-btn-blue-sm,
.tp-btn-orange-2,
.tp-btn-grey,
.tp-btn-round,
.tp-btn-offcanvas {
  background-color: #007ba7 !important;
  color: #fff !important;
}
.tp-btn:hover,
.tp-btn-blue:hover,
.tp-btn-blue-sm:hover,
.tp-btn-orange-2:hover,
.tp-btn-grey:hover,
.tp-btn-round:hover,
.tp-btn-offcanvas:hover {
  background-color: #006d96 !important;
  color: #fff !important;
}

/* Border buttons get brand color text + border, filled on hover */
.tp-btn-border {
  color: #007ba7 !important;
  border-color: #007ba7 !important;
}
.tp-btn-border:hover {
  background-color: #007ba7 !important;
  color: #fff !important;
  border-color: #007ba7 !important;
}

/* White/light variant buttons inside dark containers (CTA, hero, etc.) */
.tp-btn-white-sm {
  background-color: #007ba7 !important;
  color: #fff !important;
}
.tp-btn-white-sm:hover {
  background-color: #006d96 !important;
  color: #fff !important;
}

/* Keep services card hover state white */
.services__item:hover .services__btn .tp-btn-border {
  color: #fff !important;
  border-color: rgba(255,255,255,0.3) !important;
}
.services__item:hover .services__btn .tp-btn-border:hover {
  background-color: #fff !important;
  color: #007ba7 !important;
  border-color: #fff !important;
}

/* Equal-height service cards in "What We Do" section */
#services > .container > .row {
  display: flex;
  flex-wrap: wrap;
}
#services > .container > .row > [class*="col-"] {
  display: flex;
}
#services .services__item-5 {
  display: flex;
  flex-direction: column;
  width: 100%;
}
#services .services__item-5-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#services .services__content-5 {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#services .services__content-5 .services__btn-5 {
  margin-top: auto;
}
#services .services__item-5-inner {
  padding-bottom: 30px;
}

/* CTA banner — black drop shadow instead of blue */
.cta__inner-5 {
  box-shadow: 0px 40px 50px rgba(0, 0, 0, 0.3);
}

/* Remap the harry-theme pink accent to our brand blue everywhere it was
   being used as a link hover, active state, or text accent. */
:root {
  --tp-theme-1: #006487;
  --tp-theme-1-dark: #005273;
  --tp-theme-3: #006487;
}

/* Prose / in-content link hovers on the case study pages */
.bw-cs-prose a,
.bw-cs-section a:not(.tp-btn):not(.tp-btn-border):not(.tp-btn-orange):not(.tp-btn-blue):not(.tp-btn-blue-sm):not(.tp-btn-grey):not(.tp-btn-round):not(.tp-btn-offcanvas):not(.tp-btn-white-sm),
.bw-cs-hero a {
  color: #006487;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bw-cs-prose a:hover,
.bw-cs-section a:not(.tp-btn):not(.tp-btn-border):not(.tp-btn-orange):not(.tp-btn-blue):not(.tp-btn-blue-sm):not(.tp-btn-grey):not(.tp-btn-round):not(.tp-btn-offcanvas):not(.tp-btn-white-sm):hover,
.bw-cs-hero a:hover {
  color: #005273;
}

/* Footer column links hover */
.footer__widget-5 ul li a:hover {
  color: #ffffff;
}

/* Narrow the portfolio metro text card so it doesn't bleed into the image */
@media (min-width: 768px) {
  .portfolio__metro-content {
    padding-right: 90px !important;
    max-width: calc(100% - 40px);
  }
}

/* Tighten the homepage hero on mobile — Harry theme's 750px min-height
   pushed the text below the fold on small screens. */
@media (max-width: 991.98px) {
  .slider__area.slider__height-5 {
    align-items: flex-start !important;
  }
  .slider__height-5 {
    min-height: 0 !important;
    padding-top: 30px !important;
    padding-bottom: 20px !important;
  }
  .slider__thumb-5 {
    min-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }
  .slider__thumb-5::after {
    display: none !important;
  }
  .slider__thumb-5 img {
    max-height: 200px;
    width: auto;
    display: block;
    margin: 0 auto;
  }
  .slider__content-5 {
    padding-top: 4px;
    text-align: center;
  }
  .slider__content-5 .slider__rating {
    justify-content: center;
  }
  .slider__content-5 .tp-btn-blue-sm {
    display: block;
    width: 100%;
    text-align: center;
    margin-left: 0 !important;
  }
  .slider__content-5 .tp-link-btn-circle {
    display: block !important;
    width: 100%;
    text-align: center;
    margin: 16px 0 0 0 !important;
  }
  .slider__content-5 .tp-link-btn-circle span {
    display: none !important;
  }
}

/* Case Studies page — tighten hero spacing on mobile */
@media (max-width: 767.98px) {
  .bw-case-studies-section {
    padding-top: 50px !important;
    padding-bottom: 40px !important;
  }
  .bw-case-studies-hero {
    margin-bottom: 40px !important;
  }
}

/* Section eyebrows — recolor the harry-theme harsh blue (#4353FF / --tp-theme-5)
   to our brand blue wherever it's used as a section pre-title. */
.section__title-pre-5,
.section__title-pre-6,
.tp-section-subtitle-5,
.section__title-pre,
.portfolio__section-title-pre,
.portfolio__metro-category span a,
.tp-section-subtitle-2 {
  color: #006487 !important;
}