/* 
 * File Name: main.css
 * File Path: /assets/css/main.css
 * Description: Beartai-Inspired White & Green Theme styling for SeniorHub Thailand (High-Density, WCAG 2.1 AAA Accessibility & Rich Cards)
 */

@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&family=Prompt:wght@400;500;600;700;800&display=swap');

:root {
  --font-base-size: 18px;
  --color-primary: #0F624C;
  --color-primary-light: #16A34A;
  --color-primary-bg: #F0FDF4;
  --color-badge-gold: #D97706;
  --color-bg-white: #FFFFFF;
  --color-bg-[#0F624C]: #F8FAFC;
  --color-text-navy: #0F172A;
}

html, body {
  font-family: 'Sarabun', 'Prompt', sans-serif;
  font-size: var(--font-base-size);
  color: var(--color-text-navy);
  background-color: #FFFFFF;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden !important; /* Fixed 100vh Shell */
  -webkit-tap-highlight-color: transparent;
}

/* Font Size Resizer Utility Classes */
body.font-size-sm {
  --font-base-size: 16px;
}
body.font-size-md {
  --font-base-size: 19px;
}
body.font-size-lg {
  --font-base-size: 22px;
}

/* Custom Scrollbar for Inner Main Container */
.custom-scrollbar::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #0F624C;
  border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #0B4A39;
}

/* Single-Line Data Density Requirement */
.single-line-row {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Touch Target Minimum 48px */
.btn-touch-target {
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Beartai Card Hover Effects */
.beartai-card {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.beartai-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -6px rgba(15, 98, 76, 0.15);
}

/* Beartai News Ticker Animation */
@keyframes ticker {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
.animate-ticker {
  display: inline-block;
  white-space: nowrap;
  animation: ticker 35s linear infinite;
}
.animate-ticker:hover {
  animation-play-state: paused;
}