/*
Theme Name: Crypto Editorial
Theme URI: https://marchecrypto.site
Author: Marche Crypto Team
Description: Tema editorial custom untuk situs berita crypto, dibangun berbasis spesifikasi "Cryptomart Editorial" v2.4 (light mode, nav ala BeInCrypto, ticker CoinGecko live, hamburger mobile, floating Telegram button). Label menu navigasi dalam Bahasa Prancis karena marchecrypto.site adalah edisi Prancis (konten artikelnya berbahasa Prancis).
Version: 1.3.0
Requires PHP: 7.4
Text Domain: crypto-editorial
*/

/* ==========================================================================
   Reset & base
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #ffffff;
  color: #111827;
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==========================================================================
   Ticker (live prices, top of page)
   ========================================================================== */

.price-ticker {
  background: #0b0f19;
  color: #f3f4f6;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid #1f2937;
  font-size: 13px;
}

.price-ticker__track {
  display: inline-flex;
  gap: 40px;
  padding: 8px 0;
  animation: ticker-scroll 40s linear infinite;
  will-change: transform;
}

.price-ticker__item {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.price-ticker__item .symbol {
  font-weight: 600;
  color: #ffffff;
}

.price-ticker__item .change.up {
  color: #22c55e;
}

.price-ticker__item .change.down {
  color: #ef4444;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .price-ticker__track {
    animation: none;
    overflow-x: auto;
  }
}

/* ==========================================================================
   Header & navigation
   ========================================================================== */

.site-header {
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  gap: 16px;
}

.site-branding {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.site-branding a {
  display: block;
}

/* Desktop nav: single row, horizontal scroll instead of wrap (v2.3 fix) */
.nav-primary {
  flex: 1;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.nav-primary::-webkit-scrollbar {
  display: none;
}

.nav-primary ul {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 28px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.nav-primary li {
  position: relative;
}

.nav-primary > ul > li > a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #111827;
}

.nav-primary > ul > li:hover > a,
.nav-primary > ul > li > a:hover {
  color: #2563eb;
}

.nav-primary li.has-submenu:hover > ul.sub-menu,
.nav-primary li.has-submenu:focus-within > ul.sub-menu {
  display: block;
}

.nav-primary ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(17, 24, 39, 0.08);
  min-width: 220px;
  padding: 8px;
  flex-direction: column;
  gap: 0;
  z-index: 60;
}

.nav-primary ul.sub-menu li a {
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  display: block;
}

.nav-primary ul.sub-menu li a:hover {
  background: #f3f4f6;
}

/* ==========================================================================
   Language switcher ("FR ▾" button + dropdown)
   ========================================================================== */

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.lang-switch {
  position: relative;
}

.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: transparent;
  color: #111827;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.lang-switch-btn:hover {
  background: #f3f4f6;
}

.lang-switch-btn .caret {
  font-size: 10px;
  opacity: 0.7;
}

.lang-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  min-width: 190px;
  padding: 6px;
  box-shadow: 0 12px 24px rgba(17, 24, 39, 0.12);
  z-index: 70;
  flex-direction: column;
}

.lang-switch.is-open .lang-menu {
  display: flex;
}

.lang-menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: #111827;
}

.lang-menu a:hover {
  background: #f3f4f6;
}

.lang-menu a.is-current {
  color: #2563eb;
  font-weight: 600;
}

.lang-menu .lang-native {
  color: #8a92a1;
  font-size: 12px;
}

/* Hamburger (mobile only) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #111827;
}

/* Mobile nav panel — base state hidden */
.nav-mobile {
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
}

/* Fixed in v2.4: is-open must also flip display, not just max-height,
   otherwise the panel stays invisible even though the class toggles. */
.nav-mobile.is-open {
  display: block;
  max-height: 600px;
  overflow-y: auto;
}

.nav-mobile ul {
  list-style: none;
  margin: 0;
  padding: 8px 20px 16px;
}

.nav-mobile li {
  border-bottom: 1px solid #f3f4f6;
}

.nav-mobile > ul > li > a {
  display: block;
  padding: 12px 0;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}

.nav-mobile ul.sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 8px 12px;
}

.nav-mobile ul.sub-menu a {
  padding: 8px 0;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  display: block;
  color: #4b5563;
}

@media (max-width: 860px) {
  .nav-primary {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  /* Learned from a cryptomart.site bug: hiding the language label
     entirely on small screens (display:none) left an unlabeled "▾"
     that confused visitors. Shrink everything instead so "FR"/"EN"
     always stays visible, however narrow the screen gets. */
  .site-branding {
    font-size: 18px;
  }
  .lang-switch-btn {
    height: 30px;
    padding: 0 8px;
    gap: 4px;
    font-size: 12px;
  }
  .nav-mobile {
    display: block;
  }
}

/* ==========================================================================
   Content layout
   ========================================================================== */

.site-main {
  padding: 32px 0 64px;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 24px;
  letter-spacing: -0.01em;
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}

.post-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.post-card__thumb {
  aspect-ratio: 16 / 9;
  background: #f3f4f6;
  overflow: hidden;
}

.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.post-card__category {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2563eb;
}

.post-card__title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.post-card__meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: auto;
}

.post-card__excerpt {
  font-size: 14px;
  color: #4b5563;
}

.single-article {
  max-width: 760px;
  margin: 0 auto;
}

.single-article__title {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 12px;
}

.single-article__meta {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 24px;
}

.single-article__content {
  font-size: 17px;
  line-height: 1.75;
}

/* Justified paragraphs (requested 2026-09-18): even left AND right edges
   instead of the default ragged-right, on every screen size including
   mobile. hyphens:auto softens the extra word-spacing justify can
   introduce on narrow columns by letting long French words break across
   lines when needed, instead of stretching gaps between words. */
.single-article__content p {
  margin: 0 0 20px;
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.single-article__content img {
  border-radius: 8px;
  margin: 24px 0;
}

.pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 40px;
}

.pagination a,
.pagination span {
  padding: 8px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 13px;
}

.pagination .current {
  background: #111827;
  color: #fff;
  border-color: #111827;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 40px 0;
  font-size: 13px;
  color: #6b7280;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

.site-footer a:hover {
  color: #2563eb;
}

/* ==========================================================================
   Telegram floating button (v2.4: moved from footer text link to floating
   round button, bottom-right, always visible while scrolling)
   ========================================================================== */

.telegram-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #26a5e4;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(38, 165, 228, 0.45);
  z-index: 80;
  transition: transform 0.15s ease;
}

.telegram-float:hover {
  transform: scale(1.06);
}

.telegram-float svg {
  width: 24px;
  height: 24px;
  fill: #ffffff;
}

@media (max-width: 480px) {
  .telegram-float {
    right: 14px;
    bottom: 14px;
    width: 46px;
    height: 46px;
  }
}