/*
Theme Name: Oceania Safety Placeholder
Theme URI: https://oceaniasafety.com/
Author: Oceania Safety and Environmental
Description: A clean responsive placeholder theme for Oceania Safety and Environmental.
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 7.2
Text Domain: oceaniasafety-placeholder
*/

:root {
	--oceania-ocean-deep: #1f3f75;
	--oceania-wave-blue: #2e6fa3;
	--oceania-sky-blue: #4fa3d1;
	--oceania-hibiscus: #c83a31;
	--oceania-sun-gold: #f4c542;
	--oceania-palm-green: #4c9a4f;
	--oceania-ink: #1a2e4f;
	--oceania-slate: #566780;
	--oceania-sand: #f5f2e9;
	--oceania-mist: #f0f6fb;
	--oceania-white: #ffffff;
}

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	background: var(--oceania-white);
}

body {
	min-height: 100%;
	margin: 0;
	background: var(--oceania-white);
	color: var(--oceania-ink);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: 0;
}

a {
	color: var(--oceania-wave-blue);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus {
	color: var(--oceania-ocean-deep);
}

img {
	height: auto;
	max-width: 100%;
}

.wp-site-blocks {
	display: flex;
	min-height: 100vh;
	min-height: 100svh;
	flex-direction: column;
}

.site-header {
	width: min(960px, calc(100% - 48px));
	margin: 0 auto;
	padding: 36px 0 18px;
}

.site-logo-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--oceania-ink);
	text-align: left;
	text-decoration: none;
	vertical-align: top;
}

.site-logo-link:hover,
.site-logo-link:focus {
	color: var(--oceania-ocean-deep);
}

.site-logo-image {
	display: block;
	width: 88px;
	flex: 0 0 auto;
	border-radius: 6px;
}

.site-name {
	display: block;
	max-width: 440px;
	font-size: 1.56rem;
	font-weight: 780;
	letter-spacing: 0;
	line-height: 1.15;
}

.placeholder-main {
	display: grid;
	flex: 1;
	align-items: center;
	padding: 42px 24px 64px;
	text-align: center;
}

.placeholder-section {
	width: min(720px, 100%);
	margin: 0 auto;
}

.placeholder-post-title {
	width: min(720px, 100%);
	margin: 28px auto 0;
	color: var(--oceania-ocean-deep);
	font-size: 3rem;
	font-weight: 760;
	letter-spacing: 0;
	line-height: 1.08;
	text-wrap: balance;
}

.placeholder-content,
.placeholder-empty {
	width: min(620px, 100%);
	margin: 26px auto 0;
	color: var(--oceania-slate);
	font-size: 1.08rem;
}

.placeholder-content > *:first-child {
	margin-top: 0;
}

.placeholder-content > *:last-child {
	margin-bottom: 0;
}

.placeholder-content p,
.placeholder-content ul,
.placeholder-content ol {
	margin: 0 0 1.05em;
}

.placeholder-content strong {
	color: var(--oceania-ink);
}

.placeholder-content .wp-block-button__link {
	background: var(--oceania-ocean-deep);
	color: var(--oceania-white);
	border-radius: 6px;
	font-weight: 700;
	letter-spacing: 0;
	padding: 0.72em 1em;
}

.placeholder-content .wp-block-button__link:hover,
.placeholder-content .wp-block-button__link:focus {
	background: var(--oceania-wave-blue);
	color: var(--oceania-white);
}

.placeholder-featured {
	width: min(640px, 100%);
	margin: 0 auto;
	overflow: hidden;
	background: var(--oceania-mist);
	border-radius: 8px;
}

.placeholder-featured img {
	display: block;
	width: 100%;
	height: auto;
}

.site-footer {
	width: min(960px, calc(100% - 48px));
	margin: 0 auto;
	padding: 18px 0 30px;
	color: var(--oceania-slate);
	font-size: 0.86rem;
	text-align: center;
}

.site-footer::before {
	display: block;
	width: 44px;
	height: 2px;
	margin: 0 auto 16px;
	background: var(--oceania-sun-gold);
	border-radius: 999px;
	content: "";
}

@media (max-width: 760px) {
	body {
		font-size: 17px;
	}

	.site-header {
		width: min(100% - 32px, 520px);
		padding: 24px 0 8px;
	}

	.site-logo-image {
		width: 62px;
	}

	.site-name {
		max-width: 260px;
		font-size: 1.18rem;
	}

	.placeholder-main {
		align-items: start;
		padding: 30px 18px 48px;
	}

	.placeholder-post-title {
		font-size: 2.32rem;
	}

	.placeholder-content,
	.placeholder-empty {
		font-size: 1rem;
	}

	.site-footer {
		width: min(100% - 32px, 520px);
		padding-bottom: 24px;
	}
}