/**
 * Amaroo Retreats — design tokens, typography, buttons, layout helpers,
 * motif utilities. Ported 1:1 from the approved design concept
 * (index-vmp4.html), refactored into reusable custom properties/classes
 * shared by every module.
 */

:root {
	--bark: #2B2823;
	--stone: #f2efea;
	--teal: #5c9097;
	--clay: #B8704D;
	--gold: #C9A77C;
	--line: rgba(43, 40, 35, 0.14);
	--lteal: #cfedf0;
	--white: #ffffff;

	--font-heading: 'Fraunces', serif;
	--font-body: 'Inter', sans-serif;
	--h2: clamp(2.1rem, 3.6vw, 3.4rem);
	--h3: clamp(1.8rem, 3vw, 2rem); 
	--h4: 1.25rem;

	--border-radius: 20px;
	--section-pad: 7.5rem;
	--section-pad-mobile: 4.5rem;
	--boxed-max: 1440px;
	--boxed-gutter: 6%;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
	background: var(--stone);
	color: var(--bark);
	font-family: var(--font-body);
	font-weight: 300;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
/* !important: Elementor injects a same-specificity `.elementor img { height: auto; ... }`
   reset via frontend.min.js (not a queued stylesheet), so enqueue order can't be
   relied on to win this tie — see memory/project_elementor_css_priority.md. */
img.cover { width: 100%; height: 100% !important; object-fit: cover; }

h1, h2, h3, h4, h5, h6, .display {
	font-weight: 300;
	font-family: var(--font-heading);
	letter-spacing: 0;
}

/* ===== Standard heading size scale ===== */
h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.9rem; }

.rte h2, 
.rte h3, 
.rte h4, 
.rte h5, 
.rte h6, 
.rte p,
.rte ul,
.rte table,
.rte ul,
.wysiwyg h1, 
.wysiwyg h2, 
.wysiwyg h3, 
.wysiwyg h4, 
.wysiwyg h5, 
.wysiwyg h6, 
.wysiwyg p,
.wysiwyg ul,
.wysiwyg table {
	margin: 25px 0;
}

.rte h3,
.rte h4,
.wysiwyg h3,
.wysiwyg h4 {
	color: var(--teal);
} 

.rte strong,
.wysiwyg strong {
	font-weight: bold;
}


a { color: inherit; }

.eyebrow {
	font-family: var(--font-body);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--teal);
	font-weight: 500;
	display: inline-block;
}

.accent, em.accent { font-style: italic; color: var(--teal); }

/* Emphasised accent phrase mixed into a heading — see amaroo_heading_with_accent() */
h1 em, h2 em, h3 em { font-style: italic; color: var(--teal); font-weight: inherit; }
/* Optional per-module override: breaks the emphasised phrase to its own line
   instead of staying inline (the default) — see amaroo_heading_with_accent(). */
.heading-break { display: block; }

/* ===== Boxed layout ===== */
.narrow { max-width: var(--boxed-max); margin: 0 auto; }
.skin-wrapper { padding: var(--section-pad) var(--boxed-gutter); position: relative; }

/* ===== Section width variants — every module's "Section Width" control ===== */
.width-full { max-width: none; margin: 0; }
.width-container { max-width: var(--boxed-max); margin: 0 auto; }
.width-narrow { max-width: 860px; margin: 0 auto; }
.skin-wrapper.no-pad-top { padding-top: 0; }
.skin-wrapper.no-pad { padding: 0; }

/* ===== Arch motif — signature shape ===== */
.arch { border-radius: 999px 999px 0 0; overflow: hidden; }

/* ===== Buttons (.skin-btn system) ===== */
.skin-btn {
	display: inline-block;
	text-decoration: none;
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	transition: .3s;
	white-space: nowrap;
}
.skin-btn-solid {
	background: var(--bark);
	color: var(--stone);
	border-radius: 999px;
	padding: 18px 40px;
    line-height: 1.4;
}
.skin-btn-solid:hover { background: var(--teal); color: #fff; }
.skin-btn-line {
	border: 1px solid rgba(255, 255, 255, 0.85);
	padding: 9px 22px;
	border-radius: 999px;
	color: #fff;
	background: rgba(0, 0, 0, 0.12);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.skin-btn-line:hover { background: var(--teal); color: #fff; text-shadow: none; }
.skin-btn-ghost {
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	color: var(--bark);
	border-bottom: 1px solid var(--bark);
	padding-bottom: 6px;
	border-radius: 0;
}
.skin-btn-ghost:hover { color: var(--teal); border-color: var(--teal); }
.skin-btn-teal {
	background: var(--teal);
	color: #fff;
	padding: 18px 40px;
    line-height: 1.4;
	border-radius: 999px;
}
.skin-btn-teal:hover { background: var(--gold); }

/* ===== Section header helper (label + heading + intro text) ===== */
.skin-wrapper-header { margin-bottom: 2rem; }
.skin-wrapper-header .eyebrow { margin-bottom: 1rem; }
.skin-wrapper-header h2 { font-weight: 300; }
.skin-wrapper-header h2 em { font-style: italic; color: var(--teal); }

/* ===== Rich text body ===== */
.rte { color: #4a4439; font-size: 1rem; }
.rte p + p { margin-top: 1.2rem; }
.rte a { color: var(--teal); text-decoration: underline; }
.rte ul, .rte ol { padding-left: 1.2em; }

/* ===== Breadcrumbs ===== */
.site-breadcrumbs { font-size: 0.78rem; letter-spacing: 0.06em; }
.site-breadcrumbs .breadcrumb-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5em; padding: 0; margin: 0 0 1.2rem; }
.site-breadcrumbs .breadcrumb-item { display: flex; align-items: center; gap: 0.5em; opacity: 0.85; }
.site-breadcrumbs .breadcrumb-item:not(:last-child)::after { content: "/"; margin-left: 0.5em; opacity: 0.6; }
.site-breadcrumbs .breadcrumb-item a { text-decoration: none; }
.site-breadcrumbs .breadcrumb-item a:hover { text-decoration: underline; }
.site-breadcrumbs .breadcrumb-item.current { opacity: 1; }

/* ===== Responsive ===== */
@media (max-width: 980px) {
	.skin-wrapper { padding: var(--section-pad-mobile) var(--boxed-gutter); }
}