/* =========================================
   Shisha Superstore - Premium Stylesheet
   All 20 UI improvements implemented
   ========================================= */

/* --- Custom Properties --- */
:root {
    --primary: #912F3C;
    --primary-dark: #7a2733;
    --accent: #FFBC7D;
    --accent-hover: #f0a85e;
    --sky: #6EC1E4;
    --text: #3D3D3D;
    --text-light: #7A7A7A;
    --bg: #FAFAF8;
    --card: #FFFEFB;
    --border: #E5E5E0;
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Playfair Display', serif;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 50px;
    --shadow-card: 0 2px 16px rgba(0,0,0,.06);
    --shadow-card-hover: 0 12px 32px rgba(0,0,0,.1);
    --shadow-btn: 0 4px 14px rgba(145,47,60,.2);
    --ease: cubic-bezier(.4,0,.2,1);
}

/* --- Reset & Base (#1 #3) --- */
*, *::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-body);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text);
    background: var(--bg);
    animation: fadeInPage .4s ease;
}
@keyframes fadeInPage {
    from { opacity: 0; }
    to { opacity: 1; }
}

::selection { background: var(--primary); color: #fff; }
::-moz-selection { background: var(--primary); color: #fff; }

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

a {
    color: var(--primary);
    text-decoration: none;
    transition: color .3s var(--ease);
}
a:hover { color: var(--sky); }

/* #1 Typography upgrade */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
    margin-bottom: .75rem;
    letter-spacing: -.01em;
}

h1 { font-size: 2.2rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.35rem; }

p { margin-bottom: 1rem; }
ul, ol { margin-bottom: 1rem; padding-left: 1.5rem; }

/* --- Layout --- */
.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1rem;
}

.container-narrow {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1rem;
}

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

/* #9 Section Divider */
.section-divider {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    margin: 2.5rem auto;
    border-radius: 2px;
}

/* --- Buttons (#5) --- */
.btn {
    display: inline-block;
    padding: .75rem 2rem;
    border: none;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s var(--ease);
    text-decoration: none;
    line-height: 1.4;
    min-height: 44px;
    min-width: 44px;
}

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

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: #fff;
    box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    box-shadow: 0 6px 20px rgba(145,47,60,.3);
    color: #fff;
}

.btn-secondary {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
}
.btn-secondary:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.btn-danger {
    background: #c0392b;
    color: #fff;
}
.btn-danger:hover { background: #a93226; color: #fff; }

.btn-sm {
    padding: .4rem 1rem;
    font-size: .85rem;
    min-height: 36px;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

/* --- Header --- */
.site-header {
    background: var(--primary);
    padding: .85rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    transition: padding .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled {
    padding: .5rem 0;
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
}

.site-header::after {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--sky), var(--primary));
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

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

/* #6 Logo with icon */
.site-logo {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    transition: font-size .3s var(--ease);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.site-header.scrolled .site-logo {
    font-size: 1.2rem;
}
.site-logo:hover { color: var(--accent); }
.logo-icon {
    flex-shrink: 0;
    transition: transform .3s var(--ease);
}
.site-logo:hover .logo-icon {
    transform: rotate(-5deg) scale(1.1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* #7 Nav with active indicator */
.site-nav {
    display: flex;
    align-items: center;
}
.site-nav a {
    color: rgba(255,255,255,.85);
    margin-left: 1.75rem;
    font-weight: 500;
    font-size: .9rem;
    letter-spacing: .3px;
    position: relative;
    padding-bottom: 3px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    transition: color .3s var(--ease);
}
.site-nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width .3s var(--ease);
}
.site-nav a:hover {
    color: #fff;
}
.site-nav a:hover::after { width: 100%; }
.site-nav a.active {
    color: var(--accent);
}
.site-nav a.active::after {
    width: 100%;
}

/* Hamburger */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    z-index: 102;
    position: relative;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    transition: transform .3s var(--ease), opacity .2s;
    transform-origin: center;
}
.nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}
.nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* #20 Mobile nav overlay */
.nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: 99;
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.nav-overlay.active {
    display: block;
    opacity: 1;
}

/* Reading Progress Bar */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    width: 0;
    z-index: 200;
    transition: width .1s linear;
}

/* --- Hero (#2) --- */
.hero {
    background: linear-gradient(135deg, var(--primary) 0%, #54595F 100%);
    color: #fff;
    text-align: center;
    padding: 5rem 1rem 5.5rem;
    position: relative;
    overflow: hidden;
}
/* Decorative pattern overlay */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255,188,125,.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(110,193,228,.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(255,255,255,.05) 0%, transparent 40%),
        radial-gradient(circle at 10% 10%, rgba(255,255,255,.03) 0%, transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(255,188,125,.08) 0%, transparent 40%);
    z-index: 0;
}
/* Wave bottom edge */
.hero::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 50px;
    background: var(--bg);
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 1;
}
.hero-content {
    animation: heroFadeUp .8s ease-out;
    position: relative;
    z-index: 1;
}
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero h1 {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.2rem);
    margin-bottom: .75rem;
    font-weight: 900;
    letter-spacing: -.02em;
}
.hero p {
    font-size: 1.15rem;
    margin-bottom: 2rem;
    opacity: .9;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    letter-spacing: .2px;
}
.hero .btn-primary {
    background: var(--accent);
    color: var(--text);
    box-shadow: 0 4px 20px rgba(255,188,125,.3);
    font-weight: 700;
    padding: .85rem 2.5rem;
    font-size: 1rem;
}
.hero .btn-primary:hover {
    background: var(--accent-hover);
    box-shadow: 0 6px 28px rgba(255,188,125,.45);
    color: var(--text);
}

/* --- Post Grid --- */
.latest-posts, .blog-listing, .related-posts {
    padding: 3.5rem 0;
}
.latest-posts h2, .blog-listing h1, .related-posts h2 {
    text-align: center;
    margin-bottom: 2.5rem;
    font-size: 2rem;
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

/* Staggered fade-in */
.fade-in-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.fade-in-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Post Cards (#4 #8 #11) --- */
.post-card {
    background: var(--card);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
}
.post-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border);
}

/* Card image zoom */
.post-card a:first-child {
    display: block;
    overflow: hidden;
}
.post-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.post-card:hover img {
    transform: scale(1.06);
}

.post-card-placeholder {
    width: 100%;
    height: 240px;
    background: linear-gradient(135deg, var(--primary) 0%, #54595F 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.3);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform .5s var(--ease);
}
.post-card:hover .post-card-placeholder {
    transform: scale(1.06);
}

.post-card-body {
    padding: 1.5rem;
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.post-card-body h2,
.post-card-body h3 {
    font-size: 1.15rem;
    margin-bottom: .5rem;
    line-height: 1.35;
}
.post-card-body h2 a,
.post-card-body h3 a {
    color: var(--text);
    transition: color .3s var(--ease);
}
.post-card-body h2 a:hover,
.post-card-body h3 a:hover {
    color: var(--primary);
}

/* #18 New badge with pulse */
.new-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary), #c0392b);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: .2rem .65rem;
    border-radius: var(--radius-lg);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: .5rem;
    animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}

.post-card-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.post-date {
    font-size: .82rem;
    color: var(--text-light);
    display: block;
}

/* #18 Reading time badge with icon */
.reading-time-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: #f0eeeb;
    color: var(--text-light);
    font-size: .75rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: var(--radius-lg);
}
.reading-time-badge::before {
    content: '\23F1';
    font-size: .7rem;
}

/* #8 Excerpt line clamp */
.post-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .92rem;
    color: var(--text-light);
    line-height: 1.65;
    margin-bottom: .75rem;
    flex: 1;
}

/* Read More link */
.read-more {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: auto;
    font-weight: 600;
    color: var(--primary);
    font-size: .88rem;
    padding: .3rem 0;
    transition: gap .3s var(--ease), color .3s var(--ease);
}
.read-more:hover {
    color: var(--primary-dark);
    gap: .6rem;
}

/* --- Reading Time (single post) --- */
.reading-time {
    display: inline-block;
    font-size: .85rem;
    color: var(--text-light);
    margin-left: .75rem;
    padding-left: .75rem;
    border-left: 1px solid var(--border);
}

.post-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* --- Search Form --- */
.search-form {
    display: flex;
    gap: .5rem;
    max-width: 500px;
    margin: 0 auto 2.5rem;
}
.search-form input[type="search"] {
    flex: 1;
    padding: .65rem 1rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: .95rem;
    background: var(--card);
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.search-form input[type="search"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(145,47,60,.1);
}
.search-form .btn {
    white-space: nowrap;
}

/* --- Table of Contents (#16) --- */
/* Mobile inline TOC */
.toc-mobile {
    display: block;
}
.toc {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}
.toc-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: .95rem;
    color: var(--text);
    margin-bottom: .75rem;
}
.toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.toc li {
    margin-bottom: .5rem;
}
.toc li a {
    color: var(--text-light);
    font-size: .88rem;
    font-weight: 500;
    transition: all .2s var(--ease);
    display: block;
    padding: .15rem 0;
    border-left: 2px solid transparent;
    padding-left: .75rem;
}
.toc li a:hover {
    color: var(--primary);
    border-left-color: var(--primary);
}
.toc li a.active {
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 600;
}
.toc li.toc-sub {
    padding-left: .75rem;
}
.toc li.toc-sub a {
    font-size: .82rem;
    font-weight: 400;
}

/* Desktop sticky TOC sidebar (#16) */
.toc-sidebar {
    display: none;
}
@media (min-width: 1100px) {
    .toc-sidebar {
        display: block;
        position: sticky;
        top: 80px;
        align-self: start;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
    .toc-sidebar .toc {
        border: none;
        background: transparent;
        padding: .5rem 0;
        border-radius: 0;
    }
    .toc-sidebar .toc-title {
        font-size: .85rem;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: var(--text-light);
        margin-bottom: 1.5rem;
        padding-bottom: .75rem;
        border-bottom: 1px solid var(--border);
    }
    .toc-sidebar .toc li {
        margin-bottom: .85rem;
    }
    .toc-sidebar .toc li a {
        font-size: .87rem;
        padding: .4rem 0 .4rem 1rem;
        line-height: 1.6;
        white-space: normal;
        word-break: break-word;
    }
    .toc-sidebar .toc li.toc-sub {
        margin-bottom: .6rem;
    }
    .toc-sidebar .toc li.toc-sub a {
        font-size: .82rem;
        padding: .3rem 0 .3rem 1rem;
        line-height: 1.5;
    }
    .toc-mobile {
        display: none;
    }
}

/* --- Post Layout Grid (#16) --- */
.post-layout {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 1100px) {
    .post-layout {
        display: grid;
        grid-template-columns: 250px minmax(0, 720px);
        gap: 2.5rem;
        max-width: 1060px;
        justify-content: center;
    }
}

/* --- Mode Toggle (Bulk Generator) --- */
.mode-toggle {
    display: flex;
    gap: 1.5rem;
    margin-top: .25rem;
}
.mode-option {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 400 !important;
    cursor: pointer;
    font-size: .95rem;
}
.mode-option input[type="radio"] {
    accent-color: var(--primary);
}

/* --- Form Hints --- */
.form-hint {
    font-size: .8rem;
    color: var(--text-light);
    margin-top: .35rem;
}
.bulk-summary {
    margin-bottom: 1.5rem;
    font-size: .95rem;
    color: var(--text);
}
.post-count-info {
    color: var(--text-light);
    font-size: .9rem;
}

/* --- Pagination --- */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 1rem 0;
}
.page-info {
    color: var(--text-light);
    font-size: .9rem;
}

/* --- Single Post (#12) --- */
.single-post {
    padding: 2rem 0 3rem;
}

/* #14 Breadcrumbs - typographic style */
.breadcrumbs {
    font-size: .78rem;
    color: var(--text-light);
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.breadcrumbs a {
    color: var(--text-light);
    font-weight: 500;
    transition: color .3s var(--ease);
}
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs .sep {
    color: #ccc;
    font-size: .75rem;
}
.breadcrumbs .sep::before {
    content: '/';
    font-size: .78rem;
}
.breadcrumbs .current {
    color: var(--primary);
    font-weight: 600;
}

/* Post header */
.post-header {
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    border-top: 4px solid var(--primary);
}
.post-header h1 {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    margin-bottom: .35rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

/* #15 Featured image with caption overlay */
.post-featured-image {
    margin-bottom: 2rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}
.post-featured-image img {
    width: 100%;
    height: auto;
}
.post-featured-image figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1rem .75rem;
    background: linear-gradient(transparent, rgba(0,0,0,.6));
    color: rgba(255,255,255,.85);
    font-size: .78rem;
    text-align: right;
}

/* #12 Post content with drop cap */
.post-content {
    font-size: 1.1rem;
    line-height: 1.9;
}
.post-content > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-heading);
    font-size: 3.6rem;
    line-height: .8;
    padding-right: .6rem;
    padding-top: .3rem;
    color: var(--primary);
    font-weight: 900;
}
.post-content p {
    margin-bottom: 1.5rem;
}
.post-content h2 {
    margin-top: 2.5rem;
}
.post-content h3 {
    margin-top: 2rem;
}
.post-content ul, .post-content ol {
    margin-left: 1rem;
}
.post-content a { color: var(--primary); text-decoration: underline; text-decoration-color: rgba(145,47,60,.3); text-underline-offset: 2px; transition: text-decoration-color .3s; }
.post-content a:hover { color: var(--sky); text-decoration-color: var(--sky); }

/* Styled horizontal rule */
.post-content hr {
    border: none;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--accent), var(--sky));
    margin: 2.5rem 0;
    border-radius: 2px;
}

/* Styled blockquotes */
.post-content blockquote {
    border-left: 4px solid var(--primary);
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
    background: #f9f4f5;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
    color: #555;
    font-size: 1.05rem;
}
.post-content blockquote p:last-child { margin-bottom: 0; }

/* Styled tables */
.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: .95rem;
    display: block;
    overflow-x: auto;
    border-radius: var(--radius-sm);
}
.post-content table th,
.post-content table td {
    padding: .65rem .9rem;
    border: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}
.post-content table th {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    border-color: var(--primary);
}
.post-content table tr:nth-child(even) {
    background: #f9f6f6;
}
.post-content table tr:hover {
    background: #f0e8ea;
}

/* Styled code blocks */
.post-content pre {
    background: #1e1e2e;
    color: #cdd6f4;
    padding: 1.5rem;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin: 2rem 0;
    font-size: .88rem;
    line-height: 1.6;
}
.post-content code {
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-size: .88em;
}
.post-content p code,
.post-content li code {
    background: #f0eeeb;
    padding: .15rem .45rem;
    border-radius: 4px;
    color: var(--primary);
    font-size: .85em;
}

/* --- Quick Answer Box --- */
.quick-answer {
    background: linear-gradient(135deg, #fef9f0 0%, #fff5e6 100%);
    border-left: 4px solid var(--accent);
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-sm);
    margin: 1.5rem 0 2rem;
    font-size: .95rem;
    line-height: 1.7;
}
.quick-answer strong:first-child {
    color: var(--primary);
    font-size: 1rem;
}
/* --- Comparison Table --- */
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: .9rem;
    display: block;
    overflow-x: auto;
    border-radius: var(--radius-sm);
}
.comparison-table th,
.comparison-table td {
    padding: .7rem 1rem;
    border: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}
.comparison-table th {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    border-color: var(--primary);
    position: sticky;
    top: 0;
}
.comparison-table tr:nth-child(even) {
    background: #f9f6f6;
}
.comparison-table tr:hover {
    background: #f0e8ea;
}
.comparison-table td:last-child {
    font-weight: 600;
    color: var(--primary);
}
/* --- Share Bar (#13) --- */
.share-bar {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.share-label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--text);
    margin-right: .25rem;
    font-family: var(--font-heading);
}
.share-link {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    font-weight: 600;
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text);
    text-decoration: none;
    transition: all .3s var(--ease);
    cursor: pointer;
    font-family: var(--font-body);
    line-height: 1;
}
.share-link:hover {
    transform: translateY(-2px);
}
.share-twitter:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}
.share-facebook:hover {
    background: #1877F2;
    color: #fff;
    border-color: #1877F2;
}
.share-whatsapp:hover {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
}
.share-email:hover {
    background: #EA4335;
    color: #fff;
    border-color: #EA4335;
}
.share-copy:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
/* Tooltip for copy feedback */
.share-link.copied {
    background: #27ae60;
    color: #fff;
    border-color: #27ae60;
}

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.88);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeInPage .2s ease;
}
.lightbox-overlay img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
}
.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
    transition: color .3s;
}
.lightbox-close:hover {
    color: var(--accent);
}

/* --- 404 --- */
.error-page {
    padding: 5rem 1rem;
}
.error-page h1 {
    font-size: 7rem;
    color: var(--primary);
    margin-bottom: .25rem;
    font-weight: 900;
    text-shadow: 3px 3px 0 rgba(145,47,60,.1);
}
.error-subtitle {
    font-size: 1.5rem;
    margin-bottom: .5rem;
    color: var(--text);
    font-family: var(--font-heading);
}
.error-page p {
    max-width: 480px;
    margin: 0 auto 1.5rem;
    color: var(--text-light);
}
.error-page .btn { margin: .5rem; }
.error-illustration {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: .6;
}

/* --- About Page --- */
.about-page {
    padding: 3rem 0 3.5rem;
}
.about-page h1 {
    text-align: center;
    margin-bottom: 1rem;
}
.about-lead {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}
.about-content h2 {
    margin-top: 2rem;
}

/* --- Contact Page --- */
.contact-page {
    padding: 3rem 0 3.5rem;
}
.contact-page h1 {
    text-align: center;
    margin-bottom: .5rem;
}
.contact-intro {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 2rem;
    color: var(--text-light);
}
.contact-form {
    background: var(--card);
    padding: 2.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
}
.contact-form input:invalid:not(:placeholder-shown) {
    border-color: #c0392b;
}
.contact-form input:valid:not(:placeholder-shown) {
    border-color: #27ae60;
}
.contact-form textarea:invalid:not(:placeholder-shown) {
    border-color: #c0392b;
}
.contact-form textarea:valid:not(:placeholder-shown) {
    border-color: #27ae60;
}

/* --- Newsletter CTA Section (#17) --- */
.newsletter-cta {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: #fff;
    padding: 4.5rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.newsletter-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 30% 50%, rgba(255,188,125,.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(110,193,228,.1) 0%, transparent 50%);
}
.newsletter-cta > * {
    position: relative;
    z-index: 1;
}
.newsletter-cta h2 {
    color: #fff;
    font-size: 1.9rem;
    margin-bottom: .5rem;
    font-weight: 900;
}
.newsletter-cta p {
    opacity: .9;
    max-width: 480px;
    margin: 0 auto 1.75rem;
    font-size: 1.05rem;
}
.newsletter-cta-form {
    display: flex;
    gap: .5rem;
    max-width: 440px;
    margin: 0 auto;
}
.newsletter-cta-form input[type="email"] {
    flex: 1;
    padding: .85rem 1.5rem;
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: .95rem;
    outline: none;
}
.newsletter-cta-form input[type="email"]:focus {
    box-shadow: 0 0 0 3px rgba(255,255,255,.3);
}
.newsletter-cta-form .btn {
    background: var(--accent);
    color: var(--text);
    border-radius: var(--radius-lg);
    font-weight: 700;
    padding: .85rem 2rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.newsletter-cta-form .btn:hover {
    background: var(--accent-hover);
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.newsletter-consent {
    font-size: .8rem;
    opacity: .7;
    margin-top: .75rem;
}
.newsletter-consent a {
    color: #fff;
    text-decoration: underline;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}
.footer-about-link {
    display: inline-block;
    margin-top: .5rem;
    font-size: .85rem;
    color: var(--accent) !important;
}
.footer-about-link:hover {
    color: #fff !important;
}

/* --- Footer (#10) --- */
.site-footer {
    background: #1E1E1E;
    color: #b0b0b0;
    padding: 0;
    font-size: .9rem;
    border-top: 4px solid var(--primary);
}
.footer-inner {
    padding: 3.5rem 0 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #333;
}
.footer-col h3 {
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: 1rem;
    font-family: var(--font-heading);
    position: relative;
    padding-bottom: .6rem;
}
.footer-col h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36px;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
}
.footer-col p {
    line-height: 1.7;
    margin-bottom: .75rem;
}
.footer-col:first-child p {
    font-size: .95rem;
}
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links li { margin-bottom: .5rem; }
.footer-links a {
    color: #b0b0b0;
    transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.footer-links a:hover {
    color: var(--accent);
    padding-left: .4rem;
}

.footer-bottom {
    text-align: center;
    padding: 1.5rem 0;
    font-size: .82rem;
    color: #888;
}
.footer-bottom p { margin: 0; }

/* --- Cookie Consent Banner --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #2c3e50;
    color: #fff;
    z-index: 150;
    box-shadow: 0 -4px 20px rgba(0,0,0,.25);
}
.cookie-banner-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.cookie-banner p {
    margin: 0;
    font-size: .9rem;
    flex: 1;
}
.cookie-actions {
    display: flex;
    gap: .5rem;
}

/* --- Alerts --- */
.alert {
    padding: .85rem 1.25rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
    font-size: .95rem;
    position: relative;
}
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.alert-dismiss {
    position: absolute;
    top: .5rem;
    right: .75rem;
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: inherit;
    opacity: .6;
    line-height: 1;
}
.alert-dismiss:hover { opacity: 1; }

/* --- No Posts --- */
.no-posts {
    text-align: center;
    padding: 3rem 0;
    color: var(--text-light);
    font-size: 1.1rem;
}

/* =========================================
   ADMIN STYLES
   ========================================= */

.admin-body {
    background: #f4f5f7;
}

/* Admin Login */
.admin-login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}
.admin-login-box {
    background: #fff;
    padding: 2.5rem;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px rgba(0,0,0,.1);
    width: 100%;
    max-width: 400px;
}
.admin-login-box h1 {
    text-align: center;
    color: var(--primary);
    font-size: 1.6rem;
    margin-bottom: .25rem;
}
.admin-login-box h2 {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-light);
    font-weight: 400;
    margin-bottom: 1.5rem;
}

/* Admin Layout */
.admin-header {
    background: #2c3e50;
    padding: .6rem 0;
}
.admin-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}
.admin-logo {
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.15rem;
}
.admin-logo:hover { color: var(--sky); }

.admin-nav {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.admin-nav a {
    color: #bdc3c7;
    font-size: .9rem;
    font-weight: 500;
}
.admin-nav a:hover { color: #fff; }

.admin-content {
    padding: 2rem 0;
}
.admin-content h1 {
    margin-bottom: .5rem;
}

.admin-actions {
    margin: 1.5rem 0;
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* Dashboard Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: #fff;
    padding: 1.25rem;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    text-align: center;
}
.stat-card .stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    font-family: var(--font-heading);
}
.stat-card .stat-label {
    font-size: .85rem;
    color: var(--text-light);
    margin-top: .25rem;
}

/* Filter Tabs */
.filter-tabs {
    display: flex;
    gap: .25rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0;
}
.filter-tab {
    padding: .5rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--text-light);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .2s, border-color .2s;
}
.filter-tab:hover {
    color: var(--primary);
}
.filter-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    font-weight: 600;
}
.filter-tab .tab-count {
    background: #e9ecef;
    color: var(--text-light);
    font-size: .75rem;
    padding: .1rem .4rem;
    border-radius: 10px;
    margin-left: .3rem;
}
.filter-tab.active .tab-count {
    background: var(--primary);
    color: #fff;
}

/* Admin Table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.admin-table th,
.admin-table td {
    padding: .75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #eee;
}
.admin-table th {
    background: #f8f9fa;
    font-weight: 600;
    font-size: .85rem;
    text-transform: uppercase;
    color: var(--text-light);
}
.admin-table tbody tr:hover {
    background: #f8f9fa;
}
.admin-table td a { color: var(--primary); }
.admin-table td a:hover { color: var(--sky); }

.status-badge {
    display: inline-block;
    padding: .2rem .6rem;
    border-radius: 12px;
    font-size: .8rem;
    font-weight: 600;
}
.status-draft { background: #e2e3e5; color: #383d41; }
.status-scheduled { background: #fff3cd; color: #856404; }
.status-published { background: #d4edda; color: #155724; }

/* Word count display */
.word-count-display {
    font-size: .8rem;
    color: var(--text-light);
    margin-top: .35rem;
}

/* Slug preview */
.slug-preview {
    font-size: .8rem;
    color: var(--text-light);
    margin-top: .35rem;
    word-break: break-all;
}
.slug-preview span {
    color: var(--primary);
    font-weight: 600;
}

/* Keyword density */
.keyword-density {
    margin-top: .5rem;
}
.keyword-density summary {
    font-size: .85rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    margin-bottom: .5rem;
}
.kw-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}
.kw-list li {
    background: #f0eeeb;
    padding: .2rem .6rem;
    border-radius: 12px;
    font-size: .75rem;
    color: #54595F;
}
.kw-list li strong {
    color: var(--primary);
}

/* Calendar view */
.schedule-calendar {
    background: #fff;
    padding: 1.5rem;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    margin-bottom: 1.5rem;
}
.schedule-calendar h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
}
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}
.cal-header {
    font-size: .75rem;
    font-weight: 700;
    color: var(--text-light);
    padding: .3rem;
}
.cal-day {
    padding: .4rem .2rem;
    font-size: .8rem;
    border-radius: 4px;
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cal-day.has-post {
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    cursor: help;
}
.cal-day.empty {
    color: #ccc;
}
.cal-day.today {
    border: 2px solid var(--sky);
}

/* Autosave indicator */
.autosave-status {
    font-size: .8rem;
    color: var(--text-light);
    margin-left: .5rem;
}
.autosave-status.saved {
    color: #27ae60;
}

/* Forms */
.form-group {
    margin-bottom: 1.25rem;
}
.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: .4rem;
    font-size: .9rem;
    color: var(--text);
}
.form-group label small {
    font-weight: 400;
    color: var(--text-light);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="url"],
.form-group input[type="search"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="datetime-local"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: .65rem .85rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: .95rem;
    background: #fff;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(145,47,60,.1);
}
.form-group textarea {
    resize: vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-actions {
    margin-top: 1.5rem;
    display: flex;
    gap: .75rem;
    align-items: center;
}

.post-form {
    background: #fff;
    padding: 2rem;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Bulk select checkbox */
.bulk-checkbox {
    accent-color: var(--primary);
    width: 18px;
    height: 18px;
    cursor: pointer;
}
.bulk-actions {
    display: none;
    margin-bottom: 1rem;
    align-items: center;
    gap: .75rem;
}
.bulk-actions.visible {
    display: flex;
}
.bulk-count {
    font-size: .9rem;
    color: var(--text-light);
}

/* --- Back to Top --- */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all .3s var(--ease);
    box-shadow: 0 4px 16px rgba(145,47,60,.25);
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
}
.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}
.back-to-top:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(145,47,60,.3);
}

/* --- Skip to Content --- */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    background: var(--primary);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: 0 0 4px 4px;
    z-index: 200;
    font-weight: 600;
    transition: top .2s;
}
.skip-link:focus {
    top: 0;
    color: #fff;
}

/* Print Stylesheet */
@media print {
    .site-header, .site-footer, .back-to-top, .skip-link,
    .share-bar, .search-form, .pagination, .nav-toggle,
    .reading-progress, .toc, .toc-sidebar, .related-posts, .cookie-banner,
    .newsletter-cta, .nav-overlay { display: none !important; }
    .single-post { padding: 0; }
    .post-content { font-size: 12pt; }
    .breadcrumbs { padding: 0; }
    a { color: #000 !important; text-decoration: underline; }
    a[href]::after { content: ' (' attr(href) ')'; font-size: .8em; color: #666; }
    .post-featured-image img { max-height: 300px; }
    .post-layout { display: block !important; max-width: 100% !important; }
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 768px) {
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }

    .hero { padding: 3.5rem 1rem 4.5rem; }
    .hero h1 { font-size: 1.9rem; }
    .hero::after { height: 30px; }

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

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

    /* #20 Mobile slide-in nav */
    .site-nav {
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        background: var(--primary-dark);
        display: flex;
        flex-direction: column;
        padding: 5rem 0 2rem;
        z-index: 101;
        transform: translateX(100%);
        transition: transform .35s var(--ease);
        box-shadow: -4px 0 30px rgba(0,0,0,.3);
        overflow-y: auto;
    }
    .site-nav.open {
        transform: translateX(0);
    }
    .site-nav a {
        margin-left: 0;
        padding: .85rem 1.5rem;
        border-bottom: 1px solid rgba(255,255,255,.08);
        min-height: 44px;
        font-size: 1rem;
        letter-spacing: .5px;
        color: rgba(255,255,255,.85);
    }
    .site-nav a.active {
        background: rgba(255,255,255,.08);
        color: var(--accent);
    }
    .site-nav a::after { display: none; }
    .nav-toggle {
        display: flex;
    }

    .admin-header .container {
        flex-direction: column;
        align-items: flex-start;
    }
    .admin-nav {
        gap: .5rem;
        font-size: .85rem;
    }

    .admin-table {
        font-size: .85rem;
    }
    .admin-table th,
    .admin-table td {
        padding: .5rem;
    }

    .post-form, .contact-form {
        padding: 1.25rem;
    }

    .post-header h1 {
        font-size: 1.6rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    .cookie-banner-inner {
        flex-direction: column;
        text-align: center;
    }

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

    .filter-tabs {
        overflow-x: auto;
    }

    .newsletter-cta {
        padding: 3rem 1rem;
    }
    .newsletter-cta h2 {
        font-size: 1.5rem;
    }
    .newsletter-cta-form {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .admin-actions {
        flex-direction: column;
    }
    .form-actions {
        flex-direction: column;
    }
    .btn-block-mobile {
        width: 100%;
        text-align: center;
    }
    .search-form {
        flex-direction: column;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* =========================================
   NEW COMPONENTS: Categories, Author Bio,
   Deals, Calculator, Popular Posts, etc.
   ========================================= */

/* --- Category Badges (post cards) --- */
.post-card-categories {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .35rem;
}
.category-badge-sm {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    padding: .15rem .55rem;
    border-radius: var(--radius-lg);
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.4;
    transition: background .2s var(--ease);
}
.category-badge-sm:hover {
    background: var(--primary-dark);
    color: #fff;
}

/* Category badge on single post */
.post-categories {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}
.category-badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    padding: .25rem .75rem;
    border-radius: var(--radius-lg);
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: background .2s var(--ease);
}
.category-badge:hover {
    background: var(--primary-dark);
    color: #fff;
}

/* --- Category Filter Bar (blog listing) --- */
.category-filter {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.category-filter-btn {
    display: inline-block;
    padding: .4rem 1rem;
    border-radius: var(--radius-lg);
    background: var(--card);
    border: 1px solid var(--border);
    font-size: .85rem;
    font-weight: 500;
    color: var(--text);
    transition: all .2s var(--ease);
}
.category-filter-btn:hover,
.category-filter-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.cat-count {
    font-size: .75rem;
    opacity: .7;
}

/* --- Home Intro --- */
.home-intro {
    padding: 2rem 0 1rem;
}
.home-intro h2 {
    text-align: center;
    margin-bottom: 1rem;
}
.home-intro p {
    font-size: .95rem;
    line-height: 1.8;
    color: var(--text-light);
}
.home-intro a {
    font-weight: 600;
}

/* --- Category Highlights (homepage) --- */
.category-highlights {
    padding: 1.5rem 0 1rem;
}
.category-highlights h2 {
    font-family: var(--font-heading);
    text-align: center;
    margin-bottom: 1.5rem;
}
.category-grid {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    justify-content: center;
}
.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all .3s var(--ease);
    text-align: center;
    min-width: 150px;
}
.category-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
    color: var(--primary);
}
.category-card-name {
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .2rem;
}
.category-card-count {
    font-size: .8rem;
    color: var(--text-light);
}

/* --- Category Listing page --- */
.category-listing .category-description {
    color: var(--text-light);
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

/* --- Author Bio Box --- */
.author-bio {
    margin: 2.5rem 0;
    padding: 1.5rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--primary);
}
.author-bio-inner {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}
.author-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
}
.author-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .25rem;
    color: var(--text);
}
.author-desc {
    font-size: .9rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* --- Post Updated Date --- */
.post-updated {
    display: inline-block;
    color: var(--primary);
    font-weight: 500;
    font-size: .88rem;
}
.post-updated::before {
    content: "\2022 ";
    margin: 0 .3rem;
}

/* --- Last Updated Notice (privacy page) --- */
.last-updated-notice {
    color: var(--text-light);
    font-size: .9rem;
    margin-bottom: 2rem;
    font-style: italic;
}

/* --- Popular Posts (homepage) --- */
.popular-posts {
    padding: 3rem 0;
    background: linear-gradient(135deg, rgba(145,47,60,.03) 0%, rgba(110,193,228,.03) 100%);
}
.popular-posts h2 {
    font-family: var(--font-heading);
    text-align: center;
    margin-bottom: 1.5rem;
}
.popular-list {
    max-width: 700px;
    margin: 0 auto;
}
.popular-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: .5rem;
    transition: all .2s var(--ease);
}
.popular-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-card);
    transform: translateX(4px);
    color: var(--primary);
}
.popular-rank {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .9rem;
}
.popular-title {
    font-weight: 500;
    font-size: .95rem;
}
.popular-thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}
.popular-item-placeholder {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--primary) 0%, #54595F 100%);
}

/* --- Deals Page --- */
.deals-page {
    padding: 2rem 0 3rem;
}
.deals-intro {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 2.5rem;
    max-width: 700px;
}
.deals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}
.deal-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    transition: all .3s var(--ease);
}
.deal-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}
.deal-card-icon {
    font-size: 2rem;
    margin-bottom: .5rem;
}
.deal-card h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: .5rem;
}
.deal-highlights {
    list-style: none;
    margin: 1rem 0;
}
.deal-highlights li {
    padding: .35rem 0;
    padding-left: 1.2rem;
    position: relative;
    font-size: .9rem;
    color: var(--text-light);
}
.deal-highlights li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 700;
}
.deals-faq-section {
    margin: 2.5rem 0;
    max-width: 800px;
}
.deals-faq-section h2 {
    margin-bottom: 1rem;
}
.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: .5rem;
    background: var(--card);
}
.faq-item summary {
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 600;
    font-size: .95rem;
    list-style: none;
}
.faq-item summary::before {
    content: '+';
    display: inline-block;
    width: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}
.faq-item[open] summary::before {
    content: '\2212';
}
.faq-item p {
    padding: 0 1.25rem 1rem 2.75rem;
    color: var(--text-light);
    font-size: .9rem;
    line-height: 1.7;
}
.deals-cta-section {
    text-align: center;
    padding: 2.5rem;
    background: linear-gradient(135deg, rgba(145,47,60,.04) 0%, rgba(110,193,228,.04) 100%);
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
}
.deals-cta-section h2 {
    font-family: var(--font-heading);
    margin-bottom: .75rem;
}
.deals-cta-buttons {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}
.deals-disclaimer {
    font-size: .82rem;
    color: var(--text-light);
    padding: 1rem 1.25rem;
    background: rgba(0,0,0,.02);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

/* --- Calculator Page --- */
.calculator-page {
    padding: 2rem 0 3rem;
}
.calculator-intro {
    font-size: 1.05rem;
    color: var(--text-light);
    margin-bottom: 2rem;
    max-width: 700px;
}
.calculator-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}
.calculator-inputs {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.75rem;
}
.calculator-inputs h2,
.calculator-results h2 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--primary);
}
.calc-field {
    margin-bottom: 1.25rem;
}
.calc-field label {
    display: block;
    font-weight: 600;
    font-size: .88rem;
    margin-bottom: .35rem;
    color: var(--text);
}
.calc-field select,
.calc-field input[type="number"] {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .9rem;
    background: var(--bg);
    color: var(--text);
    transition: border-color .2s;
}
.calc-field select:focus,
.calc-field input:focus {
    border-color: var(--primary);
    outline: none;
}
.calc-input-group {
    display: flex;
    align-items: center;
    gap: 0;
}
.calc-currency {
    background: var(--border);
    padding: .6rem .75rem;
    border: 1px solid var(--border);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    font-weight: 600;
    font-size: .9rem;
}
.calc-input-group input {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}
.calc-field input[type="range"] {
    width: 100%;
    margin-top: .25rem;
    accent-color: var(--primary);
}
.calc-field output {
    display: block;
    text-align: center;
    font-weight: 600;
    font-size: .88rem;
    color: var(--primary);
    margin-top: .25rem;
}

.calculator-results {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1.75rem;
}
.calc-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.calc-result-item {
    text-align: center;
    padding: 1rem .75rem;
    background: var(--bg);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.calc-result-icon {
    display: block;
    font-size: 1.5rem;
    margin-bottom: .25rem;
}
.calc-result-label {
    display: block;
    font-size: .75rem;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: .2rem;
}
.calc-result-value {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    font-family: var(--font-heading);
}
.calc-tips {
    background: rgba(145,47,60,.04);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
}
.calc-tips h3 {
    font-size: .9rem;
    font-weight: 700;
    margin-bottom: .5rem;
}
.calc-tips ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.calc-tips li {
    font-size: .85rem;
    color: var(--text-light);
    padding: .25rem 0 .25rem 1.2rem;
    position: relative;
}
.calc-tips li::before {
    content: "\1F4A1";
    position: absolute;
    left: 0;
    font-size: .75rem;
}
.calculator-guides {
    text-align: center;
}
.calculator-guides h2 {
    font-family: var(--font-heading);
    margin-bottom: 1rem;
}

/* --- Static Page (privacy, etc.) --- */
.static-page {
    padding: 2rem 0 3rem;
}
.static-page h1 {
    font-family: var(--font-heading);
    font-size: 2rem;
    margin-bottom: .5rem;
}

/* --- Newsletter Message --- */
.newsletter-msg {
    margin-top: .75rem;
    font-size: .9rem;
    font-weight: 500;
}
.newsletter-msg.success { color: #2e7d32; }
.newsletter-msg.error { color: #c62828; }

/* --- Where to Buy CTA (inline in posts) --- */
.where-to-buy {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(145,47,60,.06) 0%, rgba(255,188,125,.08) 100%);
    border: 2px solid var(--accent);
    border-radius: var(--radius-md);
    text-align: center;
}
.where-to-buy h3 {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    margin-bottom: .5rem;
}
.where-to-buy p {
    font-size: .9rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}
.where-to-buy .btn {
    margin: 0 .4rem;
}

/* --- Responsive overrides for new components --- */
@media (max-width: 768px) {
    .calculator-layout {
        grid-template-columns: 1fr;
    }
    .deals-grid {
        grid-template-columns: 1fr;
    }
    .author-bio-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .category-grid {
        justify-content: flex-start;
    }
    .category-card {
        min-width: 130px;
        padding: .75rem 1rem;
    }
    .calc-result-grid {
        grid-template-columns: 1fr 1fr;
    }
    .category-filter {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .75rem;
    }
    .category-filter-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* =========================================
   About page — Team grid & author cards
   ========================================= */
.team-grid {
    display: grid;
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
}
@media (min-width: 600px) {
    .team-grid { grid-template-columns: 1fr 1fr; }
}
.author-card {
    display: flex;
    gap: 1rem;
    background: rgba(0, 0, 0, .03);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 12px;
    padding: 1rem;
}
.author-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: #912F3C;
}
.author-card-name {
    font-weight: 700;
    margin: 0;
    font-size: 1.05rem;
}
.author-card-role {
    color: #912F3C;
    font-weight: 600;
    margin: .1rem 0 .5rem;
    font-size: .9rem;
}
.author-card-bio {
    margin: .25rem 0;
    font-size: .92rem;
    line-height: 1.5;
}
.author-card-expertise {
    font-size: .82rem;
    color: #666;
    margin: .4rem 0 0;
}


/* ============================================================
   WARM SMOKE & BRASS — dark theme layer (appended 2026-06-20)
   Redefines palette tokens + overrides hardcoded-light components
   + adds atmosphere, mashrabiya divider, article furniture.
   To revert: re-upload style-backup.css over style.css.
   ============================================================ */

/* 1+2. Palette: warm-smoke dark base, brass+copper accents, no sky-blue.
   --primary is remapped to BRASS so all foreground brand uses (links, drop
   cap, active nav, read-more) read correctly on dark; background fills that
   used --primary are overridden below. --sky remapped to brass to kill the clash. */
:root{
  --primary:#C9A24B;          /* brass — foreground brand/accent */
  --primary-dark:#A8843A;     /* deep brass for gradients/hover */
  --accent:#D4A574;           /* soft gold/copper highlight */
  --accent-hover:#E0B782;
  --copper:#9A6A4F;
  --brass:#C9A24B;
  --oxblood:#9E3340;          /* deep wine secondary (occasional pop) */
  --sky:#C9A24B;              /* was clashing #6EC1E4 → brass */
  --text:#E8E2D8;             /* warm off-white (not pure white) */
  --text-light:#ADA398;       /* muted warm grey (>4.5:1 on base) */
  --bg:#14110F;               /* warm smoke near-black (not #000) */
  --card:#1F1A16;             /* raised surface (lighter than bg = elevation) */
  --card-2:#26201B;           /* second elevation */
  --border:rgba(232,226,216,.12);
  --font-heading:'Cormorant', Georgia, 'Times New Roman', serif;
  --shadow-card:0 1px 0 rgba(232,226,216,.04), 0 10px 30px rgba(0,0,0,.45);
  --shadow-card-hover:0 1px 0 rgba(232,226,216,.07), 0 18px 44px rgba(0,0,0,.6);
  --shadow-btn:0 6px 20px rgba(0,0,0,.45);
}

/* 8. Atmosphere — warm lantern glow + copper floor glow on the body bg (sits
   behind all content, fixed on scroll). Pure CSS, zero extra requests. */
body{
  background:
    radial-gradient(115% 70% at 50% -8%, rgba(201,162,75,.10), transparent 55%),
    radial-gradient(120% 85% at 50% 115%, rgba(154,106,79,.06), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
}
/* subtle vignette + fine grain on TOP (never behind body text it can't read —
   centre 58% stays clear; grain is faint and tiles small for performance). */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:3;
  background:
    radial-gradient(125% 110% at 50% 48%, transparent 58%, rgba(0,0,0,.5)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-size:cover, 160px 160px;
}
::selection{ background:var(--brass); color:#16120E; }

/* Respect reduced-motion: kill the page/hero/card/badge animations */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* 3. Type — Cormorant display headings (set with a touch more size + weight),
   Inter body unchanged. Wide-tracked caps reserved for logo/labels. */
h1,h2,h3,h4,h5,h6{ font-family:var(--font-heading); color:var(--text); font-weight:600; letter-spacing:0; }
h1{ font-size:2.6rem; } h2{ font-size:1.95rem; } h3{ font-size:1.45rem; }
a{ color:var(--brass); } a:hover{ color:var(--accent-hover); }

/* 10. Header — translucent warm charcoal, brass hairline, tracked logo */
.site-header{ background:rgba(22,18,15,.86); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 1px 0 rgba(232,226,216,.06); }
.site-header.scrolled{ background:rgba(18,15,12,.95); box-shadow:0 8px 30px rgba(0,0,0,.5); }
.site-header::after{ background:linear-gradient(90deg, transparent, var(--brass) 30%, var(--copper) 70%, transparent); height:1px; opacity:.55; }
.site-logo{ color:var(--text); letter-spacing:.12em; text-transform:uppercase; font-size:1.15rem; font-weight:600; }
.site-header.scrolled .site-logo{ font-size:1.05rem; }
.site-logo:hover{ color:var(--brass); }
.logo-icon path,.logo-icon ellipse,.logo-icon line{ stroke:var(--brass)!important; }
.logo-icon ellipse{ fill:var(--brass)!important; }
.site-nav a{ color:rgba(232,226,216,.78); font-weight:500; letter-spacing:.04em; }
.site-nav a:hover{ color:var(--text); }
.site-nav a.active{ color:var(--brass); }
.site-nav a::after,.site-nav a.active::after{ background:var(--brass); }
.nav-toggle span{ background:var(--text); }
.reading-progress{ background:linear-gradient(90deg, var(--brass), var(--copper)); }

/* Buttons — brass primary with dark ink; oxblood-outline secondary */
.btn-primary{ background:linear-gradient(135deg, var(--brass), var(--primary-dark)); color:#16120E; box-shadow:var(--shadow-btn); }
.btn-primary:hover{ background:linear-gradient(135deg, var(--accent-hover), var(--brass)); color:#16120E; }
.btn-secondary{ color:var(--brass); border-color:var(--brass); }
.btn-secondary:hover{ background:var(--brass); color:#16120E; border-color:var(--brass); }

/* 5. Homepage hero — dark, warm lantern glow, no blue; brass eyebrow-ready */
.hero{ background:linear-gradient(160deg,#1B1611 0%, #14110F 60%, #100D0B 100%); color:var(--text); }
.hero::before{ background:
    radial-gradient(circle at 50% 0%, rgba(201,162,75,.18) 0%, transparent 55%),
    radial-gradient(circle at 18% 80%, rgba(154,106,79,.10) 0%, transparent 45%); }
.hero::after{ background:var(--bg); }
.hero h1{ color:var(--text); font-weight:600; }
.hero p{ color:var(--text-light); opacity:1; }
.hero .btn-primary{ background:linear-gradient(135deg,var(--brass),var(--primary-dark)); color:#16120E; box-shadow:0 6px 24px rgba(201,162,75,.25); }
.hero .btn-primary:hover{ background:linear-gradient(135deg,var(--accent-hover),var(--brass)); color:#16120E; }

/* 7 + furniture. Mashrabiya / khatam brass divider (replaces gradient bars) */
.section-divider,
.post-content hr{
  width:auto; max-width:240px; height:24px; border:none; border-radius:0;
  margin:2.75rem auto; background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='24' viewBox='0 0 240 24'%3E%3Cg stroke='%23C9A24B' stroke-width='1' opacity='0.8'%3E%3Cline x1='6' y1='12' x2='96' y2='12'/%3E%3Cline x1='144' y1='12' x2='234' y2='12'/%3E%3C/g%3E%3Cg fill='%23C9A24B'%3E%3Cpath d='M120 3 l3.6 8.5 -3.6 8.5 -3.6 -8.5 z'/%3E%3Cpath d='M111 12 l9 -3.6 9 3.6 -9 3.6 z' opacity='0.65'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}

/* 10. Cards — dark elevated surface, brass hover, refined meta */
.post-card{ background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-card); }
.post-card:hover{ box-shadow:var(--shadow-card-hover); border-color:rgba(201,162,75,.3); }
.post-card-body h2 a,.post-card-body h3 a{ color:var(--text); }
.post-card-body h2 a:hover,.post-card-body h3 a:hover{ color:var(--brass); }
.post-card-placeholder{ background:linear-gradient(135deg,#241E18,#191410); color:var(--brass); }
.post-card:hover img{ transform:scale(1.05); }
/* 6. Consistent warm low-key image grade (the #1 cheap-tell fix per competitor research) */
.post-card img,.post-featured-image img,.hero img,.related-posts img,.single-post .post-content img{
  filter:saturate(.9) contrast(1.03) brightness(.93) sepia(.06);
  transition:filter .4s var(--ease), transform .5s var(--ease);
}
.post-card:hover img,.post-featured-image:hover img{ filter:saturate(.98) contrast(1.04) brightness(.99) sepia(.03); }
.reading-time-badge{ background:rgba(201,162,75,.10); color:var(--text-light); }
.new-badge{ background:linear-gradient(135deg,var(--oxblood),#7d2733); color:#fff; }
.read-more{ color:var(--brass); } .read-more:hover{ color:var(--accent-hover); }
/* brass small-caps category eyebrow (works if template adds .post-card-category / .eyebrow) */
.eyebrow,.post-card-category,.post-eyebrow{
  display:inline-block; font-family:var(--font-body); font-size:.7rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--brass); margin-bottom:.5rem;
}

/* 4 + body. Reading column: bigger body, warmer rhythm, brass furniture */
.post-content{ font-size:1.18rem; line-height:1.75; color:var(--text); }
@media (max-width:680px){ .post-content{ font-size:1.06rem; } }
.post-content > p:first-of-type::first-letter{ color:var(--brass); }
.post-content a{ color:var(--brass); text-decoration-color:rgba(201,162,75,.4); }
.post-content a:hover{ color:var(--accent-hover); text-decoration-color:var(--accent-hover); }

/* Pull-quote / blockquote — dark, brass rule, off-white */
.post-content blockquote{ background:var(--card); color:var(--text); border-left:3px solid var(--brass); font-style:italic; }
.post-content p code,.post-content li code{ background:rgba(201,162,75,.12); color:var(--accent-hover); }

/* 6 (table) + competitor add — designed dark comparison/content tables */
.post-content table,.comparison-table{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius-sm); }
.post-content table th,.comparison-table th{ background:#241E18; color:var(--brass); border-color:var(--border); text-transform:uppercase; letter-spacing:.04em; font-size:.82rem; }
.post-content table td,.comparison-table td{ border-color:var(--border); color:var(--text); }
.post-content table tr:nth-child(even),.comparison-table tr:nth-child(even){ background:rgba(232,226,216,.03); }
.post-content table tr:hover,.comparison-table tr:hover{ background:rgba(201,162,75,.07); }
.comparison-table td:last-child{ color:var(--brass); }

/* Quick Answer — dark warm callout, brass rule (the "Our verdict" box) */
.quick-answer{ background:linear-gradient(135deg, rgba(201,162,75,.10), rgba(154,106,79,.06)); border-left:3px solid var(--brass); color:var(--text); }
.quick-answer strong:first-child{ color:var(--brass); }

/* 9. TOC — dark surface, brass active scroll-spy (sticky sidebar already exists) */
.toc{ background:var(--card); border:1px solid var(--border); }
.toc-title{ color:var(--text); }
.toc li a{ color:var(--text-light); }
.toc li a:hover,.toc li a.active{ color:var(--brass); border-left-color:var(--brass); }
.toc-sidebar .toc{ background:transparent; border:none; }
.toc-sidebar .toc-title{ color:var(--text-light); border-bottom-color:var(--border); }

/* Article header + featured image scrim */
.post-header{ border-top:1px solid var(--border); padding-top:1.5rem; }
.post-header h1{ font-weight:600; }
.breadcrumbs .sep{ color:var(--text-light); }
.breadcrumbs a:hover,.breadcrumbs .current{ color:var(--brass); }
.post-featured-image{ box-shadow:0 20px 50px rgba(0,0,0,.5); }
.post-featured-image::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 45%, rgba(16,13,11,.5)); }
.reading-time{ color:var(--text-light); border-left-color:var(--border); }

/* Search / form inputs — dark */
.search-form input[type="search"],.contact-form input,.contact-form textarea,.contact-form select{
  background:var(--card); color:var(--text); border-color:var(--border); }
.search-form input[type="search"]::placeholder{ color:var(--text-light); }
.search-form input[type="search"]:focus{ border-color:var(--brass); box-shadow:0 0 0 3px rgba(201,162,75,.15); }
.contact-form{ background:var(--card); border-color:var(--border); }

/* Newsletter CTA — warm charcoal + lantern glow (no blue) */
.newsletter-cta{ background:linear-gradient(160deg,#1C1611,#13100D); color:var(--text); }
.newsletter-cta::before{ background:
    radial-gradient(circle at 30% 40%, rgba(201,162,75,.16), transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(154,106,79,.10), transparent 50%); }
.newsletter-cta h2{ color:var(--text); font-weight:600; }
.newsletter-cta p{ color:var(--text-light); opacity:1; }
.newsletter-cta-form input[type="email"]{ background:var(--card); color:var(--text); }
.newsletter-cta-form .btn{ background:var(--brass); color:#16120E; }
.newsletter-cta-form .btn:hover{ background:var(--accent-hover); color:#16120E; }
.newsletter-consent a{ color:var(--brass); }

/* Footer — warm charcoal, brass section rules */
.site-footer{ background:#100D0B; color:var(--text-light); border-top:1px solid var(--border); }
.footer-grid{ border-bottom-color:var(--border); }
.footer-col h3{ color:var(--text); }
.footer-col h3::after{ background:var(--brass); }
.footer-links a{ color:var(--text-light); }
.footer-links a:hover{ color:var(--brass); }
.footer-bottom{ color:var(--text-light); }
.footer-about-link{ color:var(--brass)!important; }
.footer-about-link:hover{ color:var(--accent-hover)!important; }

/* Cookie banner — charcoal */
.cookie-banner{ background:#1C1814; color:var(--text); border-top:1px solid var(--border); }

/* Misc surfaces on dark */
.error-page h1{ color:var(--brass); text-shadow:none; }
.lightbox-overlay{ background:rgba(8,6,5,.92); }
.no-posts,.page-info,.post-count-info{ color:var(--text-light); }

/* ======================================================================
   POLISH PASS — 50-item UI audit fixes (2026-06-27). CSS-implementable items.
   ====================================================================== */

/* #1 About "Meet the Team" cards were full light-theme */
.author-card,.team-card,.team-member{ background:var(--card)!important; border:1px solid var(--border)!important; }
.author-photo,.team-photo,.author-avatar{ background:#241E18!important; color:var(--brass)!important; }
.author-card-role,.team-role,.author-role{ color:var(--brass)!important; }
.author-card-expertise,.author-card-bio,.team-bio,.author-card p{ color:var(--text-light)!important; }

/* #2 Alerts + form messages were light Bootstrap pastels */
.alert-success{ background:rgba(70,140,90,.16)!important; color:#A6D8B5!important; border:1px solid rgba(70,140,90,.4)!important; }
.alert-error{ background:rgba(158,51,64,.18)!important; color:#E8AAB1!important; border:1px solid rgba(158,51,64,.42)!important; }
.alert-warning{ background:rgba(201,162,75,.15)!important; color:var(--accent-hover)!important; border:1px solid rgba(201,162,75,.4)!important; }
.newsletter-msg.success,.form-message.success{ color:#A6D8B5!important; }
.newsletter-msg.error,.form-message.error{ color:#E8AAB1!important; }

/* #3 Homepage/section gradients still leaking the retired sky-blue + oxblood */
.popular-posts{ background:linear-gradient(135deg, rgba(201,162,75,.05), rgba(154,106,79,.04))!important; }
.deals-cta-section,.deals-cta{ background:linear-gradient(135deg, rgba(201,162,75,.06), rgba(154,106,79,.05))!important; }
.where-to-buy{ background:linear-gradient(135deg, rgba(201,162,75,.08), rgba(154,106,79,.06))!important; border-color:var(--brass)!important; }
.deals-disclaimer{ color:var(--text-light); }

/* #5 Calculator chip/tips/focus */
.calc-currency{ background:var(--card-2)!important; color:var(--text-light)!important; border-color:var(--border)!important; }
.calc-tips{ background:rgba(201,162,75,.06)!important; border-color:var(--border)!important; }
.calc-field input:focus,.calc-field select:focus{ box-shadow:0 0 0 3px rgba(201,162,75,.15)!important; }
.calc-result-item,.calc-result{ background:var(--card); border:1px solid var(--border); }

/* #6 Global keyboard focus ring (none existed beyond inputs) */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,summary:focus-visible,.post-card a:focus-visible{
  outline:3px solid var(--brass)!important; outline-offset:2px; border-radius:3px;
}
.post-card:focus-within{ border-color:rgba(201,162,75,.5); }

/* #21 Cormorant weight + hierarchy on dark (sub-headings were frail) */
.post-content h2,.hero h1,.post-header h1,.newsletter-cta h2{ font-weight:700; }
.post-content h3{ font-weight:700; font-size:1.5rem; color:#EFE9DF; }
.post-content h4{ font-weight:700; font-size:1.15rem; color:var(--text); }
.post-content h5,.post-content h6{ font-family:var(--font-body); font-weight:600; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-light); }
.footer-col h3,.toc-sidebar .toc-title{ font-family:var(--font-body); font-weight:600; letter-spacing:.1em; text-transform:uppercase; font-size:.82rem; }

/* #17 Drop cap robustness + serif size */
.post-content > p:first-of-type::first-letter,
.post-content > .quick-answer + p::first-letter,
.post-content p.lead::first-letter{
  float:left; font-family:var(--font-heading); font-weight:700; font-size:4rem; line-height:.78;
  padding:.32rem .6rem 0 0; color:var(--brass);
}

/* #22 Mashrabiya divider — fuller 8-point-star motif + copper centre */
.section-divider,.post-content hr{
  width:auto; max-width:300px; height:28px; border:none; border-radius:0; margin:2.75rem auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='28'%3E%3Cg stroke='%23C9A24B' stroke-width='1.3' fill='none'%3E%3Cline x1='8' y1='14' x2='122' y2='14'/%3E%3Cline x1='178' y1='14' x2='292' y2='14'/%3E%3Crect x='142' y='6' width='16' height='16'/%3E%3Crect x='142' y='6' width='16' height='16' transform='rotate(45 150 14)'/%3E%3C/g%3E%3Ccircle cx='150' cy='14' r='1.7' fill='%239A6A4F'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* #23 Grain/vignette behind content (was z-index:3 over body text); soften vignette */
body::after{
  z-index:1!important;
  background:
    radial-gradient(125% 110% at 50% 48%, transparent 62%, rgba(0,0,0,.34)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E")!important;
  background-size:cover, 160px 160px!important;
}
.site-main,.site-header,.site-footer{ position:relative; z-index:2; }

/* #24 Remove emoji stopwatch on cards (share glyphs swapped in template) */
.reading-time-badge::before{ content:'\00B7'!important; font-size:1em; margin-right:.15rem; color:var(--brass); }

/* #25 Secondary button = the second metal (copper), distinct from brass primary */
.btn-secondary{ color:var(--accent)!important; border-color:var(--copper)!important; }
.btn-secondary:hover{ background:var(--copper)!important; color:#16120E!important; border-color:var(--copper)!important; }

/* #26 Table scroll affordance + kill the dead sticky header */
.comparison-table th{ position:static!important; }

/* #33 Skip-link contrast (was white-on-brass 2.5:1) */
.skip-link{ background:#1F1A16!important; color:var(--brass)!important; outline:2px solid var(--brass); }

/* #38 Anchor offset under the sticky header */
:target,.post-content h2,.post-content h3{ scroll-margin-top:76px; }

/* #40 Image grade off inline article images; no hover filter re-raster */
.single-post .post-content img{ filter:none!important; }
.post-card img,.post-featured-image img{ transition:transform .5s var(--ease)!important; }

/* #47 Featured-image scrim only when a caption exists */
.post-featured-image::after{ background:none; }
.post-featured-image:has(figcaption)::after{ background:linear-gradient(180deg, transparent 58%, rgba(16,13,11,.5)); }

/* #48 Hover recolours the title only, not the whole row */
.popular-item:hover{ color:var(--text)!important; background:var(--card-2); transform:none!important; border-color:rgba(201,162,75,.35); }
.popular-item:hover .popular-title{ color:var(--brass)!important; }
.category-card:hover{ color:var(--text)!important; }
.category-card:hover .category-card-name{ color:var(--brass)!important; }

/* #49 One input radius (was 50px stadium vs 8px rect) */
.newsletter-cta-form input[type="email"],.search-form input[type="search"]{ border-radius:8px!important; }

/* #50 In-content underline more visible */
.post-content a{ text-decoration-color:rgba(201,162,75,.7)!important; }

/* #31 Card meta: quiet reading-time, eyebrow-style category (not filled pills) */
.post-card .reading-time-badge{ background:none!important; padding:0!important; color:var(--text-light)!important; }
.post-card .reading-time-badge::before{ content:'\00B7'!important; margin-right:.35rem; color:var(--brass); }
.category-badge-sm{ background:none!important; color:var(--brass)!important; padding:0!important; border:none!important; font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }

/* #7 + #18 + #45 Mobile: 16px inputs (no iOS zoom), drop fixed bg + grain + header blur */
@media (max-width:768px){
  .search-form input,.newsletter-cta-form input,.form-group input,.form-group textarea,
  .form-group select,.calc-field select,.calc-field input,.contact-form input,.contact-form textarea{ font-size:16px!important; }
  body{ background-attachment:scroll!important; }
  body::after{ position:absolute!important; height:100%!important; }
  .site-header{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; background:rgba(20,17,15,.97)!important; }
  .post-content table,.comparison-table{ background-image:radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), transparent)!important; background-position:right center!important; background-repeat:no-repeat!important; background-size:36px 100%!important; }
  .toc-mobile .toc li a{ padding:.6rem .75rem; }
  .share-link{ width:46px!important; height:46px!important; }
  .read-more{ padding:.55rem 0; }
  .btn-sm{ min-height:44px; }
  .post-content > p:first-of-type::first-letter,.post-content p.lead::first-letter{ font-size:3rem; padding-right:.4rem; }
}

/* #34 Reduced-motion: reveal cards, kill heavy paint */
@media (prefers-reduced-motion: reduce){
  .fade-in-card{ opacity:1!important; transform:none!important; }
  body{ background-attachment:scroll!important; }
  body::after{ display:none!important; }
  .post-card img,.post-featured-image img,.hero img{ transition:none!important; }
}

/* #19 Nav: categories dropdown + header search */
.nav-dropdown{ position:relative; }
.nav-dropdown-toggle::after{ content:'\25BE'; font-size:.7em; margin-left:.3rem; color:var(--brass); opacity:.85; }
.nav-dropdown-menu{
  position:absolute; top:100%; left:0; min-width:232px; padding:.5rem 0; margin-top:.4rem;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.5); opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s var(--ease, ease), transform .18s var(--ease, ease), visibility .18s; z-index:60;
}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-dropdown-menu a{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.55rem 1.1rem; font-size:.92rem; white-space:nowrap; }
.nav-dropdown-menu a:hover{ background:var(--card-2); color:var(--brass); }
.nav-cat-count{ font-size:.72rem; color:var(--text-light); background:rgba(201,162,75,.12); border-radius:20px; padding:.05rem .5rem; }
.nav-search{ display:flex; align-items:center; }
.nav-search input[type="search"]{
  background:var(--card-2); border:1px solid var(--border); color:var(--text); border-radius:8px;
  padding:.45rem .8rem; font-size:.9rem; width:150px; transition:width .25s var(--ease, ease), border-color .2s;
}
.nav-search input[type="search"]::placeholder{ color:var(--text-light); }
.nav-search input[type="search"]:focus{ width:210px; border-color:var(--brass); outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.15); }
@media (max-width:768px){
  .nav-dropdown-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background:transparent; padding:.15rem 0 .5rem 1rem; min-width:0; margin:0; }
  .nav-dropdown-toggle::after{ display:none; }
  .nav-search{ width:100%; padding:.5rem 0; }
  .nav-search input[type="search"],.nav-search input[type="search"]:focus{ width:100%; }
}

/* #24 Share bar — monochrome brass SVG icons */
.share-bar .share-link{ background:transparent!important; color:var(--text-light)!important; border:1px solid var(--border)!important; display:inline-flex; align-items:center; justify-content:center; }
.share-bar .share-link:hover{ color:var(--brass)!important; border-color:var(--brass)!important; background:rgba(201,162,75,.08)!important; }
.share-bar .share-link svg{ width:18px; height:18px; }

/* #14 End-of-article CTA */
.post-cta{ margin:2.5rem 0 0; padding:1.75rem; background:linear-gradient(135deg, rgba(201,162,75,.06), rgba(154,106,79,.05)); border:1px solid var(--border); border-radius:14px; }
.post-cta-eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin:0 0 1rem; }
.post-cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.post-cta-card{ display:flex; flex-direction:column; gap:.35rem; padding:1.1rem 1.2rem; background:var(--card); border:1px solid var(--border); border-radius:10px; transition:border-color .2s, transform .2s; }
.post-cta-card:hover{ border-color:var(--brass); transform:translateY(-2px); }
.post-cta-title{ font-family:var(--font-heading); font-size:1.2rem; font-weight:700; color:var(--text); }
.post-cta-desc{ font-size:.9rem; color:var(--text-light); line-height:1.45; }
.post-cta-go{ font-size:.82rem; font-weight:600; color:var(--brass); margin-top:.2rem; }
@media (max-width:768px){ .post-cta-grid{ grid-template-columns:1fr; } }

/* #32 Related-card eyebrow + excerpt */
.related-posts .post-card-body{ display:flex; flex-direction:column; gap:.5rem; }
.related-posts .post-card-excerpt{ font-size:.9rem; color:var(--text-light); line-height:1.5; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.related-posts .post-card-meta{ display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--text-light); }

/* #13 Review verdict component (drop the markup snippet into review articles) */
.verdict-card{ display:grid; grid-template-columns:auto 1fr; gap:1.25rem 1.5rem; align-items:center; margin:2rem 0; padding:1.5rem 1.75rem; background:var(--card); border:1px solid var(--border); border-left:3px solid var(--brass); border-radius:12px; }
.verdict-score{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:96px; aspect-ratio:1; border-radius:50%; border:2px solid var(--brass); background:rgba(201,162,75,.08); }
.verdict-score b{ font-family:var(--font-heading); font-size:2.4rem; font-weight:700; line-height:1; color:var(--brass); }
.verdict-score span{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-light); margin-top:.25rem; }
.verdict-verdict{ font-family:var(--font-heading); font-size:1.3rem; color:var(--text); margin:0 0 .35rem; }
.verdict-bottomline{ color:var(--text-light); margin:0; }
.pros-cons{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1.75rem 0; }
.pros-cons ul{ list-style:none; padding:0; margin:.4rem 0 0; }
.pros-cons li{ position:relative; padding-left:1.6rem; margin-bottom:.5rem; line-height:1.5; }
.pros-cons .pros h4,.pros-cons .cons h4{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin:0; }
.pros-cons .pros h4{ color:#9FD3AE; } .pros-cons .cons h4{ color:#E8AAB1; }
.pros-cons .pros li::before{ content:'\2713'; position:absolute; left:0; color:#9FD3AE; font-weight:700; }
.pros-cons .cons li::before{ content:'\2715'; position:absolute; left:0; color:#E8AAB1; font-weight:700; }
@media (max-width:600px){ .verdict-card{ grid-template-columns:1fr; text-align:center; } .verdict-score{ margin:0 auto; } .pros-cons{ grid-template-columns:1fr; } }

/* #11 Hero eyebrow + dual CTAs */
.hero-eyebrow{ font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin:0 0 1rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:1.75rem; }

/* #12 Featured lead card */
.post-featured-card{ display:grid; grid-template-columns:1.15fr 1fr; gap:0; margin:1.5rem 0 2.5rem; background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:border-color .25s, transform .25s, box-shadow .25s; }
.post-featured-card:hover{ border-color:rgba(201,162,75,.45); transform:translateY(-3px); box-shadow:var(--shadow-card-hover); }
.post-featured-card-media{ position:relative; min-height:260px; overflow:hidden; }
.post-featured-card-media img{ width:100%; height:100%; object-fit:cover; }
.post-featured-card-body{ padding:2rem 2.25rem; display:flex; flex-direction:column; gap:.6rem; justify-content:center; align-items:flex-start; }
.post-featured-card-body h3{ font-family:var(--font-heading); font-size:2rem; line-height:1.12; font-weight:700; margin:.2rem 0; color:var(--text); }
.post-featured-card-body .post-card-excerpt{ font-size:1rem; color:var(--text-light); line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.featured-flag{ font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#16120E; background:var(--brass); padding:.2rem .7rem; border-radius:20px; }
@media (max-width:860px){ .post-featured-card{ grid-template-columns:1fr; } .post-featured-card-media{ min-height:0; aspect-ratio:16/9; } .post-featured-card-body{ padding:1.5rem; } .post-featured-card-body h3{ font-size:1.5rem; } }

/* #35 Homepage calculator feature */
.home-tool-cta{ padding:1rem 0 2.5rem; }
.home-tool-inner{ padding:2.5rem; background:linear-gradient(135deg, rgba(201,162,75,.08), rgba(154,106,79,.06)); border:1px solid var(--border); border-radius:16px; text-align:center; }
.home-tool-inner h2{ margin:.3rem 0 .6rem; }
.home-tool-inner p{ color:var(--text-light); max-width:560px; margin:0 auto 1.4rem; }

/* #37 Footer social + contact/RSS */
.footer-contact{ margin:.6rem 0 0; font-size:.85rem; color:var(--text-light); }
.footer-social{ display:flex; gap:.6rem; align-items:center; }
.footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--border); border-radius:50%; color:var(--text-light); transition:color .2s, border-color .2s, background .2s; }
.footer-social a:hover{ color:var(--brass); border-color:var(--brass); background:rgba(201,162,75,.08); }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }

/* #29 Newsletter eyebrow + #15 author methodology line */
.newsletter-eyebrow{ font-size:.72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin:0 0 .5rem; }
.author-meta{ font-size:.85rem; color:var(--text-light); margin:.5rem 0 0; }
.author-meta a{ color:var(--brass); white-space:nowrap; }

/* #36 404 page — search, popular guides, categories */
.error-search{ display:flex; gap:.5rem; max-width:440px; margin:1.5rem auto; }
.error-search input{ flex:1; background:var(--card-2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:.6rem .9rem; font-size:16px; }
.error-search input:focus{ border-color:var(--brass); outline:none; box-shadow:0 0 0 3px rgba(201,162,75,.15); }
.error-popular{ max-width:480px; margin:2.5rem auto 0; text-align:left; }
.error-popular h2{ font-size:1rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-light); }
.error-popular ul{ list-style:none; padding:0; margin:.75rem 0 0; }
.error-popular li{ border-bottom:1px solid var(--border); }
.error-popular li a{ display:block; padding:.6rem 0; color:var(--text); }
.error-popular li a:hover{ color:var(--brass); }
.error-categories{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:2rem; }

/* #43 Listing count + numbered pagination */
.listing-count{ color:var(--text-light); font-size:.9rem; margin:.25rem 0 1.25rem; }
.pagination{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; justify-content:center; margin-top:2.5rem; }
.pagination .page-link{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 .5rem; border:1px solid var(--border); border-radius:8px; color:var(--text-light); font-weight:600; transition:color .2s, border-color .2s, background .2s; }
.pagination .page-link:hover{ color:var(--brass); border-color:var(--brass); }
.pagination .page-link.current{ background:var(--brass); border-color:var(--brass); color:#16120E; }

/* #39 Mobile ToC as a collapsible details */
.toc-mobile > summary{ cursor:pointer; list-style:none; font-family:var(--font-body); font-weight:600; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); padding:.85rem 1rem; border:1px solid var(--border); border-radius:8px; background:var(--card); display:flex; align-items:center; justify-content:space-between; }
.toc-mobile > summary::-webkit-details-marker{ display:none; }
.toc-mobile > summary::after{ content:'\25BE'; transition:transform .2s; }
.toc-mobile[open] > summary::after{ transform:rotate(180deg); }
.toc-mobile[open] > summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.toc-mobile .toc-title{ display:none; }

/* ======================================================================
   WOW PASS — atmospheric, art-directed homepage (2026-06-27)
   ====================================================================== */

/* #1 + #2 Living-smoke hero with oversized editorial type */
.hero.hero-atmos{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:min(82vh,640px); display:flex; align-items:center; padding:0;
  background:
    radial-gradient(120% 90% at 16% 4%, rgba(201,162,75,.15), transparent 55%),
    radial-gradient(120% 95% at 92% 116%, rgba(154,106,79,.14), transparent 55%),
    var(--bg);
  border-bottom:1px solid rgba(232,226,216,.10);
}
.hero.hero-atmos .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.5;filter:saturate(.85) contrast(1.02) brightness(.55) sepia(.08);}
.hero-smoke{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hero-smoke .smoke{position:absolute;border-radius:50%;filter:blur(48px);opacity:.55;mix-blend-mode:screen;will-change:transform;}
.hero-smoke .s1{width:48vw;height:48vw;min-width:380px;min-height:380px;left:-6%;top:-22%;background:radial-gradient(closest-side,rgba(201,162,75,.18),transparent 72%);animation:heroDrift1 27s ease-in-out infinite;}
.hero-smoke .s2{width:42vw;height:42vw;min-width:320px;min-height:320px;right:-2%;top:14%;background:radial-gradient(closest-side,rgba(184,172,154,.10),transparent 72%);animation:heroDrift2 34s ease-in-out infinite;}
.hero-smoke .s3{width:40vw;height:40vw;min-width:300px;min-height:300px;left:32%;bottom:-26%;background:radial-gradient(closest-side,rgba(154,106,79,.16),transparent 72%);animation:heroDrift3 31s ease-in-out infinite;}
.hero-smoke .ember{position:absolute;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle,#F2D08A,rgba(201,162,75,0));bottom:26%;opacity:0;will-change:transform,opacity;}
.hero-smoke .e1{left:20%;animation:heroRise 9s ease-in 1s infinite;}
.hero-smoke .e2{left:52%;animation:heroRise 12s ease-in 3.5s infinite;}
.hero-smoke .e3{left:76%;animation:heroRise 10.5s ease-in 6s infinite;}
.hero.hero-atmos::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(360px circle at var(--mx,28%) var(--my,38%), rgba(201,162,75,.10), transparent 60%);transition:background .12s ease;}
@keyframes heroDrift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(7%,5%) scale(1.09);}}
@keyframes heroDrift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-6%,-4%) scale(1.12);}}
@keyframes heroDrift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(5%,-6%) scale(1.07);}}
@keyframes heroRise{0%{transform:translateY(0) scale(1);opacity:0;}14%{opacity:.95;}100%{transform:translateY(-260px) scale(.35);opacity:0;}}
.hero.hero-atmos .hero-content{position:relative;z-index:2;text-align:left;padding-top:3.5rem;padding-bottom:5rem;}
.hero.hero-atmos .hero-eyebrow{color:var(--brass);letter-spacing:.26em;}
.hero.hero-atmos h1{font-family:var(--font-heading);font-weight:700;font-size:clamp(2.6rem,6.2vw,5rem);line-height:1.02;letter-spacing:.005em;color:#EFE9DF;margin:0 0 1.1rem;max-width:16ch;}
.hero.hero-atmos h1 em{font-style:italic;font-weight:600;color:var(--brass);}
.hero.hero-atmos .hero-sub{font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.6;color:var(--text-light);max-width:34rem;margin:0 0 1.9rem;}
.hero.hero-atmos .hero-actions{justify-content:flex-start;}
/* #4 ignite — pulsing coal on the primary CTA */
.hero.hero-atmos .btn-primary{position:relative;}
.hero.hero-atmos .btn-primary::before{content:"";display:inline-block;width:8px;height:8px;margin-right:.15rem;border-radius:50%;background:#FFCF6E;box-shadow:0 0 10px 2px rgba(255,180,90,.85);animation:emberPulse 2.4s ease-in-out infinite;}
@keyframes emberPulse{0%,100%{opacity:.55;transform:scale(.8);}50%{opacity:1;transform:scale(1.2);}}
/* #2 flavour ticker */
.hero-ticker{position:absolute;z-index:2;left:0;right:0;bottom:0;border-top:1px solid rgba(232,226,216,.12);background:rgba(20,17,15,.5);overflow:hidden;padding:.7rem 0;}
.hero-ticker-track{display:flex;gap:1.4rem;align-items:center;white-space:nowrap;width:max-content;animation:tickerScroll 34s linear infinite;}
.hero-ticker-track span{font-family:var(--font-heading);font-size:1.15rem;color:var(--text);opacity:.82;text-transform:uppercase;letter-spacing:.08em;}
.hero-ticker-track i{color:var(--copper);font-style:normal;font-size:.55rem;}
@keyframes tickerScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* #6 By-the-numbers authority band (real data) */
.stats-band{background:linear-gradient(135deg, rgba(201,162,75,.05), rgba(154,106,79,.045)), var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:2.4rem 0;}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:center;}
.stat{display:flex;flex-direction:column;gap:.4rem;}
.stat-num{font-family:var(--font-heading);font-weight:700;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;color:var(--brass);}
.stat-label{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light);}
.stat + .stat{border-left:1px solid var(--border);}
@media (max-width:680px){.stats-grid{grid-template-columns:1fr;gap:1.5rem;}.stat + .stat{border-left:none;border-top:1px solid var(--border);padding-top:1.5rem;}}

/* #7 Mashrabiya architecture band */
.lattice-band{height:118px;position:relative;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23C9A24B' stroke-width='1' opacity='0.16'%3E%3Crect x='28' y='28' width='24' height='24'/%3E%3Crect x='28' y='28' width='24' height='24' transform='rotate(45 40 40)'/%3E%3Cpath d='M40 4v14M40 62v14M4 40h14M62 40h14'/%3E%3C/g%3E%3C/svg%3E");background-size:80px 80px;background-position:center;}
.lattice-band::before,.lattice-band::after{content:"";position:absolute;top:0;bottom:0;width:20%;}
.lattice-band::before{left:0;background:linear-gradient(90deg,var(--bg),transparent);}
.lattice-band::after{right:0;background:linear-gradient(270deg,var(--bg),transparent);}

/* #3 Magazine asymmetry — featured runs wide, lead grid card runs tall */
@media (min-width:900px){
  .latest-posts .post-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;}
  .latest-posts .post-grid > .post-card:first-child{grid-row:span 2;display:flex;flex-direction:column;}
  .latest-posts .post-grid > .post-card:first-child > a:first-child{flex:1;display:block;}
  .latest-posts .post-grid > .post-card:first-child > a:first-child img{height:100%;width:100%;min-height:300px;object-fit:cover;}
  .latest-posts .post-grid > .post-card:first-child h3{font-size:1.5rem;}
}

@media (prefers-reduced-motion:reduce){
  .hero-smoke .smoke,.hero-smoke .ember,.hero-ticker-track,.hero.hero-atmos .btn-primary::before{animation:none!important;}
  .hero-smoke .ember{opacity:.5;}
  .hero.hero-atmos::after{transition:none;}
}

/* Phase-2 cursor-reactive canvas smoke (lazy-loaded; CSS haze is the fallback) */
.hero-smoke-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hero.smoke-canvas-active .hero-smoke .smoke{opacity:.3;}

/* ---- Feedback fixes (2026-06-27) ---- */
/* #2 static flavour ticker (no marquee) */
.hero-ticker-track{ animation:none!important; width:100%!important; justify-content:center; flex-wrap:wrap; gap:.55rem 1.25rem; }
/* #5 nav dropdown above page content + hover-bridge so it doesn't close in the gap */
.site-header{ z-index:300; overflow:visible; }
.site-nav{ overflow:visible; }
.nav-dropdown::after{ content:""; position:absolute; top:100%; left:0; right:0; height:.7rem; }
.nav-dropdown-menu{ z-index:320; margin-top:.3rem; }

/* ---- Category hub intros (2026-07-02) ---- */
.category-intro{ max-width:68ch; margin-bottom:2.5rem; color:var(--text); line-height:1.7; }
.category-intro a{ color:var(--primary); text-decoration:underline; text-decoration-color:rgba(201,162,75,.35); text-underline-offset:2px; transition:text-decoration-color .3s; }
.category-intro a:hover{ text-decoration-color:var(--primary); }

/* ---- Custom diagrams (2026-07-04) ---- */
.post-diagram{ margin:2rem auto; max-width:760px; }
.post-diagram img{ display:block; width:100%; height:auto; border:1px solid var(--border); border-radius:8px; background:var(--bg); }
.post-diagram figcaption{ margin-top:.6rem; text-align:center; font-size:.9rem; line-height:1.5; color:var(--text-light); font-style:italic; }