/* ============================================
   Billy's Smart Homestead — Custom Styles
   Clean, rustic, senior-friendly (45+ audience)
   ============================================ */

/* Subtle entrance animation for sections (respects reduced motion via media query in HTML) */
section {
    animation: fadeInUp 0.5s ease-out forwards;
}

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

/* Legacy accordion support (will be replaced by new Video Library) */
.category-content,
.video-content {
    transition: all 0.4s ease;
    overflow: hidden;
}

.fa-chevron-down {
    transition: transform 0.3s ease;
}

/* Strong, visible focus styles — critical for older users and keyboard navigation */
a:focus-visible,
button:focus-visible {
    outline: 3px solid #5C7A3D;
    outline-offset: 3px;
}

/* Helpful utility for the upcoming video library */
.video-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.video-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Larger, more comfortable tap targets — especially important for 45+ users */
.btn,
button,
a {
    min-height: 48px;
}

.video-card button,
.video-card a {
    min-height: 52px; /* extra comfortable for action buttons in cards */
}

/* Stronger visual separation and readable text in cards */
.video-card h4 {
    line-height: 1.35;
}

.video-card p {
    line-height: 1.55;
}

/* Nice branded placeholder when YouTube thumbnail fails to load (wrong ID, private video, etc.) */
.video-thumb {
    background: #E8DFD0;
}

.video-thumb.thumb-failed {
    background: linear-gradient(135deg, #F5F0E6 0%, #E8DFD0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px; /* fallback height for aspect-video area */
}

.video-thumb.thumb-failed::after {
    content: "\f04b";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 48px;
    color: #3A2F1F;
    opacity: 0.4;
    pointer-events: none;
}