/*
Theme Name: CommunityHub
Theme URI: https://github.com/communityhub/theme
Author: CommunityHub
Author URI: https://communityhub.example.com
Description: A feature-rich community theme with Forum, Blog, Card Collection & Lottery system. Fully integrated with WordPress user system, responsive on all devices.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: communityhub
Tags: blog, community, forum, two-columns, three-columns, custom-menu, custom-logo, featured-images, sticky-post, threaded-comments, translation-ready, rtl-language-support, full-width-template, wide-blocks

Screenshot: screenshot.png
*/

/* =============================================================================
   CSS Custom Properties — Design System
   ============================================================================= */
:root {
  /* Colors */
  --color-primary:        #0066CC;
  --color-primary-light:  #EEF4FF;
  --color-primary-dark:   #003D7A;
  --color-primary-hover:  #0052A3;
  --color-secondary:      #0088CC;
  --color-accent:         #F59E0B;

  --color-bg:             #F4F5F7;
  --color-card:           #FFFFFF;
  --color-border:         #E8EAED;
  --color-border-light:   #F0F2F5;

  --color-text-primary:   #1A1A1A;
  --color-text-secondary: #555555;
  --color-text-muted:     #999999;
  --color-link:           #0066CC;
  --color-link-hover:     #003D7A;

  --color-success:        #10B981;
  --color-warning:        #F59E0B;
  --color-danger:         #EF4444;
  --color-info:           #3B82F6;

  --button-shine:         rgba(255, 255, 255, 0.34);

  /* Rarity colors */
  --color-rarity-common:  #9CA3AF;
  --color-rarity-rare:    #3B82F6;
  --color-rarity-epic:    #8B5CF6;
  --color-rarity-legend:  #F59E0B;

  /* Typography */
  --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-heading:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs:         11px;
  --font-size-sm:         12px;
  --font-size-base:       14px;
  --font-size-md:         15px;
  --font-size-lg:         16px;
  --font-size-xl:         18px;
  --font-size-2xl:        20px;
  --font-size-3xl:        24px;
  --font-size-4xl:        28px;
  --line-height-base:     1.6;
  --line-height-tight:    1.3;

  /* Spacing */
  --spacing-xs:   4px;
  --spacing-sm:   8px;
  --spacing-md:   12px;
  --spacing-lg:   16px;
  --spacing-xl:   24px;
  --spacing-2xl:  32px;
  --spacing-3xl:  48px;

  /* Border Radius */
  --radius-xs:    2px;
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-pill:  999px;

  /* Shadows */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg:    0 10px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 3px rgba(0, 102, 204, 0.25);

  /* Layout */
  --container-width:    1280px;
  --nav-height:         52px;
  --sidebar-left-width: 160px;
  --sidebar-right-width:260px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* Z-index layers */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-modal:     300;
  --z-toast:     400;
  --z-float:     500;
}

/* =============================================================================
   Reset & Base
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-link-hover); }
a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

img, svg { max-width: 100%; height: auto; display: block; }

ul, ol { list-style: none; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
  font-weight: 700;
}

/* =============================================================================
   Layout Utilities
   ============================================================================= */
.ch-container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--spacing-lg);
}

.ch-site-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.ch-main-content {
  flex: 1;
}

/* Three-column layout */
.ch-layout-3col {
  display: grid;
  grid-template-columns: var(--sidebar-left-width) 1fr var(--sidebar-right-width);
  gap: var(--spacing-lg);
  align-items: start;
}

.ch-layout-2col-right {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-right-width);
  gap: var(--spacing-lg);
  align-items: start;
}

/* =============================================================================
   Card Component
   ============================================================================= */
.ch-card {
  background: var(--color-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.ch-card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.ch-card-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text-primary);
}

.ch-card-body { padding: var(--spacing-lg); }

/* =============================================================================
   Buttons
   ============================================================================= */
.ch-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  stroke: currentColor;
  vertical-align: -0.14em;
}

.ch-icon-sm { width: 14px; height: 14px; }
.ch-icon-md { width: 16px; height: 16px; }
.ch-icon-lg { width: 20px; height: 20px; }

.ch-empty-icon .ch-icon {
  width: 1em;
  height: 1em;
}

.ch-page-headline .ch-icon,
.ch-section-title .ch-icon,
.ch-auth-footer .ch-icon,
.ch-article-readmore .ch-icon,
.ch-text-xs .ch-icon {
  vertical-align: -0.18em;
}

.ch-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-lg);
  height: 36px;
  font-size: var(--font-size-sm);
  font-weight: 700;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
  isolation: isolate;
}

.ch-btn::before {
  content: '';
  position: absolute;
  inset: 1px auto 1px 1px;
  width: 46%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--button-shine), transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-40%);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: -1;
}

.ch-btn:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.ch-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.ch-btn .ch-icon {
  width: 15px;
  height: 15px;
}

.ch-btn-sm .ch-icon {
  width: 14px;
  height: 14px;
}

.ch-btn-lg .ch-icon {
  width: 18px;
  height: 18px;
}

.ch-badge .ch-icon {
  width: 13px;
  height: 13px;
}

.ch-btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  border-color: rgba(0, 102, 204, 0.68);
  color: #fff;
  box-shadow: 0 8px 18px rgba(0, 102, 204, 0.18);
}
.ch-btn-primary:hover {
  background: linear-gradient(135deg, var(--color-primary-hover), var(--color-primary));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0, 102, 204, 0.24);
}

.ch-btn-outline {
  background: color-mix(in srgb, var(--color-primary) 6%, #fff);
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
.ch-btn-outline:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 102, 204, 0.10);
}

.ch-btn-ghost {
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}
.ch-btn-ghost:hover {
  background: #fff;
  color: var(--color-text-primary);
  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.ch-btn-danger {
  background: linear-gradient(135deg, var(--color-danger), #dc2626);
  border-color: rgba(239, 68, 68, 0.58);
  color: #fff;
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.16);
}
.ch-btn-danger:hover {
  background: #DC2626;
  color: #fff;
}

.ch-btn:disabled,
.ch-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
  box-shadow: none;
}

.ch-btn-sm {
  height: 28px;
  padding: 0 var(--spacing-md);
  font-size: var(--font-size-xs);
}

.ch-btn-lg {
  height: 44px;
  padding: 0 var(--spacing-xl);
  font-size: var(--font-size-base);
  border-radius: var(--radius-md);
}

/* =============================================================================
   Badge / Tag
   ============================================================================= */
.ch-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border-radius: var(--radius-pill);
  line-height: 1.5;
}

.ch-badge-primary  { background: var(--color-primary-light); color: var(--color-primary); }
.ch-badge-success  { background: #ECFDF5; color: var(--color-success); }
.ch-badge-warning  { background: #FFFBEB; color: var(--color-warning); }
.ch-badge-danger   { background: #FEF2F2; color: var(--color-danger); }
.ch-badge-muted    { background: var(--color-border); color: var(--color-text-secondary); }

/* Rarity badges */
.ch-rarity-common  { background: #F3F4F6; color: var(--color-rarity-common); }
.ch-rarity-rare    { background: #EFF6FF; color: var(--color-rarity-rare); }
.ch-rarity-epic    { background: #F5F3FF; color: var(--color-rarity-epic); }
.ch-rarity-legend  { background: #FFFBEB; color: var(--color-rarity-legend); }

/* =============================================================================
   Avatar
   ============================================================================= */
.ch-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 700;
  flex-shrink: 0;
}
.ch-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ch-avatar-xs { width: 22px; height: 22px; font-size: 10px; }
.ch-avatar-sm { width: 28px; height: 28px; font-size: 11px; }
.ch-avatar-md { width: 36px; height: 36px; font-size: 13px; }
.ch-avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.ch-avatar-xl { width: 72px; height: 72px; font-size: 24px; }

/* =============================================================================
   Form elements
   ============================================================================= */
.ch-input {
  width: 100%;
  padding: 8px 12px;
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.ch-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}
.ch-input::placeholder { color: var(--color-text-muted); }

/* =============================================================================
   Announcement banner
   ============================================================================= */
.ch-announcement {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: 9px var(--spacing-lg);
  min-height: 36px;
  background: #FFF8E1;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.35;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.ch-announcement .ch-icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

.ch-announcement span {
  min-width: 0;
}

/* =============================================================================
   Tabs
   ============================================================================= */
.ch-tabs {
  display: flex;
  align-items: center;
  background: var(--color-card);
  border-radius: var(--radius-md);
  height: 42px;
  padding: 0 4px;
  gap: 2px;
  border: 1px solid var(--color-border);
}

.ch-tab {
  display: flex;
  align-items: center;
  height: calc(100% - 8px);
  padding: 0 var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  background: transparent;
  white-space: nowrap;
}
.ch-tab:hover { background: var(--color-bg); color: var(--color-text-primary); }
.ch-tab.is-active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 600;
}

/* =============================================================================
   Stats row
   ============================================================================= */
.ch-stats-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.ch-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.ch-stat .ch-stat-icon { font-size: 12px; }
.ch-stat .ch-stat-value { font-weight: 600; color: var(--color-text-secondary); }

/* =============================================================================
   Divider
   ============================================================================= */
.ch-divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin: 0;
}

/* =============================================================================
   Scrollbar
   ============================================================================= */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* =============================================================================
   Utility classes
   ============================================================================= */
.ch-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;
}

.ch-text-muted    { color: var(--color-text-muted); }
.ch-text-secondary{ color: var(--color-text-secondary); }
.ch-text-primary  { color: var(--color-primary); }
.ch-text-sm       { font-size: var(--font-size-sm); }
.ch-text-xs       { font-size: var(--font-size-xs); }
.ch-fw-600        { font-weight: 600; }
.ch-fw-700        { font-weight: 700; }
.ch-truncate      { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ch-flex          { display: flex; }
.ch-flex-col      { flex-direction: column; }
.ch-items-center  { align-items: center; }
.ch-justify-between{ justify-content: space-between; }
.ch-gap-sm        { gap: var(--spacing-sm); }
.ch-gap-md        { gap: var(--spacing-md); }
.ch-gap-lg        { gap: var(--spacing-lg); }

/* =============================================================================
   Promo bar
   ============================================================================= */
.ch-promo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: 8px var(--spacing-xl);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 500;
  position: relative;
}
.ch-promo-bar a { color: #fff; font-weight: 700; text-decoration: underline; }
.ch-promo-bar a:hover { opacity: 0.85; color: #fff; }
.ch-promo-close {
  position: absolute;
  right: var(--spacing-lg);
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.ch-promo-close:hover { color: #fff; }

/* =============================================================================
   Floating Social
   ============================================================================= */
.ch-float-social {
  position: fixed;
  bottom: 80px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  z-index: var(--z-float);
}

.ch-float-social-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 18px;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
  cursor: pointer;
  position: relative;
}

.ch-float-social-item .ch-icon {
  width: 19px;
  height: 19px;
}
.ch-float-social-item:hover {
  transform: translateX(-4px);
  box-shadow: var(--shadow-lg);
}
.ch-float-social-item:hover .ch-float-tooltip {
  opacity: 1;
  transform: translateX(0);
}

.ch-float-tooltip {
  position: absolute;
  right: calc(100% + 8px);
  background: #333;
  color: #fff;
  font-size: var(--font-size-xs);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: all var(--transition-fast);
  pointer-events: none;
}

/* =============================================================================
   Toast notifications
   ============================================================================= */
.ch-toast-container {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: min(360px, calc(100vw - 32px));
}

.ch-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border-left: 3px solid var(--color-primary);
  animation: ch-slide-in 0.3s ease;
}
.ch-toast-msg {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: normal;
}
.ch-toast-close {
  flex: 0 0 auto;
  line-height: 1;
}
.ch-toast-success { border-left-color: var(--color-success); }
.ch-toast-warning { border-left-color: var(--color-warning); }
.ch-toast-danger  { border-left-color: var(--color-danger); }

@keyframes ch-slide-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* =============================================================================
   Modal
   ============================================================================= */
.ch-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  transition: opacity var(--transition-base);
}
.ch-modal-overlay.is-open {
  display: flex;
}

.ch-modal {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform var(--transition-base);
}
.ch-modal-overlay.is-open .ch-modal { transform: scale(1); }

.ch-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
}

.ch-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.ch-modal-close:hover { color: var(--color-text-primary); }

.ch-modal-body { padding: var(--spacing-xl); }

/* =============================================================================
   Pagination
   ============================================================================= */
.ch-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-lg) 0;
}

.ch-page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}
.ch-page-link:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.ch-page-link.is-current {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
}

/* =============================================================================
   Loading skeleton
   ============================================================================= */
.ch-skeleton {
  background: linear-gradient(90deg, var(--color-border) 25%, var(--color-border-light) 50%, var(--color-border) 75%);
  background-size: 200% 100%;
  animation: ch-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes ch-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =============================================================================
   404 & Empty states
   ============================================================================= */
.ch-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3xl) var(--spacing-xl);
  text-align: center;
}
.ch-empty-icon { font-size: 48px; margin-bottom: var(--spacing-lg); }
.ch-empty-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}
.ch-empty-desc { color: var(--color-text-secondary); margin-bottom: var(--spacing-xl); }

/* =============================================================================
   Responsive
   ============================================================================= */
@media (max-width: 1100px) {
  .ch-layout-3col {
    grid-template-columns: var(--sidebar-left-width) 1fr;
  }
  .ch-layout-3col .ch-sidebar-right {
    display: none;
  }
}

@media (max-width: 768px) {
  .ch-layout-3col,
  .ch-layout-2col-right {
    grid-template-columns: 1fr;
  }
  .ch-layout-3col .ch-sidebar-left,
  .ch-layout-3col .ch-sidebar-right,
  .ch-layout-2col-right .ch-sidebar-right {
    display: none;
  }
  .ch-container { padding-inline: var(--spacing-md); }
}