/* ABOUTME: Main stylesheet for cyclingperm.ru Zola site */
/* ABOUTME: Based on HappenStance Premium theme with gray color scheme */

/* Color Variables */
:root {
    --bg-page: #dedede;
    --bg-content: white;
    --bg-header: #333;
    --bg-header-hover: black;
    --bg-code: #e8e8e8;
    --text-primary: black;
    --text-secondary: #333;
    --text-muted: #777;
    --text-meta: #999;
    --text-header: white;
    --link-color: #777;
    --link-hover: black;
    --border-color: #e8e8e8;
    --border-light: #e3e3e3;
    --shadow-color: #aaa;
    --button-bg: #9e9e9e;
}

.dark-mode {
    --bg-page: #1a1a1a;
    --bg-content: #2d2d2d;
    --bg-header: #1a1a1a;
    --bg-header-hover: #444;
    --bg-code: #3d3d3d;
    --text-primary: #e0e0e0;
    --text-secondary: #d0d0d0;
    --text-muted: #b0b0b0;
    --text-meta: #a0a0a0;
    --text-header: #e0e0e0;
    --link-color: #8ab4f8;
    --link-hover: #c2e3f5;
    --border-color: #444;
    --border-light: #555;
    --shadow-color: #000;
    --button-bg: #555;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-page: #1a1a1a;
        --bg-content: #2d2d2d;
        --bg-header: #1a1a1a;
        --bg-header-hover: #444;
        --bg-code: #3d3d3d;
        --text-primary: #e0e0e0;
        --text-secondary: #d0d0d0;
        --text-muted: #b0b0b0;
        --text-meta: #a0a0a0;
        --text-header: #e0e0e0;
        --link-color: #8ab4f8;
        --link-hover: #c2e3f5;
        --border-color: #444;
        --border-light: #555;
        --shadow-color: #000;
        --button-bg: #555;
    }
}

/* Skip link for keyboard navigation */
.skip-link {
    position: absolute;
    top: -2.5rem;
    left: 0;
    background: var(--bg-header);
    color: var(--text-header);
    padding: 0.5rem 1rem;
    z-index: 10001;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: none;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

/* Base Typography */
body {
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8125rem;
    line-height: 150%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    line-height: 120%;
    margin: 1.875rem 0 0.4375rem;
}

h1 { color: var(--text-primary); font-size: 1.6875rem; }
h2 { color: var(--text-secondary); font-size: 1.3125rem; }
h3 { color: var(--text-secondary); font-size: 1.125rem; }
h4 { color: var(--text-muted); font-size: 1rem; }
h5 { color: var(--text-muted); font-size: 0.875rem; }
h6 { color: var(--text-muted); font-size: 0.8125rem; }

p, ul, ol, li, dl, address {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    font-size: 0.8125rem;
    text-align: left;
}

ul { margin-left: 1rem; }
ol { list-style-type: decimal; margin-left: 1.25rem; }

strong { font-weight: bold; }
cite, em, i { font-style: italic; }

a {
    color: var(--link-color);
    text-decoration: underline;
}

a:hover {
    text-decoration: none;
}

/* Focus indicators for keyboard navigation */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

a:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

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

table {
    font-size: 0.8125rem;
    width: 100%;
}

table, td, th {
    border: 1px solid var(--border-light);
    border-collapse: collapse;
    text-align: left;
}

td, th { padding: 0.3125rem 0.5rem; }
th { background: var(--bg-header); color: var(--text-header); font-weight: bold; }

blockquote, q {
    border-left: 1px solid var(--border-light);
    clear: both;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0 0 1.25rem;
    padding-left: 0.625rem;
}

hr {
    background: var(--border-color);
    border: none;
    height: 1px;
    margin: 0.9375rem 0;
}

/* Pattern overlay */
.pattern {
    background: left top repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4z8DAwMgABXAGNgGwSgwAKmgBj1RdKbcAAAAASUVORK5CYII=);
    height: 100%;
    opacity: 0.05;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}

/* Layout Container */
#wrapper {
    width: 100%;
}

#container {
    margin: 0 auto;
    max-width: 1170px;
    position: relative;
    width: 100%;
}

#container-shadow {
    -webkit-box-shadow: 0 0 10px var(--shadow-color);
    -moz-box-shadow: 0 0 10px var(--shadow-color);
    box-shadow: 0 0 10px var(--shadow-color);
    background: var(--bg-content);
    float: left;
    width: 100%;
}

#header,
#main-content,
#wrapper-footer {
    float: left;
    height: auto;
    position: relative;
    width: 100%;
}

#main-content {
    padding: 1.75rem 1.75rem 0.625rem;
    width: 1114px;
}

#content {
    float: left;
    margin: 0;
    width: 734px;
}

/* Top Navigation (Social Icons) */
.top-navigation-wrapper {
    border-bottom: 1px solid var(--border-light);
    float: left;
    height: auto;
    position: relative;
    width: 100%;
    z-index: 550;
}

.top-navigation {
    min-height: 2.125rem;
    padding: 0 1.75rem;
    position: relative;
    text-align: center;
}

.top-navigation ul {
    list-style-type: none;
    margin: 0;
    position: relative;
    text-align: center;
}

.top-navigation ul li {
    display: inline-block;
    height: 2.125rem;
    line-height: 2.125rem;
    margin: 0;
    position: relative;
    vertical-align: bottom;
}

.top-navigation a,
.top-navigation a:visited {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: bold;
    height: 2.125rem;
    line-height: 2.125rem;
    padding: 0 0.625rem;
    text-align: center;
    text-decoration: none;
    transition: color 0.3s ease;
}

.top-navigation ul a:hover {
    color: var(--text-primary);
}

.top-navigation a.social-icon svg {
    display: block;
}

.top-navigation a.social-icon:hover {
    color: var(--link-color);
}

/* Header */
.header-content {
    float: left;
    padding: 2.1875rem 1.75rem;
    position: relative;
    width: 1114px;
}

.header-logo {
    clear: both;
    display: block;
    height: auto;
    margin: 0;
    max-width: 880px;
    position: relative;
    width: auto;
}

/* Navigation Menu */
.menu-box-container {
    float: left;
    height: auto;
    min-height: 2.75rem;
    position: relative;
    width: 100%;
}

.menu-box-wrapper {
    background: var(--bg-header);
    border-bottom: 2px solid var(--text-muted);
    float: left;
    min-height: 2.75rem;
    position: relative;
    width: 100%;
    z-index: 500;
}

.menu-box {
    float: left;
    min-height: 2.75rem;
    padding: 0 1.75rem;
    position: relative;
    width: 1114px;
    z-index: 500;
}

.menu-box ul {
    list-style-type: none;
    margin: 0;
    position: relative;
    text-align: left;
    z-index: 100;
}

.menu-box ul li {
    float: left;
    height: 2.75rem;
    line-height: 2.75rem;
    margin: 0;
    position: relative;
}

.menu-box a,
.menu-box a:visited {
    border-right: 1px solid #535353;
    color: white;
    display: block;
    float: left;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 0.875rem;
    height: 2.75rem;
    line-height: 2.75rem;
    padding: 0 1.1875rem;
    text-decoration: none;
    text-transform: uppercase;
}

.menu-box .link-home {
    border-left: 1px solid #535353;
}

.menu-box a:hover {
    background-color: var(--bg-header-hover);
    transition: background-color 0.3s ease;
}

.menu-box .current-menu-item > a,
.menu-box .active > a {
    background-color: #777;
}

/* Dropdown Menus */
.menu-box ul li {
    position: relative;
}

.menu-box ul .sub-menu {
    background: var(--bg-header);
    display: none;
    left: 0;
    list-style: none;
    margin: 0;
    min-width: 200px;
    position: absolute;
    top: 2.75rem;
    z-index: 1000;
}

.menu-box ul li:hover > .sub-menu {
    display: block;
}

.menu-box ul .sub-menu li {
    float: none;
    height: auto;
    line-height: normal;
}

.menu-box ul .sub-menu li a {
    border-bottom: 1px solid #444;
    border-right: none;
    display: block;
    float: none;
    font-size: 0.8125rem;
    height: auto;
    line-height: normal;
    padding: 0.625rem 0.9375rem;
    text-transform: none;
    white-space: nowrap;
}

.menu-box ul .sub-menu li:last-child a {
    border-bottom: none;
}

.menu-box ul .sub-menu li a:hover {
    background: #444;
}

/* Nested sub-menus */
.menu-box ul .sub-menu .sub-menu {
    left: 100%;
    top: 0;
}

/* Sidebar */
#sidebar {
    float: right;
    margin: 0 0 0 1.75rem;
    width: 352px;
}

.sidebar-widget {
    color: var(--text-secondary);
    float: left;
    font-size: 0.8125rem;
    margin-bottom: 1.5625rem;
    width: 100%;
}

.sidebar-widget .sidebar-headline {
    background: left 50% repeat-x linear-gradient(to right, var(--border-color) 0%, var(--border-color) 100%);
    background-size: 100% 1px;
    background-position: center;
    color: var(--text-secondary);
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 1.1875rem;
    margin: 0 0 0.3125rem;
    position: relative;
}

.sidebar-headline-text {
    background: var(--bg-content);
    display: inline-block;
    max-width: 90%;
    padding-right: 0.625rem;
}

.sidebar-widget ul {
    margin: 0.3125rem 0 -0.3125rem 1rem;
    list-style-type: disc;
}

.sidebar-widget ul li {
    line-height: 200%;
}

.sidebar-widget a {
    color: var(--link-color);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.sidebar-widget ul li a {
    text-decoration: none;
}

.sidebar-widget a:hover {
    color: var(--link-hover);
    text-decoration: none;
}

.tagcloud a {
    text-decoration: none;
    margin-right: 0.3125rem;
}

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

/* Content Headlines */
.content-headline {
    float: left;
    margin: 0 0 1.25rem;
    width: 100%;
}

.entry-headline {
    background: left 50% repeat-x linear-gradient(to right, var(--border-color) 0%, var(--border-color) 100%);
    background-size: 100% 1px;
    background-position: center;
    color: var(--text-primary);
    font-size: 1.6875rem;
    line-height: 100%;
    margin: 0 0 0.1875rem;
    position: relative;
    z-index: 50;
}

.entry-headline-text {
    background: var(--bg-content);
    display: inline-block;
    max-width: 90%;
    padding-right: 0.9375rem;
}

#content p,
#content ul,
#content ol,
#content table,
#content address {
    margin-bottom: 0.9375rem;
}

/* Post Entry (List View) */
.home-latest-posts {
    float: left;
    position: relative;
    width: 100%;
}

.post-entry {
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5625rem;
    padding-bottom: 1.25rem;
    width: 100%;
}

.post-entry:last-child {
    border-bottom: none;
}

.post-thumbnail-link {
    flex-shrink: 0;
    width: 200px;
}

.attachment-post-thumbnail {
    display: block;
    height: auto;
    width: 100%;
    object-fit: cover;
}

.post-entry-content-wrapper {
    flex: 1;
    min-width: 0;
}

.single-post .attachment-post-thumbnail {
    clear: both;
    display: block;
    float: none;
    margin: 0.25rem 0 1.25rem;
    max-width: 100%;
    padding: 0;
}

.post-entry-headline {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 1.1875rem;
    line-height: 100%;
    margin: 0 0 0.4375rem;
}

.post-entry-headline a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-entry-headline a:hover {
    color: var(--link-hover);
}

.post-meta {
    clear: both;
    color: var(--text-meta) !important;
    font-size: 0.75rem;
    line-height: 1.3125rem;
    padding-bottom: 0.3125rem;
    margin: 0;
}

.post-meta span {
    border-left: 1px solid var(--border-light);
    padding: 0 0.25rem 0 0.4375rem;
}

.post-meta .post-info-date {
    border-left: none;
    padding-left: 0;
}

.post-meta a {
    color: var(--text-meta);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

.post-meta i {
    margin-right: 0.25rem;
}

.post-entry-content {
    margin-bottom: -0.75rem;
    margin-top: -0.3125rem;
}

.read-more-button {
    background-color: var(--button-bg);
    color: white !important;
    display: inline-block;
    font-size: 0.75rem;
    line-height: 0.75rem;
    margin: 0.5rem 0 0.1875rem;
    padding: 0.375rem 0.5rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.read-more-button:hover {
    background-color: var(--text-muted);
}

/* Single Post */
.single-post .post-content {
    line-height: 170%;
}

.single-post .post-content p {
    margin-bottom: 0.9375rem;
}

.single-post .post-content img {
    margin: 0.625rem 0;
}

.post-info {
    border-top: 1px solid var(--border-color);
    clear: both;
    color: var(--text-meta);
    float: left;
    font-size: 0.75rem;
    line-height: 1.3125rem;
    margin: 0.625rem 0 0;
    padding: 0.625rem 0;
    width: 100%;
}

.post-info a {
    color: var(--text-meta);
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-info a:hover {
    color: var(--link-hover);
}

.post-tags i {
    margin-right: 0.25rem;
}

/* Navigation */
.navigation {
    float: left;
    margin: 0 0 1.5625rem;
    width: 100%;
}

#happenstance-post-nav {
    margin: 0.625rem 0 1.5625rem;
}

.nav-wrapper {
    border-bottom: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    float: left;
    padding: 0.3125rem 0;
    width: 100%;
}

.nav-previous {
    float: left;
    margin: 0;
    width: 50%;
}

.nav-next {
    float: right;
    margin: 0;
    text-align: right;
    width: 50%;
}

.nav-previous a,
.nav-next a {
    text-decoration: none;
}

.nav-previous a:hover,
.nav-next a:hover {
    text-decoration: underline;
}

/* Footer */
#wrapper-footer {
    background: var(--bg-header);
}

#footer {
    float: left;
    padding: 0 1.75rem;
    position: relative;
    width: 1114px;
}

#footer p,
#footer ul li,
#footer ol li {
    color: white;
    font-size: 0.8125rem;
}

#footer a {
    color: #c2e3f5;
}

.footer-widget-area {
    float: left;
    height: auto;
    margin-right: 1.75rem;
    padding: 2.1875rem 0 0.625rem;
    position: relative;
    width: 352px;
    z-index: 50;
}

.footer-widget {
    float: left;
    margin-bottom: 1.3125rem;
    width: 100%;
}

.footer-signature {
    background: #121212;
    float: left;
    position: relative;
    width: 100%;
    z-index: 50;
}

.footer-signature .footer-signature-content {
    color: white;
    font-size: 0.75rem;
    line-height: 1.375rem;
    min-height: 1.375rem;
    padding: 0.625rem 0;
    text-align: center;
}

.footer-signature .footer-signature-content p {
    color: white;
    font-size: 0.75rem;
    line-height: 1.375rem;
    min-height: 1.375rem;
    padding: 0;
    text-align: center;
}

.footer-signature .footer-signature-content a {
    color: #e3e3e3;
}

/* Simple Icon Classes (CSS-based) */
.icon-clock::before { content: "\23F0 "; }
.icon-folder::before { content: "\1F4C1 "; }
.icon-tag::before { content: "\1F3F7 "; }

/* Responsive */
@media screen and (max-width: 1170px) {
    #container {
        max-width: 1012px;
    }

    #main-content,
    .header-content,
    .menu-box,
    #footer {
        width: 956px;
    }

    .header-logo {
        max-width: 740px;
    }

    #content {
        width: 628px;
    }

    #sidebar {
        width: 300px;
    }

    .footer-widget-area {
        width: 300px;
    }
}

@media screen and (max-width: 1012px) {
    #container {
        max-width: 90%;
        width: 90%;
    }

    #main-content {
        padding: 1.75rem 5% 0.625rem;
        width: 90%;
    }

    #content {
        max-width: 100%;
        width: 100% !important;
    }

    #sidebar {
        float: left;
        margin: 0.9375rem 0 0;
        width: 100%;
    }

    .header-content {
        float: left !important;
        padding: 2.1875rem 5%;
        width: 90%;
    }

    .header-logo {
        float: left;
        max-width: 100%;
    }

    .menu-box {
        padding: 0;
        width: 100%;
    }

    .menu-box-container {
        min-height: 0;
    }

    .top-navigation {
        padding: 0 5%;
    }

    #footer {
        background-image: none;
        padding: 2.1875rem 5% 0.625rem;
        width: 90%;
    }

    .footer-widget-area {
        margin: 0;
        padding: 0;
        width: 100%;
    }
}

@media screen and (max-width: 600px) {
    .nav-wrapper {
        flex-direction: column;
    }

    .nav-previous,
    .nav-next {
        width: 100%;
        text-align: left;
        padding: 0.3125rem 0;
    }

    .post-entry {
        flex-direction: column;
    }

    .post-thumbnail-link {
        width: 100%;
    }

    .attachment-post-thumbnail {
        max-width: 100%;
        margin: 0 0 0.9375rem 0;
    }
}

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    cursor: pointer;
}

.lightbox-overlay.active {
    display: flex;
}

.lightbox-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    cursor: default;
}

.lightbox-close {
    position: absolute;
    top: 1.25rem;
    right: 1.875rem;
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.lightbox-close:hover {
    color: #ccc;
}

.post-content img {
    cursor: zoom-in;
}