/* ==========================================================================
   custom.css
   Additions needed after removing jQuery, Slick and nice-select in favour
   of vanilla CSS/JS. Kept in its own file (rather than editing the large
   original style.css) so the diff against the source design stays clear.
   ========================================================================== */

/* ---------- Global fix: preserve image aspect ratio when width is CSS-constrained ----------
   Every <img> in this theme carries explicit width/height HTML attributes
   (from wp_get_attachment_image(), for CLS prevention). Wherever the design's
   CSS then constrains that image's width (max-width, width:100%, etc.)
   without also setting a height, the browser keeps the literal HTML height
   attribute instead of scaling it proportionally - stretching/squashing the
   image (most visibly on the header logo). This single low-specificity rule
   fixes every instance of that at once. It's deliberately just `img` so any
   more specific selector that intentionally sets a fixed height - e.g.
   .banner_rgt_img img's height:769px + object-fit:cover crop - still wins
   and is completely unaffected. */
img {
  height: auto;
}

/* ---------- Sticky header (was a commented-out, unused rule in the
   original stylesheet - main.js now actually toggles this class) ---------- */
header.fixed {
  background: #f7f7f7;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: 16px 72px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

header.fixed .logo a img {
  will-change: transform;
  max-width: 220px;
}

@media (max-width: 767px) {
  header.fixed {
    padding: 14px 20px;
  }
}

/* ---------- Marquee: pure CSS infinite scroll, replaces Slick ----------
   Markup: .marquee_slider_inr > .marquee_track (doubled item list) */
.marquee_slider_inr {
  overflow: hidden;
  width: 100%;
}

.marquee_track {
  display: flex;
  align-items: center;
  width: max-content;
  column-gap: 50px;
  animation: gsh-marquee 32s linear infinite;
}

.marquee_slider_inr:hover .marquee_track {
  animation-play-state: paused;
}

@keyframes gsh-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee_track {
    animation: none;
  }
}

/* ---------- Native <select> styling (replaces nice-select JS/CSS) ---------- */
select.gsh-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23808080'%3e%3cpath d='M5.25 7.5L10 12.25L14.75 7.5H5.25Z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
  cursor: pointer;
}

/* ---------- Scroll reveal ----------
   Replaces the ScrollReveal.js library. Rather than a single generic
   fade, these rules reproduce the ORIGINAL design's per-section
   animations exactly (rotate-in banners, scale-zoom content blocks,
   slide-up-fade grids, and the 3D arc-in blocks that already had their
   own @keyframes in style.css) - main.js adds the matching class to
   each of these exact same class names once it scrolls into view.

   [data-reveal] itself (added on some wrapping <section>s) is left
   inert below - the original design never animated those wrappers,
   only the specific inner elements targeted here, so animating the
   wrapper too would just add motion the original never had. */
[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Rotate-in from bottom-left (banner headlines, inner page banners, the
   left column of the "let's talk" form) */
.banner_lft_cnt,
.inner_bnt_lft_cnt,
.lets_talk_lft {
  opacity: 0;
  transform: rotate(-45deg);
  transform-origin: left bottom;
  transition: opacity 1500ms cubic-bezier(0.25, 1, 0.5, 1),
              transform 1500ms cubic-bezier(0.25, 1, 0.5, 1);
}
.lets_talk_lft {
  transform: rotate(-25deg);
}
.inner_bnt_lft_cnt {
  transition-duration: 1800ms;
  transition-delay: 300ms;
}
.banner_lft_cnt.gsh-revealed,
.inner_bnt_lft_cnt.gsh-revealed,
.lets_talk_lft.gsh-revealed {
  opacity: 1;
  transform: rotate(0deg);
}

/* Scale down-to-size while fading in (experience blocks, owner bio,
   technology content blocks, service detail rows) */
.the_exp_cnt,
.owner_rgt_cnt {
  opacity: 0;
  transform: scale(1.3);
  transition: opacity 700ms ease-out 400ms, transform 700ms ease-out 400ms;
}
.our_techno_cnt,
.srvc_row_cnt {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1000ms ease-out 400ms, transform 1000ms ease-out 400ms;
}
.tech_prsn_exp_cnt {
  opacity: 0;
  transform: scale(1.2);
  transition: opacity 1000ms ease-out 400ms, transform 1000ms ease-out 400ms;
}
.the_exp_cnt.gsh-revealed,
.owner_rgt_cnt.gsh-revealed,
.our_techno_cnt.gsh-revealed,
.srvc_row_cnt.gsh-revealed,
.tech_prsn_exp_cnt.gsh-revealed {
  opacity: 1;
  transform: scale(1);
}

/* Zoom in from slightly smaller (the "get in touch" CTA banner) */
.get_tch_inr {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1000ms cubic-bezier(0.5, 0, 0, 1) 500ms,
              transform 1000ms cubic-bezier(0.5, 0, 0, 1) 500ms;
}
.get_tch_inr.gsh-revealed {
  opacity: 1;
  transform: scale(1);
}

/* Slide up while fading in (occasion grids, package titles/rows,
   technology partner logos) */
.hm_srvc_inr,
.package_title,
.package_row_main {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 900ms ease-out 400ms, transform 900ms ease-out 400ms;
}
.techno_partners_data {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1000ms ease-out 400ms, transform 1000ms ease-out 400ms;
}
.hm_srvc_inr.gsh-revealed,
.package_title.gsh-revealed,
.package_row_main.gsh-revealed,
.techno_partners_data.gsh-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 3D arc-in blocks - style.css already defines the @keyframes
   (arcRevealX / arcRevealX2 / arcRevealX3) and the .is-visible trigger
   for .our_features_inr and .testimonial_inr; main.js just needs to add
   that class at the right scroll position. .faq_inr is missing the same
   opacity:0 base state .our_features_inr/.testimonial_inr have (so it
   would otherwise flash visible before animating) - added here to match. */
.faq_inr {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .banner_lft_cnt,
  .inner_bnt_lft_cnt,
  .lets_talk_lft,
  .the_exp_cnt,
  .owner_rgt_cnt,
  .our_techno_cnt,
  .srvc_row_cnt,
  .tech_prsn_exp_cnt,
  .get_tch_inr,
  .hm_srvc_inr,
  .package_title,
  .package_row_main,
  .techno_partners_data {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .our_features_inr,
  .testimonial_inr,
  .faq_inr {
    opacity: 1;
    animation: none;
  }
}

/* Contact Form 7's own validation-error styling, scoped to match this
   theme's form fields instead of CF7's default bare-bones look. */
.lets_talk_frm_grp .wpcf7-not-valid-tip {
  display: block;
  font-size: 12px;
  color: #c0392b;
  margin-top: 6px;
}

.wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 10px 14px !important;
  border-radius: 2px;
  font-size: 14px;
}

/* ---------- Date field calendar icon ----------
   The original design hard-coded a raw <svg> element next to the
   #datepicker input. That markup can't live inside the Contact Form 7
   entry itself: WordPress runs form content through its KSES HTML
   sanitizer on every save for any site with DISALLOW_UNFILTERED_HTML
   set (WP Engine and most hardened hosts force this for ALL users,
   including administrators), and <svg>/<rect>/<line> are not in the
   default allowed-tags list - so the icon gets silently stripped back
   out every time the form is saved, no matter how many times it's
   pasted back in. Drawing it here instead completely sidesteps that,
   since theme CSS never passes through that filter. style.css already
   reserves the space for it (.contact_rgt_form .lets_talk_frm_grp
   input#datepicker { padding-left: 35px; }) - this just fills it in. */
.contact_rgt_form .lets_talk_frm_grp input#datepicker {
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 16px 16px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23404040' stroke-width='1.8'%3e%3crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3e%3cline x1='16' y1='2' x2='16' y2='6'/%3e%3cline x1='8' y1='2' x2='8' y2='6'/%3e%3cline x1='3' y1='10' x2='21' y2='10'/%3e%3c/svg%3e");
}