/* =========================================================
   WEAVO brand overrides
   Brand green (exact): #6ADD4A  — used for all green accents.
   Dark text is placed ON green fills for contrast.
   ========================================================= */
:root{
  --weavo-green:#6ADD4A;          /* exact brand green */
  --weavo-green-hover:#54c636;    /* slightly darker for button hover */
  --weavo-ink:#1c1c1c;
}

/* ---- Green accent fills: dark text for contrast ---- */
.background-success,
.badge-success{
  background-color:var(--weavo-green) !important;
  color:var(--weavo-ink) !important;
}
.background-success *{ color:var(--weavo-ink); }

/* ---- Solid green button (dark label) ---- */
.btn-success{
  background-color:var(--weavo-green) !important;
  border-color:var(--weavo-green) !important;
  color:var(--weavo-ink) !important;
  font-weight:700;
}
.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active{
  background-color:var(--weavo-green-hover) !important;
  border-color:var(--weavo-green-hover) !important;
  color:var(--weavo-ink) !important;
}

/* ---- Outline green button ---- */
.btn-outline-success{
  color:var(--weavo-ink) !important;
  border-color:var(--weavo-green) !important;
}
.btn-outline-success:hover,.btn-outline-success:focus,.btn-outline-success:active{
  background-color:var(--weavo-green) !important;
  border-color:var(--weavo-green) !important;
  color:var(--weavo-ink) !important;
}
/* Outline-white button on dark sections: green border + green hover */
.btn-outline-white:hover,.btn-outline-white:focus{
  background-color:var(--weavo-green) !important;
  border-color:var(--weavo-green) !important;
  color:var(--weavo-ink) !important;
}

/* ---- Dark CTA button sitting on a green band: brand-green label ---- */
.background-success .btn-dark{
  background-color:var(--weavo-ink) !important;
  border-color:var(--weavo-ink) !important;
  color:var(--weavo-green) !important;
  font-weight:700;
}
.background-success .btn-dark:hover,
.background-success .btn-dark:focus{
  background-color:#000 !important;
  border-color:#000 !important;
  color:var(--weavo-green) !important;
}

/* ---- Green text accents: exact brand green everywhere ---- */
.color-success{ color:var(--weavo-green) !important; }
.border-color-success{ border-color:var(--weavo-green) !important; }

/* ---- Heading underline accent uses brand green ---- */
.underline{
  text-decoration:none;
  border-bottom:3px solid var(--weavo-green);
  padding-bottom:.15em;
}

/* ---- Top navbar (inner pages): brand green on hover / active ---- */
.znav-sparrow .navbar-nav > li > a:hover,
.znav-sparrow .navbar-nav > li.active > a{
  color:var(--weavo-green);
}

/* ---- Portfolio cards ---- */
.weavo-card{ position:relative; overflow:hidden; border-radius:6px; }
.weavo-card img{
  width:100%; height:240px; object-fit:cover; object-position:top center;
  display:block; transition:transform .5s ease;
}
.weavo-card:hover img{ transform:scale(1.05); }
.weavo-card .weavo-card-body{
  position:absolute; top:0; left:0; right:0; bottom:0;
  background:rgba(28,28,28,.85);
  color:#fff; opacity:0; transition:opacity .35s ease;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:1.25rem;
}
.weavo-card:hover .weavo-card-body{ opacity:1; }
.weavo-card .weavo-card-body h5{ color:#fff; margin-bottom:.5rem; }
.weavo-card .weavo-tag{
  display:inline-block; font-size:.7rem; letter-spacing:.04em;
  background:var(--weavo-green); color:var(--weavo-ink);
  border-radius:3px; padding:.12rem .5rem; margin:.12rem;
  font-weight:700;
}
.weavo-card .weavo-card-link{ margin-top:.85rem; }

/* "and many more" chips */
.weavo-more-chip{
  display:inline-block; margin:.25rem; padding:.35rem .85rem;
  border:1px solid #d8d8d8; border-radius:50px; font-size:.85rem; color:#555;
  transition:all .2s ease;
}
.weavo-more-chip:hover{ border-color:var(--weavo-green); color:var(--weavo-ink); }

/* Service feature icon circle */
.weavo-svc-icon{
  width:72px; height:72px; border-radius:50%;
  background:rgba(106,221,74,.18); color:var(--weavo-green) ;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.9rem; margin-bottom:1rem;
}

/* Tech-stack custom logo (e.g. CakePHP) sized to match the icon row */
.weavo-tech-logo{ height:56px; width:auto; }

/* Hero (top-navbar home) */
.weavo-hero{ background:#111; color:#fff; }
.weavo-hero h1, .weavo-hero p{ color:#fff; }

/* =========================================================
   Showcase homepage (side-nav + device collage hero)
   ========================================================= */
/* Fit WEAVO screenshots into the device "screens" (crop, don't stretch) */
.devices-wrapper img{ object-fit:cover; object-position:top center; }
.devices-wrapper [class*="mackbook-"] img{ aspect-ratio:16/10; }
.devices-wrapper [class*="ipad--l-"] img{ aspect-ratio:4/3; }
.devices-wrapper [class*="ipad--p-"] img{ aspect-ratio:3/4; }
.devices-wrapper [class*="iphone-"] img{ aspect-ratio:9/19; }
.devices-wrapper [class*="iphone--l-"] img{ aspect-ratio:19/9; }

/* Side-nav big menu links: brand green on hover / active */
.side-nav .navbar .navbar-content .v-middle > ul > li > a:hover span,
.side-nav .navbar .navbar-content .v-middle > ul > li.active > a span{
  color:var(--weavo-green) !important;
}

/* Mobile: 40px left padding on open menu links */
@media (max-width:61.99em){
  .side-nav .navbar .navbar-content .v-middle > ul{
    padding-left:40px;
  }
}

/* Burger trigger: clean green OUTLINE (stroke), no fill blob */
.side-nav nav .menu .burger svg path{
  fill:none !important;
  stroke:var(--weavo-green) !important;
}

/* Brand logo: W-mark when collapsed, full wordmark when menu is open */
.side-nav .brand .weavo-full{ display:none; }
.side-nav .brand .weavo-mark{ display:block; }
.side-nav nav:has(.hamburger.is-active) .brand .weavo-mark{ display:none; }
.side-nav nav:has(.hamburger.is-active) .brand .weavo-full{ display:block; height:30px; }
/* On desktop the nav is a 70px right bar — float the open-state logo to the top-left */
@media (min-width:62em){
  .side-nav nav:has(.hamburger.is-active) .brand{
    position:fixed; top:16px; left:40px; z-index:10002; padding:0;
  }
}

/* Hero headline italic accent — exact brand green */
.weavo-showcase-hero .font-2{ color:var(--weavo-green); }