/*
  ===================================================
  IN TRANSIT - style.css
  Shared styles across all pages
  ===================================================

  Sections:
    1. DESIGN TOKENS
    2. RESET & BASE
    3. TYPOGRAPHY
    4. LAYOUT UTILITIES
    5. NAVIGATION
    6. BUTTONS
    7. HERO
    8. SECTIONS
    9. POST CARDS
   10. ABOUT GRID
   11. CONTACT
   12. FOOTER
   13. RESPONSIVE
*/


/* ===================================================
   1. DESIGN TOKENS
=================================================== */
:root {
  --color-bg:         #fafaf8;
  --color-bg-tinted:  #f3f2ee;
  --color-text:       #1a1a18;
  --color-text-muted: #6b6b62;
  --color-accent:     #d2691e;
  --color-border:     #e5e4df;

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  3rem;
  --space-xl:  5rem;
  --space-2xl: 8rem;

  --container-max: 1100px;
  --container-narrow: 680px;
  --radius: 4px;
  --transition: 150ms ease;
}


/* ===================================================
   2. RESET & BASE
=================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 300;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul { list-style: none; }


/* ===================================================
   3. TYPOGRAPHY
=================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.25rem; }

p {
  max-width: 65ch;
  margin-top: var(--space-sm);
}

em { font-style: italic; }

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

.section-label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.section-title {
  margin-bottom: var(--space-lg);
}


/* ===================================================
   4. LAYOUT UTILITIES
=================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container--narrow  { max-width: var(--container-narrow); }
.container--centered { text-align: center; }
.container--centered p { margin-inline: auto; }

.section { padding-block: var(--space-2xl); }
.section--tinted { background-color: var(--color-bg-tinted); }


/* ===================================================
   5. NAVIGATION
=================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(8px);
  background-color: rgba(250, 250, 248, 0.92);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-md);
  height: 64px;
}

/* Site logo / name - styled as wordmark until a real logo is added */
.nav-logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--color-text);
  letter-spacing: -0.01em;
  transition: color var(--transition);
}

.nav-logo:hover { color: var(--color-accent); }

/* Replace logo text with an image later:
   <a href="/index.html" class="nav-logo">
     <img src="/assets/logo.svg" alt="In Transit" height="32" />
   </a>
*/

.nav-links {
  display: flex;
  gap: var(--space-lg);
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text-muted);
  transition: color var(--transition);
  position: relative;
}

.nav-links a:hover { color: var(--color-text); }

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-accent);
  transition: width var(--transition);
}

.nav-links a:hover::after { width: 100%; }

/* Active page link */
.nav-links a.active {
  color: var(--color-text);
}

.nav-links a.active::after {
  width: 100%;
}


/* ===================================================
   6. BUTTONS
=================================================== */
.btn {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
  text-decoration: none;
}

.btn-primary {
  background-color: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background-color: #a85316;
  border-color: #a85316;
}

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

.btn-ghost:hover { border-color: var(--color-text-muted); }

.btn--large { padding: 0.85rem 2rem; font-size: 1rem; }
.btn--small { padding: 0.4rem 0.9rem; font-size: 0.8rem; }


/* ===================================================
   7. HERO
=================================================== */
.hero {
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
}

.hero-headline {
  max-width: 16ch;
  margin-bottom: var(--space-md);
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  max-width: 45ch;
}

.hero-byline {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  max-width: 45ch;
  margin-top: 0;
}

.hero-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}


/* ===================================================
   8. POST CARDS
=================================================== */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
}

.post-card {
  padding: var(--space-lg);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.post-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.post-meta time {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.post-tag {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  background-color: rgba(210, 105, 30, 0.08);
  padding: 2px 8px;
  border-radius: 20px;
}

.post-title {
  margin-bottom: var(--space-xs);
  font-size: 1.15rem;
}

.post-title a { transition: color var(--transition); }
.post-title a:hover { color: var(--color-accent); }

.post-excerpt {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  flex-grow: 1;
  max-width: none;
}

/* Author attribution on home page post cards */
.post-author {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
  max-width: none;
}

.read-more {
  display: inline-block;
  margin-top: var(--space-md);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-accent);
}

.read-more:hover { text-decoration: underline; }


/* ===================================================
   9. ABOUT GRID
=================================================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-md);
}

/* Two-person about layout on the About Us page */
.person-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.person-photo {
  aspect-ratio: 3 / 4;
  max-height: 340px;
  background-color: var(--color-bg-tinted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  overflow: hidden;
}

.person-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-bottom: 0.25rem;
}

.person-bio p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  max-width: none;
}

.person-bio p + p {
  margin-top: var(--space-sm);
}


/* ===================================================
  10. CONTACT
=================================================== */
.contact-text {
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
  max-width: 50ch;
  margin-inline: auto;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.social-links a {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  transition: color var(--transition);
}

.social-links a:hover { color: var(--color-accent); }


/* ===================================================
  11. FOOTER
=================================================== */
.footer {
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.footer p, .footer a {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  max-width: none;
}

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

.footer-links {
  display: flex;
  gap: var(--space-md);
}


/* ===================================================
  12. RESPONSIVE
=================================================== */
@media (max-width: 768px) {
  :root {
    --space-xl: 3rem;
    --space-2xl: 5rem;
  }

  .nav-links { gap: var(--space-md); }
  .about-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .nav-links { display: none; }
  .hero { padding-block: var(--space-xl); }
}