/**
 * Token fallbacks for Elementor's native widgets.
 *
 * These rules deliberately live in mydev-components. Elementor's unlayered Kit
 * and per-widget styles therefore remain higher priority when an editor makes an
 * explicit choice, while untouched widgets inherit the myDev system.
 */
@layer mydev-components {
  :where(.elementor-widget-heading) .elementor-heading-title {
    color: var(--mydev-color-heading);
    font-family: var(--mydev-font-heading);
    font-weight: var(--mydev-font-weight-heading, 600);
    letter-spacing: var(--mydev-letter-spacing-heading, -0.02em);
    line-height: var(--mydev-line-height-heading, 1.15);
    text-wrap: balance;
  }

  :where(.elementor-widget-text-editor) {
    color: var(--mydev-color-text);
    font-family: var(--mydev-font-body);
    line-height: var(--mydev-line-height-body, 1.65);
  }

  :where(.elementor-widget-text-editor) > .elementor-widget-container > :last-child {
    margin-block-end: 0;
  }

  :where(.elementor-button) {
    align-items: center;
	background: var(--mydev-button-background, var(--mydev-color-accent));
	border: 1px solid var(--mydev-button-border, var(--mydev-color-accent));
	border-radius: var(--mydev-button-radius, 999px);
	color: var(--mydev-button-foreground, var(--mydev-color-on-accent));
	font-size: var(--mydev-button-size-font-size, var(--mydev-button-font-size, 1rem));
	font-weight: var(--mydev-button-font-weight, 600);
	gap: var(--mydev-button-size-icon-gap, var(--mydev-space-2));
	min-block-size: var(--mydev-button-size-min-height, var(--mydev-button-min-height, 3rem));
	padding-block: var(--mydev-button-size-padding-block, var(--mydev-button-padding-block, 0.625rem));
	padding-inline: var(--mydev-button-size-padding-inline, var(--mydev-button-padding-inline, 1.25rem));
  }

  :where(.elementor-button):hover,
  :where(.elementor-button):focus-visible {
	background: var(--mydev-button-hover-background, var(--mydev-color-accent-strong));
	border-color: var(--mydev-button-hover-border, var(--mydev-color-accent-strong));
	color: var(--mydev-button-hover-foreground, var(--mydev-color-on-accent));
  }

  :where(.elementor-button-icon, .elementor-icon, .elementor-icon-list-icon) {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
  }

  :where(.elementor-button-icon, .elementor-icon, .elementor-icon-list-icon) :where(svg, i) {
    color: currentColor;
    fill: currentColor;
  }

  :where(.elementor-widget-image) img {
    border-radius: var(--mydev-radius-media, var(--mydev-radius-lg));
  }

  :where(.elementor-widget-image) .widget-image-caption {
    color: var(--mydev-color-muted);
    font-size: var(--mydev-font-size-sm);
    line-height: var(--mydev-line-height-body, 1.65);
    margin-block-start: var(--mydev-space-2);
  }

  :where(.elementor-widget-icon) .elementor-icon,
  :where(.elementor-widget-icon-list) .elementor-icon-list-icon {
    color: var(--mydev-color-accent);
  }

  /* Native Space Between already generates item margins/padding. A grid gap
     here would silently add a second, uneditable row spacing. */
  :where(.elementor-widget-icon-list) .elementor-icon-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  :where(.elementor-widget-icon-list) .elementor-icon-list-item {
    align-items: flex-start;
    gap: var(--mydev-space-2);
  }

  :where(.elementor-widget-divider) .elementor-divider-separator {
    border-color: var(--mydev-color-border);
  }

  :where(.elementor-accordion, .elementor-toggle) {
    border-block-start: 1px solid var(--mydev-color-border);
  }

  :where(.elementor-accordion, .elementor-toggle) :where(.elementor-accordion-item, .elementor-toggle-item) {
    border: 0;
    border-block-end: 1px solid var(--mydev-color-border);
  }

  :where(.elementor-accordion, .elementor-toggle) :where(.elementor-tab-title, .elementor-toggle-title) {
    align-items: center;
    color: var(--mydev-color-heading);
    display: flex;
    font-family: var(--mydev-font-heading);
    font-weight: var(--mydev-font-weight-heading, 600);
    gap: var(--mydev-space-3);
    justify-content: space-between;
    min-block-size: var(--mydev-target-size-min, 2.75rem);
    padding: var(--mydev-space-4) 0;
  }

  :where(.elementor-accordion, .elementor-toggle) :where(.elementor-tab-content, .elementor-toggle-content) {
    color: var(--mydev-color-text);
    padding: 0 0 var(--mydev-space-6);
  }

  :where(.e-n-accordion) .e-n-accordion-item {
    border-block-end: 1px solid var(--mydev-color-border);
  }

  :where(.e-n-accordion) .e-n-accordion-item:first-child {
    border-block-start: 1px solid var(--mydev-color-border);
  }

  :where(.e-n-accordion) .e-n-accordion-item-title {
    color: var(--mydev-color-heading);
    font-family: var(--mydev-font-heading);
    min-block-size: var(--mydev-target-size-min, 2.75rem);
  }

  :where(.elementor-widget-tabs) .elementor-tabs-wrapper,
  :where(.e-n-tabs) .e-n-tabs-heading {
    border-block-end: 1px solid var(--mydev-color-border);
    gap: var(--mydev-space-2);
  }

  :where(.elementor-widget-tabs) .elementor-tab-title,
  :where(.e-n-tabs) .e-n-tab-title {
    border: 0;
    color: var(--mydev-color-muted);
    font-weight: 600;
    min-block-size: var(--mydev-target-size-min, 2.75rem);
  }

  :where(.elementor-widget-tabs) .elementor-tab-title.elementor-active,
  :where(.e-n-tabs) .e-n-tab-title[aria-selected="true"] {
    border-block-end: 2px solid var(--mydev-color-accent);
    color: var(--mydev-color-heading);
  }

  :where(.elementor-widget-tabs) .elementor-tab-content,
  :where(.e-n-tabs) .e-n-tabs-content > * {
    border: 0;
    color: var(--mydev-color-text);
    padding-block: var(--mydev-space-6);
  }

  :where(.elementor-testimonial-content) {
    color: var(--mydev-color-text);
    font-size: var(--mydev-font-size-lg);
    line-height: var(--mydev-line-height-body, 1.65);
  }

  :where(.elementor-testimonial-name) {
    color: var(--mydev-color-heading);
    font-family: var(--mydev-font-heading);
    font-weight: var(--mydev-font-weight-heading, 600);
  }

  :where(.elementor-testimonial-job, .elementor-post-info__item, .elementor-post__meta-data) {
    color: var(--mydev-color-muted);
    font-size: var(--mydev-font-size-sm);
  }

  :where(.elementor-widget-counter) .elementor-counter-number-wrapper {
    color: var(--mydev-color-heading);
    font-family: var(--mydev-font-heading);
    font-weight: var(--mydev-font-weight-heading, 600);
  }

  :where(.elementor-widget-counter) .elementor-counter-title {
    color: var(--mydev-color-muted);
  }

  :where(.elementor-widget-progress) .elementor-progress-wrapper {
    background: var(--mydev-color-surface-muted);
    border-radius: var(--mydev-radius-pill);
  }

  :where(.elementor-widget-progress) .elementor-progress-bar {
    background: var(--mydev-color-accent);
    border-radius: inherit;
  }

  :where(.elementor-widget-form) .elementor-field-label {
    color: var(--mydev-color-heading);
    font-size: var(--mydev-font-size-sm);
    font-weight: 500;
  }

  :where(.elementor-widget-form) :where(.elementor-field-textual, select.elementor-field) {
	background: var(--mydev-form-background, var(--mydev-color-surface));
	border: var(--mydev-field-border-width, 1px) solid var(--mydev-form-border-color, var(--mydev-color-border));
	border-radius: var(--mydev-field-radius, var(--mydev-radius-md));
	color: var(--mydev-form-foreground, var(--mydev-color-text));
	font-size: var(--mydev-field-font-size, var(--mydev-font-size-base));
    min-block-size: var(--mydev-field-height, 3rem);
	padding-block: var(--mydev-field-padding-block, var(--mydev-space-3));
	padding-inline: var(--mydev-field-padding-inline, var(--mydev-space-4));
  }

  :where(.elementor-widget-form) .elementor-field-textual:focus-visible,
  :where(.elementor-widget-form) select.elementor-field:focus-visible {
	border-color: var(--mydev-color-focus, var(--mydev-color-accent));
	box-shadow: 0 0 0 var(--mydev-focus-width, 3px) color-mix(in srgb, var(--mydev-color-focus, var(--mydev-color-accent)) 28%, transparent);
	outline: 0;
  }

  :where(.elementor-widget-form) .elementor-field-textual::placeholder {
    color: var(--mydev-form-placeholder, var(--mydev-color-muted));
    opacity: 1;
  }

  :where(.elementor-widget-form) .elementor-message-success {
    color: var(--mydev-color-positive);
  }

  :where(.elementor-widget-form) :where(.elementor-message-danger, .elementor-help-inline) {
    color: var(--mydev-color-critical);
  }

  :where(.elementor-nav-menu) {
    font-family: var(--mydev-font-body);
  }

  :where(.elementor-nav-menu--dropdown) {
    background: var(--mydev-color-surface);
    border: 1px solid var(--mydev-color-border);
    border-radius: var(--mydev-radius-lg);
    box-shadow: var(--mydev-shadow-md);
    color: var(--mydev-color-text);
  }

  :where(.elementor-search-form__container) {
    background: var(--mydev-form-background, var(--mydev-color-surface));
    border-color: var(--mydev-form-border-color, var(--mydev-color-border));
    border-radius: var(--mydev-field-radius, var(--mydev-radius-md));
  }

  :where(.elementor-search-form__input) {
    color: var(--mydev-color-text);
  }

  :where(.elementor-search-form__input)::placeholder {
    color: var(--mydev-color-muted);
    opacity: 1;
  }

  :where(.elementor-post__title, .elementor-post__title a) {
    color: var(--mydev-color-heading);
    font-family: var(--mydev-font-heading);
  }

  :where(.elementor-post__excerpt, .elementor-post__text) {
    color: var(--mydev-color-text);
  }

  :where(.elementor-post__read-more) {
    color: var(--mydev-color-link);
    font-weight: 600;
  }

  :where(.elementor-social-icon) {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-block-size: var(--mydev-target-size-min, 2.75rem);
    min-inline-size: var(--mydev-target-size-min, 2.75rem);
  }

  :where(
    .elementor-tab-title,
    .elementor-toggle-title,
    .e-n-accordion-item-title,
    .e-n-tab-title,
    .elementor-menu-toggle,
    .elementor-search-form__submit,
    .elementor-social-icon
  ):focus-visible {
    outline: var(--mydev-focus-width, 3px) solid var(--mydev-color-focus);
    outline-offset: var(--mydev-focus-offset, 3px);
  }
}

/*
 * A named recipe is an explicit widget choice, so these unlayered selectors
 * outrank the Kit Theme Style (two classes). Elementor's generated per-widget
 * declarations use the same specificity, load later, and retain local control.
 */
.elementor-widget-button.mydev-button--primary .elementor-button,
.elementor-widget-button.mydev-button--secondary .elementor-button,
.elementor-widget-button.mydev-button--outline .elementor-button,
.elementor-widget-button.mydev-button--quiet .elementor-button {
	background-color: var(--mydev-button-background, var(--mydev-color-accent));
	border: 1px solid var(--mydev-button-border, var(--mydev-color-accent));
	color: var(--mydev-button-foreground, var(--mydev-color-on-accent));
	fill: var(--mydev-button-foreground, var(--mydev-color-on-accent));
}

.elementor-widget-button.mydev-button--primary .elementor-button:hover,
.elementor-widget-button.mydev-button--primary .elementor-button:focus,
.elementor-widget-button.mydev-button--primary .elementor-button:focus-visible,
.elementor-widget-button.mydev-button--secondary .elementor-button:hover,
.elementor-widget-button.mydev-button--secondary .elementor-button:focus,
.elementor-widget-button.mydev-button--secondary .elementor-button:focus-visible,
.elementor-widget-button.mydev-button--outline .elementor-button:hover,
.elementor-widget-button.mydev-button--outline .elementor-button:focus,
.elementor-widget-button.mydev-button--outline .elementor-button:focus-visible,
.elementor-widget-button.mydev-button--quiet .elementor-button:hover,
.elementor-widget-button.mydev-button--quiet .elementor-button:focus,
.elementor-widget-button.mydev-button--quiet .elementor-button:focus-visible {
	background-color: var(--mydev-button-hover-background, var(--mydev-color-accent-strong));
	border-color: var(--mydev-button-hover-border, var(--mydev-color-accent-strong));
	color: var(--mydev-button-hover-foreground, var(--mydev-color-on-accent));
	fill: var(--mydev-button-hover-foreground, var(--mydev-color-on-accent));
}

.elementor-widget-button.mydev-button-size--small .elementor-button,
.elementor-widget-button.mydev-button-size--medium .elementor-button,
.elementor-widget-button.mydev-button-size--large .elementor-button {
	font-size: var(--mydev-button-size-font-size, var(--mydev-button-font-size, 1rem));
	min-block-size: var(--mydev-button-size-min-height, var(--mydev-button-min-height, 3rem));
	padding-block: var(--mydev-button-size-padding-block, var(--mydev-button-padding-block, 0.625rem));
	padding-inline: var(--mydev-button-size-padding-inline, var(--mydev-button-padding-inline, 1.25rem));
}

.elementor-widget-button.mydev-button-size--small .elementor-button-content-wrapper,
.elementor-widget-button.mydev-button-size--medium .elementor-button-content-wrapper,
.elementor-widget-button.mydev-button-size--large .elementor-button-content-wrapper {
	gap: var(--mydev-button-size-icon-gap, var(--mydev-space-2));
}

@media (prefers-reduced-motion: reduce) {
  @layer mydev-components {
    :where(.elementor-widget-accordion, .elementor-widget-toggle, .elementor-widget-tabs, .e-n-accordion, .e-n-tabs) * {
      scroll-behavior: auto;
      transition-duration: 0.01ms;
    }
  }
}

/* Shared action motion. Default native buttons consume the Kit's primary
 * appearance; explicit outline/quiet variants keep their distinct interaction. */
.elementor-widget-button .elementor-button,
.mydev-button,
.wp-element-button,
.wp-block-button__link,
.elementor-widget-form .elementor-button {
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.elementor-widget-button:not(.mydev-button--outline):not(.mydev-button--quiet) .elementor-button,
.mydev-button:not(.mydev-button--outline):not(.mydev-button--quiet),
.wp-element-button,
.wp-block-button__link,
.elementor-widget-form .elementor-button {
  box-shadow: 0 13px 38px color-mix(in srgb, var(--mydev-color-accent) 20%, transparent);
}
.elementor-widget-button:is(.mydev-button--primary,.mydev-button--secondary,.mydev-button--outline,.mydev-button--quiet) .elementor-button {
  line-height: var(--mydev-line-height-body, 1.7);
}
.elementor-widget-button:not(.mydev-button--outline):not(.mydev-button--quiet) .elementor-button:is(:hover, :focus-visible),
.mydev-button:not(.mydev-button--outline):not(.mydev-button--quiet):is(:hover, :focus-visible),
.wp-element-button:is(:hover, :focus-visible),
.wp-block-button__link:is(:hover, :focus-visible),
.elementor-widget-form .elementor-button:is(:hover, :focus-visible) {
  background-color: var(--mydev-button-hover-background, var(--mydev-color-accent-strong));
  border-color: var(--mydev-button-hover-border, var(--mydev-color-accent));
  color: var(--mydev-button-hover-foreground, var(--mydev-color-on-accent));
  transform: translateY(-2px);
  box-shadow: 0 17px 44px color-mix(in srgb, var(--mydev-color-accent) 30%, transparent);
}
.elementor-widget-button.mydev-button--outline .elementor-button,
.mydev-button.mydev-button--outline {
  transition: border-color 220ms ease, background 220ms ease;
}
.elementor-widget-button.mydev-button--quiet .elementor-button,
.mydev-button.mydev-button--quiet {
	transition: color 180ms ease, background 180ms ease;
}
/* Quiet actions are editorial links: retain their native focus target without
 * the padded CTA chrome used by primary/secondary buttons. */
.elementor-widget-button.mydev-button--quiet .elementor-button {
	min-block-size: 0;
	padding-block: 9px;
	padding-inline: 0;
}
.elementor-widget-button:is(.mydev-button--outline, .mydev-button--quiet) .elementor-button:is(:hover, :focus-visible),
.mydev-button:is(.mydev-button--outline, .mydev-button--quiet):is(:hover, :focus-visible) {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .elementor-widget-button[class] .elementor-button,
  .mydev-button[class], .wp-element-button, .wp-block-button__link,
  .elementor-widget-form .elementor-button { transition: none; }
  .elementor-widget-button:not(.mydev-button--outline):not(.mydev-button--quiet) .elementor-button:is(:hover, :focus-visible),
  .mydev-button:not(.mydev-button--outline):not(.mydev-button--quiet):is(:hover, :focus-visible),
  .wp-element-button:is(:hover, :focus-visible), .wp-block-button__link:is(:hover, :focus-visible),
  .elementor-widget-form .elementor-button:is(:hover, :focus-visible) { transform: none; }
}

/* Explicit size recipes need flex centering when their minimum height exceeds
 * the text line. Elementor's unlayered inline-block default otherwise wins. */
.elementor-widget-button:is(.mydev-button-size--small, .mydev-button-size--medium, .mydev-button-size--large) .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Semantic widget surfaces receive their resolved recipe on the widget root.
 * The design compiler owns the variables; component CSS may refine descendants. */
:where(.elementor) .mydev-has-surface-preset {
  background-color: var(--mydev-component-background);
  border-color: var(--mydev-component-border);
  color: var(--mydev-component-body);
}
:where(.elementor) .mydev-has-surface-preset :where(h1, h2, h3, h4, h5, h6) { color: var(--mydev-component-heading); }
:where(.elementor) .mydev-has-surface-preset :where(a:not(.mydev-button)) { color: var(--mydev-component-action); }

/* Optional container decoration; native controls own all section geometry. */
.e-con.mydev-decoration--corner-grid {
  background-image:linear-gradient(color-mix(in srgb,var(--mydev-color-on-inverse) 1.56863%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--mydev-color-on-inverse) 1.56863%,transparent) 1px,transparent 1px),radial-gradient(circle at 0% 10%,color-mix(in srgb,var(--mydev-color-accent) 22%,transparent),transparent 40%);
  background-size:26px 26px,26px 26px,auto;
}

/* Optional dual glow; surface and geometry stay native controls. */
.e-con.mydev-decoration--tech-grid{background-image:linear-gradient(color-mix(in srgb,var(--mydev-color-on-inverse) 3.5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--mydev-color-on-inverse) 3.5%,transparent) 1px,transparent 1px),radial-gradient(circle at 12% 28%,color-mix(in srgb,var(--mydev-color-accent) 18%,transparent),transparent 30%),radial-gradient(circle at 88% 36%,color-mix(in srgb,var(--mydev-client-ambient-blue,var(--mydev-color-info)) 24%,transparent),transparent 33%);background-size:32px 32px,32px 32px,auto,auto}

/* Keep the Audit IA service hero compact and vertically balanced, mirroring
 * the approved Site + app hero spacing without changing the network geometry. */
@media (min-width: 768px) {
  body.single-mydev_service .mydev-decoration--tech-grid:has(.mydev-expertise-network) .elementor-widget-heading h1.elementor-heading-title {
    margin-block-start: clamp(-140px, -12vw, -84px) !important;
  }

  body.single-mydev_service .mydev-decoration--tech-grid:has(.mydev-expertise-network) .elementor-widget-container:has(> .mydev-expertise-network) {
    transform: translateY(clamp(-90px, -6vw, -56px));
  }
}

/* The deliverables section uses the audit maquette's lower-right ambient glow. */
.e-con.mydev-decoration--solution-grid{background-image:linear-gradient(color-mix(in srgb,var(--mydev-color-on-inverse) 3.5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--mydev-color-on-inverse) 3.5%,transparent) 1px,transparent 1px),radial-gradient(circle at 8% 22%,color-mix(in srgb,var(--mydev-color-accent) 15%,transparent),transparent 28%),radial-gradient(circle at 88% 78%,color-mix(in srgb,var(--mydev-client-ambient-blue,var(--mydev-color-info)) 20%,transparent),transparent 32%);background-size:32px 32px,32px 32px,auto,auto}

/* The maquette's editorial FAQ treatment is a native Nested Accordion
 * presentation. Elementor owns the interaction; the theme owns this shared
 * row, rule and open-panel treatment. */
.elementor-widget-n-accordion .e-n-accordion-item-title {
  min-block-size: 74px;
  padding-block: 23px;
  padding-inline: 0;
  border-block-start: 1px solid var(--mydev-color-border);
  color: var(--mydev-color-heading);
  font-family: var(--mydev-font-body, Poppins, sans-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}
.elementor-widget-n-accordion .e-n-accordion-item:last-child .e-n-accordion-item-title { border-block-end: 1px solid var(--mydev-color-border); }
.elementor-widget-n-accordion .e-n-accordion-item-title-icon { color: var(--mydev-color-accent); }
.elementor-widget-n-accordion .e-n-accordion-item-content { padding-block: 0 28px; padding-inline: 0; color: var(--mydev-color-text); }
.e-con.mydev-decoration--accent-grid {
  background-image: linear-gradient(color-mix(in srgb,var(--mydev-color-accent) 5.5%,transparent) 1px,transparent 1px), linear-gradient(90deg,color-mix(in srgb,var(--mydev-color-accent) 5.5%,transparent) 1px,transparent 1px);
  background-size: 26px 26px;
}

/* Light workflow ambient decoration from the maquette. It is selected through
 * the native container decoration control; content and layout remain native. */
.e-con.mydev-decoration--workflow-ambient {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background-color: var(--mydev-color-surface-muted, #f4f6fa);
  background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--mydev-color-accent) 34%, transparent), transparent);
  background-repeat: no-repeat;
  background-size: 52vw 1px;
  background-position: -8vw 34%;
}
.e-con.mydev-decoration--workflow-ambient::before {
  content: "";
  position: absolute;
  z-index: -1;
  inline-size: 420px;
  block-size: 420px;
  inset-inline-start: -170px;
  inset-block-end: 70px;
  border-radius: 50%;
  background: radial-gradient(circle at center, transparent 0 23%, color-mix(in srgb, var(--mydev-color-accent) 8%, transparent) 24% 24.5%, transparent 25% 43%, color-mix(in srgb, var(--mydev-color-heading) 6%, transparent) 44% 44.5%, transparent 45%);
  animation: mydev-workflow-ambient-rotate 24s linear infinite;
}
.e-con.mydev-decoration--workflow-ambient::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .7;
  background: radial-gradient(circle at 39% 30%, var(--mydev-color-info, #689aeb) 0 2px, transparent 3px), radial-gradient(circle at 73% 61%, var(--mydev-color-info, #689aeb) 0 2px, transparent 3px), radial-gradient(circle at 9% 86%, var(--mydev-color-info, #689aeb) 0 2px, transparent 3px);
  background-repeat: no-repeat;
}
@keyframes mydev-workflow-ambient-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .e-con.mydev-decoration--workflow-ambient::before { animation: none; } }