/*
Theme Name: Vertex Agency
Theme URI: https://example.com/
Author: Your Agency
Description: A lightweight, plugin-free, single-page theme for a web technology and digital marketing agency. Tailwind via CDN, native Services CPT, AJAX detail modals, light/dark toggle and WhatsApp-first CTAs.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: vertex-agency
*/

/* Tailwind handles layout. This file holds only what utility classes can't. */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:focus-visible { outline: 2px solid #2748d9; outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible { outline-color: #8aa4ff; }

/* Modal animation, driven by .is-open from main.js */
#vtx-modal-backdrop { opacity: 0; transition: opacity .28s ease; }
#vtx-modal-panel { opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1); }
#vtx-modal.is-open #vtx-modal-backdrop { opacity: 1; }
#vtx-modal.is-open #vtx-modal-panel { opacity: 1; transform: none; }

/* Rich text coming from the editor inside the modal */
.vtx-prose p { margin: 0 0 .9rem; line-height: 1.7; }
.vtx-prose a { color: #2748d9; text-decoration: underline; }
.dark .vtx-prose a { color: #8aa4ff; }

body.vtx-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-ping { animation: none !important; }
  #vtx-modal-backdrop, #vtx-modal-panel { transition: none; }
}

/* ---------- Visual polish ---------- */
.vtx-grid-bg { background-image: radial-gradient(rgba(39,72,217,.14) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent); mask-image: linear-gradient(to bottom, #000 40%, transparent); }
.dark .vtx-grid-bg { background-image: radial-gradient(rgba(138,164,255,.16) 1px, transparent 1px); }
.vtx-blob { position: absolute; border-radius: 9999px; filter: blur(80px); opacity: .55; animation: vtx-float 14s ease-in-out infinite; pointer-events: none; }
@keyframes vtx-float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-26px); } }
.vtx-bar { transform-origin: bottom; animation: vtx-bar 2.2s ease-in-out infinite alternate; }
@keyframes vtx-bar { from { transform: scaleY(.55); } to { transform: scaleY(1); } }

#vtx-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 70; background: linear-gradient(90deg, #2748d9, #f5a524); }

.vtx-nav-link.is-active { color: #2748d9; background: #eef3ff; }
.dark .vtx-nav-link.is-active { color: #fff; background: #131d3c; }

.vtx-btn { position: relative; overflow: hidden; }
.vtx-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; }
.vtx-btn:hover::after { transform: translateX(120%); }

.vtx-prose h3 { margin: 1.25rem 0 .4rem; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.05rem; color: #0f172a; }
.dark .vtx-prose h3 { color: #fff; }

/* Swiper */
.vtx-testimonials .swiper-slide { height: auto; }
.vtx-testimonials .swiper-pagination-bullet { background: #94a3b8; opacity: .6; }
.vtx-testimonials .swiper-pagination-bullet-active { background: #2748d9; opacity: 1; width: 22px; border-radius: 6px; }
.dark .vtx-testimonials .swiper-pagination-bullet-active { background: #8aa4ff; }

@media (prefers-reduced-motion: reduce) {
  .vtx-blob, .vtx-bar, [style*="vtx-float"] { animation: none !important; }
  .vtx-btn::after { display: none; }
}

/* ---------- Mobile overflow safety net ---------- */
html, body { max-width: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
@supports not (overflow: clip) { body { overflow-x: hidden; } }

/* Floating WhatsApp pulse: stays inside the 24px screen margin (no horizontal scroll) */
.vtx-ping { animation: vtx-ping 2s cubic-bezier(0,0,.2,1) infinite; }
@keyframes vtx-ping { 0% { transform: scale(1); opacity: .55; } 75%, 100% { transform: scale(1.5); opacity: 0; } }

/* Decorative dots */
.vtx-dots { background-image: radial-gradient(#2748d9 1.6px, transparent 1.6px); background-size: 14px 14px; opacity: .25; }
.dark .vtx-dots { background-image: radial-gradient(#8aa4ff 1.6px, transparent 1.6px); }

/* Client logo marquee */
.vtx-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.vtx-track { display: flex; gap: 1rem; width: max-content; animation: vtx-scroll 45s linear infinite; }
.vtx-track.is-rev { animation-direction: reverse; animation-duration: 55s; }
.vtx-marquee:hover .vtx-track { animation-play-state: paused; }
@keyframes vtx-scroll { to { transform: translateX(calc(-50% - .5rem)); } }
@media (prefers-reduced-motion: reduce) {
  .vtx-ping { animation: none; opacity: 0; }
  .vtx-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .vtx-track > [aria-hidden="true"] { display: none; }
  .vtx-marquee { -webkit-mask-image: none; mask-image: none; }
}