/* =========================================================
   HAVLI — Responsive design system
   Mobile-first. Applies site-wide: Elementor content, native
   WordPress blocks, The Events Calendar, Event Tickets /
   Tickets Commerce checkout, WP User Frontend forms, and
   miniOrange login/OTP forms all share these base rules
   automatically, since they all render plain HTML form
   elements this file already targets.
   ========================================================= */

/* ---------- Base ---------- */
html { box-sizing: border-box; scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: inherit; }

body {
	background-color: var(--havli-bg);
	color: var(--havli-text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: 'Poppins', 'Inter', sans-serif;
	font-weight: 700;
	color: var(--havli-text);
	line-height: 1.25;
}

h1, .elementor-widget-heading h1 { font-size: clamp(28px, 6vw, 52px); }
h2, .elementor-widget-heading h2 { font-size: clamp(22px, 4.5vw, 36px); }
h3, .elementor-widget-heading h3 { font-size: clamp(18px, 3.5vw, 26px); }

p { color: var(--havli-text-muted); }

a { color: var(--havli-purple); text-decoration: none; }
a:hover { color: var(--havli-purple-deep); }

img, video, iframe { max-width: 100%; height: auto; }

/* ---------- Buttons (Elementor + native WP block buttons) ---------- */
.elementor-button,
.wp-block-button__link,
button:not(.havli-status),
input[type="submit"],
input[type="button"] {
	background: linear-gradient(135deg, var(--havli-purple), var(--havli-purple-deep)) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--havli-radius-pill) !important;
	padding: 14px 30px !important;
	font-weight: 600 !important;
	font-family: 'Inter', sans-serif;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.elementor-button:hover,
.wp-block-button__link:hover,
button:not(.havli-status):hover,
input[type="submit"]:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	border: 1.5px solid var(--havli-purple) !important;
	color: var(--havli-purple) !important;
}

/* ---------- Cards / surfaces ---------- */
.havli-card,
.tribe-events-calendar-list__event-row,
.tribe-events-single,
.tribe-events-list-widget,
.wpuf-form,
.wpuf-dashboard,
.tec-tickets-commerce-checkout {
	background: var(--havli-surface) !important;
	border-radius: var(--havli-radius) !important;
	border: 1px solid rgba(155, 107, 255, 0.18) !important;
	color: var(--havli-text) !important;
}

.tribe-events-calendar-list__event-title a,
.tribe-events-single-event-title {
	color: var(--havli-text) !important;
}

.tribe-events-calendar-list__event-datetime,
.tribe-event-schedule-details {
	color: var(--havli-text-muted) !important;
}

/* ---------- Forms (checkout, WPUF submission, OTP login/signup) ---------- */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="url"],
input[type="search"],
select,
textarea {
	width: 100%;
	background: var(--havli-surface-2) !important;
	color: var(--havli-text) !important;
	border: 1px solid rgba(155, 107, 255, 0.3) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	font-family: 'Inter', sans-serif;
	margin-bottom: 12px;
}

input::placeholder, textarea::placeholder { color: var(--havli-text-muted); }

label { color: var(--havli-text); font-weight: 600; display: block; margin-bottom: 6px; }

/* ---------- Grid utility (available for any Shortcode/HTML widget) ---------- */
.havli-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

/* ---------- Vibe chip row (used on Home/Explore) ---------- */
.havli-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.havli-chip-row .wp-block-button__link,
.havli-chip-row .elementor-button {
	padding: 8px 18px !important;
	font-size: 14px !important;
}

/* ---------- Site chrome (works with Elementor Header & Footer Builder output) ---------- */
.site-header,
[data-elementor-type="header"],
[data-elementor-type="footer"] {
	background: var(--havli-bg) !important;
	border-color: rgba(155, 107, 255, 0.15) !important;
}

.site-header nav ul.menu a,
[data-elementor-type="header"] a {
	color: var(--havli-text) !important;
	font-weight: 600;
}

.site-header nav ul.menu a:hover,
[data-elementor-type="header"] a:hover {
	color: var(--havli-purple) !important;
}

/* ---------- Map + dashboard already styled by Havli Core plugin's own CSS;
   these rules just make sure they inherit the same fonts on this theme. ---------- */
.havli-map, .havli-dashboard-table, .havli-box { font-family: 'Inter', sans-serif; }

/* =========================================================
   Responsive breakpoints (mobile-first — base rules above
   already target phones; these widen the layout up)
   ========================================================= */

/* Small tablets and up */
@media (min-width: 600px) {
	.havli-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablets / small laptops */
@media (min-width: 900px) {
	.havli-grid { grid-template-columns: repeat(3, 1fr); }

	.tribe-events-calendar-list__event-row {
		display: flex;
		align-items: center;
		gap: 20px;
	}
}

/* Desktop */
@media (min-width: 1200px) {
	.havli-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Phones only — tighten spacing so nothing feels cramped edge-to-edge */
@media (max-width: 599px) {
	.elementor-section { padding-left: 16px !important; padding-right: 16px !important; }
	.havli-dashboard-table { display: block; overflow-x: auto; white-space: nowrap; }
	.havli-map { height: 320px !important; }
}

/* Respect iOS/Android safe areas so fixed headers never sit under the notch */
body {
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}