/**
 * Utilities
 * 
 * Helper classes for common patterns.
 *
 * @package Digidaad_Theme
 * @since 1.0.0
 */

/* ============================================
 * DISPLAY
 * ============================================ */

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

@media (min-width: 768px) {
    .md\:block { display: block; }
    .md\:hidden { display: none; }
    .md\:flex { display: flex; }
}

@media (min-width: 1024px) {
    .lg\:block { display: block; }
    .lg\:hidden { display: none; }
    .lg\:flex { display: flex; }
}

/* Mobile only */
@media (max-width: 767px) {
    .mobile\:hidden { display: none; }
}

/* Desktop only */
@media (max-width: 1023px) {
    .desktop\:hidden { display: none; }
}

/* ============================================
 * SPACING - MARGIN
 * ============================================ */

.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* ============================================
 * SPACING - PADDING
 * ============================================ */

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.px-0 { padding-left: 0; padding-right: 0; }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-0 { padding-top: 0; padding-bottom: 0; }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }

/* ============================================
 * WIDTH & HEIGHT
 * ============================================ */

.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-full { max-width: 100%; }

.h-full { height: 100%; }
.h-auto { height: auto; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }

/* ============================================
 * POSITION
 * ============================================ */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* ============================================
 * OVERFLOW
 * ============================================ */

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ============================================
 * BORDERS
 * ============================================ */

.border { border: var(--border-width) solid var(--color-border); }
.border-0 { border: 0; }
.border-t { border-top: var(--border-width) solid var(--color-border); }
.border-b { border-bottom: var(--border-width) solid var(--color-border); }

.rounded { border-radius: var(--radius-default); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.rounded-none { border-radius: 0; }

/* ============================================
 * SHADOWS
 * ============================================ */

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-none { box-shadow: none; }

/* ============================================
 * BACKGROUNDS
 * ============================================ */

.bg-white { background-color: var(--color-white); }
.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-primary { background-color: var(--color-primary); }
.bg-transparent { background-color: transparent; }

/* ============================================
 * OPACITY
 * ============================================ */

.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* ============================================
 * TRANSITIONS
 * ============================================ */

.transition { transition: all var(--transition-base); }
.transition-none { transition: none; }

/* ============================================
 * CURSOR
 * ============================================ */

.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* ============================================
 * POINTER EVENTS
 * ============================================ */

.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }

/* ============================================
 * USER SELECT
 * ============================================ */

.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* ============================================
 * OBJECT FIT
 * ============================================ */

.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }
.object-center { object-position: center; }

/* ============================================
 * ASPECT RATIO
 * ============================================ */

.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-product { aspect-ratio: 4 / 5; }

/* ============================================
 * DIVIDERS
 * ============================================ */

.divider {
    height: 1px;
    background-color: var(--color-border);
    border: none;
    margin: var(--space-6) 0;
}

.divider--lg {
    margin: var(--space-10) 0;
}

/* ============================================
 * VISUALLY HIDDEN
 * ============================================ */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
 * LOADING / SKELETON
 * ============================================ */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-gray-200) 25%,
        var(--color-gray-100) 50%,
        var(--color-gray-200) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ============================================
 * OVERLAY
 * ============================================ */

.overlay {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 0.5);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: 
        opacity var(--transition-base),
        visibility var(--transition-base);
}

.overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* ============================================
 * IMAGE PLACEHOLDER
 * ============================================ */

.img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gray-100);
    color: var(--color-gray-400);
}

/* ============================================
 * SVG ICONS
 * Global styling for sv_icon() helper output
 * ============================================ */

svg.sv-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    max-width: none;  /* Override reset */
    flex-shrink: 0;
    vertical-align: middle;
    fill: none;       /* Ensure outline icons stay outlined */
    stroke: currentColor;
}

.sv-icon--xs { width: 14px; height: 14px; }
.sv-icon--sm { width: 18px; height: 18px; }
.sv-icon--md { width: 24px; height: 24px; }
.sv-icon--lg { width: 32px; height: 32px; }
.sv-icon--xl { width: 48px; height: 48px; }

/* Smooth scroll voor inline anchors */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Container met gutter — shop en categorie misten deze volledig */
.sv-container {
    width: 100%;
    max-width: var(--sv-container-xl, 1280px);
    margin-inline: auto;
    padding-inline: 16px;
}

@media (min-width: 768px) {
    .sv-container { padding-inline: 24px; }
}

/* Zichtbare focus voor toetsenbordgebruik — specificiteit 0, dus overschrijfbaar */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid #1E1C18;
    outline-offset: 2px;
}