/*
 * P4F – Passion for Football
 * WordPress Custom CSS (Appearance > Customize > Additional CSS)
 * Dán toàn bộ nội dung file này vào ô "Additional CSS" trong WordPress Customizer
 * Áp dụng cho: GeneratePress theme + tất cả trang/bài viết
 * Cập nhật: 2026-06
 */

/* ===========================
   1. BIẾN MÀU & FONT
   =========================== */
:root {
  --p4f-green:       #1a6b2f;
  --p4f-green-light: #e8f5ec;
  --p4f-green-mid:   #2d9e4f;
  --p4f-grass:       #0f4d21;
  --p4f-accent:      #f5c518;
  --p4f-text:        #111;
  --p4f-muted:       #555;
  --p4f-border:      #e0e0e0;
  --p4f-bg2:         #f8faf8;
  --p4f-radius:      10px;
}

/* Import font (thêm vào nếu chưa có trong theme) */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500&display=swap');

/* ===========================
   2. GLOBAL BODY & TYPE
   =========================== */
body {
  font-family: 'Inter', sans-serif;
  color: var(--p4f-text);
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.nav-primary .menu-item a {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.3px;
}

/* ===========================
   3. HEADER / NAVBAR
   =========================== */
.site-header,
.nav-primary,
.navigation-branding {
  background: var(--p4f-grass) !important;
  border-bottom: 3px solid var(--p4f-accent);
}

.main-navigation .menu-item a,
.nav-primary .menu-item a {
  color: rgba(255,255,255,0.85) !important;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 0.88rem;
  transition: color .2s;
}

.main-navigation .menu-item a:hover,
.nav-primary .menu-item a:hover,
.main-navigation .current-menu-item > a {
  color: var(--p4f-accent) !important;
}

.site-title a,
.site-title a:hover {
  color: #fff !important;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.5px;
}

/* ===========================
   4. TRANG BÀI VIẾT (SINGLE POST)
   =========================== */

/* Container nội dung */
.entry-content {
  max-width: 760px;
  font-family: 'Inter', sans-serif;
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--p4f-text);
}

/* Tiêu đề bài viết */
.entry-title,
.page-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--p4f-grass);
  margin-bottom: 0.5rem;
}

/* Meta (ngày, tác giả) */
.entry-meta,
.post-meta,
.posted-on {
  font-size: 0.78rem;
  color: var(--p4f-muted);
  margin-bottom: 1.5rem;
}

/* Paragraph đầu tiên — lead */
.entry-content > p:first-of-type {
  font-size: 1.07rem;
  color: #222;
  font-weight: 500;
  line-height: 1.7;
}

/* Headings bên trong bài */
.entry-content h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--p4f-green);
  margin-top: 2.2rem;
  margin-bottom: 0.7rem;
  padding-left: 14px;
  border-left: 4px solid var(--p4f-green-mid);
}

.entry-content h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--p4f-text);
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
}

/* Horizontal rule (---) */
.entry-content hr {
  border: none;
  border-top: 1px solid var(--p4f-border);
  margin: 2rem 0;
}

/* Lists */
.entry-content ul,
.entry-content ol {
  padding-left: 1.4rem;
  margin-bottom: 1.2rem;
}

.entry-content li {
  margin-bottom: 0.45rem;
  font-size: 0.93rem;
  color: var(--p4f-text);
}

/* Bold inline */
.entry-content strong {
  font-weight: 700;
  color: var(--p4f-grass);
}

/* ===========================
   5. BLOCKQUOTE / HIGHLIGHT
   =========================== */
.entry-content blockquote,
.entry-content .wp-block-quote {
  background: var(--p4f-green-light);
  border-left: 4px solid var(--p4f-green-mid);
  border-radius: 0 var(--p4f-radius) var(--p4f-radius) 0;
  padding: 16px 20px;
  margin: 1.5rem 0;
  font-style: normal;
  color: var(--p4f-green);
  font-size: 0.95rem;
}

.entry-content blockquote p {
  margin: 0;
  color: var(--p4f-green);
}

/* ===========================
   6. CHECKLIST / TỰ KIỂM TRA
   Áp dụng khi bài dùng list có ✓
   =========================== */
.entry-content ul li:has(✓),
.entry-content p:has(✓) {
  background: var(--p4f-green-light);
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 6px;
  list-style: none;
  font-size: 0.88rem;
  color: var(--p4f-green);
  font-weight: 500;
}

/* ===========================
   7. BADGE / LABEL (Danh mục bài)
   =========================== */
.entry-categories a,
.cat-links a,
.entry-content .badge {
  display: inline-block;
  background: var(--p4f-green-light);
  color: var(--p4f-green);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-right: 4px;
}

.entry-categories a:hover {
  background: var(--p4f-green);
  color: #fff;
}

/* ===========================
   8. SIDEBAR
   =========================== */
.widget-area,
.sidebar-primary {
  font-family: 'Space Grotesk', sans-serif;
}

.widget-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--p4f-green-mid);
  margin-bottom: 0.8rem;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--p4f-green-light);
}

/* Recent posts trong sidebar */
.widget_recent_entries ul li a {
  font-size: 0.88rem;
  color: var(--p4f-text);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.4;
  display: block;
  padding: 6px 0;
  border-bottom: 1px solid var(--p4f-border);
  transition: color .2s;
}

.widget_recent_entries ul li a:hover {
  color: var(--p4f-green);
}

.widget_recent_entries ul {
  list-style: none;
  padding: 0;
}

/* ===========================
   9. POST NAVIGATION (Prev/Next)
   =========================== */
.post-navigation,
.nav-links {
  border-top: 1px solid var(--p4f-border);
  padding-top: 1.5rem;
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.nav-previous a,
.nav-next a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--p4f-green);
  text-decoration: none;
  padding: 10px 16px;
  border: 1.5px solid var(--p4f-green-mid);
  border-radius: var(--p4f-radius);
  display: inline-block;
  transition: background .2s, color .2s;
}

.nav-previous a:hover,
.nav-next a:hover {
  background: var(--p4f-green);
  color: #fff;
  border-color: var(--p4f-green);
}

/* ===========================
   10. COMMENT SECTION
   =========================== */
.comment-respond .comment-reply-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--p4f-grass);
  margin-bottom: 1rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  border: 1.5px solid var(--p4f-border);
  border-radius: var(--p4f-radius);
  padding: 10px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  width: 100%;
  transition: border-color .2s;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--p4f-green-mid);
}

.comment-form input[type="submit"],
.submit {
  background: var(--p4f-green);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 24px;
  border: none;
  border-radius: var(--p4f-radius);
  cursor: pointer;
  transition: opacity .2s, transform .15s;
}

.comment-form input[type="submit"]:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ===========================
   11. FOOTER
   =========================== */
.site-footer {
  background: var(--p4f-grass) !important;
  color: rgba(255,255,255,0.7) !important;
  padding: 40px 5% 24px;
}

.site-footer a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 0.82rem;
  transition: color .2s;
}

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

.site-footer .copyright,
.site-info {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 16px;
  margin-top: 24px;
}

/* ===========================
   12. TRANG DANH MỤC (Archive / Category)
   =========================== */
.archive-title,
.page-header .page-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--p4f-grass);
  margin-bottom: 0.3rem;
}

/* Post card trên trang danh mục */
.post-summary,
article.type-post {
  border: 1px solid var(--p4f-border);
  border-radius: var(--p4f-radius);
  padding: 24px;
  margin-bottom: 20px;
  border-top: 3px solid var(--p4f-green-mid);
  transition: box-shadow .2s;
}

article.type-post:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}

article.type-post .entry-title {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}

article.type-post .entry-title a {
  color: var(--p4f-grass);
  text-decoration: none;
}

article.type-post .entry-title a:hover {
  color: var(--p4f-green-mid);
}

article.type-post .entry-summary p,
article.type-post .entry-content p {
  font-size: 0.9rem;
  color: var(--p4f-muted);
  margin-bottom: 0.8rem;
}

/* Read more link */
.more-link,
.read-more a {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--p4f-green);
  text-decoration: none;
  border: 1.5px solid var(--p4f-green-mid);
  padding: 5px 14px;
  border-radius: 6px;
  transition: background .2s, color .2s;
}

.more-link:hover,
.read-more a:hover {
  background: var(--p4f-green);
  color: #fff;
}

/* ===========================
   13. RESPONSIVE MOBILE
   =========================== */
@media (max-width: 680px) {
  .entry-title, .page-title { font-size: 1.5rem; }
  .entry-content h2 { font-size: 1.15rem; }
  .entry-content { font-size: 0.93rem; }
  .post-navigation { flex-direction: column; }
}

.site-title a,
.site-title a:visited,
.site-title a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

.site-header {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.site-header .site-title {
    border: none !important;
}


/* === FIX HEADER === */
.site-title a,
.site-title a:visited,
.site-title a:hover {
    color: #ffffff !important;
}

/* Xóa border vàng */
.site-header,
.site-header-wrap,
header.site-header {
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Nếu border vàng là từ ::after hoặc ::before */
.site-header::after,
.site-header::before {
    display: none !important;
}

/* === FIX HEADER TITLE COLOR === */
.site-header .site-title a,
.site-header .site-title a:link,
.site-header .site-title a:visited,
.site-header .site-title a:hover,
#masthead .site-title a {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* === XÓA BORDER VÀNG === */
#masthead,
.site-header,
.site-header-wrap,
.site-header .inside-site-header {
    border: none !important;
    border-bottom: none !important;
    border-top: none !important;
    outline: none !important;
    box-shadow: none !important;
}

#masthead::after,
#masthead::before,
.site-header::after,
.site-header::before {
    content: none !important;
    display: none !important;
    border: none !important;
}

/* === FIX BORDER VÀNG HEADER - rgb(245, 197, 24) === */
header,
header.site-header,
.site-header {
    border-bottom: none !important;
    border-bottom-color: transparent !important;
    border-bottom-width: 0 !important;
    border-bottom-style: none !important;
}

/* === FIX TITLE COLOR - selector chính xác === */
header a[rel="home"],
header a[rel="home"]:visited,
header a[rel="home"]:hover {
    color: #ffffff !important;
}