/**
 * Components - buttons, cards, the plate chip motif, badges,
 * pagination, sidebar widgets, 404.
 */

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bp-s2);
	font-family: var(--bp-font);
	font-size: var(--bp-text-sm);
	font-weight: 600;
	line-height: 1;
	padding: 13px 24px;
	border-radius: var(--bp-radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	text-align: center;
	transition: background var(--bp-fast) var(--bp-ease),
		color var(--bp-fast) var(--bp-ease),
		border-color var(--bp-fast) var(--bp-ease),
		transform var(--bp-fast) var(--bp-ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--bp-red); color: var(--bp-white); }
.btn--primary:hover { background: var(--bp-red-deep); color: var(--bp-white); }

.btn--navy { background: var(--bp-navy); color: var(--bp-white); }
.btn--navy:hover { background: var(--bp-royal); color: var(--bp-white); }

.btn--ghost { background: transparent; color: var(--bp-navy); border-color: var(--bp-border-strong); }
.btn--ghost:hover { border-color: var(--bp-navy); color: var(--bp-navy); }

.btn--ghost-light { background: transparent; color: var(--bp-white); border-color: rgba(255, 255, 255, 0.5); }
.btn--ghost-light:hover { border-color: var(--bp-white); color: var(--bp-white); }

.btn--block { width: 100%; }
.btn--sm { padding: 9px 18px; font-size: 13px; }

/* ------------------------------------------------------------------ */
/* Plate chip - the signature motif.                                   */
/* A miniature UK registration: yellow face, black chars, rounded      */
/* corners and the subtle pressed edge. Used for eyebrows, category    */
/* accents and the 404 page. Yellow lives here and nowhere else.       */
/* ------------------------------------------------------------------ */
.plate-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bp-plate-yellow);
	color: var(--bp-plate-ink);
	font-family: var(--bp-font-plate);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: 5px;
	padding: 3px 10px 4px;
	font-size: var(--bp-text-sm);
	line-height: 1.2;
	box-shadow: inset 0 -2px 0 var(--bp-plate-yellow-deep), 0 1px 2px rgba(15, 18, 53, 0.25);
	white-space: nowrap;
}
.plate-chip--lg {
	font-size: clamp(2.2rem, 9vw, 4.5rem);
	padding: 0.15em 0.45em 0.2em;
	border-radius: 10px;
	border: 3px solid var(--bp-plate-ink);
	box-shadow: inset 0 -6px 0 var(--bp-plate-yellow-deep), 0 12px 30px rgba(15, 18, 53, 0.22);
	letter-spacing: 0.08em;
}

/* ------------------------------------------------------------------ */
/* Cards                                                               */
/* ------------------------------------------------------------------ */
.card {
	background: var(--bp-white);
	border-radius: var(--bp-radius-lg);
	box-shadow: var(--bp-shadow-card);
	overflow: hidden;
}
.card__body { padding: var(--bp-s5); }
.card--pad { padding: var(--bp-s6); }
@media (max-width: 640px) {
	.card--pad { padding: var(--bp-s5); }
}

/* Post card */
.post-card { display: flex; flex-direction: column; transition: box-shadow var(--bp-med) var(--bp-ease), transform var(--bp-med) var(--bp-ease); }
.post-card:hover { box-shadow: var(--bp-shadow-card-hover); transform: translateY(-3px); }
.post-card__thumb { display: block; aspect-ratio: 16 / 9.6; overflow: hidden; background: var(--bp-royal-soft); }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--bp-med) var(--bp-ease); }
.post-card:hover .post-card__thumb img { transform: scale(1.03); }
.post-card__body { padding: var(--bp-s4) var(--bp-s5) var(--bp-s5); display: flex; flex-direction: column; gap: var(--bp-s2); flex: 1; }
.post-card__badge {
	align-self: flex-start;
	background: var(--bp-royal-soft);
	color: var(--bp-royal);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--bp-radius-pill);
	padding: 4px 11px;
}
.post-card__title { font-size: var(--bp-text-lg); margin: 0; }
.post-card__title a { color: var(--bp-navy); }
.post-card__title a:hover { color: var(--bp-royal); }
.post-card__excerpt { color: var(--bp-muted); font-size: var(--bp-text-sm); margin: 0; }
.post-card__meta {
	margin-top: auto;
	padding-top: var(--bp-s3);
	color: #9ca3af;
	font-size: var(--bp-text-xs);
	display: flex;
	gap: var(--bp-s2);
	align-items: center;
}

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--bp-s5);
}

/* ------------------------------------------------------------------ */
/* Sidebar widgets                                                     */
/* ------------------------------------------------------------------ */
.sidebar { display: flex; flex-direction: column; gap: var(--bp-s5); position: sticky; top: calc(var(--bp-header-h) + var(--bp-s5)); }
@media (max-width: 960px) { .sidebar { position: static; } }

.widget-cta h3 { font-size: var(--bp-text-lg); margin-bottom: var(--bp-s2); }
.widget-cta p { color: var(--bp-muted); font-size: var(--bp-text-sm); }

.widget-posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bp-s4); }
.widget-posts li { margin: 0; display: flex; gap: var(--bp-s3); align-items: flex-start; }
.widget-posts img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--bp-radius-sm);
	flex-shrink: 0;
}
.widget-posts a { color: var(--bp-navy); font-size: var(--bp-text-sm); font-weight: 500; line-height: 1.4; display: block; }
.widget-posts a:hover { color: var(--bp-royal); }
.widget-posts time { display: block; color: #9ca3af; font-size: var(--bp-text-xs); margin-top: 2px; }

.widget-sell {
	background: linear-gradient(135deg, var(--bp-royal), var(--bp-navy));
	color: var(--bp-white);
	text-align: center;
}
.widget-sell h3 { color: var(--bp-white); font-size: var(--bp-text-lg); margin-bottom: var(--bp-s2); }
.widget-sell p { color: #c0c5e0; font-size: 13px; }

/* ------------------------------------------------------------------ */
/* Pagination                                                          */
/* ------------------------------------------------------------------ */
.pagination { display: flex; justify-content: center; margin-top: var(--bp-s6); }
.pagination .nav-links { display: flex; gap: var(--bp-s2); flex-wrap: wrap; justify-content: center; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--bp-s3);
	border-radius: var(--bp-radius-sm);
	background: var(--bp-white);
	border: 1px solid var(--bp-border);
	color: var(--bp-navy);
	font-weight: 600;
	font-size: var(--bp-text-sm);
}
.pagination .page-numbers:hover { border-color: var(--bp-royal); color: var(--bp-royal); }
.pagination .page-numbers.current { background: var(--bp-navy); border-color: var(--bp-navy); color: var(--bp-white); }
.pagination .page-numbers.dots { border: 0; background: none; }

/* Post navigation (prev/next on single) */
.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bp-s4);
	margin-top: var(--bp-s6);
}
.post-nav__link {
	background: var(--bp-white);
	border-radius: var(--bp-radius);
	box-shadow: var(--bp-shadow-card);
	padding: var(--bp-s4) var(--bp-s5);
	display: block;
}
.post-nav__link:hover { box-shadow: var(--bp-shadow-card-hover); }
.post-nav__label { font-size: var(--bp-text-xs); color: var(--bp-muted); display: block; margin-bottom: 4px; }
.post-nav__title { color: var(--bp-navy); font-weight: 600; font-size: var(--bp-text-sm); }
.post-nav__link--next { text-align: right; }
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ */
/* Prose (single post / page body)                                     */
/* ------------------------------------------------------------------ */
.prose { font-size: var(--bp-text-base); line-height: var(--bp-leading-loose); color: var(--bp-text-soft); }
.prose h2, .prose h3, .prose h4 { margin-top: var(--bp-s6); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose img { border-radius: var(--bp-radius-sm); }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.prose .featured { border-radius: var(--bp-radius); margin-bottom: var(--bp-s5); width: 100%; object-fit: cover; }

/* Tag list under posts */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--bp-s2); margin-top: var(--bp-s5); }
.tag-list a {
	background: var(--bp-canvas);
	border: 1px solid var(--bp-border);
	color: var(--bp-text-soft);
	font-size: var(--bp-text-xs);
	font-weight: 500;
	padding: 5px 12px;
	border-radius: var(--bp-radius-pill);
}
.tag-list a:hover { border-color: var(--bp-royal); color: var(--bp-royal); }

/* ------------------------------------------------------------------ */
/* Search form                                                         */
/* ------------------------------------------------------------------ */
.searchform { display: flex; gap: var(--bp-s2); }
.searchform input[type='search'] { flex: 1; }
.searchform .btn { flex-shrink: 0; }

/* ------------------------------------------------------------------ */
/* 404                                                                 */
/* ------------------------------------------------------------------ */
.error-404 { text-align: center; padding: var(--bp-s8) 0; }
.error-404 .plate-chip--lg { margin-bottom: var(--bp-s5); }
.error-404 h1 { margin-bottom: var(--bp-s3); }
.error-404 p { color: var(--bp-muted); max-width: 480px; margin: 0 auto var(--bp-s5); }
.error-404 .searchform { max-width: 440px; margin: 0 auto var(--bp-s5); }
.error-404__links { display: flex; gap: var(--bp-s3); justify-content: center; flex-wrap: wrap; }

/* ------------------------------------------------------------------ */
/* Comments                                                            */
/* ------------------------------------------------------------------ */
.comments { margin-top: var(--bp-s6); }
.comment-list { list-style: none; padding: 0; margin: 0 0 var(--bp-s5); }
.comment-list .comment { margin-bottom: var(--bp-s4); }
.comment-body {
	background: var(--bp-white);
	border-radius: var(--bp-radius);
	box-shadow: var(--bp-shadow-card);
	padding: var(--bp-s4) var(--bp-s5);
}
.comment-meta { display: flex; align-items: center; gap: var(--bp-s3); margin-bottom: var(--bp-s2); }
.comment-meta img { border-radius: var(--bp-radius-pill); }
.comment-author { font-weight: 600; color: var(--bp-navy); font-size: var(--bp-text-sm); }
.comment-date { color: #9ca3af; font-size: var(--bp-text-xs); }
.comment-content { font-size: var(--bp-text-sm); color: var(--bp-text-soft); }
.comment-list .children { list-style: none; padding-left: var(--bp-s5); }
.comment-reply-link { font-size: var(--bp-text-xs); font-weight: 600; }
.comment-respond { margin-top: var(--bp-s5); }
.comment-form { display: grid; gap: var(--bp-s3); }
.comment-form textarea { min-height: 130px; }

/* ------------------------------------------------------------------ */
/* Editorial content blocks (ported from Customizer Additional CSS)    */
/* Used inside post/page content: Key Takeaways callouts and FAQ boxes */
/* ------------------------------------------------------------------ */

.key-takeaways {
	margin: 2.5rem 0;
	padding: 1.75rem 2rem;
	background: #faefff;
	border: 1px solid #fb7185;
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.key-takeaways strong {
	display: block;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #1e293b;
}
.key-takeaways p {
	padding: 0 !important;
	margin: 0 0 10px;
}
.key-takeaways ul {
	margin: 0;
	padding-left: 1.25rem;
}
.key-takeaways li {
	margin-bottom: 0.6rem;
	line-height: 1.6;
	color: #334155;
	font-size: 15px;
}
.key-takeaways li:last-child {
	margin-bottom: 0;
}

.faq {
	margin: 0;
	padding: 2.5rem 2rem;
	background: #cbd5f5;
	border-radius: 12px;
	border: 1px solid #e5e7eb;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}
.faq h2 {
	margin-top: 0;
	font-size: 25px;
	font-weight: 700;
	color: #0f172a;
}
.faq h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #1e293b;
	padding: 20px 0;
}
.faq h3:first-of-type {
	margin-top: 0;
}
.faq li {
	color: #0f172a;
}
.faq p {
	margin: 0;
	line-height: 1.65;
	color: #374151;
}