/* =====================================================================
   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; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-burger__bar, .dc-menu, .dc-menu__link, .dc-menu__link::before { transition: none !important; }
}