/*
 * mk7.css — SHLOMO mk7 Design System
 * Single source of truth for all static HTML pages.
 * Import: <link rel="stylesheet" href="/_mk7/mk7.css">
 *
 * Principles:
 *  – Pure black background (#000). Photos pop against it.
 *  – White frame borders ONLY. 1px solid rgba(255,255,255,0.18) at rest → white on hover.
 *  – ONE accent: warm gold (#d4af37). Never purple. Never cyan as primary.
 *  – Generous space. Content breathes.
 *  – Typography: Syne for headings, Inter for body.
 */

/* ── TOKENS ───────────────────────────────────────────────────────── */
:root {
  --mk7-black:       #000000;
  --mk7-surface:     #0a0a0a;
  --mk7-surface2:    #111111;
  --mk7-surface3:    #1a1a1a;

  --mk7-gold:        #d4af37;
  --mk7-gold-dim:    #a8892b;
  --mk7-gold-bg:     rgba(212, 175, 55, 0.07);
  --mk7-gold-border: rgba(212, 175, 55, 0.28);

  --mk7-white:       #ffffff;
  --mk7-frame:       rgba(255, 255, 255, 0.18);
  --mk7-frame-hover: rgba(255, 255, 255, 0.72);

  --mk7-text:        #ede8dc;
  --mk7-text-dim:    #8a8070;
  --mk7-text-muted:  #4a4540;

  --mk7-green:       #22c55e;
  --mk7-red:         #ef4444;
  --mk7-amber:       #f59e0b;

  /* Kill purple everywhere */
  --purple:          var(--mk7-gold-dim);
  --purple-dark:     var(--mk7-gold-dim);
}

/* ── RESET HELPERS ────────────────────────────────────────────────── */
.mk7-no-purple,
[class*="purple"] {
  /* Catch any lingering purple class names */
  color: inherit;
}

/* ── UNIFIED NAV (mk7-nav class — injected on each page) ─────────── */
.mk7-topnav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--mk7-gold-border);
  display: flex;
  align-items: center;
  gap: 0;
  height: 44px;
  padding: 0 24px;
  font-family: 'Inter', -apple-system, sans-serif;
}

.mk7-topnav .mk7-nav-brand {
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--mk7-gold);
  text-decoration: none;
  text-transform: uppercase;
  margin-right: 20px;
  padding-right: 20px;
  border-right: 1px solid var(--mk7-gold-border);
  white-space: nowrap;
  flex-shrink: 0;
}

.mk7-topnav .mk7-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.mk7-topnav .mk7-nav-link {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mk7-text-dim);
  padding: 5px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}

.mk7-topnav .mk7-nav-link:hover,
.mk7-topnav .mk7-nav-link.active {
  color: var(--mk7-gold);
  border-color: var(--mk7-gold-border);
  background: var(--mk7-gold-bg);
}

.mk7-topnav .mk7-nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mk7-topnav .mk7-nav-stamp {
  font-size: 9px;
  color: var(--mk7-text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── PHOTO FRAMES — the core visual idea ─────────────────────────── */
/*
 * Wrap any <img> or <div> with class="mk7-frame" to get:
 * – 1px white border at rest
 * – Gold border + subtle glow on hover
 * – Black background so the image truly pops
 * Usage: <div class="mk7-frame"><img src="..." /></div>
 */
.mk7-frame {
  display: block;
  background: var(--mk7-black);
  border: 1px solid var(--mk7-frame);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.mk7-frame:hover {
  border-color: var(--mk7-gold);
}

.mk7-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

/* Tighter frame variant — for property grid cards */
.mk7-frame-tight {
  border-radius: 2px;
}

/* ── CARD SYSTEM ──────────────────────────────────────────────────── */
.mk7-card {
  background: var(--mk7-surface);
  border: 1px solid var(--mk7-frame);
  border-radius: 8px;
  padding: 20px;
  transition: border-color 0.2s ease, transform 0.2s ease;
  text-decoration: none;
  display: block;
  color: var(--mk7-text);
}

.mk7-card:hover {
  border-color: var(--mk7-frame-hover);
  transform: translateY(-1px);
}

.mk7-card.mk7-card-gold:hover {
  border-color: var(--mk7-gold);
}

.mk7-card-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mk7-text-muted);
  margin-bottom: 8px;
}

.mk7-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mk7-text);
  margin-bottom: 6px;
  line-height: 1.3;
}

.mk7-card-desc {
  font-size: 12px;
  color: var(--mk7-text-dim);
  line-height: 1.6;
}

/* ── BADGE SYSTEM ─────────────────────────────────────────────────── */
.mk7-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid;
}

.mk7-badge-hot    { color: var(--mk7-gold);  border-color: var(--mk7-gold-border); background: var(--mk7-gold-bg); }
.mk7-badge-white  { color: var(--mk7-white); border-color: var(--mk7-frame);       background: rgba(255,255,255,0.05); }
.mk7-badge-live   { color: var(--mk7-green); border-color: rgba(34,197,94,0.3);    background: rgba(34,197,94,0.08); }
.mk7-badge-planned{ color: var(--mk7-amber); border-color: rgba(245,158,11,0.3);   background: rgba(245,158,11,0.06); }
.mk7-badge-fail   { color: var(--mk7-red);   border-color: rgba(239,68,68,0.3);    background: rgba(239,68,68,0.08); }
.mk7-badge-legacy { color: var(--mk7-text-muted); border-color: rgba(255,255,255,0.1); background: transparent; }

/* ── SECTION HEADINGS ─────────────────────────────────────────────── */
.mk7-section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mk7-frame);
  margin-bottom: 20px;
}

.mk7-section-title {
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mk7-text);
}

.mk7-section-tag {
  font-size: 10px;
  color: var(--mk7-text-muted);
  letter-spacing: 1px;
  margin-left: auto;
}

/* ── TYPOGRAPHY UTILITIES ─────────────────────────────────────────── */
.mk7-gold-text   { color: var(--mk7-gold) !important; }
.mk7-white-text  { color: var(--mk7-white) !important; }
.mk7-muted-text  { color: var(--mk7-text-muted) !important; }
.mk7-mono        { font-family: 'JetBrains Mono', 'DM Mono', monospace; }

/* ── DIVIDER ──────────────────────────────────────────────────────── */
.mk7-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mk7-frame), transparent);
  margin: 32px 0;
}

.mk7-divider-gold {
  background: linear-gradient(90deg, transparent, var(--mk7-gold-border), transparent);
}

/* ── PHOTO GRID — property shots pop on black ─────────────────────── */
.mk7-photo-grid {
  display: grid;
  gap: 1px;
  background: var(--mk7-black);
}

.mk7-photo-grid-2 { grid-template-columns: 1fr 1fr; }
.mk7-photo-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.mk7-photo-grid .mk7-frame {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--mk7-black);
  border-bottom: 1px solid var(--mk7-black);
}

/* Outer wrapper gets the frame */
.mk7-photo-grid-wrap {
  border: 1px solid var(--mk7-frame);
  border-radius: 4px;
  overflow: hidden;
}

.mk7-photo-grid-wrap:hover {
  border-color: var(--mk7-gold);
}

/* ── CTA BUTTON ───────────────────────────────────────────────────── */
.mk7-btn-gold {
  display: inline-block;
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 9px 22px;
  background: var(--mk7-gold);
  color: #000;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}

.mk7-btn-gold:hover { opacity: 0.88; }

.mk7-btn-white {
  display: inline-block;
  font-family: 'Syne', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 20px;
  background: transparent;
  color: var(--mk7-white);
  border: 1px solid var(--mk7-frame);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.mk7-btn-white:hover {
  border-color: var(--mk7-white);
  color: var(--mk7-white);
}