/*
Theme Name: Climb Up Web Theme
Theme URI: https://climbupweb.com
Author: Climb Up Web
Author URI: https://climbupweb.com
Description: Hand-coded sites without a page builder. The header, footer, 404 page, blog templates, global CSS, fonts and site code are managed under Climb Up Web in the dashboard, and the Climb Up page template takes a page's HTML and CSS as written.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: climb-up-web-theme
*/

:root {
	--cuw-font: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--cuw-text: #1b2130;
	--cuw-muted: #5b6475;
	--cuw-line: #e4e7ee;
	--cuw-bg: #ffffff;
	--cuw-soft: #f5f7fb;
	--cuw-accent: #2952e3;
	--cuw-radius: 12px;
	--cuw-content: 720px;
	--cuw-wide: 1180px;
	--cuw-gutter: clamp(16px, 4vw, 32px);
}

:where(*, *::before, *::after) {
	box-sizing: border-box;
}

:where(body) {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	margin: 0;
	background: var(--cuw-bg);
	color: var(--cuw-text);
	font-family: var(--cuw-font);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

:where(#main) {
	flex: 1 0 auto;
}

:where(img, video) {
	max-width: 100%;
	height: auto;
}

:where(a) {
	color: var(--cuw-accent);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	top: 8px;
	left: 8px;
	z-index: 100000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 18px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
	border-radius: 8px;
	background: var(--cuw-bg);
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.16);
	color: var(--cuw-text);
	font-weight: 600;
	text-decoration: none;
}

.cuw-page {
	max-width: calc(var(--cuw-content) + var(--cuw-gutter) * 2);
	margin: 0 auto;
	padding: clamp(40px, 7vw, 80px) var(--cuw-gutter);
}

.cuw-page-title {
	margin: 0 0 32px;
	font-size: clamp(2rem, 4.5vw, 2.75rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.cuw-prose {
	font-size: 1.0625rem;
	line-height: 1.75;
	overflow-wrap: break-word;
}

.cuw-prose > :first-child {
	margin-top: 0;
}

.cuw-prose > :last-child {
	margin-bottom: 0;
}

.cuw-prose :where(p, ul, ol, dl, blockquote, figure, pre, table) {
	margin: 0 0 1.4em;
}

.cuw-prose :where(h2, h3, h4, h5, h6) {
	margin: 2em 0 0.6em;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.cuw-prose :where(h2) {
	font-size: 1.6em;
}

.cuw-prose :where(h3) {
	font-size: 1.3em;
}

.cuw-prose :where(h4) {
	font-size: 1.1em;
}

.cuw-prose :where(ul, ol) {
	padding-left: 1.4em;
}

.cuw-prose :where(li + li) {
	margin-top: 0.4em;
}

.cuw-prose :where(a) {
	text-underline-offset: 0.18em;
}

.cuw-prose :where(blockquote) {
	margin-left: 0;
	padding: 0.2em 0 0.2em 1.2em;
	border-left: 3px solid var(--cuw-accent);
	color: var(--cuw-muted);
}

.cuw-prose :where(figcaption) {
	margin-top: 0.6em;
	color: var(--cuw-muted);
	font-size: 0.875em;
	text-align: center;
}

.cuw-prose :where(code, kbd, pre) {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

.cuw-prose :where(:not(pre) > code) {
	padding: 0.15em 0.35em;
	border-radius: 4px;
	background: var(--cuw-soft);
}

.cuw-prose :where(pre) {
	padding: 1em 1.2em;
	overflow-x: auto;
	border-radius: 8px;
	background: var(--cuw-soft);
	line-height: 1.6;
}

.cuw-prose :where(table) {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}

.cuw-prose :where(th, td) {
	padding: 0.6em 0.8em;
	border-bottom: 1px solid var(--cuw-line);
	text-align: left;
}

.cuw-prose :where(hr) {
	margin: 2.5em 0;
	border: 0;
	border-top: 1px solid var(--cuw-line);
}

.cuw-prose .alignleft {
	float: left;
	margin: 0.3em 1.5em 1em 0;
}

.cuw-prose .alignright {
	float: right;
	margin: 0.3em 0 1em 1.5em;
}

.cuw-prose .aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.cuw-prose .wp-caption {
	max-width: 100%;
}

.cuw-prose .post-page-numbers {
	margin-right: 0.4em;
}