/*
Theme Name: eBike Reviews (Kadence Child)
Theme URI: https://example.com/
Description: Child theme of Kadence, styled for an e-bike review and comparison site. Adds verdict boxes, pros/cons panels, spec tables, comparison tables and affiliate disclosure styling.
Author: Russell Owen
Template: kadence
Version: 1.0.0
Text Domain: ebike-reviews
*/

/* ==========================================================================
   1. Palette
   Kadence draws the whole site from these nine variables, so overriding them
   here restyles the theme without touching the parent. Change these values
   and the header, buttons, links and footer follow.
   ========================================================================== */

:root {
	--global-palette1: #0e7c66;   /* primary accent   */
	--global-palette2: #0a5a4a;   /* accent, darker   */
	--global-palette3: #14212b;   /* headings         */
	--global-palette4: #2c3a46;   /* body text        */
	--global-palette5: #5a6873;   /* muted text       */
	--global-palette6: #dfe5e9;   /* borders          */
	--global-palette7: #f4f7f8;   /* light background */
	--global-palette8: #ffffff;   /* white            */
	--global-palette9: #14212b;   /* dark             */

	--er-accent: #0e7c66;
	--er-accent-dark: #0a5a4a;
	--er-ink: #14212b;
	--er-body: #2c3a46;
	--er-muted: #5a6873;
	--er-line: #dfe5e9;
	--er-tint: #f4f7f8;
	--er-star: #f0a202;
	--er-good: #167d4c;
	--er-bad: #b3261e;
	--er-radius: 12px;
	--er-shadow: 0 1px 2px rgba(20, 33, 43, .06), 0 8px 24px rgba(20, 33, 43, .06);
}

/* ==========================================================================
   2. Verdict box — the rating panel in a review
   ========================================================================== */

.er-verdict {
	border: 1px solid var(--er-line);
	border-radius: var(--er-radius);
	background: #fff;
	box-shadow: var(--er-shadow);
	padding: 1.5rem;
	margin: 2rem 0;
}

.er-verdict__score {
	width: 76px;
	height: 76px;
	display: flex;
	align-items: baseline;
	justify-content: center;
	border-radius: 50%;
	background: var(--er-accent);
	color: #fff;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 76px;
	letter-spacing: -.02em;
	margin: 0;
}

.er-verdict__score::after {
	content: "/10";
	font-size: .6rem;
	font-weight: 600;
	opacity: .85;
	line-height: 1;
	align-self: center;
	margin-left: 1px;
}

.er-title {
	margin: 0 0 .3rem;
	font-size: 1.2rem;
	line-height: 1.3;
	color: var(--er-ink);
}

.er-stars {
	color: var(--er-star);
	letter-spacing: .12em;
	font-size: 1.05rem;
	margin: 0;
}

.er-stars em {
	color: var(--er-muted);
	letter-spacing: 0;
	font-style: normal;
	margin-left: .5rem;
	font-size: .85rem;
}

.er-verdict__body {
	border-top: 1px solid var(--er-line);
	margin-top: 1.25rem;
	padding-top: 1.25rem;
}

.er-verdict__body > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   3. Pros and cons
   ========================================================================== */

.er-proscons {
	margin: 1.75rem 0;
}

.er-pros,
.er-cons {
	border: 1px solid var(--er-line);
	border-radius: var(--er-radius);
	padding: 1.1rem 1.25rem;
	background: #fff;
}

.er-pros { border-top: 3px solid var(--er-good); }
.er-cons { border-top: 3px solid var(--er-bad); }

.er-pros > h4,
.er-cons > h4,
.er-pros > h3,
.er-cons > h3 {
	margin: 0 0 .6rem;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--er-muted);
}

.er-pros ul,
.er-cons ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.er-pros li,
.er-cons li {
	position: relative;
	padding-left: 1.6rem;
	margin: 0 0 .5rem;
	line-height: 1.5;
}

.er-pros li:last-child,
.er-cons li:last-child { margin-bottom: 0; }

.er-pros li::before,
.er-cons li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}

.er-pros li::before { content: "\2713"; color: var(--er-good); }
.er-cons li::before { content: "\2715"; color: var(--er-bad); }

/* ==========================================================================
   4. Specification and comparison tables
   ========================================================================== */

.er-specs,
.er-compare {
	margin: 1.75rem 0;
	border: 1px solid var(--er-line);
	border-radius: var(--er-radius);
	overflow-x: auto;
	box-shadow: var(--er-shadow);
	background: #fff;
}

.er-specs table,
.er-compare table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
	border: 0;
}

.er-specs th,
.er-compare th,
.er-specs td,
.er-compare td {
	border: 0;
	border-bottom: 1px solid var(--er-line);
}

.er-specs thead th,
.er-compare thead th {
	background: var(--er-tint);
	color: var(--er-ink);
	text-align: left;
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .8rem 1rem;
	white-space: nowrap;
}

.er-specs td,
.er-compare td {
	padding: .75rem 1rem;
	vertical-align: top;
	text-align: left;
}

.er-specs tbody tr:last-child td,
.er-compare tbody tr:last-child td { border-bottom: 0; }

.er-specs tbody td:first-child {
	font-weight: 600;
	color: var(--er-ink);
	width: 38%;
	border-right: 1px solid var(--er-line);
}

.er-compare tbody tr:nth-child(even) td { background: #fbfcfc; }
.er-compare tbody td:first-child { font-weight: 600; color: var(--er-ink); }

.er-specs figcaption,
.er-compare figcaption {
	padding: .6rem 1rem;
	font-size: .82rem;
	color: var(--er-muted);
	background: var(--er-tint);
	border-top: 1px solid var(--er-line);
}

/* ==========================================================================
   5. Top pick cards
   ========================================================================== */

.er-cards { margin: 2rem 0; }

.er-card {
	border: 1px solid var(--er-line);
	border-radius: var(--er-radius);
	background: #fff;
	padding: 1.25rem;
	box-shadow: var(--er-shadow);
}

.er-card h3,
.er-card h4 {
	font-size: 1.05rem;
	margin: .5rem 0 .4rem;
	color: var(--er-ink);
}

.er-card p { font-size: .93rem; }

.er-badge {
	display: inline-block;
	padding: .32rem .65rem;
	border-radius: 999px;
	background: var(--er-accent);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}

.er-badge--alt { background: var(--er-ink); }
.er-badge--value { background: var(--er-star); color: var(--er-ink); }

/* ==========================================================================
   6. Affiliate disclosure
   ========================================================================== */

.er-disclosure {
	border-left: 3px solid var(--er-accent);
	background: var(--er-tint);
	padding: .85rem 1.1rem;
	border-radius: 0 var(--er-radius) var(--er-radius) 0;
	font-size: .88rem;
	color: var(--er-muted);
	margin: 1.5rem 0;
}

.er-disclosure a { color: var(--er-accent-dark); }

/* ==========================================================================
   7. Affiliate call to action
   ========================================================================== */

.er-cta .wp-block-button__link {
	background: var(--er-accent);
	color: #fff;
	border-radius: 8px;
	font-weight: 600;
	padding: .7rem 1.35rem;
}

.er-cta .wp-block-button__link:hover {
	background: var(--er-accent-dark);
	color: #fff;
}

.er-price-note {
	display: block;
	font-size: .78rem;
	color: var(--er-muted);
	margin-top: .5rem;
}

/* ==========================================================================
   8. Small touches
   ========================================================================== */

.er-lede {
	font-size: 1.12rem;
	line-height: 1.6;
	color: var(--er-body);
}

.er-updated {
	font-size: .82rem;
	color: var(--er-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.er-section-title {
	border-bottom: 2px solid var(--er-line);
	padding-bottom: .4rem;
	margin-bottom: 1.25rem;
}

/* Editor: keep the components looking the same while writing. */
.editor-styles-wrapper .er-verdict,
.editor-styles-wrapper .er-card,
.editor-styles-wrapper .er-pros,
.editor-styles-wrapper .er-cons {
	box-shadow: none;
}