/* site palette */
html:root {
    --bg: #F8F4F0;
    --surface: #FFFFFF;
    --surface-alt: #ECF5F2;
    --text: #1D1914;
    --text-muted: #786B5E;
    --border: #E4DED8;
    --primary: #275543;
    --primary-hover: #1C3D30;
    --on-primary: #FFFFFF;
    --primary-text: #275543;
    --accent: #DB7890;
    --on-accent: #111111;
    --accent-text: #CA385B;
    --dark-band: #173328;
    --on-dark: #FFFFFF;
    --on-dark-muted: #C3BCB6;
    --brand-btn-bg: #FFFFFF;
    --brand-btn-text: #173328;
    --section-alt-bg: #ECF5F2;
    --dark-band-bg: #173328;
    --brand-band-bg: #275543;
    --hero-bg: #173328;
}

/* /site palette */

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

body {
    margin: 0;
    padding: 0;
    font-family: 'Asta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

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

.sqk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--primary);
    border-radius: 0px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.sqk-btn:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--on-primary);
}

.sqk-btn-alt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--primary-text);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--primary-text);
    border-radius: 0px;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.sqk-btn-alt:hover {
    background-color: var(--primary-text);
    color: var(--on-primary);
}

.sqk-card {
    background-color: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 0px;
    box-shadow: none;
    padding: 1.25rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sqk-card:hover {
    background-color: #FAFAF8;
}

.sqk-media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 0px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sqk-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sqk-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-text);
    margin-bottom: 0.375rem;
}

.sqk-title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text);
    border-top: 3px solid var(--text);
    padding-top: 0.75rem;
    margin-bottom: 1.25rem;
    letter-spacing: -0.01em;
}

.sqk-badge {
    display: inline-block;
    background-color: var(--primary);
    color: var(--on-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    border-radius: 0px;
}

.sqk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0px;
    background-color: var(--surface-alt);
    color: var(--primary-text);
    font-size: 0.875rem;
}

.sqk-section {
    background-color: var(--bg);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.sqk-section-alt {
    background-color: var(--surface-alt);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.sqk-section-dark {
    background-color: var(--dark-band);
    color: var(--on-dark);
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.sqk-section-brand {
    background-color: var(--primary);
    color: var(--on-primary);
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.sqk-section-brand .sqk-btn {
    background-color: #FFFFFF;
    color: var(--dark-band);
    border-color: #FFFFFF;
}

.sqk-section-brand .sqk-btn:hover {
    background-color: var(--surface-alt);
    border-color: var(--surface-alt);
    color: var(--dark-band);
}

.sqk-section-brand .sqk-btn-alt {
    border-color: var(--on-primary);
    color: var(--on-primary);
}

.sqk-section-brand .sqk-btn-alt:hover {
    background-color: var(--on-primary);
    color: var(--primary);
}

.sqk-on-dark {
    color: var(--on-dark);
}

.sqk-on-dark h1,
.sqk-on-dark h2,
.sqk-on-dark h3,
.sqk-on-dark h4,
.sqk-on-dark h5,
.sqk-on-dark h6 {
    color: var(--on-dark);
}

.sqk-on-dark p,
.sqk-on-dark span {
    color: var(--on-dark);
}

.sqk-on-dark .text-muted,
.sqk-section-dark .text-muted {
    color: var(--on-dark-muted) !important;
}

.sqk-on-dark .sqk-title,
.sqk-section-dark .sqk-title {
    color: var(--on-dark);
    border-top-color: var(--on-dark);
}

.sqk-on-dark .sqk-eyebrow,
.sqk-section-dark .sqk-eyebrow {
    color: var(--accent);
}

.sqk-on-dark .sqk-btn-alt,
.sqk-section-dark .sqk-btn-alt {
    border-color: var(--on-dark);
    color: var(--on-dark);
}

.sqk-on-dark .sqk-btn-alt:hover,
.sqk-section-dark .sqk-btn-alt:hover {
    background-color: var(--on-dark);
    color: var(--dark-band);
}

.sqk-section-dark .sqk-card,
.sqk-on-dark .sqk-card {
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

.sqk-section-dark .sqk-card .text-muted,
.sqk-on-dark .sqk-card .text-muted {
    color: var(--text-muted) !important;
}

@media (min-width: 768px) {

    .sqk-section,
    .sqk-section-alt {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .sqk-section-dark,
    .sqk-section-brand {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

/* ===== header ===== */
.syrelan-header {
    background-color: var(--surface, #FFFFFF);
    font-family: var(--font-family-base, 'Asta Sans', sans-serif);
}

.syrelan-header a {
    text-decoration: none;
}

.syrelan-header .js-mobile-nav:not(.hidden) {
    display: block;
}

/* ===== hero ===== */
.sqk-hero-news {
    font-family: 'Asta Sans', sans-serif;
}

.sqk-hero-news .sqk-hero-lead {
    background-color: #0f231b;
}

.sqk-hero-news h1,
.sqk-hero-news h2,
.sqk-hero-news h3 {
    hyphens: auto;
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .sqk-hero-news .sqk-hero-lead {
        min-height: 340px;
    }
}

/* ===== theme_of_the_day ===== */
#theme-of-the-day {
    background-color: var(--bg, #F8F4F0);
}

#theme-of-the-day a {
    text-decoration: none;
}

#theme-of-the-day a:hover {
    text-decoration: underline;
    text-decoration-color: var(--primary, #275543);
    text-underline-offset: 3px;
}

/* ===== numbers_short ===== */
.syr-numbers-block {
    background-color: var(--dark-band, #173328);
}

.syr-numbers-block a:hover {
    text-decoration-color: var(--primary, #275543);
}

@media (max-width: 767px) {
    .syr-numbers-block .grid {
        grid-template-columns: 1fr;
    }
}

/* ===== urgent_messages ===== */
.sy-urgent-news {
    width: 100%;
    box-sizing: border-box;
}

.sy-urgent-news h2,
.sy-urgent-news p {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.sy-urgent-news .sqk-btn {
    background-color: var(--primary);
    color: var(--on-primary);
    border: 1px solid var(--primary);
    border-radius: 0;
    text-decoration: none;
}

.sy-urgent-news .sqk-btn:hover,
.sy-urgent-news .sqk-btn:focus {
    background-color: var(--primary-hover);
    color: var(--on-primary);
    border-color: var(--primary-hover);
}

@media (max-width: 767px) {
    .sy-urgent-news .max-w-\[1280px\] {
        padding: 0.875rem;
    }
}

/* ===== weather_widget ===== */
.weather-widget-section {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.weather-widget-section .sqk-card {
    border-radius: 0;
    box-shadow: none;
}

.weather-widget-section a {
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.weather-widget-section .sqk-btn {
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 700;
}

/* ===== refutations ===== */
.syrelan-refutations {
    background-color: var(--bg)
}

.syrelan-refutations-header {
    border-top: 3px solid var(--text);
    border-bottom: 1px solid var(--border)
}

.syrelan-refutations-box {
    background-color: var(--surface);
    border: 1px solid var(--border)
}

.syrelan-refutations-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    background-color: var(--surface)
}

.syrelan-refutations-row {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1rem;
    align-items: flex-start;
    gap: 1rem
}

.syrelan-refutations-label {
    min-width: 70px;
    max-width: 90px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    padding-top: 0.125rem
}

.syrelan-refutations-val {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--text);
    overflow-wrap: anywhere
}

.syrelan-refutations-diff {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--border);
    background-color: var(--bg)
}

.syrelan-diff-col {
    padding: 1rem
}

.syrelan-diff-old {
    border-right: 1px solid var(--border);
    background-color: #fff7f8
}

.syrelan-diff-new {
    background-color: var(--surface-alt)
}

.syrelan-refutations-footer {
    background-color: var(--surface-alt);
    border: 1px solid var(--border)
}

.syrelan-refutations-link {
    color: var(--primary-text);
    text-decoration: none
}

.syrelan-refutations-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px
}

@media (max-width:767px) {
    .syrelan-refutations-row {
        flex-direction: column;
        gap: 0.25rem
    }

    .syrelan-refutations-label {
        min-width: auto
    }

    .syrelan-refutations-diff {
        grid-template-columns: 1fr
    }

    .syrelan-diff-old {
        border-right: none;
        border-bottom: 1px solid var(--border)
    }
}

/* ===== news_grid ===== */
.news-grid-module {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.news-grid-module .sqk-card {
    border-radius: 0px;
}

.news-grid-module .sqk-card:hover {
    background-color: #FAFAF8;
}

.news-grid-module .sqk-badge {
    border-radius: 0px;
}

.news-grid-module h3 a {
    text-decoration: none;
}

.news-grid-module h3 a:hover {
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-underline-offset: 3px;
}

/* ===== reviews_grid ===== */
.reviews-grid-section {
    background-color: #F8F4F0;
}

.reviews-grid-section .reviews-grid-card {
    border-radius: 0px;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.reviews-grid-section .reviews-grid-card:hover {
    background-color: #FAFAF8;
    border-color: #275543;
}

.reviews-grid-section .reviews-grid-card h3 a {
    overflow-wrap: anywhere;
}

@media (max-width: 767px) {
    .reviews-grid-section .grid {
        grid-template-columns: 1fr;
    }
}

/* ===== footer ===== */
.site-footer {
    background-color: var(--dark-band, #173328);
    font-family: 'Asta Sans', sans-serif;
}

.site-footer a {
    color: inherit;
    text-decoration-color: var(--accent, #DB7890);
    text-underline-offset: 3px;
}

.site-footer-input::placeholder {
    color: var(--on-dark-muted, #C3BCB6);
    opacity: 0.8;
    font-size: 12px;
}

@media (max-width: 767px) {
    .site-footer .grid {
        grid-template-columns: 1fr;
    }

    .site-footer-form {
        width: 100%;
    }
}

/* ===== PAGE: privacy ===== */
.policy-content { width: 100%; max-width: 100%; font-family: 'Asta Sans', sans-serif; color: var(--text, #1D1914); line-height: 1.7; overflow-wrap: anywhere; word-break: keep-all; } .policy-content .policy-meta-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 3px solid var(--text, #1D1914); font-size: 0.8125rem; font-weight: 600; color: var(--text-muted, #786B5E); } .policy-content .policy-update-badge { background-color: var(--primary, #275543); color: var(--on-primary, #FFFFFF); padding: 0.25rem 0.625rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; } .policy-content .policy-meta-divider { color: var(--border, #E4DED8); } .policy-content .policy-intro-box { background-color: var(--surface-alt, #ECF5F2); border-left: 4px solid var(--primary, #275543); padding: 1.25rem 1.5rem; margin-bottom: 2rem; border-top: 1px solid var(--border, #E4DED8); border-right: 1px solid var(--border, #E4DED8); border-bottom: 1px solid var(--border, #E4DED8); } .policy-content .policy-lead-text { font-size: 0.9375rem; line-height: 1.65; color: var(--text, #1D1914); margin: 0; } .policy-content h2 { font-size: 1.125rem; line-height: 1.35; font-weight: 800; color: var(--primary, #275543); margin-top: 2rem; margin-bottom: 0.875rem; padding-bottom: 0.375rem; border-bottom: 1px solid var(--border, #E4DED8); text-transform: uppercase; letter-spacing: -0.01em; } .policy-content p { font-size: 0.875rem; line-height: 1.7; color: var(--text, #1D1914); margin-bottom: 0.875rem; } .policy-content ul { list-style: square inside; margin-bottom: 1.25rem; padding-left: 0.25rem; } .policy-content li { font-size: 0.875rem; line-height: 1.65; color: var(--text, #1D1914); margin-bottom: 0.5rem; } .policy-content li strong { color: var(--text, #1D1914); font-weight: 700; } .policy-content a { color: var(--primary-text, #275543); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; transition: color 0.15s ease; } .policy-content a:hover { color: var(--primary-hover, #1C3D30); } .policy-content .policy-contact-card { background-color: var(--surface, #FFFFFF); border: 1px solid var(--border, #E4DED8); padding: 1.25rem 1.5rem; margin: 1.25rem 0 1.5rem 0; } .policy-content .policy-contact-title { font-size: 0.9375rem; font-weight: 700; color: var(--text, #1D1914); margin-bottom: 0.75rem; } .policy-content .policy-contact-card ul { list-style: none; padding-left: 0; margin-bottom: 0; } .policy-content .policy-contact-card li { font-size: 0.875rem; margin-bottom: 0.375rem; color: var(--text, #1D1914); } @media (max-width: 767px) { .policy-content h2 { font-size: 16px; margin-top: 1.5rem; margin-bottom: 0.75rem; } .policy-content .policy-intro-box { padding: 1rem; margin-bottom: 1.5rem; } .policy-content .policy-lead-text, .policy-content p, .policy-content li, .policy-content .policy-contact-card li { font-size: 0.875rem; } .policy-content .policy-contact-card { padding: 1rem; } } @media (min-width: 768px) { .policy-content h2 { font-size: 1.25rem; } }

/* ===== PAGE: terms ===== */
.policy-content { width: 100%; max-width: 960px; margin: 0 auto; padding: 2.5rem 1rem; color: #1D1914; background: #FFFFFF; border: 1px solid #E4DED8; box-sizing: border-box; } .policy-content__header { border-top: 3px solid #1D1914; padding-top: 1.25rem; margin-bottom: 2rem; border-bottom: 1px solid #E4DED8; padding-bottom: 1.25rem; } .policy-content__main-title { font-size: 16px; font-weight: 800; line-height: 1.3; color: #1D1914; margin-top: 0.5rem; margin-bottom: 0.75rem; letter-spacing: -0.02em; hyphens: auto; overflow-wrap: anywhere; } @media (min-width: 768px) { .policy-content__main-title { font-size: 30px; } } .policy-content__meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.75rem; color: #786B5E; font-weight: 500; } .policy-content__meta-item { display: inline-flex; align-items: center; gap: 0.35rem; } .policy-content__meta-item i { color: #275543; } .policy-content__body { display: flex; flex-direction: column; gap: 1.75rem; } .policy-content__section { display: flex; flex-direction: column; gap: 0.625rem; } .policy-content__heading { font-size: 14px; font-weight: 700; line-height: 1.35; color: #275543; margin-bottom: 0.25rem; border-left: 3px solid #275543; padding-left: 0.625rem; overflow-wrap: anywhere; } @media (min-width: 768px) { .policy-content__heading { font-size: 18px; } } .policy-content__text { font-size: 0.9375rem; line-height: 1.65; color: #1D1914; margin: 0; overflow-wrap: anywhere; } .policy-content__list { list-style: disc; padding-left: 1.25rem; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .policy-content__list li { font-size: 0.9375rem; line-height: 1.6; color: #1D1914; overflow-wrap: anywhere; } .policy-content__list li strong { color: #1D1914; font-weight: 600; } .policy-content__contact-box { background: #ECF5F2; border: 1px solid #E4DED8; padding: 1.25rem; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.75rem; } .policy-content__contact-item { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.5; } .policy-content__contact-label { font-weight: 700; color: #275543; display: inline-flex; align-items: center; gap: 0.35rem; min-width: 5.5rem; } .policy-content__contact-value { color: #1D1914; overflow-wrap: anywhere; } .policy-content__link { color: #275543; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } .policy-content__link:hover { color: #1C3D30; text-decoration: underline; } @media (max-width: 767px) { .policy-content { padding: 1.5rem 0.75rem; border-left: 0; border-right: 0; } .policy-content__header { margin-bottom: 1.25rem; padding-bottom: 1rem; } .policy-content__meta { flex-direction: column; gap: 0.35rem; } .policy-content__contact-item { flex-direction: column; align-items: flex-start; gap: 0.15rem; } }

/* ===== PAGE: cookies ===== */
#privacy-content{width:100%;max-width:100%;color:var(--text,#1D1914);line-height:1.7;font-family:'Asta Sans',sans-serif}#privacy-content .policy-body{width:100%;padding:1.5rem 0}#privacy-content h2{font-size:16px;font-weight:700;color:var(--primary,#275543);border-top:3px solid var(--text,#1D1914);padding-top:1rem;margin-top:2rem;margin-bottom:0.75rem;line-height:1.3;overflow-wrap:anywhere}#privacy-content h2:first-of-type{margin-top:0}@media (min-width:768px){#privacy-content h2{font-size:24px;padding-top:1.25rem;margin-top:2.75rem}}#privacy-content h3{font-size:14px;font-weight:700;color:var(--text,#1D1914);margin-top:1.25rem;margin-bottom:0.5rem;line-height:1.4;overflow-wrap:anywhere}@media (min-width:768px){#privacy-content h3{font-size:18px}}#privacy-content p{font-size:0.9375rem;color:var(--text,#1D1914);margin-bottom:1rem;overflow-wrap:anywhere}#privacy-content ul{list-style:disc;padding-left:1.25rem;margin-bottom:1.25rem}#privacy-content li{font-size:0.9375rem;color:var(--text,#1D1914);margin-bottom:0.5rem;overflow-wrap:anywhere}#privacy-content a{color:var(--primary-text,#275543);text-decoration:underline;text-underline-offset:3px;transition:color 0.15s ease}#privacy-content a:hover{color:var(--primary-hover,#1C3D30)}#privacy-content .policy-table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:0.875rem;border:1px solid var(--border,#E4DED8)}#privacy-content .policy-table th,#privacy-content .policy-table td{border:1px solid var(--border,#E4DED8);padding:0.75rem 1rem;text-align:left;vertical-align:top;overflow-wrap:anywhere}#privacy-content .policy-table th{background-color:var(--surface-alt,#ECF5F2);font-weight:700;color:var(--primary,#275543);letter-spacing:0.02em}#privacy-content .policy-table td{background-color:var(--surface,#FFFFFF);color:var(--text,#1D1914)}@media (max-width:767px){#privacy-content .policy-table thead{display:none}#privacy-content .policy-table,#privacy-content .policy-table tbody,#privacy-content .policy-table tr,#privacy-content .policy-table td{display:block;width:100%}#privacy-content .policy-table tr{border-bottom:2px solid var(--border,#E4DED8);margin-bottom:1rem;background:var(--surface,#FFFFFF)}#privacy-content .policy-table td{border:none;border-bottom:1px solid var(--border,#E4DED8);padding:0.625rem 0.75rem}#privacy-content .policy-table td:last-child{border-bottom:none}}

/* ===== PAGE: news ===== */
.syrelan-news-page { font-family: 'Asta Sans', sans-serif; }
.syrelan-news-page .sqk-media { transition: transform 0.25s ease; }
.syrelan-news-page .js-filter-btn.active { background-color: #275543; color: #FFFFFF; border-color: #275543; }
.syrelan-news-page .js-filter-btn:not(.active):hover { background-color: #ECF5F2; color: #1D1914; border-color: #1D1914; }
.syrelan-news-page a { text-decoration: none; }
@media (max-width: 767px) {
  .syrelan-news-page .syrelan-news-header { flex-direction: column; align-items: flex-start; }
  .syrelan-news-page .syrelan-filter-bar { flex-direction: column; }
  .syrelan-news-page .js-news-item > div { flex-direction: column; }
}

/* ===== PAGE: reviews ===== */
.syrelan-reviews-section { word-break: keep-all; }
.syrelan-reviews-section .sqk-card { box-shadow: none; border-radius: 0px; }
.syrelan-reviews-section .sqk-btn { border-radius: 0px; }
@media (min-width: 768px) {
  .syrelan-reviews-section .syrelan-card-stagger {
    transform: translateY(48px);
  }
}
@media (max-width: 767px) {
  .syrelan-reviews-section .syrelan-card-stagger {
    transform: none;
  }
}

/* ===== PAGE: articles ===== */
.syrelan-articles-block {
  overflow-wrap: anywhere;
}
.syrelan-articles-block .sqk-card {
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.syrelan-articles-block .sqk-card:hover {
  background-color: #FAFAF8;
}
.syrelan-articles-block .active-filter {
  background-color: var(--primary) !important;
  color: var(--on-primary) !important;
  border-color: var(--primary) !important;
}
.syrelan-articles-block input::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}
@media (max-width: 767px) {
  .syrelan-articles-block .js-article-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .syrelan-articles-block .js-article-item > div:first-child {
    width: 100%;
  }
}

/* ===== PAGE: about ===== */
.syrelan-about-info input::placeholder,
.syrelan-about-info textarea::placeholder,
.syrelan-contact-section input::placeholder,
.syrelan-contact-section textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.85;
}

.syrelan-about-info {
  background-color: var(--bg);
}

.syrelan-contact-section {
  background-color: var(--surface-alt);
}

@media (max-width: 767px) {
  .syrelan-about-info .sqk-title {
    hyphens: auto;
    overflow-wrap: anywhere;
  }
  .syrelan-contact-section .sqk-title {
    hyphens: auto;
    overflow-wrap: anywhere;
  }
}

.comment-card {
    background-color: #FFFFFF;
    border: 1px solid #E4DED8;
    border-radius: 0px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.comment-author-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.comment-avatar {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border-radius: 0px;
    background-color: #275543;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    object-fit: cover;
}

.comment-meta-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.comment-author-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1D1914;
    line-height: 1.2;
}

.comment-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    background-color: #ECF5F2;
    color: #275543;
    padding: 0.125rem 0.375rem;
    border: 1px solid #275543;
    border-radius: 0px;
    line-height: 1;
}

.comment-timestamp {
    font-size: 0.75rem;
    color: #786B5E;
    font-weight: 400;
}

.comment-platform-tag {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #CA385B;
    letter-spacing: 0.05em;
}

.comment-body {
    color: #1D1914;
    font-size: 0.9375rem;
    line-height: 1.6;
    word-break: keep-all;
}

.comment-text {
    margin: 0;
}

.comment-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid #E4DED8;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.comment-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: transparent;
    border: 1px solid #E4DED8;
    border-radius: 0px;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1D1914;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.comment-action-btn:hover {
    background-color: #ECF5F2;
    border-color: #275543;
    color: #275543;
}

.comment-count {
    font-weight: 700;
    color: #275543;
}

.comment-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: transparent;
    border: none;
    padding: 0.25rem;
    font-size: 0.75rem;
    color: #786B5E;
    cursor: pointer;
    transition: color 0.15s ease;
}

.comment-report-btn:hover {
    color: #CA385B;
}

.comment-reply-card {
    background-color: #ECF5F2;
    border: 1px solid #E4DED8;
    border-left: 3px solid #275543;
    border-radius: 0px;
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
    margin-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reply-indicator {
    font-weight: 700;
    color: #275543;
    font-size: 0.875rem;
}

.reply-avatar {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    border-radius: 0px;
    background-color: #173328;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    object-fit: cover;
}

.reply-target-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: #CA385B;
    background-color: #FFFFFF;
    padding: 0.125rem 0.375rem;
    border: 1px solid #E4DED8;
    border-radius: 0px;
}


/* ===== PAGE TEMPLATE: news-list ===== */
.syrelan-header {
    background-color: var(--surface, #FFFFFF);
    font-family: var(--font-family-base, 'Asta Sans', sans-serif);
}

.syrelan-header a {
    text-decoration: none;
}

.syrelan-header .js-mobile-nav:not(.hidden) {
    display: block;
}

.sqk-detail-hero {
    font-family: 'Asta Sans', sans-serif;
}

.sqk-article-main {
    font-family: 'Asta Sans', sans-serif;
}

.sqk-article-main h1,
.sqk-article-main h2,
.sqk-article-main h3 {
    hyphens: auto;
    overflow-wrap: anywhere;
}

.sqk-article-main p {
    overflow-wrap: anywhere;
}

.comment-card {
    background-color: #FFFFFF;
    border: 1px solid #E4DED8;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.comment-reply-card {
    background-color: #F8F4F0;
    border: 1px solid #E4DED8;
    border-left: 3px solid #275543;
    padding: 1rem;
    margin-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (max-width:767px) {
    .comment-reply-card {
        margin-left: 0.5rem;
        padding: 0.75rem;
    }
}

.comment-header,
.reply-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.comment-author-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comment-avatar,
.reply-avatar {
    width: 2rem;
    height: 2rem;
    background-color: #275543;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment-meta-info {
    display: flex;
    flex-wrap: wrap;
    items-center;
    gap: 0.35rem;
    font-size: 0.75rem;
}

.comment-author-name {
    font-weight: 700;
    color: #1D1914;
}

.comment-badge {
    background-color: #ECF5F2;
    color: #275543;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
}

.reply-indicator {
    color: #275543;
    font-weight: bold;
}

.reply-target-tag {
    color: #CA385B;
    font-weight: 600;
}

.comment-timestamp {
    color: #786B5E;
}

.comment-platform-tag {
    background-color: #173328;
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
}

.comment-body .comment-text {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #1D1914;
    margin: 0;
}

.comment-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #E4DED8;
    padding-top: 0.5rem;
    font-size: 0.75rem;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.comment-action-btn,
.comment-report-btn {
    background: transparent;
    border: none;
    color: #786B5E;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
    transition: color 0.15s ease;
}

.comment-action-btn:hover,
.comment-report-btn:hover {
    color: #275543;
}

.comment-action-btn.is-active {
    color: #CA385B;
    font-weight: 700;
}

.site-footer {
    background-color: var(--dark-band, #173328);
    font-family: 'Asta Sans', sans-serif;
}

.site-footer a {
    color: inherit;
    text-decoration-color: var(--accent, #DB7890);
    text-underline-offset: 3px;
}

.site-footer-input::placeholder {
    color: var(--on-dark-muted, #C3BCB6);
    opacity: 0.8;
    font-size: 12px;
}

input::placeholder,
textarea::placeholder {
    color: #786B5E;
    opacity: 0.8;
    font-size: 13px;
}

@media (max-width:767px) {
    .site-footer .grid {
        grid-template-columns: 1fr;
    }

    .site-footer-form {
        width: 100%;
    }
}

/* ===== PAGE TEMPLATE: reviews-list ===== */
.syrelan-header {
    background-color: var(--surface, #FFFFFF);
    font-family: var(--font-family-base, 'Asta Sans', sans-serif);
}

.syrelan-header a {
    text-decoration: none;
}

.syrelan-header .js-mobile-nav:not(.hidden) {
    display: block;
}

.syrelan-detail-page {
    font-family: 'Asta Sans', sans-serif;
}

.syrelan-detail-page h1,
.syrelan-detail-page h2,
.syrelan-detail-page h3,
.syrelan-detail-page p {
    hyphens: auto;
    overflow-wrap: anywhere;
}

.syrelan-detail-page .sqk-comment-form-container input::placeholder,
.syrelan-detail-page .sqk-comment-form-container textarea::placeholder {
    color: #786B5E;
    opacity: 0.85;
}

.syrelan-detail-page .comment-card {
    background-color: #FFFFFF;
    border: 1px solid #E4DED8;
    padding: 1.25rem;
}

.syrelan-detail-page .comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #E4DED8;
    padding-bottom: 0.5rem;
}

.syrelan-detail-page .comment-author-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.syrelan-detail-page .comment-avatar {
    width: 34px;
    height: 34px;
    background-color: #275543;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.syrelan-detail-page .comment-meta-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
}

.syrelan-detail-page .comment-author-name {
    font-weight: 700;
    color: #1D1914;
}

.syrelan-detail-page .comment-badge {
    font-size: 10px;
    font-weight: 700;
    background-color: #ECF5F2;
    color: #275543;
    padding: 2px 6px;
}

.syrelan-detail-page .comment-timestamp {
    font-size: 11px;
    color: #786B5E;
}

.syrelan-detail-page .comment-platform-tag {
    font-size: 10px;
    font-weight: 700;
    color: #CA385B;
    background-color: #F8F4F0;
    border: 1px solid #E4DED8;
    padding: 2px 6px;
}

.syrelan-detail-page .comment-body {
    font-size: 13px;
    line-height: 1.6;
    color: #1D1914;
    margin-bottom: 0.75rem;
}

.syrelan-detail-page .comment-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    pt: 0.5rem;
    font-size: 11px;
}

.syrelan-detail-page .comment-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.syrelan-detail-page .comment-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 1px solid #E4DED8;
    padding: 4px 8px;
    color: #786B5E;
    cursor: pointer;
    transition: all 0.15s ease;
}

.syrelan-detail-page .comment-action-btn:hover {
    background-color: #F8F4F0;
    color: #275543;
    border-color: #275543;
}

.syrelan-detail-page .comment-action-btn.active {
    background-color: #275543;
    color: #FFFFFF;
    border-color: #275543;
}

.syrelan-detail-page .comment-report-btn {
    background: transparent;
    border: none;
    color: #786B5E;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 11px;
}

.syrelan-detail-page .comment-report-btn:hover {
    color: #CA385B;
}

.syrelan-detail-page .comment-reply-card {
    background-color: #FAFAF8;
    border: 1px solid #E4DED8;
    border-left: 3px solid #275543;
    padding: 1rem 1.25rem;
    margin-left: 1.5rem;
}

.syrelan-detail-page .reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.syrelan-detail-page .reply-avatar {
    width: 28px;
    height: 28px;
    background-color: #173328;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.syrelan-detail-page .reply-indicator {
    color: #275543;
    font-weight: 800;
}

.syrelan-detail-page .reply-target-tag {
    font-size: 11px;
    font-weight: 700;
    color: #CA385B;
}

.site-footer {
    background-color: var(--dark-band, #173328);
    font-family: 'Asta Sans', sans-serif;
}

.site-footer a {
    color: inherit;
    text-decoration-color: var(--accent, #DB7890);
    text-underline-offset: 3px;
}

.site-footer-input::placeholder {
    color: var(--on-dark-muted, #C3BCB6);
    opacity: 0.8;
    font-size: 12px;
}

@media (max-width: 767px) {
    .site-footer .grid {
        grid-template-columns: 1fr;
    }

    .site-footer-form {
        width: 100%;
    }

    .syrelan-detail-page .comment-reply-card {
        margin-left: 0.5rem;
        padding: 0.75rem;
    }
}

/* ===== PAGE TEMPLATE: articles-list ===== */
.syrelan-header {
    background-color: var(--surface, #FFFFFF);
    font-family: var(--font-family-base, 'Asta Sans', sans-serif);
}

.syrelan-header a {
    text-decoration: none;
}

.syrelan-header .js-mobile-nav:not(.hidden) {
    display: block;
}

.sqk-hero-news {
    font-family: 'Asta Sans', sans-serif;
}

.sqk-hero-news h1,
.sqk-hero-news h2,
.sqk-hero-news h3 {
    hyphens: auto;
    overflow-wrap: anywhere;
}

.article-detail-main {
    font-family: 'Asta Sans', sans-serif;
}

.article-detail-main h1,
.article-detail-main h2,
.article-detail-main h3,
.article-detail-main p {
    hyphens: auto;
    overflow-wrap: anywhere;
}

.article-detail-main .comment-card,
.article-detail-main .comment-reply-card {
    background-color: #FFFFFF;
    border: 1px solid #E4DED8;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.article-detail-main .comment-reply-card {
    margin-left: 1.5rem;
    border-left: 3px solid #275543;
    background-color: #FAFAF8;
}

.article-detail-main .comment-header,
.article-detail-main .reply-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 1px solid #E4DED8;
    padding-bottom: 0.5rem;
}

.article-detail-main .comment-author-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.article-detail-main .comment-avatar,
.article-detail-main .reply-avatar {
    width: 32px;
    height: 32px;
    background-color: #275543;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.article-detail-main .comment-meta-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.article-detail-main .comment-author-name {
    font-size: 13px;
    font-weight: 700;
    color: #1D1914;
}

.article-detail-main .comment-badge {
    font-size: 10px;
    font-weight: 700;
    background-color: #ECF5F2;
    color: #275543;
    padding: 2px 6px;
}

.article-detail-main .reply-indicator {
    font-weight: 800;
    color: #275543;
}

.article-detail-main .reply-target-tag {
    font-size: 11px;
    font-weight: 700;
    color: #CA385B;
}

.article-detail-main .comment-timestamp {
    font-size: 11px;
    color: #786B5E;
}

.article-detail-main .comment-platform-tag {
    font-size: 10px;
    font-weight: 700;
    background-color: #173328;
    color: #FFFFFF;
    padding: 2px 6px;
}

.article-detail-main .comment-text {
    font-size: 13px;
    line-height: 1.6;
    color: #1D1914;
    margin: 0;
}

.article-detail-main .comment-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    border-top: 1px solid #F0ECE8;
}

.article-detail-main .comment-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.article-detail-main .comment-action-btn,
.article-detail-main .comment-report-btn {
    background: transparent;
    border: 1px solid #E4DED8;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #786B5E;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.article-detail-main .comment-action-btn:hover,
.article-detail-main .comment-report-btn:hover {
    background-color: #ECF5F2;
    color: #275543;
    border-color: #275543;
}

.article-detail-main .comment-action-btn.active {
    background-color: #275543;
    color: #FFFFFF;
    border-color: #275543;
}

.article-detail-main .comment-action-btn.active i {
    color: #DB7890;
}

.comment-action-btn.active .comment-count,
.syrelan-detail-page .comment-action-btn.active .comment-count,
.article-detail-main .comment-action-btn.active .comment-count {
    color: #FFFFFF;
}

.site-footer {
    background-color: var(--dark-band, #173328);
    font-family: 'Asta Sans', sans-serif;
}

.site-footer a {
    color: inherit;
    text-decoration-color: var(--accent, #DB7890);
    text-underline-offset: 3px;
}

.site-footer-input::placeholder {
    color: var(--on-dark-muted, #C3BCB6);
    opacity: 0.8;
    font-size: 12px;
}

@media (max-width: 767px) {
    .article-detail-main .comment-reply-card {
        margin-left: 0.5rem;
    }

    .site-footer .grid {
        grid-template-columns: 1fr;
    }

    .site-footer-form {
        width: 100%;
    }
}

/* mobile-text-guard */
@media (max-width: 767px) {
  h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, figcaption, td, th, label {
    overflow-wrap: anywhere;
  }
  a, button, .btn {
    overflow-wrap: anywhere;
    white-space: normal;
  }
  img, video, iframe {
    max-width: 100%;
  }
}