/* ==========================================================================
   DMT - site chrome: header, nav, dropdowns, mobile menu, footer.
   These live in the child theme because free Elementor has no Theme Builder.
   The structure mirrors what Theme Builder would produce, so this can be
   rebuilt as header/footer templates later without touching page designs.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header. Fixed and sticky. 86px, compressing to 64px past 120px of scroll.
   Solid navy at both sizes, never transparent over the hero.
   -------------------------------------------------------------------------- */
.dmt-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  background: var(--dmt-navy);
  border-bottom: 1px solid var(--dmt-border-navy);
  height: var(--dmt-header-h);
  transition: height .2s ease, padding .2s ease;
}

.dmt-header__inner {
  max-width: var(--dmt-max);
  margin-inline: auto;
  height: 100%;
  padding-inline: var(--dmt-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dmt-space-5);
}

/* --- Wordmark. Placeholder until the vector redraw lands. ---------------- */
.dmt-brand { display: block; text-decoration: none; flex: none; }
.dmt-brand__name {
  display: block;
  font-family: var(--dmt-font-display);
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--dmt-on-navy);
}
.dmt-brand__name span { color: var(--dmt-olive); }
.dmt-brand__tagline {
  display: block;
  font-family: var(--dmt-font-body);
  font-size: 8px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dmt-on-navy-meta);
  margin-top: 6px;
  transition: opacity .2s ease;
}

/* Compressed state: tagline drops, Book now tightens. */
.dmt-header.is-slim { height: var(--dmt-header-h-slim); }
.dmt-header.is-slim .dmt-brand__tagline { display: none; }
.dmt-header.is-slim .dmt-header__cta { padding: 11px 18px; }

/* --- Desktop nav -------------------------------------------------------- */
.dmt-nav { display: flex; align-items: center; gap: var(--dmt-space-4); margin-left: auto; }
.dmt-nav__list { display: flex; align-items: center; gap: var(--dmt-space-4); list-style: none; margin: 0; padding: 0; }
.dmt-nav__item { position: relative; }

.dmt-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--dmt-font-body);
  font-size: var(--dmt-button);
  line-height: 1;
  font-weight: 500;
  color: var(--dmt-on-navy-body);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  background: none;
  border-top: 0; border-left: 0; border-right: 0;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.dmt-nav__link:hover { color: var(--dmt-on-navy); }
.dmt-nav__item.is-current > .dmt-nav__link,
.dmt-nav__item.is-open > .dmt-nav__link {
  color: var(--dmt-on-navy);
  border-bottom-color: var(--dmt-green);
}
.dmt-nav__caret { color: var(--dmt-green); font-size: 9px; line-height: 1; }

/* --- Dropdown panels ---------------------------------------------------- */
.dmt-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: -22px;
  width: 265px;
  background: var(--dmt-navy-lift);
  border-left: 1px solid var(--dmt-border-navy);
  border-right: 1px solid var(--dmt-border-navy);
  border-bottom: 1px solid var(--dmt-border-navy);
  padding: var(--dmt-space-2) 0 var(--dmt-space-1);
  list-style: none;
  margin: 0;
  display: none;
}
.dmt-nav__item.is-open > .dmt-dropdown { display: block; }

.dmt-dropdown__label {
  display: block;
  font-family: var(--dmt-font-display);
  font-size: var(--dmt-label);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dmt-olive);
  padding: 0 22px var(--dmt-space-2);
}
.dmt-dropdown a {
  display: block;
  padding: 11px 22px;
  font-family: var(--dmt-font-body);
  font-size: var(--dmt-button);
  line-height: 1.3;
  font-weight: 500;
  color: var(--dmt-on-navy-body);
  text-decoration: none;
  transition: color .18s ease, background-color .18s ease;
}
.dmt-dropdown a:hover { color: var(--dmt-on-navy); background: rgba(237, 234, 227, .05); }
.dmt-dropdown__divider { border-top: 1px solid var(--dmt-border-navy); margin: var(--dmt-space-1) 0; }

/* --- Header CTA. Never leaves the header at any breakpoint. -------------- */
.dmt-header__cta { padding: 14px 20px; font-size: 12px; flex: none; transition: background-color .18s ease, color .18s ease, padding .2s ease; }

/* --- Hamburger ---------------------------------------------------------- */
.dmt-burger {
  display: none;
  width: 44px; height: 44px;
  border: 0; background: none; cursor: pointer;
  position: relative; flex: none;
}
.dmt-burger span {
  position: absolute;
  left: 11px; right: 11px;
  height: 2px;
  background: var(--dmt-on-navy);
  transition: transform .22s ease, opacity .22s ease;
}
.dmt-burger span:nth-child(1) { top: 15px; }
.dmt-burger span:nth-child(2) { top: 21px; }
.dmt-burger span:nth-child(3) { top: 27px; }
.dmt-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.dmt-burger.is-open span:nth-child(2) { opacity: 0; }
.dmt-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Nav collapses to the hamburger at 1023. */
@media (max-width: 1023px) {
  .dmt-nav { display: none; }
  .dmt-burger { display: block; }
  .dmt-header__inner { gap: var(--dmt-space-2); }
  .dmt-header__actions { display: flex; align-items: center; gap: var(--dmt-space-1); }
}
@media (min-width: 1024px) { .dmt-header__actions { display: contents; } }

/* --------------------------------------------------------------------------
   Mobile menu. Reference 2b. Full screen navy panel sliding down from under
   the header, so Book now stays reachable.
   -------------------------------------------------------------------------- */
.dmt-mobile-menu {
  position: fixed;
  top: var(--dmt-header-h);
  left: 0; right: 0;
  bottom: 0;
  z-index: 890;
  background: var(--dmt-navy);
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .22s ease, visibility .22s ease;
  -webkit-overflow-scrolling: touch;
}
.dmt-mobile-menu.is-open { transform: none; visibility: visible; }
body.dmt-menu-open { overflow: hidden; }

.dmt-mobile-menu__list { list-style: none; margin: 0; padding: 0; }
.dmt-mobile-menu__item { border-bottom: 1px solid var(--dmt-border-navy); }

.dmt-mobile-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--dmt-space-2);
  width: 100%;
  min-height: 56px;
  padding: 18px 20px;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--dmt-font-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--dmt-on-navy);
  text-decoration: none;
  cursor: pointer;
}
.dmt-mobile-menu__link .dmt-nav__caret { font-size: 12px; transition: transform .2s ease; }
.dmt-mobile-menu__item.is-open .dmt-mobile-menu__link .dmt-nav__caret { transform: rotate(180deg); }

.dmt-mobile-menu__sub { list-style: none; margin: 0; padding: 0 0 var(--dmt-space-1); background: var(--dmt-navy-lift); display: none; }
.dmt-mobile-menu__item.is-open .dmt-mobile-menu__sub { display: block; }
.dmt-mobile-menu__sub a {
  display: block;
  padding: 13px 20px 13px 36px;
  font-family: var(--dmt-font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--dmt-on-navy-body);
  text-decoration: none;
}

.dmt-mobile-menu__foot { padding: var(--dmt-space-3) 20px var(--dmt-space-6); display: grid; gap: var(--dmt-space-3); }
.dmt-mobile-menu__foot .dmt-btn { width: 100%; justify-content: center; }
.dmt-mobile-menu__contact { display: grid; gap: var(--dmt-space-1); }
.dmt-mobile-menu__contact a,
.dmt-mobile-menu__contact span {
  font-family: var(--dmt-font-body);
  font-size: var(--dmt-small);
  color: var(--dmt-on-navy-body);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.dmt-footer { background: var(--dmt-navy); color: var(--dmt-on-navy-body); padding: 56px var(--dmt-gutter) var(--dmt-space-4); }
.dmt-footer__inner { max-width: var(--dmt-max); margin-inline: auto; }
.dmt-footer__cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--dmt-space-5); }

.dmt-footer h3 {
  font-family: var(--dmt-font-display);
  font-size: var(--dmt-label);
  line-height: 1;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dmt-olive);
  margin: 0 0 var(--dmt-space-3);
}
.dmt-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dmt-space-1); }
.dmt-footer a { color: var(--dmt-on-navy-body); text-decoration: none; font-size: var(--dmt-small); transition: color .18s ease; }
.dmt-footer a:hover { color: var(--dmt-on-navy); }
.dmt-footer p { font-size: var(--dmt-small); color: var(--dmt-on-navy-body); max-width: 34ch; }

.dmt-footer__brand .dmt-brand__name { font-size: 22px; }
.dmt-footer__note { font-size: var(--dmt-meta); color: var(--dmt-on-navy-meta); margin-top: var(--dmt-space-2); }

.dmt-footer__bar {
  border-top: 1px solid var(--dmt-border-navy);
  margin-top: var(--dmt-space-5);
  padding-top: var(--dmt-space-3);
  font-size: 12px;
  color: var(--dmt-on-navy-fine);
}

@media (max-width: 1023px) { .dmt-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--dmt-space-4); } }
@media (max-width: 767px)  { .dmt-footer__cols { grid-template-columns: 1fr; } }
