/* =========================================================
   Dozey blog — shared layout
   ---------------------------------------------------------
   Used by blog.html (the index) and every article in /blog/.
   ========================================================= */

:root {
  --font-lora: 'Lora', serif;
  --font-source: 'Source Sans Pro', sans-serif;
  --color-cream: #f8f1d8;
  --color-dark-text: #0e3438;
  --color-dark-teal: #0b1d22;
  --color-light-teal: #205b75;
  --color-light-cream: #f2e3b5;

  /* One shell width for every blog page, so the logo and nav sit in
     exactly the same place as you move between them. */
  --shell: 960px;
  /* Articles hold a narrower measure — 960px of 1.125rem text runs to
     about 110 characters a line, well past comfortable reading. */
  --measure: 800px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-source);
  background: var(--color-cream);
  color: var(--color-dark-text);
  line-height: 1.7;
  font-size: 1.125rem;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: var(--color-dark-text); transition: color .2s ease; }
a:hover { color: var(--color-light-teal); }

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

.container { max-width: var(--shell); margin: 0 auto; padding: 0 1rem; }

/* ============================= */
/* HEADER & NAV                  */
/* ============================= */

header {
  background: var(--color-dark-teal);
  color: var(--color-cream);
  padding: 1rem 0;
}

.nav-wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.brand-logo { max-height: 80px; width: auto; }

nav ul { display: flex; gap: 1.5rem; list-style: none; flex-wrap: wrap; }
nav a { color: var(--color-cream); font-weight: 600; }
nav a:hover { color: var(--color-light-cream); }

/* The page you are already on */
nav a[aria-current="page"] {
  color: var(--color-light-cream);
  text-decoration: underline;
  text-underline-offset: .35em;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--color-cream);
  font-size: 1.5rem;
  cursor: pointer;
}

/* ============================= */
/* INDEX: HERO + POST GRID       */
/* ============================= */

.page-hero {
  text-align: center;
  padding: 3rem 1rem 2rem;
  background: linear-gradient(0deg, rgba(11,29,34,0.05), rgba(11,29,34,0.05));
  border-bottom: 1px solid rgba(14,52,56,0.08);
}

.page-title {
  font-family: var(--font-lora);
  font-size: 2.75rem;
  margin-bottom: .5rem;
  color: var(--color-dark-text);
}

.page-sub { color: #315760; font-size: 1.125rem; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin: 3rem 0 5rem;
}

.post-card {
  background: var(--color-light-cream);
  border-radius: 1.5rem;
  overflow: hidden;
  transition: transform .25s ease;
}

.post-card:hover { transform: translateY(-4px); }
.post-card .post-image img { width: 100%; height: 200px; object-fit: cover; display: block; }
.post-card .post-content { padding: 1.5rem; }

.post-card .post-title {
  font-family: var(--font-lora);
  font-size: 1.5rem;
  margin-bottom: .5rem;
  color: var(--color-dark-text);
}

.post-excerpt { margin: 1rem 0; color: #234; }

.post-meta { color: #456; font-size: .95rem; }

.read-more {
  display: inline-block;
  padding: .6rem 1.4rem;
  border-radius: 2rem;
  background: var(--color-dark-teal);
  color: var(--color-cream);
  font-weight: 600;
  font-size: .95rem;
  transition: background .2s ease;
}

.read-more:hover { background: var(--color-light-teal); color: var(--color-cream); }

/* ============================= */
/* ARTICLE                       */
/* ============================= */

.post { max-width: var(--measure); margin: 3rem auto 5rem; }

.post .post-hero img {
  width: 100%;
  border-radius: 1rem;
  object-fit: cover;
  max-height: 420px;
}

.post .post-title {
  font-family: var(--font-lora);
  font-size: 2.25rem;
  margin: 1.5rem 0 .75rem;
  color: var(--color-dark-text);
}

.post .post-meta { margin-bottom: 2rem; }

.post-body p { margin-bottom: 1.25rem; }
.post-body ul, .post-body ol { margin: 0 0 1.25rem 1.5rem; }
.post-body li { margin-bottom: .5rem; }

.post-body h2 {
  font-family: var(--font-lora);
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: var(--color-light-teal);
}

.post-body em { font-style: italic; }
.post-body strong { font-weight: 600; }

.non-pro-tip {
  background: var(--color-light-cream);
  padding: 1.5rem;
  border-radius: 1rem;
  font-style: italic;
  margin-top: 2rem;
}

.back-link {
  display: inline-block;
  margin-top: 2.5rem;
  padding: .7rem 1.6rem;
  border-radius: 2rem;
  background: var(--color-dark-teal);
  color: var(--color-cream);
  font-weight: 600;
  transition: background .2s ease;
}

.back-link:hover { background: var(--color-light-teal); color: var(--color-cream); }

/* ============================= */
/* RESPONSIVE                    */
/* ============================= */

@media (max-width: 768px) {
  nav ul { flex-direction: column; width: 100%; display: none; margin-top: 1rem; }
  nav ul.open { display: flex; }
  .menu-toggle { display: block; }

  .page-title { font-size: 2rem; }
  .post .post-title { font-size: 1.75rem; }
  .post { margin: 2rem auto 3rem; }
}