/* The Candid Shoot – category/tag archive + single post styles (loaded by the Candid Shoot Category Layout plugin) */

:root {
  --cs-surface: #f8f9ff;
  --cs-primary: #0f172a;
  --cs-secondary: #545f73;
  --cs-accent: #d97706;
  --cs-accent-light: #fef3c7;
  --cs-accent-dark: #92400e;
  --cs-outline: #94a3b8;
  --cs-outline-light: #e2e8f0;
  --cs-serif: "Newsreader", Georgia, serif;
  --cs-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

.cs-main {
  background: var(--cs-surface);
  color: #0b1c30;
  font-family: var(--cs-sans);
  margin-block-start: 0;
  width: 100%;
}

/* ---------- Pill label ---------- */
.cs-pill {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--cs-accent-light);
  color: var(--cs-accent-dark);
  font-family: var(--cs-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Grid + cards ---------- */
.cs-query { padding-bottom: 64px; }
.cs-query .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 1023px) { .cs-query .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .cs-query .wp-block-post-template { grid-template-columns: 1fr; } }
.cs-query .wp-block-post-template > li { height: 100%; }

.cs-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.3s ease;
}
.cs-card:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1); }

.cs-card-img { margin: 0; overflow: hidden; }
.cs-card-img img { transition: transform 0.5s ease; width: 100%; }
.cs-card:hover .cs-card-img img { transform: scale(1.05); }

.cs-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

/* meta row: tag • date • read time */
.cs-meta { gap: 8px; margin-bottom: 8px; font-size: 12px; align-items: center; }
.cs-tag, .cs-tag a {
  color: var(--cs-accent);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.cs-date, .cs-read { color: var(--cs-secondary); margin: 0; }
.cs-tag + .cs-date::before,
.cs-date + .cs-read::before {
  content: "\2022";
  color: rgba(148, 163, 184, 0.6);
  margin-right: 8px;
}

.cs-card-title {
  font-family: var(--cs-serif);
  font-size: 1.375rem;
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 12px;
}
.cs-card-title a { color: #0b1c30; text-decoration: none; transition: color 0.2s; }
.cs-card:hover .cs-card-title a { color: var(--cs-accent); }

.cs-card-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cs-secondary);
  margin: 0 0 24px;
}
.cs-card-excerpt p { margin: 0; }

.cs-author {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
}
.cs-author .wp-block-post-author__avatar { margin: 0; }
.cs-author .wp-block-post-author__avatar img { border-radius: 999px; }
.cs-author .wp-block-post-author__name { color: #0b1c30; }

/* ---------- FAQ band ---------- */
.cs-faq-inner { max-width: 880px; margin-inline: auto; }
.cs-faq {
  background: #fff;
  border-top: 1px solid var(--cs-outline-light);
  padding: 64px 24px 80px;
  margin-top: 0;
}
.cs-faq-title {
  font-family: var(--cs-serif);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: #0b1c30;
  margin: 0 0 32px;
}
.cs-faq .wp-block-rank-math-faq-block { display: flex; flex-direction: column; gap: 12px; }
.cs-faq .rank-math-faq-item {
  background: var(--cs-surface);
  border: 1px solid var(--cs-outline-light);
  border-radius: 12px;
  padding: 20px 24px;
}
.cs-faq .rank-math-question {
  font-family: var(--cs-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: #0b1c30;
  margin: 0 0 8px;
}
.cs-faq .rank-math-answer {
  font-size: 15px;
  line-height: 1.7;
  color: var(--cs-secondary);
}

.cs-main:not(.cs-single) > *:not(.cs-faq):not(script) {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}
.cs-hero {
  padding-top: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  margin-bottom: 48px;
}
.cs-hero > * { max-width: 720px; margin-inline: 0; }

/* ---------- Breadcrumb (Rank Math shortcode) ---------- */
.cs-hero .rank-math-breadcrumb {
  font-size: 12px;
  color: var(--cs-secondary);
  margin-bottom: 24px;
}
.cs-hero .rank-math-breadcrumb a { color: var(--cs-secondary); text-decoration: none; }
.cs-hero .rank-math-breadcrumb a:hover { color: var(--cs-primary); }
.cs-hero .rank-math-breadcrumb .separator { color: var(--cs-outline); margin: 0 6px; }
.cs-hero .rank-math-breadcrumb .last { color: var(--cs-primary); font-weight: 600; }

/* ---------- Title + description ---------- */
.cs-title {
  font-family: var(--cs-serif);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1.1;
  font-weight: 700;
  color: #0b1c30;
  margin: 0 0 16px;
}
.cs-desc {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--cs-secondary);
  margin: 0;
}

.cs-desc p { margin: 0 0 0.75em; }
.cs-desc p:last-child { margin-bottom: 0; }
.cs-count { margin: 16px 0 0; font-size: 13px; color: var(--cs-secondary); }
/* ---------- Pagination ---------- */
.cs-pagination { margin-top: 56px; gap: 8px; font-size: 14px; }
.cs-pagination a,
.cs-pagination .page-numbers {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--cs-secondary);
  text-decoration: none;
}
.cs-pagination a:hover { background: #fff; color: var(--cs-primary); }
.cs-pagination .page-numbers.current {
  background: var(--cs-primary);
  color: #fff;
}

.cs-pagination-fallback { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 auto; padding-bottom: 64px; font-size: 14px; }
.cs-pagination-fallback .page-numbers { padding: 8px 14px; border-radius: 999px; color: var(--cs-secondary); text-decoration: none; }
.cs-pagination-fallback a.page-numbers:hover { background: #fff; color: var(--cs-primary); }
.cs-pagination-fallback .page-numbers.current { background: var(--cs-primary); color: #fff; }

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
  .cs-hero { padding-top: 24px; padding-bottom: 28px; margin-bottom: 32px; }
  .cs-faq { padding: 48px 20px 56px; }
}



/* =====================================================================
   SINGLE POST
   ===================================================================== */
.cs-single .cs-article-grid {
  max-width: 1280px;
  margin-inline: auto;
  padding: 16px 24px 40px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 1023px) {
  .cs-single .cs-article-grid { grid-template-columns: 1fr; gap: 24px; padding: 12px 20px 32px; }
}
.cs-article-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cs-article-main > * { margin: 0; }

/* breadcrumb */
.cs-article-main .rank-math-breadcrumb { margin: 0; padding: 0; font-size: 13px; line-height: 1.3; color: var(--cs-secondary); }
.cs-article-main .rank-math-breadcrumb p { margin: 0; padding: 0; line-height: 1.3; }
.cs-article-main > .wp-block-shortcode, .cs-article-main > nav { margin: 0; padding: 0; }
.cs-article-main .rank-math-breadcrumb a { color: var(--cs-secondary); text-decoration: none; }
.cs-article-main .rank-math-breadcrumb a:hover { color: var(--cs-primary); }
.cs-article-main .rank-math-breadcrumb .separator { color: var(--cs-outline); margin: 0 6px; }
.cs-article-main .rank-math-breadcrumb .last { color: var(--cs-primary); font-weight: 600; }

/* header */
.cs-single-head { display: flex; flex-direction: column; gap: 12px; }
.cs-single-head > * { margin: 0; }
.cs-single-meta { gap: 12px; align-items: center; font-size: 14px; color: var(--cs-secondary); }
.cs-cat-pill, .cs-cat-pill a {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--cs-accent-light);
  color: var(--cs-accent-dark);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}
.cs-cat-pill a { padding: 0; background: none; }
.cs-single-meta .cs-date, .cs-single-meta .cs-read { margin: 0; }
.cs-single-meta .cs-date::before, .cs-single-meta .cs-read::before { content: "\2022"; margin-right: 12px; color: var(--cs-secondary); }
.cs-single-title {
  font-family: var(--cs-serif);
  font-size: clamp(2rem, 4vw, 2.625rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0b1c30;
}
.cs-byline { display: flex; align-items: center; gap: 16px; padding-top: 4px; font-weight: 600; font-size: 16px; }
.cs-byline .wp-block-post-author__avatar { margin: 0; }
.cs-byline .wp-block-post-author__avatar img { border-radius: 999px; }
.cs-byline .wp-block-post-author__name { color: #0b1c30; }
.cs-share {
  display: flex; align-items: center; gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  color: var(--cs-secondary);
}
.cs-share-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding-right: 8px; }
.cs-share a, .cs-share .cs-copy-link {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--cs-secondary);
  background: #eff4ff;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.cs-share a:hover, .cs-share .cs-copy-link:hover { background: var(--cs-accent); color: #fff; }
.cs-share svg { display: block; }
.cs-copy-status { font-size: 12px; color: var(--cs-accent-dark); margin-left: 4px; }

/* featured image */
.cs-hero-img { margin: 0; }
.cs-hero-img img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); display: block; }

/* article body (post content) */
.cs-content { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.cs-content > * { margin: 0; }
.cs-content p {
  font-family: var(--cs-sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #45464d;
}
.cs-content > p:first-of-type {
  font-family: var(--cs-serif);
  font-size: 1.25rem;
  color: rgba(11, 28, 48, 0.9);
}
.cs-content > p:first-of-type::first-letter {
  float: left;
  font-size: 3rem;
  line-height: 1;
  font-weight: 700;
  margin-right: 12px;
  color: var(--cs-primary);
}
.cs-content h2, .cs-content h3 {
  font-family: var(--cs-serif);
  color: var(--cs-primary);
  font-weight: 600;
  line-height: 1.25;
  scroll-margin-top: 140px;
}
.cs-content h2 { font-size: 1.875rem; padding-top: 16px; }
.cs-content h3 { font-size: 1.5rem; }
.cs-content a { color: var(--cs-accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.cs-content a:hover { color: var(--cs-accent); }
.cs-content ul, .cs-content ol {
  font-family: var(--cs-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #45464d;
  padding-left: 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.cs-content li strong { color: var(--cs-primary); font-weight: 600; }
.cs-content figure { margin: 8px 0; }
.cs-content figure img { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.cs-content figcaption {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  font-style: italic;
  color: var(--cs-secondary);
}
.cs-content blockquote {
  margin: 8px 0;
  padding: 32px;
  background: #eff4ff;
  border-left: 4px solid var(--cs-accent);
  border-radius: 12px;
}
.cs-content blockquote p {
  font-family: var(--cs-serif);
  font-size: 1.5rem;
  line-height: 1.4;
  font-style: italic;
  color: var(--cs-primary);
}
.cs-content blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--cs-sans);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-secondary);
}
.cs-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cs-content th, .cs-content td { border: 1px solid var(--cs-outline-light); padding: 10px 12px; text-align: left; }
.cs-content th { background: #eff4ff; color: var(--cs-primary); }

/* author box */
.cs-author-box {
  margin-top: 0;
  padding: 24px;
  background: #eff4ff;
  border-radius: 16px;
}
.cs-author-card { display: flex; align-items: center; gap: 24px; }
.cs-author-card .wp-block-post-author__avatar { margin: 0; }
.cs-author-card .wp-block-post-author__avatar img { border-radius: 999px; }
.cs-author-card .wp-block-post-author__byline {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cs-secondary); margin: 0 0 4px;
}
.cs-author-card .wp-block-post-author__name {
  font-family: var(--cs-serif); font-size: 1.5rem; font-weight: 600; color: var(--cs-primary);
  margin: 0 0 8px;
}
.cs-author-card .wp-block-post-author__bio { font-size: 14px; line-height: 1.7; color: #45464d; margin: 0; }
@media (max-width: 639px) { .cs-author-card { flex-direction: column; text-align: center; } }

/* sidebar */
.cs-aside {
  display: flex; flex-direction: column; gap: 14px;
  position: sticky; top: 88px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  scrollbar-width: thin;
}
@media (max-width: 1023px) { .cs-aside { position: static; } }
.cs-aside-card {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.cs-aside-card > * { margin: 0; }
.cs-aside-title { font-family: var(--cs-serif); font-size: 1.125rem; font-weight: 600; color: var(--cs-primary); }
.cs-toc { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.cs-toc a { color: var(--cs-secondary); text-decoration: none; transition: color 0.2s; }
.cs-toc a:hover { color: var(--cs-primary); }

.cs-latest { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cs-latest li { display: grid; grid-template-columns: 48px 1fr; column-gap: 10px; align-items: center; }
.cs-latest .wp-block-latest-posts__featured-image { grid-row: 1 / span 2; margin: 0; }
.cs-latest .wp-block-latest-posts__featured-image img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.cs-latest .wp-block-latest-posts__post-title { font-size: 14px; font-weight: 600; color: var(--cs-primary); text-decoration: none; line-height: 1.3; }
.cs-latest .wp-block-latest-posts__post-title:hover { color: var(--cs-accent); }
.cs-latest .wp-block-latest-posts__post-date { font-size: 12px; color: var(--cs-secondary); grid-column: 2; }

.cs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-tags a {
  padding: 4px 12px;
  background: #fff;
  border: 1px solid var(--cs-outline-light);
  border-radius: 999px;
  font-size: 12px !important;
  color: var(--cs-secondary);
  text-decoration: none;
}
.cs-tags a::before { content: "#"; }
.cs-tags a:hover { color: var(--cs-primary); }

/* related guides */
.cs-related { background: #fff; border-top: 1px solid var(--cs-outline-light); padding: 64px 24px; }
.cs-related-inner { max-width: 1280px; margin-inline: auto; display: flex; flex-direction: column; gap: 40px; }
.cs-related-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cs-kicker { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cs-secondary); }
.cs-related-title { margin: 0; font-family: var(--cs-serif); font-size: 1.875rem; font-weight: 600; color: var(--cs-primary); }
.cs-all-link { font-size: 14px; font-weight: 600; color: var(--cs-primary); text-decoration: none; white-space: nowrap; }
.cs-all-link:hover { color: var(--cs-accent); }

.cs-related-query .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  list-style: none; margin: 0; padding: 0;
}
@media (max-width: 1023px) { .cs-related-query .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .cs-related-query .wp-block-post-template { grid-template-columns: 1fr; } }
.cs-rcard {
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--cs-surface);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.3s ease;
}
.cs-rcard:hover { box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1); }
.cs-rcard:hover .cs-card-img img { transform: scale(1.05); }
.cs-rcard .cs-card-title { font-size: 1.25rem; }
.cs-rcard .cs-card-excerpt { margin-bottom: 16px; }
.cs-readmore {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  font-size: 14px; font-weight: 600;
}
.cs-readmore, .cs-readmore a { color: var(--cs-primary); text-decoration: none; }
.cs-readmore a:hover { color: var(--cs-accent); }

/* FAQ on single sits between article and related; keep the same band look */
.cs-single .cs-faq { margin-top: 0; }


/* featured image injected after the first H2 inside the article */
.cs-content .cs-hero-img { margin: 8px 0; }
.cs-content .cs-hero-img img { width: 100%; height: auto; border-radius: 12px; display: block; }

/* Rank Math TOC: sidebar card (desktop) */
.cs-aside-toc { max-height: 35vh; overflow-y: auto; }
.cs-aside-toc .wp-block-rank-math-toc-block { margin: 0; }
.cs-aside-toc .wp-block-rank-math-toc-block > :is(h2, h3, h4, p):first-child,
.cs-aside-toc .wp-block-rank-math-toc-block .rank-math-toc-title {
  margin: 0 0 12px;
  font-family: var(--cs-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--cs-primary);
}
.cs-aside-toc nav ul, .cs-aside-toc nav ol,
.cs-toc-panel nav ul, .cs-toc-panel nav ol { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.4; }
.cs-aside-toc nav ul, .cs-toc-panel nav ul { list-style: none; }
.cs-aside-toc nav ol, .cs-toc-panel nav ol { list-style: decimal; padding-left: 20px; }
.cs-aside-toc nav ul ul, .cs-aside-toc nav ol ol, .cs-aside-toc nav ul ol, .cs-aside-toc nav ol ul,
.cs-toc-panel nav ul ul, .cs-toc-panel nav ol ol, .cs-toc-panel nav ul ol, .cs-toc-panel nav ol ul { margin-top: 8px; padding-left: 16px; }
.cs-aside-toc nav a, .cs-toc-panel nav a { color: var(--cs-secondary); text-decoration: none; transition: color 0.2s; }
.cs-aside-toc nav a:hover, .cs-toc-panel nav a:hover { color: var(--cs-primary); }

/* Rank Math TOC: collapsed block under the share row (mobile / tablet) */
.cs-toc-mobile { background: #fff; border: 1px solid rgba(226, 232, 240, 0.8); border-radius: 12px; overflow: hidden; }
.cs-toc-mobile summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--cs-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cs-primary);
}
.cs-toc-mobile summary::-webkit-details-marker { display: none; }
.cs-toc-mobile summary svg { flex: none; transition: transform 0.2s ease; }
.cs-toc-mobile[open] summary svg { transform: rotate(180deg); }
.cs-toc-panel { padding: 0 18px 18px; max-height: 50vh; overflow-y: auto; }
.cs-toc-panel .wp-block-rank-math-toc-block { margin: 0; }
.cs-toc-panel .wp-block-rank-math-toc-block > :is(h2, h3, h4, p):first-child,
.cs-toc-panel .rank-math-toc-title { display: none; }
@media (min-width: 1024px) { .cs-toc-mobile { display: none; } }
@media (max-width: 1023px) { .cs-aside-toc { display: none; } }

/* Pinterest widget */
.cs-pinterest {
  padding: 20px;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.6);
  border-radius: 12px;
  display: flex; flex-direction: column; gap: 12px;
}
.cs-pinterest > * { margin: 0; }
.cs-pinterest iframe { display: block; width: 100%; max-width: 100%; border: 0; border-radius: 8px; background: #eff4ff; }