/* ==========================================================================
   WordPress + Elementor bridge
   Loaded after theme.css. Everything here exists so that Elementor's own
   markup inherits the DJ Junk Solutions design system, and so WordPress
   core blocks and admin bar behave.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Elementor resets
   Elementor wraps each widget; those wrappers must not add spacing of their
   own or the rhythm set by theme.css drifts.
   -------------------------------------------------------------------------- */
.elementor-widget-container > :first-child { margin-top: 0; }
.elementor-widget-container > :last-child { margin-bottom: 0; }

/* Elementor sets its own container width; ours is driven by --wrap. */
.elementor-section.elementor-section-boxed > .elementor-container,
.e-con.e-con-boxed > .e-con-inner {
  max-width: var(--wrap);
}

/* Elementor boxed containers have no gutter of their own, so content would
   run to the very edge on narrow screens. */
.e-con.e-con-boxed > .e-con-inner {
  padding-inline: var(--gutter);
}
/* Nested containers must not double the gutter. */
.e-con .e-con.e-con-boxed > .e-con-inner { padding-inline: 0; }

/* Full-bleed sections used for the dark bands. */
.dj-section {
  padding-block: var(--section-y);
  position: relative;
}
.dj-section--tight { padding-block: clamp(44px, 5.5vw, 72px); }

/* Elementor containers carrying our section modifiers keep the textures. */
.e-con.section--dark,
.elementor-section.section--dark { background-color: var(--surface-dark); }

.e-con.section--dark::after,
.elementor-section.section--dark::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tex-honeycomb);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.e-con.section--dark > *,
.elementor-section.section--dark > * { position: relative; z-index: 1; }

.e-con.section--dark,
.e-con.section--dark p,
.elementor-section.section--dark,
.elementor-section.section--dark p { color: var(--text-on-dark-muted); }

.e-con.section--dark h1, .e-con.section--dark h2,
.e-con.section--dark h3, .e-con.section--dark h4,
.elementor-section.section--dark h1, .elementor-section.section--dark h2,
.elementor-section.section--dark h3, .elementor-section.section--dark h4 { color: var(--text-on-dark); }

.e-con.section--muted,
.elementor-section.section--muted { background-color: var(--surface-muted); }

/* --------------------------------------------------------------------------
   2. Elementor headings, text and buttons take the theme styling
   -------------------------------------------------------------------------- */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.03;
  text-transform: uppercase;
  color: var(--text-strong);
}
.section--dark .elementor-widget-heading .elementor-heading-title { color: var(--text-on-dark); }

.elementor-widget-text-editor { font-size: 1rem; line-height: 1.68; }

/* An Elementor button given the dj-btn class matches the theme button. */
.elementor-button.dj-btn,
.elementor-widget-button .elementor-button.dj-btn {
  min-height: 52px;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-grad);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.elementor-button.dj-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-blue); color: #fff; }

.elementor-button.dj-btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(255, 255, 255, 0.34);
  color: #fff;
}
.elementor-button.dj-btn--ghost:hover {
  background: rgba(35, 139, 255, 0.16);
  border-color: var(--accent-hi);
  box-shadow: none;
}
.dj-light .elementor-button.dj-btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text-strong);
}
.dj-light .elementor-button.dj-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------------------
   3. Elementor icon-box styled as a DJ service card
   -------------------------------------------------------------------------- */
.elementor-widget-icon-box.dj-trust .elementor-icon-box-wrapper {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  text-align: left;
}
.elementor-widget-icon-box.dj-trust .elementor-icon-box-icon { margin: 0; flex: none; }
.elementor-widget-icon-box.dj-trust .elementor-icon { color: var(--accent-hi); }
.elementor-widget-icon-box.dj-trust .elementor-icon-box-title { font-size: 1.16rem; margin-bottom: 0.3em; }
.elementor-widget-icon-box.dj-trust .elementor-icon-box-description {
  font-size: 0.96rem;
  color: var(--text-on-dark-muted);
  margin: 0;
}

/* Numbered process step */
.elementor-widget.dj-step .elementor-widget-container {
  position: relative;
  padding: 30px 24px 26px;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.section--dark .elementor-widget.dj-step .elementor-widget-container {
  background: var(--c-charcoal);
  border-color: var(--line-dark);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   4. Elementor accordion styled as the DJ FAQ
   -------------------------------------------------------------------------- */
.elementor-widget-accordion.dj-faq .elementor-accordion-item {
  margin-bottom: 12px;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.section--dark .elementor-widget-accordion.dj-faq .elementor-accordion-item {
  background: var(--c-charcoal);
  border-color: var(--line-dark);
}
.elementor-widget-accordion.dj-faq .elementor-tab-title {
  padding: 20px 22px;
  border: 0;
  font-family: var(--font-display);
  font-size: clamp(1.14rem, 1.9vw, 1.32rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.elementor-widget-accordion.dj-faq .elementor-tab-title a { color: var(--text-strong); }
.section--dark .elementor-widget-accordion.dj-faq .elementor-tab-title a { color: #fff; }
.elementor-widget-accordion.dj-faq .elementor-tab-title.elementor-active { color: var(--accent); }
.elementor-widget-accordion.dj-faq .elementor-tab-content {
  padding: 0 22px 22px;
  border: 0;
  font-size: 1rem;
  line-height: 1.68;
}
.section--dark .elementor-widget-accordion.dj-faq .elementor-tab-content { color: var(--text-on-dark-muted); }
.elementor-widget-accordion.dj-faq .elementor-accordion-icon { color: var(--accent); }

/* Nested accordion (Elementor 3.15+) gets the same treatment. */
.elementor-widget-nested-accordion.dj-faq .e-n-accordion-item {
  margin-bottom: 12px;
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.section--dark .elementor-widget-nested-accordion.dj-faq .e-n-accordion-item {
  background: var(--c-charcoal);
  border-color: var(--line-dark);
}
.elementor-widget-nested-accordion.dj-faq summary {
  padding: 20px 22px;
  font-family: var(--font-display);
  font-size: clamp(1.14rem, 1.9vw, 1.32rem);
  font-weight: 700;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. Elementor image widgets inside our media frames
   -------------------------------------------------------------------------- */
.elementor-widget-image.dj-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.elementor-widget-image.dj-logo img { width: clamp(190px, 30vw, 296px); }

/* Hero / page-hero as an Elementor container background. */
/* Elementor keeps .e-con::before for its own background overlay, so the
   scrim and the honeycomb texture are stacked into ::after instead. */
.dj-hero-con {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--c-black);
}
.dj-hero-con::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    var(--tex-honeycomb),
    linear-gradient(180deg, rgba(5, 5, 5, 0.9) 0%, rgba(5, 5, 5, 0.72) 38%, rgba(5, 5, 5, 0.94) 100%),
    linear-gradient(100deg, rgba(5, 5, 5, 0.96) 12%, rgba(5, 5, 5, 0.42) 62%, rgba(22, 116, 232, 0.26) 100%);
  background-repeat: repeat, no-repeat, no-repeat;
}
.dj-hero-con > .e-con-inner,
.dj-hero-con > .elementor-container { position: relative; z-index: 1; }
.dj-hero-con h1,
.dj-hero-con h2,
.dj-hero-con .elementor-heading-title { color: #fff; }
.dj-hero-con p { color: #d7dde5; }

/* Page hero variant sits a little tighter. */
.dj-pagehero-con::after {
  background-image:
    var(--tex-honeycomb),
    linear-gradient(180deg, rgba(5, 5, 5, 0.88) 0%, rgba(5, 5, 5, 0.78) 60%, rgba(5, 5, 5, 0.95) 100%),
    linear-gradient(95deg, rgba(5, 5, 5, 0.95) 10%, rgba(5, 5, 5, 0.5) 70%, rgba(22, 116, 232, 0.28) 100%);
}

/* CTA band */
.dj-cta-con { position: relative; isolation: isolate; overflow: hidden; background-color: var(--c-black); }
.dj-cta-con::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    var(--tex-honeycomb),
    linear-gradient(90deg, rgba(5, 5, 5, 0.96) 20%, rgba(5, 5, 5, 0.72) 60%, rgba(22, 116, 232, 0.4) 100%);
  background-repeat: repeat, no-repeat;
}
.dj-cta-con > .e-con-inner,
.dj-cta-con > .elementor-container { position: relative; z-index: 1; }
.dj-cta-con h2, .dj-cta-con .elementor-heading-title { color: #fff; }
.dj-cta-con p { color: #d3dae2; }

/* --------------------------------------------------------------------------
   6. WordPress core
   -------------------------------------------------------------------------- */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption {
  font-size: 0.88rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
}
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sticky, .gallery-caption, .bypostauthor { /* required by the theme check */ }

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

/* Elementor editor: keep the sticky header from covering the panel canvas. */
body.elementor-editor-active .site-header { position: relative; }
body.elementor-editor-active .float-dock,
body.elementor-editor-active .action-bar { display: none; }

/* --------------------------------------------------------------------------
   7. Comments are not used on this site, but style them in case a page
      enables them.
   -------------------------------------------------------------------------- */
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: 18px 0; border-bottom: 1px solid var(--line); }