/**
 * Site-wide utilities — brand logo, layout bleed, WhatsApp floater, etc.
 */

:root {
  /* Logo red dot — sampled from wabisabi-logo-light.png */
  --ws-brand: #cd2525;
  --ws-brand-rgb: 205, 37, 37;
  --ws-brand-deep: #a81e1e;
  --ws-brand-soft: rgba(205, 37, 37, 0.14);

  /* Remap Agenci lime (--main-*) → brand red (#cd2525 ≈ hsl(0 69% 48%)) */
  --main-h: 0;
  --main-s: 69%;
  --main-l: 48%;
}

/* Kill horizontal page bleed from Agenci card-style sections. */
html,
body {
  overflow-x: clip;
  margin: 0;
  padding: 0;
}

#smooth-wrapper,
#smooth-content,
.site-main {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* Header — full viewport width, no side gutters. */
.header {
  width: 100%;
  max-width: 100%;
  margin-inline: 0 !important;
  inset-inline: 0;
}

.header.fixed-header {
  background: #060606;
}

/* Hide legacy video reel if stale HTML cache still injects the block. */
.ws-home-media {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.ws-brand-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

.ws-brand-logo {
  display: block;
  width: clamp(160px, 15vw, 248px);
  height: auto;
  max-width: 100%;
}

.header .logo .ws-brand-logo {
  width: clamp(172px, 14.5vw, 240px);
}

.mobile-menu__logo .ws-brand-logo {
  width: clamp(180px, 46vw, 248px);
  margin-bottom: 0.25rem;
}

.ws-brand-logo-link:hover .ws-brand-logo,
.ws-brand-logo-link:focus-visible .ws-brand-logo {
  opacity: 0.92;
  transition: opacity 0.25s ease;
}

.ws-whatsapp {
  position: fixed;
  left: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 9990;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ws-whatsapp i {
  font-size: 1.65rem;
  line-height: 1;
}

.ws-whatsapp:hover,
.ws-whatsapp:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

/* —— Header-six pill nav (index-white-4) —— */
.ws-header-pill.header-six .header-six-menu {
  background: #ffffff;
  padding: 0 1.75rem;
  border-radius: 100px;
  box-shadow: 0 8px 28px rgba(23, 23, 26, 0.08);
  border: 1px solid rgba(23, 23, 26, 0.08);
}

.ws-header-pill.header-six .header-six-menu .nav-menu__link {
  color: #111111 !important;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.ws-header-pill.header-six .header-six-menu .nav-menu__link:hover,
.ws-header-pill.header-six .header-six-menu .nav-menu__link:focus-visible,
.ws-header-pill.header-six .header-six-menu .nav-menu__item:hover > .nav-menu__link,
.ws-header-pill.header-six .header-six-menu .nav-menu__item.activePage > .nav-menu__link {
  color: var(--ws-brand, #cd2525) !important;
}

.ws-header-pill.header-six .has-submenu > a::before {
  color: rgba(17, 17, 17, 0.45);
}

.ws-header-pill .ws-header-cta {
  color: #111111;
  border-color: #111111 !important;
  background: transparent;
}

.ws-header-pill .ws-header-cta:hover,
.ws-header-pill .ws-header-cta:focus-visible {
  background-color: var(--ws-brand, #c91518) !important;
  border-color: var(--ws-brand, #c91518) !important;
  color: #ffffff !important;
}

.ws-header-pill .ws-header-icon-btn:hover,
.ws-header-pill .ws-header-icon-btn:focus-visible {
  background-color: var(--ws-brand, #c91518) !important;
  color: #ffffff !important;
}

.ws-header-pill .toggle-mobileMenu img {
  filter: brightness(0);
}

.ws-header-pill.fixed-header {
  background: #060606;
  backdrop-filter: blur(10px);
}

.ws-header-pill.fixed-header .link {
  display: none !important;
}

.ws-header-pill.fixed-header .link2 {
  display: inline-flex !important;
}

.ws-header-pill.fixed-header .ws-header-cta {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

.ws-header-pill.fixed-header .toggle-mobileMenu img {
  filter: none;
}

/* Interior pages (dark page-hero): light logo + light CTA from the start */
body:not(.page-home) .ws-header-pill .link {
  display: none !important;
}

body:not(.page-home) .ws-header-pill .link2 {
  display: inline-flex !important;
}

body:not(.page-home) .ws-header-pill .ws-header-cta {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55) !important;
}

body:not(.page-home) .ws-header-pill .toggle-mobileMenu img {
  filter: brightness(0) invert(1);
}

body:not(.page-home) .ws-header-pill.fixed-header .toggle-mobileMenu img {
  filter: brightness(0) invert(1);
}

@media (max-width: 1199.98px) {
  .ws-header-pill.header-six .header-six-menu {
    padding: 0 1rem;
  }

  .ws-header-pill.header-six .header-six-menu .nav-menu {
    gap: 0.85rem !important;
  }
}

@media (max-width: 575px) {
  .ws-whatsapp {
    width: 3rem;
    height: 3rem;
  }
}

/* =========================================================
   Brand red accents — logo #C91518
   Additive hover/focus only; does not rewrite Agenci layouts.
   ========================================================= */

/* Primary / filled pills on dark surfaces (hero, dark CTAs) */
.ws-hero-cta--primary:hover,
.ws-hero-cta--primary:focus-visible,
.hero-new-2 .about-btn.ws-hero-cta--primary:hover,
.hero-new-2 .about-btn.ws-hero-cta--primary:focus-visible {
  background-color: var(--ws-brand) !important;
  border-color: var(--ws-brand) !important;
  color: #ffffff !important;
}

/* Ghost / outline on dark */
.ws-hero-cta--secondary:hover,
.ws-hero-cta--secondary:focus-visible,
.hero-new-2 .about-btn.ws-hero-cta--secondary:hover,
.hero-new-2 .about-btn.ws-hero-cta--secondary:focus-visible {
  background-color: var(--ws-brand) !important;
  border-color: var(--ws-brand) !important;
  color: #ffffff !important;
}

/* Generic Agenci about-btn (footer, portfolio, etc.) */
.about-btn:hover,
.about-btn:focus-visible {
  background-color: var(--ws-brand) !important;
  border-color: var(--ws-brand) !important;
  color: #ffffff !important;
}

/* Header CTA */
.header .header-button a:hover,
.header .header-button a:focus-visible {
  background-color: var(--ws-brand) !important;
  border-color: var(--ws-brand) !important;
  color: #ffffff !important;
}

/* Contact / form submit — do NOT paint the wrapper (creates a red square
   behind Agenci's multi-part arrow + pill button). Accent the parts only. */
.theme-btn-main:hover .theme-btn,
.theme-btn-main:focus-visible .theme-btn,
button.theme-btn-main:hover .theme-btn,
button.theme-btn-main:focus-visible .theme-btn {
  background-color: var(--ws-brand) !important;
  border-color: var(--ws-brand) !important;
  color: #ffffff !important;
}

.theme-btn-main:hover .theme-btn-arrow-left,
.theme-btn-main:hover .theme-btn-arrow-right,
.theme-btn-main:focus-visible .theme-btn-arrow-left,
.theme-btn-main:focus-visible .theme-btn-arrow-right,
button.theme-btn-main:hover .theme-btn-arrow-left,
button.theme-btn-main:hover .theme-btn-arrow-right,
button.theme-btn-main:focus-visible .theme-btn-arrow-left,
button.theme-btn-main:focus-visible .theme-btn-arrow-right {
  background-color: var(--ws-brand) !important;
  color: #ffffff !important;
}

/* Circular CTA (homepage CTA section) */
.cta-area .tw-btn-circle:hover,
.cta-area .tw-btn-circle:focus-visible {
  background-color: var(--ws-brand) !important;
  border-color: var(--ws-brand) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 40px rgba(var(--ws-brand-rgb), 0.35);
}

.cta-area .tw-btn-circle:hover .tw-btn-circle-text,
.cta-area .tw-btn-circle:focus-visible .tw-btn-circle-text {
  color: #ffffff !important;
}

/* Homepage custom pills */
.ws-home-btn:hover,
.ws-home-btn:focus-visible {
  background-color: var(--ws-brand) !important;
  border-color: var(--ws-brand) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 44px -14px rgba(var(--ws-brand-rgb), 0.45);
}

.ws-home-btn--light:hover,
.ws-home-btn--light:focus-visible {
  background-color: var(--ws-brand) !important;
  border-color: var(--ws-brand) !important;
  color: #ffffff !important;
}

/* About inline CTA hover is scoped in about-page.css (no wrapper fill here) */

/* Focus rings use brand red */
.about-btn:focus-visible,
.ws-hero-cta:focus-visible,
.header .header-button a:focus-visible,
.theme-btn-main:focus-visible,
.ws-home-btn:focus-visible,
.cta-area .tw-btn-circle:focus-visible {
  outline-color: var(--ws-brand) !important;
}

/* Subtle text-link accents (nav / footer) — hover only */
.header .main-menu ul li a:hover,
.header .main-menu ul li a:focus-visible,
.mobile-menu a:hover,
.mobile-menu a:focus-visible,
.footer-section-new-2 a:hover,
.footer-section-new-2 a:focus-visible {
  color: var(--ws-brand);
}

.hero-new-2 .social-link a:hover,
.hero-new-2 .social-link a:focus-visible {
  color: var(--ws-brand);
  opacity: 1;
}

/* FAQ open state icon — brand red */
.faq-three-accordion-button:not(.collapsed)::after {
  background: var(--ws-brand, #cd2525) !important;
  color: #ffffff !important;
}

/* Counter stat rules — brand red */
.counter-box-items .title-2 {
  border-top-color: var(--ws-brand, #cd2525) !important;
}

/* Scroll-to-top — brand red (was Agenci lime) */
.back-to-top-btn {
  background: var(--ws-brand, #cd2525) !important;
  color: #ffffff !important;
}

.back-to-top-btn:hover {
  background: var(--ws-brand-deep, #a81e1e) !important;
  color: #ffffff !important;
}

/* FAQ section title — solid black on light band */
.faq-three-area .section-two-title,
.faq-three-area .section-two-title *,
.ws-service-faq .section-two-title,
.ws-service-faq .section-two-title * {
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .about-btn,
  .ws-hero-cta,
  .header .header-button a,
  .theme-btn-main,
  .ws-home-btn,
  .cta-area .tw-btn-circle {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
}