/*
Theme Name: Shakeel Personal
Theme URI: https://muhammadshakeel.com
Author: Muhammad Shakeel
Author URI: https://muhammadshakeel.com
Description: A clean, modern personal WordPress theme. Features a minimalist design focused on content, with support for blog posts, pages, and custom sections.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shakeel-personal
Tags: blog, personal, modern, clean, responsive, minimalist
*/

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global fix: Remove ALL borders from linked images everywhere */
a img,
figure a img,
.wp-block-image a img,
.wp-block-gallery a img,
.wp-block-gallery figure a img,
.gallery a img,
.gallery-item a img {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

a:hover img,
figure a:hover img,
.wp-block-image a:hover img,
.wp-block-gallery a:hover img,
.gallery a:hover img {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Remove borders from link wrappers containing images */
figure a,
.wp-block-image a,
.wp-block-gallery a,
.gallery a {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

:root {
    /* HowToWP Color Palette */
    --primary-color: #ff4b2b;
    --accent-color: #ff4b2b;
    --accent-hover: #e84327;
    --text-dark: #1A202C;
    --text-body: #4A5568;
    --text-muted: #718096;
    --bg-light: #F7FAFC;
    --bg-soft: #EDF2F7;
    --bg-white: #ffffff;
    --border-soft: #E2E8F0;
    --border-gray: #CBD5E0;
    /* Legacy variables for compatibility */
    --secondary-color: #718096;
    --text-color: #4A5568;
    --bg-color: #ffffff;
    --header-bg: #F7FAFC;
    --footer-bg: #1a1a1a;
    --footer-text: #b0b0b0;
    --footer-accent: #ff4b2b;
    --border-color: #E2E8F0;
    --link-color: #ff4b2b;
    --link-hover: #e84327;
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-secondary: Georgia, "Times New Roman", serif;
    --max-width: 1200px;
    --content-width: 800px;
    --spacing-unit: 1.5rem;
    --theme-switcher-bg: #333333;
    --theme-switcher-icon: #ffffff;
    --shakeel-viewport-width: 100vw;
}

[data-theme="dark"] {
    /* HowToWP Color Palette - Dark Mode */
    --primary-color: #ff4b2b;
    --accent-color: #ff4b2b;
    --accent-hover: #ff6b4d;
    --text-dark: #f5f5f5;
    --text-body: #e8e8e8;
    --text-muted: #c0c0c0;
    --bg-light: #1a1a1a;
    --bg-soft: #252525;
    --bg-white: #2a2a2a;
    --border-soft: #333333;
    --border-gray: #404040;
    /* Legacy variables for compatibility */
    --secondary-color: #c0c0c0;
    --text-color: #e8e8e8;
    --bg-color: #1a1a1a;
    --header-bg: #252525;
    --footer-bg: #0f0f0f;
    --border-color: #333333;
    --link-color: #ff4b2b;
    --link-hover: #ff6b4d;
    --theme-switcher-bg: #e8e8e8;
    --theme-switcher-icon: #1a1a1a;
}

[data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-body);
}

[data-theme="dark"] .site-header {
    background-color: var(--header-bg);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .main-navigation a {
    color: var(--text-dark);
}

[data-theme="dark"] .main-navigation a:hover,
[data-theme="dark"] .main-navigation a:focus {
    color: var(--primary-color);
    outline: none;
}

[data-theme="dark"] .main-navigation a::after {
    background-color: var(--primary-color);
}

[data-theme="dark"] .main-navigation .current-menu-item > a,
[data-theme="dark"] .main-navigation .current_page_item > a {
    color: var(--primary-color);
}

[data-theme="dark"] .social-icon {
    color: var(--text-color);
}

[data-theme="dark"] .social-icon:hover {
    color: var(--link-color);
}

[data-theme="dark"] .post-content code {
    background-color: #2d2d2d;
    color: #f8f8f2;
}

[data-theme="dark"] .post-content pre {
    background-color: #2d2d2d;
    color: #f8f8f2;
}

[data-theme="dark"] .post-content blockquote {
    border-left-color: var(--link-color);
    color: var(--secondary-color);
}

[data-theme="dark"] .post-header {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .post {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .post-title a {
    color: var(--text-color);
}

[data-theme="dark"] .post-title a:hover {
    color: var(--link-color);
}

[data-theme="dark"] .post-meta {
    color: var(--secondary-color);
}

[data-theme="dark"] .post-meta a {
    color: var(--secondary-color);
}

[data-theme="dark"] .post-meta a:hover {
    color: var(--link-color);
}

body {
    font-family: var(--font-primary);
    font-size: 18px;
    line-height: 1.7;
    color: var(--text-body);
    background-color: var(--bg-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mailto-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(420px, calc(100vw - 32px));
    padding: 14px 16px;
    border: 1px solid rgba(255, 75, 43, 0.18);
    border-radius: 16px;
    background: rgba(17, 24, 39, 0.96);
    color: #f8fafc;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.mailto-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mailto-toast__content {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.mailto-toast__title {
    font-size: 14px;
    line-height: 1.2;
}

.mailto-toast__text {
    color: rgba(248, 250, 252, 0.8);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.mailto-toast__copy {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 75, 43, 0.12);
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.mailto-toast__copy:hover {
    background: rgba(255, 75, 43, 0.2);
}

@media (max-width: 640px) {
    .mailto-toast {
        right: 16px;
        left: 16px;
        bottom: 16px;
        width: auto;
        align-items: stretch;
        flex-direction: column;
    }

    .mailto-toast__copy {
        width: 100%;
    }
}

.cookie-consent[hidden] {
    display: none !important;
}

.cookie-consent {
    position: fixed;
    right: 20px;
    left: 20px;
    bottom: 20px;
    z-index: 9998;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.cookie-consent__panel {
    pointer-events: auto;
    width: min(calc(var(--max-width) - 4rem), calc(var(--shakeel-viewport-width) - 4rem));
    padding: 1.2rem 1.5rem;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    background: var(--bg-white);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.cookie-consent.is-visible .cookie-consent__panel {
    opacity: 1;
    transform: translateY(0);
}

.cookie-consent__content {
    display: grid;
    gap: 0.55rem;
}

.cookie-consent__eyebrow {
    margin: 0;
    color: var(--accent-color);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cookie-consent__title {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.25;
}

.cookie-consent__text {
    margin: 0;
    color: var(--text-body);
    font-size: 0.95rem;
    line-height: 1.6;
}

.cookie-consent__link {
    display: inline-flex;
    width: fit-content;
    color: var(--link-color);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.cookie-consent__link:hover,
.cookie-consent__link:focus {
    color: var(--link-hover);
}

.cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.cookie-consent__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.75rem 1.15rem;
    border-radius: 999px;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.cookie-consent__button:hover,
.cookie-consent__button:focus {
    transform: translateY(-1px);
}

.cookie-consent__button--secondary {
    border: 1px solid var(--border-gray);
    background: transparent;
    color: var(--text-dark);
}

.cookie-consent__button--secondary:hover,
.cookie-consent__button--secondary:focus {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.cookie-consent__button--primary {
    border: 1px solid var(--accent-color);
    background: var(--accent-color);
    color: #ffffff;
}

.cookie-consent__button--primary:hover,
.cookie-consent__button--primary:focus {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
}

[data-theme="dark"] .cookie-consent__panel {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}

@media (max-width: 640px) {
    .cookie-consent {
        right: 16px;
        left: 16px;
        bottom: 16px;
    }

    .cookie-consent__panel {
        width: 100%;
        padding: 1.25rem;
        border-radius: 18px;
    }

    .cookie-consent__actions {
        flex-direction: column;
    }

    .cookie-consent__button {
        width: 100%;
        justify-content: center;
    }
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: var(--text-dark);
    /* Prevent title overflow - support non-breaking text */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-dark);
}

h1 {
    font-size: 42px;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 24px;
}

/* Step Badges for Headings */
/* When badge is inside heading */
.entry-content h2 .step-badge,
.entry-content h3 .step-badge,
.entry-content h4 .step-badge,
.post-content h2 .step-badge,
.post-content h3 .step-badge,
.post-content h4 .step-badge,
.page-content h2 .step-badge,
.page-content h3 .step-badge,
.page-content h4 .step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    margin-right: 1rem;
    vertical-align: middle;
    line-height: 1.2;
}

/* Make headings with badges display flex */
.entry-content h2:has(.step-badge),
.entry-content h3:has(.step-badge),
.entry-content h4:has(.step-badge),
.post-content h2:has(.step-badge),
.post-content h3:has(.step-badge),
.post-content h4:has(.step-badge),
.page-content h2:has(.step-badge),
.page-content h3:has(.step-badge),
.page-content h4:has(.step-badge) {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Fallback for browsers without :has() support */
.entry-content h2 .step-badge,
.entry-content h3 .step-badge,
.entry-content h4 .step-badge,
.post-content h2 .step-badge,
.post-content h3 .step-badge,
.post-content h4 .step-badge,
.page-content h2 .step-badge,
.page-content h3 .step-badge,
.page-content h4 .step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    margin-right: 1rem;
    vertical-align: middle;
    line-height: 1.2;
}

/* Wrapper method (alternative) */
.step-heading-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.step-heading-wrapper .step-badge {
    margin-right: 0;
}

.step-heading-wrapper h2,
.step-heading-wrapper h3,
.step-heading-wrapper h4 {
    margin: 0;
    flex: 1;
    min-width: 0;
}

/* Dark mode step badges */
[data-theme="dark"] .step-badge {
    background: var(--primary-color);
    color: #ffffff;
}

h4 {
    font-size: 1.25rem;
}

p {
    margin-bottom: 1.5rem;
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

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

/* Layout */
.site-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0;
    overflow: visible;
    position: relative;
}

.site-main {
    min-height: 60vh;
    margin-bottom: 4rem;
    padding: 0 2rem;
    /* Ensure main container doesn't clip overlapping content */
    overflow: visible;
}

.site-header {
    background-color: var(--header-bg);
    padding: 1.75rem 0;
    margin-bottom: 3rem;
    margin-left: calc(50% - (var(--shakeel-viewport-width) / 2));
    margin-right: calc(50% - (var(--shakeel-viewport-width) / 2));
    width: var(--shakeel-viewport-width);
    max-width: var(--shakeel-viewport-width);
    overflow: visible;
    position: relative;
    z-index: 100;
}

.header-wrapper {
    max-width: var(--max-width);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

@media (min-width: 768px) {
    .header-wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .site-header {
        padding: 1.5rem 0;
    }
    .header-wrapper {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 768px) {
    .header-wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
}

.site-logo {
    display: flex;
    align-items: center;
    line-height: 0;
}

.site-logo a {
    display: block;
    line-height: 0;
}

.site-logo img {
    height: auto;
    max-height: 40px;
    width: auto;
    display: block;
}

.site-title {
    font-size: 1.5rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    /* Prevent title overflow - support non-breaking text */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.site-title a {
    color: var(--primary-color);
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
    /* Ensure links in titles also wrap properly */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.site-title a:hover {
    color: var(--primary-color);
    opacity: 0.8;
}

/* Style site title to have different weights if name has two words */
.site-title {
    font-weight: 300;
}

.site-description {
    display: none;
}

/* Header Right Section */
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.5rem;
    overflow: visible;
    position: relative;
}

@media (min-width: 768px) {
    .header-right {
        flex-direction: row;
        align-items: center;
        gap: 2rem;
    }
}

/* Navigation */
.main-navigation {
    margin-top: 1.5rem;
    width: 100%;
}

@media (min-width: 768px) {
    .main-navigation {
        margin-top: 0;
        width: auto;
    }
}

.main-navigation ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
    align-items: center;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    color: var(--text-dark);
    font-weight: 500;
    font-size: 1rem;
    padding: 0;
    position: relative;
    display: block;
    text-decoration: none;
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
    overflow: hidden;
}

/* Animated underline on hover */
.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.main-navigation a:hover,
.main-navigation a:focus {
    color: var(--primary-color);
    outline: none;
}

.main-navigation a:hover::after,
.main-navigation a:focus::after {
    width: 100%;
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
    color: var(--primary-color);
}

.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after {
    width: 100%;
}

.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(26, 32, 44, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--text-dark);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
    color: var(--primary-color);
    border-color: rgba(255, 75, 43, 0.28);
    outline: none;
}

.menu-toggle:active {
    transform: scale(0.97);
}

.menu-toggle__bars {
    display: grid;
    gap: 4px;
}

.menu-toggle__bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform-origin: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.header-right.has-open-menu .menu-toggle__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.header-right.has-open-menu .menu-toggle__bar:nth-child(2) {
    opacity: 0;
}

.header-right.has-open-menu .menu-toggle__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

[data-theme="dark"] .menu-toggle {
    background: rgba(22, 29, 39, 0.92);
    border-color: rgba(148, 163, 184, 0.18);
    color: #f8fafc;
}

/* Header Social Icons */
.header-social-icons {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
    margin-left: 2rem;
}

@media (min-width: 768px) {
    .header-social-icons {
        margin-top: 0;
    }
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--primary-color);
    opacity: 0.7;
    transition: opacity 0.2s ease;
    line-height: 0;
    position: relative;
    overflow: visible;
}

.social-icon:hover {
    opacity: 1;
}

.social-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Dashicons (WordPress icon) inside social links */
.social-icon .dashicons {
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    color: currentColor;
}

/* Social Icon Tooltips - OPTION 1: Show labels below icons */
/*
.header-social-icons {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.social-icon {
    flex-direction: column;
    gap: 0.25rem;
    width: auto;
    height: auto;
}

.social-icon-tooltip {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    color: var(--text-color) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 0.65rem !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    z-index: auto !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    min-width: auto !important;
    line-height: 1.2 !important;
    letter-spacing: 0.01em !important;
    border: none !important;
    backdrop-filter: none !important;
    transition: color 0.2s ease !important;
    margin-top: 0.25rem;
}

.social-icon-tooltip::before {
    display: none !important;
}

[data-theme="dark"] .social-icon-tooltip {
    background: transparent !important;
    color: var(--text-color) !important;
    box-shadow: none !important;
    border: none !important;
}

[data-theme="dark"] .social-icon-tooltip::before {
    display: none !important;
}

@media (min-width: 768px) {
    .header-social-icons {
        flex-direction: row;
        gap: 1.25rem;
    }
    
    .social-icon {
        flex-direction: column;
        gap: 0.25rem;
    }
}
*/

/* OPTION 2: Hide labels completely (currently active) */
.header-social-icons {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
}

.social-icon {
    flex-direction: row;
    width: 24px;
    height: 24px;
}

.social-icon-tooltip {
    display: none !important;
}

/* OPTION 3: Original hover tooltips above icons - Uncomment below to restore original behavior */
/*
.social-icon-tooltip {
    position: absolute !important;
    bottom: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    color: #ffffff !important;
    padding: 7px 12px !important;
    border-radius: 6px !important;
    font-size: 0.7rem !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 99999 !important;
    font-weight: 600 !important;
    visibility: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    display: block !important;
    min-width: max-content !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    transition: opacity 0s, visibility 0s, transform 0s !important;
}

.social-icon-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1a1a1a;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.1));
}

a.social-icon:hover .social-icon-tooltip,
.social-icon:hover .social-icon-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(-3px) !important;
    display: block !important;
}

.social-icon:not(:hover) .social-icon-tooltip {
    opacity: 0 !important;
    visibility: hidden !important;
}

[data-theme="dark"] .social-icon-tooltip {
    background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%) !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .social-icon-tooltip::before {
    border-top-color: #e0e0e0 !important;
}
*/

/* Theme Switcher */
.theme-switcher {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: var(--theme-switcher-bg);
    color: var(--theme-switcher-icon);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    padding: 0;
    margin-left: 1rem;
    position: relative;
    overflow: visible;
    flex-shrink: 0;
}

.theme-switcher:hover {
    transform: scale(1.05);
}

.theme-switcher:active {
    transform: scale(0.95);
}

.theme-switcher-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-switcher-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}

/* Ensure button is always visible */
button.theme-switcher {
    visibility: visible !important;
    opacity: 1 !important;
    display: inline-flex !important;
}

.theme-switcher-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-switcher-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

[data-theme="dark"] .theme-switcher-sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

[data-theme="dark"] .theme-switcher-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Theme Switcher Tooltip - Debug and ensure visibility */
.theme-switcher-tooltip {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    color: #ffffff !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 999999 !important;
    font-weight: 600 !important;
    visibility: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    display: block !important;
    min-width: max-content !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    transition: opacity 0s, visibility 0s, transform 0s !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: calc(var(--shakeel-viewport-width) - 1rem) !important;
}

.theme-switcher-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: #1a1a1a;
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1));
}

@media (hover: hover) and (pointer: fine) {
    button.theme-switcher:hover span.theme-switcher-tooltip,
    button.theme-switcher:focus-visible span.theme-switcher-tooltip,
    .theme-switcher:hover .theme-switcher-tooltip,
    .theme-switcher:focus-visible .theme-switcher-tooltip,
    .theme-switcher:hover span.theme-switcher-tooltip {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(3px) !important;
        display: block !important;
    }
}

@media (max-width: 640px), (hover: none), (pointer: coarse) {
    .theme-switcher-tooltip {
        display: none !important;
    }
}

[data-theme="dark"] .theme-switcher-tooltip {
    background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%) !important;
    color: #1a1a1a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

[data-theme="dark"] .theme-switcher-tooltip::before {
    border-bottom-color: #e0e0e0 !important;
}

[data-theme="dark"] .social-icon-tooltip::before {
    border-top-color: #e0e0e0 !important;
}

/* Submenu / Child Menu Items */
.main-navigation ul.sub-menu,
.main-navigation ul.children {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 200px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
}

[data-theme="dark"] .main-navigation ul.sub-menu,
[data-theme="dark"] .main-navigation ul.children {
    background: #252525;
    border-color: var(--border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    z-index: 999;
    flex-direction: column;
    gap: 0;
}

.main-navigation li:hover > ul.sub-menu,
.main-navigation li:hover > ul.children {
    display: flex;
}

.main-navigation ul.sub-menu li,
.main-navigation ul.children li {
    width: 100%;
}

.main-navigation ul.sub-menu a,
.main-navigation ul.children a {
    padding: 0.75rem 1.5rem;
    color: var(--text-color);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--border-color);
}

.main-navigation ul.sub-menu li:last-child a,
.main-navigation ul.children li:last-child a {
    border-bottom: none;
}

.main-navigation ul.sub-menu a:hover,
.main-navigation ul.children a:hover {
    background-color: #f8f9fa;
    color: var(--accent-color);
}

[data-theme="dark"] .main-navigation ul.sub-menu a,
[data-theme="dark"] .main-navigation ul.children a {
    color: var(--text-color);
}

.main-navigation ul.sub-menu .current-menu-item > a,
.main-navigation ul.children .current-menu-item > a {
    background-color: #e8f4f8;
    color: var(--accent-color);
}

[data-theme="dark"] .main-navigation ul.sub-menu a:hover,
[data-theme="dark"] .main-navigation ul.children a:hover {
    background-color: #2d2d2d;
    color: var(--link-color);
}

[data-theme="dark"] .main-navigation ul.sub-menu .current-menu-item > a,
[data-theme="dark"] .main-navigation ul.children .current-menu-item > a {
    background-color: #333333;
    color: var(--link-color);
}

/* Parent menu item indicator */
.main-navigation li.menu-item-has-children > a::after {
    content: ' ▼';
    font-size: 0.7em;
    margin-left: 0.25rem;
    opacity: 0.6;
}

/* Content Area - moved to site-container section */

.content-area {
    max-width: var(--content-width);
    margin: 0 auto;
    /* Ensure content area doesn't clip overlapping content */
    overflow: visible;
}

/* Single post content area - ensure no clipping */
body.single-post .content-area {
    overflow: visible !important;
}

/* Full-width content area for pages */
body.page .content-area {
    max-width: 100%;
    width: 100%;
    padding: 0 2rem;
}

/* Wider content area for blog/archive pages */
body.blog .content-area,
body.archive .content-area,
body.search .content-area {
    max-width: 1200px;
}

[data-theme="dark"] .content-area {
    color: #e8e8e8;
}

[data-theme="dark"] p {
    color: #e8e8e8;
}

[data-theme="dark"] .post-content p {
    color: #e8e8e8;
}

/* Blog / archive grid (matches screenshot layout) */
body.blog,
body.archive,
body.search {
    background-color: #f6f3ea;
}

[data-theme="dark"] body.blog,
[data-theme="dark"] body.archive,
[data-theme="dark"] body.search {
    background-color: var(--bg-color);
}

.page-header,
.archive-header {
    text-align: center;
    border-bottom: none;
}

[data-theme="dark"] .page-header,
[data-theme="dark"] .archive-header {
    color: var(--text-color);
}

[data-theme="dark"] .page-header h1,
[data-theme="dark"] .archive-header h1 {
    color: var(--text-color);
}
    padding-bottom: 0;
}

.page-title,
.archive-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
    color: var(--text-dark);
}

.page-subtitle,
.archive-description {
    max-width: 680px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--secondary-color);
}

.page-header,
.archive-header {
    margin-bottom: 4rem;
    padding-top: 2rem;
}

@media (max-width: 768px) {
    .page-title,
    .archive-title {
        font-size: 2rem;
    }
    
    .page-header,
    .archive-header {
        margin-bottom: 2.5rem;
        padding-top: 1.5rem;
    }
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    align-items: stretch;
    margin-top: 3rem;
}

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

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

/* Unified post grid styling for all archives */
.posts-grid .post,
.related-grid .post {
    margin: 0;
    padding: 0;
    border-bottom: none;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

.posts-grid .post:hover,
.related-grid .post:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    border-color: var(--border-gray);
}

[data-theme="dark"] .posts-grid .post,
[data-theme="dark"] .related-grid .post {
    background: #1a1a1a;
    border-color: rgba(255, 75, 43, 0.15);
    box-shadow: 0 2px 8px rgba(255, 75, 43, 0.1);
}

[data-theme="dark"] .posts-grid .post:hover,
[data-theme="dark"] .related-grid .post:hover {
    box-shadow: 0 8px 24px rgba(255, 75, 43, 0.25), 0 4px 12px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 75, 43, 0.3);
}

.posts-grid .post-thumbnail {
    margin: 0;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    aspect-ratio: 16 / 9;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.posts-grid .post-thumbnail::before,
.related-grid .post-thumbnail::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.posts-grid .post:hover .post-thumbnail::before,
.related-grid .post:hover .post-thumbnail::before {
    opacity: 1;
}

.posts-grid .post-thumbnail img,
.related-grid .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Make thumbnail area fully clickable (image + placeholder) */
.posts-grid .post-thumbnail > a,
.related-grid .post-thumbnail > a {
    position: absolute;
    inset: 0;
    display: block;
    z-index: 3;
}

.posts-grid .post-thumbnail > a img,
.related-grid .post-thumbnail > a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-placeholder-link {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    z-index: 3;
}

.posts-grid .post-thumbnail .thumbnail-placeholder,
.related-grid .post-thumbnail .thumbnail-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

[data-theme="dark"] .posts-grid .post-thumbnail .thumbnail-placeholder,
[data-theme="dark"] .related-grid .post-thumbnail .thumbnail-placeholder {
    color: rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
}

.posts-grid .post-thumbnail .thumbnail-placeholder svg,
.related-grid .post-thumbnail .thumbnail-placeholder svg {
    width: 48px;
    height: 48px;
}

.posts-grid .post:hover .post-thumbnail img,
.related-grid .post:hover .post-thumbnail img {
    transform: scale(1.02);
}

[data-theme="dark"] .posts-grid .post-thumbnail,
[data-theme="dark"] .related-grid .post-thumbnail {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
}

[data-theme="dark"] .posts-grid .post-thumbnail::before,
[data-theme="dark"] .related-grid .post-thumbnail::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.05) 100%);
}

.posts-grid .post-header,
.related-grid .post-header {
    margin: 0;
    padding: 1.5rem 1.5rem 0;
    border: none;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* Ensure consistent spacing for posts without thumbnails */
.posts-grid .post.no-thumbnail .post-header,
.related-grid .post.no-thumbnail .post-header {
    padding-top: 1.75rem;
}

.posts-grid .post-meta,
.related-grid .post-meta {
    margin: 0 0 0.75rem;
    padding: 0;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 500;
}

.posts-grid .cat-links,
.related-grid .cat-links {
    display: none;
}

.posts-grid .post-title,
.related-grid .post-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 0.75rem;
    /* Prevent title overflow - support non-breaking text */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.posts-grid .post-title a,
.related-grid .post-title a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.2s ease;
    /* Ensure links in titles also wrap properly */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    display: inline-block;
    max-width: 100%;
}

.posts-grid .post-title a:hover,
.related-grid .post-title a:hover {
    color: var(--primary-color);
}

.posts-grid .post-content,
.related-grid .post-content {
    margin: 0;
    padding: 0 1.5rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-color);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.posts-grid .post-content p,
.related-grid .post-content p {
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.7;
    max-height: calc(1.7em * 2);
}

.posts-grid .post-content p:last-child,
.related-grid .post-content p:last-child {
    margin-bottom: 0;
}

.posts-grid .read-more,
.related-grid .read-more {
    display: block;
    margin-top: auto;
    padding: 1rem 1.5rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease, background 0.2s ease;
    border-top: 1px solid var(--border-soft);
    flex-shrink: 0;
    position: relative;
}

.posts-grid .read-more::after,
.related-grid .read-more::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: var(--primary-color);
    opacity: 0.05;
    transition: width 0.3s ease;
}

.posts-grid .read-more:hover::after,
.related-grid .read-more:hover::after {
    width: 100%;
}

.posts-grid .read-more:hover,
.related-grid .read-more:hover {
    color: var(--accent-color);
    transform: translateX(4px);
}

/* Dark mode styles for all post grids */
[data-theme="dark"] .posts-grid .read-more,
[data-theme="dark"] .related-grid .read-more {
    border-top-color: rgba(255, 255, 255, 0.08);
    color: var(--text-color);
}

[data-theme="dark"] .posts-grid .read-more:hover,
[data-theme="dark"] .related-grid .read-more:hover {
    color: var(--link-color);
}

[data-theme="dark"] .posts-grid .post-title a,
[data-theme="dark"] .related-grid .post-title a {
    color: var(--text-color);
}

[data-theme="dark"] .posts-grid .post-title a:hover,
[data-theme="dark"] .related-grid .post-title a:hover {
    color: var(--link-color);
}

[data-theme="dark"] .posts-grid .post-meta,
[data-theme="dark"] .related-grid .post-meta {
    color: #888;
}

[data-theme="dark"] .posts-grid .post-content,
[data-theme="dark"] .related-grid .post-content {
    color: var(--text-color);
}

[data-theme="dark"] .posts-grid .post-content p,
[data-theme="dark"] .related-grid .post-content p {
    color: var(--text-color);
}

/* Pagination: circular numbers like screenshot */
.pagination {
    margin: 3.5rem 0 0;
}

.pagination .nav-links {
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pagination .page-numbers {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination .page-numbers.current {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 2px 8px rgba(255, 75, 43, 0.25);
}

.pagination .next,
.pagination .prev {
    width: auto;
    padding: 0 0.9rem;
    border-radius: 999px;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
}

/* Posts */
.post {
    margin-bottom: 4rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--border-color);
}

.post:last-child {
    border-bottom: none;
}

.post-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.post-thumbnail {
    margin: 2rem 0;
    width: 100%;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

.post-title {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    line-height: 1.2;
    font-weight: 700;
    /* Prevent title overflow - support non-breaking text */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.post-title a {
    color: var(--primary-color);
    /* Ensure links in titles also wrap properly */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    display: inline-block;
    max-width: 100%;
}

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

.post-meta {
    font-size: 0.9rem;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
}

.post-meta a {
    color: var(--secondary-color);
}

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

.post-content {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-color);
    margin-top: 2rem;
    /* Prevent content overflow - support non-breaking text */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.post-content > *:first-child {
    margin-top: 0;
}

.post-content > *:last-child {
    margin-bottom: 0;
}

/* Ensure content displays */
.entry-content {
    display: block;
    visibility: visible;
    opacity: 1;
    /* Prevent content overflow - support non-breaking text */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.entry-content p,
.entry-content div,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content ul,
.entry-content ol,
.entry-content li,
.entry-content blockquote,
.entry-content pre,
.entry-content code,
.entry-content img,
.entry-content figure,
.entry-content table {
    display: block;
    visibility: visible;
}

.entry-content li {
    display: list-item;
}

.entry-content table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: collapse;
}

.entry-content table th,
.entry-content table td {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    text-align: left;
}

.entry-content table th {
    background-color: #f8f9fa;
    font-weight: 600;
}

.post-content p {
    margin-bottom: 1.5rem;
}

.post-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.post-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.post-content ul,
.post-content ol {
    margin-left: 2rem;
    margin-bottom: 1.5rem;
}

.post-content li {
    margin-bottom: 0.5rem;
}

.post-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--text-muted);
    background: linear-gradient(90deg, rgba(255, 75, 43, 0.05) 0%, transparent 100%);
    padding: 1rem 1.5rem;
    border-radius: 0 6px 6px 0;
}

.post-content code {
    background-color: #f5f5f5;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 0.9em;
    font-family: "Courier New", monospace;
}

.post-content pre {
    background-color: #f5f5f5;
    padding: 1rem;
    border-radius: 5px;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.post-content pre code {
    background: none;
    padding: 0;
}

.post-content img,
.entry-content img {
    max-width: 100% !important;
    width: auto;
    height: auto;
    border-radius: 5px;
    margin: 2rem 0;
    display: block;
    box-sizing: border-box;
}

/* Restore Gutenberg gallery layouts overridden by generic figure/image rules */
.post-content .wp-block-gallery,
.entry-content .wp-block-gallery,
.single-content-box .wp-block-gallery {
    margin: 2rem 0;
}

.post-content .wp-block-gallery.is-layout-flex,
.entry-content .wp-block-gallery.is-layout-flex,
.single-content-box .wp-block-gallery.is-layout-flex {
    display: flex;
    flex-wrap: wrap;
}

.post-content .wp-block-gallery.is-layout-grid,
.entry-content .wp-block-gallery.is-layout-grid,
.single-content-box .wp-block-gallery.is-layout-grid {
    display: grid;
}

.post-content .wp-block-gallery.has-nested-images,
.entry-content .wp-block-gallery.has-nested-images,
.single-content-box .wp-block-gallery.has-nested-images {
    align-items: normal;
}

.post-content .wp-block-gallery figure.wp-block-image,
.entry-content .wp-block-gallery figure.wp-block-image,
.single-content-box .wp-block-gallery figure.wp-block-image {
    margin: 0;
}

.post-content .wp-block-gallery img,
.entry-content .wp-block-gallery img,
.single-content-box .wp-block-gallery img {
    margin: 0;
}


.post-content a {
    border-bottom: 1px solid var(--link-color);
}

.post-content a:hover {
    border-bottom-color: var(--link-hover);
}

/* Contact page premium block manages its own link styling */
.post-content .contact-premium a,
.page-content .contact-premium a,
.entry-content .contact-premium a,
.post-content .contact-premium a:hover,
.page-content .contact-premium a:hover,
.entry-content .contact-premium a:hover,
.post-content .contact-premium a:focus,
.page-content .contact-premium a:focus,
.entry-content .contact-premium a:focus {
    border-bottom: none !important;
    text-decoration: none !important;
}

/* Remove ALL borders and underlines from linked images - comprehensive fix */
.post-content a img,
.entry-content a img,
.post-content figure a,
.entry-content figure a,
.post-content figure a img,
.entry-content figure a img,
.post-content .wp-block-image a,
.entry-content .wp-block-image a,
.post-content .wp-block-image a img,
.entry-content .wp-block-image a img,
.post-content .wp-block-gallery a,
.entry-content .wp-block-gallery a,
.post-content .wp-block-gallery a img,
.entry-content .wp-block-gallery a img,
.post-content .wp-block-gallery figure a,
.entry-content .wp-block-gallery figure a,
.post-content .wp-block-gallery figure a img,
.entry-content .wp-block-gallery figure a img,
.post-content .gallery a,
.entry-content .gallery a,
.post-content .gallery a img,
.entry-content .gallery a img,
.post-content .gallery-item a,
.entry-content .gallery-item a,
.post-content .gallery-item a img,
.entry-content .gallery-item a img {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.post-content a:hover img,
.entry-content a:hover img,
.post-content figure a:hover img,
.entry-content figure a:hover img,
.post-content .wp-block-image a:hover img,
.entry-content .wp-block-image a:hover img,
.post-content .wp-block-gallery a:hover img,
.entry-content .wp-block-gallery a:hover img,
.post-content .gallery a:hover img,
.entry-content .gallery a:hover img {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Also remove borders from the link wrapper itself */
.post-content figure a,
.entry-content figure a,
.post-content .wp-block-image a,
.entry-content .wp-block-image a,
.post-content .wp-block-gallery a,
.entry-content .wp-block-gallery a,
.post-content .gallery a,
.entry-content .gallery a {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Read More Link */
.read-more {
    display: inline-block;
    margin-top: 1rem;
    font-weight: 500;
}

/* Post grid "Read more" should not inherit blue underline */
.posts-grid .read-more,
.related-grid .read-more {
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Pages */
.page-header {
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.page-title {
    font-size: 2.5rem;
}

.page-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Archive Pages */
.archive-header {
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.archive-title {
    font-size: 2rem;
}

.archive-description {
    color: var(--secondary-color);
    margin-top: 0.5rem;
}

/* Pagination */
.pagination {
    margin: 3rem 0;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.pagination a,
.pagination span {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    color: var(--text-color);
}

.pagination a:hover {
    background: var(--primary-color);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 75, 43, 0.3);
}

.pagination .current {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(255, 75, 43, 0.25);
}

.pagination .current:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 12px rgba(255, 75, 43, 0.3);
}

/* Footer */
.site-footer {
    background-color: transparent;
    color: var(--footer-text);
    margin-top: 4rem;
    margin-left: calc(50% - (var(--shakeel-viewport-width) / 2));
    margin-right: calc(50% - (var(--shakeel-viewport-width) / 2));
    width: var(--shakeel-viewport-width);
    max-width: var(--shakeel-viewport-width);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Featured On Section */
.footer-featured {
    background: linear-gradient(180deg, #f5f7fa 0%, #e8ecf2 100%);
    padding: 1.35rem 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.footer-featured-inner {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
}

.footer-featured-label {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: #4b5563;
    font-size: 0.74rem;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

.footer-featured-label::after {
    content: '';
    width: 2.5rem;
    height: 1px;
    background-color: rgba(55, 65, 81, 0.28);
}

.footer-featured-logos {
    flex: 0 1 auto;
    min-width: 0;
}

.footer-featured-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.9rem;
}

.footer-featured-menu li {
    margin: 0;
    padding: 0;
    display: flex;
    flex: 0 0 auto;
}

.footer-featured-menu li a,
.footer-featured-menu li span {
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 8.25rem;
    min-height: 3.75rem;
    padding: 0.8rem 1.15rem;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.82));
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.footer-featured-menu li a:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Logo images in Featured On section - consistent styling for all logos */
.footer-featured-menu li img {
    max-height: 36px;
    max-width: 172px;
    width: auto !important;
    height: 36px !important;
    display: block !important;
    flex: 0 0 auto;
    object-fit: contain;
    object-position: center;
    visibility: visible !important;
    opacity: 1 !important;
    vertical-align: middle;
}

.footer-featured-menu li a img,
.footer-featured-menu li span img {
    max-height: 36px;
    max-width: 172px;
    width: auto !important;
    height: 36px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto;
    vertical-align: middle;
    object-fit: contain;
}

/* SVG logo support - ensure same sizing as other logos */
/* SVGs need explicit min dimensions to display properly - increased to match other logos */
.footer-featured-menu li img[src$=".svg"],
.footer-featured-menu li img[src*=".svg"],
.footer-featured-menu li img[src$=".svg?"],
.footer-featured-menu li img[src*=".svg?"],
.footer-featured-menu li a img[src$=".svg"],
.footer-featured-menu li a img[src*=".svg"],
.footer-featured-menu li a img[src$=".svg?"],
.footer-featured-menu li a img[src*=".svg?"],
.footer-featured-menu li span img[src$=".svg"],
.footer-featured-menu li span img[src*=".svg"] {
    max-height: 36px !important;
    max-width: 172px !important;
    width: auto !important;
    height: 36px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: contain !important;
    object-position: center !important;
    vertical-align: middle !important;
}

/* Ensure SVG images match other logos exactly - with explicit display rules */
.footer-featured-menu li a[href*="howtowp"] img,
.footer-featured-menu li a[href*="howtowp.com"] img,
.footer-featured-menu li a[href*="howtowp"] img[src*=".svg"],
.footer-featured-menu li a[href*="howtowp.com"] img[src*=".svg"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: 36px !important;
    max-width: 172px !important;
    width: auto !important;
    height: 36px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    vertical-align: middle !important;
}

/* Inline SVG support */
.footer-featured-menu .footer-featured-svg-inline {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 36px;
    max-width: 100%;
    vertical-align: middle;
    line-height: 0;
}

.footer-featured-menu .footer-featured-svg-inline svg {
    max-height: 36px;
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    vertical-align: middle;
}

/* Main Footer Section */
.footer-main {
    background-color: #2E3134;
    color: #ffffff;
    padding: 4rem 0 0.5rem; /* Reduced bottom padding from 2rem to minimize gap */
}

.footer-main-inner {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.footer-main a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-main a:hover {
    opacity: 0.8;
}

.footer-main h3 {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Footer Columns */
.footer-main-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 1.5rem; /* Reduced from 3rem */
    padding-bottom: 1.5rem; /* Reduced from 3rem */
}

.footer-brand-mark {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    line-height: 0;
}

.footer-brand-mark a {
    display: block;
    line-height: 0;
}

.footer-brand-mark img {
    height: auto;
    max-height: 70px;
    width: auto;
    display: block;
}

.footer-site-name-link {
    display: inline-block;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-site-name-link:hover {
    opacity: 0.8;
}

.footer-site-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.2;
}

.footer-brand-text {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.footer-social-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-social-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 500;
}

.footer-social-icons {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Header social icons styling when used in footer */
.footer-social-icons .header-social-icons {
    margin: 0;
    gap: 1rem;
}

.footer-social-icons .social-icon {
    width: 24px;
    height: 24px;
    color: #ffffff;
    opacity: 0.8;
}

.footer-social-icons .social-icon:hover {
    opacity: 1;
    color: #ffffff;
}

.footer-social-icons .social-icon svg,
.footer-social-icons .social-icon .dashicons {
    width: 20px;
    height: 20px;
    color: #ffffff;
}

.footer-links-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-links-menu li {
    margin: 0 0 0.75rem 0;
    padding: 0;
}

.footer-links-menu li a {
    color: rgba(255, 255, 255, 0.8);
    display: inline;
    padding-bottom: 0.25rem;
    background-image: linear-gradient(var(--primary-color), var(--primary-color));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: color 0.2s ease, background-size 0.2s ease;
}

.footer-links-menu li a:hover,
.footer-links-menu li a:focus-visible {
    color: #ffffff;
    opacity: 1;
    background-size: 100% 1px;
}

/* Footer Bottom */
.footer-bottom {
    padding-top: 0.5rem; /* Reduced from 2rem to minimize gap */
}

.footer-bottom-inner {
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.5rem; /* Reduced from 2rem */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem; /* Reduced from 1.5rem */
}

/* Orange accent border at top of footer bottom section */
.footer-bottom-inner::before {
    content: '';
    display: block;
    width: 350px;
    max-width: 40%; /* Responsive max width */
    border-top: 1px solid var(--primary-color);
    margin: 0 auto; /* Centered horizontally */
    position: relative;
    top: 0;
}

.footer-bottom-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-bottom-links li {
    margin: 0;
    padding: 0;
}

.footer-bottom-links li:not(:last-child)::after {
    content: '|';
    margin-left: 1rem;
    color: rgba(255, 255, 255, 0.4);
}

.footer-bottom-links li a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    display: inline;
    padding-bottom: 0.25rem;
    background-image: linear-gradient(var(--primary-color), var(--primary-color));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: color 0.2s ease, background-size 0.2s ease;
}

.footer-bottom-links li a:hover,
.footer-bottom-links li a:focus-visible {
    color: #ffffff;
    background-size: 100% 1px;
}

.footer-links-menu li a:focus-visible,
.footer-bottom-links li a:focus-visible {
    outline: 2px solid rgba(255, 75, 43, 0.55);
    outline-offset: 3px;
}

.footer-bottom-site-name-link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.footer-bottom-site-name-link:hover {
    opacity: 0.8;
}

.footer-bottom-meta {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    text-align: center;
    width: 100%;
}

.footer-made-with {
    display: block;
    margin-top: 0.35rem;
}

.footer-bottom-meta-copy {
    display: block;
}

.footer-bottom-menu {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: -0.25rem; /* Negative margin to bring menu closer to border */
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .footer-main-inner {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
    
    .footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .footer-featured-inner {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .footer-featured-menu {
        justify-content: center;
        gap: 0.75rem;
        width: auto;
    }

    .footer-featured-label::after {
        width: 2rem;
    }
    
    .footer-main {
        padding: 3rem 0 1rem; /* Reduced bottom padding */
    }
    
    .footer-main-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin-bottom: 1rem; /* Reduced on mobile */
        padding-bottom: 1rem; /* Reduced on mobile */
    }
    
    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 0.5rem; /* Reduced top padding on mobile */
    }
    
    .footer-bottom-inner::before {
        width: 90%;
        max-width: 90%;
        margin: 0 auto; /* Centered horizontally on mobile */
    }
    
    .footer-bottom-menu {
        margin-top: -0.25rem; /* Keep negative margin on mobile too */
    }
    
    .footer-bottom-links {
        justify-content: center;
    }
}

/* 404 Page */
.error-404 {
    text-align: center;
    padding: 4rem 0;
}

.error-404 h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.error-404 p {
    font-size: 1.2rem;
    color: var(--secondary-color);
    margin-bottom: 2rem;
}

/* Widgets */
.widget {
    margin-bottom: 3rem;
}

.widget-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.widget ul {
    list-style: none;
}

.widget li {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.widget li:last-child {
    border-bottom: none;
}

/* Single Post Specific Styles */
.single-post .post-content {
    margin-top: 2.5rem;
}

.single-post.post .post-title {
    font-size: 3rem;
    /* Prevent title overflow - support non-breaking text */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

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

/* Related posts (You might also like): smaller titles on single pages */
.single-extras .related-grid .post-title {
    font-size: 1.3rem;
    line-height: 1.35;
}

@media (max-width: 768px) {
    .single-extras .related-grid .post-title {
        font-size: 1.25rem;
    }
}

/* Single post layout like screenshot */
body.single-post {
    --single-post-hero-max-width: 1080px;
    background-color: #f6f3ea;
}

[data-theme="dark"] body.single-post {
    background-color: var(--bg-color);
}

/* Single post wrapper */
.single-post-wrapper {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    /* Ensure content is visible on page load */
    padding-top: 2rem;
    /* Ensure wrapper doesn't cause content to be hidden */
    min-height: 0;
    /* Ensure wrapper doesn't clip content */
    overflow: visible;
}

/* When there's a featured image, ensure content is visible */
.single-post-wrapper:has(.single-featured-image) {
    padding-top: 0; /* No top padding when featured image is present */
    /* Ensure content box is positioned to be visible */
    scroll-padding-top: 0;
    /* Ensure wrapper doesn't clip overlapping content */
    overflow: visible;
}

/* Boxed content container - attached to featured image */
.single-content-box {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 2.5rem 3rem;
    border: 1px solid var(--border-soft);
    max-width: calc(var(--max-width) - 200px) !important;
    width: calc(100% - 200px);
    margin: 0 auto;
    position: relative;
    overflow: visible; /* Changed from hidden to ensure content is never clipped */
    /* Ensure content box is always visible */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Remove ALL borders from linked images within single content box */
.single-content-box a img,
.single-content-box figure a,
.single-content-box figure a img,
.single-content-box .wp-block-image a,
.single-content-box .wp-block-image a img,
.single-content-box .wp-block-gallery a,
.single-content-box .wp-block-gallery a img,
.single-content-box .wp-block-gallery figure a,
.single-content-box .wp-block-gallery figure a img,
.single-content-box .gallery a,
.single-content-box .gallery a img {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.single-content-box figure a,
.single-content-box .wp-block-image a,
.single-content-box .wp-block-gallery a,
.single-content-box .gallery a {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}


/* When featured image exists, overlap content box over bottom portion */
.single-featured-image + .single-content-box {
    margin-top: -80px !important; /* Increased overlap to ensure content starts within viewport */
    border-radius: 14px;
    z-index: 1;
    position: relative;
    border-top: none; /* Remove top border to eliminate white line */
    /* Ensure content box padding-top keeps title visible */
    padding-top: 2.5rem;
    /* Ensure content starts at visible position */
    scroll-margin-top: 2rem;
    /* Ensure minimum visibility - content should start within viewport */
    min-height: auto;
    /* Ensure content is positioned to be visible on page load */
    top: 0;
    /* Force visibility */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    /* Ensure content is never clipped */
    overflow: visible !important;
}

/* Ensure post header is immediately visible */
.single-featured-image + .single-content-box .post-header {
    position: relative;
    z-index: 2;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    /* Ensure header content is never hidden */
    overflow: visible;
}

.single-featured-image + .single-content-box .post-title {
    position: relative;
    z-index: 2;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    /* Ensure title is never hidden */
    overflow: visible;
}

/* Ensure post content is always visible */
.single-featured-image + .single-content-box .post-content,
.single-featured-image + .single-content-box .entry-content {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    overflow: visible !important;
    /* Ensure content is never clipped */
    max-height: none !important;
    height: auto !important;
}

/* Ensure all content inside single-content-box is visible */
.single-content-box .post-content,
.single-content-box .entry-content,
.single-content-box article {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

/* When no featured image, add top margin */
.single-content-box:first-child {
    margin-top: 2rem;
}

/* Featured image should be full-width with rounded corners */
.single-featured-image {
    width: 100%;
    margin-bottom: 0;
    max-width: min(var(--max-width), var(--single-post-hero-max-width));
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 0;
    margin-bottom: -80px; /* Increased to match content box overlap */
    /* Ensure featured image starts at top */
    margin-top: 0;
    padding-top: 0;
    /* Ensure image container doesn't clip content */
    overflow: visible;
}

.single-featured-image-media {
    aspect-ratio: 16 / 7;
    overflow: hidden;
    border-radius: 14px;
    background: var(--bg-soft);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.single-featured-image img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/* Ensure content box is always visible - add top offset */
.single-featured-image + .single-content-box {
    transform: translateY(0);
    /* Force content to be visible */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Orange accent border at top of content box */
.single-content-box::before {
    content: '';
    position: absolute;
    top: 0; /* Start from the very top edge */
    left: 0;
    right: 0;
    height: 4px;
    background: var(--primary-color);
    border-radius: 14px 14px 0 0; /* Match parent's top border-radius exactly */
    z-index: 1;
}

/* When overlapping featured image, ensure orange border is at the very top */
.single-featured-image + .single-content-box::before {
    top: 0;
    border-radius: 14px 14px 0 0;
}

[data-theme="dark"] .single-content-box {
    background: #161616;
    border-color: rgba(255, 75, 43, 0.2);
    box-shadow: 0 6px 24px rgba(255, 75, 43, 0.15);
}

[data-theme="dark"] .single-post .post-title {
    color: #ffffff;
}

[data-theme="dark"] .single-post .post-meta {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .single-post .post-meta .sep {
    color: rgba(255, 255, 255, 0.5);
}

/* Custom Post Meta Section */
.post-meta-custom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-light);
    border-radius: 12px;
    margin: 1.5rem 0 2rem;
    border: 1px solid var(--border-soft);
}

.post-meta-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
}

.author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--border-soft);
    display: block;
}

.author-name {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.post-meta-info {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex: 1;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-body);
    font-size: 0.9rem;
}

.meta-icon {
    width: 16px;
    height: 16px;
    color: var(--primary-color);
    flex-shrink: 0;
}

.post-meta-social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 0 0 auto;
    position: relative;
    z-index: 1000;
    overflow: visible;
}

.social-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    color: var(--text-body);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.social-action-btn:hover {
    background: var(--bg-soft);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.social-action-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.comments-count {
    font-weight: 500;
}

/* Share Menu */
.share-wrapper {
    position: relative;
    z-index: 1000;
}

.share-menu {
    position: absolute;
    top: calc(100% + 8px) !important;
    bottom: auto !important;
    right: 0;
    background: #ffffff;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 180px;
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0);
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1001;
    display: block !important;
}

.share-wrapper.active .share-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.share-menu-item {
    display: block;
    width: 100%;
    padding: 0.75rem 1.25rem;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-dark);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: inherit;
    text-decoration: none;
}

.share-menu-item:hover {
    background: var(--bg-light);
    color: var(--primary-color);
}

.share-menu-item:first-child {
    border-radius: 10px 10px 0 0;
}

.share-menu-item:last-child {
    border-radius: 0 0 10px 10px;
}

/* Dark Mode Styles */
[data-theme="dark"] .post-meta-custom {
    background: #1a1a1a;
    border-color: rgba(255, 75, 43, 0.15);
}

[data-theme="dark"] .author-name {
    color: #ffffff;
}

[data-theme="dark"] .meta-item {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .social-action-btn {
    border-color: rgba(255, 75, 43, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .social-action-btn:hover {
    background: rgba(255, 75, 43, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

[data-theme="dark"] .share-menu {
    background: #1a1a1a;
    border-color: rgba(255, 75, 43, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .share-menu-item {
    color: rgba(255, 255, 255, 0.9);
}

[data-theme="dark"] .share-menu-item:hover {
    background: rgba(255, 75, 43, 0.1);
    color: var(--primary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .post-meta-custom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }
    
    .post-meta-info {
        width: 100%;
        gap: 1.25rem;
    }
    
    .post-meta-social {
        width: 100%;
        justify-content: flex-start;
    }
    
    .share-menu {
        right: auto;
        left: 0;
        top: calc(100% + 8px) !important;
        bottom: auto !important;
    }
}

/* Newsletter Signup Form */
.post-newsletter {
    margin: 3rem 0;
}

.newsletter-container {
    background: linear-gradient(135deg, #ff4b2b 0%, #ff6b4a 100%);
    border-radius: 20px;
    padding: 2.5rem;
    color: #ffffff;
    box-shadow: 0 8px 32px rgba(255, 75, 43, 0.2);
}

.newsletter-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: #ffffff;
    line-height: 1.3;
}

.newsletter-description {
    font-size: 1rem;
    margin: 0 0 1.75rem 0;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
}

.newsletter-form {
    margin: 0;
}

.newsletter-fields {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.newsletter-input {
    flex: 1;
    min-width: 200px;
    padding: 0.875rem 1.25rem;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #ffffff;
    color: var(--text-dark);
    transition: box-shadow 0.2s ease;
}

.newsletter-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

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

.newsletter-submit {
    padding: 0.875rem 2rem;
    background: #ffd700;
    color: #1a1a1a;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.newsletter-submit:hover {
    background: #ffed4e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.newsletter-disclaimer {
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Author Box */
.post-author-box {
    margin: 3rem 0;
    background: var(--bg-white);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-soft);
    position: relative;
}

.author-box-divider {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: var(--border-soft);
    z-index: 1;
}

.author-box-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
}

.author-box-avatar {
    position: relative;
    z-index: 2;
    margin-top: -50px;
}

.author-box-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid var(--bg-white);
    display: block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.author-box-info {
    max-width: 600px;
}

.author-box-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--text-dark);
}

.author-box-tagline {
    font-size: 1rem;
    color: var(--text-body);
    margin: 0 0 1rem 0;
    font-weight: 500;
}

.author-box-bio {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-body);
    margin: 0 0 1.25rem 0;
}

.author-box-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.author-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--text-dark);
    transition: all 0.2s ease;
    text-decoration: none;
}

.author-social-link:hover {
    background: var(--primary-color);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 75, 43, 0.3);
}

.author-social-link svg {
    width: 20px;
    height: 20px;
}

/* Dark Mode Styles */
[data-theme="dark"] .newsletter-container {
    background: linear-gradient(135deg, #ff4b2b 0%, #ff6b4a 100%);
    box-shadow: 0 8px 32px rgba(255, 75, 43, 0.3);
}

[data-theme="dark"] .post-author-box {
    background: #1a1a1a;
    border-color: rgba(255, 75, 43, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .author-box-divider {
    background: rgba(255, 75, 43, 0.2);
}

[data-theme="dark"] .author-box-img {
    border-color: #1a1a1a;
}

[data-theme="dark"] .author-box-name {
    color: #ffffff;
}

[data-theme="dark"] .author-box-tagline {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .author-box-bio {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .author-social-link {
    background: rgba(255, 75, 43, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .author-social-link:hover {
    background: var(--primary-color);
    color: #ffffff;
}

/* Step Badge Styles for Gutenberg Blocks */
.wp-block-heading.has-step-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Responsive */
@media (max-width: 768px) {
    .newsletter-container {
        padding: 2rem 1.5rem;
    }
    
    .newsletter-title {
        font-size: 1.5rem;
    }
    
    .newsletter-fields {
        flex-direction: column;
    }
    
    .newsletter-input {
        min-width: 100%;
    }
    
    .newsletter-submit {
        width: 100%;
    }
    
    .post-author-box {
        padding: 2rem 1.5rem;
    }
    
    .author-box-name {
        font-size: 1.25rem;
    }
    
    .step-heading-wrapper,
    .entry-content h2:has(.step-badge),
    .entry-content h3:has(.step-badge),
    .entry-content h4:has(.step-badge),
    .post-content h2:has(.step-badge),
    .post-content h3:has(.step-badge),
    .post-content h4:has(.step-badge),
    .page-content h2:has(.step-badge),
    .page-content h3:has(.step-badge),
    .page-content h4:has(.step-badge) {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .step-badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

[data-theme="dark"] .single-post .post-meta a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

[data-theme="dark"] .single-post .post-meta a:hover {
    color: var(--primary-color);
}

[data-theme="dark"] .single-content-box::before {
    background: var(--primary-color);
}

/* Note: Single post content box width is defined above in the main .single-content-box rule */

@media (max-width: 1024px) {
    .single-content-box {
        padding: 2rem 2rem;
    }
    
    .single-post-wrapper {
        padding: 0 1.5rem;
    }
    
    .single-featured-image {
        padding: 0 1.5rem;
    }
    
    .single-extras {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .single-featured-image {
        margin: 0 auto;
        padding: 0 1rem;
    }
    
    .single-featured-image-media {
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }
    
    .single-content-box {
        padding: 1.75rem 1.5rem;
        border-radius: 12px;
        max-width: calc(100% - 40px) !important;
        width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
    }
    
    .single-content-box::before {
        top: -1px;
        left: -1px;
        right: -1px;
        border-radius: 12px 12px 0 0; /* Match mobile border-radius */
    }
    
    .single-featured-image + .single-content-box {
        margin-top: -80px !important; /* Match desktop overlap - increased for visibility */
        border-radius: 12px;
        border-top: none; /* Remove top border on mobile too */
        /* Ensure content is visible on mobile */
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
    }
    
    .single-featured-image + .single-content-box::before {
        border-radius: 12px 12px 0 0; /* Match mobile border-radius */
    }
    
    .single-post-wrapper {
        padding: 0 1rem;
    }
    
    .single-extras {
        margin-top: 1.5rem;
    }
}

/* Featured image and content box overlap */
.single-featured-image {
    margin: 0 auto;
    width: 100%;
    max-width: min(var(--max-width), var(--single-post-hero-max-width));
}

.single-featured-image img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/* Single post article - no box, part of single-content-box */
.single-post.post {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    border: none;
    max-width: none;
    margin: 0;
    flex: 1;
    min-width: 0;
}

[data-theme="dark"] .single-post.post {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

[data-theme="dark"] .single-featured-image img {
    opacity: 0.95;
}

[data-theme="dark"] .single-featured-image-media {
    box-shadow: 0 8px 32px rgba(255, 75, 43, 0.2);
}

.single-post .post-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 1.5rem;
    /* Ensure header is visible */
    position: relative;
    z-index: 2;
    visibility: visible;
    opacity: 1;
}

/* Ensure post title is visible */
.single-post .post-title {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

.single-post .post-categories-tags {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.single-post .post-categories-tags .cat-links a,
.single-post .post-categories-tags .tag-links a {
    color: var(--primary-color);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.single-post .post-categories-tags .cat-links a:hover,
.single-post .post-categories-tags .tag-links a:hover {
    opacity: 0.8;
}

[data-theme="dark"] .single-post .post-categories-tags .cat-links a,
[data-theme="dark"] .single-post .post-categories-tags .tag-links a {
    color: var(--primary-color);
}

.single-post .post-meta {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(0, 0, 0, 0.6);
}

.single-post .post-content {
    margin-top: 2rem;
    font-size: 1.05rem;
    line-height: 1.85;
}

.single-post .post-content a {
    border-bottom: 1px solid rgba(255, 75, 43, 0.3);
    color: var(--link-color);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.single-post .post-content a:hover {
    border-bottom-color: var(--accent-color);
    color: var(--accent-color);
}

/* Remove ALL borders and underlines from linked images in single posts - comprehensive fix */
.single-post .post-content a img,
.single-post .post-content figure a,
.single-post .post-content figure a img,
.single-post .post-content .wp-block-image a,
.single-post .post-content .wp-block-image a img,
.single-post .post-content .wp-block-gallery a,
.single-post .post-content .wp-block-gallery a img,
.single-post .post-content .wp-block-gallery figure a,
.single-post .post-content .wp-block-gallery figure a img,
.single-post .post-content .gallery a,
.single-post .post-content .gallery a img,
.single-post .post-content .gallery-item a,
.single-post .post-content .gallery-item a img {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.single-post .post-content a:hover img,
.single-post .post-content figure a:hover img,
.single-post .post-content .wp-block-image a:hover img,
.single-post .post-content .wp-block-gallery a:hover img,
.single-post .post-content .gallery a:hover img {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Also remove borders from the link wrapper itself in single posts */
.single-post .post-content figure a,
.single-post .post-content .wp-block-image a,
.single-post .post-content .wp-block-gallery a,
.single-post .post-content .gallery a {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

[data-theme="dark"] .single-post .post-content a {
    border-bottom-color: rgba(255, 75, 43, 0.4);
    color: var(--link-color);
}

[data-theme="dark"] .single-post .post-content a:hover {
    border-bottom-color: var(--accent-color);
    color: var(--accent-color);
}

/* Single extras also centered and boxed */
.single-extras {
    max-width: 1100px;
    margin: 2rem auto 0;
    padding: 0 2rem;
}

.single-extras .post-navigation,
.single-extras .comments-area,
.single-extras .related-posts {
    margin-top: 1.75rem;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    padding: 1.75rem 2.25rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .single-extras .post-navigation,
[data-theme="dark"] .single-extras .comments-area,
[data-theme="dark"] .single-extras .related-posts {
    background: #161616;
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

.related-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0;
    color: var(--text-dark);
    text-align: center;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(255, 75, 43, 0.2);
    margin-bottom: 2rem;
}

[data-theme="dark"] .related-title {
    color: var(--text-dark);
    border-bottom-color: rgba(255, 75, 43, 0.3);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    align-items: stretch;
    margin-top: 1.5rem;
}

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

@media (max-width: 640px) {
    .related-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Related posts and all post grids use same styling */
.related-grid .post,
.posts-grid .post {
    margin: 0;
    padding: 0;
    border-bottom: none;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
}

.related-grid .post:hover,
.posts-grid .post:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .related-grid .post,
[data-theme="dark"] .posts-grid .post {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .related-grid .post:hover,
[data-theme="dark"] .posts-grid .post:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Ensure related grid posts have same thumbnail styling */
.related-grid .post-thumbnail,
.posts-grid .post-thumbnail {
    margin: 0;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    aspect-ratio: 16 / 9;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
}

.related-grid .post-thumbnail img,
.posts-grid .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
}

.related-grid .post-thumbnail .thumbnail-placeholder,
.posts-grid .post-thumbnail .thumbnail-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

[data-theme="dark"] .related-grid .post-thumbnail,
[data-theme="dark"] .posts-grid .post-thumbnail {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
}

[data-theme="dark"] .related-grid .post-thumbnail .thumbnail-placeholder,
[data-theme="dark"] .posts-grid .post-thumbnail .thumbnail-placeholder {
    color: rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
}

.related-grid .post-header,
.posts-grid .post-header {
    margin: 0;
    padding: 1.5rem 1.5rem 0;
    border: none;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.related-grid .post-content,
.posts-grid .post-content {
    margin: 0;
    padding: 0 1.5rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-color);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.related-grid .post-content p,
.posts-grid .post-content p {
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.7;
    max-height: calc(1.7em * 2);
}

.related-grid .read-more,
.posts-grid .read-more {
    display: block;
    margin-top: auto;
    padding: 1rem 1.5rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.related-grid .read-more:hover,
.posts-grid .read-more:hover {
    color: var(--accent-color);
}

[data-theme="dark"] .related-grid .read-more,
[data-theme="dark"] .posts-grid .read-more {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Gutenberg blocks in single posts */
body.single-post .entry-content,
body.single-post .post-content {
    max-width: 100%;
    width: 100%;
}

body.single-post .single-content-box .entry-content {
    max-width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    :root {
        --spacing-unit: 1rem;
    }

    .site-container {
        padding: 0;
    }

    .site-main {
        padding: 0 1.5rem;
    }


    .site-header {
        padding: 1.25rem 0;
    }

    .header-wrapper {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        gap: 1rem;
    }

    .site-title {
        font-size: 1.25rem;
    }

    .site-branding {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
    }

    .header-right {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem 1.25rem;
    }

    .main-navigation ul {
        gap: 1.5rem;
    }

    .header-social-icons {
        margin-top: 0;
        margin-left: 0;
        gap: 1rem;
    }

    .theme-switcher {
        margin-left: auto;
        margin-top: 0;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.75rem;
    }

    .post-title {
        font-size: 1.75rem;
    }

    .main-navigation ul {
        gap: 1rem 1.25rem;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .main-navigation a {
        font-size: 0.95rem;
    }

    /* Mobile submenu */
    .main-navigation ul.sub-menu,
    .main-navigation ul.children {
        position: static;
        display: flex;
        box-shadow: none;
        border: none;
        padding-left: 1.5rem;
        margin-top: 0.5rem;
    }

    .main-navigation ul.sub-menu a,
    .main-navigation ul.children a {
        padding: 0.5rem 0;
        border-bottom: none;
    }

    .post-content {
        font-size: 1rem;
    }

    .page-content {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .site-container {
        padding: 0 1rem;
    }

    .site-title {
        font-size: 1.5rem;
    }

    .main-navigation ul {
        flex-direction: row;
        gap: 0.85rem 1rem;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }
}

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

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 8px 16px;
    z-index: 999;
}

.skip-link:focus {
    top: 0;
}

/* Post Navigation */
.post-navigation {
    margin: 3rem 0;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
}

.post-navigation .nav-subtitle {
    display: block;
    font-size: 0.9rem;
    color: var(--secondary-color);
    margin-bottom: 0.5rem;
}

.post-navigation .nav-title {
    font-weight: 500;
    color: var(--primary-color);
}

.post-navigation a:hover .nav-title {
    color: var(--accent-color);
}

/* Comments */
.comments-area {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--border-color);
}

.comments-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    color: var(--text-dark);
}

[data-theme="dark"] .comments-title {
    color: var(--text-dark);
}

/* Comment form wrapper - rounded corners */
#respond {
    background-color: #ffffff;
    border-radius: 14px;
    padding: 2.5rem;
    border: 1px solid var(--border-soft);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    margin-top: 3rem;
}

[data-theme="dark"] #respond {
    background-color: #1a1a1a;
    border-color: rgba(255, 75, 43, 0.15);
    box-shadow: 0 2px 8px rgba(255, 75, 43, 0.1);
}

#respond .comment-reply-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

[data-theme="dark"] #respond .comment-reply-title {
    color: var(--text-dark);
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment {
    margin-bottom: 2rem;
    padding: 28px 24px;
    background-color: #ffffff;
    border-radius: 14px;
    border: 1px solid var(--border-soft);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.comment:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: var(--border-gray);
}

[data-theme="dark"] .comment {
    background-color: #1a1a1a;
    border-color: rgba(255, 75, 43, 0.15);
    box-shadow: 0 2px 8px rgba(255, 75, 43, 0.1);
}

[data-theme="dark"] .comment:hover {
    box-shadow: 0 6px 20px rgba(255, 75, 43, 0.2);
    border-color: rgba(255, 75, 43, 0.25);
}

.comment:last-child {
    margin-bottom: 0;
}

/* Comment header with avatar and author info */
.comment-body {
    display: block;
}

.comment-author {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: nowrap;
}

.comment-author .avatar,
.comment-author img {
    flex-shrink: 0;
}

.comment-author-info {
    flex: 1;
    min-width: 0;
}

/* Circular avatar */
.comment-author .avatar,
.comment-author img,
.comment .avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    object-fit: cover;
    background-color: #f5f5f5;
}

[data-theme="dark"] .comment-author .avatar,
[data-theme="dark"] .comment-author img,
[data-theme="dark"] .comment .avatar {
    border-color: rgba(255, 255, 255, 0.15);
    background-color: #2a2a2a;
}

.comment-author .fn {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-dark);
    margin: 0 0 0.25rem 0;
    display: inline-block;
}

.comment-author .fn a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.comment-author .fn a:hover {
    color: var(--primary-color);
}

[data-theme="dark"] .comment-author .fn,
[data-theme="dark"] .comment-author .fn a {
    color: var(--text-dark);
}

[data-theme="dark"] .comment-author .fn a:hover {
    color: var(--primary-color);
}

.comment-author .says {
    display: none;
}

.comment-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    display: block;
}

.comment-meta a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.comment-meta a:hover {
    color: var(--primary-color);
}

[data-theme="dark"] .comment-meta {
    color: var(--text-muted);
}

[data-theme="dark"] .comment-meta a {
    color: var(--text-muted);
}

[data-theme="dark"] .comment-meta a:hover {
    color: var(--primary-color);
}

.comment-content {
    margin-left: 0;
    margin-top: 0;
    /* Prevent comment overflow - support non-breaking text */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    padding-left: calc(56px + 1rem);
    line-height: 1.75;
    color: var(--text-body);
    font-size: 0.95rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    clear: both;
    display: block;
}

.comment-content p {
    margin-bottom: 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.comment-content p:last-child {
    margin-bottom: 0;
}

.comment-content a {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
    word-break: break-word;
}

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

/* Blockquotes in comments */
.comment-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--text-muted);
    background: linear-gradient(90deg, rgba(255, 75, 43, 0.05) 0%, transparent 100%);
    padding: 1rem 1.5rem;
    border-radius: 0 6px 6px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

[data-theme="dark"] .comment-content blockquote {
    border-left-color: var(--primary-color);
    color: var(--text-muted);
}

/* Code tags in comments */
.comment-content code {
    background-color: #f5f5f5;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 0.9em;
    font-family: "Courier New", monospace;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-all;
    max-width: 100%;
    display: inline-block;
}

[data-theme="dark"] .comment-content code {
    background-color: #2d2d2d;
    color: #f8f8f2;
}

/* Pre tags in comments */
.comment-content pre {
    background-color: #f5f5f5;
    padding: 1rem;
    border-radius: 5px;
    overflow-x: auto;
    margin: 1.5rem 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.comment-content pre code {
    background: none;
    padding: 0;
    word-break: normal;
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
}

[data-theme="dark"] .comment-content pre {
    background-color: #2d2d2d;
    color: #f8f8f2;
}

/* Definition lists in comments */
.comment-content dl {
    margin: 1.5rem 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.comment-content dt {
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.comment-content dt:first-child {
    margin-top: 0;
}

.comment-content dd {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

[data-theme="dark"] .comment-content dt {
    color: var(--text-dark);
}

/* Tables in comments */
.comment-content table {
    width: 100%;
    max-width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
    overflow-x: auto;
    box-sizing: border-box;
}

.comment-content table th,
.comment-content table td {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.comment-content table th {
    font-weight: 700;
    background-color: var(--bg-light);
}

[data-theme="dark"] .comment-content table th {
    background-color: #2a2a2a;
}

[data-theme="dark"] .comment-content {
    color: var(--text-body);
}

[data-theme="dark"] .comment-content a {
    color: var(--primary-color);
}

[data-theme="dark"] .comment-content a:hover {
    color: var(--accent-hover);
}

/* Reply link */
.comment-reply-link {
    display: inline-block;
    margin-top: 1rem;
    margin-left: calc(56px + 1rem);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background-color: rgba(255, 75, 43, 0.1);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.comment-reply-link:hover {
    background-color: rgba(255, 75, 43, 0.2);
    color: var(--primary-color);
    transform: translateX(2px);
}

[data-theme="dark"] .comment-reply-link {
    color: var(--link-color);
    background-color: rgba(255, 75, 43, 0.15);
}

[data-theme="dark"] .comment-reply-link:hover {
    background-color: rgba(255, 75, 43, 0.25);
    color: var(--primary-color);
}

/* Nested comments (replies) */
.comment .children {
    list-style: none;
    margin: 1.5rem 0 0 0;
    padding: 0;
    padding-left: 2rem;
    border-left: 2px solid var(--border-soft);
}

[data-theme="dark"] .comment .children {
    border-left-color: rgba(255, 75, 43, 0.2);
}

.comment .children .comment {
    margin-top: 1.5rem;
    margin-left: 0;
    padding-left: 1.5rem;
    border-radius: 14px;
}

@media (max-width: 768px) {
    .single-extras {
        padding-left: var(--shakeel-mobile-gutter, 1rem);
        padding-right: var(--shakeel-mobile-gutter, 1rem);
    }

    .single-extras .comments-area {
        padding: 1.25rem 1rem;
    }

    .comments-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    #respond {
        padding: 1.5rem 1rem;
        margin-top: 2rem;
    }

    #respond .comment-reply-title {
        font-size: 1.35rem;
        margin-bottom: 1rem;
    }

    .comment {
        margin-bottom: 1rem;
        padding: 1rem;
        border-radius: 12px;
    }

    .comment-body {
        flex-direction: column;
        gap: 1rem;
    }
    
    .comment-author {
        flex-direction: row;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 0.625rem;
    }

    .comment-author .avatar,
    .comment-author img,
    .comment .avatar {
        width: 44px;
        height: 44px;
    }

    .comment-author .fn {
        font-size: 0.95rem;
    }

    .comment-meta {
        font-size: 0.8125rem;
    }

    .comment-content {
        font-size: 0.9375rem;
        line-height: 1.7;
    }
    
    .comment-content,
    .comment-reply-link {
        margin-left: 0;
        padding-left: 0;
    }

    .comment-reply-link {
        margin-top: 0.875rem;
        padding: 0.45rem 0.85rem;
        font-size: 0.85rem;
    }
    
    .comment .children {
        margin-top: 1rem;
        padding-left: 0.75rem;
        border-left-width: 1px;
    }
    
    .comment .children .comment {
        margin-top: 1rem;
        padding-left: 0.875rem;
    }
}

@media (max-width: 480px) {
    .single-extras .comments-area {
        padding: 1rem 0.875rem;
    }

    #respond {
        padding: 1.25rem 0.875rem;
    }

    .comment {
        padding: 0.9375rem;
    }

    .comment-author .avatar,
    .comment-author img,
    .comment .avatar {
        width: 40px;
        height: 40px;
    }

    .comment .children {
        padding-left: 0.625rem;
    }

    .comment .children .comment {
        padding-left: 0.75rem;
    }
}

.comment-form {
    margin-top: 0;
}

.comment-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.9rem;
}

[data-theme="dark"] .comment-form label {
    color: var(--text-dark);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    background-color: #ffffff;
    color: var(--text-body);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 75, 43, 0.15);
}

[data-theme="dark"] .comment-form input[type="text"],
[data-theme="dark"] .comment-form input[type="email"],
[data-theme="dark"] .comment-form input[type="url"],
[data-theme="dark"] .comment-form textarea {
    background-color: #1a1a1a;
    border-color: var(--border-soft);
    color: var(--text-body);
}

[data-theme="dark"] .comment-form input[type="text"]:focus,
[data-theme="dark"] .comment-form input[type="email"]:focus,
[data-theme="dark"] .comment-form input[type="url"]:focus,
[data-theme="dark"] .comment-form textarea:focus {
    border-color: var(--link-color);
    box-shadow: 0 0 0 3px rgba(255, 75, 43, 0.2);
}

.comment-form input[type="submit"] {
    background: var(--primary-color);
    color: #ffffff;
    padding: 14px 32px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 75, 43, 0.25);
}

.comment-form input[type="submit"]:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 75, 43, 0.4);
}

.comment-form input[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 75, 43, 0.25);
}

[data-theme="dark"] .comment-form input[type="submit"] {
    background: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 75, 43, 0.3);
}

[data-theme="dark"] .comment-form input[type="submit"]:hover {
    background: var(--accent-hover);
    box-shadow: 0 4px 16px rgba(255, 75, 43, 0.5);
}

/* Comment form checkboxes and privacy notice */
.comment-form .comment-form-cookies-consent {
    margin: 1.5rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.comment-form .comment-form-cookies-consent input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.comment-form .comment-form-cookies-consent label {
    margin: 0;
    font-weight: 400;
    color: var(--text-body);
    font-size: 0.9rem;
    line-height: 1.6;
}

.comment-form .comment-notes,
.comment-form .logged-in-as {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.comment-form .comment-notes a,
.comment-form .logged-in-as a {
    color: var(--primary-color);
    text-decoration: underline;
}

.comment-form .comment-notes a:hover,
.comment-form .logged-in-as a:hover {
    color: var(--accent-hover);
}

[data-theme="dark"] .comment-form .comment-form-cookies-consent label,
[data-theme="dark"] .comment-form .comment-notes,
[data-theme="dark"] .comment-form .logged-in-as {
    color: var(--text-muted);
}

/* Comment form submit wrapper */
.comment-form .form-submit {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

/* Post Tags */
.post-tags {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.post-tags a {
    color: var(--secondary-color);
    margin-right: 0.5rem;
}

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

/* Search Form */
.search-form {
    display: flex;
    gap: 0.5rem;
    margin: 2rem 0;
}

.search-form .search-field {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    font-family: var(--font-primary);
    font-size: 1rem;
}

.search-form .search-submit {
    padding: 14px 32px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 75, 43, 0.25);
}

.search-form .search-submit:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 75, 43, 0.4);
}

/* Footer Widgets - removed, using custom footer structure */

/* Gutenberg Block Editor Support */
.page-content,
.entry-content {
    max-width: 100%;
    width: 100%;
}

/* Full-width Gutenberg blocks */
.alignfull {
    width: var(--shakeel-viewport-width);
    max-width: var(--shakeel-viewport-width);
    margin-left: calc(50% - (var(--shakeel-viewport-width) / 2));
    margin-right: calc(50% - (var(--shakeel-viewport-width) / 2));
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Wide Gutenberg blocks */
.alignwide {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Default Gutenberg block alignment */
.alignleft {
    float: left;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 2rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Gutenberg block groups and containers */
.wp-block-group {
    margin: 2rem 0;
}

.wp-block-group__inner-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

/* Full-width block groups */
.alignfull .wp-block-group__inner-container {
    max-width: 100%;
    padding: 0 2rem;
}

/* Wide block groups */
.alignwide .wp-block-group__inner-container {
    max-width: 1400px;
    padding: 0 2rem;
}

/* Gutenberg group blocks with background colors get rounded corners */
.wp-block-group.has-background,
.wp-block-group[style*="background"],
.wp-block-group[class*="background"] {
    border-radius: 14px;
    overflow: hidden;
}

.wp-block-group.has-background .wp-block-group__inner-container,
.wp-block-group[style*="background"] .wp-block-group__inner-container,
.wp-block-group[class*="background"] .wp-block-group__inner-container {
    border-radius: 14px;
}

/* Any Gutenberg block with background color gets rounded corners */
.wp-block-group[style*="background-color"],
.wp-block-group[style*="background:"],
.wp-block-columns[style*="background-color"],
.wp-block-columns[style*="background:"],
.wp-block-column[style*="background-color"],
.wp-block-column[style*="background:"] {
    border-radius: 14px;
    overflow: hidden;
}

/* Gutenberg columns */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 2rem 0;
    /* Prevent column overflow */
    max-width: 100%;
    overflow: visible;
    box-sizing: border-box;
    align-items: flex-start;
}

/* Ensure flex layout works properly */
.wp-block-columns.is-layout-flex {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
}

.wp-block-column.is-layout-flow {
    display: block;
    width: 100%;
    max-width: 100%;
}

/* Alignfull columns - ensure internal columns still work */
.wp-block-columns.alignfull {
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
    /* Ensure flex layout is maintained */
    display: flex !important;
    flex-wrap: wrap;
}

.wp-block-columns.alignfull .wp-block-column {
    box-sizing: border-box;
    /* Ensure columns maintain their flex properties */
    flex-shrink: 1;
    flex-grow: 1;
}

.wp-block-column {
    flex: 1;
    min-width: 0;
    /* Prevent text overflow in columns - support non-breaking text */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
    /* Ensure columns don't overlap */
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
}

/* Specific column counts - ensure proper width distribution */
.wp-block-columns.has-2-columns .wp-block-column {
    flex: 1 1 calc(50% - 1rem);
    min-width: 0;
    max-width: calc(50% - 1rem);
}

.wp-block-columns.has-3-columns .wp-block-column {
    flex: 1 1 calc(33.333% - 1.334rem);
    min-width: 0;
    max-width: calc(33.333% - 1.334rem);
}

.wp-block-columns.has-4-columns .wp-block-column {
    flex: 1 1 calc(25% - 1.5rem);
    min-width: 0;
    max-width: calc(25% - 1.5rem);
}

.wp-block-columns.has-5-columns .wp-block-column {
    flex: 1 1 calc(20% - 1.6rem);
    min-width: 0;
    max-width: calc(20% - 1.6rem);
}

.wp-block-columns.has-6-columns .wp-block-column {
    flex: 1 1 calc(16.666% - 1.667rem);
    min-width: 0;
    max-width: calc(16.666% - 1.667rem);
}

/* Ensure all content inside columns wraps properly */
.wp-block-column > * {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.wp-block-column p,
.wp-block-column div,
.wp-block-column li,
.wp-block-column span {
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

/* Responsive columns */
@media (max-width: 768px) {
    .wp-block-columns.has-3-columns .wp-block-column,
    .wp-block-columns.has-4-columns .wp-block-column,
    .wp-block-columns.has-5-columns .wp-block-column,
    .wp-block-columns.has-6-columns .wp-block-column {
        flex: 1 1 calc(50% - 1rem) !important;
        max-width: calc(50% - 1rem) !important;
    }
}

@media (max-width: 480px) {
    .wp-block-columns .wp-block-column {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Columns with background get rounded corners */
.wp-block-columns.has-background {
    border-radius: 14px;
    overflow: hidden;
    padding: 2rem;
}

.wp-block-column.has-background {
    border-radius: 14px;
    padding: 1.5rem;
}

/* Limit image height in two-column layouts to match text content */
.wp-block-columns .wp-block-column figure img {
    max-height: 500px;
    object-fit: cover;
    object-position: center;
}

/* Ensure images maintain aspect ratio while respecting max-height */
.wp-block-columns .wp-block-column img[style*="object-fit:cover"] {
    max-height: 500px !important;
}

/* Gutenberg buttons */
.wp-block-button {
    margin: 1.5rem 0;
}

.wp-block-button__link {
    background: var(--primary-color);
    color: #ffffff;
    padding: 14px 32px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 75, 43, 0.25);
}

.wp-block-button__link:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 75, 43, 0.4);
    color: #ffffff;
}

/* Gutenberg cover blocks */
.wp-block-cover {
    margin: 2rem 0;
    min-height: 400px;
    border-radius: 14px;
    overflow: hidden;
}




/* Ensure all figure elements display captions */
figure {
    margin: 2rem 0;
    max-width: 100%;
    box-sizing: border-box;
}

figure img {
    max-width: 100%;
    height: auto;
    display: block;
    box-sizing: border-box;
}

figure figcaption {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    /* Prevent caption overflow */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}


/* Gutenberg image blocks */
.wp-block-image {
    margin: 2rem 0;
    max-width: 100%;
}

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

/* Ensure image figures display properly */
.wp-block-image figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

/* Ensure captions in image blocks are visible */
.wp-block-image figcaption {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0.75rem;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    font-weight: 400;
    /* Prevent caption overflow */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

/* Image Alignment Fixes - Prevent Overflow */
/* Full-width images should respect content container */
.entry-content .alignfull,
.post-content .alignfull,
.page-content .alignfull {
    width: var(--shakeel-viewport-width);
    max-width: var(--shakeel-viewport-width);
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: calc(var(--shakeel-viewport-width) / -2);
    margin-right: calc(var(--shakeel-viewport-width) / -2);
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

/* Ensure full-width images don't overflow on smaller screens */
@media (max-width: 768px) {
    .entry-content .alignfull,
    .post-content .alignfull,
    .page-content .alignfull {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Wide images - contained within max-width */
.entry-content .alignwide,
.post-content .alignwide,
.page-content .alignwide {
    max-width: 1400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .entry-content .alignwide,
    .post-content .alignwide,
    .page-content .alignwide {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Image Captions - WordPress and Gutenberg */
/* Standard WordPress captions */
.wp-caption,
figure.wp-caption {
    max-width: 100%;
    margin: 2rem 0;
    text-align: center;
}

.wp-caption img,
figure.wp-caption img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.wp-caption-text,
.wp-caption .wp-caption-text,
figcaption {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin-top: 0.75rem;
    padding: 0;
    font-style: italic;
    text-align: center;
    /* Ensure captions are always visible */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Prevent caption overflow - support non-breaking text */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    font-weight: 400;
}

[data-theme="dark"] .wp-caption-text,
[data-theme="dark"] .wp-caption .wp-caption-text,
[data-theme="dark"] figcaption,
[data-theme="dark"] .wp-block-image figcaption {
    color: rgba(255, 255, 255, 0.72);
}

/* Floated images with captions - contain caption within figure */
figure.alignleft,
.wp-caption.alignleft,
.wp-block-image.alignleft {
    float: left;
    margin-right: 2rem;
    margin-bottom: 1rem;
    max-width: 50%;
    clear: left;
}

figure.alignleft img,
.wp-caption.alignleft img,
.wp-block-image.alignleft img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
}

figure.alignleft figcaption,
.wp-caption.alignleft .wp-caption-text,
.wp-block-image.alignleft figcaption {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0;
    text-align: left;
    clear: both;
    max-width: 100%;
    box-sizing: border-box;
    /* Prevent caption overflow */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
}

figure.alignright,
.wp-caption.alignright,
.wp-block-image.alignright {
    float: right;
    margin-left: 2rem;
    margin-bottom: 1rem;
    max-width: 50%;
    clear: right;
}

figure.alignright img,
.wp-caption.alignright img,
.wp-block-image.alignright img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0;
}

figure.alignright figcaption,
.wp-caption.alignright .wp-caption-text,
.wp-block-image.alignright figcaption {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0;
    text-align: right;
    clear: both;
    max-width: 100%;
    box-sizing: border-box;
    /* Prevent caption overflow */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
}

/* Center-aligned images with captions */
figure.aligncenter,
.wp-caption.aligncenter,
.wp-block-image.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    text-align: center;
    max-width: 100%;
}

figure.aligncenter img,
.wp-caption.aligncenter img,
.wp-block-image.aligncenter img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

figure.aligncenter figcaption,
.wp-caption.aligncenter .wp-caption-text,
.wp-block-image.aligncenter figcaption {
    display: block;
    margin-top: 0.75rem;
    padding: 0;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Prevent caption overflow */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
}

/* Wide and full-width images with captions */
figure.alignwide,
.wp-caption.alignwide,
.wp-block-image.alignwide {
    max-width: 1400px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

figure.alignwide img,
.wp-caption.alignwide img,
.wp-block-image.alignwide img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
}

figure.alignwide figcaption,
.wp-caption.alignwide .wp-caption-text,
.wp-block-image.alignwide figcaption {
    display: block;
    margin-top: 0.75rem;
    padding: 0;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Prevent caption overflow */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
}

figure.alignfull,
.wp-caption.alignfull,
.wp-block-image.alignfull {
    width: var(--shakeel-viewport-width);
    max-width: var(--shakeel-viewport-width);
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: calc(var(--shakeel-viewport-width) / -2);
    margin-right: calc(var(--shakeel-viewport-width) / -2);
    margin-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

figure.alignfull img,
.wp-caption.alignfull img,
.wp-block-image.alignfull img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
}

figure.alignfull figcaption,
.wp-caption.alignfull .wp-caption-text,
.wp-block-image.alignfull figcaption {
    display: block;
    margin-top: 0.75rem;
    padding: 0 2rem;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Prevent caption overflow */
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    font-style: italic;
    font-weight: 400;
}

/* Ensure figure elements contain their content */
figure {
    margin: 2rem 0;
    display: block;
    max-width: 100%;
}

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

/* Clear floats after content */
.entry-content::after,
.post-content::after,
.page-content::after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive adjustments for floated images */
@media (max-width: 768px) {
    figure.alignleft,
    .wp-caption.alignleft,
    .wp-block-image.alignleft,
    figure.alignright,
    .wp-caption.alignright,
    .wp-block-image.alignright {
        float: none;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 1.5rem;
    }
    
    figure.alignleft figcaption,
    .wp-caption.alignleft .wp-caption-text,
    .wp-block-image.alignleft figcaption,
    figure.alignright figcaption,
    .wp-caption.alignright .wp-caption-text,
    .wp-block-image.alignright figcaption {
        text-align: center;
        padding: 0;
    }
    
    figure.alignfull,
    .wp-caption.alignfull,
    .wp-block-image.alignfull {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    figure.alignfull figcaption,
    .wp-caption.alignfull .wp-caption-text,
    .wp-block-image.alignfull figcaption {
        padding: 0 1rem;
    }
}

/* Gutenberg quote blocks */
.wp-block-quote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--text-muted);
    background: linear-gradient(90deg, rgba(255, 75, 43, 0.05) 0%, transparent 100%);
    padding: 1rem 1.5rem;
    border-radius: 0 6px 6px 0;
}

/* Gutenberg separator */
.wp-block-separator {
    margin: 3rem 0;
    border: none;
    border-top: 1px solid var(--border-soft);
}

/* Gutenberg spacer */
.wp-block-spacer {
    clear: both;
}

/* Page content wrapper for full-width support */
body.page .site-main {
    padding: 0;
    max-width: 100%;
}

body.page .content-area {
    max-width: 100%;
    width: 100%;
}

body.page .post {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

body.page .post-header {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem 2rem 1rem;
    text-align: center;
}

body.page.page-id-2031 .post-header,
body.page.page-id-2029 .post-header,
body.page.page-id-2031 .post > .post-title:not(.screen-reader-text),
body.page.page-id-2029 .post > .post-title:not(.screen-reader-text) {
    display: none !important;
}

body.page .post-content {
    max-width: 100%;
    width: 100%;
    padding: 0;
}

[data-theme="dark"] body.page .post-content {
    color: #e8e8e8;
}

[data-theme="dark"] body.page .entry-content {
    color: #e8e8e8;
}

/* Improve text readability on dark backgrounds in dark mode */
[data-theme="dark"] body.page .post-content,
[data-theme="dark"] body.page .entry-content,
[data-theme="dark"] body.single-post .post-content,
[data-theme="dark"] body.single-post .entry-content {
    color: #e8e8e8;
}

/* Text directly on dark background (no white background) should be lighter */
[data-theme="dark"] body.page .post-content > *:not([class*="has-background"]):not([class*="wp-block-group"]):not([class*="wp-block-cover"]):not([class*="wp-block-columns"]):not([style*="background-color"]),
[data-theme="dark"] body.page .entry-content > *:not([class*="has-background"]):not([class*="wp-block-group"]):not([class*="wp-block-cover"]):not([class*="wp-block-columns"]):not([style*="background-color"]),
[data-theme="dark"] body.single-post .post-content > *:not([class*="has-background"]):not([class*="wp-block-group"]):not([class*="wp-block-cover"]):not([class*="wp-block-columns"]):not([style*="background-color"]),
[data-theme="dark"] body.single-post .entry-content > *:not([class*="has-background"]):not([class*="wp-block-group"]):not([class*="wp-block-cover"]):not([class*="wp-block-columns"]):not([style*="background-color"]) {
    color: #e8e8e8;
}

[data-theme="dark"] body.page .post-content h1:not([class*="has-background"]),
[data-theme="dark"] body.page .post-content h2:not([class*="has-background"]),
[data-theme="dark"] body.page .post-content h3:not([class*="has-background"]),
[data-theme="dark"] body.page .post-content h4:not([class*="has-background"]),
[data-theme="dark"] body.page .post-content h5:not([class*="has-background"]),
[data-theme="dark"] body.page .post-content h6:not([class*="has-background"]),
[data-theme="dark"] body.page .entry-content h1:not([class*="has-background"]),
[data-theme="dark"] body.page .entry-content h2:not([class*="has-background"]),
[data-theme="dark"] body.page .entry-content h3:not([class*="has-background"]),
[data-theme="dark"] body.page .entry-content h4:not([class*="has-background"]),
[data-theme="dark"] body.page .entry-content h5:not([class*="has-background"]),
[data-theme="dark"] body.page .entry-content h6:not([class*="has-background"]),
[data-theme="dark"] body.single-post .post-content h1:not([class*="has-background"]),
[data-theme="dark"] body.single-post .post-content h2:not([class*="has-background"]),
[data-theme="dark"] body.single-post .post-content h3:not([class*="has-background"]),
[data-theme="dark"] body.single-post .post-content h4:not([class*="has-background"]),
[data-theme="dark"] body.single-post .post-content h5:not([class*="has-background"]),
[data-theme="dark"] body.single-post .post-content h6:not([class*="has-background"]),
[data-theme="dark"] body.single-post .entry-content h1:not([class*="has-background"]),
[data-theme="dark"] body.single-post .entry-content h2:not([class*="has-background"]),
[data-theme="dark"] body.single-post .entry-content h3:not([class*="has-background"]),
[data-theme="dark"] body.single-post .entry-content h4:not([class*="has-background"]),
[data-theme="dark"] body.single-post .entry-content h5:not([class*="has-background"]),
[data-theme="dark"] body.single-post .entry-content h6:not([class*="has-background"]) {
    color: #f5f5f5;
}

/* ---------------------------------------------------------
   Dark mode: readable text inside LIGHT background blocks
   (works for Gutenberg groups AND your inline "card" divs)
   --------------------------------------------------------- */
[data-theme="dark"] [style*="background-color:#ffffff"],
[data-theme="dark"] [style*="background-color:#FFFFFF"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background-color:#FFF"],
[data-theme="dark"] [style*="background-color:#F7FAFC"],
[data-theme="dark"] [style*="background-color:#f7fafc"],
[data-theme="dark"] [style*="background-color:#EDF2F7"],
[data-theme="dark"] [style*="background-color:#edf2f7"],
[data-theme="dark"] [style*="background-color: #ffffff"],
[data-theme="dark"] [style*="background-color: #FFFFFF"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color: #FFF"],
[data-theme="dark"] [style*="background-color: #F7FAFC"],
[data-theme="dark"] [style*="background-color: #f7fafc"],
[data-theme="dark"] [style*="background-color: #EDF2F7"],
[data-theme="dark"] [style*="background-color: #edf2f7"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background:#FFF"],
[data-theme="dark"] [style*="background:#F7FAFC"],
[data-theme="dark"] [style*="background:#f7fafc"],
[data-theme="dark"] [style*="background:#EDF2F7"],
[data-theme="dark"] [style*="background:#edf2f7"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background: #FFFFFF"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background: #FFF"],
[data-theme="dark"] [style*="background: #F7FAFC"],
[data-theme="dark"] [style*="background: #f7fafc"],
[data-theme="dark"] [style*="background: #EDF2F7"],
[data-theme="dark"] [style*="background: #edf2f7"] {
    color: #4A5568 !important;
}

/* ============================================
   RESOURCES PAGE STYLES
   ============================================ */

.resources-page {
    padding-top: 60px;
    padding-bottom: 70px;
}

/* Resources Header */
.resources-header {
    margin-bottom: 4rem;
    padding: 0 2rem;
}

.resources-header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
}

.resources-main-title {
    font-size: 2rem;
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
    margin: 0 0 1.5rem 0;
    color: var(--text-dark);
}

.resources-main-title span {
    background: rgba(255, 75, 43, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    display: inline-block;
}

.resources-description {
    max-width: 650px;
    margin: 0 auto 1.5rem;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-body);
}

.resources-affiliate {
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Resources Content Sections */
.resources-content {
    padding: 0 2rem;
}

.resources-section {
    padding: 4rem 0;
    margin-bottom: 0;
    margin-left: calc(50% - (var(--shakeel-viewport-width) / 2));
    margin-right: calc(50% - (var(--shakeel-viewport-width) / 2));
    width: var(--shakeel-viewport-width);
    max-width: var(--shakeel-viewport-width);
}

.resources-section-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.resources-section.bg-gray {
    background: var(--bg-light);
}

.resources-section.bg-white {
    background: var(--bg-white);
}

.resources-section-title {
    font-size: 1.75rem;
    line-height: 1.3;
    font-weight: 700;
    text-align: center;
    margin: 0 0 2.5rem 0;
    color: var(--text-dark);
}

/* Resources Grid */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Resource Card */
.resource-card {
    background: var(--bg-white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-soft);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.resource-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(255, 75, 43, 0.15);
    border-color: var(--primary-color);
    text-decoration: none;
    color: inherit;
}

.resource-card-logo {
    text-align: center;
    margin-bottom: 1.5rem;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.resource-card-logo img {
    max-width: 200px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.resource-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.resource-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: var(--text-dark);
    line-height: 1.3;
}

.resource-card-description {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-body);
    margin: 0 0 1.5rem 0;
    flex: 1;
}

.resource-card-button {
    display: inline-block;
    background: var(--primary-color);
    color: #ffffff;
    padding: 0.875rem 1.75rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    width: 100%;
    text-decoration: none;
}

.resource-card-button:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 75, 43, 0.3);
    color: #ffffff;
    text-decoration: none;
}

/* Gutenberg Block Support for Resources */
.resources-content .wp-block-group {
    margin-bottom: 0;
}

.resources-content .wp-block-group.has-background,
.resources-content .wp-block-group[style*="background"] {
    padding: 4rem 2rem;
    margin-left: calc(50% - (var(--shakeel-viewport-width) / 2));
    margin-right: calc(50% - (var(--shakeel-viewport-width) / 2));
    width: var(--shakeel-viewport-width);
    max-width: var(--shakeel-viewport-width);
    border-radius: 0;
}

.resources-content .wp-block-group__inner-container {
    max-width: var(--max-width);
    margin: 0 auto;
}

/* Dark Mode */
[data-theme="dark"] .resources-main-title {
    color: #ffffff;
}

[data-theme="dark"] .resources-description {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme="dark"] .resources-affiliate {
    color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .resources-section-title {
    color: #ffffff;
}

[data-theme="dark"] .resources-section.bg-gray {
    background: #1a1a1a;
}

[data-theme="dark"] .resources-section.bg-white {
    background: #161616;
}

[data-theme="dark"] .resource-card {
    background: #1a1a1a;
    border-color: rgba(255, 75, 43, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .resource-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 8px 24px rgba(255, 75, 43, 0.25);
}

[data-theme="dark"] .resource-card-title {
    color: #ffffff;
}

[data-theme="dark"] .resource-card-description {
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive */
@media (max-width: 768px) {
    .resources-page {
        padding-top: 40px;
        padding-bottom: 50px;
    }
    
    .resources-header {
        margin-bottom: 3rem;
        padding: 0 1.5rem;
    }
    
    .resources-main-title {
        font-size: 1.75rem;
    }
    
    .resources-content {
        padding: 0 1.5rem;
    }
    
    .resources-section {
        padding: 3rem 0;
    }
    
    .resources-section-title {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .resources-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .resource-card {
        padding: 1.5rem;
    }
    
    .resources-content .wp-block-group.has-background,
    .resources-content .wp-block-group[style*="background"] {
        padding: 3rem 1.5rem;
    }
    
    .resources-section-inner {
        padding: 0 1.5rem;
    }
}

[data-theme="dark"] [style*="background-color:#ffffff"] h1,
[data-theme="dark"] [style*="background-color:#ffffff"] h2,
[data-theme="dark"] [style*="background-color:#ffffff"] h3,
[data-theme="dark"] [style*="background-color:#ffffff"] h4,
[data-theme="dark"] [style*="background-color:#ffffff"] h5,
[data-theme="dark"] [style*="background-color:#ffffff"] h6,
[data-theme="dark"] [style*="background-color:#FFFFFF"] h1,
[data-theme="dark"] [style*="background-color:#FFFFFF"] h2,
[data-theme="dark"] [style*="background-color:#FFFFFF"] h3,
[data-theme="dark"] [style*="background-color:#FFFFFF"] h4,
[data-theme="dark"] [style*="background-color:#FFFFFF"] h5,
[data-theme="dark"] [style*="background-color:#FFFFFF"] h6,
[data-theme="dark"] [style*="background-color:#fff"] h1,
[data-theme="dark"] [style*="background-color:#fff"] h2,
[data-theme="dark"] [style*="background-color:#fff"] h3,
[data-theme="dark"] [style*="background-color:#fff"] h4,
[data-theme="dark"] [style*="background-color:#fff"] h5,
[data-theme="dark"] [style*="background-color:#fff"] h6,
[data-theme="dark"] [style*="background-color:#FFF"] h1,
[data-theme="dark"] [style*="background-color:#FFF"] h2,
[data-theme="dark"] [style*="background-color:#FFF"] h3,
[data-theme="dark"] [style*="background-color:#FFF"] h4,
[data-theme="dark"] [style*="background-color:#FFF"] h5,
[data-theme="dark"] [style*="background-color:#FFF"] h6,
[data-theme="dark"] [style*="background-color:#F7FAFC"] h1,
[data-theme="dark"] [style*="background-color:#F7FAFC"] h2,
[data-theme="dark"] [style*="background-color:#F7FAFC"] h3,
[data-theme="dark"] [style*="background-color:#F7FAFC"] h4,
[data-theme="dark"] [style*="background-color:#F7FAFC"] h5,
[data-theme="dark"] [style*="background-color:#F7FAFC"] h6,
[data-theme="dark"] [style*="background-color:#f7fafc"] h1,
[data-theme="dark"] [style*="background-color:#f7fafc"] h2,
[data-theme="dark"] [style*="background-color:#f7fafc"] h3,
[data-theme="dark"] [style*="background-color:#f7fafc"] h4,
[data-theme="dark"] [style*="background-color:#f7fafc"] h5,
[data-theme="dark"] [style*="background-color:#f7fafc"] h6,
[data-theme="dark"] [style*="background-color:#EDF2F7"] h1,
[data-theme="dark"] [style*="background-color:#EDF2F7"] h2,
[data-theme="dark"] [style*="background-color:#EDF2F7"] h3,
[data-theme="dark"] [style*="background-color:#EDF2F7"] h4,
[data-theme="dark"] [style*="background-color:#EDF2F7"] h5,
[data-theme="dark"] [style*="background-color:#EDF2F7"] h6,
[data-theme="dark"] [style*="background-color:#edf2f7"] h1,
[data-theme="dark"] [style*="background-color:#edf2f7"] h2,
[data-theme="dark"] [style*="background-color:#edf2f7"] h3,
[data-theme="dark"] [style*="background-color:#edf2f7"] h4,
[data-theme="dark"] [style*="background-color:#edf2f7"] h5,
[data-theme="dark"] [style*="background-color:#edf2f7"] h6,
[data-theme="dark"] [style*="background:#fff"] h1,
[data-theme="dark"] [style*="background:#fff"] h2,
[data-theme="dark"] [style*="background:#fff"] h3,
[data-theme="dark"] [style*="background:#fff"] h4,
[data-theme="dark"] [style*="background:#fff"] h5,
[data-theme="dark"] [style*="background:#fff"] h6,
[data-theme="dark"] [style*="background:#FFF"] h1,
[data-theme="dark"] [style*="background:#FFF"] h2,
[data-theme="dark"] [style*="background:#FFF"] h3,
[data-theme="dark"] [style*="background:#FFF"] h4,
[data-theme="dark"] [style*="background:#FFF"] h5,
[data-theme="dark"] [style*="background:#FFF"] h6,
[data-theme="dark"] [style*="background: #fff"] h1,
[data-theme="dark"] [style*="background: #fff"] h2,
[data-theme="dark"] [style*="background: #fff"] h3,
[data-theme="dark"] [style*="background: #fff"] h4,
[data-theme="dark"] [style*="background: #fff"] h5,
[data-theme="dark"] [style*="background: #fff"] h6,
[data-theme="dark"] [style*="background: #FFF"] h1,
[data-theme="dark"] [style*="background: #FFF"] h2,
[data-theme="dark"] [style*="background: #FFF"] h3,
[data-theme="dark"] [style*="background: #FFF"] h4,
[data-theme="dark"] [style*="background: #FFF"] h5,
[data-theme="dark"] [style*="background: #FFF"] h6 {
    color: #1A202C !important;
}

[data-theme="dark"] [style*="background-color:#ffffff"] p,
[data-theme="dark"] [style*="background-color:#FFFFFF"] p,
[data-theme="dark"] [style*="background-color:#fff"] p,
[data-theme="dark"] [style*="background-color:#FFF"] p,
[data-theme="dark"] [style*="background-color:#F7FAFC"] p,
[data-theme="dark"] [style*="background-color:#f7fafc"] p,
[data-theme="dark"] [style*="background-color:#EDF2F7"] p,
[data-theme="dark"] [style*="background-color:#edf2f7"] p,
[data-theme="dark"] [style*="background-color:#ffffff"] li,
[data-theme="dark"] [style*="background-color:#FFFFFF"] li,
[data-theme="dark"] [style*="background-color:#fff"] li,
[data-theme="dark"] [style*="background-color:#FFF"] li,
[data-theme="dark"] [style*="background-color:#F7FAFC"] li,
[data-theme="dark"] [style*="background-color:#f7fafc"] li,
[data-theme="dark"] [style*="background-color:#EDF2F7"] li,
[data-theme="dark"] [style*="background-color:#edf2f7"] li,
[data-theme="dark"] [style*="background:#fff"] p,
[data-theme="dark"] [style*="background:#FFF"] p,
[data-theme="dark"] [style*="background: #fff"] p,
[data-theme="dark"] [style*="background: #FFF"] p,
[data-theme="dark"] [style*="background:#fff"] li,
[data-theme="dark"] [style*="background:#FFF"] li,
[data-theme="dark"] [style*="background: #fff"] li,
[data-theme="dark"] [style*="background: #FFF"] li {
    color: #4A5568 !important;
}

/* Keep compact accent badges readable inside homepage highlight cards. */
.page-content .home-premium .hp-highlight .hp-icon {
    color: #ffffff !important;
    font-size: 11px !important;
    line-height: 1 !important;
}

/* Mobile layout tuning for page-based landing sections and the header nav */
@media (max-width: 768px) {
    :root {
        --shakeel-mobile-gutter: 1rem;
        --shakeel-mobile-section-padding: 1.25rem;
        --shakeel-mobile-hero-padding: 1.5rem;
        --shakeel-single-mobile-image-overhang: 1rem;
    }

    .header-wrapper {
        padding-left: var(--shakeel-mobile-gutter);
        padding-right: var(--shakeel-mobile-gutter);
    }

    .header-wrapper:not(:has(.header-right.has-collapsed-menu)) .site-branding {
        justify-content: center;
        text-align: center;
    }

    .header-right {
        display: grid;
        width: 100%;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        align-items: center;
        column-gap: 0.75rem;
        row-gap: 1rem;
    }

    .main-navigation {
        display: flex;
        grid-column: 1 / -1;
        grid-row: 1;
        justify-content: center;
        margin-top: 0;
    }

    .main-navigation > ul {
        width: 100%;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .menu-toggle[hidden] {
        display: none !important;
    }

    .menu-toggle {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }

    .header-right.has-collapsed-menu {
        align-items: center;
        gap: 0.9rem 1rem;
    }

    .header-right.has-collapsed-menu .menu-toggle {
        display: inline-flex;
        grid-row: 1;
    }

    .header-right.has-collapsed-menu .header-social-icons {
        grid-row: 1;
    }

    .header-right.has-collapsed-menu .theme-switcher {
        grid-row: 1;
        margin-left: 0;
    }

    .header-right.has-collapsed-menu .main-navigation {
        grid-row: 2;
        width: 100%;
        justify-content: stretch;
        margin-top: 0.75rem;
    }

    .header-right.has-collapsed-menu .main-navigation > ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
        width: 100%;
        padding: 1rem 1.125rem;
        border: 1px solid rgba(26, 32, 44, 0.08);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    }

    .header-right.has-collapsed-menu .main-navigation li {
        width: 100%;
    }

    .header-right.has-collapsed-menu .main-navigation a {
        display: inline-flex;
        overflow: visible;
        padding-bottom: 0.25rem;
    }

    .header-right.has-collapsed-menu .main-navigation ul.sub-menu,
    .header-right.has-collapsed-menu .main-navigation ul.children {
        padding-left: 1rem;
        margin-top: 0.25rem;
    }

    [data-theme="dark"] .header-right.has-collapsed-menu .main-navigation > ul {
        background: rgba(22, 29, 39, 0.96);
        border-color: rgba(148, 163, 184, 0.16);
        box-shadow: 0 20px 42px rgba(0, 0, 0, 0.3);
    }

    .header-social-icons {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        margin: 0;
        justify-content: center;
    }

    .theme-switcher {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        margin-left: 0;
    }

    body.page .content-area {
        padding-left: var(--shakeel-mobile-gutter);
        padding-right: var(--shakeel-mobile-gutter);
    }

    body.single-post .site-main {
        padding-left: 0;
        padding-right: 0;
    }

    .single-post-wrapper {
        padding-left: var(--shakeel-mobile-gutter);
        padding-right: var(--shakeel-mobile-gutter);
    }

    .single-featured-image {
        width: calc(100% + var(--shakeel-single-mobile-image-overhang));
        max-width: calc(100% + var(--shakeel-single-mobile-image-overhang));
        margin-left: calc(var(--shakeel-single-mobile-image-overhang) / -2);
        margin-right: calc(var(--shakeel-single-mobile-image-overhang) / -2);
        padding-left: 0;
        padding-right: 0;
    }

    .single-content-box {
        width: 100%;
        max-width: 100% !important;
    }

    body.page .alignfull,
    body.page .alignwide,
    body.page .wp-block-group__inner-container,
    body.page .alignfull .wp-block-group__inner-container,
    body.page .alignwide .wp-block-group__inner-container,
    body.page .entry-content .alignfull,
    body.page .post-content .alignfull,
    body.page .page-content .alignfull,
    body.page .entry-content .alignwide,
    body.page .post-content .alignwide,
    body.page .page-content .alignwide {
        padding-left: var(--shakeel-mobile-gutter);
        padding-right: var(--shakeel-mobile-gutter);
    }

    body.page .home-premium .hp-hero,
    body.page .about-premium .ap-hero,
    body.page .contact-premium .cp-hero {
        padding: var(--shakeel-mobile-hero-padding);
    }

    body.page .home-premium .hp-surface,
    body.page .home-premium .hp-cta,
    body.page .about-premium .ap-surface,
    body.page .about-premium .ap-cta,
    body.page .contact-premium .cp-card,
    body.page .contact-premium .cp-form-card,
    body.page .contact-premium .cp-spotlight,
    body.page .contact-premium .cp-cta {
        padding: var(--shakeel-mobile-section-padding);
    }

    body.page .home-premium .hp-card,
    body.page .home-premium .hp-spotlight,
    body.page .about-premium .ap-card,
    body.page .about-premium .ap-timeline-card {
        padding: 1.125rem;
    }
}

@media (max-width: 480px) {
    :root {
        --shakeel-mobile-gutter: 0.875rem;
        --shakeel-mobile-section-padding: 1.125rem;
        --shakeel-mobile-hero-padding: 1.375rem;
        --shakeel-single-mobile-image-overhang: 0.75rem;
    }

    .header-wrapper {
        padding-left: var(--shakeel-mobile-gutter);
        padding-right: var(--shakeel-mobile-gutter);
    }

    body.page .content-area {
        padding-left: var(--shakeel-mobile-gutter);
        padding-right: var(--shakeel-mobile-gutter);
    }
}

/* Print Styles */
@media print {
    .site-header,
    .main-navigation,
    .site-footer {
        display: none;
    }

    .site-main {
        margin: 0;
    }
}