/* =====================================================================
   Dream Cleen v2 - mobile/tablet menu (replaces Elementor's toggle)
   ---------------------------------------------------------------------
   Navy animated hamburger (top right) -> X, opening a white, slightly
   see-through dropdown that unrolls from under the header, with rounded
   bottom corners, black links and the phone number at the bottom.
   Built by /assets/js/dc-nav-*.js from the site's existing menu links.
   Shown at 1024px and below - the width where Elementor hides the
   desktop menu. Edit the values marked <<<.
   ===================================================================== */
.dc-burger,
.dc-menu { display: none; }

@media (max-width: 1024px) {
  /* hide Elementor's broken toggle + dropdown once ours is in place */
  html.dc-nav-ready .elementor-element-78ce007 { display: none !important; }

  /* header row: logo left, burger right, everything vertically centred */
  html.dc-nav-ready .elementor-element-2b5da1b { position: relative; z-index: 990; }
  html.dc-nav-ready .elementor-element-99b2fa4 { align-items: center; }
  html.dc-nav-ready .elementor-element-99b2fa4 > .elementor-element-baac06b { order: 0; }
  html.dc-nav-ready .elementor-element-99b2fa4 > .elementor-element-859f675 { order: 1; }
  html.dc-nav-ready .elementor-element-99b2fa4 > .dc-burger { order: 2; margin-left: auto; }

  /* ---------- hamburger ---------- */
  .dc-burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    position: relative;
    z-index: 6;                      /* stays above the open dropdown */
    width: 48px;                     /* <<< button size */
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: #111C52;             /* <<< navy */
    box-shadow: 0 6px 16px rgba(17, 28, 82, .28);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, transform .15s ease;
  }
  .dc-burger:hover { background: #1b2a73; }
  .dc-burger:active { transform: scale(.94); }
  .dc-burger:focus-visible { outline: 3px solid #61CE70; outline-offset: 2px; }
  .dc-burger__bar {
    display: block;
    width: 22px;
    height: 2.5px;
    border-radius: 2px;
    background: #fff;
    transition: transform .35s cubic-bezier(.65, 0, .35, 1), opacity .2s ease;
  }
  /* open: top + bottom bars swing into an X, middle bar fades out */
  .dc-burger[aria-expanded="true"] .dc-burger__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .dc-burger[aria-expanded="true"] .dc-burger__bar:nth-child(2) { opacity: 0; transform: scaleX(.2); }
  .dc-burger[aria-expanded="true"] .dc-burger__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  /* ---------- dropdown ---------- */
  .dc-menu {
    display: block;
    position: absolute;
    /* starts just under the logo + hamburger line (set by the JS) and covers the phone / quote row */
    top: var(--dc-menu-top, 100%);
    left: 12px;                      /* <<< side inset of the dropdown */
    right: 12px;
    z-index: 5;
    padding: 10px 0 18px;
    background: rgba(255, 255, 255, .96);   /* <<< white, slightly see-through */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 0 0 18px 18px;    /* <<< rounded bottom corners only */
    box-shadow: 0 18px 40px rgba(17, 28, 82, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    clip-path: inset(0 0 100% 0);
    transition: opacity .3s ease, transform .35s ease, clip-path .4s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .4s;
  }
  .dc-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    clip-path: inset(0 0 0 0);
    transition: opacity .3s ease, transform .35s ease, clip-path .4s cubic-bezier(.65, 0, .35, 1), visibility 0s;
  }
  .dc-menu__list { list-style: none; margin: 0; padding: 0; }
  .dc-menu__list li + li { border-top: 1px solid rgba(17, 28, 82, .08); }
  .dc-menu__link {
    position: relative;
    display: block;
    padding: 15px 28px;              /* <<< link padding (lines up with the phone button) */
    color: #000 !important;          /* <<< black links */
    font-family: "Anek Latin", sans-serif;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, color .2s ease, padding-left .2s ease;
  }
  .dc-menu__link::before {           /* navy accent bar on hover / press / current page */
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 0 3px 3px 0;
    background: #111C52;
    transform: scaleY(0);
    transition: transform .2s ease;
  }
  .dc-menu__link:hover,
  .dc-menu__link:active,
  .dc-menu__link:focus-visible {
    background: rgba(17, 28, 82, .06);   /* <<< hover / press tint */
    color: #111C52 !important;
    padding-left: 34px;
    outline: none;
  }
  .dc-menu__link:hover::before,
  .dc-menu__link:active::before,
  .dc-menu__link:focus-visible::before,
  .dc-menu__link[aria-current="page"]::before { transform: scaleY(1); }
  .dc-menu__link[aria-current="page"] { color: #111C52 !important; font-weight: 700; }

  /* phone number at the bottom */
  .dc-menu__call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 28px 0;             /* <<< same side padding as the links */
    padding: 14px 18px;
    border-radius: 12px;
    background: #111C52;             /* <<< navy */
    color: #fff !important;
    font-family: "Anek Latin", sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none !important;
    transition: background .2s ease, transform .15s ease;
  }
  .dc-menu__call:hover { background: #1b2a73; }
  .dc-menu__call:active { transform: scale(.98); }
  .dc-menu__call svg { width: 20px; height: 20px; fill: #61CE70; flex: 0 0 auto; }
  .dc-menu__call-label { display: block; margin: 16px 28px 0; text-align: center; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #5b6573; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* tablets: logo left, then phone + quote button and the burger together on the right */
  html.dc-nav-ready .elementor-element-99b2fa4 > .elementor-element-859f675 { --width: auto; width: auto; flex: 0 0 auto; margin-left: auto; }
  html.dc-nav-ready .elementor-element-99b2fa4 > .dc-burger { margin-left: 20px; }
  html.dc-nav-ready .elementor-element-859f675 .elementor-icon-list-text,
  html.dc-nav-ready .elementor-element-859f675 .elementor-button-text { white-space: nowrap; }
}
@media (max-width: 767.98px) {
  /* phones: logo + burger on the first line, quote button / phone underneath */
  html.dc-nav-ready .elementor-element-99b2fa4 { flex-wrap: wrap; }
  html.dc-nav-ready .elementor-element-99b2fa4 > .dc-burger { order: 1; }
  html.dc-nav-ready .elementor-element-99b2fa4 > .elementor-element-859f675 { order: 2; }
  .dc-menu { left: 8px; right: 8px; }
}
/* =====================================================================
   SERVICES DROPDOWN (added 2026-10-11)
   Desktop (1025px+): hovering / focusing "Services" fades in a dropdown of every service page -
   flat top, rounded bottom corners, white and slightly see-through, with a 2px solid navy border
   (the same navy as the menu's active-page underline). It sits above everything below the header.
   Markup is static in each page's header: li.dc-has-sub > a + div.dc-sub (a <div>, not a <ul>, so
   Elementor's SmartMenus script leaves it alone). Mobile/tablet: the burger menu shows Services with
   an animated "+" that expands the same list (built by /assets/js/dc-nav-*.js).
   ===================================================================== */
.dc-sub { display: none; }
.dc-caret { display: none; }

@media (min-width: 1025px) {
  /* dropdown links: selectors are prefixed with the menu classes to beat Elementor's own
     `.elementor-nav-menu--main .elementor-nav-menu a` padding / transition / hover rules */
  /* the header (and so the dropdown) stays above the hero and every graphic below it */
  .elementor-element-2b5da1b { position: relative; z-index: 990; }
  .elementor-element-cf75ff5 .dc-has-sub { position: relative; }

  /* small chevron after "Services" that flips while the dropdown is open */
  .dc-caret {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 7px;
    vertical-align: 2px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s ease;
  }
  .dc-has-sub:hover .dc-caret,
  .dc-has-sub:focus-within .dc-caret { transform: rotate(180deg); }

  .dc-sub {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 1000;
    min-width: 310px;                          /* <<< dropdown width */
    padding: 8px 0 12px;
    background: rgba(255, 255, 255, .94);      /* <<< white, slightly see-through */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 2px solid #111C52;                 /* <<< navy, matches the menu underline */
    border-radius: 0 0 16px 16px;              /* <<< flat top, rounded bottom corners */
    box-shadow: 0 18px 40px rgba(17, 28, 82, .18);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
  }
  /* invisible bridge so the pointer can travel from "Services" down into the dropdown */
  .dc-sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; }
  .dc-has-sub:hover > .dc-sub,
  .dc-has-sub:focus-within > .dc-sub {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity .25s ease, transform .25s ease, visibility 0s;
  }
  .elementor-nav-menu--main .elementor-nav-menu .dc-sub .dc-sub__link {
    position: relative;
    display: block;
    padding: 11px 26px;
    color: #000 !important;
    font-family: "Anek Latin", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease, padding-left .2s ease;
  }
  .elementor-nav-menu--main .elementor-nav-menu .dc-sub .dc-sub__link + .dc-sub__link { border-top: 1px solid rgba(17, 28, 82, .08); }
  .elementor-nav-menu--main .elementor-nav-menu .dc-sub .dc-sub__link::before {                      /* navy accent bar, like the mobile menu */
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 4px;
    border-radius: 0 3px 3px 0;
    background: #111C52;
    transform: scaleY(0);
    transition: transform .2s ease;
  }
  .elementor-nav-menu--main .elementor-nav-menu .dc-sub .dc-sub__link:hover,
  .elementor-nav-menu--main .elementor-nav-menu .dc-sub .dc-sub__link:focus-visible { background: rgba(17, 28, 82, .06); color: #111C52 !important; padding-left: 32px; outline: none; }
  .elementor-nav-menu--main .elementor-nav-menu .dc-sub .dc-sub__link:hover::before,
  .elementor-nav-menu--main .elementor-nav-menu .dc-sub .dc-sub__link:focus-visible::before,
  .elementor-nav-menu--main .elementor-nav-menu .dc-sub .dc-sub__link[aria-current="page"]::before { transform: scaleY(1); }
  .elementor-nav-menu--main .elementor-nav-menu .dc-sub .dc-sub__link[aria-current="page"] { color: #111C52 !important; font-weight: 700; }
}

@media (max-width: 1024px) {
  /* burger menu: Services row = link + animated "+" toggle; the service list unrolls below */
  .dc-menu__row { display: flex; align-items: stretch; }
  .dc-menu__row > .dc-menu__link { flex: 1 1 auto; }
  .dc-menu__toggle {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    border: 0;
    border-left: 1px solid rgba(17, 28, 82, .08);
    background: transparent;
    color: #111C52;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease;
  }
  .dc-menu__toggle:hover, .dc-menu__toggle:focus-visible { background: rgba(17, 28, 82, .06); outline: none; }
  .dc-menu__toggle::before,
  .dc-menu__toggle::after {                    /* the "+" - its upright bar folds away into a "-" when open */
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 2.5px;
    margin: -1.25px 0 0 -9px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .35s cubic-bezier(.65, 0, .35, 1), opacity .25s ease;
  }
  .dc-menu__toggle::after { transform: rotate(90deg); }
  .dc-menu__toggle[aria-expanded="true"]::before { transform: rotate(180deg); }
  .dc-menu__toggle[aria-expanded="true"]::after { transform: rotate(180deg); opacity: 0; }
  .dc-menu__sub {
    display: grid;
    grid-template-rows: 0fr;                   /* collapsed; animates to 1fr */
    transition: grid-template-rows .4s cubic-bezier(.65, 0, .35, 1);
  }
  .dc-menu__sub.is-open { grid-template-rows: 1fr; }
  .dc-menu__sub > ul { list-style: none; margin: 0; padding: 0; overflow: hidden; }
  .dc-menu__sub li { border-top: 1px solid rgba(17, 28, 82, .06); }
  .dc-menu__sublink {
    position: relative;
    display: block;
    padding: 12px 28px 12px 44px;              /* indented under Services */
    color: #333 !important;
    font-family: "Anek Latin", sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none !important;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .3s ease, background .2s ease, color .2s ease;
  }
  .dc-menu__sub.is-open .dc-menu__sublink { opacity: 1; transform: none; }
  .dc-menu__sublink:hover, .dc-menu__sublink:active, .dc-menu__sublink:focus-visible { background: rgba(17, 28, 82, .06); color: #111C52 !important; outline: none; }
  .dc-menu__sublink[aria-current="page"] { color: #111C52 !important; font-weight: 700; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-burger__bar, .dc-menu, .dc-menu__link, .dc-menu__link::before { transition: none !important; }
  .dc-sub, .dc-caret, .dc-sub__link, .dc-menu__toggle::before, .dc-menu__toggle::after, .dc-menu__sub, .dc-menu__sublink { transition: none !important; }
}