/*
Theme Name: GeneratePress Child
Theme URI:
Description: Custom child theme for GeneratePress - Fiddlers' Frolics
Author:
Author URI:
Template: generatepress
Version: 1.0.0
*/

/* ==========================================================================
   BASE
   ========================================================================== */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

body {
    background-color: #EAD9A8;
    color: #1A1210;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjRjRFNEJDIi8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9IixEOCQzMiIgZmlsbC1vcGFjaXR5PSIwLjEiLz4KPC9zdmc+');
}

/* ==========================================================================
   FONTS
   ========================================================================== */
.font-western { font-family: 'Rye', serif; }
.font-typewriter { font-family: 'Courier Prime', monospace; }

/* ==========================================================================
   LOGO
   ========================================================================== */
.header__logo {
    height: 120px !important;
    width: auto !important;
    max-width: 220px !important;
    max-height: 120px !important;
    object-fit: contain !important;
    display: block !important;
}

/* ==========================================================================
   SCROLL REVEAL ANIMATION
   ========================================================================== */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.js-enabled .reveal:not(.active) {
    opacity: 0;
    transform: translateY(20px);
}
.js-enabled .reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   VINTAGE FILTER
   ========================================================================== */
.vintage-filter {
    filter: sepia(0.4) contrast(1.1) brightness(0.9);
    transition: filter 0.3s;
}
.vintage-filter:hover {
    filter: sepia(0) contrast(1) brightness(1);
}
.vintage-filter-strong {
    filter: sepia(0.6) contrast(1.2) brightness(0.9) grayscale(0.2);
}

/* ==========================================================================
   MOBILE MENU
   ========================================================================== */
#mobile-menu {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background-image: url('https://www.transparenttextures.com/patterns/cardboard.png');
}
#mobile-menu.open {
    max-height: 500px;
    opacity: 1;
}

/* ==========================================================================
   DROP CAP
   ========================================================================== */
.drop-cap::first-letter {
    float: left;
    font-family: 'Rye', serif;
    font-size: 3.5rem;
    line-height: 0.85;
    padding-right: 0.5rem;
    padding-top: 0.2rem;
    color: #8B4513;
}

/* ==========================================================================
   CHAR TEXT
   ========================================================================== */
.char-text {
    color: #2A1F1D;
    text-shadow: 2px 2px 0px #8B4513, 4px 4px 0px rgba(0,0,0,0.2);
}

/* ==========================================================================
   ACCORDION
   ========================================================================== */
.accordion-content {
    transition: max-height 0.3s ease-out;
    max-height: 0;
    overflow: hidden;
}

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.timeline-line {
    position: absolute;
    left: 1rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #2A1F1D;
    opacity: 0.2;
    z-index: 0;
}

/* ==========================================================================
   FORM INPUTS
   ========================================================================== */
input, textarea, select {
    background-color: #F9F6E8 !important;
    border: 2px solid #2A1F1D !important;
    font-family: 'Courier Prime', monospace;
    color: #2A1F1D;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #8B4513 !important;
    box-shadow: 2px 2px 0px 0px rgba(42, 31, 29, 1);
    background-color: #f7f8f9 !important;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #F9F6E8 inset !important;
    -webkit-text-fill-color: #2A1F1D !important;
    background-color: #F9F6E8 !important;
    border: 2px solid #2A1F1D !important;
}
input:autofill {
    background-color: #F9F6E8 !important;
    color: #2A1F1D !important;
}

/* ==========================================================================
   HERO
   ========================================================================== */
@keyframes bounce {
    0%, 100% { transform: translateY(0) translateX(-50%); }
    50% { transform: translateY(8px) translateX(-50%); }
}
.animate-bounce {
    animation: bounce 2s ease-in-out infinite;
}
.hero-graphic-bg {
    filter: brightness(0.4) contrast(1.1);
    object-fit: cover;
    object-position: center 30%;
}