/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * colors
   */

  /* gradient */

  --bg-gradient-onyx: linear-gradient(
    to bottom right, 
    hsl(240, 1%, 25%) 3%, 
    hsl(0, 0%, 19%) 97%
  );
  --bg-gradient-jet: linear-gradient(
    to bottom right, 
    hsla(240, 1%, 18%, 0.251) 0%, 
    hsla(240, 2%, 11%, 0) 100%
  ), hsl(240, 2%, 13%);
  --bg-gradient-yellow-1: linear-gradient(
    to bottom right, 
    hsl(45, 100%, 71%) 0%, 
    hsla(36, 100%, 69%, 0) 50%
  );
  --bg-gradient-yellow-2: linear-gradient(
    135deg, 
    hsla(45, 100%, 71%, 0.251) 0%, 
    hsla(35, 100%, 68%, 0) 59.86%
  ), hsl(240, 2%, 13%);
  --border-gradient-onyx: linear-gradient(
    to bottom right, 
    hsl(0, 0%, 25%) 0%, 
    hsla(0, 0%, 25%, 0) 50%
  );
  --text-gradient-yellow: linear-gradient(
    to right, 
    hsl(45, 100%, 72%), 
    hsl(35, 100%, 68%)
  );

  /* solid */

  --jet: hsl(0, 0%, 22%);
  --onyx: hsl(240, 1%, 17%);
  --eerie-black-1: hsl(240, 2%, 13%);
  --eerie-black-2: hsl(240, 2%, 12%);
  --smoky-black: hsl(0, 0%, 7%);
  --white-1: hsl(0, 0%, 100%);
  --white-2: hsl(0, 0%, 98%);
  --orange-yellow-crayola: hsl(45, 100%, 72%);
  --vegas-gold: hsl(45, 54%, 58%);
  --light-gray: hsl(0, 0%, 84%);
  --light-gray-70: hsla(0, 0%, 84%, 0.7);
  --bittersweet-shimmer: hsl(0, 43%, 51%);

  /**
   * typography
   */

  /* font-family */
  --ff-poppins: 'Poppins', sans-serif;

  /* font-size */
  --fs-1: 24px;
  --fs-2: 18px;
  --fs-3: 17px;
  --fs-4: 16px;
  --fs-5: 15px;
  --fs-6: 14px;
  --fs-7: 13px;
  --fs-8: 11px;

  /* font-weight */
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;

  /**
   * shadow
   */
  
  --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
  --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
  --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
  --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
  --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);

  /**
   * transition
   */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease-in-out;

  /**
   * navbar backdrop
   */

  --navbar-bg: hsla(240, 1%, 17%, 0.75);

  /**
   * spacing
   */

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;

  /**
   * border-radius
   */

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

}





/*-----------------------------------*\
  #LIGHT MODE
\*-----------------------------------*/

[data-theme="light"] {

  --smoky-black:      hsl(210, 16%, 93%);
  --eerie-black-2:    hsl(0, 0%, 100%);
  --eerie-black-1:    hsl(210, 14%, 95%);
  --jet:              hsl(210, 10%, 82%);
  --onyx:             hsl(210, 12%, 88%);

  --white-1:          hsl(0, 0%, 8%);
  --white-2:          hsl(0, 0%, 10%);
  --light-gray:       hsl(0, 0%, 28%);
  --light-gray-70:    hsla(0, 0%, 28%, 0.7);

  /* Replace yellow accent with deep accessible blue */
  --orange-yellow-crayola: hsl(226, 70%, 45%);
  --vegas-gold:            hsl(226, 55%, 38%);
  --text-gradient-yellow:  linear-gradient(
    to right,
    hsl(226, 70%, 45%),
    hsl(226, 55%, 38%)
  );
  --bg-gradient-yellow-1: linear-gradient(
    to bottom right,
    hsla(226, 70%, 45%, 0.15) 0%,
    hsla(226, 70%, 45%, 0)    50%
  );
  --bg-gradient-yellow-2: linear-gradient(
    135deg,
    hsla(226, 70%, 45%, 0.15) 0%,
    hsla(226, 70%, 45%, 0)    59.86%
  ), hsl(210, 14%, 94%);

  --bg-gradient-onyx: linear-gradient(
    to bottom right,
    hsl(210, 14%, 90%) 3%,
    hsl(210, 10%, 86%) 97%
  );
  --bg-gradient-jet: linear-gradient(
    to bottom right,
    hsla(210, 14%, 88%, 0.4) 0%,
    hsla(210, 14%, 90%, 0) 100%
  ), hsl(210, 14%, 94%);
  --border-gradient-onyx: linear-gradient(
    to bottom right,
    hsl(210, 10%, 72%) 0%,
    hsla(210, 10%, 72%, 0) 50%
  );

  --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.08);
  --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.08);
  --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.08);
  --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.05);
  --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.08);

  --navbar-bg: hsla(210, 20%, 94%, 0.85);

}

/* Remove the "pressed" bezel effect in light mode */
[data-theme="light"] .has-bezel::before {
  display: none;
}

[data-theme="light"] .has-bezel {
  background: var(--eerie-black-1);
  border: 1px solid var(--jet);
}

[data-theme="light"] .icon-box { background: var(--onyx); }

[data-theme="light"] ::selection {
  background: hsl(226, 70%, 45%);
  color: hsl(0, 0%, 100%);
}

/* inline code in light mode: blue matches the new accent */
[data-theme="light"] .post-content code {
  color: hsl(226, 70%, 45%);
}





/*-----------------------------------*\
  #THEME TOGGLE BUTTON
\*-----------------------------------*/

.theme-btn {
  color: var(--light-gray);
  font-size: var(--fs-6);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--jet);
  background: var(--onyx);
  cursor: pointer;
  transition: color var(--transition-1), border-color var(--transition-1);
  line-height: 1;
}

.theme-btn:hover,
.theme-btn:focus {
  color: var(--orange-yellow-crayola);
  border-color: var(--orange-yellow-crayola);
}






/*-----------------------------------*\
  #REUSABLE UTILITIES
\*-----------------------------------*/

.has-bezel {
  position: relative;
  z-index: 1;
}

.has-bezel::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--bg-gradient-jet);
  z-index: -1;
  transition: var(--transition-1);
}


/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a { text-decoration: none; }

li { list-style: none; }

img, ion-icon, a, button, time, span { display: block; }

button {
  font: inherit;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

input, textarea {
  display: block;
  width: 100%;
  background: none;
  font: inherit;
}

::selection {
  background: var(--orange-yellow-crayola);
  color: var(--smoky-black);
}

:focus { outline-color: var(--orange-yellow-crayola); }

html { font-family: var(--ff-poppins); }

body { background: var(--smoky-black); }





/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.sidebar,
article {
  background: var(--eerie-black-2);
  border: 1px solid var(--jet);
  border-radius: 20px;
  padding: 15px;
  box-shadow: var(--shadow-1);
  z-index: 1;
}

.separator {
  width: 100%;
  height: 1px;
  background: var(--jet);
  margin: 16px 0;
}

.icon-box {
  background: var(--border-gradient-onyx);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: var(--orange-yellow-crayola);
  box-shadow: var(--shadow-1);
}

.icon-box::before { background: var(--eerie-black-1); }

.icon-box ion-icon { --ionicon-stroke-width: 35px; }

article { display: none; }

article.active {
  display: block;
  animation: fade 0.5s ease backwards;
}

@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.h2,
.h3,
.h4,
.h5 {
  color: var(--white-2);
  text-transform: capitalize;
}

.h2 { font-size: var(--fs-1); }

.h3 { font-size: var(--fs-2); }

.h4 { font-size: var(--fs-4); }

.h5 {
  font-size: var(--fs-7);
  font-weight: var(--fw-500);
}

.article-title {
  position: relative;
  padding-bottom: 7px;
}

.article-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 3px;
  background: var(--text-gradient-yellow);
  border-radius: 3px;
}

.has-scrollbar::-webkit-scrollbar {
  width: 5px; /* for vertical scrollbar */
  height: 5px; /* for horizontal scrollbar */
}

.has-scrollbar::-webkit-scrollbar-track {
  background: var(--onyx);
  border-radius: 5px;
}

.has-scrollbar::-webkit-scrollbar-thumb {
  background: var(--orange-yellow-crayola);
  border-radius: 5px;
}

.has-scrollbar::-webkit-scrollbar-button { width: 20px; }

.content-card {
  background: var(--border-gradient-onyx);
  padding: 15px;
  padding-top: 45px;
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  cursor: pointer;
}

.info-card {
  background: var(--border-gradient-onyx);
  padding: 20px;
  border-radius: 14px;
  box-shadow: var(--shadow-2);
}

.text-link {
  display: inline;
  color: var(--orange-yellow-crayola);
}

.text-link:hover,
.text-link:focus { color: var(--white-2); }

/**
 * utility classes for inline styles
 */

.map-embed {
  border: none;
}

.hidden {
  display: none;
}



/*-----------------------------------*\
  #PRINT
\*-----------------------------------*/

@media print {

  .sidebar,
  .navbar,
  .print-btn,
  .blog-filter,
  article:not(.active) {
    display: none !important;
  }

  body {
    background: #fff;
  }

  article.active {
    display: block !important;
    background: #fff;
    border: none;
    box-shadow: none;
    padding: 0;
    color: #000;
    animation: none;
  }

  .h2, .h3, .h4, .h5,
  .timeline-item-title,
  .timeline-text,
  .tag-item,
  .about-text {
    color: #000 !important;
  }

  .article-title::after {
    background: #000;
  }

}