@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

html, body { overflow-x:hidden; }
body { background:#F4F6F5; color:#0E2233; font-family:'IBM Plex Sans', sans-serif; }
h1,h2,h3,h4 { font-family:'Space Grotesk', sans-serif; color:#0E2233; letter-spacing:-0.01em; }

.wp-block-button__link { background:#C1502C !important; color:#fff !important; border-radius:2px !important; font-family:'IBM Plex Mono', monospace; font-weight:600; letter-spacing:0.03em; padding:14px 24px !important; }
.wp-block-button__link:hover { background:#93381C !important; }
.is-style-outline .wp-block-button__link { background:transparent !important; border:1px solid #2B4F6E66 !important; color:#0E2233 !important; }

a { color:#C1502C; }

.wp-block-columns { gap: 28px !important; margin-bottom: 28px; }
.wp-block-column { background:#fff; border:1px solid #2B4F6E33; border-radius:4px; padding:28px !important; }
.wp-block-column h3, .wp-block-column h4 { font-size:18px; margin-bottom:10px !important; }
.wp-block-column p { color:#5C6B74; font-size:14.5px; }

.wp-block-table table { border:1px solid #2B4F6E33; border-collapse:collapse; width:100%; }
.wp-block-table th, .wp-block-table td { border-top:1px solid #2B4F6E33; padding:16px !important; text-align:left; font-size:14.5px; }
.wp-block-table th { background:#EAEDEA; font-family:'Space Grotesk', sans-serif; }
.wp-block-table td:nth-child(2) { color:#C1502C; font-family:'IBM Plex Mono', monospace; font-weight:600; white-space:nowrap; }

.wp-block-heading { margin-top:64px !important; margin-bottom:16px !important; }
.wp-block-heading:first-of-type { margin-top:24px !important; }

.wp-block-list { margin-top:20px; }
.wp-block-list li { margin-bottom:10px; font-family:'IBM Plex Mono', monospace; font-size:13px; }

.wp-block-separator { border-top:1px solid #2B4F6E33 !important; margin:56px 0 !important; }

.entry-content, .wp-block-post-content { max-width: 1840px; margin:0 auto; padding:0 28px; }

.gw-hero.alignfull, .gw-trust.alignfull, .gw-contact-dark.alignfull {
  width: 100vw !important; max-width: 100vw !important; position: relative !important;
  left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important;
  box-sizing: border-box !important;
}

/* ---- Hero (2-column) ---- */
.gw-hero { background:linear-gradient(180deg, #0E2233 0%, #153450 100%) !important; color:#fff !important; padding:88px max(28px, calc((100vw - 1840px) / 2)) 96px !important; }
.gw-hero .wp-block-columns { align-items:center !important; gap:40px !important; margin-bottom:0 !important; }
.gw-hero .wp-block-column { background:transparent !important; border:none !important; padding:0 !important; }
.gw-hero h1 { color:#fff !important; font-size:clamp(38px, 5vw, 56px); line-height:1.05; margin-top:18px !important; }
.gw-hero .gw-eyebrow { font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.14em; text-transform:uppercase; color:#EF9270; }
.gw-hero .gw-lede { color:#C7D3DA; font-size:17px; max-width:46ch; margin-top:10px !important; }
.gw-hero .wp-block-buttons { margin-top:20px !important; }
.gw-btn-light .wp-block-button__link { border-color:#ffffff55 !important; color:#fff !important; }
.gw-hero-figure { max-width:400px; margin:0 auto; }
.gw-hero-figure svg { display:block; width:100%; height:auto; }

@media (max-width: 900px){
  .gw-hero .wp-block-columns { flex-direction:column-reverse !important; }
  .gw-hero .wp-block-column { width:100% !important; }
}
@media (max-width: 1260px){
  .gw-hero, .gw-trust, .gw-contact-dark { padding-left:40px !important; padding-right:40px !important; }
}

/* ---- Trust strip ---- */
.gw-trust { background:#EAEDEA !important; border-top:1px solid #2B4F6E33; border-bottom:1px solid #2B4F6E33; padding:22px max(28px, calc((100vw - 1840px) / 2)) !important; }
.gw-trust p { font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:#5C6B74; text-align:center; line-height:2.2; }

/* ---- Stats panel ---- */
.gw-stats-dark { background:#0E2233 !important; color:#fff !important; padding:32px 28px !important; border:none !important; border-radius:2px !important; }
.gw-stats-dark p { color:#fff !important; font-size:15px; padding:10px 0; border-top:1px solid #ffffff1f; margin:0 !important; }
.gw-stats-dark p:first-child { border-top:none; color:#EF9270 !important; font-family:'IBM Plex Mono', monospace; font-size:12px; }
.gw-stats-dark strong { font-family:'Space Grotesk', sans-serif; font-size:20px; margin-right:8px; }

/* ---- Contact dark ---- */
.gw-contact-dark { background:#0E2233 !important; color:#fff !important; padding:80px max(28px, calc((100vw - 1840px) / 2)) !important; }
.gw-contact-dark h2 { color:#fff !important; }
.gw-contact-dark p { color:#C7D3DA; }
.gw-contact-dark .wp-block-column { background:transparent !important; border:1px solid #ffffff22 !important; }
.gw-contact-dark .wp-block-column p { color:#fff !important; }
.gw-contact-dark .wp-block-column a { color:#EF9270; }

/* ---- Topbar ---- */
.gw-topbar { background:#0E2233 !important; color:#CBD7DF !important; font-family:'IBM Plex Mono', monospace; font-size:12px; padding:8px max(28px, calc((100vw - 1840px) / 2)) !important; }
.gw-topbar a { color:#CBD7DF; text-decoration:none; }
.gw-topbar a:hover { color:#EF9270; }
.gw-topbar .gw-topbar-inner { max-width:1840px; margin:0 auto; padding:0 28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; box-sizing:border-box; }
.gw-topbar .gw-rd { color:#EF9270; }

/* ---- Logo icon before site title ---- */
.wp-block-site-title, .wp-block-site-title a { display:inline-flex !important; align-items:center !important; gap:10px !important; }
.wp-block-site-title a::before {
  content: "";
  display:inline-block;
  width:24px; height:29px;
  flex-shrink:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 34'%3E%3Cpath d='M14 2C8.5 2 4 6.4 4 11.8c0 7.6 10 19.2 10 19.2s10-11.6 10-19.2C24 6.4 19.5 2 14 2z' fill='%23153450' stroke='%23C1502C' stroke-width='1.6'/%3E%3Ccircle cx='14' cy='12' r='4' fill='none' stroke='%23C1502C' stroke-width='1.5'/%3E%3Ccircle cx='14' cy='12' r='1.1' fill='%23C1502C'/%3E%3C/svg%3E");
  background-size:contain;
  background-repeat:no-repeat;
}

/* ---- Subhero (used on FAQ, algemene voorwaarden, etc.) ---- */
.gw-subhero.alignfull { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; box-sizing: border-box !important; }
.gw-subhero { background:linear-gradient(180deg, #0E2233 0%, #153450 100%) !important; color:#fff !important; padding:64px max(28px, calc((100vw - 1840px) / 2)) 56px !important; }
.gw-subhero h1 { color:#fff !important; font-size:clamp(32px,4.4vw,48px); line-height:1.08; margin-top:16px !important; max-width:22ch; }
.gw-subhero p { font-size:16.5px; color:#C7D3DA; max-width:56ch; margin-top:14px !important; }
.gw-subhero .gw-eyebrow { color:#EF9270; }
.gw-subhero a { color:#fff; text-decoration:underline; }

/* ---- FAQ CTA box ---- */
.gw-faq-cta { background:#0E2233 !important; color:#fff !important; border-radius:3px; padding:32px 30px !important; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:48px; border:none !important; }
.gw-faq-cta p { font-family:'Space Grotesk', sans-serif; font-size:18px; font-weight:600; max-width:32ch; color:#fff !important; }

/* ---- Voorbehoud-melding (algemene voorwaarden) ---- */
.gw-voorbehoud { background:#FBEFE9 !important; border:1px solid #ECC3AC; border-left:4px solid #C1502C !important; border-radius:2px; padding:20px 24px !important; margin-bottom:40px; }
.gw-voorbehoud h4 { color:#93381C !important; font-size:15px !important; margin-top:0 !important; margin-bottom:10px !important; }
.gw-voorbehoud p { color:#5C3A28 !important; font-size:13.5px; margin-bottom:8px; }

/* ---- Tool CTA box (links to externally hosted interactive tools) ---- */
.gw-tool-cta { background:#fff !important; border:1px solid #2B4F6E33 !important; border-left:4px solid #C1502C !important; border-radius:2px; padding:28px 30px !important; margin-bottom:40px; }
.gw-tool-cta h3 { margin-top:0 !important; margin-bottom:8px !important; }
.gw-tool-cta p { color:#5C6B74; margin-bottom:16px !important; }

/* ---- Address search bar (homepage) ---- */
.gw-address-search { background:#EAEDEA !important; padding:36px max(28px, calc((100vw - 1840px) / 2)) !important; }
.gw-search-card { max-width:720px; margin:0 auto; text-align:center; }
.gw-search-label { font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:17px; color:#0E2233; margin-bottom:14px; }
.gw-search-form { display:flex; gap:10px; background:#fff; border:1px solid #2B4F6E33; border-radius:3px; padding:6px; box-shadow:0 6px 20px rgba(14,34,51,0.08); }
.gw-search-form input { flex:1; border:none; outline:none; font-family:'IBM Plex Sans', sans-serif; font-size:15px; padding:12px 14px; color:#0E2233; background:transparent; }
.gw-search-form button { display:flex; align-items:center; gap:8px; background:#C1502C; color:#fff; border:none; font-family:'IBM Plex Mono', monospace; font-size:13.5px; font-weight:600; padding:0 22px; border-radius:2px; cursor:pointer; white-space:nowrap; }
.gw-search-form button:hover { background:#93381C; }
@media (max-width:600px){ .gw-search-form { flex-direction:column; } .gw-search-form button { padding:12px; justify-content:center; } }

/* ---- Address search inside the hero (compact, on dark background) ---- */
.gw-hero-search.gw-address-search { background:transparent !important; padding:24px 0 0 !important; }
.gw-hero-search .gw-search-card { max-width:460px; margin:0; text-align:left; }
.gw-hero-search .gw-search-label { color:#C7D3DA; font-size:13.5px; font-weight:500; margin-bottom:10px; }
.gw-hero-search .gw-search-form { box-shadow:0 10px 30px rgba(0,0,0,0.25); }

/* ---- Hero search: fix full-bleed override (must NOT break out of the column anymore) ---- */
.gw-hero-search.gw-address-search.alignfull { width:auto !important; max-width:none !important; position:static !important; left:auto !important; right:auto !important; margin-left:0 !important; margin-right:0 !important; }
.gw-hero-search .gw-search-card { max-width:560px; }

/* ---- Fix: hero's white text color was bleeding into the search input, making typed text invisible ---- */
.gw-search-form input { color:#0E2233 !important; }
.gw-search-form input::placeholder { color:#8A97A0 !important; }

/* ---- Address suggestions dropdown ---- */
.gw-search-suggestions {
  position:absolute; top:100%; left:0; right:0; margin-top:6px;
  background:#fff; border:1px solid #2B4F6E33; border-radius:3px;
  box-shadow:0 10px 30px rgba(14,34,51,0.18);
  max-height:260px; overflow-y:auto; z-index:900; display:none;
  text-align:left;
}
.gw-search-suggestions.open { display:block; }
.gw-search-suggestion { padding:11px 14px; font-size:13.5px; color:#0E2233; cursor:pointer; border-top:1px solid #2B4F6E1a; }
.gw-search-suggestion:first-child { border-top:none; }
.gw-search-suggestion:hover { background:#F4F6F5; }
.gw-search-form { position:relative; }

/* ---- Custom curated main nav (replaces theme's auto page-list nav) ---- */
.gw-mainnav { background:rgba(244,246,245,0.96); border-bottom:1px solid #2B4F6E33; position:sticky; top:0; z-index:500; }
.gw-mainnav-inner { max-width:1840px; margin:0 auto; padding:16px 56px; display:flex; align-items:center; justify-content:space-between; position:relative; box-sizing:border-box; }
.gw-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.gw-logo-text { font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:19px; color:#0E2233; display:flex; flex-direction:column; line-height:1.15; }
.gw-logo-text small { font-family:'IBM Plex Sans', sans-serif; font-weight:400; font-size:12px; color:#5C6B74; }
.gw-navlinks { display:flex; align-items:center; gap:30px; }
.gw-navlinks a { font-family:'IBM Plex Mono', monospace; font-size:13px; font-weight:500; letter-spacing:0.03em; text-decoration:none; color:#3D4B54; }
.gw-navlinks a:hover { color:#0E2233; }
.gw-navlinks a.gw-nav-btn { background:#C1502C; color:#fff !important; padding:11px 20px; border-radius:2px; font-weight:600; }
.gw-navlinks a.gw-nav-btn:hover { background:#93381C; }
.gw-navtoggle { display:none; background:none; border:0; cursor:pointer; padding:6px; }
.gw-navtoggle span { display:block; width:22px; height:2px; background:#0E2233; margin:5px 0; }

@media (max-width:900px){
  .gw-navlinks { display:none; }
  .gw-navtoggle { display:block; }
  .gw-navlinks.gw-open {
    display:flex !important; flex-direction:column; position:absolute; top:64px; right:28px; left:28px;
    background:#F4F6F5; border:1px solid #2B4F6E33; padding:18px 22px; gap:16px; z-index:900;
    box-shadow:0 12px 30px rgba(14,34,51,0.18); border-radius:3px;
  }
  .gw-navlinks.gw-open a { width:100%; }
}

/* ---- Responsive service/step cards: stack properly on mobile, no mid-word breaks, no ugly arrow wraps ---- */
.wp-block-column h3, .wp-block-column h4 { overflow-wrap:normal; word-break:normal; hyphens:none; }
.wp-block-column p a { white-space:normal; }

@media (max-width:780px){
  .wp-block-columns { flex-wrap:wrap !important; }
  .wp-block-columns .wp-block-column { flex-basis:100% !important; width:100% !important; }
}
@media (min-width:781px) and (max-width:1000px){
  .wp-block-columns { flex-wrap:wrap !important; }
  .wp-block-columns .wp-block-column { flex-basis:calc(50% - 14px) !important; width:calc(50% - 14px) !important; }
}

/* ---- Redesigned service cards: 2-column grid, roomier, real CTA buttons ---- */
.gw-services-grid { gap:24px !important; margin-bottom:24px !important; }
.gw-service-card { padding:36px 34px !important; display:flex !important; flex-direction:column; }
.gw-service-card h3 { font-size:21px; margin-bottom:14px !important; }
.gw-service-card p { font-size:15px; line-height:1.6; flex-grow:1; margin-bottom:22px !important; }
.gw-service-card .wp-block-buttons { margin-top:auto; }
.gw-card-btn .wp-block-button__link {
  background:#C1502C !important; color:#fff !important; border:none !important;
  width:100%; text-align:center; padding:13px 20px !important;
}
.gw-card-btn .wp-block-button__link:hover { background:#93381C !important; }

@media (max-width:780px){
  .gw-services-grid { flex-wrap:wrap !important; }
  .gw-services-grid .gw-service-card { flex-basis:100% !important; width:100% !important; }
}
@media (min-width:781px) and (max-width:1100px){
  .gw-services-grid .gw-service-card { flex-basis:calc(50% - 12px) !important; width:calc(50% - 12px) !important; }
}

/* ---- Fix: nav/topbar bars were shrinking to content width instead of filling available space ---- */
.gw-mainnav, .gw-topbar { width:100% !important; }
.gw-mainnav-inner, .gw-topbar-inner { width:100% !important; box-sizing:border-box; }

/* ---- Service cards: ALWAYS 2 per row on screens wider than mobile (not just a narrow tablet band) ---- */
.gw-services-grid { flex-wrap:wrap !important; }
.gw-services-grid .gw-service-card { flex-basis:calc(50% - 12px) !important; width:calc(50% - 12px) !important; flex-grow:0 !important; }
@media (max-width:780px){
  .gw-services-grid .gw-service-card { flex-basis:100% !important; width:100% !important; }
}

/* ---- ROOT FIX: override WordPress' native constrained-layout width variables. ---- */
/* This is what actually controls the width of core/columns, core/group etc. — the .entry-content override alone wasn't reaching these. */
body {
  --wp--style--global--content-size: 1840px !important;
  --wp--style--global--wide-size: 1840px !important;
}

/* ---- Header with background photo (surveying), dark overlay for legibility ---- */
.gw-mainnav { position:relative; background:rgba(244,246,245,0.96); border-bottom:1px solid #2B4F6E33; }







/* ---- Hero background photo (surveyors at work) + cadastral term labels ---- */
.gw-hero { position:relative; background-image: linear-gradient(90deg, rgba(14,34,51,0.95) 0%, rgba(14,34,51,0.85) 40%, rgba(14,34,51,0.5) 75%, rgba(14,34,51,0.3) 100%), url('https://grenzenwijzer.nl/wp-content/tools/images/hero-bg-kadaster.jpg') !important; background-size: cover !important; background-position: center center !important; }

.gw-hero-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.gw-hero-tag {
  font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.03em;
  color:#fff; background:rgba(14,34,51,0.55); border:1px solid rgba(239,146,112,0.5);
  padding:6px 12px; border-radius:20px; backdrop-filter:blur(3px);
}
.gw-hero-tag::before { content:"●"; color:#EF9270; margin-right:6px; font-size:8px; }

/* ---- Hero figure + floating data panels (over the surveyors photo) ---- */
.gw-hero-figure-wrap { position:relative; }
.gw-hero-panel {
  position:absolute; z-index:5;
  background:rgba(14,34,51,0.82); border:1px solid rgba(239,146,112,0.4);
  border-radius:4px; padding:12px 14px; backdrop-filter:blur(4px);
  max-width:190px; box-shadow:0 8px 20px rgba(0,0,0,0.3);
}
.gw-hero-panel-title { font-family:'Space Grotesk', sans-serif; font-size:12.5px; font-weight:600; color:#fff; margin-bottom:6px; }
.gw-hero-panel-row { font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:#C7D3DA; line-height:1.6; }
.gw-hero-panel-top { top:-100px; left:-180px; }
.gw-hero-panel-bottom { bottom:0px; right:-230px; }
@media (max-width:1150px){ .gw-hero-panel { display:none; } }

/* ---- Reposition hero diagram to overlay the actual Markt/plein visible on the kadaster map background ---- */
.gw-hero .wp-block-columns { position:relative; }
.gw-hero-figure-wrap {
  position:absolute !important;
  left:60% !important; top:50% !important;
  width:170px !important; max-width:22vw;
  transform:translate(-50%, -50%);
  z-index:4;
}
.gw-hero .wp-block-column:last-child { position:static; }

/* ---- Mobile fixes: hide hero diagram entirely, and clean up topbar layout ---- */
@media (max-width:900px){
  .gw-hero-figure-wrap { display:none !important; }

  .gw-topbar-inner {
    flex-direction:column !important;
    align-items:center !important;
    text-align:center;
    gap:4px !important;
    padding:10px 16px !important;
  }
  .gw-topbar-inner p { font-size:11px !important; line-height:1.5; }
  .gw-topbar .gw-rd { display:block; }
}
@media (max-width:480px){
  .gw-topbar-inner p:first-child { display:none; } /* hide RD-coordinates entirely on very small screens, not useful there */
}

/* ---- Mobile fixes v2: prevent topbar right-edge clipping, align hamburger to the right ---- */
@media (max-width:900px){
  .gw-topbar, .gw-topbar-inner { box-sizing:border-box !important; width:100% !important; max-width:100% !important; overflow:hidden; }
  .gw-topbar-inner { padding-left:16px !important; padding-right:16px !important; }
  .gw-topbar-inner p { max-width:100%; word-break:break-word; margin:0 !important; }

  .gw-mainnav-inner { padding-left:16px !important; padding-right:16px !important; box-sizing:border-box !important; width:100% !important; max-width:100% !important; }
  .gw-navtoggle { margin-left:auto !important; }
}

/* ---- Mobile fix v3: force topbar truly edge-to-edge (100vw), overriding any inherited padding ---- */
@media (max-width:900px){
  .gw-topbar.alignfull {
    width:100vw !important;
    max-width:100vw !important;
    position:relative !important;
    left:50% !important;
    right:50% !important;
    margin-left:-50vw !important;
    margin-right:-50vw !important;
  }
}

/* ---- Mobile fix v4: override theme's own root-padding on constrained-layout alignfull blocks ---- */


.wp-block-group.alignfull.gw-topbar.is-layout-constrained { width:100% !important; max-width:100% !important; position:static !important; left:auto !important; margin-left:0 !important; padding-left:0 !important; padding-right:0 !important; }

/* ---- Contact form (replaces the mailto button on the dark contact section) ---- */
.gw-contact-form { margin-top:28px; max-width:600px; }
.gw-form-row { display:flex; gap:16px; }
.gw-form-row .gw-form-field { flex:1; }
.gw-form-field { margin-bottom:16px; }
.gw-form-field label { display:block; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.03em; color:#9FB3C0; margin-bottom:7px; }
.gw-form-field input, .gw-form-field select, .gw-form-field textarea {
  width:100%; box-sizing:border-box;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); border-radius:2px;
  color:#fff; font-family:'IBM Plex Sans', sans-serif; font-size:14.5px; padding:11px 13px;
}
.gw-form-field input::placeholder, .gw-form-field textarea::placeholder { color:#7C8E99; }
.gw-form-field select option { background:#0E2233; color:#fff; }
.gw-form-submit {
  background:#C1502C; color:#fff; border:none; font-family:'IBM Plex Mono', monospace;
  font-weight:600; font-size:14px; letter-spacing:0.03em; padding:13px 26px; border-radius:2px; cursor:pointer;
}
.gw-form-submit:hover { background:#93381C; }
.gw-form-submit:disabled { opacity:0.6; cursor:default; }
.gw-form-status { margin-top:12px; font-family:'IBM Plex Mono', monospace; font-size:13px; }
.gw-form-status-ok { color:#9FDCA6; }
.gw-form-status-error { color:#EF9270; }
@media (max-width:600px){ .gw-form-row { flex-direction:column; gap:0; } }

/* ---- Mobile fix: pricing table was squeezing/overlapping columns on narrow screens ---- */
@media (max-width:780px){
  .wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #2B4F6E33;
    border-radius: 4px;
  }
  .wp-block-table table {
    min-width: 640px; /* forces horizontal scroll instead of squeezing columns */
    border: none;
  }
  .wp-block-table th, .wp-block-table td {
    white-space: normal; /* allow natural wrapping within the now-wider column */
  }
  .wp-block-table td:nth-child(2) {
    white-space: nowrap; /* keep the price itself on one line */
  }
}