/* SUSAN-like Theme for KB Landing
   Direction: Dark glass UI, blue focus, green CTA, pill chips, subtle gradients
*/

/* Brand tokens */
:root{
  --brand-blue:  #035EA5;   /* focus, links */
  --brand-blue-2:#0E7BCF;   /* hover tints */
  --brand-green: #6BCE8B;   /* primary CTAs */
  --brand-green-2:#57BF7A;  /* CTA hover */
  --brand-yellow:#FFE666;   /* highlights */

  --bg:    #0a1020;   /* page background */
  --panel: #0d152a;   /* header / panels */
  --card:  #0f1a33;   /* card surface */
  --text:  #e7ecf4;   /* primary text */
  --muted: #9fb0c3;   /* secondary text */
  --border:#1a2a4a;   /* 1px outline */

  --link:       var(--brand-blue);
  --link-hover: var(--brand-blue-2);
  --focus:      var(--brand-blue);
  --cta:        var(--brand-green);
  --cta-text:   #0b1b15;
  --cta-hover:  var(--brand-green-2);

  --chip-bg:  rgba(3,94,165,.16);
  --chip-on:  rgba(107,206,139,.22);

  --badge-blue-bg:   rgba(3,94,165,.14);
  --badge-blue-bdr:  rgba(3,94,165,.35);
  --badge-green-bg:  rgba(107,206,139,.14);
  --badge-green-bdr: rgba(107,206,139,.35);
  --badge-yellow-bg: rgba(255,230,102,.18);
  --badge-yellow-bdr:rgba(255,230,102,.38);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 700px at 85% -10%, rgba(14,123,207,.10), transparent 60%),
    radial-gradient(900px 600px at 8% 0%, rgba(107,206,139,.08), transparent 55%),
    var(--bg);
  color:var(--text);
  font: 400 16px/1.5 Inter, Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Links */
a{color:var(--link); text-decoration:none}
a:hover{color:var(--link-hover)}

/* Header */
header{
  border-bottom:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(13,21,42,.75), rgba(13,21,42,.55));
  backdrop-filter: blur(8px);
  position: sticky; top:0; z-index:10;
}
.wrap{max-width:1200px; margin:0 auto; padding:16px}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.2px}
.brand small{color:var(--muted); font-weight:500}
.brand-badge{
  width:28px; height:28px; border-radius:8px;
  background: conic-gradient(from 140deg, var(--brand-blue), var(--brand-green));
  box-shadow: 0 0 0 2px rgba(3,94,165,.18), 0 6px 18px rgba(0,0,0,.35);
}

/* Hero */
.hero{padding:40px 16px 12px; text-align:center}
.hero h1{margin:0 0 8px; font-size:28px; letter-spacing:.2px}
.hero p{margin:0 auto 22px; max-width:800px; color:var(--muted)}

/* Search */
.searchbar{
  display:flex; align-items:center; gap:10px; justify-content:center;
  max-width:780px; margin:0 auto;
}
.searchbar .field{position:relative; flex:1; min-width:260px}
.searchbar input{
  width:100%; height:48px; padding:0 44px;
  border-radius:12px; border:1px solid var(--border);
  background: linear-gradient(180deg, #0f1b35, #0c152b);
  color:var(--text); outline:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.searchbar input:focus{
  box-shadow: 0 0 0 3px rgba(3,94,165,.45);
  border-color: var(--focus);
}
.searchbar input::placeholder{color:#7f8fa2}
.search-icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.8;
}
.clear-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:transparent; border:0; color:var(--muted); cursor:pointer; padding:6px 8px; border-radius:8px;
}
.clear-btn:hover{color:var(--text); background:rgba(255,255,255,.06)}
.btn{
  height:48px; padding:0 14px; border-radius:12px; border:1px solid var(--border);
  background: linear-gradient(180deg, #142844, #0f1f3a);
  color:var(--text); cursor:pointer; white-space:nowrap;
}
.btn:focus{outline:none; box-shadow:0 0 0 3px rgba(3,94,165,.45)}

/* Filters */
.toolbar{padding:18px 16px 10px}
.chips{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}
.chip{
  padding:8px 12px; border-radius:999px; border:1px solid var(--border);
  background:var(--chip-bg); color:var(--text); cursor:pointer; font-size:14px;
}
.chip[aria-pressed="true"]{
  background:var(--chip-on);
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(107,206,139,.35) inset, 0 6px 24px rgba(107,206,139,.10);
}
.controls{
  margin-top:12px; display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap;
}
.select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background: linear-gradient(180deg, #0f1a33, #0d182e);
  color:var(--text); border:1px solid var(--border); border-radius:12px; padding:10px 12px; min-width:170px;
}

/* Grid + cards */
.grid{
  padding:22px 16px 60px;
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  max-width:1200px; margin:0 auto;
}
.card{
  display:flex; flex-direction:column; gap:10px;
  border:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(18,31,58,1), rgba(14,26,48,1));
  border-radius:16px; padding:16px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(3,94,165,.18) inset;
  border-color: rgba(3,94,165,.40);
}

/* Badges */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  width:max-content; padding:4px 8px; border-radius:999px; font-size:12px; letter-spacing:.15px;
  color:#d7eaff; background:var(--badge-blue-bg); border:1px solid var(--badge-blue-bdr);
}
.badge.framework{ color:#d9f6e5; background:var(--badge-green-bg); border-color:var(--badge-green-bdr) }
.badge.cloud{ color:#d7eaff; background:var(--badge-blue-bg); border-color:var(--badge-blue-bdr) }
.badge.regional{ color:#d9f6e5; background:var(--badge-yellow-bg); border-color:var(--badge-yellow-bdr) }

/* Text elements */
.title{font-weight:600}
.desc{color:var(--muted); font-size:14px}
.tags{display:flex; gap:8px; flex-wrap:wrap}
.tag{
  font-size:12px; color:#b9c2d0; border:1px dashed #284064; padding:2px 8px; border-radius:999px; background:#0f1930;
}

/* CTA button */
.cta{margin-top:auto; display:flex; justify-content:flex-end}
.cta .go{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px;
  background: var(--cta);
  color: var(--cta-text);
  border:1px solid #2c6b4a;
  font-weight:600;
}
.cta .go:hover{ background: var(--cta-hover) }

/* Empty + footer */
.empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:30px 0}
footer{
  border-top:1px solid var(--border);
  color:var(--muted); text-align:center; padding:18px 16px 40px;
  background: linear-gradient(180deg, rgba(15,23,41,.35), rgba(15,23,41,.15));
}

/* Responsive */
@media (min-width: 768px){
  .hero h1{font-size:32px}
  .searchbar{gap:12px}
}


.favicon{
  height: 45px;
  width: 150px;
  margin-left: -40px !important;
}




header {
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(13,21,42,.75), rgba(13,21,42,.55));
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}
header .wrap, nav {
  display: flex;
  align-items: center;
  justify-content: space-between; /* spaces out everything */
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  gap: 18px;
}

/* Brand/logo area clean alignment */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  margin-left: -150px !important;
}
/* .brand small {
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
} */




/* Optional: spacing between Help and toggle */
.help-center {
  margin-left: 16px;
  color: var(--muted);
  font-size: 15px;
}

header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;   /* or 100% for full width */
  margin: 0 auto;
  padding: 16px 32px;  /* increase side padding for better spacing */
  gap: 18px;
  min-height: 72px;
}




:root[data-theme='light']{
  /* Surfaces */
  --bg: #F7F9FC;
  --panel: #FFFFFF;
  --card: #FFFFFF;

  /* Typography */
  --text: #0E1726;
  --muted: #4B5565;

  /* Borders */
  --border: #D8E2EF;

  /* Brand accents */
  --brand-blue: #035EA5;
  --brand-blue-2: #0E7BCF;
  --brand-green: #6BCE8B;
  --brand-green-2: #57BF7A;
  --brand-yellow: #FFFF00;

  --link: var(--brand-blue);
  --link-hover: var(--brand-blue-2);
  --focus: var(--brand-blue);
  --cta: var(--brand-green);
  --cta-hover: var(--brand-green-2);
  --cta-text: #09311F;

  /* Soft tints for chips/tags/badges */
  --chip-bg: rgba(3, 94, 165, .10);
  --chip-on: rgba(107, 206, 139, .18);
  --badge-blue-bg: rgba(3, 94, 165, .10);
  --badge-blue-bdr: rgba(3, 94, 165, .30);
  --badge-green-bg: rgba(107, 206, 139, .12);
  --badge-green-bdr: rgba(107, 206, 139, .30);
  --badge-yellow-bg: rgba(255, 230, 102, .16);
  --badge-yellow-bdr: rgba(255, 230, 102, .32);
}

/* Cards remain light with subtle depth */
:root[data-theme='light'] .card{
  background: linear-gradient(180deg, #FFFFFF, #F5F8FF);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

/* Buttons, chips, tags readable on light */
:root[data-theme='light'] .btn{ 
  color: #0E1726;
  background: #F3F8FE;
  border-color: #C9D4E9;
}
:root[data-theme='light'] .chip,
:root[data-theme='light'] .badge{
  color: #0E1726;
  background: #E8F0FE;
  border-color: #DCE7F6;
}
:root[data-theme='light'] .badge.framework{ background:#E9FAEE; }
:root[data-theme='light'] .badge.cloud{ background:#E8F0FE; }

/* Inputs/selects should be light, not dark */
:root[data-theme='light'] .searchbar input{
  background: #FFFFFF;
  color: #0E1726;
  border-color: #C9D4E9;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.02);
}
:root[data-theme='light'] .searchbar input::placeholder{ color:#66758B; }
:root[data-theme='light'] .select{
  background: #FFFFFF;
  color: #0E1726;
  border-color: #C9D4E9;
}


/* 4) Icons/controls that sit on the bars */
:root[data-theme='light'] header .btn,
:root[data-theme='light'] header a,
:root[data-theme='light'] .brand,
:root[data-theme='light'] .brand small{
  color: var(--portal-navy-text) !important;
}



/* Light mode link colors */
:root[data-theme='light'] a{
  color: #035EA5 !important;        
  text-decoration: none;
}
:root[data-theme='light'] a:hover,
:root[data-theme='light'] a:focus{
  color: var(--link-hover) !important;     /* uses #0E7BCF from tokens */
}


:root[data-theme='light']{
  --tag-bg: #DCEBFF;          /* brighter sky blue */
  --tag-text: #0E7BCF;        /* brand hover blue */
  --tag-bdr: #B7D0FF;         /* brighter border */
  --tag-hover-bg: #CFE3FF;    /* stronger on hover */
  --tag-hover-text: #035EA5;  /* brand primary on hover */
  --tag-active-bg: rgba(107,206,139,.22); /* brand green tint */
  --tag-active-bdr: rgba(107,206,139,.45);
  --tag-active-text: #0B3A29;
}

/* Default tag */
:root[data-theme='light'] .tag{
  background: var(--tag-bg) !important;
  color: var(--tag-text) !important;
  border: 1px solid var(--tag-bdr) !important;
  font-weight: 600;
  letter-spacing: .15px;
  box-shadow: 0 1px 0 #ffffff inset, 0 0 0 1px rgba(255,255,255,.4);
}

/* Hover/focus */
:root[data-theme='light'] .tag:hover,
:root[data-theme='light'] .tag:focus{
  background: var(--tag-hover-bg) !important;
  color: var(--tag-hover-text) !important;
  border-color: var(--tag-hover-text) !important;
  box-shadow: 0 0 0 2px rgba(14,123,207,.22) inset;
}

/* Active/selected */
:root[data-theme='light'] .tag[aria-pressed="true"],
:root[data-theme='light'] .tag.is-active{
  background: var(--tag-active-bg) !important;
  color: var(--tag-active-text) !important;
  border-color: var(--tag-active-bdr) !important;
  box-shadow: 0 0 0 2px var(--tag-active-bdr) inset;
}

/* Night/Dark theme only (light unaffected) */
:root:not([data-theme='light']) {
  --nav-top:   #0E284A;   /* deep navy */
  --nav-bot:   #0A1F3B;   /* darker base */
  --nav-bdr:   rgba(14,123,207,.28); /* blue edge */

  --foot-top:  #0B1628;   /* muted ink */
  --foot-bot:  #08111F;   /* near-black */
  --foot-bdr:  rgba(3,94,165,.20);  /* soft blue border */
  --foot-text: #9fb0c3;   /* cool muted text */
}

/* Header: richer navy gradient + blue edge */
:root:not([data-theme='light']) header{
  background:
    linear-gradient(180deg, var(--nav-top) 0%, var(--nav-bot) 100%),
    radial-gradient(900px 240px at 60% 0%, rgba(14,123,207,.10), transparent 70%);
  border-bottom: 1px solid var(--nav-bdr);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.03);
}

/* Optional: small glow for brand badge on dark */
:root:not([data-theme='light']) .brand-badge{
  box-shadow: 0 0 0 2px rgba(3,94,165,.20), 0 8px 22px rgba(3,94,165,.20);
}

/* Footer: darker panel with top highlight so it separates from page */
:root:not([data-theme='light']) footer{
  background:
    linear-gradient(180deg, var(--foot-top) 0%, var(--foot-bot) 100%);
  border-top: 1px solid var(--foot-bdr);
  color: var(--foot-text);
  box-shadow: 0 -8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}

/* Light theme: SUSAN portal navy for bars */
:root[data-theme='light']{
  --portal-navy: #1F3B61;
  --portal-navy-edge: #18314F;
  --portal-text: #FFFFFF;
  --portal-muted: #EAF2FE;
}

:root[data-theme='light'] header{
  background: var(--portal-navy) !important;
  color: var(--portal-text) !important;
  border-bottom: 1px solid var(--portal-navy-edge) !important;
  backdrop-filter: none !important; /* keep it solid in light */
}

:root[data-theme='light'] footer{
  background: var(--portal-navy) !important;
  color: var(--portal-muted) !important;
  border-top: 1px solid var(--portal-navy-edge) !important;
}

/* Controls on the bars stay readable */
:root[data-theme='light'] header a,
:root[data-theme='light'] header .btn,
:root[data-theme='light'] .brand,
:root[data-theme='light'] .brand small{
  color: var(--portal-text) !important;
}


/* Cleanup: ensure only one icon is visible and centered */
#themeToggle .icon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1; opacity:.9; pointer-events:none;
  filter:none; /* avoid duplicate-looking shadows */
}

/* Optional theme glows (safe with single icon) */
:root[data-theme='light'] #themeToggle .icon{ text-shadow: 0 0 8px rgba(255,184,28,.45); }
:root:not([data-theme='light']) #themeToggle .icon{ text-shadow: 0 0 8px rgba(14,123,207,.35); }


/* Base toggle shell */
#themeToggle.toggle{
  position: relative;
  width: 56px; height: 36px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

/* Track glass */
#themeToggle .track{
  position:absolute; inset:0; border-radius:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  pointer-events:none;
}

/* Knob = moving circle */
#themeToggle .knob{
  position:absolute; top:50%;
  width: 26px; height: 26px; border-radius: 50%;
  background:#ffffff;
  box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.65);
  transform: translateY(-50%);           /* only vertical center */
  transition: left .22s cubic-bezier(.2,.8,.2,1), right .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
  display:flex; align-items:center; justify-content:center;  /* center icon */
}

/* Icon inside knob */
#themeToggle .icon{
  font-size: 16px; line-height: 1;
  filter: none; opacity: .95; pointer-events:none;
}

/* LIGHT: knob on left */
:root[data-theme='light'] #themeToggle .knob{ left: 6px; right: auto; }
:root[data-theme='light'] #themeToggle .icon{ text-shadow: 0 0 8px rgba(255,184,28,.45); }

/* DARK: knob on right */
:root:not([data-theme='light']) #themeToggle{
  border-color: rgba(3,94,165,.28);
  background: linear-gradient(180deg, rgba(20,40,68,.65), rgba(12,31,58,.55));
}
:root:not([data-theme='light']) #themeToggle .knob{
  right: 6px; left: auto; background:#0E203A;
  box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.08);
}
:root:not([data-theme='light']) #themeToggle .icon{ text-shadow: 0 0 8px rgba(14,123,207,.35); }

/* Focus */
#themeToggle:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(14,123,207,.45); }

/* Remove older transform-based rules to avoid double offsets */
#themeToggle .knob[data-legacy]{ transform:none; } /* safety if old class remains */

.toggle{
  margin-right: -170px !important;
}



/* NIGHT MODE ONLY: select + options */
:root:not([data-theme='light']) .select{
  background: linear-gradient(180deg, #10223F, #0D1B35);
  color: #E7ECF4;
  border-color: rgba(3,94,165,.35);
  box-shadow: 0 0 0 1px rgba(3,94,165,.18) inset;
}

/* Native options (most browsers) */
:root:not([data-theme='light']) .select option{
  background: #0F1E37;
  color: #E7ECF4;
}

/* Focused/open state */
:root:not([data-theme='light']) .select:focus{
  outline: none;
  border-color: #0E7BCF;
  box-shadow: 0 0 0 3px rgba(14,123,207,.35);
}

/* Hover/selected option highlight */
:root:not([data-theme='light']) .select option:checked,
:root:not([data-theme='light']) .select option:hover{
  background:#0F1E37;      /* brighter navy */
  color: #FFFFFF;
}

/* For custom dropdowns rendered as <ul><li> in some UIs */
:root:not([data-theme='light']) .dropdown-menu{
  background: #0F1E37;
  border: 1px solid rgba(3,94,165,.30);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
}
:root:not([data-theme='light']) .dropdown-menu li{
  color:#E7ECF4;
}
:root:not([data-theme='light']) .dropdown-menu li:hover,
:root:not([data-theme='light']) .dropdown-menu li[aria-selected="true"]{
  background:#13375F;
  color:#FFFFFF;
}


/* Fixed top header across all KB pages */
header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;          /* above content */
}

/* Content offset so nothing hides under header */
body.has-fixed-nav{
  padding-top: var(--header-h, 72px);   /* fallback 72px */
}

/* Optional: anchor jump/filters don't go under header */
main, .container, .page, .content, [id]{
  scroll-margin-top: var(--header-h, 72px);
}

footer{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  width: 100%;
  margin: 0;
  height: 30px;              
  line-height: 1.4;
  padding: 8px 16px;          
  border-top: 1px solid var(--foot-bdr, var(--border));
  background: linear-gradient(180deg, var(--foot-top, #0B1628) 0%, var(--foot-bot, #08111F) 100%);
  color: var(--foot-text, var(--muted));
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
 
body.has-fixed-footer{
  padding-bottom: var(--footer-h, 56px);
}
 
.grid{
  padding-bottom: calc(var(--footer-h, 56px) + 16px);
}
 
footer{
  text-align: left;
  padding: 6px 10px;  
  line-height: 1.3;
}
 
.footertext{
  margin: 0;        
   margin-right: 20px !important;
   margin-top: -6px;
   font-size: small;    
}

@media (max-width: 1234px){
.favicon{
  height: 45px;
  width: 150px;
  margin-left: 120px !important;
}
 
.toggle{
  margin-right: -20px !important;
}
}
 
 
 
@media (min-width: 1200px){
.favicon{
  height: 45px;
  width: 150px;
  margin-left: 90px !important;
}
 
.toggle{
  margin-right: -40px !important;
}
}