/*
Theme Name: Frank Rizk - Clarity Mentor
Theme URI: https://frankrizk.com
Author: Digivox Marketing
Author URI: https://digivoxmarketing.com
Description: Lightweight custom WordPress theme for Frank Rizk - Clarity Mentor. Black & Gold accent on a light background, built with template parts (header/footer for now, page templates to follow).
Version: 1.0.0
Text Domain: frank-clarity-mentor
*/

:root{
	--color-black:#111111;
	--color-gold:#C9A24B;
	--color-gold-dark:#A6822F;
	--color-bg:#FFFFFF;
	--color-bg-soft:#FAF8F4;
	--color-text:#1A1A1A;
	--color-text-muted:#555555;
	--color-border:#E7E2D6;

	--font-heading:'Neue Montreal', serif;
	--font-body: 'Neue Montreal' , sans-serif;

	--radius-btn:2px;

	--header-height:90px;
	--container-width:1240px;
}

/* Required by Lenis for smooth scroll to actually take effect */
html.lenis,
html.lenis body{
	height:auto;
}

.lenis.lenis-smooth{
	scroll-behavior:auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent]{
	overscroll-behavior:contain;
}

.lenis.lenis-stopped{
	overflow:hidden;
}

/* ==========================================================================
   Reusable scroll-reveal utility (global - works across every page)
   Add data-animate to any section/element (see home.js).
   ========================================================================== */
[data-animate]{
	opacity:0;
	transform:translateY(32px);
	transition:opacity .7s ease, transform .7s ease;
}

[data-animate].is-visible{
	opacity:1;
	transform:translateY(0);
}

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

html{
	scroll-behavior:smooth;
}

body{
	margin:0;
	padding:0;
	font-family:var(--font-body);
	font-weight:400;
	color:var(--color-text);
	background:var(--color-bg);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
	font-family:var(--font-heading);
	color:var(--color-black);
	margin:0 0 20px;
	line-height:1.2;
	font-weight:600;
}

p{
	font-family:var(--font-body);
	margin:0 0 16px;
	color:var(--color-text-muted);
}

a{
	color:inherit;
	text-decoration:none;
}

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

ul{
	margin:0;
	padding:0;
	list-style:none;
}

button{
	font-family:var(--font-heading);
	cursor:pointer;
}

.container{
	width:100%;
	max-width:var(--container-width);
	margin:0 auto;
	padding:0 24px;
}

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-family:var(--font-heading);
	font-weight:500;
	letter-spacing:0.03em;
	font-size:16px;
	padding:12px 28px;
	border-radius:var(--radius-btn);
	border:1px solid var(--color-gold);
	background:var(--color-gold);
	color:var(--color-black);
	transition:background .25s ease, color .25s ease, border-color .25s ease;
}

.btn:hover{
	background:var(--color-black);
	border-color:var(--color-black);
	color:var(--color-gold);
}

.btn-outline{
	background:transparent;
	color:var(--color-black);
	border-color:var(--color-black);
}

.btn-outline:hover{
	background:var(--color-black);
	color:var(--color-gold);
	border-color:var(--color-black);
}

.screen-reader-text{
	position:absolute !important;
	width:1px;height:1px;
	overflow:hidden;
	clip:rect(1px,1px,1px,1px);
}