/* ==========================================================================
   Base Styles & Typography
   ========================================================================== */
body {
    background-color: #F1EFEA;
    color: #1D1D1B;
    font-family: 'Mukta', sans-serif;
    font-weight: 200;
}

h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
}

/* Subtitles acting as Quorum Medium in Kapitalen */
.subtitle-caps {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.25em;
}

/* ==========================================================================
   Navigation Transition States
   ========================================================================== */
#navbar {
    /* De transitie is subtieler gemaakt. Border-color transitie is verwijderd 
       om de 'witte flits lijn' bij het inladen te voorkomen. */
    transition: background-color 0.5s ease, padding 0.5s ease, backdrop-filter 0.5s ease, box-shadow 0.5s ease;
}

.nav-scrolled {
    background: rgba(241, 239, 234, 0.95) !important; /* Soft White */
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(211, 202, 186, 0.4) !important; /* Stone */
    
    /* Geoptimaliseerde Quiet Luxury schaduw: Zachter, breder gespreid en iets donkerder (Brand Black met lage opacity) in plaats van hard en smal */
    box-shadow: 0 15px 40px -10px rgba(29, 29, 27, 0.06) !important;
    
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Tekst en logo transities */
.nav-text, #nav-logo-light, #nav-logo-dark {
    transition: color 0.5s ease, border-color 0.5s ease, background-color 0.5s ease, opacity 0.5s ease;
}

/* ==========================================================================
   UI Components (Buttons, Highlights, Frames)
   ========================================================================== */
/* Solid Single-Color Button */
.btn-solid {
    background-color: #602002; /* Deep Red */
    color: #FFFFFF;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 1px solid #602002;
}
.btn-solid:hover {
    background-color: #42250E; /* Bistro */
    border-color: #42250E;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(66, 37, 14, 0.3);
}

/* Highlight Blocks - Roam International Inspired */
.glass-highlight {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.glass-highlight:hover {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 15px 30px -10px rgba(0,0,0,0.1);
}

/* Offset Image Frames (Subtle & Elegant) */
.offset-bg-subtle {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    width: 100%;
    height: 100%;
    background-color: rgba(211, 202, 186, 0.3); /* Stone 30% */
    border: 1px solid rgba(154, 148, 122, 0.4); /* Khaki 40% */
    z-index: 0;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.group:hover .offset-bg-subtle {
    transform: translate(0.5rem, 0.5rem);
}

.section-divider {
    width: 100%;
    height: 1px;
    background-color: rgba(211, 202, 186, 0.4);
}

/* ==========================================================================
   Animations & Interactivity
   ========================================================================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* FAQ Accordion */
.accordion-content {
    transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
.accordion-content.active {
    max-height: 500px;
    opacity: 1;
}

.chevron {
    transition: transform 0.4s ease;
}
.chevron.rotate {
    transform: rotate(180deg);
}

/* ==========================================================================
   Component: Havaro Review Knop (Quiet Luxury Hover & Zoom)
   ========================================================================== */

/* Basis styling, overflow beheer en centrale transitie */
.btn-havaro-red {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  /* Vloeiende transitie voor zowel de schaduw als de schaal (zoom) */
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* Subtiel zoom-effect en versterkte, diepe schaduw bij hover */
.btn-havaro-red:hover {
  transform: scale(1.05);
  /* Versterkte schaduw: grotere spreiding (20px/25px) en iets hogere opaciteit (0.2/0.15) voor een luxer effect */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.15);
}