/*
Theme Name: Tarin24 Mag
Theme URI: https://tarin24.ir/mag/
Author: Tarin24
Description: تَرین ۲۴ travel magazine theme. Design tokens ported 1:1 from web/css/tokens.css — keep the two in sync by hand when tokens.css changes (see docs/superpowers/specs/2026-08-19-mag-wordpress-design.md §6).
Version: 1.0.0
Text Domain: tarin24-mag
*/

:root {
  --bg: #F7F5F0;
  --surface: #FFFFFF;
  --surface-2: #EEF3F2;
  --ink: #14292E;
  --ink-2: #3E555B;
  --ink-3: #64787D;
  --brand: #0B7285;
  --brand-strong: #085A6A;
  --brand-deep: #0A3B46;
  --brand-tint: #E2F0F2;
  --on-brand: #FFFFFF;
  --accent: #B45D00;
  --accent-bg: #FDF1E1;
  --accent-line: #ECCB9A;
  --line: #E0E6E4;
  --line-strong: #C6D2D0;
  --font: "Vazirmatn", "IRANSansX", "Iranian Sans", "Segoe UI", Tahoma, "DejaVu Sans", sans-serif;
  --fs--1: 0.8125rem;
  --fs-0: 0.9375rem;
  --fs-1: 1.0625rem;
  --fs-2: 1.25rem;
  --fs-3: 1.5rem;
  --fs-4: 1.875rem;
  --fs-5: 2.375rem;
  --lh-tight: 1.35;
  --lh-body: 1.85;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --r-s: 8px; --r-m: 12px; --r-l: 18px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(20, 41, 46, 0.06), 0 1px 6px rgba(20, 41, 46, 0.05);
  --shadow-2: 0 4px 14px rgba(20, 41, 46, 0.10), 0 2px 4px rgba(20, 41, 46, 0.06);
  --maxw: 1080px;
  --focus-ring: 0 0 0 3px rgba(11, 114, 133, 0.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-0);
  line-height: var(--lh-body);
}

a { color: var(--brand); }
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.site-header nav a {
  margin-inline-start: var(--sp-5);
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--fs-0);
}
.site-header nav a:hover,
.site-header nav a.is-active { color: var(--brand); }

.logo { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--fs-2); }

.mag-shell { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-6) var(--sp-5); }

.mag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-5); }

.mag-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow-1); }
.mag-card img { width: 100%; height: 180px; object-fit: cover; display: block; }
.mag-card__body { padding: var(--sp-4); }
.mag-card__category { color: var(--accent); font-size: var(--fs--1); font-weight: 600; }
.mag-card__category a { color: inherit; text-decoration: none; }
.mag-card__title { font-size: var(--fs-2); margin: var(--sp-2) 0; }
.mag-card__title a { color: var(--ink); text-decoration: none; }
.mag-card__excerpt { color: var(--ink-2); font-size: var(--fs-0); }
.mag-card__meta { color: var(--ink-3); font-size: var(--fs--1); margin-top: var(--sp-3); }

.mag-single { max-width: 720px; margin: 0 auto; }
.mag-single__title { font-size: var(--fs-5); line-height: var(--lh-tight); margin-bottom: var(--sp-3); }
.mag-single__meta { color: var(--ink-3); font-size: var(--fs--1); margin-bottom: var(--sp-5); }
.mag-single__figure { margin: 0 0 var(--sp-6); }
.mag-single__figure img { width: 100%; border-radius: var(--r-l); display: block; }
.mag-single__content { font-size: var(--fs-1); }
.mag-single__content h2 { font-size: var(--fs-3); margin-top: var(--sp-7); }
.mag-single__content blockquote { border-inline-start: 3px solid var(--brand); margin: var(--sp-5) 0; padding: var(--sp-3) var(--sp-5); color: var(--ink-2); background: var(--surface-2); border-radius: var(--r-m); }

.site-footer { border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs--1); }
.site-footer__inner { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-6) var(--sp-5); }