/* =========================================================
   Letts Go Driving With Mick — site effects
   Paste into: Elementor > Site Settings > Custom CSS
   Colours are fixed below (--ldm-blue / --ldm-yellow) so the site's
   existing Global Colours can't change the new design.
   ========================================================= */
:root{
  --ldm-bg:#15161B;      /* page background   */
  --ldm-bg2:#1C1E26;     /* alternate section */
  --ldm-line:#2C3048;    /* borders           */
  --ldm-muted:#9097AB;   /* small grey text   */
  --ldm-blue:#2F6BFF;    /* main blue   */
  --ldm-yellow:#FFD23F;  /* highlight yellow */
}
/* Only pages built with the new design (they contain .ldm-x sections) get the dark page background */
body:has([data-elementor-type="wp-page"] .ldm-x){background:var(--ldm-bg)}

/* Yellow highlight for words inside headings: <span class="ldm-hl">word</span> */
.ldm-hl{color:var(--ldm-yellow)}
.ldm-blue{color:var(--ldm-blue)}

/* Reading progress bar */
@keyframes ldm-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@supports (animation-timeline: scroll()){
  body:has([data-elementor-type="wp-page"] .ldm-x)::after{content:"";position:fixed;left:0;top:0;height:4px;width:100%;background:var(--ldm-blue);transform-origin:left;z-index:9999;pointer-events:none;animation:ldm-prog linear both;animation-timeline:scroll(root)}
}

/* Hero entrance — add class ldm-in (and ldm-d1/2/3 for delay) to a widget */
@keyframes ldm-up{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.ldm-in{animation:ldm-up .9s cubic-bezier(.2,.8,.2,1) both}
.ldm-d1{animation-delay:.12s}.ldm-d2{animation-delay:.24s}.ldm-d3{animation-delay:.36s}.ldm-d4{animation-delay:.48s}

/* Fade in on scroll — add class ldm-rv to a container */
@supports (animation-timeline: view()){
  .ldm-rv{animation:ldm-up linear both;animation-timeline:view();animation-range:entry 0px entry 200px}
}

/* Animated grid + headlight beams behind a hero — class ldm-hero on the container */
@keyframes ldm-grid{from{background-position:0 0}to{background-position:0 48px}}
@keyframes ldm-beam{0%,100%{transform:rotate(-14deg);opacity:.5}50%{transform:rotate(10deg);opacity:.9}}
.ldm-hero{position:relative;overflow:hidden}
.ldm-hero>*{position:relative;z-index:1}
.ldm-hero::before{content:"";position:absolute;inset:0;z-index:0;opacity:.6;pointer-events:none;
  background-image:linear-gradient(rgba(47,107,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(47,107,255,.12) 1px,transparent 1px);
  background-size:48px 48px;animation:ldm-grid 3s linear infinite;
  -webkit-mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.ldm-hero::after{content:"";position:absolute;left:52%;top:42%;width:900px;height:220px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(127,166,255,.45),transparent 80%);clip-path:polygon(0 45%,100% 0,100% 100%,0 55%);filter:blur(6px);
  transform-origin:0 50%;animation:ldm-beam 6s ease-in-out infinite}

/* Hero photo gentle 3D tilt — class ldm-tilt on the image widget */
@keyframes ldm-tilt{0%,100%{transform:perspective(1200px) rotateY(-14deg) rotateX(4deg)}50%{transform:perspective(1200px) rotateY(-4deg) rotateX(1deg)}}
.ldm-tilt img{animation:ldm-tilt 9s ease-in-out infinite;box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 80px rgba(47,107,255,.25)}

/* Floating badge — class ldm-float (+ ldm-badge-bl / ldm-badge-tr to pin it) */
@keyframes ldm-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.ldm-float{animation:ldm-float 4.5s ease-in-out infinite}
.ldm-rel{position:relative}
.ldm-badge-bl{position:absolute!important;left:-14px;bottom:28px;width:auto!important;z-index:2}
.ldm-badge-tr{position:absolute!important;right:-12px;top:-18px;width:auto!important;z-index:2;animation-delay:-2s}

/* Buttons — class ldm-btn on a Button widget */
.ldm-btn .elementor-button{transition:transform .2s,box-shadow .2s}
.ldm-btn .elementor-button:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(47,107,255,.45)}
@keyframes ldm-pulse{0%{box-shadow:0 0 0 0 rgba(47,107,255,.6)}100%{box-shadow:0 0 0 20px rgba(47,107,255,0)}}
.ldm-pulse .elementor-button{animation:ldm-pulse 1.8s ease-out infinite}

/* Cards lift on hover — class ldm-card on a container */
.ldm-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}
.ldm-card:hover{transform:translateY(-8px);border-color:var(--ldm-blue)!important}

/* Passed-with-Mick photos — class ldm-pol (+ ldm-r1..ldm-r4) on the container around each photo */
@keyframes ldm-stamp{0%{opacity:0;transform:scale(2.4) rotate(-30deg)}60%{opacity:1;transform:scale(.92) rotate(-12deg)}100%{opacity:1;transform:scale(1) rotate(-12deg)}}
.ldm-pol{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;box-shadow:0 24px 50px rgba(0,0,0,.45);position:relative}
.ldm-r1{transform:rotate(-3deg)}.ldm-r2{transform:rotate(2deg)}.ldm-r3{transform:rotate(-2deg)}.ldm-r4{transform:rotate(3deg)}
.ldm-pol:hover{transform:rotate(0) translateY(-14px) scale(1.04);box-shadow:0 40px 70px rgba(0,0,0,.55);z-index:2}
.ldm-pol img{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.ldm-pol .elementor-widget-image{overflow:hidden;border-radius:8px}
.ldm-pol:hover img{transform:scale(1.06)}
.ldm-pol::after{content:"PASSED";position:absolute;left:24px;bottom:72px;border:4px solid var(--ldm-blue);color:var(--ldm-blue);background:rgba(243,245,250,.94);
  font-family:Urbanist,sans-serif;font-weight:900;font-size:19px;letter-spacing:.12em;padding:6px 14px;border-radius:10px;transform:rotate(-12deg);
  animation:ldm-stamp .7s cubic-bezier(.2,.8,.2,1) .4s both;pointer-events:none}

/* Step number circles — class ldm-num on a Heading widget */
.ldm-num .elementor-heading-title{width:76px;height:76px;border-radius:50%;background:var(--ldm-blue);color:#fff!important;display:flex;align-items:center;justify-content:center;margin:0 auto!important;border:6px solid var(--ldm-bg2);animation:ldm-float 4s ease-in-out infinite}
.ldm-num.ldm-num-y .elementor-heading-title{background:var(--ldm-yellow);color:#15161B!important}

/* Pill labels — class ldm-pill on a Heading widget */
.ldm-pill .elementor-heading-title{display:inline-block;background:rgba(255,210,63,.14);color:var(--ldm-yellow);padding:8px 16px;border-radius:999px}

/* Privacy shield */
@keyframes ldm-shield{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes ldm-draw{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
.ldm-shield svg{animation:ldm-shield 5s ease-in-out infinite;display:block;margin:0 auto}
.ldm-shield .ldm-tick{stroke-dasharray:200;animation:ldm-draw 1.4s ease .6s both}

/* Sticky side card — class ldm-sticky on a container */
.ldm-sticky{position:sticky!important;top:110px;align-self:flex-start}

/* FAQ accordion polish */
.ldm-faq .elementor-accordion-item{border-radius:18px;overflow:hidden;margin-bottom:10px;border:2px solid transparent!important;background:var(--ldm-bg);transition:border-color .3s}
.ldm-faq .elementor-accordion-item:has(.elementor-active){border-color:var(--ldm-yellow)!important}
.ldm-faq .elementor-tab-title{transition:background .2s}
.ldm-faq .elementor-tab-title:hover{background:#1F2230}

/* Form polish */
.ldm-form .elementor-field{transition:border-color .2s,box-shadow .2s}
.ldm-form .elementor-field:focus{border-color:var(--ldm-blue)!important;box-shadow:0 0 0 4px rgba(47,107,255,.25)}

/* Privacy policy */
.ldm-fill{background:rgba(255,210,63,.16);color:var(--ldm-yellow);border:1px dashed var(--ldm-yellow);border-radius:6px;padding:0 6px;font-weight:700}
.ldm-toc a{display:block;color:#B6BCCD;text-decoration:none;padding:9px 14px;border-radius:10px;font-weight:600;transition:background .2s,color .2s,transform .2s}
.ldm-toc a:hover{background:#23263A;color:var(--ldm-yellow);transform:translateX(4px)}
.ldm-sec{scroll-margin-top:100px}
.ldm-sec table{width:100%;border-collapse:separate;border-spacing:0;font-size:16px;margin:10px 0}
.ldm-sec th{text-align:left;background:#23263A;color:var(--ldm-yellow);padding:12px 14px;font-weight:800}
.ldm-sec td{padding:12px 14px;border-bottom:1px solid var(--ldm-line);vertical-align:top;line-height:1.6}
.ldm-sec .ldm-tablewrap{overflow-x:auto}
.ldm-sec ul{padding-left:22px}

/* ---------------------------------------------------------
   Protection from the site's existing Global settings.
   Every new section carries the class ldm-x, so the old theme's
   link colours, underlines and uppercase buttons can't leak in.
   --------------------------------------------------------- */
html body .ldm-x a{text-decoration:none!important}
html body .ldm-x .elementor-widget-text-editor a{color:#7FA6FF!important;font-weight:800;text-decoration:underline!important;text-underline-offset:3px}
html body .ldm-x .elementor-widget-text-editor a:hover{color:#B8CDFF!important}
html body .ldm-x .ldm-toc a{text-decoration:none!important;color:#B6BCCD!important;font-weight:600}
html body .ldm-x .ldm-toc a:hover{color:var(--ldm-yellow)!important}
html body .ldm-x .elementor-heading-title a{color:inherit!important}
html body .ldm-x .elementor-button{text-transform:none;font-style:normal}
html body .ldm-x .elementor-accordion .elementor-tab-title a{text-decoration:none!important}
html body .ldm-x .elementor-icon-box-title a{color:inherit!important}
html body .ldm-x .elementor-widget-text-editor h2,html body .ldm-x .elementor-widget-text-editor h3,html body .ldm-x .elementor-widget-text-editor h4{font-family:Urbanist,sans-serif!important;color:#F3F5FA!important;font-weight:800!important;font-size:20px!important;line-height:1.3!important;letter-spacing:0!important;text-transform:none!important;margin:22px 0 8px!important}

/* Small screens */
@media (max-width:1024px){
  .ldm-sticky{position:static!important}
  .ldm-hero::after{left:40%;width:600px}
  .ldm-tilt img{animation:none;transform:none}
}
@media (max-width:767px){
  .ldm-badge-bl{left:8px;bottom:16px}
  .ldm-badge-tr{right:8px;top:8px}
  .ldm-r1,.ldm-r2,.ldm-r3,.ldm-r4{transform:none}
  .ldm-hero::after{display:none}
}
@media (prefers-reduced-motion: reduce){
  .ldm-x,.ldm-x *,.ldm-x *::before,.ldm-x *::after{animation:none!important;transition:none!important}
}