/*
Theme Name: IPIE Services
Theme URI: https://ipieservices.com/
Author: IPIE Services
Description: Single-page landing theme for Indo-Pacific Indigenous Ecotourism Services (site 1 of the IPIE multisite network). Renders one static landing page for every request; no menus, widgets, sidebars or post loop.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ipieservices
*/

/* Palette: deep #0B3B36 · paper #F7F3EB · accent #C9935F · accent-light #DFA36D */

body {
	margin: 0;
	background: #F7F3EB;
	font-family: Archivo, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

a {
	color: #0B3B36;
	text-decoration: none;
}

a:hover {
	color: #C9935F;
}

/* Page frame ------------------------------------------------------------- */

.ipie-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	background: #F7F3EB;
}

/* The admin bar is fixed on top of the viewport; keep the frame from
   overflowing it for logged-in users. */
.admin-bar .ipie-page {
	min-height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .ipie-page {
		min-height: calc(100vh - 46px);
	}
}

.ipie-watermark {
	position: absolute;
	top: -8vw;
	right: -14vw;
	width: min(760px, 62vw);
	height: min(760px, 62vw);
	pointer-events: none;
	opacity: .07;
	color: #0B3B36;
}

/* Header ----------------------------------------------------------------- */

.ipie-header {
	position: relative;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: clamp(28px, 4.4vw, 52px) clamp(24px, 5vw, 56px) 0;
	box-sizing: border-box;
}

.ipie-brand {
	display: flex;
	align-items: center;
	gap: clamp(14px, 1.6vw, 20px);
}

.ipie-brand__mark {
	flex: none;
}

.ipie-brand__rule {
	width: 1px;
	height: 44px;
	background: rgba(11, 59, 54, .18);
}

.ipie-brand__name {
	font: 700 30px/1 'Alegreya Sans', sans-serif;
	color: #0B3B36;
	letter-spacing: .01em;
}

.ipie-brand__name span {
	font-weight: 400;
}

.ipie-brand__tagline {
	font: 500 8.4px/1.4 Archivo, sans-serif;
	letter-spacing: .17em;
	color: rgba(11, 59, 54, .6);
	margin-top: 8px;
}

/* Main ------------------------------------------------------------------- */

.ipie-main {
	position: relative;
	flex: 1;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: clamp(56px, 9vw, 104px) clamp(24px, 5vw, 56px) clamp(48px, 6vw, 72px);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ipie-title {
	margin: 0;
	font: 500 clamp(38px, 5.6vw, 68px)/1.08 'Alegreya Sans', sans-serif;
	color: #0B3B36;
	letter-spacing: -.012em;
	max-width: 16ch;
	text-wrap: pretty;
}

.ipie-divider {
	width: 64px;
	height: 3px;
	background: #C9935F;
	margin: clamp(30px, 3.6vw, 42px) 0 clamp(26px, 3.2vw, 36px);
}

.ipie-lede {
	margin: 0;
	font: 400 clamp(15.5px, 1.32vw, 18px)/1.78 Archivo, sans-serif;
	color: rgba(11, 59, 54, .78);
	max-width: 60ch;
	text-wrap: pretty;
}

/* Actions ---------------------------------------------------------------- */

.ipie-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: clamp(38px, 4.4vw, 52px);
}

.ipie-btn {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	border-radius: 6px;
	padding: 15px 26px;
	font: 500 14px/1 Archivo, sans-serif;
	letter-spacing: .01em;
}

.ipie-btn__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex: none;
}

.ipie-btn--primary {
	background: #0B3B36;
	color: #F7F3EB;
	border: 1px solid #0B3B36;
	transition: background .18s ease, color .18s ease;
}

.ipie-btn--primary:hover {
	background: #0A332F;
	color: #F7F3EB;
}

.ipie-btn--primary .ipie-btn__dot {
	background: #DFA36D;
}

.ipie-btn--secondary {
	background: transparent;
	color: #0B3B36;
	border: 1px solid rgba(11, 59, 54, .28);
	transition: border-color .18s ease, color .18s ease;
}

.ipie-btn--secondary:hover {
	border-color: #C9935F;
	color: #0B3B36;
}

.ipie-btn--secondary .ipie-btn__dot {
	background: #C9935F;
}

/* Footer ----------------------------------------------------------------- */

.ipie-footer {
	position: relative;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 clamp(24px, 5vw, 56px) clamp(30px, 4vw, 46px);
	box-sizing: border-box;
}

.ipie-footer__inner {
	border-top: 1px solid rgba(11, 59, 54, .14);
	padding-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	align-items: baseline;
}

.ipie-footer__note {
	font: 400 12px/1.6 Archivo, sans-serif;
	color: rgba(11, 59, 54, .55);
}