/* =============================================================================
   PrintPal Custom Styles
   Supplements assets/css/style.css — kept separate for easy editing.
============================================================================= */

/* ── Page layout: flex column so footer always sticks to the bottom ─────────── */
.site_wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
.printox_internal {
	flex: 1 0 auto;
}
#ptx-footer {
	flex-shrink: 0;
}

/* ── Header: logo — constrain WP custom logo regardless of image dimensions ──── */
.brand-logo img,
.brand-logo .custom-logo {
	max-width: 160px;
	width: auto;
	height: auto;
	display: block;
}

/* ── Header adjustments (desktop ≥992px) ─────────────────────────────────────── */
@media (min-width: 992px) {

	/* 1. Top gradient bar — thicker to match Prespri visual weight */
	.ptx-header-section.header-style-one .ptx-header-top-section {
		padding: 24px 0 26px;
	}

	/* 2. Navigation font size — slightly larger than the 17px base */
	.ptx-header-section.header-style-one .ptx-header-main-menu-area .main-navigation li a {
		font-size: 18px;
	}

	/* 3. Logo — slightly larger on desktop */
	.brand-logo img,
	.brand-logo .custom-logo {
		max-width: 200px;
	}

	/* 4. Nav items — horizontal row, vertically centred in the white bar.
	      Bootstrap's .navbar-nav defaults to flex-direction:column which
	      stacks items. Override to row and remove the 40px bottom padding
	      that was for Elementor dropdown hover zones. */
	.ptx-header-section.header-style-one .ptx-header-main-menu-area .main-navigation .navbar-nav {
		flex-direction: row;
		align-items: center;
	}
	.ptx-header-section.header-style-one .ptx-header-main-menu-area .main-navigation li a {
		padding-bottom: 0;
		line-height: 1;
	}

	/* 5. Dropdown arrow — vertically centred with the nav text */
	.ptx-header-section.header-style-one .ptx-header-main-menu-area .dropdown a:after {
		top: 50%;
		transform: translateY(-50%);
	}
}

/* ── Header: search trigger icon ─────────────────────────────────────────────── */
.header-search-trigger {
	cursor: pointer;
	color: #111010;
	font-size: 17px;
	margin-right: 23px;
	display: inline-flex;
	align-items: center;
}
.header-search-trigger:hover { color: #4951fe; }

/* ── Search overlay ───────────────────────────────────────────────────────────── */
.ptx-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.75);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.ptx-search-overlay.is-open {
	opacity: 1;
	visibility: visible;
}
.ptx-search-inner {
	position: relative;
	width: 90%;
	max-width: 680px;
}
.ptx-search-inner form {
	display: flex;
	border-radius: 50px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.ptx-search-inner input[type="search"] {
	flex: 1;
	border: none;
	outline: none;
	padding: 18px 28px;
	font-size: 18px;
	background: transparent;
}
.ptx-search-inner button[type="submit"] {
	border: none;
	padding: 0 28px;
	font-size: 18px;
	cursor: pointer;
	color: #fff;
	background: var(--ptx-gradient-1);
}
.ptx-search-close {
	position: absolute;
	top: -48px;
	right: 0;
	font-size: 22px;
	color: #fff;
	border: none;
	background: transparent;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s;
}
.ptx-search-close:hover { opacity: 1; }

/* ── Inner pages: nudge content below the absolute-positioned header ──────────
   Hero/slider sections handle their own spacing. Standard inner pages
   (blog, shop, single, 404, etc.) need top padding so content isn't hidden.
   ---------------------------------------------------------------------------- */
body:not(.home) .ptx-breadcrumb-section,
body:not(.home) .printox_internal > section:first-child:not(.ptx-breadcrumb-section) {
	padding-top: 160px;
}

/* ── Footer ───────────────────────────────────────────────────────────────────── */
#ptx-footer {
	background-color: #1a1a2e;
	color: #ccc;
	padding-top: 60px;
}
#ptx-footer .ptx-footer-widget-area {
	padding-bottom: 40px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	margin-bottom: 0;
}
#ptx-footer .ptx-footer-copyright {
	padding: 24px 0;
}
#ptx-footer .footer-copyright-text {
	color: rgba(255,255,255,0.6);
	font-size: 14px;
}
#ptx-footer .widget-title {
	color: #fff;
	font-size: 18px;
	margin-bottom: 20px;
}
#ptx-footer a {
	color: rgba(255,255,255,0.6);
	transition: color 0.2s;
}
#ptx-footer a:hover { color: #fff; }

/* =============================================================================
   HOME HERO SECTION
   Mirrors the original Slider Revolution "printiing_1" layout & feel.
============================================================================= */

#ptx-home-hero {
	position: relative;
	min-height: 85vh;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: visible; /* allow Elementor first section to overlap if needed */
	padding-top: 160px; /* clears the absolute-positioned header */
	padding-bottom: 80px;
}

/* Subtle dark overlay so text is readable over any background */
.ptx-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		rgba(255,255,255,0.55) 0%,
		rgba(255,255,255,0.15) 60%,
		rgba(255,255,255,0) 100%
	);
	pointer-events: none;
}

.ptx-hero-container {
	position: relative;
	z-index: 2;
}

/* ── Text column ─────────────────────────────────────────────────────────── */
.ptx-hero-text-col {
	padding-right: 40px;
}

.ptx-hero-label {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: capitalize;
	color: #555;
	background: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 50px;
	padding: 7px 18px;
	margin-bottom: 20px;
	backdrop-filter: blur(4px);
}

.ptx-hero-heading {
	font-family: var(--ptx-heading, 'Outfit', sans-serif);
	font-size: clamp(32px, 4vw, 54px);
	font-weight: 800;
	line-height: 1.15;
	color: #111010;
	margin-bottom: 20px;
}

.ptx-hero-body {
	font-size: 17px;
	line-height: 1.75;
	color: #444;
	max-width: 520px;
	margin-bottom: 36px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.ptx-hero-btns { gap: 16px; }

.ptx-btn-hero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 34px;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	text-decoration: none;
}
.ptx-btn-hero:hover { transform: translateY(-2px); text-decoration: none; }

.ptx-btn-hero--primary {
	background: var(--ptx-gradient-1);
	color: #fff;
	box-shadow: 0 8px 28px rgba(73,81,254,0.35);
}
.ptx-btn-hero--primary:hover { box-shadow: 0 12px 36px rgba(73,81,254,0.5); color: #fff; }

.ptx-btn-hero--outline {
	background: transparent;
	color: #111010;
	border: 2px solid rgba(73,81,254,0.4);
}
.ptx-btn-hero--outline:hover {
	background: var(--ptx-gradient-1);
	color: #fff;
	border-color: transparent;
}

/* ── RevSlider image composition (right side of hero) ───────────────────────
   Stage is absolute, covering the right ~58% of the hero section.
   Individual image positions normalised from RevSlider layers JSON:
   original grid 1280×934, right column ≈ 640px wide × 934px tall.
   Percentages = (original_px / 640) × 100 for width,
                 (original_y  / 934) × 100 for top.
   X offsets added to a 50% left baseline (centre of right column).
   --------------------------------------------------------------------------- */
.ptx-hero-img-stage {
	position: absolute;
	top: 0;
	right: 0;
	width: 58%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}
@media (max-width: 991px) {
	.ptx-hero-img-stage { display: none; }
}

/* Base rule for all RS images */
.ptx-rs-img {
	position: absolute;
	display: block;
}

/* t-shirt-bg1.png  w=472/640=74%  x=66→10%  y=206/934=22% */
.ptx-rs-bg   { width: 74%; left: 10%; top: 22%; z-index: 1; }

/* t-shirt1.png     w=388/640=61%  x=85→13%  y=-51→ -5%  */
.ptx-rs-main { width: 61%; left: 13%; top: -5%; z-index: 4; }

/* s-sh121.png      w=425/640=66%  x=-27→-4%  y=90→10%   */
.ptx-rs-sh121 { width: 66%; left: -4%; top: 10%; z-index: 3; }

/* s-sh61.png       w=302/640=47%  x=124→19%  y=139→15%  */
.ptx-rs-sh61  { width: 47%; left: 50%; top: 15%; z-index: 5; }

/* s-sh71.png       w=229/640=36%  x=-54→-8%  y=160→17%  */
.ptx-rs-sh71  { width: 36%; left: -8%; top: 42%; z-index: 5; }

/* s-sh101.png      w=130/640=20%  x=136→21%  y=143→15%  */
.ptx-rs-sh101 { width: 20%; left: 73%; top: 36%; z-index: 6; }

/* s-sh1-11.png     w=91/640=14%   x=33→5%    y=89→10%   */
.ptx-rs-sh1   { width: 14%; left: 36%; top: 9%; z-index: 6; }

/* s-sh31.png       w=56/640=9%    x=-72→-11% y=159→17%  */
.ptx-rs-sh31  { width: 9%;  left: -2%; top: 30%; z-index: 6; }

/* s-sh111.png      w=57/640=9%    x=186→29%  y=191→20%  */
.ptx-rs-sh111 { width: 9%;  left: 80%; top: 55%; z-index: 6; }

/* ── Animation initial states: set by GSAP in JS, NOT in CSS.
   If JS fails for any reason, content is fully visible as a fallback. ─── */

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
	#ptx-home-hero { min-height: auto; padding-top: 160px; padding-bottom: 80px; }
	.ptx-hero-text-col { padding-right: 0; text-align: center; }
	.ptx-hero-btns { justify-content: center; }
	.ptx-hero-body { margin-left: auto; margin-right: auto; }
}

@media (max-width: 575px) {
	.ptx-hero-heading { font-size: 28px; }
	.ptx-btn-hero { padding: 12px 24px; font-size: 14px; }
}