/*
Theme Name: Stream IPTV UK
Theme URI: https://streamiptvuk.net/
Author: Stream IPTV UK
Description: Premium dark WordPress theme for Stream IPTV UK.
Version: 1.0.0
Text Domain: stream-iptv-uk
*/

/* =========================================================
   ROOT
========================================================= */

:root {

    --iptv-red: #e50914;
    --iptv-red-dark: #b20710;
    --iptv-red-light: #ff1f2d;

    --iptv-black: #050505;
    --iptv-dark: #080808;
    --iptv-dark-2: #0d0d0d;
    --iptv-dark-3: #111111;
    --iptv-dark-4: #171717;

    --iptv-white: #ffffff;
    --iptv-text: #eeeeee;
    --iptv-muted: #a0a0a0;

    --iptv-border: rgba(255, 255, 255, 0.08);
    --iptv-red-border: rgba(229, 9, 20, 0.35);

    --iptv-container: 1200px;

    --iptv-radius: 12px;
    --iptv-radius-small: 8px;

    --iptv-transition: 0.25s ease;

    --iptv-shadow:
        0 15px 50px rgba(0, 0, 0, 0.40);

    --iptv-red-shadow:
        0 12px 35px rgba(229, 9, 20, 0.20);
}


/* =========================================================
   RESET
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background: var(--iptv-black);

    color: var(--iptv-text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;
    line-height: 1.7;

    overflow-x: hidden;
}

body,
button,
input,
textarea,
select {
    font-family: inherit;
}

img {
    display: block;

    max-width: 100%;
    height: auto;
}

a {
    color: inherit;

    text-decoration: none;

    transition:
        color var(--iptv-transition),
        background var(--iptv-transition),
        border-color var(--iptv-transition),
        transform var(--iptv-transition),
        box-shadow var(--iptv-transition);
}

button {
    cursor: pointer;
}

button,
input,
textarea,
select {
    font-size: inherit;
}


/* =========================================================
   CONTAINER
========================================================= */

.container {

    width: min(
        calc(100% - 40px),
        var(--iptv-container)
    );

    margin-left: auto;
    margin-right: auto;
}


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

.screen-reader-text {

    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================================
   WORDPRESS
========================================================= */

.aligncenter {

    display: block;

    margin-left: auto;
    margin-right: auto;
}

.alignleft {

    float: left;

    margin:
        0
        25px
        20px
        0;
}

.alignright {

    float: right;

    margin:
        0
        0
        20px
        25px;
}

.wp-caption {
    max-width: 100%;
}


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

.site-header {

    position: sticky;

    top: 0;

    z-index: 9999;

    width: 100%;

    background:
        rgba(5, 5, 5, 0.94);

    border-bottom:
        1px solid
        var(--iptv-border);

    backdrop-filter: blur(18px);

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

.header-inner {

    min-height: 78px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


/* =========================================================
   LOGO
========================================================= */

.site-branding {

    display: flex;

    align-items: center;

    flex-shrink: 0;
}

.site-logo {

    display: flex;

    align-items: center;
}

.site-logo img,
.custom-logo {

    display: block;

    width: auto;

    max-width: 190px;

    max-height: 58px;

    object-fit: contain;
}

.site-title {

    color: #ffffff;

    font-size: 23px;

    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -0.5px;
}

.site-title:hover {
    color: #ffffff;
}


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

.main-navigation {

    display: flex;

    align-items: center;

    margin-left: auto;
}

.main-navigation ul {

    display: flex;

    align-items: center;

    gap: 4px;

    list-style: none;

    padding: 0;

    margin: 0;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {

    display: inline-flex;

    align-items: center;

    min-height: 44px;

    padding:
        8px
        13px;

    color: #cccccc;

    border-radius:
        var(--iptv-radius-small);

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {

    color: #ffffff;

    background:
        rgba(229, 9, 20, 0.10);
}


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

.header-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding:
        0
        20px;

    background:
        var(--iptv-red);

    color: #ffffff;

    border-radius:
        var(--iptv-radius-small);

    font-size: 14px;

    font-weight: 800;

    white-space: nowrap;

    box-shadow:
        var(--iptv-red-shadow);
}

.header-cta:hover {

    color: #ffffff;

    background:
        var(--iptv-red-light);

    transform:
        translateY(-2px);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-toggle {

    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    background:
        var(--iptv-dark-3);

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

    border-radius:
        var(--iptv-radius-small);
}

.mobile-menu-toggle span {

    display: block;

    width: 20px;
    height: 2px;

    margin:
        4px
        auto;

    background: #ffffff;

    transition:
        var(--iptv-transition);
}


/* =========================================================
   MAIN
========================================================= */

.site-main {

    width: 100%;

    min-height: 60vh;
}

.site-content {

    width: 100%;
}

.entry-header {

    margin-bottom: 30px;
}

.entry-title {

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            32px,
            5vw,
            58px
        );

    line-height: 1.1;

    letter-spacing: -1.5px;
}


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

.entry-content {

    color:
        var(--iptv-text);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {

    color: #ffffff;

    line-height: 1.2;
}

.entry-content h1 {
    font-size: 46px;
}

.entry-content h2 {

    margin-top: 50px;

    font-size:
        clamp(
            28px,
            4vw,
            42px
        );
}

.entry-content h3 {

    margin-top: 35px;

    font-size: 27px;
}

.entry-content h4 {

    margin-top: 30px;

    font-size: 22px;
}

.entry-content p {

    margin:
        0
        0
        20px;
}

.entry-content ul,
.entry-content ol {

    margin-top: 0;

    margin-bottom: 25px;

    padding-left: 25px;
}

.entry-content li {

    margin-bottom: 8px;
}

.entry-content a {

    color:
        var(--iptv-red-light);
}

.entry-content a:hover {

    color: #ffffff;
}

.entry-content img {

    border-radius:
        var(--iptv-radius-small);
}


/* =========================================================
   HOMEPAGE
========================================================= */

.homepage {

    width: 100%;

    margin: 0;

    padding: 0;
}

.homepage-content {

    width: 100%;

    margin: 0;

    padding: 0;
}

.homepage-inner {

    width: 100%;

    margin: 0;

    padding: 0;
}


/*
   Elementor compatibility
*/

.homepage-inner .elementor {

    width: 100%;
}

.homepage-inner .elementor-section {

    width: 100%;
}

.homepage-inner .elementor-container {

    width: 100%;
}


/*
   Gutenberg full width
*/

.homepage-inner
.alignfull {

    width: 100%;

    max-width: none;

    margin-left: 0;

    margin-right: 0;
}


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

.button,
.btn,
.wp-block-button__link,
.wp-element-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding:
        10px
        24px;

    background:
        var(--iptv-red);

    color:
        #ffffff !important;

    border: 0;

    border-radius:
        var(--iptv-radius-small);

    font-weight: 800;

    transition:
        var(--iptv-transition);
}

.button:hover,
.btn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {

    background:
        var(--iptv-red-light);

    color:
        #ffffff !important;

    transform:
        translateY(-2px);

    box-shadow:
        var(--iptv-red-shadow);
}


/* =========================================================
   FORMS
========================================================= */

input,
textarea,
select {

    width: 100%;

    padding:
        13px
        15px;

    background:
        var(--iptv-dark-3);

    color:
        #ffffff;

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

    border-radius:
        var(--iptv-radius-small);

    outline: none;

    transition:
        var(--iptv-transition);
}

input:focus,
textarea:focus,
select:focus {

    border-color:
        var(--iptv-red);

    box-shadow:
        0
        0
        0
        3px
        rgba(
            229,
            9,
            20,
            0.10
        );
}

textarea {

    min-height: 150px;

    resize: vertical;
}

input[type="submit"],
button[type="submit"] {

    width: auto;

    padding:
        12px
        25px;

    background:
        var(--iptv-red);

    color:
        #ffffff;

    border: 0;

    border-radius:
        var(--iptv-radius-small);

    font-weight: 800;

    cursor: pointer;
}

input[type="submit"]:hover,
button[type="submit"]:hover {

    background:
        var(--iptv-red-light);
}


/* =========================================================
   POSTS / FALLBACK CONTENT
========================================================= */

.posts-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 25px;
}

.post-card {

    overflow: hidden;

    background:
        var(--iptv-dark-3);

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

    border-radius:
        var(--iptv-radius);

    transition:
        var(--iptv-transition);
}

.post-card:hover {

    transform:
        translateY(-5px);

    background:
        var(--iptv-dark-4);

    border-color:
        var(--iptv-red-border);

    box-shadow:
        var(--iptv-shadow);
}

.post-card-image img {

    width: 100%;

    aspect-ratio:
        16 / 9;

    object-fit: cover;
}

.post-card-content {

    padding: 25px;
}

.post-card-title {

    margin:
        0
        0
        12px;

    font-size: 22px;

    line-height: 1.25;
}

.post-card-title a:hover {

    color:
        var(--iptv-red-light);
}

.post-meta {

    margin-bottom: 15px;

    color:
        var(--iptv-muted);

    font-size: 13px;
}

.post-excerpt {

    margin-bottom: 20px;

    color:
        var(--iptv-muted);
}


/* =========================================================
   PAGE LINKS
========================================================= */

.page-links {

    margin-top: 30px;

    color:
        var(--iptv-muted);
}

.page-links a {

    color:
        var(--iptv-red-light);
}


/* =========================================================
   PAGINATION
========================================================= */

.navigation.pagination {

    margin-top: 50px;
}

.nav-links {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;
}

.page-numbers {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 42px;

    height: 42px;

    padding:
        0
        12px;

    background:
        var(--iptv-dark-3);

    color:
        #cccccc;

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

    border-radius:
        7px;
}

.page-numbers:hover,
.page-numbers.current {

    background:
        var(--iptv-red);

    border-color:
        var(--iptv-red);

    color:
        #ffffff;
}


/* =========================================================
   NO RESULTS
========================================================= */

.no-results {

    padding:
        100px
        0;

    text-align: center;
}

.no-results h1 {

    margin:
        0
        0
        15px;

    color:
        #ffffff;
}


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

.site-footer {

    margin-top: 70px;

    background:
        #030303;

    border-top:
        1px solid
        var(--iptv-border);
}

.footer-main {

    padding:
        65px
        0
        45px;
}

.footer-grid {

    display: grid;

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

    gap: 45px;
}

.footer-brand img,
.footer-logo img {

    width: auto;

    max-width: 190px;

    max-height: 60px;

    object-fit: contain;

    margin-bottom: 20px;
}

.footer-brand p {

    max-width: 380px;

    margin: 0;

    color:
        var(--iptv-muted);

    font-size: 14px;
}

.footer-title {

    margin:
        0
        0
        18px;

    color:
        #ffffff;

    font-size: 16px;

    font-weight: 800;
}

.footer-menu,
.footer-contact {

    list-style: none;

    margin: 0;

    padding: 0;
}

.footer-menu li,
.footer-contact li {

    margin-bottom: 9px;
}

.footer-menu a,
.footer-contact a {

    color:
        var(--iptv-muted);

    font-size: 14px;
}

.footer-menu a:hover,
.footer-contact a:hover {

    color:
        var(--iptv-red-light);
}


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

.footer-bottom {

    padding:
        20px
        0;

    border-top:
        1px solid
        var(--iptv-border);
}

.footer-bottom-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}

.copyright {

    color:
        #707070;

    font-size: 13px;
}

.footer-bottom-links {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;
}

.footer-bottom-links a {

    color:
        #777777;

    font-size: 13px;
}

.footer-bottom-links a:hover {

    color:
        #ffffff;
}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp-float {

    position: fixed;

    right: 22px;

    bottom: 22px;

    z-index: 9998;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    background:
        #25d366;

    color:
        #ffffff;

    border-radius: 50%;

    box-shadow:
        0
        10px
        30px
        rgba(
            0,
            0,
            0,
            0.35
        );

    font-size: 24px;
}

.whatsapp-float:hover {

    color:
        #ffffff;

    transform:
        translateY(-3px);
}


/* =========================================================
   SEARCH
========================================================= */

.search-form {

    display: flex;

    align-items: stretch;

    gap: 10px;
}

.search-form label {

    flex: 1;
}

.search-submit {

    flex-shrink: 0;
}


/* =========================================================
   COMMENTS
========================================================= */

.comments-area {

    margin-top: 50px;

    padding-top: 40px;

    border-top:
        1px solid
        var(--iptv-border);
}

.comment-list {

    margin: 0;

    padding: 0;

    list-style: none;
}

.comment {

    margin-bottom: 25px;

    padding: 20px;

    background:
        var(--iptv-dark-3);

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

    border-radius:
        var(--iptv-radius-small);
}


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

@media (max-width: 1100px) {

    .main-navigation a {

        padding-left: 9px;

        padding-right: 9px;

        font-size: 13px;
    }

    .header-cta {

        padding-left: 15px;

        padding-right: 15px;
    }

    .footer-grid {

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

    .posts-grid {

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


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

@media (max-width: 850px) {

    .container {

        width:
            calc(
                100% - 30px
            );
    }

    .header-inner {

        min-height: 70px;
    }

    .mobile-menu-toggle {

        display: block;

        order: 2;
    }

    .main-navigation {

        position: absolute;

        top:
            calc(
                100% + 8px
            );

        left: 15px;

        right: 15px;

        display: none;

        margin: 0;

        padding: 12px;

        background:
            #0b0b0b;

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

        border-radius:
            var(--iptv-radius);

        box-shadow:
            var(--iptv-shadow);
    }

    .main-navigation.is-open {

        display: block;
    }

    .main-navigation ul {

        flex-direction: column;

        align-items: stretch;

        gap: 2px;
    }

    .main-navigation a {

        width: 100%;

        justify-content: flex-start;

        padding:
            12px
            14px;
    }

    .header-cta {

        display: none;
    }

    .posts-grid {

        grid-template-columns: 1fr;
    }

    .footer-grid {

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


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

@media (max-width: 600px) {

    .container {

        width:
            calc(
                100% - 24px
            );
    }

    .site-logo img,
    .custom-logo {

        max-width: 155px;

        max-height: 48px;
    }

    .site-title {

        font-size: 20px;
    }

    .entry-title {

        font-size: 38px;
    }

    .entry-content h1 {

        font-size: 34px;
    }

    .entry-content h2 {

        font-size: 30px;
    }

    .entry-content h3 {

        font-size: 24px;
    }

    .footer-grid {

        grid-template-columns: 1fr;

        gap: 35px;
    }

    .footer-main {

        padding:
            50px
            0
            35px;
    }

    .footer-bottom-inner {

        flex-direction: column;

        align-items: flex-start;
    }

    .footer-bottom-links {

        gap: 12px;
    }

    .whatsapp-float {

        right: 15px;

        bottom: 15px;

        width: 50px;

        height: 50px;
    }
}