/* =========================================================
SOUL WEST FEST 2027
MASTER STYLESHEET
========================================================= */


/* =========================================================
GLOBAL
========================================================= */

:root {

    --black: #08090B;
    --gold: #F5B800;
    --teal: #20C4C7;
    --pink: #E72B72;
    --purple: #8E44AD;
    --white: #FFFFFF;
    --light: #F5F5F5;
    --gray: #777777;

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        'Montserrat',
        Arial,
        sans-serif;

    background: var(--black);

    color: var(--white);

}


img {

    max-width: 100%;

    height: auto;

}


a {

    text-decoration: none;

}


.container {

    width: min(
        1180px,
        calc(100% - 40px)
    );

    margin: 0 auto;

}


/* =========================================================
HEADER
========================================================= */

.site-header {

    position: sticky;

    top: 0;

    z-index: 999;

    background: rgba(
        0,
        0,
        0,
        .97
    );

    border-bottom:
        1px solid
        rgba(255,255,255,.1);

}


.header-inner {

    min-height: 80px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

}


.logo {

    width: 150px;

    display: block;

}


.main-nav {

    display: flex;

    align-items: center;

    gap: 25px;

}


.main-nav a {

    color: white;

    font-family: 'Oswald', sans-serif;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: .5px;

    transition: .25s;

}


.main-nav a:hover {

    color: var(--gold);

}


.header-button {

    background: var(--pink);

    color: white;

    padding: 13px 23px;

    border-radius: 7px;

    font-family: 'Oswald', sans-serif;

    font-weight: 700;

    font-size: 13px;

}


/* =========================================================
BUTTONS
========================================================= */

.button {

    display: inline-block;

    padding: 15px 26px;

    border-radius: 7px;

    font-family:
        'Oswald',
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: .4px;

    border: none;

    cursor: pointer;

    transition:
        transform .2s,
        opacity .2s;

}


.button:hover {

    transform: translateY(-2px);

    opacity: .9;

}


.pink-button {

    background: var(--pink);

    color: white;

}


.teal-button {

    background: var(--teal);

    color: var(--black);

}


.outline-button {

    border:
        2px solid
        var(--white);

    color: white;

    background: transparent;

}


.small-button {

    display: inline-block;

    background: var(--pink);

    color: white;

    padding: 11px 17px;

    border-radius: 6px;

    font-family: 'Oswald', sans-serif;

    font-size: 12px;

    font-weight: 700;

}


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

.hero {

    min-height: 680px;

    position: relative;

    background-image:
        url('images/PCB Beach.jpg');

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.90),
            rgba(0,0,0,.35),
            rgba(0,0,0,.15)
        );

}


.hero-content {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.25fr
        .75fr;

    align-items: center;

    gap: 60px;

}


.hero h1 {

    margin: 0 0 20px;

    font-family: 'Anton', sans-serif;

    font-size: clamp(
        58px,
        8vw,
        110px
    );

    line-height: .92;

    letter-spacing: 1px;

}


.hero h1 span {

    display: block;

}


.white-text {
    color: white;
}


.gold-text {
    color: var(--gold);
}


.teal-text {
    color: var(--teal);
}


.hero h2 {

    margin: 15px 0 4px;

    font-family: 'Oswald', sans-serif;

    font-size: 28px;

}


.location {

    margin: 0 0 18px;

    color: var(--gold);

    font-weight: 800;

    letter-spacing: 1px;

}


.festival-tags {

    font-size: 14px;

    font-weight: 700;

}


.festival-tags span {

    color: var(--pink);

    padding: 0 5px;

}


.hero-buttons {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 25px;

}


.date-card {

    background: rgba(
        255,
        255,
        255,
        .95
    );

    color: var(--black);

    padding: 40px 30px;

    text-align: center;

    max-width: 340px;

    transform: rotate(-1deg);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.4);

}


.calendar-icon {

    font-size: 50px;

}


.date-card h3 {

    color: var(--pink);

    font-family: 'Oswald', sans-serif;

    font-size: 25px;

}


.date-card p {

    font-family: 'Pacifico', cursive;

    font-size: 24px;

}


/* =========================================================
JOIN SECTION
========================================================= */

.join-section {

    background: var(--teal);

    color: var(--black);

    padding: 55px 0;

}


.join-grid {

    display: grid;

    grid-template-columns:
        .75fr
        1.25fr;

    gap: 50px;

    align-items: center;

}


.join-copy h2 {

    margin: 0;

    font-family: 'Anton', sans-serif;

    font-size: 55px;

    line-height: .9;

}


.join-copy p {

    line-height: 1.6;

}


.script-text {

    font-family:
        'Pacifico',
        cursive;

    font-size: 20px;

}


.form-wrapper {

    background:
        rgba(255,255,255,.15);

    padding: 25px;

    border-radius: 10px;

}


.form-row {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 12px;

}


.form-field {

    margin-bottom: 15px;

}


.form-field label {

    display: block;

    font-size: 12px;

    font-weight: 800;

    margin-bottom: 6px;

}


.form-field input,
.form-field select {

    width: 100%;

    height: 47px;

    border: none;

    border-radius: 7px;

    padding: 0 14px;

    background: white;

    color: #333;

    font-family:
        'Montserrat',
        sans-serif;

    font-size: 13px;

}


.form-field input:focus,
.form-field select:focus {

    outline:
        3px solid
        rgba(231,43,114,.3);

}


.interest-section {

    margin: 15px 0 20px;

}


.interest-title {

    font-size: 13px;

    font-weight: 800;

}


.interest-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 9px;

}


.checkbox-label {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 12px;

    cursor: pointer;

}


.checkbox-label input {

    width: 17px;

    height: 17px;

    accent-color: var(--pink);

}


.submit-button {

    background: var(--pink);

    color: white;

    width: 100%;

}


.honeypot {

    position: absolute !important;

    left: -9999px !important;

    opacity: 0 !important;

    width: 1px !important;

    height: 1px !important;

}


.form-message {

    display: none;

    margin-top: 15px;

    padding: 13px;

    border-radius: 7px;

    font-size: 13px;

    font-weight: 700;

}


.form-message.success {

    display: block;

    background: #dff7e8;

    color: #126b35;

}


.form-message.error {

    display: block;

    background: #ffe2e2;

    color: #9a2020;

}


/* =========================================================
SECTION HEADINGS
========================================================= */

.section-heading {

    text-align: center;

    margin-bottom: 45px;

}


.section-heading h2 {

    margin: 0;

    font-family: 'Anton', sans-serif;

    font-size: 40px;

}


.gold-line {

    width: 120px;

    height: 5px;

    background: var(--gold);

    margin: 12px auto;

}


.pink-line {

    width: 120px;

    height: 5px;

    background: var(--pink);

    margin: 12px auto;

}


/* =========================================================
WHY
========================================================= */

.why-section {

    padding: 75px 0;

    background: var(--black);

}


.why-intro {

    max-width: 600px;

    margin: 0 auto 45px;

    text-align: center;

    line-height: 1.7;

}


.four-columns {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 25px;

}


.feature-card {

    text-align: center;

    padding: 15px;

}


.feature-icon {

    width: 85px;

    height: 85px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 15px;

    font-size: 35px;

}


.feature-icon.pink {
    background: var(--pink);
}


.feature-icon.gold {
    background: var(--gold);
}


.feature-icon.teal {
    background: var(--teal);
}


.feature-icon.purple {
    background: var(--purple);
}


.feature-card h3 {

    font-family: 'Oswald', sans-serif;

    color: var(--teal);

}


.feature-card p {

    color: #ddd;

    font-size: 14px;

    line-height: 1.6;

}


/* =========================================================
SPONSORS
========================================================= */

.sponsor-section {

    padding: 75px 0;

    background: var(--white);

    color: var(--black);

}


.sponsor-card {

    text-align: center;

    padding: 20px;

    border-right:
        1px solid
        #ddd;

}


.sponsor-card:last-child {

    border-right: none;

}


.sponsor-icon {

    width: 70px;

    height: 70px;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: var(--gold);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 30px;

    font-weight: 800;

}


.sponsor-card h3 {

    font-family: 'Oswald', sans-serif;

    color: var(--pink);

}


.sponsor-card p {

    font-size: 13px;

    line-height: 1.7;

}


.card-button {

    display: inline-block;

    margin-top: 10px;

    padding: 9px 14px;

    border:
        1px solid
        var(--pink);

    color: var(--black);

    border-radius: 5px;

    font-size: 11px;

    font-weight: 800;

}


/* =========================================================
AMBASSADORS
========================================================= */

.ambassador-section {

    padding: 70px 0;

    background: #111;

}


.ambassador-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 40px;

    align-items: center;

}


.ambassador-copy h2,
.founders-copy h2 {

    margin: 0 0 15px;

    font-family: 'Anton', sans-serif;

    font-size: 45px;

    color: var(--gold);

}


.eyebrow {

    color: var(--teal);

    font-family: 'Oswald', sans-serif;

    font-weight: 700;

    font-size: 20px;

}


.pink-text {

    color: var(--pink);

}


.ambassador-copy p,
.founders-copy p {

    line-height: 1.7;

}


.ambassador-image img,
.founders-image img {

    width: 100%;

    display: block;

    border-radius: 8px;

}


/* =========================================================
IMPACT
========================================================= */

.impact-section {

    padding: 35px 0;

    background: var(--teal);

    color: var(--black);

}


.impact-grid {

    display: grid;

    grid-template-columns:
        repeat(4,1fr);

}


.impact-item {

    text-align: center;

    border-right:
        1px solid
        rgba(0,0,0,.25);

}


.impact-item:last-child {

    border-right: none;

}


.impact-item strong {

    display: block;

    font-family: 'Anton', sans-serif;

    font-size: 45px;

}


.impact-item span {

    font-weight: 800;

    font-size: 12px;

}


/* =========================================================
NEWS
========================================================= */

.news-section {

    padding: 75px 0;

    background: var(--black);

}


.center-text {

    text-align: center;

    color: #ddd;

}


.center-button {

    display: block;

    width: max-content;

    margin: 25px auto 0;

}


/* =========================================================
CONTACT
========================================================= */

.contact-section {

    padding: 50px 0;

    background: #111;

}


.contact-grid {

    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr;

    gap: 30px;

    align-items: center;

}


.contact-grid h2 {

    font-family: 'Anton', sans-serif;

    color: var(--gold);

}


.contact-grid a {

    color: var(--teal);

    font-weight: 700;

}


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

.footer {

    padding: 40px 0;

    background: #050505;

    text-align: center;

}


.footer-logo img {

    width: 170px;

}


.hashtag {

    color: var(--teal);

    font-weight: 800;

}


.footer-links {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

    margin: 25px 0;

}


.footer-links a {

    color: #aaa;

    font-family: 'Oswald', sans-serif;

    font-size: 12px;

}


.footer-links a:hover {

    color: var(--gold);

}


.copyright {

    color: #777;

    font-size: 11px;

}


/* =========================================================
TABLET
========================================================= */

@media (max-width: 900px) {

    .main-nav {

        display: none;

    }


    .hero-content {

        grid-template-columns: 1fr;

    }


    .date-card {

        margin: 0 auto;

    }


    .four-columns {

        grid-template-columns:
            repeat(2,1fr);

    }


    .sponsor-card:nth-child(2) {

        border-right: none;

    }


    .join-grid {

        grid-template-columns: 1fr;

    }


    .ambassador-grid {

        grid-template-columns: 1fr;

    }


    .impact-grid {

        grid-template-columns:
            repeat(2,1fr);

        gap: 25px;

    }


    .impact-item:nth-child(2) {

        border-right: none;

    }


    .contact-grid {

        grid-template-columns: 1fr;

    }

}


/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {

    .container {

        width: min(
            100% - 25px,
            1180px
        );

    }


    .site-header {

        position: relative;

    }


    .header-inner {

        min-height: 70px;

    }


    .logo {

        width: 125px;

    }


    .header-button {

        padding: 10px 13px;

        font-size: 11px;

    }


    .hero {

        min-height: 700px;

    }


    .hero h1 {

        font-size: 62px;

    }


    .hero h2 {

        font-size: 22px;

    }


    .hero-content {

        gap: 35px;

    }


    .hero-buttons {

        flex-direction: column;

    }


    .hero-buttons .button {

        text-align: center;

    }


    .join-copy h2 {

        font-size: 45px;

    }


    .form-row {

        grid-template-columns: 1fr;

    }


    .interest-grid {

        grid-template-columns: 1fr;

    }


    .four-columns {

        grid-template-columns: 1fr;

    }


    .sponsor-card {

        border-right: none;

        border-bottom:
            1px solid
            #ddd;

        padding-bottom: 30px;

    }


    .sponsor-card:last-child {

        border-bottom: none;

    }


    .impact-grid {

        grid-template-columns: 1fr;

    }


    .impact-item {

        border-right: none;

        border-bottom:
            1px solid
            rgba(0,0,0,.2);

        padding: 15px 0;

    }


    .impact-item:last-child {

        border-bottom: none;

    }


    .section-heading h2 {

        font-size: 32px;

    }


    .ambassador-copy h2,
    .founders-copy h2 {

        font-size: 38px;

    }

}