/*
Theme Name: Imspire
Author: Imspire
Description: Minimalistisch, toegankelijk en licht native block theme voor Imspire.
Version: 0.9.4
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: imspire
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* De vormgeving staat in theme.json; hier alleen aanvullende interactiestijlen. */
:where(a, button, input, textarea, select):focus-visible {
 outline: 3px solid var(--wp--preset--color--accent);
 outline-offset: 4px;
}
.wp-block-navigation .wp-block-navigation-item__content { text-underline-offset: .25em; }
.wp-block-post-content a:not(.wp-element-button):hover { text-decoration-thickness: 2px; }
.imspire-skip-link { position: absolute; left: 1rem; top: -10rem; z-index: 10000; padding: .75rem 1rem; background: #fff; color: #24282b; }
.imspire-skip-link:focus { top: 1rem; }

/* Shared classes also load in the editor through add_editor_style(). */
.imspire-brand { width: 220px; max-width: 100%; margin: 0; }
.imspire-brand img { display: block; width: 220px; height: 74px; object-fit: cover; object-position: center bottom; }
.imspire-header { padding-block: 1.25rem; background: var(--wp--preset--color--white); }
.imspire-header-row, .imspire-header-actions { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 4rem); }
.imspire-header-row.wp-block-group > *, .imspire-header-actions.wp-block-group > * { margin-block: 0; }
.imspire-main-nav { flex: 1; }
.imspire-main-nav .wp-block-navigation__container { gap: clamp(1.25rem, 3vw, 2.5rem); }
.imspire-header .wp-block-button__link { white-space: nowrap; padding: .65rem 1.3rem; }
.wp-block-button.is-style-outline > .wp-block-button__link { color: var(--wp--preset--color--accent-dark); border: 1px solid currentColor; background: transparent; }
.wp-block-button__link:hover { text-decoration: underline; text-underline-offset: .2em; }
.imspire-eyebrow { font-size: .75rem; letter-spacing: .16em; line-height: 1.7; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.imspire-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding-block: clamp(3rem, 6vw, 5.5rem); }
.imspire-hero.wp-block-group > * { margin-block: 0; min-width: 0; }
.imspire-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.75rem); line-height: 1.04; letter-spacing: -.045em; margin-block: 1.5rem; }
.imspire-hero h1 span { font-weight: 400; }
.imspire-intro { max-width: 35rem; color: var(--wp--preset--color--muted); font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.6; }
.imspire-hero .wp-block-buttons { gap: 1rem; margin-top: 2rem; }
.imspire-hero-art { position: relative; min-height: 370px; }
.imspire-hero-note { position: absolute; top: 1rem; left: 0; border-left: 1px solid #dce2e4; padding: 1.5rem 0 1.5rem 2rem; z-index: 1; }
.imspire-hero-note strong { color: var(--wp--preset--color--accent-dark); font-weight: 600; }
.imspire-pixels { width: min(100%, 330px); margin: 0 0 0 auto; }
.imspire-pixels img { display: block; width: 100%; height: auto; }
.imspire-services { padding-block: 2rem clamp(3rem, 5vw, 4.5rem); }
.imspire-section-heading { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 3rem; margin-bottom: 2rem; }
.imspire-section-heading.wp-block-group > * { margin-block: 0; }
.imspire-section-title h2 { margin-top: .75rem; }
.imspire-section-intro { max-width: 25rem; justify-self: end; color: var(--wp--preset--color--muted); font-size: .9375rem; }
.imspire-section-intro a, .imspire-card-link a { color: var(--wp--preset--color--accent-dark); text-decoration: none; }
.imspire-section-intro a:hover, .imspire-card-link a:hover { text-decoration: underline; text-underline-offset: .2em; }
.imspire-services-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.imspire-services-grid.wp-block-group > * { margin-block: 0; }
.imspire-service-card { display: flex; flex-direction: column; align-items: flex-start; background: var(--wp--preset--color--light); padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: 6px; min-width: 0; }
.imspire-card-accent.wp-block-separator { width: 2rem; border: 0; border-top: 3px solid var(--wp--preset--color--accent-dark); margin: 0 0 1.5rem; }
.imspire-service-card h3 { font-size: 1.0625rem; letter-spacing: -.025em; line-height: 1.3; margin-block: 0 .75rem; }
.imspire-service-card p { font-size: .9375rem; line-height: 1.6; color: var(--wp--preset--color--muted); margin-block: 0 1.5rem; }
.imspire-service-card .imspire-card-link { margin-top: auto; margin-bottom: 0; padding-top: .5rem; font-size: .8125rem; }
.imspire-why { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 2rem; padding-block: 1rem clamp(3rem, 5vw, 4.5rem); }
.imspire-why.wp-block-group > * { margin-block: 0; }
.imspire-why-title h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin-top: .75rem; }
.imspire-usp { border-left: 1px solid #dce2e4; padding-left: 1.5rem; padding-top: 1rem; }
.imspire-usp h3 { font-size: .9375rem; line-height: 1.4; letter-spacing: -.02em; }
.imspire-usp p { color: var(--wp--preset--color--muted); font-size: .875rem; line-height: 1.6; margin-top: .75rem; }
.imspire-contact { background: var(--wp--preset--color--light); border-radius: 6px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: center; gap: 3rem; padding: clamp(1.5rem, 4vw, 3rem); }
.imspire-contact.wp-block-group > * { margin-block: 0; }
.imspire-contact h2 { margin-top: .5rem; }
.imspire-contact-copy > p:not(.imspire-eyebrow) { color: var(--wp--preset--color--muted); font-size: .9375rem; margin-block: .75rem 1.25rem; }
.imspire-contact-note { color: var(--wp--preset--color--muted); border-left: 1px solid #dce2e4; padding-left: 2rem; }
.imspire-footer { background: var(--wp--preset--color--white); padding-block: 2.5rem 1.5rem; }
.imspire-footer-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: 3rem; }
.imspire-footer-grid.wp-block-group > * { margin-block: 0; }
.imspire-footer-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; font-size: .875rem; color: var(--wp--preset--color--muted); }
.imspire-footer-contact p { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.imspire-footer-contact strong { color: var(--wp--preset--color--dark); font-weight: 600; }
.imspire-footer-contact a { text-decoration: none; }
.imspire-footer-contact a:hover { text-decoration: underline; }
.imspire-footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; border-top: 1px solid #e7ebec; margin-top: 2rem; padding-top: 1rem; font-size: .75rem; color: var(--wp--preset--color--muted); }
.imspire-footer-bottom.wp-block-group > p { margin: 0; }
.imspire-footer-bottom a { color: inherit; text-decoration: none; }
.imspire-footer-bottom a:hover { text-decoration: underline; }
@media (max-width: 1023px) {
 .imspire-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .imspire-header-row, .imspire-header-actions { gap: 1.25rem; }
 .imspire-main-nav .wp-block-navigation__container { gap: 1rem; }
 .imspire-hero { gap: 1.5rem; }
 .imspire-hero-art { min-height: 300px; }
 .imspire-hero-note { padding-left: 1rem; }
 .imspire-why { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .imspire-why-title { grid-column: 1 / -1; }
}
@media (max-width: 781px) {
 .imspire-header-row { flex-wrap: wrap; }
 .imspire-brand { width: 180px; }
 .imspire-brand img { width: 180px; height: 61px; }
 .imspire-header-actions { flex: 1; justify-content: flex-end; flex-wrap: wrap; }
 .imspire-hero { grid-template-columns: 1fr; }
 .imspire-hero-art { display: none; }
 .imspire-section-heading { grid-template-columns: 1fr; gap: 1rem; }
 .imspire-section-intro { justify-self: start; max-width: 35rem; }
 .imspire-contact { grid-template-columns: 1fr; gap: 1rem; }
 .imspire-contact-note { display: none; }
 .imspire-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 599px) {
 .imspire-services-grid, .imspire-why, .imspire-footer-grid { grid-template-columns: 1fr; }
 .imspire-why { gap: 1.5rem; }
 .imspire-usp { padding-top: 0; }
 .imspire-header-row { gap: .75rem; }
 .imspire-header-actions { flex: 0 1 auto; }
 .imspire-header-actions > .wp-block-buttons { display: none; }
 .imspire-footer-contact { grid-template-columns: 1fr; gap: 1rem; }
 .imspire-why-title { grid-column: auto; }
}

/* Over mij: editorial layout, scoped to its own pattern. */
.imspire-about-hero { position: relative; padding-block: clamp(3rem, 6vw, 5rem); }
.imspire-about-hero h1 { max-width: 1000px; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1.1; margin-block: 1rem 2rem; }
.imspire-about-hero h1 span { font-weight: 400; }
.imspire-about-intro { max-width: 760px; position: relative; z-index: 1; }
.imspire-about-intro .imspire-intro { max-width: none; color: var(--wp--preset--color--dark); }
.imspire-about-intro > p + p { margin-top: 1.25rem; color: var(--wp--preset--color--muted); }
.imspire-about-pixels { position: absolute; right: 0; bottom: 3rem; width: 140px; opacity: .65; margin: 0; }
.imspire-about-pixels img { display: block; width: 100%; height: auto; }
.imspire-about-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 5vw, 5rem); border-top: 1px solid #e7ebec; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.imspire-about-section.wp-block-group > * { margin-block: 0; min-width: 0; }
.imspire-about-section-heading h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-top: .75rem; }
.imspire-about-prose { max-width: 680px; color: var(--wp--preset--color--muted); }
.imspire-about-prose strong { color: var(--wp--preset--color--dark); }
.imspire-about-prose > p + p { margin-top: 1.25rem; }
.imspire-about-cta { border-top: 2px solid var(--wp--preset--color--accent); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.imspire-about-cta.wp-block-group > * { margin-block: 0; min-width: 0; max-width: 100%; }
.imspire-about-cta.wp-block-group > .imspire-about-cta-copy { max-width: min(100%, 760px); overflow-wrap: anywhere; }
.imspire-about-page .imspire-about-cta { flex-direction: column; align-items: flex-start; }
.imspire-about-cta-copy > p { margin-top: .75rem; color: var(--wp--preset--color--muted); }
@media (max-width: 1023px) {
 .imspire-about-pixels { display: none; }
}
@media (max-width: 781px) {
 .imspire-about-section { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Projectmanagement reuses the editorial sections from Over mij. */
.imspire-project-hero h1 { max-width: 1100px; }
.imspire-about-intro > .imspire-project-accent { color: var(--wp--preset--color--dark); border-left: 2px solid var(--wp--preset--color--accent); padding-left: 1rem; margin-top: 1.75rem; }
.imspire-project-examples { border-top: 1px solid #e7ebec; padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.imspire-project-examples-heading { max-width: 760px; margin-bottom: 2rem; }
.imspire-project-examples-heading h2 { margin-block: .75rem 1.25rem; }
.imspire-project-examples-heading > p:not(.imspire-eyebrow) { color: var(--wp--preset--color--muted); }
.imspire-project-examples-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.imspire-project-examples-grid.wp-block-group > * { margin-block: 0; min-width: 0; }
.imspire-project-example { background: var(--wp--preset--color--light); padding: clamp(1.5rem, 2.5vw, 2rem); border-radius: 6px; }
.imspire-project-example h3 { font-size: 1.25rem; line-height: 1.3; margin-top: .75rem; }
.imspire-project-example > p:not(.imspire-eyebrow) { color: var(--wp--preset--color--muted); font-size: .9375rem; margin-top: 1rem; }
.imspire-project-cta .imspire-about-cta-copy { max-width: 760px; }
@media (max-width: 1023px) {
 .imspire-project-examples-grid { grid-template-columns: 1fr; }
}
.imspire-project-example > .imspire-eyebrow { color: var(--wp--preset--color--accent-dark); border-left: 2px solid var(--wp--preset--color--accent); padding-left: .75rem; }

/* Services overview: roomier cards in two columns. */
.imspire-overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.imspire-overview-grid.wp-block-group > * { margin-block: 0; min-width: 0; }
.imspire-overview-card { padding: clamp(1.5rem, 3vw, 2.5rem); }
.imspire-overview-card .imspire-eyebrow { font-size: .75rem; color: var(--wp--preset--color--accent-dark); margin-bottom: 1rem; }
.imspire-overview-card h2 { font-size: clamp(1.6rem, 2.5vw, 2.25rem); margin-block: 0 1.25rem; }
.imspire-overview-card .imspire-card-link { font-size: .9375rem; }
@media (max-width: 781px) {
 .imspire-overview-grid { grid-template-columns: 1fr; }
}

/* Contact: editable page content embeds the Fluent Forms shortcode. */
.imspire-contact-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
.imspire-contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(2rem, 6vw, 5rem); padding-bottom: clamp(3rem, 5vw, 5rem); }
.imspire-contact-layout.wp-block-group > * { margin-block: 0; min-width: 0; }
.imspire-contact-layout h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.imspire-contact-details .imspire-eyebrow { margin-block: 1.5rem .25rem; }
.imspire-contact-details .imspire-eyebrow + p { margin-top: 0; }
.imspire-contact-details a { text-underline-offset: .2em; overflow-wrap: anywhere; }
.imspire-contact-appointment { color: var(--wp--preset--color--muted); max-width: 25rem; }
.imspire-contact-privacy { color: var(--wp--preset--color--muted); font-size: .875rem; line-height: 1.6; }
/* Scoped Fluent Forms styles; keep plugin validation and status handling intact. */
.imspire-contact-form .fluentform { max-width: 100%; min-width: 0; }
.imspire-contact-form .fluentform .ff-el-group { margin-bottom: 1.25rem; }
.imspire-contact-form .fluentform .ff-el-input--label { margin-bottom: .5rem; }
.imspire-contact-form .fluentform label { display: block; font-size: .9375rem; font-weight: 600; line-height: 1.5; }
.imspire-contact-form .fluentform .ff-el-form-control { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: .75rem; border: 1px solid #b7c0c4; border-radius: 5px; background: var(--wp--preset--color--light); color: var(--wp--preset--color--dark); font: inherit; font-size: 1rem; font-weight: 400; line-height: 1.5; }
.imspire-contact-form .fluentform textarea.ff-el-form-control { height: calc(7.5em + 1.5rem + 2px); min-height: calc(6em + 1.5rem + 2px); resize: vertical; }
.imspire-contact-form .fluentform .ff-btn-submit { border: 0; border-radius: 999px; padding: .875rem 1.5rem; font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.5; background: var(--wp--preset--color--accent-dark); color: #fff; cursor: pointer; }
.imspire-contact-form .fluentform .ff-btn-submit:hover { text-decoration: underline; text-underline-offset: .2em; }
.imspire-contact-form .fluentform .ff-btn-submit:disabled { opacity: .65; cursor: wait; }
.imspire-contact-form .fluentform :is(.ff-el-form-control, .ff-btn-submit):focus-visible { outline: 2px solid var(--wp--preset--color--accent-dark); outline-offset: 3px; }
.imspire-contact-form .fluentform :is(.ff-el-is-error .ff-el-form-control, [aria-invalid="true"]) { border-color: #a32626; }
.imspire-contact-form .fluentform .error { color: #a32626; font-size: .875rem; margin-top: .35rem; }
.imspire-contact-form .fluentform :is(.ff-message-success, .ff-errors-in-stack:not(:empty)) { margin: 1rem 0; padding: .75rem 1rem; border: 1px solid #267349; border-radius: 5px; background: var(--wp--preset--color--light); font-size: .9375rem; line-height: 1.6; box-shadow: none; overflow-wrap: anywhere; }
.imspire-contact-form .fluentform .ff-errors-in-stack:not(:empty) { border-color: #a32626; }
@media (max-width: 781px) {
 .imspire-contact-layout { grid-template-columns: 1fr; }
}

/* Shared navigation around service page content; no editor content changes. */
.imspire-service-breadcrumbs,
.imspire-service-return { font-size: .8125rem; color: var(--wp--preset--color--muted); }
.imspire-service-breadcrumbs { padding-top: 1rem; }
.imspire-service-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; padding: 0; margin: 0; }
.imspire-service-breadcrumbs li { min-width: 0; overflow-wrap: anywhere; }
.imspire-service-breadcrumbs li + li::before { content: "›"; margin-right: .5rem; }
.imspire-service-breadcrumbs a,
.imspire-service-return a { text-decoration: none; }
.imspire-service-breadcrumbs a:hover,
.imspire-service-return a:hover { color: var(--wp--preset--color--accent-dark); text-decoration: underline; }
.imspire-service-breadcrumbs-slot + .wp-block-post-content { margin-block-start: 0; }
.imspire-service-breadcrumbs-slot + .wp-block-post-content > .imspire-about-hero:first-child { padding-top: 1rem; }
.imspire-service-return { margin-block-start: 0; padding-bottom: 2rem; }
.imspire-service-return p { margin: 0; }

.imspire-service-breadcrumbs-slot,
.imspire-service-return-slot { margin-block-start: 0; }

/* Native mobile navigation: backdrop with a compact panel on the right. */
@media (max-width: 599px) {
 .imspire-main-nav .wp-block-navigation__responsive-container {
  padding: 0 !important;
  overflow: clip;
  z-index: 100000;
  animation: none;
  opacity: 0;
  transition: opacity 180ms ease, display 180ms allow-discrete;
 }
 .imspire-main-nav .wp-block-navigation__responsive-container.is-menu-open {
  background: rgb(36 40 43 / 24%) !important;
  color: var(--wp--preset--color--dark) !important;
  opacity: 1;
 }
 .imspire-main-nav .wp-block-navigation__responsive-close {
  box-sizing: border-box;
  width: min(85vw, 360px);
  height: 100%;
  margin: 0 0 0 auto;
  padding: 1.25rem 1.5rem;
  background: var(--wp--preset--color--white);
  border-left: 1px solid #e5e8e8;
  box-shadow: -8px 0 28px rgb(36 40 43 / 10%);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 180ms ease;
 }
 .imspire-main-nav .is-menu-open .wp-block-navigation__responsive-close { transform: translateX(0); }
 .imspire-main-nav .wp-block-navigation__responsive-container-close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
 }
 .imspire-header .imspire-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: calc(2rem + 42px);
  align-items: flex-start;
 }
 .imspire-main-nav .is-menu-open .wp-block-navigation__container {
  width: 100%;
  align-items: flex-start;
  gap: 1.25rem;
  font-size: 1.0625rem;
 }
 .imspire-main-nav .is-menu-open .wp-block-navigation-item { align-items: flex-start; max-width: 100%; }
 .imspire-main-nav .is-menu-open .wp-block-navigation-item__content { overflow-wrap: anywhere; line-height: 1.7; }
 .imspire-main-nav .is-menu-open .imspire-mobile-contact { margin-top: 2rem; }
 .imspire-main-nav .is-menu-open .imspire-mobile-contact > .wp-block-navigation-item__content {
  padding: .65rem 1.3rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--wp--preset--color--accent-dark);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
 }
 .imspire-main-nav .is-menu-open a:hover {
  color: var(--wp--preset--color--accent-dark);
  text-decoration: underline;
  text-underline-offset: .2em;
 }
 @starting-style {
  .imspire-main-nav .wp-block-navigation__responsive-container.is-menu-open { opacity: 0; }
  .imspire-main-nav .is-menu-open .wp-block-navigation__responsive-close { transform: translateX(100%); }
 }
}
@media (max-width: 599px) and (prefers-reduced-motion: reduce) {
 .imspire-main-nav .wp-block-navigation__responsive-container,
 .imspire-main-nav .wp-block-navigation__responsive-close { transition: none; }
}


/* Stick the outer template part: its inner group alone cannot span the page. */
html:root { scroll-padding-top: calc(var(--imspire-header-height, 124px) + var(--imspire-adminbar-offset, 0px) + 16px); }
.wp-site-blocks > header.wp-block-template-part {
 position: sticky;
 top: var(--imspire-adminbar-offset, 0px);
 z-index: 1000;
 background: var(--wp--preset--color--white);
}
.wp-site-blocks > header.wp-block-template-part.is-scrolled {
 box-shadow: 0 1px 0 rgb(36 40 43 / 10%);
}
@media (max-width: 599px) {
 .admin-bar .imspire-main-nav .wp-block-navigation__responsive-close {
  padding-top: calc(1.25rem + var(--imspire-adminbar-offset, 0px));
 }
 .admin-bar .imspire-main-nav .is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0; }
}