/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* Font import */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700&display=swap');

/* Text style tokens */
:root {
    --sg-font-heading: 'Noto Serif KR', serif;
    --sg-font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --sg-color-text-primary: #333333;
    --sg-color-text-secondary: #666666;
    --sg-color-text-tertiary: #999999;
    --sg-color-text-disabled: #d0d0d0;
    --sg-color-text-white: #ffffff;
    --sg-color-text-black: #000000;

    --sg-color-link: #3a4bff;
    --sg-color-link-hover: #2f3edb;

    --sg-h1-size: 32px;
    --sg-h1-weight: 700;
    --sg-h1-line-height: 1.3;

    --sg-h2-size: 28px;
    --sg-h2-weight: 700;
    --sg-h2-line-height: 1.35;

    --sg-h3-size: 24px;
    --sg-h3-weight: 700;
    --sg-h3-line-height: 1.4;

    --sg-h4-size: 20px;
    --sg-h4-weight: 700;
    --sg-h4-line-height: 1.4;

    --sg-body-size: 16px;
    --sg-body-weight: 400;
    --sg-body-line-height: 1.8;

    --sg-sub-size: 14px;
    --sg-sub-weight: 400;
    --sg-sub-line-height: 1.6;

    --sg-caption-size: 12px;
    --sg-caption-weight: 400;
    --sg-caption-line-height: 1.4;
}

@media (max-width: 767px) {
    :root {
        --sg-h1-size: 24px;
        --sg-h2-size: 20px;
        --sg-h3-size: 18px;
        --sg-h4-size: 18px;
        --sg-body-line-height: 1.6;
    }
}

/* Base typography */
body {
    font-family: var(--sg-font-body);
    color: var(--sg-color-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings */
.entry-content h1:not([class*="elementor"]),
.site-content h1:not([class*="elementor"]),
article h1:not([class*="elementor"]) {
    font-family: var(--sg-font-heading);
    font-size: var(--sg-h1-size);
    font-weight: var(--sg-h1-weight);
    line-height: var(--sg-h1-line-height);
    color: var(--sg-color-text-primary);
}

.entry-content h2:not([class*="elementor"]),
.site-content h2:not([class*="elementor"]),
article h2:not([class*="elementor"]) {
    font-family: var(--sg-font-heading);
    font-size: var(--sg-h2-size);
    font-weight: var(--sg-h2-weight);
    line-height: var(--sg-h2-line-height);
    color: var(--sg-color-text-primary);
}

.entry-content h3:not([class*="elementor"]),
.site-content h3:not([class*="elementor"]),
article h3:not([class*="elementor"]) {
    font-family: var(--sg-font-heading);
    font-size: var(--sg-h3-size);
    font-weight: var(--sg-h3-weight);
    line-height: var(--sg-h3-line-height);
    color: var(--sg-color-text-primary);
}

.entry-content h4:not([class*="elementor"]),
.site-content h4:not([class*="elementor"]),
article h4:not([class*="elementor"]) {
    font-family: var(--sg-font-heading);
    font-size: var(--sg-h4-size);
    font-weight: var(--sg-h4-weight);
    line-height: var(--sg-h4-line-height);
    color: var(--sg-color-text-primary);
}

/* Body text */
.entry-content p:not([class*="elementor"]),
.site-content p:not([class*="elementor"]),
article p:not([class*="elementor"]) {
    font-family: var(--sg-font-body);
    font-size: var(--sg-body-size);
    font-weight: var(--sg-body-weight);
    line-height: var(--sg-body-line-height);
    color: var(--sg-color-text-primary);
}

/* Links */
.entry-content a:not([class*="elementor"]),
.site-content a:not([class*="elementor"]),
article a:not([class*="elementor"]) {
    /*color: var(--sg-color-link);*/
}

.entry-content a:not([class*="elementor"]):hover,
.site-content a:not([class*="elementor"]):hover,
article a:not([class*="elementor"]):hover {
    /*color: var(--sg-color-link-hover);*/
}

/* Typography utility classes */
.sg-h1 {
    font-family: var(--sg-font-heading) !important;
    font-size: var(--sg-h1-size) !important;
    font-weight: var(--sg-h1-weight) !important;
    line-height: var(--sg-h1-line-height) !important;
    color: var(--sg-color-text-primary) !important;
}

.sg-h2 {
    font-family: var(--sg-font-heading) !important;
    font-size: var(--sg-h2-size) !important;
    font-weight: var(--sg-h2-weight) !important;
    line-height: var(--sg-h2-line-height) !important;
    color: var(--sg-color-text-primary) !important;
}

.sg-h3 {
    font-family: var(--sg-font-heading) !important;
    font-size: var(--sg-h3-size) !important;
    font-weight: var(--sg-h3-weight) !important;
    line-height: var(--sg-h3-line-height) !important;
    color: var(--sg-color-text-primary) !important;
}

.sg-h4 {
    font-family: var(--sg-font-heading) !important;
    font-size: var(--sg-h4-size) !important;
    font-weight: var(--sg-h4-weight) !important;
    line-height: var(--sg-h4-line-height) !important;
    color: var(--sg-color-text-primary) !important;
}

.sg-body {
    font-family: var(--sg-font-body) !important;
    font-size: var(--sg-body-size) !important;
    font-weight: var(--sg-body-weight) !important;
    line-height: var(--sg-body-line-height) !important;
    color: var(--sg-color-text-primary) !important;
}

.sg-sub {
    font-family: var(--sg-font-body) !important;
    font-size: var(--sg-sub-size) !important;
    font-weight: var(--sg-sub-weight) !important;
    line-height: var(--sg-sub-line-height) !important;
    color: var(--sg-color-text-primary) !important;
}

.sg-caption {
    font-family: var(--sg-font-body) !important;
    font-size: var(--sg-caption-size) !important;
    font-weight: var(--sg-caption-weight) !important;
    line-height: var(--sg-caption-line-height) !important;
    color: var(--sg-color-text-primary) !important;
}

/* Text color utility classes */
.sg-text-primary {
    color: var(--sg-color-text-primary) !important;
}

.sg-text-secondary {
    color: var(--sg-color-text-secondary) !important;
}

.sg-text-tertiary {
    color: var(--sg-color-text-tertiary) !important;
}

.sg-text-disabled {
    color: var(--sg-color-text-disabled) !important;
}

.sg-text-white {
    color: var(--sg-color-text-white) !important;
}

.sg-text-black {
    color: var(--sg-color-text-black) !important;
}

/* Elementor typography alignment */
.elementor-widget-heading .elementor-heading-title,
.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6 {
    font-family: var(--sg-font-heading) !important;
    color: var(--sg-color-text-primary);
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor p,
.elementor li,
.elementor span,
.elementor label,
.elementor input,
.elementor textarea,
.elementor select,
.elementor button {
    font-family: var(--sg-font-body) !important;
    /*color: var(--sg-color-text-primary);*/
}