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

/* ── Tokens ──────────────────────────────────────────────────────── */
:root {
  --vz-bg:           #252d3a;
  --vz-bg-deep:      #1e2530;
  --vz-border:       #2f3c4e;
  --vz-text:         #eef0f3;
  --vz-text-body:    #b8c0cc;
  --vz-text-muted:   #6b7a90;
  --vz-accent:       #5bc8d8;
  --vz-accent-dim:   #3d7a88;
  --vz-green:        #3fb950;
  --vz-font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --vz-font-body:    'Inter', system-ui, sans-serif;
  --vz-font-mono:    'JetBrains Mono', monospace;

  /* Wider content */
  --wp--style--global--content-size: min(93vw, 1300px);
  --wp--style--global--wide-size:    min(97vw, 1500px);
}

/* ── Base ───────────────────────────────────────────────────────────── */
html {
  background-color: var(--vz-bg);
  background-image: url('/wp-content/novamira-sandbox/vanderzee-topo.svg');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: 70vw auto;
  background-attachment: fixed;
  overflow-x: hidden;
}

body {
  background: transparent !important;
  color: var(--vz-text-body) !important;
  font-family: var(--vz-font-body) !important;
  font-size: 17px;
  line-height: 1.75;
  overflow-x: hidden;
  max-width: 100vw;
}

/* All WP wrapper layers: transparent so html bg shows through */
.wp-site-blocks,
.is-root-container,
#page, .site,
.wp-block-post,
.wp-block-post-content,
.entry-content,
.has-global-padding {
  background: transparent !important;
}

/* ── Typography ─────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--vz-font-heading) !important;
  color: var(--vz-text) !important;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h1 { font-size: clamp(2.8rem, 7vw,  5.5rem) !important; font-weight: 800 !important; }
h2 { font-size: clamp(2.2rem, 5vw,  4rem)   !important; font-weight: 700 !important; }
h3 { font-size: clamp(1.4rem, 3vw,  2rem)   !important; }

p, li { color: var(--vz-text-body); font-family: var(--vz-font-body); }

a {
  color: var(--vz-accent) !important;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a:hover { opacity: 0.75; text-decoration: none !important; }

strong, b { color: var(--vz-text); }

/* Code */
code, pre, kbd {
  font-family: var(--vz-font-mono) !important;
  background: var(--vz-bg-deep) !important;
  border: 1px solid var(--vz-border) !important;
  color: var(--vz-green) !important;
  border-radius: 6px !important;
  font-size: 0.88em;
}
pre, .wp-block-code {
  padding: 1.25rem 1.5rem !important;
  overflow-x: auto;
  background: var(--vz-bg-deep) !important;
}
code:not(pre code) { padding: 0.15em 0.4em !important; }

/* ── Site title / tagline ────────────────────────────────────────────── */
.wp-block-site-title,
.wp-block-site-title a {
  font-family: var(--vz-font-heading) !important;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.02em;
  color: var(--vz-text) !important;
  text-decoration: none !important;
}

.wp-block-site-tagline {
  font-family: var(--vz-font-body) !important;
  font-size: 0.78rem !important;
  color: var(--vz-text-muted) !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Header: fixed to top of viewport ────────────────────────────────── */
header.wp-block-group.is-position-sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: rgba(37, 45, 58, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(47, 60, 78, 0.7) !important;
}

/* Compensate for header height taken out of document flow */
.wp-site-blocks {
  padding-top: 72px !important;
}

/* Nav links */
.wp-block-navigation a,
.wp-block-navigation__container a {
  font-family: var(--vz-font-body) !important;
  font-size: 0.88rem !important;
  font-weight: 500;
  color: var(--vz-text-muted) !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 4px;
  letter-spacing: 0.01em;
  transition: color 0.15s ease !important;
}
.wp-block-navigation a:hover,
.wp-block-navigation__container a:hover {
  color: var(--vz-text) !important;
  background: transparent !important;
  text-decoration: none !important;
}

/* ── Cover / hero block ────────────────────────────────────────────── */
.wp-block-cover {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  min-height: 92vh !important;
  padding: 8vw 0 !important;
  align-items: center;
}
.wp-block-cover::before { display: none !important; }
.wp-block-cover .wp-block-cover__inner-container {
  max-width: min(55vw, 820px);
  margin-left: 0;
}

/* ── Groups / sections: no card styling, just breathing room ───────── */
.wp-block-group {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Accent on second heading line (emulate b4e two-tone effect) */
.wp-block-heading + .wp-block-heading,
.wp-block-cover h1 em,
h1 em, h2 em {
  color: var(--vz-accent-dim) !important;
  font-style: normal;
}

/* ── Post list ──────────────────────────────────────────────────────── */
.wp-block-post-title a {
  color: var(--vz-text) !important;
  font-family: var(--vz-font-heading) !important;
  font-weight: 700;
}
.wp-block-post-title a:hover { color: var(--vz-accent) !important; }
.wp-block-post-date,
.wp-block-post-excerpt__excerpt { color: var(--vz-text-muted) !important; font-size: 0.875rem; }

/* Subtle divider between posts */
.wp-block-post + .wp-block-post {
  border-top: 1px solid var(--vz-border);
  padding-top: 2rem;
  margin-top: 2rem;
}

/* ── Separators ────────────────────────────────────────────────────── */
hr, .wp-block-separator {
  border-color: var(--vz-border) !important;
  opacity: 1 !important;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.wp-block-button__link,
.wp-element-button {
  font-family: var(--vz-font-body) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  background: var(--vz-text) !important;
  color: var(--vz-bg-deep) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 0.75rem 1.75rem !important;
  letter-spacing: 0.01em;
  transition: opacity 0.2s ease !important;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
  opacity: 0.85;
  color: var(--vz-bg-deep) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--vz-text) !important;
  border: 1.5px solid rgba(238,240,243,0.35) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(238,240,243,0.08) !important;
  color: var(--vz-text) !important;
}

/* ── Forms ─────────────────────────────────────────────────────────── */
input, textarea, select {
  background: rgba(30,37,48,0.7) !important;
  border: 1px solid var(--vz-border) !important;
  color: var(--vz-text) !important;
  border-radius: 4px !important;
  padding: 0.7rem 1rem !important;
  font-family: var(--vz-font-body) !important;
  transition: border-color 0.2s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--vz-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(91,200,216,0.12) !important;
}

/* ── Tags / pills ────────────────────────────────────────────────────── */
.wp-block-post-terms a,
.cat-links a, .tags-links a {
  font-family: var(--vz-font-mono);
  font-size: 0.72rem;
  color: var(--vz-text-muted) !important;
  border: 1px solid var(--vz-border);
  border-radius: 3px;
  padding: 0.1rem 0.5rem;
  display: inline-block;
  margin: 0.1rem;
  text-decoration: none !important;
  letter-spacing: 0.04em;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.wp-block-post-terms a:hover,
.cat-links a:hover, .tags-links a:hover {
  color: var(--vz-accent) !important;
  border-color: var(--vz-accent-dim);
}

/* ── Footer ────────────────────────────────────────────────────────── */
.wp-block-template-part[class*='footer'],
footer.wp-block-template-part {
  background: transparent !important;
  border-top: 1px solid var(--vz-border) !important;
  color: var(--vz-text-muted) !important;
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
  margin-top: 4rem;
}

/* ── Scrollbar ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--vz-bg); }
::-webkit-scrollbar-thumb { background: var(--vz-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--vz-text-muted); }

/* ── Selection ─────────────────────────────────────────────────────── */
::selection { background: rgba(91,200,216,0.2); color: var(--vz-text); }