/* ==========================================================================
   Midas Tech Solutions LLC — brand overrides
   Loaded after css/style.default.css, so anything here wins.
   The theme exposes its accent color as a CSS custom property, so
   re-pointing --primary-accent (and friends) re-skins buttons, links,
   underlines, and hover states across the whole site in one place.
   ========================================================================== */

:root {
  --primary-accent: #c9a227;   /* Midas gold */
  --navbar-border-top: #8a6c1a;
  --button-border: #a5811f;
  --link-focus: #8a6c1a;
  --form-shadow: rgba(201, 162, 39, 0.5);
  --pagination-bg: #e9d488;
  --link-hover-bg: #b3901f;
  --navbar-focus: #e9d488;
}

/* Top bar: solid black band with gold text/icons/links */
#top {
  background: #0b0b0b;
}
#top p,
#top p a {
  color: #e9d488;
}
#top p a:hover {
  color: #c9a227;
}
#top .social a {
  color: #e9d488;
}
#top .social a:hover {
  color: #c9a227;
  background: transparent;
}

/* Logo fallback text (shown until a real logo file is added — see
   params.disabled_logo in hugo.toml) styled as a gold wordmark */
.navbar-brand.home h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: linear-gradient(135deg, #e9d488 0%, #c9a227 50%, #8a6c1a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Primary buttons: gold fill, black text for contrast */
.btn-template-main {
  background-color: var(--primary-accent);
  border-color: var(--button-border);
  color: #171200;
  font-weight: 700;
}
.btn-template-main:hover,
.btn-template-main:focus,
.btn-template-main:active {
  background-color: var(--link-hover-bg);
  border-color: var(--button-border);
  color: #171200;
}

/* Hero carousel: keep the banner image readable behind the text.
   The image itself is blurred slightly (via a ::before layer, so only the
   background blurs and the text/button stay perfectly sharp), and the
   overlay is a left-to-right gradient — darker where the headline and
   button sit (left column), lighter over the banner art (right column) —
   so the text stays legible without fully hiding the image behind it. */
.home-carousel {
  position: relative;
  background-color: #0b0b0b;
  overflow: hidden;
}
.home-carousel::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  bottom: -60px;
  left: -60px;
  background-image: inherit;
  background-position: center center;
  background-size: cover;
  filter: blur(var(--hero-banner-blur, 10px));
  z-index: 0;
}
.home-carousel .dark-mask {
  position: relative;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.72) 35%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.22) 100%
  );
}
.home-carousel .container {
  position: relative;
  z-index: 2;
}
/* Flex children default to min-width:auto, which means the browser won't
   shrink the image column below the image's native pixel width — even
   though img-responsive should let it shrink. That forces the row to wrap
   (stack) even at desktop viewport widths where col-sm-5/col-sm-7 should
   sit side by side. min-width:0 overrides that default. */
.home-carousel .row > [class*="col-"] {
  min-width: 0;
}
.home-carousel h1,
.home-carousel p {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Services (features) icons in gold */
.box-simple .icon i {
  color: var(--primary-accent);
}
.box-simple:hover .icon i {
  color: var(--link-hover-bg);
}

/* Services carousel — infinite-loop owl-carousel (see public/js/front.js).
   Each service card sits in an .item; owl.carousel.css handles the actual
   sliding mechanics, this is just brand polish. */
.services-carousel .item {
  padding: 0 10px;
}
.services-carousel.owl-theme .owl-controls .owl-page span {
  background: rgba(0, 0, 0, 0.2);
}
.services-carousel.owl-theme .owl-controls .owl-page.active span {
  background: var(--primary-accent, #c9a227);
}

/* Mobile ------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* iOS Safari auto-zooms the page when a focused input's font-size is
     under 16px. The theme's .form-control (contact form: name/email/phone/
     service/message) defaults to 14px, which triggers that zoom on tap. */
  .form-control,
  select.form-control,
  textarea.form-control {
    font-size: 16px;
  }
}

/* Footer: black, gold headings, matches the top bar for a bookended look */
#footer {
  background: #0b0b0b;
  color: #b8b8b8;
}
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6 {
  color: #e9d488;
}
#footer a {
  color: #c9a227;
}
#footer a:hover {
  color: #e9d488;
}

/* Privacy Policy link in the copyright row — a quiet utility link, not a
   primary nav item, so it's dimmed rather than styled like #footer a above. */
.footer-privacy-link {
  color: inherit;
  opacity: 0.7;
  text-decoration: underline;
}
.footer-privacy-link:hover {
  opacity: 1;
}

/* ==========================================================================
   Services page (/services) — expandable button row.
   See public/js/services-page.js for the click/reorder/expand behavior.
   ========================================================================== */
.services-buttons-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 50px 0 0;
}
.service-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 180px;
  min-height: 140px;
  padding: 25px 15px;
  background: #fff;
  border: 2px solid #eee;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.service-btn:hover {
  border-color: var(--primary-accent);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.service-btn:focus {
  outline: none;
  border-color: var(--primary-accent);
}
.service-btn.active {
  background: var(--primary-accent);
  border-color: var(--primary-accent);
}
.service-btn.active .service-btn-icon,
.service-btn.active .service-btn-title {
  color: #fff;
}
.service-btn-icon {
  font-size: 40px;
  line-height: 1;
  color: var(--primary-accent);
  margin-bottom: 12px;
  transition: color 0.25s ease;
}
.service-btn-title {
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  color: #555555;
  transition: color 0.25s ease;
}

.service-details-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s ease;
}
.service-details-inner {
  padding: 10px 0 60px;
}
.service-details-content {
  display: none;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.service-details-content.active {
  display: block;
}
.service-details-icon {
  font-size: 50px;
  color: var(--primary-accent);
  margin-bottom: 15px;
}
.service-details-content h2 {
  margin-top: 0;
}
.service-details-text {
  color: #777777;
  margin-bottom: 25px;
}

/* Contact form honeypot (see views/contact.ejs) — positioned off-screen
   rather than display:none/visibility:hidden. Some bots specifically skip
   fields hidden that way, but still fill in anything that's merely moved
   out of the visible viewport, so this catches more of them. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .service-btn {
    width: 130px;
    min-height: 110px;
    padding: 18px 10px;
  }
  .service-btn-icon {
    font-size: 30px;
  }
  .service-btn-title {
    font-size: 12px;
  }
}