/* =============================================================
   Astute Construction — Elementor widget base styles.

   Colours, typography, spacing, borders, shadows etc. are all driven by
   per-instance Elementor controls using {{WRAPPER}}-scoped selectors (see
   elementor/widgets/*.php); this file only supplies structural CSS that
   Elementor's generated stylesheet doesn't cover — flex/grid layout,
   keyframes, and the small set of CSS custom properties the controls write
   into (--adc-*). Nothing here hardcodes a colour or a brand value.
   ============================================================= */

/* ---------- ADC Button ---------- */
.adc-btn-wrap {
  width: 100%;
}

.adc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: var(--font-body, inherit);
  transition-property:
    transform, background-color, border-color, box-shadow, color;
  transition-timing-function: ease;
  will-change: transform;
}

.adc-btn .adc-icon {
  transition: transform 0.25s ease;
}

.adc-btn-outline {
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.25);
}

.adc-btn-outline:hover {
  border-color: var(--primary);
  background-color: rgba(255, 255, 255, 0.05);
}

/* ---------- ADC Hazard Stripe ---------- */
.adc-hazard {
  position: relative;
  overflow: hidden;
  --adc-hazard-c1: #0f0f0f;
  --adc-hazard-c2: #a77522;
  --adc-hazard-size: 24px;
  --adc-hazard-duration: 18s;
}

.adc-hazard::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--adc-hazard-c2) 0,
    var(--adc-hazard-c2) var(--adc-hazard-size),
    var(--adc-hazard-c1) var(--adc-hazard-size),
    var(--adc-hazard-c1) calc(var(--adc-hazard-size) * 2)
  );
  will-change: transform;
}

.adc-hazard-animate.adc-hazard-dir-left::before {
  animation: adc-hazard-scroll-left var(--adc-hazard-duration) linear infinite;
}

.adc-hazard-animate.adc-hazard-dir-right::before {
  animation: adc-hazard-scroll-right var(--adc-hazard-duration) linear infinite;
}

@keyframes adc-hazard-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}

@keyframes adc-hazard-scroll-right {
  from {
    transform: translateX(50%);
  }
  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .adc-hazard-animate::before {
    animation: none !important;
  }
}

/* ---------- ADC Marquee ---------- */
.adc-marquee {
  position: relative;
  overflow: hidden;
}

.adc-marquee-track {
  display: flex;
  width: max-content;
  --adc-marquee-duration: 30s;
  animation: adc-marquee-scroll-left var(--adc-marquee-duration) linear infinite;
}

.adc-marquee-track.adc-marquee-dir-right {
  animation-name: adc-marquee-scroll-right;
}

.adc-marquee-track.adc-marquee-pause-hover:hover {
  animation-play-state: paused;
}

@keyframes adc-marquee-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes adc-marquee-scroll-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .adc-marquee-track {
    animation: none !important;
  }
}

.adc-marquee-item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
}

.adc-marquee-sep {
  display: inline-flex;
  margin-left: 24px;
}

/* ---------- ADC Counter ---------- */
.adc-counter {
  display: flex;
  align-items: center;
}

.adc-counter-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition-property: background-color, color, transform;
}

.adc-counter-body {
  min-width: 0;
}

.adc-counter-number {
  display: flex;
  align-items: baseline;
  gap: 2px;
  line-height: 1;
}

.adc-counter-label {
  margin-top: 6px;
}

/* ---------- ADC Service Card ---------- */
.adc-svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition-property: background-color, border-color, box-shadow, transform;
  will-change: transform;
}

.adc-svc-card-img {
  position: relative;
  overflow: hidden;
}

.adc-svc-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-property: transform;
}

.adc-svc-card-img .grad {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Style 2 — horizontal layout (image left, content right), matching the
   AMI Final design's .svc-card. Only fills in defaults for properties that
   have no Elementor control default of their own (Card background/border,
   min-height, radius, hover background/border/shadow, image radius, body
   padding) so a value set in the panel still wins. */
.adc-svc-card.adc-svc-card-style-2 {
  flex-direction: row;
  min-height: 150px;
  border-radius: 16px;
  padding: 12px;
  background: var(--paper, #f6f4ef);
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.adc-svc-card.adc-svc-card-style-2:hover {
  background: var(--secondary, #0f0f0f);
  border-color: rgba(167, 117, 34, 0.5);
  box-shadow: var(
    --shadow-xl,
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.04)
  );
}

.adc-svc-card-style-2.adc-hover-lift:hover {
  transform: translateY(-3px);
}

.adc-svc-card-style-2 .adc-svc-card-img {
  flex-shrink: 0;
  border-radius: 12px;
}

.adc-svc-card-style-2 .adc-svc-card-body {
  padding: 8px 8px 8px 0;
}

.adc-svc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.adc-svc-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition-property: background-color, color;
}

.adc-svc-card-title,
.adc-svc-card-desc,
.adc-svc-card-cta {
  transition-property: color;
}

.adc-svc-card-cta {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  text-decoration: none;
}

/* ---------- ADC FAQ ---------- */
.adc-faq-item {
  transition-property: all;
  transition-duration: 0.3s;
}

.adc-faq-item:not(.open):hover {
  border-color: rgba(167, 117, 34, 0.4);
}

.adc-faq-a-content {
  padding-top: 16px;
}

.adc-faq-list--numbered .adc-faq-a-content {
  padding-left: 56px;
}

.adc-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  cursor: pointer;
}

.adc-faq-q-left {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.adc-faq-q-num {
  flex-shrink: 0;
}

.adc-faq-q-txt {
  display: block;
  margin: 0;
  padding-top: 8px;
  font-style: normal;
  line-height: 1.4;
  transition-property: color;
}

.adc-faq-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  transition-property: background-color;
}

.adc-faq-toggle .adc-icon {
  transition-property: color;
}

.adc-faq-icon-open {
  display: none;
}

.adc-faq-item.open .adc-faq-icon-open {
  display: inline-flex;
}

.adc-faq-item.open .adc-faq-icon-closed {
  display: none;
}

.adc-faq-a {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition-property: max-height, opacity;
  transition-duration: 300ms;
  transition-timing-function: ease;
}

.adc-faq-item.open .adc-faq-a {
  max-height: 400px;
  opacity: 1;
}

/* ---------- ADC Number List ---------- */
.adc-numlist {
  --adc-numlist-num-color: rgba(167, 117, 34, 0.4);
  --adc-numlist-num-active-color: var(--primary);
  --adc-numlist-item-gap: 24px;
  --adc-numlist-row-gap: 24px;
  --adc-numlist-divider-color: rgba(255, 255, 255, 0.1);
  border-top: 1px solid var(--adc-numlist-divider-color);
  border-bottom: 1px solid var(--adc-numlist-divider-color);
}

.adc-numlist-item {
  display: flex;
  gap: var(--adc-numlist-row-gap);
  padding: var(--adc-numlist-item-gap) 0;
  border-bottom: 1px solid var(--adc-numlist-divider-color);
}

.adc-numlist-item:last-child {
  border-bottom: none;
}

.adc-numlist-num {
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
  color: var(--adc-numlist-num-color);
  transition: color 0.3s;
}

/* First item is highlighted by default; hovering the list dims every
   number except whichever item is under the pointer — matches AMI Final's
   why-list interaction exactly (see ami final/css/styles.css .why-item-num). */
.adc-numlist-item:first-child .adc-numlist-num {
  color: var(--adc-numlist-num-active-color);
}

.adc-numlist:hover .adc-numlist-num {
  color: var(--adc-numlist-num-color);
}

.adc-numlist:hover .adc-numlist-item:hover .adc-numlist-num {
  color: var(--adc-numlist-num-active-color);
}

.adc-numlist-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adc-numlist-title .adc-icon {
  flex-shrink: 0;
}

/* Reveal-on-scroll, mirroring .reveal/.reveal.on in main.css but under the
   widget's own "adc-" namespace and driven by elementor-widgets.js —
   main.js only ever targets the static PHP template markup, never
   Elementor widget output (see that file's own header comment), since it
   only scans the document once and wouldn't pick up widget instances that
   render later inside the Elementor editor preview. */
.adc-numlist-item.adc-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.adc-numlist-item.adc-reveal.adc-reveal-on {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- ADC Project Filter ---------- */
.adc-work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}

.adc-work-filter {
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.05);
  color: #d1d5db;
  transition: all 0.3s;
  cursor: pointer;
}

.adc-work-filter:hover {
  border-color: rgba(167, 117, 34, 0.6);
  color: #fff;
}

.adc-work-grid {
  display: grid;
}

.adc-work-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition-property: border-color, box-shadow, transform, opacity;
}

.adc-work-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-property: transform;
}

.adc-work-card .grad {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.adc-work-card-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  color: #fff;
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.adc-work-card-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.adc-work-card-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
}

/* Filter hide/show + transition variants */
.adc-work-card.adc-filtered-out {
  display: none;
}

.adc-filter-anim-fade .adc-work-card {
  transition-property: opacity;
  transition-duration: 300ms;
}

.adc-filter-anim-scale .adc-work-card {
  transition-property: transform;
  transition-duration: 300ms;
}

.adc-filter-anim-fade-scale .adc-work-card {
  transition-property: opacity, transform;
  transition-duration: 300ms;
}

.adc-filter-anim-fade .adc-work-card.adc-filtering,
.adc-filter-anim-fade-scale .adc-work-card.adc-filtering {
  opacity: 0;
}

.adc-filter-anim-scale .adc-work-card.adc-filtering,
.adc-filter-anim-fade-scale .adc-work-card.adc-filtering {
  transform: scale(0.92);
}

/* ---------- ADC Lightbox (used by Project Filter) ---------- */
.adc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.adc-lightbox.open {
  display: flex;
}

.adc-lightbox-close,
.adc-lightbox-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  cursor: pointer;
  border-radius: 9999px;
  padding: 12px;
}

.adc-lightbox-close {
  top: 20px;
  right: 20px;
}

.adc-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
}

.adc-lightbox-nav.prev {
  left: 12px;
}

.adc-lightbox-nav.next {
  right: 12px;
}

.adc-lightbox-content {
  max-width: 1024px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.adc-lightbox-img img {
  max-height: 68vh;
  max-width: 100%;
  object-fit: contain;
}

.adc-lightbox-info {
  text-align: center;
  margin-top: 24px;
  max-width: 672px;
}

.adc-lightbox-cat {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 8px;
}

/* ---------- ADC Hero Collage ---------- */
.adc-collage-wrap {
  position: relative;
}

.adc-collage-frame {
  position: absolute;
  top: -16px;
  left: -16px;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.adc-collage {
  position: relative;
}

.adc-collage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.adc-collage-main {
  grid-column: span 2;
  position: relative;
  overflow: hidden;
}

.adc-collage-small {
  position: relative;
  overflow: hidden;
}

.adc-collage-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.adc-collage-main:hover img,
.adc-collage-small:hover img {
  transform: scale(var(--adc-collage-hover-scale, 1.06));
}

.adc-collage-main .grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 15, 15, 0.8), transparent);
  pointer-events: none;
}

.adc-collage-cap {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  color: #fff;
}

.adc-collage-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
}

.adc-collage-badge-bottom-left {
  bottom: -24px;
  left: -16px;
}

.adc-collage-badge-bottom-right {
  bottom: -24px;
  right: -16px;
}

.adc-collage-badge-top-left {
  top: -24px;
  left: -16px;
}

.adc-collage-badge-top-right {
  top: -24px;
  right: -16px;
}

/* ---------- Shared hover-transform presets (see ADC_Widget_Base) ---------- */
.adc-hover-lift,
.adc-hover-scale,
.adc-hover-lift-scale,
.adc-hover-slide {
  transition-property: transform, box-shadow;
  transition-duration: var(--adc-hover-duration, 300ms);
}

.adc-hover-lift:hover {
  transform: translateY(-6px);
}

.adc-hover-scale:hover {
  transform: scale(1.03);
}

.adc-hover-lift-scale:hover {
  transform: translateY(-6px) scale(1.03);
}

.adc-hover-slide:hover {
  transform: translateX(6px);
}

.adc-hover-custom:hover {
  transform: translate(var(--adc-hover-tx, 0), var(--adc-hover-ty, 0))
    scale(var(--adc-hover-scale, 1)) rotate(var(--adc-hover-rotate, 0deg));
}

/* Elementor editor: avoid layout jank while a widget is still empty. */
.elementor-editor-active .adc-empty-notice {
  padding: 16px;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  font-size: 13px;
  color: #6b7280;
}

/* =============================================================
   ADC Menu — see elementor/widgets/class-adc-menu-widget.php.

   Colors/typography for the desktop nav + toggle button use Elementor's
   normal {{WRAPPER}}-scoped controls (structural CSS only lives here, same
   convention as every other widget above). The mobile panel is different:
   assets/js/elementor-widgets.js moves it to a direct child of <body> at
   runtime (a "portal") so position:fixed is never broken by some ancestor
   header section having its own transform/filter/backdrop-filter — the
   exact bug already hit once building this theme's own header flyout. A
   portaled element can't be reached by {{WRAPPER}} descendant selectors
   any more, so its colors are written as a small inline <style> block by
   render() instead, scoped by the [data-adc-menu-portal] attribute that
   survives the move.
   ============================================================= */
.adc-menu {
  position: relative;
}

.adc-menu-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.adc-menu-logo {
  display: flex;
  align-items: center;
  order: 1;
}

.adc-menu-logo a {
  display: inline-flex;
}

.adc-menu-logo img {
  display: block;
}

/* ---------- Desktop layouts (>=1024px) ---------- */
@media (min-width: 1024px) {
  .adc-menu-desktop-layout-logo_menu .adc-menu-desktop-nav-full {
    order: 2;
    margin-left: auto;
  }

  .adc-menu-desktop-layout-split_menu .adc-menu-desktop-nav-left,
  .adc-menu-desktop-layout-split_menu .adc-menu-desktop-nav-right {
    flex: 1 1 0;
  }

  .adc-menu-desktop-layout-split_menu .adc-menu-desktop-nav-left {
    order: 1;
  }

  .adc-menu-desktop-layout-split_menu .adc-menu-desktop-nav-left .adc-menu-list-desktop {
    justify-content: flex-end;
  }

  .adc-menu-desktop-layout-split_menu .adc-menu-logo {
    order: 2;
    flex-shrink: 0;
  }

  .adc-menu-desktop-layout-split_menu .adc-menu-desktop-nav-right {
    order: 3;
  }
}

/* ---------- Mobile layouts (<1024px) ---------- */
@media (max-width: 1023px) {
  .adc-menu-mobile-layout-logo_burger .adc-menu-toggle {
    order: 2;
    margin-left: auto;
  }

  .adc-menu-mobile-layout-burger_logo_cta .adc-menu-bar {
    justify-content: space-between;
  }

  .adc-menu-mobile-layout-burger_logo_cta .adc-menu-toggle {
    order: 1;
  }

  .adc-menu-mobile-layout-burger_logo_cta .adc-menu-logo {
    order: 2;
    margin: 0 auto;
  }

  .adc-menu-mobile-layout-burger_logo_cta .adc-menu-mobile-cta {
    order: 3;
  }
}

.adc-menu-mobile-cta {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .adc-menu-mobile-layout-burger_logo_cta .adc-menu-mobile-cta {
    display: inline-flex;
  }
}

/* ---------- Desktop nav (>=1024px) ---------- */
.adc-menu-desktop-nav {
  display: none;
}

@media (min-width: 1024px) {
  .adc-menu-desktop-nav {
    display: block;
  }
}

.adc-menu-list-desktop {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adc-menu-list-desktop > li {
  position: relative;
}

.adc-menu-list-desktop .adc-menu-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 4px;
  transition: color 0.3s ease;
}

/* Growing underline on hover/active — same effect as the theme's own
   .hd-nav-link in main.css. Uses currentColor rather than a hardcoded
   var(--primary) so it automatically tracks whatever the "Hover / Active"
   color control above is set to. */
.adc-menu-list-desktop .adc-menu-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

.adc-menu-list-desktop .adc-menu-link:hover::before,
.adc-menu-list-desktop .adc-menu-link.active::before {
  width: 100%;
}

.adc-menu-list-desktop > li.menu-item-has-children > .adc-menu-link::after {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 18;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.adc-menu-list-desktop > li.menu-item-has-children:hover > .adc-menu-link::after,
.adc-menu-list-desktop > li.menu-item-has-children:focus-within > .adc-menu-link::after {
  transform: rotate(180deg);
}

.adc-menu-list-desktop .sub-menu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.25);
  border-radius: 0 0 8px 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  z-index: 100;
}

.adc-menu-list-desktop > li.menu-item-has-children:hover > .sub-menu,
.adc-menu-list-desktop > li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* A third-level (nested) submenu opens to the side rather than stacking
   further downward. */
.adc-menu-list-desktop .sub-menu .sub-menu {
  top: 0;
  left: 100%;
}

.adc-menu-list-desktop .sub-menu li {
  position: relative;
}

.adc-menu-list-desktop .sub-menu .adc-menu-link {
  display: flex;
  padding: 10px 20px;
  white-space: nowrap;
}

/* ---------- Mobile toggle (<1024px) ---------- */
.adc-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .adc-menu-toggle {
    display: none;
  }
}

.adc-menu-toggle-close {
  display: none;
}

.adc-menu-toggle[aria-expanded="true"] .adc-menu-toggle-open {
  display: none;
}

.adc-menu-toggle[aria-expanded="true"] .adc-menu-toggle-close {
  display: inline-flex;
}

/* ---------- Mobile overlay (Style 2 / Flyout only) ---------- */
.adc-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.adc-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}

/* ---------- Mobile panel: shared base ---------- */
.adc-menu-panel {
  display: none;
  z-index: 9999;
}

@media (min-width: 1024px) {
  .adc-menu-panel {
    display: none !important;
  }
}

.adc-menu-panel-body {
  list-style: none;
  margin: 0;
}

.adc-menu-panel-body li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.adc-menu-panel .adc-menu-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 17px 4px 17px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: color 0.2s ease, padding-left 0.2s ease;
}

/* Growing left accent bar on hover/active — same effect as the theme's own
   .mob-menu-link in main.css. currentColor tracks the panel's configured
   "Link Hover / Active Color" (see the inline <style> block in render()). */
.adc-menu-panel .adc-menu-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: currentColor;
  transition: height 0.2s ease;
}

.adc-menu-panel .adc-menu-link:hover::before,
.adc-menu-panel .adc-menu-link.active::before {
  height: 22px;
}

.adc-menu-panel .menu-item-has-children > .adc-menu-link::after {
  content: "chevron_right";
  font-family: "Material Symbols Outlined";
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 20;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.4;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.adc-menu-panel .adc-menu-link:hover {
  padding-left: 24px;
}

.adc-menu-panel .menu-item-has-children.is-submenu-open > .adc-menu-link::after {
  transform: rotate(90deg);
  opacity: 1;
}

.adc-menu-panel .sub-menu {
  list-style: none;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.03);
  transition: max-height 0.3s ease;
}

.adc-menu-panel .sub-menu .adc-menu-link {
  padding-left: 34px;
  font-size: 0.92em;
}

/* ---------- Style 1: Dropdown — panel opens in-flow, under the toggle ---------- */
.adc-menu-panel-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  max-height: 0;
  overflow-y: auto;
  opacity: 0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: max-height 0.3s ease, opacity 0.2s ease;
}

.adc-menu-panel-dropdown.is-open {
  display: block;
  max-height: 80vh;
  opacity: 1;
}

/* ---------- Style 2: Flyout — full-height off-canvas panel ---------- */
.adc-menu-panel-flyout {
  position: fixed;
  top: 0;
  bottom: 0;
  width: min(360px, 86vw);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 50px -15px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.adc-menu-panel-flyout.adc-menu-panel-dir-ltr {
  right: 0;
  transform: translateX(100%);
}

.adc-menu-panel-flyout.adc-menu-panel-dir-rtl {
  left: 0;
  transform: translateX(-100%);
}

.adc-menu-panel-flyout.is-open {
  display: flex;
  transform: translateX(0);
}

/* Matches the theme's own .mob-menu-head/.mob-menu-close in main.css —
   gradient bar, bottom accent stripe, diagonal-corner close button that
   rotates on hover. Colors come from the Mobile Panel style controls above
   via the inline <style> block in render() (see the comment there for why). */
.adc-menu-panel-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  flex-shrink: 0;
}

.adc-menu-panel-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
}

.adc-menu-panel-label {
  font-family: var(--font-heading, inherit);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.adc-menu-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0px 8px 0px 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.adc-menu-panel-close:hover {
  transform: rotate(90deg);
}

.adc-menu-panel-flyout .adc-menu-panel-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 0;
}

/* Panel CTA buttons — matches the theme's own .mob-menu-cta in main.css.
   Only rendered at all when a button's text is filled in (see render()).
   Colors come from the "Panel CTA Buttons" style controls via the inline
   <style> block, same portal-scoping as the rest of the Mobile Panel. */
.adc-menu-panel-cta {
  padding-top: 24px;
  margin-top: 20px;
  border-top: 1px dashed #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 20px;
  padding-right: 20px;
}

.adc-menu-panel-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  border-radius: 0px 12px 0px 12px;
  font-size: 15px;
  font-weight: 900;
  font-family: var(--font-heading, inherit);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.adc-menu-panel-cta a:hover {
  transform: translateY(-2px);
}

/* Address + socials, pinned below the scrollable body (a sibling of
   .adc-menu-panel-body, not inside it) rather than part of it, so the
   panel always ends on something branded instead of blank whitespace when
   a menu only has a couple of items — same as the theme's own .mob-menu-foot. */
.adc-menu-panel-foot {
  flex-shrink: 0;
  padding: 16px 20px;
  background: #f9fafb;
  border-top: 1px solid #f0f1f3;
}

.adc-menu-panel-foot-social {
  display: flex;
  gap: 8px;
}

.adc-menu-panel-foot-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.adc-menu-panel-foot-social a svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

body.adc-menu-scroll-lock {
  overflow: hidden;
}