/* =====================================================================
   regcheck-home.css
   ===================================================================== */
:root {
  --contrast:   #101528;
  --contrast-2: #1f2641;
  --contrast-3: #313b77;
  --base:       #f0f0f0;
  --base-2:     #f7f8f9;
  --base-3:     #ffffff;
  --accent:     #0e7fa8;   
  --accent-on-light: #0e7fa8;  
  --accent-2:   #fcba04;  
  --accent-2-text: #101528;    
  --accent-3:   #e55934; 
  --accent-3-on-light: #b8341a; 

  --rc-text:        #1f2433;
  --rc-text-muted:  #3a4250;
  --rc-border:      #e3e7ee;
  --rc-radius:      6px;
  --rc-shadow:      0 8px 26px rgba(16, 21, 40, .12);
  --rc-maxw:        1200px;
}

.btn-cta, .vrm-search__button {
  background: var(--accent-2);
  color: var(--accent-2-text);
}

a { color: var(--accent-on-light); }
.dark-bg a, [style*="contrast-2"] a { color: var(--accent); }

.light-bg .highlight { color: var(--accent-3-on-light); }
.dark-bg .highlight  { color: var(--accent-3); }

.full-width-content.one-container .site-content,
.site-content {
	display: block !important;
}
.content-area,
#primary.content-area,
.site-main,
#main {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
}
.regcheck-home { width: 100%; }

/* Prevent horizontal overflow / right-side gap on mobile */
html, body { overflow-x: hidden; }
.regcheck-home, .reg-hero, .why-regcheck { max-width: 100%; }

.reg-hero,
.check-features,
.free-check,
.reg-check-info,
.why-regcheck,
.car-history,
.reg-faq {
	padding-left: 0;
	padding-right: 0;
}
.reg-hero__inner,
.check-features__grid,
.free-check__inner,
.reg-check-info__inner,
.why-regcheck__inner,
.car-history__inner,
.reg-faq__inner {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(20px, 4vw, 48px);
	padding-right: clamp(20px, 4vw, 48px);
}

/* ---- Base ---- */
.regcheck-home {
	color: var(--rc-text);
	font-size: 16px;
	line-height: 1.6;
}
.regcheck-home * { box-sizing: border-box; }

.regcheck-home a {
    color: #0e7fa8; 
    text-decoration: underline;
}

.regcheck-home a:hover {
    color: #0a6080;
    text-decoration: underline;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Shared section helpers */
.section-title {
	text-align: center;
	font-size: 35px;
	font-weight: 700;
	margin: 0 0 24px;
	color: var(--contrast-3);
}
.section-title--light { color: var(--base-3); margin-bottom: 50px; }

.section-cta { text-align: center; margin-top: 30px; }

/* =====================================================================
   HERO + VRM SEARCH
   ===================================================================== */
.reg-hero {
	background: var(--contrast-2);
	color: var(--base-3);
	padding: 40px 40px 55px;
}
.reg-hero__inner {
	max-width: var(--rc-maxw);
	margin: 0 auto;
	text-align: center;
}
.reg-hero__title {
	font-size: 40px;
	margin: 0 0 30px;
	color: var(--base-3);
}
.reg-hero__title mark {
	background: none;
	color: var(--accent);
}
.reg-hero__subtitle {
	font-size: 17px;
	max-width: 760px;
	margin: 0 auto;
	color: var(--base-3);
}

/* VRM search box — curved edges to match the buttons */
.reg-hero__search { margin-top: 34px; }
.vrm-search {
	display: flex;
	max-width: 620px;
	margin: 0 auto;
	border-radius: 10px;
	box-shadow: var(--rc-shadow);
	overflow: hidden;
}
.vrm-search__input {
	flex: 1 1 auto;
	border: 1px solid var(--rc-border);
	border-right: 0;
	padding: 18px 22px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rc-text);
	background: var(--base-3);
	outline: none;
}
.vrm-search__input::placeholder { color: #8a93a3; font-weight: 700; }
.vrm-search__button {
	border: 0;
	cursor: pointer;
	padding: 18px 34px;
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	white-space: nowrap;
	color: #000;
	background: var(--accent-2);
	transition: background .15s ease;
}
.vrm-search__button:hover { background: #e8aa00; }

.reg-hero__sample { margin: 26px 0 0; text-align: center; }


.reg-hero__sample a {
    color: #e55934;     
    text-decoration: underline;
    font-weight: 600;
}

.reg-hero__sample a:hover {
    color: var(--accent);      
    text-decoration: underline;
}

/* Hero trust ticks — stacked vertically, slightly smaller */
.reg-hero__trust-list {
	list-style: none;
	margin: 0;
	padding: 22px 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.reg-hero__trust-list li {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	color: var(--base-3);
}

.reg-hero__microcopy {
	margin-top: 16px;
	margin-bottom: 20px;
}

/* =====================================================================
   FEATURE CARDS
   ===================================================================== */
.check-features {
	background: var(--base-3);
	padding: 60px 40px 80px;
}
.check-features__grid {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 50px 80px;
}
.check-card {
	text-align: center;
	display: flex;
	flex-direction: column;
}
.check-card__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--contrast-3);
}
.check-card__icon {
	color: var(--accent);
	margin-bottom: .6em;
}
.check-card__icon svg { width: 46px; height: 46px; display: block; }
.check-card__text {
	font-size: 15px;
	margin: 0 0 10px;
	color: var(--rc-text-muted);
}
.check-card .reg-btn { margin-top: auto; }

/* =====================================================================
   LIGHT INFO SECTIONS (free check / reg check / car history)
   ===================================================================== */
.free-check    { background: var(--base-2);  padding: 50px 40px 80px; }
.reg-check-info{ background: var(--base-2);   padding: 50px 40px 80px; }
.car-history   { background: var(--base-3);   padding: 40px; }

.free-check__inner,
.reg-check-info__inner,
.car-history__inner {
	max-width: var(--rc-maxw);
	margin: 0 auto;
}

.free-check__intro,
.reg-check-info__intro,
.reg-check-info__outro,
.car-history p {
	margin: 0 0 18px;
}

/* Tick checklist */
.check-list {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}
.check-list__item {
	display: flex;
	align-items: flex-start;
	gap: .65em;
	font-size: 16px;
	margin-bottom: 18px;
}
.check-list__item .rc-tick {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	margin-top: .12em;
	color: var(--accent);
}

/* shared tick sizing */
.rc-tick { width: 1em; height: 1em; }
.check-card__icon .rc-tick { width: 46px; height: 46px; }

/* =====================================================================
   WHY CHOOSE REG CHECK UK
   ===================================================================== */
.why-regcheck {
	background: var(--contrast-2);
	color: var(--base-3);
	padding: 60px 40px 30px;
}
.why-regcheck__inner { max-width: var(--rc-maxw); margin: 0 auto; }
.why-regcheck__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.trust-card {
	text-align: center;
	padding: 24px 22px 40px;
	border-radius: 20px;
	transition: background .2s ease, box-shadow .2s ease;
}
.trust-card:hover {
	background: var(--contrast-3);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}
.trust-card__icon { color: var(--accent); display: inline-block; margin-bottom: .6em; }
.trust-card__icon svg { width: 40px; height: 40px; }
.trust-card__title {
	font-size: 21px;
	font-weight: 700;
	margin: 0 0 18px;
	color: var(--base-3);
}
.trust-card__text { font-size: 15px; margin: 0; color: #c5cde0; }

/* =====================================================================
   CAR HISTORY
   ===================================================================== */
.car-history a {
    color: #b8341a;          
    text-decoration: underline;
}

.car-history a:hover {
    color: #8c2512;          
    text-decoration: underline;
}
/* =====================================================================
   FAQ (native <details> accordion)
   ===================================================================== */
.reg-faq { background: var(--base-2); padding: 50px 40px 80px; }
.reg-faq__inner { max-width: var(--rc-maxw); margin: 0 auto; }
.reg-faq__list { margin-top: 10px; }

.faq-item {
	background: var(--base-3);
	border: 1px solid var(--rc-border);
	border-radius: var(--rc-radius);
	margin-bottom: 12px;
	overflow: hidden;
}
.faq-item__question {
	cursor: pointer;
	list-style: none;
	padding: 18px 52px 18px 22px;
	font-weight: 600;
	color: var(--contrast-3);
	position: relative;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__question::after {
	content: "+";
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	line-height: 1;
	color: var(--accent);
}
.faq-item[open] .faq-item__question::after { content: "\2212"; } /* minus */
.faq-item__answer {
	padding: 0 22px 18px;
	color: var(--rc-text-muted);
}
.faq-item__answer a { color: var(--accent-3); }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.reg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	font-weight: 600;
	text-align: center;
	border-radius: var(--rc-radius);
	transition: color .15s ease, background .15s ease;
}
.regcheck-home .reg-btn:hover { text-decoration: none; }

.regcheck-home .reg-btn--ghost {
    color: #0e7fa8; 
    text-decoration: none;        
}

.regcheck-home .reg-btn--ghost:hover {
    color: #b8341a ;  
}


.reg-btn--ghost .rc-arrow { width: 1em; height: 1em; }

.regcheck-home .reg-btn--solid {
	background: var(--accent-2);
	color: #000;
	padding: 11px 22px;
	font-weight: 700;
	letter-spacing: .02em;
}
.regcheck-home .reg-btn--solid:hover { background: var(--accent-3); color: var(--base-3); text-decoration: none; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
	.reg-hero__title { font-size: 34px; }
	.check-features__grid { grid-template-columns: repeat(2, 1fr); }
	.why-regcheck__grid  { grid-template-columns: 1fr; gap: 30px; justify-items: center; }
	.trust-card { max-width: 480px; }
}

@media (max-width: 720px) {
	.reg-hero { padding: 26px 0 34px; }
	.reg-hero__title { font-size: 30px; margin-bottom: 15px; }
	.reg-hero__subtitle { font-size: 15px; }
	.reg-hero__trust-list li { font-size: 14px; }
	.vrm-search {
		flex-direction: column;
		gap: 12px;
		overflow: visible;
		box-shadow: none;
	}
	.vrm-search__input {
		border: 1px solid var(--rc-border);
		border-radius: 10px;
		text-align: center;
		box-shadow: var(--rc-shadow);
	}
	.vrm-search__button {
		padding: 15px;
		border-radius: 10px;
	}
	.check-features { padding: 40px 0; }
	.free-check, .reg-check-info, .reg-faq { padding-left: 0; padding-right: 0; }
	.check-features__grid { grid-template-columns: 1fr; gap: 50px; }
	.section-title { font-size: 28px; }
	.car-history { padding: 30px 0; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* =====================================================================
   COMPARISON TABLE  (rounded table on desktop → clean cards on mobile)
   ===================================================================== */
.comparison-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--rc-border);
	border-radius: 10px;
	overflow: hidden;
	margin: 28px 0 0;
	font-size: 15px;
}
.comparison-table th,
.comparison-table td {
	padding: 14px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--rc-border);
}
.comparison-table thead th {
	background: var(--contrast-2);
	color: var(--base-3);
	font-weight: 700;
	font-size: 14px;
}
.comparison-table tbody tr:nth-child(even) { background: var(--base-2); }
.comparison-table tbody tr:last-child td { border-bottom: 0; }
.comparison-table tbody td:first-child {
	font-weight: 700;
	color: var(--contrast-3);
}

@media (max-width: 720px) {
	/* table wrapper: drop the desktop outer border + rounding */
	.comparison-table {
		border: 0 !important;
		border-radius: 0 !important;
		overflow: visible !important;
	}
	/* hide header row (kept for screen readers) */
	.comparison-table thead {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}
	.comparison-table,
	.comparison-table tbody,
	.comparison-table tr,
	.comparison-table td { display: block; width: 100%; }

	/* the card */
	.comparison-table tbody tr {
		background: var(--base-3) !important;
		border: 1px solid var(--rc-border) !important;
		border-radius: 12px !important;
		overflow: hidden !important;
		box-shadow: var(--rc-shadow);
		padding: 18px 18px 4px !important;
		margin: 0 0 16px !important;
	}

	/* strip all theme cell styling */
	.comparison-table tbody td {
		background: none !important;
		border: 0 !important;
		padding: 0 0 14px !important;
		margin: 0 !important;
	}

	/* risk name = card title with one accent underline */
	.comparison-table tbody td:first-child {
		font-size: 18px;
		font-weight: 700;
		color: var(--contrast-3) !important;
		padding-bottom: 12px !important;
		margin-bottom: 14px !important;
		border-bottom: 2px solid var(--accent) !important;
	}

	/* the two comparison values */
	.comparison-table tbody td:nth-child(2),
	.comparison-table tbody td:nth-child(3) {
		font-size: 14px;
		line-height: 1.45;
		color: var(--rc-text) !important;
	}

	/* small uppercase label above each value */
	.comparison-table tbody td[data-label]::before {
		content: attr(data-label);
		display: block;
		font-size: 11px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: .05em;
		margin-bottom: 4px;
	}
	.comparison-table tbody td:nth-child(2)::before { color: var(--accent-3); } /* without = orange */
	.comparison-table tbody td:nth-child(3)::before { color: var(--accent);   } /* with = cyan   */
}

/* Search loading spinner */
.vrm-spinner {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
	color: var(--base-3);
	font-weight: 600;
}
.vrm-spinner.is-active { display: flex; }
.vrm-spinner__ring {
	width: 22px;
	height: 22px;
	border: 3px solid rgba(255, 255, 255, .3);
	border-top-color: var(--accent);
	border-radius: 50%;
	animation: vrm-spin .45s linear infinite;
}
@keyframes vrm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.vrm-spinner__ring { animation-duration: 1.6s; }
}