/**
 * Citelane AI Growth - main.css
 * Additional compiled styles for post content, WP blocks,
 * admin bar adjustments, and print.
 */

/* ============================================================
   GLOBAL MOVING GRID BACKGROUND
   ============================================================ */
#grid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    will-change: transform;
}

#grid-bg::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    right: -40px;
    bottom: -40px;
    background-image:
        linear-gradient(rgba(220, 38, 38, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220, 38, 38, 0.055) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridMove 12s linear infinite;
}

@keyframes gridMove {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}

/* Ensure page content sits above the grid */
body > main,
body > footer {
    position: relative;
    z-index: 1;
}

/* ============================================================
   WORDPRESS CORE FIXES
   ============================================================ */
.wp-block-image { margin: var(--space-8) 0; }
.wp-block-image img { border-radius: var(--radius); max-width: 100%; height: auto; }

.alignleft  { float: left; margin: 0 var(--space-6) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-6); }
.aligncenter { margin: var(--space-6) auto; display: block; }

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 0.8125rem; color: var(--muted-foreground); text-align: center; margin-top: 0.5rem; }

/* Admin bar offset */
.admin-bar #site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar #site-header { top: 46px; } }

/* Remove default body margin/padding */
html, body { margin: 0; padding: 0; }

/* ============================================================
   POST CONTENT TYPOGRAPHY
   ============================================================ */
/* prose-blog aliases post-content for single.php */
.prose-blog { font-size: 1.0625rem; line-height: 1.8; color: var(--charcoal); }
.prose-blog h2, .prose-blog h3, .prose-blog h4,
.prose-blog p, .prose-blog ul, .prose-blog ol,
.prose-blog blockquote, .prose-blog table,
.prose-blog pre, .prose-blog img, .prose-blog hr { }

.post-content,
.prose-blog { max-width: 100%; }

.post-content h1, .prose-blog h1,
.post-content h2, .prose-blog h2,
.post-content h3, .prose-blog h3,
.post-content h4, .prose-blog h4,
.post-content h5, .prose-blog h5,
.post-content h6, .prose-blog h6 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
    color: var(--primary);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.post-content h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.post-content h2 { font-size: clamp(1.5rem, 2.5vw, 1.875rem); }
.post-content h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.post-content h4 { font-size: 1.125rem; }

.post-content p, .prose-blog p  { margin-bottom: var(--space-5); color: var(--charcoal); line-height: 1.8; }
.post-content a, .prose-blog a  { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover, .prose-blog a:hover { color: var(--crimson-dark); }

.post-content ul, .prose-blog ul,
.post-content ol, .prose-blog ol {
    margin: var(--space-5) 0;
    padding-left: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.post-content ul, .prose-blog ul { list-style: disc; }
.post-content ol, .prose-blog ol { list-style: decimal; }
.post-content li, .prose-blog li { color: var(--charcoal); line-height: 1.75; }

.post-content blockquote {
    border-left: 4px solid var(--primary);
    padding: var(--space-4) var(--space-6);
    margin: var(--space-8) 0;
    background-color: rgba(192,57,43,0.04);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--charcoal);
}
.post-content blockquote p:last-child { margin-bottom: 0; }

.post-content pre {
    background-color: var(--charcoal-deep);
    color: #f8f8f2;
    border-radius: var(--radius);
    padding: var(--space-6);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.65;
    margin: var(--space-6) 0;
}

.post-content code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background-color: rgba(192,57,43,0.08);
    color: var(--crimson-dark);
    padding: 0.15em 0.4em;
    border-radius: 0.25rem;
}

.post-content pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-6) 0;
    font-size: 0.9375rem;
    overflow-x: auto;
    display: block;
}
.post-content th {
    background-color: var(--muted);
    font-weight: 700;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid var(--border);
    color: var(--charcoal-deep);
    white-space: nowrap;
}
.post-content td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    color: var(--charcoal-light);
}
.post-content tr:last-child td { border-bottom: none; }
.post-content tr:hover td { background-color: rgba(192,57,43,0.02); }

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

.post-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: var(--space-10) 0;
}

/* Callout / Note block */
.post-content .callout,
.post-content .wp-block-callout {
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius);
    padding: var(--space-5) var(--space-6);
    background-color: rgba(192,57,43,0.04);
    margin: var(--space-8) 0;
}
.post-content .callout-icon { font-size: 1.25rem; margin-bottom: var(--space-2); }

/* ============================================================
   GUTENBERG BLOCK STYLES
   ============================================================ */
.wp-block-separator { border: none; border-top: 1px solid var(--border); margin: var(--space-8) 0; }

.wp-block-quote {
    border-left: 4px solid var(--primary);
    padding: var(--space-4) var(--space-6);
    margin: var(--space-8) 0;
    background-color: rgba(192,57,43,0.04);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
}
.wp-block-quote cite { font-size: 0.875rem; color: var(--muted-foreground); font-style: normal; margin-top: var(--space-3); display: block; }

.wp-block-pullquote {
    text-align: center;
    padding: var(--space-12) var(--space-8);
    border-top: 3px solid var(--primary);
    border-bottom: 3px solid var(--primary);
    margin: var(--space-10) 0;
}
.wp-block-pullquote blockquote { border: none; background: none; padding: 0; }
.wp-block-pullquote p { font-size: 1.5rem; font-weight: 700; color: var(--charcoal-deep); line-height: 1.4; }

.wp-block-button .wp-block-button__link {
    background-color: var(--primary);
    color: #fff;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s;
}
.wp-block-button .wp-block-button__link:hover { background-color: var(--crimson-dark); }

.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0; }

.wp-block-columns { gap: var(--space-8); }
@media (max-width: 639px) { .wp-block-columns { flex-direction: column; } }

.wp-block-cover {
    border-radius: var(--radius);
    overflow: hidden;
}

/* ============================================================
   NAVIGATION LINKS (Post prev/next)
   ============================================================ */
.post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-10);
    padding-top: var(--space-8);
    border-top: 1px solid var(--border);
}
.nav-previous, .nav-next { display: flex; flex-direction: column; gap: var(--space-2); }
.nav-next { text-align: right; }
.post-navigation a { text-decoration: none; font-weight: 600; color: var(--charcoal-deep); transition: color 0.15s; }
.post-navigation a:hover { color: var(--primary); }

/* ============================================================
   COMMENTS SECTION
   ============================================================ */
.comments-area h2 { font-size: 1.375rem; font-weight: 700; margin-bottom: var(--space-6); }

.comment-list { display: flex; flex-direction: column; gap: var(--space-6); }
.comment-body {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
}
.comment-author b { font-weight: 700; color: var(--charcoal-deep); }
.comment-metadata { font-size: 0.8125rem; color: var(--muted-foreground); margin-top: var(--space-1); }
.comment-content { margin-top: var(--space-3); font-size: 0.9375rem; line-height: 1.7; }

.comment-form label { display: block; font-size: 0.875rem; font-weight: 600; margin-bottom: var(--space-2); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 0.5rem;
    background-color: var(--background);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    transition: border-color 0.15s;
    outline: none;
    margin-bottom: var(--space-4);
}
.comment-form input:focus,
.comment-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(192,57,43,0.1); }
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form input[type="submit"] {
    background-color: var(--primary);
    color: #fff;
    padding: 0.75rem 2rem;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    border: none;
    font-family: var(--font-sans);
}
.comment-form input[type="submit"]:hover { background-color: var(--crimson-dark); }

/* ============================================================
   SIDEBAR WIDGETS (blog sidebar)
   ============================================================ */
.widget {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
}

.widget-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted-foreground);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.widget ul { display: flex; flex-direction: column; gap: var(--space-2); }
.widget ul li a { font-size: 0.875rem; color: var(--charcoal-light); transition: color 0.15s; }
.widget ul li a:hover { color: var(--primary); }

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.search-results-count { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: var(--space-6); }
.search-highlight { background-color: rgba(192,57,43,0.15); padding: 0 2px; border-radius: 2px; }

/* ============================================================
   CUSTOM POST TYPE - SERVICE ARCHIVE
   ============================================================ */
.post-type-archive-citelane_service .services-grid,
.post-type-archive-citelane_case_study .grid-3 {
    margin-top: var(--space-6);
}

/* ============================================================
   NEWSLETTER INLINE FORM
   ============================================================ */
.newsletter-inline {
    background-color: rgba(192,57,43,0.06);
    border: 1px solid rgba(192,57,43,0.15);
    border-radius: var(--radius);
    padding: var(--space-8);
    margin: var(--space-10) 0;
    text-align: center;
}
.newsletter-inline h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--space-3); }
.newsletter-inline p  { font-size: 0.875rem; color: var(--charcoal-light); margin-bottom: var(--space-5); }
.newsletter-inline .newsletter-form { display: flex; gap: var(--space-2); max-width: 420px; margin: 0 auto; }
.newsletter-inline .newsletter-form input {
    flex: 1; padding: 0.75rem 1rem;
    border: 1.5px solid var(--border); border-radius: 0.5rem;
    font-size: 0.9375rem; outline: none;
    transition: border-color 0.15s;
}
.newsletter-inline .newsletter-form input:focus { border-color: var(--primary); }

/* ============================================================
   COOKIE CONSENT BAR
   ============================================================ */
#cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--charcoal-deep);
    color: var(--cream);
    padding: var(--space-4) var(--space-6);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: 0.875rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
#cookie-consent a { color: var(--crimson-light); text-decoration: underline; }
#cookie-consent-accept {
    background: var(--primary); color: #fff;
    padding: 0.5rem 1.25rem; border-radius: 0.5rem;
    font-weight: 600; font-size: 0.875rem; cursor: pointer; white-space: nowrap;
    flex-shrink: 0;
}

/* ============================================================
   FOOTER CTA BUTTON - force red
   ============================================================ */
.footer-cta-btn {
    background-color: #b1003e !important;
    color: #fff !important;
}
.footer-cta-btn:hover {
    background-color: #8a002f !important;
}

/* ============================================================
   GLOBAL CTA SECTION - light sand background for all variants
   ============================================================ */
/* CTA outline button - red outline on sand background */
.btn-cta-outline,
.btn-cta-outline:hover,
.btn-cta-outline:focus,
.btn-cta-outline:active {
    background-color: var(--primary) !important;
    color: #fff !important;
    border: 2px solid var(--primary) !important;
    transform: none !important;
    box-shadow: none !important;
}
.cta-section,
.cta-section.variant-default,
.cta-section.variant-dark,
section.bg-primary {
    background-color: #e8d8c2 !important;
}
.cta-section .cta-headline,
.cta-section.variant-default .cta-headline,
.cta-section.variant-dark .cta-headline,
section.bg-primary h2 {
    color: var(--charcoal-deep) !important;
}
.cta-section .cta-sub,
.cta-section.variant-default .cta-sub,
.cta-section.variant-dark .cta-sub,
section.bg-primary p {
    color: var(--charcoal-light) !important;
}
/* Primary CTA button inside crimson section */
section.bg-primary a[class*="bg-primary"] {
    background-color: var(--crimson-dark) !important;
    color: #fff !important;
}
section.bg-primary a[class*="bg-primary"]:hover {
    background-color: #6b0025 !important;
}
/* Secondary CTA button inside cream-overridden section */
section.bg-primary a.btn-secondary-cta {
    background-color: #fff !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
}
section.bg-primary a.btn-secondary-cta:hover {
    background-color: var(--primary) !important;
    color: #fff !important;
}

/* Cal.com popup - ensure it overlays sticky header and nothing clips it */
[data-cal-embed],
[data-cal-embed] iframe,
div[style*="cal.com"] {
    z-index: 9999 !important;
}
body.cal-open {
    overflow: hidden;
}

/* Hide Cal.com powered-by branding */
a[href="https://cal.com"],
a[href*="cal.com?source=embed"],
a[href*="cal.com?source="],
[data-cal-embed] a[href*="cal.com"],
[class*="powered"],
[class*="branding"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}