/* ===== WordPress / Elementor bridge overrides for Tusher Neon ===== */

/* Make the WP admin bar not cover the sticky nav */
body.admin-bar .nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nav { top: 46px; } }

/* WordPress core alignment helpers on dark bg */
.app-main img { max-width: 100%; height: auto; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.alignleft  { float: left;  margin: 0 1.5em 1em 0; }

/* The Elementor-edited content sits inside .app-main — give it room and the page-in animation */
.app-main {
  position: relative;
  z-index: 2;
  flex: 1;
}
.app-main > .elementor,
.app-main > .entry-content { animation: pageIn 0.6s cubic-bezier(0.2,0.7,0.2,1) both; }

/* WordPress nav menu rendered through wp_nav_menu — style it like the design nav-links */
.nav-links ul { list-style: none; display: flex; gap: 4px; align-items: center; margin: 0; padding: 0; }
.nav-links li { position: relative; }
.nav-links li a { display: inline-flex; }
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a { color: var(--accent); }
.nav-links .current-menu-item > a::after,
.nav-links .current_page_item > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 1px; background: var(--accent); box-shadow: 0 0 8px var(--accent);
}
@media (max-width: 980px) {
  .nav-links ul { flex-direction: column; align-items: stretch; gap: 2px; }
}

/* Let Elementor section backgrounds stay transparent so the neon bg shows through */
.app-main .elementor-section,
.app-main .e-con { background-color: transparent; }

/* Default WP content typography inside the neon shell */
.entry-content { width: min(1240px, 92vw); margin: 0 auto; padding: clamp(48px,7vw,96px) 0; }
.entry-content a { color: var(--accent); }
.entry-content h1,.entry-content h2,.entry-content h3 { margin: 1.2em 0 0.5em; }

/* Mobile nav toggle visibility is driven by .open (effects.js) — already in tusher.css */

/* Category filter buttons (courses / portfolio / blog) */
.tn-filter { border: 1px solid var(--line); background: transparent; color: var(--text-2); cursor: pointer; }
.tn-filter:hover { border-color: var(--line-2); color: var(--text); }
.tn-filter.active { border-color: var(--accent); background: rgba(0, 240, 255, 0.08); color: var(--accent); }

/* ============================================================
 * Elementor NEON KIT — makes native Elementor widgets wear the
 * neon skin so click-editable pages match the design.
 * ============================================================ */

/* Sections inherit the page padding rhythm */
.app-main .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1240px; }

/* Buttons */
.app-main .elementor-button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  border-radius: 12px; border: 1px solid transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #06060c;
  box-shadow: 0 8px 30px -8px rgba(0,240,255,0.55), inset 0 0 0 1px rgba(255,255,255,0.2);
  transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.app-main .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -8px rgba(0,240,255,0.7), inset 0 0 0 1px rgba(255,255,255,0.3); }
.app-main .elementor-button .elementor-button-text { color: inherit; }
/* Ghost button — add CSS class "tn-ghost" to the Button widget */
.app-main .tn-ghost .elementor-button {
  background: rgba(255,255,255,0.02); color: var(--text); border-color: var(--line-2); box-shadow: none;
}
.app-main .tn-ghost .elementor-button:hover { background: rgba(0,240,255,0.06); border-color: var(--accent); box-shadow: 0 0 24px rgba(0,240,255,0.18); }

/* Icon Box styled as a neon service card — add CSS class "service-card" */
.app-main .service-card { padding: 26px; height: 100%; }
.app-main .service-card .elementor-icon-box-wrapper { text-align: left; }
.app-main .service-card .elementor-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: inline-grid; place-items: center;
  background: linear-gradient(135deg, rgba(0,240,255,0.16), rgba(168,85,247,0.16));
  border: 1px solid var(--line-2); color: var(--accent); font-size: 20px; margin-bottom: 18px;
}
.app-main .service-card .elementor-icon svg, .app-main .service-card .elementor-icon i { width: 20px; height: 20px; }
.app-main .service-card .elementor-icon-box-title { font-size: 20px; margin-bottom: 10px; color: var(--text); }
.app-main .service-card .elementor-icon-box-description { font-size: 14px; color: var(--text-2); line-height: 1.65; }

/* Counter widget → neon number */
.app-main .elementor-counter .elementor-counter-number-wrapper { font-family: var(--font-display); font-weight: 600; color: var(--accent); }
.app-main .elementor-counter .elementor-counter-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-top: 6px; }

/* Accordion → neon FAQ */
.app-main .elementor-accordion .elementor-accordion-item { border: none; border-bottom: 1px solid var(--line); }
.app-main .elementor-accordion .elementor-tab-title { color: var(--text); font-weight: 500; }
.app-main .elementor-accordion .elementor-tab-content { color: var(--text-2); }