/*
Theme Name: Hello Elementor Child - Toptek
Description: Child theme for Toptek Engineering Services Sdn Bhd. All that remains is what Elementor widgets cannot express natively: the split-button label+arrow cell, and fill:none/stroke rendering for the stroke-drawn SVG line icons. Everything else was replaced by native widgets and removed.
Author: Newnormz
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-toptek
*/

/* ---------- split button: label cell + 52px arrow cell ---------- */
.tk-btn .elementor-button{
  display:inline-flex;align-items:stretch;border-radius:0;
  font-family:Figtree,sans-serif;font-size:14px;font-weight:700;line-height:1;
}
.tk-btn .elementor-button-content-wrapper{display:flex;align-items:stretch;gap:0}
.tk-btn .elementor-button-text{display:flex;align-items:center;padding:15px 26px;flex-grow:0}
.tk-btn .elementor-button-icon{
  display:flex;align-items:center;justify-content:center;
  width:52px;flex:none;align-self:stretch;margin:0;
}
.tk-btn .elementor-button-icon svg{width:16px;height:16px}

.tk-btn-light .elementor-button{border:1px solid rgba(20,32,26,.3);background:#ffffff;color:#14201a}
.tk-btn-light .elementor-button-icon{border-left:1px solid rgba(20,32,26,.3)}
.tk-btn-light .elementor-button:hover{background:#14201a;color:#ffffff;border-color:#14201a}
.tk-btn-light .elementor-button:hover .elementor-button-icon{border-left-color:rgba(255,255,255,.4)}

.tk-btn-dark .elementor-button{border:1px solid rgba(255,255,255,.5);background:transparent;color:#ffffff}
.tk-btn-dark .elementor-button-icon{border-left:1px solid rgba(255,255,255,.5)}
.tk-btn-dark .elementor-button:hover{background:#ffffff;color:#14201a;border-color:#ffffff}
.tk-btn-dark .elementor-button:hover .elementor-button-icon{border-left-color:rgba(20,32,26,.3)}

.tk-btn-green .elementor-button{border:none;background:#009D46;color:#ffffff}
.tk-btn-green .elementor-button-text{padding:14px 24px}
.tk-btn-green .elementor-button-icon{width:48px;border-left:1px solid rgba(255,255,255,.35)}
.tk-btn-green .elementor-button:hover{background:#14201a}

/* ---------- line-icon SVGs (stroke-based, lifted from the design) ----------
   Elementor sets `color` on .elementor-icon from its colour control, so
   stroke:currentColor lets the native colour picker keep working. The SVGs
   are already drawn at the right angle, so no rotation is applied. */
.tk-icon svg,
.tk-icon .elementor-icon svg,
.elementor-icon-box-icon .elementor-icon svg{fill:none!important;stroke:currentColor}
.tk-btn .elementor-button-icon svg{fill:none!important;stroke:currentColor}



/* ---------- in-page anchor jumps clear the sticky header ----------
   The Products page carries a category quick-nav linking to #overhead,
   #gantry and so on. Without scroll-padding the target heading lands
   underneath the fixed header. */
html{scroll-behavior:smooth;scroll-padding-top:100px}

/* ---------- split button on small screens ----------
   26px of label padding plus a 52px arrow cell overflows a 360px
   viewport once labels get long ("Discuss Your Requirements"), so the
   cells tighten below the mobile breakpoint. */
@media (max-width:767px){
  .tk-btn .elementor-button{font-size:13px}
  .tk-btn .elementor-button-text{padding:13px 18px}
  .tk-btn .elementor-button-icon{width:44px}
  .tk-btn-green .elementor-button-text{padding:13px 17px}
  .tk-btn-green .elementor-button-icon{width:42px}
}
/* ---------- inner-page components ---------- */
/* Components the five inner pages need that the homepage never used.
   Kept here, next to the split button, for the same reason: these are the
   few pieces of the approved design Elementor widgets cannot express. */

/* Eyebrow: 24px green rule, then the label. */
.tk-eyebrow .elementor-heading-title{
  display:inline-flex;align-items:center;gap:10px;
  font-family:Figtree,sans-serif;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.6px;line-height:1.35em}
.tk-eyebrow .elementor-heading-title::before{
  content:"";width:24px;height:2px;background:currentColor;display:inline-block;flex:none}

/* Bordered card: green hairline and a 2px lift on hover. */
.tk-card{transition:border-color .18s ease,transform .18s ease}
.tk-card:hover{border-color:#009D46;transform:translateY(-2px)}

/* Gallery card: 4:3 crop with a slow zoom under the corner tag. */
.tk-gallery{overflow:hidden}
.tk-gallery img{transition:transform .3s ease}
.tk-gallery:hover img{transform:scale(1.04)}

/* Timeline: the one section with a continuous rule and node markers,
   which no Elementor widget draws. */
.tk-timeline{position:relative;padding-left:32px}
.tk-timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:rgba(20,32,26,.16)}
.tk-timeline-item{position:relative;padding-bottom:36px}
.tk-timeline-item:last-child{padding-bottom:0}
.tk-timeline-item::before{content:"";position:absolute;left:-32px;top:4px;width:13px;height:13px;
  background:#009D46;border:3px solid #fff;box-shadow:0 0 0 2px #009D46}
.tk-timeline .tk-year{font-family:Figtree,sans-serif;color:#009D46;font-weight:800;font-size:14px;
  letter-spacing:.3px;display:block;margin-bottom:4px}
.tk-timeline h4{font-family:Figtree,sans-serif;font-size:18px;font-weight:800;color:#14201A;
  line-height:1.25em;letter-spacing:-.4px;margin:0 0 6px}
.tk-timeline p{font-family:Figtree,sans-serif;font-size:14.5px;line-height:1.7em;color:rgba(20,32,26,.6);margin:0}
@media(max-width:767px){
  .tk-timeline{padding-left:26px}
  .tk-timeline-item{padding-bottom:28px}
  .tk-timeline-item::before{left:-26px}
}


/* =========================================================
   Toptek — Projects page gallery: hover animation
   Matches the approved static mockup (projects.html):
   image zooms inside the card frame on hover.
   Applies to both grids on /projects/ :
     dd724cd  = "From Raw Steel to Finished Crane" (6 cards)
     e03c902  = "Cranes at Work"                   (6 cards)
   ========================================================= */

/* clip the image so the zoom stays inside the card */
.elementor-357 .elementor-element-dd724cd > .e-con,
.elementor-357 .elementor-element-e03c902 > .e-con {
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.elementor-357 .elementor-element-dd724cd > .e-con .elementor-widget-image,
.elementor-357 .elementor-element-e03c902 > .e-con .elementor-widget-image {
  overflow: hidden;
}
.elementor-357 .elementor-element-dd724cd > .e-con img,
.elementor-357 .elementor-element-e03c902 > .e-con img {
  transition: transform .35s ease;
  will-change: transform;
}

/* hover state — pointer devices only, so it never sticks after a tap on mobile */
@media (hover: hover) {
  .elementor-357 .elementor-element-dd724cd > .e-con:hover img,
  .elementor-357 .elementor-element-e03c902 > .e-con:hover img {
    transform: scale(1.04);
  }
  .elementor-357 .elementor-element-dd724cd > .e-con:hover,
  .elementor-357 .elementor-element-e03c902 > .e-con:hover {
    border-color: rgba(0, 157, 70, 0.45);   /* brand green */
    box-shadow: 0 10px 26px rgba(20, 32, 26, 0.10);
  }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .elementor-357 .elementor-element-dd724cd > .e-con img,
  .elementor-357 .elementor-element-e03c902 > .e-con img { transition: none; }
  .elementor-357 .elementor-element-dd724cd > .e-con:hover img,
  .elementor-357 .elementor-element-e03c902 > .e-con:hover img { transform: none; }
}

/* Required-field marker follows the brand green, as .toptek-req did. */
.elementor-widget-form .elementor-mark-required .elementor-field-label:after{color:#009D46}

/* Checklist ticks. Elementor paints icon colour with `fill`, but these SVGs are
   stroke-drawn and forced to fill:none, so the colour has to be set on stroke. */
.tk-checks .elementor-icon-list-icon svg{fill:none!important;stroke:#009D46;stroke-width:2.4}