/*
Theme Name: Pawsitief v6
Theme URI: https://example.com/pawsitief
Author: Jakob + ChatGPT
Author URI: https://example.com
Description: One-page WordPress theme voor Pawsitief. v6: site verder identiek, alleen het logo is vernieuwd (PNG in header).
Version: 6.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pawsitief
Tags: one-column, responsive-layout, custom-colors, accessibility-ready
*/

:root{
  --primary:#00A38F;   /* turquoise */
  --accent:#FF6A3D;    /* warm coral */
  --dark:#0F172A;      /* darker slate for text */
  --light:#F5F7FB;
  --muted:#64748B;
  --white:#FFFFFF;
  --success:#22C55E;
  --error:#EF4444;
  --radius:18px;
  --shadow:0 12px 28px rgba(0,0,0,.10);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@700;800&display=swap');

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--dark);
  background:var(--light);
  line-height:1.6;
  position:relative;
  overflow-x:hidden;
}

/* Persistent background gradients across the whole page */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(1400px 800px at 8% -10%, rgba(0,163,143,.35), transparent 60%),
    radial-gradient(1200px 700px at 110% -10%, rgba(255,106,61,.33), transparent 60%),
    radial-gradient(900px 600px at -10% 80%, rgba(0,163,143,.20), transparent 70%),
    radial-gradient(900px 600px at 110% 85%, rgba(255,106,61,.18), transparent 70%);
  pointer-events:none;
}

.site-header{
  position:sticky; top:0; z-index:999;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(140%) blur(8px);
  box-shadow:var(--shadow);
}
.nav{ max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 20px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand__logo{ width:46px; height:46px; display:inline-block; }
.brand__name{ font-family:Poppins, Inter, sans-serif; font-weight:800; letter-spacing:.3px; font-size:22px; color:var(--dark); }

.nav__links a{ margin-left:18px; text-decoration:none; color:var(--dark); font-weight:700; padding:10px 14px; border-radius:12px; transition:transform .15s ease, background .15s ease, color .15s ease; }
.nav__links a:hover, .nav__links a.active{ background:var(--primary); color:var(--white); transform:translateY(-1px); }

.hero{ display:grid; place-items:center; padding:92px 20px 72px;
  background:radial-gradient(1200px 600px at 10% -10%, rgba(0,163,143,.18), transparent 60%),
             radial-gradient(900px 500px at 110% 0%, rgba(255,106,61,.20), transparent 60%); }
.container{ max-width:1100px; margin:0 auto; }
.hero__inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center; }
.hero h1{ font-family:Poppins, Inter, sans-serif; font-size:50px; line-height:1.1; margin:0 0 12px; }
.hero p{ font-size:18px; margin:0 0 22px; color:#334; }
.btn{ display:inline-block; border:none; cursor:pointer; font-weight:800; padding:12px 18px; border-radius:14px; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn--primary{ background:var(--primary); color:var(--white); }
.btn--ghost{ background:transparent; border:2px solid var(--primary); color:var(--primary); }
.btn + .btn{ margin-left:12px; }
.btn:active{ transform:scale(.98); }

.card{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; transition:transform .15s ease; }
.card:active{ transform:scale(.99); }

.section{ padding:74px 20px; }
.section h2{ font-family:Poppins, Inter, sans-serif; font-size:36px; margin:0 0 12px; display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.section p{ margin:0 0 12px; color:#334; }
.grid{ display:grid; gap:18px; }
.grid--3{ grid-template-columns:repeat(3, 1fr); }
.grid--2{ grid-template-columns:repeat(2, 1fr); }

@media (max-width:900px){ .hero__inner{ grid-template-columns:1fr; } .grid--3{ grid-template-columns:1fr; } .grid--2{ grid-template-columns:1fr; } }

.feature{ display:flex; gap:14px; align-items:flex-start; }
.feature__icon{ width:40px; height:40px; flex:0 0 40px; background:var(--accent); border-radius:14px; display:grid; place-items:center; font-size:20px; color:#fff; }

.prijstabel{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); background:var(--white); }
.prijstabel th, .prijstabel td{ padding:14px 16px; text-align:left; }
.prijstabel thead{ background:#f6f8fb; }
.prijstabel tbody tr + tr td{ border-top:1px solid #eef2f7; }

.review{ display:flex; gap:14px; }
.review__avatar{ width:44px; height:44px; border-radius:50%; background:var(--primary); color:#fff; display:grid; place-items:center; font-weight:800; }

.faq-item{ border-bottom:1px solid #e6e8ed; }
.faq-q{ background:transparent; border:none; width:100%; text-align:left; padding:16px 0; font-weight:800; cursor:pointer; }
.faq-a{ display:none; padding:0 0 16px; color:#334; }
.faq-item.open .faq-a{ display:block; }

form.contact-form{ display:grid; gap:12px; margin-top:12px; }
.input, textarea{ width:100%; padding:12px 14px; border-radius:12px; border:2px solid #e5e7eb; background:#fff; font:inherit; color:inherit; }
textarea{ min-height:120px; resize:vertical; }
.input:focus, textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(0,163,143,.12); }
.form-row{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media (max-width:700px){ .form-row{ grid-template-columns:1fr; } }
.form-help{ font-size:13px; color:var(--muted); }
.alert{ padding:12px 14px; border-radius:12px; font-weight:600; }
.alert--ok{ background:#ECFDF5; color:#065F46; border:1px solid #A7F3D0; }
.alert--err{ background:#FEF2F2; color:#7F1D1D; border:1px solid #FECACA; }

.cookie-banner{ position:fixed; left:16px; right:16px; bottom:16px; background:#0B1220; color:#fff; padding:16px; border-radius:14px; box-shadow:var(--shadow); display:none; z-index:1000; }
.cookie-banner p{ margin:0 0 10px; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-actions .btn{ padding:10px 14px; border-radius:10px; }
.cookie-actions .btn--outline{ border:2px solid #fff; background:transparent; color:#fff; }

@keyframes pop { 0% { transform:scale(1); } 35% { transform:scale(1.07) rotate(-1deg); } 65% { transform:scale(0.98) rotate(1deg); } 100% { transform:scale(1); } }
.pop { animation:pop .35s ease-in-out; }

.section { scroll-margin-top:84px; }