/*
Theme Name:   Dhaniwin Theme
Theme URI:    https://dhanilogin.com
Description:  Astra child theme for Dhaniwin — modern, SEO-focused colour prediction game guide.
Author:       Dhaniwin
Template:     astra
Version:      1.1.4
Text Domain:  dhaniwin-theme
*/

/* ─────────────────────────────────────────────
   TOKENS
───────────────────────────────────────────── */
:root {
    --dw-red:       #e63946;
    --dw-red-dark:  #c1121f;
    --dw-black:     #1a1a2e;
    --dw-gray:      #555;
    --dw-light:     #f8f9fa;
    --dw-border:    #e0e0e0;
    --dw-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --dw-radius:    8px;
    --dw-shadow:    0 2px 12px rgba(0,0,0,.08);
    --dw-max:       860px;
}

/* ─────────────────────────────────────────────
   BASE
───────────────────────────────────────────── */
html { font-size: 100%; scroll-behavior: smooth; }

body,
button,
input,
select,
textarea,
.ast-button,
.ast-custom-button {
    font-family: var(--dw-font) !important;
    color: var(--dw-black);
    -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }

a { color: var(--dw-red); text-decoration: none; }
a:hover { color: var(--dw-red-dark); text-decoration: underline; }

/* ─────────────────────────────────────────────
   HEADER
───────────────────────────────────────────── */
#masthead,
.ast-primary-header-bar,
.main-header-bar {
    background: #fff !important;
    border-bottom: 2px solid var(--dw-red) !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.06) !important;
    padding: 0 !important;
}

.main-header-bar-wrap .ast-container,
.site-header-row-container-inner .ast-container {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* hide above-header bar */
.ast-above-header-wrap,
.ast-above-header-bar,
.ast-above-header { display: none !important; }

/* ─────────────────────────────────────────────
   HEADER BUTTONS  (.dw-header-btns injected via plugin)
───────────────────────────────────────────── */
.dw-header-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.dw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: var(--dw-radius);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: opacity .15s, transform .1s;
    line-height: 1;
    cursor: pointer;
}
.dw-btn:hover { opacity: .88; transform: translateY(-1px); text-decoration: none !important; }

.dw-btn-login    { background: transparent; border: 2px solid var(--dw-red); color: var(--dw-red) !important; }
.dw-btn-register { background: var(--dw-red); border: 2px solid var(--dw-red); color: #fff !important; }
.dw-btn-download { background: var(--dw-black); border: 2px solid var(--dw-black); color: #fff !important; }

/* ─────────────────────────────────────────────
   DESKTOP NAV
───────────────────────────────────────────── */
#ast-desktop-header .main-header-menu { background: transparent !important; }
#ast-desktop-header .main-header-menu .menu-item > a {
    font-size: 13px;
    font-weight: 700;
    color: var(--dw-black) !important;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background .15s;
}
#ast-desktop-header .main-header-menu .menu-item > a:hover {
    background: var(--dw-light);
    text-decoration: none;
}

/* ─────────────────────────────────────────────
   HAMBURGER — Astra default, nudged closer
───────────────────────────────────────────── */
button.ast-mobile-menu-trigger-minimal,
button.menu-toggle.main-header-menu-toggle {
    margin-left: 4px !important;
}

/* Mobile popup drawer */
.ast-mobile-popup-drawer .ast-mobile-popup-inner {
    background: #fff !important;
    padding: 0 !important;
}

.ast-mobile-popup-drawer .main-navigation .menu-item {
    border-bottom: 1px solid var(--dw-border) !important;
    margin: 0 !important;
}

.ast-mobile-popup-drawer .main-navigation .menu-item > a,
.ast-mobile-popup-drawer ul li a {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 18px 24px !important;
    color: var(--dw-black) !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    background: #fff !important;
}

.ast-mobile-popup-drawer .main-navigation .menu-item > a:hover,
.ast-mobile-popup-drawer ul li a:hover {
    background: #fff5f5 !important;
    color: var(--dw-red) !important;
}

/* Close button inside popup */
.ast-mobile-popup-drawer .menu-toggle-close {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 20px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--dw-border) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--dw-gray) !important;
    cursor: pointer;
    width: 100%;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* ─────────────────────────────────────────────
   SITE LOGO & TITLE
───────────────────────────────────────────── */
.site-branding .custom-logo { max-height: 48px; width: auto; }

/* Hide text title always — logo image only */
.ast-site-identity .site-title,
.ast-mobile-header-wrap .site-title,
#ast-mobile-header .site-title,
.site-title { display: none !important; }

/* Logo sizing */
.site-branding .custom-logo,
.ast-site-identity img.custom-logo {
    max-height: 44px !important;
    width: auto !important;
    display: block !important;
}

.site-branding a.brand,
.site-branding a {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

/* ─────────────────────────────────────────────
   LAYOUT & CONTENT
───────────────────────────────────────────── */
.site-content { padding-top: 0 !important; }

.ast-container,
.site-container { max-width: 1140px !important; margin: 0 auto; }

/* Outer page padding */
#page,
.site { padding: 0; }

/* Article / page wrapper */
.ast-article-single,
.ast-page-builder-template,
.hentry {
    padding: 0 !important;
    margin: 0 !important;
}

/* Entry header — title area */
.entry-header {
    max-width: var(--dw-max);
    margin: 0 auto;
    padding: 2.5rem 24px 1rem;
}

/* Entry content — body */
.entry-content {
    max-width: var(--dw-max);
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px 3rem;
}

/* Astra content area container */
#content .ast-container,
.ast-article-full-width .ast-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Main site content wrapper */
#main,
.site-main { padding: 0 !important; }

/* ─────────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────────── */
.entry-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: var(--dw-black) !important;
    margin-bottom: 1rem !important;
}

h2.wp-block-heading {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: var(--dw-black) !important;
    padding-left: 12px;
    border-left: 4px solid var(--dw-red);
    margin-top: 2rem !important;
    line-height: 1.3;
}

h3.wp-block-heading {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--dw-red) !important;
    margin-top: 1.4rem !important;
}

p { line-height: 1.8; color: #333; margin-bottom: 1.2rem; }

/* Comfortable block spacing */
.wp-block-paragraph,
.wp-block-list,
.wp-block-table,
.wp-block-buttons,
.wp-block-heading {
    margin-top: 1.2rem !important;
    margin-bottom: 1.2rem !important;
}

.wp-block-buttons {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
}

/* ─────────────────────────────────────────────
   TABLES
───────────────────────────────────────────── */
.wp-block-table { overflow-x: auto; display: block; margin: 1.5rem 0; }

.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    min-width: 320px;
    font-size: 14px;
    border-radius: var(--dw-radius);
    overflow: hidden;
    box-shadow: var(--dw-shadow);
}

.wp-block-table table thead tr {
    background: var(--dw-red);
    color: #fff;
}

.wp-block-table table th,
.wp-block-table table td {
    padding: 11px 14px;
    border: 1px solid var(--dw-border);
    text-align: left;
    vertical-align: middle;
}

.wp-block-table table thead th { border-color: rgba(255,255,255,.2); font-weight: 700; }

.wp-block-table table tbody tr:nth-child(even) { background: #fafafa; }
.wp-block-table table tbody tr:hover { background: #fff3f4; }
.wp-block-table table tbody td:first-child { font-weight: 600; color: var(--dw-black); }

/* ─────────────────────────────────────────────
   CTA BUTTONS
───────────────────────────────────────────── */
.wp-block-button__link {
    background: var(--dw-red) !important;
    color: #fff !important;
    border-radius: var(--dw-radius) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 14px 32px !important;
    text-decoration: none !important;
    transition: background .15s, transform .1s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: none !important;
}
.wp-block-button__link:hover {
    background: var(--dw-red-dark) !important;
    transform: translateY(-2px) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* ─────────────────────────────────────────────
   LISTS
───────────────────────────────────────────── */
.wp-block-list li,
.entry-content ul li,
.entry-content ol li {
    line-height: 1.7;
    margin-bottom: .4rem;
    padding-left: 4px;
}

/* ─────────────────────────────────────────────
   HIDE ENTRY META
───────────────────────────────────────────── */
.entry-meta,
.posted-on,
.byline,
.cat-links,
.ast-post-meta,
.ast-blog-post-meta { display: none !important; }

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.ast-footer-copyright,
.ast-small-footer-wrap,
.ast-small-footer,
.footer-widget-area,
.site-footer .ast-row { display: none !important; }

.site-footer { background: #fff !important; padding: 0 !important; border-top: 1px solid var(--dw-border) !important; }

/* ─────────────────────────────────────────────
   MOBILE  ≤ 921px
───────────────────────────────────────────── */
@media (max-width: 921px) {

    /* hide desktop header HTML (buttons) on mobile */
    #ast-desktop-header,
    #ast-desktop-header .ast-header-html-area { display: none !important; }

    #ast-mobile-header,
    .ast-mobile-header-wrap { display: block !important; }

    /* mobile breathing room */
    .ast-container,
    .site-container { padding-left: 0 !important; padding-right: 0 !important; }

    .entry-header  { padding: 2rem 20px 0.8rem !important; }
    .entry-content { padding: 0 20px 2.5rem !important; }

    .main-header-bar-wrap .ast-container,
    .site-header-row-container-inner .ast-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    /* stack columns */
    .wp-block-columns { flex-wrap: wrap !important; }
    .wp-block-column  { min-width: 100% !important; flex-basis: 100% !important; }

}

/* ─────────────────────────────────────────────
   DISCLAIMER BLOCK
───────────────────────────────────────────── */
.dw-disclaimer {
    font-size: 11px;
    color: #aaa;
    text-align: center;
    border-top: 1px solid var(--dw-border);
    padding-top: 1rem;
    margin-top: 2rem;
    line-height: 1.6;
}

/* ─────────────────────────────────────────────
   APP SCREENSHOT
───────────────────────────────────────────── */

/* Screenshot — strip every possible background from every wrapper */
figure.dw-app-screenshot,
figure.dw-app-screenshot *,
.wp-block-image.dw-app-screenshot,
.wp-block-image.dw-app-screenshot a,
.wp-block-image.dw-app-screenshot a:hover,
.wp-block-column:has(figure.dw-app-screenshot),
.wp-block-column:has(figure.dw-app-screenshot) * {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

figure.dw-app-screenshot a {
    display: block !important;
    line-height: 0 !important;
}

figure.dw-app-screenshot img {
    max-width: 600px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 28px !important;
    box-shadow: none !important;
}

@media (max-width: 921px) {
    figure.dw-app-screenshot img {
        max-width: 480px !important;
        margin: 1.5rem auto 0 !important;
    }
}