/*
Theme Name:  OTM Solutions Starter
Theme URI:   https://one-to-many.com
Author:      Mkhuzo Mwanza
Author URI:  https://one-to-many.com
Description: A production-ready, Elementor-compatible WordPress starter theme with a cloned Easyship-style eCommerce shipping SaaS homepage. Lightweight, fast, and fully customizable via the WordPress Customizer and Elementor Pro Theme Builder.
Version:     1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License:     GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: otmsolutions-starter
Tags:        custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, full-site-editing, block-patterns, elementor, page-builder
*/

/* ============================================================
   CSS Custom Properties
   ============================================================ */
:root {
	/* Brand Colors */
	--clr-green:        #1DC8A8;
	--clr-green-dark:   #17A98E;
	--clr-green-light:  #E8FBF7;
	--clr-navy:         #1B2B4B;
	--clr-navy-light:   #2D4270;
	--clr-blue:         #3B5BDB;
	--clr-blue-light:   #EEF2FF;
	--clr-orange:       #F59E0B;
	--clr-gray:         #6B7280;
	--clr-gray-light:   #F9FAFB;
	--clr-white:        #FFFFFF;

	/* Typography */
	--font-sans:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-size-base:   16px;
	--line-height-base: 1.6;

	/* Spacing */
	--container-max:    1280px;
	--section-py:       clamp(3rem, 6vw, 7rem);
	--section-px:       clamp(1rem, 4vw, 2rem);

	/* Shadows */
	--shadow-card:      0 4px 24px rgba(27, 43, 75, 0.08);
	--shadow-card-hover:0 12px 40px rgba(27, 43, 75, 0.16);
	--shadow-nav:       0 2px 20px rgba(27, 43, 75, 0.08);

	/* Transitions */
	--transition-fast:  0.18s ease;
	--transition-base:  0.3s ease;
	--transition-slow:  0.6s cubic-bezier(0.22, 1, 0.36, 1);

	/* Border Radius */
	--radius-sm:   0.5rem;
	--radius-md:   0.75rem;
	--radius-lg:   1rem;
	--radius-xl:   1.25rem;
	--radius-2xl:  1.5rem;
	--radius-full: 9999px;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
	scroll-behavior: auto; /* Lenis overrides */
	font-size: var(--font-size-base);
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-sans);
	font-size: 1rem;
	line-height: var(--line-height-base);
	color: var(--clr-navy);
	background: var(--clr-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button, input, textarea, select { font: inherit; }

/* ============================================================
   Typography Scale
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
	font-weight: 800;
	line-height: 1.15;
	color: var(--clr-navy);
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.875rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
p  { color: #374151; line-height: 1.7; }

/* ============================================================
   Layout Utilities
   ============================================================ */
.otm-container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--section-px);
}

.otm-section {
	padding-block: var(--section-py);
}

.otm-grid-2  { display: grid; gap: 3.5rem; }
.otm-grid-4  { display: grid; gap: 1.5rem; }

@media (min-width: 640px)  { .otm-grid-4  { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .otm-grid-2  { grid-template-columns: repeat(2, 1fr); align-items: center; }
                              .otm-grid-4  { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   Buttons
   ============================================================ */
.otm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .875rem 1.75rem;
	border-radius: var(--radius-xl);
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all var(--transition-base);
	white-space: nowrap;
}

.otm-btn-primary {
	background: var(--clr-green);
	color: var(--clr-white);
	box-shadow: 0 6px 20px rgba(29, 200, 168, .35);
}
.otm-btn-primary:hover {
	background: var(--clr-green-dark);
	box-shadow: 0 10px 30px rgba(29, 200, 168, .45);
	transform: translateY(-2px);
}

.otm-btn-outline {
	background: transparent;
	color: var(--clr-navy);
	border-color: var(--clr-navy);
}
.otm-btn-outline:hover {
	background: var(--clr-navy);
	color: var(--clr-white);
}

.otm-btn-ghost {
	background: rgba(255,255,255,.1);
	color: var(--clr-white);
	border-color: rgba(255,255,255,.3);
}
.otm-btn-ghost:hover { background: rgba(255,255,255,.2); }

.otm-btn svg { transition: transform .2s ease; }
.otm-btn:hover svg { transform: translateX(3px); }

/* ============================================================
   Section Labels
   ============================================================ */
.otm-eyebrow {
	display: inline-block;
	padding: .25rem .875rem;
	border-radius: var(--radius-full);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}
.otm-eyebrow--green  { background: rgba(29,200,168,.12); color: var(--clr-green); }
.otm-eyebrow--blue   { background: var(--clr-blue-light); color: var(--clr-blue); }
.otm-eyebrow--purple { background: #f3f0ff; color: #7c3aed; }
.otm-eyebrow--orange { background: #fff7ed; color: #d97706; }

/* ============================================================
   Cards
   ============================================================ */
.otm-card {
	background: var(--clr-white);
	border-radius: var(--radius-2xl);
	border: 1px solid #e5e7eb;
	box-shadow: var(--shadow-card);
	transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.otm-card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-4px);
}

/* ============================================================
   Check List
   ============================================================ */
.otm-check-list { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.otm-check-list li {
	display: flex;
	align-items: center;
	gap: .625rem;
	font-size: .9375rem;
	color: #374151;
}
.otm-check-list li::before {
	content: '';
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: var(--radius-full);
	background: rgba(29,200,168,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231DC8A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 6 5 9 10 3'/%3E%3C/svg%3E") center/10px no-repeat;
}

/* ============================================================
   Screen reader only
   ============================================================ */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ============================================================
   WordPress Core Classes
   ============================================================ */
.alignleft  { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .875rem; color: var(--clr-gray); margin-top: .5rem; }
.sticky { /* WP sticky post */ }

/* ============================================================
   Elementor Global Overrides (minimal, safe)
   ============================================================ */
.elementor-page .otm-site-header,
.elementor-page .otm-site-footer {
	/* Let Elementor header/footer take over when assigned */
}

/* Canvas template: completely blank */
body.elementor-template-canvas .otm-site-header,
body.elementor-template-canvas .otm-site-footer,
body.elementor-template-canvas .otm-promo-banner {
	display: none !important;
}

/* Full-width: remove sidebar/container constraints */
body.page-template-full-width .otm-content-area,
body.page-template-landing-page .otm-content-area {
	max-width: 100%;
	padding: 0;
}

/* Prevent theme font/color from stomping Elementor widgets */
.elementor-widget-text-editor p,
.elementor-widget-heading .elementor-heading-title {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: 0;
}

/* ============================================================
   Lenis Smooth Scroll
   ============================================================ */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ============================================================
   Scrollbar
   ============================================================ */
::-webkit-scrollbar              { width: 6px; }
::-webkit-scrollbar-track        { background: #f1f1f1; }
::-webkit-scrollbar-thumb        { background: var(--clr-green); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--clr-green-dark); }

/* ============================================================
   Print
   ============================================================ */
@media print {
	.otm-promo-banner, .otm-site-header nav, .otm-site-footer { display: none; }
}