/*
Theme Name: Rakentech Projects
Theme URI: https://rakentech.com
Author: Raken Tech
Author URI: https://rakentech.com
Description: RakenTech corporate website theme with a full project portfolio. Adds a Projects custom post type with service categories, YouTube video link, tags, descriptions and customer reviews, an admin-managed project editor, a Projects page (filterable by service) and project detail pages. Built from the original RakenTech static website using Bootstrap 5, Swiper, jarallax, lightgallery and Boxicons.
Version: 2.0.0
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rakentech
Tags: one-column, custom-logo, featured-images, translation-ready, custom-post-types
*/

/* ============================================================
   Rakentech responsive overrides
   Loaded last (on top of the bundled theme CSS) to guarantee
   the whole site scales cleanly on small screens.
   ============================================================ */

/* Prevent horizontal overflow caused by large fixed widths */
html, body {
	overflow-x: hidden;
}
img, svg, video, canvas {
	max-width: 100%;
	height: auto;
}

/* Scale down the oversized display headings on small/medium screens */
@media (max-width: 767.98px) {
	.display-1 { font-size: calc(2.4rem + 1.5vw) !important; }
	.display-2 { font-size: calc(1.9rem + 1.2vw) !important; }
	.display-3 { font-size: calc(1.6rem + 1vw) !important; }
	.display-4 { font-size: calc(1.4rem + 0.8vw) !important; }
	.display-5 { font-size: calc(1.2rem + 0.6vw) !important; }
	.display-6 { font-size: calc(1.1rem + 0.4vw) !important; }
	h1 { font-size: calc(1.65rem + 0.6vw) !important; }
	.swiper-slide h2, .swiper-slide .h2 { font-size: calc(1.6rem + 1vw) !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.display-1 { font-size: clamp(3rem, 7vw, 5rem) !important; }
	.display-2 { font-size: clamp(2.5rem, 5.5vw, 4rem) !important; }
}

/* Tighter, mobile-friendly section spacing */
@media (max-width: 575.98px) {
	section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
	.container { padding-left: 1rem !important; padding-right: 1rem !important; }
	.card-hover { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

/* Contact page: keep the email/number tidy and tappable on small screens */
.break-word {
	word-break: break-word;
	overflow-wrap: anywhere;
}
@media (max-width: 575.98px) {
	.text-nav a { display: inline-block; }
}

/* Forms & buttons fill their container nicely on touch screens */
@media (max-width: 575.98px) {
	.form-control, .form-select { font-size: 1rem !important; }
	.btn-lg { width: 100%; }
	.btn, .nav .btn { white-space: normal; }
}

/* Footer link blocks stack cleanly */
@media (max-width: 991.98px) {
	#footer-links .collapse { display: block !important; }
}

/* ============================================================
   Contact page - very responsive
   ============================================================ */

/* The breadcrumb sits flush to the container; give the whole block sensible
   top padding on every screen size. */
.page-wrapper .bg-size-cover .container {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

/* Bind the section background so it scales instead of overflowing on small
   screens. */
.bg-size-cover.bg-position-bottom-center {
	background-repeat: no-repeat !important;
	background-position: bottom center !important;
}

@media (max-width: 575.98px) {

	/* Tighten the section + row spacing on very small screens */
	.page-wrapper .bg-size-cover { padding-top: 1.5rem !important; }
	.page-wrapper .bg-size-cover .row { padding-top: 1rem !important; }

	/* The big "Let's talk!" heading scales down gracefully */
	.page-wrapper .display-1 { font-size: 2.4rem !important; line-height: 1.1; }

	/* Email + phone stay readable and tappable */
	.page-wrapper .text-gradient-primary  ~ .nav a,
	.page-wrapper .nav.d-block .nav-link {
		font-size: 1rem;
		line-height: 1.45;
		overflow-wrap: anywhere;
	}

	/* Form controls become full-width and taller tap targets */
	.page-wrapper .form-control-lg {
		font-size: 1rem;
		min-height: 3.25rem;
	}
	.page-wrapper textarea.form-control-lg { min-height: 8rem; }

	/* Submit button fills the width on mobile */
	.page-wrapper .btn-lg {
		width: 100%;
		min-height: 3.25rem;
		white-space: normal;
	}
}

@media (min-width: 576px) and (max-width: 767.98px) {

	/* Keep the intro compact; the form's col-sm-6 inputs already stay paired */
	.page-wrapper .display-1 { font-size: 3rem !important; line-height: 1.1; }
	.page-wrapper .nav.d-block.lead { padding-top: .5rem; }
}

@media (min-width: 768px) and (max-width: 991.98px) {

	/* Two-column form inputs remain side by side from tablets up */
	.page-wrapper .col-lg-6 .form-control-lg { font-size: 1rem; }
}

/* ============================================================
   Projects - archive filter, cards, single page, reviews
   ============================================================ */

/* Service filter chips on the Projects archive */
.projects-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
}
.projects-filter .btn {
	border-radius: 100rem;
	padding: .5rem 1.15rem;
	font-size: .9rem;
}
.projects-filter .btn.active {
	background-color: #6366f1;
	border-color: #6366f1;
	color: #fff;
	box-shadow: 0 .75rem 1.5rem rgba(99, 102, 241, .25);
}

/* Project card */
.project-card {
	transition: transform .25s ease, box-shadow .25s ease;
}
.project-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 1rem 2rem rgba(23, 22, 77, .12) !important;
}
.project-thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: .75rem;
	background-color: #f3f4ff;
}
.project-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}
.project-card:hover .project-thumb img {
	transform: scale(1.05);
}
.project-thumb .play-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(11, 9, 40, .35);
	color: #fff;
	opacity: 0;
	transition: opacity .25s ease;
}
.project-card:hover .play-overlay,
.project-thumb.active .play-overlay {
	opacity: 1;
}
.project-thumb .play-overlay .bx {
	font-size: 3rem;
	filter: drop-shadow(0 .35rem .9rem rgba(0, 0, 0, .4));
}
.project-card .project-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.project-tags .tag-pill {
	display: inline-block;
	font-size: .78rem;
	color: #6366f1;
	background-color: rgba(99, 102, 241, .1);
	border-radius: 100rem;
	padding: .25rem .75rem;
	margin: 0 .25rem .25rem 0;
}

/* Breadcrumb on single project */
.project-breadcrumb .breadcrumb-item {
	font-size: .9rem;
}

/* Single project media (YouTube embed) */
.project-video-wrap {
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	background-color: #000;
	aspect-ratio: 16 / 9;
	box-shadow: 0 1.25rem 2.5rem rgba(23, 22, 77, .18);
}
.project-video-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Customer reviews */
.review-card {
	border-left: .25rem solid #6366f1;
}
.review-stars {
	color: #f6b50f;
	letter-spacing: .12em;
}
.review-avatar {
	width: 3rem;
	height: 3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50rem;
	color: #fff;
	background: linear-gradient(135deg, #8b5cf6, #3b82f6);
	font-weight: 600;
}

/* Empty state */
.projects-empty {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--rz-body-muted, #6c6f8c);
}

/* Filter bar spacing on the homepage slider section */
.rtk-recent-projects .swiper-slide { height: auto; }

/* Responsive tweaks */
@media (max-width: 575.98px) {
	.projects-filter .btn {
		font-size: .82rem;
		padding: .4rem .9rem;
	}
	.project-thumb { aspect-ratio: 16 / 10; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.project-thumb { aspect-ratio: 16 / 11; }
}