:root {
    --bg-color: #FDFDFD;
    --surface-color: #FFFFFF;
    --surface-muted: #F1F3F5;
    --primary-color: #1A1A1A;
    --secondary-color: #6366F1;
    --accent-color: #E2E8F0;
    --text-primary: #111827;
    --text-secondary: #4B5563;
    --text-muted: #9CA3AF;
    --border-color: #E5E7EB;
    --font-headlines: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-headlines);
    font-weight: 700;
}

.text-muted {
    color: #9CA3AF !important;
}

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

a {
    transition: all 0.3s ease-in-out;
}

button {
    transition: all 0.3s ease-in-out;
}

input:focus {
    outline: none;
    border-color: var(--secondary-color);
}

/* ===== header ===== */
.renv-header .js-mobile-menu.is-active {
    transform: translateX(0);
}

.renv-header .js-menu-toggle.is-active .js-bar-top {
    transform: translateY(8px) rotate(45deg);
}

.renv-header .js-menu-toggle.is-active .js-bar-middle {
    opacity: 0;
}

.renv-header .js-menu-toggle.is-active .js-bar-bottom {
    transform: translateY(-8px) rotate(-45deg);
}

.renv-header a {
    font-family: 'Inter', sans-serif;
}

.renv-header .font-serif {
    font-family: 'Playfair Display', serif;
}

/* ===== hero ===== */
.hero-main-section {
    position: relative;
    width: 100%;
}

.hero-main-section .hero-video-bg {
    filter: brightness(0.6);
}

.hero-main-section .newsletter-container {
    transition: transform 0.3s ease;
}

.hero-main-section .newsletter-container:hover {
    transform: translateY(-5px);
}

.hero-main-section input::placeholder {
    color: #9CA3AF;
    opacity: 1;
}

.hero-main-section input:focus::placeholder {
    color: #D1D5DB;
}

/* ===== news-grid ===== */
.news-grid-section .news-grid-container {
    max-width: 1280px;
}

.news-grid-section h2 {
    color: #111827;
    font-family: 'Playfair Display', serif;
}

.news-grid-section h3 {
    font-family: 'Playfair Display', serif;
    line-height: 1.3;
}

.news-grid-section a {
    transition: color 0.3s ease;
}

.news-grid-section .group-hover\:scale-110 {
    transform: scale(1.1);
}

.news-grid-section .group-hover\:scale-105 {
    transform: scale(1.05);
}

.news-grid-section .news-grid-item-shadow {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media (max-width: 767px) {
    .news-grid-section .news-grid-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .news-grid-section h2 {
        font-size: 18px;
    }

    .news-grid-section h3 {
        font-size: 14px;
    }
}

/* ===== categories-overview ===== */
.categories-overview-block .js-category-card {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.categories-overview-block .js-category-card:hover {
    box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.4);
    transform: translateY(-5px);
}

.categories-overview-block .js-category-card .bg-cover {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 767px) {
    .categories-overview-block p {
        hyphens: auto;
    }
}

/* ===== about-portal ===== */
.about-portal-block .about-portal-img-frame {
    clip-path: inset(0 0 0 0 round 4px);
}

.about-portal-block .about-portal-text-column h2 {
    margin-bottom: 1.5rem;
}

.about-portal-block .about-portal-body p {
    line-height: 1.8;
}

.about-portal-block .js-about-img {
    filter: grayscale(20%);
}

.about-portal-block .js-about-img:hover {
    filter: grayscale(0%);
}

/* ===== footer ===== */
.footer-block {
    overflow-x: hidden;
}

.footer-block__heading {
    line-height: 1.2;
}

.footer-block__desc,
.footer-block__link,
.footer-block__tagline {
    line-height: 1.5;
}

.footer-block__link {
    display: inline-block;
    position: relative;
}

.footer-block__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #6366F1;
    transition: width 0.3s ease;
}

.footer-block__link:hover::after {
    width: 100%;
}

@media (max-width: 767px) {
    .footer-block__heading {
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .footer-block__list {
        margin-bottom: 1rem;
    }
}

/* ===== PAGE: privacy ===== */
.policy-content { background-color: #FDFDFD; font-family: 'Inter', sans-serif; }
.policy-content .privacy-section { color: #4B5563; }
.policy-content h1, .policy-content h2 { font-family: 'Playfair Display', serif; color: #111827; line-height: 1.3; }
.policy-content p { margin-bottom: 1.5rem; hyphens: auto; }
.policy-content ul li { position: relative; }
.policy-content a { color: #6366F1; text-decoration: none; transition: color 0.3s ease; }
.policy-content a:hover { color: #4338CA; text-decoration: underline; }
.policy-content .privacy-block { padding: 8px 0; }
@media (max-width: 767px) {
  .policy-content h1 { font-size: 18px; }
  .policy-content h2 { font-size: 16px; }
  .policy-content .privacy-body { text-align: justify; }
}

/* ===== PAGE: terms ===== */
.policy-content {
  padding: 40px 20px;
  background-color: #FDFDFD;
  color: #111827;
  line-height: 1.6;
  font-family: 'Inter', sans-serif;
}

.policy-content__wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.policy-content__intro {
  margin-bottom: 48px;
  border-bottom: 1px solid #E5E7EB;
  padding-bottom: 24px;
}

.policy-content__section {
  margin-bottom: 40px;
}

.policy-content__heading {
  font-family: 'Playfair Display', serif;
  color: #1A1A1A;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (min-width: 768px) {
  .policy-content {
    padding: 80px 40px;
  }
  .policy-content__heading {
    font-size: 26px;
  }
}

.policy-content__text {
  color: #4B5563;
  font-size: 16px;
  margin-bottom: 16px;
}

.policy-content__list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 16px;
}

.policy-content__list-item {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
  color: #4B5563;
  font-size: 15px;
}

.policy-content__list-item::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #6366F1;
  font-weight: bold;
}

.policy-content__footer {
  margin-top: 60px;
  padding-top: 32px;
  border-top: 2px solid #F1F3F5;
}

.policy-content__date {
  font-size: 13px;
  color: #9CA3AF;
  margin-top: 12px;
  font-style: italic;
}

.policy-content__heading i {
  color: #6366F1;
  font-size: 24px;
}

/* ===== PAGE: disclaimer ===== */
.policy-content { max-width: 900px; margin: 0 auto; padding: 40px 20px; font-family: 'Inter', sans-serif; } .policy-content h2, .policy-content h3 { font-family: 'Playfair Display', serif; line-height: 1.2; color: #111827; } .policy-content p { line-height: 1.8; color: #374151; margin-bottom: 1.5rem; text-align: justify; hyphens: auto; } .policy-content ul { list-style-type: none; margin-bottom: 2rem; } .policy-content ul li { position: relative; padding-left: 1.5rem; color: #374151; margin-bottom: 0.75rem; } .policy-content ul li::before { content: '→'; position: absolute; left: 0; color: #6366F1; font-weight: bold; } .policy-content section { margin-bottom: 3rem; } @media (max-width: 768px) { .policy-content { padding: 24px 16px; } .policy-content p { text-align: left; } }

/* ===== PAGE: cookies ===== */
.policy-container {
  padding: 40px 20px;
  max-width: 900px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
  color: #111827;
}

.policy-section {
  animation: fadeIn 0.6s ease-out forwards;
}

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

.policy-section h2 {
  color: #111827;
  line-height: 1.2;
}

.policy-section p {
  margin-bottom: 1rem;
}

.policy-section ul li {
  line-height: 1.6;
}

.policy-content a {
  color: #6366F1;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.policy-content a:hover {
  color: #1A1A1A;
}

@media (max-width: 768px) {
  .policy-container {
    padding: 24px 16px;
  }
}

/* ===== PAGE: world-news ===== */
.news-feed-section .js-filter-btn.active { background-color: #6366F1; color: #FFFFFF; border-color: #6366F1; }
.news-feed-section .js-news-card { transition: opacity 0.4s ease, transform 0.4s ease; }
.news-feed-section .js-news-card.hidden { display: none; opacity: 0; transform: translateY(20px); }
.news-feed-section .js-news-card img { filter: grayscale(20%); }
.news-feed-section .js-news-card:hover img { filter: grayscale(0%); }
.news-feed-section h2 a { text-decoration: none; }
.news-feed-section .container { max-width: 1280px; }

/* ===== PAGE: tech-innovations ===== */
.news-list-section .news-card { transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; }.news-list-section .news-card img { filter: grayscale(15%); transition: all 0.5s ease; }.news-list-section .news-card:hover img { filter: grayscale(0%); }.news-list-section .news-list-title { position: relative; padding-bottom: 12px; }.news-list-section .news-list-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 3px; background-color: #6366F1; }

/* ===== PAGE: life-culture ===== */
.life-culture-content .container { max-width: 1200px; }
.life-culture-content h2, .life-culture-content h3 { font-family: 'Playfair Display', serif; }
.life-culture-content p { font-family: 'Inter', sans-serif; }
.life-culture-content .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ===== PAGE: sports-travel ===== */
.st-category-section .st-card { height: 100%; display: flex; flex-direction: column; }.st-category-section .st-header h1 { font-family: 'Playfair Display', serif; }.st-category-section .st-card h2 { font-family: 'Playfair Display', serif; }.st-category-section .st-card p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* ===== PAGE: contact ===== */
.contact-section .container { position: relative; } .contact-section label { color: #111827; } .contact-section input::placeholder, .contact-section textarea::placeholder { color: #9CA3AF; opacity: 1; } .contact-section input:focus, .contact-section textarea:focus { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1); } .contact-section .shadow-custom { shadow: 0 10px 40px rgba(0,0,0,0.04); }

.comment-avatar {
    width: 48px;
    height: 48px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #F1F3F5;
}

.main-comment-wrapper {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-comment-wrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.reply-avatar {
    width: 36px;
    height: 36px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #E5E7EB;
}

.reply-comment-wrapper {
    background-color: #F1F3F5;
    transition: background-color 0.3s ease;
}

.reply-comment-wrapper:hover {
    background-color: #E2E8F0;
}


/* ===== PAGE TEMPLATE: world-news-posts ===== */
.article-detail-page {
    overflow-x: hidden;
}

.article-content-body {
    color: #4B5563;
    line-height: 1.8;
}

.article-content-body h1,
.article-content-body h2,
.article-content-body h3 {
    color: #111827;
    font-family: 'Playfair Display', serif;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.article-content-body p {
    margin-bottom: 1.5rem;
}

.article-content-body ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.article-content-body li {
    margin-bottom: 0.5rem;
}

.renv-header .js-mobile-menu.is-active {
    transform: translateX(0);
}

.renv-header .js-menu-toggle.is-active .js-bar-top {
    transform: translateY(8px) rotate(45deg);
}

.renv-header .js-menu-toggle.is-active .js-bar-middle {
    opacity: 0;
}

.renv-header .js-menu-toggle.is-active .js-bar-bottom {
    transform: translateY(-8px) rotate(-45deg);
}

.footer-block__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #6366F1;
    transition: width 0.3s ease;
}

.footer-block__link:hover::after {
    width: 100%;
}

.js-auth-notice.is-visible {
    display: block !important;
}

.comment-avatar,
.reply-avatar {
    flex-shrink: 0;
}

/* ===== PAGE TEMPLATE: tech-posts ===== */
.renv-header .js-mobile-menu.is-active {
    transform: translateX(0);
}

.renv-header .js-menu-toggle.is-active .js-bar-top {
    transform: translateY(8px) rotate(45deg);
}

.renv-header .js-menu-toggle.is-active .js-bar-middle {
    opacity: 0;
}

.renv-header .js-menu-toggle.is-active .js-bar-bottom {
    transform: translateY(-8px) rotate(-45deg);
}

.tech-article-body h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 16px;
    color: #111827;
    margin: 2rem 0 1rem;
}

@media(min-width: 768px) {
    .tech-article-body h2 {
        font-size: 28px;
    }
}

.tech-article-body p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    color: #4B5563;
}

.tech-article-body ul {
    list-style-type: none;
    margin-bottom: 1.5rem;
}

.tech-article-body li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.tech-article-body li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #6366F1;
    font-weight: bold;
}

.footer-block__link {
    display: inline-block;
    position: relative;
}

.footer-block__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #6366F1;
    transition: width 0.3s ease;
}

.footer-block__link:hover::after {
    width: 100%;
}

/* ===== PAGE TEMPLATE: life-posts ===== */
.life-post-template .rich-text-content h1,
.life-post-template .rich-text-content h2,
.life-post-template .rich-text-content h3 {
    font-family: 'Playfair Display', serif;
    color: #111827;
}

.life-post-template .rich-text-content p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.life-post-template .comment-avatar {
    object-fit: cover;
}

.life-post-template .reply-avatar {
    object-fit: cover;
}

.renv-header .js-mobile-menu.is-active {
    transform: translateX(0);
}

.renv-header .js-menu-toggle.is-active .js-bar-top {
    transform: translateY(8px) rotate(45deg);
}

.renv-header .js-menu-toggle.is-active .js-bar-middle {
    opacity: 0;
}

.renv-header .js-menu-toggle.is-active .js-bar-bottom {
    transform: translateY(-8px) rotate(-45deg);
}

.footer-block__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #6366F1;
    transition: width 0.3s ease;
}

.footer-block__link:hover::after {
    width: 100%;
}

/* ===== PAGE TEMPLATE: sports-posts ===== */
.article-content__wrapper p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
}

.article-content__wrapper h2 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    color: #111827;
    font-weight: 700;
    margin: 2rem 0 1rem;
}

.article-content__wrapper h3 {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    color: #111827;
    font-weight: 700;
    margin: 1.5rem 0 0.75rem;
}

.article-content__wrapper ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.article-content__wrapper li {
    margin-bottom: 0.5rem;
}

.article-content__wrapper img {
    border-radius: 0.75rem;
    margin: 2rem 0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.article-content__wrapper strong {
    color: #111827;
    font-weight: 600;
}

.shared-links a i {
    font-size: 20px;
}

.footer-block__link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #6366F1;
    transition: width 0.3s ease;
}

.footer-block__link:hover::after {
    width: 100%;
}

.footer-block__link {
    position: relative;
    display: inline-block;
}

.comment-avatar,
.reply-avatar {
    width: 48px;
    height: 48px;
    object-fit: cover;
}