/* Article Content Styles for Rich Text Editor Output */

.article-content {
    font-family: var(--font-body, 'Manrope', 'Segoe UI', Roboto, sans-serif);
    line-height: 1.7;
    color: #333;
    max-width: none;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
    font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
    letter-spacing: 0;
}

/* Typography Hierarchy */
.article-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 2rem 0 1rem 0;
    color: #1a1a1a;
    line-height: 1.2;
}

.article-content h2 {
    font-size: 2rem;
    font-weight: 600;
    margin: 1.8rem 0 1rem 0;
    color: #1a1a1a;
    line-height: 1.3;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
}

.article-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 1.5rem 0 0.8rem 0;
    color: #2c3e50;
    line-height: 1.4;
}

.article-content h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.2rem 0 0.6rem 0;
    color: #34495e;
    line-height: 1.4;
}

.article-content h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem 0;
    color: #34495e;
    line-height: 1.4;
}

.article-content h6 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0.8rem 0 0.4rem 0;
    color: #5a6c7d;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Paragraphs and Text */
.article-content p {
    margin: 0 0 1.2rem 0;
    font-size: 1rem;
    line-height: 1.7;
}

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

/* Lists */
.article-content ul,
.article-content ol {
    margin: 1rem 0 1.2rem 0;
    padding-left: 2rem;
}

.article-content ul li,
.article-content ol li {
    margin: 0.5rem 0;
    line-height: 1.6;
}

.article-content ul {
    list-style-type: disc;
}

.article-content ul ul {
    list-style-type: circle;
    margin: 0.5rem 0;
}

.article-content ul ul ul {
    list-style-type: square;
}

.article-content ol {
    list-style-type: decimal;
}

.article-content ol ol {
    list-style-type: lower-alpha;
    margin: 0.5rem 0;
}

/* Links — Bootstrap default #007bff has contrast 3.98 against white,
   below WCAG AA 4.5. Use #0056b3 (the prior hover color) as the
   default — contrast 6.02 against white, passes AA. Also add a
   subtle underline-by-default so links are distinguishable without
   relying solely on color (WCAG SC 1.4.1).
   Covers both .article-content (legacy) and .rich-text (the actual
   class used by entry-detail.htm content). */
.article-content a,
.rich-text a {
    color: #0056b3;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 86, 179, 0.4);
    transition: all 0.2s ease;
}

.article-content a:hover,
.rich-text a:hover {
    color: #003d80;
    border-bottom-color: #003d80;
}

/* Dark-mode override: #0056b3 (light mode link) has contrast 2.63
   against the dark-mode body bg rgb(15,20,25) — fails AA. Use the
   lighter brand-cyan with semi-opaque underline so links remain
   distinguishable. */
:root[data-theme="dark"] .article-content a,
:root[data-theme="dark"] .rich-text a {
    color: rgb(140, 220, 255);
    border-bottom-color: rgba(140, 220, 255, 0.5);
}

:root[data-theme="dark"] .article-content a:hover,
:root[data-theme="dark"] .rich-text a:hover {
    color: rgb(190, 230, 255);
    border-bottom-color: rgb(190, 230, 255);
}

/* Emphasis and Strong */
.article-content strong,
.article-content b {
    font-weight: 600;
    color: #1a1a1a;
}

.article-content em,
.article-content i {
    font-style: italic;
}

.article-content u {
    text-decoration: underline;
    text-decoration-color: #007bff;
}

.article-content s,
.article-content strike {
    text-decoration: line-through;
    opacity: 0.7;
}

/* Blockquotes */
.article-content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid #007bff;
    background: #f8f9fa;
    font-style: italic;
    position: relative;
}

.article-content blockquote p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
}

.article-content blockquote cite {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #6c757d;
    font-style: normal;
}

.article-content blockquote cite:before {
    content: "— ";
}

/* Code */
.article-content code {
    background: #f1f3f4;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
    color: #d63384;
}

.article-content pre {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.article-content pre code {
    background: none;
    padding: 0;
    color: #333;
    font-size: 0.9rem;
}

/* Tables */
.article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.article-content table th,
.article-content table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
}

.article-content table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.article-content table tbody tr:hover {
    background: #f8f9fa;
}

/* Images */
.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin: 1rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.article-content figure {
    margin: 1.5rem 0;
    text-align: center;
}

.article-content figcaption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #6c757d;
    font-style: italic;
}

/* Horizontal Rules */
.article-content hr {
    border: none;
    height: 2px;
    background: linear-gradient(to right, transparent, #dee2e6, transparent);
    margin: 2rem 0;
}

/* Subscript and Superscript */
.article-content sub,
.article-content sup {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

.article-content sup {
    top: -0.5em;
}

.article-content sub {
    bottom: -0.25em;
}

/* Responsive Design */
@media (max-width: 768px) {
    .article-content {
        font-size: 0.95rem;
    }
    
    .article-content h1 {
        font-size: 2rem;
    }
    
    .article-content h2 {
        font-size: 1.6rem;
    }
    
    .article-content h3 {
        font-size: 1.3rem;
    }
    
    .article-content ul,
    .article-content ol {
        padding-left: 1.5rem;
    }
    
    .article-content blockquote {
        padding: 0.8rem 1rem;
        margin: 1rem 0;
    }
    
    .article-content table {
        font-size: 0.85rem;
    }
    
    .article-content table th,
    .article-content table td {
        padding: 0.5rem;
    }
}

/* Print Styles */
@media print {
    .article-content {
        color: #000;
        font-size: 12pt;
        line-height: 1.5;
    }
    
    .article-content h1,
    .article-content h2,
    .article-content h3,
    .article-content h4,
    .article-content h5,
    .article-content h6 {
        color: #000;
        page-break-after: avoid;
    }
    
    .article-content blockquote {
        border-left: 2px solid #000;
        background: none;
    }
    
    .article-content a {
        color: #000;
        text-decoration: underline;
    }
}

/* --------------------------------------------------
   Article page + Category listing
   Used by partials/article.htm and partials/category/listing.htm.
   Consumes the canonical --block-* token cascade so palette overrides
   flow through (see architecture/block-color-token-cascade.md).
--------------------------------------------------- */
.article-page,
.category-listing {
    /* Article and category-listing render outside .builder-blocks, so the
       page→block token chain (defined on .builder-block in blocks.css) doesn't
       inherit naturally. Re-declare the chain here so editor-set page palette
       fields still propagate into --block-* tokens that article markup consumes.
       See architecture/block-color-token-cascade.md. */
    --block-heading-color: var(--page-fg, var(--generic-text-strong, var(--heading-color)));
    --block-body-color: var(--page-fg, var(--generic-text-body, var(--text-color)));
    --block-muted-color: var(--page-muted, var(--generic-text-muted));
    --block-accent-color: var(--page-accent, var(--primary-color, #0077be));
    --block-surface-color: var(--page-surface, var(--generic-surface, #ffffff));
    --block-stroke-color: var(--page-stroke, var(--generic-border-soft));
}

.article-page {
    max-width: 56rem;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem);
    color: var(--block-body-color, var(--text-color));
}

.article-page__breadcrumb {
    font-size: 0.9rem;
    color: var(--block-muted-color, var(--generic-text-muted));
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.article-page__breadcrumb a {
    color: var(--block-accent-color, var(--primary-color));
    text-decoration: none;
}

.article-page__breadcrumb a:hover,
.article-page__breadcrumb a:focus {
    text-decoration: underline;
}

/* Dark-mode: --block-accent-color resolves to #0077be (brand-cyan-
   deep), 3.86 ratio on dark body — fails AA. Override to lighter
   brand-cyan. Same pattern as .article-content a + .category-card_
   _link dark-mode fixes. */
:root[data-theme="dark"] .article-page__breadcrumb a {
    color: rgb(140, 220, 255);
}

/* Light-mode: same #0077be has 4.46 ratio against the pale body bg
   rgb(244,247,252) — fails AA by a hair. Use deep navy #1a4575 (~7.9:1). */
:root[data-theme="light"] .article-page__breadcrumb a {
    color: #1a4575;
}
:root[data-theme="light"] .article-page__breadcrumb a:hover,
:root[data-theme="light"] .article-page__breadcrumb a:focus {
    color: #0d1a2e;
}

.article-page__breadcrumb-current {
    color: var(--block-muted-color, var(--generic-text-muted));
}

.article-page__title {
    color: var(--block-heading-color, var(--heading-color));
    margin: 0 0 1rem;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1.15;
}

.article-page__excerpt {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--block-muted-color, var(--generic-text-muted));
    margin-bottom: 1.5rem;
}

.article-page__meta {
    font-size: 0.95rem;
    color: var(--block-muted-color, var(--generic-text-muted));
    margin-bottom: 2rem;
}

.article-page__hero {
    margin: 2rem -1rem 2.5rem;
    border-radius: var(--generic-radius-lg);
    overflow: hidden;
}

.article-page__hero img {
    display: block;
    width: 100%;
    height: auto;
}

.article-page__content {
    font-size: 1.075rem;
    line-height: 1.75;
}

.article-page__content--empty {
    color: var(--block-muted-color, var(--generic-text-muted));
    font-style: italic;
    text-align: center;
    padding: 2rem;
    border: 1px dashed var(--generic-border-soft);
    border-radius: var(--generic-radius-md);
}

.article-page__category-link {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--generic-border-soft);
    color: var(--block-muted-color, var(--generic-text-muted));
}

.article-page__category-link a {
    color: var(--block-accent-color, var(--primary-color));
    font-weight: 600;
}

/* Dark-mode override: same brand-cyan-deep contrast issue. */
:root[data-theme="dark"] .article-page__category-link a {
    color: rgb(140, 220, 255);
}

/* Light-mode override: same #0077be / pale-bg AA hairline-fail.
   Match the breadcrumb-link fix above. */
:root[data-theme="light"] .article-page__category-link a {
    color: #1a4575;
}
:root[data-theme="light"] .article-page__category-link a:hover,
:root[data-theme="light"] .article-page__category-link a:focus {
    color: #0d1a2e;
}

/* Category listing */
.category-listing {
    max-width: 72rem;
    margin: 2rem auto;
    padding: 0 1rem;
}

.category-listing__heading {
    color: var(--block-heading-color, var(--heading-color));
    text-align: center;
    margin-bottom: 2rem;
}

.category-listing__items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(1rem, 3vw, 1.5rem);
}

.category-listing__item {
    height: 100%;
}

.category-card {
    background: var(--surface-color, #fff);
    border: 1px solid var(--block-stroke-color, var(--generic-border-soft));
    border-radius: var(--generic-radius-md);
    box-shadow: var(--generic-shadow-xs);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: var(--generic-transition);
}

/* Dark-mode override: explicit value so the var chain can't pick
   up an empty intermediate var token. The previous chain
   `var(--block-surface-color, var(--surface-color, ...))` was
   resolving to the final #fff fallback even though --surface-color
   was defined — possibly because --block-surface-color is set to
   the empty string somewhere upstream. */
:root[data-theme="dark"] .category-card {
    background: rgb(15, 20, 25);
    border-color: rgba(190, 220, 250, 0.18);
}

.category-card:hover,
.category-card:focus-within {
    box-shadow: var(--generic-shadow-md);
    transform: translateY(-2px);
    background-image: linear-gradient(
        135deg,
        transparent 0%,
        color-mix(in srgb, var(--block-accent-color, var(--primary-color, #0077be)) 7%, transparent) 18%,
        color-mix(in srgb, var(--block-accent-color, var(--primary-color, #0077be)) 5%, transparent) 82%,
        transparent 100%
    );
}

.category-card__media img {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.category-card__body {
    padding: 1.25rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.6rem;
}

.category-card__title {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--block-heading-color, var(--heading-color));
}

.category-card__title a {
    color: inherit;
    text-decoration: none;
}

.category-card__title a:hover,
.category-card__title a:focus {
    color: var(--block-accent-color, var(--primary-color));
}

.category-card__excerpt {
    color: var(--block-muted-color, var(--generic-text-muted));
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    flex-grow: 1;
}

.category-card__link {
    color: var(--block-accent-color, var(--primary-color));
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
    display: inline-block;
}

.category-card__link:hover,
.category-card__link:focus {
    text-decoration: underline;
}

/* Dark-mode override: --block-accent-color resolves to brand-cyan-
   deep #0077be — 3.86 ratio on dark card. Same pattern as blocks.css
   iter 27 fix for the home-page category-card__link. */
:root[data-theme="dark"] .category-card__link {
    color: rgb(140, 220, 255);
}

/* Light-mode override: same #0077be has 3.95 ratio on the pale
   light-mode card bg rgb(244,247,252) — fails AA (needs 4.5).
   Use deep navy #1a4575 which hits ~7.9:1. */
:root[data-theme="light"] .category-card__link {
    color: #1a4575;
}
:root[data-theme="light"] .category-card__link:hover,
:root[data-theme="light"] .category-card__link:focus {
    color: #0d1a2e;
}

/* Section headings on article pages that contain links — Bootstrap's
   default link color #007bff on the dark body bg fails AA. Force
   brand-cyan in dark mode. The .category-feed__heading is the
   "Service Areas" / "HVAC Services" parent link above the
   listing of related entries. */
:root[data-theme="dark"] .category-feed__heading a,
:root[data-theme="dark"] .category-listing__heading a {
    color: rgb(140, 220, 255);
}

/* Light-mode override for the same heading links — #007bff fails on
   the pale light body bg. Use deep navy for clear contrast. */
:root[data-theme="light"] .category-feed__heading a,
:root[data-theme="light"] .category-listing__heading a {
    color: #1a4575;
}
:root[data-theme="light"] .category-feed__heading a:hover,
:root[data-theme="light"] .category-listing__heading a:hover {
    color: #0d1a2e;
}

.category-listing__empty {
    text-align: center;
    color: var(--block-muted-color, var(--generic-text-muted));
    font-style: italic;
    padding: 2rem;
}

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

/* Category article navigation (prev/next between siblings) */
.category-article-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2rem 0;
    max-width: 56rem;
    margin-inline: auto;
}

.category-article-nav__link {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.9rem 1.1rem;
    background: var(--block-surface-color, var(--generic-surface, #fff));
    border: 1px solid var(--block-stroke-color, var(--generic-border-soft));
    border-radius: var(--generic-radius-md);
    color: inherit;
    text-decoration: none;
    transition: var(--generic-transition);
}

.category-article-nav__link--next {
    text-align: right;
}

.category-article-nav__link:hover,
.category-article-nav__link:focus {
    border-color: var(--block-accent-color, var(--primary-color));
    box-shadow: var(--generic-shadow-xs);
    background-image: linear-gradient(
        135deg,
        transparent 0%,
        color-mix(in srgb, var(--block-accent-color, var(--primary-color, #0077be)) 7%, transparent) 18%,
        color-mix(in srgb, var(--block-accent-color, var(--primary-color, #0077be)) 5%, transparent) 82%,
        transparent 100%
    );
}

.category-article-nav__direction {
    font-size: 0.8rem;
    color: var(--block-muted-color, var(--generic-text-muted));
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.category-article-nav__title {
    font-weight: 600;
    color: var(--block-heading-color, var(--heading-color));
}

.category-article-nav__placeholder {
    display: block;
}

/* Dark-mode override: the pagination nav __direction (muted slate)
   and __title (heading-color) inherit light-mode values that fail
   contrast on the dark __link bg. The __link itself uses
   --block-surface-color which doesn't flip — also paint that to
   the dark-mode surface so the inner colors work against it. */
:root[data-theme="dark"] .category-article-nav__link {
    background: rgb(15, 20, 25);
    border-color: rgba(190, 220, 250, 0.18);
}

:root[data-theme="dark"] .category-article-nav__direction {
    color: rgba(214, 232, 248, 0.78);
}

:root[data-theme="dark"] .category-article-nav__title {
    color: rgb(240, 248, 255);
}

@media (max-width: 600px) {
    .category-article-nav {
        grid-template-columns: 1fr;
    }

    .category-article-nav__link--next {
        text-align: left;
    }
}

/* ── Cross-category link strip (service ↔ area cross-links) ─────────────── */
.article-page__cross-links {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--generic-border-soft);
}

.article-page__cross-links-heading {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--block-muted-color, var(--generic-text-muted));
    margin: 0 0 0.75rem;
}

.article-page__cross-links-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
}

.article-page__cross-links-list a {
    color: var(--block-accent-color, var(--primary-color));
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.article-page__cross-links-list a:hover,
.article-page__cross-links-list a:focus {
    text-decoration: underline;
}

.article-page__cross-links-see-all {
    font-size: 0.8rem;
    color: var(--block-muted-color, var(--generic-text-muted));
    margin: 0;
}

.article-page__cross-links-see-all a {
    color: var(--block-accent-color, var(--primary-color));
    font-weight: 600;
}

:root[data-theme="dark"] .article-page__cross-links-list a,
:root[data-theme="dark"] .article-page__cross-links-see-all a {
    color: rgb(140, 220, 255);
}

:root[data-theme="light"] .article-page__cross-links-list a,
:root[data-theme="light"] .article-page__cross-links-see-all a {
    color: #1a4575;
}

:root[data-theme="light"] .article-page__cross-links-list a:hover,
:root[data-theme="light"] .article-page__cross-links-see-all a:hover {
    color: #0d1a2e;
}