/* ─────────────────────────────────────────────────────────────
   MRKTMAP — Core Brand System
   Artisan / Editorial Direction
───────────────────────────────────────────────────────────── */

/* ─── Google Fonts ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,500;0,6..12,600;1,6..12,400&display=swap');

/* ─── Variables ───────────────────────────────────────────── */
:root {

  /* Core Brand */
  --forest:        #1a3d2b;
  --forest-mid:    #2d5c42;

  --green:         #3aaa6e;
  --green-bg:      #eaf6f0;
  --green-pale:    #cfe8da;

  --sky:           #4a8fd4;
  --sky-bg:        #edf4ff;

  --amber:         #f0a030;
  --amber-bg:      #fff8ec;

  --terracotta:    #c96a3d;
  --terracotta-bg: #f8ebe4;

  /* Neutrals */
  --white:         #ffffff;

  --paper:         #f7fbf8;
  --paper-soft:    #fcfdfb;

  --border:        #d9e8df;
  --border-soft:   #e8f1eb;

  /* Text */
  --text:          #1a3d2b;
  --muted:         #6f7f76;
  --muted-soft:    #8c9b93;

  /* Feedback */
  --c-success:     #3aaa6e;
  --c-error:       #d94f38;
  --c-info:        #4a8fd4;
  --c-warning:     #f0a030;

  /* Typography */
  --font-head:     'Nunito', sans-serif;
  --font-body:     'Nunito Sans', sans-serif;

  /* Radius */
  --radius-sm:     6px;
  --radius:        10px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-pill:   999px;

  /* Shadows */
  --shadow-sm:     0 2px 8px rgba(26,61,43,.05);
  --shadow:        0 8px 24px rgba(26,61,43,.08);
  --shadow-lg:     0 18px 40px rgba(26,61,43,.10);

  /* Layout */
  --container:     1180px;
  --pad:           1.25rem;
  --header-h:      72px;

  /* Motion */
  --ease:          0.16s ease;
}

/* ─── Reset ───────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {

  min-height: 100vh;

  display: flex;
  flex-direction: column;

  background: var(--paper);

  color: var(--text);

  font-family: var(--font-body);

  font-size: 1rem;
  line-height: 1.65;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

ul,
ol {
  list-style: none;
}

main {
  flex: 1;
}

/* ─── Container ───────────────────────────────────────────── */
.container {
  width: min(var(--container), calc(100% - 2rem));
  margin-inline: auto;
}

/* ─── Typography ──────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {

  font-family: var(--font-head);

  color: var(--forest);

  line-height: 1.05;

  letter-spacing: -0.035em;
}

h1 {

  font-size: clamp(2.7rem, 5vw, 5rem);

  font-weight: 800;
}

h2 {

  font-size: clamp(2rem, 4vw, 3.4rem);

  font-weight: 800;
}

h3 {

  font-size: 1.45rem;

  font-weight: 700;
}

h4 {

  font-size: 1.08rem;

  font-weight: 700;
}

p {

  color: var(--muted);

  margin-bottom: 1rem;
}

a {

  color: var(--green);

  text-decoration: none;

  transition:
    color var(--ease),
    opacity var(--ease);
}

a:hover {
  color: var(--forest);
}

strong {
  color: var(--forest);
  font-weight: 700;
}

/* ─── Header ──────────────────────────────────────────────── */
.site-header {

  position: sticky;

  top: 0;

  z-index: 200;

  height: var(--header-h);

  backdrop-filter: blur(14px);

  background: rgba(247,251,248,.88);

  border-bottom: 1px solid var(--border);

  box-shadow: var(--shadow-sm);
}

.nav-inner {

  height: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 2rem;
}

/* ─── Logo ───────────────────────────────────────────────── */
.logo {

  display: flex;
  align-items: center;

  gap: .65rem;

  text-decoration: none;
}

.logo:hover {
  opacity: .92;
}

.logo-mark {

  width: 40px;
  height: 40px;

  flex-shrink: 0;
}

.logo-wordmark {

  font-family: var(--font-head);

  font-size: 1.35rem;

  font-weight: 800;

  letter-spacing: -0.05em;

  color: var(--forest);
}

.logo-wordmark span {
  color: var(--green);
}

/* ─── Navigation ─────────────────────────────────────────── */
.nav-links {

  display: flex;
  align-items: center;

  gap: .35rem;
}

.nav-links a {

  padding: .55rem .9rem;

  border-radius: var(--radius);

  font-size: .92rem;
  font-weight: 700;

  color: var(--muted);

  transition:
    background var(--ease),
    color var(--ease),
    transform var(--ease);
}

.nav-links a:hover {

  background: var(--green-bg);

  color: var(--forest);

  transform: translateY(-1px);
}

.nav-links a.active {

  background: var(--green-bg);

  color: var(--forest);
}

.nav-links .nav-cta {

  margin-left: .4rem;

  background: var(--forest);

  color: white;

  font-weight: 700;

  box-shadow: var(--shadow-sm);
}

.nav-links .nav-cta:hover {

  background: var(--green);

  color: white;
}

/* ─── Hero / Page Headers ───────────────────────────────── */
.page-head {

  padding: 4.5rem 0 3rem;
}

.page-head h1 {
  max-width: 10ch;
}

.page-head p {

  max-width: 680px;

  margin-top: 1rem;

  font-size: 1.08rem;

  line-height: 1.8;
}

/* ─── Pills ─────────────────────────────────────────────── */
.pill {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .7rem 1rem;

  border-radius: var(--radius-pill);

  background: white;

  border: 1px solid var(--border);

  color: var(--muted);

  font-size: .88rem;
  font-weight: 700;

  transition:
    background var(--ease),
    border-color var(--ease),
    color var(--ease),
    transform var(--ease);
}

.pill:hover {

  border-color: var(--green-pale);

  background: var(--green-bg);

  color: var(--forest);

  transform: translateY(-1px);
}

.pill.active {

  background: var(--forest);

  border-color: var(--forest);

  color: white;
}

/* ─── Buttons ───────────────────────────────────────────── */
.btn {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: .45rem;

  padding: .82rem 1.15rem;

  border-radius: var(--radius);

  border: 1px solid transparent;

  cursor: pointer;

  font-weight: 700;
  font-size: .92rem;

  transition:
    background var(--ease),
    border-color var(--ease),
    transform var(--ease),
    box-shadow var(--ease);

  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {

  background: var(--forest);

  color: white;

  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--green);
}

.btn-outline {

  background: white;

  border-color: var(--border);

  color: var(--forest);
}

.btn-outline:hover {

  background: var(--green-bg);

  border-color: var(--green-pale);
}

/* ─── Generic Cards ─────────────────────────────────────── */
.card {

  background: white;

  border: 1px solid var(--border);

  border-radius: var(--radius-lg);

  overflow: hidden;

  transition:
    transform var(--ease),
    border-color var(--ease),
    box-shadow var(--ease);

  box-shadow: var(--shadow-sm);
}

.card:hover {

  transform: translateY(-3px);

  border-color: var(--green-pale);

  box-shadow: var(--shadow);
}

/* ─── Badges ────────────────────────────────────────────── */
.badge {

  display: inline-flex;
  align-items: center;

  padding: .25rem .65rem;

  border-radius: 999px;

  font-size: .72rem;
  font-weight: 700;
}

.badge-today {

  background: var(--amber-bg);

  color: #7a4e00;
}

.badge-weekend {

  background: var(--sky-bg);

  color: #1d4d80;
}

.badge-featured {

  background: var(--terracotta-bg);

  color: var(--terracotta);
}

/* ─── Forms ─────────────────────────────────────────────── */
.form-group {

  display: flex;
  flex-direction: column;

  gap: .45rem;

  margin-bottom: 1rem;
}

.form-group label {

  font-size: .9rem;

  font-weight: 700;

  color: var(--forest);
}

input,
select,
textarea {

  width: 100%;

  padding: .78rem .95rem;

  border-radius: var(--radius);

  border: 1.5px solid var(--border);

  background: white;

  color: var(--text);

  transition:
    border-color var(--ease),
    box-shadow var(--ease);
}

input:focus,
select:focus,
textarea:focus {

  outline: none;

  border-color: var(--green);

  box-shadow:
    0 0 0 4px rgba(58,170,110,.12);
}

/* ─── Empty State ───────────────────────────────────────── */
.empty-state {

  padding: 5rem 1rem;

  text-align: center;
}

.empty-state .emoji {

  font-size: 3rem;

  margin-bottom: 1rem;
}

.empty-state p {
  margin: 0;
}

/* ─── Footer ────────────────────────────────────────────── */
.site-footer {

  margin-top: auto;

  background: rgba(255,255,255,.65);

  border-top: 1px solid var(--border);

  padding: 2rem 0;
}

.footer-inner {

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1rem;

  flex-wrap: wrap;
}

.footer-copy {

  margin: 0;

  font-size: .85rem;

  color: var(--muted-soft);
}

.footer-links {

  display: flex;

  gap: 1.25rem;
}

.footer-links a {

  font-size: .85rem;

  color: var(--muted);
}

.footer-links a:hover {
  color: var(--forest);
}

/* ─── Utilities ─────────────────────────────────────────── */
.text-center { text-align: center; }

.text-muted { color: var(--muted); }

.mt-2 { margin-top: .5rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }

.mb-2 { margin-bottom: .5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {

  .site-header {
    height: auto;
  }

  .nav-inner {

    padding: .9rem 0;

    flex-wrap: wrap;
  }

  .page-head {

    padding: 3rem 0 2rem;
  }

  .page-head h1 {
    max-width: 12ch;
  }

}

@media (max-width: 640px) {

  .nav-links {

    width: 100%;

    overflow-x: auto;

    padding-bottom: .25rem;
  }

  .footer-inner {

    flex-direction: column;

    text-align: center;
  }

}