/* ==========================================================================
   HitMo for Business — design system
   Tokens → base → layout → components. Mobile-first.
   ========================================================================== */

:root {
	--hm-red: #df2c2a;
	--hm-red-dark: #b8201e;   /* hover/active; white text still AA */
	--hm-white: #ffffff;
	--hm-black: #111111;
	--hm-grey-50: #f5f5f5;
	--hm-grey-200: #e5e5e5;
	--hm-grey-600: #6b6b6b;
	--hm-success: #1e7a3c;
	--hm-error: #b3261e;

	--hm-font-latin: "PT Serif", Georgia, "Times New Roman", serif;
	--hm-font-pa: "PT Serif", "Noto Serif Gurmukhi", serif;
	--hm-font-hi: "PT Serif", "Noto Serif Devanagari", serif;
	--hm-font: var(--hm-font-pa);

	--hm-fs-body: 1.0625rem;  /* 17px Latin */
	--hm-lh-body: 1.65;
	--hm-fs-sm: 0.9375rem;
	--hm-fs-h1: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
	--hm-fs-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	--hm-fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);

	--hm-space-1: 0.25rem;
	--hm-space-2: 0.5rem;
	--hm-space-3: 0.75rem;
	--hm-space-4: 1rem;
	--hm-space-6: 1.5rem;
	--hm-space-8: 2rem;
	--hm-space-12: 3rem;
	--hm-space-16: 4rem;

	--hm-radius: 8px;
	--hm-radius-lg: 14px;
	--hm-container: 1200px;
	--hm-reading: 720px;
	--hm-gutter: 16px;
	--hm-focus: 0 0 0 3px var(--hm-white), 0 0 0 5px var(--hm-black);
	--hm-shadow: 0 1px 2px rgba(17, 17, 17, .06), 0 4px 16px rgba(17, 17, 17, .06);
	--hm-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
	:root { --hm-gutter: 24px; }
}

/* Language-aware typography: Gurmukhi/Devanagari need more size and line-height. */
.hm-lang-en { --hm-font: var(--hm-font-latin); }
.hm-lang-hi { --hm-font: var(--hm-font-hi); --hm-fs-body: 1.125rem; --hm-lh-body: 1.8; }
.hm-lang-pa { --hm-font: var(--hm-font-pa); --hm-fs-body: 1.1875rem; --hm-lh-body: 1.8; }
:lang(pa) { font-family: var(--hm-font-pa); }
:lang(hi) { font-family: var(--hm-font-hi); }
:lang(en) { font-family: var(--hm-font-latin); }

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--hm-white);
	color: var(--hm-black);
	font-family: var(--hm-font);
	font-size: var(--hm-fs-body);
	line-height: var(--hm-lh-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--hm-font); line-height: 1.25; margin: 0 0 var(--hm-space-4); font-weight: 700; color: var(--hm-black); }
.hm-lang-pa h1, .hm-lang-pa h2, .hm-lang-pa h3, .hm-lang-hi h1, .hm-lang-hi h2, .hm-lang-hi h3 { line-height: 1.45; }
h1 { font-size: var(--hm-fs-h1); }
h2 { font-size: var(--hm-fs-h2); }
h3 { font-size: var(--hm-fs-h3); }
p { margin: 0 0 var(--hm-space-4); }
img { max-width: 100%; height: auto; }

a { color: var(--hm-red); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--hm-red-dark); text-decoration-thickness: 2px; }

:focus-visible { outline: none; box-shadow: var(--hm-focus); border-radius: 4px; }

.hm-sr-only {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.hm-skip-link {
	position: absolute; left: var(--hm-space-4); top: -100px; z-index: 10000;
	background: var(--hm-black); color: var(--hm-white); padding: var(--hm-space-3) var(--hm-space-4);
	border-radius: var(--hm-radius); text-decoration: none;
}
.hm-skip-link:focus { top: var(--hm-space-4); color: var(--hm-white); }
#hm-content-start:focus { outline: none; }

/* ---------- Layout ---------- */
.hm-container { width: 100%; max-width: var(--hm-container); margin-inline: auto; padding-inline: var(--hm-gutter); box-sizing: border-box; }
.hm-reading-width { max-width: var(--hm-reading); margin-inline: auto; }
.hm-section { padding-block: var(--hm-space-12); }
@media (min-width: 1024px) { .hm-section { padding-block: var(--hm-space-16); } }

/* Hello Elementor page wrapper: keep content inside our container */
.site-main:not(.elementor-page .site-main) { max-width: var(--hm-container); margin-inline: auto; padding-inline: var(--hm-gutter); padding-block: var(--hm-space-8); box-sizing: border-box; }
.page-content > *:not(.alignwide):not(.alignfull):not(.hm-wide) { max-width: var(--hm-reading); margin-inline: auto; }

/* ---------- Buttons ---------- */
.hm-btn, .hm-form button[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--hm-space-2);
	min-height: 44px; padding: 0 var(--hm-space-6);
	border: 2px solid transparent; border-radius: var(--hm-radius);
	font: 700 1rem/1.2 var(--hm-font); text-decoration: none; cursor: pointer;
	transition: background-color .15s var(--hm-ease), color .15s var(--hm-ease), transform .15s var(--hm-ease);
}
.hm-btn--primary, .hm-form button[type="submit"] { background: var(--hm-red); color: var(--hm-white); }
.hm-btn--primary:hover, .hm-form button[type="submit"]:hover { background: var(--hm-red-dark); color: var(--hm-white); }
.hm-btn--secondary { background: var(--hm-white); color: var(--hm-black); border-color: var(--hm-black); }
.hm-btn--secondary:hover { background: var(--hm-black); color: var(--hm-white); }
.hm-btn--ghost { background: transparent; color: var(--hm-black); border-color: var(--hm-grey-200); }
.hm-btn--ghost:hover { border-color: var(--hm-black); color: var(--hm-black); }
.hm-btn--sm { min-height: 44px; padding: 0 var(--hm-space-4); font-size: var(--hm-fs-sm); }
.hm-btn--block { width: 100%; }
.hm-btn:active { transform: translateY(1px); }
.hm-btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

.hm-link { color: var(--hm-black); text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
.hm-link:hover { color: var(--hm-red); }

/* ---------- Header ---------- */
.hm-header { position: sticky; top: 0; z-index: 900; background: var(--hm-white); border-bottom: 1px solid var(--hm-grey-200); }
.admin-bar .hm-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .hm-header { top: 32px; } }
.hm-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--hm-space-4); min-height: 64px; }
.hm-header__name { font-weight: 700; font-size: 1.25rem; color: var(--hm-black); text-decoration: none; }
.hm-header__brand img { max-height: 44px; width: auto; display: block; }

.hm-header__toggle {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	background: none; border: 0; padding: 0; cursor: pointer; color: var(--hm-black);
}
.hm-header__toggle-bars, .hm-header__toggle-bars::before, .hm-header__toggle-bars::after {
	display: block; width: 22px; height: 2px; background: currentColor; position: relative; transition: transform .2s var(--hm-ease);
}
.hm-header__toggle-bars::before, .hm-header__toggle-bars::after { content: ""; position: absolute; left: 0; }
.hm-header__toggle-bars::before { top: -7px; }
.hm-header__toggle-bars::after { top: 7px; }
.hm-header__toggle[aria-expanded="true"] .hm-header__toggle-bars { background: transparent; }
.hm-header__toggle[aria-expanded="true"] .hm-header__toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.hm-header__toggle[aria-expanded="true"] .hm-header__toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

.hm-header__nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--hm-white); border-bottom: 1px solid var(--hm-grey-200); padding: var(--hm-space-4) var(--hm-gutter) var(--hm-space-6); }
.hm-header__nav.is-open { display: block; }
.hm-menu { list-style: none; margin: 0 0 var(--hm-space-4); padding: 0; }
.hm-menu a { display: flex; align-items: center; min-height: 44px; color: var(--hm-black); text-decoration: none; font-weight: 700; }
.hm-menu a:hover, .hm-menu .current-menu-item > a { color: var(--hm-red); }
.hm-menu .sub-menu { list-style: none; padding-left: var(--hm-space-4); margin: 0; }
.hm-header__actions { display: flex; align-items: center; gap: var(--hm-space-4); flex-wrap: wrap; }

@media (min-width: 1024px) {
	.hm-header__toggle { display: none; }
	.hm-header__nav { display: flex !important; position: static; align-items: center; gap: var(--hm-space-6); padding: 0; border: 0; }
	.hm-menu { display: flex; gap: var(--hm-space-6); margin: 0; }
	.hm-menu > li { position: relative; }
	.hm-menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--hm-white); border: 1px solid var(--hm-grey-200); border-radius: var(--hm-radius); box-shadow: var(--hm-shadow); padding: var(--hm-space-2) var(--hm-space-4); }
	.hm-menu li:hover > .sub-menu, .hm-menu li:focus-within > .sub-menu { display: block; }
}

/* ---------- Footer ---------- */
.hm-footer { background: var(--hm-black); color: #d9d9d9; margin-top: var(--hm-space-16); font-size: var(--hm-fs-sm); }
.hm-footer a { color: var(--hm-white); text-decoration: none; }
.hm-footer a:hover { text-decoration: underline; color: var(--hm-white); }
.hm-footer__grid { display: grid; gap: var(--hm-space-8); padding-block: var(--hm-space-12); }
@media (min-width: 768px) { .hm-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.hm-footer__name { color: var(--hm-white); font-weight: 700; font-size: 1.25rem; }
.hm-footer__heading { color: var(--hm-white); font-weight: 700; }
.hm-footer__menu, .hm-footer__legal { list-style: none; margin: 0; padding: 0; }
.hm-footer__menu a, .hm-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.hm-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--hm-space-4); border-top: 1px solid #333; padding-block: var(--hm-space-6); }
.hm-footer__bottom p { margin: 0; align-self: center; }
.hm-footer__legal { display: flex; flex-wrap: wrap; column-gap: var(--hm-space-6); }

/* ---------- WhatsApp float ---------- */
.hm-wa-float {
	position: fixed; right: 16px; bottom: 16px; z-index: 950;
	width: 56px; height: 56px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #1a7f45; color: var(--hm-white); box-shadow: var(--hm-shadow);
	transition: transform .15s var(--hm-ease);
}
.hm-wa-float:hover { color: var(--hm-white); transform: scale(1.06); }

/* ---------- Reading progress ---------- */
.hm-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 1000; background: transparent; pointer-events: none; }
.hm-progress__bar { height: 100%; width: 100%; background: var(--hm-red); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Forms ---------- */
.hm-form { display: grid; gap: var(--hm-space-4); }
.hm-field { display: grid; gap: var(--hm-space-1); }
.hm-field label, .hm-field legend { font-weight: 700; font-size: var(--hm-fs-sm); }
.hm-field .hm-hint { color: var(--hm-grey-600); font-size: .875rem; margin: 0; }
.hm-form input[type="text"], .hm-form input[type="email"], .hm-form input[type="password"], .hm-form input[type="tel"], .hm-form select, .hm-form textarea {
	width: 100%; min-height: 48px; box-sizing: border-box; padding: var(--hm-space-3) var(--hm-space-4);
	border: 1px solid #8a8a8a; border-radius: var(--hm-radius); background: var(--hm-white); color: var(--hm-black);
	font: 400 1rem/1.4 var(--hm-font-latin);
}
.hm-form input:focus-visible, .hm-form select:focus-visible, .hm-form textarea:focus-visible { border-color: var(--hm-black); }
.hm-form [aria-invalid="true"] { border-color: var(--hm-error); }
.hm-row-2 { display: grid; gap: var(--hm-space-4); }
@media (min-width: 560px) { .hm-row-2 { grid-template-columns: 1fr 1fr; } }
.hm-phone { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: var(--hm-space-2); }
.hm-check { display: flex; gap: var(--hm-space-3); align-items: flex-start; font-size: var(--hm-fs-sm); }
.hm-check input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--hm-red); }
.hm-hp { position: absolute !important; left: -9999px !important; }

.hm-notice { padding: var(--hm-space-3) var(--hm-space-4); border-radius: var(--hm-radius); border: 1px solid var(--hm-grey-200); background: var(--hm-grey-50); }
.hm-notice--error { border-color: var(--hm-error); background: #fdf0ef; color: #7a1a14; }
.hm-notice--success { border-color: var(--hm-success); background: #eef8f1; color: #14532a; }

/* ---------- Auth pages ---------- */
.hm-auth { max-width: 480px; margin: var(--hm-space-8) auto; padding: var(--hm-space-6); border: 1px solid var(--hm-grey-200); border-radius: var(--hm-radius-lg); background: var(--hm-white); }
@media (min-width: 560px) { .hm-auth { padding: var(--hm-space-8); } }
.hm-auth h1 { font-size: var(--hm-fs-h2); }
.hm-auth__tabs { display: flex; gap: var(--hm-space-2); margin-bottom: var(--hm-space-6); border-bottom: 1px solid var(--hm-grey-200); }
.hm-auth__tab { display: inline-flex; align-items: center; text-decoration: none; background: none; border: 0; border-bottom: 3px solid transparent; min-height: 44px; padding: 0 var(--hm-space-3); font: 700 var(--hm-fs-sm) var(--hm-font); cursor: pointer; color: var(--hm-grey-600); }
.hm-auth__tab[aria-current="page"] { color: var(--hm-black); border-bottom-color: var(--hm-red); }
.hm-auth__divider { display: flex; align-items: center; gap: var(--hm-space-3); color: var(--hm-grey-600); font-size: .875rem; margin: var(--hm-space-6) 0; }
.hm-auth__divider::before, .hm-auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--hm-grey-200); }
.hm-auth__foot { margin-top: var(--hm-space-6); font-size: var(--hm-fs-sm); text-align: center; }

/* ---------- Account dashboard ---------- */
.hm-account { display: grid; gap: var(--hm-space-8); padding-block: var(--hm-space-8); }
@media (min-width: 1024px) { .hm-account { grid-template-columns: 260px 1fr; } }
.hm-account__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--hm-space-2); overflow-x: auto; scrollbar-width: thin; }
@media (min-width: 1024px) { .hm-account__nav ul { flex-direction: column; overflow: visible; } }
.hm-account__nav a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--hm-space-4); border-radius: var(--hm-radius); color: var(--hm-black); text-decoration: none; white-space: nowrap; font-weight: 700; font-size: var(--hm-fs-sm); }
.hm-account__nav a:hover { background: var(--hm-grey-50); color: var(--hm-black); }
.hm-account__nav a[aria-current="page"] { background: var(--hm-black); color: var(--hm-white); }
.hm-account__panel h2 { font-size: var(--hm-fs-h3); }
.hm-cards { display: grid; gap: var(--hm-space-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.hm-card { border: 1px solid var(--hm-grey-200); border-radius: var(--hm-radius-lg); padding: var(--hm-space-6); background: var(--hm-white); transition: border-color .15s var(--hm-ease), box-shadow .15s var(--hm-ease); }
.hm-card:hover { border-color: #cfcfcf; box-shadow: var(--hm-shadow); }
.hm-card h2 { font-size: 1.25rem; margin-bottom: var(--hm-space-2); }
.hm-card h2 a { color: var(--hm-black); text-decoration: none; }
.hm-card h2 a:hover { color: var(--hm-red); }
.hm-card p { margin: 0; color: var(--hm-grey-600); }
.hm-empty { padding: var(--hm-space-8); border: 1px dashed var(--hm-grey-200); border-radius: var(--hm-radius-lg); text-align: center; color: var(--hm-grey-600); }
.hm-cta-strip { display: grid; gap: var(--hm-space-4); margin-top: var(--hm-space-8); padding: var(--hm-space-6); background: var(--hm-grey-50); border-radius: var(--hm-radius-lg); }
@media (min-width: 768px) { .hm-cta-strip { grid-template-columns: 1fr auto auto; align-items: center; } }
.hm-cta-strip p { margin: 0; }

.hm-app-page .page-content > * { max-width: none; }
.hm-account__title { font-size: var(--hm-fs-h2); }

/* ---------- Legal / long text pages ---------- */
.hm-legal { max-width: var(--hm-reading); margin-inline: auto; }
.hm-legal h2 { font-size: var(--hm-fs-h3); margin-top: var(--hm-space-8); }
.hm-legal .hm-notice { margin-bottom: var(--hm-space-6); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.hm-progress { display: none; }
}