/* ==========================================================================
   MyShantigram - Glassmorphism enhancement layer (v2, stronger)
   Additive only. Safe to add/remove independently of main.css.
   ========================================================================== */

/* ---------- Sticky header: frosted glass, visible even near page top ---------- */
.site-header,
#masthead {
	background: rgba(255, 255, 255, 0.55) !important;
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 8px 32px rgba(20, 40, 55, 0.08);
}

/* ---------- Top bar: glass tint ---------- */
.ms-top-bar {
	background: rgba(31, 111, 174, 0.85) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* ---------- Logo mark: soft glow ---------- */
.ms-logo-mark {
	box-shadow: 0 4px 20px rgba(47, 143, 214, 0.5), 0 0 0 1px rgba(255,255,255,0.6) inset !important;
}

/* ---------- Hero: stronger glow + frosted search bar ---------- */
.ms-hero { position: relative; overflow: hidden; }
.ms-hero::before { filter: blur(70px) !important; opacity: 0.55 !important; }
.ms-hero::after { filter: blur(80px) !important; opacity: 0.45 !important; }

.ms-hero-search {
	background: rgba(255, 255, 255, 0.4) !important;
	backdrop-filter: blur(24px) saturate(200%);
	-webkit-backdrop-filter: blur(24px) saturate(200%);
	border: 1px solid rgba(255, 255, 255, 0.7) !important;
	box-shadow: 0 24px 64px rgba(20, 40, 55, 0.2), 0 0 0 1px rgba(255,255,255,0.4) inset !important;
}
.ms-hero-search-field {
	background: rgba(255, 255, 255, 0.4) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255,255,255,0.5);
}
.ms-hero-stat {
	background: rgba(255, 255, 255, 0.45) !important;
	backdrop-filter: blur(14px) saturate(180%);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	border-radius: 16px;
	padding: 12px 22px;
	border: 1px solid rgba(255,255,255,0.55) !important;
	box-shadow: 0 8px 24px rgba(20,40,55,0.08);
}

/* ---------- Cards: visible glass edge even at rest, stronger on hover ---------- */
.ms-category-card,
.ms-business-card,
.ms-child-page-card,
.ms-ttd-card,
.ms-event-card {
	background: rgba(255, 255, 255, 0.9) !important;
	backdrop-filter: blur(6px) saturate(140%);
	-webkit-backdrop-filter: blur(6px) saturate(140%);
	border: 1px solid rgba(255,255,255,0.7) !important;
	box-shadow: 0 4px 16px rgba(20,40,55,0.05) !important;
	transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease !important;
}
.ms-category-card:hover,
.ms-business-card:hover,
.ms-child-page-card:hover,
.ms-ttd-card:hover,
.ms-event-card:hover {
	background: rgba(255, 255, 255, 0.98) !important;
	backdrop-filter: blur(16px) saturate(180%);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	box-shadow: 0 28px 56px rgba(47, 143, 214, 0.22) !important;
	border-color: rgba(47, 143, 214, 0.4) !important;
	transform: translateY(-6px) !important;
}

/* ---------- Buttons: glow ---------- */
.ms-btn-primary { box-shadow: 0 10px 28px rgba(47, 143, 214, 0.4) !important; }
.ms-btn-primary:hover { box-shadow: 0 14px 36px rgba(47, 143, 214, 0.55) !important; }
.ms-btn-outline { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* ---------- Eyebrow pill: glass ---------- */
.ms-eyebrow {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(47, 143, 214, 0.18);
}

/* ---------- Sidebar cards: glass panel ---------- */
.ms-contact-card {
	background: rgba(247, 249, 251, 0.75) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,0.7) !important;
}

/* ---------- Fix: thin vertical seam lines beside the hero ----------
   Root cause: the glow blobs (::before/::after) sit partly outside the
   hero and get clipped by overflow:hidden mid-fade, leaving a visible
   edge where the blur is cut off. Fix: pull them further inward and
   reduce their blur radius so the fade completes fully within the
   hero's bounds - nothing left to create a seam when clipped. */
.ms-hero::before {
	width: 320px !important;
	height: 320px !important;
	top: -60px !important;
	right: 40px !important;
	filter: blur(50px) !important;
	opacity: 0.5 !important;
}
.ms-hero::after {
	width: 260px !important;
	height: 260px !important;
	bottom: -50px !important;
	left: 40px !important;
	filter: blur(55px) !important;
	opacity: 0.4 !important;
}

/* ---------- Full-bleed hero: breaks out of GeneratePress's contained
   width so the gradient background reaches the true screen edges, while
   .ms-container inside it stays centered and readable as before. Uses
   the viewport-width breakout technique, which works regardless of
   what's constraining the parent width. ---------- */
body { overflow-x: hidden; }
.ms-hero {
	width: 100vw !important;
	max-width: 100vw !important;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw !important;
	margin-right: -50vw !important;
}

/* ---------- Nav menu wrapper: blend into the glass header instead of
   showing as its own separate solid white box ---------- */
.main-navigation,
.main-navigation .inside-navigation {
	background: transparent !important;
}

/* ---------- Fallback for browsers without backdrop-filter ---------- */
@supports not (backdrop-filter: blur(1px)) {
	.site-header, #masthead { background: rgba(255,255,255,0.95) !important; }
	.ms-hero-search { background: rgba(255,255,255,0.92) !important; }
	.ms-category-card, .ms-business-card, .ms-child-page-card, .ms-ttd-card, .ms-event-card {
		background: rgba(255,255,255,0.98) !important;
	}
}

/* ==========================================================================
   Search bar redesign - clean, modern, single connected bar.
   Overrides the glassmorphism effect for this component specifically.
   ========================================================================== */
.ms-hero-search {
	display: flex !important;
	flex-direction: column !important;
	background: #ffffff !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: 1px solid rgba(20, 40, 55, 0.08) !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 20px rgba(20, 40, 55, 0.08) !important;
	padding: 6px !important;
	gap: 6px !important;
	max-width: 780px;
	margin: 0 auto;
}
@media (min-width: 700px) {
	.ms-hero-search {
		flex-direction: row !important;
		align-items: stretch !important;
		padding: 5px !important;
		gap: 0 !important;
	}
}

.ms-hero-search-field {
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 12px 16px !important;
	position: relative;
}

/* Widths: search input widest, category dropdown medium, button compact */
.ms-hero-search-keyword { flex: 3 1 auto !important; }
.ms-hero-search-category { flex: 1.3 1 auto !important; }

/* Subtle divider between segments, desktop only */
@media (min-width: 700px) {
	.ms-hero-search-field.ms-hero-search-keyword::after {
		content: '';
		position: absolute;
		right: 0;
		top: 22%;
		bottom: 22%;
		width: 1px;
		background: rgba(20, 40, 55, 0.1);
	}
}

.ms-hero-search-field input,
.ms-hero-search-field select {
	background: transparent !important;
}

.ms-hero-search-submit {
	flex: 0 0 auto !important;
	width: 100% !important;
	border-radius: 8px !important;
}
@media (min-width: 700px) {
	.ms-hero-search-submit {
		width: auto !important;
		padding: 0 30px !important;
		margin-left: 6px;
	}
}