_mixins.scss

@mixin mobile-xs{
  @media(max-width:400px){
    @content;
  }
}
@mixin mobile{
  @media(max-width:575px){
    @content;
  }
}
@mixin tablet{
  @media(max-width:767px){
    @content;
  }
}
@mixin desktop{
  @media(max-width:991px){
    @content;
  }
}
@mixin desktop-lg{
  @media(max-width:1200px){
    @content;
  }
}
@mixin desktop-xl{
  @media(min-width:1201px){ // Overriden here
    @content;
  }
}

@mixin size($size){
  width: $size; height: $size;
}

/*
  Custom Overrides
*/
.navbar-brand {
  @media(max-width:767px){
    .img-fluid {
      max-width: 200px;
      margin-top: 10px;
    }
  }
}
// Circuitverse Logo
.navigation{
  .img-fluid{
    max-width: 70% !important;
  }
}

// Navigation Bar Links
.navbar-expand-lg .navbar-nav .nav-link {
  font-weight: bold;
  padding: 10px 20px !important;
  font-size: 1rem;
}
.navbar-light .navbar-nav .nav-link:hover {
  color: #40ba84 !important;
  border-radius: 5px;
}
.search-btn{
  font-weight: bold;
  margin-left: 1rem;
}
.search-btn:hover{
  color: #40ba84;
}

// Search box visibility improvements
.search-wrapper {
  background: rgba(0, 0, 0, 0.05); // subtle overlay
}
.search-box {
  border: 2px solid #40ba84 !important; // CircuitVerse green border
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); // subtle shadow
}
.search-close {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  padding: 5px;
  width: 35px;
  height: 35px;
}
.navbar-brand{
  padding-bottom: 0;
}
.navbar-expand-lg .navbar-nav .nav-item:nth-child(1){
  display: none;
}

// Blogs theme
.block a {
  color: #40ba84;
}
.block a:hover {
  color: #40ba84;
}
.block .btn-transparent{
  border-bottom: 1px solid #40ba84;
}

// Pagination theme
.mt-5 .pagination .page-item.active .page-link {
  background: #40ba84 ;
}
.mt-5 .pagination .page-item .page-link:hover {
  background: #40ba84 ;
}

// Button Theme
.container .btn-primary {
  background: #40ba84 ;
  border-color: #40ba84 ;
}
.container .btn-primary:active,.container .btn-primary:hover, .container .btn-primary.focus, .container .btn-primary.active {
  background: #40ba84 ;
  border-color: #40ba84 ;
}

// Footer navlinks Theme
.container .social-icon a{
  color: #40ba84 ;
  border-color: #40ba84 ;
}
.container .social-icon a:hover {
  background: #40ba84 ;
  color: #fff ;
}
.text-center {
  span{
    a{
      color: #40ba84 ;
    }
  }
}

// Video
.video-shortcode {
  max-width: 100%;
  height: auto;
}

// toc
.toc {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

body .toc a {
    display: block;
    text-decoration: none;
    color: #000 !important; /* Dark black text color with !important */
    font-weight: bold !important; /* Make the text bold with !important */
    cursor: pointer;
    margin-left: 10px; /* Adjust the margin to control the indentation */
    margin-bottom: 5px; /* Reduce space between headings */
}

body .toc a:hover {
      color: #4CAF50 !important; /* Light green text color on hover with !important */
 }

 /* --- 992–1200px squeeze zone fixes --- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .banner .illustration {
    max-width: 540px !important;   /* ensure image size sticks */
    right: 15px !important;        /* prevent overlap */
  }
}
/* In the squeeze band, cap the image and give the text a nudge */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .section.pt-0 .row.shadow.bg-white.p-5 > div:first-child img {
    width: 180px !important;        /* 320–360 works well */
  }
}

// --- Button hover color overrides for CircuitVerse theme ---
.btn-primary:active,
.btn-primary:hover,
.btn-primary.focus,
.btn-primary.active,
.container .btn-primary:active,
.container .btn-primary:hover,
.container .btn-primary.focus,
.container .btn-primary.active {
  background: #368f6e !important;
  border-color: #368f6e !important;
}