/*
Theme Name: The Runway News (Editorial)
Theme URI: https://example.com/
Author: GAZADEV
Author URI: https://example.com/
Description: Editorial news/blog theme based on The Runway layout. Dynamic homepage modules powered by posts, categories, tags and featured images.
Version: 1.0.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-runway-news
Tags: news, blog, magazine, editorial, responsive
*/

html, body { height: 100%; }
body { margin: 0; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #fff; }
::-webkit-scrollbar-thumb { background: #000; }

/* Balanced headlines */
.news-headline { text-wrap: balance; }

/* Hover underline animation */
.hover-underline-animation { display: inline-block; position: relative; }
.hover-underline-animation::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after { transform: scaleX(1); transform-origin: bottom left; }

/* Reveal animations */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-up.is-visible { opacity: 1; transform: translateY(0); }

.reveal-image-container { overflow: hidden; }
.reveal-image {
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 1.2s ease-out, transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}
.reveal-image.is-visible { opacity: 1; transform: scale(1); }

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* Ticker */
@keyframes ticker {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.animate-ticker { animation: ticker 30s linear infinite; }

/* Thai font overrides (auto-applied by JS when toggling language) */
body.lang-th .font-serif { 
  font-family: 'Chonburi', serif !important; 
  font-weight: 400; 
}
body.lang-th, 
body.lang-th .font-sans { 
  font-family: 'Krub', sans-serif !important; 
}
body.lang-th p { 
  line-height: 1.7; 
}
body.lang-th h1, 
body.lang-th h2, 
body.lang-th h3 { 
  letter-spacing: 0.02em; 
}

/* Drop cap for article content */
.drop-cap {
  float: left;
  font-size: 6rem;
  line-height: 0.7;
  padding: 0.1em 0.1em 0 0;
  margin-right: 0.2em;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: #C8102E;
}

/* Alternative: CSS first-letter for drop cap */
.prose > p:first-of-type::first-letter,
.prose p.drop-cap-first::first-letter {
  float: left;
  font-size: 6rem;
  line-height: 0.7;
  padding: 0.1em 0.1em 0 0;
  margin-right: 0.2em;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: #C8102E;
}

.article-headline { 
  text-wrap: balance; 
}