/*
Theme Name: Quinten Portfolio
Theme URI: https://example.com/quinten-portfolio
Author: Quinten Boeke
Author URI: https://example.com
Description: Een minimalistisch one-page portfolio thema voor mbo-student Marketing & Communicatie. Strak ontwerp met zwart/wit en een blauw accent, opgebouwd uit duidelijke secties (hero, over mij, CV, blogs, portfolio, projecten, ontwikkeling, testimonials, contact).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quinten-portfolio
Tags: one-page, portfolio, minimal, custom-colors, custom-logo, custom-menu, featured-images, theme-options, translation-ready
*/

/* ==========================================================================
   Quinten Portfolio — Design tokens
   Minimalistisch, zwart/wit met blauw accent
   ========================================================================== */

:root {
  --qp-bg: #ffffff;
  --qp-fg: #171717;
  --qp-muted: #666666;
  --qp-surface: #fafafa;
  --qp-border: #e6e6e6;
  --qp-primary: #2563eb;
  --qp-primary-soft: #eff4ff;
  --qp-primary-fg: #ffffff;
  --qp-radius: 8px;
  --qp-container: 1200px;
  --qp-container-narrow: 880px;
  --qp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Reset basics */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--qp-font);
  color: var(--qp-fg);
  background: var(--qp-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--qp-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 .5em;
  color: var(--qp-fg);
}
h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; color: var(--qp-muted); }

/* Layout helpers */
.qp-container { max-width: var(--qp-container); margin: 0 auto; padding: 0 24px; }
.qp-container--narrow { max-width: var(--qp-container-narrow); }
.qp-section { padding: 80px 0; }
.qp-section--alt { background: var(--qp-surface); border-top: 1px solid var(--qp-border); border-bottom: 1px solid var(--qp-border); }

.qp-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--qp-primary);
  margin-bottom: 16px;
}

.qp-section-title { margin-bottom: 12px; }
.qp-section-intro { color: var(--qp-muted); max-width: 640px; margin-bottom: 48px; }

/* Buttons */
.qp-btn {
  display: inline-block;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--qp-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
}
.qp-btn--primary { background: var(--qp-primary); color: var(--qp-primary-fg); }
.qp-btn--primary:hover { background: #1d4ed8; text-decoration: none; }
.qp-btn--outline { background: transparent; color: var(--qp-fg); border-color: var(--qp-border); }
.qp-btn--outline:hover { border-color: var(--qp-fg); text-decoration: none; }
.qp-btn--dark { background: var(--qp-fg); color: #fff; }
.qp-btn--dark:hover { background: #000; text-decoration: none; }

/* Header */
.qp-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--qp-border);
}
.qp-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.qp-logo { font-weight: 700; font-size: 18px; color: var(--qp-fg); text-decoration: none; }
.qp-logo span { color: var(--qp-primary); }

.qp-nav { display: none; gap: 4px; }
.qp-nav a {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(23,23,23,.7);
  border-radius: 6px;
  text-decoration: none;
}
.qp-nav a:hover { color: var(--qp-fg); background: var(--qp-surface); }

.qp-nav-toggle {
  background: transparent; border: 0; padding: 8px;
  cursor: pointer; color: var(--qp-fg);
}
.qp-nav-mobile { display: none; border-top: 1px solid var(--qp-border); }
.qp-nav-mobile.is-open { display: block; }
.qp-nav-mobile a {
  display: block; padding: 14px 24px;
  border-bottom: 1px solid var(--qp-border);
  color: var(--qp-fg); font-weight: 500; text-decoration: none;
}

@media (min-width: 900px) {
  .qp-nav { display: flex; }
  .qp-nav-toggle { display: none; }
}

/* Hero */
.qp-hero { border-bottom: 1px solid var(--qp-border); }
.qp-hero__grid {
  display: grid; gap: 48px; align-items: center;
  padding: 80px 0;
}
.qp-hero__title { font-size: clamp(2.25rem, 5vw, 3.75rem); margin-bottom: 24px; }
.qp-hero__title em { font-style: normal; color: var(--qp-primary); }
.qp-hero__lead { font-size: 1.125rem; max-width: 560px; margin-bottom: 32px; }
.qp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.qp-hero__image {
  aspect-ratio: 4/5;
  background: var(--qp-surface);
  border: 1px solid var(--qp-border);
  border-radius: var(--qp-radius);
  overflow: hidden;
  max-width: 420px;
  margin: 0 auto;
}
.qp-hero__image img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .qp-hero__grid { grid-template-columns: 1.1fr .9fr; padding: 120px 0; }
}

/* Cards grid */
.qp-grid { display: grid; gap: 20px; }
.qp-grid--2 { grid-template-columns: 1fr; }
.qp-grid--3 { grid-template-columns: 1fr; }
.qp-grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .qp-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .qp-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .qp-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .qp-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .qp-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.qp-card {
  background: #fff;
  border: 1px solid var(--qp-border);
  border-radius: var(--qp-radius);
  padding: 24px;
  transition: border-color .2s, box-shadow .2s;
}
.qp-card:hover { border-color: var(--qp-primary); box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.qp-card__icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--qp-primary-soft); color: var(--qp-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; margin-bottom: 16px;
}
.qp-card__title { font-size: 1rem; font-weight: 600; margin-bottom: 6px; }
.qp-card__text { font-size: .9rem; color: var(--qp-muted); margin: 0; }

/* Two-column blocks */
.qp-twocol {
  display: grid; gap: 48px; align-items: start;
}
@media (min-width: 900px) { .qp-twocol { grid-template-columns: 1fr 2fr; } }

/* Timeline (CV) */
.qp-timeline { display: grid; gap: 24px; }
.qp-timeline__item {
  border-left: 2px solid var(--qp-primary);
  padding-left: 20px;
}
.qp-timeline__date { font-size: 12px; color: var(--qp-muted); margin-bottom: 4px; }
.qp-timeline__role { font-weight: 600; }
.qp-timeline__org { font-size: .9rem; color: var(--qp-muted); margin-bottom: 8px; }
.qp-timeline__list { margin: 0; padding-left: 18px; color: var(--qp-muted); font-size: .9rem; }

/* Skill tags */
.qp-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; margin: 0 0 24px; }
.qp-tags li {
  font-size: 12px;
  padding: 6px 12px;
  background: var(--qp-surface);
  border: 1px solid var(--qp-border);
  border-radius: 999px;
}

/* Blog cards */
.qp-blog { padding: 24px; background: #fff; border: 1px solid var(--qp-border); border-radius: var(--qp-radius); }
.qp-blog:hover { border-color: var(--qp-primary); }
.qp-blog__week {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--qp-primary);
  background: var(--qp-primary-soft);
  padding: 4px 10px; border-radius: 4px; margin-bottom: 12px;
}
.qp-blog__title { font-size: 1.05rem; margin-bottom: 8px; }
.qp-blog__text { font-size: .9rem; color: var(--qp-muted); margin: 0; }

/* Portfolio item */
.qp-portfolio-item { background: #fff; border: 1px solid var(--qp-border); border-radius: var(--qp-radius); overflow: hidden; }
.qp-portfolio-item__cover {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, rgba(37,99,235,.15), rgba(37,99,235,.03));
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 800; color: rgba(23,23,23,.15);
  border-bottom: 1px solid var(--qp-border);
}
.qp-portfolio-item__body { padding: 20px; }
.qp-portfolio-item__cat { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--qp-primary); font-weight: 700; margin-bottom: 6px; }

/* Project block */
.qp-project { background: #fff; border: 1px solid var(--qp-border); border-radius: var(--qp-radius); padding: 32px; margin-bottom: 24px; }
.qp-project__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.qp-project__num { font-size: 1.75rem; font-weight: 800; color: rgba(37,99,235,.4); }
.qp-project__grid { display: grid; gap: 24px; }
@media (min-width: 700px) { .qp-project__grid { grid-template-columns: 1fr 1fr; } }
.qp-project__block .qp-eyebrow { margin-bottom: 6px; }
.qp-project__block p { font-size: .9rem; }

/* Testimonials */
.qp-quote { padding: 28px; background: #fff; border: 1px solid var(--qp-border); border-radius: var(--qp-radius); display: flex; flex-direction: column; height: 100%; }
.qp-quote__mark { color: var(--qp-primary); font-size: 28px; line-height: 1; margin-bottom: 12px; }
.qp-quote__text { flex: 1; color: var(--qp-fg); margin-bottom: 16px; }
.qp-quote__name { font-weight: 600; font-size: .9rem; }
.qp-quote__role { font-size: .8rem; color: var(--qp-muted); }

/* Contact */
.qp-contact-grid { display: grid; gap: 48px; }
@media (min-width: 900px) { .qp-contact-grid { grid-template-columns: 1fr 1fr; } }
.qp-contact-list { list-style: none; padding: 0; margin: 0 0 32px; }
.qp-contact-list li { padding: 12px 0; border-bottom: 1px solid var(--qp-border); }
.qp-contact-list .label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--qp-muted); display: block; }
.qp-contact-list .value { font-weight: 500; }

.qp-form label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.qp-form input,
.qp-form textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--qp-border); border-radius: 8px;
  font: inherit; background: #fff; color: var(--qp-fg);
}
.qp-form input:focus,
.qp-form textarea:focus { outline: 2px solid var(--qp-primary); outline-offset: 1px; border-color: var(--qp-primary); }
.qp-form button { margin-top: 18px; width: 100%; }
.qp-form__notice { font-size: 12px; color: var(--qp-muted); text-align: center; margin-top: 10px; }

/* CTA dark block */
.qp-cta-dark {
  background: var(--qp-fg); color: #fff;
  border-radius: var(--qp-radius);
  padding: 48px 24px;
  text-align: center;
}
.qp-cta-dark h2 { color: #fff; }
.qp-cta-dark p { color: rgba(255,255,255,.7); max-width: 540px; margin: 0 auto 20px; }

/* Footer */
.qp-footer { background: var(--qp-surface); border-top: 1px solid var(--qp-border); margin-top: 80px; }
.qp-footer__grid { display: grid; gap: 32px; padding: 56px 0; }
@media (min-width: 700px) { .qp-footer__grid { grid-template-columns: repeat(3, 1fr); } }
.qp-footer h4 { font-size: 14px; margin-bottom: 12px; }
.qp-footer ul { list-style: none; padding: 0; margin: 0; }
.qp-footer li { font-size: 14px; color: var(--qp-muted); padding: 4px 0; }
.qp-footer a { color: var(--qp-muted); }
.qp-footer__bottom {
  border-top: 1px solid var(--qp-border);
  padding: 16px 0;
  font-size: 12px;
  color: var(--qp-muted);
  display: flex; flex-direction: column; gap: 6px;
  text-align: center;
}
@media (min-width: 700px) {
  .qp-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* Scroll reveal helper (optional, used by main.js) */
.qp-reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.qp-reveal.is-visible { opacity: 1; transform: none; }

/* Skip link (a11y) */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--qp-fg); color: #fff; padding: 8px 12px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }