/*
Theme Name: mikedegroot.dev
Theme URI: https://mikedegroot.dev
Author: Mike de Groot
Description: Text-first portfolio and writing block theme. Monochrome ink-on-paper, document-like layout with a contents sidebar. Dark by default.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.1.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mikedegroot
Tags: blog, portfolio, one-column, block-patterns, full-site-editing
*/

/* Everything theme.json can express lives there. This file holds only what it
   cannot: the two-column shell, the numbered contents nav, callout variants,
   post cards, and hover/press states. */

/* ---------- shell ---------- */
.mdg-shell { max-width: var(--wp--custom--layout--shell); margin-inline: auto; gap: var(--wp--preset--spacing--60); }
.mdg-shell > .mdg-sidebar { flex-basis: var(--wp--custom--layout--sidebar) !important; }
.mdg-sidebar > * { position: sticky; top: var(--wp--preset--spacing--50); }
.mdg-prose { max-width: var(--wp--custom--layout--measure); }

@media (max-width: 860px) {
  .mdg-shell { flex-wrap: wrap; }
  .mdg-shell > .wp-block-column { flex-basis: 100% !important; }
  .mdg-sidebar > * { position: static; }
  .mdg-sidebar { border-bottom: 1px solid var(--wp--preset--color--rule); padding-bottom: var(--wp--preset--spacing--40); }
}

/* ---------- eyebrow ---------- */
.mdg-eyebrow {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--letter-spacing--caps);
  text-transform: uppercase;
  color: var(--wp--preset--color--text-subtle);
}

/* ---------- contents nav (the signature TocNav) ---------- */
.wp-block-navigation.is-style-contents-nav {
  counter-reset: mdg-toc;
}
.wp-block-navigation.is-style-contents-nav ul { display: block; }
.wp-block-navigation.is-style-contents-nav .wp-block-navigation-item {
  display: block;
  counter-increment: mdg-toc;
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.wp-block-navigation.is-style-contents-nav .wp-block-navigation-item__content {
  display: flex; gap: var(--wp--preset--spacing--30);
  padding: 7px 0; text-decoration: none;
  color: var(--wp--preset--color--text-muted);
  transition: color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-standard);
}
.wp-block-navigation.is-style-contents-nav .wp-block-navigation-item__content::before {
  content: counter(mdg-toc, decimal-leading-zero);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-subtle);
  flex: none; padding-top: 2px;
}
.wp-block-navigation.is-style-contents-nav .wp-block-navigation-item__content:hover,
.wp-block-navigation.is-style-contents-nav .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--ink);
}
/* unnumbered variant — site nav in the base layout */
.wp-block-navigation.is-style-contents-nav-plain .wp-block-navigation-item { display: block; border-bottom: 1px solid var(--wp--preset--color--rule); }
.wp-block-navigation.is-style-contents-nav-plain .wp-block-navigation-item__content { display: block; padding: 7px 0; text-decoration: none; color: var(--wp--preset--color--text-muted); }
.wp-block-navigation.is-style-contents-nav-plain .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--ink); }

/* ---------- callouts (core/quote block styles) ---------- */
[class*="is-style-callout-"] {
  border: 1px solid var(--wp--preset--color--border) !important;
  border-left-width: 3px !important;
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--surface);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) !important;
  color: var(--wp--preset--color--text) !important;
  font-style: normal;
}
[class*="is-style-callout-"] p:first-child strong { font-family: var(--wp--preset--font-family--display); font-weight: 800; }
.is-style-callout-note    { border-left-color: var(--wp--preset--color--border-strong) !important; }
.is-style-callout-idea    { border-left-color: var(--wp--custom--status--info) !important; }
.is-style-callout-tip     { border-left-color: var(--wp--custom--status--positive) !important; }
.is-style-callout-warning { border-left-color: var(--wp--custom--status--warning) !important; }

/* ---------- code panel with filename ---------- */
.mdg-code { border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); overflow: hidden; }
.mdg-code__name {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--text-subtle);
  background: var(--wp--preset--color--surface);
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding: 6px var(--wp--preset--spacing--40); margin: 0;
}
.mdg-code .wp-block-code { border: 0 !important; border-radius: 0 !important; margin: 0 !important; }

/* ---------- post cards ---------- */
.mdg-post-card {
  border-bottom: 1px solid var(--wp--preset--color--rule);
  padding: var(--wp--preset--spacing--40) 0;
}
.mdg-post-card:last-child { border-bottom: 0; }
.mdg-post-card .wp-block-post-title { font-size: var(--wp--preset--font-size--lg); margin: 0 0 6px; }
.mdg-post-card .wp-block-post-title a { text-decoration: none; }
.mdg-post-card .wp-block-post-title a:hover { text-decoration: underline; text-decoration-color: currentColor; }
.mdg-post-card .wp-block-post-excerpt { color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--base); }
.mdg-meta { display: flex; gap: var(--wp--preset--spacing--30); align-items: center; flex-wrap: wrap; }

/* ---------- tag chips (core/post-terms, core/tag-cloud) ---------- */
.is-style-tag-chips a, .is-style-tag-chips .wp-block-tag-cloud a {
  display: inline-block; text-decoration: none;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs) !important;
  color: var(--wp--preset--color--text-muted);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--sm);
  padding: 2px 8px; margin: 0 4px 4px 0;
  transition: border-color var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-standard);
}
.is-style-tag-chips a:hover { border-color: var(--wp--preset--color--border-strong); color: var(--wp--preset--color--ink); }
.is-style-tag-chips a[aria-current], .mdg-tag-active a {
  background: var(--wp--preset--color--ink); color: var(--wp--preset--color--text-invert); border-color: var(--wp--preset--color--ink);
}

/* ---------- project cards ---------- */
.mdg-project {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--md);
  background: var(--wp--preset--color--surface);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
  box-shadow: var(--wp--preset--shadow--xs);
  transition: box-shadow var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-standard);
}
.mdg-project:hover { box-shadow: var(--wp--preset--shadow--md); }
.mdg-project .wp-block-post-title { font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: var(--wp--preset--font-size--md); }

/* ---------- series / learning path index ---------- */
.mdg-series { border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--surface); padding: var(--wp--preset--spacing--50); }
.mdg-series ol { list-style: none; padding: 0; margin: 0; counter-reset: mdg-step; }
.mdg-series li { counter-increment: mdg-step; display: flex; gap: var(--wp--preset--spacing--30); padding: 8px 0; border-bottom: 1px solid var(--wp--preset--color--rule); font-size: var(--wp--preset--font-size--base); }
.mdg-series li:last-child { border-bottom: 0; }
.mdg-series li::before { content: counter(mdg-step, decimal-leading-zero); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--text-subtle); flex: none; padding-top: 3px; }
.mdg-series li[data-state="done"] { color: var(--wp--preset--color--text-subtle); }
.mdg-series li[data-state="current"] { color: var(--wp--preset--color--ink); font-weight: 600; }

/* ---------- buttons: secondary + ghost ---------- */
.wp-block-button.is-style-ink-secondary .wp-block-button__link {
  background: transparent; color: var(--wp--preset--color--text);
  border: 1px solid var(--wp--preset--color--border-strong);
}
.wp-block-button.is-style-ink-secondary .wp-block-button__link:hover { background: var(--wp--preset--color--surface-sunken); }
.wp-block-button.is-style-ink-ghost .wp-block-button__link {
  background: transparent; color: var(--wp--preset--color--text-muted); border: 0; padding-inline: 0;
}
.wp-block-button.is-style-ink-ghost .wp-block-button__link:hover { color: var(--wp--preset--color--ink); text-decoration: underline; }
.wp-block-button__link:active { transform: scale(var(--wp--custom--motion--tap-scale)); }

/* ---------- figures ---------- */
.wp-block-image.is-style-figure-plain img { border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md); }
.wp-block-image figcaption { text-align: left; }

/* ---------- forms (contact) ---------- */
.mdg-form input[type="text"], .mdg-form input[type="email"], .mdg-form textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--text); background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border); border-radius: var(--wp--custom--radius--md);
  padding: 9px 12px;
}
.mdg-form input:focus-visible, .mdg-form textarea:focus-visible { outline: 2px solid var(--wp--preset--color--ink); outline-offset: 1px; }
.mdg-form label { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--sm); margin-bottom: 5px; }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 0ms !important; } }