/* ==========================================================================
   DMT - Elementor bridge.
   Two jobs:
   1. Stop Elementor and any kit reintroducing rounded corners or soft shadows.
      The concept is zero radius and no shadow everywhere. This is deliberate.
   2. Let Elementor's own widgets pick up the DMT component styles by class,
      so page content stays editable in the Elementor UI.
   Loaded last.
   ========================================================================== */

/* --- 1. Hold the shape system ------------------------------------------- */
.elementor-widget-container,
.elementor-button,
.elementor-image img,
.elementor-widget-image img,
.e-con,
.e-con-inner {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Elementor's default container padding fights the section rhythm. Sections
   are driven by .dmt-section, so containers stay flush. */
.elementor-section-boxed > .elementor-container,
.e-con { --container-max-width: var(--dmt-max); }

/* --- 2. Widget mapping --------------------------------------------------- */

/* Button widget: add class dmt-btn dmt-btn--primary (etc) in Advanced > CSS
   Classes. Elementor renders its own <a class="elementor-button">, so the
   variant classes are re-applied to that anchor here. */
.dmt-btn-primary        .elementor-button,
.dmt-btn-secondary      .elementor-button,
.dmt-btn-primary-navy   .elementor-button,
.dmt-btn-secondary-navy .elementor-button,
.dmt-btn-textlink       .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: var(--dmt-space-1);
  border-radius: 0;
  border: 2px solid transparent;
  background: transparent;
  padding: 17px 26px;
  font-family: var(--dmt-font-display);
  font-size: var(--dmt-button);
  line-height: 1;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.dmt-btn-primary        .elementor-button::after,
.dmt-btn-secondary      .elementor-button::after,
.dmt-btn-primary-navy   .elementor-button::after,
.dmt-btn-secondary-navy .elementor-button::after,
.dmt-btn-textlink       .elementor-button::after { content: "\00BB"; font-size: 1.15em; line-height: 0; }

.dmt-btn-primary .elementor-button { border-color: var(--dmt-olive); color: var(--dmt-text); }
.dmt-btn-primary .elementor-button:hover { background: var(--dmt-olive); color: var(--dmt-white); }

.dmt-btn-secondary .elementor-button { border-color: var(--dmt-border-strong); color: var(--dmt-text); }
.dmt-btn-secondary .elementor-button:hover { border-color: var(--dmt-navy); }

.dmt-btn-primary-navy .elementor-button { border-color: var(--dmt-green); color: var(--dmt-on-navy); }
.dmt-btn-primary-navy .elementor-button:hover { background: var(--dmt-green); color: var(--dmt-white); }

.dmt-btn-secondary-navy .elementor-button { border-color: var(--dmt-border-navy-btn); color: var(--dmt-on-navy); }
.dmt-btn-secondary-navy .elementor-button:hover { border-color: var(--dmt-on-navy); }

.dmt-btn-textlink .elementor-button {
  border: 0; border-bottom: 2px solid transparent;
  padding: 0 0 4px; font-weight: 600; letter-spacing: .06em; color: var(--dmt-green);
}
.dmt-btn-textlink .elementor-button:hover { border-bottom-color: var(--dmt-green); }

/* Elementor wraps the label in a span; keep it from adding its own icon slot. */
.elementor-button .elementor-button-icon { display: none; }

/* Heading widget on navy containers. */
.dmt-on-navy .elementor-heading-title { color: var(--dmt-on-navy); }
.dmt-on-navy .elementor-widget-text-editor { color: var(--dmt-on-navy-body); }

/* Text editor widget inherits body type rather than Elementor's defaults. */
.elementor-widget-text-editor { font-family: var(--dmt-font-body); font-size: var(--dmt-body); line-height: var(--dmt-body-lh); }
.elementor-widget-text-editor p { max-width: var(--dmt-measure); }

/* Image widget slots. */
.dmt-image-cover img { width: 100%; height: 100%; object-fit: cover; }

/* Elementor's default 20px column gap would break the 20px card grid only by
   accident; set it explicitly so a kit change cannot move it. */
.dmt-grid-con { --gap: var(--dmt-gap-card); }

/* --- 3. Grid containers --------------------------------------------------
   Elementor containers are flex by default (.e-con { display: var(--display) }).
   The layouts below are CSS grid, so they need to win against that. Same
   specificity would be enough given load order, but .e-con is spelled out so a
   plugin update reordering stylesheets cannot silently collapse a layout. */
.e-con.dmt-hero__inner   { display: grid; grid-template-columns: 1.15fr .85fr; align-items: stretch; gap: 0; }
.e-con.dmt-teaser        { display: grid; grid-template-columns: .8fr 1.6fr; gap: var(--dmt-gap-column); align-items: start; }
.e-con.dmt-meet          { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--dmt-gap-column); align-items: center; }
.e-con.dmt-booking       { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--dmt-gap-column); align-items: start; }
.e-con.dmt-cta-band__inner { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--dmt-gap-column); align-items: center; }
.e-con.dmt-grid          { display: grid; gap: var(--dmt-gap-card); }
.e-con.dmt-grid--2       { grid-template-columns: repeat(2, 1fr); }
.e-con.dmt-grid--3       { grid-template-columns: repeat(3, 1fr); }
.e-con.dmt-grid--4       { grid-template-columns: repeat(4, 1fr); }
.e-con.dmt-btn-row       { display: flex; flex-direction: row; align-items: center; gap: var(--dmt-space-2); width: auto; }

@media (max-width: 1023px) {
  .e-con.dmt-hero__inner,
  .e-con.dmt-teaser,
  .e-con.dmt-meet,
  .e-con.dmt-booking,
  .e-con.dmt-cta-band__inner { grid-template-columns: 1fr; gap: var(--dmt-space-5); }
  .e-con.dmt-hero__inner { gap: 0; }
  .e-con.dmt-grid--3, .e-con.dmt-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .e-con.dmt-grid--2, .e-con.dmt-grid--3, .e-con.dmt-grid--4 { grid-template-columns: 1fr; }
  .e-con.dmt-btn-row { flex-direction: column; align-items: stretch; width: 100%; }
}

/* Elementor puts its own padding on every container. Sections are spaced by
   .dmt-section, so containers carrying a DMT layout class stay flush. */
.e-con.dmt-hero__inner,
.e-con.dmt-teaser,
.e-con.dmt-meet,
.e-con.dmt-booking,
.e-con.dmt-grid,
.e-con.dmt-btn-row { padding: 0; }

/* --- 4. Beating Elementor's per-element CSS ------------------------------
   Elementor writes each element's settings to a generated stylesheet as
       .elementor-338 .elementor-element.elementor-element-f4ca470 { ... }
   which is three classes. No selector a hand written stylesheet can
   reasonably use will outrank that, and the generated file is rewritten
   whenever the page is saved, so it cannot be edited either.

   !important is the honest tool for exactly this, and only this: the handful
   of declarations that carry the design rather than a preference. Everything
   else in this stylesheet wins on load order alone (see the priority 999 note
   in functions.php) and is left alone. */

/* Button rows must run horizontally; Elementor defaults containers to column. */
.e-con.dmt-btn-row {
  flex-direction: row !important;
  align-items: center !important;
  width: auto !important;
  gap: var(--dmt-space-2) !important;
}
@media (max-width: 767px) {
  .e-con.dmt-btn-row {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  /* Buttons go full width on mobile. Elementor wraps each one in its own
     widget div, so both the wrapper and the anchor have to stretch. */
  .e-con.dmt-btn-row > .elementor-widget-button { width: 100%; }
  .e-con.dmt-btn-row .elementor-button {
    width: 100%;
    justify-content: center;
    min-height: 52px;
  }
  .e-con.dmt-btn-row > .dmt-btn-textlink { width: auto; }
  .e-con.dmt-btn-row .dmt-btn-textlink .elementor-button { width: auto; min-height: 0; }
}

/* The mobile reviews strip bleeds past the section padding on purpose, which
   would otherwise give the whole document a horizontal scrollbar. Clip it at
   the section instead of letting it reach the body. */
.dmt-section--navy { overflow-x: clip; }

/* Elementor's kit styles every bare <button> and every .elementor-button from
   its global palette:
       .elementor-kit-N button, ... { background-color: var(--e-global-color-primary); border-radius: 8px }
   `.elementor-kit-N button` is one class plus one type, which outranks a
   single class like .dmt-reviews__btn. That is why the hamburger and the
   carousel arrows came out solid blue. Two classes settles it.

   The kit's own globals are also reset to the DMT palette, so this is a
   belt-and-braces guard rather than the only defence. */
.dmt-header .dmt-burger,
.dmt-reviews .dmt-reviews__btn,
.dmt-accordion .dmt-accordion__q {
  background-color: transparent;
  background-image: none;
  border-radius: 0;
  box-shadow: none;
}
.dmt-reviews .dmt-reviews__btn { border: 2px solid var(--dmt-border-navy-btn); }
.dmt-reviews .dmt-reviews__btn:hover { background-color: transparent; border-color: var(--dmt-on-navy); }
.dmt-header .dmt-burger { border: 0; }

/* The rule above neutralises background only. A kit that styles button
   :hover/:focus also sets `color`, which on the accordion question is white
   text on a transparent row - the question simply disappears. Pin the colours
   for every interactive state, not just the resting one. */
.dmt-accordion .dmt-accordion__q:hover,
.dmt-accordion .dmt-accordion__q:focus,
.dmt-accordion .dmt-accordion__q:active {
  background-color: transparent;
  background-image: none;
  color: var(--dmt-text);
  box-shadow: none;
}
.dmt-reviews .dmt-reviews__btn:focus,
.dmt-reviews .dmt-reviews__btn:active { color: var(--dmt-on-navy); }
.dmt-header .dmt-burger:hover,
.dmt-header .dmt-burger:focus,
.dmt-header .dmt-burger:active { background-color: transparent; color: var(--dmt-on-navy); }

/* The kit also rounds inputs and buttons. Zero radius everywhere. */
.dmt-search .dmt-search__field,
.dmt-search .dmt-btn { border-radius: 0; }

/* Buttons: the outline is the resting state. Elementor's kit fills them. */
.dmt-btn-primary .elementor-button,
.dmt-btn-secondary .elementor-button,
.dmt-btn-primary-navy .elementor-button,
.dmt-btn-secondary-navy .elementor-button,
.dmt-btn-textlink .elementor-button { background-color: transparent !important; }

.dmt-btn-primary .elementor-button:hover      { background-color: var(--dmt-olive) !important; color: var(--dmt-white); }
.dmt-btn-primary-navy .elementor-button:hover { background-color: var(--dmt-green) !important; color: var(--dmt-white); }

/* --- 5. Headings -------------------------------------------------------
   The kit colours headings through .elementor-widget-heading
   .elementor-heading-title, two classes, which beats a bare h2 selector.
   Scoping to the section class makes it three and settles it without
   !important. */
.dmt-section .elementor-widget-heading .elementor-heading-title,
.dmt-hero .elementor-widget-heading .elementor-heading-title { color: var(--dmt-text); }

.dmt-section--navy .elementor-widget-heading .elementor-heading-title,
.dmt-on-navy .elementor-widget-heading .elementor-heading-title,
.dmt-hero__copy .elementor-widget-heading .elementor-heading-title { color: var(--dmt-on-navy); }

/* Eyebrows, labels and numerals keep their own colour regardless of section.
 *
 * Note where the class actually lands. Elementor writes a widget's
 * `_css_classes` onto the OUTER widget div:
 *
 *     <div class="elementor-element ... dmt-label elementor-widget-heading">
 *       <div class="elementor-heading-title">Booking</div>
 *     </div>
 *
 * so `.elementor-heading-title.dmt-label` never matches anything: the two
 * classes are on different elements. The accent class has to be read on the
 * wrapper and the colour applied to the title inside it. Four classes here,
 * which clears the three-class base rule above without needing !important. */
.dmt-section .elementor-widget-heading.dmt-eyebrow .elementor-heading-title,
.dmt-section .elementor-widget-heading.dmt-label .elementor-heading-title,
.dmt-section .elementor-widget-heading.dmt-card__num .elementor-heading-title,
.dmt-hero .elementor-widget-heading.dmt-eyebrow .elementor-heading-title,
.dmt-hero .elementor-widget-heading.dmt-label .elementor-heading-title,
.dmt-hero .elementor-widget-heading.dmt-card__num .elementor-heading-title,
.dmt-page-hero .elementor-widget-heading.dmt-eyebrow .elementor-heading-title,
.dmt-page-hero .elementor-widget-heading.dmt-label .elementor-heading-title { color: var(--dmt-olive); }

/* The numeral's size and weight sit on the wrapper for the same reason, so the
 * title inside has to inherit them rather than keep the heading defaults. */
.dmt-section .elementor-widget-heading.dmt-card__num .elementor-heading-title,
.dmt-hero .elementor-widget-heading.dmt-card__num .elementor-heading-title {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Body copy in text editor widgets. */
.dmt-section .elementor-widget-text-editor { color: var(--dmt-text-body); }
.dmt-section--navy .elementor-widget-text-editor,
.dmt-on-navy .elementor-widget-text-editor { color: var(--dmt-on-navy-body); }

/* --- 6. Hero media -----------------------------------------------------
   pages.css fills the hero image column with an absolutely positioned slot,
   which is right for plain markup. Inside Elementor the slot is two wrapper
   divs deep, so absolute positioning leaves it at its own min-height instead
   of filling the column. Stretch the wrappers instead. */
.dmt-hero-media { display: flex; }
.dmt-hero-media > .elementor-widget-html,
.dmt-hero-media > .elementor-widget-html > .elementor-widget-container {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}
.dmt-hero-media .dmt-image-slot,
.dmt-meet__media .dmt-image-slot {
  position: static;
  flex: 1 1 auto;
  width: 100%;
}
.dmt-meet__media { display: flex; }
.dmt-meet__media > .elementor-widget-html,
.dmt-meet__media > .elementor-widget-html > .elementor-widget-container {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}