/**
 * Color Variables Application
 * Maps theme colors via CSS custom properties set dynamically by the Customizer.
 * All colors reference --scheme-N-* canonical variables.
 *
 * @package Mestariteema
 */

/* ============================================
   Header Colors
   ============================================ */
.site-header {
    background-color: var(--header-bg);
}

.site-title a {
    color: var(--header-text);
}

.main-navigation a {
    color: var(--nav-link-color);
}

.site-title a:hover {
    color: var(--nav-hover-color);
}

.main-navigation a:hover {
    color: var(--nav-hover-color);
}

.header-social .social-icon {
    color: var(--header-text);
}

.header-social .social-icon:hover {
    color: var(--nav-hover-color);
}

.header-cta {
    background: var(--header-cta-bg);
    color: var(--header-cta-color);
    border-color: var(--header-cta-border-color);
}

.header-cta:hover {
    background: var(--header-cta-hover-bg);
    border-color: var(--header-cta-hover-bg);
    color: var(--header-cta-hover-color);
}

.mobile-menu-toggle .line {
    background-color: var(--header-text);
}

/* ============================================
   Split Content Block Colors
   ============================================ */
.site-content .split-column h1,
.site-content .split-column h2,
.site-content .split-column h3,
.site-content .split-column h4,
.site-content .split-column h5,
.site-content .split-column h6 {
    color: inherit;
}

.site-content .split-column p,
.site-content .split-column .split-content-area {
    color: inherit;
}

/* ============================================
   Footer Colors
   ============================================ */
.site-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
}

.footer-navigation a {
    color: var(--footer-link);
}

.footer-navigation a:hover {
    color: var(--footer-link-hover);
}

.site-footer .footer-cta-heading,
.site-footer .footer-column .widget-title,
.site-footer .footer-column h1,
.site-footer .footer-column h2,
.site-footer .footer-column h3,
.site-footer .footer-column h4,
.site-footer .footer-column h5,
.site-footer .footer-column h6 {
    color: var(--footer-heading);
}

/* ============================================
   Single Post Colors
   ============================================ */
.single .entry-title {
    color: var(--scheme-1-heading);
}

.single .entry-meta {
    color: var(--scheme-1-text);
}

.single .entry-meta span::before {
    background: var(--scheme-1-accent);
}

.single .entry-content {
    color: var(--scheme-1-text);
}

.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4 {
    color: var(--scheme-1-heading);
}

.single .entry-content a {
    color: var(--scheme-1-accent);
}

.single .entry-content a:hover {
    color: var(--scheme-1-accent-hover);
}

.single .entry-content blockquote {
    border-left-color: var(--scheme-1-accent);
    background: var(--scheme-1-bg);
}

.single .entry-footer a {
    color: var(--scheme-1-text);
}

.single .entry-footer a:hover {
    color: var(--scheme-1-accent-hover);
}

.single .entry-footer .edit-link a {
    color: var(--scheme-1-accent);
}

.single .entry-footer .cat-links,
.single .entry-footer .tags-links {
    color: var(--scheme-1-text);
}

/* Share Buttons */
.mestari-share-label {
    color: var(--scheme-1-text);
}

/* Author Box */
.mestari-author-label {
    color: var(--scheme-1-text);
}

.mestari-author-name {
    color: var(--scheme-1-heading);
}

.mestari-author-bio {
    color: var(--scheme-1-text);
}

.mestari-author-posts-link {
    color: var(--scheme-1-accent);
}

.mestari-author-posts-link:hover {
    color: var(--scheme-1-accent-hover);
}

/* Post Navigation */
.post-navigation {
    color: var(--scheme-1-text);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    background: var(--scheme-1-bg);
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
    background: var(--scheme-1-accent-hover);
}

.post-navigation .nav-previous:hover *,
.post-navigation .nav-next:hover * {
    color: var(--scheme-1-heading);
}

.post-navigation a {
    color: var(--scheme-1-heading);
}

.post-navigation .nav-subtitle {
    color: var(--scheme-1-text);
}

.post-navigation .nav-title {
    color: var(--scheme-1-heading);
}

/* ============================================
   Archive & Blog Colors
   ============================================ */
.blog-archive .page-title {
    color: var(--scheme-1-heading);
}

.blog-archive .archive-description {
    color: var(--scheme-1-text);
}

.blog-archive .mestari-card {
    background: var(--scheme-1-bg);
}

.blog-archive .mestari-card .mestari-card-thumb {
    background: var(--scheme-1-bg);
}

.blog-archive .mestari-card .mestari-card-meta {
    color: var(--scheme-1-text);
}

.blog-archive .mestari-card .mestari-card-title a {
    color: var(--scheme-1-heading);
}

.blog-archive .mestari-card .mestari-card-title a:hover {
    color: var(--scheme-1-accent-hover);
}

.blog-archive .mestari-card .mestari-card-excerpt {
    color: var(--scheme-1-text);
}

.blog-archive .mestari-card .mestari-card-link {
    color: var(--scheme-1-accent);
}

.blog-archive .mestari-card .mestari-card-link:hover {
    color: var(--scheme-1-accent-hover);
}

/* Blog Sidebar */
.mestari-blog-sidebar .widget {
    background: transparent;
}

.mestari-blog-sidebar .widget-title {
    color: var(--scheme-1-heading);
    border-bottom-color: var(--scheme-1-bg);
}

.mestari-blog-sidebar .widget ul li a {
    color: var(--scheme-1-text);
}

.mestari-blog-sidebar .widget ul li a:hover {
    color: var(--scheme-1-accent);
}

.mestari-blog-sidebar .widget p {
    color: var(--scheme-1-text);
}

.mestari-blog-sidebar .widget ol li {
    color: var(--scheme-1-text);
}

.mestari-blog-sidebar .widget ol li a {
    color: var(--scheme-1-text);
}

.mestari-blog-sidebar .widget ol li a:hover {
    color: var(--scheme-1-accent);
}

.mestari-blog-sidebar .widget .tagcloud a,
.mestari-blog-sidebar .widget .wp-block-tag-cloud a {
    color: var(--scheme-1-text);
}

.mestari-blog-sidebar .widget .tagcloud a:hover,
.mestari-blog-sidebar .widget .wp-block-tag-cloud a:hover {
    background: var(--scheme-1-accent);
    color: var(--scheme-1-accent-text);
}

.mestari-blog-sidebar .widget select {
    color: var(--scheme-1-text);
}

/* Blog Card Categories */
.blog-archive .mestari-card .mestari-card-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.blog-archive .mestari-card .mestari-card-cat {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: 3px;
    background: var(--scheme-1-accent);
    color: var(--scheme-1-accent-text);
    transition: all 0.3s ease;
}

.blog-archive .mestari-card .mestari-card-cat:hover {
    background: var(--scheme-1-accent-hover);
}

/* Pagination */
.pagination .page-numbers {
    background: var(--scheme-1-bg);
    color: var(--scheme-1-heading);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background: var(--scheme-1-accent);
    color: var(--scheme-1-accent-text);
    border-color: var(--scheme-1-accent);
}

/* ============================================
   General Elements
   ============================================ */
body {
    color: var(--scheme-1-text);
    background-color: var(--scheme-1-bg);
}

.site h1,
.site h2,
.site h3,
.site h4,
.site h5,
.site h6 {
    color: var(--scheme-1-heading);
}

.site-content {
    color: var(--scheme-1-text);
}

.site-content h1,
.site-content h2,
.site-content h3,
.site-content h4,
.site-content h5,
.site-content h6 {
    color: var(--scheme-1-heading);
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
    color: var(--scheme-1-heading);
}

.editor-styles-wrapper .editor-post-title__input,
.editor-styles-wrapper .editor-post-title__input:focus {
    color: inherit;
}

a {
    color: var(--scheme-1-accent);
}

a:hover {
    color: var(--scheme-1-accent-hover);
}

/* Buttons — use global button variables from Customizer. */
.button,
.wp-block-button__link,
.hero-cta-button,
.content-block-button,
.posts-block-load-more,
.posts-block-show-all {
    padding: var(--btn-padding, 15px 35px);
    font-size: var(--btn-font-size, 0.95em);
    font-weight: var(--btn-font-weight, 600);
    text-transform: var(--btn-text-transform, uppercase);
    letter-spacing: var(--btn-letter-spacing, 0.5px);
    border-width: var(--btn-border-width, 2px);
    border-style: solid;
    border-radius: var(--btn-radius, 0);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-border);
    max-width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.button:hover,
.wp-block-button__link:hover,
.hero-cta-button:hover,
.content-block-button:hover,
.posts-block-load-more:hover,
.posts-block-show-all:hover {
    background: var(--btn-primary-hover-bg);
    border-color: var(--btn-primary-hover-border);
    color: var(--btn-primary-hover-text);
    transform: translateY(-2px);
    text-decoration: none;
}

.button-secondary,
.wp-block-button.is-style-outline .wp-block-button__link,
.hero-cta-secondary,
.content-block-button.secondary {
    background: var(--btn-secondary-bg, transparent);
    color: var(--btn-secondary-text);
    border-color: var(--btn-secondary-border);
}

.button-secondary:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.hero-cta-secondary:hover,
.content-block-button.secondary:hover {
    background: var(--btn-secondary-hover-bg);
    color: var(--btn-secondary-hover-text);
    border-color: var(--btn-secondary-hover-border);
}

.button-dark,
.content-block-button.dark {
    background: var(--btn-dark-bg);
    color: var(--btn-dark-text);
    border-color: var(--btn-dark-border);
}

.button-dark:hover,
.content-block-button.dark:hover {
    background: var(--btn-dark-hover-bg);
    color: var(--btn-dark-hover-text);
    border-color: var(--btn-dark-hover-border);
}

/* Mobile button responsiveness */
@media screen and (max-width: 768px) {
    .button,
    .wp-block-button__link,
    .hero-cta-button,
    .content-block-button,
    .posts-block-load-more,
    .posts-block-show-all {
        padding: 12px 20px;
        width: 100%;
        display: block;
        text-align: center;
    }
}

/* Forms */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
    border-color: var(--scheme-1-accent);
}

.search-form .search-submit {
    background: var(--scheme-1-accent);
    color: var(--scheme-1-accent-text);
    border-color: var(--scheme-1-accent);
}

.search-form .search-submit:hover {
    background: var(--scheme-1-accent-hover);
    border-color: var(--scheme-1-accent-hover);
}

/* ===================================
   VERTICAL PADDING CLASSES
   =================================== */

.padding-default {
    padding-top: var(--padding-default-top, var(--padding-default));
    padding-bottom: var(--padding-default-bottom, var(--padding-default));
}