/**
 * SR Modern Theme - Customizer Styles
 * Social Links and Additional UI Components
 *
 * @package SR_Modern_Theme
 * @since 1.0
 */

/* ==========================================================================
   Social Links
   ========================================================================== */

.sr-social-links {
    display: flex;
    align-items: center;
    gap: var(--sr-space-3);
}

.sr-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--sr-surface);
    border-radius: var(--sr-radius-full);
    color: var(--sr-text-secondary);
    transition: all var(--sr-transition-fast);
}

.sr-social-link:hover {
    transform: translateY(-2px);
}

.sr-social-link--facebook:hover {
    background-color: #1877f2;
    color: var(--sr-white);
}

.sr-social-link--twitter:hover {
    background-color: #000000;
    color: var(--sr-white);
}

.sr-social-link--instagram:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: var(--sr-white);
}

.sr-social-link--linkedin:hover {
    background-color: #0a66c2;
    color: var(--sr-white);
}

.sr-social-link--youtube:hover {
    background-color: #ff0000;
    color: var(--sr-white);
}

.sr-social-link--pinterest:hover {
    background-color: #e60023;
    color: var(--sr-white);
}

.sr-social-link--tiktok:hover {
    background-color: #000000;
    color: var(--sr-white);
}

.sr-social-link--telegram:hover {
    background-color: #0088cc;
    color: var(--sr-white);
}

.sr-social-link--whatsapp:hover {
    background-color: #25d366;
    color: var(--sr-white);
}

/* Smaller social links variant */
.sr-social-links--small .sr-social-link {
    width: 32px;
    height: 32px;
}

.sr-social-links--small .sr-social-link svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   List Layout
   ========================================================================== */

.sr-posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--sr-space-6);
}

.sr-posts-list .sr-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sr-space-6);
}

@media (min-width: 640px) {
    .sr-posts-list .sr-card {
        grid-template-columns: 280px 1fr;
    }
}

.sr-posts-list .sr-card__image {
    aspect-ratio: 16 / 10;
}

.sr-posts-list .sr-card__content {
    padding: var(--sr-space-4) 0;
}

.sr-posts-list .sr-card__title {
    font-size: var(--sr-text-xl);
}

.sr-posts-list .sr-card__excerpt {
    display: block;
    -webkit-line-clamp: unset;
}

/* ==========================================================================
   Masonry Layout (CSS Columns)
   ========================================================================== */

.sr-posts-masonry {
    column-count: 1;
    column-gap: var(--sr-space-6);
}

@media (min-width: 640px) {
    .sr-posts-masonry {
        column-count: 2;
    }
}

.sr-posts-masonry .sr-card {
    break-inside: avoid;
    margin-bottom: var(--sr-space-6);
}

/* ==========================================================================
   Transparent Header
   ========================================================================== */

.transparent-header .sr-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: transparent;
    border-bottom: none;
}

.transparent-header .sr-header.sr-header--scrolled {
    position: fixed;
    background-color: var(--sr-white);
    border-bottom: 1px solid var(--sr-border);
}

[data-theme="dark"] .transparent-header .sr-header.sr-header--scrolled {
    background-color: var(--sr-background);
}

/* ==========================================================================
   Blog Layout Classes
   ========================================================================== */

/* Sidebar Left Layout */
.sr-main-layout--sidebar-left {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sr-space-10);
}

@media (min-width: 1024px) {
    .sr-main-layout--sidebar-left {
        grid-template-columns: var(--sr-sidebar-width) 1fr;
    }

    .sr-main-layout--sidebar-left>.sr-sidebar {
        order: -1;
    }
}

/* No Sidebar Layout */
.sr-main-layout--no-sidebar {
    max-width: var(--sr-content-width);
    margin: 0 auto;
}

/* ==========================================================================
   Typography Customizations
   ========================================================================== */

.sr-article-content {
    font-family: var(--sr-font-body);
    font-size: var(--sr-text-base);
    line-height: var(--sr-leading-relaxed);
}

.sr-article-content h1,
.sr-article-content h2,
.sr-article-content h3,
.sr-article-content h4,
.sr-article-content h5,
.sr-article-content h6 {
    font-family: var(--sr-font-heading);
}

/* ==========================================================================
   Color Scheme Preview Classes
   ========================================================================== */

[data-color-scheme="violet"] {
    --sr-primary: #8b5cf6;
    --sr-secondary: #a78bfa;
    --sr-accent: #f472b6;
}

[data-color-scheme="rose"] {
    --sr-primary: #f43f5e;
    --sr-secondary: #fb7185;
    --sr-accent: #f472b6;
}

[data-color-scheme="emerald"] {
    --sr-primary: #10b981;
    --sr-secondary: #34d399;
    --sr-accent: #14b8a6;
}

[data-color-scheme="amber"] {
    --sr-primary: #f59e0b;
    --sr-secondary: #fbbf24;
    --sr-accent: #fb923c;
}

[data-color-scheme="cyan"] {
    --sr-primary: #06b6d4;
    --sr-secondary: #22d3ee;
    --sr-accent: #2dd4bf;
}

[data-color-scheme="slate"] {
    --sr-primary: #475569;
    --sr-secondary: #64748b;
    --sr-accent: #94a3b8;
}

[data-color-scheme="blue"] {
    --sr-primary: #3b82f6;
    --sr-secondary: #60a5fa;
    --sr-accent: #818cf8;
}

/* ==========================================================================
   Customizer Panel Styles (Admin)
   ========================================================================== */

@media screen and (min-width: 1280px) {
    .customize-control-color .wp-picker-container {
        display: flex;
        align-items: center;
        gap: 10px;
    }
}

/* Font preview in customizer */
.customize-control select[data-customize-setting-link*="font"] option {
    padding: 8px;
}