/*
Theme Name: Velox
Theme URI: https://ejohnny.ro/
Author: Ioan Mihai
Description: A fast, minimalistic WordPress theme with native ad support, SEO, and performance optimizations.
Version: 1.3.6
Text Domain: velox
*/

/* ============================================
   Typography (Local Fonts)
   ============================================ */
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/merriweather-400.woff2') format('woff2'),
        url('fonts/merriweather-400.ttf') format('truetype');
}

@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/merriweather-700.woff2') format('woff2'),
        url('fonts/merriweather-700.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/noto-sans-400.woff2') format('woff2'),
        url('fonts/noto-sans-400.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/noto-sans-700.woff2') format('woff2'),
        url('fonts/noto-sans-700.ttf') format('truetype');
}

* {
    box-sizing: border-box;
}

:root {
    --primary-color: #333;
    --accent-color: #ff3b3b;
    --text-color: #444;
    --bg-color: #fff;
    --border-color: #eee;
    --content-width: 728px;
    --sidebar-width: 336px;
    --gap: 40px;
    --total-width: 1184px;
    /* 728 + 336 + 40 (gap) + 80 (padding) */
}

html {
    font-size: 62.5%;
    /* 1rem = 10px for easier calculations */
    text-rendering: optimizelegibility;
}

body {
    font-family: 'Merriweather', Georgia, serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: #000;
    background-color: #5c5b5b;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    height: 100%;
}

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

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

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

.container {
    max-width: var(--total-width);
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

/* ============================================
   Skip Link (Accessibility)
   ============================================ */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--accent-color);
    color: #fff;
    padding: 0.8rem 1.5rem;
    z-index: 100000;
    font-size: 1.4rem;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
    clip: auto;
    clip-path: none;
}

/* Screen reader text (used for accessibility) */
.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: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #d32f2f;
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 1.5rem 2.3rem 1.4rem;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ============================================
   Header Styles
   ============================================ */
.site-header {
    background: #fff;
    position: relative;
    z-index: 1000;
}

.nav-desktop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 0;
}

.nav-left,
.nav-right {
    flex: 1;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-left {
    justify-content: flex-end;
    padding-right: 4rem;
}

.nav-right {
    justify-content: flex-start;
    padding-left: 4rem;
}

.nav-desktop li a {
    text-decoration: none;
    color: var(--primary-color);
    padding: 1rem 1.5rem;
    font-weight: 500;
    white-space: nowrap;
    font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
}

.nav-desktop li a:hover {
    color: var(--accent-color);
}

.site-logo img {
    max-height: 60px;
    width: auto;
}

.mobile-header {
    display: none !important;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
}

.hamburger-menu {
    font-size: 2.8rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.5rem;
    color: var(--primary-color);
    line-height: 1;
}

.hamburger-menu:hover,
.hamburger-menu:focus {
    color: var(--accent-color);
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ============================================
   Off-Canvas Mobile Menu
   ============================================ */
#off-canvas-menu {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10001;
    transition: right 0.3s ease;
    padding: 6rem 2rem 2rem;
    overflow-y: auto;
}

#off-canvas-menu.active {
    right: 0;
}

.close-menu-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: none;
    border: none;
    font-size: 2.4rem;
    cursor: pointer;
    color: var(--primary-color);
    padding: 0.5rem;
    line-height: 1;
}

.close-menu-btn:hover,
.close-menu-btn:focus {
    color: var(--accent-color);
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#menu-overlay.active {
    display: block;
    opacity: 1;
}

.mobile-nav-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-content li {
    border-bottom: 1px solid var(--border-color);
}

.mobile-nav-content li a {
    display: block;
    padding: 1.5rem 0;
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 1.6rem;
    font-family: 'Noto Sans', Arial, Helvetica, sans-serif;
}

.mobile-nav-content li a:hover,
.mobile-nav-content li a:focus {
    color: var(--accent-color);
}

/* ============================================
   Main Content Area
   ============================================ */
.site-main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #fff;
    padding: 2rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 0px;
    margin-bottom: var(--gap);
}

#primary {
    width: var(--content-width);
}

#secondary {
    width: var(--sidebar-width);
}

/* ============================================
   Widgets & Sidebar
   ============================================ */
.widget-title {
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-left: 4px solid var(--accent-color);
    padding-left: 1.5rem;
    margin-bottom: 2rem;
    color: var(--primary-color);
}

.widget_categories ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 0;
    list-style: none;
}

.widget_categories li a {
    display: block;
    padding: 1rem;
    border: 1px dashed #ccc;
    text-decoration: none;
    color: var(--text-color);
    text-align: center;
}

.widget_categories li a:hover,
.widget_links li a:hover {
    border-color: var(--accent-color);
    background: #f0f7fb;
}

/* Recent Entries Styling */
.widget_recent_entries ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget_recent_entries li {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px dashed var(--border-color);
}

.widget_recent_entries li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.widget_recent_entries li a {
    display: block;
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--accent-color);
    line-height: 1.4;
}

.widget_recent_entries .post-date {
    display: block;
    font-size: 1.2rem;
    color: #999;
    margin-top: 0.5rem;
}

.widget_links ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 0;
    list-style: none;
}

.widget_links li {
    margin: 0;
}

.widget_links li a {
    display: block;
    padding: 1rem;
    border: 1px dashed #ccc;
    text-decoration: none;
    color: var(--text-color);
    text-align: center;
    font-size: 1.3rem;
}

.widget-area .widget {
    background-color: #faf5f5;
    margin-bottom: 20px;
    padding: 10px;
}

/* ============================================
   Banner Wrapper
   ============================================ */
#banner-container-outer {
    background-color: #373636;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 2rem 0;
}

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

/* Banner Slots */
.banner-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0;
    border: 1px solid #ddd;
    overflow: hidden;
}

.banner-leaderboard {
    width: 728px;
    height: 90px;
}

/* Header Actions Slot */
.header-actions {
    width: 336px;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.side-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    background: #f9f9f9;
    border: 1px dashed #ccc;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.3rem;
    transition: all 0.3s ease;
}

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

/* Header Search Form */
.header-search {
    width: 100%;
    height: 42px;
    position: relative;
}

.header-search form,
.header-search label {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

.header-search .screen-reader-text {
    display: none;
}

.header-search .search-field {
    width: 100%;
    height: 100%;
    padding: 0 1.5rem;
    border: 1px dashed #ccc;
    background: #f9f9f9;
    font-size: 1.3rem;
    color: var(--text-color);
    outline: none;
    transition: all 0.3s ease;
}

.header-search .search-field:focus {
    background: #fff;
    border-color: var(--accent-color);
}

.header-search .search-submit {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    font-size: 1.6rem;
    padding: 0;
}

.header-search .search-submit:hover {
    color: var(--accent-color);
}

/* ============================================
   Featured Images & Post Layout
   ============================================ */
/* Featured Images & Post Layout */
.post-thumbnail {
    margin-bottom: 2rem;
    display: block;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    aspect-ratio: 720 / 300;
    object-fit: cover;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.entry-meta {
    font-size: 1.1rem;
    color: #999;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.entry-title {
    margin-top: 0;
    margin-bottom: 1.5rem !important;
    font-size: 2.8rem;
    line-height: 1.2;
    color: #ff3b3b;
}

.entry-title a {
    text-decoration: none;
    color: #ff3b3b;
    /* Red color from image */
    transition: color 0.3s;
}

.entry-title a:hover {
    color: #d32f2f;
}

.entry-content {
    font-size: 1.6rem;
    line-height: 1.7;
    color: #333;
}

.entry-meta-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f0f0f0;
}

.entry-meta-bar .entry-meta {
    margin-bottom: 0;
    font-size: 1.1rem;
    color: #999;
}

.comments-link a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    text-decoration: none;
    color: #3e4d6b;
    /* Dark blue from image */
    font-weight: 700;
    font-size: 1.4rem;
    transition: color 0.3s;
}

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

.comment-icon {
    display: flex;
    align-items: center;
    color: inherit;
}

/* Article Separation in Lists */
.home article.post,
.archive article.post,
.search article.post {
    border-bottom: 1px dashed #ddd;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.home article.post:last-of-type,
.archive article.post:last-of-type,
.search article.post:last-of-type {
    border-bottom: none;
    margin-bottom: 2rem;
}

/* ============================================
   WordPress Image Alignments
   ============================================ */
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
}

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

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin: 0 auto;
}

.wp-caption-text {
    text-align: center;
}

.wp-caption .wp-caption-text {
    font-size: 1.2rem;
    color: #999;
}

.gallery {
    margin-bottom: 1.5rem;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-columns-3 .gallery-item {
    max-width: 33.33%;
}

.gallery-caption {
    display: block;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    margin-top: 0.2rem;
}

/* ============================================
   Typography
   ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 700;
    font-family: "Merriweather", Georgia, serif;
}

h1 {
    font-size: 3.6rem;
}

h2 {
    font-size: 3rem;
}

h3 {
    font-size: 2.4rem;
}

h4 {
    font-size: 2rem;
}

h5 {
    font-size: 1.8rem;
}

h6 {
    font-size: 1.6rem;
}

.entry-content {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 1.6rem;
    line-height: 1.8;
}

.entry-content p {
    margin: 0 0 1.5rem;
}

.entry-content a {
    color: var(--accent-color);
    text-decoration: underline;
}

.entry-content a:hover {
    color: var(--primary-color);
}

/* Entry Tags (subtile, stil editorial) */
.entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
}

.entry-tags a {
    display: inline;
    min-height: 0;
    padding: 0.4rem 0.2rem;
    margin: 0;
    background: none;
    color: #777;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 400;
    border-radius: 0;
    transition: color 0.2s ease;
}

.entry-tags a::before {
    content: "#";
    color: #bbb;
    margin-right: 0.2rem;
}

.entry-tags a:hover {
    background: none;
    color: var(--accent-color);
    text-decoration: underline;
    transform: none;
}

.entry-tags a:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ============================================
   Entry Footer (Donation banner)
   ============================================ */
.entry-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 1.5rem;
    color: #666;
}

.donation-banner {
    margin-top: 0rem;
}

/* Card afiliere V3: editorial minimal, cadru de sustinere */
.aff-card {
    text-align: left;
    background: #f7f7f5;
    color: #222;
    padding: 2rem 1.6rem;
    line-height: 1.5;
    border-radius: 0;
    border: none;
    border-top: 1px solid #e2e2de;
}

.aff-card .aff-text {
    margin: 0 0 1.6rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.aff-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
}

.aff-btn {
    flex: 1 1 0;
    min-width: 9.6rem;
    text-align: center;
    text-decoration: none;
    padding: 1rem 1.2rem;
    display: block;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    background: #fff;
    color: #222 !important;
    border: 1px solid #222;
    border-radius: 4px;
    min-height: 0;
}

.aff-btn:hover {
    background: #222;
    color: #fff !important;
    transform: none;
    box-shadow: none;
}

.aff-disc {
    margin: 0;
    font-size: 1.2rem;
    color: #777;
}

@media (max-width: 768px) {
    .aff-buttons {
        flex-direction: row;
    }

    .aff-btn {
        width: auto;
    }
}

.entry-footer .cat-links,
.entry-footer .tags-links {
    display: block;
    margin-bottom: 0.5rem;
}

.entry-footer a {
    text-decoration: none;
}

.entry-footer a:hover {
    text-decoration: underline;
}

/* ============================================
   General Forms - Inputs and Buttons
   ============================================ */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    background: #3C4057;
    border: 1px solid #3C4057;
    border-radius: 2px;
    color: #FFF;
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 700;
    padding: 0.8rem 2rem;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    background: #333;
    border: 1px solid #333;
    color: #fff;
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
    border: 1px solid #ddd;
    border-radius: 2px;
    box-sizing: border-box;
    font-size: 1.4rem;
    padding: 0.8rem 1rem;
    max-width: 100%;
    transition: all 0.2s ease-in-out;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
    color: #111;
    border: 1px solid #3C4057;
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ============================================
   Post Navigation
   ============================================ */
.nav-links {
    display: flex;
    justify-content: space-between;
    padding: 2rem 0;
    margin-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.nav-links a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.3rem;
}

.nav-links a:hover {
    color: var(--primary-color);
}

.post-navigation {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.post-navigation .nav-links {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.post-navigation .nav-subtitle {
    display: block;
    font-size: 1.1rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}

.post-navigation .nav-title {
    font-size: 1.4rem;
    color: var(--accent-color);
}

/* ============================================
   Page Header (Archives, Search)
   ============================================ */
.page-header {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.page-title {
    font-size: 2.8rem;
    margin-bottom: 1rem;
}

.page-title span {
    color: var(--accent-color);
}

.archive-description {
    font-size: 1.5rem;
    color: #666;
    line-height: 1.6;
}

/* ============================================
   No Results / 404
   ============================================ */
.no-results,
.error-404 {
    text-align: center;
    padding: 4rem 0;
}

.no-results h1,
.error-404 .page-title {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.no-results p,
.error-404 p {
    font-size: 1.6rem;
    color: #666;
    margin-bottom: 2rem;
}

.error-404 .search-form {
    max-width: 50rem;
    margin: 0 auto 4rem;
}

.widget-area-404 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    text-align: left;
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 1px solid var(--border-color);
}

/* ============================================
   Comments
   ============================================ */
.comments-area {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.comments-title {
    font-size: 2.2rem;
    margin-bottom: 2rem;
}

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

.comment-list .comment {
    padding: 1rem 0;
    border-bottom: none;
}

.comment-body {
    background: #f7f7f7;
    padding: 2.5rem;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    margin-bottom: 1.5rem;
}

.comment.even>.comment-body {
    background: #efefef;
}

.comment-list .children {
    list-style: none;
    padding-left: 4rem;
    margin: 0;
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.comment-author .avatar {
    border-radius: 50%;
}

.comment-author .fn {
    font-weight: 700;
    font-size: 1.5rem;
}

.comment-author .fn a {
    text-decoration: none;
    color: var(--primary-color);
}

.comment-metadata {
    font-size: 1.2rem;
    color: #999;
    margin-bottom: 1rem;
}

.comment-metadata a {
    color: #999;
    text-decoration: none;
}

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

.comment-content {
    font-size: 1.5rem;
    line-height: 1.6;
}

.comment-content p {
    margin: 0 0 1rem;
}

.reply a {
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 700;
}

.reply a:hover {
    text-decoration: underline;
}

.no-comments {
    font-size: 1.5rem;
    color: #666;
    font-style: italic;
    margin-top: 2rem;
}

.comment-respond {
    margin-top: 1rem;
}

.comment-respond .comment-reply-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.comment-respond label {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.comment-respond .comment-form-comment textarea {
    width: 100%;
    min-height: 15rem;
}

.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"] {
    width: 100%;
}

.comment-respond .form-submit {
    margin-top: 1.5rem;
}

/* Page links (multi-page posts) */
.page-links {
    margin-top: 2rem;
    font-size: 1.4rem;
    font-weight: 700;
}

.page-links a {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    background: var(--accent-color);
    color: #fff;
    text-decoration: none;
    border-radius: 2px;
    margin: 0 0.3rem;
}

.page-links a:hover {
    background: var(--primary-color);
    color: #fff;
}

/* ============================================
   Footer Styling
   ============================================ */
.site-footer {
    background: darkgray;
    padding-bottom: 4rem;
}

.footer-content {
    padding: 4rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.4rem;
    color: #333;
}

.footer-links a {
    margin-left: 2rem;
    color: var(--text-color);
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
    color: var(--accent-color);
}

/* Footer menu inline links */
.footer-links .menu-item {
    display: inline-block;
}

.footer-links .menu-item a {
    margin-left: 2rem;
    color: var(--text-color);
    text-decoration: none;
}

.footer-links .menu-item a:hover {
    text-decoration: underline;
    color: var(--accent-color);
}

/* ============================================
   Responsive Overrides
   ============================================ */
@media (max-width: 1100px) {

    #primary,
    #secondary {
        width: 100%;
    }

    .site-main {
        flex-direction: column;
    }

    .banner-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .banner-leaderboard {
        width: 100%;
        max-width: 728px;
        height: auto;
        aspect-ratio: 728 / 90;
        margin-bottom: 2rem;
    }

    .header-actions {
        width: 100%;
        max-width: 728px;
        flex-direction: row;
        height: auto;
        gap: 1rem;
    }

    .header-search,
    .side-link-btn {
        flex: 1;
    }

    .banner-rectangle {
        margin: 4rem auto;
        width: 100%;
        max-width: 336px;
    }

    .widget-area-404 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .site-main {
        padding: 2rem !important;
    }

    .nav-desktop {
        display: none !important;
    }

    .mobile-header {
        display: flex !important;
    }

    .widget_categories ul {
        grid-template-columns: 1fr 1fr;
    }

    .container {
        padding: 0 1.5rem;
    }

    .entry-title {
        font-size: 2.2rem;
    }

    .single .entry-title {
        font-size: 2.8rem;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .footer-links a,
    .footer-links .menu-item a {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .widget-area-404 {
        grid-template-columns: 1fr;
    }

    .header-actions {
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        gap: 1rem;
    }

    .header-search,
    .side-link-btn {
        width: 100%;
        flex: none;
    }
}

/* ============================================
   Lightbox Integration Styles
   ============================================ */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.akismet_comment_form_privacy_notice {
    display: none;
}

/* ============================================
   Cookie Consent Banner
   ============================================ */
.cookie-banner {
    position: fixed;
    bottom: -100px;
    left: 2rem;
    right: 2rem;
    max-width: 800px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 1.5rem 2.5rem;
    border-radius: 8px;
    z-index: 10000;
    transition: bottom 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease, visibility 0.3s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cookie-banner.is-visible {
    bottom: 2rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cookie-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.cookie-content p {
    margin: 0;
    font-size: 1.4rem;
    color: #333;
    line-height: 1.4;
}

.cookie-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 4px;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cookie-btn.btn-primary {
    background: #ff3b3b;
    color: #fff;
}

.cookie-btn.btn-primary:hover {
    background: #d32f2f;
}

.cookie-btn.btn-secondary {
    background: #eee;
    color: #333;
}

.cookie-settings-link {
    font-size: 1.2rem;
    color: #666;
    text-decoration: underline;
}

.cookie-btn.btn-ghost {
    background: transparent;
    color: #333;
    border: 1px solid #ccc;
}

.cookie-btn.btn-ghost:hover {
    border-color: #999;
}

/* ============================================
   Cookie Preferences (modal)
   ============================================ */
.cookie-modal-title {
    margin: 0 3rem 0.5rem 0;
    font-size: 2rem;
    color: #222;
}

.cookie-modal-desc {
    font-size: 1.4rem;
    color: #555;
    margin: 0 0 2rem;
}

.cookie-modal-desc a {
    color: #333;
}

.cookie-pref {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 0;
    border-top: 1px solid #eee;
}

.cookie-pref-text strong {
    font-size: 1.5rem;
    color: #222;
}

.cookie-pref-text p {
    margin: 0.5rem 0 0;
    font-size: 1.3rem;
    color: #666;
}

.switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .slider {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 28px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.switch .slider::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.switch input:checked + .slider {
    background: #ff3b3b;
}

.switch input:checked + .slider::before {
    transform: translateX(24px);
}

.switch input:disabled + .slider {
    background: #ff3b3b;
    opacity: 0.6;
    cursor: not-allowed;
}

.cookie-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #eee;
}

.cookie-modal-actions .cookie-btn {
    flex: 1 1 auto;
    min-height: 48px;
}

/* ============================================
   Cookie Policy Modal
   ============================================ */
.cookie-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cookie-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

.cookie-modal-content {
    background: #fff;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    padding: 4rem;
    border-radius: 8px;
    position: relative;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.close-modal {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    color: #ccc;
}

.policy-modal-body {
    font-size: 1.5rem;
    line-height: 1.6;
    color: #444;
}

.policy-modal-body h1,
.policy-modal-body h2 {
    color: #ff3b3b;
    margin-top: 0;
}

@media (max-width: 768px) {
    .cookie-banner {
        left: 1rem;
        right: 1rem;
        padding: 2rem;
    }

    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .cookie-modal-content {
        width: calc(100% - 2rem);
        padding: 2rem;
        max-height: 88dvh;
    }

    .cookie-modal-actions {
        flex-direction: column;
    }

    .cookie-modal-actions .cookie-btn {
        width: 100%;
    }
}

/* ============================================
   Cookie Modal Tabs & List
   ============================================ */
.modal-tabs {
    display: flex;
    border-bottom: 2px solid #eee;
    margin-bottom: 2rem;
    gap: 1rem;
}

.tab-btn {
    padding: 1rem 2rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: 700;
    font-family: 'Noto Sans', sans-serif;
    color: #666;
    transition: all 0.3s ease;
}

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

.tab-btn.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Cookie List Styling */
.cookie-cat {
    margin-bottom: 2rem;
}

.cookie-cat h4 {
    background: #f4f4f4;
    padding: 0.8rem 1.2rem;
    border-radius: 4px;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cookie-cat h4 span {
    font-size: 1.1rem;
    background: #ddd;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
}

.cookie-item {
    font-family: monospace;
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    word-break: break-all;
}

.cookie-item:last-child {
    border-bottom: none;
}

.cookie-item strong {
    color: var(--accent-color);
}

.cookie-desc {
    font-size: 1.1rem;
    color: #888;
    font-style: italic;
    margin-top: 0.2rem;
}

.cookies-modal-body p {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Footer Trigger Styling */
.cookie-settings-trigger {
    margin-left: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #888;
    text-decoration: none;
    font-size: 1.3rem;
    transition: color 0.3s ease;
}

.cookie-settings-trigger:hover {
    color: var(--accent-color);
}

.cookie-icon {
    font-size: 1.6rem;