/*
Theme Name: Razorbench Child
Template: generatepress
Version: 1.1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Barlow+Condensed:wght@500;600;700&display=swap');

:root {
	--rb-copper: #C24E3A;
	--rb-steel: #46586B;
	--rb-graphite: #1F262E;
	--rb-charcoal: #2B333C;
	--rb-page: #EDEEF0;
}

body {
	background: var(--rb-page);
	font-family: Barlow, system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: #22282E;
}

h1, h2, h3, .site-title {
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	font-weight: 600;
	letter-spacing: 0.01em;
}

a { color: var(--rb-copper); }
a:visited { color: #9A3E2E; }
a:hover { color: var(--rb-steel); }
:focus-visible { outline: 3px solid var(--rb-copper); outline-offset: 2px; }

/* Graphite header — only dark header in the batch */
.site-header { background: var(--rb-graphite); }
.site-header .site-title a { color: #F2F4F6; }
.main-navigation, .main-navigation ul li a { background: var(--rb-graphite); color: #F2F4F6; }
.main-navigation a {
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.main-navigation .main-nav ul li a:hover {
	color: var(--rb-copper);
	box-shadow: inset 0 -3px 0 var(--rb-copper);
}

.grid-container { max-width: 1180px; }
.site-content { background: var(--rb-page); }
.entry-content { background: #fff; max-width: 780px; margin: 0 auto; padding: 32px 36px; }

/* Copper left rule on uppercase condensed H2 — the batch's only left-rule treatment */
.entry-content h2 {
	text-transform: uppercase;
	border-left: 5px solid var(--rb-copper);
	padding-left: 14px;
	margin-top: 2.2em;
}

blockquote {
	border-left: 4px solid var(--rb-steel);
	background: #F2F5F8;
	padding: 16px 20px;
	margin: 24px 0;
	font-style: normal;
}

/* Spec-strip tables — charcoal header row */
table th {
	background: var(--rb-charcoal);
	color: #fff;
	font-family: 'Barlow Condensed', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
table td, table th { padding: 10px 12px; border: 1px solid #D6D9DD; }

/* Hero — graphite band, no photo */
.site-hero {
	background: var(--rb-graphite);
	color: #F2F4F6;
	padding: 72px 20px 64px;
	text-align: left;
}
.site-hero > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.site-hero h1 {
	font-size: clamp(2.2rem, 5.5vw, 3.4rem);
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 12px;
}
.site-hero .hero-sub { font-size: 1.12rem; color: #C3C9CF; margin-bottom: 28px; }
.site-hero .wp-block-button__link {
	background: var(--rb-copper);
	color: #fff;
	border-radius: 2px;
	padding: 14px 26px;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: background 200ms ease;
}
.site-hero .wp-block-button__link:hover { background: #A63F2D; }

.site-footer, .site-info { background: var(--rb-graphite); color: #D7DBDF; }
.site-footer a, .site-info a { color: #D7DBDF; }

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

/* Full-bleed hero: break out of the GP container instead of sitting in a box */
.site-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}
/* Homepage carries the hero only — no card, no double frame */
body.home .entry-content {
	background: transparent;
	box-shadow: none;
	padding: 0;
	max-width: none;
}
body.home .entry-content > .site-hero > * { padding-left: 20px; padding-right: 20px; }
.site-hero { max-width: none; }

/* ---------- Homepage sections ---------- */
.rb-section {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	padding: 60px 20px;
}
.rb-inner { max-width: 1100px; margin: 0 auto; }
.rb-section h2 {
	text-transform: uppercase;
	border-left: 5px solid var(--rb-copper);
	padding-left: 14px;
	margin: 0 0 8px;
	font-size: clamp(1.5rem, 3vw, 2rem);
}
.rb-lede { color: #4E565E; max-width: 62ch; margin: 0 0 30px; }

/* Numbered bench tiles — the counter is the signature, not an icon */
.rb-browse { background: #fff; }
.rb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.rb-tile {
	display: grid;
	grid-template-columns: 42px 1fr;
	grid-template-rows: auto auto;
	gap: 2px 12px;
	padding: 18px 18px 16px;
	border: 1px solid #D6D9DD;
	border-top: 3px solid var(--rb-charcoal);
	background: #fff;
	text-decoration: none; color: inherit; cursor: pointer;
	transition: border-top-color 180ms ease, background 180ms ease;
}
.rb-tile:hover, .rb-tile:focus-visible { border-top-color: var(--rb-copper); background: #FAF8F7; }
.rb-num {
	grid-row: 1 / span 2;
	font-family: 'Barlow Condensed', sans-serif;
	font-size: 1.9rem; font-weight: 700;
	color: #C3C9CF; line-height: 1;
}
.rb-tile strong { font-family: 'Barlow Condensed', sans-serif; font-size: 1.14rem; text-transform: uppercase; letter-spacing: 0.02em; }
.rb-desc { font-size: 0.9rem; color: #5C646C; }

/* Spec strip — reads like the tables the articles will carry */
.rb-measure { background: var(--rb-page); }
.rb-specs { margin: 0; display: grid; gap: 1px; background: #D6D9DD; border: 1px solid #D6D9DD; }
.rb-specs > div { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; background: #fff; }
.rb-specs dt {
	background: var(--rb-charcoal); color: #fff;
	font-family: 'Barlow Condensed', sans-serif;
	text-transform: uppercase; letter-spacing: 0.04em;
	padding: 14px 16px; font-size: 1rem;
}
.rb-specs dd { margin: 0; padding: 14px 18px; font-size: 0.96rem; }

.rb-stance { background: var(--rb-graphite); color: #D7DBDF; }
.rb-stance h2 { color: #fff; border-left-color: var(--rb-copper); }
.rb-stance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; margin-top: 26px; }
.rb-stance h3 { color: #fff; font-size: 1.05rem; margin: 0 0 8px; text-transform: none; }
.rb-stance p { color: #B9C0C7; font-size: 0.96rem; margin: 0; }
.rb-note { margin-top: 30px; padding-top: 18px; border-top: 1px solid #39434D; font-size: 0.9rem; color: #99A2AA; }

.rb-disclosure { background: var(--rb-page); padding: 26px 20px; }
.rb-disclosure p { font-size: 0.86rem; color: #5C646C; margin: 0; }

@media (max-width: 640px) {
	.rb-section { padding: 40px 18px; }
	.rb-specs > div { grid-template-columns: 1fr; }
	body.home .site-hero { padding: 52px 18px; }
}