/* Divine Healing Guide — theme-only classes (dhg-*) that supplement the
   compiled Tailwind/shadcn CSS in main.css. */

:root {
	--dhg-bg: hsl(220 13% 4%);
	--dhg-fg: hsl(0 0% 95%);
	--dhg-primary: hsl(280 100% 70%);
	--dhg-primary-foreground: hsl(220 13% 4%);
	--dhg-accent: hsl(180 100% 70%);
	--dhg-card: hsl(220 13% 8%);
	--dhg-border: hsl(280 25% 25%);
}

html, body { background: var(--dhg-bg); color: var(--dhg-fg); }

.dhg-body { font-family: 'Inter', system-ui, sans-serif; }

/* Buttons */
.dhg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	font-weight: 600;
	font-size: 0.875rem;
	border-radius: 0.375rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.2s;
	text-decoration: none;
	line-height: 1;
}
.dhg-btn-primary { background: var(--dhg-primary); color: var(--dhg-primary-foreground); }
.dhg-btn-primary:hover { background: hsl(280 100% 60%); }
.dhg-btn-outline { background: transparent; color: var(--dhg-fg); border-color: var(--dhg-border); }
.dhg-btn-outline:hover { background: hsla(280, 100%, 70%, 0.1); color: var(--dhg-primary); }
.dhg-btn-lg { padding: 0.875rem 1.75rem; font-size: 1rem; }
.dhg-btn-block { width: 100%; }

/* Cards */
.dhg-card {
	background: hsla(220, 13%, 8%, 0.8);
	border: 1px solid hsla(280, 25%, 25%, 0.6);
	border-radius: 0.5rem;
	padding: 1.5rem;
	transition: all 0.3s;
}
.dhg-card-glow { box-shadow: 0 10px 30px -10px hsla(280, 100%, 70%, 0.4); }
.dhg-card-glow:hover { box-shadow: 0 0 40px hsla(280, 100%, 70%, 0.4); transform: translateY(-2px); }

/* ----- Nav ----- */
.dhg-nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	background: hsla(220, 13%, 4%, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid hsla(280, 100%, 70%, 0.2);
}
.dhg-nav-brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; }
.dhg-nav-logo { height: 2.5rem; width: 2.5rem; border-radius: 9999px; object-fit: cover; }
.dhg-nav-title { font-size: 1.25rem; font-weight: 700; display: none; }
@media (min-width: 768px) { .dhg-nav-title { display: block; } }

.dhg-nav-desktop { display: none; align-items: center; gap: 2rem; }
@media (min-width: 1024px) { .dhg-nav-desktop { display: flex; } }

.dhg-nav-link {
	color: hsla(0, 0%, 95%, 0.8);
	font-size: 0.875rem; font-weight: 500;
	background: none; border: none; cursor: pointer; padding: 0;
	display: inline-flex; align-items: center; gap: 0.25rem;
	text-decoration: none;
	transition: color 0.2s;
}
.dhg-nav-link:hover, .dhg-nav-link.dhg-active { color: var(--dhg-primary); }
.dhg-chev { font-size: 0.75rem; }

/* Dropdowns */
.dhg-dropdown { position: relative; }
.dhg-dropdown-menu {
	position: absolute; top: 100%; left: 0; margin-top: 0.5rem;
	background: hsla(220, 13%, 8%, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid hsla(280, 100%, 70%, 0.2);
	border-radius: 0.5rem;
	padding: 0.5rem;
	min-width: 280px;
	max-height: 60vh;
	overflow-y: auto;
	box-shadow: 0 20px 25px -5px rgba(0,0,0,0.5);
	display: none;
	z-index: 60;
}
.dhg-dropdown.dhg-open .dhg-dropdown-menu { display: block; }
.dhg-dropdown-menu--cities { min-width: 240px; }
.dhg-dropdown-item {
	display: flex; align-items: center; gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border-radius: 0.375rem;
	color: var(--dhg-fg);
	font-size: 0.875rem;
	text-decoration: none;
	transition: background 0.2s;
}
.dhg-dropdown-item:hover { background: hsla(180, 100%, 70%, 0.1); }
.dhg-dropdown-item--city { padding: 0.5rem 0.75rem; font-size: 0.875rem; }
.dhg-dropdown-item--all { border-bottom: 1px solid hsla(280, 25%, 25%, 0.4); margin-bottom: 0.25rem; padding-bottom: 0.75rem; }
.dhg-dropdown-allname { color: var(--dhg-primary); font-weight: 600; }
.dhg-dropdown-allbadge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 3rem; height: 3rem; border-radius: 0.5rem;
	color: #fff; font-weight: 700; font-size: 0.75rem;
}
.dhg-dropdown-thumb { width: 3rem; height: 3rem; border-radius: 0.5rem; object-fit: cover; }

/* Mobile menu */
.dhg-nav-mobile-toggle {
	display: flex; flex-direction: column; gap: 4px;
	background: none; border: none; cursor: pointer; padding: 0.5rem;
}
.dhg-hamburger { display: block; width: 1.5rem; height: 2px; background: var(--dhg-fg); transition: all 0.3s; }
@media (min-width: 1024px) { .dhg-nav-mobile-toggle { display: none; } }

.dhg-nav-mobile {
	display: none;
	padding: 1rem 0;
	background: var(--dhg-card);
	border-radius: 0.5rem;
	margin-top: 0.5rem;
	box-shadow: 0 10px 30px -10px hsla(280, 100%, 70%, 0.4);
}
.dhg-nav-mobile.dhg-open { display: block; }
.dhg-nav-mobile-link {
	display: block;
	padding: 0.625rem 1rem;
	color: hsla(0, 0%, 95%, 0.85);
	font-size: 0.9375rem;
	text-decoration: none;
	border-radius: 0.375rem;
	transition: all 0.2s;
}
.dhg-nav-mobile-link:hover { color: var(--dhg-primary); background: hsla(280, 100%, 70%, 0.08); }
.dhg-nav-mobile-section { padding: 0.5rem 1rem; }
.dhg-nav-mobile-heading { color: var(--dhg-primary); font-weight: 600; font-size: 0.875rem; margin-bottom: 0.5rem; }
.dhg-nav-mobile-scroll { max-height: 12rem; overflow-y: auto; }
.dhg-nav-mobile-cta { display: flex; margin: 0.75rem 1rem 0; }

/* ----- Sections / typography ----- */
.dhg-section { padding: 5rem 0; position: relative; overflow: hidden; }
.dhg-section-tight { padding: 4rem 0; }

.dhg-hero { padding-top: 8rem; padding-bottom: 5rem; position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.dhg-hero-bg { position: absolute; inset: 0; z-index: 0; }
.dhg-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.3; }
.dhg-hero-bg::after { content: ''; position: absolute; inset: 0; background: hsla(220, 13%, 4%, 0.6); }
.dhg-hero-content { position: relative; z-index: 10; }

.dhg-h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.1; margin-bottom: 1rem; }
@media (min-width: 640px) { .dhg-h1 { font-size: 3rem; } }
@media (min-width: 768px) { .dhg-h1 { font-size: 3.75rem; } }
@media (min-width: 1024px) { .dhg-h1 { font-size: 4.5rem; } }
.dhg-h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
@media (min-width: 768px) { .dhg-h2 { font-size: 3rem; } }
.dhg-h3 { font-size: 1.875rem; font-weight: 700; line-height: 1.3; margin-bottom: 1rem; }
.dhg-h4 { font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.5rem; }

.dhg-lead { font-size: 1.25rem; color: hsla(0, 0%, 95%, 0.85); line-height: 1.6; max-width: 48rem; margin: 0 auto; }
.dhg-text-center { text-align: center; }
.dhg-text-primary { color: var(--dhg-primary); }
.dhg-text-accent { color: var(--dhg-accent); }
.dhg-text-muted { color: hsla(0, 0%, 95%, 0.7); }
.dhg-text-foreground { color: hsla(0, 0%, 95%, 0.9); }

/* Hero form */
.dhg-form-card { max-width: 36rem; margin: 0 auto; padding: 2rem; background: hsla(220, 13%, 8%, 0.9); border-radius: 0.75rem; border: 1px solid hsla(280, 25%, 25%, 0.6); }
.dhg-form-card h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; text-align: center; }
.dhg-form-field { margin-bottom: 1.25rem; }
.dhg-form-field > label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--dhg-primary); margin-bottom: 0.5rem; }
.dhg-input, .dhg-select, .dhg-textarea {
	width: 100%;
	padding: 0.625rem 0.875rem;
	background: hsl(220, 13%, 12%);
	border: 1px solid hsla(280, 25%, 25%, 0.6);
	border-radius: 0.375rem;
	color: var(--dhg-fg);
	font-size: 0.9375rem;
	font-family: inherit;
}
.dhg-input:focus, .dhg-select:focus, .dhg-textarea:focus { outline: none; border-color: var(--dhg-primary); box-shadow: 0 0 0 2px hsla(280, 100%, 70%, 0.2); }
.dhg-textarea { min-height: 8rem; resize: vertical; }

/* Card grids */
.dhg-grid { display: grid; gap: 2rem; }
.dhg-grid-2 { grid-template-columns: 1fr; }
.dhg-grid-3 { grid-template-columns: 1fr; }
.dhg-grid-4 { grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .dhg-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .dhg-grid-2 { grid-template-columns: 1fr 1fr; } .dhg-grid-3 { grid-template-columns: 1fr 1fr; } .dhg-grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .dhg-grid-3 { grid-template-columns: 1fr 1fr 1fr; } }

.dhg-grid-5 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .dhg-grid-5 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .dhg-grid-5 { grid-template-columns: repeat(5, 1fr); } }

.dhg-icon-wrap { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 9999px; background: hsla(280, 100%, 70%, 0.2); color: var(--dhg-primary); margin: 0 auto 1rem; }
.dhg-icon-wrap svg { width: 2rem; height: 2rem; }
.dhg-icon { display: inline-block; vertical-align: middle; }

/* About section */
.dhg-stat { text-align: center; padding: 1rem; background: hsla(280, 100%, 70%, 0.1); border-radius: 0.5rem; }
.dhg-stat-number { font-size: 1.875rem; font-weight: 700; color: var(--dhg-primary); }
.dhg-stat-label { font-size: 0.875rem; color: var(--dhg-fg); }

/* Footer */
.dhg-footer { background: hsla(220, 13%, 8%, 0.6); border-top: 1px solid hsla(280, 100%, 70%, 0.2); padding: 4rem 0; }
.dhg-footer-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 768px) { .dhg-footer-grid { grid-template-columns: 1fr 1fr 1fr; } }
.dhg-footer-col > * + * { margin-top: 1.25rem; }
.dhg-footer-brand { display: flex; align-items: center; gap: 1rem; }
.dhg-footer-logo { width: 4rem; height: 4rem; border-radius: 9999px; object-fit: cover; }
.dhg-footer-brand-title { font-size: 1.25rem; font-weight: 700; color: var(--dhg-primary); }
.dhg-footer-text { color: hsla(0, 0%, 95%, 0.7); line-height: 1.6; }
.dhg-footer-badges { display: flex; gap: 1rem; }
.dhg-footer-badge { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: hsla(280, 100%, 70%, 0.2); color: var(--dhg-primary); font-weight: 700; }
.dhg-footer-heading { font-size: 1.25rem; font-weight: 700; color: var(--dhg-primary); margin-bottom: 1.25rem; }
.dhg-footer-cities { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.5rem; }
.dhg-footer-citylink { color: hsla(0, 0%, 95%, 0.8); font-size: 0.875rem; text-decoration: none; padding: 0.25rem 0; transition: color 0.2s; }
.dhg-footer-citylink:hover { color: var(--dhg-primary); }
.dhg-footer-offer { background: hsla(280, 100%, 70%, 0.1); border: 1px solid hsla(280, 100%, 70%, 0.3); padding: 1rem; border-radius: 0.5rem; font-size: 0.875rem; color: hsla(0, 0%, 95%, 0.8); }
.dhg-footer-offer strong { color: var(--dhg-primary); }
.dhg-footer-contact > div { margin-bottom: 0.75rem; }
.dhg-footer-contact h4 { font-weight: 600; color: var(--dhg-primary); font-size: 0.9375rem; margin-bottom: 0.25rem; }
.dhg-footer-contact p { color: hsla(0, 0%, 95%, 0.8); font-size: 0.875rem; line-height: 1.5; }
.dhg-footer-map { overflow: hidden; border-radius: 0.5rem; margin-top: 0.5rem; }
.dhg-footer-bottom { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid hsla(280, 100%, 70%, 0.2); text-align: center; }
.dhg-footer-bottom p { font-size: 0.875rem; color: hsla(0, 0%, 95%, 0.6); margin-bottom: 0.5rem; }
.dhg-footer-tagline { color: var(--dhg-primary) !important; font-style: italic; }

/* Floating buttons */
.dhg-floating-buttons { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 0.75rem; }
.dhg-floating-actions { display: flex; flex-direction: column; gap: 0.75rem; opacity: 0; transform: translateY(0.5rem); pointer-events: none; transition: all 0.4s; }
.dhg-floating-buttons.dhg-open .dhg-floating-actions { opacity: 1; transform: translateY(0); pointer-events: auto; }
.dhg-fab {
	display: inline-flex; align-items: center; justify-content: center;
	width: 3.5rem; height: 3.5rem;
	border-radius: 9999px;
	border: none; cursor: pointer;
	box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3);
	transition: transform 0.2s, box-shadow 0.2s;
	color: #fff;
	text-decoration: none;
}
.dhg-fab:hover { transform: scale(1.08); }
.dhg-fab-whatsapp { background: #22c55e; }
.dhg-fab-whatsapp:hover { background: #16a34a; }
.dhg-fab-call { background: #3b82f6; }
.dhg-fab-call:hover { background: #2563eb; }
.dhg-fab-toggle {
	width: 4rem; height: 4rem;
	background: linear-gradient(135deg, hsl(0 100% 70%), hsl(60 100% 70%), hsl(120 100% 70%), hsl(240 100% 70%), hsl(320 100% 70%));
	color: var(--dhg-bg);
}
.dhg-floating-buttons.dhg-open .dhg-fab-toggle { transform: rotate(45deg); }
.dhg-fab-help-content { display: flex; flex-direction: column; align-items: center; gap: 0.125rem; line-height: 1; }
.dhg-fab-help-content svg { width: 1.25rem; height: 1.25rem; }
.dhg-fab-help { font-size: 0.625rem; font-weight: 700; }

/* Contact form layout */
.dhg-contact-grid { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .dhg-contact-grid { grid-template-columns: 1fr 1fr; } }

/* Pages — generic container spacing */
.dhg-pagewrap > main { padding-top: 4rem; }
.dhg-prose p { margin-bottom: 1rem; line-height: 1.7; }

/* Misc */
.dhg-chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: hsla(280, 100%, 70%, 0.1); border-radius: 9999px; font-size: 0.875rem; color: var(--dhg-fg); }
.dhg-chip svg { width: 1rem; height: 1rem; color: var(--dhg-primary); }

.dhg-bullets { list-style: none; padding: 0; margin: 1rem 0; }
.dhg-bullets li { padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; color: hsla(0, 0%, 95%, 0.85); }
.dhg-bullets li::before { content: '•'; position: absolute; left: 0; color: var(--dhg-primary); font-weight: 700; }

.dhg-divider-section { padding: 4rem 0; background: hsla(220, 13%, 8%, 0.4); }

/* Service detail */
.dhg-service-hero { position: relative; overflow: hidden; padding: 5rem 0; }
.dhg-service-hero-bg { position: absolute; inset: 0; z-index: 0; }
.dhg-service-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.2; }
.dhg-service-hero-content { position: relative; z-index: 1; text-align: center; max-width: 56rem; margin: 0 auto; }

/* container helper (in case main.css's container utility doesn't match) */
.dhg-container { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }

/* Service cards with hero images on homepage */
.dhg-service-card .dhg-service-card-img img { transition: transform 0.4s ease; }
.dhg-service-card:hover .dhg-service-card-img img { transform: scale(1.05); }

/* Service rows on /services/ listing — image left, content right on desktop */
.dhg-service-row-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
	.dhg-service-row-grid { grid-template-columns: 40% 60%; }
	.dhg-service-row-img { min-height: 100% !important; }
}