/*
 * SviyNews — site appearance layer ("Tahoe")
 * Copyright 2026 SviySoft. All Rights Reserved.
 *
 * Loaded after the theme stylesheet in both themes. Solid surfaces only
 * (no transparency / blur): light page background, white rounded blocks,
 * soft shadows. Brand accents keep using the theme color from the admin panel.
 */

:root, [data-bs-theme=light] {
    --sn-bg: #f5f5f7;
    --sn-surface: #ffffff;
    --sn-surface-2: #f2f2f7;
    --sn-line: #e5e5ea;
    --sn-text: #1d1d1f;
    --sn-text-2: #3a3a3c;
    --sn-muted: #6e6e73;
    --sn-radius-xl: 22px;
    --sn-radius-lg: 18px;
    --sn-radius-md: 14px;
    --sn-radius-sm: 10px;
    --sn-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 30px -12px rgba(0, 0, 0, .10);
    --sn-shadow-hover: 0 2px 4px rgba(0, 0, 0, .05), 0 18px 40px -14px rgba(0, 0, 0, .18);
    --sn-block-pad: 28px;
    --sn-section-gap: 24px;
}

[data-bs-theme=dark] {
    --sn-bg: #000000;
    --sn-surface: #1c1c1e;
    --sn-surface-2: #2c2c2e;
    --sn-line: #2c2c2e;
    --sn-text: #f5f5f7;
    --sn-text-2: #d1d1d6;
    --sn-muted: #98989d;
    --sn-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -12px rgba(0, 0, 0, .6);
    --sn-shadow-hover: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 40px -14px rgba(0, 0, 0, .75);
}

body {
    background-color: var(--sn-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: color-mix(in srgb, var(--sviynews-theme-color) 22%, transparent);
}

/* ------------------------------------------------------------------ */
/* Top bar & header                                                    */
/* ------------------------------------------------------------------ */

.topbar {
    --tb-bg: var(--sn-surface);
    --tb-text: var(--sn-muted);
    --tb-text-hover: var(--sn-text);
    --tb-divider: var(--sn-line);
    --tb-height: 38px;
    border-bottom: 1px solid var(--sn-line);
}

.topbar a:hover {
    color: var(--sviynews-theme-color) !important;
}

.topbar .dropdown-menu {
    border-radius: var(--sn-radius-md) !important;
    border: 1px solid var(--sn-line) !important;
    box-shadow: var(--sn-shadow-hover) !important;
    padding: 6px !important;
}

.topbar .dropdown-menu li a {
    border-radius: 8px;
}

html:not([data-theme="news"]) .sticky-top .navbar,
html:not([data-theme="news"]) .nav-main,
html:not([data-theme="news"]) #nav_main {
    background-color: var(--sn-surface) !important;
}

html:not([data-theme="news"]) .mega-menu-wrapper {
    background-color: var(--sn-surface) !important;
    border-bottom: 1px solid var(--sn-line);
    box-shadow: 0 6px 20px -16px rgba(0, 0, 0, .25);
}

.navbar .nav-link {
    border-radius: 9px;
    transition: background-color .15s ease, color .15s ease;
}

html:not([data-theme="news"]) .navbar .navbar-nav > .nav-item > .nav-link:hover,
html:not([data-theme="news"]) .navbar .navbar-nav > .nav-item.active > .nav-link,
html:not([data-theme="news"]) .navbar .navbar-nav > .nav-item.show > .nav-link {
    background-color: var(--sn-surface-2);
}

/* News variant keeps its colored header */
[data-theme="news"] .mega-menu-wrapper .navbar-nav > .nav-item > .nav-link:hover,
[data-theme="news"] .mega-menu-wrapper .navbar-nav > .nav-item.active > .nav-link {
    background-color: rgba(255, 255, 255, .12);
}

[data-theme="news"] .mega-menu-wrapper {
    box-shadow: 0 8px 24px -18px rgba(0, 0, 0, .5);
}

.navbar .dropdown-menu,
.navbar .megamenu,
.mega-menu-wrapper .dropdown-menu,
.header-search-dropdown {
    border-radius: var(--sn-radius-lg) !important;
    border: 1px solid var(--sn-line) !important;
    box-shadow: var(--sn-shadow-hover) !important;
    background-color: var(--sn-surface) !important;
    overflow: hidden;
}

.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu .menu-link {
    border-radius: 8px;
}

.menu-post-img-wrapper,
.menu-post-img-wrapper img {
    border-radius: var(--sn-radius-sm);
}

html:not([data-theme="news"]) .mobile-header {
    background-color: var(--sn-surface) !important;
    border-bottom: 1px solid var(--sn-line);
    box-shadow: none !important;
}

/* ------------------------------------------------------------------ */
/* Breaking news                                                       */
/* ------------------------------------------------------------------ */

.section-newsticker {
    margin-top: var(--sn-section-gap);
    margin-bottom: var(--sn-section-gap) !important;
}

.newsticker-wrapper {
    height: 48px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--sn-surface);
    border-radius: var(--sn-radius-lg);
    box-shadow: var(--sn-shadow);
    padding: 8px 10px 8px 8px;
}

.newsticker-wrapper .ticker-label {
    background-color: var(--sviynews-theme-color) !important;
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-weight: 600;
}

.newsticker-wrapper .news-item a {
    color: var(--sn-text);
    font-weight: 600;
}

.nav-sm-buttons button,
.nav-sm-buttons .btn {
    border-radius: 999px !important;
    border-color: var(--sn-line) !important;
    background-color: var(--sn-surface-2) !important;
}

/* ------------------------------------------------------------------ */
/* Featured grid                                                       */
/* ------------------------------------------------------------------ */

.featured-section {
    --fs-gap: 12px;
}

.featured-section .fs-card,
.featured-section .fs-grid-item,
.featured-section .main-slider,
.featured-section .main-slider-wrapper {
    border-radius: var(--sn-radius-xl);
    overflow: hidden;
}

.featured-section .fs-card {
    box-shadow: var(--sn-shadow);
}

.featured-section .fs-card::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .78) 100%) !important;
}

.featured-section .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    transition: width .2s ease;
}

.featured-section .swiper-pagination-bullet-active {
    width: 22px;
}

/* ------------------------------------------------------------------ */
/* Section blocks                                                      */
/* ------------------------------------------------------------------ */

.section {
    margin-bottom: var(--sn-section-gap) !important;
}

.section-category > .container-xl > .row,
.section-category > .container > .row,
.section-category > .row,
.section-latest-posts > .container-xl > .row,
.section-videos > .container-xl > .row {
    background-color: var(--sn-surface);
    border-radius: var(--sn-radius-xl);
    box-shadow: var(--sn-shadow);
    padding: var(--sn-block-pad) calc(var(--sn-block-pad) - 12px) calc(var(--sn-block-pad) - 8px);
    margin-left: 0;
    margin-right: 0;
}

.section-title {
    border-bottom: 0 !important;
    margin-bottom: 20px !important;
}

.section-title::before,
.section-title::after,
.section-title .title::before,
.section-title .title::after {
    display: none !important;
}

.section-title .title {
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
    color: var(--sn-text) !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

.section-title .title::before {
    content: "";
    display: inline-block !important;
    position: static !important;
    width: 8px !important;
    height: 22px !important;
    border-radius: 999px;
    background-color: var(--sviynews-theme-color) !important;
}

.section-title .title a,
.section-title .title .title-text {
    color: var(--sn-text) !important;
    background: none !important;
    padding: 0 !important;
}

.section-title .nav-tabs,
.section-title .category-links {
    border: 0 !important;
}

.section-title .category-link,
.section-title .nav-link {
    border-radius: 999px !important;
    padding: 4px 12px !important;
    border: 0 !important;
    color: var(--sn-muted);
    font-weight: 500;
}

.section-title .category-link.active,
.section-title .nav-link.active,
.section-title .category-link:hover {
    background-color: var(--sn-surface-2) !important;
    color: var(--sn-text) !important;
}

.view-all {
    border-radius: 999px;
    padding: 4px 12px;
    background-color: var(--sn-surface-2);
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Post cards                                                          */
/* ------------------------------------------------------------------ */

.post-item .image,
.post-item-vr,
.post-item .image img,
.post-item-small .image,
.post-item-small .image img,
.gallery-post-item,
.section-videos .image,
.video-player {
    border-radius: var(--sn-radius-md);
    overflow: hidden;
}

.post-item-small .image,
.post-item-small .image img {
    border-radius: var(--sn-radius-sm);
}

.post-item,
.post-item-small {
    transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}

.post-item:hover {
    transform: translateY(-2px);
}

.post-item .title a,
.post-item-small .title a {
    color: var(--sn-text);
    letter-spacing: -.01em;
}

.post-item-vr .title a {
    color: #fff;
}

.post-item .title a:hover,
.post-item-small .title a:hover {
    color: var(--sviynews-theme-color);
}

.post-meta,
.post-meta .meta-item,
.post-meta a {
    color: var(--sn-muted);
}

.post-item-vr .post-meta,
.post-item-vr .post-meta .meta-item,
.post-item-vr .post-meta a,
.featured-section .post-meta,
.featured-section .post-meta a {
    color: rgba(255, 255, 255, .85);
}

.badge-category {
    border-radius: 999px !important;
    padding: 0 11px !important;
    font-weight: 600 !important;
    letter-spacing: .01em;
}

/* ------------------------------------------------------------------ */
/* Sidebar widgets                                                     */
/* ------------------------------------------------------------------ */

.sidebar-widget {
    background-color: var(--sn-surface);
    border-radius: var(--sn-radius-xl);
    box-shadow: var(--sn-shadow);
    padding: 22px;
    margin-bottom: var(--sn-section-gap) !important;
}

.sidebar-widget .widget-head {
    border-bottom: 0 !important;
    margin-bottom: 16px !important;
    background: none !important;
    color: var(--sn-text) !important;
    height: auto !important;
    padding: 0 !important;
    overflow: visible !important;
}

.sidebar-widget .widget-head::before {
    display: none !important;
}

.sidebar-widget .widget-head::after {
    display: none !important;
}

.sidebar-widget .widget-head .title {
    text-transform: none !important;
    line-height: 1.2 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -.015em;
    color: var(--sn-text) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sidebar-widget .widget-head .title::before {
    content: "";
    width: 6px;
    height: 18px;
    border-radius: 999px;
    background-color: var(--sviynews-theme-color);
}

.widget-follow .item a {
    border-radius: 12px !important;
}

.tag-list a,
.tags-list a,
.widget-tags a,
.post-tags a {
    border-radius: 999px !important;
    background-color: var(--sn-surface-2) !important;
    border: 0 !important;
}

/* ------------------------------------------------------------------ */
/* Buttons & forms                                                     */
/* ------------------------------------------------------------------ */

.btn {
    border-radius: 12px;
    font-weight: 600;
}

.btn-custom,
.btn-load-more-posts {
    border-radius: 999px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
}

.btn-load-more-posts {
    background-color: var(--sn-surface) !important;
    border: 1px solid var(--sn-line) !important;
    color: var(--sn-text) !important;
    box-shadow: var(--sn-shadow);
}

.form-control,
.form-select,
.form-input,
.form-textarea {
    border-radius: 12px !important;
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sviynews-theme-color) 18%, transparent) !important;
    border-color: var(--sviynews-theme-color) !important;
}

.modal-content {
    border-radius: var(--sn-radius-xl) !important;
    border: 0 !important;
    box-shadow: var(--sn-shadow-hover) !important;
}

/* ------------------------------------------------------------------ */
/* Article page                                                        */
/* ------------------------------------------------------------------ */

.section-post-details .post-content,
.post-content-wrapper,
.section-page .page-content,
.section-account .card,
.section-profile .profile-header {
    border-radius: var(--sn-radius-xl);
}

.section-post-details .post-image img,
.post-content .post-image img,
.post-image-container img,
.entry-content img,
.post-text img {
    border-radius: var(--sn-radius-lg);
}

.entry-content blockquote,
.post-text blockquote {
    border-left: 4px solid var(--sviynews-theme-color);
    background-color: var(--sn-surface-2);
    border-radius: 0 var(--sn-radius-md) var(--sn-radius-md) 0;
    padding: 16px 20px;
}

.about-author,
.post-next-prev,
.container-toc,
.table-of-contents {
    background-color: var(--sn-surface);
    border-radius: var(--sn-radius-xl) !important;
    box-shadow: var(--sn-shadow);
    border: 0 !important;
}

.breadcrumb {
    background: none;
}

#postDetailsPage .post-content {
    background-color: var(--sn-surface);
    border-radius: var(--sn-radius-xl);
    box-shadow: var(--sn-shadow);
    padding: 32px 36px;
    margin-bottom: var(--sn-section-gap);
}

#postDetailsPage .post-content .post-title {
    letter-spacing: -.025em;
    color: var(--sn-text);
}

#postDetailsPage .post-content .post-summary {
    color: var(--sn-muted);
}

#postDetailsPage .post-content .about-author,
#postDetailsPage .post-content .post-next-prev,
#postDetailsPage .post-content .container-toc,
#postDetailsPage .post-content .table-of-contents {
    background-color: var(--sn-surface-2);
    box-shadow: none;
}

@media (max-width: 767.98px) {
    #postDetailsPage .post-content {
        padding: 20px 18px;
    }
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

#footer {
    margin-top: 48px;
    border-radius: var(--sn-radius-xl) var(--sn-radius-xl) 0 0;
}

#footer .footer-inner {
    padding: 64px 0 40px;
}

.footer-social-links a {
    border-radius: 12px !important;
}

.footer-widget .footer-posts .post-item-small .image,
.footer-widget .footer-posts .post-item-small .image img {
    border-radius: var(--sn-radius-sm);
}

.footer-widget .newsletter .newsletter-inputs input,
.footer-widget .newsletter .form-input {
    border-radius: 12px !important;
}

.footer-widget .newsletter .newsletter-inputs button {
    border-radius: 12px !important;
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 991.98px) {
    .featured-section > .container-xl {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media (max-width: 767.98px) {
    :root, [data-bs-theme=light], [data-bs-theme=dark] {
        --sn-block-pad: 18px;
        --sn-section-gap: 16px;
        --sn-radius-xl: 18px;
    }

    .section-title .title {
        font-size: 20px !important;
    }

    .featured-section {
        --fs-gap: 8px;
    }

    .featured-section > .container-xl {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-item,
    .post-item-small {
        transition: none;
    }

    .post-item:hover {
        transform: none;
    }
}

/* Article main image: portrait / square photos are shown whole in a 16:9 frame */
.post-image-preview img.img-framed{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:inherit}
.post-image-preview img.center-image{max-height:760px;object-fit:cover;width:100%}

/* Cropped images keep the upper part of tall photos (faces, headlines) instead of the middle */
main img, #footer img, .col-sidebar img, .mega-menu-wrapper .dropdown-menu img, .offcanvas-body img {object-position: 50% 25%}
.swiper-zoom-container > img, main .logo, #footer .logo {object-position: center}

/* Paywall: the free preview stays readable and fades out, the offer is a solid card below it */
.paywall-preview{position:relative}
.paywall.paywall-fade{position:relative;inset:auto;height:auto;background:none;padding:0;margin-top:-6rem;pointer-events:auto;display:block;z-index:2}
.paywall.paywall-fade::before{content:"";display:block;height:6rem;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 85%)}
[data-bs-theme=dark] .paywall.paywall-fade::before{background:linear-gradient(to bottom,rgba(28,28,30,0),#1c1c1e 85%)}
.paywall .paywall-card{background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;animation:none!important;opacity:1!important;transform:none!important;margin:0 auto;max-width:520px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -12px rgba(0,0,0,.18)}
[data-bs-theme=dark] .paywall .paywall-card{background:#1c1c1e!important}
.paywall a.btn-paywall,.entry-content .paywall a.btn-paywall{color:#fff!important;text-decoration:none!important;display:block;width:100%}
.paywall.paywall-hard{margin-top:1.5rem}