/* -----------------------------
   Honest John Blog – Base Styles
   ----------------------------- */

:root {
  --background: #f8f8f8;
  --white: #ffffff;
  --black: #222;
  --grey: #666;
  --light-grey: #ddd;
  --accent: #004aad; /* Racing blue style */
  --accent-dark: #003a88;
  --max-width: 900px;
  --font-body: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--background);
  font-family: var(--font-body);
  color: var(--black);
  line-height: 1.6;
}

/* -----------------------------
   Header
   ----------------------------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--light-grey);
  padding: 0.8rem 0;
}

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1rem;
}

.logo {
  text-decoration: none;
  color: var(--black);
}

.logo-main {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: bold;
}

.logo-tagline {
  display: block;
  font-size: 0.8rem;
  color: var(--grey);
}

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}

.main-nav a {
  text-decoration: none;
  color: var(--black);
  font-weight: 500;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--accent);
}


/* -----------------------------
   Article Layout
   ----------------------------- */

.site-main {
  padding: 2rem 0;
}

.content-wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--white);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.blog-article img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Hero image */
.article-hero {
  margin: 0;
  margin-bottom: 1rem;
}
/* -----------------------------
   Blog Card Image – Responsive Fix
   ----------------------------- */

.blog-card-image {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;        /* Ensures the image fills nicely */
  object-position: center;  /* Keeps image centered */
  border-bottom: 1px solid var(--light-grey);
  background: #eee;         /* Gentle fallback if image fails */
}

@media (max-width: 500px) {
  .blog-card-image {
    height: 160px;          /* Slightly shorter on phones */
  }
}

/* -----------------------------
   Typ
/* -----------------------------
   Footer (Updated)
   ----------------------------- */

.site-footer {
  margin-top: 2rem;
  background: var(--white);
  border-top: 1px solid var(--light-grey);
  padding: 1.5rem 0;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;          /* Center the footer block */
  padding: 0 1rem;          /* Add side padding */
  text-align: center;       /* Center the text */
  color: var(--grey);
  font-size: 0.9rem;
}

.footer-note {
  margin-top: 0.5rem;
  font-size: 0.8rem;
}
/* ------------------------------------------
   Honest John Blog Link Colours
   ------------------------------------------ */

/* Base colours */
:root {
  --hj-green: #2f7d31;      /* Honest John green */
  --hj-green-light: #48a34a; /* Hover and active */
}

/* Remove default blue and underline */
a {
  color: var(--hj-green);
  text-decoration: none;
}

/* Hover effect - lighter green */
a:hover {
  color: var(--hj-green-light);
  text-decoration: none;
}

/* Active navigation item */
.main-nav a.active {
  color: var(--hj-green-light);
}

/* Blog card titles and read-more links */
.blog-card-title a,
.blog-card-readmore {
  color: var(--hj-green);
}

.blog-card-title a:hover,
.blog-card-readmore:hover {
  color: var(--hj-green-light);
}

/* Inside the article content */
.blog-article a {
  color: var(--hj-green);
}

.blog-article a:hover {
  color: var(--hj-green-light);
}