/*!
Theme Name: OGP
Theme URI: https://github.com/RipoN4/ogp
Author: RipoN
Author URI: https://github.com/RipoN4
Description: OGP is a Lightweight, Blazing Fast, SEO Friendly & Modern Video Streaming Theme for Web Series, Movie, Drama & TV Shows
Version: 5.0.1
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ogp
Tags: custom-background, custom-logo, custom-menu, featured-images

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

OGP is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
# Variables (Unified Dark Theme Palette)
--------------------------------------------------------------*/

:root {
    --bg: #0e1116;
    --surface: #171b22;
    --surface-2: #1e242e;
    --border: #2a3140;
    --text: #e8edf4;
    --muted: #b6bfcb;
    --accent: #88a7ff;
    --accent-hover: #345ee1;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

/*--------------------------------------------------------------
# Generic & Normalize
--------------------------------------------------------------*/

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    min-height: 100vh;
}

main {
    display: block;
    padding: 0 10px;
}

#page {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--surface);
    min-height: 100vh;
    box-shadow: var(--shadow);
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    color: var(--text);
    margin-top: 0;
    margin-bottom: 8px;
    font-weight: 600;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.25rem;
}

h3 {
    font-size: 1.1rem;
}

p {
    margin-bottom: 1rem;
    color: var(--text);
}

ul,
ol {
    margin: 0rem 0rem 1rem 2rem;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus,
a:active {
    color: var(--accent-hover);
    text-decoration: underline;
}

hr {
    box-sizing: content-box;
    height: 1px;
    background-color: var(--border);
    border: 0;
    margin: 1.5em 0;
}

/* Forms */
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
}

input,
textarea,
select {
    width: 100%;
    padding: 8px 12px;
    margin: 6px 0 12px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 5px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(73, 121, 255, 0.25);
}

/* Images & Videos */
img {
    max-width: 100%;
    height: auto;
    border-style: none;
}

video {
    width: 100%;
    outline: none;
    aspect-ratio: 16 / 9;
    background: var(--bg);
    border-radius: 4px;
    display: block;
}

/*--------------------------------------------------------------
# Header & Navigation
--------------------------------------------------------------*/

header#masthead {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.top-header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    gap: 12px;
}

h1.site-logo {
    margin: 0;
}

.site-logo a,
a.site-logo {
    margin: 0;
    color: var(--text);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1;
}

form.search-form {
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin: 0;
    transition: border-color 0.2s ease;
}

form.search-form:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(73, 121, 255, 0.25);
}

input.search-field {
    margin: 0;
    background: transparent;
    border: 0;
    padding: 0 12px;
    color: var(--text);
    height: 36px;
    box-shadow: none;
}

input.search-field::placeholder {
    color: var(--muted);
}

button.search-submit {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--border);
    margin: 0;
    padding: 8px 12px 4px;
    color: var(--muted);
    font-size: 18px;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
}

button.search-submit:hover {
    color: var(--accent-hover);
    background: transparent;
}

.menu {
    display: flex;
    align-items: center;
    gap: 0;
    width: 100%;
    background: var(--surface);
    border-top: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.menu::-webkit-scrollbar {
    display: none;
    height: 0;
}

.menu ul,
.menu ul.nav-menu {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: nowrap;
    min-width: 100%;
}

.menu li {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

.menu a {
    color: var(--text);
    font-size: 15px;
    font-weight: 500;
    padding: 10px 14px;
    white-space: nowrap;
    text-decoration: none;
    display: block;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.menu a:hover,
.menu a:focus,
.menu .current-menu-item>a,
.menu .current_page_item>a {
    color: var(--text);
    background: var(--surface-2);
}


/*--------------------------------------------------------------
# Video Cards & Grid
--------------------------------------------------------------*/

.videos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    padding-top: 10px;
}

a.video {
    list-style: none;
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: #fff;
    font-weight: 500;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: block;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

a.video:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow);
}

a.video img.vthumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    border: 0;
}

.licon {
    position: absolute;
    display: flex;
    gap: 3px;
    align-items: center;
    color: var(--text);
    background: rgb(0 0 0 / 51%);
    padding: 2px 7px;
    font-size: 12px;
    border-radius: 4px;
    backdrop-filter: blur(20px);
    font-weight: 400;
    border: 1px solid var(--border);
}

.time {
    top: 6px;
    left: 8px;
}

.ago {
    right: 8px;
    top: 6px;
}

h2.vtitle {
    color: #fff;
    padding: 6px 10px;
    position: absolute;
    background: rgba(0, 0, 0, 0.72);
    margin: 0;
    bottom: 0 !important;
    width: 100%;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    backdrop-filter: blur(8px);
}

/* Section Header */
h2.h {
    font-size: 18px;
    background: var(--surface);
    color: var(--text);
    padding: 8px 12px;
    margin: 10px -10px 0px -10px;
    text-align: center;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* Page Titles */
h1.page-title {
    margin: 10px 0;
    color: var(--text);
}

h1.stitle {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    color: var(--text);
    font-size: 24px;
    line-height: 1;
    padding: 10px;
    margin: 0;
}

/* Single Post Specifics */
.breadcrumb {
    padding: 6px 0;
    white-space: nowrap;
    overflow: hidden;
    color: var(--muted);
    font-size: 14px;
}

.breadcrumb a {
    color: var(--muted);
}

.breadcrumb a:hover {
    color: var(--accent-hover);
}

.taxonomy-meta {
    margin-bottom: 10px;
    color: var(--muted);
}

.taxonomy-meta a {
    color: var(--accent);
}

.taxonomy {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 0;
}

.taxonomy a {
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.taxonomy a:hover,
.taxonomy a:focus {
    border-color: var(--accent);
    color: var(--accent);
}

.cat:before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23e8edf4' d='M4.616 19q-.691 0-1.153-.462T3 17.384V6.616q0-.691.463-1.153T4.615 5h4.981l2 2h7.789q.69 0 1.153.463T21 8.616v8.769q0 .69-.462 1.153T19.385 19z'/%3E%3C/svg%3E");
    background-size: 15px 15px;
    margin-right: 4px;
}

.tag:before {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23e8edf4' d='M243.31 136L144 36.69A15.86 15.86 0 0 0 132.69 32H40a8 8 0 0 0-8 8v92.69A15.86 15.86 0 0 0 36.69 144L136 243.31a16 16 0 0 0 22.63 0l84.68-84.68a16 16 0 0 0 0-22.63m-96 96L48 132.69V48h84.69L232 147.31ZM96 84a12 12 0 1 1-12-12a12 12 0 0 1 12 12'/%3E%3C/svg%3E");
    background-size: 15px 15px;
    margin-right: 4px;
}

button.dlbtn {
    border: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    padding: 8px 24px;
    margin: 14px auto;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 500;
    font-size: 15px;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

button.dlbtn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

a.btnx,
.nav-links a {
    padding: 8px 24px;
    display: block;
    max-width: 160px;
    border-radius: 99px;
    margin: 10px auto;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    white-space: nowrap;
    text-align: center;
    font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

a.btnx:hover,
.nav-links a:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* Post Navigation */
.nav-links {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}



/*--------------------------------------------------------------
# Taxonomy Listing Pages (Table Format, Search & Sort)
--------------------------------------------------------------*/


.taxonomy-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
}

.taxonomy-search-wrap {
    flex: 1 1 260px;
    max-width: 360px;
}

.taxonomy-search-input {
    margin: 0;
    padding: 8px 14px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    width: 100%;
}

.taxonomy-search-input::placeholder {
    color: var(--muted);
}

.taxonomy-sort-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.taxonomy-sort-group .sort-label {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    margin-right: 2px;
}

.sort-btn {
    padding: 6px 12px;
    font-size: 13px;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sort-btn:hover {
    border-color: var(--accent-hover);
    color: var(--text);
    background: var(--accent-hover);
}

.sort-btn.active {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--text);
    font-weight: 500;
}

.taxonomy-count-summary {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}

.taxonomy-table-responsive {
    overflow-x: auto;
    margin: 0 -10px;
}

.taxonomy-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    border: 1px solid var(--border);
}

.taxonomy-table th {
    background: var(--surface-2);
    color: var(--text);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 10px;
    border: 1px solid var(--border);
}

.taxonomy-table td {
    padding: 5px 10px;
    border: 1px solid var(--border);
    vertical-align: middle;
}

.taxonomy-table tbody tr {
    transition: background-color 0.15s ease;
}

.taxonomy-table tbody tr:hover {
    background-color: var(--surface-2);
}

.taxonomy-table .col-num {
    width: 50px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
}

.taxonomy-table .col-name {
    font-size: 15px;
    font-weight: 500;
    padding: 0px;
}

.taxonomy-table .col-name a {
    color: var(--text);
    display: block;
    transition: color 0.2s ease;
    padding: 10px 14px;
}

.taxonomy-table .col-name a:hover {
    color: var(--accent);
}

.taxonomy-table .col-count {
    width: 50px;
    text-align: center;
}

.count-badge {
    font-weight: 600;
    font-size: 13px;
}

.taxonomy-empty-message {
    padding: 24px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

/*--------------------------------------------------------------
# Footer & Site-Info
--------------------------------------------------------------*/

footer,
.site-footer {
    text-align: center;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.site-footer p {
    margin: 0;
}

.footer-content {
    padding: 10px;
    margin: auto;
    border-bottom: 1px solid var(--border);
}

.footer-content .widget {
    margin-bottom: 12px;
}

.footer-content .widget:last-child {
    margin-bottom: 0;
}

.footer-content .widget-title {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
}

.footer-content p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.footer-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 7px 10px;
    color: var(--muted);
}


.footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-menu li {
    display: inline-flex;
    align-items: center;
}

.footer-menu a {
    color: var(--muted);
    font-size: 14px;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.2s ease;
}

.footer-menu a:hover,
.footer-menu a:focus {
    color: var(--accent-hover);
}

.site-copyright {
    font-size: 13px;
    color: var(--muted);
}

.site-copyright a {
    color: var(--muted);
    text-decoration: none;
}

.site-copyright a:hover {
    color: var(--accent-hover);
}

/* Screen Reader Only */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--surface);
    border-radius: 4px;
    border: 1px solid var(--border);
    clip: auto !important;
    clip-path: none;
    color: var(--accent);
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

@media only screen and (max-width: 600px) {
    .footer-bar {
        flex-direction: column;
    }
}

@media only screen and (max-width: 500px) {
    .videos {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/*--------------------------------------------------------------
# 404 Error Page
--------------------------------------------------------------*/

.error-404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 50px 20px 70px;
    min-height: 60vh;
}

.error-404-visual {
    max-width: 320px;
    width: 100%;
    margin-bottom: 24px;
}

.error-404-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.svg-digit {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 88px;
    font-weight: 800;
    fill: var(--text);
    letter-spacing: -2px;
}

.svg-ambient-glow {
    animation: pulseGlow 4s ease-in-out infinite alternate;
    transform-origin: 160px 80px;
}

.svg-center-zero {
    animation: floatZero 3.5s ease-in-out infinite;
    transform-origin: 160px 80px;
}

.svg-spin-ring {
    animation: spinRing 6s linear infinite;
    transform-origin: 160px 80px;
}

.svg-pulse-core {
    animation: pulseCore 2s ease-in-out infinite alternate;
    transform-origin: 160px 80px;
}

.svg-radar-beam {
    animation: sweepBeam 4s linear infinite;
    transform-origin: 160px 80px;
}

@keyframes floatZero {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes spinRing {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulseCore {
    0% {
        transform: scale(0.85);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.15);
        opacity: 1;
    }
}

@keyframes pulseGlow {
    0% {
        transform: scale(0.9);
        opacity: 0.4;
    }

    100% {
        transform: scale(1.2);
        opacity: 0.9;
    }
}

@keyframes sweepBeam {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.error-404-title {
    font-size: 1.75rem;
    margin-bottom: 8px;
    color: var(--text);
}

.error-404-desc {
    color: var(--muted);
    font-size: 0.95rem;
    margin-bottom: 24px;
    max-width: 420px;
}

.error-404-search {
    width: 100%;
    max-width: 380px;
    margin-bottom: 24px;
}

.error-404-input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    padding: 12px 18px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
}

.error-404-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(136, 167, 255, 0.15);
}

.error-404-input::placeholder {
    color: var(--muted);
    opacity: 0.7;
}

.btn-404-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: var(--accent);
    color: #0e1116;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-404-home:hover {
    background: #a3bdff;
    transform: translateY(-2px);
    color: #0e1116;
}