/*
Theme Name: Education LMS Child
Theme URI: https://www.filathemes.com/download/education-lms/
Description: Child theme for Education LMS. Holds local template overrides so parent-theme updates don't overwrite them.
Author: CMIT
Template: education-lms
Version: 1.0.0
Text Domain: education-lms-child
*/

/* Featured slider — show the full 1351x448 banner image at all viewport widths.
   - Lock slide to the image's aspect ratio so it scales cleanly with width
     (auto-sizes the height; replaces Elementor's fixed 400px and our previous
     responsive height overrides).
   - Use background-size: contain so the image is never cropped. With matched
     aspect ratio there's no letterboxing in practice; the bg color covers any
     fractional gap that arises from rounding. */
.feature-slick-slider .slick-slide,
.feature-slider .slick-slide {
	aspect-ratio: 1351 / 448;
	height: auto !important;
	min-height: 0 !important;
}

.feature-slick-slider .slick-slide .feature-slide-bg,
.feature-slider .slick-slide .feature-slide-bg {
	background-size: contain !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-color: #000;
}

/* Phone-only fine-tuning for the dots overlay. */
@media (max-width: 600px) {
	.feature-slick-slider .slick-dots,
	.feature-slider .slick-dots { bottom: 10px; }
	.feature-slick-slider .slick-dots button,
	.feature-slider .slick-dots button { width: 10px; height: 10px; }
}

/* Spacing between site header and Elementor page content.
   The theme header has no bottom padding, so Elementor-built pages
   (e.g. the home banner) butt against the header. Push the Elementor
   wrapper down rather than touching the header — keeps inner pages
   that rely on flush header→titlebar layout unchanged. */
[data-elementor-type="wp-post"] {
	margin-top: 50px;
}

/* Mobile-only: shrink Elementor button-style widgets so the row of three
   ("Latest Courses / Certified Teachers / Contact Us") doesn't tower over
   the banner. Covers the three widget shapes those typically come from. */
@media (max-width: 600px) {
	/* Hide the "Latest Courses / Certified Teachers / Contact Us" icon-box
	   row entirely on phones — not needed on small screens. Drops the whole
	   Elementor section that contains them so we don't leave empty padding. */
	.elementor-section:has(.elementor-widget-icon-box) {
		display: none !important;
	}

	/* Hide the empty topbar-right (login/cart placeholder) on phones —
	   the Bootstrap hidden-xs class on it can leave a row behind. */
	.topbar .topbar-right { display: none !important; }

	/* Tighter spacing below the logo header on phones so the banner
	   sits closer to the navbar. Desktop values stay larger. */
	.header-default { padding-bottom: 8px; }
	[data-elementor-type="wp-post"] { margin-top: 35px; }

	/* Drop forced heights on the section/column/widget chain so widgets size
	   to their content. Elementor often emits inline `min-height` on the
	   section, which keeps the row tall regardless of how small the inner
	   widget gets. !important is required to beat inline styles. */
	.elementor-section,
	.elementor-section > .elementor-container,
	.elementor-column,
	.elementor-column-wrap,
	.elementor-widget-wrap,
	.elementor-widget-icon-box,
	.elementor-widget-icon-box > .elementor-widget-container,
	.elementor-widget-icon-box .elementor-icon-box-wrapper,
	.elementor-widget-image-box,
	.elementor-widget-image-box > .elementor-widget-container,
	.elementor-widget-image-box .elementor-image-box-wrapper,
	.elementor-widget-call-to-action,
	.elementor-widget-call-to-action .elementor-cta {
		min-height: 0 !important;
	}

	/* Tighten section vertical padding so the row of three widgets
	   doesn't get a tall padding band around it. */
	.elementor-section.elementor-top-section {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}

	/* Elementor Button widget */
	.elementor-widget-button .elementor-button-link,
	.elementor-widget-button .elementor-button {
		padding: 8px 14px !important;
		font-size: 13px !important;
		line-height: 1.3 !important;
	}

	/* Elementor Icon Box — slim down padding, icon size, gaps. */
	.elementor-widget-icon-box { margin-bottom: 8px !important; }
	.elementor-widget-icon-box > .elementor-widget-container { padding: 6px !important; }
	.elementor-widget-icon-box .elementor-icon-box-wrapper { padding: 4px !important; }
	.elementor-widget-icon-box .elementor-icon-box-icon { margin-bottom: 4px !important; }
	.elementor-widget-icon-box .elementor-icon-box-icon i,
	.elementor-widget-icon-box .elementor-icon-box-icon svg {
		font-size: 24px !important;
		width: 24px !important;
		height: 24px !important;
	}
	.elementor-widget-icon-box .elementor-icon-box-title,
	.elementor-widget-icon-box .elementor-icon-box-title a {
		font-size: 16px !important;
		line-height: 1.3 !important;
		margin: 0 0 4px !important;
	}
	.elementor-widget-icon-box .elementor-icon-box-description {
		font-size: 13px !important;
		line-height: 1.4 !important;
		margin: 0 !important;
	}

	/* Elementor Image Box — slim down image + spacing. */
	.elementor-widget-image-box { margin-bottom: 8px !important; }
	.elementor-widget-image-box > .elementor-widget-container { padding: 6px !important; }
	.elementor-widget-image-box .elementor-image-box-wrapper { padding: 4px !important; }
	.elementor-widget-image-box .elementor-image-box-img { max-width: 90px !important; margin-bottom: 4px !important; }
	.elementor-widget-image-box .elementor-image-box-title { font-size: 16px !important; line-height: 1.3 !important; margin: 0 0 4px !important; }
	.elementor-widget-image-box .elementor-image-box-description { font-size: 13px !important; line-height: 1.4 !important; margin: 0 !important; }

	/* Elementor Call to Action */
	.elementor-widget-call-to-action .elementor-cta__content { padding: 8px !important; }
	.elementor-widget-call-to-action .elementor-cta__title { font-size: 16px !important; line-height: 1.3 !important; }
	.elementor-widget-call-to-action .elementor-cta__description { font-size: 13px !important; line-height: 1.4 !important; }
}

/* Info-only LMS: hide the price label ("Free" / amount) and all LearnPress
   action buttons (Start Now, Buy, Continue, Finish, Retake, External Link). */
.course-price,
.course-payment,
.course-meta,
.course-author,
.course-time,
.course-progress,
form.enroll-course,
form.purchase-course,
form[name="purchase-course"],
form.continue-course,
form.lp-form-retake-course,
form.course-external-link,
form.form-button-finish-course {
	display: none !important;
}

/* ==========================================================================
   Sticky orange contact topbar (matches production cmitcomputereducation.in).
   Content (phone, email, etc.) comes from the "topbar-left" / "topbar-right"
   widget areas — add a Text or Custom HTML widget there to populate it.
   ========================================================================== */
.topbar {
	background: #ed8f31 !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	padding: 5px 0 !important;
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
/* Push the rest of the page below the fixed topbar plus a breathing gap.
   ~31px topbar height + ~34px gap = 65px. #page padding (rather than body)
   survives plugin resets. */
#page { padding-top: 65px; }

/* Spacing below the logo / header bar. Parent has padding: 20px 0 0;
   add a matching bottom so the header has visible breathing room before
   page content (banners, titlebar, etc.). */
.header-default { padding-bottom: 20px; }
/* When the WP admin bar is visible (logged-in users), nudge the topbar
   below it so they don't overlap. */
body.admin-bar .topbar { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .topbar { top: 46px; }
}
.topbar a,
.topbar i,
.topbar span,
.topbar p,
.topbar label,
.topbar ul li,
.topbar ul li a,
.topbar .header_login_url a,
.topbar .header-contact-wrapper li,
.topbar .header-contact-wrapper li a,
.topbar .cart-contents,
.topbar .cart-contents i {
	color: #fff !important;
}
.topbar a:hover,
.topbar ul li a:hover,
.topbar .header_login_url a:hover {
	color: rgba(255, 255, 255, 0.85) !important;
}
.topbar .vertical_divider {
	background-color: rgba(255, 255, 255, 0.4) !important;
}
/* Make the phone number stand out a touch. */
.topbar a[href^="tel:"],
.topbar .phone,
.topbar .header-contact-wrapper a {
	font-weight: 600;
	letter-spacing: 0.3px;
}

/* ==========================================================================
   Site polish — subtle elevation, motion, and rhythm tweaks.
   Each numbered block is independent; remove any single one if it doesn't
   fit your aesthetic.
   ========================================================================== */

/* 1. Smooth motion on common interactive elements. */
a, button, .btn, .lp-button,
.elementor-button-link, .elementor-button,
.course-item, .course-grid-box .course-holder,
.course-item .course-thumbnail img,
.site-footer a, .site-footer .footer-social a,
.main-navigation a {
	transition: color .2s ease, background-color .2s ease,
	            border-color .2s ease, transform .25s ease,
	            box-shadow .25s ease, opacity .2s ease;
}

/* 2. Header — animated underline on top menu hover/active.
   Sits above the parent's 40px bottom padding on nav anchors.
   Also defensively kill any text-decoration underline on the menu
   anchors, since the animated bar provides the hover indicator. */
.main-navigation a,
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation a:active {
	text-decoration: none !important;
}
.main-navigation a { position: relative; }
.main-navigation a::after {
	content: '';
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: 30px;
	height: 2px;
	background: #ffb606;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .25s ease;
}
.main-navigation a:hover::after,
.main-navigation .current_page_item > a::after,
.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_ancestor > a::after,
.main-navigation .current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* 3. Course cards — soft elevation and a small hover lift.
   Applies to both archive grid (.course-item) and the Elementor
   "Course Grid" widget (.course-grid-box .course-holder). */
.course-item {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(20, 30, 50, 0.05);
}
.course-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(20, 30, 50, 0.12);
}
.course-item .course-thumbnail { overflow: hidden; }
.course-item .course-thumbnail img { display: block; width: 100%; }
.course-item:hover .course-thumbnail img { transform: scale(1.04); }
.course-item .course-content { padding: 16px 18px 20px; }
.course-item .course-title,
.course-item .course-content .course-title,
.course-item .course-title a {
	font-size: 17px;
	line-height: 1.35;
	font-weight: 600;
	margin: 4px 0 !important;
}

/* LearnPress archive page — drop the heavy margin/border/padding under
   each course title; keep the bold large heading style.
   !important is required because LearnPress's plugin CSS is enqueued
   after the child theme stylesheet. */
.lp-archive-courses .course-detail-info .course-title {
	margin: 0 !important;
	border-bottom: none !important;
	padding-bottom: 0 !important;
	color: var(--lp-color-white, #fff);
	font-weight: 700;
	font-size: calc(var(--lp-font-size-base, 1em) * 2.15);
}

/* LearnPress archive sidebar uses margin-top: -190px to overlap its own
   colored hero. With the theme's .titlebar already at the top of the
   page, the sidebar (and the .media-preview inside it) gets pulled up
   under the titlebar instead. Anchor it back to natural flow. */
.lp-archive-courses .course-summary-sidebar {
	margin-top: 0 !important;
}

.course-grid-box .course-holder {
	border-radius: 10px;
	overflow: hidden;
}
.course-grid-box .course-holder:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(20, 30, 50, 0.18);
}

/* 4. Section heading rhythm.
   The biggest contributor to oversized gaps between course sections is
   the Elementor section's own top/bottom padding (often 60-80px each).
   Cut that for sections that contain a carousel-wrapper so course
   widgets stack tightly, without affecting other Elementor sections.
   :has() is supported in all current Chrome/Safari/Firefox. */
.elementor-section:has(.carousel-wrapper) {
	padding-top: 15px !important;
	padding-bottom: 15px !important;
}
.elementor-section:has(.carousel-wrapper) + .elementor-section:has(.carousel-wrapper) {
	padding-top: 0 !important;
}
.carousel-wrapper { padding: 15px 0; }
.carousel-wrapper + .carousel-wrapper { padding-top: 0; }
.carousel-wrapper h2.title { margin-bottom: 24px; }

/* 5. Buttons — consistent rounding + small hover lift. */
.btn, a.btn, button.btn,
.elementor-button-link, .elementor-button,
a.btn-all-courses {
	border-radius: 6px;
	font-weight: 600;
	letter-spacing: 0.3px;
}
.btn:hover, a.btn:hover, button.btn:hover,
.elementor-button-link:hover, .elementor-button:hover {
	transform: translateY(-1px);
}

/* 6. Footer polish — rhythm + social icon hover. */
.site-footer .widget-title {
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	margin-bottom: 20px;
}
.site-footer .footer-widgets ul li,
.site-footer .footer-widgets .menu li {
	padding: 4px 0;
}
.site-footer .footer-social a:hover { transform: translateY(-2px); }

/* 7. Smoothing + smooth in-page scroll. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html { scroll-behavior: smooth; }

/* 8. Keyboard-visible focus state (accessibility). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.elementor-button:focus-visible {
	outline: 2px solid #ffb606;
	outline-offset: 3px;
}

/* 9. Body content readability. */
.entry-content p,
.lp-single-course .course-summary p { line-height: 1.7; }