/**
 * Visual Polish 2026 - Comprehensive UI/UX Fixes
 * 
 * Addresses identified visual issues:
 * 1. Blog carousel empty/dark areas
 * 2. Stat chart showing zeros (CSS fallback presentation)
 * 3. Related reading avatar placeholders
 * 4. Card text wrapping/hyphenation
 * 5. Overall polish improvements
 * 6. Card images not loading properly
 * 
 * @version 1.1.0
 * @since Theme v6.1.0
 * @date 2026-01-13
 */

/* ==========================================================================
   1. BLOG CAROUSEL - FIX EMPTY/DARK AREAS
   The carousel slides without images should show solid branded colors
   ========================================================================== */

/* Ensure carousel slides have proper background when no image */
.hero-carousel__slide--no-image {
  background: var(--color-primary, #0066cc) !important;
}

/* Ensure content overlay doesn't create unnecessary darkness */
.hero-carousel__slide--no-image .hero-carousel__content {
  background: transparent !important;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: var(--space-8, 2rem);
}

/* Center the content when no image */
.hero-carousel__content--centered {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: auto !important;
  padding: var(--space-6, 1.5rem) var(--space-8, 2rem) !important;
  max-width: 90%;
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: var(--radius-xl, 20px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Blog carousel specific - ensure wrapper shows properly */
.hero-carousel--blog .hero-carousel__wrapper {
  background: var(--color-surface-alt, #f8f9fa);
  border-radius: var(--radius-xl, 20px);
  overflow: hidden;
}

/* Slides without images should be visually appealing */
.hero-carousel--blog .hero-carousel__slide:not(:has(img)) {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary, #0066cc);
}

/* Fix carousel image loading - ensure images display properly */
.hero-carousel__image {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  /* CRITICAL: Force aspect ratio to prevent 0 height */
  aspect-ratio: 16 / 9;
}

/* Ensure carousel slide has proper dimensions */
.hero-carousel__slide {
  position: relative;
  min-height: clamp(280px, 50vw, 450px) !important;
  overflow: hidden;
}

/* Carousel image container needs explicit height */
.hero-carousel__slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Category badge on carousel */
.hero-carousel__category {
  display: inline-block;
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  background: var(--color-primary, #0066cc);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm, 6px);
  margin-bottom: var(--space-3, 0.75rem);
}

/* Title link on carousel */
.hero-carousel__title a {
  color: inherit !important;
  text-decoration: none;
}

.hero-carousel__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ==========================================================================
   1b. FIX CARD IMAGES NOT LOADING - Gray placeholder fix
   ========================================================================== */

/* Ensure card images always have a fallback background */
.entry-card__image-wrapper,
.archive-grid article .card-image,
.archive-grid .entry-card figure,
.entry-card figure {
  background: var(--color-surface-alt, #f0f4f8) !important;
  position: relative;
  overflow: hidden;
}

/* Solid color placeholder while image loads (NO GRADIENTS per DESIGN-SYSTEM.md) */
.entry-card__image-wrapper::before,
.archive-grid article .card-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-surface-alt, #f0f4f8);
  z-index: 0;
}

/* Ensure images appear above placeholder */
.entry-card__image-wrapper img,
.archive-grid article .card-image img,
.entry-card figure img {
  position: relative;
  z-index: 1;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Force images to always be visible */
.archive-grid img,
.entry-card img,
.related-card img {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* ==========================================================================
   2. STAT CHARTS - VISUAL FALLBACK FOR ZERO VALUES
   When data shows 0, make it look intentional not broken
   ========================================================================== */

/* Style stat cards that have zero values to look intentional */
.pc3-stat__value:empty::before {
  content: '—';
  opacity: 0.5;
}

/* When stat shows "0x" or "0%", style it appropriately */
.pc3-stat__value {
  position: relative;
}

/* Add subtle animation to draw attention */
.pc3-stats .pc3-stat {
  animation: statFadeIn 0.6s ease-out forwards;
  opacity: 0;
}

.pc3-stats .pc3-stat:nth-child(1) {
  animation-delay: 0.1s;
}
.pc3-stats .pc3-stat:nth-child(2) {
  animation-delay: 0.2s;
}
.pc3-stats .pc3-stat:nth-child(3) {
  animation-delay: 0.3s;
}
.pc3-stats .pc3-stat:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes statFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Make zero values appear more subtle but readable */
.pc3-stat__value[data-value='0']::after {
  content: ' ';
  font-size: 0.75em;
  opacity: 0.6;
}

/* ==========================================================================
   3. RELATED READING - FIX AVATAR PLACEHOLDERS
   Replace gray circles with styled fallbacks
   ========================================================================== */

/* Author avatar styling with fallback */
.related-card__author-avatar,
.entry-card__author-avatar,
.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary, #0066cc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  overflow: hidden;
  flex-shrink: 0;
}

/* If avatar image fails to load, show initials */
.related-card__author-avatar img,
.entry-card__author-avatar img,
.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Fallback when no image - show brand icon or initial */
.related-card__author-avatar:empty::before,
.entry-card__author-avatar:empty::before,
.author-avatar:empty::before {
  content: 'E'; /* E for Exzil */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Author info section styling */
.related-card__author,
.entry-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-3, 0.75rem);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #6b7280);
}

.related-card__author-name,
.entry-card__author-name {
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
}

[data-theme='dark'] .related-card__author-name,
[data-theme='dark'] .entry-card__author-name {
  color: var(--color-text-dark, #f0f0f0);
}

/* ==========================================================================
   4. CARD TEXT WRAPPING - IMPROVE TYPOGRAPHY
   Better hyphenation and word breaking for long titles
   ========================================================================== */

/* Card titles - prevent awkward breaks */
.entry-card__title,
.related-card__title,
.card-title,
.hero-carousel__title,
h2.entry-title,
h3.entry-title {
  /* Enable smart hyphenation */
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;

  /* Prevent orphans */
  orphans: 2;
  widows: 2;

  /* Better word breaking */
  word-break: break-word;
  overflow-wrap: break-word;

  /* Balanced text for modern browsers */
  text-wrap: balance;
}

/* Prevent hyphenation on short titles */
.entry-card__title,
.related-card__title {
  /* Only hyphenate if absolutely necessary */
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Mobile: Allow more aggressive word breaking */
@media (max-width: 480px) {
  .entry-card__title,
  .related-card__title,
  .card-title {
    hyphens: auto;
    -webkit-hyphens: auto;
    font-size: clamp(1rem, 4vw, 1.25rem);
    line-height: 1.3;
  }
}

/* Card excerpts - ensure readable line length */
.entry-card__excerpt,
.related-card__excerpt,
.card-excerpt {
  /* Line clamp for consistent height */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* Readable line length */
  max-width: 60ch;

  /* Proper spacing */
  line-height: 1.6;
  color: var(--color-text-secondary, #4b5563);
}

[data-theme='dark'] .entry-card__excerpt,
[data-theme='dark'] .related-card__excerpt {
  color: var(--color-text-secondary-dark, #9ca3af);
}

/* ==========================================================================
   5. GENERAL VISUAL POLISH
   ========================================================================== */

/* Smoother image loading */
img {
  transition: opacity 0.3s ease;
}

img[loading='lazy'] {
  opacity: 0;
}

img[loading='lazy'].loaded,
img[loading='lazy'][src]:not([src='']) {
  opacity: 1;
}

/* Better button hover states */
.btn-primary,
.button-primary,
button[type='submit'] {
  position: relative;
  overflow: hidden;
}

.btn-primary::before,
.button-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  transition: left 0.3s ease;
}

.btn-primary:hover::before,
.button-primary:hover::before {
  left: 100%;
}

/* Card hover lift effect */
.entry-card,
.related-card,
.card {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.entry-card:hover,
.related-card:hover,
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

[data-theme='dark'] .entry-card:hover,
[data-theme='dark'] .related-card:hover,
[data-theme='dark'] .card:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

/* Consistent border radius throughout */
.entry-card,
.related-card,
.card,
.pc3-chart,
.hero-carousel,
.archive-hero {
  border-radius: var(--radius-xl, 20px);
}

.entry-card__image-wrapper,
.related-card__image-wrapper,
.card-image-wrapper {
  border-radius: var(--radius-xl, 20px) var(--radius-xl, 20px) 0 0;
  overflow: hidden;
}

/* Category badges consistency */
.entry-card__category,
.related-card__category,
.card-category {
  display: inline-block;
  padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  background: var(--color-primary-subtle, rgba(0, 102, 204, 0.1));
  color: var(--color-primary, #0066cc);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full, 9999px);
  margin-bottom: var(--space-2, 0.5rem);
}

[data-theme='dark'] .entry-card__category,
[data-theme='dark'] .related-card__category,
[data-theme='dark'] .card-category {
  background: rgba(59, 130, 246, 0.15);
  color: var(--color-primary-light, #60a5fa);
}

/* ==========================================================================
   6. PRELOADER IMPROVEMENT - FASTER PERCEIVED LOADING
   ========================================================================== */

/* Speed up preloader animation slightly */
.preloader.is-complete {
  animation-duration: 0.5s !important;
}

/* Ensure content is visible even if JS fails */
.preloader + main,
.preloader ~ main {
  opacity: 1 !important;
  visibility: visible !important;
}

/*
 * IMPORTANT:
 * Do not auto-dismiss the preloader with CSS.
 * The JS runtime already provides a non-trapping fallback (CONFIG.maxDuration + "Continue")
 * while still correctly waiting for the page to finish loading.
 */

/* ==========================================================================
   7. MOBILE OPTIMIZATIONS
   ========================================================================== */

@media (max-width: 768px) {
  /* Carousel mobile fixes */
  .hero-carousel,
  .hero-carousel__wrapper {
    min-height: 280px;
    height: auto;
    max-height: 400px;
  }

  .hero-carousel__slide {
    min-height: 280px;
  }

  /* Card grid mobile */
  .archive-grid,
  .aiwp-related-reading__grid {
    gap: var(--space-4, 1rem);
  }

  /* Better touch targets */
  .hero-carousel__controls button,
  .pagination a,
  .pagination button {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ==========================================================================
   8. LOADING STATES - SKELETON SHIMMER
   ========================================================================== */

/* Add shimmer effect to loading elements */
@keyframes loadingPulse {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

.is-loading,
[data-loading='true'] {
  background-color: var(--color-surface-alt, #f3f4f6);
  animation: loadingPulse 1.5s ease-in-out 3;
}

[data-theme='dark'] .is-loading,
[data-theme='dark'] [data-loading='true'] {
  background-color: var(--color-surface-alt, #1e293b);
}

/* ==========================================================================
   9. ACCESSIBILITY IMPROVEMENTS
   ========================================================================== */

/* High contrast focus states */
:focus-visible {
  outline: 3px solid var(--color-primary, #0066cc);
  outline-offset: 2px;
}

/* Ensure sufficient color contrast */
.entry-card__meta,
.related-card__meta {
  color: var(--color-text-secondary, #6b7280);
  font-size: var(--font-size-sm, 0.875rem);
}

/* Screen reader only class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   10. PRINT STYLES ENHANCEMENT
   ========================================================================== */

@media print {
  .hero-carousel,
  .preloader,
  .chatbot-widget,
  .newsletter-cta {
    display: none !important;
  }

  .entry-card,
  .related-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* ===========================================================================
   11. NAVBAR - ULTRA SMALL VIEWPORT GUARDRAILS
   Problem:
   - On extremely narrow screens (~280px), the header action cluster can exceed
     the viewport width (notably the `.theme-controls` group), pushing the
     hamburger off-screen.
   - This can happen even when body horizontal scrollbars are hidden because the
     header is fixed-position.

   Fix:
   - Force the actions cluster to be shrinkable/wrappable.
   - Collapse the theme controls to a single icon button.
   - Hide the header-level newsletter CTA (it remains available in the mobile
     nav dropdown).
   =========================================================================== */

@media (max-width: 480px) {
  /* Let the action cluster shrink + wrap so nothing is pushed off-canvas */
  .site-header__actions {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    white-space: normal !important;
    justify-content: flex-end !important;
  }

  /* Collapse theme controls to ONE button (theme-panel is secondary) */
  .theme-controls {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .theme-controls .theme-panel-toggle {
    display: none !important;
  }

  .theme-controls .theme-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 12px !important;
  }

  .theme-controls .theme-toggle__label {
    display: none !important;
  }

  /* Ensure the two critical buttons always remain tappable */
  .site-header__actions .header-search-toggle,
  .site-header__actions .nav-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

@media (max-width: 360px) {
  /* Slightly tighter spacing at ultra-small widths */
  .site-header__actions {
    gap: 6px !important;
  }

  /* Newsletter stays available inside the dropdown; hide it in the cramped header */
  .site-header__actions .newsletter-cta {
    display: none !important;
  }
}

@media (max-width: 319px) {
  /* Even tighter spacing on the tiniest screens */
  .site-header__actions {
    gap: 4px !important;
  }
}

/* ===========================================================================
   12. PLATFORM PAGE ( /platform/ ) — EDITORIAL POLISH
   Goal:
   - Reduce the "templatey / childish" feel by tightening hierarchy, taming
     background effects, and making the grids feel more editorial.
   - Scoped to the Platform template only to avoid unintended global changes.
   =========================================================================== */

/* Make the Platform hero feel calmer and less "poster-like" */
.page-template-page-platform-php .archive-hero {
  padding: var(--space-14) 0 var(--space-9);
}

.page-template-page-platform-php .archive-hero__title {
  font-size: clamp(2.25rem, 4vw, 3.25rem);
}

.page-template-page-platform-php .archive-hero__description {
  max-width: 720px;
}

/* Featured carousel: keep it premium but not oversized */
.page-template-page-platform-php .hero-carousel.hero-carousel--platform {
  margin: var(--space-10) auto var(--space-12);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-xl);
}

.page-template-page-platform-php .hero-carousel--platform .hero-carousel__content {
  padding: var(--space-10) var(--space-8) var(--space-7);
  background: rgba(var(--color-black-rgb, 0, 0, 0), 0.64);
}

.page-template-page-platform-php .hero-carousel--platform .hero-carousel__title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: -0.02em;
}

/* Tone down the full-bleed / gradienty background effects on Platform */
.page-template-page-platform-php .trending-palette {
  background: var(--color-bg);
  padding: var(--space-16) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.page-template-page-platform-php .trending-palette::before {
  content: none;
}

/* Make the label feel like a professional chip, not a loud badge */
.page-template-page-platform-php .trending-palette__label {
  background: rgba(var(--color-primary-rgb, 0, 102, 204), 0.12);
  color: var(--color-primary) !important;
  -webkit-text-fill-color: currentColor !important;
}

.page-template-page-platform-php .trending-palette__title,
.page-template-page-platform-php .archive-topics__header h2,
.page-template-page-platform-php .section-header__title {
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  letter-spacing: -0.02em;
}

/* Editorial max-widths (avoid ultra-wide grids that feel "noisy") */
.page-template-page-platform-php .trending-palette > .container,
.page-template-page-platform-php .posts-section > .container {
  max-width: 1200px;
}

/* Platform card typography: slightly smaller + calmer */
.page-template-page-platform-php .post-card__title {
  font-size: var(--font-size-lg);
  line-height: 1.35;
}

.page-template-page-platform-php .post-card__excerpt {
  font-size: var(--font-size-base);
  line-height: 1.65;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 1280px) {
  .page-template-page-platform-php .posts-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}