/* ==================================================
   GENERAL PAGE STYLING
   ================================================== */

body {
    margin: 0;

    font-family: Arial, sans-serif;

    background-color: #121212;
    color: white;
}


/* ==================================================
   NAVIGATION
   ================================================== */

nav {
    background-color: #2a2a2a;

    padding: 15px;

    text-align: center;

    /* Keeps the navbar visible while scrolling */
    position: sticky;
    top: 0;

    /* Keeps the navbar above the page content */
    z-index: 1000;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}


nav a {
    color: orange;
    text-decoration: none;

    margin: 0 8px;
    padding: 10px 18px;

    font-size: 18px;

    border-radius: 8px;

    /* Makes hover changes smooth */
    transition: 0.3s;
}


nav a:hover {
    background-color: orange;
    color: black;
}


/* ==================================================
   HERO
   ================================================== */

.hero {
    text-align: center;

    /*
        Controls the amount of space inside the hero.
        First value = top/bottom
        Second value = left/right
    */
    padding: 80px 20px;

    background-color: #181818;

    /*
        Allows the cobweb and spider to be positioned
        relative to the hero instead of the whole page.
    */
    position: relative;

    /*
        Stops decorations from creating horizontal
        scrollbars if they move slightly outside the hero.
    */
    overflow: hidden;
}


.hero h1 {
    font-size: 50px;

    color: orange;

    margin-bottom: 10px;
}


.hero p {
    font-size: 20px;

    margin-bottom: 30px;
}


/* Main hero button */
.hero-button {
    display: inline-block;

    background-color: orange;
    color: black;

    text-decoration: none;

    padding: 12px 24px;

    border-radius: 8px;

    font-weight: bold;

    transition: 0.3s;
}


.hero-button:hover {
    background-color: white;
}


/* ==================================================
   HERO DECORATIONS
   ================================================== */

/*
    Cobweb fixed to the top-left corner.

    Change width to resize it.
*/
.corner-web {
    position: absolute;

    top: 0;
    left: 0;

    width: 260px;

    pointer-events: none;

    z-index: 1;
}


/*
    Thread + spider are one PNG.

    top and left control where it attaches to the web.
    width controls the overall spider decoration size.
*/
.hanging-spider {
    position: absolute;

    top: 40px;
    left: 100px;

    width: 105px;

    /*
        Makes the image swing from its top attachment point
        instead of rotating around the middle.
    */
    transform-origin: top center;

    animation: spider-sway 4.5s ease-in-out infinite;

    pointer-events: none;

    z-index: 2;
}


/* Gentle hanging movement */
@keyframes spider-sway {

    0% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }

    100% {
        transform: rotate(-3deg);
    }
}


/* Main Halloween sign 
 ==================================================
   HALLOWEEN SIGN
================================================== 

    Holds the sign and the decorative ground together.
    Change max-width if the whole sign should be larger/smaller.
*/
.hero-sign-area {
    width: 90%;
    max-width: 420px;

    margin: 0 auto 20px;

    position: relative;
}


/* Wooden Halloween sign */
.hero-sign {
    display: block;

    width: 100%;

    position: relative;
    z-index: 2;
}


/*
    Soft patch of ground/shadow underneath the post.

    Width controls how far it spreads.
    Height controls how thick the ground appears.
*/
.sign-ground {
    width: 70%;
    height: 25px;

    margin: -12px auto 0;

    background: radial-gradient(
        ellipse,
        rgba(110, 62, 25, 0.65) 0%,
        rgba(55, 35, 22, 0.4) 45%,
        rgba(24, 24, 24, 0) 75%
    );

    filter: blur(4px);

    position: relative;
    z-index: 1;

    pointer-events: none;
}


/* ==================================================
   MAIN CONTENT SECTIONS
   ================================================== */

section {
    /*
        Stops sections becoming extremely wide
        on large monitors.
    */
    max-width: 1000px;

    /*
        50px = space above and below
        auto = horizontally centered
    */
    margin: 50px auto;

    padding: 40px;

    background-color: #1f1f1f;

    border-radius: 14px;

    /* Orange Halloween accent */
    border-left: 5px solid orange;
}


/* ==================================================
   SECTION LAYOUT
   ================================================== */

/*
    Places section content beside each other:

    TEXT | IMAGE
*/
.section-content {
    display: flex;

    align-items: center;

    gap: 40px;
}


/* Both sides share the available space */
.section-text,
.section-image,
.video-container {
    flex: 1;
}


/* Section images */
.section-image img {
    width: 100%;

    border-radius: 12px;
}


/* ==================================================
   EVENT INFORMATION
   ================================================== */

/*
    Holds the date, price and location boxes.

    flex-wrap lets them move onto another row
    if there is not enough space.
*/
.event-info {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 25px;
}


/* Individual information box */
.info-box {
    flex: 1 1 120px;

    background-color: #2a2a2a;

    padding: 15px;

    border: 1px solid orange;

    border-radius: 10px;
}


.info-box h3 {
    color: orange;

    margin: 0 0 8px 0;
}


.info-box p {
    margin: 0;
}


/* Decorative pumpkin */
.event-pumpkin {
    width: 140px;

    margin-top: 20px;

    pointer-events: none;
}

/* ==================================================
   BOTTOM DECORATION
   ================================================== */

/* Area above the footer that holds the decorative GIF */
.bottom-decoration {
    position: relative;
    height: 120px;
}

/* Cat pumpkin GIF placed on the right side */
.bottom-cat {
    position: absolute;
    right: 20px;
    bottom: 0;

    width: 120px;

    pointer-events: none;
}


/* ==================================================
   VIDEO
   ================================================== */

.video-container iframe {
    width: 100%;

    /* Desktop video height */
    height: 315px;

    border: none;

    border-radius: 12px;
}


/* ==================================================
   TEAM PAGE BUTTON
   ================================================== */

.team-button {
    display: inline-block;

    background-color: orange;
    color: black;

    text-decoration: none;

    padding: 10px 20px;

    margin-top: 10px;

    border-radius: 8px;

    font-weight: bold;

    transition: 0.3s;
}


.team-button:hover {
    background-color: white;
}


/* ==================================================
   FOOTER
   ================================================== */

footer {
    text-align: center;

    padding: 20px;

    background-color: #1a1a1a;
}


/* ==================================================
   MOBILE / SMALL SCREENS
   ================================================== */

@media (max-width: 700px) {

    /*
        Changes desktop layout:

        TEXT | IMAGE

        into:

        TEXT
        IMAGE
    */
    .section-content {
        flex-direction: column;
    }


    .hero h1 {
        font-size: 36px;
    }


    .hero-button {
        padding: 8px 16px;
        font-size: 14px;
    }


    section {
        padding: 25px;
    }


    .video-container iframe {
        height: 220px;
    }


    .hero-sign {
        max-width: 280px;
    }


    .event-pumpkin {
        width: 100px;
    }


    /* Smaller corner decoration on phones */
    .corner-web {
        width: 160px;
    }


    /*
        Repositions and shrinks the hanging spider
        to match the smaller mobile cobweb.
    */
    .hanging-spider {
        top: 26px;
        left: 55px;

        width: 70px;
    }


    /* Makes the footer decoration shorter on phones */
    .bottom-decoration {
        height: 90px;
    }


    /* Makes the pumpkin cat smaller and moves it inward */
    .bottom-cat {
        width: 80px;
        right: 10px;
    }

} /* Ends the mobile media query */


/* ==================================================
   ACCESSIBILITY
   ================================================== */

/*
    Stops the spider movement when a user has
    reduced-motion enabled on their device.
*/
/* @media (prefers-reduced-motion: reduce) {

    .hanging-spider {
        animation: none;
    }
} 
*/