/*
 * Telemedix brand tokens + Bootstrap 5 variable overrides.
 * Values mirror the original design system (see design tokens below).
 */

:root {
	--tm-background: #f8fbfa;
	--tm-foreground: #0f241b;
	--tm-card: #ffffff;
	--tm-popover: #ffffff;

	--tm-primary: #106a3d;
	--tm-primary-rgb: 16, 106, 61;
	--tm-primary-foreground: #ffffff;
	--tm-primary-glow: #92c940;
	--tm-primary-glow-rgb: 146, 201, 64;

	--tm-secondary: #eef6f2;
	--tm-secondary-foreground: #106a3d;

	--tm-muted: #f3f7f5;
	--tm-muted-foreground: #577569;

	--tm-accent: #92c940;
	--tm-accent-foreground: #0c502e;

	--tm-destructive: #ef4343;
	--tm-destructive-foreground: #ffffff;

	--tm-border: #e0ebe6;
	--tm-input: #e0ebe6;
	--tm-ring: #106a3d;

	--tm-radius: 1rem;

	--tm-gradient-hero: linear-gradient(135deg, #106a3d 0%, #1c8a52 50%, #92c940 100%);
	--tm-gradient-glow: radial-gradient(circle at 30% 20%, rgba(146, 201, 64, .25), transparent 60%), radial-gradient(circle at 80% 60%, rgba(16, 106, 61, .2), transparent 60%);
	--tm-shadow-soft: 0 4px 20px -4px rgba(16, 106, 61, .08);
	--tm-shadow-elegant: 0 20px 50px -20px rgba(16, 106, 61, .25);

	--tm-font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--tm-font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

	/* Bootstrap 5 variable overrides */
	--bs-body-font-family: var(--tm-font-body);
	--bs-body-bg: var(--tm-background);
	--bs-body-color: var(--tm-foreground);

	--bs-primary: var(--tm-primary);
	--bs-primary-rgb: var(--tm-primary-rgb);
	--bs-secondary: var(--tm-muted-foreground);
	--bs-secondary-rgb: 87, 117, 105;
	--bs-success: var(--tm-primary);
	--bs-success-rgb: var(--tm-primary-rgb);
	--bs-info: var(--tm-primary-glow);
	--bs-info-rgb: var(--tm-primary-glow-rgb);
	--bs-danger: var(--tm-destructive);
	--bs-danger-rgb: 239, 67, 67;
	--bs-light: var(--tm-secondary);
	--bs-light-rgb: 238, 246, 242;
	--bs-dark: var(--tm-foreground);
	--bs-dark-rgb: 15, 36, 27;

	--bs-border-color: var(--tm-border);
	--bs-border-radius: .75rem;
	--bs-border-radius-sm: .5rem;
	--bs-border-radius-lg: 1rem;
	--bs-border-radius-xl: 1.5rem;
	--bs-border-radius-xxl: 2rem;
	--bs-border-radius-2xl: 2rem;
	--bs-border-radius-pill: 50rem;

	--bs-link-color: var(--tm-primary);
	--bs-link-color-rgb: var(--tm-primary-rgb);
	--bs-link-hover-color: var(--tm-primary);
	--bs-link-hover-color-rgb: var(--tm-primary-rgb);

	--bs-emphasis-color: var(--tm-foreground);
	--bs-secondary-color: var(--tm-muted-foreground);
	--bs-secondary-bg: var(--tm-secondary);
	--bs-tertiary-bg: var(--tm-muted);
	--bs-tertiary-color: var(--tm-muted-foreground);

	--bs-btn-active-bg:150 20% 90%;
	--bs-btn-active-border-color:150 20% 90%;
	--bs-btn-outline-secondary-bg:150 30% 98%;
	--bs-btn-outline-secondary-border-color:150 20% 80%;
}

body {
	font-family: var(--tm-font-body);
	background-color: var(--tm-background);
	color: var(--tm-foreground);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--tm-font-heading);
	letter-spacing: -0.02em;
}

/* Bootstrap's display-* sizes are fixed across breakpoints; scale them down on mobile */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	line-height:1;
}
@media (max-width: 767.98px) {
	.display-1 { font-size: 3rem; }
	.display-2 { font-size: 2.75rem; }
	.display-3 { font-size: 2.5rem; }
	.display-4 { font-size: 2.25rem; }
	.display-5 { font-size: 2rem; }
	.display-6 { font-size: 1.75rem; }
}
.navbar .navbar-brand {
	height: 4rem;
}


/* Surface colors not covered by Bootstrap's default palette */
.bg-card { background-color: var(--tm-card); }
.bg-muted { background-color: var(--tm-muted); }
.bg-muted-40 { background-color: rgba(243, 247, 245, .55); }
.bg-secondary-subtle-tm { background-color: var(--tm-secondary); }

.text-muted-foreground { color: var(--tm-muted-foreground) !important; }
.text-primary-glow { color: var(--tm-primary-glow) !important; }

.border-subtle { border-color: var(--tm-border) !important; }

/* Brand gradients & shadows */
.gradient-hero { background: var(--tm-gradient-hero); }
.gradient-glow { background: var(--tm-gradient-glow); }
#cta .gradient-hero {
	border-radius:2.5rem;
}
.text-gradient {
	background: var(--tm-gradient-hero);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.shadow-soft { box-shadow: var(--tm-shadow-soft) !important; }
.shadow-elegant { box-shadow: var(--tm-shadow-elegant) !important; }

.hover-shadow-elegant { transition: box-shadow .5s ease, transform .5s ease; }
.hover-shadow-elegant:hover { box-shadow: var(--tm-shadow-elegant) !important; }

.hover-lift { transition: transform .3s ease; }
.hover-lift:hover { transform: translateY(-4px); }

.transition-all { transition: all .3s ease; }
.transition-colors { transition: color .2s ease, background-color .2s ease, border-color .2s ease; }

.rounded-4xl { border-radius: 1.75rem; }

/* Hover-reveal effects used on "how it works" step cards */
.step-card:hover .step-icon { transform: scale(1.1); }
.step-icon { transition: transform .3s ease; }

/* Hover-reveal effects used on feature cards (icon fills solid on hover) */
.feature-card:hover .feature-icon {
	background-color: var(--tm-primary);
	color: var(--tm-primary-foreground);
}
.feature-icon { transition: background-color .3s ease, color .3s ease; }

/* Card title tints primary on card hover (blog / related-article cards) */
.card-tm:hover .card-title-link { color: var(--tm-primary); }

/* Buttons */

/* Outline "secondary" action button (e.g. "Zobacz jak to działa") should tint
   accent-green on hover, not Bootstrap's default gray secondary color. */
.btn-outline-secondary {
	--bs-btn-color: var(--tm-foreground);
	--bs-btn-border-color: var(--tm-border);
	--bs-btn-hover-color: var(--tm-accent-foreground);
	--bs-btn-hover-bg: var(--tm-accent);
	--bs-btn-hover-border-color: var(--tm-accent);
	--bs-btn-active-color: var(--tm-accent-foreground);
	--bs-btn-active-bg: var(--tm-accent);
	--bs-btn-active-border-color: var(--tm-accent);
	background-color:hsl(var(--bs-btn-outline-secondary-bg));
}

.btn-gradient {
	background: var(--tm-gradient-hero);
	color: var(--tm-primary-foreground);
	border: none;
	box-shadow: var(--tm-shadow-soft);
	transition: box-shadow .3s ease, transform .3s ease;
}
.btn-gradient:hover,
.btn-gradient:focus {
	color: var(--tm-primary-foreground);
	box-shadow: var(--tm-shadow-elegant);
	transform: translateY(-2px);
}

/* Floating animation used on the hero app mockup */
@keyframes tm-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-12px); }
}
.animate-float { animation: tm-float 6s ease-in-out infinite; }

/* Header / navbar */
.navbar-blur {
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	background-color: rgba(248, 251, 250, .7);
}

.navbar .nav-link {
	color: var(--tm-muted-foreground);
	font-weight: 500;
}
.navbar .nav-link:hover,
.navbar .nav-link.active {
	color: var(--tm-foreground);
}

/* Blog / content cards */
.card-tm {
	background-color: var(--tm-card);
	border: 1px solid var(--tm-border);
	border-radius: 1.5rem;
}

.line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.telemedix-content :is(h1, h2, h3, h4) { font-family: var(--tm-font-heading); }
.telemedix-content p { color: var(--tm-muted-foreground); }

/* Offset for the fixed-top navbar */
.pt-navbar { padding-top: 4rem; }

/* Extended spacer step (Bootstrap's scale stops at 5 = 3rem) for large section padding */
.p-6 { padding: 4.5rem !important; }
.pt-6 { padding-top: 4.5rem !important; }
.pb-6 { padding-bottom: 4.5rem !important; }
.py-6 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
.px-6 { padding-left: 4.5rem !important; padding-right: 4.5rem !important; }
.m-6 { margin: 4.5rem !important; }
.mt-6 { margin-top: 4.5rem !important; }
.mb-6 { margin-bottom: 4.5rem !important; }
.g-6 { gap: 4.5rem !important; }
.gap-6 { gap: 4.5rem !important; }
@media (min-width: 768px) {
	.py-md-6 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
	.px-md-6 { padding-left: 4.5rem !important; padding-right: 4.5rem !important; }
	.pt-md-6 { padding-top: 4.5rem !important; }
	.pb-md-6 { padding-bottom: 4.5rem !important; }
	.mt-md-6 { margin-top: 4.5rem !important; }
	.mb-md-6 { margin-bottom: 4.5rem !important; }
	.g-md-6 { gap: 4.5rem !important; }
}

/* Ghost button on dark/gradient backgrounds (CTA section secondary action) */
.btn-ghost-white {
	border: 1px solid rgba(255, 255, 255, .4);
	color: #fff;
	background-color: transparent;
	transition: background-color .3s ease;
}
.btn-ghost-white:hover,
.btn-ghost-white:focus {
	background-color: rgba(255, 255, 255, .1);
	color: #fff;
}

/* Generic two-stop gradient background, colors supplied via --grad-from / --grad-to */
.bg-gradient-to-br {
	background-image: linear-gradient(135deg, var(--grad-from, var(--tm-primary)), var(--grad-to, var(--tm-primary-glow)));
}
.bg-gradient-to-br img,
.bg-gradient-to-br .wp-post-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.menu-item a {
	text-decoration:none;
}
.dropdown-menu.show {
	max-width:60px;
	min-width:60px;
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--tm-secondary-foreground);
  font-weight: bold;
  text-decoration: none;
  background-color: var(--bs-btn-active-border-color);
}