/* =========================================================
   Teconnex Power – custom CSS for Themeco Pro / Cornerstone
   Loaded automatically by the Teconnex Power 2026 child theme.
   Classes are added in Cornerstone under each element's
   Customize › Class field.
   ========================================================= */

/* ---------- Cards that lift on hover ----------
   Add class "tp-lift" to the card Column/Div in:
   Benefits, How it works, Systems and Support. */
.tp-lift {
  transition: transform .25s ease, box-shadow .25s ease;
}
.tp-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(6, 43, 96, .14);
}

/* ---------- Sector cards: lift, photo zoom and light sweep ----------
   Add class "tp-sector" to each sector card Column/Div,
   and class "tp-sector-img" to the Image element inside it. */
.tp-sector {
  transition: transform .25s ease;
}
.tp-sector:hover {
  transform: translateY(-6px);
}
.tp-sector-img {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.tp-sector-img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
}
.tp-sector-img::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
  transform: translateX(-130%);
}
.tp-sector:hover .tp-sector-img img {
  transform: scale(1.07);
  filter: brightness(1.06) saturate(1.08);
}
.tp-sector:hover .tp-sector-img::after {
  transform: translateX(130%);
  transition: transform .9s ease;
}

/* ---------- Hero background gradient ----------
   Add class "tp-hero" to the hero Section. */
.tp-hero {
  background: linear-gradient(180deg, #f8fbff 0%, #e8f0f9 55%, #cfdeee 100%);
}

/* ---------- Page-top band on inner pages ----------
   Add class "tp-page-top" to the first Section on the
   register, cookie and privacy pages. */
.tp-page-top {
  background: linear-gradient(180deg, #f8fbff 0%, #e8f0f9 100%);
  border-bottom: 1px solid #dde7f3;
}

/* ---------- Teal underline bar under section headings ----------
   Add class "tp-bar" to an empty Div (or use a Line element). */
.tp-bar {
  width: 64px;
  height: 3px;
  background: #156082;
}

/* ---------- Gravity Forms styling ----------
   Add "tp-form" as the CSS Class Name in each form's settings
   (Form Settings › Form Layout › CSS Class Name). */
.tp-form_wrapper {
  /* Gravity Forms Orbital theme variables */
  --gf-color-primary: #0a7a3d;
  --gf-color-primary-rgb: 10, 122, 61;
  --gf-ctrl-border-color: #8aa9c9;
  --gf-radius: 8px;
  font-family: Lato, "Segoe UI", Arial, sans-serif;
}
.tp-form label,
.tp-form .gfield_label,
.tp-form legend.gfield_label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #101820 !important;
}
.tp-form .gfield_required {
  color: #b42318 !important;
}
.tp-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.tp-form select,
.tp-form textarea {
  min-height: 48px;
  border: 1px solid #8aa9c9 !important;
  border-radius: 8px !important;
  padding: 0 14px !important;
  font-size: 16px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}
.tp-form textarea {
  padding: 12px 14px !important;
}
.tp-form input:focus,
.tp-form select:focus,
.tp-form textarea:focus {
  outline: 2px solid #156082 !important;
  outline-offset: 1px;
}
.tp-form .gform_footer input[type="submit"],
.tp-form .gform_footer button,
.tp-form .gform_page_footer input[type="submit"] {
  background: #0a7a3d !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 10px !important;
  min-height: 56px;
  padding: 0 32px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  cursor: pointer;
}
.tp-form .gform_footer input[type="submit"]:hover,
.tp-form .gform_footer button:hover {
  background: #086832 !important;
}
/* Quote form: full-width submit button */
#enquire .tp-form .gform_footer input[type="submit"],
#enquire .tp-form .gform_footer button {
  width: 100%;
}

/* ---------- Respect people who turn off motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tp-lift, .tp-sector, .tp-sector-img img, .tp-sector-img::after {
    transition: none !important;
  }
}