/* public/assets/css/theme-edu-light-medical.css
   Bright, medical-knowledge theme. Load AFTER your base style.css (and after other theme files).
   Goal: make the entire site lighter with healthcare accents (blue/teal/green),
   high readability and subtle patterns. Non-destructive CSS-only override.
*/

/* ---------- Palette ---------- */
:root{
  --med-bg:        #f6fbff;   /* page background */
  --med-bg-2:      #eef6ff;   /* section background */
  --med-surface:   #ffffff;   /* cards/panels */
  --med-border:    rgba(6, 43, 74, .10);
  --med-text:      #0a1a2b;   /* main text */
  --med-text-soft: #2c3a4a;   /* secondary text */

  --med-primary:   #1d77ff;   /* medical blue */
  --med-primary-600:#1a6ae3;
  --med-teal:      #00b8b0;   /* healthcare teal */
  --med-green:     #16a34a;   /* success green */
  --med-lav:       #7c8cff;   /* education violet */
}

/* ---------- Global background (light) ---------- */
html, body{
  color: var(--med-text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(29,119,255,.10), transparent 70%),
    radial-gradient(900px 480px at 5% 110%, rgba(0,184,176,.08), transparent 70%),
    linear-gradient(180deg, var(--med-bg), var(--med-bg-2) 40%, var(--med-bg));
}

/* Subtle knowledge pattern */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:
    linear-gradient(rgba(13,110,253,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,110,253,.06) 1px, transparent 1px),
    radial-gradient(circle at 1px 1px, rgba(13,110,253,.05) 1px, transparent 1px);
  background-size: 54px 54px, 54px 54px, 27px 27px;
  opacity:.35;
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Reduce dark overlay if existed from previous theme */
body::after{ display:none !important; }

/* ---------- Containers & cards ---------- */
.container{ color: var(--med-text); }
.card{
  background: var(--med-surface);
  border: 1px solid var(--med-border);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(29,119,255,.08), 0 1px 0 rgba(0,0,0,.03);
}

/* ---------- Type ---------- */
h1,h2,h3,h4{ color: var(--med-text); letter-spacing:.2px }
h2{ color:#0e3a8a }              /* deep medical blue for section titles */
p, .lead{ color: var(--med-text-soft) }

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

/* ---------- Navigation ---------- */
.site-top{ background: linear-gradient(180deg, #ffffffcc, #ffffffaa); backdrop-filter: blur(6px) }
.main-nav a{
  color: var(--med-text);
  padding: 10px 12px;
  border-radius: 10px;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.main-nav a:hover,
.main-nav a.active{
  background: linear-gradient(180deg, rgba(29,119,255,.10), rgba(29,119,255,.06));
  box-shadow: 0 2px 0 0 var(--med-primary) inset;
}

/* ---------- Buttons ---------- */
.btn, button, .button{
  background: linear-gradient(180deg, var(--med-primary), var(--med-primary-600));
  color:#fff !important; border:0; border-radius:12px; padding:10px 16px;
  box-shadow: 0 8px 18px rgba(29,119,255,.25);
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 10px 20px rgba(29,119,255,.30) }
.btn.secondary{
  background: linear-gradient(180deg, var(--med-teal), #05a39c);
  box-shadow: 0 8px 16px rgba(0,184,176,.22);
}

/* ---------- Badges ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px; font-size:.85rem;
  padding:6px 10px; border-radius:999px;
  background: linear-gradient(180deg, #f9fbff, #f1f7ff);
  border: 1px solid var(--med-border);
  color: var(--med-text);
}

/* ---------- Tables ---------- */
th, td{ border-bottom: 1px solid var(--med-border) }
tbody tr:hover{ background:#f3f8ff }

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="password"], select, textarea{
  background:#fff; color:var(--med-text); border:1px solid var(--med-border); border-radius:12px;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color: rgba(29,119,255,.5);
  box-shadow: 0 0 0 3px rgba(29,119,255,.18);
}

/* ---------- Footer ---------- */
.site-foot{ color: #3b4a5c }

/* ---------- About page media tweaks (if present) ---------- */
.about-hero .hero-media img,
.about-bio .bio-media img{
  border:1px solid var(--med-border);
  box-shadow: 0 10px 26px rgba(13,110,253,.12);
}
.about-gallery .gal img{
  border:1px solid var(--med-border);
  transition: transform .12s ease, box-shadow .2s ease;
}
.about-gallery .gal img:hover{
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 10px 18px rgba(13,110,253,.18);
}