/*
Theme Name: Crown Wedding Videos
Theme URI: https://crownweddingvideos.co.uk/
Template: hello-elementor
Author: E.G. Web Design
Author URI: https://elliottgreenman.com/
Version: 3.1.1759691141
Updated: 2025-10-05 20:05:41

*/
@media only screen and (min-width: 767px) {
	.mb-only {display:none!important;}
}

@media (max-width: 767px) { 
.vh-burger .elementor-menu-toggle svg {
  display: none !important;
}
	
.cwvcta .elementor-cta__content {width: 80%;
    margin: -33px auto 33px;padding:15px!important;}
    
.cwvcta .elementor-cta__title {margin-bottom: 15px!important; padding-bottom: 15px; border-bottom: 1px solid black;}

/* 2) Button base — draws the 3 hamburger lines via background layers */
.vh-burger .elementor-menu-toggle {
    
  --burger-size: 28px;         /* total width of lines */
  --burger-thickness: 2px;     /* line thickness */
  --burger-gap: 6px;           /* distance from center line to top/bottom */
  --burger-color: currentColor;/* inherits text color; change if needed */
  --dur: 280ms;                /* animation duration */

  position: relative;
  width: var(--burger-size);
  height: calc(var(--burger-gap) * 2 + var(--burger-thickness) * 3);
  display: inline-block;
  cursor: pointer;
  color: inherit;

  /* 3 stacked lines as 3 background layers */
  background-image:
    linear-gradient(var(--burger-color), var(--burger-color)),
    linear-gradient(var(--burger-color), var(--burger-color)),
    linear-gradient(var(--burger-color), var(--burger-color));
  background-repeat: no-repeat;
  background-size:
    100% var(--burger-thickness),
    100% var(--burger-thickness),
    100% var(--burger-thickness);
  background-position:
    center calc(50% - var(--burger-gap)),
    center center,
    center calc(50% + var(--burger-gap));
  transition:
    background-size var(--dur) ease,
    opacity var(--dur) ease,
    transform var(--dur) ease;
}

/* Improve focus visibility */
.vh-burger .elementor-menu-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 6px;
}

/* 3) Cross lines: appear only when active */
.vh-burger .elementor-menu-toggle::before,
.vh-burger .elementor-menu-toggle::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--burger-thickness);
  margin: auto;
  background: var(--burger-color);
  width: 100%;
  top: 50%;
  transform-origin: center;
  opacity: 0;
  transform: translateY(0) rotate(0deg);
  transition:
    transform var(--dur) ease,
    opacity var(--dur) ease;
}

/* 4) Open state — Elementor toggles .elementor-active and aria-expanded="true" */
.vh-burger .elementor-menu-toggle.elementor-active,
.vh-burger .elementor-menu-toggle[aria-expanded="true"] {
  /* hide the 3 hamburger lines by shrinking them */
  background-size: 0 var(--burger-thickness), 0 var(--burger-thickness), 0 var(--burger-thickness);
}

/* Turn on the X and rotate bars */
.vh-burger .elementor-menu-toggle.elementor-active::before,
.vh-burger .elementor-menu-toggle[aria-expanded="true"]::before,
.vh-burger .elementor-menu-toggle.elementor-active::after,
.vh-burger .elementor-menu-toggle[aria-expanded="true"]::after {
  opacity: 1;
}

.vh-burger .elementor-menu-toggle.elementor-active::before,
.vh-burger .elementor-menu-toggle[aria-expanded="true"]::before {
  transform: translateY(0) rotate(45deg);
}

.vh-burger .elementor-menu-toggle.elementor-active::after,
.vh-burger .elementor-menu-toggle[aria-expanded="true"]::after {
  transform: translateY(0) rotate(-45deg);
}

/* 5) Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .vh-burger .elementor-menu-toggle,
  .vh-burger .elementor-menu-toggle::before,
  .vh-burger .elementor-menu-toggle::after {
    transition: none;
  }
}

/* (Optional) Size variants you can apply to the wrapper if needed */
.vh-burger.is-lg .elementor-menu-toggle { --burger-size: 34px; --burger-gap: 7px; --burger-thickness: 3px; }
.vh-burger.is-sm .elementor-menu-toggle { --burger-size: 22px; --burger-gap: 5px; --burger-thickness: 2px; }
}

.cwvcta .elementor-cta__title {
    margin-bottom: 15px !important;
    padding-bottom: 15px;
    border-bottom: 1px solid black;
}

.cwvcta .elementor-cta__content {
    width: 80%!important;
    margin: -33px auto 33px;
    padding: 15px !important;
}

/* Base container must establish stacking + allow overflow */
.elementor-element.ilstn {
  position: relative;
  z-index: 8;
  overflow: visible; /* critical: don't clip the pseudo */
}

/* Force-create and place the pseudo; add a tint to debug visibility */
.elementor-element.ilstn::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  /* place it relative to the top-left of the container, then nudge it out */
  top: 0;
  left: 0;
  transform: translate(-75px, -75px); /* instead of negative top/left */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: -1;           /* above overlays/widgets */
  pointer-events: none;
  /* TEMP: debug background to prove you can see the box. Remove later. */
  /* background-color: rgba(255,0,0,.2); */
}

/* Per-variant images (use https or relative URLs) */
.elementor-element.ilstn.bird::before  { background-image: url('/wp-content/uploads/2025/01/daf07a89afef4852e574d06c8f5ae848-1.png'); }
.elementor-element.ilstn.flwr::before  { background-image: url('/wp-content/uploads/2025/01/herbs_grey-14-1.png'); }
.elementor-element.ilstn.flwr2::before { background-image: url('/wp-content/uploads/2025/01/herbs_grey-17-7.png'); }
.elementor-element.ilstn.wreath::before{ transform: translate(-85px, -85px);background-size: 80%;background-image: url('/wp-content/uploads/2025/04/b4c7ce04ed6f36fa681f6f0cbe2e9310-line-drawings-embroidery-designs.png'); }

footer a {color:var( --e-global-color-accent )!important;}
footer a:hover {color:var( --e-global-color-67b935f )!important;}


/* Fade background to black when in view, respecting 33px bottom gap */
.fade-bg {
  position: relative;
  z-index: 0;
  --fade-bottom-gap:33px;
  transition: background-color 2s ease,color 2s ease;
  background-color:transparent
}
.fade-bg.in-view{background-color:#000}
.fade-bg *,
.fade-bg.in-view *{transition:color 2s ease}
.fade-bg.in-view h2,
.fade-bg.in-view p{color:#fff}
.elementor-element.fade-bg>.elementor-background-overlay{
  bottom:var(--fade-bottom-gap);
  transition:opacity 5s ease-in-out;
  pointer-events:none
}
.elementor-element.fade-bg.in-view>.elementor-background-overlay{opacity:.7}