/*
Theme Name:   Nordic Spill
Theme URI:    https://spilleautomatene.net
Description:  Nordic Spill — clean blue/white child theme for spilleautomatene.net (Norwegian) based on Mercury
Author:       DixonIT
Author URI:   https://dixonit.com
Template:     mercury
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  nordic-spill
Tags:         gambling, slots, affiliate, dark, blue, nordic
*/

/* =============================================
   Nordic Spill — DixMox Phase 11.5.2
   Blue/white Nordic scheme for spilleautomatene.net
   ============================================= */

:root {
    --ns-primary:       #2563EB;   /* Royal blue */
    --ns-primary-dark:  #1D4ED8;   /* Deep blue */
    --ns-accent:        #60A5FA;   /* Light blue accent */
    --ns-bg:            #0A0E1A;   /* Near-black with blue tint */
    --ns-bg-card:       #0F1628;   /* Dark blue card background */
    --ns-bg-elevated:   #162040;   /* Elevated panel */
    --ns-bg-header:     #080C18;   /* Header background */
    --ns-text:          #F0F4FF;   /* Slightly blue-white */
    --ns-text-muted:    #7A8AAA;   /* Muted text */
    --ns-border:        #1A2540;   /* Border color */
    --ns-success:       #10B981;   /* Green for positive */
    --ns-danger:        #EF4444;   /* Red for warnings */
    --ns-disclaimer:    #0A1030;   /* Disclaimer bg (dark blue) */
}

body {
    background-color: var(--ns-bg);
    color: var(--ns-text);
}

/* =============================================
   Compliance bar
   ============================================= */
.ns-compliance-bar {
    background-color: var(--ns-disclaimer);
    border-top: 2px solid var(--ns-primary);
    padding: 16px 24px;
    font-size: 0.78rem;
    color: var(--ns-text-muted);
    line-height: 1.6;
    text-align: center;
}

.ns-compliance-bar a {
    color: var(--ns-primary);
    text-decoration: underline;
}

.ns-compliance-bar .ns-18plus {
    display: inline-block;
    border: 2px solid var(--ns-danger);
    color: var(--ns-danger);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
}

.ns-rg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ns-text-muted);
    font-size: 0.78rem;
}

/* =============================================
   Typography
   ============================================= */
h1, h2, h3 {
    color: var(--ns-text);
}

.entry-title a,
.entry-title a:visited {
    color: var(--ns-text);
}

.entry-title a:hover,
.site-title a:hover {
    color: var(--ns-primary);
}

/* =============================================
   CTA buttons
   ============================================= */
.ns-cta-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--ns-primary), var(--ns-accent));
    color: #fff;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    box-shadow: 0 0 16px rgba(37, 99, 235, 0.4);
}

.ns-cta-btn:hover {
    opacity: 0.88;
    color: #fff;
    box-shadow: 0 0 24px rgba(96, 165, 250, 0.6);
}

/* =============================================
   Mercury dark-mode.css overrides
   ============================================= */
body.dark-mode,
.dark-mode .space-wrap,
.dark-mode .space-content-area,
.dark-mode .space-sidebar,
.dark-mode #page {
    background-color: var(--ns-bg) !important;
}

.dark-mode .space-main-nav-area,
.dark-mode .space-header-area,
#masthead,
.space-main-nav-area {
    background-color: var(--ns-bg-header) !important;
}

.dark-mode .space-post-item,
.dark-mode .space-widget-area,
.dark-mode .widget,
.dark-mode .space-single-post-wrap {
    background-color: var(--ns-bg-card) !important;
    border-color: var(--ns-border) !important;
}

.dark-mode .space-archive-title-box,
.space-archive-title-box {
    background-color: var(--ns-bg-header) !important;
    border-color: var(--ns-border) !important;
}

.dark-mode .space-archive-title,
.dark-mode .page-title,
.dark-mode .entry-title {
    color: var(--ns-text) !important;
}

.dark-mode .space-footer-area,
footer,
.space-footer-area {
    background-color: var(--ns-bg-header) !important;
    border-top-color: var(--ns-border) !important;
}

/* =============================================
   Header / Navigation
   ============================================= */
.space-main-nav-area,
#masthead {
    background-color: var(--ns-bg-header) !important;
    border-bottom: 1px solid var(--ns-border);
}

.space-main-nav > ul > li > a {
    color: var(--ns-text) !important;
    font-weight: 500;
}

.space-main-nav > ul > li > a:hover,
.space-main-nav > ul > li.current-menu-item > a {
    color: var(--ns-primary) !important;
}

.space-main-nav ul ul {
    background-color: var(--ns-bg-elevated) !important;
    border: 1px solid var(--ns-border);
    border-top: 2px solid var(--ns-primary);
}

.space-main-nav ul ul li a {
    color: var(--ns-text-muted) !important;
}

.space-main-nav ul ul li a:hover {
    color: var(--ns-primary) !important;
    background-color: var(--ns-bg-card) !important;
}

.space-site-name a,
.text-logo {
    color: var(--ns-text) !important;
}

.space-site-name a:hover {
    color: var(--ns-primary) !important;
}

/* =============================================
   Archive / Blog list
   ============================================= */
.space-archive-title-box {
    background-color: var(--ns-bg-header) !important;
    color: var(--ns-text) !important;
}

.space-post-item {
    background-color: var(--ns-bg-card);
    border: 1px solid var(--ns-border);
    border-radius: 6px;
}

.space-post-item:hover {
    border-color: var(--ns-primary);
}

.space-post-item .entry-title a {
    color: var(--ns-text) !important;
}

.space-post-item .entry-title a:hover {
    color: var(--ns-primary) !important;
}

.space-post-item .entry-meta,
.space-post-item .entry-meta a,
.space-post-item .space-post-excerpt {
    color: var(--ns-text-muted) !important;
}

/* =============================================
   Single post
   ============================================= */
.single .entry-content,
.single .entry-content p {
    color: var(--ns-text);
    line-height: 1.8;
}

.single .entry-content h2,
.single .entry-content h3 {
    color: var(--ns-text);
    border-bottom: 1px solid var(--ns-border);
    padding-bottom: 8px;
    margin-top: 32px;
}

.single .entry-content a {
    color: var(--ns-primary);
}

.single .entry-content a:hover {
    color: var(--ns-accent);
}

.ns-reading-time {
    color: var(--ns-text-muted);
    font-size: 0.85rem;
    margin-bottom: 16px;
    padding: 6px 12px;
    background: var(--ns-bg-elevated);
    border-left: 3px solid var(--ns-primary);
    border-radius: 2px;
    display: inline-block;
}

/* =============================================
   Section headings
   ============================================= */
.space-section-title,
.space-section-block-title {
    color: var(--ns-text) !important;
}

.space-section-title::after,
.space-section-block-title::after {
    background-color: var(--ns-primary) !important;
}

/* =============================================
   Aces casino/game cards
   ============================================= */
.space-casinos-archive-item,
.space-casino-item {
    background-color: var(--ns-bg-card) !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 6px;
}

.space-casinos-archive-item:hover,
.space-casino-item:hover {
    border-color: var(--ns-primary) !important;
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.25);
}

.space-casinos-archive-item .space-casino-name a,
.space-casino-item .space-casino-name a {
    color: var(--ns-text) !important;
}

.space-casinos-archive-item .space-casino-name a:hover {
    color: var(--ns-primary) !important;
}

.space-rating-stars .fa-star,
.space-stars-rating i {
    color: var(--ns-primary) !important;
}

.space-casino-button a,
.space-visit-casino-btn {
    background: linear-gradient(135deg, var(--ns-primary), var(--ns-accent)) !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.3);
}

.space-casino-button a:hover {
    opacity: 0.9 !important;
}

.space-units-archive-item {
    background-color: var(--ns-bg-card) !important;
    border: 1px solid var(--ns-border) !important;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.space-units-archive-item:hover {
    border-color: var(--ns-primary) !important;
    box-shadow: 0 0 14px rgba(37, 99, 235, 0.3);
}

.space-units-archive-item .space-units-archive-item-title a {
    color: var(--ns-text) !important;
    font-weight: 700;
}

.space-units-archive-item .space-units-archive-item-title a:hover {
    color: var(--ns-primary) !important;
}

.space-units-archive-item .space-units-archive-item-short-desc {
    color: var(--ns-text-muted) !important;
}

.space-units-archive-item .space-units-archive-item-button a {
    background: linear-gradient(135deg, var(--ns-primary), var(--ns-accent)) !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-weight: 600;
}

.space-pros-list li::before { color: var(--ns-success) !important; }
.space-cons-list li::before { color: var(--ns-danger) !important; }

/* =============================================
   Sidebar widgets
   ============================================= */
.widget {
    background-color: var(--ns-bg-card);
    border: 1px solid var(--ns-border);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 24px;
}

.widget-title {
    color: var(--ns-text) !important;
    border-bottom: 2px solid var(--ns-primary);
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.widget a { color: var(--ns-text-muted); }
.widget a:hover { color: var(--ns-primary); }

/* =============================================
   Footer
   ============================================= */
.space-footer-area,
footer {
    background-color: var(--ns-bg-header) !important;
    border-top: 1px solid var(--ns-border);
    color: var(--ns-text-muted);
}

.space-footer-area a, footer a { color: var(--ns-text-muted); }
.space-footer-area a:hover, footer a:hover { color: var(--ns-primary); }
.space-footer-copyright { color: var(--ns-text-muted); font-size: 0.85rem; }

/* =============================================
   Forms / Search
   ============================================= */
input[type="text"],
input[type="email"],
input[type="search"],
textarea, select {
    background-color: var(--ns-bg-card) !important;
    border: 1px solid var(--ns-border) !important;
    color: var(--ns-text) !important;
    border-radius: 4px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
    border-color: var(--ns-primary) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

/* =============================================
   Pagination
   ============================================= */
.pagination .page-numbers {
    background-color: var(--ns-bg-card);
    color: var(--ns-text-muted);
    border: 1px solid var(--ns-border);
    border-radius: 4px;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: linear-gradient(135deg, var(--ns-primary), var(--ns-accent));
    color: #fff;
    border-color: var(--ns-primary);
}

/* =============================================
   Homepage hero (Nordic Spill style)
   ============================================= */
.ns-hero-section {
    background: linear-gradient(135deg, #0A0E1A 0%, #0A1030 50%, #0A0E1A 100%);
    border-bottom: 2px solid var(--ns-primary);
    position: relative;
    overflow: hidden;
}

.ns-hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* =============================================
   Slot review specific (RTP badge, volatility)
   ============================================= */
.ns-rtp-badge {
    display: inline-block;
    background: rgba(37, 99, 235, 0.15);
    border: 1px solid var(--ns-primary);
    color: var(--ns-primary);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
}

.ns-volatility-high   { color: var(--ns-danger); font-weight: 700; }
.ns-volatility-medium { color: #FBBF24; font-weight: 700; }
.ns-volatility-low    { color: var(--ns-success); font-weight: 700; }

/* =============================================
   Mobile responsive
   ============================================= */
@media (max-width: 768px) {
    .ns-hero-section { padding: 40px 20px !important; }
    .ns-hero-section h1 { font-size: 1.6rem !important; }
    .ns-hero-cta-wrap { flex-direction: column; align-items: center; }
    .space-main-nav-area { background-color: var(--ns-bg-header) !important; }
    .space-casinos-archive-items,
    .space-units-archive-items { grid-template-columns: 1fr !important; }
}