/*
 Theme Name: OXTheme
 Theme URI: https://oxtheme.com
 Author: Frank
 Description: OXTheme is a simple and easy-to-use WordPress blog theme that is fast and responsive. It supports blogging features, allowing for custom backgrounds, logos, and menus, as well as featured images and threaded comments. The theme stands out for its clean design and quick loading speed, making it suitable for bloggers who seek efficient performance and a good reading experience. It is compatible with WordPress version 5.0 and above, and requires PHP 7.0 or higher. OXTheme is ideal for blog authors who wish to present their content through a clean and intuitive interface.
 Tags: blog, custom-background, custom-logo, custom-menu, featured-images, threaded-comments
 Version: 1.5.7
 License: GNU General Public License v3 or later
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
 Text Domain: oxtheme
 Requires at least: 5.0
 Tested up to: 6.3
 Requires PHP: 7.0
*/

:root {
    --background-color: #f8f9fa;
    --header-bg-color: #ffffff;
    --nav-bg-color: #ffffff;
    --post-bg-color: #ffffff;
    --border-color: #e9ecef;
    --footer-bg-color: #ffffff;
    --text-color: #212529;
    --link-color: #0066cc;
    --link-hover-color: #0056b3;
    --button-bg-color: #0066cc;
    --button-hover-bg-color: #0056b3;
    --font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: var(--text-color);
}

header {
    background-color: var(--header-bg-color);
    color: var(--text-color);
    padding: 20px 0;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header h1 {
    margin: 0;
}

header h1 a {
    color: #fff;
    text-decoration: none;
    font-size: 2em;
}

header p {
    margin: 0;
    font-size: 1em;
}

#content {
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 15px;
}

#primary {
    flex: 2;
    margin-right: 15px;
}

#secondary {
    flex: 1;
    background-color: var(--post-bg-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 20px;
    height: fit-content;
}

.post {
    display: flex;
    background-color: var(--post-bg-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 30px;
    padding: 25px;
    transition: transform 0.2s ease;
}

.post:hover {
    transform: translateY(-2px);
}

.post-thumbnail {
    flex: 0 0 250px;
    margin-right: 25px;
}

.post-thumb {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
    transition: opacity 0.3s ease;
}

.post-thumb:hover {
    opacity: 0.9;
}

.post-content {
    flex: 1;
}

.entry-title {
    margin: 0 0 15px;
    font-size: 1.8em;
    line-height: 1.3;
}

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

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

.entry-meta {
    color: #6c757d;
    font-size: 0.9em;
    margin-bottom: 15px;
}

.entry-meta span {
    margin-right: 15px;
}

.entry-summary {
    color: var(--text-color);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .post {
        flex-direction: column;
        padding: 15px;
    }

    .post-thumbnail {
        flex: none;
        margin-right: 0;
        margin-bottom: 15px;
    }

    .post-thumb {
        height: 200px;
    }

    .entry-title {
        font-size: 1.5em;
    }

    .entry-meta span {
        display: block;
        margin-bottom: 5px;
    }
}

footer {
    background-color: var(--footer-bg-color);
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
}

footer p {
    margin: 0;
    font-size: 14px;
}

nav {
    background-color: var(--nav-bg-color);
    text-align: center;
    margin-top: 15px;
}

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: var(--nav-bg-color);
    border-bottom: 1px solid var(--border-color);
}

.nav-menu li {
    display: inline;
    padding: 0 15px;
}

.nav-menu a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-menu li a {
    color: var(--text-color);
    text-decoration: none;
    font-size: 16px;
    padding: 15px 20px;
    display: block;
    transition: all 0.3s ease;
}

.nav-menu li a:hover {
    color: var(--link-color);
    background-color: rgba(0,0,0,0.02);
}

header h1 a {
    text-decoration: none;
    color: inherit;
}

header h1 a:hover {
    text-decoration: underline;
}

.entry-title {
    font-size: 2.2em;
    margin-bottom: 0.8em;
    color: var(--text-color);
    font-weight: 600;
}

.entry-meta {
    font-size: 0.95em;
    color: #6c757d;
    margin-bottom: 1.8em;
}

.entry-content {
    line-height: 1.8;
    margin-bottom: 2em;
    font-size: 1.1em;
}

.entry-footer {
    margin-top: 2em;
    border-top: 1px solid #ddd;
    padding-top: 1em;
}

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--button-bg-color);
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
    font-size: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.back-to-top:hover {
    background-color: var(--button-hover-bg-color);
}

.pagination {
    text-align: center;
    margin: 20px 0;
}

.pagination a {
    padding: 12px 20px;
    margin: 0 5px;
    background-color: var(--button-bg-color);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.pagination a:hover {
    background-color: var(--button-hover-bg-color);
}

.nav-previous,
.nav-next {
    display: inline-block;
}

/* 媒体查询 */
@media (max-width: 768px) {
    #content {
        flex-direction: column;
        padding: 0 10px;
    }

    #primary {
        margin-right: 0;
        margin-bottom: 15px;
    }

    .post {
        padding: 20px;
        margin-bottom: 20px;
    }

    .entry-title {
        font-size: 1.8em;
    }

    .entry-content {
        font-size: 1em;
    }

    .nav-menu li a {
        padding: 12px 15px;
    }
}

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #333;
    color: #fff;
    padding: 8px;
    z-index: 100;
}

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

.menu-toggle {
    display: none;
    cursor: pointer;
    color: #fff;
    font-size: 1.5em;
    background: none;
    border: none;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }

    .nav-menu {
        display: none;
    }

    .nav-menu.active {
        display: flex;
        flex-direction: column;
    }
}

.wp-caption {
    border: 1px solid #ddd;
    padding: 5px;
}

.wp-caption-text {
    font-size: 0.8em;
    color: #666;
}

.sticky {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

.gallery-caption {
    font-size: 0.8em;
    color: #666;
}

.bypostauthor {
    font-style: italic;
}

.alignright {
    float: right;
    margin: 0 0 10px 10px;
}

.alignleft {
    float: left;
    margin: 0 10px 10px 0;
}

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

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

a {
    text-decoration: underline;
    color: #0073aa;
    /* 根据主题颜色调整 */
}

a:hover,
a:focus {
    color: #005177;
    /* 悬停时的颜色 */
}

a:focus,
button:focus,
input:focus {
    outline: 3px solid #0073aa;
    /* 根据主题颜色调整 */
    outline-offset: 2px;
}