/**
 * Crossmiles Elementor — scoped design-system primitives
 *
 * This file contains shared primitives only. Widget presentation belongs in
 * the individual widget stylesheets and must opt into these helpers through
 * the cm-site/cm-widget namespaces.
 */

/* Box sizing is limited to plugin output. */
.cm-site,
.cm-site *,
.cm-site *::before,
.cm-site *::after,
.cm-widget,
.cm-widget *,
.cm-widget *::before,
.cm-widget *::after {
  box-sizing: border-box;
}

/* Site and standalone-widget roots. */
.cm-site {
  min-width: 0;
  overflow-x: hidden;
  background: var(--cm-cream);
  color: var(--cm-ink);
  font-family: var(--cm-font-sans);
  line-height: 1.65;
}

.cm-widget {
  min-width: 0;
  color: var(--cm-ink);
  font-family: var(--cm-font-sans);
  line-height: 1.65;
}

/* Elementor containers are often capped at a theme-wide 1140px. Crossmiles
 * sections are deliberately full-width so their internal `.cm-container`
 * can retain the verified 1200px source grid. The host e-con padding is
 * removed below, so `100%` avoids scrollbar-width drift at tablet widths. */
.cm-widget {
  width: 100% !important;
  max-width: 100%;
  margin-left: 0 !important;
}

.cm-widget.cm-header,
.cm-widget.cm-widget--site-header {
  width: 100% !important;
  margin-left: 0 !important;
}

body:has(.cm-widget),
html:has(.cm-widget) {
  overflow-x: hidden;
}

/* The Elementor container wrapper supplies a default 10px gutter. Remove it
 * only for containers that actually host Crossmiles output so the verified
 * 20px desktop / 12px mobile `.cm-container` gutters remain authoritative. */
.elementor .e-con.e-parent:has(.cm-widget) {
  padding-inline: 0 !important;
  padding-block: 0 !important;
}

.elementor .e-con.e-parent:has(.cm-widget) > .e-con-inner {
  padding: 0 !important;
}

/* Namespaced, low-opinionate element normalization. */
.cm-site :where(h1, h2, h3, h4, h5, h6),
.cm-widget :where(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
  color: var(--cm-navy);
  font-family: var(--cm-font-serif);
  font-weight: 600;
  line-height: 1.2;
}

.cm-site :where(p),
.cm-widget :where(p) {
  margin-block-start: 0;
}

.cm-site :where(a),
.cm-widget :where(a) {
  color: inherit;
  text-decoration: none;
}

.cm-site :where(img),
.cm-widget :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.cm-site :where(svg),
.cm-widget :where(svg) {
  display: block;
  max-width: 100%;
}

.cm-site :where(button, input, select, textarea),
.cm-widget :where(button, input, select, textarea) {
  font: inherit;
}

.cm-site :where(button),
.cm-widget :where(button) {
  cursor: pointer;
}

.cm-site :where(button, input, select, textarea):disabled,
.cm-widget :where(button, input, select, textarea):disabled {
  cursor: not-allowed;
}

.cm-site [hidden],
.cm-widget [hidden] {
  display: none !important;
}

/* Shared layout helpers. */
.cm-site .cm-container,
.cm-widget .cm-container,
.cm-site.cm-container,
.cm-widget.cm-container {
  width: var(--cm-container);
  max-width: 100%;
  margin-inline: auto;
}

:where(.cm-site .cm-section,
  .cm-widget .cm-section,
  .cm-site.cm-section,
  .cm-widget.cm-section) {
  padding-block: var(--cm-section-padding);
}

:where(.cm-site .cm-section--compact,
  .cm-widget .cm-section--compact,
  .cm-site.cm-section--compact,
  .cm-widget.cm-section--compact) {
  padding-block: clamp(45px, 6vh, 68px);
}

.cm-site .cm-anchor,
.cm-widget .cm-anchor {
  scroll-margin-top: var(--cm-anchor-offset);
}

/* Shared typography helpers. */
.cm-site .cm-eyebrow,
.cm-widget .cm-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--cm-teal);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.65;
  text-transform: uppercase;
}

.cm-site .cm-eyebrow__rule,
.cm-widget .cm-eyebrow__rule {
  display: block;
  width: 28px;
  height: 1px;
  flex: 0 0 auto;
  background: var(--cm-orange);
}

.cm-site .cm-eyebrow--light,
.cm-widget .cm-eyebrow--light {
  color: var(--cm-teal-light);
}

.cm-site .cm-heading,
.cm-widget .cm-heading {
  max-width: 710px;
  margin-block: 0;
  color: var(--cm-navy);
  font-family: var(--cm-font-serif);
  font-size: clamp(39px, 4.5vw, 62px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.cm-site .cm-heading--hero,
.cm-widget .cm-heading--hero {
  max-width: 720px;
  margin-bottom: 26px;
  font-size: clamp(50px, 5.4vw, 78px);
  line-height: 1.02;
}

.cm-site .cm-heading--inner,
.cm-widget .cm-heading--inner {
  max-width: 720px;
  font-size: clamp(54px, 6vw, 82px);
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.cm-site .cm-heading--light,
.cm-widget .cm-heading--light {
  color: var(--cm-white);
}

.cm-site .cm-heading em,
.cm-site .cm-emphasis,
.cm-widget .cm-heading em,
.cm-widget .cm-emphasis {
  color: var(--cm-orange);
}

.cm-site .cm-lead,
.cm-widget .cm-lead {
  max-width: 620px;
  color: var(--cm-muted);
  font-size: 17px;
  line-height: 1.75;
}

.cm-site .cm-copy,
.cm-widget .cm-copy {
  color: var(--cm-muted);
  font-size: 15px;
}

.cm-site .cm-meta,
.cm-widget .cm-meta {
  color: var(--cm-teal);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.25;
  text-transform: uppercase;
}

.cm-site .cm-text-link,
.cm-widget .cm-text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
  color: var(--cm-navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.cm-site .cm-text-link--light,
.cm-widget .cm-text-link--light {
  color: var(--cm-white);
}

.cm-site .cm-text-link svg,
.cm-widget .cm-text-link svg {
  width: 16px;
  height: 16px;
}

/* Shared button primitives. */
.cm-site .cm-button,
.cm-widget .cm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 0;
  padding: 15px 22px;
  border: 0;
  border-radius: var(--cm-radius-pill);
  background: var(--cm-teal);
  color: var(--cm-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.65;
  text-align: center;
  text-transform: uppercase;
  box-shadow: var(--cm-shadow-button);
  transition:
    transform var(--cm-transition-fast) ease,
    box-shadow var(--cm-transition-fast) ease,
    background-color var(--cm-transition-fast) ease;
}

.cm-site .cm-button:hover,
.cm-widget .cm-button:hover {
  transform: translateY(-3px);
  background: var(--cm-teal-hover);
  box-shadow: 0 16px 32px rgba(40, 166, 160, 0.28);
}

.cm-site .cm-button--small,
.cm-widget .cm-button--small {
  min-height: 0;
  padding: 11px 17px;
  font-size: 11px;
}

.cm-site .cm-button--ghost,
.cm-widget .cm-button--ghost {
  border: 1px solid rgba(18, 52, 90, 0.22);
  background: transparent;
  color: var(--cm-navy);
  box-shadow: none;
}

.cm-site .cm-button--ghost:hover,
.cm-widget .cm-button--ghost:hover {
  background: var(--cm-white);
  box-shadow: var(--cm-shadow);
}

.cm-site .cm-button--navy,
.cm-widget .cm-button--navy {
  background: var(--cm-navy);
  box-shadow: 0 12px 28px rgba(18, 52, 90, 0.22);
}

.cm-site .cm-button--navy:hover,
.cm-widget .cm-button--navy:hover {
  background: var(--cm-navy-2);
  box-shadow: 0 16px 32px rgba(18, 52, 90, 0.28);
}

.cm-site .cm-button--gold,
.cm-widget .cm-button--gold {
  background: var(--cm-gold);
  box-shadow: none;
}

.cm-site .cm-button--light,
.cm-widget .cm-button--light {
  background: var(--cm-white);
  color: var(--cm-navy);
  box-shadow: none;
}

.cm-site .cm-button--block-mobile,
.cm-widget .cm-button--block-mobile {
  max-width: 100%;
}

.cm-site .cm-button svg,
.cm-widget .cm-button svg {
  width: 17px;
  height: 24px;
  flex: 0 0 auto;
}

/* Keyboard visibility is intentionally stronger than the source hover-only UI. */
.cm-site :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible,
.cm-widget :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--cm-orange);
  outline-offset: 3px;
}

.cm-site .cm-skip-link,
.cm-widget .cm-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--cm-white);
  color: var(--cm-navy);
  transform: translateY(-200%);
}

.cm-site .cm-skip-link:focus-visible,
.cm-widget .cm-skip-link:focus-visible {
  transform: none;
}

/* Responsive helper behavior; breakpoint values mirror the verified source. */
@media (max-width: 560px) {
  .cm-site .cm-button--block-mobile,
  .cm-widget .cm-button--block-mobile {
    width: 100%;
  }
}

@media (min-width: 821px) {
  .cm-widget .cm-inner-hero__image {
    height: min(400px, 52vh) !important;
  }
}

/* Reduced motion keeps the layout usable while removing animated affordances. */
@media (prefers-reduced-motion: reduce) {
  .cm-site,
  .cm-site *,
  .cm-site *::before,
  .cm-site *::after,
  .cm-widget,
  .cm-widget *,
  .cm-widget *::before,
  .cm-widget *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .cm-site,
  .cm-widget {
    scroll-behavior: auto !important;
  }

  .cm-site [data-cm-motion],
  .cm-widget [data-cm-motion],
  .cm-site .cm-button:hover,
  .cm-widget .cm-button:hover {
    transform: none !important;
  }

  .cm-site .cm-loader,
  .cm-widget .cm-loader {
    display: none !important;
  }
}

/* The source uses this compact rhythm at desktop widths with short viewports. */
@media (min-width: 821px) and (max-height: 850px) {
  :where(.cm-site .cm-section--compact,
    .cm-widget .cm-section--compact,
    .cm-site.cm-section--compact,
    .cm-widget.cm-section--compact) {
    padding-block: 45px;
  }
}

/* Elementor's frontend reset applies `.elementor img { height:auto; }` after
 * third-party widget styles. Keep fixed-crop media deterministic inside the
 * Crossmiles namespace without changing the host theme or editor canvas. */
.cm-widget .cm-home-hero__image img,
.cm-widget .cm-home-hero__mini img,
.cm-widget .cm-image-benefits__arch img,
.cm-widget .cm-signature__image,
.cm-widget .cm-experience-card__image,
.cm-widget .cm-service-card__image img {
  height: 100% !important;
  object-fit: cover;
}

  .cm-widget .cm-inner-hero__image {
    height: 430px !important;
    object-fit: cover;
    border-radius: 220px 24px 24px 24px;
    box-shadow: var(--cm-shadow);
  }

.cm-widget .cm-tour-card__image,
.cm-widget .cm-blog-card__image {
  height: 220px !important;
  object-fit: cover;
}

.cm-widget .cm-blog-feature__image {
  height: 100% !important;
  min-height: 430px;
  object-fit: cover;
}

@media (min-width: 901px) {
  .cm-widget .cm-tour-card__image,
  .cm-widget .cm-blog-card__image {
    height: 245px !important;
  }
}

  @media (min-width: 561px) and (max-width: 900px) {
    .cm-widget .cm-inner-hero__image {
      height: 370px !important;
      border-radius: 180px 24px 24px 24px;
    }

  .cm-widget .cm-blog-feature__image {
    min-height: 360px;
  }
}

  @media (max-width: 560px) {
    .cm-widget .cm-inner-hero__image {
      height: 300px !important;
      border-radius: 120px 22px 22px 22px;
  }

  .cm-widget .cm-tour-card__image,
  .cm-widget .cm-blog-card__image {
    height: 220px !important;
  }

  .cm-widget .cm-blog-feature__image {
    min-height: 280px;
  }
}

/* The source compact desktop rule keeps the interior hero art at 400px. */
@media (min-width: 821px) {
  .cm-widget .cm-inner-hero__image {
    height: min(400px, 52vh) !important;
  }
}