/* ============================================================
   DRUKPRO — GLOBAL STYLES
   ============================================================ */

/* ------------------------------------------------------------
   BASE RESET
   ------------------------------------------------------------ */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-primary);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-normal);
	color: var(--color-text-primary);
	background-color: var(--color-bg-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-accent-hover);
}

/* ------------------------------------------------------------
   TYPOGRAPHY — HEADING SCALE (Design System)
   ------------------------------------------------------------ */
h1 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-style: normal;
	font-size: 40px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: 0;
	color: #1d1d1a;
	margin: 0 0 var(--space-4);
}

h2 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-style: normal;
	font-size: 36px;
	font-weight: 700;
	line-height: 44px;
	letter-spacing: 0;
	color: #1d1d1a;
	margin: 0 0 var(--space-4);
}

h3 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-style: normal;
	font-size: 32px;
	font-weight: 700;
	line-height: 40px;
	letter-spacing: 0;
	color: #1d1d1a;
	margin: 0 0 var(--space-4);
}

h4 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-style: normal;
	font-size: 28px;
	font-weight: 700;
	line-height: 36px;
	letter-spacing: 0;
	color: #1d1d1a;
	margin: 0 0 var(--space-4);
}

h5 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-style: normal;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	letter-spacing: 0;
	color: #1d1d1a;
	margin: 0 0 var(--space-4);
}

h6 {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-style: normal;
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: 0;
	color: #1d1d1a;
	margin: 0 0 var(--space-4);
}

p {
	margin: 0 0 var(--space-4);
	line-height: var(--line-height-relaxed);
}

p:last-child { margin-bottom: 0; }

strong, b { font-weight: var(--font-weight-semibold); }

small { font-size: var(--font-size-sm); }

/* ------------------------------------------------------------
   LAYOUT — CONTAINER
   ------------------------------------------------------------ */
.container,
.site-header .col-full,
.site-main .col-full,
.site-footer .col-full {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-gutter);
	padding-right: var(--container-gutter);
	width: 100%;
}

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */
.btn,
button,
input[type="submit"],
input[type="button"],
.button,
.woocommerce a.button,
.woocommerce button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-family: var(--font-primary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	padding: 12px 24px;
	border-radius: var(--radius-md);
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
	text-decoration: none;
	white-space: nowrap;
	-webkit-appearance: none;
}

/* Primary */
.btn--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
#place_order {
	background: var(--color-accent);
	color: var(--color-accent-text) !important;
	border-color: var(--color-accent);
}

.btn--primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: var(--color-accent-text) !important;
}

/* Secondary */
.btn--secondary,
.woocommerce a.button,
.woocommerce button.button {
	background: var(--color-bg-surface);
	color: var(--color-text-primary) !important;
	border-color: var(--color-border-strong);
}

.btn--secondary:hover,
.woocommerce a.button:hover {
	background: var(--color-bg-subtle);
	border-color: var(--color-text-muted);
	color: var(--color-text-primary) !important;
}

/* Ghost */
.btn--ghost {
	background: transparent;
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.btn--ghost:hover {
	background: var(--color-accent-light);
}

/* Sizes */
.btn--sm { padding: 8px 16px; font-size: var(--font-size-xs); }
.btn--lg { padding: 16px 32px; font-size: var(--font-size-base); }
.btn--full { width: 100%; }

/* ------------------------------------------------------------
   FORMS
   ------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea,
select {
	font-family: var(--font-primary);
	font-size: var(--font-size-sm);
	color: var(--color-text-primary);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 10px 14px;
	width: 100%;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
	-webkit-appearance: none;
	appearance: none;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(7, 172, 43, 0.12);
}

label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-secondary);
	display: block;
	margin-bottom: var(--space-2);
}

/* ------------------------------------------------------------
   CARDS
   ------------------------------------------------------------ */
.card {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.card--padded {
	padding: var(--space-6);
}

/* ------------------------------------------------------------
   BADGES
   ------------------------------------------------------------ */
.badge {
	display: inline-flex;
	align-items: center;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
	padding: 3px 10px;
	border-radius: var(--radius-full);
	line-height: 1.4;
}

.badge--accent   { background: var(--color-accent-light);   color: var(--color-accent); }
.badge--success  { background: var(--color-success-light);  color: var(--color-success); }
.badge--warning  { background: var(--color-warning-light);  color: var(--color-warning); }
.badge--error    { background: var(--color-error-light);    color: var(--color-error); }
.badge--neutral  { background: var(--color-bg-subtle);      color: var(--color-text-secondary); }

/* ------------------------------------------------------------
   BREADCRUMB
   ------------------------------------------------------------ */
.breadcrumb {
	padding: var(--space-4) 0;
}

.breadcrumb ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
}

.breadcrumb li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-size-sm);
	color: var(--color-text-muted);
}

.breadcrumb li a {
	color: var(--color-text-secondary);
}

.breadcrumb li a:hover {
	color: var(--color-accent);
}

.breadcrumb li:last-child {
	color: var(--color-text-primary);
	font-weight: var(--font-weight-medium);
}

.breadcrumb__sep {
	color: var(--color-border-strong);
	font-size: var(--font-size-sm);
}

/* ------------------------------------------------------------
   SECTION UTILITIES
   ------------------------------------------------------------ */
.section {
	padding: var(--space-16) 0;
}

.section--sm {
	padding: var(--space-10) 0;
}

.section--lg {
	padding: var(--space-20) 0;
}

.section__header {
	margin-bottom: var(--space-10);
}

.section__label {
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: var(--space-2);
}

.section__title {
	font-size: var(--font-size-3xl);
	margin-bottom: var(--space-4);
}

.section__subtitle {
	font-size: var(--font-size-md);
	color: var(--color-text-secondary);
	max-width: 600px;
}

/* ------------------------------------------------------------
   DIVIDER
   ------------------------------------------------------------ */
.divider {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: var(--space-8) 0;
}

/* ------------------------------------------------------------
   LOADING SPINNER
   ------------------------------------------------------------ */
.spinner {
	width: 20px;
	height: 20px;
	border: 2px solid var(--color-border);
	border-top-color: var(--color-accent);
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

/* ------------------------------------------------------------
   STOREFRONT OVERRIDES — GLOBAL
   ------------------------------------------------------------ */
body.storefront-full-width-content .entry-content:before,
body.storefront-full-width-content .entry-content:after { display: none; }

#main {
	padding-top: 0;
}

.site-header {
	background: var(--color-bg-surface);
	border-bottom: 1px solid var(--color-border);
	padding: 0;
}

/* ============================================================
   STOREFRONT HANDHELD FOOTER BAR — verbergen
   ============================================================ */
.storefront-handheld-footer-bar {
	display: none !important;
}

/* Verwijder Storefront ruimte boven content */
.site-main,
#main,
.storefront-full-width-content #main,
.woocommerce #main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* ============================================================
   PAGE HEADER & BREADCRUMBS — centrale definitie
   Geldt voor zowel product- als categoriepagina
   ============================================================ */

/* Header wrapper */
.dp-product-page__header,
.archive-page__header {
    padding: 24px 0 16px;
    width: 100%;
}

/* Breadcrumb */
.dp-breadcrumbs {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    margin-bottom: 8px;
    line-height: 1.4;
}

/* Breadcrumb links (andere paginas) = zwart */
.dp-breadcrumbs a {
    color: #1d1d1a;
    text-decoration: none;
}

.dp-breadcrumbs a:hover {
    color: #07AC2B;
}

/* Page titel (H1) */
.dp-product-page__title,
.archive-page__title,
.woocommerce-products-header__title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 36px !important;
    line-height: 44px !important;
    font-weight: 700 !important;
    color: #1d1d1a;
    margin: 0;
}

/* ── Storefront focus/outline reset ── */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Eigen focus stijl — subtiele blauwe ring voor accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #176FE4 !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* ── Mobiele padding ── */
@media (max-width: 768px) {
    .col-full {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .dp-product-page__inner,
    .dp-archive__inner {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}