/*
 * One Click Site Manager — Global Stylesheet
 *
 * Variables, buttons, container, typography, animations.
 * Loaded on every plugin-managed page.
 */

:root {
	--ink: #0e1b12;
	--ink-light: #3a4a3e;
	--forest: #1a3a24;
	--green: #2d6a3f;
	--lime: #4caf50;
	--lime-bright: #67c764;
	--gold: #f5a524;
	--cream: #f8f5ee;
	--white: #ffffff;
	--gray-light: #f2f4f0;
	--gray-border: #dde4d8;
	--shadow-sm: 0 2px 12px rgba(0,0,0,0.07);
	--shadow-md: 0 8px 32px rgba(0,0,0,0.1);
	--shadow-lg: 0 20px 60px rgba(0,0,0,0.13);
	--r-sm: 8px;
	--r-md: 16px;
	--r-lg: 28px;
	--r-xl: 48px;
	--font-display: 'Playfair Display', Georgia, serif;
	--font-body: 'Manrope', system-ui, sans-serif;
}

/* The plugin-rendered pages need their own reset because WP themes apply their own.
   We scope these to a wrapper to avoid breaking other plugins. */
body.page-template-ocsm *, body.page-template-ocsm *::before, body.page-template-ocsm *::after { box-sizing: border-box; }

body { font-family: var(--font-body); font-size: 16px; line-height: 1.65; color: var(--ink-light); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ink); line-height: 1.2; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--lime); }

.container { max-width: 1220px; margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.section-sm { padding: 48px 0; }
.section-lg { padding: 96px 0; }
.text-center { text-align: center; }

.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lime);
	margin-bottom: 10px;
}
.section-heading { font-size: clamp(28px, 4vw, 44px); font-weight: 900; color: var(--ink); margin-bottom: 14px; }
.section-sub { font-size: 17px; color: var(--ink-light); max-width: 640px; margin: 0 auto 36px; font-weight: 400; }

/* BUTTONS */
.btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 28px; border-radius: 100px;
	font-family: var(--font-body); font-size: 15px; font-weight: 700;
	cursor: pointer; transition: all 0.22s ease; border: none; text-decoration: none; white-space: nowrap;
}
.btn-primary { background: var(--lime); color: var(--white); box-shadow: 0 4px 20px rgba(76,175,80,0.35); }
.btn-primary:hover { background: var(--lime-bright); color: var(--white); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(76,175,80,0.45); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--forest); color: var(--white); transform: translateY(-2px); }
.btn-outline { background: transparent; border: 2px solid var(--white); color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--ink); }
.btn-outline-green { background: transparent; border: 2px solid var(--lime); color: var(--lime); }
.btn-outline-green:hover { background: var(--lime); color: var(--white); }
.btn-outline-white { background: transparent; border: 2px solid rgba(255,255,255,0.5); color: var(--white); }
.btn-outline-white:hover { background: var(--white); color: var(--ink); }
.btn-lg { padding: 18px 36px; font-size: 16px; }

/* SHARED ANIMATIONS */
@keyframes pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(0.8); }
}
@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}
.anim { animation: fadeInUp 0.6s ease both; }
.anim-d1 { animation-delay: 0.1s; }
.anim-d2 { animation-delay: 0.2s; }
.anim-d3 { animation-delay: 0.3s; }
.animate-in { animation: fadeInUp 0.6s ease forwards; }
.animate-delay-1 { animation-delay: 0.1s; opacity: 0; }
.animate-delay-2 { animation-delay: 0.2s; opacity: 0; }
.animate-delay-3 { animation-delay: 0.3s; opacity: 0; }

/* SHARED HERO COMPONENTS */
.hero-badge {
	display: inline-flex; align-items: center; gap: 7px;
	background: rgba(76,175,80,0.15); border: 1px solid rgba(76,175,80,0.3);
	border-radius: 100px; padding: 6px 14px; margin-bottom: 18px;
	font-size: 12px; font-weight: 700; color: var(--lime-bright);
	letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-badge-dot { width: 7px; height: 7px; background: var(--lime-bright); border-radius: 50%; animation: pulse 2s infinite; }

/* SHARED FORM CARD */
.form-card {
	background: var(--white);
	border-radius: var(--r-lg);
	box-shadow: 0 32px 80px rgba(0,0,0,0.28);
	overflow: hidden;
	position: relative;
	z-index: 2;
}
.form-card-header {
	background: linear-gradient(135deg, var(--green) 0%, var(--forest) 100%);
	padding: 24px 28px;
	text-align: center;
}
.form-card-header h2 { font-size: 19px; color: var(--white); font-weight: 700; margin: 0; }
.form-card-header p { font-size: 13px; color: rgba(255,255,255,0.65); margin-top: 4px; }
.form-card-body { padding: 28px; }

/* SHARED CTA BANNER */
.cta-banner {
	background: var(--lime);
	background-image: radial-gradient(ellipse 80% 100% at 50% 100%, rgba(255,255,255,0.08) 0%, transparent 70%);
	padding: 64px 0;
	text-align: center;
}
.cta-banner h2 { font-size: clamp(26px, 4vw, 40px); color: var(--white); margin-bottom: 12px; font-weight: 900; }
.cta-banner p { font-size: 17px; color: rgba(255,255,255,0.82); max-width: 520px; margin: 0 auto 28px; }

/* SHARED FAQ */
.faq-section { background: var(--cream); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.faq-item { background: var(--white); border: 1.5px solid var(--gray-border); border-radius: var(--r-md); overflow: hidden; transition: border-color 0.22s, box-shadow 0.22s; }
.faq-item.open { border-color: rgba(76,175,80,0.4); box-shadow: 0 4px 20px rgba(76,175,80,0.1); }
.faq-question {
	width: 100%; background: none; border: none; padding: 20px 24px;
	text-align: left; cursor: pointer;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--ink);
	transition: background 0.18s;
}
.faq-question:hover { background: var(--gray-light); }
.faq-item.open .faq-question { background: #f0f9f0; color: var(--green); }
.faq-chevron {
	width: 28px; height: 28px;
	background: var(--gray-light);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	transition: background 0.22s, transform 0.3s;
}
.faq-chevron svg { width: 14px; height: 14px; stroke: var(--ink-light); transition: stroke 0.22s; }
.faq-item.open .faq-chevron { background: var(--lime); transform: rotate(180deg); }
.faq-item.open .faq-chevron svg { stroke: white; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s; padding: 0 24px; }
.faq-item.open .faq-answer { max-height: 600px; padding: 0 24px 20px; }
.faq-answer p { font-size: 14px; color: var(--ink-light); line-height: 1.7; border-top: 1px solid var(--gray-border); padding-top: 16px; }

@media (max-width: 1024px) {
	.faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.section { padding: 56px 0; }
	.section-lg { padding: 72px 0; }
}