/* ==========================================================================
   JKVIZ.COM - Main Stylesheet
   Consolidated and optimized CSS
   ========================================================================== */

/* CSS Variables for consistent theming */
:root {
  --primary-color: #0a192f;
  --secondary-color: #1EAEDB;
  --accent-color: #53e1ea;
  --text-color: white;
  --link-color: #FFB15E;
  --button-primary: #33C3F0;
  --button-secondary: #B13E3E;
  --font-family: "Raleway-Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --container-width: 70%;
  --container-max-width: 87%;
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1000px;
  --breakpoint-desktop: 1150px;
  --background-color: #0a192f;
  --surface-color: rgba(5, 10, 20, 1);
  --border-color: #bbb;
}

/* Dark theme (default) */
[data-theme="dark"] {
  --primary-color: #0a192f;
  --background-color: #0a192f;
  --text-color: white;
  --surface-color: rgba(5, 10, 20, 1);
  --secondary-color: #1EAEDB;
  --accent-color: #53e1ea;
  --link-color: #FFB15E;
  --button-primary: #33C3F0;
  --button-secondary: #B13E3E;
  --border-color: #333;
}

/* Light theme */
[data-theme="light"] {
  --primary-color: #f5f5f5;
  --background-color: #f5f5f5;
  --text-color: #2c3e50;
  --surface-color: rgba(245, 245, 245, 0.95);
  --secondary-color: #3498db;
  --accent-color: #2980b9;
  --link-color: #e74c3c;
  --button-primary: #3498db;
  --button-secondary: #e74c3c;
  --border-color: #bdc3c7;
}

/* Reset and Base Styles */
html {
  font-size: 62.5%; /* 1rem = 10px */
  background-color: var(--background-color);
}

body {
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 400;
  font-family: var(--font-family);
  color: var(--text-color);
  background: transparent;
  background-color: transparent;
  margin: 0;
  padding: 0;
}

/* Ensure all text elements use theme colors */
p, h1, h2, h3, h4, h5, h6, div, span, a, li, td, th {
  color: var(--text-color);
}

/* Font Loading */
@font-face {
  font-family: 'Raleway-Light';
  src: url('../font/Raleway-Light.ttf') format('truetype');
  font-display: swap;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}

h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem; }
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }

@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0;
  font-size: 2rem;
  text-align: justify;
}

@media (max-width: 768px) {
  p {
    font-size: 1.5rem;
  }
}

/* Links */
a {
  color: var(--secondary-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--accent-color);
}

a:focus {
  outline: none;
}

/* Buttons */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  min-height: clamp(3.2rem, 4vw, 4.6rem);
  padding: clamp(0.6rem, 1.6vw, 1.2rem) clamp(1.6rem, 4vw, 3.2rem);
  color: var(--text-color);
  text-align: center;
  font-size: clamp(1rem, 0.5vw + 0.6rem, 1.3rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: var(--background-color);
  background-color: var(--button-primary);
  border-color: var(--button-primary);
}

.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover {
  color: var(--background-color);
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}

/* Layout System */
.container {
  position: relative;
  width: 95%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 15px;
}

@media (min-width: 480px) {
  .container {
    width: 90%;
    padding: 0 20px;
  }
}

@media (min-width: 768px) {
  .container {
    width: var(--container-width);
    padding: 0 30px;
  }
}

@media (min-width: 1024px) {
  .container {
    width: var(--container-width);
    padding: 0 40px;
  }
}

@media (min-width: 1150px) {
  .container {
    width: var(--container-max-width);
    padding: 0 50px;
  }
}

.row {
  padding: 0;
}

.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box;
}

@media (min-width: 1150px) {
  .column,
  .columns {
    margin-left: 4%;
    margin-top: 4%;
  }
  
  .column:first-child,
  .columns:first-child {
    margin-left: 0;
  }

  .one.column, .one.columns { width: 4.66666666667%; }
  .two.columns { width: 13.3333333333%; }
  .three.columns { width: 22%; }
  .four.columns { width: 30.6666666667%; }
  .five.columns { width: 39.3333333333%; }
  .six.columns { width: 48%; }
  .seven.columns { width: 56.6666666667%; }
  .eight.columns { width: 65.3333333333%; }
  .nine.columns { width: 74.0%; }
  .ten.columns { width: 82.6666666667%; }
  .eleven.columns { width: 91.3333333333%; }
  .twelve.columns { width: 100%; margin-left: 0; }

  .one-third.column { width: 30.6666666667%; }
  .two-thirds.column { width: 65.3333333333%; }
  .one-half.column { width: 48%; }

  /* Offsets */
  .offset-by-one.column, .offset-by-one.columns { margin-left: 8.66666666667%; }
  .offset-by-two.column, .offset-by-two.columns { margin-left: 17.3333333333%; }
  .offset-by-three.column, .offset-by-three.columns { margin-left: 26%; }
  .offset-by-four.column, .offset-by-four.columns { margin-left: 34.6666666667%; }
  .offset-by-five.column, .offset-by-five.columns { margin-left: 43.3333333333%; }
  .offset-by-six.column, .offset-by-six.columns { margin-left: 52%; }
  .offset-by-seven.column, .offset-by-seven.columns { margin-left: 60.6666666667%; }
  .offset-by-eight.column, .offset-by-eight.columns { margin-left: 69.3333333333%; }
  .offset-by-nine.column, .offset-by-nine.columns { margin-left: 78.0%; }
  .offset-by-ten.column, .offset-by-ten.columns { margin-left: 86.6666666667%; }
  .offset-by-eleven.column, .offset-by-eleven.columns { margin-left: 95.3333333333%; }

  .offset-by-one-third.column, .offset-by-one-third.columns { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column, .offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
  .offset-by-one-half.column, .offset-by-one-half.columns { margin-left: 52%; }
}

/* Utilities */
.u-full-width {
  width: 100%;
  box-sizing: border-box;
}

.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box;
}

.u-pull-right {
  float: right;
}

.u-pull-left {
  float: left;
}

.center-txt {
  text-align: center;
}

.text-center {
  text-transform: uppercase;
  text-align: center;
  font-size: 4.0rem;
  line-height: 1.2;
  letter-spacing: 1.2rem;
  color: var(--text-color);
  background-color: var(--background-color);
}

@media (max-width: 550px) {
  .text-center {
    font-size: 2.0rem;
    letter-spacing: 0.2rem;
  }
}

/* Clearfix */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
}

.container:after,
.row:after,
.u-cf {
  clear: both;
}