/*
Theme Name: Footix Blog
Theme URI: https://blog.leroidesfootix.com
Description: Thème officiel du blog Le Roi des Footix
Author: Le Roi des Footix
Version: 1.0
*/

/* ── Tabs ── */
.ftx-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid #374151;
  margin-bottom: 32px;
}
.ftx-tab {
  background: none;
  border: none;
  color: #9ca3af;
  font-family: 'Oswald', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  padding: 10px 20px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s;
}
.ftx-tab:hover { color: #f9fafb; }
.ftx-tab.ftx-tab-active {
  color: #4a9e6a;
  border-bottom-color: #4a9e6a;
}

/* ── Panels ── */
.ftx-panel-hidden { display: none !important; }

/* ── Grid ── */
.ftx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* ── Cards ── */
.ftx-card {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 12px;
  padding: 16px !important;
  transition: border-color 0.15s, transform 0.15s;
}
.ftx-card:hover {
  border-color: #4a9e6a;
  transform: translateY(-2px);
}
.ftx-card .wp-block-post-featured-image img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 8px;
}
.ftx-card .wp-block-post-title a {
  color: #f9fafb !important;
  text-decoration: none;
}
.ftx-card .wp-block-post-title a:hover { color: #4a9e6a !important; }

/* ── Single article ── */
.wp-block-post-content h2 {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: 0.03em;
  color: #f9fafb;
  margin-top: 40px;
}
.wp-block-post-content p { color: #9ca3af; line-height: 1.75; }
.wp-block-separator { border-color: #374151 !important; }

/* ── Pagination ── */
.wp-block-query-pagination {
  display: flex;
  gap: 8px;
  margin-top: 32px;
  justify-content: center;
}
.wp-block-query-pagination a,
.wp-block-query-pagination-numbers a {
  background: #1f2937;
  border: 1px solid #374151;
  color: #9ca3af;
  padding: 6px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: border-color 0.15s, color 0.15s;
}
.wp-block-query-pagination a:hover { border-color: #4a9e6a; color: #4a9e6a; }

/* ── Header ── */
.ftx-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1f2937;
  border-bottom: 1px solid #374151;
  padding: 20px 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  height: 100px;
}
.ftx-header-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.ftx-mascot { width: 96px; height: 96px; }
.ftx-header-sub {
  font-family: 'Oswald', sans-serif;
  font-size: 0.75rem;
  color: #4a9e6a;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 500;
}
.ftx-header-play {
  position: absolute;
  right: 16px;
  font-family: 'Oswald', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  background: #4a9e6a;
  color: #000;
  padding: 9px 20px;
  border-radius: 40px;
  transition: opacity 0.15s, transform 0.15s;
}
.ftx-header-play:hover { opacity: 0.88; transform: scale(1.02); color: #000; }

/* ── Header mobile ── */
@media (max-width: 600px) {
  .ftx-header { justify-content: flex-start; padding: 0 16px; height: 80px; }
  .ftx-header-logo {
    position: static;
    transform: none;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
  .ftx-mascot { width: 55px; height: 55px; }
  .ftx-header-sub {
    font-size: 0.7rem;
    letter-spacing: 2px;
    margin-bottom: 0;
    align-self: center;
  }
  .ftx-header-play { font-size: 0.75rem; padding: 7px 14px; }
}