/* ============================================================
   pelotalibre-theme.css | PageBoss Theme Switcher
   pelotalibre.soccer - brand green from the logo (#66a845).
   The logo green is used for bars, borders and highlights.
   A darker green from the same family is used for buttons and
   links, so white and body text stay readable (contrast 5.3:1).
   Upload in: PageBoss > Theme Switcher, then activate.
   ============================================================ */

/* 1. BRAND COLORS */
:root {
    --brand:        #66a845;   /* logo green: decoration only */
    --brand-dark:   #12301c;   /* footer and dark surfaces */

    --bg-primary:   #f4f8f1;   /* page background, light green tint */
    --bg-secondary: #ffffff;
    --bg-card:      #ffffff;
    --bg-elevated:  #ffffff;
    --bg-input:     #ffffff;

    --text-primary:   #22301f;
    --text-secondary: #46553f;
    --text-muted:     #66735f;
    --text-heading:   #11200f;

    /* Accent: darker logo green, passes WCAG AA with white text */
    --accent:       #367a24;
    --accent-hover: #2b6a1c;
    --accent-light: rgba(102, 168, 69, 0.12);
    --accent-glow:  rgba(102, 168, 69, 0.30);

    --success: #2b6a1c;
    --warning: #b45309;
    --danger:  #c81e1e;
    --info:    #0369a1;

    --border:       #dbe5d4;
    --border-light: #e8efe3;

    --shadow-sm:   0 1px 3px rgba(17, 32, 15, 0.06);
    --shadow-md:   0 4px 14px rgba(17, 32, 15, 0.08);
    --shadow-lg:   0 10px 30px rgba(17, 32, 15, 0.10);
    --shadow-glow: 0 0 18px var(--accent-glow);
}

/* 2. HEADER AND MENU: white bar with a logo-green line underneath */
.site-header {
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 3px solid var(--brand);
    box-shadow: 0 1px 3px rgba(17, 32, 15, 0.05);
}
.site-title-text {
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.01em;
}
.site-logo:hover .site-title-text { color: var(--accent); }
.site-nav-desktop a,
.site-nav-more-toggle {
    color: var(--text-primary);
    font-weight: 600;
}
.site-nav-desktop a:hover,
.site-nav-desktop .current-menu-item a,
.site-nav-desktop .current_page_item a,
.site-nav-more-toggle:hover,
.site-nav-more.active .site-nav-more-toggle,
.site-nav-more-menu a:hover,
.site-nav-mobile a:hover,
.site-nav-mobile .current-menu-item a,
.site-nav-mobile .current_page_item a {
    color: var(--accent-hover);
    background: var(--accent-light);
}

/* 3. TYPOGRAPHY */
body { color: var(--text-primary); }
h1, h2, h3, h4, h5, h6 { color: var(--text-heading); }
.text-gradient {
    background: none;
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
}

/* 4. HERO: compact, so today's matches show on the first mobile screen */
.hero-lg,
.hero {
    background: var(--bg-primary);
}
.hero-lg .lead,
.hero .lead { color: var(--text-secondary); }
.hero.pl-hero {
    padding-top: 2rem;
    padding-bottom: 1rem;
}
.hero.pl-hero h1 { margin-bottom: 0.5rem; }
.hero.pl-hero .lead { margin-bottom: 0; }

/* 5. CARDS */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}
.card:hover {
    border-color: var(--accent-glow);
    box-shadow: var(--shadow-md);
}
.bg-secondary .card {
    background: var(--bg-primary);
    border-color: var(--border);
    box-shadow: none;
}

/* 6. BUTTONS */
.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}
.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
    box-shadow: var(--shadow-glow);
}
.btn-outline {
    background: transparent;
    border-color: var(--accent);
    color: var(--accent);
}
.btn-outline:hover {
    background: var(--accent);
    color: #ffffff;
}
.btn-secondary {
    background: var(--accent-light);
    border-color: transparent;
    color: var(--accent-hover);
    font-weight: 700;
}
.btn-secondary:hover {
    background: var(--accent);
    color: #ffffff;
}

/* 7. BADGES, LINKS, LISTS */
.badge {
    background: var(--accent-light);
    color: var(--accent-hover);
    border: 1px solid var(--accent-glow);
}
.badge-danger {
    background: #c81e1e;
    color: #ffffff;
    border-color: #c81e1e;
}
.link-underline {
    color: var(--accent);
    font-weight: 600;
}
.link-underline:hover { color: var(--accent-hover); }
.list-check li::before { color: var(--brand); }

/* 8. TABLES */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: 10px;
    overflow: hidden;
}
table th {
    background: var(--accent-light);
    color: var(--text-heading);
    text-align: start;
}
table th,
table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
}
td { color: var(--text-primary); }

/* 9. SITE-SPECIFIC CLASSES
   .pl-legal   short legal notice box
   .pl-section-tight  less top padding for the first block after the hero */
.pl-legal {
    background: var(--bg-card);
    border-inline-start: 4px solid var(--brand);
    border-radius: 10px;
    padding: 16px 20px;
    color: var(--text-secondary);
    font-size: 0.95rem;
}
.pl-legal p:last-child { margin-bottom: 0; }
.section.pl-section-tight { padding-top: 0.5rem; }

/* Match list from the Pelota Libre Data plugin: logo green for the
   league bar and the featured card edge */
.pl-league { border-bottom-color: var(--brand); }
.pl-featured { border-top: 4px solid var(--brand); }

/* 10. FOOTER: dark pitch green */
.site-footer {
    background: var(--brand-dark);
    border-top: 4px solid var(--brand);
}
.site-footer,
.site-footer p,
.site-footer .footer-text { color: #c3d3bb; }
.site-footer h4 { color: #ffffff; font-size: 1rem; margin-bottom: 0.5rem; }
.site-footer a { color: #e3eedd; }
.site-footer a:hover { color: #ffffff; text-decoration: underline; }
.site-footer .pl-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    text-align: start;
}
.site-footer .pl-footer-grid ul { list-style: none; margin: 0; padding: 0; }
.site-footer .pl-footer-grid li { margin-bottom: 0.4rem; }
.site-footer .pl-footer-note {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 0.85rem;
}

/* 11. MOBILE */
@media (max-width: 768px) {
    table th,
    table td {
        padding: 10px;
        font-size: 14px;
    }
    .site-footer .pl-footer-grid { grid-template-columns: 1fr 1fr; }
    .site-footer .pl-footer-about { grid-column: 1 / -1; }
}