/*==========================================================
	Triguna Yoga — site-wide CTA buttons (2 Oct 2026)
	Loaded last on every page. Restyles the template buttons
	(.site-button, .site-button-secondry, .apply-btn …) and adds a
	small icon picked from the button's link/role. No markup or text changes.
	Tabs / filters (href="#…", javascript:) are left untouched.
==========================================================*/
:root {
	--cta-green: #4F7D45;
	--cta-green-dark: #3F6938;
	--cta-green-deep: #1E3523;
	--cta-saffron: #D9823B;
	--cta-wa: #25A244;

	/* icons (stroke SVGs used as masks, so they take the text colour) */
	--cta-ico-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2.5'/%3E%3Cpath d='M16 2.5v4M8 2.5v4M3 10h18M9 15.5l2 2 4-4'/%3E%3C/svg%3E");
	--cta-ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	--cta-ico-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21l1.8-5.2A8.6 8.6 0 1 1 8.4 19.4z'/%3E%3Cpath d='M9 9.5c0 3 2.5 5.5 5.5 5.5l1.2-1.4-2-1-1 .9a4 4 0 0 1-2.2-2.2l.9-1-1-2z'/%3E%3C/svg%3E");
	--cta-ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2.5'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
	--cta-ico-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13M22 2l-7 20-4-9-9-4z'/%3E%3C/svg%3E");
	--cta-ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ---------- base: every real CTA ---------- */
body :is(.site-button:not(.site-button-link), .site-button-secondry, .apply-btn, .cta-button, .button-29, .tg-btn):not([href^="#"]):not([href^="javascript"]),
body button[type="submit"]:not([class*="close"]):not(.navbar-toggler),
body input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	min-height: 46px;
	padding: 12px 26px;
	border: 2px solid transparent;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--cta-green) 0%, var(--cta-green-dark) 100%);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 12px 24px -14px rgba(63,105,56,.9);
	transition: background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, color 200ms ease, border-color 200ms ease;
}
body :is(.site-button:not(.site-button-link), .site-button-secondry, .apply-btn, .cta-button, .button-29, .tg-btn):not([href^="#"]):not([href^="javascript"]):hover,
body :is(.site-button:not(.site-button-link), .site-button-secondry, .apply-btn, .cta-button, .button-29, .tg-btn):not([href^="#"]):not([href^="javascript"]):focus,
body button[type="submit"]:not([class*="close"]):not(.navbar-toggler):hover,
body input[type="submit"]:hover {
	background: var(--cta-green-deep);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 18px 30px -16px rgba(21,40,26,.75);
	text-decoration: none;
}
body :is(.site-button, .site-button-secondry, .apply-btn, .cta-button, .button-29, .tg-btn):focus-visible,
body button[type="submit"]:focus-visible,
body input[type="submit"]:focus-visible {
	outline: 3px solid var(--cta-saffron);
	outline-offset: 3px;
}
body :is(.site-button, .site-button-secondry, .apply-btn):active { transform: translateY(0); }
/* the template wraps some labels in .site-button-inr — keep it plain */
body .site-button .site-button-inr { background: none; padding: 0; color: inherit; }

/* ---------- variants ---------- */
/* light buttons on dark/photo backgrounds */
body .site-button.white:not([href^="#"]) {
	background: #fff; color: var(--cta-green-dark); border-color: #fff;
	box-shadow: 0 12px 24px -16px rgba(0,0,0,.45);
}
body .site-button.white:not([href^="#"]):hover { background: var(--cta-green-dark); border-color: var(--cta-green-dark); color: #fff; }
/* secondary = outline */
body .site-button-secondry:not([href^="#"]):not([href^="javascript"]) {
	background: transparent; color: var(--cta-green-dark); border-color: var(--cta-green-dark); box-shadow: none;
}
body .site-button-secondry:not([href^="#"]):not([href^="javascript"]):hover { background: var(--cta-green-dark); color: #fff; }
/* WhatsApp */
body :is(.site-button, .site-button-secondry, .cta-button)[href*="wa.me"],
body :is(.site-button, .site-button-secondry, .cta-button)[href*="whatsapp"] {
	background: var(--cta-wa); border-color: var(--cta-wa); color: #fff;
	box-shadow: 0 12px 24px -14px rgba(37,162,68,.9);
}
body :is(.site-button, .site-button-secondry, .cta-button)[href*="wa.me"]:hover,
body :is(.site-button, .site-button-secondry, .cta-button)[href*="whatsapp"]:hover { background: #1E8A39; border-color: #1E8A39; }
/* course-table "Apply Now" buttons: a little more compact */
body td .site-button, body td .apply-btn { min-height: 40px; padding: 9px 18px; font-size: 14px; }

/* ---------- icons (only when the button has no icon of its own) ---------- */
body :is(.site-button:not(.site-button-link), .site-button-secondry, .apply-btn, .cta-button, .button-29, .tg-btn):not(:has(i, svg, img))::before,
body button[type="submit"]:not([class*="close"]):not(.navbar-toggler):not(:has(i, svg, img))::before {
	content: none;
	flex: 0 0 auto;
	width: 1.15em; height: 1.15em;
	background-color: currentColor;
	-webkit-mask: var(--cta-ico) center / contain no-repeat;
	mask: var(--cta-ico) center / contain no-repeat;
	transition: transform 200ms ease;
}
/* book / apply → calendar */
body :is(.site-button, .site-button-secondry, .apply-btn, .cta-button, .button-29, .tg-btn):is([href*="registration"], [href*="applyform"], [data-target="#myModal"], [data-toggle="modal"]):not(:has(i, svg, img))::before { --cta-ico: var(--cta-ico-calendar); content: ""; }
body .apply-btn:not(:has(i, svg, img))::before { --cta-ico: var(--cta-ico-calendar); content: ""; }
/* call → phone */
body :is(.site-button, .site-button-secondry, .cta-button)[href^="tel:"]:not(:has(i, svg, img))::before { --cta-ico: var(--cta-ico-phone); content: ""; }
/* WhatsApp → chat */
body :is(.site-button, .site-button-secondry, .cta-button):is([href*="wa.me"], [href*="whatsapp"]):not(:has(i, svg, img))::before { --cta-ico: var(--cta-ico-chat); content: ""; }
/* email → envelope */
body :is(.site-button, .site-button-secondry, .cta-button)[href^="mailto:"]:not(:has(i, svg, img))::before { --cta-ico: var(--cta-ico-mail); content: ""; }
/* contact page + form submit → send */
body :is(.site-button, .site-button-secondry, .cta-button)[href*="contact"]:not(:has(i, svg, img))::before,
body button[type="submit"]:not([class*="close"]):not(.navbar-toggler):not(:has(i, svg, img))::before { --cta-ico: var(--cta-ico-send); content: ""; }
/* course / read-more links → arrow after the label */
body :is(.site-button, .site-button-secondry, .cta-button):is([href*="-ttc-"], [href*="teacher-training"], [href*="meditation"], [href*="retreat"]):not([href*="registration"]):not(:has(i, svg, img))::after {
	content: "";
	flex: 0 0 auto;
	width: 1.05em; height: 1.05em;
	background-color: currentColor;
	-webkit-mask: var(--cta-ico-arrow) center / contain no-repeat;
	mask: var(--cta-ico-arrow) center / contain no-repeat;
	transition: transform 200ms ease;
}
body :is(.site-button, .site-button-secondry, .apply-btn, .cta-button):hover::after { transform: translateX(3px); }
body :is(.site-button, .site-button-secondry, .apply-btn, .cta-button):hover::before { transform: scale(1.08); }

@media (max-width: 575px) {
	body :is(.site-button:not(.site-button-link), .site-button-secondry, .apply-btn):not([href^="#"]):not([href^="javascript"]) { white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
	body :is(.site-button, .site-button-secondry, .apply-btn, .cta-button, .button-29, .tg-btn),
	body :is(.site-button, .site-button-secondry, .apply-btn, .cta-button)::before,
	body :is(.site-button, .site-button-secondry, .apply-btn, .cta-button)::after { transition: none; }
}

/* ---------- buttons with inline styles or Bootstrap "danger" classes ---------- */
/* inline style="" beats normal CSS, so these few need !important */
body :is(.site-button:not(.site-button-link), .site-button-secondry, .cta-button)[style]:not([href^="#"]):not([href^="javascript"]),
body button[type="submit"][style]:not([class*="close"]),
body a.btn.btn-danger {
	display: inline-flex !important;
	align-items: center; justify-content: center; gap: .55em;
	border-radius: 999px !important;
	background: linear-gradient(135deg, var(--cta-green) 0%, var(--cta-green-dark) 100%) !important;
	color: #fff !important;
	border: 2px solid transparent !important;
	text-transform: none !important;
	font-weight: 700 !important;
	box-shadow: 0 12px 24px -14px rgba(63,105,56,.9);
}
body :is(.site-button:not(.site-button-link), .site-button-secondry, .cta-button)[style]:not([href^="#"]):hover,
body button[type="submit"][style]:not([class*="close"]):hover,
body a.btn.btn-danger:hover { background: var(--cta-green-deep) !important; transform: translateY(-2px); }
body a.btn.btn-danger { min-height: 44px; padding: 10px 22px; }
body a.btn.btn-danger:not(:has(i, svg, img))::before {
	content: ""; flex: 0 0 auto; width: 1.15em; height: 1.15em; background-color: currentColor;
	-webkit-mask: var(--cta-ico-calendar) center / contain no-repeat; mask: var(--cta-ico-calendar) center / contain no-repeat;
}
/* same font as the page (some template buttons used a monospace stack) */
body :is(.site-button:not(.site-button-link), .site-button-secondry, .apply-btn, .cta-button, .button-29, .tg-btn, a.btn.btn-danger),
body button[type="submit"]:not([class*="close"]) { font-family: inherit; }

/* home draft buttons (.th-btn): icons only — their look is set in home-new.css */
body .th-btn:not(:has(i, svg, img))::before {
	content: none; flex: 0 0 auto; width: 1.1em; height: 1.1em; background-color: currentColor;
	-webkit-mask: var(--cta-ico) center / contain no-repeat; mask: var(--cta-ico) center / contain no-repeat;
}
body .th-btn:is([href*="registration"], [href*="applyform"]):not(:has(i, svg, img))::before { --cta-ico: var(--cta-ico-calendar); content: ""; }
body .th-btn[href*="contact"]:not(:has(i, svg, img))::before { --cta-ico: var(--cta-ico-send); content: ""; }
body .th-btn:is([href*="-ttc-"], [href*="teacher-training"], [href*="meditation"], [href*="retreat"], [href*="about"], [href*="why-triguna"], [href^="#courses"]):not([href*="registration"]):not(:has(i, svg, img))::after {
	content: ""; flex: 0 0 auto; width: 1em; height: 1em; background-color: currentColor;
	-webkit-mask: var(--cta-ico-arrow) center / contain no-repeat; mask: var(--cta-ico-arrow) center / contain no-repeat;
	transition: transform 200ms ease;
}
body .th-btn:hover::after { transform: translateX(3px); }
body .th-btn { gap: .5em; }