/* Neonz Theme - Main Stylesheet */
/* Author: Attanodsc | Version: 1.0.0 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root {
    --bg-dark: #121212;
    --bg-body: #0a0a0a;
    --bg-card: #1e1e1e;
    --bg-lighter: #2c2c2c;
    --bg-header: rgba(18, 18, 18, .95);
    --primary: #bb86fc;
    --secondary: #03dac6;
    --accent: #cf6679;
    --text-main: #fff;
    --text-muted: #b0b0b0;
    --text-body: #e0e0e0;
    --border-color: #333;
    --font-head: 'Chakra Petch', sans-serif;
    --font-body: 'Inter', sans-serif;
    --radius: 0;
    --radius-sm: 4px;
    --transition: .3s ease;
    --container: 1200px;
    --gap: 30px;
    --gap-sm: 20px;
    --gap-xs: 10px
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%
}

body {
    background-color: var(--bg-body);
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition)
}

a:hover {
    color: var(--primary)
}

ul,
ol {
    list-style: none
}

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

button {
    cursor: pointer;
    border: none;
    background: none
}

/* Text selection color */
::selection {
    background: var(--primary);
    color: #000
}

::-moz-selection {
    background: var(--primary);
    color: #000
}

/* ==========================================================================
   Typography
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-head);
    color: var(--text-main);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .5em;
    text-transform: uppercase;
    letter-spacing: 1px
}

h1 {
    font-size: clamp(2.5rem, 5vw, 4rem)
}

h2 {
    font-size: clamp(2rem, 4vw, 3rem)
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2rem)
}

h4 {
    font-size: clamp(1.25rem, 2vw, 1.5rem)
}

h5 {
    font-size: 1.1rem
}

h6 {
    font-size: 1rem
}

p {
    margin: 0 0 1.5em
}

strong {
    font-weight: 700;
    color: var(--text-main)
}

em {
    font-style: italic
}

blockquote {
    border-left: 4px solid var(--primary);
    padding: 20px 30px;
    margin: 30px 0;
    background: var(--bg-card);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--text-main)
}

blockquote p:last-child {
    margin-bottom: 0
}

code,
pre {
    font-family: 'Fira Code', monospace;
    background: var(--bg-card);
    border-radius: var(--radius-sm)
}

code {
    padding: 2px 6px;
    font-size: .9em
}

pre {
    padding: 20px;
    overflow-x: auto;
    margin: 20px 0
}

pre code {
    padding: 0;
    background: none
}

hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 40px 0
}

/* ==========================================================================
   Layout
   ========================================================================== */
/* Container */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%
}

.container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%
}

.container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%
}

/* Page wrapper - sticky footer */
#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

/* Site content wrapper */
.site-content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column
}

/* Main content */
#primary {
    flex: 1 0 auto
}

.site-main {
    padding: 60px 0
}

/* Single post thumbnail - contained width */
.single-thumbnail {
    max-width: var(--container);
    margin: 0 auto 40px;
    padding: 0 20px
}

.single-thumbnail img {
    width: 100%;
    max-height: 500px;
    object-fit: cover
}

/* Grid */
.grid {
    display: grid;
    gap: var(--gap)
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr)
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr)
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr)
}

.grid-sidebar {
    grid-template-columns: 1fr 350px;
    align-items: start
}

.sidebar {
    padding: 0
}

/* Flex utilities */
.flex {
    display: flex
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.flex-wrap {
    flex-wrap: wrap
}

.gap-sm {
    gap: var(--gap-sm)
}

.gap-xs {
    gap: var(--gap-xs)
}

/* ==========================================================================
   Header
   ========================================================================== */
/* Site header */
.site-header {
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 15px 0;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px
}

/* Logo */
.site-logo {
    font-family: var(--font-head);
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    display: inline-block
}

.site-logo .logo-text {
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.site-logo:hover {
    transform: scale(1.02)
}

.custom-logo-link {
    display: block
}

.custom-logo-link img {
    max-height: 50px;
    width: auto
}

/* Navigation */
.main-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 30px
}

.nav-menu {
    display: flex;
    gap: 30px;
    justify-content: center
}

.nav-menu li {
    position: relative
}

.nav-menu a {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--text-muted);
    font-size: .9rem;
    padding: 5px 0;
    text-transform: uppercase;
    letter-spacing: .5px
}

.nav-menu a:hover,
.nav-menu .current-menu-item>a,
.nav-menu .current_page_item>a {
    color: var(--text-main);
    text-shadow: 0 0 10px rgba(187, 134, 252, .5)
}

/* Submenu */
.nav-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-card);
    min-width: 200px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    border: 1px solid var(--border-color);
    z-index: 10
}

.nav-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.nav-menu .sub-menu a {
    display: block;
    padding: 10px 20px;
    font-size: .85rem
}

.nav-menu .sub-menu a:hover {
    background: var(--bg-lighter);
    color: var(--primary)
}

/* Search button */
.search-toggle {
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    transition: var(--transition)
}

.search-toggle:hover {
    color: var(--primary)
}

/* Header Search Dropdown */
.header-search {
    position: relative
}

.search-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 15px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all .3s ease;
    z-index: 100
}

.header-search.active .search-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.search-form {
    display: flex;
    gap: 0;
    align-items: stretch
}

.search-field {
    flex: 1;
    padding: 12px 15px;
    background: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-right: none;
    color: var(--text-main);
    font-size: .9rem;
    min-width: 0
}

.search-field:focus {
    outline: none;
    border-color: var(--primary)
}

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

.search-submit {
    padding: 12px 20px;
    background: var(--primary);
    border: none;
    color: #000;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap
}

.search-submit:hover {
    background: var(--secondary)
}

.header-search .search-field,
.search-dropdown .search-field {
    width: 280px;
    min-width: 280px;
    padding: 12px 15px;
    background: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-right: none;
    color: var(--text-main);
    font-size: .9rem
}

.search-field:focus {
    outline: none;
    border-color: var(--primary)
}

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

.search-submit {
    padding: 12px 20px;
    background: var(--primary);
    border: none;
    color: #000;
    font-size: .9rem;
    cursor: pointer;
    transition: var(--transition)
}

.search-submit:hover {
    background: var(--secondary)
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Site footer */
.site-footer {
    background: #000;
    border-top: 3px solid var(--primary);
    margin-top: auto;
    flex-shrink: 0
}

/* Footer widgets */
.footer-widgets {
    padding: 60px 0;
    border-bottom: 1px solid var(--border-color)
}

.footer-widgets-inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--gap)
}

.footer-widget {
    color: var(--text-muted)
}

/* Footer widgets - remove box background */
.footer-widget .widget {
    background: transparent;
    border: none;
    padding: 0
}

.footer-widget .widget-title {
    color: var(--text-main);
    font-size: .95rem !important;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary);
    text-transform: uppercase
}

.footer-widget a {
    color: var(--text-muted)
}

.footer-widget a:hover {
    color: var(--secondary)
}

.footer-widget ul li,
.footer-widgets .widget_nav_menu ul li {
    padding: 4px 0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.footer-widget ul li:last-child {
    border-bottom: none
}

/* Site Info Widget (Neonz Core) - Target all possible class names */
.neonz-site-info-widget,
.widget_neonz_site_info,
.footer-widget .neonz-site-info-widget,
.footer-widget .widget_neonz_site_info {
    max-width: 280px !important
}

/* Hide WordPress widget title for Site Info (we use our own) */
.neonz-site-info-widget>.widget-title,
.widget_neonz_site_info>.widget-title {
    display: none !important
}

/* Site Info inner container */
.site-info-widget {
    text-align: left;
    max-width: 280px;
    overflow: hidden
}

.site-info-widget .site-info-logo {
    margin-bottom: 15px;
    max-width: 160px
}

.site-info-widget .site-info-logo img {
    max-width: 100%;
    height: auto
}

.site-info-widget .site-info-title {
    font-family: var(--font-head);
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 15px;
    text-transform: uppercase
}

.site-info-widget .site-info-desc {
    color: var(--text-muted);
    font-size: .9rem;
    line-height: 1.6;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word
}

/* Footer bottom */
.footer-bottom {
    padding: 30px 0
}

.footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.footer-title .footer-brand {
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(45deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent
}

.footer-copyright {
    color: var(--text-muted);
    font-size: .85rem;
    margin: 0
}

.footer-copyright a {
    color: var(--primary)
}

.footer-copyright a:hover {
    color: var(--secondary)
}

/* Social links */
.social-links {
    display: flex;
    gap: 15px
}

.social-links a {
    color: var(--text-muted);
    font-size: 1.3rem;
    transition: var(--transition)
}

.social-links a:hover {
    color: var(--secondary);
    transform: translateY(-2px)
}

/* Footer Bottom Row */
.footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 0
}

.footer-title {
    font-family: var(--font-head);
    font-weight: 700
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-block;
    padding: 12px 30px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%)
}

.btn-primary {
    background: var(--primary);
    color: #000;
    border-color: var(--primary)
}

.btn-primary:hover {
    background: transparent;
    color: var(--primary)
}

.btn-secondary {
    background: transparent;
    border-color: var(--secondary);
    color: var(--secondary)
}

.btn-secondary:hover {
    background: var(--secondary);
    color: #000
}

.btn-accent {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent)
}

.btn-accent:hover {
    background: transparent;
    color: var(--accent)
}

.btn-outline {
    background: transparent;
    border-color: var(--text-main);
    color: var(--text-main)
}

.btn-outline:hover {
    background: var(--text-main);
    color: var(--bg-dark)
}

/* Button sizes */
.btn-sm {
    padding: 8px 20px;
    font-size: .8rem
}

.btn-lg {
    padding: 15px 40px;
    font-size: 1rem
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
    background: var(--bg-card);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border-bottom: 3px solid transparent;
    border-radius: 0 !important
}

.card:hover {
    transform: translateY(-5px);
    border-bottom-color: var(--secondary);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5)
}

.card-img {
    position: relative;
    overflow: hidden;
    height: 200px
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s;
    margin: 0 !important;
    border-radius: 0 !important
}

.card:hover .card-img img {
    transform: scale(1.1)
}

.card-content {
    padding: 20px
}

.card-title {
    font-size: 1.1rem;
    margin-bottom: 10px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.card-title a {
    color: var(--text-main) !important
}

.card-title a:hover {
    color: var(--secondary) !important
}

.card-excerpt {
    font-size: .9rem;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0
}

/* Category badge */
.category-badge {
    display: inline-block;
    background: var(--primary);
    color: #000 !important;
    padding: 4px 12px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .7rem;
    text-transform: uppercase;
    margin-bottom: 10px
}

.category-badge:hover {
    background: var(--secondary);
    color: #000
}

/* Platform tags */
.platform-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 10px
}

.platform-tag {
    font-size: .7rem;
    color: var(--text-muted);
    background: var(--bg-lighter);
    padding: 2px 8px;
    border-radius: var(--radius-sm)
}

/* ==========================================================================
   News Grid Block
   ========================================================================== */
.neonz-news-grid {
    margin: 15px 0 40px
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 15px
}

.section-title {
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-main)
}

.view-all {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 600;
    font-size: .9rem;
    transition: var(--transition)
}

.view-all:hover {
    color: var(--secondary)
}

.view-all i {
    transition: var(--transition)
}

.view-all:hover i {
    transform: translateX(5px)
}

/* List View */
.nz-news-list {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.nz-news-list-item {
    display: flex;
    gap: 0;
    background: var(--bg-card);
    border-left: 3px solid transparent;
    transition: var(--transition);
    height: 120px;
    border-radius: 0 !important
}

.has-excerpt .nz-news-list-item {
    height: 160px
}

.nz-news-list-img {
    flex-shrink: 0;
    width: 200px;
    height: 100%;
    overflow: hidden
}

.nz-news-list-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
    border-radius: 0 !important
}

.nz-news-list-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 15px
}

.nz-news-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: .75rem;
    color: var(--text-muted);
    margin-bottom: 5px !important
}

.nz-news-list-meta span {
    display: flex;
    align-items: center;
    gap: 5px
}

.nz-news-list-meta i {
    color: var(--primary);
    font-size: .7rem
}

.nz-news-list-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px;
    line-height: 1.4
}

.nz-news-list-title a {
    color: var(--text-main) !important
}

.nz-news-list-title a:hover {
    color: var(--secondary) !important
}

.nz-news-list-excerpt {
    font-size: .85rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.category-badge-sm {
    display: inline-block;
    width: auto;
    font-size: .65rem;
    padding: 2px 8px;
    margin-bottom: 8px;
    color: #000
}

/* Card Meta */
.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    font-size: .75rem;
    color: var(--text-muted);
    margin-bottom: 5px !important
}

/* News Grid spacing fixes */
.neonz-news-grid .category-badge {
    margin-bottom: 5px !important
}

/* Fix category badge color in list view */
.neonz-news-grid .nz-news-list-item .category-badge {
    color: #000 !important;
    margin-left: 2px !important;
    padding-left: 12px !important
}

.neonz-news-grid .card-title,
.neonz-news-grid .nz-news-list-title {
    margin-top: 0 !important
}

.card-meta span {
    display: flex;
    align-items: center;
    gap: 5px
}

.card-meta i {
    color: var(--primary);
    font-size: .7rem
}

/* Load More */
.news-grid-loadmore {
    text-align: center;
    margin-top: 40px
}

.news-grid-loadmore .btn {
    clip-path: none
}

/* Pagination */
.news-grid-pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 40px
}

.news-grid-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-weight: 600;
    transition: var(--transition)
}

.news-grid-pagination .page-numbers:hover,
.news-grid-pagination .page-numbers.current {
    background: var(--primary);
    border-color: var(--primary);
    color: #000
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */
.breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 15px 0;
    margin-bottom: 20px;
    font-size: .85rem;
    color: var(--text-muted)
}

.breadcrumbs a {
    color: var(--text-muted);
    transition: var(--transition)
}

.breadcrumbs a:hover {
    color: var(--primary)
}

.breadcrumb-home i {
    margin-right: 5px
}

.breadcrumb-sep {
    color: var(--primary);
    font-size: .7rem
}

.breadcrumb-current {
    color: var(--secondary);
    font-weight: 600
}

/* Page subtitle */
.page .entry-title {
    margin-bottom: 10px
}

.page .entry-subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin: 0 0 20px;
    font-weight: 400;
    font-style: normal
}

/* ==========================================================================
   Section Components
   ========================================================================== */
/* Section header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 0 30px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 15px
}

.section-title {
    font-size: 2rem;
    margin: 0;
    border-left: 5px solid var(--primary);
    padding-left: 20px;
    text-transform: uppercase
}

.section-link {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--secondary);
    text-transform: uppercase;
    font-size: .9rem
}

.section-link:hover {
    color: var(--primary)
}

.section-link i {
    margin-left: 5px
}

/* Text section with accent */
.text-section {
    background: var(--bg-card);
    padding: 40px;
    border-left: 4px solid var(--accent);
    margin: 40px 0
}

.text-section-title {
    color: var(--accent);
    margin-bottom: 15px
}

.text-section p:last-child {
    margin-bottom: 0
}

/* Accent box */
.accent-box {
    background: linear-gradient(135deg, rgba(187, 134, 252, .1) 0%, rgba(3, 218, 198, .1) 100%);
    border: 1px solid var(--primary);
    padding: 30px;
    margin: 30px 0
}

.accent-box-secondary {
    border-color: var(--secondary)
}

.accent-box-accent {
    border-color: var(--accent)
}

/* ==========================================================================
   Posts / Content
   ========================================================================== */


/* Entry subtitle (Neonz Core) */
.entry-subtitle {
    font-size: 1.2rem;
    color: var(--text-muted);
    font-style: italic;
    margin: -5px 0 15px;
    line-height: 1.5
}

/* Post source (Neonz Core) */
.post-source {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    margin: 25px 0;
    font-size: .85rem;
    font-style: italic
}

.post-source .source-label {
    color: var(--text-muted);
    font-weight: 400
}

.post-source .source-label i {
    display: none
}

.post-source .source-link {
    color: var(--secondary);
    font-weight: 400
}

.post-source .source-link:hover {
    color: var(--primary)
}

.post-source .source-link i {
    font-size: .75rem;
    margin-left: 5px
}

/* Post meta wrapper */
.entry-meta-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-top: 15px
}



.reading-time {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: .9rem
}

.reading-time i {
    color: var(--primary);
    font-size: .8rem
}

/* Post thumbnail */
.post-thumbnail {
    margin-bottom: 30px;
    overflow: hidden
}

.post-thumbnail img {
    width: 100%;
    transition: var(--transition)
}

.post-thumbnail:hover img {
    transform: scale(1.02)
}

/* Entry content */
.entry-content {
    font-size: 1.05rem;
    line-height: 1.8
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 40px;
    color: var(--primary)
}

.entry-content a {
    color: var(--secondary);
    border-bottom: 1px solid transparent
}

.entry-content a:hover {
    border-bottom-color: var(--secondary)
}

.entry-content ul,
.entry-content ol {
    margin: 20px 0;
    padding-left: 30px
}

.entry-content ul {
    list-style: disc
}

.entry-content ol {
    list-style: decimal
}

.entry-content li {
    margin-bottom: 10px
}

.entry-content img {
    border-radius: var(--radius-sm);
    margin: 30px 0
}

.entry-content figure {
    margin: 30px 0
}

.entry-content figcaption {
    color: var(--text-muted);
    font-size: .9rem;
    text-align: center;
    margin-top: 10px
}

/* Tag list */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0
}

.tag-item {
    background: var(--bg-lighter);
    color: var(--text-muted);
    padding: 5px 15px;
    font-size: .85rem;
    transition: var(--transition)
}

.tag-item:hover {
    background: var(--primary);
    color: #000
}

/* Author Box */
.author-box {
    display: flex;
    gap: 25px;
    padding: 30px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
    margin: 40px 0
}

.author-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary)
}

.author-info {
    flex: 1
}

.author-name {
    font-family: var(--font-head);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 10px
}

.author-name a {
    color: var(--text-main)
}

.author-name a:hover {
    color: var(--primary)
}

.author-bio {
    color: var(--text-muted);
    font-size: .95rem;
    line-height: 1.6;
    margin: 0 0 15px
}

.author-social {
    display: flex;
    gap: 12px
}

.author-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-lighter);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: .9rem;
    transition: var(--transition)
}

.author-social a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #000;
    transform: translateY(-2px)
}

/* Social share */
.social-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    padding: 25px 0;
    border-top: 1px solid var(--border-color);
    margin-top: 30px
}

.share-label {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: .85rem
}

.share-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-lighter);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: all .3s ease
}

.share-btn:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    color: #fff
}

/* Platform specific hover colors */
.share-x:hover {
    background: #000;
    border-color: #000
}

.share-facebook:hover {
    background: #1877f2;
    border-color: #1877f2
}

.share-reddit:hover {
    background: #ff4500;
    border-color: #ff4500
}

.share-whatsapp:hover {
    background: #25d366;
    border-color: #25d366
}

.share-telegram:hover {
    background: #0088cc;
    border-color: #0088cc
}

.share-copy:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #000
}

.share-copy.copied {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #000
}

/* ==========================================================================
   Post Navigation (Prev/Next)
   ========================================================================== */
.post-navigation {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color)
}

.post-navigation .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    background: var(--bg-card);
    padding: 25px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
    position: relative;
    overflow: hidden
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(187, 134, 252, .2)
}

.post-navigation .nav-next {
    text-align: right
}

.post-navigation a {
    display: block;
    text-decoration: none
}

.post-navigation .nav-label {
    display: block;
    font-family: var(--font-head);
    font-size: .75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
    letter-spacing: 1px
}

.post-navigation .nav-previous .nav-label::before {
    content: '\f053';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 8px;
    color: var(--primary)
}

.post-navigation .nav-next .nav-label::after {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-left: 8px;
    color: var(--primary)
}

.post-navigation .nav-title {
    display: block;
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.post-navigation .nav-previous:hover .nav-title,
.post-navigation .nav-next:hover .nav-title {
    color: var(--primary)
}

@media (max-width:768px) {
    .post-navigation .nav-links {
        grid-template-columns: 1fr
    }

    .post-navigation .nav-next {
        text-align: left
    }

    .post-navigation .nav-next .nav-label::after {
        content: none
    }

    .post-navigation .nav-next .nav-label::before {
        content: '\f054';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        margin-right: 8px;
        color: var(--primary)
    }
}

/* ==========================================================================
   Sidebar / Widgets
   ========================================================================== */
.sidebar {
    padding: 0
}

.widget {
    background: var(--bg-card);
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid var(--border-color)
}

.widget-title,
.widget .widget-title,
.sidebar .widget-title,
h3.widget-title,
h4.widget-title,
.widget h3,
.widget h4,
.sidebar h3,
.sidebar h4,
.wp-block-heading,
.widget .wp-block-heading {
    font-size: 1.05rem !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary);
    text-transform: uppercase
}

.widget ul li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05)
}

.widget ul li:last-child {
    border-bottom: none
}

.widget a {
    color: var(--text-muted)
}

.widget a:hover {
    color: var(--secondary)
}

/* Search widget */
.search-form {
    display: flex
}

.search-form input[type="search"] {
    flex: 1;
    padding: 12px 15px;
    background: var(--bg-lighter);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-family: var(--font-body)
}

.search-form input[type="search"]:focus {
    border-color: var(--primary);
    outline: none
}

.search-form button,
.search-form input[type="submit"],
.wp-block-search__button,
.widget_search button,
.widget_search input[type="submit"] {
    background: var(--primary);
    color: #000;
    padding: 12px 20px;
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: var(--transition)
}

.search-form button:hover,
.search-form input[type="submit"]:hover,
.wp-block-search__button:hover,
.widget_search button:hover,
.widget_search input[type="submit"]:hover {
    background: var(--secondary);
    color: #000
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 40px 0
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    background: var(--bg-card);
    color: var(--text-muted);
    font-family: var(--font-head);
    font-weight: 600;
    border: 1px solid var(--border-color);
    transition: var(--transition)
}

.pagination a:hover {
    background: var(--primary);
    color: #000;
    border-color: var(--primary)
}

.pagination .current {
    background: var(--primary);
    color: #000;
    border-color: var(--primary)
}

/* ==========================================================================
   Forms
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    width: 100%;
    padding: 12px 15px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    font-family: var(--font-body);
    transition: var(--transition)
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 10px rgba(187, 134, 252, .2)
}

textarea {
    min-height: 150px;
    resize: vertical
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-main)
}

/* ==========================================================================
   Comments
   ========================================================================== */
.comments-area {
    margin-top: 60px
}

.comments-title {
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 15px;
    margin-bottom: 30px
}

.comment-list {
    margin: 0;
    padding: 0
}

.comment {
    padding: 20px;
    background: var(--bg-card);
    margin-bottom: 20px
}

.comment .comment {
    margin-left: 40px;
    margin-top: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px
}

.comment-author img {
    border-radius: 50%;
    border: 2px solid var(--border-color)
}

.comment-author .fn {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--text-main)
}

.comment-author .says {
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 5px
}

.comment-meta {
    color: var(--text-muted);
    font-size: .85rem
}

.comment-content {
    color: var(--text-body)
}

.comment-reply-link {
    color: var(--text-muted);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase
}

.comment-reply-link:hover {
    color: var(--text-main)
}

/* Comment form */
.comment-form {
    margin-top: 40px
}

.comment-form label {
    display: block;
    margin-bottom: 8px
}

.comment-form .form-submit {
    margin-top: 20px
}

.comment-form .submit {
    background: var(--primary);
    color: #000;
    padding: 12px 30px;
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid var(--primary);
    cursor: pointer;
    transition: var(--transition)
}

.comment-form .submit:hover {
    background: transparent;
    color: var(--primary)
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.text-primary {
    color: var(--primary)
}

.text-secondary {
    color: var(--secondary)
}

.text-accent {
    color: var(--accent)
}

.text-muted {
    color: var(--text-muted)
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.mt-0 {
    margin-top: 0
}

.mb-0 {
    margin-bottom: 0
}

.mt-1 {
    margin-top: 10px
}

.mt-2 {
    margin-top: 20px
}

.mt-3 {
    margin-top: 40px
}

.mb-1 {
    margin-bottom: 10px
}

.mb-2 {
    margin-bottom: 20px
}

.mb-3 {
    margin-bottom: 40px
}

.hidden {
    display: none
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    padding: 10px 20px;
    background: var(--primary);
    color: #000;
    font-weight: 700;
    z-index: 999
}

.skip-link:focus {
    top: 0
}

/* Screen reader text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important
}

.screen-reader-text:focus {
    background: #f1f1f1;
    border-radius: 3px;
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000
}

/* ==========================================================================
   Gutenberg Block Styles
   ========================================================================== */
/* Neon glow button */
.wp-block-button.is-style-neonz-glow .wp-block-button__link {
    box-shadow: 0 0 20px rgba(187, 134, 252, .4)
}

.wp-block-button.is-style-neonz-glow .wp-block-button__link:hover {
    box-shadow: 0 0 30px rgba(187, 134, 252, .6)
}

/* Clipped button */
.wp-block-button.is-style-neonz-clipped .wp-block-button__link {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%);
    border-radius: 0
}

/* Neon border image */
.wp-block-image.is-style-neonz-border img {
    border: 2px solid var(--primary);
    box-shadow: 0 0 20px rgba(187, 134, 252, .3)
}

/* Card group */
.wp-block-group.is-style-neonz-card {
    background: var(--bg-card);
    padding: 30px;
    border-bottom: 3px solid var(--secondary)
}

/* Accent section */
.wp-block-group.is-style-neonz-accent {
    background: var(--bg-card);
    padding: 30px 40px;
    border-left: 4px solid var(--accent)
}

/* Accent underline heading */
.wp-block-heading.is-style-neonz-underline {
    border-left: 5px solid var(--primary);
    padding-left: 20px
}

/* Neon quote */
.wp-block-quote.is-style-neonz-neon {
    border-left-color: var(--secondary);
    background: var(--bg-card);
    box-shadow: 0 0 20px rgba(3, 218, 198, .1)
}

/* Wide/Full alignments */
.alignwide {
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto
}

.alignfull {
    width: 100%;
    max-width: 100%
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Tablet */
@media (max-width:1024px) {
    .container {
        padding: 0 15px
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr)
    }

    .grid-sidebar {
        grid-template-columns: 1fr
    }

    .footer-widgets-inner {
        grid-template-columns: repeat(2, 1fr)
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px
    }
}

/* Mobile */
@media (max-width:768px) {
    :root {
        --gap: 20px
    }

    h1 {
        font-size: 2rem
    }

    h2 {
        font-size: 1.75rem
    }

    .site-header {
        padding: 10px 0
    }

    .header-inner {
        flex-wrap: wrap
    }

    .main-navigation {
        display: none
    }

    .main-navigation.active {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: var(--bg-dark) !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 0;
        z-index: 9999 !important;
        padding: 80px 20px 20px;
        overflow-y: auto
    }

    .nav-menu {
        flex-direction: column;
        gap: 0;
        width: 100%;
        text-align: center
    }

    .nav-menu a {
        display: block;
        padding: 15px 0;
        font-size: 1.2rem;
        border-bottom: none
    }

    .menu-toggle {
        display: block;
        order: -1;
        margin-right: 20px;
        z-index: 10000;
        position: relative
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr
    }

    .footer-widgets-inner {
        grid-template-columns: 1fr
    }

    .footer-inner {
        flex-direction: column;
        gap: 20px;
        text-align: center
    }

    .card-img {
        height: 180px
    }

    .btn {
        padding: 10px 20px
    }

    .section-title {
        font-size: 1.5rem
    }

    .text-section {
        padding: 25px
    }

    .widget {
        padding: 20px
    }

    .comment .comment {
        margin-left: 20px
    }

    /* Mobile List View */
    .nz-news-list-item {
        height: auto;
        min-height: 100px
    }

    .nz-news-list-img {
        width: 100px;
        min-width: 100px
    }

    .nz-news-list-content {
        padding: 10px
    }

    .nz-news-list-title {
        font-size: .85rem;
        line-height: 1.3;
        margin-bottom: 5px
    }

    .nz-news-list-meta {
        gap: 8px;
        font-size: .65rem
    }

    .nz-news-list-excerpt {
        display: none
    }

    .has-excerpt .nz-news-list-item {
        height: auto
    }

    /* Mobile Footer Bottom */
    .footer-bottom-row {
        flex-direction: column;
        gap: 15px;
        text-align: center
    }

    .footer-title {
        order: 1
    }

    .footer-copyright {
        order: 2;
        font-size: .8rem
    }

    .social-links {
        order: 3
    }
}

/* Small mobile */
@media (max-width:480px) {
    .container {
        padding: 0 10px
    }

    .site-logo {
        font-size: 1.4rem
    }

    .social-share {
        flex-direction: column;
        align-items: flex-start
    }
}

/* ==========================================================================
   Back to Top Button
   ========================================================================== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: 0;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s, background .3s;
    display: flex;
    align-items: center;
    justify-content: center
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible
}

.back-to-top:hover {
    background: var(--secondary)
}

@media (max-width:768px) {
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px
    }

    .footer-widgets-inner {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:1200px) {
    .footer-widgets-inner {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width:480px) {
    .footer-widgets-inner {
        grid-template-columns: 1fr
    }
}

/* ==========================================================================
   Review Box Block
   ========================================================================== */
.review-box {
    background: var(--bg-card);
    border: 3px solid var(--primary);
    padding: 30px;
    margin: 30px 0
}

.review-box-title {
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 20px;
    color: #fff !important;
    text-align: center
}

.review-box-content {
    display: flex;
    gap: 30px;
    align-items: flex-start
}

.review-box-score {
    font-family: var(--font-head);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0
}

.review-box-details {
    flex: 1
}

.review-box-summary {
    color: var(--text-body);
    font-style: italic;
    margin: 0 0 20px;
    line-height: 1.7
}

.review-box-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}

.review-box-pros h4,
.review-box-cons h4 {
    font-family: var(--font-head);
    font-size: .9rem;
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: 1px
}

.review-box-pros h4 {
    color: #4ade80
}

.review-box-cons h4 {
    color: #ef4444
}

.review-box-pros ul,
.review-box-cons ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.review-box-pros li,
.review-box-cons li {
    color: var(--text-body);
    margin-bottom: 8px;
    font-size: .95rem
}

.review-box-pros li {
    color: #4ade80
}

.review-box-cons li {
    color: #ef4444
}

/* Review Box Mobile */
@media (max-width: 768px) {
    .review-box-content {
        flex-direction: column;
        text-align: center
    }

    .review-box-score {
        font-size: 3rem;
        width: 100%
    }

    .review-box-lists {
        grid-template-columns: 1fr;
        text-align: left
    }
}

/* ==========================================================================
   Neonz Posts Widget
   ========================================================================== */
.neonz-posts-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.neonz-posts-item {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color)
}

.neonz-posts-item:last-child {
    border-bottom: none
}

.neonz-posts-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    overflow: hidden
}

.neonz-posts-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.neonz-posts-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.neonz-posts-title {
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.neonz-posts-title:hover {
    color: var(--primary)
}

.neonz-posts-date {
    font-size: .8rem;
    color: var(--text-muted)
}

.neonz-posts-cat {
    font-size: .7rem;
    color: var(--primary);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .5px
}

.neonz-posts-comments {
    font-size: .8rem;
    color: var(--text-muted)
}

.neonz-posts-comments i {
    margin-right: 3px
}

/* ==========================================================================
   Neonz Social Widget
   ========================================================================== */
.neonz-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.neonz-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-size: 1rem;
    transition: var(--transition)
}

.neonz-social-links.filled .neonz-social-link {
    background: var(--bg-elevated);
    color: var(--text-main)
}

.neonz-social-links.filled .neonz-social-link:hover {
    background: var(--primary);
    color: #000
}

.neonz-social-links.outline .neonz-social-link {
    border: 2px solid var(--border-color);
    color: var(--text-main);
    background: transparent
}

/* Outline style - brand colors on hover (no fill) */
.neonz-social-links.outline .neonz-social-link.facebook:hover {
    border-color: #1877f2;
    color: #1877f2
}

.neonz-social-links.outline .neonz-social-link.twitter:hover {
    border-color: #fff;
    color: #fff
}

.neonz-social-links.outline .neonz-social-link.instagram:hover {
    border-color: #e4405f;
    color: #e4405f
}

.neonz-social-links.outline .neonz-social-link.youtube:hover {
    border-color: #ff0000;
    color: #ff0000
}

.neonz-social-links.outline .neonz-social-link.tiktok:hover {
    border-color: #fff;
    color: #fff
}

.neonz-social-links.outline .neonz-social-link.discord:hover {
    border-color: #5865f2;
    color: #5865f2
}

.neonz-social-links.outline .neonz-social-link.twitch:hover {
    border-color: #9146ff;
    color: #9146ff
}

.neonz-social-links.outline .neonz-social-link.linkedin:hover {
    border-color: #0a66c2;
    color: #0a66c2
}

/* Filled style - brand colors with background fill */
.neonz-social-links.filled .neonz-social-link.facebook:hover {
    background: #1877f2;
    color: #fff
}

.neonz-social-links.filled .neonz-social-link.twitter:hover {
    background: #000;
    color: #fff
}

.neonz-social-links.filled .neonz-social-link.instagram:hover {
    background: #e4405f;
    color: #fff
}

.neonz-social-links.filled .neonz-social-link.youtube:hover {
    background: #ff0000;
    color: #fff
}

.neonz-social-links.filled .neonz-social-link.tiktok:hover {
    background: #000;
    color: #fff
}

.neonz-social-links.filled .neonz-social-link.discord:hover {
    background: #5865f2;
    color: #fff
}

.neonz-social-links.filled .neonz-social-link.twitch:hover {
    background: #9146ff;
    color: #fff
}

.neonz-social-links.filled .neonz-social-link.linkedin:hover {
    background: #0a66c2;
    color: #fff
}

/* ==========================================================================
   Related Posts
   ========================================================================== */
.related-posts {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px solid var(--border-color)
}

.related-posts-title {
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 25px;
    color: var(--text-main)
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px
}

.related-post-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: var(--transition)
}

.related-post-item:hover {
    border-color: var(--primary)
}

.related-post-thumb {
    display: block;
    aspect-ratio: 16/9;
    overflow: hidden
}

.related-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition)
}

.related-post-item:hover .related-post-thumb img {
    transform: scale(1.05)
}

.related-post-content {
    padding: 15px
}

.related-post-title {
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 10px;
    line-height: 1.4
}

.related-post-title a {
    color: var(--text-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.related-post-title a:hover {
    color: var(--primary)
}

.related-post-date {
    font-size: .8rem;
    color: var(--text-muted)
}

/* Related Posts Mobile */
@media (max-width: 768px) {
    .related-posts-grid {
        grid-template-columns: 1fr
    }
}

/* ==========================================================================
   Hero Slider
   ========================================================================== */
.hero-slider-section {
    margin-bottom: 40px
}

.hero-slider {
    width: 100%;
    height: 450px;
    overflow: hidden
}

.hero-slide {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: var(--bg-card);
    position: relative
}

.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, .1) 100%)
}

.hero-slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px;
    z-index: 2
}

.hero-slide-category {
    display: inline-block;
    background: var(--primary);
    color: #000;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 12px;
    margin-bottom: 15px;
    letter-spacing: 1px
}

.hero-slide-title {
    font-family: var(--font-head);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 15px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.hero-slide-meta {
    font-size: .9rem;
    color: var(--text-muted)
}

/* Swiper Navigation */
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
    color: var(--text-main);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, .5);
    transition: var(--transition)
}

.hero-slider .swiper-button-prev:hover,
.hero-slider .swiper-button-next:hover {
    background: var(--primary);
    color: #000
}

.hero-slider .swiper-button-prev::after,
.hero-slider .swiper-button-next::after {
    font-size: 1.2rem
}

/* Swiper Pagination */
.hero-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--text-muted);
    opacity: .5;
    transition: var(--transition)
}

.hero-slider .swiper-pagination-bullet-active {
    background: var(--primary);
    opacity: 1
}

/* Hero Slider Mobile */
@media (max-width: 768px) {
    .hero-slider {
        height: 350px
    }

    .hero-slide-content {
        padding: 25px
    }

    .hero-slide-title {
        font-size: 1.4rem
    }

    .hero-slider .swiper-button-prev,
    .hero-slider .swiper-button-next {
        display: none
    }
}

/* ==========================================================================
   Post Navigation Fix
   ========================================================================== */
.navigation.post-navigation {
    border-top: none;
    margin-top: 0
}

/* ==========================================================================
   Comment Form Checkbox Fix
   ========================================================================== */
.comment-form-cookies-consent {
    display: flex;
    align-items: baseline;
    gap: 8px
}

.comment-form-cookies-consent input[type="checkbox"] {
    flex-shrink: 0
}

/* ==========================================================================
   Topbar
   ========================================================================== */
.site-topbar {
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border-color);
    font-size: .85rem
}

.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px
}

/* Topbar Menu */
.topbar-nav {
    flex: 1
}

.topbar-menu {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0
}

.topbar-menu li a {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition)
}

.topbar-menu li a:hover {
    color: var(--primary)
}

/* Topbar Social */
.topbar-social {
    display: flex;
    gap: 12px;
    align-items: center
}

.topbar-social a {
    color: var(--text-muted);
    font-size: 1rem;
    transition: var(--transition)
}

.topbar-social a:hover {
    color: var(--primary)
}

/* Topbar Mobile */
@media (max-width: 768px) {
    .site-topbar {
        display: none
    }
}

/* ==========================================================================
   Breaking News Bar
   ========================================================================== */
.breaking-news-bar {
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden
}

.breaking-inner {
    display: flex;
    align-items: center;
    padding: 6px 20px;
    gap: 12px
}

.breaking-label {
    background: var(--primary);
    color: #000;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    white-space: nowrap;
    letter-spacing: .5px
}

.breaking-ticker {
    flex: 1;
    overflow: hidden;
    position: relative
}

.ticker-content {
    display: flex;
    gap: 40px;
    animation: ticker linear infinite;
    width: max-content
}

.breaking-ticker:hover .ticker-content {
    animation-play-state: paused
}

.ticker-item {
    color: var(--text-body);
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--font-head);
    font-size: .85rem;
    transition: var(--transition)
}

.ticker-item:hover {
    color: var(--primary)
}

.ticker-item::after {
    content: '•';
    margin-left: 40px;
    color: var(--primary)
}

/* Breaking News - Colored Style */
.breaking-colored {
    border-bottom: none
}

.breaking-colored .breaking-label {
    background: rgba(0, 0, 0, .3);
    color: #fff
}

.breaking-colored .ticker-item {
    color: #fff
}

.breaking-colored .ticker-item:hover {
    color: rgba(255, 255, 255, .7)
}

.breaking-colored .ticker-item::after {
    color: rgba(255, 255, 255, .5)
}

.ticker-item:last-child::after {
    content: ''
}

@keyframes ticker {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-50%)
    }
}

/* Breaking News Mobile */
@media (max-width: 768px) {
    .breaking-inner {
        padding: 8px 15px
    }

    .breaking-label {
        font-size: .7rem;
        padding: 4px 8px
    }
}

/* ==========================================================================
   Menu Style: Underline
   ========================================================================== */
.menu-style-underline .nav-menu li a {
    position: relative;
    padding-bottom: 5px
}

.menu-style-underline .nav-menu li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: var(--transition)
}

.menu-style-underline .nav-menu li a:hover::after,
.menu-style-underline .nav-menu li.current-menu-item>a::after {
    width: 100%
}

/* ==========================================================================
   Menu Style: Border Fill
   ========================================================================== */
.menu-style-border_fill .nav-menu li a {
    padding: 8px 15px;
    border: 2px solid transparent;
    transition: var(--transition)
}

.menu-style-border_fill .nav-menu li a:hover,
.menu-style-border_fill .nav-menu li.current-menu-item>a {
    border-color: var(--primary);
    background: var(--primary);
    color: #000
}

/* ==========================================================================
   Button Style: Cut Corner
   ========================================================================== */
.button-style-cut_corner .btn,
.button-style-cut_corner button[type="submit"],
.button-style-cut_corner input[type="submit"],
.button-style-cut_corner .wp-block-button__link {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%)
}

.button-style-cut_corner .btn:hover,
.button-style-cut_corner button[type="submit"]:hover,
.button-style-cut_corner input[type="submit"]:hover,
.button-style-cut_corner .wp-block-button__link:hover {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%)
}

/* ==========================================================================
   Cookie Notice
   ========================================================================== */
.cookie-notice {
    position: fixed;
    bottom: 20px;
    left: 20px;
    max-width: 380px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    z-index: 9999;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
    animation: cookieSlideIn .3s ease
}

@keyframes cookieSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.cookie-notice-inner {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.cookie-text {
    margin: 0;
    font-size: .9rem;
    color: var(--text-body);
    line-height: 1.5
}

.cookie-actions {
    display: flex;
    align-items: center;
    gap: 15px
}

.cookie-learn-more {
    color: var(--text-muted);
    font-size: .85rem;
    text-decoration: underline;
    transition: var(--transition)
}

.cookie-learn-more:hover {
    color: var(--primary)
}

.cookie-accept {
    padding: 8px 20px;
    font-size: .85rem;
    background: var(--primary);
    color: #000;
    border: none;
    font-weight: 600
}

.cookie-accept:hover {
    background: #fff;
    color: #000
}

.cookie-reject {
    padding: 8px 16px;
    font-size: .85rem;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color)
}

.cookie-reject:hover {
    border-color: var(--text-muted);
    color: var(--text-main)
}

/* Cookie Notice Mobile */
@media (max-width: 480px) {
    .cookie-notice {
        left: 10px;
        right: 10px;
        bottom: 10px;
        max-width: none
    }
}

/* ==========================================================================
   WordPress Recommended Classes
   ========================================================================== */

/* Sticky Posts */
.sticky {
    position: relative
}

.sticky::before {
    content: '\f005';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--primary);
    font-size: 1rem
}

/* Image Captions */
.wp-caption {
    max-width: 100%;
    margin-bottom: 1.5rem
}

.wp-caption img {
    display: block;
    width: 100%;
    height: auto
}

.wp-caption-text {
    font-size: .85rem;
    color: var(--text-muted);
    padding: .5rem 0;
    text-align: center;
    font-style: italic
}

/* Gallery Caption */
.gallery-caption {
    font-size: .85rem;
    color: var(--text-muted);
    padding: .5rem;
    text-align: center
}

/* Comment Author Highlight */
.bypostauthor {
    position: relative
}

/* Content Alignment */
.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem
}

.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem
}

/* Custom Header Image */
.site-header.has-header-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative
}

.site-header.has-header-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18, 18, 18, 0.85);
    z-index: 0
}

.site-header.has-header-image .header-inner {
    position: relative;
    z-index: 1
}

/* Site Description / Tagline */
.site-description {
    font-size: .75rem;
    color: var(--text-muted);
    margin: 0;
    font-style: italic;
}

/* Mobile Menu Scroll Lock */
body.menu-open {
    overflow: hidden
}

/* Post Meta - Always Inline */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 15px;
    font-size: .9rem;
    color: var(--text-muted);
    margin-bottom: 20px
}

.post-meta span,
.post-meta>* {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap
}

.post-meta i {
    font-size: .85em;
    color: var(--primary)
}

.post-meta a {
    color: var(--text-muted)
}

.post-meta a:hover {
    color: var(--secondary)
}

/* Mobile Meta Adjustments - Horizontal Scroll */
@media (max-width: 576px) {
    .post-meta {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 5px;
        font-size: .75rem;
        gap: 5px 12px
    }

    .post-meta::-webkit-scrollbar {
        display: none
    }

    .post-meta i {
        font-size: .7em
    }
}

/* Comment Author - Fix 'says:' spacing */
.comment-author.vcard {
    gap: 5px
}

.comment-author .says {
    margin-left: 0
}

/* Post Navigation - Keep next link on right */
.post-navigation .nav-next {
    grid-column: 2
}

/* Posts Widget - Meta inline */
.neonz-posts-meta {
    display: flex;
    align-items: center;
    gap: 10px
}

/* Gutenberg Color Palette Classes */
.has-primary-color {
    color: #bb86fc
}

.has-primary-background-color {
    background-color: #bb86fc
}

.has-secondary-color {
    color: #03dac6
}

.has-secondary-background-color {
    background-color: #03dac6
}

.has-accent-color {
    color: #cf6679
}

.has-accent-background-color {
    background-color: #cf6679
}

.has-dark-color {
    color: #121212
}

.has-dark-background-color {
    background-color: #121212
}

.has-dark-surface-color {
    color: #1e1e1e
}

.has-dark-surface-background-color {
    background-color: #1e1e1e
}

.has-light-color {
    color: #ffffff
}

.has-light-background-color {
    background-color: #ffffff
}

.has-text-muted-color {
    color: #a0a0a0
}

.has-text-muted-background-color {
    background-color: #a0a0a0
}

/* Related Posts Category Badge */
.category-badge-sm,
.related-post-content .category-badge-sm {
    display: block !important;
    color: var(--primary) !important;
    font-size: .65rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 5px 0 !important;
    padding: 0 !important
}

.category-badge-sm:hover,
.related-post-content .category-badge-sm:hover {
    color: var(--secondary) !important
}