/* ═══════════════════════════════════════════════════════
   yourpghtech-v3 — Site-specific overrides
   Loaded AFTER all vendor CSS (bootstrap, theme, kd_vc_front,
   js_composer, theme-overrides, revslider, vc-custom)
   ═══════════════════════════════════════════════════════ */

/* ── Screen reader only (visually hidden, accessible to AT) ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Match live WordPress body font-size ── */
/* Desktop: 16px (WP customizer). Mobile: 14px (Bootstrap default, WP doesn't override at mobile) */
body {
  font-size: 16px;
}
@media (max-width: 960px) {
  body {
    font-size: 14px;
  }
}

/* ── Honeypot (spam prevention — hidden from visual + screen readers) ── */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Fix image paths in VC custom backgrounds ── */
.vc_custom_1616383194425 {
  background-image: url('../images/homepagebottom.webp') !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* ── Full-width rows are handled by JS (vcStretchRows) ── */
/* Ensure clean rendering during JS execution */
[data-vc-full-width="true"] {
  box-sizing: border-box;
}

/* ── Slider custom styles ── */
#hero-slider {
  position: relative;
}

#hero-slider .rev-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Fix "READ MORE" button hover — theme makes it transparent (disappears on dark bg) */
.kd-rev-button:hover {
  background-color: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
}

#hero-slider .slider-arrow:hover {
  background: rgba(0,0,0,0.8) !important;
}

#hero-slider .slider-bullet.active {
  background: #fff !important;
}

#hero-slider .slider-bullet:not(.active) {
  background: rgba(255,255,255,0.6) !important;
}

/* ── Hero slider headings: match live RevSlider rendering ── */
#hero-slider .rev-slide-content h1,
#hero-slider .rev-slide-content h2 {
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ── Responsive slider ── */
@media (max-width: 778px) {
  #hero-slider,
  .rev-slider-wrap {
    height: 500px !important;
  }
  #hero-slider .rev-slide-content h1,
  #hero-slider .rev-slide-content h2 {
    font-size: 36px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
  }
  #hero-slider .rev-slide-content p {
    width: 90% !important;
    font-size: 14px !important;
    line-height: 24px !important;
  }
  /* READ MORE buttons: minimum 14px on mobile */
  #hero-slider .kd-rev-button {
    font-size: 14px !important;
  }
}

/* Hide slider arrows below 1024px (matches live RevSlider config: hide_under:1024) */
@media (max-width: 1024px) {
  #hero-slider .slider-arrow {
    display: none !important;
  }
}

@media (max-width: 480px) {
  #hero-slider,
  .rev-slider-wrap {
    height: 400px !important;
  }
  #hero-slider .rev-slide-content h1,
  #hero-slider .rev-slide-content h2 {
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 32px !important;
    letter-spacing: -0.75px !important;
  }
  #hero-slider .rev-slide-content p {
    display: none;
  }
}

/* ── Inline "Get In Touch" form — match live site mobile layout ── */
@media (max-width: 959px) {
  .inline-cf .wpcf7-form p {
    display: block !important;
  }
  .inline-cf .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .inline-cf .wpcf7 .wpcf7-submit {
    width: 100% !important;
    margin-left: 0 !important;
  }
  /* Add breathing room — live site has ~15px more padding per side */
  .vc_custom_1518602127931 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ── Transparent nav on homepage (desktop only — mobile uses solid white nav) ── */
@media (min-width: 960px) {
  .transparent-navigation .navbar.navbar-fixed-top {
    background-color: transparent;
  }

  .transparent-navigation .navbar.navbar-fixed-top.navbar-shrink {
    background-color: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,0.1);
  }

  /* Nav transparent state: show white logo, hide black logo */
  .transparent-navigation .navbar:not(.navbar-shrink) .fixed-logo {
    display: none;
  }

  .transparent-navigation .navbar:not(.navbar-shrink) .nav-logo {
    display: block;
  }

  /* Nav solid state: show black logo, hide white logo */
  .transparent-navigation .navbar.navbar-shrink .fixed-logo {
    display: block;
  }

  .transparent-navigation .navbar.navbar-shrink .nav-logo {
    display: none;
  }

  /* Nav text color when transparent */
  .transparent-navigation .navbar:not(.navbar-shrink) .navbar-nav > li > a {
    color: #fff;
  }

  .transparent-navigation .navbar.navbar-shrink .navbar-nav > li > a {
    color: #333;
  }
}

/* ── Active nav link highlight (desktop only — mobile is all black) ── */
@media (min-width: 961px) {
  .navbar.navbar-default .menubar .navbar-nav > li.active > a,
  .navbar.navbar-default .menubar .navbar-nav > li.active > a:hover,
  .navbar.navbar-default .menubar .navbar-nav > li.active > a:focus {
    color: #3070A8 !important;
  }
}

/* ── Nav links: black on mobile (match live site structure) ── */
@media (max-width: 960px) {
  .navbar-nav > li > a,
  .navbar-nav > li.active > a {
    color: #000 !important;
  }
}

/* ── Map container fix ── */
.contact-map-container {
  overflow: hidden;
  border-radius: 0;
  min-height: 300px;
}

.contact-map-container iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
}

/* ── Form success message ── */
.wpcf7-response-output.hidden {
  display: none;
}

/* ── Fix footer positioning (footer is position:fixed in the theme) ── */
#footer.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

/* Wrapper needs margin-bottom to account for fixed footer */
#wrapper {
  position: relative;
  z-index: 2;
  background: #fff;
}

/* On mobile, footer should be relative (not fixed behind content) */
@media (max-width: 959px) {
  #footer.fixed,
  #footer {
    position: relative !important;
    z-index: 0;
  }
  #wrapper {
    margin-bottom: 0 !important;
  }
}

/* ── Respect reduced motion preference (accessibility / WCAG 2.1 AA) ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Skip-to-content link ── */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 99999;
}
.skip-to-content:focus {
  position: fixed;
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  padding: 12px 20px;
  background: #fff;
  color: #333;
  border: 2px solid #4C8FCC;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  outline: none;
}

/* ── Print styles ── */
@media print {
  .navbar,
  #footer {
    display: none !important;
  }
  #wrapper {
    margin-bottom: 0 !important;
  }
  [data-vc-full-width="true"] {
    position: static;
    left: auto;
    right: auto;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ── Accessibility: color contrast fixes (WCAG 2.1 AA 4.5:1 minimum) ── */
/* Original #4C8FCC on white = 3.43:1 (FAILS). #3070A8 on white = 5.24:1 (PASSES) */
/* Original #828282 on white = 3.95:1 (FAILS). #696969 on white = 5.49:1 (PASSES) */

/* Fix active nav link contrast (desktop only — mobile nav is all black) */
@media (min-width: 961px) {
  .navbar.navbar-default .menubar .navbar-nav > li.active > a,
  .navbar.navbar-default .menubar .navbar-nav > li.active > a:hover,
  .navbar.navbar-default .menubar .navbar-nav > li.active > a:focus {
    color: #3070A8 !important;
  }
}

/* Fix feature tabs active link contrast */
.sticky-tabs .nav-label.active a {
  color: #3070A8 !important;
}

/* Fix general link color for body text */
.post a,
.wpb_text_column a,
.side-content-text a,
.entry-content a {
  color: #3070A8;
}

/* Fix gray body text contrast on white and light backgrounds */
body,
.box,
.cb-text-area p,
body p,
.post,
.wpb_text_column,
.side-content-subtitle,
.subtitle {
  color: #696969 !important;
}

/* Keep hero slider text white (override the body p rule above) */
#hero-slider .rev-slide-content p,
#hero-slider .rev-slide-content h1,
#hero-slider .rev-slide-content h2 {
  color: #fff !important;
}

/* Keep bottom contact section text white on dark background */
.vc_custom_1616383194425 p,
.vc_custom_1616383194425 .subtitle {
  color: #fff !important;
}

/* But form inputs inside the dark section should keep their default text color */
.vc_custom_1616383194425 .wpcf7-form-control {
  color: #555 !important;
}

/* Placeholder contrast fix — 4.5:1 minimum on white background */
.wpcf7-form-control::placeholder {
  color: #555 !important;
  opacity: 1 !important;
}
.wpcf7-form-control::-webkit-input-placeholder {
  color: #555 !important;
  opacity: 1 !important;
}
.wpcf7-form-control::-moz-placeholder {
  color: #555 !important;
  opacity: 1 !important;
}

/* Fix specific inline #828282 text — override with accessible gray */
[style*="color: #828282"],
[style*="color:#828282"] {
  color: #696969 !important;
}

/* Fix button/bg contrast: white text on brand blue needs darker blue */
.wpcf7 .wpcf7-submit,
.kd-rev-button,
.cb-container.cb_main_color:hover {
  background-color: #3070A8 !important;
  border-color: #3070A8 !important;
  color: #fff !important;
}

.wpcf7 .wpcf7-submit:hover,
.kd-rev-button:hover {
  background-color: #2A6399 !important;
  border-color: #2A6399 !important;
  color: #fff !important;
}

/* Outline/ghost style for section CTA buttons */
.tt_button.tt_secondary_button {
  background-color: transparent !important;
  border: 2px solid #3070A8 !important;
  color: #3070A8 !important;
  font-size: 13px !important;
}

.tt_button.tt_secondary_button:hover,
.tt_button.tt_secondary_button:focus-visible {
  background-color: #3070A8 !important;
  border-color: #3070A8 !important;
  color: #fff !important;
}

/* ── Process steps separator: match live site spacing and visibility ── */
.vc_custom_1616450153619 {
  margin-top: 25px;
}
.vc_custom_1616450153619 .kd-separator-line {
  border-top: 3px solid #4C8FCC !important;
}

/* ── Match live site heading sizes (live uses h3, v3 uses h2) ── */
/* Desktop: 28px (h3 equivalent). Mobile: 22px (verified via computed styles) */
.side-content-title {
  font-size: 28px !important;
}
@media (max-width: 960px) {
  .side-content-title {
    font-size: 22px !important;
    text-align: center !important;
  }
}

/* "Get In Touch" heading: desktop 28px, mobile 25px (verified via computed styles) */
.vc_custom_1616359955699 {
  font-size: 28px !important;
  line-height: 40px !important;
}
@media (max-width: 960px) {
  .vc_custom_1616359955699 {
    font-size: 25px !important;
    line-height: 32px !important;
  }
}

/* ── Subtitles: desktop 18px (h6 equivalent), mobile 16px (verified via computed styles) ── */
.side-content-subtitle,
.subtitle {
  font-size: 18px !important;
}
@media (max-width: 960px) {
  .side-content-subtitle,
  .subtitle {
    font-size: 16px !important;
  }
}

/* ── Process step headings: match theme h4 sizing (HTML uses h3 for valid heading hierarchy) ── */
.kd-process-steps .pss-text-area h2,
.kd-process-steps .pss-text-area h3 {
  font-size: 24px !important;
  line-height: 1.3;
  margin: 0;
  margin-bottom: 10px;
  text-transform: none;
}

.kd-process-steps.process-checkbox-template .pss-text-area h2,
.kd-process-steps.process-checkbox-template .pss-text-area h3 {
  margin-bottom: 25px;
}

@media (max-width: 960px) {
  .kd-process-steps.process-checkbox-template .pss-text-area h2,
  .kd-process-steps.process-checkbox-template .pss-text-area h3 {
    margin-bottom: 20px;
    text-align: center;
  }
}

/* ── Branded selection color ── */
::selection {
  background: rgba(76, 143, 204, 0.3);
}

::-moz-selection {
  background: rgba(76, 143, 204, 0.3);
}

/* ── Prevent horizontal scrollbar from full-width rows ── */
body {
  overflow-x: hidden;
}

/* ── Ensure the section container allows full-width rows to break out ── */
.section,
.section > .container,
.section > .container > .row,
.content-area,
#wrapper {
  overflow: visible;
}

.section > .container > .row {
  margin-left: 0;
  margin-right: 0;
}

/* ── Mobile hamburger menu (960px matches live site breakpoint) ── */
@media (max-width: 960px) {
  .navbar-collapse {
    background: #fff;
    max-height: 80vh;
    overflow-y: auto;
  }
  .navbar-collapse .navbar-nav > li > a {
    color: #333 !important;
    padding: 12px 15px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .navbar-toggle {
    border: none;
  }
  /* Live site uses black icon bars always (even on transparent nav) */
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #000 !important;
  }
  /* Footer copyright: minimum 14px on mobile */
  .lower-footer span {
    font-size: 14px;
  }
  /* Feature tabs: 13px on mobile (verified via computed styles on live site) */
  .sticky-tabs .nav-label a {
    font-size: 13px !important;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* CTA buttons: 13px on mobile (match live site) */
  .tt_button {
    font-size: 13px !important;
  }
}

/* ── Sticky feature tabs (CSS sticky from vendor, active tab highlight) ── */
.feature-sections-tabs {
  transition: opacity 0.3s ease;
}

.sticky-tabs .nav-label a {
  transition: color 0.3s ease;
}

.sticky-tabs .nav-label.active a {
  color: #3070A8 !important;
}

/* ── Ensure focus rings on form elements ── */
.wpcf7-form-control:focus {
  outline: 2px solid transparent; /* Keeps outline for Windows High Contrast Mode */
  box-shadow: 0 0 0 2px rgba(76, 143, 204, 0.5);
}

/* ── Ensure all interactive elements have visible focus ── */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #4C8FCC;
  outline-offset: 2px;
}

/* ── Contact page: center icon box text on mobile ── */
@media (max-width: 959px) {
  .cb-container,
  .cb-container .cb-text-area,
  .cb-container .cb-text-area p {
    text-align: center !important;
  }
}

/* ── About page: split images around text on mobile ── */
@media (max-width: 959px) {
  /* Flatten column wrappers so we can reorder children */
  .vc_custom_1513720913586 > .wpb_column,
  .vc_custom_1513720913586 > .wpb_column > .vc_column-inner,
  .vc_custom_1513720913586 > .wpb_column > .vc_column-inner > .wpb_wrapper {
    display: contents !important;
  }
  .vc_custom_1513720913586 {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Right col image (citymain) → first */
  .vc_custom_1519732632875 > .wpb_wrapper > .wpb_single_image { order: 1; }
  /* Left col header (Who we are + paragraph) → second */
  .vc_custom_1519732625990 > .wpb_wrapper > header.kd-section-title { order: 2; }
  /* Left col image (cityclose) → third */
  .vc_custom_1519732625990 > .wpb_wrapper > .wpb_single_image { order: 4; }
  /* Right col founder paragraph → fourth */
  .vc_custom_1519732632875 > .wpb_wrapper > .kd-section-title { order: 5; }
  /* Hide empty spaces, not needed in mobile reflow */
  .vc_custom_1519732625990 > .wpb_wrapper > .vc_empty_space,
  .vc_custom_1519732632875 > .wpb_wrapper > .vc_empty_space { order: 10; height: 20px !important; }
  /* Reset the large desktop padding on the inner row */
  .vc_custom_1513720913586 {
    padding: 40px 15px !important;
  }
  /* Reset column padding so both paragraphs share the same left edge */
  .vc_custom_1519732625990 {
    padding-right: 0 !important;
  }
  .vc_custom_1519732632875 {
    padding-left: 0 !important;
  }
  /* Left-align text on mobile and match padding on both paragraphs */
  .vc_custom_1513720913586 header.kd-section-title,
  .vc_custom_1513720913586 .kd-section-title {
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* More space between first paragraph and second image */
  .vc_custom_1519732625990 > .wpb_wrapper > header.kd-section-title {
    margin-bottom: 40px !important;
  }
  /* Add spacing between reordered elements */
  .vc_custom_1513720913586 > .wpb_column > .vc_column-inner > .wpb_wrapper > * {
    margin-bottom: 20px;
  }
  /* Images should be full-width */
  .vc_custom_1513720913586 .wpb_single_image img {
    width: 100%;
    height: auto;
  }
}

/* ═══════════════════════════════════════════════════════
   WPBakery per-page custom CSS (from vc_shortcodes-custom-css)
   ═══════════════════════════════════════════════════════ */

/* -- Services page -- */
.vc_custom_1516637870335{margin-bottom: 50px !important;}
.vc_custom_1516637964510{padding-top: 100px !important;padding-bottom: 60px !important;}

/* -- Our Process page -- */
.vc_custom_1516969804409{border-top-width: 1px !important;padding-top: 100px !important;padding-bottom: 120px !important;background-color: #f7f9fb !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;border-top-color: #e5e7f2 !important;border-top-style: solid !important;}
.vc_custom_1513705144894{padding-top: 60px !important;}
.vc_custom_1516645814693{padding-top: 40px !important;padding-bottom: 60px !important;}
.vc_custom_1616341292550{margin-bottom: 35px !important;}

/* -- About page -- */
.vc_custom_1516628958638{background-color: #f7f9fb !important;}
.vc_custom_1513720913586{padding-top: 100px !important;padding-right: 100px !important;padding-bottom: 80px !important;padding-left: 100px !important;}
.vc_custom_1519732625990{padding-right: 40px !important;}
.vc_custom_1519732632875{padding-left: 40px !important;}
@media (max-width: 959px) {
  .vc_custom_1519732625990{padding-right: 0 !important;}
  .vc_custom_1519732632875{padding-left: 0 !important;}
}

/* -- Contact page -- */
.vc_custom_1516641975949{margin-bottom: -40px !important;}
.vc_custom_1515687105834{padding-right: 0px !important;padding-left: 0px !important;}
.vc_custom_1516642121471{padding-top: 50px !important;}
.vc_custom_1516095665984{padding-right: 0px !important;padding-left: 0px !important;}
.vc_custom_1519832365182{padding-top: 70px !important;}
.vc_custom_1519832372870{padding-bottom: 100px !important;padding-left: 15px !important;}
.vc_custom_1519832395134{padding-right: 15px !important;padding-bottom: 50px !important;padding-left: 80px !important;}