/**
 * Theme Name: Astra Child
 * Template:   astra
 * ...other header fields
 */

/**************************************** CUSTOM FONTS UPLOADED ****************************************/
/* BUTLER ULTRA LIGHT */
@font-face {
	font-family: 'Butler_Ultra_Light';
	src: url('/wp-content/themes/astra-child/custom-fonts/Butler_Ultra_Light.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

/* BICKHAM SCRIPT */
@font-face {
	font-family: 'BickhamScriptPro_Regular';
	src: url('/wp-content/themes/astra-child/custom-fonts/Bickham Script Pro Regular.ttf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'BickhamScriptPro_Bold';
	src: url('/wp-content/themes/astra-child/custom-fonts/Bickham Script Pro Bold.ttf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'BickhamScriptPro_SemiBold';
	src: url('/wp-content/themes/astra-child/custom-fonts/Bickham Script Pro SemiBold.ttf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

/* KARLA */
@font-face {
	font-family: 'Karla_Regular';
	src: url('/wp-content/themes/astra-child/custom-fonts/Karla-Regular.ttf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Karla_ExtraLight';
	src: url('/wp-content/themes/astra-child/custom-fonts/Karla-ExtraLight.ttf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

/* SWEET SANS */
@font-face {
	font-family: 'SS_Regular';
	src: url('/wp-content/themes/astra-child/custom-fonts/SweetSansPro-Regular.ttf') format('opentype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'SS_Light';
	src: url('/wp-content/themes/astra-child/custom-fonts/SweetSansProLight.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'SS_ExtraLight';
	src: url('/wp-content/themes/astra-child/custom-fonts/SweetSansProExLight.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

/* FINO SANS */
@font-face {
	font-family: 'FinoSans_Light';
	src: url('/wp-content/themes/astra-child/custom-fonts/Fino Sans Light.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

/* BIANCHA */
@font-face {
	font-family: 'Biancha_Regular';
	src: url('/wp-content/themes/astra-child/custom-fonts/Biancha-X3VOa.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
}

/**************************************** CUSTOM FONTS UPLOADED ****************************************/
h6.uagb-heading-text, h6.uagb-ifb-title, h6.uagb-ifb-title-prefix, p.uagb-desc-text {
	font-family: "SS_ExtraLight" !important;
}

h5.uagb-heading-text, h5.uagb-ifb-title, h5.uagb-ifb-title-prefix, p.uagb-desc-text {
	font-family: "Biancha_Regular" !important;
}

h4.uagb-heading-text, h4.uagb-ifb-title-prefix, p.uagb-desc-text {
	font-family: "SS_Regular" !important;
}

h3.uagb-heading-text, h3.uagb-ifb-title, h3.uagb-ifb-title-prefix, p.uagb-desc-text {
	font-family: "BickhamScriptPro_Regular" !important;
}

h2.uagb-heading-text, h2.uagb-ifb-title, h2.uagb-ifb-title-prefix, p.uagb-desc-text {
	font-family: "FinoSans_Light" !important;
}

h1.uagb-heading-text, h1.uagb-ifb-title, h1.uagb-ifb-title-prefix, p.uagb-desc-text {
	font-family: "Butler_Ultra_Light" !important;
}

.ceremony-heading-details, h4.uagb-ifb-title {
	font-family: "SS_ExtraLight" !important;
}

.floating-hover-effect {
	opacity: 0.8;
	transition: opacity 0.4s ease-in-out, filter 0.4s ease-in-out, transform 0.4s ease-in-out;

}

.floating-hover-effect:hover {
	opacity: .9;
	filter: brightness(1) saturate(1) drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
	transform: scale(1);
}

.rsvp-form {
	font-family: "SS_ExtraLight" !important;
	border: none;
}

.image-fit {
	object-fit: contain;
}

/* Main hero container */
.invite-section {
	position: relative;
	height: 100vh;
	width: 100%;
	background-color: #1a1d1d;
	background-blend-mode: multiply;
	background-size: cover;
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
	filter: brightness(0.95) contrast(1.1);
	perspective: 1000px;
	/* enables subtle depth layering */
}

/* Embossed background date */
.invite-section::before {
	content: "01 .04. 26";
	position: absolute;
	top: 48%;
	left: 50%;
	transform: translate(-50%, -50%) translateZ(-150px) scale(1.4);
	font-family: "Butler_Ultra_Light", sans-serif;
	font-weight: 500;
	letter-spacing: 0rem;
	text-transform: uppercase;
	color: #1a1d1d;
	text-align: center;
	z-index: 0;
	line-height: 1;
	opacity: 0.9;
	font-size: clamp(12rem, 20vw, 30rem);
	white-space: nowrap;
	text-shadow:
		-1.5px -1.5px 0px rgba(250, 235, 210, 0.4),
		2px 2px 1px rgba(0, 0, 0, 0.6);
}

.invite-left {
	left: 80px;
}

.invite-right {
	right: 20px;
}

.invite-left,
.invite-right {
	position: relative;
	z-index: 3;
	font-size: 1.2rem;
	transform: translateZ(50px);
	filter:
		drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

.invite-center {
	position: relative;
	z-index: 4;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translateZ(100px);
}

.invite-center img {
	max-width: 300px;
	filter:
		drop-shadow(0 6px 15px rgba(0, 0, 0, 0.5))
		/* soft lift */
		drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7))
		/* darker base */
		brightness(1) contrast(1.1);
}

/************************************** PARALLAX SECTION **************************************/

.parallax {
	position: relative;
	overflow: hidden;
	text-align: center;
	color: #1a1d1d;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6rem 2rem;
	height: 500px;
	width: 980px !important;
	margin-top: 40px;
}

.parallax.full-hero {
	min-height: 100dvh;
}

.parallax .content,
.parallax h1,
.parallax p {
	position: relative;
	z-index: 2;
	margin: 0 auto;
	width: 800px;
	justify-content: center;
}

.parallax h1 {
	font-family: "Butler_Ultra_Light", serif;
	font-size: 60px;
	text-align: center;
	color: #f4f4e7;
	line-height: 1.2;
	letter-spacing: 8px;
	padding-bottom: 20px;
}
.parallax p {
	font-family: "SS_ExtraLight", serif;
	font-size: 22px;
    text-align: center;
	color: #f4f4e7;
	line-height: 1.3;
	padding-bottom: 50px;
	letter-spacing: 3px;
}

.parallax::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 0;
}

.parallax::before {
	content: "";
	position: absolute;
	top: -30vh;
	left: 0;
	right: 0;
	bottom: -30vh;
	opacity: 0.3;
	background-color: #1a1d1d;
	background-image: var(--bg-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 1;
	will-change: transform;
	transform: var(--bg-transform, translateY(0));
	transition: transform 0.3s linear;
}

.parallax .story-btn {
  display: inline-block;
  background-color: #1a1d1d;
  color: #f4f4e7;
  font-family: "Butler_Ultra_Light", sans-serif;
  font-size: 18px;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  padding: 20px 40px;
  text-align: center;
  transition: box-shadow 0.4s ease, color 0.4s ease;
  border: none;
}

.parallax .story-btn:hover {
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.wp-block-uagb-countdown {
	font-family: "Butler_Ultra_Light" !important;
}

.wp-block-uagb-countdown__label {
	font-family: "SS_ExtraLight" !important;
}

/************************* Desktop (>1024px) *************************/
@media only screen and (min-width: 1025px) {

	/* Floating Images */
	.collage-container {
		position: relative !important;
		margin: 0 auto;
	}

	.floating-img {
		position: absolute !important;
		height: auto;
	}

	.main-image {
		position: relative !important;
		display: block;
		width: 470px;
		height: 560px;
	}

	.float-left-1 {
		bottom: -40px;
		left: -30px;
	}

	.float-left-2 {
		bottom: -130px;
		left: 120px;
		opacity: .7;
	}

	.float-center-1 {
		left: -284px;
		bottom: 50px;
	}

	.float-center-2 {
		right: -278px;
		top: 60px;
	}

	.float-right-1 {
		top: -40px;
		right: 200px;
	}

	.float-right-2 {
		top: -160px;
		right: -30px;
		opacity: .7;
	}
}

/************************ Tablets (<1024px) Landscape/Portrait ************************/
@media (max-width: 1024px) {

	/* Floating Images */
	.collage-container {
		position: relative !important;
		margin: 0 auto;
	}

	.floating-img {
		position: absolute !important;
		height: auto;
	}

	.main-image {
		position: relative !important;
		display: block;
		width: 470px;
		height: 560px;
	}

	.float-left-1 {
		bottom: 120px;
		left: -30px;
	}

	.float-left-2 {
		bottom: -15px;
		left: 120px;
		opacity: .8;
	}

	.float-center-1 {
		left: -284px;
		bottom: 50px;
	}

	.float-center-2 {
		right: -278px;
		top: 60px;
	}

	.float-right-1 {
		top: -27px;
		right: 193px;
		opacity: .9;
	}

	.float-right-2 {
		top: 35px;
		right: -30px;
		opacity: .8;
	}


}

/************************ (≤926px) Landscape Mobile Phones / Phablets ************************/
@media (max-width: 926px) {

	/* Floating Images */
	.collage-container {
		position: relative !important;
		margin: 0 auto;
	}

	.floating-img {
		position: absolute !important;
		height: auto;
	}

	.main-image {
		position: relative !important;
		display: block;
		width: 470px;
		height: 560px;
		z-index: 10;
	}

	.float-left-1 {
		bottom: 120px;
		left: -30px;
	}

	.float-left-2 {
		bottom: -15px;
		left: 120px;
		opacity: .8;
	}

	.float-center-1 {
		left: -30px;
		bottom: 210px;
	}

	.float-center-2 {
		right: -18px;
		top: 70px;
	}

	.float-right-1 {
		top: -27px;
		right: 193px;
		opacity: .9;
	}

	.float-right-2 {
		top: 35px;
		right: -30px;
		opacity: .8;
	}
}

/* Side Photos Hidden */
@media (max-width: 768px) {

	/* Floating Images */
	.collage-container {
		position: relative !important;
		margin: 0 auto;
	}

	.floating-img {
		position: absolute !important;
		height: auto;
	}

	.main-image {
		position: relative !important;
		display: block;
		width: 470px;
		height: 560px;
		z-index: 10;
	}

	.float-center-1 {
		left: -280px;
		bottom: 50px;
	}

	.float-center-2 {
		right: -275px;
		top: 65px;
	}

	.left-container,
	.right-container {
		display: none !important;
	}

	.parallax {
		position: relative;
		overflow: hidden;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 65vh;
		width: 100% !important;
		margin: 0 auto;
	}

	.parallax::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.35);
		z-index: 0;
	}

	.parallax::before {
		content: "";
		position: absolute;
		top: -30vh;
		left: 0;
		right: 0;
		bottom: -30vh;
		background-image: var(--bg-image);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		z-index: 0;
		will-change: transform;
		transform: var(--bg-transform, translateY(0));
		transition: transform 0.1s linear;
	}


}

/************************ Small Mobile Phones (≤575px) ************************/
@media (max-width: 575px) {

	/* Floating Images */
	.collage-container {
		position: relative !important;
		margin: 0 auto;
	}

	.floating-img {
		position: absolute !important;
		height: auto;
	}

	.main-image {
		position: relative !important;
		display: block;
		opacity: .5;
	}

	.float-center-1 {
		left: 8px;
		bottom: 210px;
	}

	.float-center-2 {
		right: 20px;
		top: 70px;
	}

	.left-container,
	.right-container {
		display: none !important;
	}

	.overflow-hidden {
		overflow: hidden !important;
	}

	.parallax {
		position: relative;
		overflow: hidden;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 65vh;
		width: 100% !important;
		margin: 0 auto;
	}

	.parallax::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.35);
		z-index: 0;
	}

	.parallax::before {
		content: "";
		position: absolute;
		top: -30vh;
		left: 0;
		right: 0;
		bottom: -30vh;
		background-image: var(--bg-image);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		z-index: 0;
		will-change: transform;
		transform: var(--bg-transform, translateY(0));
		transition: transform 0.1s linear;
	}


}

/************************ Extra Small Phones (≤430px) Portrait ************************/
@media (max-width: 430px) {

	/* Floating Images */
	.collage-container {
		position: relative !important;
		margin: 0 auto;
	}

	.floating-img {
		position: absolute !important;
		height: auto;
	}

	.main-image {
		position: relative !important;
		display: block;
	}

	.float-center-1 {
		left: -30px;
		bottom: 210px;
	}

	.float-center-2 {
		right: -18px;
		top: 70px;
	}

	.left-container,
	.right-container {
		display: none !important;
	}

	.overflow-hidden {
		overflow: hidden !important;
	}

	.parallax {
		position: relative;
		overflow: hidden;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 65vh;
		width: 92% !important;
		margin: 0 auto;
	}

	.parallax::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.35);
		z-index: 0;
	}

	.parallax::before {
		content: "";
		position: absolute;
		top: -30vh;
		left: 0;
		right: 0;
		bottom: -30vh;
		background-image: var(--bg-image);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		z-index: 0;
		will-change: transform;
		transform: var(--bg-transform, translateY(0));
		transition: transform 0.1s linear;
	}


}

/************************ Tablets for Ipad (≤1366px) Portrait ************************/
@media only screen and (min-width: 769px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait) {

	/* Floating Images */
	.collage-container {
		position: relative !important;
		margin: 0 auto;
	}

	.floating-img {
		position: absolute !important;
		height: auto;
	}

	.main-image {
		position: relative !important;
		display: block;
		width: 470px;
		height: 560px;
	}

	.float-center-1 {
		left: -284px;
		bottom: 50px;
	}

	.float-center-2 {
		right: -278px;
		top: 60px;
	}

	.left-container,
	.right-container {
		display: none !important;
	}


}

/************************ Tablets for Ipad (≤1366px) Landscape ************************/
@media only screen and (min-width: 769px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape) {

	/* Floating Images */
	.collage-container {
		position: relative !important;
		margin: 0 auto;
	}

	.overflow-hidden {
		overflow: hidden !important;
	}

	.floating-img {
		position: absolute !important;
		height: auto;
	}

	.main-image {
		position: relative !important;
		display: block;
		width: 470px;
		height: 560px;
	}

	.float-left-1 {
		bottom: 120px;
		left: -30px;
	}

	.float-left-2 {
		bottom: -15px;
		left: 120px;
		opacity: .8;
	}

	.float-center-1 {
		left: -284px;
		bottom: 50px;
	}

	.float-center-2 {
		right: -276px;
		top: 60px;
	}

	.float-right-1 {
		top: -27px;
		right: 193px;
		opacity: .9;
	}

	.float-right-2 {
		top: 35px;
		right: -10px;
		opacity: .8;
	}
}