/* ==========================================
   HHBW BROADCAST NETWORK
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:Arial, Helvetica, sans-serif;
    background:#050505;
    color:#ffffff;
    overflow-x:hidden;
    line-height:1.6;

}

@font-face{

    font-family:"Awergy";

    src:url("../assets/fonts/awergy.ttf") format("truetype");

    font-weight:normal;

    font-style:normal;

}

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

.site-header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:84px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(10,10,10,.90);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:
        0 12px 30px rgba(0,0,0,.45);

    z-index:9999;

}

.navbar{

    width:min(1400px,92%);

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

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

.mobile-page-title{

    display:none;

}

/* ==========================================
   HAMBURGER
========================================== */

.hamburger{

    display:none;

    background:none;

    border:none;

    color:#ffffff;

    font-size:2rem;

    cursor:pointer;

    transition:.3s;

}

.hamburger:hover{

    color:#ff8c00;

}

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

.nav-links{

    display:flex;

    justify-content:center;

    align-items:center;

    list-style:none;

    gap:65px;

}

.nav-links li{

    list-style:none;

}

.nav-link{

    position:relative;

    text-decoration:none;

    color:#ffffff;

    font-size:1rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    padding:16px 22px;

    border-radius:10px;

    transition:.35s;

}

.nav-link:hover{

    background:rgba(255,140,0,.12);

    color:#ffffff;

    transform:translateY(-2px);

}

.nav-link::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

    width:0;

    height:2px;

    background:#ff8c00;

    transform:translateX(-50%);

    transition:.35s;

}

.nav-link:hover::after{

    width:75%;

}

.nav-link.active{

    color:#1f78ff;

    text-shadow:

        0 0 10px rgba(31,120,255,.8),

        0 0 18px rgba(31,120,255,.45);

}

.nav-link.active::after{

    width:100%;

    background:#1f78ff;

    box-shadow:0 0 10px #1f78ff;

}

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:120px 20px 70px;

    background:

        radial-gradient(circle at center,
            rgba(0,90,255,.28),
            transparent 45%),

        radial-gradient(circle at center bottom,
            rgba(255,120,0,.25),
            transparent 42%),

        linear-gradient(

            rgba(0,0,0,.45),

            rgba(0,0,0,.70)

        ),

        url("../images/hero-arena.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.hero::before{

    content:"";

    position:absolute;

    left:50%;

    top:48%;

    transform:translate(-50%,-50%);

    width:650px;

    height:650px;

    border-radius:50%;

    background:

        radial-gradient(circle,

            rgba(0,110,255,.30),

            transparent 72%);

    filter:blur(60px);

    pointer-events:none;

}

.hero::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:120px;

    transform:translateX(-50%);

    width:700px;

    height:180px;

    background:

        radial-gradient(ellipse,

            rgba(255,120,0,.35),

            transparent 72%);

    filter:blur(45px);

}

.hero-content{

    position:relative;

    z-index:5;

    width:100%;

    max-width:1200px;

    display:flex;

    flex-direction:column;

    align-items:center;

}

.hero-logo{

    width:860px;

    max-width:92%;

    margin-bottom:35px;

    filter:

        drop-shadow(0 0 12px rgba(255,255,255,.20))

        drop-shadow(0 0 60px rgba(0,110,255,.45))

        drop-shadow(0 0 90px rgba(255,120,0,.20));

}

.tagline{

    font-family:"Awergy", sans-serif;

    font-size:3.8rem;

    line-height:1.05;

    color:#ffffff;

    letter-spacing:2px;

    text-align:center;

    margin:35px auto 45px;

    max-width:1100px;

    text-shadow:

        2px 2px 0 #000,

        4px 4px 0 #000,

        7px 7px 18px rgba(0,0,0,.9);

}

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

.hero-buttons{

    display:flex;

    gap:22px;

}

.btn{

    width:200px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:40px;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.primary-btn{

    background:#ff8400;

    color:#ffffff;

}

.primary-btn:hover{

    transform:translateY(-4px);

}

.secondary-btn{

    border:2px solid #ffffff;

    color:#ffffff;

}

.secondary-btn:hover{

    transform:translateY(-4px);

}

/* ==========================================
   SECTIONS
========================================== */

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

.studio{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.section-container{

    width:min(1400px,92%);

    margin:auto;

    padding:120px 0;

}

.section-title{

    text-align:center;

    font-size:3rem;

    font-weight:800;

    margin-bottom:60px;

    letter-spacing:2px;

    text-transform:uppercase;

    text-shadow:
        0 4px 14px rgba(0,0,0,.55);

}

/* ==========================================
   BACKGROUNDS
========================================== */

.stoop{

    background:

        linear-gradient(

            rgba(25,18,15,.82),

            rgba(25,18,15,.82)

        ),

        url("../images/stoop-brick.png");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}

.scoop{

    background:

        linear-gradient(

            rgba(8,18,35,.82),

            rgba(8,18,35,.82)

        ),

        url("../images/scoop-studio.png");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}

.sports{

    background:

        linear-gradient(

            rgba(5,10,18,.84),

            rgba(5,10,18,.84)

        ),

        url("../images/sports-control.png");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}

.contact{

    background:#101010;

}

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

.featured-video{

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

    border-radius:20px;

    margin-bottom:55px;

    background:#111;

    border:2px solid rgba(255,255,255,.08);

    box-shadow:

        0 15px 35px rgba(0,0,0,.35);

}

.featured-video iframe{

    width:100%;

    height:100%;

    border:none;

}

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

.video-grid{

    display:grid;

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

    gap:25px;

}

.video-card{

    aspect-ratio:16/9;

    display:flex;

    justify-content:center;

    align-items:center;

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

    border-radius:16px;

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

    font-weight:700;

    transition:.35s;

    cursor:pointer;

}

.video-card:hover{

    transform:translateY(-6px);

    border-color:#ff8400;

    box-shadow:

        0 10px 25px rgba(0,0,0,.45);

}

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

.contact{

    padding:120px 0;

}

.contact-wrapper{

    display:grid;

    grid-template-columns:42% 58%;

    gap:40px;

    align-items:stretch;

}

.contact-info,

.contact-form{

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

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

    border-radius:22px;

    padding:45px;

    backdrop-filter:blur(12px);

}

.contact-info{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}

.contact-info h3{

    font-size:2rem;

    margin-bottom:18px;

}

.contact-info p{

    color:#d8d8d8;

    line-height:1.9;

    font-size:1.1rem;

    margin-bottom:35px;

}

.contact-item{

    margin-bottom:22px;

    font-size:1.05rem;

}

.contact-form{

    display:flex;

    align-items:center;

}

.contact-form form{

    width:100%;

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    background:#181818;

    color:#ffffff;

    border:1px solid #333;

    border-radius:12px;

    padding:16px;

    font-size:1rem;

    transition:.3s;

}

.contact-form input:focus,

.contact-form textarea:focus{

    outline:none;

    border-color:#ff8400;

    box-shadow:

        0 0 12px rgba(255,140,0,.30);

}

.contact-form textarea{

    min-height:190px;

    resize:vertical;

}

.contact-form button{

    width:240px;

    height:60px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-weight:700;

    font-size:1rem;

}

.contact-form button:hover{

    transform:translateY(-3px);

}

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

footer{

    padding:30px;

    text-align:center;

    background:#000;

    color:#888;

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

}

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

@media screen and (max-width:768px){

/* ---------- HEADER ---------- */

.site-header{

    height:72px;

    padding:0 18px;

}

.navbar{

    justify-content:flex-end;

}

/* ---------- MOBILE TITLE ---------- */

.mobile-page-title{

    display:block;

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    font-size:1rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#ffffff;

    pointer-events:none;

}

/* ---------- HAMBURGER ---------- */

.hamburger{

    display:block;

    font-size:2rem;

    z-index:10002;

}

/* ---------- NAVIGATION ---------- */

.nav-links{

    position:fixed;

    top:72px;

    left:0;

    width:100%;

    background:#111;

    flex-direction:column;

    gap:0;

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

    box-shadow:

        0 15px 30px rgba(0,0,0,.45);

}

.nav-links.active{

    max-height:420px;

}

.nav-links li{

    width:100%;

    text-align:center;

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

}

.nav-links li:last-child{

    border-bottom:none;

}

.nav-link{

    display:block;

    width:100%;

    padding:18px 0;

}

/* ---------- HERO ---------- */

.hero{

    padding-top:120px;

}

.hero-logo{

    width:92%;

}

.tagline{

    font-size:2.7rem;

    margin:25px auto 35px;

}

.hero-buttons{

    flex-direction:column;

    width:100%;

    align-items:center;

}

.btn{

    width:90%;

    max-width:320px;

}

/* ---------- SECTION TITLES ---------- */

.section-container{

    width:94%;

    padding:90px 0;

}

.section-title{

    font-size:2.2rem;

}

/* ---------- VIDEO GRID ---------- */

.video-grid{

    grid-template-columns:1fr;

}

/* ---------- CONTACT ---------- */

.contact-wrapper{

    grid-template-columns:1fr;

    gap:30px;

}

.contact-form button{

    width:100%;

}

/* ---------- REMOVE DESKTOP NAV ---------- */

.nav-links{

    display:flex;

}

}

/* ==========================================
   DESKTOP ONLY
========================================== */

@media screen and (min-width:769px){

.mobile-page-title{

    display:none;

}

.hamburger{

    display:none;

}

.nav-links{

    display:flex !important;

    position:static;

    max-height:none;

    overflow:visible;

    background:none;

    box-shadow:none;

}

}