/*
Theme Name: StoryNest
Author: StoryNest
Description: A clean, extensible custom WordPress theme starter with navigation, widgets, post formats, thumbnails, custom image sizes, accessibility helpers, and common theme functionality.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: storynest
*/

:root {
    --storynest-color-primary: #222;
    --storynest-color-text: #333;
    --storynest-color-muted: #777;
    --storynest-color-border: #e5e5e5;
    --storynest-color-bg: #fff;
    --storynest-color-surface: #f7f7f7;
    --storynest-container: 1200px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--storynest-color-bg);
    color: var(--storynest-color-text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.7;
}

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

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

.storynest-container {
    width: min(100% - 40px, var(--storynest-container));
    margin-inline: auto;
}

.storynest-site-header,
.storynest-site-footer { padding: 24px 0; border-bottom: 1px solid var(--storynest-color-border); }

.storynest-site-footer { border-top: 1px solid var(--storynest-color-border); border-bottom: 0; margin-top: 60px; }

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

.storynest-site-title { margin: 0; font-size: 28px; }
.storynest-site-title a { text-decoration: none; }

.storynest-main { padding: 50px 0; }

.storynest-entry { margin-bottom: 50px; }
.storynest-entry-title { margin: 0 0 12px; line-height: 1.2; }
.storynest-entry-meta { color: var(--storynest-color-muted); font-size: 14px; }
.storynest-entry-thumbnail { margin: 20px 0; }
.storynest-entry-content { max-width: 850px; }

.storynest-pagination { margin-top: 40px; }
.storynest-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;
}

.storynest-screen-reader-text:focus {
    background: #fff;
    clip: auto !important;
    clip-path: none;
    color: #000;
    display: block;
    font-size: 14px;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 20px;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.storynest-menu ul,
.storynest-menu ul ul { list-style: none; margin: 0; padding: 0; }
.storynest-menu > ul { display: flex; flex-wrap: wrap; gap: 20px; }
.storynest-menu a { text-decoration: none; }

.storynest-sidebar { padding-top: 40px; }
.storynest-widget { margin-bottom: 35px; }
.storynest-widget-title { font-size: 20px; margin: 0 0 12px; }

.storynest-comment-list { list-style: none; margin: 0; padding: 0; }
.storynest-comment { margin-bottom: 25px; }

@media (min-width: 900px) {
    .storynest-content-sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 50px;
    }
}