/*
Theme Name: MyBlog
Theme URI: https://example.com/myblog
Author: Your Name
Author URI: https://example.com
Description: A modern blog theme with rhythmic design inspired by Rhythmic theme. Features a clean dark theme with card-based layout, perfect for sharing programming tutorials, TIL posts, and curated links.
Version: 2.0
Requires at least: 5.9
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myblog
Tags: blog, one-column, two-columns, block-patterns, block-styles, custom-background, custom-logo, custom-menu, featured-images, full-site-editing, translation-ready

MyBlog is distributed under the terms of the GNU GPL v2 or later.
*/

/*--------------------------------------------------------------
# Base Styles
--------------------------------------------------------------*/
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25ch;
}

a:hover,
a:focus {
    text-decoration: none;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
body:not(.home) .wp-site-blocks main {
    padding-bottom: var(--wp--custom--spacing--main-block-gap);
    padding-top: var(--wp--custom--spacing--main-block-gap);
}

.wp-site-blocks,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-block-cover.alignfull {
    padding-left: var(--wp--custom--spacing--outer);
    padding-right: var(--wp--custom--spacing--outer);
}

/*--------------------------------------------------------------
# Blog Section
--------------------------------------------------------------*/
.blog-section {
    margin-top: var(--wp--custom--spacing--main-block-gap);
}

.wp-block-post-container {
    margin-bottom: var(--wp--custom--spacing--normal);
}

.wp-block-post-meta {
    gap: 15px;
    flex-wrap: wrap;
}

.wp-block-post-meta > * {
    align-items: center;
}

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.wp-block-sidebar {
    background-color: var(--wp--preset--color--primary);
    padding: var(--wp--custom--spacing--extra-small);
    border-radius: 8px;
}

.wp-block-sidebar-widget {
    margin-bottom: var(--wp--custom--spacing--normal);
    padding-bottom: var(--wp--custom--spacing--normal);
    border-bottom: 1px solid var(--wp--preset--color--border-color);
}

.wp-block-sidebar-widget:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.wp-block-sidebar-widget h4 {
    color: var(--wp--preset--color--foreground);
    font-size: var(--wp--preset--font-size--upper-heading);
    font-weight: var(--wp--custom--typography--font-weight--bold);
    margin-bottom: 15px;
}

.wp-block-column-sidebar {
    margin-top: var(--wp--custom--spacing--column-gap);
}

@media (max-width: 1024px) {
    .wp-block-sidebar-on-right,
    .wp-block-sidebar-on-left {
        flex-direction: column;
    }
    
    .wp-block-column-sidebar {
        flex-basis: 100% !important;
        margin-top: 0;
    }
}

/*--------------------------------------------------------------
# Post Styles
--------------------------------------------------------------*/
.wp-block-post-template > li {
    margin-bottom: var(--wp--custom--spacing--normal);
}

.wp-block-post-title {
    font-size: var(--wp--preset--font-size--large);
    font-weight: var(--wp--custom--typography--font-weight--normal);
    line-height: var(--wp--custom--typography--line-height--post-title);
    margin-bottom: 10px;
}

.wp-block-post-title a {
    color: var(--wp--preset--color--foreground);
    text-decoration: none;
}

.wp-block-post-title a:hover {
    color: var(--wp--preset--color--hover-color);
}

.wp-block-post-featured-image {
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 20px;
}

.wp-block-post-featured-image img {
    transition: transform 0.5s ease-in-out;
}

.wp-block-post-featured-image:hover img {
    transform: scale(1.05);
}

.wp-block-post-excerpt {
    color: var(--wp--preset--color--secondary-text-color);
    font-size: var(--wp--preset--font-size--body-default);
    line-height: var(--wp--custom--typography--line-height--paragraph);
}

.wp-block-post-excerpt__more-link {
    color: var(--wp--preset--color--hover-color);
    text-decoration: none;
    font-weight: var(--wp--custom--typography--font-weight--bold);
}

.wp-block-post-excerpt__more-link:hover {
    text-decoration: underline;
}

/*--------------------------------------------------------------
# Post Meta
--------------------------------------------------------------*/
.taxonomy-category.wp-block-post-terms > a,
.taxonomy-post_tag.wp-block-post-terms > a,
.wp-block-post-date a,
.wp-block-post-author a {
    text-decoration: none;
    text-transform: capitalize;
    font-size: var(--wp--preset--font-size--extra-small);
    color: var(--wp--preset--color--tertiary);
}

.taxonomy-category.wp-block-post-terms > a:hover,
.taxonomy-post_tag.wp-block-post-terms > a:hover {
    color: var(--wp--preset--color--hover-color);
}

.single .taxonomy-category.wp-block-post-terms > a,
.single .taxonomy-post_tag.wp-block-post-terms > a {
    display: inline-block;
    margin-right: 7px;
    margin-bottom: 7px;
    padding: 4px 14px;
    background-color: var(--wp--preset--color--primary);
    border-radius: 20px;
}

.single .taxonomy-category.wp-block-post-terms > .wp-block-post-terms__separator,
.single .taxonomy-post_tag.wp-block-post-terms > .wp-block-post-terms__separator {
    display: none;
}

/*--------------------------------------------------------------
# Post Author Card
--------------------------------------------------------------*/
.is-style-myblog-post-author-card,
.is-style-Rhythmic-post-author-card {
    border: 1px solid var(--wp--preset--color--border-color);
    padding: var(--wp--custom--spacing--extra-small);
    border-radius: 8px;
    background-color: var(--wp--preset--color--primary);
}

.wp-block-post-author .wp-block-post-author__content {
    padding-left: 10px;
}

.wp-block-post-author .wp-block-post-author__bio {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--secondary-text-color);
}

.wp-block-post-author .wp-block-post-author__name {
    font-size: var(--wp--preset--font-size--body-default);
    font-weight: var(--wp--custom--typography--font-weight--bold);
    color: var(--wp--preset--color--foreground);
}

.wp-block-post-author__avatar .avatar {
    border-radius: 50%;
}

/*--------------------------------------------------------------
# Post Comments
--------------------------------------------------------------*/
.wp-block-post-comments.is-style-myblog-post-comments .commentlist > li > article,
.wp-block-post-comments.is-style-myblog-post-comments .commentlist > li > .children > li article {
    border-bottom: 1px solid var(--wp--preset--color--border-color);
    padding-bottom: var(--wp--custom--spacing--normal);
    padding-top: var(--wp--custom--spacing--normal);
}

.wp-block-post-comments.is-style-myblog-post-comments .commentlist .comment-body > *:last-child,
.wp-block-post-comments.is-style-myblog-post-comments .comment-respond > *:last-child {
    margin-bottom: 0;
}

.wp-block-post-comments.is-style-myblog-post-comments .comment-author,
.wp-block-post-comments.is-style-myblog-post-comments .fn {
    color: var(--wp--preset--color--foreground);
    font-size: var(--wp--preset--font-size--body-default);
    font-weight: var(--wp--custom--typography--font-weight--bold);
}

.wp-block-post-comments.is-style-myblog-post-comments .comment-content {
    margin-top: 20px;
    color: var(--wp--preset--color--secondary-text-color);
}

.wp-block-post-comments.is-style-myblog-post-comments .comment-metadata {
    color: var(--wp--preset--color--tertiary);
    font-size: var(--wp--preset--font-size--tiny);
    margin-top: 8px;
}

.wp-block-post-comments .comment-author .avatar {
    border-radius: 50%;
    height: 65px;
    margin-right: 21px;
    width: 65px;
}

.wp-block-post-comments.is-style-myblog-post-comments .reply {
    font-size: var(--wp--preset--font-size--small);
}

.wp-block-post-comments.is-style-myblog-post-comments .reply a {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: var(--wp--custom--typography--font-weight--bold);
    color: var(--wp--preset--color--hover-color);
}

.wp-block-post-comments.is-style-myblog-post-comments .comment-respond {
    margin-top: var(--wp--custom--spacing--normal);
    padding: var(--wp--custom--spacing--normal);
    margin-left: auto;
    margin-right: auto;
    max-width: 580px;
    background-color: var(--wp--preset--color--primary);
    border-radius: 8px;
}

/*--------------------------------------------------------------
# Query Pagination
--------------------------------------------------------------*/
.wp-block-query-pagination {
    margin-top: var(--wp--custom--spacing--normal);
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    border: 2px solid var(--wp--preset--color--border-color);
    border-radius: 45px;
    padding: clamp(10px, 3vw, 15px) clamp(24px, 3vw, 42px);
    text-transform: uppercase;
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--typography--font-weight--bold);
    color: var(--wp--preset--color--foreground);
    transition: all 0.5s ease-in-out;
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
    background-color: var(--wp--preset--color--hover-color);
    border-color: var(--wp--preset--color--hover-color);
    color: var(--wp--preset--color--foreground);
}

.wp-block-query-pagination-numbers .page-numbers {
    background-color: var(--wp--preset--color--primary);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wp--preset--font-size--upper-heading);
    height: var(--wp--custom--spacing--wp-block-page-numbers, 42px);
    width: var(--wp--custom--spacing--wp-block-page-numbers, 42px);
    margin-right: 7px;
    text-decoration: none;
    color: var(--wp--preset--color--foreground);
}

.wp-block-query-pagination-numbers .page-numbers.current,
.wp-block-query-pagination-numbers .page-numbers:hover {
    background-color: var(--wp--preset--color--hover-color);
    color: var(--wp--preset--color--foreground);
}

/*--------------------------------------------------------------
# Post Navigation Link
--------------------------------------------------------------*/
.wp-block-post-navigation-link .post-navigation-link__label {
    display: block;
    font-size: var(--wp--preset--font-size--extra-small);
    font-weight: var(--wp--custom--typography--font-weight--bold);
    text-transform: uppercase;
    margin-bottom: 10px;
    color: var(--wp--preset--color--secondary-text-color);
}

.wp-block-post-navigation-link a {
    text-decoration: none;
    color: var(--wp--preset--color--foreground);
    font-size: var(--wp--preset--font-size--content-heading);
    font-weight: var(--wp--custom--typography--font-weight--bold);
}

.wp-block-post-navigation-link a:hover {
    color: var(--wp--preset--color--hover-color);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header {
    padding: 20px 0;
    background-color: var(--wp--preset--color--primary);
    border-bottom: 1px solid var(--wp--preset--color--border-color);
}

.site-header .wp-block-site-title a {
    color: var(--wp--preset--color--foreground);
    text-decoration: none;
}

.site-header .wp-block-navigation a {
    color: var(--wp--preset--color--secondary-text-color);
}

.site-header .wp-block-navigation a:hover {
    color: var(--wp--preset--color--foreground);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.site-footer {
    padding: 40px 0;
    margin-top: var(--wp--custom--spacing--footer-gap);
}

.site-footer p {
    color: var(--wp--preset--color--secondary-text-color);
    margin: 0;
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.wp-block-button__link {
    border-radius: 45px;
    padding: clamp(10px, 3vw, 17px) clamp(32px, 3vw, 36px);
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--typography--font-weight--bold);
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.5s ease-in-out;
}

.wp-block-button__link:hover {
    transform: translateY(-10px);
    box-shadow: 0 29px 38px -25px var(--wp--preset--color--background);
}

.is-style-myblog-button .wp-block-button__link {
    background-color: transparent;
    border: 2px solid var(--wp--preset--color--foreground);
}

.is-style-myblog-button .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--hover-color);
    border-color: var(--wp--preset--color--hover-color);
}

/*--------------------------------------------------------------
# Search
--------------------------------------------------------------*/
.wp-block-search {
    display: flex;
    flex-wrap: wrap;
}

.wp-block-search__input {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid var(--wp--preset--color--border-color);
    border-radius: 45px 0 0 45px;
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--foreground);
}

.wp-block-search__input:focus {
    outline: none;
    border-color: var(--wp--preset--color--hover-color);
}

.wp-block-search__button {
    border-radius: 0 45px 45px 0;
    padding: 10px 20px;
    background-color: var(--wp--preset--color--hover-color);
    color: var(--wp--preset--color--foreground);
    border: none;
}

.wp-block-search__button:hover {
    background-color: var(--wp--preset--color--foreground);
    color: var(--wp--preset--color--primary);
}

/*--------------------------------------------------------------
# Latest Posts Widget
--------------------------------------------------------------*/
.wp-block-latest-posts a {
    text-decoration: none;
    color: var(--wp--preset--color--secondary-text-color);
}

.wp-block-latest-posts a:hover {
    color: var(--wp--preset--color--hover-color);
}

.wp-block-latest-posts__post-date {
    color: var(--wp--preset--color--tertiary);
    font-size: var(--wp--preset--font-size--tiny);
}

/*--------------------------------------------------------------
# Categories Widget
--------------------------------------------------------------*/
.wp-block-categories ul,
.wp-block-archives ul {
    list-style: none;
    padding: 0;
}

.wp-block-categories li,
.wp-block-archives li {
    margin-bottom: 10px;
}

.wp-block-categories a,
.wp-block-archives a {
    text-decoration: none;
    color: var(--wp--preset--color--secondary-text-color);
}

.wp-block-categories a:hover,
.wp-block-archives a:hover {
    color: var(--wp--preset--color--hover-color);
}

/*--------------------------------------------------------------
# Tag Cloud
--------------------------------------------------------------*/
.wp-block-tag-cloud a {
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 5px 12px;
    background-color: var(--wp--preset--color--primary);
    border-radius: 20px;
    text-decoration: none;
    color: var(--wp--preset--color--secondary-text-color);
    font-size: var(--wp--preset--font-size--small) !important;
}

.wp-block-tag-cloud a:hover {
    background-color: var(--wp--preset--color--hover-color);
    color: var(--wp--preset--color--foreground);
}

/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/
@media (max-width: 768px) {
    .wp-block-columns.alignwide {
        flex-direction: column;
    }
    
    .wp-block-column {
        flex-basis: 100% !important;
    }
    
    .wp-block-post-title {
        font-size: var(--wp--preset--font-size--content-heading);
    }
}

/*--------------------------------------------------------------
# Front Page - Garden Design
--------------------------------------------------------------*/
.hero-intro {
    color: var(--wp--preset--color--foreground);
    max-width: 800px;
}

.section-title {
    color: var(--wp--preset--color--secondary-text-color);
    margin-bottom: 24px !important;
}

/* Garden Grid Layout */
.garden-grid-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.garden-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
}

.garden-row .wp-block-column {
    flex-basis: 50% !important;
    max-width: 50% !important;
}

.garden-column {
    border-radius: 16px;
    padding: 24px 20px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.garden-column:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Garden column colors - pastel */
.garden-column-1 {
    background-color: #a8d5ba;
}

.garden-column-2 {
    background-color: #a8c8d5;
}

.garden-column-3 {
    background-color: #f5e0a8;
}

.garden-column-4 {
    background-color: #b8a8d5;
}

.garden-column-5 {
    background-color: #d5a8b8;
}

.garden-column-6 {
    background-color: #d5c0a8;
}

/* Garden icon */
.garden-icon {
    margin-bottom: 16px !important;
}

.garden-icon img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(10%) saturate(797%) hue-rotate(76deg) brightness(95%) contrast(86%);
}

/* Garden card title */
.garden-card-title {
    font-size: 18px !important;
    font-weight: 700;
    margin-bottom: 20px !important;
    color: #1a1a1a;
}

/* Garden link list */
.garden-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.garden-link-list li {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.garden-link-list li:last-child {
    border-bottom: none;
}

.garden-link-list a {
    color: #1a1a1a;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.5;
    display: block;
}

.garden-link-list a:hover {
    color: #2d5a27;
    text-decoration: underline;
}

/* WordPress RSS Block styling */
.wp-block-rss.garden-link-list {
    margin: 0;
}

.wp-block-rss.garden-link-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wp-block-rss.garden-link-list li {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 13px;
    line-height: 1.5;
}

.wp-block-rss.garden-link-list li:last-child {
    border-bottom: none;
}

.wp-block-rss.garden-link-list a {
    color: #1a1a1a;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.5;
    display: block;
}

.wp-block-rss.garden-link-list a:hover {
    color: #2d5a27;
    text-decoration: underline;
}

.wp-block-rss.garden-link-list .wp-block-rss__item-author,
.wp-block-rss.garden-link-list .wp-block-rss__item-publish-date {
    display: none;
}

@media (max-width: 1024px) {
    .garden-row {
        flex-direction: column !important;
    }
    
    .garden-column {
        flex-basis: 100% !important;
    }
}

@media (max-width: 768px) {
    .garden-layout {
        flex-direction: column !important;
    }
    
    .garden-layout > .wp-block-column {
        flex-basis: 100% !important;
    }
}

/* Evergreens List */
.evergreen-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.evergreen-list li {
    margin-bottom: 16px;
}

.evergreen-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.evergreen-check {
    color: #2d5a27;
    font-weight: bold;
    font-size: 16px;
    min-width: 20px;
}

.evergreen-item a {
    color: var(--wp--preset--color--secondary-text-color);
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.5;
}

.evergreen-item a:hover {
    color: var(--wp--preset--color--hover-color);
}

/* Light theme for front page */
body.home {
    background-color: #f5f5f5;
}

body.home .wp-site-blocks {
    background-color: #f5f5f5;
}

body.home .site-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

body.home .hero-intro {
    color: #1a1a1a;
}

body.home .section-title {
    color: #666666;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}