/**
 * Help Scout Docs - Minimal EN3 Branding
 * Only essential color and font changes
 * Version: 1.0 Minimal
 */

/* ============================================
   FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================
   COLORS - EN3 Variables
   ============================================ */
:root {
  --en3-teal: #00c1bb;
  --en3-teal-dark: #009a96;
  --en3-teal-darker: #007470;
  --en3-teal-light: #ccf3f1;
  --en3-teal-lighter: #e0fffe;

  --en3-blue: #f1f3fe;
  --en3-blue-dark: #8d98f3;
  --en3-blue-darker: #c6cbf9;
  --en3-blue-light: #e2e5fc;;


}

/* ============================================
   BASE - Font Family
   ============================================ */
body,
h1, h2, h3, h4, h5, h6,
p, a, li, span, div {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

/* Teal header background */
header,
.navbar,
.navbar-default {
  background-color: var(--en3-teal) !important;
}

/* Navigation links in header */
.navbar a,
.navbar-nav a,
nav.navbar a {
  color: white !important;
}

/* ============================================
   LINKS
   ============================================ */

/* All content links should be teal */
a {
  color: var(--en3-teal) !important;
}

a:hover {
  color: var(--en3-teal-darker) !important;
}

/* ============================================
   BUTTONS
   ============================================ */

/* Primary buttons */
.btn-primary,
button.btn-primary,
input[type="submit"] {
  background-color: var(--en3-teal) !important;
  border-color: var(--en3-teal) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"]:hover {
  background-color: var(--en3-teal-dark) !important;
  border-color: var(--en3-teal-dark) !important;
}

#fullArticle .admin-edit {
    border: 1px solid #00c1bb !important;
    border-radius: 15px;
    background: none;
}

   fullArticle .admin-edit :hover {
          border: var(--en3-teal);
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
        }

/* ============================================
   SEARCH
   ============================================ */

/* Search button - comprehensive targeting */
#docsSearch {
    background: white;
}

.search-form button,
button[type="submit"].search-submit,
.btn-info,
button.btn-info,
.search-button,
.c-form__submit,
button[type="submit"] {
  background-color: var(--en3-teal) !important;
  border-color: var(--en3-teal) !important;
  color: white !important;
}

.search-form button:hover,
button[type="submit"]:hover,
.btn-info:hover,
button.btn-info:hover,
.search-button:hover {
  background-color: var(--en3-teal-dark) !important;
  border-color: var(--en3-teal-dark) !important;
}

/* Search input styling */
.search-form input,
input[type="search"],
.c-form__input {
  border-color: rgba(0, 0, 0, 0.12) !important;
  font-family: 'Inter', sans-serif !important;
}

#searchBar.sm button {
background: none !important;
}

.search-form input:focus,
input[type="search"]:focus {
  border-color: var(--en3-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0, 193, 187, 0.2) !important;
}

/* ============================================
   SIDEBAR - FIX
   ============================================ */

/* Remove teal background from ALL sidebar links */
.docs-sidebar a,
.category-list a,
.nav-list a {
  background-color: transparent !important;
  color: rgba(0, 0, 0, 0.87) !important;
}

/* Only ACTIVE sidebar links get teal background */
.docs-sidebar a.active,
.category-list a.active,
.nav-list a.active,
.docs-sidebar li.active > a {
  background-color: var(--en3-teal-light) !important;
  color: var(--en3-teal-darker) !important;
}

/* Sidebar hover state */
.docs-sidebar a:hover,
.category-list a:hover,
.nav-list a:hover {
  background-color: rgba(0, 193, 187, 0.04) !important;
  color: var(--en3-teal) !important;
}

/* ============================================
   CATEGORY CARDS (if they exist)
   ============================================ */

.threeCol .collection {
    background: white !important;
    border: 1px solid var(--en3-teal);
    border-radius: 15px;
  box-shadow: 0 0 0 2px rgba(0, 193, 187, 0.2) !important;

}

.threeCol h2 a {
    color: black !important;
}

 .threeCol .popArticles li, .twoCol .popArticles li {
    border: 1px solid lightblue;
    border-radius: 25px;
    padding: 10px;
    color: black !important;
  background-color: var(--en3-blue) !important;
   text-align: center;
  
a { 
	i{
    	  visibility:hidden;
	}
	span{
	  color:black;
	}
 }

}

.articleList {
    display: flex;
    flex-wrap: wrap;
li {
    border: 1px solid lightblue;
    border-radius: 25px;
    padding: 10px 15px;
    color: black !important;
  background-color: var(--en3-blue) !important;
   text-align: center;
  margin: 5px 10px;
a { 
	i{
    	  visibility:hidden;
	}
	span{
	  color:black;
	}
 }

	}
}


/* ============================================
   FOCUS STATES (Accessibility)
   ============================================ */

a:focus,
button:focus,
input:focus {
  outline-color: var(--en3-teal) !important;
}