/* =========================================================
   Advocate Travel Marketing — elementor-bridge.css
   Reconciles Elementor's Container chrome with the prototype's
   own layout system. Loaded last, after style.css + responsive.css.

   Nothing here changes the design — it only stops Elementor's
   defaults (container padding, boxed width, kit typography)
   from interfering with it.
   ========================================================= */

/* ---------- 1. Strip Elementor chrome from ATM section containers ----------
   Every <section> from the prototype sits inside one flexbox Container
   carrying .atm-sec. The section supplies its own padding, background and
   width, so the Container must contribute nothing.

   The Theme Builder header/footer are matched by location as well as by
   class: depending on how a template is imported, Elementor may keep its
   Container in "boxed" mode, which caps it at the kit's Content Width
   (1140px by default) and visibly narrows the header and footer. Setting
   --width overrides `max-width: var(--width, var(--container-max-width))`
   whichever mode the container ended up in. */
.elementor .e-con.atm-sec,
.elementor .e-con.atm-sec > .e-con-inner,
[data-elementor-type="header"] .e-con,
[data-elementor-type="header"] .e-con > .e-con-inner,
[data-elementor-type="footer"] .e-con,
[data-elementor-type="footer"] .e-con > .e-con-inner {
  --padding-top: 0px; --padding-right: 0px;
  --padding-bottom: 0px; --padding-left: 0px;
  --margin-top: 0px; --margin-right: 0px;
  --margin-bottom: 0px; --margin-left: 0px;
  --content-width: 100%;
  --width: 100%;
  --container-max-width: 100%;
  display: block;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

.elementor .e-con.atm-sec > .elementor-widget,
.elementor .e-con.atm-sec > .e-con-inner > .elementor-widget,
[data-elementor-type="header"] .elementor-widget,
[data-elementor-type="footer"] .elementor-widget {
  width: 100%;
  max-width: none;
  margin: 0;
}

.elementor .e-con.atm-sec .elementor-widget-html > .elementor-widget-container,
[data-elementor-type="header"] .elementor-widget-html > .elementor-widget-container,
[data-elementor-type="footer"] .elementor-widget-html > .elementor-widget-container {
  margin: 0;
  padding: 0;
}

/* .site-header is position:fixed and must resolve against the viewport.
   Any transform, filter, perspective, will-change or contain on an ancestor
   would turn that ancestor into its containing block and pin the header to
   the 1140px column instead. Nothing in the Theme Builder chain may do that.
   (.site-header.is-stuck keeps its own backdrop-filter — it sits below these
   selectors, so it is unaffected.) */
[data-elementor-type="header"],
[data-elementor-type="header"] .e-con,
[data-elementor-type="header"] .e-con > .e-con-inner,
[data-elementor-type="header"] .elementor-widget,
[data-elementor-type="header"] .elementor-widget-container {
  transform: none;
  filter: none;
  perspective: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  will-change: auto;
  contain: none;
  overflow: visible;
}

/* ---------- 1c. Theme class-name collision ----------
   .site-header, .site-footer and .header-inner are also Hello Elementor's
   own class names, and the theme constrains .header-inner to its container
   width (1140px by default). That rule was hitting our markup too — which is
   why the header stayed narrow no matter what was changed on the Elementor
   side. The constraint was never coming from Elementor.

   Our header and footer now carry #atm-header / #atm-footer, so these rules
   win on ID specificity regardless of source order or which theme is active. */
#atm-header.site-header {
  width: 100%;
  max-width: none;
  left: 0;
  right: 0;
  margin: 0;
}
#atm-footer.site-footer {
  width: 100%;
  max-width: none;
  margin: 0;
  float: none;
  clear: both;
}
#atm-header .header-inner,
#atm-footer .wrap {
  max-width: var(--wrap);
  width: 100%;
  margin-inline: auto;
  float: none;
}

/* Hide the theme's own header/footer if it renders alongside ours. */
body > .site-header:not(#atm-header),
body > .site-footer:not(#atm-footer),
.site-header:not(#atm-header) .site-navigation,
[data-elementor-type="header"]:empty,
[data-elementor-type="footer"]:empty {
  display: none;
}

/* Backstop: the header and footer span the viewport regardless of what
   wraps them. */
.site-header {
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
}
.site-footer {
  width: 100%;
  max-width: none;
}

/* ---------- 1b. Full-bleed escape for boxed containers ----------
   If the Theme Builder Container is still in "boxed" mode, the rules above
   depend on out-styling Elementor's kit CSS — which loses if this stylesheet
   is cached, blocked or loaded out of order. These rules don't compete on
   specificity at all: they break the child out of whatever width its parent
   happens to be, so the footer spans the screen even when the container
   itself stays at 1140px.

   Scoped to .e-con-boxed on purpose. Applying it to an already-full-width
   container would shift content by the scrollbar width. */
[data-elementor-type="footer"] .e-con-boxed .site-footer,
[data-elementor-type="header"] .e-con-boxed .site-header {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* JavaScript moves .site-header to <body> (main.js §10), which is the real
   fix for the fixed-position containing block. This is the no-JS fallback. */
html:not(.js) [data-elementor-type="header"] .e-con-boxed .site-header {
  position: static;
}

/* The Theme Builder wrappers must not add spacing or a stacking context. */
[data-elementor-type="header"],
[data-elementor-type="footer"] {
  position: static;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: none;
}

/* ---------- 2. Defensive typography ----------
   Belt-and-braces in case "Disable Default Fonts / Colors" has not been
   switched on in Site Settings → Layout. Matches style.css exactly. */
.elementor h1, .elementor h2, .elementor h3, .elementor h4,
[data-elementor-type] h1, [data-elementor-type] h2,
[data-elementor-type] h3, [data-elementor-type] h4 {
  font-family: var(--f-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
  line-height: 1.07;
  letter-spacing: -.015em;
  color: var(--navy);
}
.elementor h1, [data-elementor-type] h1 { font-size: var(--t-h1); }
.elementor h2, [data-elementor-type] h2 { font-size: var(--t-h2); }
.elementor h3, [data-elementor-type] h3 { font-size: var(--t-h3); line-height: 1.2; }
.elementor .section--navy h2, .elementor .section--navy h3,
.elementor .hero__title, .elementor .cta h2,
.elementor .page-hero h1, .elementor .case__body h3,
.elementor .member h3, .elementor .contact-card h3 { color: #fff; }
.elementor .hero__title { font-size: var(--t-hero); }
.elementor .cap h3 { font-size: 1.3rem; }
.elementor .member h3 { font-size: 1.2rem; }

.elementor p { font-family: var(--f-body); }
.elementor a { text-decoration: none; }

/* ---------- 3. Host theme reset ----------
   Hello Elementor needs nothing; these guard against themes that wrap
   content in a padded container. */
.elementor-page .site-main,
.elementor-page .site-content,
.elementor-page .entry-content,
.elementor-page #content {
  padding: 0;
  margin: 0;
  max-width: none;
}
.elementor-page .entry-header,
.elementor-page .page-header { display: none; }

/* Logged-in admin bar must not sit on top of the fixed header */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* ---------- 6. Theme <button> defaults ----------
   Most themes, Hello Elementor included, give bare <button> elements padding,
   a border, a border-radius and a background. The prototype's reset clears
   border and background but not padding — harmless on a static page, but here
   the theme's ~0.6em padding inflates any control that relies on an explicit
   pixel height. The carousel dots are 34x3px bars; theme padding turned them
   into 24px blocks.

   These restate the intended values at a specificity the theme can't beat. */
.carousel__foot .carousel__dots button {
  width: 34px;
  height: 3px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 2px;
  background: var(--line);
  box-shadow: none;
  font-size: 0;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;
}
.carousel__foot .carousel__dots button:hover { background: var(--muted); }
.carousel__foot .carousel__dots button[aria-selected="true"] {
  background: var(--signal);
  transform: scaleY(1.8);
}

/* The arrows keep their designed border and background — only the theme's
   padding and native appearance are cleared. */
.carousel__nav {
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
#atm-header .nav-toggle {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

/* ---------- 7. Optional: Elementor Pro Form widget ----------
   The Contact page ships the prototype's own <form> markup so the design
   matches exactly, but it has no backend. To wire up real submissions,
   replace that HTML widget with an Elementor Pro Form widget and give the
   widget the CSS class  atm-form  — these rules restyle it to be visually
   identical to the prototype's fields. */
.atm-form .elementor-form .elementor-field-group {
  margin-bottom: 1.1rem;
  flex-direction: column;
  align-items: stretch;
}
.atm-form .elementor-form .elementor-field-group > label {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .5rem;
  padding: 0;
}
.atm-form .elementor-form .elementor-field-textual,
.atm-form .elementor-form input[type="text"],
.atm-form .elementor-form input[type="email"],
.atm-form .elementor-form input[type="tel"],
.atm-form .elementor-form textarea,
.atm-form .elementor-form select {
  width: 100%;
  font-family: var(--f-body);
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid transparent;
  padding: .95rem 1.1rem;
  border-radius: var(--radius);
  box-shadow: none;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.atm-form .elementor-form textarea { min-height: 170px; resize: vertical; }
.atm-form .elementor-form .elementor-field-textual:focus,
.atm-form .elementor-form textarea:focus,
.atm-form .elementor-form select:focus {
  outline: none;
  border-color: var(--marine);
  background: #fff;
}
.atm-form .elementor-form .elementor-button,
.atm-form .elementor-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--f-mono);
  font-size: var(--t-small);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--signal);
  color: #fff;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), transform .25s var(--ease);
}
.atm-form .elementor-form .elementor-button:hover {
  background: var(--signal-dk);
  transform: translateY(-2px);
}
.atm-form .elementor-message { font-family: var(--f-mono); font-size: var(--t-small); }