/*
 * da-native-components.css
 *
 * Pure CSS/HTML replacements for:
 *   - marquee-image-crawler plugin   → CSS @keyframes marquee
 *   - jet-tabs plugin                → CSS-only tab interface
 *   - jet-popup / addon popup        → native <dialog> modal
 *   - jet-tricks parallax            → CSS transform (use GSAP 3 ScrollTrigger for JS parallax)
 *   - da-reveal scroll animation     → paired with da-intersection.js
 *
 * No JavaScript dependencies. Drop the relevant HTML structure anywhere in
 * a template or Elementor HTML widget and the CSS handles the rest.
 * -------------------------------------------------------------------------- */

/* ==========================================================================
   1. CSS MARQUEE  (replaces marquee-image-crawler plugin)
   ==========================================================================

   Usage:
   <div class="da-marquee" aria-label="Partner logos">
     <div class="da-marquee__track">
       <div class="da-marquee__item"><img src="..." alt="..."></div>
       <!-- repeat items -->
       <!-- duplicate the full set once for seamless loop: -->
       <div class="da-marquee__item" aria-hidden="true"><img src="..." alt="..."></div>
     </div>
   </div>

   Options via data attributes on .da-marquee:
     data-speed="40"     — animation duration in seconds (default 30)
     data-direction="reverse"  — scroll right-to-left (default) or left-to-right
   -------------------------------------------------------------------------- */

.da-marquee {
	overflow: hidden;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.da-marquee__track {
	display: flex;
	gap: 40px;
	width: max-content;
	animation: da-marquee-scroll 30s linear infinite;
}

.da-marquee--reverse .da-marquee__track {
	animation-direction: reverse;
}

.da-marquee:hover .da-marquee__track {
	animation-play-state: paused;
}

.da-marquee__item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.da-marquee__item img {
	max-height: 60px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter 0.3s ease, opacity 0.3s ease;
}

.da-marquee__item img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

@keyframes da-marquee-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* ==========================================================================
   2. CSS TABS  (replaces jet-tabs plugin)
   ==========================================================================

   Usage:
   <div class="da-tabs" role="tablist">
     <button class="da-tab" role="tab" aria-selected="true"  aria-controls="panel-1" id="tab-1">Tab One</button>
     <button class="da-tab" role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Tab Two</button>
     <button class="da-tab" role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3">Tab Three</button>
   </div>
   <div class="da-tab-panel" id="panel-1" role="tabpanel" aria-labelledby="tab-1">Content 1</div>
   <div class="da-tab-panel" id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>Content 2</div>
   <div class="da-tab-panel" id="panel-3" role="tabpanel" aria-labelledby="tab-3" hidden>Content 3</div>

   JS wiring (minimal, add to da-intersection.js or a theme JS file):
     document.querySelectorAll('.da-tab').forEach(btn => {
       btn.addEventListener('click', () => {
         const panel = document.getElementById(btn.getAttribute('aria-controls'));
         document.querySelectorAll('.da-tab').forEach(b => { b.setAttribute('aria-selected','false'); });
         document.querySelectorAll('.da-tab-panel').forEach(p => p.setAttribute('hidden', ''));
         btn.setAttribute('aria-selected', 'true');
         panel.removeAttribute('hidden');
       });
     });
   -------------------------------------------------------------------------- */

.da-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 2px solid rgba(255, 255, 255, 0.12);
	margin-bottom: 24px;
}

.da-tab {
	padding: 12px 24px;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	color: inherit;
	opacity: 0.6;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.da-tab:hover {
	opacity: 1;
}

.da-tab[aria-selected="true"] {
	opacity: 1;
	border-bottom-color: currentColor;
}

.da-tab-panel {
	animation: da-tab-fadein 0.25s ease;
}

.da-tab-panel[hidden] {
	display: none;
}

@keyframes da-tab-fadein {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   3. CSS ACCORDION  (replaces jet-tabs accordion mode / details polyfill)
   ==========================================================================

   Usage — semantic HTML, zero JS required:
   <details class="da-accordion">
     <summary class="da-accordion__summary">Question or heading</summary>
     <div class="da-accordion__body">Answer or content here.</div>
   </details>
   -------------------------------------------------------------------------- */

.da-accordion {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.da-accordion + .da-accordion {
	margin-top: 0;
}

.da-accordion__summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 0;
	cursor: pointer;
	font-weight: 500;
	list-style: none;
	user-select: none;
}

.da-accordion__summary::-webkit-details-marker {
	display: none;
}

.da-accordion__summary::after {
	content: '';
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='currentColor' d='M8 3l5 5-1.4 1.4L8 5.8 4.4 9.4 3 8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.25s ease;
	transform: rotate(180deg);
}

.da-accordion[open] .da-accordion__summary::after {
	transform: rotate(0deg);
}

.da-accordion__body {
	padding-bottom: 18px;
	line-height: 1.7;
}

/* ==========================================================================
   4. NATIVE DIALOG MODAL  (replaces jet-popup / addon popup plugins)
   ==========================================================================

   Usage:
   <!-- Trigger -->
   <button class="da-modal-trigger" data-modal="modal-contact">Open Modal</button>

   <!-- Modal -->
   <dialog class="da-modal" id="modal-contact">
     <button class="da-modal__close" aria-label="Close">&times;</button>
     <div class="da-modal__content">
       <!-- anything here -->
     </div>
   </dialog>

   JS wiring (add to da-intersection.js or theme JS):
     document.querySelectorAll('.da-modal-trigger').forEach(btn => {
       btn.addEventListener('click', () => {
         document.getElementById(btn.dataset.modal)?.showModal();
       });
     });
     document.querySelectorAll('.da-modal').forEach(dialog => {
       dialog.addEventListener('click', e => {
         if (e.target === dialog) dialog.close();
       });
       dialog.querySelector('.da-modal__close')?.addEventListener('click', () => dialog.close());
     });
   -------------------------------------------------------------------------- */

.da-modal {
	padding: 0;
	border: none;
	border-radius: 16px;
	max-width: min(90vw, 760px);
	width: 100%;
	background: #fff;
	color: #111;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
	animation: da-modal-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.da-modal::backdrop {
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	animation: da-backdrop-in 0.25s ease;
}

.da-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.08);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease;
}

.da-modal__close:hover {
	background: rgba(0, 0, 0, 0.15);
}

.da-modal__content {
	padding: 40px;
}

@keyframes da-modal-in {
	from { opacity: 0; transform: scale(0.92) translateY(12px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes da-backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ==========================================================================
   5. SCROLL REVEAL  (paired with da-intersection.js IntersectionObserver)
   ==========================================================================

   Add class `da-reveal` to any element to fade-slide it in when it scrolls
   into view. Variants control direction.

   Usage:
   <div class="da-reveal">Fades in from below</div>
   <div class="da-reveal da-reveal--left">Slides in from left</div>
   <div class="da-reveal da-reveal--right">Slides in from right</div>
   <div class="da-reveal da-reveal--scale">Scales in</div>
   -------------------------------------------------------------------------- */

.da-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.65s cubic-bezier(0.5, 0, 0, 1),
	            transform 0.65s cubic-bezier(0.5, 0, 0, 1);
}

.da-reveal.da-reveal--left  { transform: translateX(-32px); }
.da-reveal.da-reveal--right { transform: translateX(32px); }
.da-reveal.da-reveal--scale { transform: scale(0.94); }

.da-reveal.da-revealed {
	opacity: 1;
	transform: none;
}

/* Staggered children */
.da-reveal-group > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s cubic-bezier(0.5, 0, 0, 1),
	            transform 0.5s cubic-bezier(0.5, 0, 0, 1);
}

.da-reveal-group.da-revealed > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: none; }
.da-reveal-group.da-revealed > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: none; }
.da-reveal-group.da-revealed > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: none; }
.da-reveal-group.da-revealed > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: none; }
.da-reveal-group.da-revealed > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: none; }
.da-reveal-group.da-revealed > *:nth-child(n+6) { transition-delay: 0.4s;  opacity: 1; transform: none; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
	.da-marquee__track       { animation: none; }
	.da-reveal,
	.da-reveal-group > *     { opacity: 1; transform: none; transition: none; }
	.da-modal                { animation: none; }
	.da-modal::backdrop      { animation: none; }
}

/* ==========================================================================
   6. CLICKABLE COLUMN  (replaces make-column-clickable-elementor plugin)
   ==========================================================================

   Wrap any block in .da-clickable-col and add data-href="URL" to make the
   entire block clickable without wrapping in <a>.

   JS wiring:
     document.querySelectorAll('.da-clickable-col[data-href]').forEach(el => {
       el.style.cursor = 'pointer';
       el.addEventListener('click', () => { window.location.href = el.dataset.href; });
     });
   -------------------------------------------------------------------------- */

.da-clickable-col {
	position: relative;
}

.da-clickable-col[data-href] {
	cursor: pointer;
}