/* ===== ROOTS & RHYTHM — Custom Styles ===== */

/* === Scrollbar === */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1A1A1A;
}
::-webkit-scrollbar-thumb {
    background: #D4A84B;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #F6D817;
}

/* === Selection === */
::selection {
    background: #F6D817;
    color: #1A1A1A;
}

/* === Smooth Scroll === */
html {
    scroll-behavior: smooth;
}

/* === Images always display === */
img {
    display: block;
}

/* === Kente-Inspired Patterns === */
.kente-overlay {
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 20px,
            rgba(206, 17, 38, 0.15) 20px,
            rgba(206, 17, 38, 0.15) 22px,
            transparent 22px,
            transparent 28px,
            rgba(246, 216, 23, 0.15) 28px,
            rgba(246, 216, 23, 0.15) 30px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 20px,
            rgba(0, 107, 63, 0.15) 20px,
            rgba(0, 107, 63, 0.15) 22px,
            transparent 22px,
            transparent 28px,
            rgba(246, 216, 23, 0.15) 28px,
            rgba(246, 216, 23, 0.15) 30px
        );
}

.kente-border {
    background: linear-gradient(90deg, #CE1126, #F6D817, #006B3F, #F6D817, #CE1126);
    background-size: 200% 100%;
    animation: kenteShift 3s ease-in-out infinite;
}

.kente-stripe {
    background: linear-gradient(90deg, 
        #CE1126 0%, #CE1126 20%, 
        #F6D817 20%, #F6D817 40%, 
        #006B3F 40%, #006B3F 60%, 
        #F6D817 60%, #F6D817 80%, 
        #CE1126 80%, #CE1126 100%
    );
}

.kente-accent {
    background: linear-gradient(90deg, #CE1126, #F6D817, #006B3F);
}

@keyframes kenteShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* === Hero Slideshow === */
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 1.5s ease-in-out, transform 8s ease-out;
}

.hero-slide.active {
    opacity: 1;
    transform: scale(1);
}

/* === Animations === */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(45deg); }
    50% { transform: translateY(-20px) rotate(45deg); }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0) rotate(12deg); }
    50% { transform: translateY(-15px) rotate(12deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}

.float-animation-slow {
    animation: floatSlow 8s ease-in-out infinite;
}

.pulse-animation {
    animation: pulse 3s ease-in-out infinite;
}

/* === Scroll Reveal Animations === */
.reveal-up,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-up {
    transform: translateY(40px);
}

.reveal-left {
    transform: translateX(-40px);
}

.reveal-right {
    transform: translateX(40px);
}

.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed {
    opacity: 1;
    transform: translate(0);
}

/* === Experience Cards === */
.experience-card {
    transition: transform 0.5s ease;
}

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

/* === Nav Scroll State === */
.nav-scrolled {
    background: rgba(26, 26, 26, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}



/* === Form Focus States === */
input:focus,
textarea:focus,
select:focus {
    border-color: #F6D817 !important;
    box-shadow: 0 0 0 1px #F6D817;
}

/* === Itinerary Expand === */
.itinerary-expand {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.3s ease, padding 0.3s ease;
}

.itinerary-expand.expanded {
    max-height: 200px;
    opacity: 1;
}

/* === Mobile Menu === */
#mobile-menu.active {
    transform: translateX(0);
}

/* === Itinerary Toggle Icon Rotation === */
.itinerary-toggle.active i {
    transform: rotate(180deg);
}

.itinerary-toggle i {
    transition: transform 0.3s ease;
}

/* === Day Gallery Modal === */
#day-modal:not(.hidden) {
    animation: modalFadeIn 0.3s ease forwards;
}

#day-modal.hidden {
    animation: modalFadeOut 0.2s ease forwards;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* === Responsive Adjustments === */
@media (max-width: 768px) {
}



/* === Countdown Pulse === */
#countdown span:first-child {
    font-variant-numeric: tabular-nums;
}

/* === Custom Focus Ring for Accessibility === */
*:focus-visible {
    outline: 2px solid #F6D817;
    outline-offset: 2px;
}

/* === Hero Welcome Text === */
#hero h1 .text-ghana-black {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 0 0 40px rgba(255, 255, 255, 0.2);
}

#hero h1 .text-ghana-red {
    text-shadow: 0 0 30px rgba(206, 17, 38, 0.5);
}

#hero h1 .text-ghana-green {
    text-shadow: 0 0 30px rgba(0, 107, 63, 0.5);
}