/*
Theme Name: Republic Wholesale
Theme URI: https://republicautosource.com/
Author: Jerico Demoral
Description: Single-purpose block theme for the Republic Auto Wholesale inventory site. The home page is the hero slideshow and the vehicle directory from the Republic Wholesale Inventory plugin. White page, Republic red accents, black touches, Inter type.
Version: 1.7.2
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: republic-wholesale
*/

/* ---------- Base ---------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "cv11", "ss01";
}

p, li {
	text-wrap: pretty;
}

h1, h2, h3 {
	text-wrap: balance;
}

:where(a, button, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* On the black header and footer the focus ring is white. */
:where(.rw-header, .rw-footer, .rw-footer__base) :where(a, button):focus-visible {
	outline-color: #fff;
}

.wp-site-blocks > footer,
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* The header scrolls away with the page (only the staff banner stays pinned). */
.wp-site-blocks > header {
	position: relative;
	z-index: 50;
}

/* Header height (measured 76.2 px), used to slide the home hero under it. */
body {
	--rw-header-h: 77px;
}

/*
 * ---------- Header (glass black) ----------
 * On white pages a see-through header would turn gray, so it is near-solid
 * black with a glass sheen (light top edge, faint highlight). On the home page
 * it floats over the hero photo as real glass (see "Home page" below).
 */

.rw-header {
	background:
		linear-gradient(180deg, rgb(255 255 255 / 0.07) 0%, rgb(255 255 255 / 0.01) 100%),
		color-mix(in srgb, var(--wp--preset--color--ink) 97%, transparent);
	border-bottom: 1px solid rgb(255 255 255 / 0.08);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
	-webkit-backdrop-filter: blur(16px) saturate(1.5);
	backdrop-filter: blur(16px) saturate(1.5);
	padding-top: 0.6rem;
	padding-bottom: 0.6rem;
	color: #fff;
}

.rw-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	min-height: 56px;
}

.rw-brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.rw-brand .wp-block-site-logo,
.rw-brand .wp-block-site-logo a,
.rw-logo {
	display: block;
	line-height: 0;
}

.rw-brand .wp-block-site-logo img,
.rw-logo img {
	height: 46px;
	width: auto;
}

.rw-header__end {
	align-items: center;
	gap: 0.5rem 0.75rem;
}

/* Header menu: a Navigation block (edited in Appearance › Editor › Navigation). */
.rw-menu,
.rw-header .rw-nav {
	margin: 0;
}

.rw-header .rw-nav .wp-block-navigation__container {
	gap: 0.25rem;
}

.rw-nav a,
.rw-header .rw-nav a.wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 0.95rem;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.rw-nav a:hover,
.rw-header .rw-nav a.wp-block-navigation-item__content:hover {
	color: #fff;
	background: var(--wp--preset--color--ink-2);
}

/* Red text is too dark to read on black, so the current page gets a red underline. */
.rw-nav a[aria-current="page"] {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--red-brand);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Shown in place of the inventory while the plugin is off. */
.rw-unavailable {
	max-width: 640px;
	margin: 3rem auto;
	padding: 2rem;
	text-align: center;
	background: var(--wp--preset--color--soft);
	border-radius: 16px;
}

.rw-unavailable h2 {
	margin: 0 0 0.5rem;
	font-size: 1.5rem;
}

/*
 * Home page: the hero runs edge to edge and fills the whole screen; it slides
 * up under the header, which turns into real glass over the photo. The footer
 * follows straight after it. The text lines up with the logo, which sits in
 * the 1400 px column.
 */
.rw-home {
	padding: 0 !important;
	margin-top: calc(-1 * var(--rw-header-h, 77px)) !important;
}

body.home .rw-header {
	background:
		linear-gradient(180deg, rgb(255 255 255 / 0.08) 0%, rgb(255 255 255 / 0.02) 100%),
		color-mix(in srgb, var(--wp--preset--color--ink) 38%, transparent);
	border-bottom-color: rgb(255 255 255 / 0.12);
}

.rw-home > .ocwi-hero {
	width: 100%;
	max-width: none !important;
	box-sizing: border-box;
	min-height: max(560px, 100svh);
	margin: 0 !important;
	padding-top: var(--rw-header-h, 77px);
	border-radius: 0;
}

.rw-home .ocwi-hero__dots {
	right: max(22px, calc((100% - 1400px) / 2 + 22px));
	bottom: 28px;
}

body.home .wp-site-blocks > footer {
	margin-top: 0;
}

.rw-nav__call {
	margin-left: 0.5rem;
}

.rw-nav a.rw-call,
.rw-call .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 42px;
	padding: 0 1.2rem;
	font-size: 0.9375rem;
	font-weight: 600;
	white-space: nowrap;
	color: #fff;
	background: var(--wp--preset--color--red);
	border-radius: 999px;
}

.rw-nav a.rw-call:hover,
.rw-call .wp-block-button__link:hover {
	color: #fff;
	background: var(--wp--preset--color--red-dark);
}

/* Phone icon in front of the number. */
.rw-call .wp-block-button__link::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.46.57 3.6a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rw-call .wp-block-button__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.rw-call svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

@media (max-width: 720px) {
	.rw-nav li:not(.rw-nav__call),
	.rw-call__number,
	.rw-header .rw-nav {
		display: none;
	}

	.rw-call .wp-block-button__link {
		padding: 0 1rem;
	}

	.rw-brand .wp-block-site-logo img,
	.rw-logo img {
		height: 38px;
	}
}

/* ---------- Page title band (other pages) ---------- */

.rw-page-head {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--30);
}

.rw-page-head h1 {
	margin: 0;
	font-weight: 800;
	letter-spacing: -0.03em;
}

/* Company pages (About, Terms...): text on a white card. */
.rw-page-body {
	padding: clamp(1.25rem, 4vw, 2.5rem) !important;
	background: #fff;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 20px;
}

.rw-page-body > * {
	max-width: 760px;
	margin-left: 0 !important;
}

.rw-page-body > h2 {
	margin-top: 2rem;
	font-size: 1.375rem;
}

.rw-page-body > ul li,
.rw-page-body > ol li {
	margin-bottom: 0.5rem;
}

.rw-page-body .rw-contact {
	margin-top: 1.5rem;
	padding: 1.25rem 1.4rem;
	background: var(--wp--preset--color--soft);
	border-radius: 14px;
}

.rw-page-body .rw-contact h2 {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.rw-page-body .rw-contact p {
	margin: 0 0 0.35rem;
}

.rw-page-body .rw-contact a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rw-page-body .rw-contact__phone {
	font-size: 1.25rem;
}

/*
 * ---------- Footer (black, a soft glow behind a glass panel) ----------
 * The columns sit on a frosted panel that blurs the glow behind it. Red here
 * is only the short line over each heading (brand accent).
 */

.rw-footer {
	margin-top: var(--wp--preset--spacing--60);
	color: #b9bec6;
	background:
		radial-gradient(45% 90% at 92% 10%, rgb(255 255 255 / 0.1) 0%, rgb(255 255 255 / 0) 70%),
		radial-gradient(40% 80% at 5% 100%, rgb(255 255 255 / 0.05) 0%, rgb(255 255 255 / 0) 70%),
		var(--wp--preset--color--ink);
	border-top: 1px solid rgb(255 255 255 / 0.08);
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
	font-size: 0.9375rem;
}

.rw-footer a {
	color: #fff;
	text-decoration: none;
}

.rw-footer a:hover {
	color: #fff;
	text-decoration: underline;
	text-decoration-color: #fff;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.rw-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 2rem 3rem;
	padding: clamp(1.4rem, 3vw, 2.4rem);
	background: linear-gradient(160deg, rgb(255 255 255 / 0.08) 0%, rgb(255 255 255 / 0.02) 100%);
	border: 1px solid rgb(255 255 255 / 0.1);
	border-radius: 24px;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 20px 50px rgb(0 0 0 / 0.35);
	-webkit-backdrop-filter: blur(24px) saturate(1.4);
	backdrop-filter: blur(24px) saturate(1.4);
}

.rw-footer__grid > * {
	margin: 0;
}

/* Small red text is hard to read on black: white headings with a short red line above. */
.rw-footer h2 {
	margin: 0 0 0.85rem;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
}

.rw-footer h2::before {
	content: "";
	display: block;
	width: 22px;
	height: 3px;
	margin-bottom: 0.6rem;
	background: var(--wp--preset--color--red-brand);
	border-radius: 2px;
}

.rw-footer p {
	margin: 0 0 0.45rem;
	line-height: 1.55;
}

/* Logo column: the logo alone, larger, centred in its cell. */
.rw-footer .rw-footer__about {
	display: flex;
	align-items: center;
	justify-content: center;
}

.rw-footer .rw-logo img,
.rw-footer .wp-block-site-logo img {
	height: 72px;
	width: auto;
}

.rw-footer .wp-block-site-logo,
.rw-footer .wp-block-site-logo a {
	display: block;
	line-height: 0;
}

/* Company and Inventory columns: vertical Navigation blocks. */
.rw-footer .rw-footer__links .wp-block-navigation__container {
	gap: 0.45rem;
}

.rw-footer .rw-footer__links a.wp-block-navigation-item__content {
	padding: 0;
	color: #fff;
}

.rw-contact__lines p:last-child {
	margin-bottom: 0;
}

.rw-footer .rw-contact__phone {
	margin-bottom: 0.6rem;
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.rw-footer__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rw-footer__links li {
	margin: 0 0 0.45rem;
}

.rw-footer .rw-footer__muted {
	margin-top: 0.9rem;
	color: #9aa0a8;
}

.wp-site-blocks > footer {
	margin-top: var(--wp--preset--spacing--60);
}

.rw-footer {
	margin-top: 0;
}

.rw-footer__base {
	margin-top: 0 !important;
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
	font-size: 0.8125rem;
	color: #9aa0a8;
	background: var(--wp--preset--color--ink);
	border-top: 1px solid rgb(255 255 255 / 0.08);
}

.rw-footer__base p {
	margin: 0;
}