/*
Theme Name: Craft Daddy
Theme URI: https://example.com/craftdaddy
Author: Craft Daddy
Author URI: https://example.com
Description: Een warm, ambachtelijk WordPress-thema voor Craft Daddy — gips gieten, 3D printen en plotteren. Volledig responsive, WooCommerce-klaar en gebouwd rond het merk in zwart, goud en wit.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: craftdaddy
Tags: e-commerce, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =============================================================
   1. CSS VARIABLES — Craft Daddy brand palette
   ============================================================= */
:root{
	--cd-black:        #0d0d0d;
	--cd-black-soft:    #14161a;
	--cd-gold:          #b17c12;
	--cd-gold-light:    #d9a53a;
	--cd-gold-pale:     #f4e6c6;
	--cd-white:         #ffffff;
	--cd-cream:         #faf8f3;
	--cd-grey:          #6b6b6b;
	--cd-grey-light:    #e7e4dd;

	--cd-font-heading: 'Poppins', 'Segoe UI', sans-serif;
	--cd-font-body: 'Inter', 'Segoe UI', sans-serif;

	--cd-radius: 10px;
	--cd-shadow: 0 6px 24px rgba(13,13,13,0.08);
	--cd-shadow-hover: 0 10px 30px rgba(177,124,18,0.25);
	--cd-container: 1200px;
}

/* =============================================================
   2. RESET & BASE
   ============================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	background:var(--cd-white);
	color:var(--cd-black);
	font-family:var(--cd-font-body);
	font-size:16px;
	line-height:1.7;
	-webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--cd-gold); text-decoration:none; transition:color .2s ease; }
a:hover{ color:var(--cd-black); }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{
	font-family:var(--cd-font-heading);
	color:var(--cd-black);
	line-height:1.25;
	font-weight:700;
	margin:0 0 .6em;
}
h1{ font-size:clamp(2rem, 4vw, 3rem); }
h2{ font-size:clamp(1.6rem, 3vw, 2.25rem); }
h3{ font-size:1.4rem; }
p{ margin:0 0 1.2em; }
.screen-reader-text{
	position:absolute !important;
	clip:rect(1px,1px,1px,1px);
	width:1px; height:1px; overflow:hidden;
}
.screen-reader-text:focus{
	position:fixed; top:10px; left:10px;
	width:auto; height:auto; padding:12px 20px;
	background:var(--cd-black); color:var(--cd-white);
	z-index:100000; clip:auto;
}

.container{
	width:100%;
	max-width:var(--cd-container);
	margin:0 auto;
	padding:0 24px;
}

/* =============================================================
   3. BUTTONS
   ============================================================= */
.btn, button, input[type="submit"], input[type="button"], .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit{
	display:inline-block;
	font-family:var(--cd-font-heading);
	font-weight:600;
	font-size:.95rem;
	letter-spacing:.02em;
	padding:14px 30px;
	border-radius:999px;
	border:2px solid var(--cd-black);
	background:var(--cd-black);
	color:var(--cd-white) !important;
	cursor:pointer;
	transition:all .25s ease;
}
.btn:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover{
	background:var(--cd-gold);
	border-color:var(--cd-gold);
	color:var(--cd-black) !important;
	transform:translateY(-2px);
	box-shadow:var(--cd-shadow-hover);
}
.btn-outline{
	background:transparent;
	color:var(--cd-black) !important;
}
.btn-gold{
	background:var(--cd-gold);
	border-color:var(--cd-gold);
	color:var(--cd-black) !important;
}

/* =============================================================
   4. HEADER
   ============================================================= */
.site-header{
	background:var(--cd-white);
	border-bottom:1px solid var(--cd-grey-light);
	position:sticky;
	top:0;
	z-index:999;
}
.site-header-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:14px 24px;
	max-width:var(--cd-container);
	margin:0 auto;
	gap:24px;
}
.site-branding{ display:flex; align-items:center; gap:12px; }
.site-branding img.custom-logo{ max-height:64px; width:auto; }
.site-branding .site-title{
	font-family:var(--cd-font-heading);
	font-size:1.5rem;
	font-weight:800;
	margin:0;
}
.site-branding .site-title a{ color:var(--cd-black); }
.site-branding .site-title a span{ color:var(--cd-gold); }
.site-branding .site-description{
	font-size:.8rem;
	color:var(--cd-grey);
	margin:0;
	letter-spacing:.04em;
	text-transform:uppercase;
}

.main-navigation{ display:flex; align-items:center; }
.main-navigation ul{ display:flex; align-items:center; gap:6px; }
.main-navigation ul ul{
	position:absolute;
	background:var(--cd-white);
	box-shadow:var(--cd-shadow);
	border-radius:var(--cd-radius);
	padding:8px;
	min-width:200px;
	flex-direction:column;
	align-items:stretch;
	opacity:0;
	visibility:hidden;
	transform:translateY(8px);
	transition:all .2s ease;
}
.main-navigation li{ position:relative; }
.main-navigation li:hover > ul{ opacity:1; visibility:visible; transform:translateY(0); }
.main-navigation a{
	display:block;
	padding:10px 16px;
	color:var(--cd-black);
	font-weight:600;
	font-size:.95rem;
	border-radius:999px;
	transition:all .2s ease;
}
.main-navigation ul ul a{ border-radius:6px; padding:8px 12px; }
.main-navigation a:hover, .main-navigation .current-menu-item > a{
	background:var(--cd-black);
	color:var(--cd-white);
}

.header-actions{ display:flex; align-items:center; gap:16px; }
.header-cart{ position:relative; display:flex; align-items:center; color:var(--cd-black); }
.header-cart .count{
	position:absolute; top:-8px; right:-10px;
	background:var(--cd-gold);
	color:var(--cd-black);
	font-size:.7rem; font-weight:700;
	width:18px; height:18px;
	border-radius:50%;
	display:flex; align-items:center; justify-content:center;
}
.menu-toggle{
	display:none;
	background:none; border:none; cursor:pointer;
	padding:8px;
}
.menu-toggle span{
	display:block; width:26px; height:3px;
	background:var(--cd-black); margin:5px 0;
	border-radius:2px;
}

/* =============================================================
   5. HERO
   ============================================================= */
.hero{
	background:linear-gradient(135deg, var(--cd-black) 0%, var(--cd-black-soft) 100%);
	color:var(--cd-white);
	padding:90px 24px;
	position:relative;
	overflow:hidden;
}
.hero::after{
	content:"";
	position:absolute;
	right:-120px; top:-120px;
	width:400px; height:400px;
	border-radius:50%;
	border:2px solid rgba(177,124,18,.35);
}
.hero-inner{
	max-width:var(--cd-container);
	margin:0 auto;
	display:grid;
	grid-template-columns:1.1fr .9fr;
	gap:48px;
	align-items:center;
	position:relative;
	z-index:1;
}
.hero h1{ color:var(--cd-white); margin-bottom:.4em; }
.hero h1 span{ color:var(--cd-gold); }
.hero p{ color:#d8d8d8; font-size:1.1rem; max-width:46ch; }
.hero-actions{ display:flex; gap:16px; margin-top:24px; flex-wrap:wrap; }
.hero-image img{ border-radius:var(--cd-radius); box-shadow:0 20px 60px rgba(0,0,0,.4); }

/* =============================================================
   6. SECTIONS / CARDS
   ============================================================= */
.section{ padding:80px 24px; }
.section-alt{ background:var(--cd-cream); }
.section-header{ text-align:center; max-width:640px; margin:0 auto 48px; }
.section-header .eyebrow{
	color:var(--cd-gold);
	text-transform:uppercase;
	letter-spacing:.12em;
	font-weight:700;
	font-size:.8rem;
	margin-bottom:.5em;
	display:block;
}

.grid{ display:grid; gap:28px; }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }

.card{
	background:var(--cd-white);
	border:1px solid var(--cd-grey-light);
	border-radius:var(--cd-radius);
	padding:32px 26px;
	transition:all .25s ease;
}
.card:hover{
	transform:translateY(-6px);
	box-shadow:var(--cd-shadow-hover);
	border-color:var(--cd-gold);
}
.card .icon{
	width:56px; height:56px;
	border-radius:50%;
	background:var(--cd-gold-pale);
	color:var(--cd-gold);
	display:flex; align-items:center; justify-content:center;
	font-size:1.5rem;
	margin-bottom:18px;
}

/* =============================================================
   7. CONTENT / ARTICLES
   ============================================================= */
.content-area{ padding:64px 24px; }
.entry-header{ margin-bottom:24px; }
.entry-meta{
	color:var(--cd-grey);
	font-size:.85rem;
	text-transform:uppercase;
	letter-spacing:.06em;
}
.entry-meta a{ color:var(--cd-grey); }
.entry-thumbnail{ margin-bottom:28px; border-radius:var(--cd-radius); overflow:hidden; }
.entry-content a{ text-decoration:underline; }
.entry-content blockquote{
	border-left:4px solid var(--cd-gold);
	margin:24px 0;
	padding:8px 24px;
	background:var(--cd-cream);
	font-style:italic;
}
.entry-footer{
	margin-top:32px; padding-top:20px;
	border-top:1px solid var(--cd-grey-light);
	font-size:.9rem; color:var(--cd-grey);
}
.entry-tags a{
	display:inline-block;
	background:var(--cd-cream);
	color:var(--cd-black);
	padding:4px 12px;
	border-radius:999px;
	font-size:.8rem;
	margin:4px 4px 0 0;
}

.posts-list{ display:grid; gap:40px; max-width:760px; margin:0 auto; }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:48px; }
.pagination a, .pagination span{
	display:flex; align-items:center; justify-content:center;
	width:42px; height:42px;
	border-radius:50%;
	background:var(--cd-cream);
	color:var(--cd-black);
	font-weight:600;
}
.pagination .current{ background:var(--cd-black); color:var(--cd-white); }

/* =============================================================
   8. SIDEBAR / WIDGETS
   ============================================================= */
.widget{ margin-bottom:40px; }
.widget-title{
	font-size:1.05rem;
	text-transform:uppercase;
	letter-spacing:.06em;
	border-bottom:2px solid var(--cd-gold);
	padding-bottom:10px;
	margin-bottom:16px;
}
.widget ul li{
	padding:8px 0;
	border-bottom:1px solid var(--cd-grey-light);
}

/* =============================================================
   9. FORMS
   ============================================================= */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="search"], input[type="password"], textarea, select{
	width:100%;
	padding:12px 16px;
	border:1px solid var(--cd-grey-light);
	border-radius:8px;
	font-family:var(--cd-font-body);
	font-size:1rem;
	background:var(--cd-white);
	color:var(--cd-black);
}
input:focus, textarea:focus, select:focus{
	outline:none;
	border-color:var(--cd-gold);
	box-shadow:0 0 0 3px rgba(177,124,18,.15);
}
.search-form{ display:flex; gap:8px; }

/* =============================================================
   10. FOOTER
   ============================================================= */
.site-footer{
	background:var(--cd-black);
	color:#cfcfcf;
	padding:64px 24px 24px;
}
.footer-grid{
	max-width:var(--cd-container);
	margin:0 auto;
	display:grid;
	grid-template-columns:1.4fr 1fr 1fr 1fr;
	gap:40px;
	padding-bottom:40px;
	border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand img{ max-height:56px; margin-bottom:14px; }
.footer-brand p{ color:#a9a9a9; }
.footer-col h4{
	color:var(--cd-white);
	text-transform:uppercase;
	font-size:.85rem;
	letter-spacing:.08em;
	margin-bottom:18px;
}
.footer-col ul li{ margin-bottom:10px; }
.footer-col a{ color:#cfcfcf; }
.footer-col a:hover{ color:var(--cd-gold); }
.footer-social{ display:flex; gap:12px; margin-top:16px; }
.footer-social a{
	width:38px; height:38px;
	border-radius:50%;
	border:1px solid rgba(255,255,255,.2);
	display:flex; align-items:center; justify-content:center;
	color:var(--cd-white);
	font-size:1rem;
	transition:all .2s ease;
}
.footer-social a:hover{ background:var(--cd-gold); border-color:var(--cd-gold); color:var(--cd-black); }
.footer-social a[aria-label="Etsy"]:hover{ background:#F1641E; border-color:#F1641E; color:#fff; }
.site-info{
	max-width:var(--cd-container);
	margin:24px auto 0;
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:12px;
	font-size:.85rem;
	color:#8c8c8c;
}
.site-info a{ color:#8c8c8c; }

/* =============================================================
   11. WOOCOMMERCE OVERRIDES
   ============================================================= */
.woocommerce ul.products li.product{ text-align:left; }
.woocommerce ul.products li.product .price{ color:var(--cd-gold); font-weight:700; }
.woocommerce span.onsale{
	background:var(--cd-gold);
	color:var(--cd-black);
	font-weight:700;
	border-radius:999px;
}
.woocommerce div.product p.price, .woocommerce div.product span.price{ color:var(--cd-gold); }
.woocommerce nav.woocommerce-pagination ul{ border:none; }
.woocommerce nav.woocommerce-pagination ul li{ border:none; }
.woocommerce .star-rating{ color:var(--cd-gold); }
.woocommerce-message, .woocommerce-info{ border-top-color:var(--cd-gold); }
.woocommerce-message::before, .woocommerce-info::before{ color:var(--cd-gold); }

/* Craft Daddy product badges (handmade / low stock / sold out) */
.craftdaddy-badges{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	margin-bottom:10px;
}
.cd-badge{
	display:inline-block;
	font-family:var(--cd-font-heading);
	font-size:.7rem;
	font-weight:700;
	letter-spacing:.03em;
	text-transform:uppercase;
	padding:5px 12px;
	border-radius:999px;
	line-height:1.4;
}
.cd-badge-handmade{
	background:var(--cd-black);
	color:var(--cd-white);
}
.cd-badge-lowstock{
	background:var(--cd-gold-pale);
	color:var(--cd-gold);
	border:1px solid var(--cd-gold);
}
.cd-badge-soldout{
	background:var(--cd-grey-light);
	color:var(--cd-grey);
}
.woocommerce ul.products li.product .craftdaddy-badges{
	position:relative;
}
.woocommerce div.product .craftdaddy-badges{
	margin-bottom:16px;
}

/* =============================================================
   12. UTILITIES / RESPONSIVE
   ============================================================= */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.alignwide{ max-width:1000px; margin-left:auto; margin-right:auto; }
.alignfull{ width:100vw; margin-left:calc(50% - 50vw); }

@media (max-width: 900px){
	.hero-inner{ grid-template-columns:1fr; text-align:center; }
	.hero-actions{ justify-content:center; }
	.grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); }
	.footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 680px){
	.menu-toggle{ display:block; }
	.main-navigation{
		display:none;
		position:absolute;
		top:100%; left:0; right:0;
		background:var(--cd-white);
		box-shadow:var(--cd-shadow);
		padding:12px;
	}
	.main-navigation.is-open{ display:block; }
	.main-navigation ul{ flex-direction:column; align-items:stretch; }
	.main-navigation ul ul{ position:static; box-shadow:none; opacity:1; visibility:visible; transform:none; display:none; }
	.main-navigation li.menu-open > ul{ display:block; }
	.grid-3, .grid-4{ grid-template-columns:1fr; }
	.footer-grid{ grid-template-columns:1fr; }
	.hero{ padding:60px 20px; }
	.section{ padding:56px 20px; }
}