/**
 * Public Pages Styles
 * Centralized styles for all public-facing pages
 *
 * CUSTOMIZATION GUIDE:
 * - Modify CSS variables in :root to change colors, fonts, and spacing globally
 * - Organized by component/page section for easy navigation
 */

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
    /* Brand Colors */
    --color-accent: #9CA3AF;
    --color-accent-dark: #6B7280;
    --color-accent-hover: #E5E7EB;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    /* Prose/content accent (overridable per-page via inline CSS custom property) */
    --accent-color: var(--color-accent);

    /* Typography */
    --font-sans: 'Lato', sans-serif;
    --font-serif: 'Merriweather', serif;
    --font-size-xs: 0.625rem;    /* 10px */
    --font-size-sm: 0.75rem;     /* 12px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.0625rem;   /* 17px */
    --font-size-xl: 1.125rem;    /* 18px */
    --font-size-2xl: 1.25rem;    /* 20px */
    --font-size-3xl: 1.5rem;     /* 24px */

    /* Post/editor content font variables (defaults match DB defaults).
     * These are overridden by api/editor-styles.css which is generated
     * from Admin -> Editor Settings. */
    --editor-font-family: 'Lato', sans-serif;

    /* Per-element font families (fall back to --editor-font-family when not set) */
    --editor-title-font-family: var(--editor-font-family);
    --editor-subheading-font-family: var(--editor-font-family);
    --editor-body-font-family: var(--editor-font-family);

    /* Site layout zone font families (fall back to --editor-font-family when not set) */
    --editor-nav-font-family: var(--editor-font-family);
    --editor-header-font-family: var(--editor-font-family);
    --editor-footer-font-family: var(--editor-font-family);

    /* Per-element font weights (overridden by api/editor-styles.css) */
    --editor-title-font-weight: 900;
    --editor-subheading-font-weight: 300;
    --editor-h3-font-weight: 700;
    --editor-h4-font-weight: 600;
    --editor-body-font-weight: 400;

    --editor-base-font-size: 18px;
    --editor-title-font-size: 40px;
    --editor-subheading-font-size: 28px;
    --editor-h3-font-size: 24px;
    --editor-h4-font-size: 20px;

    /* Scrollbar */
    --scrollbar-width: 3px;
    --scrollbar-thumb: var(--color-accent);
    --scrollbar-thumb-hover: var(--color-accent-dark);
    --scrollbar-track: #f1f1f1;

    /* Card */
    --card-border-radius: 12px;
    --card-border: 1px solid var(--color-gray-200);
    --card-transition: all 0.3s ease;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.4s ease;
}

/* ============================================
   GLOBAL RESETS & BASE
   ============================================ */
body {
    font-family: var(--editor-font-family);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

strong, b {
    font-weight: 700;
}

/* Preserve icon font families */
i.fas, i.far, i.fab, i.fal, i.fad,
i[class*="fa-"],
.fa, .fab, .fas, .far,
.material-icons {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'Material Icons' !important;
}

/* Utility: explicit Lato font family */
.font-lato {
    font-family: var(--font-sans);
}

/* ============================================
   CUSTOM SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ============================================
   SHARED ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.8; }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* ============================================
   NAVIGATION ACTIVE STATE
   ============================================ */
/* Site layout zone font families — DB-controlled via Editor Settings */
header {
    font-family: var(--editor-header-font-family);
}

nav {
    font-family: var(--editor-nav-font-family);
}

footer {
    font-family: var(--editor-footer-font-family);
}

.nav-item-link {
    border-bottom: 3px solid transparent;
    transition: border-color var(--transition-fast);
}

.nav-item-link:hover {
    border-bottom-color: var(--color-accent-hover);
}

.nav-item-link.nav-item-active {
    border-bottom-color: var(--color-accent);
}

/* ============================================
   SHARED CARD COMPONENTS
   ============================================ */

/* ---- Vertical card (home, all-posts, category, tag pages) ---- */
.vertical-card {
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: var(--card-border);
    border-radius: var(--card-border-radius);
    transition: var(--card-transition);
    overflow: hidden;
    height: 100%;
}

.vertical-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--color-accent);
}

.vertical-card-image-wrapper {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background-color: var(--color-gray-100);
}

.vertical-card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vertical-card-category {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--color-white);
    border: 1px solid var(--color-accent);
    padding: 4px 8px;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--color-gray-700);
    z-index: 10;
}

.vertical-card-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.vertical-card-content-top {
    padding: 1.25rem;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
}

.vertical-card-content-bottom {
    padding: 1.25rem;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.vertical-card-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: var(--card-transition);
}

.vertical-card:hover .vertical-card-title,
.vertical-card:focus-within .vertical-card-title {
    white-space: normal;
    overflow: visible;
}

.vertical-card-description {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    line-height: 1.6;
    margin-bottom: 1rem;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 4.8em;
}

.vertical-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-gray-200);
}

.vertical-card-read-time {
    font-size: var(--font-size-sm);
    color: var(--color-gray-400);
}

.vertical-card-read-more {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: color var(--transition-base);
}

.vertical-card-read-more:hover {
    color: var(--color-gray-700);
}

/* ---- Horizontal card (legacy) ---- */
.horizontal-card {
    display: flex;
    gap: 0;
    background: var(--color-white);
    border: var(--card-border);
    transition: var(--card-transition);
    overflow: hidden;
}

.horizontal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--color-accent);
}

.horizontal-card-image {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    overflow: hidden;
    background-color: var(--color-gray-100);
}

.horizontal-card-content {
    flex: 1;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

/* ---- Generic post card ---- */
.post-card {
    transition: var(--card-transition);
    background: var(--color-white);
    border: var(--card-border);
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--color-accent);
}

/* ============================================
   HOME PAGE STYLES
   ============================================ */

/* Hero */
.hero-modern {
    background: linear-gradient(135deg, rgba(156, 175, 136, 0.95) 0%, rgba(107, 114, 128, 0.90) 100%);
    min-height: 500px;
}

.pattern-bg {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Category badge */
.category-badge {
    background: var(--color-white);
    color: var(--color-gray-700);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    transition: var(--card-transition);
}

.category-badge:hover {
    background: var(--color-accent);
    color: var(--color-white);
}

/* Section divider */
.section-divider {
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-accent), transparent);
    margin: 3rem auto;
    max-width: 200px;
}

/* NEW badge */
.badge-new {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: var(--color-white);
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    animation: pulse 2s ease-in-out infinite;
}

/* Featured post card */
.featured-card {
    background: var(--color-white);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: var(--transition-slow);
}

.featured-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Stat card */
.stat-card {
    background: var(--color-white);
    border: 2px solid var(--color-gray-200);
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    transition: var(--card-transition);
}

.stat-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

/* Newsletter */
.newsletter-section {
    background: linear-gradient(135deg, var(--color-gray-800) 0%, var(--color-gray-700) 100%);
    color: var(--color-white);
}

/* Perspective card */
.perspective-card {
    transition: var(--card-transition);
    overflow: hidden;
}

.perspective-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Carousel */
.carousel-container {
    position: relative;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    flex-shrink: 0;
}

.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-white);
    border: none;
    padding: 1rem;
    cursor: pointer;
    z-index: 10;
    transition: background var(--transition-base);
}

.carousel-button:hover {
    background: rgba(0, 0, 0, 0.9);
}

.carousel-button.prev { left: 1rem; }
.carousel-button.next { right: 1rem; }

.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.carousel-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-gray-300);
    cursor: pointer;
    transition: background var(--transition-base);
}

.carousel-indicator.active {
    background: var(--color-accent);
}

/* ---- Home page responsive ---- */
@media (max-width: 768px) {
    .hero-modern { min-height: 400px; }

    .horizontal-card { flex-direction: column; }
    .horizontal-card-image { width: 100%; height: 200px; }

    .vertical-card-title { font-size: var(--font-size-base); }
    .vertical-card-image-wrapper { height: 200px; }

    .carousel-button { padding: 0.5rem; font-size: 0.875rem; }
    .carousel-button.prev { left: 0.5rem; }
    .carousel-button.next { right: 0.5rem; }
}

@media (max-width: 640px) {
    .hero-modern { min-height: 350px; }

    .carousel-container {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
        max-width: 100vw;
    }

    .carousel-slide { width: 100%; max-width: 100%; }
    .carousel-slide .rounded-xl { border-radius: 0.5rem; }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .hero-modern { min-height: 450px; }
}

/* ============================================
   POST VIEW STYLES
   ============================================ */

/* Hide layout footer back-to-top button on post page */
#back-to-top {
    display: none !important;
}

/* Post main content */
.post-main-content {
    width: 100%;
}

/* Floating share buttons */
.floating-share {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1000;
}

.floating-share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    cursor: pointer;
    transition: var(--card-transition);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.floating-share-btn:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.reading-time-right {
    margin-left: auto;
}

/* Featured image grayscale effect */
.featured-image-grayscale {
    filter: grayscale(100%);
    transition: filter var(--transition-base);
}

.featured-image-grayscale:hover {
    filter: grayscale(0%);
}

/* ---- Post responsive ---- */
@media (min-width: 640px) {
    .floating-share { bottom: 30px; right: 30px; gap: 10px; }
    .floating-share-btn { width: 50px; height: 50px; }
}

@media (min-width: 1024px) {
    .post-featured-img { max-height: 420px; object-fit: cover; }
}

@media (min-width: 1024px) and (max-width: 1280px) {
    .post-featured-img { max-height: 380px; }
}

/* ============================================
   PROSE (POST CONTENT) STYLES
   Font sizes come from --editor-* CSS variables.
   Default values are in :root above; api/editor-styles.css
   overrides them with Admin -> Editor Settings values.
   ============================================ */

/* Post title - uses editor-configured size and font family */
.post-title {
    font-family: var(--editor-title-font-family) !important;
    font-size: var(--editor-title-font-size) !important;
    font-weight: var(--editor-title-font-weight) !important;
    line-height: 1.3 !important;
    color: #111827 !important;
    text-align: left !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* Post subheading - uses editor-configured size and font family */
.post-subheading,
.post-view-subheading {
    font-family: var(--editor-subheading-font-family) !important;
    font-size: var(--editor-subheading-font-size) !important;
    font-weight: var(--editor-subheading-font-weight) !important;
    color: #4b5563 !important;
    text-align: left !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.45 !important;
    width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

/* Additional alias kept for backward compatibility */
.post-view-title {
    font-family: var(--editor-title-font-family) !important;
    font-size: var(--editor-title-font-size) !important;
    font-weight: var(--editor-title-font-weight) !important;
    line-height: 1.3 !important;
    color: #111827 !important;
    text-align: left !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 1.5rem !important;
}

/* Prose container */
.prose {
    font-size: var(--editor-base-font-size);
    line-height: 1.8;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--editor-body-font-family);
}

.prose > * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Apply editor font to all prose child elements */
.prose,
.prose *,
.prose p,
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6,
.prose li,
.prose span,
.prose strong,
.prose em,
.prose blockquote,
.prose ul,
.prose ol,
.prose div,
.prose a,
.prose code,
.prose pre,
.prose table,
.prose td,
.prose th {
    font-family: var(--editor-body-font-family) !important;
}

.prose table * {
    text-align: left !important;
}

/* Paragraphs */
.prose p,
.post-content p,
.prose div span,
.post-content div span,
.prose span,
.post-content span {
    font-family: var(--editor-body-font-family) !important;
    font-size: var(--editor-base-font-size) !important;
    line-height: 1.9 !important;
    margin-top: 0.9rem;
    margin-bottom: 0.5rem;
    text-align: justify;
    font-weight: var(--editor-body-font-weight) !important;
    width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: pre-wrap !important;
}

/* Headings in content */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2em;
    margin-bottom: 1em;
    color: var(--color-gray-900);
}

.prose h1 { font-size: 1.75em; border-bottom: 2px solid var(--color-gray-200); padding-bottom: 0.5rem; }
.prose h2 { font-size: 1.5em;  border-bottom: 1px solid var(--color-gray-200); padding-bottom: 0.5rem; }

/* h3 / h4 use editor-configured sizes */
.prose h3,
.post-content h3 {
    font-size: var(--editor-h3-font-size) !important;
    font-weight: var(--editor-h3-font-weight) !important;
    color: #111827 !important;
    text-align: left !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.45 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.prose h4,
.post-content h4 {
    font-size: var(--editor-h4-font-size) !important;
    font-weight: var(--editor-h4-font-weight) !important;
    color: #111827 !important;
    text-align: left !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.45 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.prose h5,
.prose h6 { font-size: 1.05em; }

/* Links */
.prose a {
    color: #495265;
    text-decoration: underline;
    text-decoration-color: rgba(73, 82, 101, 0.3);
    text-underline-offset: 2px;
    transition: all 0.2s ease-in-out;
}

.prose a:hover {
    color: #2d3748;
    text-decoration-color: #495265;
    text-underline-offset: 3px;
}

/* Images */
.prose img {
    max-width: 100%;
    height: auto;
    margin: 2rem auto;
    display: block;
    border-radius: 8px;
}

.prose figure { margin: 2rem 0; }

.prose figcaption {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-top: 0.75rem;
    font-style: italic;
}

/* Code */
.prose pre,
.post-content pre {
    background-color: var(--color-gray-800);
    color: #f9fafb;
    padding: 1.25rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.5rem 0;
    line-height: 1.6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-family: 'Courier New', monospace !important;
    font-size: calc(var(--editor-base-font-size) * 0.875) !important;
}

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

.prose code,
.post-content code {
    background-color: var(--color-gray-100);
    color: #495265;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
    font-family: 'Courier New', Courier, monospace !important;
}

/* Blockquote */
.prose blockquote,
.post-content blockquote {
    border-left: 4px solid #9CA3AF !important;
    margin: 1.5rem 0 !important;
    font-style: italic !important;
    color: var(--color-gray-600) !important;
    background-color: var(--color-gray-50);
    padding: 1.5rem;
    border-radius: 0 8px 8px 0;
    font-size: calc(var(--editor-base-font-size) * 1.1) !important;
    line-height: 1.6 !important;
}

.prose blockquote p,
.post-content blockquote p { margin: 0; }

.prose blockquote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--color-gray-500);
    font-style: normal;
}

/* Lists */
.prose ul,
.prose ol,
.post-content ul,
.post-content ol {
    font-size: var(--editor-base-font-size) !important;
    line-height: 1.9 !important;
    color: #1f2937 !important;
    margin: 1.5rem 0 !important;
    padding-left: 1.75rem !important;
}

.prose li,
.post-content li {
    font-size: var(--editor-base-font-size) !important;
    line-height: 1.9 !important;
    margin-bottom: 0.5rem !important;
}

.prose ul,
.post-content ul           { list-style-type: disc; }
.prose ul ul,
.post-content ul ul        { list-style-type: circle; margin-top: 0.5rem; }
.prose ol,
.post-content ol           { list-style-type: decimal; }
.prose ol ol,
.post-content ol ol        { list-style-type: lower-alpha; margin-top: 0.5rem; }

/* Lists containing address elements (reference/metadata styling) */
.prose ol:has(li address),
.prose ul:has(li address),
.post-content ol:has(li address),
.post-content ul:has(li address) {
    font-size: 13px !important;
    color: #0077b6 !important;
}

.prose ol:has(li address) li,
.prose ul:has(li address) li,
.post-content ol:has(li address) li,
.post-content ul:has(li address) li {
    font-size: 13px !important;
    color: #0077b6 !important;
}

.prose ol:has(li address) li::marker,
.prose ul:has(li address) li::marker,
.post-content ol:has(li address) li::marker,
.post-content ul:has(li address) li::marker {
    font-size: 13px !important;
    color: #0077b6 !important;
}

/* Tables */
.prose table,
.post-content table,
.content-container table.editor-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 1rem 0 !important;
    background: white !important;
    box-sizing: border-box !important;
}

.prose table td,
.prose table th,
.post-content table td,
.post-content table th,
.content-container table.editor-table td,
.content-container table.editor-table th {
    border: 1px solid #999 !important;
    padding: 0.75rem !important;
    text-align: left !important;
    vertical-align: top !important;
    min-width: 100px !important;
    background-color: white !important;
    color: inherit !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.prose table th,
.post-content table th,
.content-container table.editor-table th {
    background-color: #f0f0f0 !important;
    font-weight: 600 !important;
}

.prose table td:focus,
.prose table th:focus,
.content-container table.editor-table td:focus,
.content-container table.editor-table th:focus {
    outline: 2px solid #4A90E2 !important;
    outline-offset: -2px !important;
}

/* Address element */
.prose address,
.post-content address {
    font-family: var(--editor-body-font-family) !important;
    font-size: 13px !important;
    color: #0077b6 !important;
    font-style: normal !important;
    margin-bottom: 0.2rem;
    text-align: justify;
    word-break: break-word;
}

.prose address span,
.post-content address span,
.prose ol li address,
.prose ul li address,
.post-content ol li address,
.post-content ul li address,
.prose ol li address span,
.prose ul li address span,
.post-content ol li address span,
.post-content ul li address span {
    font-family: var(--editor-body-font-family) !important;
    font-size: 13px !important;
    color: #0077b6 !important;
    font-style: normal !important;
    text-align: justify;
    word-break: break-word;
}

/* Horizontal rule */
.prose hr {
    border: none;
    border-top: 2px solid var(--color-gray-200);
    margin: 3rem 0;
}

.prose strong,
.post-content strong { font-weight: 700; color: var(--color-gray-900); }
.prose em,
.post-content em     { font-style: italic; }
.prose abbr          { text-decoration: underline dotted; cursor: help; }

/* Metadata / caption blocks */
.post-meta,
.caption,
.metadata,
.metadata *,
small {
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #6b7280 !important;
    font-style: italic !important;
}

.prose .metadata {
    display: block;
    color: #6b7280 !important;
    font-size: 13px !important;
    font-style: italic !important;
    margin: 1rem 0 !important;
    padding: 0.25rem 0 !important;
    line-height: 1.45 !important;
}

.prose .metadata * {
    color: #6b7280 !important;
    font-size: 13px !important;
    font-style: italic !important;
    line-height: 1.45 !important;
}

.prose .metadata ul,
.prose .metadata ol {
    color: #6b7280 !important;
    font-size: 13px !important;
    font-style: italic !important;
    line-height: 1.45 !important;
    margin: 0.5rem 0 !important;
    padding-left: 1.5rem !important;
    list-style-position: outside;
}

.prose .metadata ul   { list-style-type: disc; }
.prose .metadata ol   { list-style-type: decimal; }

.prose .metadata li {
    color: #6b7280 !important;
    font-size: 13px !important;
    font-style: italic !important;
    line-height: 1.45 !important;
    margin: 0.25rem 0 !important;
}

.prose .metadata ul ul  { list-style-type: circle; margin: 0.25rem 0 !important; }
.prose .metadata ul ul ul { list-style-type: square; }
.prose .metadata ol ol  { list-style-type: lower-alpha; margin: 0.25rem 0 !important; }
.prose .metadata ol ol ol { list-style-type: lower-roman; }
.prose .metadata ul ol,
.prose .metadata ol ul  { margin: 0.25rem 0 !important; }

/* Prose for static pages (privacy, terms) */
.prose h2.prose-accent-heading {
    color: var(--accent-color);
}


/* ============================================
   AUTHOR PAGE STYLES
   ============================================ */
.profile-image-circular {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid var(--color-gray-500);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.follow-button {
    background: linear-gradient(135deg, var(--color-gray-500) 0%, var(--color-accent) 100%);
    transition: var(--card-transition);
}

.follow-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(107, 114, 128, 0.3);
}

.social-icon {
    transition: var(--card-transition);
}

.social-icon:hover {
    transform: translateY(-3px);
    background-color: var(--color-gray-500);
}

.gallery-image {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    cursor: pointer;
}

.gallery-image:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* ============================================
   ONLINE TALKS PAGE STYLES
   ============================================ */
.talk-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
    transition: var(--card-transition);
}

.talk-card:hover .talk-title {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ============================================
   ACTIVE / PLAYING CARD  (in-grid, reverse-L layout)
   ============================================ */

/*
 * Dense auto-flow lets the grid fill gaps.
 * On 3-col layout the active card spans 2 cols × 2 rows, which causes the
 * grid to pack Cards B and C into col 3 rows 1 and 2 respectively,
 * filling the space that would otherwise be wasted.
 */
.talks-grid {
    grid-auto-flow: dense;
}

@media (min-width: 1280px) {
    .talk-card.active-card {
        grid-column: span 2;
        grid-row: span 2;
        order: -1;
    }
}

/* On 2-column layout: span both columns, single row */
@media (min-width: 768px) and (max-width: 1279px) {
    .talk-card.active-card {
        grid-column: 1 / -1;
        order: -1;
    }
}

/* Suppress hover-lift on the active card */
.talk-card.active-card:hover {
    transform: none;
}

/* Highlight shadow on active card */
.talk-card.active-card {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Show full title when playing */
.talk-card.active-card .talk-title {
    display: block;
    overflow: visible;
    font-size: 1.125rem;
}

/* No-pointer cursor on the iframe wrapper while playing */
.yt-thumb-wrap.playing {
    cursor: default;
}


.search-input-wrapper {
    position: relative;
}

.search-input-wrapper::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, var(--color-accent), var(--color-accent-dark), var(--color-accent));
    border-radius: 9999px;
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: -1;
}

.search-input-wrapper:focus-within::before {
    opacity: 1;
}

.result-item {
    animation: fadeInUp 0.5s ease-out backwards;
}

.result-item:nth-child(1) { animation-delay: 0.1s; }
.result-item:nth-child(2) { animation-delay: 0.2s; }
.result-item:nth-child(3) { animation-delay: 0.3s; }
.result-item:nth-child(4) { animation-delay: 0.4s; }
.result-item:nth-child(5) { animation-delay: 0.5s; }

/* ============================================
   404 ERROR PAGE STYLES
   ============================================ */
.error-container {
    position: relative;
    padding: 20px 0 5px 0;
}

.error-number {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.error-digit {
    font-size: 150px;
    font-weight: 900;
    font-family: "Inter", sans-serif;
    background: linear-gradient(135deg, #000000 0%, #4a4a4a 50%, #808080 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.error-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 12px;
    font-family: "Playfair Display", serif;
}

.error-description {
    font-size: 16px;
    color: #666666;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto 32px;
    font-family: var(--editor-body-font-family);
}

.action-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.btn-404 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 9999px;
    transition: var(--card-transition);
    text-decoration: none;
}

.btn-404-primary {
    background: var(--color-gray-600);
    color: var(--color-white);
    box-shadow: 0 4px 12px rgba(75, 85, 99, 0.3);
}

.btn-404-primary:hover {
    background: var(--color-gray-700);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(55, 65, 81, 0.4);
    color: var(--color-white);
}

.btn-404-secondary {
    background: var(--color-white);
    border: 2px solid var(--color-black);
    color: var(--color-black);
}

.btn-404-secondary:hover {
    background: var(--color-black);
    color: var(--color-white);
    transform: translateY(-2px);
}

.suggested-section {
    max-width: 1400px;
    margin: 60px auto 0;
    padding: 0 24px;
}

.suggested-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-black);
    font-family: "Playfair Display", serif;
    margin-bottom: 8px;
    text-align: center;
}

.title-underline {
    width: 50px;
    height: 3px;
    background: var(--color-gray-500);
    margin: 0 auto 40px;
}

/* ---- 404 responsive ---- */
@media (max-width: 768px) {
    .error-digit       { font-size: 80px; }
    .error-title       { font-size: 22px; }
    .error-description { font-size: 15px; }

    .btn-404 {
        padding: 10px 20px;
        font-size: 13px;
        width: 100%;
        justify-content: center;
    }

    .action-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 350px;
        margin: 0 auto 30px;
    }

    .suggested-title { font-size: 22px; }
}

@media (max-width: 576px) {
    .error-digit  { font-size: 70px; }
    .error-number { gap: 5px; }
}

/* ============================================
   CATEGORY BADGE (used on perspectives and tag pages)
   ============================================ */
.category-badge-sm {
    border: 1px solid var(--color-accent);
    color: var(--color-gray-600);
}

/* ============================================
   ASPECT RATIO UTILITIES
   ============================================ */

/* 16:9 aspect ratio container (for video embeds) */
.aspect-ratio-16-9 {
    padding-top: 56.25%;
}