/*
Theme Name: CleanPress
Theme URI: https://github.com/transatlanticvoyage/cleanpress
Author: transatlanticvoyage
Description: CleanPress WordPress theme.
Version: 1.0.0
License: GPL v2 or later
*/

/* ============================================
   Reset & Base
   ============================================ */

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

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #1a1a1a;
    background: #f3f4f6; /* light gray page background (header + content panels stay white) */
}

a {
    color: #2563eb;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #1d4ed8;
}

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

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    color: #111827;
}

h1 { font-size: 2rem; margin-bottom: 0.75rem; }
h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }

p {
    margin-bottom: 1.25rem;
}

ul, ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5em;
}

blockquote {
    border-left: 4px solid #2563eb;
    padding: 0.75rem 1.25rem;
    margin: 1.5rem 0;
    background: #f8fafc;
    color: #374151;
    font-style: italic;
}

pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1.25rem;
    border-radius: 6px;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
}

code {
    font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
    font-size: 0.875em;
}

:not(pre) > code {
    background: #f1f5f9;
    padding: 0.15em 0.4em;
    border-radius: 3px;
    color: #0f172a;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

th, td {
    padding: 0.625rem 0.75rem;
    border: 1px solid #e5e7eb;
    text-align: left;
}

th {
    background: #f9fafb;
    font-weight: 600;
}

hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 2rem 0;
}

/* ============================================
   Header
   ============================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

/* When the WordPress admin bar is shown (logged-in users) it is fixed at the top
   of the viewport. Offset the sticky header below it so the WHOLE header "catches"
   and stays visible, instead of its top portion sliding under the admin bar. */
.admin-bar .site-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

.site-header-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* min-height (not a fixed height) so a long menu that wraps to a second line
       makes the header GROW instead of overflowing above/below the bar. */
    min-height: 64px;
}

.site-branding {
    flex-shrink: 0;
}

.site-title-link {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
}

.site-title-link:hover {
    color: #2563eb;
}

.custom-logo-link img {
    max-height: 40px;
    width: auto;
}

/* Navigation */

.main-navigation {
    display: flex;
    align-items: center;
    min-width: 0; /* allow the nav to shrink so the menu wraps rather than overflowing */
}

.primary-menu {
    list-style: none;
    display: flex;
    flex-wrap: wrap;            /* wrap to additional rows when the menu is too wide */
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}

.primary-menu li {
    position: relative;
}

.primary-menu a {
    display: block;
    padding: 0.5rem 0.875rem;
    color: #374151;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 6px;
    overflow-wrap: anywhere; /* break a pathologically long label/URL instead of overflowing */
    transition: color 0.2s ease, background 0.2s ease;
}

.primary-menu a:hover,
.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
    color: #2563eb;
    background: #eff6ff;
}

/* Submenu */

.primary-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    min-width: 200px;
    padding: 0.5rem 0;
    list-style: none;
    z-index: 200;
}

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

.primary-menu .sub-menu a {
    padding: 0.5rem 1rem;
    border-radius: 0;
    font-size: 0.875rem;
}

/* Menu toggle (mobile) */

.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 24px;
    flex-direction: column;
    justify-content: space-between;
    padding: 0;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #374151;
    border-radius: 2px;
    transition: transform 0.2s ease;
}

/* ============================================
   Layout
   ============================================ */

.site-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}

.layout-with-sidebar {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

.site-main {
    flex: 1;
    min-width: 0;
    max-width: 720px;
    /* White content area for single posts/pages, sitting on the light-gray page. */
    background: #ffffff;
    border-radius: 10px;
    padding: 2rem;
}

/* On list/feed pages the main column is transparent, so the gray page background
   shows between posts; each post becomes its own white card (see .post-card). */
.blog .site-main,
.archive .site-main,
.search .site-main {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* ============================================
   Sidebar
   ============================================ */

.sidebar {
    width: 300px;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 8px;
    padding: 1.5rem;
}

.widget {
    margin-bottom: 2rem;
}

.widget:last-child {
    margin-bottom: 0;
}

.widget-title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget ul li {
    padding: 0.375rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.widget ul li:last-child {
    border-bottom: none;
}

.widget ul li a {
    color: #374151;
    font-size: 0.9375rem;
}

.widget ul li a:hover {
    color: #2563eb;
}

.widget select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.875rem;
}

/* Search widget */

.widget .search-form {
    display: flex;
}

.widget .search-field {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-right: none;
    border-radius: 6px 0 0 6px;
    font-family: inherit;
    font-size: 0.875rem;
    outline: none;
}

.widget .search-field:focus {
    border-color: #2563eb;
}

.widget .search-submit {
    padding: 0.5rem 1rem;
    background: #2563eb;
    color: #ffffff;
    border: 1px solid #2563eb;
    border-radius: 0 6px 6px 0;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.widget .search-submit:hover {
    background: #1d4ed8;
}

/* ============================================
   Post Cards (index, archive, search)
   ============================================ */

.post-card {
    background: #ffffff;
    padding: 2rem;
    border-radius: 10px;
    /* 20px of gray (the page background) separating each post on the feed. */
    margin-bottom: 20px;
}

.post-card:last-of-type {
    margin-bottom: 0;
}

.post-card .post-thumbnail {
    display: block;
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
}

.post-card .post-thumbnail img {
    width: 100%;
    transition: transform 0.3s ease;
}

.post-card .post-thumbnail:hover img {
    transform: scale(1.02);
}

.post-card .entry-title {
    margin-bottom: 0.375rem;
}

.post-card .entry-title a {
    color: #111827;
}

.post-card .entry-title a:hover {
    color: #2563eb;
}

.entry-meta {
    font-size: 0.8125rem;
    color: #6b7280;
    margin-bottom: 0.75rem;
}

.entry-meta a {
    color: #6b7280;
}

.entry-meta a:hover {
    color: #2563eb;
}

/* Author name in the post meta/breadcrumb area (feed + single posts) in blue. */
.entry-meta .author {
    color: #2563eb;
}

.meta-sep {
    margin: 0 0.375rem;
}

.entry-excerpt {
    color: #4b5563;
    margin-bottom: 0.75rem;
}

/* The feed can show the full post (Veyra "show full post on blog feed"), so its
   paragraphs/headings need the same spacing as single posts — otherwise the empty
   lines between paragraphs collapse and the content looks cluttered. */
.entry-excerpt p {
    margin-bottom: 1.25rem;
}

.entry-excerpt h2 {
    margin-top: 2rem;
}

.entry-excerpt h3 {
    margin-top: 1.5rem;
}

/* No trailing gap before the "Read more" link. */
.entry-excerpt > :last-child {
    margin-bottom: 0;
}

.read-more {
    font-size: 0.875rem;
    font-weight: 600;
    color: #2563eb;
}

.read-more:hover {
    color: #1d4ed8;
}

/* ============================================
   Single Post
   ============================================ */

.single-post .entry-header {
    margin-bottom: 2rem;
}

.single-post .entry-title {
    font-size: 2.25rem;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

.single-post .entry-meta {
    margin-bottom: 0;
}

.post-featured-image {
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden;
}

.entry-content {
    margin-bottom: 2rem;
}

.entry-content h2 {
    margin-top: 2rem;
}

.entry-content h3 {
    margin-top: 1.5rem;
}

.entry-footer {
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    margin-bottom: 2rem;
}

.tag-links {
    font-size: 0.875rem;
    color: #6b7280;
}

.tag-links a {
    color: #2563eb;
    font-weight: 500;
}

.tag-links a:hover {
    color: #1d4ed8;
}

/* ============================================
   Page
   ============================================ */

.page-entry .entry-title {
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
}

/* ============================================
   Archive / Search Headers
   ============================================ */

.archive-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
}

.archive-title {
    font-size: 1.75rem;
    color: #111827;
}

.archive-title span {
    color: #2563eb;
}

.archive-description {
    margin-top: 0.5rem;
    color: #6b7280;
}

/* ============================================
   Post Navigation (single)
   ============================================ */

.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 2rem;
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 1.5rem;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
    min-width: 0;
}

.post-navigation .nav-next {
    text-align: right;
}

.nav-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.nav-title {
    display: block;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-navigation a:hover .nav-title {
    color: #2563eb;
}

/* ============================================
   Pagination
   ============================================ */

.pagination,
.nav-links {
    margin-top: 2rem;
}

.pagination .nav-links {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    align-items: center;
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background: #ffffff;
    transition: all 0.2s ease;
}

.pagination .page-numbers:hover {
    border-color: #2563eb;
    color: #2563eb;
}

.pagination .page-numbers.current {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.pagination .page-numbers.dots {
    border: none;
    background: none;
}

.pagination .prev,
.pagination .next {
    font-weight: 600;
}

/* ============================================
   Comments
   ============================================ */

.comments-area {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid #e5e7eb;
}

.comments-title {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.comment-list .comment {
    padding: 1.25rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.comment-list .children {
    list-style: none;
    padding-left: 2rem;
    margin: 0;
}

.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.comment-meta img.avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

.comment-author .fn {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #111827;
}

.comment-metadata {
    font-size: 0.75rem;
    color: #9ca3af;
}

.comment-metadata a {
    color: #9ca3af;
}

.comment-metadata a:hover {
    color: #2563eb;
}

.comment-body .reply {
    margin-top: 0.5rem;
}

.comment-body .reply a {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #2563eb;
}

.comment-body .reply a:hover {
    color: #1d4ed8;
}

.no-comments {
    color: #6b7280;
    font-style: italic;
}

/* Comment form */

.comment-respond {
    margin-top: 2rem;
}

.comment-respond .comment-reply-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.comment-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.375rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.2s ease;
    margin-bottom: 1rem;
}

.comment-form input:focus,
.comment-form textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.comment-form textarea {
    min-height: 150px;
    resize: vertical;
}

.comment-form .form-submit .submit {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.5rem;
    background: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.comment-form .form-submit .submit:hover {
    background: #1d4ed8;
}

/* ============================================
   404
   ============================================ */

.error-404 {
    text-align: center;
    padding: 4rem 0;
}

.error-404 .entry-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.error-404 p {
    color: #6b7280;
    font-size: 1.0625rem;
}

.error-404 .search-form {
    display: inline-flex;
    margin-top: 1rem;
}

.error-404 .search-field {
    padding: 0.625rem 1rem;
    border: 1px solid #d1d5db;
    border-right: none;
    border-radius: 6px 0 0 6px;
    font-family: inherit;
    font-size: 0.9375rem;
    outline: none;
    min-width: 280px;
}

.error-404 .search-field:focus {
    border-color: #2563eb;
}

.error-404 .search-submit {
    padding: 0.625rem 1.25rem;
    background: #2563eb;
    color: #ffffff;
    border: 1px solid #2563eb;
    border-radius: 0 6px 6px 0;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.error-404 .search-submit:hover {
    background: #1d4ed8;
}

/* ============================================
   No Results
   ============================================ */

.no-results {
    padding: 3rem 0;
    text-align: center;
}

.no-results h2 {
    margin-bottom: 0.75rem;
}

.no-results p {
    color: #6b7280;
    margin-bottom: 1.5rem;
}

.no-results .search-form {
    display: inline-flex;
}

.no-results .search-field {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-right: none;
    border-radius: 6px 0 0 6px;
    font-family: inherit;
    font-size: 0.875rem;
    outline: none;
}

.no-results .search-submit {
    padding: 0.5rem 1rem;
    background: #2563eb;
    color: #fff;
    border: 1px solid #2563eb;
    border-radius: 0 6px 6px 0;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

/* ============================================
   Footer
   ============================================ */

.site-footer {
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.site-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    text-align: center;
}

.site-footer p {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

/* ============================================
   WordPress Core Classes
   ============================================ */

.alignleft {
    float: left;
    margin: 0.5rem 1.5rem 1rem 0;
}

.alignright {
    float: right;
    margin: 0.5rem 0 1rem 1.5rem;
}

.aligncenter {
    display: block;
    margin: 1rem auto;
}

.wp-caption {
    max-width: 100%;
    margin-bottom: 1.25rem;
}

.wp-caption-text {
    font-size: 0.8125rem;
    color: #6b7280;
    text-align: center;
    padding-top: 0.5rem;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.gallery-item {
    flex: 1 1 calc(33.333% - 0.5rem);
}

.gallery-item img {
    border-radius: 4px;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal;
}

.screen-reader-text:focus {
    clip: auto;
    display: block;
    height: auto;
    width: auto;
    position: static;
}

.sticky .entry-title::before {
    content: "Featured: ";
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   Page Links (multipage posts)
   ============================================ */

.page-links {
    font-weight: 600;
    margin: 1.5rem 0;
    color: #374151;
}

.page-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.375rem;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    margin: 0 0.25rem;
}

.page-links a:hover {
    border-color: #2563eb;
    color: #2563eb;
}

/* ============================================
   Comments Navigation
   ============================================ */

.comment-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    font-size: 0.875rem;
    font-weight: 600;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
    .layout-with-sidebar {
        flex-direction: column;
    }

    .site-main {
        max-width: 100%;
    }

    .sidebar {
        width: 100%;
    }

    .menu-toggle {
        display: flex;
    }

    .main-navigation {
        display: none;
        position: absolute;
        top: 100%; /* sit directly below the header no matter its height */
        left: 0;
        right: 0;
        background: #ffffff;
        border-bottom: 1px solid #e5e7eb;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        padding: 1rem 1.5rem;
    }

    .main-navigation.is-open {
        display: block;
    }

    .primary-menu {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;       /* reset desktop centering: full-width stacked links */
        justify-content: flex-start;
        gap: 0;
    }

    .primary-menu a {
        padding: 0.625rem 0.5rem;
    }

    .primary-menu .sub-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 1rem;
    }

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

    .single-post .entry-title,
    .page-entry .entry-title {
        font-size: 1.75rem;
    }

    .error-404 .search-field {
        min-width: 200px;
    }

    .post-navigation .nav-links {
        flex-direction: column;
    }

    .post-navigation .nav-next {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .site-content {
        padding: 1.5rem 1rem;
    }

    .site-header-inner {
        padding: 0 1rem;
    }

    h1 { font-size: 1.625rem; }
    h2 { font-size: 1.25rem; }
}