/* ============================================================
   CogniEdu Brand Overrides
   LOAD AFTER Bootstrap and theme.css
   ============================================================ */

/* =======================
   Brand Variables
   ======================= */
:root{
  --ce-blue:   #4F6EDC;
  --ce-purple: #7B5CF0;
  --ce-pink:   #E24A8D;
  --ce-orange: #F59E42;
  --ce-navy:   #22364A;

  --ce-grad: linear-gradient(
    90deg,
    var(--ce-blue),
    var(--ce-purple),
    var(--ce-pink),
    var(--ce-orange)
  );

  --ce-bg-tint: rgba(79,110,220,0.05);
  --ce-border: #e5e7eb;
}

/* =======================
   Base Typography
   ======================= */
body{
  color: #111827;
}

h1, h2, h3{
  letter-spacing: -0.02em;
}

/* =======================
   Page Titles / Hero
   ======================= */
.ce-title{
  position: relative;
  display: inline-block;
}

.ce-title::after{
  content:"";
  display:block;
  width:72px;
  height:4px;
  margin-top:12px;
  background: var(--ce-grad);
  border-radius: 999px;
}

.ce-hero{
  background: linear-gradient(
    180deg,
    var(--ce-bg-tint),
    rgba(123,92,240,0.02),
    transparent
  );
  border-radius: 16px;
  padding: 18px 18px 6px 18px;
}

/* =======================
   Cards
   ======================= */
.ce-card{
  position: relative;
  border: 1px solid var(--ce-border);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(17,24,39,0.05);
  background: #fff;
  overflow: hidden;
}

.ce-accent::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background: var(--ce-grad);
}

.card{
  border-radius: 12px;
}

/* =======================
   Buttons
   ======================= */
.btn-primary{
  background: linear-gradient(90deg, var(--ce-blue), var(--ce-purple));
  border: none;
  box-shadow: 0 6px 14px rgba(79,110,220,0.18);
}

.btn-primary:hover,
.btn-primary:focus{
  background: linear-gradient(90deg, var(--ce-purple), var(--ce-pink));
  box-shadow: 0 8px 18px rgba(123,92,240,0.22);
}

.btn-outline-primary{
  color: var(--ce-purple);
  border-color: rgba(123,92,240,0.6);
}

.btn-outline-primary:hover{
  color:#fff;
  border-color: transparent;
  background: linear-gradient(90deg, var(--ce-blue), var(--ce-purple));
}

.btn-outline-secondary{
  color: var(--ce-purple);
  border-color: rgba(123,92,240,0.55);
}

.btn-outline-secondary:hover{
  color:#fff;
  border-color: transparent;
  background: linear-gradient(90deg, var(--ce-blue), var(--ce-purple));
}

/* =======================
   NAVIGATION (IMPORTANT)
   ======================= */
/* Requires <nav class="ce-nav"> */

.ce-nav a,
.ce-nav a:visited{
  color: #111827 !important;
  font-weight: 500;
  position: relative;
  padding-bottom: 10px;
  transition: color .15s ease;
}

.ce-nav a:hover{
  color: var(--ce-purple) !important;
}

.ce-nav a.active,
.ce-nav a.active:visited{
  color: var(--ce-purple) !important;
  font-weight: 700;
}

.ce-nav a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:4px;
  background: var(--ce-grad);
  border-radius:999px;
}

/* Optional: subtle hover pill (comment out if undesired) */
/*
.ce-nav a:hover{
  background: rgba(123,92,240,0.08);
  border-radius: 10px;
  padding: 6px 10px;
  margin: -6px -10px;
}
*/

/* =======================
   Lists
   ======================= */
.ce-bullets li::marker{
  color: var(--ce-purple);
}

/* =======================
   Helpers
   ======================= */
.ce-gradient-text{
  background: var(--ce-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ============================================================
   Card background tints (subtle, professional)
   ============================================================ */

/* Default card background (slightly off-white) */
.ce-card{
  background: #fbfcff;  /* softer than pure white */
}

/* Primary brand-tinted card */
.ce-card.ce-tint{
  background: linear-gradient(
    180deg,
    rgba(79,110,220,0.06),
    rgba(123,92,240,0.02)
  );
}

/* Secondary soft neutral card */
.ce-card.ce-soft{
  background: #f9fafb;
}

/* Dark text remains readable */
.ce-card h1,
.ce-card h2,
.ce-card h3{
  color: #111827;
}

/* ============================================================
   Subtle tinted card backgrounds (Bootstrap cards)
   ============================================================ */

.card.ce-tint{
  background: linear-gradient(
    180deg,
    rgba(79,110,220,0.06),
    rgba(123,92,240,0.02)
  );
  border-color: rgba(79,110,220,0.18);
}

.card.ce-soft{
  background: #f9fafb;
}

.card.ce-tint .card-body,
.card.ce-soft .card-body{
  background: transparent;
}

body { outline: 6px solid red !important; }