/* =============================================
   TRCD Design System
   Tri-Cities Real Estate Data
   ============================================= */

:root {
  /* Primary palette */
  --navy: #0C1E3C;
  --navy-light: #1A2F52;
  --teal: #0F6E56;
  --teal-light: #E1F5EE;
  --teal-hover: #0D5E49;
  --gold: #C8972E;
  --gold-light: #FDF6E9;

  /* Neutrals */
  --bg-primary: #F7F8FA;
  --bg-white: #FFFFFF;
  --border: #E2E6ED;
  --border-light: #F0F2F5;
  --text-primary: #0C1E3C;
  --text-secondary: #5A6478;
  --text-muted: #8B95A8;

  /* Status colors */
  --success: #0F6E56;
  --error: #C53030;
  --warning: #C8972E;
  --info: #185FA5;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(12, 30, 60, 0.05);
  --shadow-md: 0 4px 12px rgba(12, 30, 60, 0.08);
  --shadow-lg: 0 8px 24px rgba(12, 30, 60, 0.12);

  /* Typography
     ---------------------------------------------
     Tech-modern product feel for the dashboard, editorial serif
     reserved for long-form journalism (blog posts, reports).
       --font-display  Inter — page titles, section headings, card titles
       --font-body     Inter — default UI, buttons, nav, captions
       --font-prose    Source Serif 4 — blog/article body + report PDFs
       --font-mono     IBM Plex Mono — tabular numeric data
     ============================================= */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-prose:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', 'Fira Code', monospace;
}

body {
  font-family: var(--font-body);
  margin: 0;
  padding: 0;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  cursor: pointer;
}

a {
  cursor: pointer;
}

/* =============================================
   COMPONENT LIBRARY
   ---------------------------------------------
   Reusable building blocks. When you find yourself
   repeating a Tailwind class chain in templates,
   promote it here and reference by class name.
   ============================================= */

/* ---- Buttons -------------------------------------------------
   Variants:
     .btn-primary   solid teal — main page CTA, sign-in, subscribe
     .btn-secondary indigo accent — subscriber-only / premium CTAs
     .btn-outline   teal border on white — secondary actions
     .btn-ghost     text-only — tertiary actions, dismiss
   Sizes (compose with variant):
     .btn-sm        compact (table rows, inline actions)
     .btn-md        default
     .btn-lg        hero / landing page CTAs
   States: :hover, :focus-visible, :disabled all handled.
   Accessibility: rely on <button> / <a>; min 44x44 hit area on lg.
   ---------------------------------------------------------------- */
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-ghost:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.btn-primary[disabled],
.btn-secondary[disabled],
.btn-outline[disabled],
.btn-ghost[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background-color: var(--teal);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background-color: var(--teal-hover); box-shadow: var(--shadow-md); }

.btn-secondary {
  background-color: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background-color: var(--navy-light); box-shadow: var(--shadow-md); }

.btn-outline {
  background-color: #fff;
  color: var(--teal);
  border-color: var(--teal);
}
.btn-outline:hover { background-color: var(--teal-light); }

.btn-ghost {
  background-color: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover { background-color: var(--border-light); color: var(--text-primary); }

.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }
.btn-md { padding: 0.5rem 1rem;    font-size: 0.875rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }

/* Legacy aliases — kept so existing templates don't break.
   Prefer .btn-primary / .btn-outline + size class going forward. */
.teal-btn   { composes: btn-primary; }
.outline-btn{ composes: btn-outline; }
a.teal-btn,
button.teal-btn,
.teal-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background-color: var(--teal); color: #fff; border-radius: 0.5rem;
  padding: 0.75rem 1.5rem; font-weight: 600; text-decoration: none;
  transition: background-color 150ms ease;
}
.teal-btn:hover { background-color: var(--teal-hover); }
a.outline-btn,
button.outline-btn,
.outline-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background-color: #fff; color: var(--teal); border: 1px solid var(--teal);
  border-radius: 0.5rem; padding: 0.75rem 1.5rem; font-weight: 600;
  text-decoration: none; transition: background-color 150ms ease;
}
.outline-btn:hover { background-color: var(--teal-light); }

/* ---- Cards ---------------------------------------------------
   Variants:
     .trcd-card             default white card with hover-lift
     .trcd-card--flat       no hover effect (informational only)
     .trcd-card--featured   teal-tinted gradient (lead-gen / premium)
     .trcd-card--locked     paywall preview (used on /charts/daily)
   Anatomy (optional helpers):
     .trcd-card__media      16:9 image/iframe slot
     .trcd-card__body       padded content area
     .trcd-card__tags       row of pill tags above title
   ---------------------------------------------------------------- */
.trcd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.trcd-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #cdd4de;
}
.trcd-card--flat:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border);
}
.trcd-card--featured {
  background: linear-gradient(135deg, var(--teal-light) 0%, #fff 60%);
  border-color: #B7E3D2;
}
.trcd-card--featured:hover { border-color: var(--teal); }

.trcd-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--border-light);
}
.trcd-card__media > iframe,
.trcd-card__media > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.trcd-card__body { padding: 1.5rem; }
.trcd-card__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }

/* ---- Tags / pill badges --------------------------------------
   Variants: .tag-info (teal), .tag-premium (navy), .tag-meta (gray)
   ---------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem; font-weight: 500;
  font-family: var(--font-body);
  ring: 1px;
}
.tag-info    { background-color: var(--teal-light); color: var(--teal); }
.tag-premium { background-color: rgba(12, 30, 60, 0.06); color: var(--navy); border: 1px solid rgba(12, 30, 60, 0.15); }
.tag-meta    { background-color: var(--border-light); color: var(--text-secondary); }

/* =============================================
   Profile page
   ============================================= */

.profile {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 16px;
  }
  .profile-card {
    background-color: var(--bg-white);
    box-shadow: var(--shadow-md);
    border-radius: 12px;
    overflow: hidden;
  }
  .cover-image {
    height: 192px;
    background-size: cover;
    background-position: center;
  }
  .profile-info {
    position: relative;
    padding: 20px 24px;
  }
  .profile-avatar {
    position: absolute;
    top: -64px;
    left: 24px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    border: 4px solid white;
  }
  .profile-name {
    margin-top: 64px;
    font-size: 24px;
    font-weight: bold;
    color: var(--text-primary);
  }
  .profile-username {
    font-size: 14px;
    color: var(--text-secondary);
  }
  .profile-bio {
    margin-top: 8px;
    color: var(--text-primary);
  }
  .profile-location {
    margin-top: 16px;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
  }
  .profile-location svg {
    height: 20px;
    width: 20px;
    margin-right: 4px;
  }
  .profile-joined {
    margin-top: 4px;
    font-size: 14px;
    color: var(--text-secondary);
  }
  .subscription-status {
    padding: 20px 24px;
  }
  .subscription-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
  }
  .subscription-text {
    margin-top: 4px;
    max-width: 42rem;
    font-size: 14px;
    color: var(--text-secondary);
  }
  .upgrade-button {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: white;
    background-color: var(--teal);
    cursor: pointer;
    text-decoration: none;
  }
  .upgrade-button:hover {
    background-color: var(--teal-hover);
  }
}

/* =============================================
   Neighborhood tracker
   ============================================= */

.neighborhood-tracker {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .map-container,
  .graph-container {
    background-color: var(--bg-white);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
  }

  .map-container a {
    display: block;
    margin-top: 10px;
    color: var(--teal);
    text-decoration: none;
    font-weight: 500;
  }

  .map-container a:hover {
    text-decoration: underline;
  }
}

/* =============================================
   About us
   ============================================= */

.about-us {
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }

  .profile-section {
    text-align: center;
  }

  .profile-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 2rem auto;
    display: block;
    object-fit: cover;
  }

  .name {
    font-size: 2.5rem;
    color: var(--text-primary);
    margin: 1rem 0;
    font-weight: 600;
    font-family: var(--font-display);
  }

  .title {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
  }

  .social-links {
    margin: 2rem 0;
  }

  .social-links a {
    margin: 0 0.5rem;
    text-decoration: none;
  }

  .social-links img {
    width: 24px;
    height: 24px;
    opacity: 0.6;
    transition: opacity 0.2s;
  }

  .social-links img:hover {
    opacity: 1;
  }

  .navigation {
    margin-top: 3rem;
  }

  .navigation a {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
    margin: 0.5rem 0;
    font-size: 1.1rem;
    transition: color 0.2s;
  }

  .navigation a:hover {
    color: var(--text-primary);
  }
}

/* =============================================
   Charts
   ============================================= */

.charts {
  iframe {
    display: block;
    width: 100%;
  }
}

.chart-iframe {
  zoom: 0.5;
}

@media (max-width: 768px) {
  .chart-iframe {
    zoom: 0.35;
  }
}