/*
Theme Name: MediCore Portal
Theme URI: https://zeeai.online
Author: Zaheer Abbas
Author URI: https://zeeai.online
Description: A thin, branded front-end shell for Al Hadi Hospital's website. Its only real job is to welcome visitors and send staff and patients into the MediCore HMS portal (provided by the MediCore Hospital Management System plugin) — the plugin renders the actual login screen, staff dashboard, and patient self-service tools as its own full-screen experience, independent of this theme.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: medicore-portal
*/

* { box-sizing: border-box; }

:root {
  --accent: #0062A8;
  --accent-d: #00456e;
  --ink: #0a0e14;
  --muted: #5a6472;
  --bg: #f3f5f8;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Site header ─────────────────────────────────────── */
.mcp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.mcp-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mcp-brand img {
  max-height: 44px;
  width: auto;
}
.mcp-brand .site-name {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}
.mcp-brand .site-tagline {
  font-size: 12px;
  color: var(--muted);
}
.mcp-header-actions a.button {
  display: inline-block;
  padding: 10px 20px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 8px;
  transition: background .15s;
}
.mcp-header-actions a.button:hover {
  background: var(--accent-d);
  text-decoration: none;
}

/* ── Hero / landing content ──────────────────────────── */
.mcp-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: 80px 24px 100px;
  text-align: center;
}
.mcp-hero img.mcp-hero-logo {
  max-height: 96px;
  margin-bottom: 28px;
}
.mcp-hero h1 {
  font-size: 34px;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 14px;
}
.mcp-hero p.mcp-sub {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 36px;
}
.mcp-hero a.mcp-cta {
  display: inline-block;
  padding: 16px 36px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,98,168,.25);
  transition: background .15s, transform .1s;
}
.mcp-hero a.mcp-cta:hover {
  background: var(--accent-d);
  text-decoration: none;
  transform: translateY(-1px);
}
.mcp-hero .mcp-hint {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
}

/* ── Feature strip ───────────────────────────────────── */
.mcp-features {
  max-width: 900px;
  margin: 0 auto 80px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 0 24px;
}
.mcp-feature {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px 18px;
  text-align: center;
}
.mcp-feature .icon { font-size: 28px; margin-bottom: 10px; }
.mcp-feature .label { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.mcp-feature .desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

@media (max-width: 640px) {
  .mcp-features { grid-template-columns: 1fr; }
  .mcp-header { padding: 14px 18px; }
  .mcp-hero { padding: 56px 20px 70px; }
  .mcp-hero h1 { font-size: 26px; }
}

/* ── Site footer ─────────────────────────────────────── */
.mcp-footer {
  text-align: center;
  padding: 28px 20px;
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px solid #e5e7eb;
  background: #fff;
}