/* ============================================================
   Sikologo — Theme: Original Blue  (revert)
   ------------------------------------------------------------
   This file exists ONLY on sikologo.ph. It restores the original
   indigo/mint identity by resetting the design tokens to their
   pre-rebrand values. All functional fixes (XSS sanitizer,
   secure files, change-password, avatars, i18n, etc.) stay in
   place — only the look reverts.

   sikologo.ph keeps its own warm/clay theme.css; the two sites have
   separate files, so this override affects sikologo.ph alone.
   ============================================================ */

:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --c-bg:          #f5f7ff;
  --c-surface:     #ffffff;
  --c-surface-2:   #f0f3ff;
  --c-border:      #e4e8f5;
  --c-border-2:    #c7d0ee;

  /* ── Indigo — primary (restored) ──────────────────────── */
  --c-indigo-900:  #1e1b4b;
  --c-indigo-800:  #2d2a7a;
  --c-indigo-700:  #3730a3;
  --c-indigo-600:  #4f46e5;
  --c-indigo-500:  #6366f1;
  /* these three weren't in the original :root — kept from the fix
     so rules that reference them still resolve, in the blue hue */
  --c-indigo-400:  #818cf8;
  --c-indigo-300:  #a5b4fc;
  --c-indigo-200:  #c7d2fe;
  --c-indigo-100:  #e0e7ff;
  --c-indigo-50:   #eef2ff;

  /* ── Mint — secondary (restored) ──────────────────────── */
  --c-mint-700:    #0d9488;
  --c-mint-600:    #14b8a6;
  --c-mint-500:    #2dd4bf;
  --c-mint-100:    #ccfbf1;
  --c-mint-50:     #f0fdfa;

  /* ── Functional (restored) ────────────────────────────── */
  --c-success:     #059669;
  --c-success-bg:  #d1fae5;
  --c-warning:     #d97706;
  --c-warning-bg:  #fef3c7;
  --c-danger:      #dc2626;
  --c-danger-bg:   #fee2e2;
  --c-info:        #0284c7;
  --c-info-bg:     #e0f2fe;

  /* ── Type colours (restored) ──────────────────────────── */
  --c-text:        #0f172a;
  --c-text-2:      #334155;
  --c-muted:       #64748b;
  --c-muted-2:     #94a3b8;

  /* ── Shadows (restored — cool slate) ──────────────────── */
  --shadow-xs:  0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:  0 2px 8px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.04);
  --shadow-md:  0 4px 20px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.06);
  --shadow-lg:  0 10px 40px rgba(15,23,42,.14), 0 4px 16px rgba(15,23,42,.08);
  --shadow-xl:  0 20px 60px rgba(15,23,42,.18);

  /* ── Radius (restored — tighter) ──────────────────────── */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full: 9999px;

  /* ── Transitions (restored) ───────────────────────────── */
  --t-fast: 150ms cubic-bezier(.4,0,.2,1);
  --t-base: 250ms cubic-bezier(.4,0,.2,1);
  --t-slow: 400ms cubic-bezier(.4,0,.2,1);

  /* ── Back-compat aliases (restored) ───────────────────── */
  --sk-coral:      #f43f5e;
  --role-color:    var(--c-indigo-600);

  /* ── Fonts: back to Plus Jakarta Sans everywhere ──────── */
  --f-sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-serif: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

/* ============================================================
   Undo the warm-theme component tweaks
   The clay theme softened corners, swapped fonts and recoloured
   a few components directly (not just via tokens). Reset those
   so sikologo.ph looks exactly like the original.
   ============================================================ */

/* Fonts back to Jakarta on every element (clay theme forced serif
   on headings and Figtree on body) */
body,
button, input, select, textarea,
.btn, .form-control, .nav-link, .dropdown-item,
h1, h2, h3, h4, h5, h6,
.sk-section-title, .sk-hero-title, .sk-card-title, .sk-article-title {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
h1, h2, h3,
.sk-section-title, .sk-hero-title, .sk-card-title, .sk-article-title {
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
}

/* Buttons: original squarer radius (clay made them pill-shaped) */
.btn, .sk-btn-primary, .sk-btn-outline {
  border-radius: var(--r-sm);
}
.sk-btn-primary {
  background: var(--c-indigo-600);
  border-color: var(--c-indigo-600);
}
.sk-btn-primary:hover {
  background: var(--c-indigo-700);
  border-color: var(--c-indigo-700);
}

/* Cards & inputs back to original radius */
.sk-card, .sk-sidebar-card, .sk-article-card { border-radius: var(--r-md); }
.form-control, .sk-input, .form-select { border-radius: var(--r-sm); background: #ffffff; }
.form-control:focus, .sk-input:focus, .form-select:focus {
  border-color: var(--c-indigo-400);
  box-shadow: 0 0 0 3px var(--c-indigo-50);
}

/* Navbar back to solid white (clay made it cream/blur) */
.sk-navbar, .navbar {
  background: #ffffff;
  backdrop-filter: none;
  border-bottom: 1px solid var(--c-border);
}

/* Footer: original dark indigo gradient (matches admin sidebar) */
.sk-footer {
  background: linear-gradient(180deg, var(--c-indigo-900) 0%, var(--c-indigo-800) 100%);
  border-top: none;
  color: rgba(255,255,255,.78);
}
.sk-footer .sk-brand   { color: #ffffff !important; }
.sk-footer .text-muted { color: rgba(255,255,255,.52) !important; }
.sk-footer-heading     { color: var(--c-mint-500); }
.sk-footer-link        { color: rgba(255,255,255,.7); }
.sk-footer-link:hover  { color: #ffffff; }
.sk-footer-divider     { border-color: rgba(255,255,255,.12); }

::selection { background: var(--c-indigo-100); color: var(--c-indigo-900); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Avatar photos  (robust rewrite)
   ------------------------------------------------------------
   The photo was rendering full-width. Root cause: the avatar
   containers never set `position`, and the image is styled
   `position:absolute; inset:0` — so it anchored to an ancestor
   instead of its own circle. Rather than depend on that fragile
   absolute-positioning approach, we constrain the image at the
   CONTAINER level: fill the parent box, crop to a circle, done.

   Selectors are container-scoped and use !important so they win
   over both Bootstrap's `img{max-width:100%;height:auto}` and the
   older .sk-avatar-img rule regardless of source order.
   Initials (plain text, no <img>) are unaffected.
   ============================================================ */

/* 1. Every avatar container is a positioning context and clips to a circle */
.sk-profile-hero-avatar,
.sk-forum-item-avatar,
.sk-comment-avatar,
.sk-avatar,
.sk-avatar-sm,
.sk-avatar-lg,
.sk-avatar-wrap,
.sk-profile-avatar-wrap,
.sk-psych-avatar {
  position: relative;
  overflow: hidden;
}

/* 2. Any <img> inside an avatar container fills that container and no more.
      This does NOT rely on the image being absolutely positioned. */
.sk-profile-hero-avatar > img,
.sk-forum-item-avatar   > img,
.sk-comment-avatar      > img,
.sk-avatar              > img,
.sk-avatar-sm           > img,
.sk-avatar-lg           > img,
.sk-avatar-wrap         > img,
.sk-profile-avatar-wrap > img,
.sk-psych-avatar        > img,
img.sk-avatar-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  object-fit: cover !important;
  object-position: center 30% !important;   /* bias to faces */
  border-radius: 50% !important;
  display: block !important;
}

/* 3. The hero avatar must hold its 100px size and never be stretched
      by the flex row it sits in. */
.sk-profile-hero-avatar {
  width: 100px !important;
  height: 100px !important;
  flex: 0 0 100px !important;   /* no grow, no shrink — fixes full-width */
  border-radius: 50% !important;
}

@media (max-width: 575.98px) {
  .sk-profile-hero-avatar {
    width: 80px !important;
    height: 80px !important;
    flex-basis: 80px !important;
  }
}