/* ==========================================================================
   Pure CSS Stylesheet - Clean, Responsive, Ultra-Lightweight
   Theme: Deep Blue & Accent Blues (Optimised & Validated)
   ========================================================================== */

/* --- CSS Reset --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333333;
    background-color: #ffffff;
}

a {
    color: #212529;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #212529;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Header & Layout Elements --- */
.site-header {
    background-color: #212529;
    color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff !important;
}
.logo span { color: #d9b310; }

/* --- Single Responsive Mobile/Desktop Nav Bar --- */
.menu-toggle, .dropdown-mobile-check {
    display: none !important;
}

.menu-icon {
    display: none;
    font-size: 1.8rem;
    cursor: pointer;
    user-select: none;
}

.nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-links a, .dropdown-trigger {
    color: #ffffff;
    font-weight: 500;
    padding: 8px 12px;
    display: block;
    cursor: pointer;
    user-select: none;
}

.nav-links a:hover, .dropdown-trigger:hover {
    color: #d9b310;
}

/* --- CSS-Only Multi-level Dropdowns (Desktop Hover) --- */
.dropdown {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: -10px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    min-width: 200px;
    display: none;
    border-radius: 4px;
    padding: 8px 0;
    z-index: 2000;
}

.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

.dropdown-menu a {
    color: #333333;
    padding: 10px 15px;
    border-bottom: 1px solid #eceff1;
    font-weight: 400;
}

.dropdown-menu a:last-child {
    border-bottom: none;
}

.dropdown-menu a:hover {
    background-color: #f9f9f9;
    color: #212529;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/* --- Base Hero Section Structure --- */
.hero-section {
    background-color: #0b3c5d;
    color: #ffffff;
    padding: 80px 20px;
    text-align: center;
}

/* --- Base Hero Section Structure --- */
.hero-section {
    background-color: #212529;
    color: #ffffff;
    padding: 80px 20px;
    text-align: center;
}

/* --- Hero Image & Gradient Overlay Layer --- */
.main-hero-bg {
    background-image: linear-gradient(135deg, rgba(33, 37, 41, 0.8), rgba(29, 39, 49, 0.8)), url('/assets-v2/img/hero-bg.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.badge {
    background-color: rgba(255, 255, 255, 0.15);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 20px;
}

.hero-section h1 {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-section p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* --- Button Styling Engine --- */
.btn {
    display: inline-block;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s ease, transform 0.1s ease;
}

.btn-primary {
    background-color: #212529;
    color: #ffffff !important;
    border-color: #d9b310;
}

.btn-primary:hover { 
  background-color: #d9b310 !important; 
  color: #000000 !important; 
}

.btn-secondary {
    background-color: transparent;
    color: #ffffff !important;
    border: 2px solid #ffffff;
}

.btn-secondary:hover {
    background-color: #ffffff;
    color: #212529 !important;
}

.btn-accent {
    background-color: #d9b310;
    color: #1d2731 !important;
}

.btn-accent:hover {
    background-color: #e5c118;
}

.btn-accent-bet {
    background-color: #03396c;
    color: #ffffff !important;
}

.btn-accent-bet:hover {
    background-color: #005b96;
}

.full-width {
    display: block;
    width: 100%;
}


/* --- Main Layout Grid --- */
.main-layout {
    display: grid;
    grid-template-columns: 66% 34%;
    gap: 40px;
    padding-top: 40px;
    padding-bottom: 60px;
}

.content-block {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eceff1;
}

.content-block h2 {
    color: #212529;
    margin-bottom: 15px;
    font-size: 1.8rem;
}

.content-block p {
    margin-bottom: 20px;
    color: #444444;
}

.inline-links {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.text-link {
    font-weight: 600;
    text-decoration: underline;
}

.styled-list {
    list-style: none;
    margin-bottom: 20px;
}

.styled-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eceff1;
}

.styled-list li a {
    font-weight: 500;
}

/* --- Sidebar Widgets --- */
.sidebar-area {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.widget {
    background-color: #f9f9f9;
    border: 1px solid #eceff1;
    padding: 25px;
    border-radius: 6px;
}

.widget h3 {
    color: #212529;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.widget p {
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.promo-widget {
    background-color: #fffde7;
    border-color: #fff59d;
}

.promo-widget-bet {
    background-color: #b3cde0;
    border-color: #cccccc;
}

.promo-widget .terms {
    font-size: 0.75rem;
    color: #666666;
}

.safety-widget {
    border-left: 4px solid #212529;
}

/* --- Responsive Footer --- */
.site-footer {
    background-color: #212529;
    color: #cccccc;
    padding: 60px 0 20px 0;
    margin-top: 40px;
}

.footer-container {
    display: grid;
    grid-template-columns: 33% 33% 33%;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #343a40;
}

.footer-column h4 {
    color: #ffffff;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.footer-column ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: #aaaaaa;
}

.footer-column ul li a:hover {
    color: #ffffff;
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    font-size: 0.85rem;
}

.statcounter-placeholder {
    margin-top: 15px;
}

/* ==========================================================================
   Media Queries - Screen Adjustments (No JavaScript Required)
   ========================================================================== */

@media (max-width: 900px) {
    .main-layout {
        grid-template-columns: 100%;
    }
}

@media (max-width: 768px) {
    .menu-icon {
        display: block;
        color: #ffffff;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #212529;
        position: absolute;
        top: 100%;
        left: 0;
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    /* Fixed mobile selection target */
    .menu-toggle:checked ~ .main-nav .nav-links {
        display: flex;
    }

/* ==========================================================================
       MOBILE PURE-CSS ACCORDION INTERACTION DROPDOWNS
       ========================================================================== */
    /* Deactivates the desktop hover function completely to protect mobile view */
    .dropdown:hover .dropdown-menu {
        display: none !important;
    }

    /* Checks if the box is ticked, then rolls open the menu layout smoothly */
    .dropdown-mobile-check:checked ~ .dropdown-menu {
        display: block !important;
        position: static !important;
        box-shadow: none;
        border: none;
        background-color: rgba(255, 255, 255, 0.05);
        margin-left: 10px;
        margin-top: 5px;
    }

    .dropdown-menu a {
        color: #eeeeee;
        padding: 8px 15px;
    }

    .hero-section h1 {
        font-size: 1.8rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .footer-container {
        grid-template-columns: 100%;
        gap: 30px;
    }
}
/* --- Desktop/Mobile Responsive Menu Visibility Engine --- */
.mobile-only-trigger {
    display: none !important;
}
.desktop-only-link {
    display: block !important;
}

@media (max-width: 768px) {
    .mobile-only-trigger {
        display: block !important;
    }
    .desktop-only-link {
        display: none !important;
    }
}
/* ==========================================================================
   Inner Page Grid System & Condensed Hero Rules (Warning-Free Layouts)
   ========================================================================== */

.inner-hero-section {
    background-color: #212529;
    background-image: linear-gradient(135deg, rgba(33, 37, 41, 0.8), rgba(29, 39, 49, 0.8)), url('/assets-v2/img/hero-bg.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: #ffffff;
    padding: 45px 20px;
    text-align: center;
}
.inner-hero-sectionn {
    background-color: #212529;
    background-image: linear-gradient(135deg, rgba(33, 37, 41, 0.8), rgba(29, 39, 49, 0.8)), url('/assets-v2/img/hero-bg.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: #ffffff;
    padding: 45px 20px;
    text-align: center;
}

.inner-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.inner-hero-section h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.inner-hero-section p {
    font-size: 1.1rem;
    opacity: 0.95;
}

/* --- Main Directory Grid Wrapper --- */
.page-wrapper {
    padding-top: 40px;
    padding-bottom: 60px;
}

.directory-grid {
    display: grid;
    grid-template-columns: 32.3% 32.3% 32.3%;
    justify-content: space-between;
    row-gap: 30px;
}

/* --- Individual Grid Cards --- */
.grid-card {
    background-color: #f9f9f9;
    border: 1px solid #999999;
    border-radius: 6px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.card-image-box {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 15px;
    background-color: #eaeaea;
}

.card-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.grid-card h3 {
    color: #212529;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.grid-card p {
    font-size: 0.95rem;
    color: #444444;
    margin-bottom: 20px;
    flex-grow: 1;
}

.card-link { 
  color: #212529; 
  font-weight: 700; 
  font-size: 0.95rem; 
  text-decoration: none; 
  align-self: flex-start; 
  
  /* Adds a 2px solid border using your existing text color */
  border: 2px solid #212529; 
  
  /* Adds space between the text and the border (top/bottom left/right) */
  padding: 0.5rem 1rem; 
  
  /* Optional: rounds the corners of the border */
  border-radius: 4px; 
}

.card-link:hover {
    color: #212529;
    text-decoration: underline;
}

/* --- Responsive Layout Adapters --- */
@media (max-width: 960px) {
    .directory-grid {
        grid-template-columns: 48.5% 48.5%;
    }
}

@media (max-width: 600px) {
    .directory-grid {
        grid-template-columns: 100%;
    }
    .inner-hero-section h1 {
        font-size: 1.7rem;
    }
    .inner-hero-section p {
        font-size: 0.95rem;
    }
}
/* ==========================================================================
   Two-Column Inner Layout with 2-Column Content Grid (Warning-Free)
   ========================================================================== */

/* --- Main Inner 2-Column Grid Setup --- */
.inner-content-grid {
    display: grid;
    grid-template-columns: 48.5% 48.5%; /* Warning-free split for side-by-side content cards */
    justify-content: space-between;
    row-gap: 30px;
    margin-top: 20px;
}

/* --- Content Grid Card Styling --- */
.inner-content-grid .grid-card {
    background-color: #f9f9f9;
    border: 1px solid #eceff1;
    border-radius: 6px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.inner-content-grid .card-image-box {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 15px;
    background-color: #eaeaea;
}

.inner-content-grid .card-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.inner-content-grid h3 {
    color: #212529;
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.inner-content-grid p {
    font-size: 0.95rem;
    color: #444444;
    margin-bottom: 20px;
    flex-grow: 1; /* Maintains row alignment if paragraph text varies in height */
}

/* --- Responsive Adaptations --- */
@media (max-width: 900px) {
    /* Main container sidebar stacks automatically due to existing base layout rule */
    .inner-content-grid {
        grid-template-columns: 48.5% 48.5%; /* Retains 2-columns on tablet width */
    }
}

@media (max-width: 600px) {
    .inner-content-grid {
        grid-template-columns: 100%; /* Collapses cards to full-width rows on phones */
    }
}
/* ==========================================================================
   Inner Page 2-Column Text Layout inside Main Content Area
   ========================================================================== */

/* --- Sets up the 2 columns inside the main content area --- */
.main-text-columns {
    display: grid;
    grid-template-columns: 48.5% 48.5%; /* Pure warning-free split */
    justify-content: space-between;
    margin-top: 20px;
}

.text-column-pane h3 {
    color: #212529;
    font-size: 1.3rem;
    margin-bottom: 12px;
}

.text-column-pane p {
    font-size: 1rem;
    line-height: 1.6;
    color: #444444;
    margin-bottom: 15px;
}

/* --- Responsive Layout Adjustments --- */
@media (max-width: 900px) {
    /* The main sidebar layout already stacks, but let's make sure the text columns adapt smoothly */
    .main-text-columns {
        grid-template-columns: 48.5% 48.5%; /* Keeps side-by-side reading layout on wider tablets */
    }
}

@media (max-width: 650px) {
    .main-text-columns {
        grid-template-columns: 100%; /* Collapses to full-width text blocks on phones for readability */
        row-gap: 25px;
    }
}
/* ==========================================================================
   Inner Main Area 2-Column Card Grid (Warning-Free Layout Configuration)
   ========================================================================== */

/* --- Triggers the 2-column matrix layout inside the content lane --- */
.main-content-card-grid {
    display: grid;
    grid-template-columns: 48.5% 48.5%; /* Clean percentage split to stop layout warnings */
    justify-content: space-between;
    row-gap: 30px;
    margin-top: 25px;
}

/* --- Content Cards Structure --- */
.inner-grid-card {
    background-color: #f9f9f9;
    border: 1px solid #eceff1;
    border-radius: 6px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.inner-grid-card .card-image-box {
    width: 100%;
    height: 160px;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 15px;
    background-color: #eaeaea;
}

.inner-grid-card .card-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.inner-grid-card h3 {
    color: #212529;
    font-size: 1.25rem;
    margin-bottom: 10px;
}

.inner-grid-card p {
    font-size: 0.95rem;
    color: #444444;
    margin-bottom: 20px;
    flex-grow: 1; /* Automatically keeps links row-aligned even if text lengths differ */
}

/* --- Responsive Breakpoints --- */
@media (max-width: 900px) {
    .main-content-card-grid {
        grid-template-columns: 48.5% 48.5%; /* Keeps 2 cards side-by-side on tablet layouts */
    }
}

@media (max-width: 650px) {
    .main-content-card-grid {
        grid-template-columns: 100%; /* Drops cards down to full-width individual rows on phones */
        row-gap: 25px;
    }
}
/* ==========================================================================
   Informational Reading Page - Twin Image Row Block
   ========================================================================== */
.content-image-row {
    display: grid;
    grid-template-columns: 48.5% 48.5%;
    justify-content: space-between;
    margin-top: 30px;
    margin-bottom: 40px; /* Replaces the old mb-50 spacing spacing safely */
}

.row-image-box {
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid #eceff1;
    background-color: #eaeaea;
    
    /* 1. Forces the container box to have the exact shape of the image inside it */
    contain-intrinsic-size: auto 280px; 
}

.row-image-box img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    
    /* 2. Tells the browser to use the HTML width/height to map out the box structure instantly */
    aspect-ratio: attr(width) / attr(height); 
}

/* --- Responsive Adaptation --- */
@media (max-width: 650px) {
    .content-image-row {
        grid-template-columns: 100%; /* Stacks the two images vertically on phones */
        row-gap: 20px;
    }
}
/* Tells the browser rendering engine to skip layout calculations for hidden elements */
.dropdown-menu {
    content-visibility: auto;
    contain-intrinsic-size: 0 300px;
}

.site-header {
    contain: layout;
}
.grid-card.text-card {
    background: #f8fafc; /* Ultra-soft background tint */
    border: 1px solid #e2e8f0;
    border-left: 4px solid #212529; /* Core brand color anchor */
    border-radius: 6px;
    padding: 24px;
    transition: all 0.2s ease;
}
.grid-card.text-card:hover {
    background: #ffffff;
    border-color: #212529;
    border-left-width: 6px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}
.grid-card.text-card h3 {
    color: #212529;
    margin-top: 0;
}
.grid-card.text-card p {
    color: #4a5568;
}
.grid-card.text-card .card-link {
    color: #212529;
    font-weight: 600;
    text-decoration: none;
}
/* Removes borders from all images globally */
img {
  border: 0;
  max-width: 100%;
  height: auto; /* Ensures the 308x308 image scales down perfectly on mobile phones */
}