/*
Theme Name: Paul Politiek
Theme URI: https://paul.kruithofvanderkolk.nl
Author: Paul van der Kolk-Kruithof
Description: Persoonlijk politiek blogthema, geïnspireerd op de huisstijl van Progressief Nederland.
Version: 1.0.6
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: paul-politiek
*/

:root {
  --pro-red: #ff0000;
  --pro-green: #00aa00;
  --pro-pink: #ffddee;
  --pro-pink-strong: #ffaacc;
  --pro-mint: #ddffdd;
  --pro-lime: #aaee77;
  --pro-black: #111111;
  --pro-white: #ffffff;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { text-underline-offset: .16em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }

.pro-shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.pro-kicker { font-family: "Arial Narrow", "Franklin Gothic Demi Cond", Arial, sans-serif; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.pro-display { font-family: "Arial Narrow", "Franklin Gothic Demi Cond", Arial, sans-serif; font-stretch: condensed; font-weight: 900; letter-spacing: -.045em; line-height: .88; text-transform: uppercase; }
.pro-header { border-top: 8px solid var(--pro-green); border-bottom: 2px solid var(--pro-black); position: relative; z-index: 20; }
.pro-header a { text-decoration: none; }
.pro-site-title { font-family: "Arial Narrow", "Franklin Gothic Demi Cond", Arial, sans-serif; font-size: clamp(1.1rem, 2.5vw, 1.55rem); font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; }
.pro-nav { font-weight: 800; }

.pro-hero { background: var(--pro-pink); border-bottom: 2px solid var(--pro-black); overflow: hidden; position: relative; }
.pro-hero::after { background: var(--pro-red); border: 2px solid var(--pro-black); border-radius: 50%; content: "ASSEN"; display: grid; font-family: "Arial Narrow", Arial, sans-serif; font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 900; height: clamp(110px, 18vw, 190px); place-items: center; position: absolute; right: clamp(-35px, 2vw, 40px); text-transform: uppercase; top: clamp(28px, 5vw, 70px); transform: rotate(8deg); width: clamp(110px, 18vw, 190px); }
.pro-hero-inner { padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; z-index: 1; }
.pro-hero h1 { max-width: 980px; width: 88%; }
.pro-hero h1.has-display-font-size { font-size: clamp(3.2rem, 6.5vw, 5.8rem) !important; }
.pro-hero h1 span { display: block; }
.pro-intro { font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.35; max-width: 690px; }

.pro-section { padding-block: clamp(4rem, 8vw, 7rem); }
.pro-section-heading { border-bottom: 3px solid var(--pro-black); margin-bottom: 2rem; padding-bottom: .75rem; }
.pro-section-heading h2 { margin: 0; }
.pro-post-grid .wp-block-post { border: 2px solid var(--pro-black); min-height: 100%; padding: clamp(1.25rem, 3vw, 2rem); transition: transform .18s ease, box-shadow .18s ease; }
.pro-post-grid .wp-block-post:nth-child(3n+1) { background: var(--pro-mint); }
.pro-post-grid .wp-block-post:nth-child(3n+2) { background: var(--pro-pink); }
.pro-post-grid .wp-block-post:nth-child(3n) { background: var(--pro-lime); }
.pro-post-grid .wp-block-post:hover { box-shadow: 8px 8px 0 var(--pro-black); transform: translate(-4px,-4px); }
.pro-post-grid .wp-block-post-title { font-family: "Arial Narrow", "Franklin Gothic Demi Cond", Arial, sans-serif; font-weight: 900; line-height: .98; text-transform: uppercase; }
.pro-post-grid .wp-block-post-title a { text-decoration: none; }
.pro-post-grid .wp-block-post-date { font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

.pro-about { background: var(--pro-green); color: var(--pro-black); border-block: 2px solid var(--pro-black); }
.pro-about-card { background: var(--pro-white); border: 2px solid var(--pro-black); box-shadow: 10px 10px 0 var(--pro-red); padding: clamp(1.5rem, 4vw, 3.5rem); }
.pro-about-mark { align-items: center; background: var(--pro-pink); border: 2px solid var(--pro-black); display: flex; font-family: "Arial Narrow", Arial, sans-serif; font-size: clamp(3.5rem, 8vw, 7rem); font-weight: 900; justify-content: center; min-height: 260px; text-transform: uppercase; }

.pro-links { background: var(--pro-black); color: var(--pro-white); }
.pro-link-list { list-style: none; padding: 0; }
.pro-link-list li { border-top: 1px solid #666; margin: 0; }
.pro-link-list li:last-child { border-bottom: 1px solid #666; }
.pro-link-list a { align-items: center; display: flex; font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 800; justify-content: space-between; padding-block: 1rem; text-decoration: none; }
.pro-link-list a::after { color: var(--pro-lime); content: "↗"; font-size: 1.35em; }
.pro-link-list a:hover { color: var(--pro-lime); }
.pro-link-list small { color: #bdbdbd; display: block; font-size: .78rem; font-weight: 400; letter-spacing: .01em; margin-top: .15rem; }
.pro-link-list a:hover small { color: var(--pro-white); }

.pro-footer { background: var(--pro-pink); border-top: 8px solid var(--pro-red); }
.pro-footer-title { font-family: "Arial Narrow", Arial, sans-serif; font-weight: 900; text-transform: uppercase; }
.pro-reading { max-width: 740px; }
.pro-reading > * { margin-inline: auto; }
.pro-reading p, .pro-reading li { font-size: 1.08rem; line-height: 1.7; }

@media (max-width: 780px) {
  .pro-shell { width: min(100% - 28px, 1180px); }
  .pro-hero h1 { width: 100%; }
  .pro-hero h1.has-display-font-size { font-size: clamp(2.6rem, 12vw, 4rem) !important; }
  .pro-hero::after { opacity: .18; right: -38px; }
  .pro-post-grid .wp-block-post:hover { box-shadow: 5px 5px 0 var(--pro-black); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pro-post-grid .wp-block-post { transition: none; }
}