/* Wayvarn theme additions: layout fixes, reveal, dropdowns, dark mode, widgets. */

/* -------------------------------------------------------------------------
 * Utilities used by theme templates that are not part of the compiled build.
 * ---------------------------------------------------------------------- */
.inline-block { display: inline-block; }
.self-start { align-self: flex-start; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mt-16 { margin-top: 4rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-20 { padding-bottom: 5rem; }
.pt-28 { padding-top: 7rem; }
.max-w-xl { max-width: 36rem; }
.max-w-4xl { max-width: 56rem; }
.backdrop-blur-xl { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.leading-\[1\.08\] { line-height: 1.08; }
.bg-background\/85 { background-color: color-mix(in oklab, var(--background) 85%, transparent); }
.bg-muted\/40 { background-color: color-mix(in oklab, var(--muted) 40%, transparent); }
.border-border\/60 { border-color: color-mix(in oklab, var(--border) 60%, transparent); }

@media (min-width: 768px) {
  .md\:p-9 { padding: 2.25rem; }
  .md\:pb-24 { padding-bottom: 6rem; }
  .md\:pb-28 { padding-bottom: 7rem; }
  .md\:pt-36 { padding-top: 9rem; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-\[1\.15fr_\.85fr\] { grid-template-columns: 1.15fr 0.85fr; }
}

/* Hero-style page headers sit below the sticky header, so trim the top pad. */
.wv-page-hero { padding-top: 4rem; }
@media (min-width: 768px) { .wv-page-hero { padding-top: 5.5rem; } }

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */
.wv-header { will-change: box-shadow, background; }
.wv-header.is-stuck { box-shadow: var(--shadow-soft); }
.wv-custom-logo img,
.wv-custom-logo .custom-logo {
  height: 2.25rem;
  width: auto;
  max-width: none;
}
@media (min-width: 768px) {
  .wv-custom-logo img,
  .wv-custom-logo .custom-logo { height: 2.5rem; }
}
html.dark .wv-custom-logo img { filter: brightness(0) invert(1); }

/* WordPress-generated primary menu adopts the reference nav styling. */
.wv-header nav ul { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.wv-header nav ul li { position: relative; }
.wv-header nav ul li > a {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 999px;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
  transition: color 0.2s ease;
  white-space: nowrap;
}
.wv-header nav ul li > a:hover,
.wv-header nav ul li.current-menu-item > a,
.wv-header nav ul li.current_page_item > a { color: var(--primary); }
.wv-header nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: none;
  min-width: 15rem;
  flex-direction: column;
  align-items: stretch;
  gap: 0.125rem;
  padding: 0.5rem;
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-elevated);
}
.wv-header nav ul li:hover > ul,
.wv-header nav ul li:focus-within > ul { display: flex; }

/* -------------------------------------------------------------------------
 * Dark mode toggle
 * ---------------------------------------------------------------------- */
.wv-icon-sun { display: none; }
html.dark .wv-icon-sun { display: block; }
html.dark .wv-icon-moon { display: none; }

/* -------------------------------------------------------------------------
 * Motion
 * ---------------------------------------------------------------------- */
.wv-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.wv-reveal.is-visible { opacity: 1; transform: none; }

.mesh-bg { background-image: var(--gradient-mesh); opacity: 0.28; }

@keyframes wv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes wv-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-24px, 18px, 0) scale(1.08); } }
.float-slow { animation: wv-float 9s ease-in-out infinite; }
.drift-slow { animation: wv-drift 16s ease-in-out infinite; }

.text-gradient {
  background-image: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wv-filter-item {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.wv-filter-item.wv-filtered-out {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .wv-reveal { opacity: 1; transform: none; transition: none; }
  .float-slow, .drift-slow { animation: none; }
  * { scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }

/* -------------------------------------------------------------------------
 * Mega menus, mobile nav, accordions, widgets
 * ---------------------------------------------------------------------- */
.wv-menu { position: relative; }
.wv-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: none;
  min-width: 34rem;
  max-width: min(56rem, calc(100vw - 2rem));
  padding: 1.25rem;
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-elevated);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem;
}
.wv-menu.is-open .wv-menu-panel { display: grid; }
@media (max-width: 1023px) { .wv-menu-panel { display: none !important; } }

/* Mobile nav: fully removed from layout unless open, so no empty
   strip / second header row can ever render under the header bar. */
.wv-mobile-nav {
  display: none !important;
  overflow: hidden;
}
.wv-mobile-nav > * { min-height: 0; }
@media (max-width: 1023.98px) {
  .wv-mobile-nav.is-open {
    display: block !important;
    animation: wv-mobile-nav-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}
@keyframes wv-mobile-nav-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.wv-accordion-body { display: none; }
.wv-accordion.is-open .wv-accordion-body { display: block; }

.wv-chat { display: none; }
.wv-chat.is-open { display: block; }

.wv-hidden { display: none !important; }

/* Editor content inside WordPress pages and posts. */
.prose-wv > * + * { margin-top: 1.15rem; }
.prose-wv h2 { font-size: 1.6rem; font-weight: 700; margin-top: 2.5rem; color: var(--foreground); }
.prose-wv h3 { font-size: 1.25rem; font-weight: 600; margin-top: 2rem; color: var(--foreground); }
.prose-wv p, .prose-wv li { line-height: 1.75; }
.prose-wv ul, .prose-wv ol { padding-left: 1.25rem; }
.prose-wv ul { list-style: disc; }
.prose-wv ol { list-style: decimal; }
.prose-wv a { color: var(--primary); font-weight: 600; }
.prose-wv img { border-radius: 1.25rem; }
.prose-wv blockquote {
  border-left: 3px solid var(--primary);
  padding-left: 1.25rem;
  font-style: italic;
}

/* Header navigation ------------------------------------------------------ */
.wv-nav-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.5rem 0.7rem; border-radius: 9999px;
  font-size: 0.875rem; font-weight: 600; color: var(--muted-foreground);
  background: transparent; border: 0; cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.wv-nav-link:hover, .wv-nav-link.is-current { color: var(--primary); background: color-mix(in oklab, var(--primary) 8%, transparent); }
.wv-menu.is-open .wv-nav-link { color: var(--primary); }
.wv-menu.is-open .wv-nav-link svg { transform: rotate(180deg); }

.wv-menu--wide .wv-menu-panel { left: 50%; transform: translateX(-50%); }
.wv-menu-panel--services { min-width: 40rem; }
.wv-menu-panel--solutions { min-width: min(64rem, calc(100vw - 3rem)); }
.wv-menu.is-open .wv-menu-panel { display: block; }
.wv-menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem; }
.wv-menu-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wv-menu-label {
  padding: 0 0.65rem 0.6rem; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground);
}
.wv-menu-item {
  display: flex; gap: 0.7rem; padding: 0.65rem; border-radius: 0.9rem;
  transition: background-color 0.2s ease;
}
.wv-menu-item:hover { background: color-mix(in oklab, var(--primary) 7%, transparent); }
.wv-menu-item:hover .wv-menu-icon { background: var(--primary); color: var(--primary-foreground); }
.wv-menu-icon {
  display: grid; place-items: center; flex: none; width: 2rem; height: 2rem;
  border-radius: 0.6rem; background: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--primary); transition: background-color 0.2s ease, color 0.2s ease;
}
.wv-menu-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; margin-top: 0.9rem; padding: 0.85rem 0.65rem 0.1rem;
  border-top: 1px solid var(--border);
}

.wv-mobile-link {
  display: block; padding: 0.7rem 0.75rem; border-radius: 0.75rem;
  font-size: 0.95rem; font-weight: 600; color: var(--foreground);
  background: transparent; border: 0; text-align: left; cursor: pointer;
}
.wv-mobile-link:hover { background: var(--muted); color: var(--primary); }
.wv-mobile-sublink {
  display: block; padding: 0.5rem 0.75rem; border-radius: 0.65rem;
  font-size: 0.85rem; color: var(--muted-foreground);
}
.wv-mobile-sublink:hover { background: var(--muted); color: var(--primary); }
.wv-accordion.is-open .wv-accordion-mark { transform: rotate(45deg); }
.wv-accordion-mark { display: inline-block; transition: transform 0.25s ease; }

/* -------------------------------------------------------------------------
 * Portfolio: glass cards, animated tags, filters, logo marquee
 * ---------------------------------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wv-glass{position:relative;border-radius:1.5rem;border:1px solid color-mix(in oklab,var(--border) 70%,transparent);background:color-mix(in oklab,var(--background) 78%,transparent);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 12px 34px -22px rgba(15,23,42,.45);transition:transform .45s cubic-bezier(.22,.85,.3,1),box-shadow .45s ease,border-color .45s ease}
.wv-glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(130deg,#0A66C2,#38BDF8 55%,transparent 85%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s ease;pointer-events:none}
.group:hover.wv-glass::before,.wv-glass:hover::before,.wv-glass:focus-within::before{opacity:1}
.wv-glass:hover,.wv-glass:focus-within{transform:translateY(-6px) scale(1.01);box-shadow:0 26px 55px -26px rgba(10,102,194,.5)}
.wv-project-card,.wv-featured-card{display:flex;flex-direction:column;padding:1.5rem;overflow:hidden}
@media(min-width:768px){.wv-project-card{padding:1.75rem}.wv-featured-card{padding:1.75rem}}
.wv-card-link{position:absolute;inset:0;z-index:2;border-radius:inherit}
.wv-card-link:focus-visible{outline:2px solid #38BDF8;outline-offset:3px}
.wv-card-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.wv-card-badge{border-radius:999px;background:color-mix(in oklab,var(--primary) 12%,transparent);color:var(--primary);padding:.25rem .7rem;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.wv-project-logo{display:grid;place-items:center;border-radius:1rem;font-weight:700;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,#0A66C2,#38BDF8);box-shadow:0 10px 24px -14px rgba(10,102,194,.9);flex:none}
.wv-project-logo-img{border-radius:1rem;object-fit:contain;background:#fff;padding:.35rem;flex:none}
.wv-logo-sm{width:2.25rem;height:2.25rem;font-size:.8rem}
.wv-logo-md{width:3rem;height:3rem;font-size:1rem}
.wv-logo-lg{width:3.75rem;height:3.75rem;font-size:1.25rem}
.wv-logo-invert{box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.wv-card-media,.wv-featured-media{position:relative;margin-top:1.25rem;border-radius:1rem;overflow:hidden;background:linear-gradient(135deg,color-mix(in oklab,#0F172A 92%,transparent),#0A66C2);aspect-ratio:16/9;display:grid;place-items:center}
.wv-featured-media{margin-top:0;aspect-ratio:16/8}
.wv-featured-img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.85,.3,1)}
.group:hover .wv-featured-img{transform:scale(1.05)}
.wv-media-placeholder{padding:0 1rem;text-align:center;color:rgba(255,255,255,.92);font-weight:600;font-size:1.05rem;letter-spacing:.01em}
.wv-media-placeholder-sm{font-size:.9rem}
.wv-featured-body{padding-top:1.5rem}
.wv-tag-list{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.15rem 0 0;padding:0;list-style:none}
.wv-tag{border-radius:999px;border:1px solid color-mix(in oklab,var(--border) 80%,transparent);background:color-mix(in oklab,var(--muted) 55%,transparent);padding:.28rem .7rem;font-size:.72rem;font-weight:600;color:color-mix(in oklab,var(--foreground) 78%,transparent);opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease,background-color .3s ease,color .3s ease;transition-delay:calc(var(--wv-tag-index,0)*70ms)}
.wv-reveal.is-visible .wv-tag,.wv-tag:only-child{opacity:1;transform:translateY(0)}
.wv-glass:hover .wv-tag{background:color-mix(in oklab,#38BDF8 16%,transparent);color:var(--primary)}
.wv-tag-more{background:color-mix(in oklab,var(--primary) 12%,transparent);color:var(--primary)}
.wv-card-cta{margin-top:1.35rem;display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:700;color:var(--primary)}
.wv-card-cta svg{transition:transform .3s ease}
.group:hover .wv-card-cta svg{transform:translateX(4px)}
.wv-project-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:640px){.wv-project-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.wv-project-grid{grid-template-columns:repeat(3,1fr)}}
.wv-filter-panel{padding:1.25rem}
@media(min-width:768px){.wv-filter-panel{padding:1.6rem}}
.wv-search{display:flex;align-items:center;gap:.6rem;border-radius:999px;border:1px solid color-mix(in oklab,var(--border) 80%,transparent);background:color-mix(in oklab,var(--background) 90%,transparent);padding:.7rem 1.1rem;color:var(--muted-foreground);transition:border-color .3s ease,box-shadow .3s ease}
.wv-search:focus-within{border-color:#38BDF8;box-shadow:0 0 0 4px color-mix(in oklab,#38BDF8 18%,transparent)}
.wv-search input{flex:1;border:0;background:transparent;outline:none;font-size:.95rem;color:var(--foreground)}
.wv-filter-group{margin-top:1.25rem}
.wv-filter-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-foreground);margin:0 0 .55rem}
.wv-filter-row{display:flex;flex-wrap:wrap;gap:.45rem}
.wv-chip{border-radius:999px;border:1px solid color-mix(in oklab,var(--border) 85%,transparent);background:transparent;padding:.45rem .95rem;font-size:.82rem;font-weight:600;color:color-mix(in oklab,var(--foreground) 80%,transparent);cursor:pointer;transition:all .3s ease}
.wv-chip-sm{font-size:.76rem;padding:.35rem .8rem}
.wv-chip:hover{border-color:#38BDF8;color:var(--primary);transform:translateY(-1px)}
.wv-chip.is-active{border-color:transparent;background:linear-gradient(135deg,#0A66C2,#38BDF8);color:#fff;box-shadow:0 10px 22px -14px rgba(10,102,194,.9)}
.wv-filter-count{margin:1.15rem 0 0;font-size:.8rem;color:var(--muted-foreground)}
.wv-project-card.is-filtered{opacity:0;transform:translateY(14px) scale(.97);pointer-events:none;position:absolute;visibility:hidden}
.wv-project-card.is-entering{animation:wv-card-in .45s cubic-bezier(.22,.85,.3,1) both}
@keyframes wv-card-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.wv-empty{margin-top:2.5rem;text-align:center;color:var(--muted-foreground)}
.wv-service-item{padding:.85rem 1.1rem;font-size:.9rem;font-weight:600;border-radius:1rem}
.wv-result-item{position:relative;padding:.85rem 1.1rem .85rem 2.4rem;border-radius:1rem;border:1px solid color-mix(in oklab,var(--border) 70%,transparent);background:color-mix(in oklab,var(--muted) 40%,transparent);font-size:.92rem;color:color-mix(in oklab,var(--foreground) 85%,transparent)}
.wv-result-item::before{content:"";position:absolute;left:1rem;top:1.25rem;width:.5rem;height:.5rem;border-radius:999px;background:linear-gradient(135deg,#0A66C2,#38BDF8)}
.wv-detail-panel{padding:1.6rem}
.wv-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)}
.wv-marquee-track{display:flex;gap:.9rem;width:max-content;animation:wv-marquee 90s linear infinite}
.wv-marquee:hover .wv-marquee-track,.wv-marquee:focus-within .wv-marquee-track,.wv-marquee.is-paused .wv-marquee-track{animation-play-state:paused}
@keyframes wv-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wv-marquee-item{display:flex;align-items:center;gap:.65rem;border-radius:999px;border:1px solid color-mix(in oklab,var(--border) 75%,transparent);background:color-mix(in oklab,var(--background) 85%,transparent);padding:.5rem 1.1rem .5rem .5rem;font-size:.85rem;font-weight:600;white-space:nowrap;transition:border-color .3s ease,transform .3s ease}
.wv-marquee-item:hover{border-color:#38BDF8;transform:translateY(-2px)}
.wv-reveal{transition-delay:var(--wv-delay,0ms)}
@media(prefers-reduced-motion:reduce){.wv-glass,.wv-tag,.wv-featured-img,.wv-marquee-track{transition:none!important;animation:none!important}.wv-tag{opacity:1;transform:none}}