/* ============================================================
   SharifTech REFINED THEME
   ============================================================
   Loaded ONLY when Admin > Settings > theme_mode = 'refined' (see partials/head.ejs).
   Built directly on documented professional web-design principles (restrained color,
   intentional typography, consistent spacing, motion that enhances rather than
   distracts) rather than decorative effects -- the opposite direction from the dark
   "Live UI" theme, in response to feedback that neon/glow/emoji styling reads as
   AI-generated rather than professionally designed.

   Design rules actually followed here:
   - ONE accent color, used sparingly (links, primary buttons only -- not backgrounds,
     not gradients, not glows)
   - An 8px spacing scale (8/16/24/32/48/64px) for consistent visual rhythm
   - Content capped at 1280px with real side margins, never full-bleed
   - No permanent looping animation -- motion is a single, subtle fade-in on load,
     nothing that runs continuously in the background
   - No emoji as UI chrome (nav/buttons) -- see note at the bottom of this file about
     the panel-nav tab labels, which are edited via Admin > UI Text, not CSS
   ============================================================ */

:root {
  --refined-ink: #16181d;
  --refined-text: #2b2e35;
  --refined-text-soft: #6b7280;
  --refined-line: #e5e7eb;
  --refined-bg: #ffffff;
  --refined-surface: #fafafa;
  --refined-accent: #2563eb; /* one restrained blue, used sparingly -- not a gradient */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
}

/* ---------- Base page: neutral, no background texture ---------- */
body {
  background: var(--refined-bg);
  color: var(--refined-text);
}

.container {
  max-width: 1280px;
}

/* ---------- Header: flat, no blur/glass effect, minimal border ---------- */
.site-header {
  background: var(--refined-ink);
  box-shadow: none;
  border-bottom: none;
}

.brand .word {
  background: none !important;
  -webkit-text-fill-color: #fff;
  animation: none !important;
  color: #fff;
}

.main-nav {
  background: transparent;
  border: none;
  padding: 0;
  gap: var(--space-3);
}
.main-nav a {
  color: rgba(255, 255, 255, 0.75);
  padding: var(--space-1) 0;
  border-radius: 0;
  font-weight: 500;
  transition: color 0.15s ease;
}
.main-nav a:hover {
  background: none;
  color: #fff;
  transform: none;
}
.main-nav a.active {
  background: none;
  box-shadow: none;
  color: #fff;
  border-bottom: 2px solid var(--refined-accent);
}

/* ---------- Buttons: one accent color, flat, no gradient/glow ---------- */
.btn-primary {
  background: var(--refined-accent);
  box-shadow: none;
}
.btn-primary:hover {
  background: #1d4ed8;
  box-shadow: none;
  transform: none;
}
.btn-outline {
  border-color: var(--refined-line);
  color: var(--refined-text);
}
.btn-outline:hover {
  border-color: var(--refined-accent);
  color: var(--refined-accent);
  box-shadow: none;
}
.btn-ghost-light {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.08); }

input[type=text], input[type=email], input[type=search] {
  animation: none !important;
  box-shadow: none !important;
  border-color: var(--refined-line);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--refined-accent);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ---------- Hero: no gradient background, generous vertical spacing ---------- */
.hero {
  background: var(--refined-ink);
  padding: var(--space-8) 0 var(--space-6) !important;
}
.hero h1 { color: #fff; font-weight: 600; }
.hero .lead { color: rgba(255, 255, 255, 0.7); }
.hero .eyebrow { color: rgba(255, 255, 255, 0.55) !important; }
.hero .accent { color: var(--refined-accent); }

/* ---------- Panel nav (homepage tabs): flat, minimal, no gradient active state ---------- */
.panel-nav {
  background: var(--refined-bg);
  box-shadow: none;
  border-bottom: 1px solid var(--refined-line);
}
.panel-nav button {
  color: var(--refined-text-soft);
  border-radius: 6px;
  font-weight: 500;
}
.panel-nav button:hover { background: var(--refined-surface); color: var(--refined-text); }
.panel-nav button.active {
  background: var(--refined-ink);
  color: #fff;
}

/* ---------- Cards: flat, single hairline border, no blur/glow on hover ---------- */
.card {
  background: var(--refined-bg);
  border: 1px solid var(--refined-line);
  box-shadow: none;
  transition: border-color 0.15s ease;
}
.card:hover {
  border-color: var(--refined-accent);
  transform: none;
  box-shadow: none;
}
.card .cat-tag {
  background: var(--refined-surface);
  color: var(--refined-text-soft);
  border: 1px solid var(--refined-line);
}

/* ---------- Panels ---------- */
.panel {
  background: var(--refined-bg);
  border: 1px solid var(--refined-line);
  box-shadow: none;
}

/* ---------- Sections: consistent 8px-scale vertical rhythm, generous whitespace ---------- */
section {
  padding-top: var(--space-6) !important;
  padding-bottom: var(--space-6) !important;
}

/* ---------- Notice banners: flat, no glow ---------- */
.notice-banner {
  background: var(--refined-surface);
  border: 1px solid var(--refined-line);
}
.notice-banner.urgent {
  background: #fef2f2;
  border-color: #fecaca;
}

.pinned-banner-wrap {
  background: var(--refined-ink);
  border-bottom: none;
  backdrop-filter: none;
  box-shadow: none;
}
.pinned-banner-wrap .text { color: #fff; }
.pinned-banner-wrap.urgent { background: #b91c1c; }

/* ---------- Footer: flat single dark tone, no gradient ---------- */
.site-footer {
  background: var(--refined-ink);
}

.newsletter-band { background: var(--refined-surface) !important; }
.connect-info-panel { background: var(--refined-bg) !important; }

/* ---------- Motion: ONE subtle fade-in on load, nothing that loops forever ----------
   This is the entire motion budget for this theme -- deliberately restrained, per
   the principle that professional sites use interaction patterns that enhance
   content rather than distract from it. No background animation, no pulsing glow. */
.hero, .card, .panel {
  animation: refinedFadeIn 0.4s ease-out both;
}
@keyframes refinedFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero, .card, .panel { animation: none; }
}

/* ---------- Admin-pasted content (Homepage Intro / Custom Section) ----------
   Same reasoning as the dark theme: content pasted into these Settings fields may
   carry inline colors/backgrounds from whichever theme was active when it was
   written. Neutralize anything that would clash with this theme's flat, neutral
   palette -- keep text legible, strip glow/gradient card backgrounds down to flat. */
.settings-driven-content div[style*="background:#eaf0ff"],
.settings-driven-content div[style*="background: #eaf0ff"] {
  background: var(--refined-surface) !important;
  border: 1px solid var(--refined-line) !important;
}
.settings-driven-content div[style*="background:#0a1128"],
.settings-driven-content div[style*="background: #0a1128"] {
  background: var(--refined-ink) !important;
}

/* ---------- A note on emoji in nav labels ----------
   The homepage tab bar (#panelNav) and a few other labels currently include emoji
   (e.g. "Home", "Blog") as literal characters inside admin-editable text strings --
   not CSS-controlled elements, so they can't be hidden or restyled from here. Remove
   them directly from Admin > UI Text (each string has its own editable field) if you
   want a fully emoji-free look under this theme; no code change is needed for that. */