@charset "UTF-8";

@import "variables";
@import "theme-init";
@import "bootstrap/bootstrap";
@import "navbar";
@import "menu";
@import "raditian";
@import "blog";
@import "experience";
@import "print";
@import "search";
@import "page-transition";
@import "skills";
@import "features";

/** main style **/
.header .navbar-brand span:first-child {
  color: $base-color;
}

.header .container {
  padding-left: 10px;
}

html body ::selection {
  background-color: $base-color;
  color: #fff;
}

.container {
  padding-left: 24px;
  padding-right: 24px;
}

.container {
  padding-left: 24px;
  padding-right: 24px;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: normal;
  color: #000;
  margin-bottom: 8px;
}

.btn:focus-visible{
  box-shadow: 0 0 0 0.2rem $primary;
}

@media (min-width: 992px) {
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 10px;
  }
}

h1,
h2 {
  margin-bottom: 16px;
}

h2 {
  font-size: 32px;
}

@media (min-width: 992px) {
  h1 {
    margin-bottom: 10px;
  }
  h2 {
    margin-bottom: 10px;
    font-size: 36px;
  }
}

h3,
h4 {
  font-size: 20px;
  font-weight: 600;
}

@media (min-width: 992px) {
  h3,
  h4 {
    font-size: 32px;
  }
  p {
    line-height: 28px;
  }
}

p {
  font-size: 16px;
  font-weight: 300;
  line-height: 28px;
  color: #333;
}

p + p {
  margin-top: -12px;
}

b, strong{
  font-weight: 600;
}

.display-1 {
  font-size: 36px;
  font-weight: 800;
  line-height: normal;
  color: #000;
}

.showcase-section .platform-links.shortcode {
  /* align to the left margin */
  margin-left: -40px;
}

@media (min-width: 992px) {
  .display-1 {
    font-size: 60px;
  }
}

.lead {
  margin-bottom: 1rem;
}

.lead a,
p a,
span a {
  color: #000;
  font-weight: 600;
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  transition: all 0.5s;
}

.lead a:hover,
p a:hover,
span a:hover {
  color: $base-color;
}

.lead {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0px;
  color: #000;
}

br {
  content: "";
  margin: 2em;
  display: block;
  font-size: 24%;
}

@media (min-width: 992px) {
  .lead {
    font-size: 18px;
  }
  .contact {
    margin-top: -2px;
  }
}

@media (min-width: 992px) {
  .ml-lg-auto,
  .mx-lg-auto {
    margin-left: auto !important;
  }

  #mobile-header-language-selector,
  #mobile-header-color-selector {
    display: none;
  }
}

.dropdown-item.selected {
  font-weight: bold;
}

#mobile-header-language-selector,
#mobile-header-color-selector {
  flex-direction: column;
}

#languages-dropdown-mobile-header,
#theme-dropdown-mobile-header {
  font-size: inherit;
}

a.dropdown-item.translation,
li.dropdown-item.current.selected {
  width: 100%;
  padding: 4px 10px;
}

li.dropdown-item.choice a {
  padding-left: 30px;
}

.dropdown-menu button[aria-pressed="true"] {
  font-weight: bold;
}

html[data-bs-theme="dark"] {
  #dark-toggle {
    span.dark {
      display: none;
    }
  }
}

html[data-bs-theme="light"] {
  #dark-toggle {
    span.light {
      display: none;
    }
  }
}

footer_links .nav-item .nav-link::after {
  color: white;
  background-color: white !important;
}

/* skip to content */
.skip-to-content-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: white;
  color: black;
  opacity: 0;
}

.skip-to-content-link:focus {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

/* dark mode */
@include color-mode(dark) {
  $primary: $dark-primary;
  html body,
  body {
    color: #fff;
    background-color: #181818;
  }
  .header .navbar-brand span:nth-child(2) {
    color: #fff;
  }
  .header .navbar .nav-item .nav-link::after {
    background-color: #fff;
  }
  .header .navbar .nav-item .nav-link:hover a {
    text-decoration: none;
  }

  .navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }
  .header.collapse.show::before,
  .header.collapsing::before {
    background-color: #181818;
  }

  @media (min-width: 992px) {
    .header .navbar .nav-item:hover .nav-link::after {
      background-color: #fff;
    }
  }

  @media only screen and (max-width: 990px) {
    .header .navbar .nav-item:first-child {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .header .navbar .nav-item {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
  }
  .header--sticky-triggered {
    background: #181818;
  }
  .header .navbar-light .navbar-nav .nav-link,
  .header .navbar-light .navbar-nav .btn-link {
    color: #fff;
  }
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #fff;
  }
  .section li::before {
    background-color: $light-text-emphasis-dark;
  }
  .display-1 {
    color: #fff;
  }
  .lead {
    color: #fff;
  }

  .lead a,
  p a,
  span a {
    color: #fff;
  }
  .lead a:hover,
  p a:hover,
  span a:hover {
    color: $dark-primary;
  }
  p {
    color: $light-text-emphasis-dark;
  }
  .platform-links [class^="icon-"] {
    color: #fff !important;
  }

  .education__degree,
  .experience__date {
    color: #a6a6a6;
  }
  .education__title {
    color: #fff;
  }
  .education__date {
    color: #d5d5d5;
  }
  .education::before {
    background-color: #202020;
  }
  .testimonial__author-info span {
    color: #f18983;
  }
  .section--contact .container {
    background-color: #181818;
  }
  .contact__info span {
    color: #fff;
  }
  .contact__info h3 {
    color: #bebdbd;
  }
  .section--contact {
    background-image: url(../img/contact-bg-dark.png);
    background-color: #181818;
  }
  .btn-primary {
    background-color: #fff;
    color: #000;
  }
  .btn-primary:hover {
    border-color: #fff;
    color: #fff;
    background: transparent;
  }
  .btn-frameless {
    color: #fff;
    border-color: #fff;
  }
  .btn:focus-visible {
    color: black;
    background-color: white;
    box-shadow: 0 0 0 0.2rem $primary;
  }
  .btn-frameless.disabled,
  .btn-frameless.focus,
  .btn-frameless:disabled,
  .btn-frameless:focus,
  .btn-frameless:hover,
  .btn-frameless:not(:disabled):not(.disabled).active,
  .btn-frameless:not(:disabled):not(.disabled):active,
  .show > .btn-frameless.dropdown-toggle {
    background-color: white;
    border-color: #fff;
    color: #181818;
  }
  input.form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],

  textarea {
    color: #fff;
    border-bottom: 1px solid #fff;
    background-color: #181818;
  }
  input[type="text"]::placeholder,
  input[type="email"]::placeholder,
  textarea::placeholder {
    color: #6e6e6e;
  }
  input[type="text"]:focus,
  input[type="text"]:active,
  input[type="email"]:focus,
  input[type="email"]:active,
  textarea:focus,
  textarea:active {
    border-bottom: 2px solid #fff;
  }
  .rad-subscription-group input,
  .rad-subscription-group textarea {
    border: none;
    background: none;
  }
  .rad-subscription-group input[type="text"]:focus,
  .rad-subscription-group input[type="email"]:focus,
  .rad-subscription-group input[type="password"]:focus,
  .rad-subscription-group textarea:focus {
    outline: none;
    box-shadow: none;
    border: none;
  }

  .posts-list article.summary {
    color: #c3c3c3;
  }
  .post-summary.post-content p,
  .post-summary.post-content * {
    color: white;
  }

  .text-muted {
    color: rgba(255, 255, 255, 0.6);
  }

  .dropdown-item.active,
  .dropdown-item:active,
  .dropdown-item:focus,
  .dropdown-item:hover {
    background-color: $base-color;
  }

  // Blog post meta section dark mode
  #blog-single #meta {
    #topics,
    .tags {
      li a {
        background-color: #2a2a2a;
        color: #e0e0e0;
        border: none;

        &:hover {
          background-color: #3a3a3a;
          color: #fff;
        }
      }
    }
  }

  // General tags styling for dark mode (consistency across all pages)
  ul.tags,
  ul.topics,
  #topics,
  ul.list-taxonomy {
    li a {
      background-color: rgba(255, 255, 255, 0.08);
      color: #e8e8e8;
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

      &:hover {
        background-color: rgba(255, 255, 255, 0.15);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 12px rgba(255, 255, 255, 0.1);
        transform: translateY(-2px);
      }
    }
  }

  // Blog sidebar dark mode improvements
  .blog-sidebar {
    .sidebar-section {
      background: linear-gradient(135deg, rgba(42, 42, 42, 0.6) 0%, rgba(35, 35, 35, 0.7) 100%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);

      h3 {
        color: #fff;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        border-bottom: 2px solid rgba(255, 255, 255, 0.15);
        padding-bottom: 0.5rem;
      }

      ul.tags li a {
        background: rgba(255, 255, 255, 0.08);
        color: #e8e8e8;
        border: 1px solid rgba(255, 255, 255, 0.12);
        font-weight: 400;

        &:hover {
          background: rgba(255, 255, 255, 0.15);
          color: #fff;
          border-color: rgba(255, 255, 255, 0.2);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
          text-decoration: none;
        }
      }

      &.recent-posts {
        ul li {
          a {
            color: rgba(255, 255, 255, 0.8);
            
            &:hover {
              color: #fff;
              text-decoration: underline;
            }
          }

          .post-date {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.8rem;
          }
        }
      }
    }
  }
}

/* end dark mode */