/**
 * Content Bundle - WordPress Theme CSS
 * 
 * Complete CSS bundle for WordPress content pages including:
 * - Blog posts and archives
 * - Header and footer
 * - Comments and widgets
 * - Search and 404 pages
 * - WordPress native elements
 * 
 * This bundle loads for content-focused pages (blog, pages, archives).
 */

/* =================================================================
   CONTENT DESIGN TOKENS
   ================================================================= */

@import '../src/tokens/content-tokens.css';

/* =================================================================
   CONTENT COMPONENTS
   ================================================================= */

@import '../src/components/blog-content.css';
@import '../src/components/header-footer.css';
@import '../src/components/wordpress-elements.css';

/* =================================================================
   CONTENT-SPECIFIC UTILITIES
   ================================================================= */

/* Content Layout Utilities */
.content-wide { max-width: var(--moly-content-container-max); }
.content-narrow { max-width: var(--moly-blog-container-max); }
.content-full { max-width: 100%; }

/* Content Typography Utilities */
.text-heading { color: var(--moly-content-heading); }
.text-body { color: var(--moly-content-text); }
.text-meta { color: var(--moly-content-meta); }
.text-link { color: var(--moly-content-link); }

/* Content Spacing Utilities */
.gap-content { gap: var(--moly-content-gap); }
.gap-blog { gap: var(--moly-blog-grid-gap); }
.p-content { padding: var(--moly-content-padding); }
.p-blog { padding: var(--moly-blog-card-padding); }

/* Header/Footer Utilities */
.header-height { min-height: var(--moly-header-height); }
.footer-padding { padding: var(--moly-footer-padding); }

/* Widget Utilities */
.widget-spacing { margin-bottom: var(--moly-space-6); }
.widget-gap { gap: var(--moly-footer-widget-gap); }

/* =================================================================
   CONTENT RESPONSIVE UTILITIES
   ================================================================= */

@media (max-width: 768px) {
  .blog-grid-responsive { grid-template-columns: 1fr; }
  .footer-responsive { grid-template-columns: 1fr; }
  .nav-mobile-hidden { display: none; }
  .mobile-menu-visible { display: block; }
}

@media (min-width: 769px) {
  .nav-desktop-hidden { display: none; }
  .mobile-menu-hidden { display: none; }
}

/* =================================================================
   CONTENT ANIMATION UTILITIES
   ================================================================= */

.transition-content { transition: var(--moly-content-transition); }
.transition-nav { transition: var(--moly-nav-transition); }
.transition-blog { transition: var(--moly-blog-card-transition); }

/* Content Hover Effects */
.hover-lift:hover { transform: translateY(-2px); }
.hover-scale:hover { transform: scale(1.02); }
.hover-glow:hover { box-shadow: var(--moly-content-card-shadow-hover); }

/* =================================================================
   CONTENT PRINT STYLES
   ================================================================= */

@media print {
  /* Hide interactive elements in print */
  .main-navigation,
  .mobile-menu-toggle,
  .header-search,
  .comments-area,
  .comment-respond,
  .widget,
  .footer-social,
  .content-pagination {
    display: none !important;
  }
  
  /* Optimize content for print */
  .blog-card,
  .single-post__content,
  .gallery-item {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid var(--moly-neutral-300);
  }
  
  /* Print-friendly colors */
  .blog-card__title,
  .single-post__title,
  .content-heading {
    color: #000 !important;
  }
  
  .blog-card__excerpt,
  .single-post__content,
  .content-text {
    color: #333 !important;
  }
  
  /* Print links */
  .single-post__content a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* =================================================================
   CONTENT HIGH CONTRAST MODE
   ================================================================= */

@media (prefers-contrast: high) {
  .blog-card,
  .comment,
  .widget {
    border: 2px solid var(--moly-neutral-900);
  }
  
  .nav-menu__link,
  .blog-card__title a,
  .comment-reply-link {
    border: 1px solid var(--moly-neutral-900);
  }
  
  .nav-menu__link:focus,
  .blog-card__title a:focus {
    outline: 3px solid var(--moly-neutral-900);
  }
}

/* =================================================================
   CONTENT REDUCED MOTION
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .nav-menu__link,
  .comment-reply-link,
  .submit,
  .search-submit,
  .footer-social__link {
    transition: none;
    transform: none !important;
  }
  
  .blog-card:hover,
  .gallery-item:hover {
    transform: none;
  }
  
  .mobile-menu {
    transition: none;
  }
  
  .nav-dropdown,
  .nav-mega-menu {
    transition: none;
  }
}

/* =================================================================
   CONTENT DARK MODE (Future Enhancement)
   ================================================================= */

@media (prefers-color-scheme: dark) {
  /* Dark mode will be implemented when design tokens support it */
  .blog-card,
  .comment,
  .widget {
    background-color: var(--moly-neutral-800);
    border-color: var(--moly-neutral-700);
  }
  
  .site-header,
  .mobile-menu {
    background-color: var(--moly-neutral-900);
    border-color: var(--moly-neutral-800);
  }
}