/*
Theme Name: Dooballvip Theme
Theme URI: https://dooballvip.com
Author: AI Assistant
Author URI: https://dooballvip.com
Description: A modern, clean WordPress theme for a football news website, inspired by the structure of X News and colors of BBC Sport, designed for Dooballvip.com.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: news, football, sports, yellow, black, modern
Text Domain: dooballvip
*/

/* --- Basic Reset --- */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #000000; /* Black background */
    color: #ffffff; /* White text */
}

a {
    color: #ffd700; /* Yellow for links */
    text-decoration: none;
}

a:hover {
    color: #ffffff;
}

/* --- Utility Classes --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- Top Navigation & Header --- */
.top-bar {
    background-color: #333333; /* Dark gray top bar */
    color: #ffd700; /* Yellow text on top bar */
    padding: 5px 0;
    font-size: 14px;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.top-bar ul li {
    margin-right: 15px;
}

.header {
    background-color: #ffd700; /* Full yellow header like BBC Sport */
    padding: 10px 0;
    color: #000000;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-title a {
    color: #000000; /* Black text for site title on yellow */
    font-size: 2em;
    font-weight: bold;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-navigation ul li a {
    color: #000000; /* Black text on yellow */
    font-weight: bold;
    padding: 10px 20px;
}

.main-navigation ul li a:hover {
    background-color: #000000;
    color: #ffd700; /* Yellow on black on hover */
}

.header-actions {
    display: flex;
    align-items: center;
}

.test-drive-button {
    background-color: #000000; /* Black button with yellow text */
    color: #ffd700;
    padding: 10px 15px;
    font-weight: bold;
    margin-right: 15px;
}

.social-icons {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.social-icons li {
    margin-left: 10px;
}

.social-icons li a {
    color: #000000; /* Black social icons on yellow */
    font-size: 1.2em;
}

/* --- Hero Grid (structure like image_8.png, colors black & yellow) --- */
.hero-grid {
    background-color: #000000;
    padding: 30px 0;
}

.hero-grid .container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 15px;
}

.hero-grid .large-post {
    grid-row: 1 / -1;
    grid-column: 1 / 2;
    position: relative;
    background-color: #ffd700;
}

.hero-grid .small-post {
    position: relative;
    background-color: #333333;
}

.hero-grid .large-post img,
.hero-grid .small-post img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8; /* Darken for text readability */
}

.hero-grid .large-post .meta,
.hero-grid .small-post .meta {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 15px;
    color: #ffffff;
}

.hero-grid .category-tag {
    background-color: #ffd700; /* Yellow category tags with black text */
    color: #000000;
    padding: 5px 10px;
    font-size: 14px;
}

.hero-grid .post-title {
    margin: 10px 0;
    font-size: 1.5em;
    font-weight: bold;
}

/* --- Body Content --- */
.content-area {
    padding: 30px 0;
}

.main-content {
    background-color: #ffffff; /* Pure white content area like image_8.png */
    color: #000000;
    padding: 30px;
    margin-bottom: 30px;
}

.category-list-widget .category-box {
    background-color: #ffd700; /* Yellow category boxes with black text */
    color: #000000;
    text-align: center;
    padding: 20px;
}

/* --- Sidebar Widgets --- */
.sidebar-widgets {
    background-color: #ffffff;
    color: #000000;
    padding: 20px;
    margin-bottom: 30px;
}

.social-icons-widget .social-follow-button {
    background-color: #ffd700; /* Yellow social follow buttons with black text */
    color: #000000;
    display: block;
    padding: 15px;
    text-align: center;
}

/* --- Footer --- */
.footer {
    background-color: #ffd700; /* Yellow footer like BBC Sport header */
    color: #000000;
    padding: 20px 0;
}

/* --- WordPress Theme Functional Styles --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }

.site-header { background:#ffd700; color:#000; }
.site-branding { display:flex; align-items:center; gap:15px; }
.custom-logo-link img { max-height:58px; width:auto; }
.site-title { margin:0; line-height:1; }
.site-title a { font-size:2rem; }
.site-description { margin:5px 0 0; font-size:.9rem; }

.menu-toggle { display:none; border:0; background:#000; color:#ffd700; padding:10px 14px; font-weight:bold; cursor:pointer; }
.main-navigation .menu { margin:0; padding:0; list-style:none; display:flex; align-items:center; flex-wrap:wrap; }
.main-navigation .menu li { position:relative; }
.main-navigation .menu li a { display:block; color:#000; font-weight:700; padding:15px 14px; }
.main-navigation .menu li a:hover,
.main-navigation .current-menu-item > a { background:#000; color:#ffd700; }
.main-navigation .sub-menu { display:none; position:absolute; z-index:999; min-width:200px; background:#000; padding:0; list-style:none; }
.main-navigation li:hover > .sub-menu { display:block; }
.main-navigation .sub-menu a { color:#fff; }
.main-navigation .sub-menu a:hover { color:#ffd700; }

.site-content { background:#111; padding:30px 0; min-height:50vh; }
.content-grid { display:grid; grid-template-columns:minmax(0, 1fr) 320px; gap:30px; }
.entry-card { background:#fff; color:#111; margin-bottom:20px; overflow:hidden; }
.entry-card img { width:100%; height:220px; object-fit:cover; }
.entry-card-body { padding:20px; }
.entry-card h2, .entry-card h1 { margin-top:0; }
.entry-card h2 a, .entry-card h1 a { color:#111; }
.entry-card h2 a:hover { color:#b8860b; }
.entry-meta { font-size:.85rem; color:#777; margin-bottom:10px; }
.entry-meta a { color:#555; }
.entry-content { color:#222; }
.entry-content::after { content:""; display:block; clear:both; }
.entry-content a { color:#8a6500; text-decoration:underline; }

.post-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.post-grid .entry-card { margin:0; }
.post-grid .entry-card img { height:180px; }

.section-title { color:#ffd700; border-left:6px solid #ffd700; padding-left:12px; margin:0 0 20px; font-size:1.5rem; }
.news-section { margin-bottom:35px; }
.hero-grid .post-link { display:block; height:100%; color:#fff; position:relative; overflow:hidden; min-height:220px; }
.hero-grid .large-post .post-link { min-height:460px; }
.hero-grid .post-link:after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 30%, rgba(0,0,0,.85)); }
.hero-grid .meta { z-index:2; }
.hero-grid .post-title { color:#fff; position:relative; z-index:3; }
.category-tag { display:inline-block; font-weight:bold; }
.read-more { display:inline-block; background:#000; color:#ffd700; padding:9px 14px; font-weight:bold; }
.read-more:hover { background:#ffd700; color:#000; }

.widget { background:#fff; color:#111; padding:20px; margin-bottom:20px; }
.widget-title { border-bottom:3px solid #ffd700; padding-bottom:8px; margin-top:0; }
.widget ul { padding-left:20px; }
.widget a { color:#111; }
.widget a:hover { color:#8a6500; }

.single-post { background:#fff; color:#111; padding:30px; }
.single-post .entry-title { font-size:2.2rem; line-height:1.2; }
.single-post .featured-image { margin:20px 0; }
.single-post .featured-image img { width:100%; }
.navigation.pagination { background:#fff; padding:15px; }
.nav-links { display:flex; gap:8px; flex-wrap:wrap; }
.page-numbers { padding:8px 12px; background:#eee; color:#111; }
.page-numbers.current { background:#ffd700; font-weight:bold; }

.comment-list { padding-left:20px; }
.comment-respond, .comments-area { margin-top:30px; }
.comment-form input, .comment-form textarea, .search-form input[type="search"] {
    width:100%; padding:10px; border:1px solid #ccc; margin:5px 0 12px;
}
.comment-form input[type="submit"], .search-form input[type="submit"] {
    width:auto; background:#000; color:#ffd700; border:0; padding:10px 18px; cursor:pointer; font-weight:bold;
}

.site-footer { background:#ffd700; color:#000; padding:30px 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:30px; }
.footer-widget-area .widget { background:transparent; padding:0; margin:0; }
.footer-widget-area .widget-title { border-color:#000; }
.footer-bottom { border-top:1px solid rgba(0,0,0,.25); margin-top:20px; padding-top:15px; font-size:.9rem; }

.archive-header { background:#fff; color:#111; padding:25px; margin-bottom:20px; }
.not-found { background:#fff; color:#111; padding:30px; }

@media (max-width: 900px) {
    .content-grid { grid-template-columns:1fr; }
    .post-grid { grid-template-columns:repeat(2, 1fr); }
    .footer-grid { grid-template-columns:1fr 1fr; }
    .hero-grid .container { grid-template-columns:1fr 1fr; }
    .hero-grid .large-post { grid-column:1 / -1; grid-row:auto; }
}
@media (max-width: 700px) {
    .top-bar .container, .header .container { gap:10px; flex-wrap:wrap; }
    .menu-toggle { display:block; }
    .main-navigation { width:100%; }
    .main-navigation .menu { display:none; width:100%; flex-direction:column; align-items:stretch; background:#ffd700; }
    .main-navigation.toggled .menu { display:flex; }
    .main-navigation .menu li a { padding:12px; }
    .main-navigation .sub-menu { position:static; display:block; background:#222; }
    .hero-grid .container { display:block; }
    .hero-grid .large-post, .hero-grid .small-post { margin-bottom:15px; }
    .hero-grid .large-post .post-link { min-height:320px; }
    .post-grid { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; }
    .single-post { padding:20px; }
    .single-post .entry-title { font-size:1.7rem; }
}