/*
Theme Name: Clarity
Author: The Liminals
Author URI: https://theliminals.ca
Description: Premium custom theme for Clarity B2B managed services.
Version: 1.0
*/

/* ── Article prose styles ── */
.article-body {
    line-height: 1.8;
}

.article-body p, 
.article-body blockquote, 
.article-body ul, 
.article-body ol, 
.article-body h1, 
.article-body h2, 
.article-body h3, 
.article-body h4, 
.article-body h5, 
.article-body h6 {
    margin-bottom: 2rem !important;
}

.article-body h2 {
    font-size: 2.25rem !important;
    color: #111111 !important;
    margin-top: 4rem !important;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f4f4f5;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}
.dark .article-body h2 { color: #ffffff !important; border-bottom-color: rgba(255,255,255,0.06); }

.article-body h3 {
    font-size: 1.75rem !important;
    color: #111111 !important;
    margin-top: 3rem !important;
    font-weight: 700 !important;
}
.dark .article-body h3 { color: #f5f5f5 !important; }

.article-body p {
    color: #52525b !important;
    font-size: 1.125rem !important;
    line-height: 1.9 !important;
}
.dark .article-body p { color: #a1a1aa !important; }

.article-body ul, .article-body ol {
    padding-left: 1.5rem !important;
}
.article-body ul { list-style: disc !important; }
.article-body ol { list-style: decimal !important; }

.article-body li {
    margin-bottom: 0.75rem !important;
    line-height: 1.8 !important;
    color: #52525b !important;
}
.dark .article-body li { color: #a1a1aa !important; }

.article-body strong { 
    color: #18181b !important; 
    font-weight: 700 !important; 
}
.dark .article-body strong { color: #f4f4f5 !important; }

.article-body a { 
    color: #FF8400; 
    text-decoration: underline; 
    font-weight: 600;
}
.article-body a:hover { opacity: 0.8; }

.article-body blockquote {
    border-left: 4px solid #FF8400;
    padding: 2rem 2.5rem !important;
    margin: 3rem 0 !important;
    background: #fafafa;
    border-radius: 0 16px 16px 0;
}
.dark .article-body blockquote { background: rgba(255,255,255,0.02); }
.article-body blockquote p { 
    color: #3f3f46 !important; 
    font-style: italic; 
    margin-bottom: 0 !important;
    font-size: 1.25rem !important;
}
.dark .article-body blockquote p { color: #d4d4d8 !important; }

/* Share button — icon only, no border */
.share-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    color: #a3a3a3;
    transition: color 0.2s, background 0.2s;
    cursor: pointer; background: transparent; border: none; padding: 0;
}
.share-btn:hover { color: #FF8400; background: rgba(255,132,0,0.08); }
.dark .share-btn { color: #555555; }
.dark .share-btn:hover { color: #FF8400; background: rgba(255,132,0,0.1); }

/* ── Truncation Hover ───────────────── */
/* ── Card legibility sweep ── */
.dark .text-zinc-500 { color: #a1a1aa !important; }
.dark .text-zinc-400 { color: #d4d4d8 !important; }
.dark .text-[#888] { color: #a1a1aa !important; }

/* ── Discovery Session Mask & Utilities ── */
.dot-grid-bg {
    background-image: radial-gradient(#FF8400 1px, transparent 1px);
    background-size: 32px 32px;
}

.mask-radial-faded {
    mask-image: radial-gradient(circle at center, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 75%);
}

.mask-edge-fade {
    mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
}

/* ── Card Grid Alignment & Truncation Logic ── */
/* 
   Standard Card Grid (Home & Service Pages): 
   3-line heading, 3-line copy.
*/
.group h3, .group h3.text-2xl, .group .card-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: auto !important; /* Allow single-line titles to sit tight to subtext */
    line-height: 1.25em !important;
    margin-bottom: 0.25rem !important; /* Tight 4px gap for more premium feel */
}

/* 
   Blog Archive Specific:
   2-line heading, 3-line copy.
*/
.blog-index-grid h4 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.6em !important; /* height for 2 lines */
    line-height: 1.3em !important;
    margin-bottom: 0.75rem !important;
}

/* Standard Copy: Always 3 lines max */
.group p, .group .card-copy {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.6em !important;
    max-height: 4.8em !important;
}

.group {
    height: auto !important;
    min-height: 100%;
}

/* ── Theme Keyframes ────────────────── */
@keyframes flow-cicd { 0% { stroke-dashoffset: 40; } 100% { stroke-dashoffset: 0; } }
@keyframes radar-spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes flow { 0% { stroke-dashoffset: 40; } 100% { stroke-dashoffset: 0; } }
@keyframes pulse-orange { 0% { transform: scale(0.95); opacity: 0.5; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.5; } }
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.animate-spin-slow { animation: spin-slow 8s linear infinite; }
.flow-line { stroke-dasharray: 10 5; animation: flow 2s linear infinite; }
.flow-line-multi { stroke-dasharray: 10 5; animation: flow-cicd 2s linear infinite; }
.animate-pulse-orange { animation: pulse-orange 2s ease-in-out infinite; }
.animate-radar-spin { animation: radar-spin 3s linear infinite; }

/* ── Performance & Clipping ──────────── */
.force-clip {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}

/* ── Shadows ─────────────────────────── */
.shadow-premium { box-shadow: 0 12px 16px -6px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02); }
.shadow-premium-hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

/* ── Capability Card Patterns ────────── */
.preserve-colors { color-scheme: light; }

/* ── Dark Mode Border Overrides (Consistency sweep) ── */
.dark .border-zinc-800 { border-color: rgba(255,255,255,0.08) !important; }
.dark .border-zinc-100 { border-color: rgba(255,255,255,0.06) !important; }
.dark .border-white\/08 { border-color: rgba(255,255,255,0.08) !important; }
.dark .border-white\/06 { border-color: rgba(255,255,255,0.06) !important; }
.dark .border-white\/10 { border-color: rgba(255,255,255,0.1) !important; }
.dark .border-white\/05 { border-color: rgba(255,255,255,0.05) !important; }