@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wdth,wght@0,75..100,100..900;1,75..100,100..900&display=swap');

@import "postStyle.css";
@import "utilities.css";

:root {
  /* Colors */
  --color-primary: #E1C129;
  --color-secondary: #FF4808;
  --color-tertiary: #15BC9D;
  --color-gray: #A1A2AA;
  
  --bg-main: oklch(13% 0.028 261.692);
  --bg-second: #16222F;
  --bg-third: #16213E;
  --bg-transparent: rgba(235, 222, 12, 0.05);
  
  --text-main: #E7E8EB;
  --text-second: #E8E9F4;
  
  --color-heading: #CFD0D9;
  
  /* Updated Card Backgrounds */
  --card-bg: #161B21;
  /* closer to --bg-second but semi-transparent */
  --card-bg-overlap: #1D1D26;
  /* a touch of --bg-third vibe */
  
  --border-color: rgba(255, 255, 255, 0.40);
  --border-color-hover: rgba(255, 215, 0, 0.3);
  
  --gradient: linear-gradient(45deg, var(--color-primary) 40%, var(--color-secondary));
  
  /* Shadows */
  --shadow-card: 0 15px 35px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 5px 25px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.15);
  --shadow-text: 0 0 30px rgba(255, 215, 0, 0.3);
  --shadow-readmore-hover: 0 5px 15px rgba(255, 215, 0, 0.2);
  
  /* Fonts */
  --font-text: 'Roboto', sans-serif;
  --font-heading: 'Montserrat', 'Roboto', sans-serif;
  
  /* Font Sizes */
  --font-logo: 1rem;
  --font-hero-title: clamp(2rem, 4.5vw, 6rem);
  --font-card-title: 1.3rem;
  --font-card-desc: 1rem;
  --font-tag: 0.8rem;
  --font-header: clamp(2.2rem, 4vw, 4.5rem);
  --font-input: 16px;
  
  /* Radius & Spacing */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 36px;
  
  --size-sm: 20px;
  --size-md: 30px;
  --size-lg: 40px;
  
  /* Transition */
  --transition-main: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-readmore: all 0.3s ease;
}

* {
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
}

*:not(ul, ol) {
  padding: 0;
}

a {
  color: currentColor;
}

body {
  font-family: var(--font-text);
  background-image: repeating-linear-gradient(0deg, rgba(72, 72, 62, 0.11) 0px, rgba(72, 72, 62, 0.11) 1px, transparent 1px, transparent 21px), repeating-linear-gradient(90deg, rgba(72, 72, 62, 0.11) 0px, rgba(72, 72, 62, 0.11) 1px, transparent 1px, transparent 21px), linear-gradient(90deg, rgba(134, 127, 89, 0.03), rgba(134, 127, 89, 0.03));
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--size-md);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-heading);
  text-shadow: 0 0 50px rgba(255, 215, 0, 0.3);
  margin: 10px 0;
}

h1 {
  /* background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; */
  font-size: var(--font-hero-title);
  font-weight: 700;
  margin-bottom: 20px;
}

/* Header */
.navBar {
  width: 95%;
  max-width: 500px;
  padding: 10px 20px;
  position: fixed;
  top: 20px;
  left: 50%;
  translate: -50%;
  background: linear-gradient(45deg, rgba(27, 53, 56, 0.1), rgba(253, 215, 11, 0.05));
  z-index: 70;
  
}

.navBar .logo {
  font-size: 0.9rem;
  color: var(--color-primary);
}

.navBar .links {
  width: fit-content;
  min-width: 160px;
  
  a {
    padding: 12px 10px;
    font-size: 0.8rem;
    border-radius: 12px;
    
    &:hover {
      background: var(--gradient-yellow);
      box-shadow: 2px 1px 9px var(--color-primary);
    }
  }
}

/* Main Content */
.main-content {
  padding: 60px 0;
  min-height: calc(100vh - 200px);
}




.blog-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.4), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.blog-card:hover {
  transform: translateY(-10px);
  border-color: var(--card-hover-border);
  box-shadow: var(--shadow-card-hover);
}

.blog-card:hover::before {
  opacity: 0.6;
}

.blog-card p {
  color: var(--text-main);
  line-height: 1.6;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.blog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.blog-tags.center {
  justify-content: center;
}

.tag {
  background: var(--bg-transparent);
  color: var(--color-primary);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-tag);
  border: 1px solid var(--tag-border);
}

.read-more {
  background: transparent;
  border: none;
  border-bottom: solid 2px var(--color-secondary);
  color: var(--color-primary);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-readmore);
  position: absolute;
  bottom: 1rem;
  left: 2rem;
  z-index: 2;
}

.read-more:hover {
  background: var(--bg-transparent);
  box-shadow: var(--shadow-readmore-hover);
  transform: translateY(-2px);
  backdrop-filter: blur(5px);
}

b {
  font-style: italic;
  font-family: fantasy;
  font-weight: 200;
  
  &.code {
    border: solid 2px var(--tertiary);
    background: #8D86551F;
    padding: 3px 5px;
    border-radius: 12px;
    color: var(--color-primary);
  }
}

b[accent] {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

a.accent,
a[accent] {
  color: var(--color-tertiary);
}

.citation {
  font-style: italic;
  font-family: fantasy;
}

.arg {
  margin-bottom: 25px;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.arg h2 {
  margin-bottom: 15px;
  color: var(--color-heading);
  font-size: 1.5rem;
  text-align: center;
}


.arg p {
  line-height: 1.7;
  max-width: 400px;
}

.card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: 10px;
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.7s ease-in-out;
}

/* Responsive */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-grid-mobile);
  }
  
  .nav-buttons .carousel-btns button {
    font-size: 0.7rem;
  }
  
  .carousel-container {
    padding: 8px;
  }
  
  .carousel-slide.title-slide p {
    font-size: 1rem;
  }
  
  .carousel-slide .body {
    font-size: 1rem;
  }
  
  .carousel-controls {
    padding: 20px;
  }
  
  b {
    font-weight: 200;
  }
}


input[type="range"] {
      -webkit-appearance: none;
      height: 14px;
      border-radius: 10px;
      outline: none;
      cursor: pointer;
}
/* Chrome / Safari / Edge */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid #ff6600;
  box-shadow: 0 0 5px rgba(255, 102, 0, 0.6);
  cursor: pointer;
  transition: 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  border: 2px solid #ff6600;
  box-shadow: 0 0 5px rgba(255, 102, 0, 0.6);
  cursor: pointer;
  transition: 0.2s;
}

input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.2);
}





pre code.hljs {
  display: block;
  overflow-x: auto;
  line-height: 20px;
  max-width: 100vw;
  font-size: 0.8rem;
  margin-top: 0;
}

code.hljs {
  padding: 12px 15px
}

code.hljs.one-line {
  padding: 0px !important;
}

pre code.hljs::-webkit-scrollbar {
  display: none;
}

pre {
  max-width: 100vw;
  box-sizing: border-box;
}

.hljs {
  color: #c9d1d9;
  background: #0d1117
}

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  color: #ff7b72
}

.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  color: #d2a8ff
}

.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id,
.hljs-variable {
  color: #79c0ff
}

.hljs-meta .hljs-string,
.hljs-regexp,
.hljs-string {
  color: #a5d6ff
}

.hljs-built_in,
.hljs-symbol {
  color: #ffa657
}

.hljs-code,
.hljs-comment,
.hljs-formula {
  color: #8b949e
}

.hljs-name,
.hljs-quote,
.hljs-selector-pseudo,
.hljs-selector-tag {
  color: #7ee787
}

.hljs-subst,
.hljs-params,
.hljs-property {
  color: #c9d1d9
}

.hljs-section {
  color: #1f6feb;
  font-weight: 700
}

.hljs-bullet {
  color: #f2cc60
}

.hljs-emphasis {
  color: #c9d1d9;
  font-style: italic
}

.hljs-strong {
  color: #c9d1d9;
  font-weight: 700
}

.hljs-addition {
  color: #aff5b4;
  background-color: #033a16
}

.hljs-deletion {
  color: #ffdcd7;
  background-color: #67060c
}