/*
Theme Name: ReBillion Blog Theme
Theme URI: https://rebillion.ai/
Author: Gemini AI
Description: A pixel-perfect replica of the ReBillion blog design.
Version: 1.0
Requires at least: 5.0
Tested up to: 6.4
License: GNU General Public License v2 or later
Tags: custom-layout, responsive, blog
Text Domain: rebillion
*/

:root {
    --color-primary-green: #2D7A4F;
    --color-hover-green: #5F8A7A;
    --color-secondary-orange: #E67E22;
    --color-background-white: #ffffff;
    --color-text-dark: #1a2e29;
    --color-muted-text: #6b7c76;
    --color-muted-background: #f5f7f6;
    --color-border: rgba(95, 138, 122, 0.15);
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem;
    --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --spacing-3xl: 4rem; --spacing-4xl: 8rem;
    --shadow-default: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --transition-speed: 300ms;
}
html { font-size: 16px; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }
body { font-family: var(--font-family-base); color: var(--color-text-dark); line-height: 1.5; background: var(--color-background-white); }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
.h1 { font-size: 3rem; font-weight: 700; } @media (min-width: 1024px) { .h1 { font-size: 3.75rem; } }
.h2 { font-size: 1.875rem; font-weight: 700; } @media (min-width: 1024px) { .h2 { font-size: 2.25rem; } }
.h3 { font-size: 1.5rem; font-weight: 600; }
.body-large { font-size: 1.25rem; line-height: 1.75rem; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--spacing-md); }
@media (min-width: 768px) { .container { padding: 0 var(--spacing-lg); } }
@media (min-width: 1024px) { .container { padding: 0 var(--spacing-xl); } }
.button-primary { background: var(--color-primary-green); color: white; padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 500; display: inline-block; transition: 0.3s; border:none; cursor:pointer;}
.button-primary:hover { background: rgba(45, 122, 79, 0.9); }

/* Header */
.site-header { padding: 1rem 0; }
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.site-logo { font-weight: 700; font-size: 1.5rem; display: flex; align-items: center; gap: 0.5rem; color: #1a2e29; }
.nav-menu { display: none; gap: 2rem; } @media(min-width:1024px){ .nav-menu{ display:flex; } }
.nav-link { font-weight: 500; font-size: 0.95rem; } .nav-link:hover { color: var(--color-primary-green); }

/* Hero */
.hero-section { background: linear-gradient(to bottom right, rgba(45, 122, 79, 0.4), #ffffff, rgba(230, 126, 34, 0.25)); padding: 8rem 0 4rem; text-align: center; }
.hero-subtitle { max-width: 56rem; margin: 0 auto; color: var(--color-muted-text); }

/* Search */
.search-section { background: rgba(245, 247, 246, 0.3); padding: 2rem 0; }
.search-container { max-width: 42rem; margin: 0 auto; padding: 0 1rem; }
.search-input-wrapper { position: relative; }
.search-input-wrapper input { width: 100%; padding: 1.5rem 1rem 1.5rem 3rem; border: 2px solid #e5e7eb; border-radius: 9999px; font-size: 1rem; outline: none; }
.search-input-wrapper input:focus { border-color: var(--color-primary-green); box-shadow: 0 0 0 2px var(--color-primary-green); }
.search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 20px; color: var(--color-muted-text); }

/* Grid */
.blog-grid-section { padding: 4rem 0; }
.blog-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media(min-width:768px){ .blog-grid{ grid-template-columns: 1fr 1fr; } }
@media(min-width:1024px){ .blog-grid{ grid-template-columns: 1fr 1fr 1fr; } }

/* Cards */
.blog-card { background: #fff; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-default); transition: all 0.3s; display: flex; flex-direction: column; }
.blog-card:hover { box-shadow: var(--shadow-hover); }
.card-image-wrapper { position: relative; display: block; overflow: hidden; }
.card-image { width: 100%; height: 12rem; object-fit: cover; transition: transform 0.3s; }
.blog-card:hover .card-image { transform: scale(1.05); }
.category-badge { position: absolute; top: 1rem; left: 1rem; background: var(--color-primary-green); color: white; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.card-content { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.meta-info { display: flex; gap: 1rem; color: var(--color-muted-text); font-size: 12px; margin-bottom: 1rem; align-items: center; }
.post-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: var(--color-text-dark); line-height: 1.4; transition: color 0.3s; }
.post-title:hover { color: var(--color-primary-green); }
.excerpt { color: var(--color-muted-text); font-size: 14px; margin-bottom: 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.read-more-link { margin-top: auto; color: var(--color-primary-green); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; }
.read-more-link svg { margin-left: 0.5rem; width: 16px; transition: transform 0.3s; }
.read-more-link:hover svg { transform: translateX(4px); }

/* Newsletter */
.newsletter-section { background: linear-gradient(to bottom right, rgba(45, 122, 79, 0.05), rgba(230, 126, 34, 0.05)); padding: 4rem 0; border-top: 1px solid var(--color-border); }
.newsletter-content { max-width: 42rem; margin: 0 auto; text-align: center; }
.newsletter-form { display: flex; gap: 12px; max-width: 28rem; margin: 0 auto; flex-direction: column; }
@media(min-width:768px){ .newsletter-form { flex-direction: row; } }
.newsletter-input { flex: 1; padding: 12px; border: 1px solid var(--color-border); border-radius: 6px; }

/* Footer */
.about-section { padding: 3rem 0; border-top: 1px solid var(--color-border); text-align: center; }
.site-footer { padding: 4rem 0 2rem; border-top: 1px solid var(--color-border); font-size: 14px; color: var(--color-muted-text); }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 3rem; }
@media(min-width:768px){ .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-col h4 { color: #1a2e29; font-weight: 600; margin-bottom: 1rem; }
.footer-col li { margin-bottom: 0.75rem; }
.footer-bottom { border-top: 1px solid #eee; padding-top: 2rem; display: flex; justify-content: space-between; }