/*
Theme Name: Royal X Casino
Theme URI: https://theroyalxcasino.com.pk/
Author: Shehzad
Description: Custom dark neon theme with FAQ accordion, image support, and editable homepage.
Version: 1.3.0
Text Domain: royalxcasino
*/

/* BASE */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    background:#0a0a0a;
    color:#e0e0e0;
    font-family:system-ui, sans-serif;
    line-height:1.6;
    font-size:17px;
}
a { color:#00ff9f; text-decoration:none; }
a:hover { color:#ff00ff; text-shadow:0 0 10px #ff00ff80; }

.container {
    max-width:1180px;
    margin:0 auto;
    padding:0 18px;
}

/* HEADER */
.site-header {
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(8,8,8,0.92);
    backdrop-filter:blur(12px);
    border-bottom:1px solid #ff00ff22;
    padding:10px 0;
}

.header-inner {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.site-title { text-align:center; }
.site-title h1 { margin:0; font-size:1.8rem; }
.custom-logo-wrap { text-align:center; } /* replaces inline style */

.menu-toggle {
    background:none;
    border:none;
    color:#fff;
    font-size:2.2rem;
    cursor:pointer;
    display:none;
    position:absolute;
    right:18px;
    top:14px;
}

.main-nav ul {
    list-style:none;
    display:flex;
    gap:26px;
    margin:0;
    padding:0;
}
.main-nav li a {
    color:#d0d0d0;
    padding:6px 0;
}
.main-nav li a:hover { color:#ff00ff; }

@media (max-width: 768px) {
    .menu-toggle { display:block; }
    .main-nav ul {
        display:none;
        flex-direction:column;
        background:#111;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        padding:18px;
        border-top:1px solid #333;
    }
    .main-nav.active ul { display:flex; }
}

/* HERO – (optional, can be used inside content) */
.hero {
    text-align:center;
    padding:28px 0 45px;
    background:linear-gradient(to bottom, #0f001a, #0a0a0a);
}
.hero .lead-text {
    font-size:2.1rem;
    font-weight:700;
    margin:0.4em 0 0.6em;
    color:#ffd700;
    line-height:1.3;
}
.hero p {
    font-size:1.18rem;
    max-width:740px;
    margin:0 auto 1.2em;
    color:#d0d0d0;
}

.hero-download { margin:1em 0 1.5em; }

/* Download button – plain & straight */
.download-btn {
    background:#00ff9f;
    color:#000;
    font-weight:700;
    font-size:1.3rem;
    padding:14px 40px;
    border-radius:0;
    box-shadow:0 0 20px #00ff9f80;
    transition:all .3s ease;
    display:inline-block;
    text-decoration:none;
}
.download-btn:hover {
    background:#00cc7a;
    box-shadow:0 0 30px #00ff9f;
    transform:translateY(-2px);
}

/* HEADINGS */
h2 {
    color:#ffd700;
    font-size:2.1rem;
    margin:0.6em 0 0.5em;
    position:relative;
    display:inline-block;
    padding-bottom:0.25em;
    text-shadow:0 0 8px #ffd70080;
}
h2::after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:3px;
    background:linear-gradient(to right, #ff00ff, #00ff9f);
    box-shadow:0 0 12px #ff00ff80;
    border-radius:3px;
}

/* CARDS & CONTENT */
.card, .front-page-content .card {
    background:#111;
    border:1px solid #ff00ff33;
    border-radius:12px;
    padding:24px;
    margin-bottom:32px;
    transition:all .4s ease;
}
.card:hover {
    transform:translateY(-10px);
    box-shadow:0 20px 50px #00ff9f30;
    border-color:#00ff9f66;
}

/* IMAGES – responsive and nice */
.entry-content img, .front-page-content img {
    max-width:100%;
    height:auto;
    border-radius:8px;
    border:1px solid #ff00ff44;
    margin:20px 0;
    display:block;
}
.wp-block-image img { margin:0; }

/* FAQ ACCORDION */
.faq-accordion {
    margin: 20px 0;
}
.faq-item {
    background: #1a1a1a;
    border: 1px solid #ff00ff33;
    margin-bottom: 10px;
    border-radius: 5px;
    overflow: hidden;
}
.faq-question {
    background: #222;
    padding: 16px 20px;
    cursor: pointer;
    font-weight: bold;
    color: #ffd700;
    position: relative;
    transition: background 0.3s;
    margin:0;
    font-size:1.3rem;
    /* Accessibility roles added via JS */
}
.faq-question:hover {
    background: #2a2a2a;
}
.faq-question:focus {
    outline: 2px solid #00ff9f;
    outline-offset: 2px;
}
.faq-question::after {
    content: '+';
    position: absolute;
    right: 20px;
    color: #00ff9f;
    font-size: 1.5rem;
    font-weight: bold;
}
.faq-item.active .faq-question::after {
    content: '−';
}
.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    background: #111;
    color: #ccc;
}
.faq-item.active .faq-answer {
    padding: 20px;
    max-height: 500px; /* enough for long answers */
}

/* Ensure FAQ questions are h3 (or any heading) */
.faq-item h3, .faq-item .faq-question {
    margin:0;
}

/* BLOG INDEX */
.blog-index .card h2 {
    margin-top:0;
}
.blog-index .entry-meta {
    color:#aaa;
    font-size:0.9rem;
    margin-bottom:10px;
}
.blog-index .read-more {
    color:#00ff9f;
    font-weight:bold;
}
.pagination {
    text-align:center;
    margin:40px 0;
}
.pagination a, .pagination span {
    background:#1a1a1a;
    padding:8px 15px;
    margin:0 3px;
    border:1px solid #ff00ff33;
    color:#fff;
}
.pagination .current {
    background:#ff00ff;
    color:#000;
}

/* 404 SEARCH FORM */
.search-404-form input[type="search"] {
    flex:1;
    padding:14px 20px;
    font-size:1rem;
    background:#111;
    border:2px solid #ff00ff44;
    border-radius:50px 0 0 50px;
    color:#fff;
    outline:none;
}
.search-404-form button {
    padding:0 24px;
    background:linear-gradient(135deg, #ff00ff, #00ff9f);
    color:#000;
    border:none;
    border-radius:0 50px 50px 0;
    font-weight:bold;
    font-size:1rem;
    cursor:pointer;
    transition:all .3s;
}
.search-404-form button:hover {
    opacity:0.9;
}

/* FOOTER */
.site-footer {
    background:#000;
    padding:40px 0 25px;
    text-align:center;
    border-top:1px solid #ff00ff22;
    font-size:0.95rem;
    color:#888;
}
.site-footer a { color:#aaa; }
.site-footer a:hover { color:#ff00ff; }

/* MOBILE TWEAKS */
@media (max-width: 768px) {
    h2 { font-size: 1.6rem; }
    .hero .lead-text { font-size: 1.6rem; }
    .hero-download { margin: 30px 0 20px; }
    .download-btn { font-size: 1.2rem; padding: 12px 30px; white-space: normal; word-break: break-word; }
    .faq-question { font-size:1.2rem; padding:14px; }
    .search-404-form input[type="search"] { font-size:0.95rem; padding:12px 16px; }
    .search-404-form button { font-size:0.95rem; padding:0 20px; }
}

@media (max-width: 480px) {
    h2 { font-size: 1.4rem; }
    .download-btn { font-size: 1.1rem; padding: 10px 20px; }
    .faq-question { font-size:1.1rem; }
}



/* Additional mobile improvements */
@media (max-width: 600px) {
    .hero .lead-text { font-size: 1.4rem; }
    .card { padding: 16px; }
    table { font-size: 0.9rem; }
    .download-btn { font-size: 1.1rem; padding: 12px 20px; white-space: normal; }
    .faq-question { font-size: 1.1rem; padding: 12px; }
    .faq-question::after { right: 12px; font-size: 1.2rem; }
    h2 { font-size: 1.5rem; }
}
@media (max-width: 480px) {
    body { font-size: 15px; }
    .container { padding: 0 12px; }
    .hero .lead-text { font-size: 1.3rem; }
}