#hero{

}

.bgsss-cover{
    color:white;
    background-color:rgba(0, 0, 0, 0.5);
    background-image: url(../img/PCB-dark.webp);
}

.copyright {
    font-size: 0.75rem;        /* small but readable */
    color: #6c757d;            /* Bootstrap text-muted tone */
    text-align: center;        /* centered looks intentional */
    padding: 1rem 0;           /* breathing room */
    letter-spacing: 0.02em;    /* subtle precision aesthetic */
}

/* Base callout styling */
.bs-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    background-color: var(--bs-gray-100);
    border: 1px solid var(--bs-gray-200);
    border-left-width: .25rem;
    border-radius: var(--bs-border-radius);
}
    .bs-callout h4 {
        margin-top: 0;
        margin-bottom: .25rem;
    }
    .bs-callout p:last-child {
        margin-bottom: 0;
    }

    /* Contextual modifier borders and title colors */
    .bs-callout-info {
        border-left-color: var(--bs-info);
    }
    .bs-callout-info h4 {
        color: var(--bs-info);
    }

    .bs-callout-warning {
        border-left-color: var(--bs-warning);
    }
    .bs-callout-warning h4 {
        color: var(--bs-warning);
    }

    .bs-callout-danger {
        border-left-color: var(--bs-danger);
    }

    .bs-callout-danger h4 {
        color: var(--bs-danger);
    }

pre[class*=language-]{
    padding-top:0em !important;
    padding-bottom:0em !important;
}


 .row h2, .row h3, .row h4, .row h5{
    padding-top:.5em
}

.tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.85em;
  }

    .tag.download {
        background: #e0f2ff;   /* light blue */
        color: #0057b8;        /* strong blue */
    }

    .tag.path {
        background: #e5e5e5;   /* light grey */
        color: #222;           /* dark grey/blackish */
    }

    .tag.primary {
        background: #f3e8ff;   /* light purple */
        color: #5a2ca0;        /* darker purple */

       
    }

    .tag.secondary {
        background: #e6ffe8;   /* light mint green */
        color: #1a7f37;        /* deep green */
    }


.resources {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    background: green;   /* light purple */
    color: #5a2ca0;        /* darker purple */
    font-weight: 600;
    font-size: 0.85em;
  }

/*
THESE ARE THE STYLES FOR THE HERO WITH A BACKGROUND IMAGE
THAT MAKES THE TEXT HARD TO READ.
*/
body.hero-page {

}
    body.hero-page .navbar .navbar-brand {
        color:white !important; /* pick your color */
    }

    body.hero-page .navbar .nav-item a {
        color:white !important; /* pick your color */
    }

    /* This is when the hamburger is showing on a white backgound */
    body.hero-page .navbar .navbar-collapse.collapse.show .nav-item a{
        color:var(--bs-body-color) !important; /* pick your color */
    }

    body.hero-page .navbar .nav-item a:hover {
        color:white !important; /* optional hover tone */
    }


    body.hero-page .scrolled .navbar-brand{
        color:var(--bs-body-color) !important; /* pick your color */
    }

    body.hero-page .scrolled .nav-item a {
        color:var(--bs-body-color) !important; /* pick your color */
    }
    body.hero-page .scrolled .nav-item a:hover {
        color:var(--bs-body-color) !important; /* optional hover tone */
    }

    body.hero-page #hero {
        color:white !important; /* pick your color */
    }

    .table {
        width: 100%;
        border-collapse: collapse;
        margin: 2rem 0;
        font-size: 0.95rem;
        /*background: #111; /* dark background */
        /*color: #eee;      /* light text */
        
        border-radius: 6px;
        overflow: hidden; /* rounds corners properly */
    }

    .table caption{
        padding-bottom: 1em;
    }

      .table th,
      .table td {
        padding: 14px 18px;
        vertical-align: top;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        border:1px solid lightgray;
      }
      
      .table th {
        /*background: #1a1a1a; */
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      
      /*
      .table tr:last-child td {
        border-bottom: none;
      }
      */
      
      .table a {
        color: #4da3ff;
        text-decoration: none;
      }
      
      .table a:hover {
        text-decoration: underline;
      }
      
      /* Optional: zebra striping */
      .table tr:nth-child(even) td {
        background: rgba(255, 255, 255, 0.03);
      }
      
/* Responsive: stack cells on small screens */
@media (max-width: 600px) {
.table,
.table thead,
.table tbody,
.table th,
.table td,
.table tr {
    display: block;
}

.table tr {
    margin-bottom: 1rem;
}

.table th {
    background: transparent;
    border-bottom: none;
    padding-bottom: 0;
}

.table td {
    padding: 8px 0;
    border-bottom: none;
}
}


@media (max-width: 991px) {
    /* Used on the home page when the hero is now behind the 
    title text, we need to make it readble */
    body.home .navbar .navbar-brand {
        color:white;
    }

    body.home .scrolled .navbar-brand{
        color:var(--bs-body-color) !important; /* pick your color */
    }

}

@media (max-width: 991px) {

    #hero{
        background-color:rgba(0, 0, 0, 0.5);
    }

    #hero h1{
        color:white
    }

    #hero p{
        color:white
    }

    .hero-page   .navbar{
    --bs-navbar-toggler-icon-bg-light: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-toggler-border-color-light: rgba(255, 255, 255, 0.1);
    }

    .hero-page .navbar-toggler{
        border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color-light);
    }

    .hero-page .navbar-toggler-icon{
        background-image:var(--bs-navbar-toggler-icon-bg-light)
    }
        
    .hero-page .shadow-sm   .navbar-brand{
        color:black
    }

    .hero-page .shadow-sm .navbar-toggler-icon  {
        background-image:var(--bs-navbar-toggler-icon-bg)
    }
}

@media (max-width: 991px) {
    .no-mobile{
        display: none !important;
    }
}