/*
Theme Name: Fresh Faced Blog
Theme URI: https://freshfacedmarketing.co.uk
Author: Fresh Faced
Author URI: https://freshfacedmarketing.co.uk
Description: Custom theme that matches the Fresh Faced static site — reuses the live header, footer and marlo.css so /blog looks like a native part of the main site.
Version: 1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: freshfaced
*/

/* ============================================================
   Blog content styling — inherits brand tokens from marlo.css
   (--orange, --fg, --cream, --font-sans, --font-mono, --maxw …)
   ============================================================ */

.blog-main{ padding: 56px 0 90px; }

/* ---- Listing header ---- */
.blog-head{ max-width: 760px; margin: 0 auto 44px; text-align: center; }
.blog-head .kicker{ display:inline-block; margin-bottom: 14px; }
.blog-head h1{
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--fg);
  text-wrap: balance;
}
.blog-head p{ margin-top: 14px; color:#4a463f; font-size: 1.05rem; line-height:1.6; }

/* ---- Post grid ---- */
.blog-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
  max-width: var(--maxw);
  margin-inline: auto;
}
.post-card{
  background: var(--cream);
  border: 1px solid rgba(22,18,14,.08);
  border-radius: 20px;
  padding: 26px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .22s ease, box-shadow .22s ease;
}
.post-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 42px rgba(22,18,14,.10); }
.post-card .p-thumb{ display:block; margin:-26px -26px 4px; border-radius: 20px 20px 0 0; overflow:hidden; aspect-ratio: 16/9; }
.post-card .p-thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card .p-date{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-muted, #6a655c);
}
.post-card h2{ font-family: var(--font-sans); font-weight: 700; font-size: 1.4rem; line-height: 1.2; margin:0; }
.post-card h2 a{ color: var(--fg); text-decoration: none; }
.post-card h2 a:hover{ color: var(--orange); }
.post-card p{ color:#4a463f; font-size: .98rem; line-height: 1.6; margin:0; }
.post-card .read-more{
  margin-top: auto;
  padding-top: 6px;
  font-weight: 700;
  color: var(--orange);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.post-card .read-more:hover{ gap: 10px; }

/* ---- Single post / page ---- */
.post-single{ max-width: 760px; margin: 0 auto; }
.post-single .p-hero{ text-align: center; margin-bottom: 34px; }
.post-single .p-hero .kicker{ display:inline-block; margin-bottom: 14px; }
.post-single h1{
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--fg);
  text-wrap: balance;
}
.post-single .p-meta{
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-muted, #6a655c);
  margin-top: 16px;
}
.featured-img{ width: 100%; border-radius: 20px; margin-bottom: 32px; display:block; }

.post-content{ font-size: 1.08rem; line-height: 1.75; color: #2c2822; }
.post-content > *{ margin: 0 0 1.2em; }
.post-content h2{ font-family: var(--font-sans); font-weight: 700; font-size: 1.7rem; letter-spacing:-.01em; margin: 1.8em 0 .5em; color: var(--fg); }
.post-content h3{ font-family: var(--font-sans); font-weight: 700; font-size: 1.32rem; margin: 1.5em 0 .4em; color: var(--fg); }
.post-content a{ color: var(--orange); text-underline-offset: 3px; }
.post-content img{ max-width: 100%; height: auto; border-radius: 16px; }
.post-content ul, .post-content ol{ padding-left: 1.3em; }
.post-content li{ margin-bottom: .5em; }
.post-content blockquote{
  border-left: 4px solid var(--orange);
  padding: 4px 0 4px 22px;
  margin: 1.6em 0;
  font-style: italic;
  color: #4a463f;
}
.post-content code{ font-family: var(--font-mono); background: rgba(22,18,14,.06); padding: .1em .4em; border-radius: 6px; font-size: .9em; }

/* ---- Pagination ---- */
.blog-nav{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 760px;
  margin: 52px auto 0;
}
.blog-nav a{ color: var(--orange); font-weight: 700; text-decoration: none; }
.blog-nav a:hover{ text-decoration: underline; }

/* ---- Empty state ---- */
.blog-empty{ text-align:center; max-width:520px; margin: 40px auto; color:#4a463f; }

@media (max-width: 640px){
  .blog-main{ padding: 40px 0 70px; }
  .post-card .p-thumb{ margin:-26px -26px 4px; }
}