/* Basic clean styles for CleanLite */

:root { 
    --wrap-width: 1100px; 
    --accent: #1e73be; 
    color-scheme: light; 
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #222;
    background: #fff;
    line-height: 1.6;
}

.wrap { 
    max-width: var(--wrap-width); 
    margin: 0 auto; 
    padding: 20px; 
}

.site-header { 
    border-bottom: 1px solid #eaeaea; 
    padding: 12px 0; 
}

/* Site title - color controlled by Customizer */
.site-title { 
    font-size: 20px; 
    text-decoration: none; 
    margin: 0; 
    display: inline-block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.site-title a {
    text-decoration: none;
}

.site-description { 
    margin: 0; 
    font-size: 13px; 
}

/* Menu base styles */
.menu { 
    margin-top: 8px; 
    list-style: none; 
    padding: 0; 
}

.menu li { 
    display: inline-block; 
    margin-right: 12px; 
}

/* Menu links - color controlled by Customizer */
.menu a,
.main-navigation a,
#primary-menu a {
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Fix for long titles */
.entry-title { 
    margin: 0 0 8px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
}

.entry-title a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-decoration: none;
    color: inherit;
}

.entry-meta { 
    font-size: 13px; 
    color: #666; 
    margin-bottom: 12px; 
}

.entry-content { 
    margin-bottom: 28px;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.site-footer {
    border-top: 1px solid #eaeaea;
    padding: 18px 0;
    font-size: 14px;
    color: #666;
}

.widget { 
    margin-bottom: 20px; 
}

@media (max-width: 768px) {
    .wrap { 
        padding: 12px; 
    }
    .menu li { 
        display: block; 
        margin-bottom: 8px; 
    }
}

/* Featured images */
.post-thumbnail img,
.post-thumbnail-single img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
    border-radius: 4px;
}

/* Tags */
.entry-tags {
    margin-top: 12px;
    font-size: 14px;
}

.entry-tags .tag-links a {
    background: #f1f1f1;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    margin-right: 6px;
}

/* Block style: highlight */
.is-style-cleanlite-highlight {
    background: #ffffcc;
    padding: 4px 6px;
}

/* Theme Check recommended utility classes */
.wp-caption {
    padding: 4px;
    background: #f8f8f8;
    border: 1px solid #eaeaea;
    display: inline-block;
    max-width: 100%;
}

.wp-caption-text,
.gallery-caption {
    font-size: 13px;
    color: #666;
    margin-top: 6px;
}

.sticky {
    background: #fffbe6;
    padding: 6px;
    border-left: 4px solid #ffd54f;
}

.bypostauthor { 
    font-weight: 700; 
}

.alignright { 
    float: right; 
    margin: 0 0 1em 1em; 
}

.alignleft { 
    float: left; 
    margin: 0 1em 1em 0; 
}

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

.screen-reader-text {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    left: 8px;
    top: 8px;
    width: auto;
    height: auto;
    display: block;
    font-size: 14px;
    font-weight: bold;
    padding: 8px 12px;
    background: var(--accent, #1e73be);
    color: #fff;
    z-index: 100000;
    text-decoration: none;
    border-radius: 4px;
}

/* Skip link styles */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--accent, #1e73be);
    color: #fff;
    padding: 8px 12px;
    z-index: 100000;
    text-decoration: none;
    transition: top .15s ease;
    border-radius: 4px;
}

.skip-link:focus {
    top: 8px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Navigation layout */
.main-navigation .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 12px;
}

.main-navigation .menu li {
    margin: 0;
}

/* Menu toggle button */
.menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

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

    .main-navigation .menu {
        display: none;
        flex-direction: column;
        margin-top: 12px;
    }

    #primary-menu.toggled-on {
        display: flex !important;
        flex-direction: column;
    }

    .main-navigation .menu li {
        margin-bottom: 8px;
    }
}

/* Long titles safety */
.entry-title,
.site-title {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}


/* Site wrapper */
.site-wrapper {
    overflow-x: hidden;
    position: relative;
}

/* Sticky header styles */
.site-header.is-sticky {
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #fff;
}

/* Admin bar offset for sticky header */
.admin-bar .site-header.is-sticky {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header.is-sticky {
        top: 46px;
    }
}