/**
 * O6 Toolkit — Starter Kit CSS
 *
 * Complements OxyMade. Does NOT override OxyMade variables.
 * Adds: transition tokens, shadow scale, z-index scale,
 *       lightweight reset, and utility classes OxyMade lacks.
 *
 * Priority: Load BEFORE OxyMade (wp_enqueue at priority 3).
 *           OxyMade's values win on any conflict.
 */

/* ═══════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES (extend OxyMade's token system)
   ═══════════════════════════════════════════════════════════════ */
:root {

    /* ── Transitions ─────────────────────────────────────────── */
    --o6tk-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --o6tk-ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --o6tk-ease-out:     cubic-bezier(0, 0, 0.2, 1);
    --o6tk-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --o6tk-dur-fast:     150ms;
    --o6tk-dur-base:     250ms;
    --o6tk-dur-slow:     400ms;
    --o6tk-dur-slower:   600ms;

    /* ── Shadows ─────────────────────────────────────────────── */
    --o6tk-shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --o6tk-shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --o6tk-shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --o6tk-shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --o6tk-shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --o6tk-shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --o6tk-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* ── Z-Index scale ───────────────────────────────────────── */
    --o6tk-z-dropdown:  1000;
    --o6tk-z-sticky:    1020;
    --o6tk-z-fixed:     1030;
    --o6tk-z-overlay:   1040;
    --o6tk-z-modal:     1050;
    --o6tk-z-popover:   1060;
    --o6tk-z-toast:     1070;
    --o6tk-z-max:       99999;

    /* ── Container (if OxyMade doesn't set these) ────────────── */
    --o6tk-container-sm:  640px;
    --o6tk-container-md:  768px;
    --o6tk-container-lg:  1024px;
    --o6tk-container-xl:  1280px;
    --o6tk-container-2xl: 1440px;

    /* ── Overlay Menu (customisable) ─────────────────────────── */
    --o6tk-overlay-bg:         rgba(0, 0, 0, 0.95);
    --o6tk-overlay-link:       #ffffff;
    --o6tk-overlay-link-hover: #cccccc;
    --o6tk-overlay-close:      #ffffff;
}


/* ═══════════════════════════════════════════════════════════════
   2. LIGHTWEIGHT RESET (Oxygen 6 compatible)
   ═══════════════════════════════════════════════════════════════ */

/* Box-sizing — Oxygen 6 should handle this, but just in case. */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Smooth scroll (respects prefers-reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Remove default margin on common elements. */
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd {
    margin: 0;
}

/* Sensible media defaults. */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Inherit fonts on form elements. */
input,
button,
textarea,
select {
    font: inherit;
}

/* Remove list style where role="list" is set (Oxygen nav). */
ul[role="list"],
ol[role="list"] {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Anchor reset. */
a {
    text-decoration-skip-ink: auto;
}


/* ═══════════════════════════════════════════════════════════════
   3. UTILITY CLASSES (additions OxyMade doesn't include)
   ═══════════════════════════════════════════════════════════════ */

/* ── Screen Reader Only ──────────────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ── Aspect Ratios ───────────────────────────────────────────── */
.aspect-square  { aspect-ratio: 1 / 1; }
.aspect-video   { aspect-ratio: 16 / 9; }
.aspect-photo   { aspect-ratio: 4 / 3; }
.aspect-portrait { aspect-ratio: 3 / 4; }
.aspect-wide    { aspect-ratio: 21 / 9; }

/* ── Truncation ──────────────────────────────────────────────── */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Pointer / Selection ─────────────────────────────────────── */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.select-none         { user-select: none; }
.select-all          { user-select: all; }

/* ── Transition helpers (pair with --o6tk-dur-* variables) ──── */
.transition-all      { transition: all var(--o6tk-dur-base) var(--o6tk-ease-default); }
.transition-colors   { transition: color var(--o6tk-dur-base) var(--o6tk-ease-default),
                                   background-color var(--o6tk-dur-base) var(--o6tk-ease-default),
                                   border-color var(--o6tk-dur-base) var(--o6tk-ease-default); }
.transition-opacity  { transition: opacity var(--o6tk-dur-base) var(--o6tk-ease-default); }
.transition-transform { transition: transform var(--o6tk-dur-base) var(--o6tk-ease-default); }
.transition-shadow   { transition: box-shadow var(--o6tk-dur-base) var(--o6tk-ease-default); }

/* ── Shadow utilities ────────────────────────────────────────── */
.shadow-xs    { box-shadow: var(--o6tk-shadow-xs); }
.shadow-sm    { box-shadow: var(--o6tk-shadow-sm); }
.shadow-md    { box-shadow: var(--o6tk-shadow-md); }
.shadow-lg    { box-shadow: var(--o6tk-shadow-lg); }
.shadow-xl    { box-shadow: var(--o6tk-shadow-xl); }
.shadow-2xl   { box-shadow: var(--o6tk-shadow-2xl); }
.shadow-inner { box-shadow: var(--o6tk-shadow-inner); }
.shadow-none  { box-shadow: none; }

/* ── Hover shadow lift ───────────────────────────────────────── */
.hover-lift {
    transition: transform var(--o6tk-dur-base) var(--o6tk-ease-default),
                box-shadow var(--o6tk-dur-base) var(--o6tk-ease-default);
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--o6tk-shadow-lg);
}

/* ── Reduced motion: disable ALL animations ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        clip-path: none !important;
        visibility: visible !important;
    }
}