/*
Theme Name: Baloch Diamond
Theme URI: https://balochscript.com/baloch-diamond
Author: Baloch Script Team
Author URI: https://balochscript.com
Description: A premium WordPress theme inspired by the timeless beauty of Balochi needlework artistry. Where tradition meets modern web design excellence. Features include customizable colors, hero slider, portfolio showcase, team section, and full dark/light mode support.
Version: 1.6.2
Tested up to: 7.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: baloch-diamond
Tags: blog, portfolio, custom-colors, custom-logo, custom-menu, featured-images, theme-options, translation-ready, one-column, two-columns, three-columns, left-sidebar, right-sidebar

Baloch Diamond WordPress Theme, Copyright (C) 2026 Baloch Script Team
Baloch Diamond is distributed under the terms of the GNU GPL v2 or later.

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
*/

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --color-primary: #38bdf8;
    --color-secondary: #f97316;
    --gradient: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    --gradient-reverse: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
    --bg: #ffffff;
    --bg-alt: #f8fafc;
    --text: #1e293b;
    --text-muted: #64748b;
    --card-bg: #ffffff;
    --border: #e2e8f0;
    --shadow: 0 4px 24px rgba(0,0,0,0.08);
    /* Font variables — overridden by dynamic CSS from Customizer */
    --font-body:    'Poppins', sans-serif;
    --font-heading: 'Playfair Display', serif;
    --font-rtl:     'Vazirmatn', sans-serif;
    /* Balochi embroidery decoration thread colors — overridden by dynamic CSS from Customizer */
    --bd-embroidery-thread-1: #fde68a;
    --bd-embroidery-thread-2: #ffffff;
}

[data-theme="dark"] {
    --bg: #0f172a;
    --bg-alt: #1e293b;
    --text: #f1f5f9;
    --text-muted: #94a3b8;
    --card-bg: #1e293b;
    --border: #334155;
    --shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* ============================================
   RESET & BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    transition: background 0.4s, color 0.4s;
    overflow-x: hidden;
}

/* Base support for Arabic / Persian script fallback */
body:lang(ar),
body:lang(fa),
body:lang(ps),
[lang="ar"], [lang="fa"], [lang="ps"] {
    font-feature-settings: "kern" 1, "liga" 1, "tnum" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
}

body.rtl, 
body.rtl button, 
body.rtl input, 
body.rtl textarea, 
body.rtl select {
    font-family: var(--font-rtl);
}

/* Ensure Arabic/Persian characters render correctly across the site */
body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6,
body.rtl .site-name, body.rtl .section-title, body.rtl .post-card-title,
body.rtl .project-card-title, body.rtl .product-title {
    font-family: var(--font-rtl) !important;
}

/* ============================================
   BALOCHI PATTERN SVG BACKGROUND
   ============================================ */
.balochi-pattern {
    position: relative;
    overflow: hidden;
}

.balochi-pattern::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L30 25 L25 15Z' fill='none' stroke='%2338bdf8' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M10 25 L15 35 L10 45 L5 35Z' fill='none' stroke='%23f97316' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M50 25 L55 35 L50 45 L45 35Z' fill='none' stroke='%2338bdf8' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M30 45 L35 55 L30 65 L25 55Z' fill='none' stroke='%23f97316' stroke-width='0.5' opacity='0.15'/%3E%3Ccircle cx='30' cy='30' r='2' fill='none' stroke='%2338bdf8' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--color-primary), var(--color-secondary));
    border-radius: 4px;
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: var(--bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    transition: all 0.3s;
}

.site-header.scrolled {
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}

/* Header with a custom background image — force light UI so the logo,
   menu, and icons stay readable over a photo instead of the flat --bg color */
.site-header.has-bg-image {
    backdrop-filter: none;
    border-bottom-color: transparent;
}

.site-header.has-bg-image .site-name,
.site-header.has-bg-image .site-description-text,
.site-header.has-bg-image .desktop-menu > li > a {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.site-header.has-bg-image .header-icon {
    color: #ffffff;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.header-icon {
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    background: transparent;
    border: none;
    color: var(--text);
}

.header-icon:hover {
    background: var(--bg-alt);
    transform: scale(1.05);
}

.header-icon svg { width: 24px; height: 24px; }

.site-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
}

.logo-diamond {
    width: 42px; height: 42px;
    position: relative;
}

.logo-diamond svg { width: 100%; height: 100%; }

.site-name {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.3rem;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.site-description-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* ============================================
   MOBILE MENU
   ============================================ */
.mobile-menu-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.mobile-menu-overlay.active { opacity: 1; visibility: visible; }

.mobile-menu {
    position: fixed;
    top: 0; right: -320px;
    width: 320px; height: 100%;
    background: var(--bg);
    z-index: 1002;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    box-shadow: -4px 0 30px rgba(0,0,0,0.2);
}

.mobile-menu.active { right: 0; }

.menu-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-close {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-alt);
    border: none;
    cursor: pointer;
    color: var(--text);
    transition: all 0.3s;
}

.menu-close:hover { background: var(--color-primary); color: white; }

.menu-items { padding: 16px 0; }

.menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 24px;
    color: var(--text);
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 500;
    cursor: pointer;
}

.menu-item:hover {
    background: var(--bg-alt);
    padding-left: 30px;
}

.menu-item svg { width: 20px; height: 20px; opacity: 0.7; }

/* ============================================
   SEARCH OVERLAY
   ============================================ */
.search-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg);
    z-index: 1003;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 120px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.search-overlay.active { opacity: 1; visibility: visible; }

.search-container {
    width: 90%; max-width: 700px;
    transform: translateY(-20px);
    transition: transform 0.4s;
}

.search-overlay.active .search-container { transform: translateY(0); }

.search-input-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.search-input {
    width: 100%;
    padding: 20px 60px 20px 24px;
    border: 2px solid var(--border);
    border-radius: 20px;
    font-size: 1.2rem;
    background: var(--card-bg);
    color: var(--text);
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.3s;
}

.search-input:focus { border-color: var(--color-primary); }

.search-close {
    position: absolute;
    right: 16px; top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg-alt);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
}

.search-results { margin-top: 24px; }

.search-result-item {
    padding: 16px 20px;
    background: var(--card-bg);
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.3s;
}

.search-result-item:hover {
    border-color: var(--color-primary);
    transform: translateX(4px);
}

/* ============================================
   HERO SLIDER
   ============================================ */
.hero-slider {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 500px;
    margin-top: 70px;
    overflow: hidden;
}

.slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.slide.active { opacity: 1; z-index: 1; }

.slide-image {
    width: 100%; height: 100%;
    object-fit: cover;
}

.slide-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    /* Overlay color + strength are Customizer-controlled:
       --bd-slide-overlay-rgb   (default 0,0,0)
       --bd-slide-overlay-alpha (default 0.8, range 0–1) */
    background: linear-gradient(
        transparent,
        rgba( var(--bd-slide-overlay-rgb, 0, 0, 0), var(--bd-slide-overlay-alpha, 0.8) )
    );
    padding: 60px 40px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.slide-category {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--gradient);
    color: white;
    margin-bottom: 12px;
    width: fit-content;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.slide-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 4px 20px rgba(0,0,0,0.3);
    max-width: 700px;
    margin-bottom: 8px;
}

.slide-excerpt {
    color: rgba(255,255,255,0.85);
    font-size: 1rem;
    max-width: 600px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    line-height: 1.6;
}

.slide-link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%; height: 100%;
    position: absolute;
    top: 0; left: 0;
    z-index: 2;
}

.slider-dots {
    position: absolute;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
}

.slider-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid rgba(255,255,255,0.6);
}

.slider-dot.active {
    background: white;
    width: 36px;
    border-radius: 6px;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s, background 0.3s;
    color: rgba(255,255,255,0.7);
    opacity: 0;
    pointer-events: none;
}

/* Only show arrows on hover of the slider container — hidden by default */
.hero-slider:hover .slider-arrow {
    opacity: 1;
    pointer-events: auto;
}

.slider-arrow:hover {
    background: rgba(255,255,255,0.22);
    color: white;
}

.slider-arrow svg { width: 16px; height: 16px; }
.slider-arrow.prev { left: 14px; }
.slider-arrow.next { right: 14px; }

/* ============================================
   SECTIONS
   ============================================ */
.section {
    padding: 80px 24px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
}

.section-full {
    padding: 80px 24px;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(56,189,248,0.1), rgba(249,115,22,0.1));
    color: var(--color-primary);
    margin-bottom: 16px;
    border: 1px solid rgba(56,189,248,0.2);
}

.section-badge svg { width: 16px; height: 16px; }

.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 16px;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-desc {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Decorative dividers removed per request */

/* ============================================
   PROJECT CARDS
   ============================================ */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 28px;
}

.project-card {
    background: var(--card-bg);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all 0.4s;
    box-shadow: var(--shadow);
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(56,189,248,0.15);
}

.project-card-image {
    width: 100%; height: 200px;
    object-fit: cover;
    transition: transform 0.6s;
}

.project-card:hover .project-card-image {
    transform: scale(1.05);
}

.project-card-img-wrapper {
    overflow: hidden;
    position: relative;
}

.project-card-img-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: var(--gradient);
}

.project-card-content { padding: 24px; }

.project-card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.project-card-excerpt {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-gradient {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 12px;
    background: var(--gradient);
    color: white;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(56,189,248,0.3);
}

.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(56,189,248,0.4);
}

.btn-gradient svg { width: 16px; height: 16px; }

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s;
    cursor: pointer;
    border: 2px solid var(--border);
}

.btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ============================================
   POST CARDS
   ============================================ */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
}

.post-card {
    background: var(--card-bg);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all 0.4s;
    box-shadow: var(--shadow);
}

.post-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(249,115,22,0.12);
}

.post-card-img-wrapper {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.post-card-img-wrapper img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s;
}

.post-card:hover .post-card-img-wrapper img { transform: scale(1.08); }

.post-date-badge {
    position: absolute;
    top: 16px; left: 16px;
    background: var(--gradient);
    color: white;
    padding: 8px 14px;
    border-radius: 12px;
    text-align: center;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.post-date-badge .day {
    font-size: 1.3rem;
    display: block;
    line-height: 1;
}

.post-date-badge .month {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.post-card-body { padding: 24px; }

.post-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.post-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.post-meta-item svg { width: 14px; height: 14px; }

.post-card-title {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.4;
}

.post-card-title a {
    color: var(--text);
    text-decoration: none;
    transition: color 0.3s;
}

.post-card-title a:hover { color: var(--color-primary); }

.post-card-excerpt {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    transition: gap 0.3s;
}

.read-more:hover { gap: 14px; }
.read-more svg { width: 16px; height: 16px; }

/* ============================================
   DOCUMENTATION CARDS
   ============================================ */
.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.doc-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.doc-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--gradient);
}

.doc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--color-primary);
}

.doc-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(56,189,248,0.1), rgba(249,115,22,0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.doc-icon svg { width: 28px; height: 28px; color: var(--color-primary); }

.doc-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.doc-desc {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 14px;
}

.doc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-secondary);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.85rem;
}

.doc-link:hover { gap: 10px; }

/* ============================================
   TEAM CARDS
   ============================================ */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 28px;
}

.team-card {
    background: var(--card-bg);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all 0.4s;
    text-align: center;
    position: relative;
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.1);
}

.team-card-header {
    height: 120px;
    position: relative;
}

.team-card-header::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 5 L25 12 L20 19 L15 12Z' fill='none' stroke='white' stroke-width='0.5' opacity='0.2'/%3E%3Ccircle cx='20' cy='30' r='3' fill='none' stroke='white' stroke-width='0.5' opacity='0.15'/%3E%3C/svg%3E");
}

.team-avatar {
    width: 100px; height: 100px;
    border-radius: 50%;
    border: 4px solid var(--card-bg);
    object-fit: cover;
    position: relative;
    margin: -50px auto 16px;
    background: var(--bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.team-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.team-name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 4px;
}

.team-role {
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.team-bio {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.6;
    padding: 0 24px;
    margin-bottom: 20px;
}

.team-socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0 24px 24px;
}

.team-social {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-alt);
    color: var(--text-muted);
    transition: all 0.3s;
    text-decoration: none;
}

.team-social:hover {
    background: var(--gradient);
    color: white;
}

.team-social svg { width: 16px; height: 16px; }

/* ============================================
   NEWSLETTER / CTA
   ============================================ */
.newsletter-section {
    background: var(--gradient);
    padding: 80px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.newsletter-pattern {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 10 L50 25 L40 40 L30 25Z' fill='none' stroke='white' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M20 40 L30 55 L20 70 L10 55Z' fill='none' stroke='white' stroke-width='0.5' opacity='0.1'/%3E%3Cpath d='M60 40 L70 55 L60 70 L50 55Z' fill='none' stroke='white' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
    pointer-events: none;
}

.newsletter-inner {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    margin-bottom: 16px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.newsletter-desc {
    color: rgba(255,255,255,0.9);
    font-size: 1.05rem;
    margin-bottom: 32px;
    line-height: 1.7;
}

.newsletter-form {
    display: flex;
    gap: 12px;
    max-width: 480px;
    margin: 0 auto;
}

.newsletter-input {
    flex: 1;
    padding: 14px 20px;
    border-radius: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.15);
    color: white;
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
    backdrop-filter: blur(10px);
}

.newsletter-input:focus {
    border-color: rgba(255,255,255,0.6);
}

.newsletter-input::placeholder {
    color: rgba(255,255,255,0.6);
}

.newsletter-btn {
    padding: 14px 28px;
    border-radius: 14px;
    background: white;
    color: var(--color-primary);
    font-weight: 700;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: all 0.3s;
    white-space: nowrap;
}

.newsletter-btn:hover {
    transform: translateY(-2px);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
    position: relative;
}

.footer-top-bar {
    height: 4px;
    background: var(--gradient);
}

/* Footer with a custom background image — force light UI so text/links
   stay readable over a photo instead of the flat --bg-alt color */
.site-footer.has-bg-image {
    background-color: transparent;
    border-top-color: transparent;
    background-size: cover;
    background-position: center;
}

.site-footer.has-bg-image .footer-about p,
.site-footer.has-bg-image .footer-links a,
.site-footer.has-bg-image .footer-bottom {
    color: rgba(255,255,255,0.85);
}

.site-footer.has-bg-image .footer-col h4,
.site-footer.has-bg-image .footer-bottom a {
    color: #ffffff;
}

.site-footer.has-bg-image .footer-social-row a {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
    color: #ffffff;
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 24px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-about .footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.footer-about .footer-logo-text {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 1.3rem;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-about p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.footer-col h4 {
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 1rem;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 30px; height: 3px;
    background: var(--gradient);
    border-radius: 2px;
}

.footer-links { list-style: none; }
.footer-links li { margin-bottom: 10px; }

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.footer-links a:hover {
    color: var(--color-primary);
    padding-left: 6px;
}

.footer-social-row {
    display: flex;
    gap: 10px;
}

.footer-social-row a {
    width: 40px; height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: all 0.3s;
    text-decoration: none;
}

.footer-social-row a:hover {
    background: var(--gradient);
    color: white;
    border-color: transparent;
}

.footer-bottom {
    border-top: 1px solid var(--border);
    padding: 20px 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.footer-bottom a {
    color: var(--color-primary);
    text-decoration: none;
}

/* ============================================
   DARK MODE TOGGLE
   ============================================ */
.theme-toggle {
    position: fixed;
    bottom: 24px; left: 24px;
    z-index: 999;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--gradient);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 20px rgba(56,189,248,0.4);
    transition: all 0.3s;
}

.theme-toggle:hover { transform: scale(1.1); }
.theme-toggle svg { width: 24px; height: 24px; }

/* ============================================
   SETTINGS PANEL
   ============================================ */
.settings-panel {
    position: fixed;
    top: 0; left: -380px;
    width: 380px; height: 100%;
    background: var(--bg);
    z-index: 2001;
    overflow-y: auto;
    box-shadow: 4px 0 30px rgba(0,0,0,0.2);
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-panel.active { left: 0; }

.settings-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.settings-overlay.active { opacity: 1; visibility: visible; }

.settings-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.settings-header h3 {
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-body { padding: 24px; }

.setting-group { margin-bottom: 28px; }

.setting-label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: block;
}

/* ============================================
   SINGLE POST
   ============================================ */
.single-post-hero {
    width: 100%;
    height: 50vh;
    min-height: 400px;
    position: relative;
    overflow: hidden;
    margin-top: 70px;
}

.single-post-hero img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.single-post-hero .overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    padding: 60px 40px 40px;
}

.single-post-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 24px;
}

.single-post-content p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.9;
    margin-bottom: 20px;
}

.single-post-content a:not(.post-tag):not(.btn-gradient):not(.btn-outline) {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px dashed rgba(56, 189, 248, 0.4);
    transition: all 0.3s ease;
}

.single-post-content a:not(.post-tag):not(.btn-gradient):not(.btn-outline):hover {
    color: var(--color-secondary);
    border-bottom-color: var(--color-secondary);
    text-shadow: 0 0 1px rgba(249, 115, 22, 0.1);
}

.single-post-content h2 {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    margin: 32px 0 16px;
    color: var(--text);
}

.single-post-content blockquote {
    border-left: 4px solid var(--color-primary);
    padding: 20px 24px;
    margin: 32px 0;
    background: var(--bg-alt);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Tags */
.post-tags {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.post-tag {
    padding: 6px 14px;
    background: var(--bg-alt);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.3s;
}

.post-tag:hover {
    color: var(--color-primary);
    background: linear-gradient(135deg, rgba(56,189,248,0.1), rgba(249,115,22,0.1));
}

/* Author Box */
.author-box {
    margin-top: 32px;
    padding: 24px;
    background: var(--bg-alt);
    border-radius: 16px;
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.author-box img {
    width: 70px; height: 70px;
    border-radius: 50%;
    object-fit: cover;
}

.author-box-content {
    flex: 1;
    min-width: 200px;
}

.author-box-content h4 {
    font-weight: 700;
    margin-bottom: 4px;
}

.author-box-content p {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    margin: 0;
}

/* Related Posts */
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.related-post-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
}

.related-post-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.related-post-card img {
    width: 100%;
    height: 130px;
    object-fit: cover;
}

.related-post-card h4 {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 14px;
}

.related-post-card a {
    color: var(--text);
    text-decoration: none;
}

/* Comments */
.comment-item {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
}

.comment-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-body {
    flex: 1;
    background: var(--bg-alt);
    padding: 16px;
    border-radius: 14px;
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 4px;
}

.comment-author {
    font-size: 0.9rem;
    font-weight: 700;
}

.comment-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.comment-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Comment Form */
.comment-form-wrapper {
    margin-top: 32px;
    padding: 24px;
    background: var(--bg-alt);
    border-radius: 16px;
}

.comment-form-wrapper h4 {
    font-weight: 700;
    margin-bottom: 16px;
}

.comment-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.comment-form-fields input,
.comment-form-wrapper textarea {
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text);
    font-family: var(--font-body);
    outline: none;
    width: 100%;
}

.comment-form-wrapper textarea {
    resize: vertical;
    margin-bottom: 12px;
}

/* ============================================
   404 PAGE
   ============================================ */
.error-404 {
    text-align: center;
    padding: 80px 24px;
    margin-top: 70px;
}

.error-number {
    font-family: var(--font-heading);
    font-size: 10rem;
    font-weight: 900;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.error-diamond {
    width: 60px; height: 60px;
    margin: 20px auto;
    background: var(--gradient);
    transform: rotate(45deg);
    border-radius: 8px;
    opacity: 0.3;
}

.error-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin-bottom: 16px;
}

.error-desc {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 500px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.error-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   NOTIFICATION
   ============================================ */
.notification {
    position: fixed;
    top: 80px; right: 20px;
    z-index: 3000;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
    transform: translateX(400px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 320px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification.show { transform: translateX(0); }

.notification-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.notification-text {
    font-size: 0.85rem;
    font-weight: 500;
}

/* ============================================
   STITCH BORDER
   ============================================ */
/*  removed as requested */

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-in {
    animation: fadeInUp 0.6s ease forwards;
}

/* ============================================
   WORDPRESS SPECIFIC
   ============================================ */
.alignleft { float: left; margin-right: 1.5em; margin-bottom: 1em; }
.alignright { float: right; margin-left: 1.5em; margin-bottom: 1em; }
.aligncenter { display: block; margin: 0 auto 1em; }

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.85rem; color: var(--text-muted); text-align: center; padding: 8px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.gallery-item { margin: 0; }
.gallery-item img { width: 100%; height: auto; border-radius: 8px; }
.gallery-caption { font-size: 0.85rem; color: var(--text-muted); text-align: center; padding: 6px 4px; }

/* Highlight comments written by the post author */
.bypostauthor > .comment-body {
    border: 1px solid var(--color-primary);
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.12);
}

.sticky .post-card { border: 2px solid var(--color-primary); }

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

/* Pagination — standard WordPress the_posts_pagination() output */
.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 48px;
}

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s;
    gap: 6px;
    line-height: 1;
}

.page-numbers:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
}

.page-numbers.current {
    background: var(--gradient);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
}

.page-numbers.prev,
.page-numbers.next {
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
}

.page-numbers.prev:hover,
.page-numbers.next:hover {
    background: var(--bg-alt);
}

.page-numbers svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Screen-reader text hidden by default */
.navigation.pagination .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

/* Dots separator */
.page-numbers.dots {
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: default;
    padding: 10px 8px;
}

.page-numbers.dots:hover {
    transform: none;
    color: var(--text-muted);
    border: none;
}

/* Mobile adjustments for pagination */
@media (max-width: 480px) {
    .nav-links {
        gap: 4px;
    }
    .page-numbers {
        padding: 8px 12px;
        font-size: 0.82rem;
    }
    .page-numbers.prev,
    .page-numbers.next {
        padding: 8px 14px;
    }
    .nav-prev-text,
    .nav-next-text {
        display: none;
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */
/* ============================================
   DESKTOP NAVIGATION
   ============================================ */
.desktop-nav {
    display: none;
}

.desktop-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.desktop-menu > li > a {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: all 0.2s;
}

.desktop-menu > li > a:hover {
    background: var(--bg-alt);
    color: var(--color-primary);
}

.desktop-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 8px 0;
    z-index: 100;
}

.desktop-menu li {
    position: relative;
}

.desktop-menu li:hover > .sub-menu {
    display: block;
}

/* Megamenu support */
@media (min-width: 1025px) {
    .site-header .menu-item-has-children.megamenu {
        position: static !important;
    }

    .site-header .megamenu .sub-menu {
        position: absolute;
        top: 100%;
        left: 24px;
        right: 24px;
        width: calc(100% - 48px);
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 32px;
        box-shadow: var(--shadow);
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(15px);
        transition: all 0.3s ease;
    }

    .site-header .megamenu:hover .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .site-header .megamenu .sub-menu li {
        display: block;
    }

    .site-header .megamenu .sub-menu a {
        padding: 8px 0;
        color: var(--text);
        font-weight: 500;
        font-size: 0.95rem;
    }

    .site-header .megamenu .sub-menu a:hover {
        color: var(--color-primary);
    }
}

@media (min-width: 1025px) {
    .desktop-nav {
        display: block;
    }

    .header-actions .mobile-only {
        display: none;
    }
}

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

@media (max-width: 768px) {
    .slide-title { font-size: 1.6rem; }
    .slide-excerpt { font-size: 0.85rem; }
    .section-title { font-size: 1.8rem; }
    .hero-slider { height: var(--bd-slider-height, 55vh); min-height: 400px; }
    .footer-inner { grid-template-columns: 1fr; gap: 30px; }
    .slider-arrow { display: none !important; } /* always hidden on mobile — swipe only */
    .projects-grid,
    .posts-grid,
    .docs-grid,
    .team-grid { grid-template-columns: 1fr; }
    .site-name { display: none; }
    .site-description-text { display: none; }
    .error-number { font-size: 6rem; }
    .single-post-hero { height: 40vh; min-height: 300px; }
    .newsletter-form { flex-direction: column; }
    .comment-form-fields { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .slide-overlay { padding: 40px 20px 30px; }
    .slide-title { font-size: 1.3rem; }
    .section { padding: 50px 16px; }
    .newsletter-title { font-size: 1.8rem; }
}

/* ============================================
   PROMO HUB SECTION (FORUM & MARKETPLACE)
   ============================================ */
.promo-hub-section {
    position: relative;
    overflow: hidden;
}

.promo-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow);
}

.promo-card:hover {
    transform: translateY(-8px);
    border-color: var(--color-primary);
    box-shadow: 0 16px 40px rgba(56, 189, 248, 0.12);
}

.promo-card-pattern {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 2 L18 8 L15 14 L12 8Z' fill='none' stroke='%2338bdf8' stroke-width='0.4' opacity='0.08'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.forum-promo-card .promo-card-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 2 L18 8 L15 14 L12 8Z' fill='none' stroke='%2338bdf8' stroke-width='0.4' opacity='0.08'/%3E%3C/svg%3E");
}

.shop-promo-card .promo-card-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 2 L18 8 L15 14 L12 8Z' fill='none' stroke='%23f97316' stroke-width='0.4' opacity='0.08'/%3E%3C/svg%3E");
}

.promo-card-body {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    height: 100%;
}

.promo-icon-wrapper {
    width: 80px; height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.08), rgba(249, 115, 22, 0.08));
    margin-bottom: 24px;
    color: var(--color-primary);
    border: 1px solid rgba(56, 189, 248, 0.15);
    transition: all 0.3s;
}

.shop-promo-card .promo-icon-wrapper {
    color: var(--color-secondary);
    border-color: rgba(249, 115, 22, 0.15);
}

.promo-card:hover .promo-icon-wrapper {
    transform: scale(1.1) rotate(5deg);
    background: var(--gradient);
    color: white;
    border-color: transparent;
}

.promo-svg-icon {
    width: 36px; height: 36px;
}

.promo-card-title {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: 12px;
}

.promo-card-desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 320px;
}

.promo-action {
    margin-top: auto;
}

















/* ============================================
   PROPOSAL 2: ANIMATED NEEDLEWORK BACKGROUNDS
   ============================================ */
.balochi-pattern-animated::before {
    animation: stitchPulse 12s infinite linear !important;
}

@keyframes stitchPulse {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 60px 60px;
    }
}

/* ============================================
   PROPOSAL 4: MEGAMENU STYLE
   ============================================ */
@media (min-width: 1025px) {
    .site-header .menu-item-has-children.megamenu {
        position: static !important;
    }

    .site-header .megamenu .sub-menu {
        position: absolute;
        top: 100%;
        left: 24px;
        right: 24px;
        width: calc(100% - 48px);
        background: var(--card-bg);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 32px;
        box-shadow: var(--shadow);
        display: grid !important;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(15px);
        transition: all 0.3s ease;
        background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 5 L23 11 L20 17 L17 11Z' fill='none' stroke='%2338bdf8' stroke-width='0.4' opacity='0.03'/%3E%3C/svg%3E");
    }

    .site-header .megamenu:hover .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .site-header .megamenu .sub-menu li {
        display: block;
    }

    .site-header .megamenu .sub-menu a {
        padding: 8px 0;
        color: var(--text);
        font-weight: 500;
        font-size: 0.95rem;
    }

    .site-header .megamenu .sub-menu a:hover {
        color: var(--color-primary);
    }
}

/* ============================================
   PROPOSAL 6: SKELETON SHIMMER LOADING
   ============================================ */
.skeleton-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    padding: 0;
}

.skeleton-shimmer {
    position: relative;
    overflow: hidden;
    background: var(--bg-alt);
}

.skeleton-shimmer::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 20%,
        rgba(255, 255, 255, 0.6) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmerWave 1.6s infinite;
}

[data-theme="dark"] .skeleton-shimmer::after {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.08) 20%,
        rgba(255, 255, 255, 0.15) 60%,
        rgba(255, 255, 255, 0) 100%
    );
}

@keyframes shimmerWave {
    100% {
        transform: translateX(100%);
    }
}

.skeleton-image-placeholder {
    width: 100%;
    height: 220px;
}

.skeleton-title-line {
    height: 18px;
    width: 70%;
    margin: 16px 24px 8px;
    border-radius: 4px;
}

.skeleton-text-line {
    height: 12px;
    width: 85%;
    margin: 8px 24px;
    border-radius: 4px;
}

.skeleton-button-placeholder {
    height: 38px;
    width: 120px;
    margin: 16px 24px 24px;
    border-radius: 10px;
}
/* Header actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-only {
    display: block;
}

@media (min-width: 1025px) {
    .mobile-only {
        display: none;
    }
}

/* Horizontal Scroll Shop - RTL/LTR friendly */
.shop-horizontal-scroll {
    direction: ltr; /* base */
}
body.rtl .shop-horizontal-scroll {
    direction: rtl;
}
.shop-horizontal-scroll > div {
    display: flex;
    gap: 22px;
}

/* ============================================
   DISCOUNT BOOKMARK — Balochi-Embroidered Sale Tag
   ============================================
   Rendered as a self-contained inline SVG (see bd_render_discount_bookmark()
   in inc/template-functions.php and bdBuildBookmarkHTML()/buildBookmarkHTML()
   in the JS files). All colors, gradients, text and stitching are drawn
   directly inside the SVG markup itself, so the badge always displays
   correctly even if this stylesheet is stripped, minified incorrectly, or
   fails to load — only positioning/sizing lives here. The entrance
   animation only ever transforms position/scale and never touches opacity,
   so the badge can never get stuck invisible.
*/

/* Container must have position:relative */
.bd-bookmark {
    position: absolute;
    top: 0;
    right: 18px;
    width: 54px;
    height: 78px;
    z-index: 6;
    pointer-events: none;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
    animation: bd-bookmark-drop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transform-origin: top center;
}

@keyframes bd-bookmark-drop {
    0%   { transform: translateY(-10px) scale(0.9); }
    100% { transform: translateY(0)     scale(1); }
}

.bd-bookmark svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Compact variant — for smaller cards */
.bd-bookmark--sm {
    width: 44px;
    height: 64px;
    right: 14px;
}

/* Dark mode tweak — slightly stronger shadow so it still pops off dark cards */
[data-theme="dark"] .bd-bookmark {
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.55));
}


/* ============================================
   BLOG SECTION — NAVIGATION & FOOTER
   ============================================ */

/* Outer wrapper: nav + view-all stacked */
.bd-blog-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 48px;
}

/* "View All Posts" button — homepage Blog section footer */
.bd-blog-viewall-btn {
    padding: 14px 32px;
    font-size: 0.98rem;
    border-radius: 14px;
}

.bd-blog-viewall-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.25s;
}

.bd-blog-viewall-btn:hover svg {
    transform: translateX(4px);
}

/* ============================================
   BLOG LOAD MORE
   ============================================ */
.bd-loadmore-btn { position: relative; }
.bd-loadmore-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.posts-grid .post-card.bd-newly-loaded { animation: bd-fadeInUp 0.5s ease forwards; }
@keyframes bd-fadeInUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes bd-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.bd-nomore-msg { text-align:center; margin-top:20px; font-size:0.9rem; color:var(--text-muted); padding:16px 24px; background:var(--bg-alt); border-radius:12px; }
.bd-blog-archive-link { display:inline-flex; align-items:center; gap:6px; color:var(--color-primary); font-weight:600; text-decoration:none; font-size:0.9rem; margin-top:8px; transition:gap 0.3s; }
.bd-blog-archive-link:hover { gap:12px; }
.bd-loadmore-status { text-align:center; margin-top:12px; font-size:0.85rem; color:var(--text-muted); }

/* ============================================
   BALOCHI EMBROIDERY DECORATION
   ============================================
   Toggle: Customize → 🎨 Colors & Presets → "Enable Balochi Embroidery
   Decoration". When active, every gradient line/bar and every gradient
   button/badge across the site gets a traditional Baloch needlework
   stitch treatment using two customizable thread colors
   (--bd-embroidery-thread-1 / --bd-embroidery-thread-2).
   Fully inert (zero effect) when the body class below is absent.
*/

/* ---- Type A: running-stitch dashes across thin gradient bars/lines ---- */
body.bd-embroidery-enabled .footer-top-bar,
body.bd-embroidery-enabled .project-card-img-wrapper::after,
body.bd-embroidery-enabled .doc-card::before,
body.bd-embroidery-enabled .footer-col h4::after {
    background-image: repeating-linear-gradient(
        90deg,
        var(--bd-embroidery-thread-1) 0,
        var(--bd-embroidery-thread-1) 5px,
        transparent 5px,
        transparent 10px
    ), var(--gradient);
    background-color: transparent;
}

/* ---- Type B: dashed stitched-border "frame" on gradient buttons/badges/shapes ---- */
body.bd-embroidery-enabled .btn-gradient,
body.bd-embroidery-enabled .slide-category,
body.bd-embroidery-enabled .pagination .current,
body.bd-embroidery-enabled .notification-icon,
body.bd-embroidery-enabled .team-social,
body.bd-embroidery-enabled .footer-social-row a,
body.bd-embroidery-enabled .promo-icon-wrapper {
    position: relative;
}

body.bd-embroidery-enabled .btn-gradient::after,
body.bd-embroidery-enabled .slide-category::after,
body.bd-embroidery-enabled .post-date-badge::after,
body.bd-embroidery-enabled .pagination .current::after,
body.bd-embroidery-enabled .theme-toggle::after,
body.bd-embroidery-enabled .notification-icon::after,
body.bd-embroidery-enabled .team-social:hover::after,
body.bd-embroidery-enabled .footer-social-row a:hover::after,
body.bd-embroidery-enabled .promo-card:hover .promo-icon-wrapper::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1.5px dashed var(--bd-embroidery-thread-1);
    border-radius: inherit;
    pointer-events: none;
}

/* Small gold "bead" accents at the corners of the primary CTA button */
body.bd-embroidery-enabled .btn-gradient::before {
    content: '';
    position: absolute;
    top: 50%; left: 6px;
    width: 3px; height: 3px;
    background: var(--bd-embroidery-thread-2);
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: calc(100% - 6px) 0 0 var(--bd-embroidery-thread-2);
    pointer-events: none;
}

/* ---- Framed stitched border around the full-bleed newsletter/CTA banner ---- */
body.bd-embroidery-enabled .newsletter-section {
    position: relative;
}

body.bd-embroidery-enabled .newsletter-section::after {
    content: '';
    position: absolute;
    inset: 16px;
    border: 1.5px dashed var(--bd-embroidery-thread-1);
    border-radius: 24px;
    pointer-events: none;
}

/* ---- Small decorative diamond bead (404 page) ---- */
body.bd-embroidery-enabled .error-diamond {
    border: 1.5px dashed var(--bd-embroidery-thread-1);
}

/* Dark mode: keep the stitching crisp against darker card/badge surfaces
   (data-theme lives on <html>, the embroidery toggle class lives on <body>,
   so this must be a descendant selector, not a compound one) */
[data-theme="dark"] body.bd-embroidery-enabled .btn-gradient::after,
[data-theme="dark"] body.bd-embroidery-enabled .slide-category::after,
[data-theme="dark"] body.bd-embroidery-enabled .post-date-badge::after,
[data-theme="dark"] body.bd-embroidery-enabled .pagination .current::after,
[data-theme="dark"] body.bd-embroidery-enabled .theme-toggle::after,
[data-theme="dark"] body.bd-embroidery-enabled .notification-icon::after {
    border-color: var(--bd-embroidery-thread-1);
}


/* ============================================
   MULTI-COLUMN FRONT-PAGE LAYOUT (v1.3.0)
   ============================================
   The front page can now be split into 1, 2 or 3 columns.
   .bd-layout is only printed when at least one section has been
   dragged into a sidebar zone in:
   Customize → 💎 Baloch Diamond → 📋 Sections Order & Visibility

   Columns are proportional (fr units) — the admin's layout is kept
   on every screen size with no pixel-width settings needed.
*/

.bd-layout {
    display: grid;
    gap: 28px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 24px 0;   /* breathing room below the header/slider */
    align-items: start;
}

/* No slider above? Clear the fixed header (70px) plus the
   same comfortable breathing room. */
.site-main > .bd-layout:first-child {
    padding-top: 110px;
}

/* Which sidebars exist?
   Sidebar widths are fully PROPORTIONAL (fr units) — no pixel
   values needed. Whatever column layout the admin builds
   (1, 2 or 3 columns) is preserved on every screen width;
   the columns simply scale together.
   2-col: sidebar ≈ 27% / main ≈ 73%
   3-col: sidebars ≈ 24% each / main ≈ 52%                     */
.bd-layout--left  { grid-template-columns: minmax(0, 27fr) minmax(0, 73fr); }
.bd-layout--right { grid-template-columns: minmax(0, 73fr) minmax(0, 27fr); }
.bd-layout--both  { grid-template-columns: minmax(0, 24fr) minmax(0, 52fr) minmax(0, 24fr); }

/* RTL: grid columns flip automatically with direction, nothing extra needed. */

/* Zones */
.bd-zone { min-width: 0; }

.bd-zone--sidebar {
    position: sticky;
    top: 100px; /* below the fixed header when scrolling, with breathing room */
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-self: start;
    /* Independent scrolling: a tall sidebar scrolls INSIDE its own
       box instead of pushing the whole page. overscroll-behavior
       stops the scroll from chaining to the main column when the
       sidebar reaches its end. */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.bd-zone--sidebar::-webkit-scrollbar { width: 6px; }
.bd-zone--sidebar::-webkit-scrollbar-track { background: transparent; }
.bd-zone--sidebar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

/* Sidebars carry the same decorative Balochi needlework pattern
   as the main sections, so the background feels continuous
   across all columns. */
.bd-zone--sidebar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L35 15 L30 25 L25 15Z' fill='none' stroke='%2338bdf8' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M10 25 L15 35 L10 45 L5 35Z' fill='none' stroke='%23f97316' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M50 25 L55 35 L50 45 L45 35Z' fill='none' stroke='%2338bdf8' stroke-width='0.5' opacity='0.15'/%3E%3Cpath d='M30 45 L35 55 L30 65 L25 55Z' fill='none' stroke='%23f97316' stroke-width='0.5' opacity='0.15'/%3E%3Ccircle cx='30' cy='30' r='2' fill='none' stroke='%2338bdf8' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* Keep the sidebar pattern animated when the theme option is on,
   matching the animated patterns of the main sections. */
body.balochi-pattern-animated .bd-zone--sidebar::before {
    animation: stitchPulse 12s infinite linear;
}

/* Sidebar sections render above the pattern layer.
   flex-shrink:0 is essential: without it the flex column would
   COMPRESS the sections to fit max-height instead of letting the
   sidebar scroll. */
.bd-zone--sidebar > .section,
.bd-zone--sidebar > .section-full {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* -----------------------------------------------
   Sections INSIDE the multi-column wrapper:
   the .section max-width/centering moves up to
   .bd-layout, so neutralise it here.
   ----------------------------------------------- */
.bd-layout .section,
.bd-layout .section-full {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Main column keeps comfortable padding, but slightly reduced */
.bd-zone--main .section,
.bd-zone--main .section-full {
    padding-left: 0;
    padding-right: 0;
}

/* Blog section becomes narrower next to a sidebar:
   smaller cards so more still fit */
.bd-zone--main .posts-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

/* Slightly tighter section spacing in multi-column mode */
.bd-zone--main .section { padding-top: 56px; padding-bottom: 56px; }

/* ===============================================
   COMPACT SIDEBAR MODE
   Any section dropped into a sidebar switches to a
   narrow, vertical presentation.
   Sections keep their OWN native backgrounds (same
   as one-column mode) — no card wrapper is added.
   =============================================== */

.bd-zone--sidebar .section,
.bd-zone--sidebar .section-full {
    padding: 30px 16px;
}

/* Compact section headers — badge, title and description stay CENTERED */
.bd-zone--sidebar .section-header {
    margin-bottom: 20px !important;
    text-align: center;
}
.bd-zone--sidebar .section-title {
    font-size: 1.15rem !important;
    margin-bottom: 6px !important;
}
.bd-zone--sidebar .section-badge {
    font-size: 0.65rem;
    padding: 4px 10px;
    margin-bottom: 8px;
}
.bd-zone--sidebar .section-desc {
    font-size: 0.8rem;
    line-height: 1.5;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

/* Main-column section headers also stay centered in multi-column mode */
.bd-zone--main .section-header {
    text-align: center;
}
.bd-zone--main .section-desc {
    margin-left: auto;
    margin-right: auto;
}

/* All the wide auto-fill grids collapse to ONE vertical column */
.bd-zone--sidebar .projects-grid,
.bd-zone--sidebar .docs-grid,
.bd-zone--sidebar .team-grid,
.bd-zone--sidebar .products-grid,
.bd-zone--sidebar .members-grid,
.bd-zone--sidebar .posts-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}

/* Members grid: two mini-columns fit nicely in a sidebar */
.bd-zone--sidebar .members-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

/* Inline-styled grids inside sections (forum stats, categories,
   featured discussions, …) collapse to ONE column by default … */
.bd-zone--sidebar .section div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
}
/* … except small stat/counter boxes (inline minmax(140px…)):
   those stay two-up — they are tiny and read better side by side */
.bd-zone--sidebar .section div[style*="minmax(140px"] {
    grid-template-columns: 1fr 1fr !important;
}

/* -----------------------------------------------
   OVERFLOW PROTECTION in sidebars
   Several section parts carry inline min-widths
   (e.g. forum topic cards use min-width:240/260px)
   which overflow a 220–320px sidebar. Neutralise
   all of them and force text to wrap inside cards.
   ----------------------------------------------- */
.bd-zone--sidebar .section,
.bd-zone--sidebar .section-full {
    overflow: hidden;               /* absolute last-resort clip */
}
.bd-zone--sidebar .section *,
.bd-zone--sidebar .section-full * {
    min-width: 0 !important;        /* kill inline min-widths so flex/grid items can shrink */
}
.bd-zone--sidebar .section h1,
.bd-zone--sidebar .section h2,
.bd-zone--sidebar .section h3,
.bd-zone--sidebar .section h4,
.bd-zone--sidebar .section p,
.bd-zone--sidebar .section a,
.bd-zone--sidebar .section span {
    overflow-wrap: break-word;      /* long words/URLs wrap instead of escaping the card,
                                       but normal words keep their natural width */
}
.bd-zone--sidebar .section img {
    max-width: 100%;
    height: auto;
}

/* Forum topic cards: compact padding, stack content vertically */
.bd-zone--sidebar .forum-topic-card {
    padding: 14px 16px !important;
    gap: 10px !important;
}
.bd-zone--sidebar .forum-topic-card > div {
    flex: 1 1 100% !important;      /* title block and replies block stack */
}
.bd-zone--sidebar .forum-topic-card > div:last-child {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 14px !important;
    text-align: start !important;
}
/* Hide the big 48px avatar icon inside sidebar topic cards —
   it eats a third of the card width and forces ugly word breaks */
.bd-zone--sidebar .forum-topic-card div[style*="width:48px"] {
    display: none !important;
}
/* Slightly smaller topic titles so they wrap on word boundaries */
.bd-zone--sidebar .forum-topic-card a {
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
}

/* Cards & buttons shrink a little.
   Fluid font/padding so buttons never clip even in very
   narrow proportional sidebars. */
.bd-zone--sidebar .doc-card { padding: 16px; }
.bd-zone--sidebar .btn-gradient,
.bd-zone--sidebar .btn-outline {
    padding: 8px 12px;
    font-size: 0.78rem;
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
}

/* Stat labels (e.g. "Replies") never break mid-word */
.bd-zone--sidebar .forum-topic-card span {
    overflow-wrap: normal !important;
    word-break: keep-all;
}

/* Members section: remove its big inline paddings/margins */
.bd-zone--sidebar .members-showcase {
    padding: 30px 16px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* -----------------------------------------------
   SHOP inside sidebar
   ----------------------------------------------- */

/* Grid / horizontal-scroll layouts:
   ⤷ in the sidebar the product strip becomes a compact
     HORIZONTAL swipe row instead of a tall vertical stack */
.bd-zone--sidebar .products-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 14px !important;
    padding-bottom: 8px;
    scrollbar-width: thin;
}
.bd-zone--sidebar .products-grid > .shop-product-card {
    flex: 0 0 210px;
    scroll-snap-align: start;
}

/* Native horizontal-scroll layout: narrower cards in the sidebar */
.bd-zone--sidebar .shop-horizontal-scroll > div > div {
    flex-basis: 210px !important;
}

/* Single-big product layout: stack image on top, info below,
   and shrink everything */
.bd-zone--sidebar .shop-single-big {
    flex-direction: column;
    flex-wrap: nowrap !important;   /* inline style says wrap — breaks column stretch */
    max-width: 100% !important;
    border-radius: 16px !important;
}
.bd-zone--sidebar .shop-single-big > div {
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
}
/* image block */
.bd-zone--sidebar .shop-single-big > div:first-child {
    height: 190px !important;
}
/* info block */
.bd-zone--sidebar .shop-single-big > div:last-child {
    padding: 20px 18px !important;
}
.bd-zone--sidebar .shop-single-big h3 {
    font-size: 1.1rem !important;
    margin-bottom: 8px !important;
}
.bd-zone--sidebar .shop-single-big p {
    font-size: 0.8rem !important;
    line-height: 1.55 !important;
    margin-bottom: 12px !important;
}
/* Button + dot indicators: stack vertically so the button
   gets the full sidebar width and never clips */
.bd-zone--sidebar .shop-single-big .btn-gradient {
    flex: 1 1 100% !important;
    white-space: nowrap;
}
.bd-zone--sidebar .shop-single-big .bd-shop-dots {
    flex: 1 1 100% !important;
    justify-content: center;
    margin-top: 4px;
}

/* -----------------------------------------------
   TEAM / PORTFOLIO / RESOURCES fine-tuning in sidebar
   ----------------------------------------------- */
.bd-zone--sidebar .team-card { padding-bottom: 18px; }
.bd-zone--sidebar .team-avatar { width: 74px; height: 74px; }
.bd-zone--sidebar .team-name { font-size: 0.95rem; }
.bd-zone--sidebar .team-bio { font-size: 0.78rem; }

.bd-zone--sidebar .project-card-img-wrapper { height: 150px; }
.bd-zone--sidebar .bd-filter-btn { font-size: 0.72rem; padding: 6px 12px; }

.bd-zone--sidebar .doc-title { font-size: 0.95rem; }
.bd-zone--sidebar .doc-desc { font-size: 0.78rem; }

/* Member mini-cards */
.bd-zone--sidebar .member-card { padding: 14px 8px !important; }

/* Decorative Balochi background pattern stays visible in sidebars,
   exactly like the one-column presentation of each section. */

/* ===============================================
   RESPONSIVE
   The admin's chosen layout (1 / 2 / 3 columns) is
   PRESERVED at every screen width — the fr-based
   columns simply scale proportionally, no pixel
   breakpoints deciding the layout.

   Only on very narrow phone screens (<640px), where
   a 3-column split would leave each column unreadably
   thin, do the sidebars stack below the main content.
   =============================================== */
@media (max-width: 640px) {
    .bd-layout,
    .bd-layout--left,
    .bd-layout--right,
    .bd-layout--both {
        grid-template-columns: 1fr;
        padding: 0 14px;
        gap: 20px;
    }

    .bd-zone--sidebar {
        position: static;
        order: 2;
    }
    .bd-zone--main { order: 1; }

    /* Restore normal horizontal padding for stacked sections */
    .bd-zone--main .section,
    .bd-zone--main .section-full {
        padding-left: 16px;
        padding-right: 16px;
    }
}


/* ============================================
   TOPICS SECTION (v1.4.0)
   ============================================ */
.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 22px;
    position: relative;
    z-index: 1;
}

.topic-card {
    display: block;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    transition: transform .3s, box-shadow .3s;
}
.topic-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

.topic-card-media {
    position: relative;
    height: 120px;
    background: var(--bg-alt);
    display: flex;
    align-items: center;
    justify-content: center;
}
.topic-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.topic-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.35));
    pointer-events: none;
}
.topic-card-icon {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    background: var(--gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.topic-card-body {
    padding: 16px 18px 18px;
    text-align: center;
}
.topic-card-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.topic-card-count {
    font-size: .78rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Topics inside a sidebar: two mini-columns */
.bd-zone--sidebar .topics-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}
.bd-zone--sidebar .topic-card-media { height: 70px; }
.bd-zone--sidebar .topic-card-icon { width: 40px; height: 40px; border-radius: 10px; }
.bd-zone--sidebar .topic-card-icon svg { width: 20px; height: 20px; }
.bd-zone--sidebar .topic-card-body { padding: 10px 8px 12px; }
.bd-zone--sidebar .topic-card-name { font-size: .85rem; }

/* ============================================
   TAGS SECTION (v1.4.0)
   ============================================ */
.tags-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    text-decoration: none;
    color: var(--text);
    font-size: .88rem;
    font-weight: 600;
    transition: transform .25s, border-color .25s, box-shadow .25s;
}
.tag-pill svg { color: var(--color-primary); flex-shrink: 0; }
.tag-pill:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.tag-pill-count {
    background: var(--bg-alt);
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

/* Tags inside a sidebar: smaller pills, left aligned flow */
.bd-zone--sidebar .tags-cloud { gap: 8px; }
.bd-zone--sidebar .tag-pill { padding: 6px 12px; font-size: .78rem; }

/* ============================================
   ARCHIVE SECTION (v1.4.0)
   ============================================ */
.archive-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 18px;
    margin-bottom: 36px;
    position: relative;
    z-index: 1;
}

.archive-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 22px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: transform .3s, box-shadow .3s;
}
.archive-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0,0,0,.08);
}
.archive-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.archive-stat-value {
    font-size: 1.6rem;
    font-weight: 900;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.1;
}
.archive-stat-label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
}

.archive-months-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
    position: relative;
    z-index: 1;
}

.archive-month-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: .92rem;
    font-weight: 600;
    transition: transform .25s, border-color .25s;
}
.archive-month-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary);
}
.archive-month-card a {
    color: var(--text);
    text-decoration: none;
    display: block;
}
.archive-month-card a:hover { color: var(--color-primary); }

/* Archive inside a sidebar */
.bd-zone--sidebar .archive-stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 20px;
}
.bd-zone--sidebar .archive-stat-card { padding: 14px 8px; }
.bd-zone--sidebar .archive-stat-value { font-size: 1.15rem; }
.bd-zone--sidebar .archive-months-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}
.bd-zone--sidebar .archive-month-card { padding: 10px 14px; font-size: .82rem; }


/* Paged views (/page/2/ …) in "blog only" mode: the blog section is
   the FIRST element under the fixed header (no slider above), so it
   needs extra top padding to clear the 70px header comfortably. */
.site-main > #updates:first-child {
    padding-top: 130px;
}

/* ============================================
   FRONT-PAGE BLOG NUMBERED PAGINATION (v1.4.2)
   Reuses the theme's .pagination / .page-numbers
   styles; only spacing tweaks needed here.
   ============================================ */
.bd-blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 48px;
    position: relative;
    z-index: 1;
}

/* Hide the Newer/Older word on tiny screens, keep the arrow */
@media (max-width: 480px) {
    .bd-blog-pagination .bd-page-label { display: none; }
}

/* Compact pagination when the blog lives in the main column
   next to a sidebar */
.bd-zone--main .bd-blog-pagination { margin-top: 36px; }
.bd-zone--main .bd-blog-pagination .page-numbers { padding: 8px 13px; font-size: .84rem; }


/* ============================================
   PAGE TEMPLATE EXTRAS (v1.4.3)
   ============================================ */
/* When the Hero Slider renders above the page hero, the page hero
   no longer needs the fixed-header offset. */
.single-post-hero.page-hero--after-slider {
    margin-top: 0;
}


/* ============================================
   FOOTER WIDGET AREAS (v1.6.2)
   Rendered when widgets are added in
   Appearance → Widgets → Footer Column 1–3
   ============================================ */
.footer-widgets {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 40px;
}
.footer-widget-col .widget { margin-bottom: 20px; }
.footer-widget-col .widget h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 14px;
}
.footer-widget-col .widget ul { list-style: none; margin: 0; padding: 0; }
.footer-widget-col .widget ul li { margin-bottom: 8px; }