/* Additions on top of Framer's CSS (public/css/home.css, hover.css). See public/site.js. */

/* In-page links scroll smoothly */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Reveal animations replacing Framer's appear / scroll effects */
@media (prefers-reduced-motion: no-preference) {
  .fx-ready .fx:not(.fx-in) { opacity: 0.001; transform: var(--fx-t); }
  .fx-ready .fx.fx-slide:not(.fx-in) { opacity: 1; }
  .fx { transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.9s cubic-bezier(0.25, 1, 0.5, 1); }
}

/* Buttons with the round arrow: on hover the arrow slides out to the right and a second one
   slides in from the left (Framer layout animation, measured: 20px = the arrow's width) */
.framer-uyJ2k .framer-1uupn0n, .framer-uyJ2k .framer-9eqgya { transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1); }
@media (hover: hover) {
  .framer-uyJ2k:hover .framer-1uupn0n, .framer-uyJ2k:hover .framer-9eqgya { transform: translateX(100%); }
}

/* Logo ticker */
[data-ticker-wrap] { overflow: hidden; }
ul[data-ticker] { will-change: transform; }

/* Phone menu */
[data-menu][data-open] { animation: menu-in 0.25s ease; }
@keyframes menu-in { from { opacity: 0.6; } }
[data-menu] [data-framer-name="Menu Button"] { cursor: pointer; }

/* FAQ items are buttons */
[data-faq] { cursor: pointer; }

/* Slideshows: dragging feedback (site.js moves the row) */
ul[data-carousel] { cursor: grab; touch-action: pan-y; user-select: none; will-change: transform; }
ul[data-carousel].dragging { cursor: grabbing; }

/* Demo form note */
.form-msg { grid-column: 1 / -1; margin: 4px 0 0; font: 500 14px/1.4 "Inter", system-ui, sans-serif; color: #fff; opacity: 0.9; }

/* The Dutch label ("Contacteer ons") is longer than "Get in touch": let the nav button box grow
   instead of clipping it at Framer's fixed 150px */
.framer-nHLKX .framer-kfahnr { width: min-content !important; min-width: 150px; }

/* Anchor links land below the fixed header (Framer keeps the white navbar fixed at every width: 79px desktop/tablet, 84 phone) */
[id] { scroll-margin-top: 88px; }
@media (max-width: 809.98px) { [id] { scroll-margin-top: 92px; } }

/* BMBW demo: their logo (teal mark from bmbw.nl) in header and footer */
a[data-framer-name="Logo"] { display: inline-flex; align-items: center; }
img.bm-logo { display: block; height: 46px; width: auto; }
@media (max-width: 809.98px) { img.bm-logo { height: 40px; } }
footer img.bm-logo { height: 56px; }

/* brand accents: section dots in their orange, icon tiles white on teal */
[data-framer-name="Section Tag"] [data-framer-name="Dot"] { background: #e8662a !important; }
#features [data-framer-name="Icon wrapper"] { background: #0e7261 !important; }

/* Footer links: Framer dims them to 50%; 80% keeps the hover effect and passes AA */
footer a.framer-K1iUY:not(:hover) { opacity: 0.8 !important; }
/* Hero photo: <picture> wrapper must not affect Framer's layout */
.hero-pic { display: contents; border-radius: inherit; }
img.hero-photo { border-radius: inherit; object-fit: cover !important; object-position: 50% 30%; }
/* Diagram-like images (rapportage design, quick scan schema, brandbook collage, logo plant): show them whole */
:is(#main,body) img[src*="/f/client/rapportage"], :is(#main,body) img[src*="/f/client/analyse"]  { object-fit: contain !important; background: #fff; }
:is(#main,body) img[src*="/f/client/contact"] { object-position: 50% 15%; }
/* section dot on the teal contact block */
#contact [data-framer-name="Section Tag"] [data-framer-name="Dot"] { background: #fff !important; }

/* contact block: coffee line + address/phone/e-mail */
.bm-contact { margin-top: 14px; color: #fff; font: 400 16px/1.55 "Inter", system-ui, sans-serif; }
.bm-contact p { margin: 0 0 10px; opacity: .92; }
.bm-contact ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.bm-contact a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 3px; font-weight: 500; }
.bm-contact a:hover { text-decoration-color: #fff; }

/* ---------- extra sections (missie, projecten), built by tools/convert.py ---------- */
.fx-up { --fx-t: translateY(24px); }
.bm-sec { width: 100%; padding: 100px 0; box-sizing: border-box; font-family: "Inter", system-ui, sans-serif; color: #16201f; }
.bm-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; }
.bm-tag { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.2 "Inter", system-ui, sans-serif; color: #0e7261; margin-bottom: 18px; }
.bm-dot { width: 6px; height: 6px; border-radius: 50%; background: #e8662a; }
.bm-h2 { margin: 0 0 22px; font: 400 44px/1.15 "Hedvig Letters Serif", Georgia, serif; letter-spacing: -0.02em; color: #16201f; }
.bm-p { margin: 0 0 14px; font-size: 17px; line-height: 1.65; color: #3d4847; }
.bm-missie { background: #f4faf9; }
.bm-missie-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.bm-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.bm-tags li { padding: 12px 18px; border-radius: 999px; background: #fff; border: 1px solid #cfe5e1; font-size: 16px; font-weight: 500; color: #0e7261; }
.bm-tags li:nth-child(3n+2) { background: #0e7261; border-color: #0e7261; color: #fff; }
.bm-head { text-align: center; margin-bottom: 44px; }
.bm-head .bm-h2 { margin: 0; }
.bm-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bm-shot { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: #e2f2ef; }
.bm-shot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.bm-quote { margin: 48px auto 0; max-width: 900px; padding: 36px 44px; border-radius: 20px; background: #fde8d9; text-align: center; }
.bm-quote p { margin: 0; font: 400 30px/1.3 "Hedvig Letters Serif", Georgia, serif; color: #b4471a; letter-spacing: -0.01em; }
@media (max-width: 1199.98px) { .bm-sec { padding: 80px 0; } .bm-h2 { font-size: 38px; } .bm-missie-grid { gap: 40px; } }
@media (max-width: 809.98px) {
  .bm-sec { padding: 64px 0; }
  .bm-wrap { padding: 0 20px; }
  .bm-h2 { font-size: 32px; }
  .bm-missie-grid { grid-template-columns: 1fr; gap: 28px; }
  .bm-grid3 { grid-template-columns: 1fr; gap: 16px; }
  .bm-quote { padding: 26px 22px; margin-top: 32px; }
  .bm-quote p { font-size: 23px; }
  .bm-tags li { padding: 10px 14px; font-size: 15px; }
}

/* "Wie we zijn" column: Framer's light grey (#8b908f, 3.2:1) is too faint; darker grey passes AA */
#why-us p.framer-styles-preset-1pod1b { --framer-text-color: #5c6563 !important; color: #5c6563 !important; }
/* footer menu: keep "Werkzaamheden" on one line in the narrow tablet column */
footer a[href^="#"] .framer-text { white-space: nowrap; }