/*
Theme Name: Sparsi
Theme URI: https://sparsi.nl
Author: Sparsi
Author URI: https://sparsi.nl
Description: Sparsi-thema: lege full-width shell voor Sparsi-designs. Geen zichtbare theme-header of theme-footer.
Version: 1.2.6
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0+
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sparsi-theme
Tags: minimal, full-width-template, custom-colors, custom-logo, translation-ready
*/

:root {
  --sp-primary: #7c3aed;
  --sp-primary-2: #a78bfa;
  --sp-bg: #ffffff;
  --sp-fg: #0f0f1a;
  --sp-muted: #6b7280;
  --sp-border: #e7e5ee;
  --sp-radius: 14px;
  --sp-shadow: 0 10px 30px -10px rgba(124,58,237,.25);
  --sp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Zero-specificity base reset — elke imported page CSS overrulet dit automatisch. */
:where(html, body) { margin: 0; padding: 0; }
:where(body) { background: var(--sp-bg); color: var(--sp-fg); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
:where(img) { max-width: 100%; height: auto; }
:where(*) { box-sizing: border-box; }

/* Theme-chrome ALLEEN: header, footer, eigen widgets. Imported content blijft onaangeroerd. */
.sp-site-header, .sp-site-header *,
.sp-site-footer, .sp-site-footer *,
.sp-footer-widgets, .sp-footer-widgets *,
.sp-topbar, .sp-topbar *,
.sp-mobile-nav, .sp-mobile-nav *,
.sp-sidebar, .sp-sidebar *,
.sp-contact-form, .sp-contact-form *,
.sp-search, .sp-search * {
  font-family: var(--sp-font);
}

/* Container — alleen gebruikt door theme-chrome en niet-fullwidth pages */
.sp-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Scope link styling to theme-chrome only; designs keep eigen kleuren */
body:not(.sp-fullwidth) a { color: var(--sp-primary); text-decoration: none; }
body:not(.sp-fullwidth) a:hover { text-decoration: underline; }
.sp-site-header a, .sp-site-footer a, .sp-mobile-nav a { color: inherit; }

/* Header */
.sp-site-header { position: sticky; top:0; z-index:50; background: rgba(255,255,255,.85);
  backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--sp-border); }
.sp-header-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 0; }
.sp-brand { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--sp-fg); font-size:18px; }
.sp-brand__mark { width:32px; height:32px; border-radius:9px;
  background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-2));
  color:#fff; display:grid; place-items:center; font-weight:800; box-shadow: var(--sp-shadow); }
.sp-nav ul { list-style:none; display:flex; gap:22px; margin:0; padding:0; }
.sp-nav a { color: var(--sp-fg); font-weight:500; font-size:15px; }
.sp-nav a:hover { color: var(--sp-primary); text-decoration:none; }

/* Footer */
.sp-site-footer { margin-top: 80px; border-top:1px solid var(--sp-border); padding: 32px 0; color: var(--sp-muted); font-size: 14px; }
.sp-footer-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* Content shell — alleen voor NIET-geïmporteerde pages (normale blog/about) */
body:not(.sp-fullwidth) .sp-main { padding: 40px 0; }
body:not(.sp-fullwidth) .sp-entry h1,
body:not(.sp-fullwidth) .sp-entry h2,
body:not(.sp-fullwidth) .sp-entry h3 { color: var(--sp-fg); font-family: var(--sp-font); }
body:not(.sp-fullwidth) .sp-entry h1 { font-size: 40px; line-height:1.15; letter-spacing:-.02em; margin: 0 0 16px; }

/* Sparsi full-width template — theme zet ZICH OPZIJ */
.sp-fullwidth .sp-main { padding: 0; margin: 0; }
.sp-fullwidth .sp-main > .sp-container { max-width: none; padding: 0; margin: 0; }

/* Buttons (alleen via shortcode/widgets — geen globale knop-override) */
.sp-btn { display:inline-flex; align-items:center; gap:8px; padding: 12px 20px; border-radius: 10px;
  background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-2));
  color:#fff; font-weight:600; box-shadow: var(--sp-shadow); font-family: var(--sp-font); }
.sp-btn:hover { text-decoration:none; transform: translateY(-1px); transition: transform .15s; }
.sp-btn--ghost{background:transparent;color:var(--sp-primary);box-shadow:none;border:1px solid var(--sp-primary);}
.sp-btn--ghost:hover{background:var(--sp-primary);color:#fff;}

/* === Chrome extras === */
.sp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
.sp-brand__link{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;}
.sp-topbar{background:linear-gradient(135deg,var(--sp-primary),var(--sp-primary-2));color:#fff;font-size:13px;padding:8px 0;text-align:center;}
.sp-topbar a{color:#fff;text-decoration:underline;}
.sp-topbar-item{display:inline-block;margin:0 12px;}

/* Mobile nav */
.sp-burger{display:none;background:none;border:0;width:36px;height:36px;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;}
.sp-burger span{display:block;height:2px;background:var(--sp-fg);border-radius:2px;}
.sp-mobile-nav{display:none;border-top:1px solid var(--sp-border);background:#fff;}
.sp-mobile-nav ul{list-style:none;margin:0;padding:12px 24px;display:flex;flex-direction:column;gap:8px;}
.sp-mobile-nav a{display:block;padding:10px 0;color:var(--sp-fg);font-weight:500;}
body.sp-menu-open .sp-mobile-nav{display:block;}
@media(max-width:768px){
  .sp-nav{display:none;} .sp-burger{display:flex;}
}

/* Footer widgets */
.sp-footer-widgets{background:#fafafd;border-top:1px solid var(--sp-border);padding:48px 0;}
.sp-footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
@media(max-width:768px){.sp-footer-grid{grid-template-columns:1fr;}}
.sp-widget{margin-bottom:24px;}
.sp-widget__title{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--sp-fg);margin:0 0 12px;}
.sp-widget ul{list-style:none;padding:0;margin:0;}
.sp-widget li{padding:4px 0;}
.sp-footer-inner{padding:24px 0;}
.sp-footer-nav ul{display:flex;gap:16px;list-style:none;padding:0;margin:0;}
.sp-social{display:flex;gap:12px;}
.sp-social a{color:var(--sp-muted);font-size:13px;}
.sp-social a:hover{color:var(--sp-primary);}

/* Sidebar */
.sp-sidebar{padding:24px;background:#fafafd;border-radius:var(--sp-radius);}

/* Contact form shortcode */
.sp-contact-form{display:flex;flex-direction:column;gap:10px;max-width:480px;}
.sp-contact-form input,.sp-contact-form textarea{padding:12px 14px;border:1px solid var(--sp-border);border-radius:10px;font:inherit;}
.sp-contact-form input:focus,.sp-contact-form textarea:focus{outline:2px solid var(--sp-primary);border-color:transparent;}

/* Search form */
.sp-search{display:flex;gap:8px;}
.sp-search input{flex:1;padding:10px 12px;border:1px solid var(--sp-border);border-radius:10px;}