:root {
    --bg: #05070a;/* INCLUDED */
	--accent: #0984e3; /* INCLUDED */
    --border-style: 1px solid #507396; /* INCLUDED */
    --font-main: 'JetBrains Mono', monospace; /* INCLUDED */
	--fontColor: #505052; /* INCLUDED */
	--BGOne: #E2E2E2; /* INCLUDED */
	--BGTwo: #D6D6D6; /* INCLUDED */
	--glass: #384861; /* INCLUDED */
	--text-dim: ;
	--accent-faded: ;
	--text-main: ;
	--input-bg: #f8f8f8;
	--ColumnBorder:	#507396;
	
	--tooltip-shadow: rgba(0, 0, 0, 0.1);	
	
	
	--bg-main: #05070a;
    --border: #21262d;
    --bg: #05070a;
    --panel: #f8f8f8;
	--accent: #121212;
    
    --corner-display: block; /* Show those cool corner brackets */
    --font-main: 'JetBrains Mono', monospace;
	--content: #05070a; /*#0d1117*/
	--fontColor: #505052;
	--spacer-glow: rgba(29, 185, 100, 0.4);
	--glass: #384861;
    --header-bg: #f8f8f8;
    --nav-text: #505052;

	--Sub-Cats: margin-left: 5px;
	
	
	--LNHover: #c5c9d4;
	--LNC: #334882;
	

}

html {
  scroll-padding-top: 120px; /* Adjust based on your header height */
  scroll-behavior: smooth;    /* Optional: Makes the jump look nicer */
}


.columnLeft {
    flex: 5%;
    min-width: 150px;
    padding: 5px;
    border: 1px double var(--ColumnBorder);
}





/* Container for spacing */
.kb-search-container {
    margin-bottom: 25px;
    padding-bottom: 10px;
    /* Uses your global border style for consistency */
    border-bottom: var(--border-style);
	width: 100%;
}

/* Wrapper to position the icon inside the box */
.search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 5px;
    font-size: 14px;
    opacity: 0.5;
	margin-top: 10px;
	border: none;
}

/* The actual Search Box */
.kb-search-box {
    width: 100%;
    padding: 12px 12px 12px 35px; /* Extra padding on left for icon */
    background: var(--input-bg);
    color: var(--text-main);
    border: var(--border-style);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
	margin-top: 10px;
	margin-top: 10px;
}

.kb-search-box:focus {
    outline: none;
    border-color: var(--accent); /* Your brand color (e.g. Spotify Green or Blue) */
    box-shadow: 0 0 0 3px var(--accent-faded);
}

/* Recent Articles Section */
.kb-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    margin-bottom: 15px;
}



.kb-article-list {
    list-style: none;
    margin-top: 5px;
    border-top: var(--border-style); /* Subtle divider from the search box */
}

.kb-article-list li {
    display: flex;           /* 1. Use Flexbox */
    align-items: flex-start; /* 2. Aligns to top, but we'll nudge it */
    gap: 4px;                /* 3. Perfect horizontal spacing */
    margin-bottom: 5px;
}

/* Custom Bullet Point (Modern & Minimal) */
.kb-article-list li::before {
    content: "→";
    color: var(--accent);
    opacity: 0.6;
    font-size: 14px;
    line-height: 1.4;        /* 4. Match the line-height of your 'a' tag */
    
    /* 5. If it's still 1-2px off, use a tiny nudge: */
    position: relative;
    top: 12.5px;
}

.kb-section ul { list-style: none; padding: 0; }
.kb-section li a {
    color: var(--text-dim);
    text-decoration: none;
    padding: 12px;
    display: block;
    border-radius: 6px;
    transition: 0.2s;
    font-size: 0.9rem;
}
.kb-section li a:hover, .kb-section li a.active {
    background: var(--glass);
    color: var(--accent);
    padding-left: 10px;
}


.tooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black;*/
  box-shadow: 0 4px 8px var(--tooltip-shadow);
}


.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px;
  font-size: 10pt !important;
  background-color: var(--BGOne);
  color: var(--fontColor);
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 25%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

#nameError {
  color: hsl(0, 76%, 50%); /* Red text */
  font-size: 0.8em;
  display: block; /* Ensures the message is on its own line */
  transition: all 0.5s ease;
}

.arrow {
  opacity: 0; /* Hide the arrow initially */
  transition: opacity 0.3s ease; /* Optional: adds a smooth fade effect */
  float: right;
}

.TagLinks:hover .arrow {
  opacity: 1; /* Show the arrow when the parent is hovered */
}

.TagLinks a {
    display: block;
    border-bottom: 1px dotted var(--border-dotted);
    padding: 5px;
}

.On {float: right; width:34px !important; height=: 19px !important;}



        @media (max-width: 768px) {
  html, body, .cffWrapper {
    overflow-x: clip !important; 
  }

  .cffWrapper {
    height: auto !important; /* Ensure the wrapper doesn't trap the header */
  }

            .columnLeft { display: none; }

            .mobile-img { width: 40px; height: 40px; background: #ddd; }
        }
		
		
		
		
#control-panel {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%); /* Center vertically */
  width: 220px;
  background-color: var(--header-bg);
  color: white;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px 0 0 12px;
  box-shadow: -4px 0 15px rgba(0,0,0,0.3);
  font-family: sans-serif;
  overflow: hidden;
  z-index: 1000; /* Ensure it stays on top */
}

/* Slide it mostly off-screen when collapsed */
#control-panel.panel-collapsed {
  transform: translateY(-50%) translateX(180px);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background-color: var(--header-bg);
  cursor: pointer;
}

.panel-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.panel-items li {
  padding: 15px;
  border-top: 1px solid #444;
  cursor: pointer;
}

.panel-items li:hover {
  background-color: #4a4a4a;
}

.AdminPanel{
	color: var(--fontColor);
}



	
		
/*==================Menu/Header====================*/
 .main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--header-bg);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: background 0.3s ease;
	height: 120px;
	width: 100%;
}
/* TOP NAV */
.navbarHeader {
    display: flex;
    justify-content: space-between;
    align-items: l;
    
    margin: 0 auto;
    padding: 15px 20px;
	
	
}

    .mobile-menu-btn {
        display: none;
    }
	

.nav-logo {
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--nav-text);
	margin-right: 25px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 15px;
	margin-top: 0; /*If you want a slight gap, change this to 1px*/
	
	
}

.nav-item{
   height: 25px; /*Without this, the border would be on TOP instead of around the item.*/
   border: 1px solid transparent; /*Without this, the items would move causing everything to move.*/
}



#SearchPanel {
    display: flex;
	justify-content: flex-end; /*When you select [Choose] without this, it would move to the left.*/
    list-style: none;
    gap: 15px;
	margin: 35px 0 0 -490px; /*If you want a slight gap, change this to 1px*/
	/*border: 1px double #470210; /*For Testing (#470210 = Blood Cell)*/
	width: 595px; /*550px; Keep this along with the Margin-left in sync.*/
	background-color: #1a1a1a; /* Deep gray background */
    padding: 5px;
    border-radius: 8px;
    color: #e0e0e0; /* Off-white text */
	height: 50px !important;
	
}

/* Push the form to the right on desktop, or order it first on mobile */
#SearchForm {
    order: 2; 
	
}

/* The dynamic content containers */
.SearchBand {
    order: 1;
}

.SearchBand{
margin-left: auto;
}

.nav-links a {
    text-decoration: none;
    color: var(--nav-text);
    font-weight: 500;
    transition: color 0.3s;

}

/* Target your banner image class */
.nav-logo img, .banner-image {
    display: block;      /* Treats image as a box */
    margin-left: 0;      /* Forces it to the absolute left */
    margin-right: auto;  /* Pushes all extra space to the right */
    padding-left: 0;     /* Removes any 200px desktop padding */
}

/* If the parent container is a Flexbox (common in headers) */
.navbarHeader, .header-container {
    display: flex;
    justify-content: flex-start; /* Aligns all children to the left */
}
.horizontal-list {
  display: flex; /* Makes the list items arrange in a row */
  list-style: none; /* Removes bullet points */
  padding: 0; /* Removes default left padding/margin */
  margin: 0;
  gap: 16px; /* Adds space between items (modern alternative to margins) */
}

.horizontal-list li.Logo a {
  text-decoration: none; /* Removes underlines from links */
  /* Add other styling like color, padding, etc. */
}

.Logo{
display: inline-block; margin: 0;
}

/* Base style for both images */


.desktop-img {
    display: block; /* Show the desktop image by default */
    width: 100%; /* Optional: adjust sizing as needed */
    height: auto;
}

.mobile-img {
    display: none !important; /* Hide the mobile image by default */
	transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
}



.FFHide .SMHide{
 display: none !important;
}

@media (min-width: 688px) and (max-width: 785px) {
	    .desktop-img {
        display: none !important; /* Hide the desktop image on mobile */
    }
    .mobile-img {
        display: block !important; /* Show the mobile logo on mobile */
		padding-top: -20px;

		float: left;
    }
	    .mobile-menu-btn {
        display: none !important;
    }

}
@media (min-width: 516px) and (max-width: 715px){
	    .desktop-img {
        display: none !important; /* Hide the desktop image on mobile */
		}
	    .mobile-img {
        display: block !important; /* Hide the desktop image on mobile */
		}

}

/* Mobile Adjustments */
@media (min-width: 400px) and (max-width: 700px) {
	.main-header{
    position: relative;
    /*border: 1px double red;  /* Used for Testing*/
	}
	
    .nav-links {
        display: none; /* Hide on mobile by default */
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--header-bg);
        padding: 20px;
		
    }
    
    .nav-links.active {
        display: flex;
    }
	
.Links{
  border-bottom: 1px double #121212;
}

.FFHide .SMHide{
 display: block !important;
 border: 1px double purple;
}

.FFShow .SMShow{
 display: none !important;
 border: 1px double purple;
}

	#SearchPanel { /*(min-width: 400px) and (max-width: 716px)*/
    display: flex;
    flex-direction: row; /* Side-by-side on Desktop */
    gap: 20px;           /* Space between the menu and the content */
    align-items: flex-start;
	/*border: 1px double red; /*For Testing*/
	margin: 55px 0 0 -5px; /*If you want a slight gap, change this to 1px*/
	width: 400px;
}
    #SearchForm {
        order: 1; /* Move Select Menu to the TOP */
        margin-bottom: 10px;
    }

    .SearchBand {
        order: 2; /* Move FormField/SelectMenu results to the BOTTOM */
		margin: -15px 0 0 5px;

    }
    .mobile-menu-btn {
        display: block;
        background: none;
        border: none;
        font-size: 1.8rem;
        color: var(--nav-text);
        cursor: pointer;
		float: right;
		margin-top: -50px;
    }
	
	    .desktop-img {
        display: none !important; /* Hide the desktop image on mobile */
		}
	    .mobile-img {
        display: block !important; /* Hide the desktop image on mobile */
		}
}


/* Universal styles for Inputs and Select Menus */
.form-control, 
.Search, 
input[type="text"] {
    background-color: #2d2d2d !important; /* Slightly lighter gray for fields */
    color: #ffffff !important;
    border: 1px solid #444 !important;
    border-radius: 4px;
    padding: 10px 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus state: adds a subtle glow when clicking into a field */
.form-control:focus, 
.Search:focus {
    border-color: #007bff !important; /* Accent blue */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5) !important;
    outline: none;
}

/* The Submit Button */
.btn-dark-search {
    background-color: #3d3d3d;
    color: #fff;
    border: 1px solid #555;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s ease;
}

.btn-dark-search:hover {
    background-color: #007bff; /* Turns blue on hover */
    border-color: #0056b3;
}

/* Specific styling for the Select Menu dropdown arrow */
select.Search {
    appearance: none;
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org" width="24" height="24" fill="white" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

.form-control, .btn-dark-search{
    background-color: #2d2d2d !important;
    color: #666 !important;
    border: 1px solid #444 !important;
    border-radius: 4px;
    padding: 10px 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}


    .mobile-menu-btn {
        display: none;
    }


/* The "Lock": Hide by default */
#Cats, #Blog {
  display: none;
}

@media (max-width: 768px) {
  /* 1. Ensure the header doesn't cut off the menu */
  .main-header{
	position: sticky;  
    display: flex !important;
    flex-direction: row !important; /* Forces side-by-side */
    justify-content: center;       /* Centers the group */
    align-items: center;           /* Centers them vertically in the 50px */
    height: 50px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
}
 /*==================Menu/Header====================*/