/* ==========================================================================
   Sri Naga Sai Mandir — Modern UI layer (2026 redesign)
   Loads after Enfold's stylesheets and the legacy layout.css, so rules here
   win the cascade. A modern take on the temple branding: same saffron/gold/
   maroon identity, executed with contemporary typography, spacing, depth
   and motion.
   ========================================================================== */

:root {
	--sai-gold: #c09236;
	--sai-gold-dark: #a87b20;
	--sai-gold-soft: #e8d5a9;
	--sai-maroon: #94151c;
	--sai-plum: #541331;
	--sai-saffron: #cb6c23;
	--sai-cream: #faf7f0;
	--sai-ink: #2b2118;
	--sai-radius: 14px;
	--sai-radius-sm: 8px;
	--sai-shadow-sm: 0 2px 8px rgba(43, 33, 24, 0.08);
	--sai-shadow-md: 0 8px 28px rgba(43, 33, 24, 0.14);
	--sai-shadow-gold: 0 6px 20px rgba(192, 146, 54, 0.35);
	--sai-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   Base typography & rhythm
   -------------------------------------------------------------------------- */

#top {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

#top .avia_textblock,
#top .entry-content {
	line-height: 1.85;
	font-size: 15px;
	color: #3d332a;
}

#top h1, #top h2, #top h3, #top h4, #top h5, #top h6 {
	line-height: 1.3;
}


::selection { background: var(--sai-gold-soft); color: var(--sai-ink); }


/* Links */
#top .entry-content a:not(.avia-button),
#top .avia_textblock a:not(.avia-button) {
	color: var(--sai-maroon);
	text-decoration: none;
	border-bottom: 1px solid rgba(148, 21, 28, 0.25);
	transition: color 0.25s var(--sai-ease), border-color 0.25s var(--sai-ease);
}
#top .entry-content a:not(.avia-button):hover,
#top .avia_textblock a:not(.avia-button):hover {
	color: var(--sai-saffron);
	border-bottom-color: var(--sai-saffron);
}

/* --------------------------------------------------------------------------
   Header & navigation
   -------------------------------------------------------------------------- */

#top #header {
	box-shadow: var(--sai-shadow-sm);
}

#top #header_meta {
	background: linear-gradient(90deg, var(--sai-plum), var(--sai-maroon));
	border: none;
	box-shadow: none;
}
#top #header_meta .phone-info,
#top #header_meta .phone-info a {
	color: #f3e5c8;
	font-size: 12px;
	letter-spacing: 0.4px;
}

/* Main menu: refined type + animated gold underline.
   NOTE: no uppercase/wide letter-spacing here — this menu has many long
   items ("Temple Schedule & Festivals", ...) and widening them overflowed
   the right-aligned menu leftwards underneath the logo. Keep the authored
   case and a subtle spacing so the whole menu fits beside the logo. */
#top .main_menu .menu > li > a {
	font-family: 'montserrat-regular', 'Helvetica Neue', Arial, sans-serif;
	font-size: 13px;
	letter-spacing: 0.3px;
	transition: color 0.25s var(--sai-ease);
}
#top .main_menu .menu > li > a .avia-menu-text {
	position: relative;
}
#top .main_menu .menu > li > a .avia-menu-text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -6px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--sai-gold), var(--sai-saffron));
	transition: right 0.3s var(--sai-ease);
}
#top .main_menu .menu > li:hover > a .avia-menu-text::after,
#top .main_menu .menu > li.current-menu-item > a .avia-menu-text::after {
	right: 0;
}
#top .main_menu .menu > li:hover > a,
#top .main_menu .menu > li.current-menu-item > a {
	color: var(--sai-gold-dark);
}

/* Plain dropdowns (non-mega): soft panel with gold top accent */
#top #header #avia-menu ul.sub-menu {
	background: #fffdf8;
	border: 1px solid rgba(192, 146, 54, 0.25);
	border-top: 3px solid var(--sai-gold);
	border-radius: 0 0 var(--sai-radius-sm) var(--sai-radius-sm);
	box-shadow: var(--sai-shadow-md);
}

/* Mega menu: the OUTER .avia_mega_div is the single cohesive panel.
   Its rows (> .sub-menu, incl. .avia_mega_hr) and the per-column ULs are
   .sub-menu too, so without these resets each of them repeats the full
   panel chrome — gold bars around every column and a see-through seam
   between rows. Flatten everything inside the panel. */
#top #header #avia-menu .avia_mega_div {
	background: #fffdf8;
	border: 1px solid rgba(192, 146, 54, 0.25);
	border-top: 3px solid var(--sai-gold);
	border-radius: 0 0 var(--sai-radius-sm) var(--sai-radius-sm);
	box-shadow: var(--sai-shadow-md);
	overflow: hidden;
}
#top #header #avia-menu .avia_mega_div ul.sub-menu,
#top #header .avia_mega_div > .sub-menu,
#top #header .avia_mega_div > .sub-menu.avia_mega_hr {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}
/* subtle divider between stacked mega rows (3-id selector so it outweighs
   the flatten reset above) */
#top #header #avia-menu .avia_mega_div > ul.sub-menu.avia_mega_hr {
	border-top: 1px solid rgba(192, 146, 54, 0.22);
}

/* Menu links: flat text links (the theme-options dynamic CSS paints them
   with a solid gold background — neutralize it), gold tint on hover */
#top #header #avia-menu .avia_mega_div ul.sub-menu > li a,
#top #header #avia-menu ul.sub-menu li a {
	background: transparent;
	color: #4a3a26;
	font-size: 13px;
	transition: color 0.2s var(--sai-ease), background 0.2s var(--sai-ease), padding-left 0.2s var(--sai-ease);
	border-radius: 6px;
	border: none;
}
#top #header #avia-menu ul.sub-menu li a:hover,
#top #header #avia-menu .avia_mega_div ul.sub-menu > li a:hover,
#top #header #avia-menu ul.sub-menu li.current-menu-item > a {
	color: #fff;
	background: linear-gradient(135deg, var(--sai-gold), var(--sai-gold-dark));
	padding-left: 18px;
}
/* hide the little bullet notches for a cleaner panel */
#top #header .avia_mega_div .avia-bullet {
	display: none;
}
#top #header .mega_menu_title,
#top #header .mega_menu_title a {
	color: var(--sai-plum);
	font-family: 'lora-regular', Georgia, serif;
}
/* gold underline under each column title */
#top #header .avia_mega_div .mega_menu_title {
	border-bottom: 2px solid var(--sai-gold-soft);
	padding-bottom: 8px;
	margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

#top .avia-button,
#top input[type="submit"],
#top .button {
	background: linear-gradient(135deg, var(--sai-gold) 0%, var(--sai-gold-dark) 100%);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 13px 30px;
	font-family: 'montserrat-bold', 'Helvetica Neue', Arial, sans-serif;
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	box-shadow: var(--sai-shadow-sm);
	transition: transform 0.25s var(--sai-ease), box-shadow 0.25s var(--sai-ease), filter 0.25s var(--sai-ease);
}
#top .avia-button:hover,
#top input[type="submit"]:hover,
#top .button:hover {
	transform: translateY(-2px);
	box-shadow: var(--sai-shadow-gold);
	filter: brightness(1.06);
	color: #fff;
}
#top .avia-button:active,
#top input[type="submit"]:active {
	transform: translateY(0);
	box-shadow: var(--sai-shadow-sm);
}
/* Dark/maroon variants keep their own hue but gain the modern shape */
#top .avia-button.avia-color-dark_red,
#top .avia-button.avia-color-red {
	background: linear-gradient(135deg, var(--sai-maroon), var(--sai-plum));
}

/* Legacy ribbon buttons (homepage page-id-3329, festivals page-id-2251 and
   the .read-btn variants) were absolutely positioned 166px-wide flat ribbons
   with a triangular arrow tail (::after) and a floated ">" chevron span. Under
   the redesign the pill styling collided with all of that: text wrapped inside
   the 166px box and the old arrow poked out the side. Undo those legacy quirks
   so the pill behaves as a normal, self-contained button. #top wins specificity
   over the page-id rules. */
#top .avia-button-wrap .avia-button {
	position: relative;
	bottom: auto;
	left: auto;
	right: auto;
	top: auto;
	width: auto;
	display: inline-block;
	white-space: nowrap;
	margin-top: 8px;
}
#top .avia-button-wrap .avia-button:after,
#top .avia-button-wrap .avia-button::after {
	display: none;
	content: none;
	border: none;
}
#top .avia-button-wrap .avia-button span {
	float: none;
	display: inline;
	margin-left: 6px;
	font-weight: 700;
}

/* Homepage service cards: keep the row aligned.
   The legacy design equalises the white boxes via .service-txt
   { min-height:200px } and anchors each button to its card's bottom edge.
   The redesign's larger serif headings made card titles wrap (unequal box
   heights) and its static pill buttons landed at different baselines.
   Restore the compact single-line title size and re-anchor the pills to
   the column bottom so all buttons share one baseline, production-style. */
#top .av_textblock_section .service-txt h2,
#top .av_textblock_section .service-txt h3 {
	font-size: 21px;
	line-height: 1.35;
	margin-bottom: 8px;
}
/* uniform card image height so the columns (and thus the anchored buttons)
   line up regardless of each promo image's natural height */
#top .av_one_fourth .av_textblock_section .imags-pad img {
	width: 100%;
	height: 190px;
	object-fit: cover;
}
/* legacy min-height is 200px but the longest card's content runs ~212px;
   raise the shared minimum so every card box ends at the same height */
#top .av_one_fourth .av_textblock_section .service-txt {
	min-height: 215px;
}
/* the News & Events half-column is authored with zero margin and sat flush
   against the Online Service card; give the row breathing room (the row has
   ~36px of unused width, so 30px cannot cause a wrap) */
/* NOTE: Enfold puts id="top" ON the body element itself, so selectors like
   "body.page-id-3329 #top ..." match nothing — compound them instead. */
@media only screen and (min-width: 990px) {
	#top.page-id-3329 #wrap_all .flex_column.av_one_fourth + .flex_column.av_one_half {
		margin-left: 30px;
	}
}
/* (buttons stay in normal flow; the equalised card heights above are what
   keep them on one shared baseline) */

/* --------------------------------------------------------------------------
   Imagery & cards
   -------------------------------------------------------------------------- */

#top .avia-image-container img,
#top .avia_image {
	border-radius: var(--sai-radius);
	transition: transform 0.4s var(--sai-ease), box-shadow 0.4s var(--sai-ease);
}
#top .avia-image-container:hover img {
	transform: translateY(-4px);
	box-shadow: var(--sai-shadow-md);
}

/* Static pages whose content images are reference graphics (logos, notices,
   donation/booking banners) rather than clickable cards: disable the hover
   lift/zoom above. Scoped by the page-id body class and by the image WRAPPER
   (never a specific image ID), so replacing any image in the editor keeps it
   static permanently. To opt another page in, add its #top.page-id-NNNN
   prefix to both selector lists below.
   (The Live Darshan page is handled in live-video.css instead.) */
#top.page-id-3324 .avia-image-container img,
#top.page-id-3324 .avia_image,
#top.page-id-3324 .avia-gallery img {
	transition: none !important;
}
#top.page-id-3324 .avia-image-container:hover img,
#top.page-id-3324 .avia-image-container:focus img,
#top.page-id-3324 .avia-gallery img:hover {
	transform: none !important;
	box-shadow: none !important;
}

/* Columns that act as cards (image + text) */
#top .flex_column.av_one_third,
#top .flex_column.av_one_fourth,
#top .flex_column.av_one_half {
	transition: transform 0.35s var(--sai-ease);
}
#top .flex_column.av_one_third:hover,
#top .flex_column.av_one_fourth:hover {
	transform: translateY(-4px);
}

/* Content slider / news entries as soft cards */
#top .avia-content-slider .slide-entry {
	background: #fff;
	border-radius: var(--sai-radius);
	overflow: hidden;
	box-shadow: var(--sai-shadow-sm);
	transition: transform 0.3s var(--sai-ease), box-shadow 0.3s var(--sai-ease);
}
#top .avia-content-slider .slide-entry:hover {
	transform: translateY(-5px);
	box-shadow: var(--sai-shadow-md);
}
#top .avia-content-slider .slide-entry .slide-content {
	padding: 6px 16px 16px;
}
#top .avia-content-slider .slide-entry-title a {
	color: var(--sai-plum);
	transition: color 0.2s var(--sai-ease);
}
#top .avia-content-slider .slide-entry-title a:hover {
	color: var(--sai-gold-dark);
}

/* Gallery thumbnails */
#top .avia-gallery img,
#top .avia-gallery-big {
	border-radius: var(--sai-radius-sm);
	border: none;
	transition: transform 0.3s var(--sai-ease), box-shadow 0.3s var(--sai-ease);
}
#top .avia-gallery img:hover {
	transform: scale(1.03);
	box-shadow: var(--sai-shadow-md);
}

/* --------------------------------------------------------------------------
   Page title / breadcrumb bar
   -------------------------------------------------------------------------- */

#top .title_container {
	background:
		linear-gradient(rgba(84, 19, 49, 0.88), rgba(148, 21, 28, 0.82)),
		var(--sai-plum);
	border: none;
	padding: 26px 0;
}
#top .title_container .main-title,
#top .title_container .main-title a {
	color: #fff;
	font-family: 'lora-regular', Georgia, serif;
	letter-spacing: 0.5px;
}
#top .title_container .breadcrumb,
#top .title_container .breadcrumb a,
#top .title_container .breadcrumb .breadcrumb_last,
#top .title_container .breadcrumb .bbp-breadcrumb-sep {
	color: rgba(255, 253, 245, 0.75);
}
#top .title_container .breadcrumb a:hover { color: var(--sai-gold-soft); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

#top input[type="text"],
#top input[type="email"],
#top input[type="tel"],
#top input[type="url"],
#top input[type="password"],
#top input[type="search"],
#top input[type="number"],
#top select,
#top textarea {
	border: 1.5px solid #e2d8c4;
	border-radius: var(--sai-radius-sm);
	background: #fffdf8;
	padding: 12px 14px;
	color: var(--sai-ink);
	transition: border-color 0.2s var(--sai-ease), box-shadow 0.2s var(--sai-ease);
}
#top input:focus,
#top select:focus,
#top textarea:focus {
	outline: none;
	border-color: var(--sai-gold);
	box-shadow: 0 0 0 3px rgba(192, 146, 54, 0.18);
}

/* --------------------------------------------------------------------------
   Footer & socket
   -------------------------------------------------------------------------- */

#top #footer {
	background:
		linear-gradient(160deg, var(--sai-plum) 0%, #3d0e24 60%, #2e0a1b 100%);
	border-top: 4px solid var(--sai-gold);
	color: #d8c9b8;
}
#top #footer .widgettitle {
	color: var(--sai-gold-soft);
	font-family: 'lora-regular', Georgia, serif;
	font-size: 19px;
	letter-spacing: 0.5px;
	border: none;
}
#top #footer a {
	color: #cbb995;
	transition: color 0.2s var(--sai-ease), padding-left 0.2s var(--sai-ease);
}
#top #footer a:hover { color: #fff; }
#top #footer .widget_nav_menu li a:hover { padding-left: 6px; }
#top #footer li, #top #footer p { color: #d8c9b8; }

#top #socket {
	background: #230714;
	border: none;
	color: #a08c78;
}
#top #socket .copyright { font-size: 12px; letter-spacing: 0.4px; }
#top #socket a { color: var(--sai-gold-soft); }

/* Social icons */
#top .social_bookmarks li a {
	border-radius: 50%;
	transition: transform 0.25s var(--sai-ease), background 0.25s var(--sai-ease), color 0.25s var(--sai-ease);
}
#top .social_bookmarks li a:hover {
	transform: translateY(-3px) scale(1.08);
	background: var(--sai-gold) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   Widgets & sidebars
   -------------------------------------------------------------------------- */

#top .sidebar .widget {
	background: #fff;
	border: 1px solid rgba(192, 146, 54, 0.18);
	border-radius: var(--sai-radius);
	padding: 22px;
	box-shadow: var(--sai-shadow-sm);
}
#top .sidebar .widgettitle {
	color: var(--sai-plum);
	font-family: 'lora-regular', Georgia, serif;
	padding-bottom: 10px;
	margin-bottom: 14px;
	border-bottom: 2px solid var(--sai-gold-soft);
}

/* News widget entries */
#top .news-wrap .news-link {
	border-radius: var(--sai-radius-sm);
	transition: background 0.2s var(--sai-ease);
}
#top .news-wrap .news-link:hover { background: rgba(192, 146, 54, 0.08); }

/* --------------------------------------------------------------------------
   Utility elements
   -------------------------------------------------------------------------- */

/* Scroll-to-top: modern gold pill */
#top #scroll-top-link {
	background: linear-gradient(135deg, var(--sai-gold), var(--sai-saffron));
	border: none;
	border-radius: 50%;
	color: #fff;
	box-shadow: var(--sai-shadow-gold);
	opacity: 0.92;
	transition: transform 0.25s var(--sai-ease), box-shadow 0.25s var(--sai-ease);
}
#top #scroll-top-link:hover {
	transform: translateY(-3px);
	color: #fff;
	box-shadow: 0 10px 26px rgba(192, 146, 54, 0.5);
}

/* Separators */
#top .hr-default .hr-inner,
#top .hr .hr-inner {
	border-color: rgba(192, 146, 54, 0.35);
}

/* Tables (schedules, timings) */
#top .avia_textblock table {
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #e6dcc8;
	border-radius: var(--sai-radius-sm);
	overflow: hidden;
	box-shadow: var(--sai-shadow-sm);
}
#top .avia_textblock table th {
	background: linear-gradient(135deg, var(--sai-gold), var(--sai-gold-dark));
	color: #fff;
	border: none;
	font-family: 'montserrat-bold', Arial, sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
#top .avia_textblock table td { border-color: #f0e9da; }
#top .avia_textblock table tr:nth-child(even) td { background: #fbf8f1; }

/* Blockquotes: devotional pull-quote style */
#top blockquote {
	border-left: 4px solid var(--sai-gold);
	background: var(--sai-cream);
	border-radius: 0 var(--sai-radius-sm) var(--sai-radius-sm) 0;
	padding: 18px 22px;
	font-family: 'lora-italic', Georgia, serif;
	color: #5a4632;
}

/* --------------------------------------------------------------------------
   Mobile refinements
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1280px) {
	/*
	 * The header's theme-option background color is "transparent" (desktop
	 * header sits over the hero slider). Enfold 7's burger-overlay panel
	 * reuses that same --enfold-header-color-bg variable for its own
	 * background, so on mobile the slide-in menu panel inherited
	 * "transparent" too - menu text floated directly over the hero image
	 * with no panel behind it. Give the panel its own solid background,
	 * independent of the header color option.
	 */
	/*
	 * Menu items were inheriting the site's large heading font plus Enfold's
	 * default 15px/50px item padding and a JS-computed vertical-centering
	 * padding on #av-burger-menu-ul that scales with total item height -
	 * together these made the panel feel oversized with very tall rows.
	 * Shrink the type and padding so rows are compact and more items fit
	 * on screen without scrolling.
	 */
	#top .av-burger-overlay-scroll {
		width: 220px !important;
		background: linear-gradient(180deg, var(--sai-saffron), var(--sai-gold-dark)) !important;
	}
	#top .av-burger-overlay-bg {
		opacity: 0.75 !important;
	}
	#top #av-burger-menu-ul {
		padding: 8px 0 !important;
	}
	/*
	 * #av-burger-menu-ul li shares Enfold's heading-webfont selector group
	 * (h1-h6, .av-special-font, ...), so items were rendering at heading
	 * scale (~35px) instead of menu-sized text. Force a fixed menu size.
	 */
	#top #av-burger-menu-ul li a {
		color: #fff !important;
		font-size: 12px !important;
		padding: 2px 12px !important;
		line-height: 1.1em !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		border-radius: var(--sai-radius-sm);
		transition: background 0.2s var(--sai-ease), padding-left 0.2s var(--sai-ease);
	}
	#top #av-burger-menu-ul li li a {
		font-size: 11px !important;
	}
	#top #av-burger-menu-ul li a:hover,
	#top #av-burger-menu-ul li a:focus {
		background: rgba(148, 21, 28, 0.25) !important;
		padding-left: 16px !important;
	}
	#top #av-burger-menu-ul li a .avia-menu-subtext {
		font-size: 0.6em !important;
	}
	#top .av-hamburger-inner,
	#top .av-hamburger-inner::before,
	#top .av-hamburger-inner::after {
		background-color: var(--sai-gold) !important;
	}
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	#top *, #top *::before, #top *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

div .slideshow_caption h2 {
    font-family: "Open Sans", sans-serif;    
    font-size: 84px;
    font-weight: normal;
    line-height: 100px;
    margin: 330px auto 0;
    text-transform: none;
}

/*
Mobile Styles
================================================== */
/* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

@media only screen and (max-width: 1280px) {
   /* Add your Mobile Styles here */
	

div .slideshow_caption h2 {
                font-family: "Open Sans", sans-serif;
		margin: 0 auto;
		font-size: 44px;
		font-weight: normal;
		margin-top: 90px;
		text-transform :none;
	}


/* Mobile menu. */

#advanced_menu_toggle, #advanced_menu_hide {
    border: none!important;
}

#mobile-advanced {
background: rgb(192, 146, 54);

}
#mobile-advanced a{
    color: white;
}

#mobile-advanced a:hover, #mobile-advanced a:hover .avia-menu-text{
background: #A87B20 !important;

}
#mobile-advanced a:hover .avia-menu-text{
    color: white;
}
#mobile-advanced li a {
font-size: 20px !important;
}

#advanced_menu_hide {
    color: #ffffff;}

#header_meta {
    display: none;
}
.responsive .logo {
    top: 20px;
}
#top .av-submenu-container, .av-submenu-container a {
    background-color: #A87B20;
}
#top .av-subnav-menu li a {
    background-color: transparent;
    color: white;
}
#top .av-subnav-menu li a {
    background-color: transparent;
    color: white;
    font-size: 18px;
}
#top .av-submenu-pos-center {
    text-align: center;
}
#sub_menu1 {
    border: 0 !important;
}

.template-blog .post-meta-infos{
display: none!important;
}

.av-share-box {
display: none;
}

#scroll-top-link.avia_pop_class {
    opacity: 0.7;
    visibility: visible;
}
#scroll-top-link {
    border: 1px solid #cb6c23;
    background-color: #cb6c23;
}

#top.single-post .big-preview.single-big a,
#top.single-post .small-preview {
pointer-events: none;
cursor: default;
}

#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }
#wrap_all {
position: relative !important;
}
/* Mega menu by current site */
#top #header #avia-menu ul.sub-menu {background: #c09236;}
#top #header #mobile-advanced a, #mobile-advanced .mega_menu_title {color: white;}
#top #header #mobile-advanced a, #mobile-advanced .mega_menu_title {font-size: 20px;}
#mobile-advanced li > a:hover, .html_header_mobile_behavior #mobile-advanced span:hover, .html_header_mobile_behavior #mobile-advanced span:hover a {
    background-color: #a87b20;
}
}

/* --------------------------------------------------------------------------
   Mega-menu nested flyout direction fix
   Enfold's core CSS only opens nested submenus (3rd level+, e.g. "Sri Naga
   Sai Trust" > "Trust Service" > "Saibaba Vidyalayam") to the right when
   the .html_header_left class is present. This site's header uses
   .html_logo_left instead (a different option), so that correction never
   applied and #top .av-main-nav ul ul fell back to Enfold's default
   left:-207px - opening nested flyouts leftward, on top of their own
   parent column instead of beside it. Percentage-based so it's correct
   regardless of the parent column's actual width.

   Scoped to exclude .avia_mega_div: mega menus (e.g. "Home") use the same
   nested-ul markup for their column link-lists, which must stay in normal
   table-cell flow (Enfold resets them to position:relative/static) - the
   left:100% flyout behavior only belongs to plain (non-mega) dropdowns
   like "Sri Naga Sai Trust". Applying it inside a mega div was pulling
   each column's link list out of its cell and into the next column.
   -------------------------------------------------------------------------- */
#top .av-main-nav ul ul {
	left: 100% !important;
	right: auto !important;
	top: -1px !important;
}
#top .avia_mega_div ul ul {
	left: auto !important;
	right: auto !important;
	top: auto !important;
}

/* --------------------------------------------------------------------------
   Mobile header logo spacing
   The legacy block above already has ".responsive .logo{top:20px}", but
   Enfold's own mobile CSS sets ".responsive #top .logo{position:static}"
   at this same breakpoint - "top" has no effect on a statically positioned
   element, so the logo still sat flush against the header's top edge.
   Margin works regardless of position.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 989px) {
	#top .logo {
		margin-top: 15px !important;
	}
}

/* --------------------------------------------------------------------------
   News & Events ticker - mobile height
   The widget's height is set to a fixed 280px (tuned for the desktop
   scrolling ticker), but with only 1 currently-published news item this
   left a huge empty box below it on mobile's narrow single-column layout.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
	#top .sai-news-ticker {
		height: auto !important;
		max-height: 220px !important;
	}
}