/**
 * Trove Core CSS
 *
 * Purpose: Resolve conflicts between Tailwind and base CSS,
 * plus styles that Tailwind utility classes can't handle
 * (animations, pseudo-elements, vendor overrides).
 *
 * DO NOT put component styles here - use trove-components.css for that.
 */

/* ========================================
   1a. Trove Input Border Radius Override
   ----------------------------------------
   Base theme inherits 30px from --btn-radius.
   Trove uses a sharper 5px for all form inputs.
======================================== */

:root {
    --input-border-radius: 5px;
}

/* ========================================
   1. Base CSS → Tailwind Conflict Fixes
   ----------------------------------------
   app.css used a px-based naming convention
   (gap-5 = 0.5rem, mt-10 = 1rem) that clashes
   with Tailwind's rem scale (gap-5 = 1.25rem,
   mt-10 = 2.5rem). Those definitions have been
   removed from app.css; these overrides act as
   a safety net in case any slip through.
======================================== */

/* Gap */
.gap-5  { gap: 1.25rem; }
.gap-10 { gap: 2.5rem; }
.gap-20 { gap: 5rem; }
.gap-30 { gap: 7.5rem; }

/* Margin-top */
.mt-10 { margin-top: 2.5rem; }
.mt-15 { margin-top: 3.75rem; }
.mt-20 { margin-top: 5rem; }
.mt-30 { margin-top: 7.5rem; }

/* Margin-bottom */
.mb-10 { margin-bottom: 2.5rem; }
.mb-15 { margin-bottom: 3.75rem; }
.mb-20 { margin-bottom: 5rem; }
.mb-30 { margin-bottom: 7.5rem; }

/* Padding-y */
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-15 { padding-top: 3.75rem; padding-bottom: 3.75rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }

/* Padding-x */
.px-15 { padding-left: 3.75rem; padding-right: 3.75rem; }
.px-20 { padding-left: 5rem; padding-right: 5rem; }

/* Border-radius (app.css added overflow:hidden which breaks Tailwind) */
.rounded { border-radius: 0.25rem; }

/* ========================================
   1b. Tailwind Reset Overrides
   ----------------------------------------
   Tailwind's preflight resets some base theme styles.
   These overrides restore what we need while migrated
   pages coexist with un-migrated ones.
======================================== */

/* Prevent Tailwind from stripping list styles on legacy pages */
.faq-answer ul,
.faq-answer ol,
.legal-content ul,
.legal-content ol {
    list-style: reuse;
    padding-left: 1.5em;
}

/* ========================================
   2. Swiper Overrides
   ----------------------------------------
   Swiper nav/pagination styled to match Trove palette.
======================================== */

.swiper-button-prev,
.swiper-button-next {
    color: #000000;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 18px;
}

.swiper-pagination-bullet-active {
    background: #000000;
}

/* ========================================
   2b. Trove Hero Slider - Full Width, No Radius
   ----------------------------------------
   Override base theme border-radius and height.
======================================== */

.trove-hero .slideshow.swiper,
.trove-hero .slideshow.swiper.trove-slider {
    border-radius: 0 !important;
    height: 500px;
    width: 100%;
}

@media (min-width: 992px) {
    .trove-hero .slideshow.swiper,
    .trove-hero .slideshow.swiper.trove-slider {
        height: 600px;
    }
}

.trove-hero {
    margin: 0;
    padding: 0;
}

/* ========================================
   3. Animations / Keyframes
======================================== */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.5; }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* ========================================
   4. Scrollbar Styling
======================================== */

.trove-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.trove-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.trove-scrollbar::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 9999px;
}

.trove-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ========================================
   5. Dynamic Footer Grid
   ----------------------------------------
   Uses CSS custom property --footer-cols to
   adjust column count based on attribute count.
======================================== */

@media (min-width: 1024px) {
    footer .grid[style*="--footer-cols"] {
        grid-template-columns: repeat(var(--footer-cols), minmax(0, 1fr));
    }
    footer .grid[style*="--footer-cols"] > :first-child {
        grid-column: span 2;
    }
}