@layer mydev-reset, mydev-tokens, mydev-base, mydev-components, mydev-layout, mydev-utilities;

@layer mydev-reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote {
    margin: 0;
  }

  img,
  svg,
  video {
    block-size: auto;
    display: block;
    max-inline-size: 100%;
  }

  input,
  input:not([type="checkbox"], [type="radio"], [type="submit"])::placeholder,
  textarea::placeholder {
    color: var(--mydev-form-placeholder, var(--mydev-color-muted));
  }

  button,
  textarea,
  select {
    font: inherit;
  }
}

@layer mydev-base {
  html {
    background: var(--mydev-color-background);
  }

  body {
    -webkit-font-smoothing: antialiased;
    background: var(--mydev-color-background);
    color: var(--mydev-color-text);
    font-family: var(--mydev-font-body);
    font-size: var(--mydev-font-size-base, var(--mydev-font-size-md));
    font-weight: var(--mydev-font-weight-body, 400);
    letter-spacing: var(--mydev-letter-spacing-body, 0);
    line-height: var(--mydev-line-height-body, 1.65);
    min-block-size: 100vh;
    text-rendering: optimizeLegibility;
  }

  a {
    color: var(--mydev-color-link, var(--mydev-color-heading));
    text-decoration-color: var(--mydev-color-link, var(--mydev-color-accent));
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
    transition: color var(--mydev-transition);
  }

  a:hover {
    color: var(--mydev-color-link-hover, var(--mydev-color-heading));
  }

  :focus-visible {
    outline: var(--mydev-focus-width, 3px) solid var(--mydev-color-focus);
    outline-offset: var(--mydev-focus-offset, 3px);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    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;
  }

  h1 {
    font-size: clamp(2.25rem, 6vw, 4rem);
  }

  h2 {
    font-size: clamp(1.65rem, 4vw, 2.5rem);
  }

  h3 {
    font-size: clamp(1.25rem, 3vw, 1.65rem);
  }

  p,
  ul,
  ol,
  blockquote,
  pre,
  table {
    margin-block: 0 var(--mydev-space-6);
  }

  p:last-child,
  ul:last-child,
  ol:last-child,
  blockquote:last-child {
    margin-block-end: 0;
  }

  ::selection {
    background: var(--mydev-color-accent);
    color: var(--mydev-color-on-accent);
  }

  hr {
    border: 0;
    border-block-start: 1px solid var(--mydev-color-border);
    margin-block: var(--mydev-space-12);
  }

  input:not([type="checkbox"], [type="radio"], [type="submit"]),
  select,
  textarea {
    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));
    inline-size: 100%;
    max-inline-size: 36rem;
    min-block-size: var(--mydev-field-height, 3rem);
    padding: var(--mydev-field-padding-block, var(--mydev-space-3)) var(--mydev-field-padding-inline, var(--mydev-space-4));
  }

  input:not([type="checkbox"], [type="radio"], [type="submit"])::placeholder,
  textarea::placeholder {
    color: var(--mydev-form-placeholder, var(--mydev-color-muted));
  }

  button,
  input[type="submit"],
  .mydev-button,
  .wp-element-button,
  .wp-block-button__link {
    background: var(--mydev-color-accent);
    border: 1px solid var(--mydev-color-accent);
    border-radius: var(--mydev-button-radius, 999px);
    color: var(--mydev-color-on-accent);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--mydev-button-font-size, 1rem);
    font-weight: var(--mydev-button-font-weight, 600);
    justify-content: center;
    min-block-size: var(--mydev-button-min-height, 3rem);
    padding: var(--mydev-button-padding-block, 0.7rem) var(--mydev-button-padding-inline, 1.4rem);
    text-decoration: none;
    transition: background var(--mydev-transition), border-color var(--mydev-transition), transform var(--mydev-transition);
  }

  button:hover,
  input[type="submit"]:hover,
  .mydev-button:hover,
  .wp-element-button:hover,
  .wp-block-button__link:hover {
    background: var(--mydev-color-accent-strong);
    border-color: var(--mydev-color-accent-strong);
    color: var(--mydev-color-on-accent);

  }

  .mydev-empty-actions {
    margin-block-end: 0;
  }
}

@layer mydev-components {
  .mydev-shell {
	background: var(--mydev-component-background, var(--mydev-color-surface));
	color: var(--mydev-component-body, var(--mydev-color-text));
    font-size: var(--mydev-field-font-size, var(--mydev-font-size-base));
    inline-size: 100%;
    transition: background-color var(--mydev-transition), box-shadow var(--mydev-transition), color var(--mydev-transition);
    z-index: 100;
  }

  .mydev-shell--surface-subtle {
	background: var(--mydev-component-background, var(--mydev-color-surface-muted));
	color: var(--mydev-component-body, var(--mydev-color-text));
  }

  .mydev-shell--surface-inverse {
	background: var(--mydev-component-background, var(--mydev-color-surface-inverse));
	color: var(--mydev-component-body, var(--mydev-color-on-inverse));
  }

  .mydev-shell--surface-transparent {
    background: transparent;
    color: var(--mydev-color-on-inverse);
  }

  .mydev-shell-host--sticky {
    inset-block-start: 0;
    position: sticky;
    z-index: 100;
  }

  .mydev-shell-host--overlap {
    inset-block-start: 0;
    inset-inline: 0;
    position: absolute;
    z-index: 100;
  }

  .mydev-shell-host--sticky.mydev-shell-host--overlap {
    position: fixed;
  }

  .admin-bar .mydev-shell-host--sticky,
  .admin-bar .mydev-shell-host--overlap {
    inset-block-start: 32px;
  }

  .mydev-shell--scrolled-default.is-scrolled,
  .mydev-shell--scrolled-subtle.is-scrolled,
  .mydev-shell--scrolled-inverse.is-scrolled {
    box-shadow: var(--mydev-shadow-sm);
  }

  .mydev-shell--scrolled-default.is-scrolled {
	background: var(--mydev-component-background, var(--mydev-color-surface));
	color: var(--mydev-component-body, var(--mydev-color-text));
  }

  .mydev-shell--scrolled-subtle.is-scrolled {
	background: var(--mydev-component-background, var(--mydev-color-surface-muted));
	color: var(--mydev-component-body, var(--mydev-color-text));
  }

  .mydev-shell--scrolled-inverse.is-scrolled {
	background: var(--mydev-component-background, var(--mydev-color-surface-inverse));
	color: var(--mydev-component-body, var(--mydev-color-on-inverse));
  }

  .mydev-shell--density-compact {
    --mydev-component-padding: var(--mydev-space-3);
  }

  .mydev-shell--density-comfortable {
    --mydev-component-padding: var(--mydev-space-6);
  }

	.mydev-header__cta--hidden {
		display: none !important;
	}

	.mydev-header__cta .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));
		display: inline-flex;
		font-size: var(--mydev-button-size-font-size, var(--mydev-button-font-size, 1rem));
		font-weight: var(--mydev-button-font-weight, 600);
		justify-content: center;
		line-height: 1.1;
		min-block-size: var(--mydev-button-size-min-height, var(--mydev-button-min-height-sm, 2.75rem));
		padding: var(--mydev-button-size-padding-block, 0.625rem) var(--mydev-button-size-padding-inline, 1.25rem);
		white-space: nowrap;
	}

	.mydev-header__cta .elementor-button:hover,
	.mydev-header__cta .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));
	}

  .mydev-site-header {
    backdrop-filter: blur(1rem);
    background: rgb(255 255 255 / 92%);
    border-block-end: 1px solid rgb(201 212 232 / 80%);
    position: relative;
    z-index: 100;
  }

  .mydev-site-title,
  .mydev-site-footer-title {
    color: var(--mydev-color-heading);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: -0.015em;
    text-decoration: none;
  }

  .mydev-site-title::after,
.mydev-site-footer-title::after {
    color: var(--mydev-color-accent);
    content: ".";
  }

  .mydev-brand-mark,
  .custom-logo-link {
    align-items: center;
    display: inline-flex;
    padding-block: var(--mydev-space-2);
  }

  .mydev-brand-mark-image,
  .custom-logo {
    block-size: auto;
    inline-size: clamp(8.5rem, 16vw, 11rem);
  }

  .mydev-primary-navigation-list,
  .mydev-footer-navigation-list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mydev-space-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mydev-primary-navigation a {
    align-items: center;
    border-radius: var(--mydev-radius-pill, 999px);
    color: var(--mydev-color-text);
    display: flex;
    font-size: var(--mydev-font-size-sm);
    font-weight: 500;
    min-block-size: var(--mydev-target-size-min, 2.75rem);
    padding: var(--mydev-space-2) var(--mydev-space-4);
    text-decoration: none;
  }

  .mydev-primary-navigation a:hover,
  .mydev-primary-navigation .current-menu-item > a,
  .mydev-primary-navigation .current_page_item > a {
    background: var(--mydev-color-surface-muted);
    box-shadow: inset 0 -2px var(--mydev-color-accent);
    color: var(--mydev-color-heading);
  }

  .mydev-entry {
    background: var(--mydev-color-surface);
    border: 1px solid rgb(201 212 232 / 22%);
    border-radius: var(--mydev-radius-xl);
    box-shadow: var(--mydev-shadow-sm);
    overflow: hidden;
    padding: clamp(1.5rem, 5vw, 3.5rem);
  }

  .mydev-entry + .mydev-entry {
    margin-block-start: var(--mydev-space-8);
  }

  .mydev-entry-media {
    margin: calc(clamp(1.5rem, 5vw, 3.5rem) * -1);
    margin-block-end: clamp(1.5rem, 5vw, 3rem);
  }

  .mydev-entry-media img {
    aspect-ratio: 16 / 9;
    inline-size: 100%;
    object-fit: cover;
  }

  .mydev-entry-header {
    margin-block-end: var(--mydev-space-6);
  }

  .mydev-entry-title a {
    color: var(--mydev-color-heading);
    text-decoration: none;
  }

  .mydev-entry-title a:hover {
    color: var(--mydev-color-accent);
  }

  .mydev-entry-meta {
    color: var(--mydev-color-muted);
    font-size: var(--mydev-font-size-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    margin-block-end: var(--mydev-space-3);
    text-transform: uppercase;
  }

  .mydev-entry-content {
    color: var(--mydev-color-text);
  }

  .mydev-entry-content > * + * {
    margin-block-start: var(--mydev-space-6);
  }

  .mydev-entry-content > :where(h2, h3, h4) {
    margin-block-start: var(--mydev-space-12);
  }

  .mydev-archive-header {
    margin-block-end: var(--mydev-space-8);
    text-align: center;
  }

  .mydev-archive-description {
    color: var(--mydev-color-muted);
    font-size: var(--mydev-font-size-lg);
    margin-block-start: var(--mydev-space-4);
  }

  .mydev-not-found,
  .mydev-no-results {
    background: var(--mydev-color-surface);
    border: 1px solid var(--mydev-color-border);
    border-radius: var(--mydev-radius-xl);
    box-shadow: var(--mydev-shadow-sm);
    padding: clamp(2rem, 7vw, 5rem);
    text-align: center;
  }

  .mydev-not-found > * + *,
  .mydev-no-results > * + * {
    margin-block-start: var(--mydev-space-6);
  }

  .search-form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--mydev-space-3);
    justify-content: center;
  }

  .search-form label {
    flex: 1 1 15rem;
  }

  .nav-links {
    display: flex;
    gap: var(--mydev-space-4);
    justify-content: space-between;
    margin-block-start: var(--mydev-space-8);
  }

  .nav-links a {
    background: var(--mydev-color-surface);
    border: 1px solid var(--mydev-color-border);
    border-radius: var(--mydev-radius-pill, 999px);
    display: inline-flex;
    font-weight: 600;
    min-block-size: var(--mydev-target-size-min, 2.75rem);
    padding: var(--mydev-space-2) var(--mydev-space-4);
    text-decoration: none;
  }

  .mydev-section-intro {
    padding-block: clamp(1rem, 4vw, 3rem);
    text-align: center;
  }

  .mydev-section-intro > * {
    margin-inline: auto;
    max-inline-size: 44rem;
  }

  .mydev-eyebrow {
    color: var(--mydev-color-heading);
    font-size: var(--mydev-font-size-sm);
    font-weight: 600;
    letter-spacing: 0.12em;
    margin-block-end: var(--mydev-space-4);
    text-decoration: underline;
    text-decoration-color: var(--mydev-color-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
    text-transform: uppercase;
  }

  .mydev-lead {
    color: var(--mydev-color-muted);
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    margin-block-start: var(--mydev-space-6);
  }

  .mydev-card-grid {
    display: grid;
    gap: var(--mydev-space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    margin-block-start: var(--mydev-space-12);
  }

  .mydev-card {
    background: var(--mydev-color-surface-muted);
    border: 1px solid rgb(201 212 232 / 16%);
    border-radius: var(--mydev-radius-lg);
    padding: var(--mydev-space-6);
    transition: background var(--mydev-transition), border-color var(--mydev-transition), transform var(--mydev-transition);
  }

  .mydev-card:hover {
    background: var(--mydev-color-surface);
    border-color: var(--mydev-color-border);
    transform: translateY(-2px);
  }

  .mydev-card h2,
  .mydev-card h3 {
    font-size: var(--mydev-font-size-lg);
    margin-block-end: var(--mydev-space-3);
  }

  .mydev-card p {
    color: var(--mydev-color-muted);
    font-size: var(--mydev-font-size-sm);
  }

  .mydev-site-footer {
    background: var(--mydev-color-surface);
    border-block-start: 1px solid var(--mydev-color-border);
    color: var(--mydev-color-muted);
    margin-block-start: 0;
  }

  .mydev-site-footer-title {
    color: var(--mydev-color-heading);
  }

  .mydev-site-footer .mydev-brand-mark-image,
  .mydev-site-footer .custom-logo {
    inline-size: 9.5rem;
  }

  .mydev-site-footer-description,
  .mydev-site-footer-credit {
    font-size: var(--mydev-font-size-sm);
    margin: 0;
  }

  .mydev-site-footer a:not(.mydev-site-footer-title) {
    color: var(--mydev-color-text);
    text-decoration: none;
  }

  .mydev-site-footer a:hover {
    color: var(--mydev-color-heading);
  }

  .mydev-site-footer-secondary {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: var(--mydev-space-4);
  }
}

.mydev-footer__cta-band--hidden,
.mydev-footer__empty {
	display: none !important;
}

@layer mydev-layout {
  .mydev-site-header-inner,
  .mydev-site-footer-inner,
  .mydev-site-main {
    inline-size: min(calc(100% - (2 * var(--mydev-container-padding))), var(--mydev-container-width));
    margin-inline: auto;
  }

  .mydev-site-header-inner {
    align-items: center;
    display: flex;
    gap: var(--mydev-space-6);
    justify-content: space-between;
    min-block-size: 4.75rem;
  }

  .mydev-site-footer-inner {
    align-items: flex-start;
    display: flex;
    gap: var(--mydev-space-8);
    justify-content: space-between;
    padding-block: var(--mydev-space-12);
  }

  .mydev-site-main {
    min-block-size: 60vh;
    padding-block: clamp(2.5rem, 8vw, 6rem);
  }


  .mydev-entry,
  .mydev-archive-header,
  .mydev-not-found,
  .mydev-no-results {
    inline-size: min(100%, var(--mydev-readable-size));
    margin-inline: auto;
  }

  .alignwide {
    inline-size: min(100%, var(--mydev-container-width));
    margin-inline: auto;
  }

  .alignfull {
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
  }
}

@layer mydev-utilities {
	:root {
		scroll-padding-block-start: var(--mydev-active-header-offset, 0px);
	}

	html.mydev-mobile-menu-is-open,
	body.mydev-mobile-menu-is-open {
		overflow: hidden;
	}

	.mydev-shell .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item,
	.mydev-shell .elementor-widget-nav-menu .elementor-menu-toggle {
		color: inherit !important;
		fill: currentColor !important;
	}

	.mydev-shell .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
	.mydev-shell .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus,
	.mydev-shell .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active {
		color: var(--mydev-color-accent) !important;
	}

	.mydev-shell--surface-inverse:not(.is-scrolled) .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
	.mydev-shell--surface-inverse:not(.is-scrolled) .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus,
	.mydev-shell--surface-inverse:not(.is-scrolled) .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
	.mydev-shell--surface-transparent:not(.is-scrolled) .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
	.mydev-shell--surface-transparent:not(.is-scrolled) .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus,
	.mydev-shell--surface-transparent:not(.is-scrolled) .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
	.mydev-shell--scrolled-inverse.is-scrolled .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
	.mydev-shell--scrolled-inverse.is-scrolled .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus,
	.mydev-shell--scrolled-inverse.is-scrolled .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active {
		color: var(--mydev-color-on-inverse) !important;
	}

	.mydev-header__logo-default {
		position: relative;
	}

	.mydev-header__logo-default img {
		transition: opacity var(--mydev-transition);
	}

	.mydev-has-inverse-logo .mydev-shell--surface-transparent:not(.is-scrolled) .mydev-header__logo-default:not(:has(~ .mydev-header__logo-inverse)) img,
	.mydev-has-inverse-logo .mydev-shell--surface-inverse:not(.is-scrolled) .mydev-header__logo-default:not(:has(~ .mydev-header__logo-inverse)) img,
	.mydev-has-inverse-logo .mydev-shell--scrolled-inverse.is-scrolled .mydev-header__logo-default:not(:has(~ .mydev-header__logo-inverse)) img {
		opacity: 0;
	}

	.mydev-has-inverse-logo .mydev-shell--surface-transparent:not(.is-scrolled) .mydev-header__logo-default:not(:has(~ .mydev-header__logo-inverse))::after,
	.mydev-has-inverse-logo .mydev-shell--surface-inverse:not(.is-scrolled) .mydev-header__logo-default:not(:has(~ .mydev-header__logo-inverse))::after,
	.mydev-has-inverse-logo .mydev-shell--scrolled-inverse.is-scrolled .mydev-header__logo-default:not(:has(~ .mydev-header__logo-inverse))::after {
		background: var(--mydev-logo-inverse-image) center / contain no-repeat;
		content: "";
		inset: 0;
		pointer-events: none;
		position: absolute;
	}

	.mydev-header__logo-inverse {
		display: none;
	}

	.mydev-shell--surface-transparent:not(.is-scrolled) .mydev-header__logo-default:has(~ .mydev-header__logo-inverse),
	.mydev-shell--surface-inverse:not(.is-scrolled) .mydev-header__logo-default:has(~ .mydev-header__logo-inverse),
	.mydev-shell--scrolled-inverse.is-scrolled .mydev-header__logo-default:has(~ .mydev-header__logo-inverse) {
		display: none;
	}

	.mydev-shell--surface-transparent:not(.is-scrolled) .mydev-header__logo-inverse,
	.mydev-shell--surface-inverse:not(.is-scrolled) .mydev-header__logo-inverse,
	.mydev-shell--scrolled-inverse.is-scrolled .mydev-header__logo-inverse {
		display: block;
	}

	.mydev-elementor-menu-backdrop {
		appearance: none;
		background: rgb(0 0 0 / 48%) !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		color: transparent !important;
		cursor: pointer;
		display: block;
		inset: 0;
		max-block-size: none;
		max-inline-size: none;
		min-block-size: 0;
		min-inline-size: 0;
		padding: 0 !important;
		position: fixed;
		transform: none !important;
		z-index: 108;
	}

	.mydev-elementor-menu-backdrop[hidden] {
		display: none !important;
	}

  .mydev-screen-reader-text {
    block-size: 1px;
    clip-path: inset(50%);
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .mydev-screen-reader-text:focus {
    background: var(--mydev-color-surface);
    block-size: auto;
    border-radius: var(--mydev-radius-md);
    box-shadow: var(--mydev-shadow-md);
    clip-path: none;
    color: var(--mydev-color-heading);
    font-weight: 700;
    inline-size: auto;
    inset-block-start: var(--mydev-space-4);
    inset-inline-start: var(--mydev-space-4);
    padding: var(--mydev-space-3) var(--mydev-space-4);
    z-index: 100000;
  }
}

@media (width <= 64rem) {
	.mydev-header__zone--actions > .elementor-widget-button {
		display: none;
	}

	.mydev-header__zone .elementor-menu-toggle {
		align-items: center;
		appearance: none;
		background: transparent !important;
		border: 1px solid var(--mydev-color-border) !important;
		border-radius: var(--mydev-radius-pill, 999px) !important;
		box-shadow: none !important;
		color: currentColor !important;
		display: inline-flex;
		justify-content: center;
		margin-block: 0 !important;
		padding: 0 !important;
	}

	.mydev-shell--mobile-menu-drawer .elementor-menu-toggle {
		min-block-size: var(--mydev-target-size-min, 2.75rem);
		min-inline-size: var(--mydev-target-size-min, 2.75rem);
		position: relative;
		z-index: 111;
	}

	.mydev-shell--mobile-menu-drawer .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		background: var(--mydev-color-surface);
		block-size: calc(100dvh - var(--mydev-drawer-header-offset, 0px));
		box-shadow: var(--mydev-shadow-lg);
		color: var(--mydev-color-text);
		display: block;
		inline-size: min(24rem, 88vw);
		inset-block: var(--mydev-drawer-header-offset, 0px) 0;
		margin: 0 !important;
		max-block-size: 100dvh !important;
		overflow-y: auto;
		padding: calc(var(--mydev-space-16) + var(--mydev-space-4)) var(--mydev-space-6) max(var(--mydev-space-6), env(safe-area-inset-bottom));
		position: fixed;
		transition: transform var(--mydev-transition), visibility var(--mydev-transition);
		visibility: hidden;
		z-index: 110;
	}

	.admin-bar .mydev-shell--mobile-menu-drawer .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		block-size: calc(100dvh - 32px - var(--mydev-drawer-header-offset, 0px));
		inset-block-start: calc(32px + var(--mydev-drawer-header-offset, 0px));
	}

	.mydev-shell--drawer-side-end .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		inset-inline-end: 0;
		transform: translateX(105%);
	}

	.mydev-shell--drawer-side-start .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		inset-inline-start: 0;
		transform: translateX(-105%);
	}

	[dir="rtl"] .mydev-shell--drawer-side-end .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		transform: translateX(-105%);
	}

	[dir="rtl"] .mydev-shell--drawer-side-start .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		transform: translateX(105%);
	}

	.mydev-shell--mobile-menu-drawer .elementor-nav-menu__container.elementor-nav-menu--dropdown[aria-hidden="false"] {
		transform: translateX(0);
		visibility: visible;
	}

	.mydev-shell--mobile-menu-drawer .elementor-nav-menu--dropdown a {
		border-radius: var(--mydev-radius-md);
		color: var(--mydev-color-text);
		min-block-size: var(--mydev-target-size-min, 2.75rem);
	}

	.mydev-shell--mobile-menu-drawer .elementor-nav-menu--dropdown a:hover,
	.mydev-shell--mobile-menu-drawer .elementor-nav-menu--dropdown a:focus,
	.mydev-shell--mobile-menu-drawer .elementor-nav-menu--dropdown a.elementor-item-active {
		background: var(--mydev-color-surface-muted);
		color: var(--mydev-color-heading);
	}

	.mydev-shell--mobile-cta-hide .elementor-widget-button,
	.mydev-shell--mobile-utility-hide .mydev-header__utility {
		display: none;
	}

	.mydev-shell--mobile-menu-drawer .elementor-nav-menu__container > .elementor-widget-button,
	.mydev-shell--mobile-menu-drawer .elementor-nav-menu__container > .mydev-header__utility {
		--container-widget-height: auto;
		--container-widget-width: 100%;
		align-self: auto;
		block-size: auto;
		flex: 0 0 auto;
		margin-block-start: var(--mydev-space-5);
		width: 100%;
	}

	.mydev-shell--mobile-menu-drawer .elementor-nav-menu__container > .elementor-widget-button .elementor-button {
		block-size: auto;
		inline-size: 100%;
	}

	.mydev-shell--mobile-menu-drawer .elementor-nav-menu__container > .elementor-widget-button {
		display: block;
	}
}

@media (width <= 48rem) {
	.admin-bar .mydev-shell--mobile-menu-drawer .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		block-size: calc(100dvh - 46px - var(--mydev-drawer-header-offset, 0px));
		inset-block-start: calc(46px + var(--mydev-drawer-header-offset, 0px));
	}
}

@media (width > 64rem) {
	.mydev-elementor-menu-backdrop {
		display: none !important;
	}
}

@media (width <= 48rem) {
  .mydev-shell--hide-mobile {
    display: none !important;
  }

  .admin-bar .mydev-shell-host--sticky,
  .admin-bar .mydev-shell-host--overlap {
    inset-block-start: 46px;
  }

  .mydev-site-header-inner {
    flex-wrap: wrap;
    padding-block: var(--mydev-space-3);
  }

  .mydev-primary-navigation {
    inline-size: 100%;
  }

  .mydev-primary-navigation-list {
    border-block-start: 1px solid var(--mydev-color-border);
    inline-size: 100%;
    justify-content: flex-start;
    padding-block: var(--mydev-space-3);
  }

  .mydev-site-footer-inner,
  .mydev-site-footer-secondary {
    align-items: flex-start;
    flex-direction: column;
  }

  .mydev-entry {
    border-radius: var(--mydev-radius-lg);
  }
}

@media (48rem < width <= 64rem) {
  .mydev-shell--hide-tablet {
    display: none !important;
  }
}

@media (width > 64rem) {
  .mydev-shell--hide-desktop {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .mydev-shell {
    display: none !important;
  }

  .mydev-site-header,
  .mydev-site-footer,
  .mydev-skip-link,
  .mydev-back-to-top {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  .mydev-site-main {
    inline-size: 100%;
    padding: 0;
  }

  .mydev-entry {
    border: 0;
    box-shadow: none;
    padding: 0;
  }
}