/*
Theme Name: Dorpsapp by App & Vloed
Theme URI: https://dorpsapp.appenvloed.com
Author: App & Vloed
Description: Een minimalistisch block-theme voor de zelfstandige dorpsapp van App & Vloed.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: dorpsapp
*/

:root { --av-orange: #d76b22; --av-ink: #111111; --av-paper: #f7f7f3; --av-mist: #e9eef1; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { text-underline-offset: .2em; }
.av-shell { border-left: 1px solid rgba(17,17,17,.12); border-right: 1px solid rgba(17,17,17,.12); }
.av-kicker { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 700; }
.av-plus { color: var(--av-orange); margin-right: .6em; }
.av-nav a { text-decoration: none; }
.av-hero { min-height: 82vh; display: grid; align-items: end; position: relative; overflow: hidden; }
.av-hero::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: -4rem; height: 8rem; border-top: 1px solid rgba(17,17,17,.45); border-radius: 50%; background: linear-gradient(180deg,rgba(215,107,34,.12),rgba(220,230,234,.6)); filter: blur(.1px); pointer-events: none; }
.av-display { font-size: clamp(4.3rem, 12vw, 10.8rem) !important; line-height: .79 !important; letter-spacing: -.075em !important; max-width: 9ch; text-wrap: balance; }
.av-lede { max-width: 39rem; font-size: clamp(1.15rem,2vw,1.55rem); line-height: 1.45; }
.av-rule { border-top: 1px solid rgba(17,17,17,.16); }
.av-number { color: var(--av-orange); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .78rem; }
.av-card { min-height: 18rem; border-top: 1px solid rgba(17,17,17,.18); padding-top: 1.2rem; }
.av-phone-wrap { position: relative; min-height: 37rem; display: grid; place-items: center; }
.av-phone { width: min(17rem,70vw); aspect-ratio: .5; background: #111; border-radius: 2.7rem; padding: .55rem; box-shadow: 0 2.2rem 5rem rgba(17,17,17,.18); transform: rotate(4deg); }
.av-screen { height: 100%; border-radius: 2.25rem; background: linear-gradient(180deg,#faf7ef,#eef2f1); padding: 2.5rem 1rem 1rem; overflow: hidden; }
.av-island { width: 5.5rem; height: 1.3rem; border-radius: 1rem; background:#111; margin:-1.9rem auto 1.6rem; }
.av-appbar { display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:1.25rem; margin-bottom:1.5rem; }
.av-screen-card { background:white; border-radius:1.1rem; padding:1rem; margin:.75rem 0; box-shadow:0 .4rem 1.3rem rgba(17,17,17,.06); }
.av-screen-card small { color:#6f7777; display:block; margin-bottom:.35rem; }
.av-screen-card strong { line-height:1.2; display:block; }
.av-dot { width:.6rem;height:.6rem;border-radius:50%;background:var(--av-orange);display:inline-block; }
.av-quote { font-size:clamp(2rem,4vw,4.3rem); line-height:1.03; letter-spacing:-.045em; max-width:18ch; }
.av-cta { border-radius: 999px; }
.av-footer { border-top: 1px solid rgba(17,17,17,.17); }
@media (max-width: 781px) {
  .av-shell { border: 0; }
  .av-nav-links { display:none !important; }
  .av-hero { min-height: 72vh; }
  .av-display { font-size: clamp(3.75rem, 20vw, 7rem) !important; }
  .av-card { min-height:auto; padding-bottom:2.5rem; }
  .av-phone-wrap { min-height:31rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }