/*
Theme Name: AGTalent Blog Styles
Theme URI: https://agtalent.co.uk/
Description: Child theme of the AGTalent theme. Adds a branded, on-brand layout for blog posts and the blog listing so articles match the rest of the site. Only affects blog post and archive pages. Everything else inherits the parent theme unchanged.
Author: AG Talent
Template: agtalent
Version: 1.6.0
*/

/* -------------------------------------------------------------
   Brand tokens
   Light blue  #4FB6EC
   Dark blue   #101426
   Font        Poppins
------------------------------------------------------------- */

:root {
  --ag-light-blue: #4FB6EC;
  --ag-dark-blue: #101426;
  --ag-text: #1f2433;
  --ag-muted: #5b6275;
  --ag-border: #e6e9f0;
  --ag-bg-soft: #f6f8fb;
}

/* -------------------------------------------------------------
   Keep links their normal colour after being clicked.
   The parent theme colours links via the :link selector, which
   leaves the visited state to the browser default (purple). These
   rules make visited links match their normal colour site-wide.
------------------------------------------------------------- */

a:visited {
  color: inherit;
}

.btn-blue:visited,
a.btn-blue:visited {
  color: #ffffff;
}

.navbar-nav a:visited {
  color: inherit;
}

.navbar-nav .active a:visited {
  color: var(--ag-light-blue);
}

.ag-article__body a:visited {
  color: var(--ag-light-blue);
}

.ag-tile__title a:visited {
  color: var(--ag-dark-blue);
}

.ag-back-link:visited {
  color: var(--ag-light-blue);
}

/* -------------------------------------------------------------
   Article wrapper
------------------------------------------------------------- */

.ag-article {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--ag-text);
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 20px 96px;
  line-height: 1.75;
  font-size: 18px;
}

/* Post header */
.ag-article__header {
  margin-bottom: 40px;
  border-bottom: 1px solid var(--ag-border);
  padding-bottom: 28px;
}

.ag-article__title {
  font-family: 'Poppins', sans-serif;
  color: var(--ag-dark-blue);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.2;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.ag-article__meta {
  font-size: 0.95rem;
  color: var(--ag-muted);
  font-weight: 500;
}

.ag-article__meta a {
  color: var(--ag-muted);
  text-decoration: none;
}

.ag-article__meta .ag-dot {
  margin: 0 8px;
  color: var(--ag-light-blue);
}

/* Featured image */
.ag-article__featured {
  margin: 0 0 40px;
}

.ag-article__featured img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* -------------------------------------------------------------
   Post body typography
------------------------------------------------------------- */

.ag-article__body > * {
  margin-top: 0;
  margin-bottom: 1.4em;
}

.ag-article__body h2 {
  font-family: 'Poppins', sans-serif;
  color: var(--ag-dark-blue);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.3;
  margin-top: 2em;
  margin-bottom: 0.6em;
}

.ag-article__body h3 {
  font-family: 'Poppins', sans-serif;
  color: var(--ag-dark-blue);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.35;
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}

.ag-article__body p {
  font-size: 18px;
  color: var(--ag-text);
}

.ag-article__body a {
  color: var(--ag-light-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}

.ag-article__body a:hover {
  color: var(--ag-dark-blue);
}

.ag-article__body ul,
.ag-article__body ol {
  padding-left: 1.4em;
}

.ag-article__body li {
  margin-bottom: 0.5em;
}

.ag-article__body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 2em auto;
}

.ag-article__body blockquote {
  border-left: 4px solid var(--ag-light-blue);
  background: var(--ag-bg-soft);
  margin: 2em 0;
  padding: 18px 24px;
  border-radius: 0 8px 8px 0;
  font-size: 1.1rem;
  color: var(--ag-dark-blue);
}

.ag-article__body blockquote p:last-child {
  margin-bottom: 0;
}

.ag-article__body figure {
  margin: 2em 0;
}

.ag-article__body figure figcaption {
  font-size: 0.9rem;
  color: var(--ag-muted);
  text-align: center;
  margin-top: 0.6em;
}

.ag-article__body iframe {
  max-width: 100%;
  border-radius: 12px;
  margin: 2em 0;
}

.ag-article__body pre {
  background: var(--ag-dark-blue);
  color: #f6f8fb;
  padding: 18px 20px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 0.95rem;
}

.ag-article__body code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.9em;
}

/* -------------------------------------------------------------
   Back to blog / footer of article
------------------------------------------------------------- */

.ag-article__foot {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--ag-border);
}

.ag-back-link {
  display: inline-block;
  font-weight: 600;
  color: var(--ag-light-blue);
  text-decoration: none;
  font-size: 1rem;
}

.ag-back-link:hover {
  color: var(--ag-dark-blue);
}

/* -------------------------------------------------------------
   Blog listing (archive / blog index)
------------------------------------------------------------- */

.ag-blog {
  font-family: 'Poppins', sans-serif;
  max-width: 820px;
  margin: 0 auto;
  padding: 64px 20px 96px;
}

.ag-blog__title {
  color: var(--ag-dark-blue);
  font-weight: 700;
  font-size: 2.2rem;
  margin-bottom: 40px;
}

.ag-card {
  border: 1px solid var(--ag-border);
  border-radius: 14px;
  padding: 28px 30px;
  margin-bottom: 24px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ag-card:hover {
  box-shadow: 0 12px 30px rgba(16, 20, 38, 0.08);
  transform: translateY(-2px);
}

.ag-card__title {
  margin: 0 0 10px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
}

.ag-card__title a {
  color: var(--ag-dark-blue);
  text-decoration: none;
}

.ag-card__title a:hover {
  color: var(--ag-light-blue);
}

.ag-card__meta {
  font-size: 0.9rem;
  color: var(--ag-muted);
  margin-bottom: 12px;
}

.ag-card__excerpt {
  color: var(--ag-text);
  line-height: 1.7;
  margin-bottom: 16px;
}

/* -------------------------------------------------------------
   Insights listing: card grid (image, category, title, excerpt)
------------------------------------------------------------- */

.ag-insights {
  font-family: 'Poppins', sans-serif;
  max-width: 1160px;
  margin: 0 auto;
  padding: 64px 20px 96px;
}

.ag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 32px;
}

.ag-tile {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--ag-border);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ag-tile:hover {
  box-shadow: 0 16px 36px rgba(16, 20, 38, 0.10);
  transform: translateY(-3px);
}

.ag-tile__imglink {
  display: block;
}

.ag-tile__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--ag-bg-soft);
}

.ag-tile__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px 24px 24px;
}

.ag-tile__cat {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ag-light-blue);
  margin-bottom: 10px;
}

.ag-tile__title {
  font-size: 1.2rem;
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 12px;
}

.ag-tile__title a {
  color: var(--ag-dark-blue);
  text-decoration: none;
}

.ag-tile__title a:hover {
  color: var(--ag-light-blue);
}

.ag-tile__excerpt {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ag-muted);
  margin: 0 0 22px;
}

.ag-tile__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ag-border);
}

.ag-tile__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.ag-tile__byline {
  font-size: 0.82rem;
  color: var(--ag-text);
  font-weight: 500;
}

.ag-tile__date {
  display: block;
  color: var(--ag-muted);
  font-weight: 400;
}

.ag-insights__empty {
  font-family: 'Poppins', sans-serif;
  color: var(--ag-muted);
}

/* Pagination on the Insights listing */
.ag-pagination {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.ag-pagination .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 4px;
  border: 1px solid var(--ag-border);
  border-radius: 8px;
  color: var(--ag-dark-blue);
  text-decoration: none;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
}

.ag-pagination .page-numbers.current {
  background: var(--ag-light-blue);
  border-color: var(--ag-light-blue);
  color: #ffffff;
}

.ag-pagination a.page-numbers:hover {
  border-color: var(--ag-light-blue);
  color: var(--ag-light-blue);
}

/* -------------------------------------------------------------
   Responsive
------------------------------------------------------------- */

@media (max-width: 600px) {
  .ag-article {
    padding: 40px 18px 64px;
    font-size: 17px;
  }
  .ag-article__title {
    font-size: 1.8rem;
  }
  .ag-article__body h2 {
    font-size: 1.4rem;
  }
}