/*
 * Eslami & Co. Base Stylesheet
 * CSS Reset, Variables, and Base Element Styles
 * All component styles are now in Tailwind utility classes
 */

/* ==================== ROOT VARIABLES ==================== */

:root {
  --rgb-black: 0, 0, 0;
  --rgb-blue: 0, 100, 230;
  --rgb-blue-dark: 0, 55, 115;
  --rgb-blue-darker: 0, 40, 218;
  --rgb-blue-light: 194, 246, 255;
  --rgb-blue-lighter: 242, 247, 254;
  --rgb-green: 0, 177, 50;
  --rgb-green-dark: 0, 159, 18;
  --rgb-grey: 52, 70, 86;
  --rgb-grey-dark: 15, 33, 50;
  --rgb-grey-light: 100, 127, 148;
  --rgb-grey-lighter: 244, 246, 247;
  --rgb-white: 255, 255, 255;

  --color-slate-900: oklch(20.8% 0.042 265.755);
  --color-slate-300: oklch(86.9% 0.022 252.894);

  --color-black: rgb(var(--rgb-black));
  --color-blue: rgb(var(--rgb-blue));
  --color-blue-dark: rgb(var(--rgb-blue-dark));
  --color-blue-darker: rgb(var(--rgb-blue-darker));
  --color-blue-light: rgb(var(--rgb-blue-light));
  --color-blue-lighter: rgb(var(--rgb-blue-lighter));
  --color-green: rgb(var(--rgb-green));
  --color-green-dark: rgb(var(--rgb-green-dark));
  --color-grey: rgb(var(--rgb-grey));
  --color-grey-dark: rgb(var(--rgb-grey-dark));
  --color-grey-light: rgb(var(--rgb-grey-light));
  --color-grey-lighter: rgb(var(--rgb-grey-lighter));
  --color-white: rgb(var(--rgb-white));

  --font-family-family: 'IBM Plex Serif', Serif;
  --font-family-inter: 'IBM Plex Mono', Sans-Serif;
  --font-family-inter-display: 'Inter Display', Sans-Serif;
  --font-family-cascadia: 'Cascadia Code', Monospace;
  --font-mono: 'IBM Plex Mono', Monospace;

  /* --font-size: clamp(1.375rem, 2.225vw, 2rem);

  --letter-spacing: -0.0015em;

  --line-height: 1.3; */

  --transition: 0.15s cubic-bezier(0.33, 1, 0.68, 1);
}

/* ==================== BASE ELEMENTS ==================== */

html {
  background: var(--color-slate-900);
  font-size: 16px;
  min-height: -webkit-fill-available;
  scroll-behavior: smooth;
  /* scroll-padding-top: calc(var(--font-size) * 3.4); */
}

html.zoom-active {
  overflow: hidden;
}

body {
  background: var(--color-slate-900);
  color: var(--color-slate-300);
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-family);
  font-feature-settings: 'liga', 'dlig';
  /* font-size: var(--font-size); */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: 400;
  /* letter-spacing: var(--letter-spacing);
  line-height: var(--line-height); */
  min-height: 100vh;
  -webkit-tap-highlight-color: rgba(var(--rgb-blue-light), 0);
  text-rendering: optimizeLegibility;
}

@supports(-webkit-touch-callout: none) {

  body {
    min-height: -webkit-fill-available;
  }

}

a {
  color: var(--color-white);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.0625em;
}

b,
strong {
  color: var(--color-white);
  font-weight: 700;
  letter-spacing: normal;
}

i,
em {
  font-style: italic;
}

img,
source,
video {
  height: auto;
  max-width: 100%;
  width: 100%;
}

video::cue {
  font-family: var(--font-family-inter);
  font-feature-settings: 'liga', 'dlig', 'ss03';
  font-size: 80%;
  font-weight: 600;
  line-height: 1;
}

table {
  background: rgba(var(--rgb-blue-light), 0.05);
  border-collapse: collapse;
  color: var(--color-white);
  font-family: var(--font-family-inter);
  font-feature-settings: 'liga', 'dlig', 'ss03';
  font-weight: 400;
  line-height: 1.5;
  table-layout: fixed;
  text-align: center;
  width: 100%;
}

table thead tr,
table tbody tr:nth-of-type(even) {
  background: rgba(var(--rgb-blue-light), 0.05);
}

table th,
table td {
  border: 2px solid var(--color-blue);
  font-size: 55%;
  padding: 0.9em 0.7em;
}

table th {
  font-family: var(--font-family-inter-display);
  font-feature-settings: 'liga', 'dlig', 'ss03';
  font-weight: 700;
  vertical-align: middle;
}

code {
  background: rgba(var(--rgb-blue-dark), 0.2);
  border-radius: 0.1em;
  color: var(--color-white);
  display: inline-block;
  font-family: var(--font-family-cascadia);
  font-weight: 300;
  font-size: 85%;
  line-height: 1.1;
  padding: 0.2em 0.3em 0.15em 0.3em;
}

.uppercase {
  font-feature-settings: 'case', 'liga', 'dlig';
  letter-spacing: normal;
}

/* ==================== GRADIENT SUNBURST ==================== */

body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background: radial-gradient(
    ellipse 150% 100% at 50% 0%,
    rgba(var(--rgb-blue-light), 0.12) 0%,
    rgba(var(--rgb-blue-light), 0.06) 25%,
    rgba(var(--rgb-blue-light), 0.02) 50%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}

main {
  position: relative;
  z-index: 1;
}

/* ==================== RADAR SWEEP ANIMATION ==================== */

@keyframes radarSweep {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8);
  }
  100% {
    box-shadow: 0 0 0 30px rgba(16, 185, 129, 0);
  }
}

@keyframes radarPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.9);
  }
  50% {
    box-shadow: 0 0 8px 2px rgba(16, 185, 129, 0.7);
  }
}

.timeline-radar-dot {
  background-color: #10b981 !important;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8);
  animation: radarSweep 2s infinite, radarPulse 1.5s infinite;
  border-color: #059669 !important;
}

/* ==================== FAQ EXPANSION ANIMATION ==================== */

@keyframes expandDetails {
  from {
    max-height: 0;
    overflow: hidden;
  }
  to {
    max-height: 1000px;
    overflow: visible;
  }
}

details[open] > div {
  animation: expandDetails 0.4s ease-out;
}

/* ==================== RANGE SLIDER STYLING ==================== */

/* Webkit browsers (Chrome, Safari, Edge) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10b981;
  cursor: pointer;
  border: 2px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease;
  padding: 0;
  /* Increase touch target */
  margin: -10px 0;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: #059669;
  border-color: rgba(5, 150, 105, 0.5);
  box-shadow: 0 2px 12px rgba(5, 150, 105, 0.4);
  width: 24px;  
  height: 24px;
  margin: -10px 0;
}

input[type="range"]::-webkit-slider-thumb:active {
  box-shadow: 0 2px 16px rgba(5, 150, 105, 0.6);
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #10b981;
  cursor: pointer;
  border: 2px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
  transition: all 0.2s ease;
  padding: 0;
}

input[type="range"]::-moz-range-thumb:hover {
  background: #059669;
  border-color: rgba(5, 150, 105, 0.5);
  box-shadow: 0 2px 12px rgba(5, 150, 105, 0.4);
  width: 24px;
  height: 24px;
}

input[type="range"]::-moz-range-thumb:active {
  box-shadow: 0 2px 16px rgba(5, 150, 105, 0.6);
}