/* =========================================================
   Marvento Shared UI Polish
   Modern, minimal buttons + desktop navigation
   Loaded AFTER page-specific styles.
   ========================================================= */

:root{
  --mv-ui-navy:#0b4f74;
  --mv-ui-navy-hover:#083d59;
  --mv-ui-red:#8f1d22;
  --mv-ui-red-hover:#73171b;
  --mv-ui-green:#25D366;
  --mv-ui-green-hover:#1fbd5a;
  --mv-ui-text:#13202b;
  --mv-ui-border:rgba(19,32,43,.14);
  --mv-ui-focus:rgba(42,160,215,.30);
  --mv-ui-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- Desktop navigation: remove the "pill in a box" look ---------- */
.mv-home-nav,
.mv-about-nav,
.mv-thanks-nav,
.nav{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  gap:22px;
}

.mv-home-nav a,
.mv-about-nav a,
.mv-thanks-nav a,
.nav a{
  position:relative;
  padding:10px 0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:rgba(19,32,43,.72);
  font-size:13px;
  font-weight:600 !important;
  letter-spacing:0;
  transition:color .18s ease;
}

.mv-home-nav a::after,
.mv-about-nav a::after,
.mv-thanks-nav a::after,
.nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:3px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .18s ease;
  opacity:.55;
}

.mv-home-nav a:hover,
.mv-about-nav a:hover,
.mv-thanks-nav a:hover,
.nav a:hover{
  background:transparent !important;
  color:var(--mv-ui-navy) !important;
}

.mv-home-nav a:hover::after,
.mv-about-nav a:hover::after,
.mv-thanks-nav a:hover::after,
.nav a:hover::after{
  transform:scaleX(1);
}

/* ---------- Shared button feel ---------- */
.mv-home-btn,
.mv-about-btn,
.mv-thanks-btn,
.btn{
  min-height:44px;
  padding:0 17px !important;
  border-radius:10px !important;
  border:1px solid transparent;
  box-shadow:none !important;
  font-size:13px;
  font-weight:600 !important;
  line-height:1;
  letter-spacing:0;
  cursor:pointer;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s var(--mv-ui-ease),
    box-shadow .18s ease;
}

.mv-home-btn:hover,
.mv-about-btn:hover,
.mv-thanks-btn:hover,
.btn:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 6px 18px rgba(2,8,23,.10) !important;
}

.mv-home-btn:active,
.mv-about-btn:active,
.mv-thanks-btn:active,
.btn:active{
  transform:translateY(0) !important;
  box-shadow:none !important;
}

/* ---------- Primary / Seawind ---------- */
.mv-home-btn-primary,
.mv-home-btn-seawind,
.mv-about-btn-primary,
.mv-about-btn-seawind,
.mv-thanks-btn-primary{
  background:var(--mv-ui-navy) !important;
  border-color:var(--mv-ui-navy) !important;
  color:#fff !important;
}

.mv-home-btn-primary:hover,
.mv-home-btn-seawind:hover,
.mv-about-btn-primary:hover,
.mv-about-btn-seawind:hover,
.mv-thanks-btn-primary:hover{
  background:var(--mv-ui-navy-hover) !important;
  border-color:var(--mv-ui-navy-hover) !important;
}

/* Seawind/Corsair landing-page primary buttons inherit each page's brand var.
   Seawind --blue is navy; Corsair --blue is red. */
.btn-primary{
  background:var(--blue, var(--mv-ui-navy)) !important;
  border-color:var(--blue, var(--mv-ui-navy)) !important;
  color:#fff !important;
}

.btn-primary:hover{
  filter:brightness(.90);
}

/* ---------- Corsair brand buttons ---------- */
.mv-home-btn-corsair,
.mv-about-btn-corsair{
  background:var(--mv-ui-red) !important;
  border-color:var(--mv-ui-red) !important;
  color:#fff !important;
}

.mv-home-btn-corsair:hover,
.mv-about-btn-corsair:hover{
  background:var(--mv-ui-red-hover) !important;
  border-color:var(--mv-ui-red-hover) !important;
}

/* ---------- Secondary / ghost ---------- */
.mv-home-btn-ghost,
.mv-about-btn-ghost,
.mv-thanks-btn-secondary,
.btn-ghost{
  background:#fff !important;
  border-color:var(--mv-ui-border) !important;
  color:var(--mv-ui-text) !important;
}

.mv-home-btn-ghost:hover,
.mv-about-btn-ghost:hover,
.mv-thanks-btn-secondary:hover,
.btn-ghost:hover{
  background:#f7f9fa !important;
  border-color:rgba(19,32,43,.22) !important;
}

/* ---------- WhatsApp stays intentionally green ---------- */
.mv-home-btn-whatsapp,
.mv-about-btn-whatsapp,
.mv-thanks-btn-whatsapp,
.btn-whatsapp{
  background:var(--mv-ui-green) !important;
  border-color:var(--mv-ui-green) !important;
  color:#fff !important;
  box-shadow:none !important;
}

.mv-home-btn-whatsapp:hover,
.mv-about-btn-whatsapp:hover,
.mv-thanks-btn-whatsapp:hover,
.btn-whatsapp:hover{
  background:var(--mv-ui-green-hover) !important;
  border-color:var(--mv-ui-green-hover) !important;
  color:#fff !important;
}

/* ---------- Form submit buttons ---------- */
.mv-home-contact-form .wpforms-submit{
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:10px !important;
  border:1px solid var(--mv-ui-navy) !important;
  background:var(--mv-ui-navy) !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:600 !important;
  box-shadow:none !important;
  transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.mv-home-contact-form .wpforms-submit:hover{
  background:var(--mv-ui-navy-hover) !important;
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(2,8,23,.10) !important;
}

.hero-form-wpforms .wpforms-submit{
  min-height:44px !important;
  padding:0 18px !important;
  border-radius:10px !important;
  border:1px solid var(--blue, var(--mv-ui-navy)) !important;
  background:var(--blue, var(--mv-ui-navy)) !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}

.hero-form-wpforms .wpforms-submit:hover{
  filter:brightness(.90);
  transform:translateY(-1px);
}

/* ---------- Floating mobile CTA: cleaner container ---------- */
.floating-cta{
  padding:6px !important;
  gap:6px !important;
  border-radius:16px !important;
  border:1px solid rgba(19,32,43,.10) !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 10px 30px rgba(2,8,23,.12) !important;
}

/* ---------- Accessible keyboard focus ---------- */
.mv-home-btn:focus-visible,
.mv-about-btn:focus-visible,
.mv-thanks-btn:focus-visible,
.btn:focus-visible,
.mv-home-nav a:focus-visible,
.mv-about-nav a:focus-visible,
.mv-thanks-nav a:focus-visible,
.nav a:focus-visible,
.wpforms-submit:focus-visible{
  outline:3px solid var(--mv-ui-focus) !important;
  outline-offset:3px;
}

/* ---------- Mobile refinements ---------- */
@media (max-width:720px){
  .mv-home-btn,
  .mv-about-btn,
  .mv-thanks-btn,
  .btn{
    min-height:44px;
    border-radius:10px !important;
    font-size:13px;
  }

  .mv-home-header-cta .mv-home-btn-whatsapp{
    border-radius:10px !important;
  }
  
  .btn-whatsapp,
  .mv-home-btn-whatsapp {
    min-height: 44px;
    padding: 10px 14px !important;
  }
  /* ===== Mobile Cloudflare Turnstile alignment ===== */
  .hero-form .cf-turnstile,
  .hero-form [data-sitekey] {
    width: 300px !important;
    max-width: none !important;
    transform: scale(.88);
    transform-origin: left top;
  }

  .hero-form .wpforms-field-turnstile,
  .hero-form .wpforms-field-html:has(.cf-turnstile) {
    width: 264px;
    max-width: 100%;
    overflow: visible;
  }
}

@media (prefers-reduced-motion:reduce){
  .mv-home-btn,
  .mv-about-btn,
  .mv-thanks-btn,
  .btn,
  .mv-home-nav a,
  .mv-about-nav a,
  .mv-thanks-nav a,
  .nav a{
    transition:none !important;
  }

  .mv-home-btn:hover,
  .mv-about-btn:hover,
  .mv-thanks-btn:hover,
  .btn:hover{
    transform:none !important;
  }
}

/* ===== WhatsApp button alignment fix ===== */

.btn-whatsapp,
.mv-home-btn-whatsapp {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1 !important;
}

.btn-whatsapp span,
.mv-home-btn-whatsapp span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.btn-whatsapp img,
.mv-home-btn-whatsapp img,
.icon-whatsapp,
.mv-home-btn-icon-img {
  display: block !important;
  flex: 0 0 auto;
  margin: 0 !important;
  vertical-align: middle;
}