/*
Theme Name: Digitale Wijkzorg
Theme URI: https://digitalewijkzorg.nl
Author: Wim Toet
Description: Custom theme voor Digitale Wijkzorg met ACF Flexible Content secties (sleepbaar). Tailwind via CDN.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: digitalewijkzorg
*/

:root {
  --background: #f7f5f3;
  --foreground: #16697a;
  --deep: #16697a;
  --deep-dark: #115566;
  --mid: #489fb5;
  --sky: #82c0cc;
  --sand: #ede7e3;
  --sand-light: #f5f1ee;
  --accent: #ffa62b;
  --accent-dark: #e8941f;
}

html { scroll-behavior: smooth; }

/* ---------- Custom palette utilities ----------
   Tailwind CDN's runtime JIT is unreliable for arbitrary palette names, especially
   with opacity modifiers. We define every color utility we actually use directly,
   so the design works even if Tailwind misses a class. */

.bg-background { background-color: #f7f5f3; }
.bg-deep       { background-color: #16697a; }
.bg-deep-dark  { background-color: #115566; }
.bg-mid        { background-color: #489fb5; }
.bg-sky        { background-color: #82c0cc; }
.bg-sand       { background-color: #ede7e3; }
.bg-sand-light { background-color: #f5f1ee; }
.bg-accent     { background-color: #ffa62b; }
.bg-accent-dark{ background-color: #e8941f; }

.bg-deep\/10   { background-color: rgba(22,105,122,0.10); }
.bg-deep\/20   { background-color: rgba(22,105,122,0.20); }
.bg-mid\/10    { background-color: rgba(72,159,181,0.10); }
.bg-sky\/10    { background-color: rgba(130,192,204,0.10); }
.bg-sky\/20    { background-color: rgba(130,192,204,0.20); }
.bg-sky\/30    { background-color: rgba(130,192,204,0.30); }
.bg-sky\/40    { background-color: rgba(130,192,204,0.40); }
.bg-sky\/50    { background-color: rgba(130,192,204,0.50); }
.bg-sand\/30   { background-color: rgba(237,231,227,0.30); }
.bg-sand\/40   { background-color: rgba(237,231,227,0.40); }
.bg-accent\/10 { background-color: rgba(255,166,43,0.10); }
.bg-accent\/40 { background-color: rgba(255,166,43,0.40); }

.bg-white\/10  { background-color: rgba(255,255,255,0.10); }
.bg-white\/20  { background-color: rgba(255,255,255,0.20); }
.bg-white\/90  { background-color: rgba(255,255,255,0.90); }

.text-deep     { color: #16697a; }
.text-deep-dark{ color: #115566; }
.text-mid      { color: #489fb5; }
.text-sky      { color: #82c0cc; }
.text-accent   { color: #ffa62b; }

.text-deep\/30 { color: rgba(22,105,122,0.30); }
.text-deep\/40 { color: rgba(22,105,122,0.40); }
.text-deep\/50 { color: rgba(22,105,122,0.50); }
.text-deep\/60 { color: rgba(22,105,122,0.60); }
.text-deep\/70 { color: rgba(22,105,122,0.70); }
.text-white\/25 { color: rgba(255,255,255,0.25); }
.text-white\/50 { color: rgba(255,255,255,0.50); }
.text-white\/70 { color: rgba(255,255,255,0.70); }

.placeholder-deep\/30::placeholder { color: rgba(22,105,122,0.30); }

.border-sand   { border-color: #ede7e3; }
.border-deep   { border-color: #16697a; }
.border-mid    { border-color: #489fb5; }
.border-accent { border-color: #ffa62b; }
.border-accent\/40 { border-color: rgba(255,166,43,0.40); }
.border-white\/10  { border-color: rgba(255,255,255,0.10); }

.ring-deep     { box-shadow: 0 0 0 2px #16697a; }
.ring-sky\/30  { box-shadow: 0 0 0 2px rgba(130,192,204,0.30); }

.hover\:bg-deep:hover         { background-color: #16697a; }
.hover\:bg-deep-dark:hover    { background-color: #115566; }
.hover\:bg-accent:hover       { background-color: #ffa62b; }
.hover\:bg-accent-dark:hover  { background-color: #e8941f; }
.hover\:bg-sky\/20:hover      { background-color: rgba(130,192,204,0.20); }
.hover\:bg-sky\/50:hover      { background-color: rgba(130,192,204,0.50); }
.hover\:bg-sand-light:hover   { background-color: #f5f1ee; }
.hover\:text-deep:hover       { color: #16697a; }
.hover\:text-mid:hover        { color: #489fb5; }
.hover\:text-white:hover      { color: #fff; }

.focus\:border-mid:focus { border-color: #489fb5; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--tw-ring-color, rgba(130,192,204,0.30)); }
.focus\:ring-sky\/30:focus { box-shadow: 0 0 0 2px rgba(130,192,204,0.30); }

/* Shadow utilities — needed in case Tailwind CDN misses these. */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.shadow    { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(22,105,122,0.10), 0 8px 10px -6px rgba(22,105,122,0.08); }
.shadow-2xl{ box-shadow: 0 25px 50px -12px rgba(22,105,122,0.18); }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10); }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', system-ui, -apple-system, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Admin bar offset — when logged in, WP adds a 32px / 46px bar at the top.
   Our header is position:fixed so it needs to slide down by the same amount. */
body.admin-bar #site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar #site-header { top: 46px; }
}

/* Navbar shrink on scroll */
.nav-inner { height: 80px; transition: height .4s ease-out; }
.nav-logo { width: 40px; height: 40px; font-size: 1rem; transition: width .4s ease-out, height .4s ease-out, font-size .4s ease-out; }
.nav-logo-text { font-size: 1.25rem; transition: font-size .4s ease-out; }
[data-scrolled] .nav-inner { height: 56px; }
[data-scrolled] .nav-logo { width: 32px; height: 32px; font-size: .8rem; }
[data-scrolled] .nav-logo-text { font-size: 1rem; }

/* Alternating section backgrounds + automatic diagonal divider between sections.
   The page starts with the gray (sand-light) tone for visual rest, then flips. */
.dwz-sections > section { position: relative; background-color: var(--sand-light); }
.dwz-sections > section:nth-of-type(even) { background-color: #fff; }

/* Diagonal "schuine streep" between every section pair. The pseudo-element belongs
   to the LOWER section and reaches up 40-60px into the previous section. We set the
   colour explicitly per nth-of-type (instead of `inherit`) because `inherit` for
   background-color on a pseudo-element is unreliable across renderers. */
.dwz-sections > section:not(:first-of-type)::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  height: 40px;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
  z-index: 1;
}
.dwz-sections > section:nth-of-type(odd):not(:first-of-type)::before  { background-color: #f5f1ee; } /* sand-light */
.dwz-sections > section:nth-of-type(even):not(:first-of-type)::before { background-color: #fff; }
@media (min-width: 768px) {
  .dwz-sections > section:not(:first-of-type)::before {
    top: -60px;
    height: 60px;
  }
}

/* Angled section dividers */
.angled-top { position: relative; }
.angled-top::before {
  content: ""; position: absolute; top: -40px; left: 0; right: 0; height: 40px;
  background: inherit; clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.angled-bottom { position: relative; }
.angled-bottom::after {
  content: ""; position: absolute; bottom: -40px; left: 0; right: 0; height: 40px;
  background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%); z-index: 1;
}
@media (min-width: 768px) {
  .angled-top::before, .angled-bottom::after { height: 60px; top: -60px; }
  .angled-bottom::after { top: auto; bottom: -60px; }
}

.hero-break { display: none; }
@media (max-width: 440px) { .hero-break { display: block; } }

/* Service flip-card */
.flip-card { perspective: 1000px; }
.flip-card.is-active .flip-card-inner,
.flip-card:hover .flip-card-inner { transform: rotateY(0); opacity: 1; }
.flip-card-front, .flip-card-back {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; transition: opacity .5s ease-out;
}
.flip-card-front { padding: 1.75rem; }
.flip-card-back  { padding: 1.25rem; }
.flip-card.is-active .flip-card-front,
.flip-card:hover .flip-card-front { opacity: 0; transition-duration: .2s; }
.flip-card-back { opacity: 0; border-radius: 1rem; background: var(--deep); color: #fff; }
.flip-card.is-active .flip-card-back,
.flip-card:hover .flip-card-back { opacity: 1; transition-duration: .2s; }

/* Gravity Forms in de Contact-sectie netter laten passen bij de huiskleuren */
.dwz-gform .gform_wrapper .gform_fields { gap: 1rem 1rem; }
.dwz-gform .gform_wrapper .gfield { margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.dwz-gform .gform_wrapper .gfield_label {
  color: rgba(22, 105, 122, .7);
  font-weight: 500;
  font-size: .875rem;
  margin-bottom: .25rem;
  display: block;
  line-height: 1.3;
}
.dwz-gform .gform_wrapper .gfield_required { color: var(--accent); margin-left: .25rem; font-weight: 500; }

.dwz-gform .gform_wrapper input[type="text"],
.dwz-gform .gform_wrapper input[type="email"],
.dwz-gform .gform_wrapper input[type="tel"],
.dwz-gform .gform_wrapper input[type="date"],
.dwz-gform .gform_wrapper input[type="number"],
.dwz-gform .gform_wrapper input[type="url"],
.dwz-gform .gform_wrapper select,
.dwz-gform .gform_wrapper textarea {
  width: 100%;
  border: 1px solid var(--sand);
  border-radius: .75rem;
  padding: .55rem .9rem;
  font-size: .875rem;
  color: var(--deep);
  background: #fff;
  line-height: 1.4;
  height: auto;
  min-height: 2.5rem;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
  font-family: inherit;
}
.dwz-gform .gform_wrapper textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }

/* Native select: hide default chevron and inject our own */
.dwz-gform .gform_wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' stroke='%2316697a' stroke-width='1.5'><path stroke-linecap='round' stroke-linejoin='round' d='M6 8l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 1.1em;
  cursor: pointer;
}

.dwz-gform .gform_wrapper input:focus,
.dwz-gform .gform_wrapper select:focus,
.dwz-gform .gform_wrapper textarea:focus {
  border-color: var(--mid);
  box-shadow: 0 0 0 2px rgba(130, 192, 204, .3);
  outline: none;
}

/* Placeholder lichtgrijs */
.dwz-gform .gform_wrapper input::placeholder,
.dwz-gform .gform_wrapper textarea::placeholder { color: #9ca3af; opacity: 1; }
.dwz-gform .gform_wrapper select:invalid,
.dwz-gform .gform_wrapper select option[value=""] { color: #9ca3af; }

.dwz-gform .gform_wrapper .gform_footer { margin-top: 1.25rem !important; padding: 0 !important; }
.dwz-gform .gform_wrapper .gform_button,
.dwz-gform .gform_wrapper input[type="submit"].gform_button,
.dwz-gform .gform_wrapper button[type="submit"].gform_button {
  width: 100% !important;
  border-radius: 9999px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  padding: .75rem 2rem !important;
  border: none !important;
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.dwz-gform .gform_wrapper .gform_button:hover,
.dwz-gform .gform_wrapper input[type="submit"].gform_button:hover,
.dwz-gform .gform_wrapper button[type="submit"].gform_button:hover {
  background: var(--accent-dark) !important;
  box-shadow: 0 4px 8px rgba(255, 166, 43, .25);
  transform: translateY(-1px);
}

.dwz-gform .gform_wrapper .gform_required_legend { display: none; }
.dwz-gform .gform_wrapper .validation_message,
.dwz-gform .gform_wrapper .gfield_validation_message {
  color: #b91c1c; font-size: .8125rem; margin-top: .25rem; background: none; border: none; padding: 0;
}
.dwz-gform .gform_confirmation_message { color: var(--deep); font-size: .9375rem; }

/* Referenties slider */
.dwz-slider { position: relative; }
.dwz-slider-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 1.5rem;
  padding: .5rem .25rem 1.5rem;
  scrollbar-width: none;
}
.dwz-slider-track::-webkit-scrollbar { display: none; }
.dwz-slider-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}
@media (min-width: 768px) {
  .dwz-slider-slide { flex: 0 0 calc(50% - .75rem); }
}
@media (min-width: 1024px) {
  .dwz-slider-slide { flex: 0 0 calc(33.333% - 1rem); }
}
.dwz-slider-btn {
  position: absolute; top: 40%; transform: translateY(-50%);
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: #fff; color: var(--deep);
  border: 1px solid var(--sand); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(22, 105, 122, .08);
  transition: background .15s, color .15s, opacity .15s;
  z-index: 2;
}
.dwz-slider-btn:hover { background: var(--deep); color: #fff; }
.dwz-slider-btn:disabled { opacity: .35; cursor: default; }
.dwz-slider-btn:disabled:hover { background: #fff; color: var(--deep); }
.dwz-slider-prev { left: -1.25rem; }
.dwz-slider-next { right: -1.25rem; }
@media (max-width: 640px) {
  .dwz-slider-prev { left: .25rem; }
  .dwz-slider-next { right: .25rem; }
}
.dwz-slider-dots { display: flex; gap: .5rem; justify-content: center; margin-top: .5rem; }
.dwz-slider-dot {
  width: .5rem; height: .5rem; border-radius: 9999px;
  background: var(--sky); opacity: .4; border: none; padding: 0; cursor: pointer;
  transition: opacity .15s, width .15s;
}
.dwz-slider-dot[aria-current="true"] { opacity: 1; width: 1.5rem; background: var(--deep); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}