/* =========================================================
   Artashes First LLC — dark + gold theme
   Loaded ONLY by the four public marketing pages (Home, About,
   Services, Contact), after style.css. It is NOT loaded by the
   admin panel, which depends on style.css's original tokens and
   stays visually unchanged — see the file header note in style.css.

   Strategy: redefine style.css's existing --color-, --font-, --radius,
   and --shadow custom properties (this file loads after style.css, so a
   later :root declaration of the same property wins) so the shared
   structural rules already in style.css — header, nav, hero, buttons,
   cards, forms, footer — repaint in the new palette/type/shape with no
   need to duplicate them here. Everything below this block is either
   a deliberate exact-value override called out in the design spec, or
   a genuinely new component (hero glow, name-meaning panel, values
   grid, service rows, contact detail rows, brand badge, button icon).
   ========================================================= */

:root {
  /* Exact tokens from the design spec */
  --bg: #0c0a08;
  --bg-elevated: #151109;
  --bg-elevated-2: #0f0b07;
  --gold: #c9a24a;
  --gold-bright: #e3c377;
  --gold-deep: #b8863a;
  --line: rgba(201, 162, 74, 0.22);
  --line-strong: rgba(201, 162, 74, 0.4);
  --line-soft: rgba(201, 162, 74, 0.14);
  --text: #f3ead9;
  --text-muted: #b7a98d;
  --text-faint: #8a7d68;
  --text-quiet: #6b6046;

  /* Re-point style.css's existing tokens at the new system */
  --font-heading: "Cinzel", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --color-bg: var(--bg);
  --color-surface: var(--bg-elevated);
  --color-header-bg: var(--bg);
  --color-footer-bg: var(--bg);
  --color-primary: var(--text);
  --color-primary-dark: #14100d;
  --color-primary-soft: var(--bg-elevated);
  --color-accent: var(--gold);
  --color-accent-light: var(--gold-bright);
  --color-accent-dark: var(--gold-deep);
  --color-text: var(--text);
  --color-text-muted: var(--text-muted);
  --color-border: var(--line);
  --color-success: #7fb28f;
  --color-error: #d98b7c;

  --radius: 3px;
  --radius-sm: 2px;
  --shadow-sm: none;
  --shadow-md: none;
}

body {
  background: var(--bg);
}

/* Sharp, "monumental" shapes everywhere — no pill/rounded-full shapes
   except things that are meant to read as coins/dots/circles. */
.btn,
.form-field input,
.form-field textarea,
.form-field select {
  border-radius: 2px;
}

/* ---------- focus states ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- buttons ---------- */
.btn-primary {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: #14100d;
  padding: 16px 30px;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #ecd497, var(--gold-bright));
}
.main-nav .btn-primary {
  padding: 11px 22px;
}
.btn-outline {
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn-outline:hover {
  background: rgba(201, 162, 74, 0.08);
  border-color: var(--gold);
}
.btn-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---------- header ---------- */
.site-header {
  background: var(--bg);
}
.site-header .container,
.site-footer .container {
  padding-left: 64px;
  padding-right: 64px;
}
.site-header .container {
  height: 88px;
}
.brand-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 162, 74, 0.5);
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-badge img { width: 34px; height: 34px; }
.brand-badge-sm {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(201, 162, 74, 0.5);
}
.brand-badge-sm img { width: 28px; height: 28px; }
.brand-word {
  font-family: var(--font-heading);
  font-size: 19px;
  letter-spacing: 0.02em;
}
.main-nav a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
}
.main-nav a:hover { color: var(--gold-bright); background: transparent; }
.main-nav a[aria-current="page"] { color: var(--gold); }

@media (max-width: 860px) {
  .main-nav { background: var(--bg); }
  .site-header .container { height: 76px; }
}
@media (max-width: 800px) {
  .site-header .container,
  .site-footer .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ---------- eyebrow label (unifies .hero-eyebrow / .eyebrow / .badge) ---------- */
.hero-eyebrow,
.section-header .eyebrow,
.badge {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  color: var(--gold);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- hero glow ---------- */
.hero,
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  top: -280px;
  right: -160px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 162, 74, 0.16) 0%, rgba(201, 162, 74, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
.page-about .page-hero::before {
  right: auto;
  left: -160px;
}
.hero .container,
.page-hero .container {
  position: relative;
  z-index: 1;
}
.hero h1,
.page-hero h1 {
  font-weight: 600;
}
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 54px); }
.hero p.lead,
.page-hero p {
  color: var(--text-muted);
}

/* ---------- sections ---------- */
.section-alt { background: var(--bg-elevated-2); border-top: 1px solid var(--line-soft); }
.section-header.centered { max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
.section-header h2, h2 { font-weight: 600; }

/* ---------- service cards (Home grid) ---------- */
.service-card {
  background: var(--bg-elevated);
  transition: border-color 180ms ease;
}
.service-card:hover { transform: none; box-shadow: none; border-color: var(--line-strong); }
.service-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 162, 74, 0.4);
  background: var(--bg-elevated-2);
  color: var(--gold);
}
.service-icon svg { width: 22px; height: 22px; }

/* ---------- service rows (Services page) ---------- */
.service-row-list { display: grid; gap: 24px; }
.service-row-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-soft);
}
.service-row-item:last-child { border-bottom: none; }
.service-row-index {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.service-row-number {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--text-quiet);
  letter-spacing: 0.08em;
}
.service-row-body h3 { font-size: 1.15rem; margin-bottom: 8px; color: var(--text); }
.service-row-body p { color: var(--text-faint); margin: 0; }

@media (max-width: 640px) {
  .service-row-item { grid-template-columns: 1fr; }
  .service-row-index { flex-direction: row; }
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
}
.cta-band p { color: var(--text-muted); }

/* ---------- about: name-meaning panel ---------- */
.name-panel {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
  align-items: center;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 40px;
  margin-top: 40px;
}
.name-panel-emblem { display: flex; align-items: center; justify-content: center; }
.seal-ring-outer {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 2px dashed rgba(201, 162, 74, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.seal-ring-inner {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg-elevated-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.seal-ring-inner img { width: 140px; height: 140px; object-fit: contain; }
.name-panel-text p { color: var(--text-faint); }
.name-panel-caption {
  color: var(--text-quiet);
  font-size: 0.88rem;
  font-style: italic;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .name-panel { grid-template-columns: 1fr; padding: 28px; text-align: center; }
  .name-panel-emblem { justify-content: center; }
}

/* ---------- about: values ---------- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: center;
}
.value-numeral {
  display: block;
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 600;
  color: rgba(201, 162, 74, 0.35);
  line-height: 1;
  margin-bottom: 12px;
}
.value-col h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--text); }
.value-col p { color: var(--text-faint); margin: 0; }

@media (max-width: 720px) {
  .values-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- contact page ---------- */
.contact-card { background: var(--bg-elevated); }
.contact-detail-list { display: grid; gap: 24px; }
.contact-detail-row { display: flex; gap: 16px; align-items: flex-start; }
.contact-detail-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 162, 74, 0.4);
  background: var(--bg-elevated-2);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-detail-icon svg { width: 18px; height: 18px; }
.contact-list .label { color: var(--text-quiet); }
.contact-list .value { color: var(--text); font-weight: 600; }
.contact-list a.value:hover { color: var(--gold-bright); }
.social-row a {
  background: var(--bg-elevated-2);
  border: 1.5px solid rgba(201, 162, 74, 0.35);
  color: var(--gold);
}
.social-row a:hover {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color: #14100d;
  border-color: transparent;
}

/* ---------- forms ---------- */
.form-field input,
.form-field textarea,
.form-field select {
  background: var(--bg);
  border: 1px solid rgba(201, 162, 74, 0.3);
  color: var(--text);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--text-quiet); }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.18);
}
.form-status.ok { background: rgba(127, 178, 143, 0.14); color: #a9d6b6; }
.form-status.error { background: rgba(217, 139, 124, 0.14); color: #eab2a2; }
.contact-success-icon { background: rgba(127, 178, 143, 0.16); color: #a9d6b6; }
.contact-success-message { color: var(--text); }
.contact-success-cooldown { color: var(--text-faint); }
.contact-success-cooldown strong { color: var(--gold); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 64px 0 32px; }
.footer-grid { border-bottom: 1px solid var(--line-soft); }
.footer-brand p { color: var(--text-faint); }
.footer-col h4 {
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-col a { color: var(--text-muted); }
.footer-col a:hover { color: var(--gold-bright); }
.footer-bottom {
  justify-content: center;
  border-top: 1px solid var(--line-soft);
  padding-top: 24px;
  margin-top: 8px;
  color: var(--text-quiet);
  font-size: 13px;
}

@media (max-width: 800px) {
  .site-header .container,
  .page-hero .container,
  .hero .container,
  .section > .container,
  .site-footer .container {
    padding-left: 24px;
    padding-right: 24px;
  }
  .name-panel { padding: 24px; }
}