@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800&display=swap');

/* ── CSS Variables ──────────────────────────────────────── */
:root {
  --navy:        #111E29;
  --navy-light:  #1a2e40;
  --navy-deep:   #0c1620;
  --cyan:        #0091B3;
  --cyan-light:  #32AFC9;
  --cyan-pale:   #e8f7fb;
  --yellow:      #FFC600;
  --yellow-pale: #fff8e1;
  --green:       #73BC25;
  --orange:      #FF9119;
  --white:       #ffffff;
  --gray-100:    #f5f7fa;
  --gray-200:    #edf0f4;
  --gray-300:    #d8dde6;
  --gray-500:    #8a94a6;
  --gray-700:    #444f60;
  --text:        #1d2939;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --shadow-sm:   0 2px 8px rgba(17,30,41,0.08);
  --shadow-md:   0 6px 24px rgba(17,30,41,0.12);
  --shadow-lg:   0 16px 48px rgba(17,30,41,0.18);
  --transition:  all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Global base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Nunito Sans', 'Avenir Next LT Pro', 'Avenir Next', Avenir,
               -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: var(--text) !important;
  background: var(--gray-100) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

footer {
    border: none;
    color: #F4F6F9;
    background-color: transparent;
}

/* ── HEADER / NAVBAR ────────────────────────────────────── */
.navbar .navbar-inner,
#docsSearch {
  background: var(--navy) !important;
}

/* Gradient accent line under navbar */
.navbar .navbar-inner {
  border-bottom: 3px solid transparent !important;
  background-image: linear-gradient(var(--navy), var(--navy)),
                    linear-gradient(90deg, var(--cyan) 0%, var(--yellow) 40%, var(--green) 70%, var(--orange) 100%) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.25) !important;
}

/* ── LOGO ───────────────────────────────────────────────── */
.navbar .brand { padding-top: 10px; }
.navbar .brand img {
  width: 194px;
  filter: drop-shadow(0 2px 6px rgba(0,145,179,0.3));
}
.navbar .brand img:hover {
  filter: drop-shadow(0 4px 12px rgba(0,145,179,0.5));
}

/* ── NAVIGATION ─────────────────────────────────────────── */


.navbar .nav a,
.navbar .nav li a,
.navbar .icon-private-w {
  color: rgba(195, 229, 252, 0.85) !important;
  font-weight: 700 !important;
  font-size: 14px;
  position: relative !important;
}

.navbar .nav li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--yellow);
  border-radius: 2px;
  transition: var(--transition);
}
.navbar .nav li a:hover::after,
.navbar .nav li.active a::after {
  left: 0;
  right: 0;
}

.navbar .nav li a:hover,
.navbar .nav .active a {
  color: var(--white) !important;
}

.navbar .nav .active .caret { display: none; }

/* ── NAVIGATION RESPONSIVE ──────────────────────────────── */
@media (max-width: 1100px) {
  .navbar .nav a,
  .navbar .nav li a {
    font-size: 12px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

@media (max-width: 900px) {
  .navbar .nav a,
  .navbar .nav li a {
    font-size: 11px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    letter-spacing: 0 !important;
  }
  /* Hide underline animation on small screens to save space */
  .navbar .nav li a::after { display: none !important; }
}

@media (max-width: 768px) {
  .navbar .nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
  }
  .navbar .nav li a {
    font-size: 11px !important;
    padding: 4px 6px !important;
  }
}

/* ── SEARCH HERO ────────────────────────────────────────── */
#docsSearch {
  height: 280px !important;
  padding-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  background: var(--navy) !important;
}

/* Geometric background decoration */
#docsSearch::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -80px;
  width: 340px;
  height: 340px;
  border: 40px solid rgba(0,145,179,0.15);
  border-radius: 50%;
  pointer-events: none;
}
#docsSearch::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -50px;
  width: 260px;
  height: 260px;
  border: 30px solid rgba(115,188,37,0.1);
  border-radius: 50%;
  pointer-events: none;
}

#docsSearch h1 {
  color: var(--white) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 6px !important;
  position: relative;
  z-index: 1;
}

/* Coloured accent under hero title */
#docsSearch h1::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), var(--yellow));
  border-radius: 2px;
  margin: 8px auto 0;
}

/* ── SEARCH BAR ─────────────────────────────────────────── */
#searchBar {
  padding-top: 18px;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
}

#docsSearch{padding-top:20px;}
#docsSearch h1{color:#fff;font-size:33px;font-weight:bold;}

#searchBar{padding-top:21px;}
#searchBar .search-query{border:1px solid #32AFC9;}
#searchBar button{background:#32AFC9;border:none;top:21px;}
#searchBar button:hover{background:#32AFC9;}
/* ── MAIN CONTENT AREA ──────────────────────────────────── */
#contentArea {
  background: var(--gray-100) !important;
}

/* ── COLLECTION CATEGORY TITLES ─────────────────────────── */
.collection-category h2 {
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding-bottom: 10px !important;
  border-bottom: 3px solid var(--cyan) !important;
  margin-bottom: 20px !important;
  position: relative !important;
}

.collection-category h2 a {
  color: var(--navy) !important;
  text-decoration: none !important;
  transition: var(--transition) !important;
}
.collection-category h2 a:hover { color: var(--cyan) !important; }

/* ── CATEGORY BOXES ─────────────────────────────────────── */
.category-list .category {
  background: var(--white) !important;
  border: 1.5px solid var(--gray-300) !important;
  border-radius: 10px !important;
  overflow: visible !important;

  /* Sizing & layout */
  width: 31% !important;
  margin: 1% !important;
  min-height: 190px !important;
  float: left !important;
  box-sizing: border-box !important;

  /* Inner layout */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: 24px 20px !important;

  /* Effects */
  box-shadow: var(--shadow-sm) !important;
  transition: var(--transition) !important;
  position: relative !important;
}

/* Yellow top-border accent on cards */
.category-list .category::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cyan) 0%, var(--yellow) 50%, var(--green) 100%);
  opacity: 0;
  transition: var(--transition);
}

.category-list .category:hover {
  background: var(--white) !important;
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-5px) !important;
}
.category-list .category:hover::before { opacity: 1; }

.category-list::after { content: ""; display: table; clear: both; }

/* ── CATEGORY TEXT INSIDE BOXES ─────────────────────────── */
.category-list h3 {
  color: var(--navy) !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 8px !important;
}

.category-list .category p {
  color: var(--gray-500) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.category-list .category .article-count,
.category-list .category:hover .article-count {
  color: var(--cyan) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-top: 10px !important;
  display: inline-block !important;
  padding: 3px 10px !important;
  background: var(--cyan-pale) !important;
  border-radius: 10px !important;
}

/* ── LINKS ──────────────────────────────────────────────── */
#serp-dd .result a:hover,
#serp-dd .result > li.active,
#full-Article strong a,
.collection a,
.contentWrapper a,
.most-pop-articles .popArticles a,
.most-pop-articles .popArticles a:hover span {
  color: var(--cyan) !important;
  transition: var(--transition) !important;
}

.contentWrapper a:hover,
.collection a:hover { color: var(--navy) !important; }

/* ── ARTICLE PAGE ───────────────────────────────────────── */

/* Article H1 title — striking navy+yellow treatment */
#fullArticle h1.title {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%) !important;
  color: var(--yellow) !important;
  padding: 26px 32px !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: 36px !important;
  display: block !important;
  line-height: 1.25 !important;
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  box-shadow: var(--shadow-md) !important;
  border-left: 5px solid var(--cyan) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle hex-pattern overlay on article title */
#fullArticle h1.title::after {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  border: 18px solid rgba(255,198,0,0.12);
  border-radius: 50%;
  pointer-events: none;
}

#fullArticle h1.title { margin-right: 0 !important; }

/* Article body paragraph text */
body p,
#fullArticle p,
.article-page p {
  font-size: 16px !important;
  line-height: 1.75 !important;
  color: var(--text) !important;
}

/* Article images */
#fullArticle img {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  max-width: 100% !important;
  height: auto !important;
}

/* ── ARTICLE LIST ───────────────────────────────────────── */
.articleList li {
  margin-bottom: 10px !important;
  list-style: none !important;
  padding-left: 14px !important;
  position: relative !important;
}
.articleList li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.articleList li a {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  text-decoration: none !important;
  transition: var(--transition) !important;
  display: inline-block !important;
  border-bottom: 1.5px solid transparent !important;
}
.articleList li a:hover {
  color: var(--cyan) !important;
}

/* ── SIDEBAR ────────────────────────────────────────────── */
#sidebar .nav-list li {
  margin-bottom: 10px !important;
}

#sidebar .nav-list li a {
  font-family: 'Nunito Sans', 'Avenir Next LT Pro', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--gray-700) !important;
  display: inline-block !important;
  transition: var(--transition) !important;
  letter-spacing: 0.01em !important;
}
#sidebar .nav-list li a:hover { color: var(--cyan) !important; }

#sidebar .nav-list li.active a {
  color: var(--navy) !important;
  border-bottom: 3px solid var(--yellow) !important;
  text-decoration: none !important;
  padding-bottom: 3px !important;
}

#sidebar form .search-query {
  background: var(--white) !important;
  box-shadow: none !important;
  border: 1.5px solid var(--gray-300) !important;
  border-radius: var(--radius-sm) !important;
  transition: var(--transition) !important;
}
#sidebar form .search-query:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,145,179,0.12) !important;
}

/* ── MOBILE RESPONSIVE ──────────────────────────────────── */
.mobile.android.linux.js #content-wrapper,
.mobile.android.linux.js .contentWrapper,
.mobile.android.linux.js .container {
  max-width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin: 0 !important;
}

/* Stack cards on small screens */
@media (max-width: 768px) {
  .category-list .category {
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    float: none !important;
  }
  #docsSearch { height: auto !important; padding: 40px 20px !important; }
  #fullArticle h1.title { font-size: 1.3rem !important; padding: 18px 20px !important; }
}

/* ── CATEGORY SPECIFIC ──────────────────────────────────── */
#category-26.category {
  background-image: url('../img/category-26.png');
  background-position: center 18px;
  background-repeat: no-repeat;
  padding-top: 65px;
}

/* ── FOOTER ─────────────────────────────────────────────── */

footer p {
  font-weight: 700 !important;
  color: var(--gray-500) !important;
  font-size: 13px !important;
}

/* ── SCROLLBAR (Chrome/Edge) ────────────────────────────── */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* ── FOCUS STATES (a11y) ────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--cyan) !important;
  outline-offset: 3px !important;
  border-radius: 3px;
}

/* ── SELECTION COLOR ────────────────────────────────────── */
::selection {
  background: var(--yellow);
  color: var(--navy);
}