/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* ============================================================
   HISTORA BRAND COLORS & TYPOGRAPHY
   ============================================================ */

:root {
	/* Brand Colors */
	--histora-green: #00ff8d;
	--histora-blue: #5299d0;
	--histora-purple: #9d4ee9;

	/* Color variations for different uses */
	--histora-green-light: rgba(0, 255, 141, 0.1);
	--histora-green-hover: #00e67d;
	--histora-blue-light: rgba(82, 153, 208, 0.1);
	--histora-blue-hover: #4287bb;
	--histora-purple-light: rgba(157, 78, 233, 0.1);
	--histora-purple-hover: #8a3fd4;

	/* Primary color mapping */
	--primary-color: var(--histora-blue);
	--secondary-color: var(--histora-green);
	--accent-color: var(--histora-purple);
}

/* ============================================================
   TYPOGRAPHY - SAIRA FONT FAMILY
   ============================================================ */

body,
h1, h2, h3, h4, h5, h6,
.heading-block h1, .heading-block h2, .heading-block h3, .heading-block h4,
.button,
.menu-link,
p, span, div,
input, textarea, select {
	font-family: 'Saira', sans-serif !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

/* Primary buttons */
.button,
.button-large {
	background-color: var(--histora-purple) !important;
	border-color: var(--histora-purple) !important;
	color: #ffffff !important;
}

.button:hover,
.button-large:hover {
	background-color: var(--histora-green) !important;
	border-color: var(--histora-green) !important;
	color: #000000 !important;
}

/* ============================================================
   LINKS
   ============================================================ */

a {
	color: var(--histora-blue);
}

a:hover {
	color: var(--histora-purple);
}

/* Language switcher */
.lang-switch-link:hover {
	color: var(--histora-green) !important;
}

/* ============================================================
   BADGES
   ============================================================ */

/* Primary badges */
.badge.bg-primary,
.bg-primary {
	background-color: var(--histora-blue-light) !important;
	color: var(--histora-blue) !important;
}

/* Success badges */
.badge.bg-success,
.bg-success {
	background-color: var(--histora-green-light) !important;
	color: #000000 !important;
}

/* Info badges */
.badge.bg-info {
	background-color: var(--histora-purple-light) !important;
	color: var(--histora-purple) !important;
}

/* ============================================================
   ICONS
   ============================================================ */

/* Icon colors */
.i-plain.color,
i.color {
	color: var(--histora-blue) !important;
}

/* Icon list colors */
.iconlist-color i,
.iconlist-color .bi-check-circle-fill {
	color: var(--histora-purple) !important;
}

/* ============================================================
   SECTIONS
   ============================================================ */

/* Waitlist Section - gradient with brand colors */
.waitlist-section {
	background: linear-gradient(135deg, var(--histora-purple) 0%, var(--histora-blue) 100%) !important;
}

/* Section headings */
.before-heading {
	color: var(--histora-blue) !important;
}

/* Features title - colored spans for "Dentistas" and "Pacientes" */
.heading-block h2 span {
	color: var(--histora-purple) !important;
	font-weight: 700;
}

/* Waitlist title - colored span - keep green as it's on dark background */
.waitlist-section .heading-block h2 span {
	color: var(--histora-green) !important;
	font-weight: 700;
}

/* ============================================================
   FORMS
   ============================================================ */

input:focus,
textarea:focus,
select:focus {
	border-color: var(--histora-blue) !important;
	outline: none !important;
	box-shadow: 0 0 0 0.2rem var(--histora-blue-light) !important;
}

/* ============================================================
   SLIDER ARROWS
   ============================================================ */

.slider-arrow-left,
.slider-arrow-right {
	background-color: var(--histora-purple) !important;
	color: #ffffff !important;
}

.slider-arrow-left:hover,
.slider-arrow-right:hover {
	background-color: var(--histora-green) !important;
	color: #000000 !important;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

/* Menu active/hover states */
.menu-item:hover > .menu-link,
.menu-item.current > .menu-link {
	color: var(--histora-blue) !important;
}

/* Mobile menu */
.primary-menu-trigger .cnvs-hamburger-inner,
.primary-menu-trigger .cnvs-hamburger-inner::before,
.primary-menu-trigger .cnvs-hamburger-inner::after {
	background-color: var(--histora-purple) !important;
}

/* ============================================================
   BORDERS & DIVIDERS
   ============================================================ */

.border-primary {
	border-color: var(--histora-blue) !important;
}

.border-success {
	border-color: var(--histora-green) !important;
}

/* ============================================================
   TEXT COLORS
   ============================================================ */

.text-primary {
	color: var(--histora-blue) !important;
}

.text-success {
	color: var(--histora-green) !important;
}

.text-info {
	color: var(--histora-purple) !important;
}

/* ============================================================
   BACKGROUND COLORS
   ============================================================ */

.bg-primary {
	background-color: var(--histora-blue) !important;
}

.bg-success {
	background-color: var(--histora-green) !important;
}

.bg-info {
	background-color: var(--histora-purple) !important;
}

/* ============================================================
   BLOG STYLES
   ============================================================ */

/* Blog category badges */
.entry-categories a {
	background-color: var(--histora-blue) !important;
	color: #ffffff !important;
}

.entry-categories a:hover {
	background-color: var(--histora-purple) !important;
}

/* Blog meta icons */
.entry-meta li i {
	color: var(--histora-blue) !important;
}

/* ============================================================
   CUSTOM ACCENTS
   ============================================================ */

/* Heading underlines */
.heading-block::after {
	background-color: var(--histora-green) !important;
}

/* Featured box hover */
.feature-box:hover {
	transform: translateY(-5px);
	transition: transform 0.3s ease;
}

/* Card hover effects */
.card:hover {
	box-shadow: 0 10px 30px rgba(157, 78, 233, 0.2) !important;
	transition: box-shadow 0.3s ease;
}