/*
Theme Name: Apuestas Futbol
Theme URI: https://example.com
Author: Web Developer
Description: Sports betting theme for football content sites. Clean, fast, no frameworks.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Private
Text Domain: apuestas-futbol
*/

/* ==============================================
   CUSTOM PROPERTIES
   ============================================== */
:root {
    --color-primary:       #1a472a;
    --color-primary-light: #2d5a3d;
    --color-primary-dark:  #0f2d1a;
    --color-accent:        #c9a227;
    --color-accent-light:  #e3bc3d;
    --color-accent-dark:   #a8861f;
    --color-success:       #28a745;
    --color-danger:        #dc3545;

    --color-bg:           #fafafa;
    --color-bg-alt:       #ffffff;
    --color-text:         #1a1a1a;
    --color-text-muted:   #5a5a5a;
    --color-text-light:   #757575;
    --color-border:       #e0e0e0;
    --color-border-light: #f0f0f0;

    --shadow-sm: 0 1px 3px rgba(26,71,42,.08);
    --shadow-md: 0 4px 12px rgba(26,71,42,.10);
    --shadow-lg: 0 8px 30px rgba(26,71,42,.12);

    --font-heading: Georgia,'Times New Roman',serif;
    --font-body:    'Segoe UI','Helvetica Neue',Arial,sans-serif;
    --font-mono:    Consolas,Monaco,monospace;

    --sp-xs:  .25rem;
    --sp-sm:  .5rem;
    --sp-md:  1rem;
    --sp-lg:  1.5rem;
    --sp-xl:  2rem;
    --sp-2xl: 3rem;
    --sp-3xl: 4rem;

    --w-content: 75ch;
    --w-wide:    90ch;
    --radius:    8px;
    --radius-lg: 12px;

    --t-fast: 150ms ease;
    --t-base: 250ms ease;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-primary:       #3d8c5c;
        --color-primary-light: #4da36d;
        --color-primary-dark:  #2d6b45;
        --color-accent:        #e3bc3d;
        --color-accent-light:  #f0d060;
        --color-accent-dark:   #c9a227;

        --color-bg:           #0d1117;
        --color-bg-alt:       #161b22;
        --color-text:         #e6edf3;
        --color-text-muted:   #a8b2bd;
        --color-text-light:   #8b949e;
        --color-border:       #30363d;
        --color-border-light: #21262d;

        --shadow-sm: 0 1px 3px rgba(0,0,0,.30);
        --shadow-md: 0 4px 12px rgba(0,0,0,.40);
        --shadow-lg: 0 8px 30px rgba(0,0,0,.50);
    }
}

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

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

body {
    font-family: var(--font-body);
    font-size: clamp(1rem,.95rem + .25vw,1.125rem);
    line-height: 1.7;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
::selection    { background: var(--color-accent); color: var(--color-primary-dark); }

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

/* ==============================================
   HEADER — H1 lives here, one per site
   ============================================== */
.site-header {
    background: linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 100%);
    min-height: 4rem;
}

.site-header__inner {
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: var(--sp-md) var(--sp-lg);
    display: flex;
    align-items: center;
}

.site-title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem,1rem + 2.5vw,2.5rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: -.02em;
    line-height: 1.2;
    text-align: center;
    margin: 0;
}

.site-title a { color: inherit; text-decoration: none; }
.site-title a:hover { color: var(--color-accent-light); }

/* ==============================================
   NAVIGATION
   ============================================== */
.site-nav {
    background: rgba(255,255,255,.95);
    border-bottom: 1px solid var(--color-border);
    padding: var(--sp-md) var(--sp-lg);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
}

@media (prefers-color-scheme: dark) {
    .site-nav { background: rgba(22,27,34,.95); }
}

.site-nav__inner {
    max-width: var(--w-wide);
    margin: 0 auto;
    position: relative;
}

/* Desktop primary menu */
.primary-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-sm) var(--sp-lg);
    align-items: center;
    justify-content: center;
    margin: 0;
}

.primary-menu > li { position: relative; margin: 0; padding: 0; }

.primary-menu > li > a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    padding: var(--sp-xs) var(--sp-sm);
    border-radius: var(--radius);
    transition: color var(--t-fast),background var(--t-fast);
    display: flex;
    align-items: center;
    gap: .25em;
    white-space: nowrap;
}

.primary-menu > li > a:hover,
.primary-menu > li:focus-within > a {
    color: var(--color-primary);
    background: var(--color-border-light);
}

.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-page-ancestor > a {
    color: var(--color-primary);
    font-weight: 600;
}

.primary-menu .menu-item-has-children > a::after {
    content: '\25BE';
    font-size: .65em;
    opacity: .6;
    flex-shrink: 0;
}

/* Dropdown level 2 */
.primary-menu .sub-menu {
    list-style: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-accent);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--t-base),transform var(--t-base),visibility var(--t-base);
    z-index: 200;
}

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

.primary-menu .sub-menu li { position: relative; }

.primary-menu .sub-menu a {
    display: block;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    padding: var(--sp-sm) var(--sp-lg);
    border-bottom: 1px solid var(--color-border-light);
    transition: color var(--t-fast),background var(--t-fast);
    white-space: nowrap;
}

.primary-menu .sub-menu li:last-child > a { border-bottom: none; }

.primary-menu .sub-menu a:hover {
    color: var(--color-primary);
    background: var(--color-border-light);
}

/* Dropdown level 3 */
.primary-menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    margin-left: 2px;
    border-top: 2px solid var(--color-accent);
}

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

/* Burger */
.burger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background var(--t-fast);
}

.burger-btn:hover { background: var(--color-border-light); }

.burger-btn__line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: transform var(--t-base),opacity var(--t-base);
}

.burger-btn.is-active .burger-btn__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger-btn.is-active .burger-btn__line:nth-child(2) { opacity: 0; }
.burger-btn.is-active .burger-btn__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==============================================
   MOBILE NAV (<= 768px)
   ============================================== */
@media (max-width: 768px) {
    .site-nav { padding: var(--sp-sm) var(--sp-md); }

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

    .burger-btn { display: flex; }

    .primary-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--color-bg-alt);
        border-top: 1px solid var(--color-border);
        gap: 0;
        flex-wrap: nowrap;
        justify-content: flex-start;
        position: absolute;
        top: 100%;
        left: calc(-1 * var(--sp-md));
        right: calc(-1 * var(--sp-md));
        z-index: 200;
        box-shadow: var(--shadow-lg);
    }

    .primary-menu.is-open { display: flex; }

    .primary-menu > li {
        width: 100%;
        border-bottom: 1px solid var(--color-border-light);
    }

    .primary-menu > li > a {
        padding: var(--sp-md) var(--sp-lg);
        font-size: .9375rem;
        border-radius: 0;
        justify-content: space-between;
        white-space: normal;
    }

    .primary-menu .menu-item-has-children > a::after {
        content: '\25B6';
        transition: transform var(--t-base);
    }

    .primary-menu .menu-item-has-children.submenu-open > a::after {
        transform: rotate(90deg);
    }

    .primary-menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--color-border-light);
        border-radius: 0;
        background: var(--color-border-light);
        display: none;
        min-width: auto;
        width: 100%;
    }

    .primary-menu .sub-menu.is-open { display: block; }

    .primary-menu .sub-menu a {
        padding: var(--sp-sm) var(--sp-2xl);
        font-size: .875rem;
        white-space: normal;
    }

    .primary-menu .sub-menu .sub-menu {
        left: 0;
        top: auto;
        margin-left: 0;
        background: var(--color-bg);
    }

    .primary-menu .sub-menu .sub-menu a { padding-left: var(--sp-3xl); }
}

@media (max-width: 480px) {
    .site-nav { padding: var(--sp-xs) var(--sp-md); }
    .primary-menu {
        left: calc(-1 * var(--sp-md));
        right: calc(-1 * var(--sp-md));
    }
}

/* ==============================================
   BREADCRUMBS
   ============================================== */
.breadcrumbs {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--sp-sm) 0;
    font-size: .8125rem;
}

.breadcrumbs__inner {
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: 0 var(--sp-lg);
}

.breadcrumbs__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-xs);
    margin: 0;
}

.breadcrumbs__item { display: flex; align-items: center; gap: var(--sp-xs); margin: 0; }

.breadcrumbs__item + .breadcrumbs__item::before {
    content: '/';
    color: var(--color-border);
    font-size: .875rem;
}

.breadcrumbs__item a {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color var(--t-fast);
}

.breadcrumbs__item a:hover { color: var(--color-primary); text-decoration: underline; }

.breadcrumbs__item--current { color: var(--color-text-muted); font-weight: 500; }

/* ==============================================
   LAYOUT
   ============================================== */
.site-main {
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: var(--sp-2xl) var(--sp-lg) var(--sp-3xl);
}

/* article-wrapper: 75ch, white bg, shadow */
.article-wrapper {
    max-width: var(--w-content);
    margin: 0 auto;
    /* background: var(--color-bg-alt); */
    /* border-radius: var(--radius-lg); */
    /* box-shadow: var(--shadow-md); */
    overflow: hidden;
    /* padding: var(--sp-2xl); */
}

/* ==============================================
   TYPOGRAPHY H2–H4 (H1 only in header)
   ============================================== */
h2,h3,h4,h5,h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text);
    letter-spacing: -.02em;
}

h2 {
    /* font-size: clamp(1.5rem,1.25rem + 1.25vw,2rem); */
    font-size: clamp(0.5rem, 1vw + 1rem, 2em);
    margin-top: var(--sp-3xl);
    margin-bottom: var(--sp-lg);
    color: var(--color-primary);
    position: relative;
    padding-bottom: var(--sp-md);
    /* padding-left: var(--sp-md);
    border-left: 4px solid var(--color-accent); */
}

h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
    border-radius: 2px;
}

.article-wrapper > h2:first-child,
.article-wrapper > *:first-child > h2:first-child { margin-top: 0; }

h3 {
    font-size: clamp(1rem, 1vw + (30px - 1rem), 30px);
    margin-top: var(--sp-2xl);
    margin-bottom: var(--sp-md);
    color: var(--color-primary-light);
    padding-left: var(--sp-md);
    border-left: 4px solid var(--color-accent);
}

h4 {
    font-size: clamp(1rem, 1vw + (24px - 1rem), 24px);
    margin-top: var(--sp-xl);
    margin-bottom: var(--sp-sm);
    color: var(--color-primary-light);
}

/* ==============================================
   PARAGRAPHS & INLINE
   ============================================== */
p { margin-bottom: var(--sp-lg); color: var(--color-text); }
p + p { margin-top: calc(-1 * var(--sp-sm)); }

a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-underline-offset: 3px;
    transition: color var(--t-fast),text-decoration-color var(--t-fast);
}

a:hover { color: var(--color-accent-dark); text-decoration-color: var(--color-accent-dark); }

strong { font-weight: 600; color: var(--color-text); }
em     { font-style: italic; color: var(--color-text-muted); }

/* ==============================================
   LISTS
   ============================================== */
ul,ol { margin-bottom: var(--sp-lg); padding-left: var(--sp-xl); }
li    { margin-bottom: var(--sp-sm); padding-left: var(--sp-xs); }

li::marker    { color: var(--color-accent); font-weight: 600; }
ul li::marker { content: '\25C6  '; font-size: .75em; }

ol { counter-reset: list-counter; }
ol li { counter-increment: list-counter; }
ol li::marker { content: counter(list-counter) '.'; font-family: var(--font-heading); }

li > ul, li > ol { margin-top: var(--sp-sm); margin-bottom: var(--sp-sm); }

/* ==============================================
   BLOCKQUOTE
   ============================================== */
blockquote {
    margin: var(--sp-xl) 0;
    padding: var(--sp-lg) var(--sp-xl);
    background: linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 100%);
    border-radius: var(--radius-lg);
    position: relative;
    color: #fff;
    box-shadow: var(--shadow-lg);
}

blockquote::before {
    content: '\201C';
    position: absolute;
    top: -10px;
    left: 20px;
    font-size: 4rem;
    font-family: var(--font-heading);
    color: var(--color-accent);
    opacity: .6;
    line-height: 1;
}

blockquote p   { color: inherit; font-style: italic; font-size: 1.1em; margin-bottom: 0; }
blockquote cite { display: block; margin-top: var(--sp-md); font-size: .875rem; font-style: normal; color: var(--color-accent-light); }

/* ==============================================
   FIGURES & IMAGES
   ============================================== */
figure { margin: var(--sp-2xl) 0; }

/* WordPress block editor — wp-block-image */
.wp-block-image,
.article-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    transition: transform var(--t-base),box-shadow var(--t-base);
    will-change: transform;
}

/* All images inside content */
.article-wrapper img,
.wp-block-image img,
.article-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    display: block;
    margin: 0 auto;
    object-fit: cover;
    aspect-ratio: 16/9;
}

.wp-block-image:hover,
.article-image:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Classic editor alignment classes */
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignleft {
    float: left;
    margin: 0 var(--space-lg) var(--space-md) 0;
}

.alignright {
    float: right;
    margin: 0 0 var(--space-md) var(--space-lg);
}

/* WordPress caption */
.wp-caption,
.wp-block-image figcaption,
figcaption {
    margin-top: var(--sp-sm);
    font-size: .875rem;
    color: var(--color-text-light);
    text-align: center;
    font-style: italic;
}

.wp-caption-text {
    font-size: 0.875rem;
    color: var(--color-text-light);
    text-align: center;
    font-style: italic;
    margin-top: var(--sp-sm);
}

/* Aspect ratio for featured/hero images specifically */
.article-image--hero img {
    aspect-ratio: 16 / 9;
}

/* Clearfix after floated images */
.article-wrapper::after {
    content: '';
    display: table;
    clear: both;
}

/* ==============================================
   TABLES
   ============================================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-xl) 0;
    font-size: .95rem;
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius);
    overflow: hidden;
}

thead { background: linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%); color: #fff; }

th,td { padding: var(--sp-md); text-align: left; border-bottom: 1px solid var(--color-border); }

th { font-weight: 600; font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; }

tbody tr { transition: background var(--t-fast); }
tbody tr:hover { background: var(--color-border-light); }
tbody tr:nth-child(even) { background: var(--color-bg); }

/* ==============================================
   CODE
   ============================================== */
code {
    font-family: var(--font-mono);
    font-size: .9em;
    background: var(--color-border-light);
    padding: var(--sp-xs) var(--sp-sm);
    border-radius: 4px;
    color: var(--color-primary);
}

pre {
    background: var(--color-primary-dark);
    color: #e6edf3;
    padding: var(--sp-lg);
    border-radius: var(--radius);
    overflow-x: auto;
    margin: var(--sp-xl) 0;
}

pre code { background: none; padding: 0; color: inherit; }

/* ==============================================
   HR
   ============================================== */
hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg,transparent,var(--color-border),var(--color-accent),var(--color-border),transparent);
    margin: var(--sp-3xl) 0;
}

/* ==============================================
   DETAILS / FAQ
   ============================================== */
details {
    margin-bottom: var(--sp-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: box-shadow var(--t-base);
}

details:hover  { box-shadow: var(--shadow-sm); }
details[open]  { box-shadow: var(--shadow-md); }

summary {
    padding: var(--sp-md) var(--sp-lg);
    background: var(--color-bg);
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primary);
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--sp-md);
    transition: background var(--t-fast);
}

summary::-webkit-details-marker { display: none; }

summary::before {
    content: '+';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--color-accent);
    color: var(--color-primary-dark);
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: transform var(--t-base),background var(--t-base);
}

details[open] summary::before {
    content: '-';
    transform: rotate(180deg);
    background: var(--color-primary);
    color: #fff;
}

summary:hover { background: var(--color-border-light); }
details > div { padding: var(--sp-lg); border-top: 1px solid var(--color-border); }

/* ==============================================
   ASIDE
   ============================================== */
aside {
    margin: var(--sp-xl) 0;
    padding: var(--sp-lg);
    border-radius: var(--radius);
    border-left: 4px solid var(--color-accent);
    background: var(--color-bg);
}

aside.warning { border-left-color: var(--color-danger); background: rgba(220,53,69,.05); }
aside.success { border-left-color: var(--color-success); background: rgba(40,167,69,.05); }

/* ==============================================
   ARTICLES GRID
   ============================================== */
.articles-section {
    max-width: var(--content-width-wide);
    margin: 0 auto;
    padding: 0 var(--space-lg) var(--space-3xl);
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.article-card {
    background-color: var(--color-bg-alt);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    will-change: transform;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.article-card__image {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
}

.article-card__image a {
    display: block;
    height: 100%;
}

.article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.article-card:hover .article-card__image img {
    transform: scale(1.04);
}

.article-card__body {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.article-card__meta {
    margin-bottom: var(--space-sm);
}

.article-card__date {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.article-card__title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 var(--space-sm);
    padding: 0;
    border: none;
    line-height: 1.4;
}

.article-card__title::after {
    display: none;
}

/* убираем декор h2 */

.article-card__title a {
    color: inherit;
    text-decoration: none;
}

.article-card__title a:hover {
    color: var(--color-accent-dark);
    text-decoration: underline;
}

.article-card__excerpt {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: var(--space-md);
    flex: 1;
    /* прижимает ссылку к низу карточки */
}

.article-card__link {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    transition: color var(--transition-fast);
    margin-top: auto;
}

.article-card__link::after {
    content: '\2192';
}

.article-card__link:hover {
    color: var(--color-accent-dark);
    text-decoration: none;
}

/* Empty state */
.articles-empty {
    padding: var(--space-3xl) var(--space-lg);
    text-align: center;
    color: var(--color-text-muted);
}

/* ---- Pagination ---- */
.articles-pagination {
    margin-top: var(--space-3xl);
    display: flex;
    justify-content: center;
}

.articles-pagination .page-numbers {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: 0;
    margin: 0;
    align-items: center;
}

.articles-pagination .page-numbers li {
    margin: 0;
    padding: 0;
}

.articles-pagination .page-numbers a,
.articles-pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    background-color: var(--color-bg-alt);
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.articles-pagination .page-numbers a:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background-color: var(--color-border-light);
    text-decoration: none;
}

.articles-pagination .page-numbers .current {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: #fff;
    border-color: transparent;
    font-weight: 600;
}

.articles-pagination .page-numbers .dots {
    border: none;
    background: none;
    color: var(--color-text-light);
}

/* ==============================================
   SINGLE POST
   ============================================== */

.single-post {
    max-width: var(--content-width);
    margin: 0 auto;
}

/* Header */
.single-post__header {
    margin-bottom: var(--space-2xl);
}

.single-post__cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.single-post__cat-link {
    display: inline-block;
    background-color: var(--color-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 20px;
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.single-post__cat-link:hover {
    background-color: var(--color-primary-light);
    text-decoration: none;
    color: #fff;
}

.single-post__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.25;
    margin: 0 0 var(--space-md);
    padding: 0;
    border: none;
}

/* Убираем декоративную линию h2 для заголовка поста */
.single-post__title::after {
    display: none;
}

.single-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-bottom: var(--space-xl);
}

.single-post__modified {
    color: var(--color-text-light);
}

.single-post__thumbnail {
    margin: 0 0 var(--space-2xl);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.single-post__thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.single-post__thumbnail figcaption {
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-bg);
    font-size: 0.8125rem;
    color: var(--color-text-light);
    text-align: center;
    font-style: italic;
    margin-top: 0;
}

/* Body */
.single-post__body {
    margin-bottom: var(--space-2xl);
}

/* wp_link_pages */
.single-post__pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin: var(--space-2xl) 0;
    padding: var(--space-md) var(--space-lg);
    background-color: var(--color-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}

.single-post__pages-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-right: var(--space-xs);
}

.single-post__pages span,
.single-post__pages a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    background-color: var(--color-bg-alt);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.single-post__pages a:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}

.single-post__pages>span:not(.single-post__pages-label) {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: #fff;
    border-color: transparent;
}

/* Footer */
.single-post__footer {
    padding-top: var(--space-xl);
    border-top: 2px solid var(--color-border-light);
}

/* Tags */
.single-post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-xl);
}

.single-post__tag {
    font-size: 0.8125rem;
    color: var(--color-primary);
    text-decoration: none;
    padding: 3px var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.single-post__tag:hover {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    text-decoration: none;
}

/* Prev/Next navigation */
.single-post__nav {
    margin-top: var(--space-xl);
}

.post-nav__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.post-nav__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-lg);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    text-decoration: none;
    transition: box-shadow var(--transition-base), border-color var(--transition-fast);
}

.post-nav__item:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
    text-decoration: none;
}

.post-nav__item--next {
    text-align: right;
    margin-left: auto;
}

/* Если только один пост (prev или next) — растягиваем на всю ширину */
.post-nav__item--prev:only-child,
.post-nav__item--next:only-child {
    grid-column: 1 / -1;
}

.post-nav__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.post-nav__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
    .articles-grid {
        grid-template-columns: 1fr 1fr;
    }

    .post-nav__inner {
        grid-template-columns: 1fr;
    }

    .post-nav__item--next {
        text-align: left;
    }

    .post-nav__item--prev:only-child,
    .post-nav__item--next:only-child {
        grid-column: auto;
    }
}

@media (max-width: 480px) {
    .articles-grid {
        grid-template-columns: 1fr;
    }
}

/* ==============================================
   404
   ============================================== */
.page-404 { text-align: center; padding: var(--sp-3xl) var(--sp-lg); }

.page-404__code {
    display: block;
    font-size: clamp(6rem,15vw,12rem);
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    opacity: .12;
    margin-bottom: calc(-1 * var(--sp-2xl));
}

.page-404__heading { font-size: clamp(1.5rem,4vw,2.5rem); color: var(--color-primary); margin-bottom: var(--sp-md); }
.page-404__text    { color: var(--color-text-muted); max-width: 40ch; margin: 0 auto var(--sp-xl); }

.btn {
    display: inline-block;
    background: linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-light) 100%);
    color: #fff;
    padding: var(--sp-md) var(--sp-xl);
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--t-base),transform var(--t-fast);
}

.btn:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); color: #fff; text-decoration: none; }

/* ==============================================
   SITEMAP
   ============================================== */
.sitemap-list { list-style: none; padding: 0; }
.sitemap-list li { padding: var(--sp-xs) 0; border-bottom: 1px solid var(--color-border-light); }
.sitemap-list li a { text-decoration: none; font-weight: 500; }
.sitemap-list li a:hover { text-decoration: underline; }
.sitemap-list li ul { margin-top: var(--sp-xs); padding-left: var(--sp-xl); list-style: none; }

/* ==============================================
   FOOTER
   ============================================== */
.site-footer {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: #fff;
    margin-top: var(--sp-3xl);
}

.site-footer__inner {
    max-width: var(--w-wide);
    margin: 0 auto;
    padding: var(--sp-2xl) var(--sp-lg);
}

/* Three-column grid */
.site-footer__cols {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--sp-2xl);
    padding-bottom: var(--sp-xl);
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    margin-bottom: var(--sp-xl);
    align-items: start;
}

/* Column title — <p> чтобы не ломать H-иерархию */
.footer-col__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 var(--sp-md);
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* Подзаголовок «Prohibido a menores…» */
.footer-col__note {
    font-size: .75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .45);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 var(--sp-md);
}

/* Bulleted list (col 1) */
.footer-col__list {
    list-style: disc;
    padding-left: var(--sp-lg);
    margin: 0;
}

.footer-col__list li {
    color: rgba(255, 255, 255, .75);
    font-size: .8125rem;
    line-height: 1.65;
    margin-bottom: var(--sp-sm);
    padding-left: 0;
}

.footer-col__list li::marker {
    color: rgba(255, 255, 255, .3);
}

.footer-col__list a {
    color: var(--color-accent);
    text-decoration: none;
    font-size: inherit;
    transition: color var(--t-fast);
}

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

/* Nav list (col 2, col 3) */
.footer-col__nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col__nav li {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.footer-col__nav li:last-child {
    border-bottom: none;
}

.footer-col__nav a {
    display: block;
    color: rgba(255, 255, 255, .75);
    text-decoration: none;
    font-size: .875rem;
    line-height: 1.5;
    padding: var(--sp-xs) 0;
    transition: color var(--t-fast), padding-left var(--t-fast);
}

.footer-col__nav a:hover {
    color: var(--color-accent-light);
    padding-left: var(--sp-xs);
}

/* Bottom bar */
.site-footer__bottom {
    text-align: center;
}

.disclaimer {
    font-size: .8125rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .55);
    margin: 0;
}

/* Responsive — tablet */
@media (max-width: 768px) {
    .site-footer__cols {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-xl);
    }

    .footer-col--responsible {
        grid-column: 1 / -1;
    }

    .disclaimer {
        text-align: left;
    }
}

/* Responsive — mobile */
@media (max-width: 480px) {
    .site-footer__cols {
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
    }

    .footer-col--responsible {
        grid-column: auto;
    }
}

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 768px) {
    .site-main {
        padding: var(--sp-lg) var(--sp-md) var(--sp-2xl);
    }

    .article-wrapper {
        padding: var(--sp-lg) var(--sp-md);
        border-radius: var(--radius);
    }

    h2 { padding-left: var(--sp-sm); margin-top: var(--sp-2xl); }

    blockquote { padding: var(--sp-md) var(--sp-lg); }
    blockquote::before { font-size: 3rem; top: -5px; left: 15px; }

    table { font-size: .875rem; display: block; overflow-x: auto; }
    th,td { padding: var(--sp-sm); }

    /* Footer: 2 columns on tablet */
    .site-footer__cols { grid-template-columns: repeat(2,1fr); }

    .disclaimer { font-size: .8125rem; text-align: left; }
}

@media (max-width: 480px) {
    ul,ol { padding-left: var(--sp-lg); }
    .articles-grid { grid-template-columns: 1fr; }

    /* Footer: 1 column on mobile */
    .site-footer__cols { grid-template-columns: 1fr; gap: var(--sp-lg); }
}

@media (min-width: 1440px) {
    .site-main { padding-left: var(--sp-2xl); padding-right: var(--sp-2xl); }
}

/* ==============================================
   PRINT
   ============================================== */
@media print {
    body { font-size: 12pt; color: #000; background: #fff; }
    .site-nav,.site-header,.site-footer,.breadcrumbs,.burger-btn { display: none; }
    .site-main { max-width: 100%; padding: 0; }
    a { color: #000; text-decoration: underline; }
    h2,h3 { page-break-after: avoid; color: #000; }
    blockquote { background: #f0f0f0; color: #000; }
    .article-image { box-shadow: none; page-break-inside: avoid; }
}

/* ==============================================
   REDUCED MOTION
   ============================================== */
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html { scroll-behavior: auto; }
}

.toc {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius);
    padding: var(--sp-lg) var(--sp-xl);
    margin: var(--sp-2xl) 0;
    box-shadow: var(--shadow-sm);
}

.toc__title {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--color-primary);
    margin-bottom: var(--sp-md);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc-counter;
}

.toc__item {
    padding: 0;
    margin-bottom: var(--sp-xs);
    counter-increment: toc-counter;
}

.toc__item::marker {
    content: none;
}

.toc__link {
    display: block;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: .9rem;
    line-height: 1.5;
    padding: .2em 0;
    border-bottom: none;
    transition: color var(--t-fast), padding-left var(--t-fast);
}

.toc__link::before {
    content: counter(toc-counter) '. ';
    color: var(--color-accent);
    font-weight: 600;
    font-family: var(--font-heading);
}

.toc__link:hover {
    color: var(--color-primary);
    padding-left: var(--sp-xs);
    text-decoration: none;
}

/* H3 — отступ 1 уровень */
.toc__item--l3 .toc__link {
    padding-left: var(--sp-lg);
    font-size: .875rem;
}

.toc__item--l3 .toc__link::before {
    content: none;
}

/* H4 — отступ 2 уровня */
.toc__item--l4 .toc__link {
    padding-left: var(--sp-2xl);
    font-size: .8125rem;
    color: var(--color-text-light);
}

.toc__item--l4 .toc__link::before {
    content: none;
}

@media (max-width: 768px) {
    .toc {
        padding: var(--sp-md) var(--sp-lg);
    }

    .toc__item--l3 .toc__link {
        padding-left: var(--sp-md);
    }

    .toc__item--l4 .toc__link {
        padding-left: var(--sp-lg);
    }
}