/* static/css/styles.css */

/* ================================================================
   LIQUID GLASS — Depth Effect and Translucent Layers
   ================================================================ */
.liquid-glass {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.dark .liquid-glass {
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-panel {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(229, 231, 235, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.dark .glass-panel {
    background-color: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ================================================================
   MICRO-INTERACTIONS AND VISUAL FEEDBACK (2025 Trends)
   ================================================================ */
.btn-micro {
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 150ms ease-in-out,
                background-color 150ms ease;
}

.btn-micro:active {
    transform: scale(0.96);
}

.focus-ring {
    outline: none;
    transition: box-shadow 0.2s;
}

.focus-ring:focus-visible {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}

.hover-glow {
    transition: box-shadow 300ms ease;
}

.hover-glow:hover {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}

.dark .hover-glow:hover {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

/* ================================================================
   HIDE SCROLLBAR (horizontal feeds, comment lists)
   ================================================================ */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ================================================================
   BENTO CARD — Base of all modular grid blocks
   ================================================================ */
.bento-card {
    border-radius: 1.5rem;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Variant focus text-only */
.bento-card-pure-text {
    /* Enhances typography block readability */
    box-shadow: inset 0 2px 4px 0 rgba(255, 255, 255, 0.3);
}

.dark .bento-card-pure-text {
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

/* ================================================================
   PURE TEXT POST — height:auto, no fixed restrictions
   Ensures text cards expand by content (Feed)
   ================================================================ */
.post-text-body {
    /* height and min-height = auto: eliminate the "black hole" below
       the text in text-only posts in the feed */
    height: auto;
    min-height: unset;
    position: relative;
    /* Fluid typography for reading long texts */
    line-height: 1.75;
}

/* ================================================================
   POST DETAIL — Text block only (post_detail.html)
   Contracts organically with the content, without a black hole.
   ================================================================ */
.post-detail-text-body {
    height: auto;
    min-height: unset;
    position: relative;
    /* Minimum padding for visual breathing room */
    padding-bottom: 0;
}

/* ================================================================
   "READ MORE" / "SHOW LESS" FUNCTIONALITY
   Smooth animation with max-height; INP < 200ms (no heavy reflow)
   ================================================================ */
.post-text-full {
    /* Smooth transition when expanding */
    animation: textReveal 0.25s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes textReveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* "Read more" / "Show less" button */
.btn-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(59, 130, 246, 0.85);
    transition: color 150ms ease;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

.btn-read-more:hover {
    color: rgb(59, 130, 246);
}

/* Icon rotates when expanded */
.btn-read-more[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* ================================================================
   AD SLOTS — CLS prevention and elegant collapse
   ================================================================ */

/* In-feed (Feed + Post Detail): no actual ad, collapses to 0 */
.ad-slot-infeed {
    /* Reserves space ONLY when AdSense is injected (.has-ad) */
    min-height: 0;
    width: 100%;
    border-radius: 1rem;
    overflow: hidden;
    /* Visible placeholder in dev */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0;
    color: #9ca3af;
    font-size: 0.875rem;
    transition: min-height 0.3s ease;
}

/* When the actual AdSense is injected: add .has-ad to the element */
.ad-slot-infeed.has-ad {
    min-height: 250px;
}

/* No ad: placeholder takes up minimal space, no "hole" */
.ad-slot-infeed:not(.has-ad) .ad-slot-placeholder {
    padding: 1rem;
}

.dark .ad-slot-infeed {
    background-color: #1e1e1e;
}

/* Ad Slot in Post Detail (sidebar) — min-height 250px as CLS guard */
.ad-slot-detail {
    min-height: 250px;
    width: 100%;
    border-radius: 1.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: min-height 0.3s ease;
}

/* Elegant collapse when placeholder has no actual ad */
.ad-slot-detail:not(.has-ad) {
    /* Keeps minimal space to avoid creating a "black hole" in the sidebar,
       but smaller than the CLS guard (used only in dev/placeholder) */
    min-height: 80px;
}

.ad-slot-detail.has-ad {
    min-height: 250px;
}

/* ================================================================
   TYPOGRAPHICAL UTILITIES
   ================================================================ */
.balance-text {
    text-wrap: balance;
}

/* Adaptive typography for reading long texts */
.post-text-body p,
.post-detail-text-body p {
    line-height: 1.75;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ================================================================
   SKELETON SCREENS (INP / CLS Optimization)
   ================================================================ */
.skeleton {
    background-color: #e2e8f0;
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.4) 20%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: shimmer 1.5s infinite linear;
    border-radius: 0.5rem;
}

.dark .skeleton {
    background-color: rgb(31, 41, 55);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.05) 20%,
        rgba(255, 255, 255, 0) 40%,
        rgba(255, 255, 255, 0) 100%
    );
}

@keyframes shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.skeleton-text {
    height: 14px;
    width: 100%;
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.skeleton-text:last-child {
    width: 80%;
}

.skeleton-avatar {
    width: 32px;
    height: 32px;
    border-radius: 12px;
}

.skeleton-wrapper {
    display: none; /* Inactive by default; JS controls the display */
}

/* ================================================================
   DROPDOWN & MODAL ANIMATIONS
   ================================================================ */
@keyframes dropdownEntry {
    from { opacity: 0; transform: scale(0.95) translateY(-5px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes dropdownExit {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to   { opacity: 0; transform: scale(0.95) translateY(-5px); }
}

.dropdown-animate-in {
    animation: dropdownEntry 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.dropdown-animate-out {
    animation: dropdownExit 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ================================================================
   AUXILIARY ANIMATIONS
   ================================================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease both;
}

/* Error Animation: Shake */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.animate-shake {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* Micro-interaction: Valid Input */
.valid-input {
    border-color: #10b981 !important; /* Tailwind green-500 */
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}
.dark .valid-input {
    border-color: #059669 !important; /* Tailwind green-600 */
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
}

/* ================================================================
   BOTTOM SHEET ANIMATIONS
   ================================================================ */
.sheet-animate-in {
    transform: translateY(0) !important;
}

.sheet-animate-out {
    transform: translateY(100%) !important;
}