/*
Theme Name:   JBIT Child
Theme URI:    https://jbitdoon.edu.in/
Description:  Child theme of Astra for JB Institute of Technology, styled in the JBIT logo colours (red, royal blue, navy, sky blue, gold). Pages are still edited in Elementor; the same colours and fonts are saved in Elementor > Site Settings > Global Colors / Global Fonts. Site-wide style tweaks go in this file.
Author:       JBIT Web Team
Template:     astra
Version:      2.0.0
Text Domain:  jbit-child
*/

/* =====================================================================
   1. Brand tokens: taken from the JBIT logo
   ===================================================================== */
:root {
	--jbit-red: #ed3136;        /* "JBIT" wordmark */
	--jbit-red-dark: #c4252b;
	--jbit-blue: #4163ac;       /* "NAAC GRADE" */
	--jbit-navy: #1d3461;
	--jbit-deep: #142647;
	--jbit-sky: #0f7cb6;        /* emblem */
	--jbit-sky-bright: #05a1e0;
	--jbit-gold: #fcb001;       /* emblem flame */
	--jbit-ink: #1f2a37;
	--jbit-text: #4a5565;
	--jbit-tint: #eef3fa;
	--jbit-line: #dce4ef;
	--jbit-radius: 12px;
	--jbit-shadow: 0 8px 28px rgba(20, 38, 71, 0.10);
	--jbit-font-head: "Poppins", "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--jbit-font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* =====================================================================
   2. Base: readable text everywhere
   ===================================================================== */
html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

html,
body {
	overflow-x: clip;
}

body {
	color: var(--jbit-text);
	font-family: var(--jbit-font-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img {
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--jbit-navy);
	color: #fff;
}

/* Many inner pages used Georgia for body copy; one clean sans-serif reads better on every screen. */
body .elementor-widget-text-editor,
body .elementor-widget-text-editor p,
body .elementor-widget-text-editor li,
body .elementor-widget-text-editor td,
body .elementor-widget-text-editor th,
body .elementor-widget-text-editor span,
body .elementor-widget-text-editor a,
body .elementor-icon-list-text,
body .elementor-tab-content,
body .elementor-toggle .elementor-tab-content {
	font-family: var(--jbit-font-body) !important;
}

body .elementor-widget-text-editor p,
body .elementor-widget-text-editor li {
	line-height: 1.75;
}

/* Headings in Poppins, one family across the site */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .elementor-heading-title,
body .elementor-tab-title,
body .elementor-toggle-title,
body .elementor-image-box-title,
body .elementor-icon-box-title,
body .elementor-counter-title {
	font-family: var(--jbit-font-head) !important;
	letter-spacing: -0.01em;
}

/* Justified text leaves big gaps on phones */
@media (max-width: 1024px) {
	body .elementor-widget-text-editor,
	body .elementor-widget-text-editor p {
		text-align: left !important;
	}
}

a {
	transition: color 0.2s ease, background-color 0.2s ease;
}

/* Visible focus ring for keyboard users only */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.elementor-button:focus-visible {
	outline: 3px solid var(--jbit-gold);
	outline-offset: 2px;
}

/* =====================================================================
   3. Header: logo bar + navy menu bar with a red underline
   ===================================================================== */
/* The header is a free UAE (Header Footer Elementor) template rendered inside #masthead,
   so it no longer needs Elementor Pro. The [data-elementor-type="header"] selectors keep
   working if a genuine Pro theme-builder header is ever used instead. */
@media (min-width: 1025px) {
	body #masthead,
	body [data-elementor-type="header"] {
		position: sticky;
		top: 0;
		z-index: 99999 !important;
		box-shadow: 0 2px 14px rgba(20, 38, 71, 0.12);
	}

	body.admin-bar #masthead,
	body.admin-bar [data-elementor-type="header"] {
		top: 32px;
	}
}

/* Keep the header (and its phone menu) above sliders and other page content.
   Desktop already gets this from the sticky rule above. */
@media (max-width: 1024px) {
	body #masthead {
		position: relative;
		z-index: 99999 !important;
	}
}

body .elementor-element-f019ab2 {
	background: #fff;
	border-bottom: 1px solid var(--jbit-line);
}

/* Academic portal / Apply now / ERP portal */
body .elementor-element-73f0cf33 a {
	display: inline-block;
	padding: 7px 14px !important;
	border-radius: 999px !important;
	border: 1.5px solid var(--jbit-navy);
	color: var(--jbit-navy) !important;
	background: #fff !important;
	font-family: var(--jbit-font-head) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	line-height: 1.2;
}

body .elementor-element-73f0cf33 a:hover {
	background: var(--jbit-navy) !important;
	color: #fff !important;
}

body .elementor-element-73f0cf33 a[href*="admission"] {
	background: var(--jbit-red) !important;
	border-color: var(--jbit-red);
	color: #fff !important;
	box-shadow: 0 4px 12px rgba(237, 49, 54, 0.35);
}

body .elementor-element-73f0cf33 a[href*="admission"]:hover {
	background: var(--jbit-red-dark) !important;
	border-color: var(--jbit-red-dark);
}

body .elementor-element-73f0cf33 span {
	display: none;
}

/* Menu bar */
body .elementor-element-5c5d418,
body .elementor-element-5c5d418 > .elementor-background-overlay {
	background: var(--jbit-navy) !important;
}

body .elementor-element-5c5d418 {
	border-bottom: 3px solid var(--jbit-red);
}

/* ---- UAE navigation menu (free) ---- */
body .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li > a.hfe-menu-item,
body .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li > .hfe-has-submenu-container > a.hfe-menu-item {
	color: #fff !important;
	background: transparent !important;
	font-family: var(--jbit-font-head);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 14px 12px !important;
	position: relative;
}

body .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li > a.hfe-menu-item::after,
body .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li > .hfe-has-submenu-container > a.hfe-menu-item::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 2px;
	background: var(--jbit-gold);
	transform: scaleX(0);
	transition: transform 0.2s ease;
}

body .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li:hover > a.hfe-menu-item::after,
body .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li:hover > .hfe-has-submenu-container > a.hfe-menu-item::after,
body .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.current-menu-item > a.hfe-menu-item::after,
body .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li.current-menu-ancestor > .hfe-has-submenu-container > a.hfe-menu-item::after {
	transform: scaleX(1);
}

body .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li .sub-arrow,
body .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li .sub-arrow i {
	color: #fff !important;
	fill: #fff !important;
}

body .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li .sub-arrow svg {
	fill: #fff !important;
}

body .hfe-nav-menu__layout-horizontal .sub-menu {
	background: #fff !important;
	border-radius: 10px;
	border-top: 3px solid var(--jbit-red);
	box-shadow: var(--jbit-shadow);
	padding: 6px 0;
	min-width: 240px;
	width: auto !important;
}

body .hfe-nav-menu__layout-horizontal .sub-menu li.menu-item {
	border-bottom: 0 !important;
}

body .hfe-nav-menu__layout-horizontal .sub-menu a.hfe-sub-menu-item {
	color: var(--jbit-navy) !important;
	background: transparent !important;
	font-size: 14px;
	font-weight: 500;
	padding: 10px 18px !important;
	border-left: 3px solid transparent;
}

body .hfe-nav-menu__layout-horizontal .sub-menu a.hfe-sub-menu-item:hover,
body .hfe-nav-menu__layout-horizontal .sub-menu .current-menu-item > a.hfe-sub-menu-item {
	background: var(--jbit-tint) !important;
	color: var(--jbit-red) !important;
	border-left-color: var(--jbit-red);
}

body .hfe-nav-menu__layout-horizontal .sub-menu .sub-arrow,
body .hfe-nav-menu__layout-horizontal .sub-menu .sub-arrow i {
	color: var(--jbit-navy) !important;
}

/* Phone / tablet: hamburger + dark drop-down */
body .hfe-nav-menu__toggle .hfe-nav-menu-icon,
body .hfe-nav-menu__toggle .hfe-nav-menu-icon i {
	color: #fff !important;
}

body .hfe-nav-menu__toggle .hfe-nav-menu-icon svg {
	fill: #fff !important;
}

body .hfe-nav-menu__toggle {
	background: rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	padding: 6px 10px;
}

body nav.hfe-dropdown,
body nav.hfe-dropdown-expandible {
	background: var(--jbit-deep) !important;
	border-radius: 0 0 12px 12px;
}

body nav.hfe-dropdown li a.hfe-menu-item,
body nav.hfe-dropdown li a.hfe-sub-menu-item,
body nav.hfe-dropdown-expandible li a.hfe-menu-item,
body nav.hfe-dropdown-expandible li a.hfe-sub-menu-item {
	color: #fff !important;
	background: transparent !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-family: var(--jbit-font-body);
}

body nav.hfe-dropdown li a.hfe-menu-item:hover,
body nav.hfe-dropdown li a.hfe-sub-menu-item:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	color: var(--jbit-gold) !important;
}

body nav.hfe-dropdown .sub-menu,
body nav.hfe-dropdown-expandible .sub-menu {
	background: rgba(0, 0, 0, 0.18) !important;
	border-top: 0;
	box-shadow: none;
}

body nav.hfe-dropdown .sub-arrow,
body nav.hfe-dropdown .sub-arrow i {
	color: #fff !important;
}

body .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item {
	color: #fff !important;
	font-family: var(--jbit-font-head);
	font-weight: 500 !important;
	letter-spacing: 0.01em;
	border-radius: 6px;
	position: relative;
}

body .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 4px;
	height: 2px;
	background: var(--jbit-gold);
	transform: scaleX(0);
	transition: transform 0.2s ease;
}

body .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item:hover::after,
body .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item-active::after,
body .elementor-nav-menu--main > .elementor-nav-menu > li.current-menu-ancestor > a.elementor-item::after {
	transform: scaleX(1);
}

/* Dropdowns: white cards, navy text, red marker on hover */
body .elementor-nav-menu--main ul.sub-menu,
body ul.sub-menu {
	background-color: #fff !important;
	border-radius: 10px;
	box-shadow: var(--jbit-shadow);
	border-top: 3px solid var(--jbit-red);
	padding: 6px 0;
	min-width: 230px !important;
}

body .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item {
	color: var(--jbit-navy) !important;
	background: transparent !important;
	font-weight: 500;
	font-size: 14px !important;
	border-left: 3px solid transparent !important;
	border-bottom: 0 !important;
	padding: 10px 18px !important;
}

body .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item:hover,
body .elementor-nav-menu--main ul.sub-menu a.elementor-sub-item.elementor-item-active {
	background: var(--jbit-tint) !important;
	color: var(--jbit-red) !important;
	border-left-color: var(--jbit-red) !important;
}

/* Phone / tablet menu (hamburger) */
body .elementor-menu-toggle {
	background: rgba(255, 255, 255, 0.12) !important;
	color: #fff !important;
	border-radius: 8px;
}

body .elementor-nav-menu--dropdown {
	background: var(--jbit-deep) !important;
	border-radius: 0 0 12px 12px;
}

body .elementor-nav-menu--dropdown a,
body .elementor-nav-menu--dropdown a.elementor-sub-item {
	color: #fff !important;
	background: transparent !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-left: 0 !important;
	font-family: var(--jbit-font-body);
}

body .elementor-nav-menu--dropdown a:hover,
body .elementor-nav-menu--dropdown a.elementor-item-active {
	background: rgba(255, 255, 255, 0.08) !important;
	color: var(--jbit-gold) !important;
}

body .elementor-nav-menu--dropdown ul.sub-menu {
	background: rgba(0, 0, 0, 0.18) !important;
	box-shadow: none;
	border-top: 0;
	border-radius: 0;
}

/* =====================================================================
   4. Buttons and cards
   ===================================================================== */
body .elementor-button,
body .ast-button,
body button,
body input[type="submit"] {
	border-radius: 8px;
	font-family: var(--jbit-font-head);
	font-weight: 600;
	letter-spacing: 0.02em;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body .elementor-button:hover,
body .ast-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(20, 38, 71, 0.18);
}

body .elementor-widget-image-box .elementor-image-box-wrapper,
body .elementor-widget-icon-box .elementor-icon-box-wrapper {
	transition: transform 0.25s ease;
}

body .elementor-widget-image-box:hover .elementor-image-box-wrapper,
body .elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
	transform: translateY(-3px);
}

body .elementor-widget-image img,
body .elementor-image-box-img img {
	border-radius: 6px;
}

/* Tabs, accordions, toggles */
body .elementor-tab-title {
	font-weight: 600;
}

body .elementor-toggle .elementor-tab-title,
body .elementor-accordion .elementor-tab-title {
	background: var(--jbit-navy) !important;
	color: #fff !important;
	border-radius: 8px;
	margin-bottom: 6px;
}

body .elementor-toggle .elementor-tab-title a,
body .elementor-accordion .elementor-tab-title a,
body .elementor-toggle .elementor-tab-title .elementor-toggle-icon,
body .elementor-accordion .elementor-tab-title .elementor-accordion-icon {
	color: #fff !important;
}

body .elementor-toggle .elementor-tab-title.elementor-active,
body .elementor-accordion .elementor-tab-title.elementor-active {
	background: var(--jbit-red) !important;
}

/* =====================================================================
   5. Inner pages: side menus built as link tables become tidy lists
   ===================================================================== */
body .elementor-widget-text-editor table a[href] {
	text-decoration: none !important;
}

body .elementor-widget-wrap .elementor-widget-text-editor td > a[href]:only-child {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	color: #fff;
	font-weight: 500;
	transition: background-color 0.2s ease, padding-left 0.2s ease;
}

body .elementor-widget-wrap .elementor-widget-text-editor td > a[href]:only-child span {
	text-decoration: none !important;
	color: inherit !important;
}

body .elementor-widget-wrap .elementor-widget-text-editor td > a[href]:only-child strong {
	font-weight: 600;
}

body .elementor-widget-wrap .elementor-widget-text-editor td:has(> a[href]:only-child) {
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
	padding: 2px 0 !important;
}

body .elementor-widget-wrap .elementor-widget-text-editor td > a[href]:only-child:hover {
	background: rgba(255, 255, 255, 0.14);
	padding-left: 18px;
	color: var(--jbit-gold) !important;
}

/* Content links */
body .elementor-widget-text-editor p a[href],
body .elementor-widget-text-editor li a[href] {
	color: var(--jbit-sky);
	font-weight: 600;
	text-underline-offset: 3px;
}

body .elementor-widget-text-editor p a[href]:hover,
body .elementor-widget-text-editor li a[href]:hover {
	color: var(--jbit-red);
}

/* =====================================================================
   6. Tables (TablePress and plain tables)
   ===================================================================== */
.jbit-table-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1.5em;
	border-radius: var(--jbit-radius);
	box-shadow: 0 1px 4px rgba(20, 38, 71, 0.12);
}

.jbit-table-scroll .tablepress {
	margin-bottom: 0;
	border-collapse: collapse;
}

body .tablepress thead th,
body .tablepress tfoot th {
	background-color: var(--jbit-navy) !important;
	color: #fff !important;
	font-family: var(--jbit-font-head);
	font-weight: 600;
	border-color: var(--jbit-deep);
}

body .tablepress thead .dt-orderable-asc:hover,
body .tablepress thead .dt-orderable-desc:hover,
body .tablepress thead .sorting:hover {
	background-color: var(--jbit-deep) !important;
}

body .tablepress tbody td {
	border-top: 1px solid var(--jbit-line);
	vertical-align: middle;
}

body .tablepress tbody tr:nth-child(odd) td {
	background-color: #fff;
}

body .tablepress tbody tr:nth-child(even) td {
	background-color: #f5f8fc;
}

body .tablepress tbody tr:hover td {
	background-color: var(--jbit-tint);
}

body .tablepress a {
	color: var(--jbit-sky);
	font-weight: 600;
}

@media (max-width: 767px) {
	.jbit-table-scroll .tablepress th,
	.jbit-table-scroll .tablepress td {
		white-space: nowrap;
		font-size: 14px;
		padding: 8px 10px;
	}
}

/* =====================================================================
   7. Forms
   ===================================================================== */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="number"],
body input[type="url"],
body select,
body textarea,
body .elementor-field-group .elementor-field {
	border-radius: 8px !important;
	border: 1px solid #c9d4e3 !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body input:focus,
body select:focus,
body textarea:focus,
body .elementor-field-group .elementor-field:focus {
	border-color: var(--jbit-sky) !important;
	box-shadow: 0 0 0 3px rgba(15, 124, 182, 0.18) !important;
	outline: none;
}

/* =====================================================================
   8. Footer: deep navy with gold headings
   ===================================================================== */
body .hfe-before-footer-wrap [data-elementor-type="wp-post"] > .elementor-section,
body .hfe-before-footer-wrap [data-elementor-type="wp-post"] > .e-con {
	background-color: var(--jbit-deep) !important;
	border-top: 4px solid var(--jbit-red);
}

/* Heading shrinks to its text so the gold bar sits under it whatever the alignment */
body .hfe-before-footer-wrap .elementor-heading-title {
	display: inline-block;
	color: #fff !important;
	font-size: 22px !important;
	font-style: normal !important;
	position: relative;
	padding-bottom: 10px;
}

body .hfe-before-footer-wrap .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 44px;
	height: 3px;
	border-radius: 3px;
	background: var(--jbit-gold);
	transform: translateX(-50%);
}

body .hfe-before-footer-wrap a {
	color: rgba(255, 255, 255, 0.85) !important;
	font-family: var(--jbit-font-body) !important;
	font-style: normal !important;
	font-weight: 500 !important;
}

body .hfe-before-footer-wrap a:hover {
	color: var(--jbit-gold) !important;
}

/* Colour logo on a dark footer needs a white plate to stay readable */
body .hfe-before-footer-wrap .elementor-widget-image img {
	background: #fff;
	padding: 8px 14px;
	border-radius: 10px;
}

body .hfe-before-footer-wrap .elementor-social-icon {
	background: rgba(255, 255, 255, 0.12) !important;
	border-radius: 50%;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

body .hfe-before-footer-wrap .elementor-social-icon:hover {
	background: var(--jbit-red) !important;
	transform: translateY(-2px);
}

body #colophon .site-below-footer-wrap,
body #colophon .site-primary-footer-wrap,
body #colophon .ast-builder-grid-row-container,
body #colophon .ast-small-footer {
	background: #0d1b33 !important;
	color: rgba(255, 255, 255, 0.7) !important;
}

body #colophon a {
	color: #fff !important;
}

/* =====================================================================
   9. Pieces that used to need Elementor Pro
   ===================================================================== */
/* Quotes (were the Pro "Blockquote" widget) */
body .jbit-quote {
	margin: 0;
	padding: 18px 22px;
	border-left: 4px solid var(--jbit-red);
	background: var(--jbit-tint);
	border-radius: 0 10px 10px 0;
	font-style: italic;
}

body .jbit-quote cite {
	display: block;
	margin-top: 8px;
	font-style: normal;
	font-weight: 600;
	color: var(--jbit-navy);
}

/* Facebook feed (was the Pro "Facebook Page" widget) */
body .jbit-fb-page {
	display: flex;
	justify-content: center;
}

/* Institutional Committees page: stack columns on phones
   (was Pro "Custom CSS" on that page's section) */
@media (max-width: 768px) {
	body.page-id-8877 .elementor-section .elementor-container {
		display: flex !important;
		flex-direction: column !important;
	}

	body.page-id-8877 .elementor-section .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 100% !important;
	}

	body.page-id-8877 .elementor-section * {
		position: static !important;
		transform: none !important;
	}
}

/* =====================================================================
   10. Back-to-top button (added in functions.php)
   ===================================================================== */
.jbit-to-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 998;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--jbit-red);
	color: #fff !important;
	font-size: 20px;
	font-weight: 700;
	line-height: 44px;
	text-align: center;
	text-decoration: none !important;
	box-shadow: 0 6px 16px rgba(237, 49, 54, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.jbit-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.jbit-to-top:hover {
	background: var(--jbit-red-dark);
}

/* =====================================================================
   11. Print: hide site chrome so notices and tables print cleanly
   ===================================================================== */
@media print {
	#masthead,
	[data-elementor-type="header"],
	.hfe-before-footer-wrap,
	#colophon,
	.jbit-to-top,
	.mysticky-welcomebar-fixed {
		display: none !important;
	}
}