/* ============================================================
   PADO REAL ESTATE — APPLE ECOSYSTEM TYPOGRAPHY SYSTEM
   Premium, clean typography for Nigerian property platform
   ============================================================ */

/* CSS Custom Properties (Design Tokens) */
:root {
  /* Font Stack */
  --font-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Roboto Mono', Menlo, Courier, monospace;
  
  /* Type Scale (1.25 ratio — Major Third) */
  --text-xs: 0.75rem;    /* 12px — Fine print, badges */
  --text-sm: 0.875rem;   /* 14px — Secondary text, labels */
  --text-base: 1rem;     /* 16px — Body text */
  --text-lg: 1.125rem;   /* 18px — Large body, intro text */
  --text-xl: 1.25rem;    /* 20px — Subheadings */
  --text-2xl: 1.5rem;    /* 24px — H4 */
  --text-3xl: 1.875rem;  /* 30px — H3 */
  --text-4xl: 2.25rem;   /* 36px — H2 */
  --text-5xl: 3rem;      /* 48px — H1 */
  
  /* Font Weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  
  /* Line Heights */
  --leading-tight: 1.15;   /* Headings */
  --leading-snug: 1.35;    /* Subheadings */
  --leading-normal: 1.6;    /* Body text */
  --leading-relaxed: 1.75;  /* Large body, intros */
  
  /* Letter Spacing */
  --tracking-tight: -0.025em;  /* Large headings */
  --tracking-normal: 0;         /* Body text */
  --tracking-wide: 0.02em;      /* Small text, labels */
  --tracking-wider: 0.05em;     /* Badges, overlines */
  
  /* Brand Colors */
  --color-propertyfind-green: #0d7c3b;
  --color-propertyfind-dark: #1a3a4a;
  --color-heading: #1a1a1a;
  --color-body: #3a3a3a;
  --color-muted: #666666;
  --color-price: #0d7c3b;
  
  /* Spacing */
  --spacing-paragraph: 1.2em;
}

/* ============================================================
   GLOBAL RESET — Replace PT Sans Narrow with Apple stack
   ============================================================ */
body, html {
  font-family: var(--font-text) !important;
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   HEADING HIERARCHY
   ============================================================ */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin: 0 0 0.5em;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin: 1.5em 0 0.5em;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--color-heading);
  margin: 1.25em 0 0.5em;
}

h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  margin: 1em 0 0.5em;
}

h5, .h5 {
  font-family: var(--font-text);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-heading);
}

h6, .h6 {
  font-family: var(--font-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-heading);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ============================================================
   BODY & PARAGRAPH TEXT
   ============================================================ */
p, .p {
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  margin: 0 0 var(--spacing-paragraph);
  color: var(--color-body);
}

.lead, .intro-text {
  font-family: var(--font-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
}

small, .text-small, .text-muted {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.text-xs {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

/* ============================================================
   PRICE DISPLAY — Optimized for ₦ currency
   ============================================================ */
.price, .property-price, .listing-price {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--color-price);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.price .currency, .currency-symbol {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: 0.85em;
  vertical-align: super;
  margin-right: 1px;
}

.price-large {
  font-size: var(--text-3xl);
}

.price-medium {
  font-size: var(--text-xl);
}

.price-small {
  font-size: var(--text-base);
}

/* ============================================================
   ADDRESS & LOCATION TEXT — Optimized for Nigerian addresses
   ============================================================ */
.address, .location-text, .property-address {
  font-family: var(--font-text);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-muted);
  letter-spacing: 0.01em; /* Slightly open for Nigerian address readability */
}

.address strong, .location-text strong {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

/* ============================================================
   BUTTONS
   ============================================================ */
button, .btn, .button,
input[type="button"], input[type="submit"], input[type="reset"] {
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  letter-spacing: 0.01em;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}

.btn-large {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.btn-small {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* ============================================================
   FORM INPUTS
   ============================================================ */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"],
input[type="url"], textarea, select {
  font-family: var(--font-text);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

input::placeholder, textarea::placeholder {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  color: #999;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
nav, .nav, .menu, .sf-menu, .header_menu {
  font-family: var(--font-text);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
}

nav a, .nav a, .menu a, .sf-menu a {
  font-family: inherit;
  font-weight: inherit;
}

/* ============================================================
   LISTING CARDS
   ============================================================ */
.listing-title, .property-title, .appartment_item .title_block a {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--color-heading);
}

.listing-card .price {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  color: var(--color-price);
}

/* ============================================================
   ARTICLE CONTENT (for your 189 articles)
   ============================================================ */
.entry-page-body, .article-content, .blog-post {
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-body);
}

.entry-page-body h2, .article-content h2, .blog-post h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
}

.entry-page-body h3, .article-content h3, .blog-post h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
}

.entry-page-body p, .article-content p, .blog-post p {
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--spacing-paragraph);
}

/* ============================================================
   TABLES — For property data
   ============================================================ */
table {
  font-family: var(--font-text);
  font-size: var(--text-sm);
}

table th {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

table td {
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
}

/* ============================================================
   TAGS & BADGES
   ============================================================ */
.tag, .badge, .label {
  font-family: var(--font-text);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer, .footer, #footer {
  font-family: var(--font-text);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ============================================================
   RESPONSIVE — Mobile-first adjustments
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --text-5xl: 2rem;     /* H1: 48px → 32px */
    --text-4xl: 1.625rem; /* H2: 36px → 26px */
    --text-3xl: 1.375rem; /* H3: 30px → 22px */
    --text-2xl: 1.125rem; /* H4: 24px → 18px */
    --text-base: 0.9375rem; /* Body: 16px → 15px */
  }
  
  body, html {
    font-size: var(--text-base);
  }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.font-display { font-family: var(--font-display); }
.font-text { font-family: var(--font-text); }
.font-mono { font-family: var(--font-mono); }

.weight-light { font-weight: var(--weight-light); }
.weight-regular { font-weight: var(--weight-regular); }
.weight-medium { font-weight: var(--weight-medium); }
.weight-semibold { font-weight: var(--weight-semibold); }
.weight-bold { font-weight: var(--weight-bold); }

.text-price { color: var(--color-price); font-family: var(--font-display); font-weight: var(--weight-bold); }
.text-naira { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }