/*
Theme Name: BWV Theme
Version: 1.6.16
Author: Filip @ Blue Wolf Vets
Template: twentytwentythree
*/


:root{ --primary:#A163F5; --secondary:#3FB8AF; --beige:#F6F1EB; --charcoal:#2B2B2B; --white:#FFFFFF; --whatsapp:#25D366; }
*{box-sizing:border-box}
body{margin:0;color:var(--charcoal);background:var(--white);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:72rem;margin:0 auto;padding:0 1rem}
.section{padding:4rem 0;border-top:1px solid rgba(0,0,0,.06)}
.section:first-of-type{border-top:0 padding-top:5rem;}
.split{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.card-like{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:18px;box-shadow:0 8px 18px rgba(0,0,0,.05);padding:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;border-radius:16px;padding:12px 22px;transition:.25s}
.btn-primary{color:#fff;background:var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}

/* ===== Top Bar Contact & Social Links ===== */






/* All icons: same size, aligned perfectly */


/* Facebook icon spacing & hover effect */




.whatsapp-icon{display:inline-grid;place-items:center}
.whatsapp-icon img{width:24px;height:24px;transition:transform .2s ease,filter .2s ease}
.whatsapp-icon:hover img{transform:scale(1.12);filter:saturate(1.2) brightness(1.05)}
.facebook-icon{display:inline-grid;place-items:center}
.facebook-icon img{width:24px;height:24px;transition:transform .2s ease,filter .2s ease}
.facebook-icon:hover img{transform:scale(1.12);filter:saturate(1.2) brightness(1.05)}
h1{font-weight:800;font-size:clamp(1.9rem,4.5vw,2.4rem);line-height:1.35;margin:0}
h2{font-weight:700;font-size:1.75rem;margin:0 0 1rem}
h3{font-weight:600;margin:.25rem 0}
.lead{margin-top:1rem;max-width:48ch;color:#525252;font-size:1.1rem}
.meta{margin-top:.75rem;color:#737373;font-size:.95rem;display:flex;gap:.5rem;align-items:center}
.hero-visual{
  margin-top:0;aspect-ratio:4/3;background:#f3f4f6;border-radius:12px;display:grid;place-items:center;overflow:hidden}
.hero-visual img{width:100%;height:100%;object-fit:cover}
.form-grid{display:grid;gap:.75rem}
.form-row{display:grid;gap:.75rem;grid-template-columns:1fr 1fr}
.input, select, textarea{width:100%;border:1px solid rgba(0,0,0,.2);border-radius:12px;padding:12px 14px;font-size:.95rem}
.notice{border:1px solid #d1fae5;background:#ecfdf5;color:#065f46;padding:12px 14px;border-radius:12px;margin:0 0 1rem}
.notice.error{border-color:#fecaca;background:#fef2f2;color:#991b1b}

.footer-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.card-like:has(.hero-visual) { padding: 0; }            /* image touches card edges */
.hero-visual { 
background:#fff;
position: relative;
  overflow: hidden; 
 }                        /* white rather than grey */
.hero-visual img { 
  position: absolute;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: contain;                                   /* show full logo, no crop */                                      /* breathing room */
  background:#fff;
  display:block;
  
}
@media (max-width:900px){
  .split{flex-direction:column;align-items:flex-start}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .hero-visual { aspect-ratio: 16 / 10; }
}
/* === Top Bar Icon Attention Animation === */
@keyframes icon-pulse {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2); /* zoom in */
  }
  20% {
    transform: scale(1); /* back to normal */
  }
  100% {
    transform: scale(1);
  }
}

/* Apply animation to all icons in top bar */


/* Optional: smooth zoom when hovered manually */

/* === Fix top bar icon spacing === */


/* Standardize all icons */


/* Remove unwanted margins from wrappers */


/* Logo + title alignment */
footer .cols .split{
  display:flex;
  align-items:left;
  gap:8px;
}

/* Nice, even line-height for lists */
footer .cols ul{
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .4rem;
}

/* Responsive stack */
@media (max-width: 920px){
  footer .cols{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width: 640px){
  footer .cols{ grid-template-columns:1fr !important; }
}

/* Make lists centered as well */
footer .cols ul {
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .4rem;
  justify-items: left; /* center list items horizontally */
}

/* On mobile, also center all content */
@media (max-width: 640px){
  footer .cols > div {
    align-items: center;
    text-align: left;
  }
}
/* === Footer: equal columns with left-aligned content === */
footer .cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  gap: 2rem;
  align-items: start;
}

/* Left-align column content */
footer .cols > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* align content to the left */
  text-align: left; /* align text to the left */
}

/* Lists inside footer */
footer .cols ul {
  margin: .5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .4rem;
  justify-items: start; /* make sure list items are aligned left */
}

/* Logo and tagline alignment */
footer .cols .split {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

/* Responsive stacking */
@media (max-width: 920px) {
  footer .cols {
    grid-template-columns: 1fr 1fr; /* 2 columns on tablets */
  }
}
@media (max-width: 640px) {
  footer .cols {
    grid-template-columns: 1fr; /* stack columns on mobile */
    gap: 1.5rem;
  }
}/* === Make service cards clickable === */
.services .card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 18px;
}

.services .card-link:hover {
  transform: translateY(-4px);
}

.services .card-link .card-like {
  transition: box-shadow 0.2s ease;
}

.services .card-link:hover .card-like {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Clickable cards */
.services .card-link {
  text-align: left;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0; /* card-like has padding already */
}
.services .card-link:hover .card-like,
.services .card-link:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  transform: translateY(-4px);
}
.services .card-like { transition: box-shadow .2s ease, transform .2s ease; }

/* Modal base */
.modal[aria-hidden="true"] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.5);
  display: grid;
  place-items: center;
  padding: 1rem;
}
.modal__dialog {
  width: min(680px, 100%);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(0,0,0,.2);
  padding: 1.25rem 1.25rem 1.5rem;
  position: relative;
  animation: modalIn .18s ease-out;
}
@keyframes modalIn { from { transform: translateY(8px); opacity:.0 } to { transform:none; opacity:1 } }

.modal__close {
  position: absolute;
  top: 8px; right: 10px;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: none;
  background: #f3f4f6;
  font-size: 22px;
  line-height: 1.35;
  cursor: pointer;
}
.modal__close:hover { background: #e5e7eb; }
.modal__dialog h3 { margin-top: .25rem; margin-bottom: .5rem; font-weight: 700; }
.modal__dialog p { color: #525252; }
.modal__dialog ul { margin: .5rem 0 0; padding-left: 1.1rem; }

/* Clickable service cards – keep card padding/shape */
.services .card-like{
  transition: box-shadow .2s ease, transform .2s ease;
}
.services .card-like:hover{
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  transform: translateY(-4px);
}

/* Make the inner button fill the card but not change its padding */
.services .card-link{
  display:block;
  width:100%;
  height:100%;
  background:transparent;
  border:0;
  padding:0;                /* padding is provided by .card-like */
  text-align:left;
  cursor:pointer;
}

/* Tidy headings spacing inside cards */
.services h3{ margin: 0 0 .5rem; }

/* Pricing table nice stripes */
#pricing .card-like table tr:nth-child(even){ background:#fafafa; }
#pricing .card-like table td{ border-bottom:1px solid rgba(0,0,0,.05); }
#pricing .card-like table tr:last-child td{ border-bottom:0; }

/* Clickable service cards (fix) */
.services .card-like{ transition: box-shadow .2s ease, transform .2s ease; }
.services .card-like:hover{ box-shadow:0 8px 24px rgba(0,0,0,.12); transform:translateY(-4px); }
.services .card-link{ display:block; width:100%; height:100%; background:transparent; border:0; padding:0; text-align:left; cursor:pointer; }
.services h3{ margin:0 0 .5rem; }

/* Modal styles (reuse from earlier if you already added them) */
.modal[aria-hidden="true"]{ display:none; }
.modal{ position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.5); display:grid; place-items:center; padding:1rem; }
.modal__dialog{ width:min(680px,100%); background:#fff; border-radius:16px; box-shadow:0 20px 48px rgba(0,0,0,.2); padding:1.25rem 1.25rem 1.5rem; position:relative; }
.modal__close{ position:absolute; top:8px; right:10px; width:36px; height:36px; border-radius:999px; border:none; background:#f3f4f6; font-size:22px; cursor:pointer; }
.modal__close:hover{ background:#e5e7eb; }

/* Footer equal columns (if not already added) */
footer .cols{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; align-items:start; }
footer .cols > div{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
footer .cols .split{ display:flex; align-items:center; gap:8px; }
@media (max-width:920px){ footer .cols{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ footer .cols{ grid-template-columns:1fr; gap:1.5rem; } }

/* Price list striping (if not already present) */
#pricing .card-like table tr:nth-child(even){ background:#fafafa; }
#pricing .card-like table td{ border-bottom:1px solid rgba(0,0,0,.05); }
#pricing .card-like table tr:last-child td{ border-bottom:0; }

/* Expand/collapse container */
.price-more {
  overflow: hidden;
  transition: max-height .35s ease;
  /* start collapsed; JS will control hidden attribute and max-height */
}
.price-more.is-open {
  /* big enough to fit content; adjust if you add more rows */
  max-height: 1600px;
}
#pricing .price-more { transition: max-height .3s ease; }
#pricing #price-toggle { margin-top: 1rem; }
#pricing .card-like ul li strong { font-weight:600; }
#pricing .card-like ul li { display:flex; justify-content:space-between; gap:1rem; }

@media (max-width: 700px){
  .section{padding:3rem 0}
  .section:first-of-type{padding-top:3rem}
}


/* === Hero tidy + trust cues === */
.hero-title{font-weight:800; font-size:clamp(1.8rem,4.5vw,2.3rem); line-height:1.35; margin:0}
.hero-lead{margin-top:1rem; max-width:56ch; color:#525252; font-size:1.1rem}
.trust-row{margin-top:1rem; display:flex; gap:1rem; flex-wrap:wrap; color:#555; font-size:.95rem}
.trust-pill{display:inline-flex; align-items:center; gap:.5rem; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:999px; padding:.4rem .75rem}
.trust-dot{width:8px; height:8px; border-radius:999px; background:#a163f5}
.cta-wrap{margin-top:1.25rem; display:flex; gap:.5rem; flex-wrap:wrap}
.btn-ghost{background:transparent; border:1px solid rgba(0,0,0,.15); color:#111}
.btn-ghost:hover,.btn-ghost:focus-visible{background:rgba(0,0,0,.06)}
/* === /Hero tidy === */



/* === Services grid refresh === */
.services-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; margin-top:2rem}
.service-card{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:14px; padding:1.25rem; box-shadow:0 4px 12px rgba(0,0,0,.05); transition:transform .2s ease, box-shadow .2s ease}
.service-card:hover{transform:translateY(-3px); box-shadow:0 6px 16px rgba(0,0,0,.08)}
.service-icon{font-size:1.8rem; margin-bottom:.5rem}
.service-card h3{margin:.25rem 0; font-size:1.2rem; font-weight:600}
.service-card p{margin:0; font-size:.95rem; color:#555; line-height:1.35}
/* === /Services grid === */



/* === Services Grid Refresh === */
.services-grid{display:grid; gap:1rem; grid-template-columns:repeat(3, 1fr)}
.service-card{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:1rem; box-shadow:0 8px 18px rgba(0,0,0,.04)}
.service-icon{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:#eef2ff; margin-bottom:.6rem}
.service-card h3{margin:.25rem 0 .35rem; font-size:1.05rem}
.service-card p{margin:0; color:#555; font-size:.97rem}
@media (max-width: 900px){
  .services-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 560px){
  .services-grid{grid-template-columns:1fr}
}
/* === /Services Grid Refresh === */


/* === Pricing Section Polish === */
.pricing-table{width:100%; border-collapse:collapse; margin-top:1.5rem; font-size:.98rem}
.pricing-table th, .pricing-table td{padding:.75rem 1rem; border-bottom:1px solid #e5e7eb; text-align:left}
.pricing-table th{background:#f9fafb; font-weight:600}
.pricing-table td:first-child, .pricing-table th:first-child{position:sticky; left:0; background:#fff; z-index:1}
.pricing-note{font-size:.85rem; color:#555; margin-top:.5rem}
.readmore-btn{background:none; border:0; color:#a163f5; cursor:pointer; font-weight:600; padding:0}
.readmore-btn:focus-visible{outline:2px solid #a163f5; outline-offset:2px}
/* === /Pricing Section Polish === */






/* === Pricing table purple borders === */
.pricing .table-wrap {
  overflow: auto;
  border: 1px solid #a163f5;
  border-radius: 12px;
}
.pricing table {
  width: 100%;
  border-collapse: collapse;
}
.pricing th,
.pricing td {
  border: 1px solid #a163f5;
  padding: .8rem 1rem;
  vertical-align: top;
}
.pricing thead th {
  background: #f7f2fd;
  font-weight: 700;
  text-align: left;
  color: #111;
}
.pricing .price {
  white-space: nowrap;
  font-weight: 700;
}
.pricing small {
  color: #555;
}
.pricing .notes {
  margin-top: .75rem;
  color: #555;
  font-size: .95rem;
}
/* Sticky first column on small screens */
@media (max-width: 800px){
  .pricing tbody th{position:sticky; left:0; z-index:1; background:#fff}
}
/* Read-more button */
.btn-readmore{background:#e7ecf8; color:#0b0f1a; border:1px solid #d8e1f5}
.btn-readmore:hover,.btn-readmore:focus-visible{background:#dde6fb}
/* === /Pricing table purple borders === */


.pricing .num{text-align:right}

.nb{white-space:nowrap}






.btn-call {
  border:1px solid #a163f5 !important;
  color:#a163f5 !important;
}
.btn-call:hover,
.btn-call:focus-visible {
  background:#f5edff !important;
  border-color:#8a4de2 !important;
  color:#8a4de2 !important;
}

/* 1) Use the same container everywhere */
:root{
  --container-max: 1200px;              /* whatever your page uses */
  --container-pad: clamp(16px, 2vw, 24px);
}
.container { 
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* 2) Make the header use the SAME container */
.site-header { width: 100%; }            /* not 100vw */
.site-header > .container {              /* wrap your nav inside this */
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* 3) If you had a calc based on vw, kill it */
.site-header[style*="100vw"],
.header-outer { width: 100% !important; }
.header-outer { padding-inline: 0 !important; } /* rely on .container padding */

/* Optional: if nav itself had extra left padding */
.site-nav { padding-left: 0; }





/* === BWV: Pricing table collapse (wrapper clip, preserves table layout) === */
#pricing .price-clip{ position: relative; overflow: hidden; transition: max-height .35s ease; }
#pricing .price-clip.is-collapsed::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:48px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}


/* === BWV: Pricing table collapse (4.5 rows, fade, no scrollbar) === */
#pricing .price-clip {
  position: relative;
  overflow: hidden;          /* hide overflow */
  transition: max-height .35s ease;
}
#pricing .price-clip::-webkit-scrollbar { display:none; }
#pricing .price-clip { -ms-overflow-style:none; scrollbar-width:none; } /* hide scrollbar FF */
#pricing .price-clip.is-collapsed::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:48px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
}

/* Ensure Read more button sits on its own line under notes text */
#pricing .btn-readmore {
  display:block;
  margin:1rem 0 0 0;
}


/* === BWV: Pricing polish (no scrollbar, button placement) === */
#pricing .table-wrap { overflow: hidden !important; }
#pricing .price-clip { overflow: hidden !important; }
#pricing .price-clip::-webkit-scrollbar { display: none; } /* just in case some UA still renders it */
#pricing .btn-readmore { display: inline-block; margin-top: .75rem; }