/* =========================================
   De Burcht - Henri Polakinstituut
   Custom theme styles
   ========================================= */

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Heading font defaults */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Bitter', Georgia, serif;
}

/* Body text leading */
p {
    line-height: 1.7;
}

/* Focus visible outline for accessibility */
*:focus-visible {
    outline: 2px solid #6B3A2A;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Navigation dropdown hover bridge */
.navigation-dropdown .dropdown-panel::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

/* Smooth hero decorative diamond pattern */
.diamond-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 5 L27 20 L20 35 L13 20Z' fill='none' stroke='%23C4955A' stroke-width='0.5' opacity='0.15'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* Hero section illustration */
.hero-illustration {
    position: relative;
}

.hero-illustration::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(74, 37, 24, 0.95), transparent);
}

/* Activity card hover lift */
.activity-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.activity-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(107, 58, 42, 0.15);
}

/* Decorative horizontal rule */
.decorative-rule {
    display: flex;
    align-items: center;
    gap: 12px;
}

.decorative-rule::before,
.decorative-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #d4bfa8, transparent);
}

/* Responsive image containers */
.image-frame {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
}

.image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.image-frame:hover img {
    transform: scale(1.03);
}

/* Cookie popup entrance animation */
#privacy-popup {
    animation: slideUpFade 0.4s ease-out;
}

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