/*
Theme Name: SD Automation
Theme URI: https://sdautomation.vn
Author: SD Automation Team
Author URI: https://sdautomation.vn
Description: Modern Classic WordPress Theme for SD Automation Marketing Platform. Features a clean, professional design with mega menu, testimonials, product showcases, and blog layouts optimized for marketing automation businesses.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sd-automation
Tags: custom-menu, featured-images, footer-widgets, full-width-template, custom-logo, blog, one-column, two-columns, right-sidebar, translation-ready
*/

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Colors */
    --color-primary: #003366;
    --color-primary-dark: #002244;
    --color-primary-light: #004488;
    --color-accent: #ff6600;
    --color-accent-dark: #e55a00;
    --color-accent-light: #ff7a1a;
    --color-navy-dark: #0a192f;
    --color-soft-blue: #f0f7ff;
    --color-soft-grey: #f8fafc;

    /* Text Colors */
    --color-text: #1e293b;
    --color-text-muted: #64748b;
    --color-text-light: #94a3b8;
    --color-text-inverse: #ffffff;

    /* Background Colors */
    --color-bg-white: #ffffff;
    --color-bg-grey: #f8fafc;
    --color-bg-dark: #0a192f;

    /* Border Colors */
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;

    /* Status Colors */
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --color-info: #3b82f6;

    /* Typography */
    --font-family-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Font Sizes */
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.875rem;
    /* 14px */
    --font-size-base: 1rem;
    /* 16px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --font-size-2xl: 1.5rem;
    /* 24px */
    --font-size-3xl: 1.875rem;
    /* 30px */
    --font-size-4xl: 2.25rem;
    /* 36px */
    --font-size-5xl: 3rem;
    /* 48px */
    --font-size-6xl: 3.75rem;
    /* 60px */

    /* Line Heights */
    --line-height-tight: 1.1;
    --line-height-snug: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

    /* Spacing */
    --spacing-0: 0;
    --spacing-1: 0.25rem;
    /* 4px */
    --spacing-2: 0.5rem;
    /* 8px */
    --spacing-3: 0.75rem;
    /* 12px */
    --spacing-4: 1rem;
    /* 16px */
    --spacing-5: 1.25rem;
    /* 20px */
    --spacing-6: 1.5rem;
    /* 24px */
    --spacing-8: 2rem;
    /* 32px */
    --spacing-10: 2.5rem;
    /* 40px */
    --spacing-12: 3rem;
    /* 48px */
    --spacing-16: 4rem;
    /* 64px */
    --spacing-20: 5rem;
    /* 80px */
    --spacing-24: 6rem;
    /* 96px */
    --spacing-28: 7rem;
    /* 112px */
    --spacing-32: 8rem;
    /* 128px */

    /* Border Radius */
    --radius-sm: 0.25rem;
    /* 4px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px - modern */
    --radius-2xl: 1.5rem;
    /* 24px */
    --radius-3xl: 2rem;
    /* 32px - mega */
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-primary: 0 10px 40px -10px rgba(0, 51, 102, 0.2);
    --shadow-accent: 0 10px 40px -10px rgba(255, 102, 0, 0.3);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    /* Z-Index */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;

    /* Layout */
    --container-max: 1280px;
    --container-padding: 3rem;
    /* 48px */
    --container-padding-mobile: 1.5rem;
    /* 24px */
    --content-max: 960px;
    --sidebar-width: 320px;
}

/* ==========================================================================
   CSS Reset & Base Styles
   ========================================================================== */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-bg-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Links */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent);
}

/* Button hover colors - prevent general link hover from affecting buttons */
a.modern-button.btn-primary:hover,
a.modern-button.btn-accent:hover,
a.bg-accent:hover,
a.bg-primary:hover,
a.text-white:hover {
    color: var(--color-text-inverse);
}

a.modern-button.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

a.modern-button.btn-soft:hover {
    color: var(--color-text-inverse);
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Lists */
ul,
ol {
    list-style: none;
}

/* Buttons */
button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* Inputs */
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-weight-extrabold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
}

h1 {
    font-size: var(--font-size-5xl);
}

h2 {
    font-size: var(--font-size-4xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-base);
}

p {
    margin-bottom: var(--spacing-4);
}

/* ==========================================================================
   Layout Components
   ========================================================================== */

/* Container */
.content-container {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

@media (max-width: 768px) {
    .content-container {
        padding-left: var(--container-padding-mobile);
        padding-right: var(--container-padding-mobile);
    }
}

/* Section Padding */
.section-padding {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
}

.section-padding-sm {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-6);
}

/* Grid */
.grid {
    display: grid;
    gap: var(--spacing-8);
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {

    .grid-cols-4,
    .grid-cols-3,
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* Flexbox */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: var(--spacing-2);
}

.gap-3 {
    gap: var(--spacing-3);
}

.gap-4 {
    gap: var(--spacing-4);
}

.gap-6 {
    gap: var(--spacing-6);
}

.gap-8 {
    gap: var(--spacing-8);
}

/* ==========================================================================
   UI Components
   ========================================================================== */

/* Modern Card */
.modern-card {
    background-color: var(--color-bg-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
}

.modern-card:hover {
    box-shadow: var(--shadow-2xl);
    border-color: rgba(0, 51, 102, 0.1);
}

/* Modern Button */
.modern-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-xl);
    transition: all var(--transition-normal);
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.modern-button:active {
    transform: scale(0.95);
}

/* Button Variants */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
    background-color: var(--color-navy-dark);
    color: var(--color-text-inverse);
}

.btn-accent {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-accent);
}

.btn-accent:hover {
    background-color: var(--color-accent-dark);
    color: var(--color-text-inverse);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-text);
    border: 2px solid var(--color-border);
}

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

.btn-soft {
    background-color: var(--color-soft-blue);
    color: var(--color-primary);
    border: 1px solid rgba(0, 51, 102, 0.1);
}

.btn-soft:hover {
    background-color: #e0efff;
}

/* Button Sizes */
.btn-sm {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-xs);
}

.btn-lg {
    padding: var(--spacing-4) var(--spacing-10);
    font-size: var(--font-size-lg);
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
}

.badge-primary {
    background-color: var(--color-soft-blue);
    color: var(--color-primary);
}

.badge-accent {
    background-color: #fff4ed;
    color: var(--color-accent);
}

.badge-success {
    background-color: #dcfce7;
    color: var(--color-success);
}

.badge-danger {
    background-color: #fee2e2;
    color: var(--color-error);
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

.form-input {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    transition: all var(--transition-fast);
    background-color: var(--color-bg-white);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

.form-input::placeholder {
    color: var(--color-text-light);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.form-select {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-bg-white);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%2364748b' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Text */
.text-primary {
    color: var(--color-primary);
}

.text-accent {
    color: var(--color-accent);
}

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

.text-light {
    color: var(--color-text-light);
}

.text-white {
    color: var(--color-text-inverse);
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-xs {
    font-size: var(--font-size-xs);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-base {
    font-size: var(--font-size-base);
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.text-2xl {
    font-size: var(--font-size-2xl);
}

.text-3xl {
    font-size: var(--font-size-3xl);
}

.text-4xl {
    font-size: var(--font-size-4xl);
}

.text-5xl {
    font-size: var(--font-size-5xl);
}

.font-normal {
    font-weight: var(--font-weight-normal);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

.font-extrabold {
    font-weight: var(--font-weight-extrabold);
}

.uppercase {
    text-transform: uppercase;
}

.italic {
    font-style: italic;
}

.tracking-wide {
    letter-spacing: 0.025em;
}

.tracking-wider {
    letter-spacing: 0.05em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.leading-tight {
    line-height: var(--line-height-tight);
}

.leading-snug {
    line-height: var(--line-height-snug);
}

.leading-relaxed {
    line-height: var(--line-height-relaxed);
}

/* Background */
.bg-white {
    background-color: var(--color-bg-white);
}

.bg-grey {
    background-color: var(--color-soft-grey);
}

.bg-soft-blue {
    background-color: var(--color-soft-blue);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-navy-dark {
    background-color: var(--color-navy-dark);
}

.bg-accent {
    background-color: var(--color-accent);
}

/* Spacing */
.mt-0 {
    margin-top: 0;
}

.mt-2 {
    margin-top: var(--spacing-2);
}

.mt-4 {
    margin-top: var(--spacing-4);
}

.mt-6 {
    margin-top: var(--spacing-6);
}

.mt-8 {
    margin-top: var(--spacing-8);
}

.mt-10 {
    margin-top: var(--spacing-10);
}

.mt-12 {
    margin-top: var(--spacing-12);
}

.mt-16 {
    margin-top: var(--spacing-16);
}

.mt-20 {
    margin-top: var(--spacing-20);
}

.mb-0 {
    margin-bottom: 0;
}

.mb-2 {
    margin-bottom: var(--spacing-2);
}

.mb-4 {
    margin-bottom: var(--spacing-4);
}

.mb-6 {
    margin-bottom: var(--spacing-6);
}

.mb-8 {
    margin-bottom: var(--spacing-8);
}

.mb-10 {
    margin-bottom: var(--spacing-10);
}

.mb-12 {
    margin-bottom: var(--spacing-12);
}

.mb-16 {
    margin-bottom: var(--spacing-16);
}

.mb-20 {
    margin-bottom: var(--spacing-20);
}

.pt-0 {
    padding-top: 0;
}

.pt-4 {
    padding-top: var(--spacing-4);
}

.pt-8 {
    padding-top: var(--spacing-8);
}

.pt-12 {
    padding-top: var(--spacing-12);
}

.pt-16 {
    padding-top: var(--spacing-16);
}

.pt-20 {
    padding-top: var(--spacing-20);
}

.pb-0 {
    padding-bottom: 0;
}

.pb-4 {
    padding-bottom: var(--spacing-4);
}

.pb-8 {
    padding-bottom: var(--spacing-8);
}

.pb-12 {
    padding-bottom: var(--spacing-12);
}

.pb-16 {
    padding-bottom: var(--spacing-16);
}

.pb-20 {
    padding-bottom: var(--spacing-20);
}

.p-4 {
    padding: var(--spacing-4);
}

.p-6 {
    padding: var(--spacing-6);
}

.p-8 {
    padding: var(--spacing-8);
}

.p-10 {
    padding: var(--spacing-10);
}

.p-12 {
    padding: var(--spacing-12);
}

/* Border Radius */
.rounded {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-2xl {
    border-radius: var(--radius-2xl);
}

.rounded-3xl {
    border-radius: var(--radius-3xl);
}

.rounded-full {
    border-radius: var(--radius-full);
}

/* Display */
.hidden {
    display: none;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline-flex {
    display: inline-flex;
}

/* Position */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

/* Overflow */
.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

/* Width */
.w-full {
    width: 100%;
}

.max-w-full {
    max-width: 100%;
}

/* Visibility */
@media (max-width: 768px) {
    .md\:hidden {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .md\:flex {
        display: flex;
    }

    .md\:block {
        display: block;
    }
}

/* ==========================================================================
   Material Symbols Icons
   ========================================================================== */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.icon-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes ping {

    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.animate-fadeIn {
    animation: fadeIn 0.5s ease forwards;
}

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

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Hover Animations */
.hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
    box-shadow: var(--shadow-2xl);
}

.hover-zoom {
    overflow: hidden;
}

.hover-zoom img {
    transition: transform var(--transition-slow);
}

.hover-zoom:hover img {
    transform: scale(1.1);
}

/* ==========================================================================
   Screen Reader Only
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Essential Inline Styles (Fallback)
   ========================================================================== */

/* Hero Section */
.hero-section {
    position: relative;
    background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 50%, #f0f7ff 100%);
    min-height: 600px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-title {
    font-size: var(--font-size-5xl);
    font-weight: 800;
    line-height: 1.1;
    color: #1e293b;
    margin-bottom: 2rem;
}

.text-gradient {
    background: linear-gradient(135deg, #003366 0%, #ff6600 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: var(--font-size-lg);
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.hero-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: #003366;
    display: block;
}

.stat-label {
    font-size: var(--font-size-sm);
    color: #64748b;
}

.stat-divider {
    width: 1px;
    height: 3rem;
    background: #e2e8f0;
}

/* Floating Cards */
.floating-card {
    position: absolute;
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Grid Column Spans */
.col-span-3 {
    grid-column: span 3;
}

.col-span-8 {
    grid-column: span 8;
}

.col-span-9 {
    grid-column: span 9;
}

/* Background Success */
.bg-success {
    background-color: #22c55e;
}

/* Background Border */
.bg-border {
    background-color: #e2e8f0;
}

/* Gradient Background */
.bg-gradient-primary {
    background: linear-gradient(135deg, #003366 0%, #0a192f 100%);
}

/* Rounded utilities */
.rounded-full {
    border-radius: 9999px;
}

.rounded-xl {
    border-radius: 1rem;
}

.rounded-2xl {
    border-radius: 1.5rem;
}

.rounded-3xl {
    border-radius: 2rem;
}

/* Size utilities */
.w-2 {
    width: 0.5rem;
}

.h-2 {
    height: 0.5rem;
}

.w-12 {
    width: 3rem;
}

.h-12 {
    height: 3rem;
}

.w-px {
    width: 1px;
}

.max-w-lg {
    max-width: 32rem;
}

.max-w-2xl {
    max-width: 42rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Overflow */
.overflow-hidden {
    overflow: hidden;
}

/* Position */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

/* Shadow utilities */
.shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Display utilities */
.block {
    display: block;
}

.inline-flex {
    display: inline-flex;
}

.space-y-4>*+* {
    margin-top: 1rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-image {
        display: none;
    }

    .col-span-9,
    .col-span-8 {
        grid-column: span 12;
    }

    .col-span-3 {
        grid-column: span 12;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .stat-divider {
        display: none;
    }

    /* Hide on mobile */
    .md\\:hidden {
        display: none !important;
    }

    .md\\:flex {
        display: flex;
    }
}

@media (min-width: 769px) {
    .md\\:hidden {
        display: block;
    }

    .md\\:flex {
        display: flex;
    }
}

/* Border bottom */
.border-b {
    border-bottom: 1px solid #e2e8f0;
}

/* Self start */
.self-start {
    align-self: flex-start;
}

/* Flex end */
.items-end {
    align-items: flex-end;
}

/* Transition */
.transition {
    transition: all 0.3s ease;
}

/* ==========================================================================
   Disable Hover Animations
   ========================================================================== */

/* Disable all hover transforms and transitions for cards */
.modern-card,
.modern-card:hover,
.modern-card:focus,
.modern-card:active {
    transform: none !important;
    transition: none !important;
}

/* Disable image zoom on hover */
.modern-card img,
.modern-card:hover img {
    transform: none !important;
    transition: none !important;
}

/* Disable button hover effects */
.modern-button,
.modern-button:hover,
.modern-button:focus,
.modern-button:active {
    transform: none !important;
    transition: none !important;
}

/* Disable group hover effects */
[class*="group-hover"] {
    transform: none !important;
    transition: none !important;
}

/* Disable all translate and scale transforms on hover */
*:hover {
    --tw-translate-x: 0 !important;
    --tw-translate-y: 0 !important;
    --tw-scale-x: 1 !important;
    --tw-scale-y: 1 !important;
}

/* ==========================================================================
   Feature Cards (Product Tabs)
   ========================================================================== */

.feature-card {
    background-color: var(--color-bg-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
}

.feature-card .icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--color-soft-blue);
    border-radius: var(--radius-lg);
}

.feature-card .icon-wrapper .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-primary);
}

.feature-card .feature-card-title {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
}

.feature-card .feature-card-desc {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

/* Features Grid Responsive */
@media (max-width: 1024px) {
    .features-grid.grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .features-grid.grid-cols-3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Material Icons Filled (moved from inline styles)
   ========================================================================== */

.material-symbols-filled,
.star-filled {
    font-variation-settings: 'FILL' 1;
}

/* Quote icon large */
.quote-icon-large {
    font-size: 120px;
    font-variation-settings: 'FILL' 1;
}

/* Card Image Placeholders */
.card-image-placeholder {
    height: 280px;
}

.card-featured .card-image-placeholder {
    min-height: 300px;
    height: 100%;
}

/* Map Wrapper */
.map-wrapper {
    height: 400px;
    background: var(--color-soft-grey);
}

/* ==========================================================================
   Document Page Styles
   ========================================================================== */

/* Document Page Layout */
.document-page {
    padding: var(--spacing-16) 0 var(--spacing-20);
}

.document-layout {
    display: flex;
    gap: var(--spacing-12);
}

/* Document Sidebar */
.document-sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 112px;
    height: calc(100vh - 140px);
    overflow-y: auto;
    padding-top: var(--spacing-4);
    padding-right: var(--spacing-4);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.document-sidebar::-webkit-scrollbar {
    width: 4px;
}

.document-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.document-sidebar::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: var(--radius-full);
}

/* Sidebar Search */
.sidebar-search {
    padding: 0 var(--spacing-4);
    margin-bottom: var(--spacing-6);
    position: relative;
}

.sidebar-search .search-icon {
    position: absolute;
    left: calc(var(--spacing-4) + 12px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-light);
    font-size: 18px;
    pointer-events: none;
    z-index: 1;
}

.sidebar-search-input {
    width: 100% !important;
    padding: var(--spacing-3) var(--spacing-4) !important;
    padding-left: 44px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-full) !important;
    background-color: var(--color-soft-grey) !important;
    font-size: var(--font-size-sm) !important;
    transition: all var(--transition-fast) !important;
}

.sidebar-search-input::placeholder {
    color: var(--color-text-light) !important;
    opacity: 0.8 !important;
}

.sidebar-search-input:focus {
    outline: none !important;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
}

/* Sidebar Group Title */
.sidebar-group-title {
    padding: 0 var(--spacing-4);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-2);
}

.sidebar-group-title:first-child,
.sidebar-search+.sidebar-group-title {
    margin-top: 0;
}

/* Sidebar Item */
.sidebar-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-lg);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
    text-decoration: none;
    background: none;
}

.sidebar-item:hover {
    color: var(--color-primary);
}

.sidebar-item.active {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.sidebar-item.active:hover {
    color: var(--color-primary);
}

.sidebar-item .material-symbols-outlined {
    font-size: 18px;
}

/* Sidebar Support Box */
.sidebar-support-box {
    margin-top: var(--spacing-8);
    padding: var(--spacing-6);
    background-color: var(--color-soft-grey);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
}

.sidebar-support-box .support-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-3);
}

.sidebar-support-box .support-button {
    display: block;
    width: 100%;
    padding: var(--spacing-2) var(--spacing-4);
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-align: center;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-accent);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.sidebar-support-box .support-button:hover {
    background-color: var(--color-accent-dark);
    color: var(--color-text-inverse);
}

/* Document Content Area */
.document-content {
    flex: 1;
    min-width: 0;
    padding-bottom: var(--spacing-20);
}

/* Document Breadcrumb */
.document-breadcrumb {
    margin-bottom: var(--spacing-10);
}

.document-breadcrumb ol {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
}

.document-breadcrumb li {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.document-breadcrumb a {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.document-breadcrumb a:hover {
    color: var(--color-primary);
}

.document-breadcrumb li.current {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.document-breadcrumb .material-symbols-outlined {
    font-size: 14px;
}

/* Document Content Article */
.doc-content h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text);
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-2);
    line-height: var(--line-height-snug);
    scroll-margin-top: var(--spacing-24);
}

.doc-content h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-2);
    line-height: var(--line-height-snug);
}

.doc-content h4 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-1);
    line-height: var(--line-height-snug);
}

.doc-content h5,
.doc-content h6 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-top: var(--spacing-4);
    margin-bottom: var(--spacing-1);
    line-height: var(--line-height-snug);
}

.doc-content p {
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-3);
}

/* Document Header */
.doc-header {
    margin-bottom: var(--spacing-6);
}

.doc-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-4);
    background-color: var(--color-soft-blue);
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-3);
}

.doc-meta-badge .material-symbols-outlined {
    font-size: 14px;
}

.doc-title {
    font-size: var(--font-size-5xl);
    font-weight: 900;
    color: var(--color-text);
    line-height: var(--line-height-tight);
}

.doc-intro {
    font-size: var(--font-size-lg);
    color: var(--color-text);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-6);
}

/* Document Featured Image */
.doc-featured-image {
    margin: var(--spacing-10) 0;
    background-color: var(--color-soft-grey);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.doc-featured-image .image-wrapper {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.doc-featured-image .doc-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.doc-featured-image .image-caption {
    padding: var(--spacing-4);
    text-align: center;
    font-size: var(--font-size-sm);
    font-style: italic;
    color: var(--color-text-muted);
    background-color: var(--color-bg-white);
    border-top: 1px solid var(--color-border-light);
}

/* Document Body Content */
.doc-body {
    margin-top: var(--spacing-4);
}

.doc-body ul,
.doc-body ol {
    margin-bottom: var(--spacing-4);
    padding-left: var(--spacing-6);
}

.doc-body ul {
    list-style: disc;
}

.doc-body ol {
    list-style: decimal;
}

.doc-body li {
    margin-bottom: var(--spacing-2);
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

.doc-content li {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

/* Instruction Steps */
.instruction-step {
    display: flex;
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-12);
    position: relative;
}

.instruction-step:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 48px;
    width: 2px;
    height: calc(100% + var(--spacing-6));
    background-color: var(--color-border-light);
}

.step-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-primary);
    z-index: 1;
}

.step-content {
    flex: 1;
}

/* Tip Box */
.tip-box {
    display: flex;
    gap: var(--spacing-4);
    align-items: flex-start;
    padding: var(--spacing-6);
    background-color: #fff7ed;
    border-left: 4px solid var(--color-accent);
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    margin: var(--spacing-8) 0;
}

.tip-box .tip-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: var(--color-accent);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-accent);
}

.tip-box h5 {
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-1);
}

.tip-box p {
    color: var(--color-text);
    font-size: var(--font-size-base);
    margin: 0;
}

/* Feature List Grid */
.feature-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-10);
}

.feature-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background-color: var(--color-soft-grey);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
}

.feature-list-item .material-symbols-outlined {
    color: var(--color-primary);
}

.feature-list-item span:not(.material-symbols-outlined) {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

/* Code Block */
.doc-code-block {
    background-color: var(--color-navy-dark);
    border-radius: var(--radius-xl);
    padding: var(--spacing-6);
    margin-bottom: var(--spacing-16);
    overflow-x: auto;
}

.code-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-4);
}

.code-dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
}

.code-dot.red {
    background-color: #ef4444;
}

.code-dot.yellow {
    background-color: #f59e0b;
}

.code-dot.green {
    background-color: #22c55e;
}

.code-filename {
    margin-left: var(--spacing-4);
    font-size: var(--font-size-xs);
    font-family: monospace;
    color: var(--color-text-light);
}

.doc-code-block pre {
    color: #93c5fd;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Document Navigation */
.doc-navigation {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-top: var(--spacing-8);
    border-top: 1px solid var(--color-border-light);
}

.doc-nav-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-6);
    background-color: var(--color-soft-grey);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: all var(--transition-fast);
    max-width: 45%;
}

.doc-nav-link:hover {
    background-color: var(--color-soft-blue);
    border-color: var(--color-primary);
}

.doc-nav-link .material-symbols-outlined {
    color: var(--color-primary);
    font-size: 24px;
}

.doc-nav-link .nav-text {
    display: flex;
    flex-direction: column;
}

.doc-nav-link .nav-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    font-weight: var(--font-weight-medium);
}

.doc-nav-link .nav-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.doc-nav-next {
    margin-left: auto;
    text-align: right;
}

/* Document Support Section */
.document-support-section {
    margin-top: var(--spacing-20);
    padding: var(--spacing-8) var(--spacing-12);
    background-color: var(--color-soft-blue);
    border-radius: 32px;
}

.document-support-section .support-content {
    text-align: center;
    margin-bottom: var(--spacing-10);
}

.document-support-section .support-heading {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    color: var(--color-text);
    margin-bottom: var(--spacing-4);
}

.document-support-section .support-text {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
}

.support-form {
    max-width: 640px;
    margin: 0 auto;
}

.support-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-4);
}

.support-form .form-group {
    margin-bottom: var(--spacing-4);
}

.support-form .form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-2);
    margin-left: var(--spacing-1);
}

.support-form .contact-input {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: var(--color-bg-white);
    font-size: var(--font-size-base);
    color: var(--color-text);
    transition: all var(--transition-fast);
}

.support-form .contact-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.1);
}

.support-form .contact-textarea {
    resize: none;
}

.support-submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    margin-top: var(--spacing-4);
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    border: none;
    border-radius: var(--radius-xl);
    cursor: pointer;
    box-shadow: var(--shadow-xl), var(--shadow-primary);
    transition: all var(--transition-normal);
}

.support-submit-btn:hover {
    background-color: var(--color-navy-dark);
}

.support-submit-btn:active {
    transform: scale(0.98);
}

/* Document Grid (Archive) */
.document-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-6);
    margin-top: var(--spacing-8);
}

.document-card {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-6);
    background-color: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: all var(--transition-normal);
}

.document-card:hover {
    box-shadow: var(--shadow-xl);
    border-color: rgba(0, 51, 102, 0.1);
    transform: translateY(-2px);
}

.document-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-soft-blue);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-4);
}

.document-card-icon .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-primary);
}

.document-card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-2);
}

.document-card-excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* Document Page Responsive */
@media (max-width: 1024px) {
    .document-layout {
        flex-direction: column;
    }

    .document-sidebar {
        width: 100%;
        position: static;
        height: auto;
        max-height: 400px;
        padding-right: 0;
        margin-bottom: var(--spacing-8);
        padding-bottom: var(--spacing-4);
        border-bottom: 1px solid var(--color-border-light);
    }

    .doc-title {
        font-size: var(--font-size-4xl);
    }

    .document-grid {
        grid-template-columns: 1fr;
    }

    .doc-navigation {
        flex-direction: column;
    }

    .doc-nav-link {
        max-width: 100%;
    }

    .doc-nav-next {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .document-page {
        padding: var(--spacing-6) 0 var(--spacing-12);
    }

    .doc-title {
        font-size: var(--font-size-3xl);
    }

    .document-support-section {
        padding: var(--spacing-6);
        border-radius: var(--radius-2xl);
    }

    .support-form .form-row {
        grid-template-columns: 1fr;
    }

    .feature-list-grid {
        grid-template-columns: 1fr;
    }

    .instruction-step {
        flex-direction: column;
        gap: var(--spacing-4);
    }

    .instruction-step:not(:last-child)::before {
        display: none;
    }
}

/* ==========================================================================
   Single Post Page Styles (Document-style)
   ========================================================================== */

/* Sidebar Wrapper - layout container only (no sticky) */
.sidebar-wrapper {
    width: 280px;
    flex-shrink: 0;
}

/* Post-specific sidebar adjustments */
.post-document-sidebar {
    position: sticky;
    top: 100px;
    height: auto;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding-bottom: var(--spacing-4);
    padding-right: var(--spacing-2);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

/* Author Row - contains author info + star rating */
.doc-author-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-top: var(--spacing-4);
}

/* Author Info */
.doc-author-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

/* Star Rating inline */
.doc-star-rating {
    display: flex;
    align-items: center;
}

.doc-star-rating .kk-star-ratings {
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide auto-injected star rating in content area (already placed in author row) */
.doc-body>.kk-star-ratings,
.doc-content>.kk-star-ratings,
.entry-content>.kk-star-ratings {
    display: none !important;
}

.doc-author-info .author-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-border-light);
}

.doc-author-info .author-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.doc-author-info .author-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.doc-author-info .reading-time {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.doc-author-info .reading-time .material-symbols-outlined {
    font-size: 14px;
}

/* Sidebar Hotline */
.sidebar-support-box .support-hotline {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-3);
}

.sidebar-support-box .support-hotline .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-accent);
}

/* Post Tags */
.doc-tags {
    margin-top: var(--spacing-10);
    padding-top: var(--spacing-6);
    border-top: 1px solid var(--color-border-light);
}

.doc-tags .tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
}

.doc-tags .tag-list a {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    background-color: var(--color-soft-grey);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.doc-tags .tag-list a:hover {
    background-color: var(--color-soft-blue);
    color: var(--color-primary);
}

/* Single Post Page specific - no longer needed since wrapper handles layout */

/* Responsive for Single Post */
@media (max-width: 1024px) {
    .sidebar-wrapper {
        width: 100%;
        margin-bottom: var(--spacing-8);
    }

    .post-document-sidebar {
        position: static;
        max-height: 350px;
        padding-bottom: var(--spacing-4);
        border-bottom: 1px solid var(--color-border-light);
    }

    .doc-author-info {
        margin-top: var(--spacing-4);
    }
}

/* ==========================================================================
   Navigation Menu Styles
   ========================================================================== */

/* Base nav link styles */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.nav-link:hover {
    color: var(--color-primary);
}

/* Primary nav link (top level) */
.nav-link-primary {
    color: var(--color-text-muted);
}

.nav-link-primary:hover {
    color: var(--color-primary);
}

/* Sub menu link */
.nav-link-sub {
    color: var(--color-text-muted);
    padding: 6px 14px;
    display: block;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    border-radius: 6px;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.nav-link-sub:hover {
    color: var(--color-primary);
    background-color: var(--color-soft-blue);
}

/* Menu item with children */
.menu-item-has-children {
    position: relative;
}

.menu-item-has-children>.nav-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}

/* Dropdown arrow */
.dropdown-arrow {
    font-size: var(--font-size-base);
    transition: transform var(--transition-fast);
}

.menu-item-has-children:hover .dropdown-arrow {
    transform: rotate(180deg);
}

/* Sub menu / Mega menu dropdown */
.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background-color: var(--color-bg-white);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--color-border-light);
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all var(--transition-fast);
    z-index: var(--z-dropdown);
    list-style: none;
}

.menu-item-has-children:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-menu li {
    margin: 0;
}

.sub-menu .nav-link-sub {
    white-space: nowrap;
    font-size: var(--font-size-sm);
    padding: 6px 12px;
}

/* Primary menu list */
#primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

#primary-menu>li {
    position: relative;
}

/* Desktop navigation visibility */
.site-nav-desktop {
    display: flex;
}

@media (max-width: 768px) {
    .site-nav-desktop {
        display: none;
    }
}

/* ==========================================================================
   Download Box Shortcode
   ========================================================================== */

.sd-download-box {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-5) var(--spacing-6);
    background: linear-gradient(135deg, #f97316, #f56040);
    border-radius: var(--radius-2xl);
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.25);
    border: none;
    margin: var(--spacing-6) 0;
    transition: all var(--transition-fast);
}

.sd-download-box:hover {
    box-shadow: 0 6px 24px rgba(249, 115, 22, 0.35);
    transform: translateY(-1px);
}

.download-box-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
}

.download-box-icon-symbol {
    font-size: 28px;
    color: #fff;
}

.download-box-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.download-box-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.download-box-name {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: #fff;
    line-height: var(--line-height-snug);
}

.download-box-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.85);
}

.download-box-meta .material-symbols-outlined {
    font-size: 16px;
}

.download-box-btn,
.entry-content .download-box-btn,
.prose .download-box-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    background-color: #1e293b;
    border-radius: var(--radius-xl);
    color: #fff !important;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-decoration: none !important;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.download-box-btn:hover,
.entry-content .download-box-btn:hover,
.prose .download-box-btn:hover {
    background-color: #0f172a;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.4);
}

.download-box-btn .material-symbols-outlined {
    font-size: 20px;
}

@media (max-width: 640px) {
    .sd-download-box {
        padding: var(--spacing-4);
        gap: var(--spacing-3);
    }

    .download-box-icon {
        width: 48px;
        height: 48px;
    }

    .download-box-icon-symbol {
        font-size: 24px;
    }

    .download-box-name {
        font-size: var(--font-size-base);
    }

    .download-box-btn {
        padding: var(--spacing-2) var(--spacing-4);
        font-size: var(--font-size-xs);
    }
}

/* ==========================================================================
   Entry Content / Prose Typography (for the_content() output)
   Overrides TailwindCSS Preflight reset for content areas
   ========================================================================== */

/* Base prose styles */
.entry-content,
.prose {
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-relaxed) !important;
    color: var(--color-text);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Headings inside content */
.entry-content h1,
.prose h1 {
    font-size: var(--font-size-4xl) !important;
    font-weight: var(--font-weight-extrabold) !important;
    margin-top: var(--spacing-8) !important;
    margin-bottom: var(--spacing-3) !important;
    line-height: var(--line-height-tight) !important;
    color: var(--color-text);
}

.entry-content h2,
.prose h2 {
    font-size: var(--font-size-3xl) !important;
    font-weight: var(--font-weight-extrabold) !important;
    margin-top: var(--spacing-6) !important;
    margin-bottom: var(--spacing-4) !important;
    line-height: var(--line-height-snug) !important;
    color: var(--color-text);
    padding-bottom: var(--spacing-3) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
}

.entry-content h3,
.prose h3 {
    font-size: var(--font-size-2xl) !important;
    font-weight: var(--font-weight-bold) !important;
    margin-top: var(--spacing-5) !important;
    margin-bottom: var(--spacing-2) !important;
    line-height: var(--line-height-snug) !important;
    color: var(--color-text);
}

.entry-content h4,
.prose h4 {
    font-size: var(--font-size-xl) !important;
    font-weight: var(--font-weight-bold) !important;
    margin-top: var(--spacing-4) !important;
    margin-bottom: var(--spacing-1) !important;
    line-height: var(--line-height-snug) !important;
    color: var(--color-text);
}

.entry-content h5,
.prose h5 {
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-semibold) !important;
    margin-top: var(--spacing-4) !important;
    margin-bottom: var(--spacing-1) !important;
    color: var(--color-text);
}

.entry-content h6,
.prose h6 {
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-semibold) !important;
    margin-top: var(--spacing-4) !important;
    margin-bottom: var(--spacing-1) !important;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Remove top margin on first child */
.entry-content> :first-child,
.prose> :first-child {
    margin-top: 0 !important;
}

/* Paragraphs */
.entry-content p,
.prose p {
    margin-top: 0 !important;
    margin-bottom: var(--spacing-3) !important;
    line-height: var(--line-height-relaxed) !important;
    font-size: var(--font-size-base) !important;
}

/* Links inside content */
.entry-content a,
.prose a {
    color: var(--color-primary) !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(0, 51, 102, 0.3);
    text-underline-offset: 3px;
    transition: all var(--transition-fast);
}

.entry-content a:hover,
.prose a:hover {
    color: var(--color-accent) !important;
    text-decoration-color: var(--color-accent);
}

/* Strong & Bold */
.entry-content strong,
.entry-content b,
.prose strong,
.prose b {
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-text);
}

/* Italic & Emphasis */
.entry-content em,
.entry-content i,
.prose em,
.prose i {
    font-style: italic !important;
}

/* Unordered Lists */
.entry-content ul,
.prose ul {
    list-style-type: disc !important;
    margin-top: 0 !important;
    margin-bottom: var(--spacing-3) !important;
    padding-left: var(--spacing-6) !important;
}

.entry-content ul ul,
.prose ul ul {
    list-style-type: circle !important;
    margin-top: var(--spacing-2) !important;
    margin-bottom: var(--spacing-2) !important;
}

.entry-content ul ul ul,
.prose ul ul ul {
    list-style-type: square !important;
}

/* Ordered Lists */
.entry-content ol,
.prose ol {
    list-style-type: decimal !important;
    margin-top: 0 !important;
    margin-bottom: var(--spacing-3) !important;
    padding-left: var(--spacing-6) !important;
}

.entry-content ol ol,
.prose ol ol {
    list-style-type: lower-alpha !important;
    margin-top: var(--spacing-2) !important;
    margin-bottom: var(--spacing-2) !important;
}

.entry-content ol ol ol,
.prose ol ol ol {
    list-style-type: lower-roman !important;
}

/* List items */
.entry-content li,
.prose li {
    margin-bottom: var(--spacing-2) !important;
    line-height: var(--line-height-relaxed) !important;
    font-size: var(--font-size-base) !important;
}

.entry-content li>p,
.prose li>p {
    margin-bottom: var(--spacing-2) !important;
}

/* Blockquotes */
.entry-content blockquote,
.prose blockquote {
    margin: var(--spacing-6) 0 !important;
    padding: var(--spacing-5) var(--spacing-6) !important;
    border-left: 4px solid var(--color-primary) !important;
    background-color: var(--color-soft-blue) !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--color-text);
}

.entry-content blockquote p:last-child,
.prose blockquote p:last-child {
    margin-bottom: 0 !important;
}

.entry-content blockquote cite,
.prose blockquote cite {
    display: block;
    margin-top: var(--spacing-3);
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
}

/* Code - Inline */
.entry-content code,
.prose code {
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace !important;
    font-size: 0.875em !important;
    padding: 0.15em 0.4em !important;
    background-color: var(--color-soft-grey) !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-accent-dark) !important;
    word-break: break-word;
}

/* Code - Block (pre) */
.entry-content pre,
.prose pre {
    margin: var(--spacing-6) 0 !important;
    padding: var(--spacing-5) !important;
    background-color: var(--color-navy-dark) !important;
    border-radius: var(--radius-lg) !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.entry-content pre code,
.prose pre code {
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: #e2e8f0 !important;
    font-size: var(--font-size-sm) !important;
    line-height: var(--line-height-relaxed) !important;
    word-break: normal;
}

/* Tables */
.entry-content table,
.prose table {
    width: 100% !important;
    margin: var(--spacing-6) 0 !important;
    border-collapse: collapse !important;
    font-size: var(--font-size-base) !important;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border) !important;
}

.entry-content thead,
.prose thead {
    background-color: var(--color-soft-grey);
}

.entry-content th,
.prose th {
    padding: var(--spacing-3) var(--spacing-4) !important;
    text-align: left !important;
    font-weight: var(--font-weight-bold) !important;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    border-bottom: 2px solid var(--color-border) !important;
}

.entry-content td,
.prose td {
    padding: var(--spacing-3) var(--spacing-4) !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    color: var(--color-text);
}

.entry-content tbody tr:hover,
.prose tbody tr:hover {
    background-color: var(--color-soft-blue);
}

/* Images inside content */
.entry-content img,
.prose img {
    max-width: 100% !important;
    height: auto !important;
    margin: var(--spacing-6) 0 !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* WordPress image alignment */
.entry-content .aligncenter,
.prose .aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.entry-content .alignleft,
.prose .alignleft {
    float: left !important;
    margin-right: var(--spacing-6) !important;
    margin-bottom: var(--spacing-4) !important;
}

.entry-content .alignright,
.prose .alignright {
    float: right !important;
    margin-left: var(--spacing-6) !important;
    margin-bottom: var(--spacing-4) !important;
}

/* Figure / captions */
.entry-content figure,
.prose figure {
    margin: var(--spacing-6) 0 !important;
}

.entry-content figcaption,
.prose figcaption {
    margin-top: var(--spacing-2) !important;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
    font-style: italic;
}

/* Horizontal Rule */
.entry-content hr,
.prose hr {
    margin: var(--spacing-8) 0 !important;
    border: none !important;
    border-top: 1px solid var(--color-border) !important;
}

/* Definition Lists */
.entry-content dl,
.prose dl {
    margin: var(--spacing-5) 0 !important;
}

.entry-content dt,
.prose dt {
    font-weight: var(--font-weight-bold) !important;
    margin-bottom: var(--spacing-1) !important;
    color: var(--color-text);
}

.entry-content dd,
.prose dd {
    margin-left: var(--spacing-6) !important;
    margin-bottom: var(--spacing-4) !important;
    color: var(--color-text-muted);
}

/* WordPress Block Styles */
.entry-content .wp-block-image,
.prose .wp-block-image {
    margin: var(--spacing-6) 0 !important;
}

.entry-content .wp-block-gallery,
.prose .wp-block-gallery {
    margin: var(--spacing-6) 0 !important;
}

.entry-content .wp-block-video,
.prose .wp-block-video {
    margin: var(--spacing-6) 0 !important;
}

.entry-content .wp-block-video video,
.prose .wp-block-video video {
    border-radius: var(--radius-lg);
    max-width: 100%;
}

.entry-content .wp-block-embed,
.prose .wp-block-embed {
    margin: var(--spacing-6) 0 !important;
}

.entry-content .wp-block-embed iframe,
.prose .wp-block-embed iframe {
    max-width: 100%;
    border-radius: var(--radius-md);
}

/* WordPress Separator Block */
.entry-content .wp-block-separator,
.prose .wp-block-separator {
    margin: var(--spacing-8) auto !important;
    border: none !important;
    border-top: 2px solid var(--color-border) !important;
    max-width: 100px;
}

.entry-content .wp-block-separator.is-style-wide,
.prose .wp-block-separator.is-style-wide {
    max-width: 100%;
}

/* WordPress Button Block */
.entry-content .wp-block-button .wp-block-button__link,
.prose .wp-block-button .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-6);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-xl);
    text-decoration: none !important;
    transition: all var(--transition-normal);
}

/* Clearfix for floated images */
.entry-content::after,
.prose::after {
    content: "";
    display: table;
    clear: both;
}

/* Page links (wp_link_pages) */
.entry-content .page-links,
.prose .page-links {
    margin-top: var(--spacing-8) !important;
    padding-top: var(--spacing-6) !important;
    border-top: 1px solid var(--color-border) !important;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
}

.entry-content .page-links a,
.prose .page-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    margin: 0 var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-2);
    background-color: var(--color-soft-blue);
    border-radius: var(--radius-md);
    text-decoration: none !important;
    font-weight: var(--font-weight-bold);
}

.entry-content .page-links a:hover,
.prose .page-links a:hover {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
}

/* Responsive adjustments for prose */
@media (max-width: 768px) {

    .entry-content,
    .prose {
        font-size: var(--font-size-base) !important;
    }

    .entry-content h1,
    .prose h1 {
        font-size: var(--font-size-3xl) !important;
    }

    .entry-content h2,
    .prose h2 {
        font-size: var(--font-size-2xl) !important;
    }

    .entry-content h3,
    .prose h3 {
        font-size: var(--font-size-xl) !important;
    }

    .entry-content .alignleft,
    .entry-content .alignright,
    .prose .alignleft,
    .prose .alignright {
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        display: block;
    }
}

/* ==========================================================================
   Footer Widget Styles
   ========================================================================== */

/* Footer widget containers */
#colophon .footer-column .widget {
    margin-bottom: var(--spacing-8);
}

/* Footer widget titles - match default h4 style */
#colophon .footer-column .widget-title,
#colophon .footer-column .widget h4,
#colophon .footer-column h4 {
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    margin-bottom: var(--spacing-8);
    font-size: var(--font-size-sm);
    letter-spacing: 0.1em;
}

/* Footer widget text - match default paragraph style */
#colophon .footer-column .widget p,
#colophon .footer-column .textwidget p,
#colophon .footer-column p {
    color: #94a3b8;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-8);
}

/* Footer widget links - match default link style */
#colophon .footer-column .widget a,
#colophon .footer-column a {
    color: #94a3b8;
    transition: color var(--transition-fast);
}

#colophon .footer-column .widget a:hover,
#colophon .footer-column a:hover {
    color: var(--color-accent);
}

/* Footer widget lists - match default nav menu style */
#colophon .footer-column .widget ul,
#colophon .footer-column .menu,
#colophon .footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#colophon .footer-column .widget li,
#colophon .footer-column .menu li,
#colophon .footer-column ul li {
    margin-bottom: var(--spacing-4);
}

#colophon .footer-column .widget li a,
#colophon .footer-column .menu li a,
#colophon .footer-column ul li a {
    color: #94a3b8;
    font-size: var(--font-size-sm);
    display: block;
}

#colophon .footer-column .widget li a:hover,
#colophon .footer-column .menu li a:hover,
#colophon .footer-column ul li a:hover {
    color: var(--color-accent);
}

/* Footer nav menu widget specific */
#colophon .footer-column .widget_nav_menu .menu-item a {
    color: #94a3b8;
    font-size: var(--font-size-sm);
}

#colophon .footer-column .widget_nav_menu .menu-item a:hover {
    color: var(--color-accent);
}

/* ==========================================================================
   Blog Archive Page
   ========================================================================== */

/* Header */
.blog-archive-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-navy-dark) 100%);
    padding: var(--spacing-12) 0 var(--spacing-8);
    position: relative;
    overflow: hidden;
}

.blog-archive-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 102, 0, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.blog-archive-header::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.blog-archive-header .content-container {
    position: relative;
    z-index: 1;
}

.blog-archive-header .breadcrumb,
.blog-archive-header .breadcrumb a,
.blog-archive-header .breadcrumb li {
    color: rgba(255, 255, 255, 0.6);
}

.blog-archive-header .breadcrumb a:hover {
    color: rgba(255, 255, 255, 0.9);
}

.blog-archive-header .breadcrumb .current {
    color: rgba(255, 255, 255, 0.9);
}

.blog-header-content {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-8);
}

.blog-archive-title {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-extrabold);
    color: #ffffff;
    margin-bottom: var(--spacing-4);
    letter-spacing: -0.02em;
}

.blog-archive-desc {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    max-width: 600px;
}

.blog-archive-desc strong {
    color: var(--color-accent);
    font-weight: var(--font-weight-extrabold);
}

/* Category Filter Tags */
.blog-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    padding-top: var(--spacing-4);
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-normal);
    cursor: pointer;
    text-decoration: none;
    backdrop-filter: blur(8px);
}

.filter-tag:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: translateY(-1px);
}

.filter-tag.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);
}

.filter-tag .material-symbols-outlined {
    font-size: 16px;
}

.filter-count {
    font-size: var(--font-size-xs);
    background: rgba(255, 255, 255, 0.15);
    padding: 1px 8px;
    border-radius: var(--radius-full);
    min-width: 22px;
    text-align: center;
}

.filter-tag.active .filter-count {
    background: rgba(255, 255, 255, 0.25);
}

/* Main Content Area */
.blog-archive-content {
    padding: var(--spacing-12) 0;
    background: var(--color-soft-grey);
    min-height: 60vh;
}

.blog-archive-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--spacing-10);
    align-items: start;
}

/* Posts Grid */
.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-6);
}

/* Pagination */
.blog-pagination {
    margin-top: var(--spacing-12);
    display: flex;
    justify-content: center;
}

.blog-pagination ul {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-pagination li a,
.blog-pagination li span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 var(--spacing-3);
    border-radius: var(--radius-xl);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-light);
    transition: all var(--transition-normal);
    text-decoration: none;
}

.blog-pagination li a:hover {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary);
    transform: translateY(-2px);
}

.blog-pagination li span.current {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-primary);
}

.blog-pagination li .prev,
.blog-pagination li .next {
    color: var(--color-primary);
}

.blog-pagination .material-symbols-outlined {
    font-size: 20px;
}

/* Sidebar */
.blog-archive-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    position: sticky;
    top: 100px;
}

.sidebar-widget {
    background: var(--color-bg-white);
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
}

.sidebar-widget-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-5);
    padding-bottom: var(--spacing-4);
    border-bottom: 2px solid var(--color-soft-blue);
}

.sidebar-widget-title .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-primary);
}

/* Search Widget */
.blog-search-form .search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.blog-search-form .search-icon {
    position: absolute;
    left: var(--spacing-4);
    font-size: 20px;
    color: var(--color-text-light);
    pointer-events: none;
}

.blog-search-form .search-field {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) calc(var(--spacing-4) + 28px);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    font-size: var(--font-size-sm);
    background: var(--color-soft-grey);
    transition: all var(--transition-fast);
    color: var(--color-text);
}

.blog-search-form .search-field:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-white);
    box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.08);
}

/* Categories Widget */
.sidebar-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.sidebar-cat-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.sidebar-cat-item a:hover {
    background: var(--color-soft-blue);
    color: var(--color-primary);
}

.sidebar-cat-item.active a {
    background: var(--color-primary);
    color: #ffffff;
}

.sidebar-cat-item .cat-name {
    font-weight: var(--font-weight-semibold);
}

.sidebar-cat-item .cat-count {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    min-width: 28px;
    text-align: center;
}

.sidebar-cat-item.active .cat-count {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Popular Posts Widget */
.popular-posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.popular-post-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.popular-post-item:hover {
    background: var(--color-soft-blue);
}

.popular-post-number {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-soft-blue);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-extrabold);
}

.popular-post-item:nth-child(1) .popular-post-number {
    background: var(--color-accent);
    color: #ffffff;
}

.popular-post-item:nth-child(2) .popular-post-number {
    background: var(--color-primary);
    color: #ffffff;
}

.popular-post-item:nth-child(3) .popular-post-number {
    background: var(--color-primary-light);
    color: #ffffff;
}

.popular-post-info {
    flex: 1;
    min-width: 0;
}

.popular-post-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    line-height: var(--line-height-snug);
    margin-bottom: var(--spacing-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.popular-post-item:hover .popular-post-title {
    color: var(--color-primary);
}

.popular-post-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

/* Sidebar CTA Widget */
.sidebar-cta-widget {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-navy-dark) 100%);
    text-align: center;
    border: none;
    position: relative;
    overflow: hidden;
}

.sidebar-cta-widget::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 102, 0, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.cta-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    margin-bottom: var(--spacing-4);
}

.cta-icon-wrap .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-accent);
}

.sidebar-cta-widget .cta-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: #ffffff;
    margin-bottom: var(--spacing-3);
}

.sidebar-cta-widget .cta-desc {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: var(--spacing-6);
    line-height: var(--line-height-relaxed);
}

.sidebar-cta-widget .cta-btn {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-sm);
    position: relative;
    z-index: 1;
}

/* Empty State */
.blog-archive-empty {
    padding: var(--spacing-24) 0;
    background: var(--color-soft-grey);
}

.empty-state {
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
}

.empty-state .empty-icon {
    font-size: 80px;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-6);
    display: block;
}

.empty-state h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-4);
}

.empty-state p {
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-8);
}

/* Responsive */
@media (max-width: 1024px) {
    .blog-archive-layout {
        grid-template-columns: 1fr;
    }

    .blog-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-archive-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .sidebar-cta-widget {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .blog-archive-header {
        padding: var(--spacing-8) 0 var(--spacing-6);
    }

    .blog-archive-title {
        font-size: var(--font-size-4xl);
    }

    .blog-category-filter {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: var(--spacing-2);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .blog-category-filter::-webkit-scrollbar {
        display: none;
    }

    .filter-tag {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .blog-archive-sidebar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .blog-posts-grid {
        grid-template-columns: 1fr;
    }

    .blog-archive-title {
        font-size: var(--font-size-3xl);
    }
}