/* Custom styles for Cadeaublog.nl */

/* Smooth transitions for cards */
.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-4px);
}

/* Article content styling */
.prose h2 {
    color: hsl(var(--p));
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose h3 {
    color: hsl(var(--s));
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.prose p {
    margin-bottom: 1rem;
    line-height: 1.8;
}

.prose ul, .prose ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: 0.5rem;
}

/* Affiliate link styling */
a[rel="sponsored"] {
    position: relative;
}

a[rel="sponsored"]::after {
    content: "*";
    font-size: 0.7em;
    vertical-align: super;
    margin-left: 2px;
    color: hsl(var(--a));
}

/* Hero section enhancements */
.hero {
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* Breadcrumb styling */
.breadcrumbs {
    font-size: 0.9rem;
}

.breadcrumbs a {
    color: hsl(var(--p));
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

/* Mobile menu improvements */
@media (max-width: 1024px) {
    .navbar-center {
        display: none;
    }
}

/* Product card image hover */
.card figure img {
    transition: transform 0.3s ease;
}

.card:hover figure img {
    transform: scale(1.05);
}

/* Footer link hover */
.footer a:hover {
    color: hsl(var(--p));
}

/* Loading animation for buttons */
.btn.loading {
    position: relative;
    color: transparent;
}

.btn.loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Category badge styling */
.badge {
    font-weight: 600;
    letter-spacing: 0.025em;
}

/* Share buttons */
.btn-circle {
    font-weight: bold;
}

/* Article metadata */
.text-gray-500 {
    color: hsl(var(--bc) / 0.6);
}

/* Related products section */
.bg-base-200 .card {
    border: 1px solid hsl(var(--b3));
}

/* Responsive typography */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .prose h2 {
        font-size: 1.5rem;
    }
}