@import "tailwindcss";
@import "./fonts.css";
@import "./dropdown.css";

/* Note for anyone theming the checkout module (resources/css/checkout.css,
   .bbk-* classes): it's deliberately plain, unlayered CSS, not inside any
   @layer — so override it with plain rules here too, not from inside
   @layer components/utilities, which would lose to it. See checkout.css's
   file-level comment for why. */
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════ */
@theme {
    /*--font-sans: "Nunito", ui-sans-serif, system-ui, sans-serif;*/
    --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
    /*--font-display: "DM Sans", ui-sans-serif, system-ui, sans-serif;*/
    --font-display: "Manrope", ui-sans-serif, system-ui, sans-serif;

    --color-brand: #18c28a;
    --color-brand-light: #69cba7;

    --text-h1: 60px;
    --text-h2: 48px;
    --text-h3: 36px;
    --text-h4: 26px;
}

/* ═══════════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════════ */
@layer base {
    body {
        background-color: theme(colors.neutral.200);
        font-family: var(--font-sans);
        font-size: 18px;
        line-height: 1.389;
        font-weight: 400;
        color: #000;
        -webkit-font-smoothing: antialiased;
    }

    /* Browsers don't give <button> a pointer cursor by default (unlike <a>),
       and Tailwind's Preflight stopped forcing it a few versions back — so
       every button sitewide needs it set explicitly, once, here. */
    button:not(:disabled) {
        cursor: pointer;
    }

    /* <turbo-frame> is a custom element — inline by default. Give it a box so
       the grid it wraps on the category page lays out normally. */
    turbo-frame {
        display: block;
    }
}

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

/* ═══════════════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════════════ */
@layer components {
    /* ── Nav link — only the span underline-slide animation ──────── */
    .nav-link span {
        display: inline-block;
        background-image: linear-gradient(currentColor, currentColor);
        background-position: 0 100%;
        background-repeat: no-repeat;
        background-size: 0 5px;
        transition: background-size 0.35s cubic-bezier(0.61, 1, 0.88, 1);
        padding-bottom: 3px;
    }

    .nav-link:hover span,
    .nav-link.is-active span {
        background-size: 100% 5px;
    }

    /* ── Nav dropdown ─────────────────────────────────────────────── */
    .nav-dropdown {
        position: absolute;
        top: 100%;
        left: -24px;
        min-width: 220px;
        background-color: theme(colors.neutral.200);
        border: 1px solid #000;
        border-top: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-4px);
        transition:
            opacity 0.2s ease,
            transform 0.2s ease,
            visibility 0.2s ease;
    }

    .group:hover .nav-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
    }

    .nav-dropdown a {
        display: block;
        padding: 10px 20px;
        font-family: var(--font-sans);
        font-size: 18px;
        font-weight: 400;
        color: #000;
        text-decoration: none;
        transition: background-color 0.15s ease;
    }

    .nav-dropdown a:hover {
        background-color: #000;
        color: theme(colors.neutral.200);
    }

    /* ── Hero star — same burst shape/spin as back-to-top, always on ─ */
    .rotating-star {
        transform-origin: center;
        animation: spin 7s infinite linear;
    }

    /* ── Back to top ──────────────────────────────────────────────── */
    .back-to-top {
        opacity: 0;
        visibility: hidden;
        transition:
            opacity 0.15s ease,
            visibility 0s 0.15s;
    }

    .back-to-top.is-visible {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;
    }

    .back-to-top-shape path {
        fill: theme(colors.brand-light);
        transform-origin: center;
        animation: spin 7s infinite linear;
        animation-play-state: paused;
    }

    .back-to-top a:hover .back-to-top-shape path {
        animation-play-state: running;
    }

    .back-to-top-arrow path {
        transition: transform 0.5s cubic-bezier(0.39, 0.1, 0, 0.98);
    }

    .back-to-top a:hover .back-to-top-arrow path {
        transform: translateY(-5px);
    }

    /* ── Product lightbox (popover) ──────────────────────────────── */
    .product-lightbox {
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        border: none;
        padding: 0;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: center;

        opacity: 0;
        pointer-events: none;
        transition:
            opacity 0.3s ease,
            display 0.3s allow-discrete,
            overlay 0.3s allow-discrete;
    }

    .product-lightbox:popover-open {
        opacity: 1;
        pointer-events: auto;
    }

    @starting-style {
        .product-lightbox:popover-open {
            opacity: 0;
        }
    }

    .product-lightbox::backdrop {
        background-color: rgba(0, 0, 0, 0);
        transition:
            background-color 0.3s ease,
            display 0.3s allow-discrete,
            overlay 0.3s allow-discrete;
    }

    .product-lightbox:popover-open::backdrop {
        background-color: rgba(0, 0, 0, 0.8);
    }

    @starting-style {
        .product-lightbox:popover-open::backdrop {
            background-color: rgba(0, 0, 0, 0);
        }
    }

    /* ── Search overlay (popover) — opacity fade over the header ──── */
    #search-overlay {
        /* Fallback height until the `nav-search` controller measures the real
           header on open; the header has no fixed height below `lg`. */
        --search-overlay-h: 6.5rem;
        opacity: 0;
        transition:
            opacity 0.2s ease,
            display 0.2s allow-discrete,
            overlay 0.2s allow-discrete;
    }

    #search-overlay:popover-open {
        opacity: 1;
    }

    @starting-style {
        #search-overlay:popover-open {
            opacity: 0;
        }
    }

    /* ── Shared underline-slide animation ────────────────────────── */
    .underline-slide {
        background-image: linear-gradient(currentColor, currentColor);
        background-position: 0 100%;
        background-repeat: no-repeat;
        background-size: 0 var(--slide-h, 2px);
        transition: background-size 0.35s cubic-bezier(0.61, 1, 0.88, 1);
        padding-bottom: 3px;
    }

    .underline-slide:hover,
    .underline-slide.is-active {
        background-size: 100% var(--slide-h, 2px);
    }

    /* ── Lightbox arrows + close ─────────────────────────────────── */
    .lightbox-arrow svg {
        transition: transform 0.25s cubic-bezier(0.39, 0.1, 0, 0.98);
    }

    .lightbox-arrow[aria-label="Previous image"]:hover svg {
        transform: translateX(-6px);
    }

    .lightbox-arrow[aria-label="Next image"]:hover svg {
        transform: translateX(6px);
    }

    .lightbox-close svg {
        transition: stroke 0.2s ease;
    }

    .lightbox-close:hover svg {
        stroke: theme(colors.brand);
    }

    /* ── Gallery arrows ──────────────────────────────────────────── */
    .gallery-arrow svg {
        transition: transform 0.25s cubic-bezier(0.39, 0.1, 0, 0.98);
    }

    .gallery-arrow:first-child:hover svg {
        transform: translateY(-4px);
    }

    .gallery-arrow:last-child:hover svg {
        transform: translateY(4px);
    }

    /* ── Checkbox ────────────────────────────────────────────────── */
    .checkbox:checked::after {
        content: "";
        position: absolute;
        inset: 2px;
        background: theme(colors.brand);
    }

    /* ── Color swatches ───────────────────────────────────────────── */
    .color-swatch {
        width: 32px;
        height: 32px;
        border: 1px solid #000;
        cursor: pointer;
        flex-shrink: 0;
        transition: border-width 0.1s ease;
    }

    .color-swatch.is-selected {
        border-width: 3px;
    }

    /* ── Button — ::before is the button bg, ::after is the shadow ── */
    .btn-primary::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: theme(colors.neutral.200);
        z-index: 0;
    }

    .btn-primary::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: #000;
        z-index: -1;
        transform: translate(10px, 10px);
        transition: transform 0.35s cubic-bezier(0.2, 0.78, 0.12, 0.86);
    }

    .btn-primary:hover::after {
        transform: translate(0, 0);
    }

    .text-dance {
        display: inline-block;
        font-weight: inherit;
        font-style: normal;
    }

    .text-dance::before {
        content: attr(data-text);
        display: block;
        height: 0;
        overflow: hidden;
        visibility: hidden;
        font-weight: 800;
        font-style: italic;
    }

    .is-visible .text-dance {
        animation: text-dance 0.8s ease 3 forwards;
        animation-delay: var(--dance-delay, 0s);
    }

    /* Typography for markdown rendered from Stoic legal-page bodies (h1.h6, p, lists,
       links, tables) — a plain set of descendant selectors, not expressible as
       utilities on the wrapper alone since the markup itself is generated by Str::markdown(). */
    .legal-content {
        @apply text-neutral-700;
    }

    .legal-content > * + * {
        @apply mt-6;
    }

    .legal-content h2 {
        @apply font-display text-2xl font-bold text-black;
    }

    .legal-content h3 {
        @apply font-display text-xl font-bold text-black;
    }

    .legal-content ul,
    .legal-content ol {
        @apply ml-6 space-y-2;
    }

    .legal-content ul {
        @apply list-disc;
    }

    .legal-content ol {
        @apply list-decimal;
    }

    .legal-content a {
        @apply underline hover:text-black;
    }

    .legal-content strong {
        @apply font-bold text-black;
    }

    .legal-content table {
        @apply w-full border-collapse text-left text-sm;
    }

    .legal-content th,
    .legal-content td {
        @apply border border-neutral-300 px-3 py-2;
    }
}

@keyframes text-dance {
    0%, 60% { font-weight: inherit; font-style: normal; }
    70%, 100% { font-weight: 800; font-style: italic; }
}