/**
 * Theme Name: Blocksy Child Theme 10
 * Description: Child theme of Blocksy with React UI ported to PHP templates. Features game catalog, game player, and ad/overlay functionality.
 * Author: NexoraBlogs
 * Template: blocksy
 * Version: 1.0.0
 * Text Domain: blocksy-child-theme-10
 */

/* =========================================
   CSS Variables (from React globals.css)
   ========================================= */
:root {
  --bgDarkColor: #04131a;
  --bgLightColor: #f5f5fa;
  --primaryColor: #febe10;  /* Yellow/Gold - matches React branding */
  --headerDarkColor: #0f2a37;
  --headerLightColor: #dedeee;
  --secondaryDarkColor: #091c25;
}

/* =========================================
   Font Faces (Goli font)
   ========================================= */
@font-face {
  font-family: 'Goli';
  src: url('assets/fonts/Goli-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Goli';
  src: url('assets/fonts/Goli-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Goli';
  src: url('assets/fonts/Goli-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Goli';
  src: url('assets/fonts/Goli-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Goli';
  src: url('assets/fonts/Goli-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}

/* =========================================
   Base Styles
   ========================================= */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  font-family: 'Goli', sans-serif !important;
}

body {
  color: #fff;
  background: var(--bgDarkColor);
}

a {
  color: inherit;
  text-decoration: none;
}

.custom-container {
  width: 100%;
  padding: 0 5.2%;
}

/* =========================================
   Button Styles
   ========================================= */
.button {
  color: white;
  font-weight: 600;
  background-color: var(--primaryColor);
  border: none;
  padding: 10px;
  border-radius: 10px;
}

.btn-primary {
  background-color: var(--primaryColor) !important;
  border: 1px solid var(--primaryColor) !important;
  color: #fff !important;
  font-weight: 600;
  padding: 10px 20px;
  display: block !important;
}

.btn-primary:hover {
  color: var(--primaryColor);
  background-color: transparent !important;
}

.btn-outline {
  border: 1px solid var(--primaryColor) !important;
  color: var(--primaryColor) !important;
  font-weight: 600;
  padding: 10px 20px;
  display: block !important;
}

.btn-outline:hover {
  background-color: var(--primaryColor);
  color: #fff !important;
}

/* =========================================
   Blocksy Parent Theme Compatibility
   ========================================= */
/* Blocksy parent header/footer hidden - using custom versions */
#header,
.site-header,
#footer,
.site-footer {
  display: none !important;
}

/* Force child theme styles to override parent */
body {
  background: var(--bgDarkColor) !important;
  color: #fff !important;
}

/* Override any parent theme container */
.custom-container {
  width: 100% !important;
  padding: 0 5.2% !important;
  max-width: none !important;
}

/* Override parent theme buttons */
.btn-primary {
  background-color: var(--primaryColor) !important;
  border: 1px solid var(--primaryColor) !important;
  color: #fff !important;
  font-weight: 600;
  padding: 10px 20px;
  display: block !important;
}

.btn-primary:hover {
  color: var(--primaryColor) !important;
  background-color: transparent !important;
}

.btn-outline {
  border: 1px solid var(--primaryColor) !important;
  color: var(--primaryColor) !important;
  font-weight: 600;
  padding: 10px 20px;
  display: block !important;
}

.btn-outline:hover {
  background-color: var(--primaryColor) !important;
  color: #fff !important;
}