/* ==========================================================================
   Blog & Content Templates
   Uses design tokens from variables.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Single Article
   -------------------------------------------------------------------------- */

.wh-blog-single {
    padding-top: calc(80px + var(--space-8));
}

.wh-article__hero {
    margin-bottom: var(--space-8);
}

.wh-article__hero-img {
    width: 100%;
    max-height: 480px;
    object-fit: cover;
    border-radius: var(--radius);
}

.wh-article__content {
    max-width: var(--container-text);
    margin: 0 auto;
}

.wh-article__header {
    margin-bottom: var(--space-8);
}

.wh-article__meta {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.wh-article__category {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--blue-50);
    color: var(--brand-blue);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wh-article__category:hover {
    background: var(--brand-blue-lighter);
}

.wh-article__title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0;
}

@media (max-width: 639px) {
    .wh-article__title {
        font-size: var(--text-3xl);
    }
}

/* Article Body — WordPress content styling */
.wh-article__body {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
}

.wh-article__body h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin-top: var(--space-12);
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}

.wh-article__body h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    color: var(--text-primary);
}

.wh-article__body p {
    margin-bottom: var(--space-6);
}

.wh-article__body a {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wh-article__body a:hover {
    color: var(--blue-800);
}

.wh-article__body ul,
.wh-article__body ol {
    margin-bottom: var(--space-6);
    padding-left: var(--space-6);
}

.wh-article__body li {
    margin-bottom: var(--space-2);
}

.wh-article__body blockquote {
    border-left: 4px solid var(--brand-blue);
    padding: var(--space-4) var(--space-6);
    margin: var(--space-8) 0;
    background: var(--gray-50);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--text-secondary);
}

.wh-article__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    margin: var(--space-6) 0;
}

.wh-article__body pre {
    background: var(--gray-900);
    color: var(--gray-100);
    padding: var(--space-6);
    border-radius: var(--radius);
    overflow-x: auto;
    margin: var(--space-6) 0;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.wh-article__body code {
    background: var(--gray-100);
    padding: var(--space-1) var(--space-2);
    border-radius: 4px;
    font-size: 0.9em;
}

.wh-article__body pre code {
    background: none;
    padding: 0;
}

/* Tags */
.wh-article__footer {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray-200);
}

.wh-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.wh-article__tag {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--gray-100);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    text-decoration: none;
    transition: var(--transition-fast);
}

.wh-article__tag:hover {
    background: var(--gray-200);
    color: var(--text-primary);
}

/* Post Navigation */
.wh-postnav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    max-width: var(--container-text);
    margin: var(--space-12) auto;
    padding-top: var(--space-8);
    border-top: 1px solid var(--gray-200);
}

@media (max-width: 639px) {
    .wh-postnav {
        grid-template-columns: 1fr;
    }
}

.wh-postnav__link {
    display: block;
    padding: var(--space-4);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    text-decoration: none;
    transition: var(--transition-fast);
}

.wh-postnav__link:hover {
    border-color: var(--brand-blue);
    box-shadow: var(--shadow-md);
}

.wh-postnav__link--next {
    text-align: right;
}

.wh-postnav__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.wh-postnav__title {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    line-height: var(--leading-tight);
}

/* Blog CTA */
.wh-blog-cta {
    max-width: var(--container-text);
    margin: var(--space-12) auto var(--space-16);
    padding: var(--space-10);
    background: var(--blue-50);
    border: 1px solid var(--brand-blue-lighter);
    border-radius: var(--radius);
    text-align: center;
}

.wh-blog-cta__title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-3);
}

.wh-blog-cta__text {
    color: var(--text-secondary);
    margin: 0 0 var(--space-6);
    font-size: var(--text-lg);
}

/* --------------------------------------------------------------------------
   Archive / Blog Listing
   -------------------------------------------------------------------------- */

.wh-blog-archive {
    padding-top: calc(80px + var(--space-12));
    padding-bottom: var(--space-16);
}

.wh-blog-archive .wh-section__header {
    margin-bottom: var(--space-10);
}

/* Filter Bar */
.wh-filter-bar {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
}

.wh-filter-bar::-webkit-scrollbar {
    display: none;
}

.wh-filter-pill {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--gray-200);
    border-radius: 9999px;
    background: var(--brand-white);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: var(--transition-fast);
    white-space: nowrap;
}

.wh-filter-pill:hover {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.wh-filter-pill--active {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--brand-white);
}

.wh-filter-pill--active:hover {
    background: var(--blue-800);
    border-color: var(--blue-800);
    color: var(--brand-white);
}

/* Blog Count */
.wh-blog-count {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-8);
    margin-bottom: var(--space-2);
}

/* Blog Loading Spinner */
.wh-blog-loading {
    display: flex;
    justify-content: center;
    padding: var(--space-8) 0;
}

.wh-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--brand-blue);
    border-radius: 50%;
    animation: wh-spin 0.7s linear infinite;
}

@keyframes wh-spin {
    to { transform: rotate(360deg); }
}

/* Blog Card */
.wh-blog-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.wh-blog-card__image {
    display: block;
    overflow: hidden;
}

.wh-blog-card__img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform var(--transition);
}

.wh-blog-card:hover .wh-blog-card__img {
    transform: scale(1.03);
}

.wh-blog-card__body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.wh-blog-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.wh-blog-card__category {
    padding: 2px var(--space-2);
    background: var(--blue-50);
    color: var(--brand-blue);
    border-radius: var(--radius-full);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wh-blog-card__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-3);
}

.wh-blog-card__title a {
    color: var(--text-primary);
    text-decoration: none;
}

.wh-blog-card__title a:hover {
    color: var(--brand-blue);
}

.wh-blog-card__excerpt {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    margin: 0 0 var(--space-4);
    flex: 1;
}

.wh-blog-card__link {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--brand-blue);
    text-decoration: none;
}

.wh-blog-card__link:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Search Results
   -------------------------------------------------------------------------- */

.wh-search-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.wh-search-item {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--brand-white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    transition: var(--transition-fast);
}

.wh-search-item:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-md);
}

.wh-search-item__image {
    flex-shrink: 0;
}

.wh-search-item__img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: var(--radius);
}

@media (max-width: 639px) {
    .wh-search-item {
        flex-direction: column;
    }
    .wh-search-item__img {
        width: 100%;
        height: 160px;
    }
}

.wh-search-item__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.wh-search-item__type {
    padding: 2px var(--space-2);
    background: var(--gray-100);
    border-radius: var(--radius-full);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wh-search-item__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin: 0 0 var(--space-2);
}

.wh-search-item__title a {
    color: var(--text-primary);
    text-decoration: none;
}

.wh-search-item__title a:hover {
    color: var(--brand-blue);
}

.wh-search-item__excerpt {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.wh-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-12);
}

.wh-pagination a,
.wh-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}

.wh-pagination a:hover {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.wh-pagination .current {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: var(--brand-white);
}

.wh-pagination .dots {
    border: none;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Empty State
   -------------------------------------------------------------------------- */

.wh-empty {
    text-align: center;
    padding: var(--space-16) var(--space-6);
}

.wh-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: var(--gray-50);
    border-radius: 50%;
    margin-bottom: var(--space-6);
    color: var(--text-secondary);
}

.wh-empty__title {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin: 0 0 var(--space-3);
}

.wh-empty__text {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    margin: 0 0 var(--space-8);
}

.wh-empty__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   404 Page
   -------------------------------------------------------------------------- */

.wh-404 {
    padding-top: calc(80px + var(--space-16));
    padding-bottom: var(--space-16);
    min-height: 70vh;
    display: flex;
    align-items: center;
}

.wh-404__content {
    max-width: var(--container-small);
    margin: 0 auto;
    text-align: center;
}

.wh-404__code {
    display: block;
    font-family: var(--font-heading);
    font-size: 8rem;
    font-weight: var(--font-bold);
    color: var(--gray-200);
    line-height: 1;
    margin-bottom: var(--space-4);
}

.wh-404__title {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-4);
}

.wh-404__text {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    margin: 0 0 var(--space-8);
}

.wh-404__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
}

.wh-404__links {
    text-align: left;
    max-width: 320px;
    margin: 0 auto;
}

.wh-404__links-title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-3);
}

.wh-404__links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wh-404__links li {
    margin-bottom: var(--space-2);
}

.wh-404__links a {
    color: var(--brand-blue);
    text-decoration: none;
    font-size: var(--text-sm);
}

.wh-404__links a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Default Page
   -------------------------------------------------------------------------- */

.wh-page {
    padding-top: calc(80px + var(--space-12));
    padding-bottom: var(--space-16);
}

.wh-page__content {
    max-width: var(--container-text);
    margin: 0 auto;
}

.wh-page__title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0 0 var(--space-8);
}

.wh-page__body {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-primary);
}

.wh-page__body h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
}

.wh-page__body h3 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
}

.wh-page__body p {
    margin-bottom: var(--space-6);
}

.wh-page__body a {
    color: var(--brand-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wh-page__body ul,
.wh-page__body ol {
    margin-bottom: var(--space-6);
    padding-left: var(--space-6);
}

.wh-page__body li {
    margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   Landing Page Hero Modifier
   -------------------------------------------------------------------------- */

.wh-hero--landing {
    background: linear-gradient(135deg, var(--blue-50) 0%, #EEF2FF 50%, var(--brand-white) 100%);
}

/* --------------------------------------------------------------------------
   FAQ Accordion (design system)
   -------------------------------------------------------------------------- */

.wh-faq {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.wh-faq__item {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
}

.wh-faq__item summary {
    padding: var(--space-4) var(--space-5);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background var(--transition);
}

.wh-faq__item summary::-webkit-details-marker {
    display: none;
}

.wh-faq__item summary::after {
    content: "+";
    font-size: var(--text-xl);
    color: var(--brand-blue);
    font-weight: var(--font-bold);
    flex-shrink: 0;
    margin-left: var(--space-3);
    transition: transform 0.2s;
}

.wh-faq__item[open] summary::after {
    content: "\2212";
}

.wh-faq__item summary:hover {
    background: var(--gray-50);
}

.wh-faq__item p {
    padding: 0 var(--space-5) var(--space-4);
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* --------------------------------------------------------------------------
   Extra Utility Classes
   -------------------------------------------------------------------------- */

.wh-mt-3 { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   City Landing Pages
   -------------------------------------------------------------------------- */

.wh-city-page {
    padding-top: calc(80px + var(--space-12));
    padding-bottom: var(--space-16);
}

.wh-city-trust {
    margin-top: var(--space-12);
    padding-top: var(--space-10);
    border-top: 1px solid var(--gray-200);
}

.wh-city-trust__item {
    text-align: center;
    padding: var(--space-6);
}

.wh-city-trust__item svg {
    color: var(--brand-blue);
    margin-bottom: var(--space-3);
}

.wh-city-trust__item h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}

.wh-city-trust__item p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0;
    line-height: var(--leading-normal);
}

.wh-city-pricing {
    margin-top: var(--space-12);
    text-align: center;
}

.wh-city-pricing h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin: 0 0 var(--space-3);
}

.wh-city-pricing > p {
    color: var(--text-secondary);
    margin: 0 0 var(--space-8);
}

.wh-city-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    max-width: var(--container-narrow);
    margin: 0 auto;
}

@media (max-width: 767px) {
    .wh-city-pricing__grid {
        grid-template-columns: 1fr;
    }
}

.wh-city-pricing__grid .wh-card {
    text-align: center;
}

.wh-city-pricing__grid .wh-card h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin: 0 0 var(--space-3);
}

.wh-city-pricing__price {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.wh-city-pricing__price span {
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: var(--text-secondary);
}

/* ==========================================================================
   Service Pages
   ========================================================================== */

.wh-service-page {
    padding-top: calc(80px + var(--space-12));
    padding-bottom: var(--space-16);
}

/* ==========================================================================
   SEO Landing Page Elements (City + Service shortcode output)
   ========================================================================== */

/* --- Local/City page base --- */
.wh-seo-local {
    max-width: 800px;
    margin: 0 auto;
}

.wh-seo-local h1 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--brand-blue);
    margin-bottom: var(--space-6);
    line-height: 1.2;
}

.wh-seo-local h2 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: var(--space-10) 0 var(--space-4);
}

.wh-seo-local p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.wh-seo-local__intro {
    font-size: var(--text-lg);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
}

.wh-seo-local ul {
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}

.wh-seo-local ul li {
    margin-bottom: var(--space-2);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}

/* --- Service cards grid --- */
.wh-seo-local__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
    margin: var(--space-6) 0;
}

.wh-seo-local__card {
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: var(--space-6);
    border: 1px solid var(--gray-200);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.wh-seo-local__card:hover {
    border-color: var(--blue-300);
    box-shadow: var(--shadow-sm);
}

.wh-seo-local__card h3 {
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.wh-seo-local__card h3 a {
    color: var(--brand-blue);
    text-decoration: none;
}

.wh-seo-local__card h3 a:hover {
    text-decoration: underline;
}

.wh-seo-local__card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* --- CTA button --- */
.wh-seo-local__cta {
    text-align: center;
    margin: var(--space-10) 0;
}

.wh-seo-local__cta a {
    display: inline-block;
    background: var(--brand-blue);
    color: var(--text-white);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    transition: background var(--transition);
}

.wh-seo-local__cta a:hover {
    background: var(--blue-900);
}

/* --- FAQ accordion --- */
.wh-seo-local__faq {
    margin: var(--space-6) 0;
}

.wh-seo-local__faq details {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.wh-seo-local__faq summary {
    padding: var(--space-4) var(--space-5);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background var(--transition);
}

.wh-seo-local__faq summary::-webkit-details-marker {
    display: none;
}

.wh-seo-local__faq summary::after {
    content: "+";
    font-size: var(--text-xl);
    color: var(--brand-blue);
    font-weight: var(--font-bold);
    flex-shrink: 0;
    margin-left: var(--space-3);
    transition: transform 0.2s;
}

.wh-seo-local__faq details[open] summary::after {
    content: "\2212";
}

.wh-seo-local__faq summary:hover {
    background: var(--gray-50);
}

.wh-seo-local__faq details p {
    padding: 0 var(--space-5) var(--space-4);
    margin: 0;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* --- Nearby cities links --- */
.wh-seo-local__nearby {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.wh-seo-local__nearby li a {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    color: var(--brand-blue);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: all var(--transition);
}

.wh-seo-local__nearby li a:hover {
    background: var(--blue-50);
    border-color: var(--blue-300);
}

/* --- Service page specific --- */
.wh-seo-service {
    max-width: 800px;
    margin: 0 auto;
}

.wh-seo-service h1 {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--brand-blue);
    margin-bottom: var(--space-6);
    line-height: 1.2;
}

.wh-seo-service h2 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: var(--space-10) 0 var(--space-4);
}

.wh-seo-service p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.wh-seo-service__intro {
    font-size: var(--text-lg);
    color: var(--text-primary);
    line-height: var(--leading-relaxed);
}

/* Problems list */
.wh-seo-service__problems {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0;
    columns: 2;
    column-gap: var(--space-6);
}

@media (max-width: 639px) {
    .wh-seo-service__problems {
        columns: 1;
    }
}

.wh-seo-service__problems li {
    padding: var(--space-2) 0 var(--space-2) var(--space-6);
    position: relative;
    break-inside: avoid;
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.wh-seo-service__problems li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: #EF4444;
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
}

/* Solutions */
.wh-seo-service__solutions {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.wh-seo-service__solution-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius);
}

.wh-seo-service__check {
    color: #22C55E;
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
    flex-shrink: 0;
    line-height: 1.4;
}

.wh-seo-service__solution-item span:last-child {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* Steps */
.wh-seo-service__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin: var(--space-6) 0;
}

@media (max-width: 767px) {
    .wh-seo-service__steps {
        grid-template-columns: 1fr;
    }
}

.wh-seo-service__step {
    text-align: center;
    padding: var(--space-6);
}

.wh-seo-service__step-num {
    width: 48px;
    height: 48px;
    background: var(--brand-blue);
    color: var(--text-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    font-size: var(--text-xl);
    margin: 0 auto var(--space-4);
}

.wh-seo-service__step h3 {
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    margin: 0 0 var(--space-2);
    color: var(--text-primary);
}

.wh-seo-service__step p {
    font-size: var(--text-sm);
    margin: 0;
}

.wh-seo-service__step a {
    color: var(--brand-blue);
}

/* Related services list */
.wh-seo-service__related {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}

.wh-seo-service__related li a {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--blue-50);
    border: 1px solid var(--blue-200);
    border-radius: var(--radius);
    color: var(--brand-blue);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: all var(--transition);
}

.wh-seo-service__related li a:hover {
    background: var(--brand-blue);
    color: var(--text-white);
}

/* ==========================================================================
   Rich Content Elements — used inside blog post bodies
   ========================================================================== */

/* Table of Contents */
.wh-toc {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: var(--space-6);
    margin: var(--space-8) 0;
}

.wh-toc__title {
    font-family: var(--font-heading);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    margin: 0 0 var(--space-3);
    color: var(--text-primary);
}

.wh-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc;
}

.wh-toc__list li {
    counter-increment: toc;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: var(--text-sm);
}

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

.wh-toc__list li::before {
    content: counter(toc) ". ";
    color: var(--brand-blue);
    font-weight: var(--font-semibold);
}

.wh-toc__list a {
    color: var(--text-primary);
    text-decoration: none;
}

.wh-toc__list a:hover {
    color: var(--brand-blue);
}

/* --------------------------------------------------------------------------
   Callout Boxes (info, warning, tip, danger)
   -------------------------------------------------------------------------- */

.wh-callout {
    border-radius: var(--radius);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-6) 0;
    border-left: 4px solid;
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.wh-callout__title {
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    margin: 0 0 var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.wh-callout p:last-child {
    margin-bottom: 0;
}

.wh-callout--info {
    background: var(--blue-50);
    border-color: var(--brand-blue);
}

.wh-callout--info .wh-callout__title {
    color: var(--brand-blue);
}

.wh-callout--warning {
    background: #FFF7ED;
    border-color: #F97316;
}

.wh-callout--warning .wh-callout__title {
    color: #EA580C;
}

.wh-callout--tip {
    background: #F0FDF4;
    border-color: #22C55E;
}

.wh-callout--tip .wh-callout__title {
    color: #16A34A;
}

.wh-callout--danger {
    background: #FEF2F2;
    border-color: #EF4444;
}

.wh-callout--danger .wh-callout__title {
    color: #DC2626;
}

/* --------------------------------------------------------------------------
   Step-by-Step Guide
   -------------------------------------------------------------------------- */

.wh-steps {
    margin: var(--space-8) 0;
    counter-reset: step;
}

.wh-step {
    display: flex;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
    counter-increment: step;
}

.wh-step::before {
    content: counter(step);
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--brand-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    font-size: var(--text-sm);
    margin-top: 2px;
}

.wh-step__content {
    flex: 1;
    min-width: 0;
}

.wh-step__content h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin: 0 0 var(--space-2) !important;
    padding: 0;
}

.wh-step__content p:last-child {
    margin-bottom: 0;
}

.wh-step__content pre {
    margin-top: var(--space-3);
}

@media (max-width: 639px) {
    .wh-step {
        gap: var(--space-3);
    }

    .wh-step::before {
        width: 32px;
        height: 32px;
        font-size: var(--text-xs);
    }
}

/* --------------------------------------------------------------------------
   Checklist
   -------------------------------------------------------------------------- */

.wh-checklist {
    list-style: none;
    padding: 0;
    margin: var(--space-6) 0;
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-6);
}

.wh-checklist li {
    padding: var(--space-2) 0 var(--space-2) var(--space-8);
    position: relative;
    border-bottom: 1px solid var(--gray-100);
    font-size: var(--text-base);
}

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

.wh-checklist li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #22C55E;
    font-weight: var(--font-bold);
    font-size: var(--text-lg);
}

/* --------------------------------------------------------------------------
   Code Block with Label
   -------------------------------------------------------------------------- */

.wh-code-block {
    margin: var(--space-6) 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--gray-700);
}

.wh-code-block__label {
    background: var(--gray-800);
    color: var(--gray-300);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-family: 'Courier New', monospace;
    border-bottom: 1px solid var(--gray-700);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.wh-code-block__label::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
}

.wh-code-block pre {
    margin: 0 !important;
    border-radius: 0 !important;
    border: none;
}

/* --------------------------------------------------------------------------
   Figure with Caption
   -------------------------------------------------------------------------- */

.wh-figure {
    margin: var(--space-8) 0;
}

.wh-figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    display: block;
}

.wh-figure figcaption {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: center;
    margin-top: var(--space-2);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   Key Takeaway
   -------------------------------------------------------------------------- */

.wh-takeaway {
    background: var(--blue-50);
    border: 2px solid var(--brand-blue);
    border-radius: var(--radius);
    padding: var(--space-6);
    margin: var(--space-8) 0;
}

.wh-takeaway__title {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
    color: var(--brand-blue);
    margin: 0 0 var(--space-3);
    font-size: var(--text-lg);
}

.wh-takeaway p:last-child,
.wh-takeaway ul:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Tables (blog content)
   -------------------------------------------------------------------------- */

/* Base styles for all tables inside article body */
.wh-article__body table,
.wh-comparison-table,
.wh-table-responsive table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    margin: var(--space-6) 0;
    border-radius: var(--radius);
    overflow: hidden;
}

/* Wrapper for horizontal scroll on mobile */
.wh-table-responsive {
    overflow-x: auto;
    margin: var(--space-6) 0;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
    -webkit-overflow-scrolling: touch;
}

.wh-table-responsive table {
    margin: 0;
}

/* Table headers — left-aligned, generous spacing */
.wh-article__body th,
.wh-comparison-table th,
.wh-table-responsive th {
    background: var(--gray-50);
    font-weight: var(--font-semibold);
    text-align: left;
    padding: var(--space-3) var(--space-5);
    border-bottom: 2px solid var(--gray-200);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

/* Table cells — matching left-alignment and spacing */
.wh-article__body td,
.wh-comparison-table td,
.wh-table-responsive td {
    text-align: left;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--gray-100);
    color: var(--text-secondary);
    vertical-align: top;
}

.wh-article__body tr:last-child td,
.wh-comparison-table tr:last-child td,
.wh-table-responsive tr:last-child td {
    border-bottom: none;
}

/* First column emphasis */
.wh-article__body td:first-child,
.wh-comparison-table td:first-child,
.wh-table-responsive td:first-child {
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

/* Zebra striping for readability */
.wh-article__body tbody tr:nth-child(even),
.wh-comparison-table tbody tr:nth-child(even),
.wh-table-responsive tbody tr:nth-child(even) {
    background: var(--gray-50);
}

/* Outer border for standalone tables (not inside .wh-table-responsive) */
.wh-article__body > table,
.wh-comparison-table {
    border: 1px solid var(--gray-200);
}

/* Mobile: make tables scrollable */
@media (max-width: 639px) {
    .wh-article__body > table,
    .wh-comparison-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   Highlight Box (alternative accent)
   -------------------------------------------------------------------------- */

.wh-highlight {
    background: linear-gradient(135deg, var(--blue-50) 0%, #EEF2FF 100%);
    border-radius: var(--radius);
    padding: var(--space-6) var(--space-8);
    margin: var(--space-8) 0;
    position: relative;
    overflow: hidden;
}

.wh-highlight::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--brand-blue);
}

.wh-highlight h3 {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--brand-blue);
    margin: 0 0 var(--space-3) !important;
    padding: 0;
}

.wh-highlight p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Inline Image Grid (2-column for screenshots etc.)
   -------------------------------------------------------------------------- */

.wh-img-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin: var(--space-6) 0;
}

.wh-img-grid img {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}

@media (max-width: 639px) {
    .wh-img-grid {
        grid-template-columns: 1fr;
    }
}