/*
Theme Name: Dakonte Child
Template: understrap
Text Domain: dakonte-child
Author: Katherine Botabara
Version: 1.0.0
*/

.btn-primary {
	background: #D63B2E;
	border-radius: 14px;
	padding: 16px 28px;
	border: none;

	&:hover {
		background: #b62f23;
	}
}

.btn-dark {
	border-radius: 14px;
	padding: 16px 28px;
}

/* =====================================
   HOMEPAGE HERO
===================================== */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 540px;
	overflow: hidden;
	padding: 0;
	background: #fff;
}

.hero__background {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hero__background img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 68% center;
}

/* White fade behind the text */

.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 1) 0%,
			rgba(255, 255, 255, 0.98) 25%,
			rgba(255, 255, 255, 0.9) 38%,
			rgba(255, 255, 255, 0.62) 52%,
			rgba(255, 255, 255, 0.26) 70%,
			rgba(255, 255, 255, 0.08) 100%
		),
		linear-gradient(
			rgba(255, 255, 255, 0.15),
			rgba(255, 255, 255, 0.15)
		);
}

.hero .container {
	position: relative;
	z-index: 3;
	width: min(100% - 3rem, 1320px);
}

.hero__content {
	max-width: 590px;
	padding: 5.5rem 0;
}

.hero__content h1 {
	max-width: 570px;
	margin: 0 0 1.4rem;
	color: #050505;
	font-size: clamp(3.2rem, 5.2vw, 5rem);
	font-weight: 500;
	line-height: 0.92;
	letter-spacing: -0.045em;
}

.hero__content p {
	max-width: 520px;
	margin-bottom: 1.8rem;
	color: #222;
	font-size: 1rem;
	line-height: 1.45;
}

.hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.hero__buttons .btn {
	min-height: 52px;
	padding: 0.85rem 1.45rem;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 500;
}

.hero__buttons .btn-primary {
	border: 1px solid #b52820;
	background: #d63b2e;
	color: #fff;
}

.hero__buttons .btn-primary:hover,
.hero__buttons .btn-primary:focus {
	border-color: #a9231b;
	background: #b92e24;
	color: #fff;
}

.hero__buttons .btn-dark {
	border: 1px solid #000;
	background: #000;
	color: #fff;
}

.hero__buttons .btn-dark:hover,
.hero__buttons .btn-dark:focus {
	background: #252525;
	color: #fff;
}

.hero__eyebrow {
	margin-bottom: 1rem;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* =====================================
   TABLET HERO
===================================== */

@media (max-width: 991.98px) {
	.hero {
		min-height: 520px;
	}

	.hero__background img {
		object-position: 70% center;
	}

	.hero__overlay {
		background:
			linear-gradient(
				90deg,
				rgba(255, 255, 255, 0.98) 0%,
				rgba(255, 255, 255, 0.94) 35%,
				rgba(255, 255, 255, 0.72) 58%,
				rgba(255, 255, 255, 0.3) 82%,
				rgba(255, 255, 255, 0.12) 100%
			),
			linear-gradient(
				rgba(255, 255, 255, 0.18),
				rgba(255, 255, 255, 0.18)
			);
	}

	.hero__content {
		max-width: 540px;
		padding: 4.5rem 0;
	}

	.hero__content h1 {
		font-size: clamp(3rem, 7vw, 4.4rem);
	}
}

/* =====================================
   MOBILE HERO
===================================== */

@media (max-width: 767.98px) {
	.hero {
		align-items: flex-start;
		min-height: 610px;
		margin-top: 0;
		padding-top: 0;
	}

	.hero__background {
		top: 0;
	}

	.hero__background img {
		object-position: 68% center;
	}

	.hero__overlay {
		background:
			linear-gradient(
				180deg,
				rgba(255, 255, 255, 1) 0%,
				rgba(255, 255, 255, 0.95) 22%,
				rgba(255, 255, 255, 0.75) 45%,
				rgba(255, 255, 255, 0.35) 70%,
				rgba(255, 255, 255, 0.08) 100%
			);
	}

	.hero .container {
		width: min(100% - 2rem, 1320px);
		margin-top: 0;
	}

	.hero__content {
		max-width: 100%;
		padding: 2.5rem 0;
		margin-top: 0;
	}

	.hero__content h1 {
		max-width: 480px;
		margin-bottom: 1rem;
		font-size: clamp(2.65rem, 12vw, 4rem);
		line-height: 0.96;
	}

	.hero__content p {
		max-width: 100%;
		font-size: 0.95rem;
	}

	.hero__buttons {
		flex-direction: column;
		gap: 0.75rem;
	}

	.hero__buttons .btn {
		width: 100%;
		min-height: 52px;
	}
}

.featured-listings {
	background: #fff;

	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		margin-bottom: 2rem;

		h2 {
			margin: 0;
			font-size: clamp(2rem, 4vw, 3rem);
			font-weight: 700;
		}

		a {
			color: #111;
			font-weight: 600;
			text-decoration: none;

			&:hover,
			&:focus {
				text-decoration: underline;
			}
		}
	}
}

.rental-card {
	overflow: hidden;
	border: 1px solid #dedede;
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.07);

	transition: all .3s ease;

	&:hover {
		transform: translateY(-8px);
		box-shadow: 0 24px 48px rgba(0,0,0,.12);

		img {
			transform: scale(1.05);
		}
	}

	img{
		transition: transform .4s ease;
	}

	&__image {
		position: relative;
		aspect-ratio: 4 / 3;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	&__status {
		position: absolute;
		top: 1rem;
		left: 1rem;
		padding: 0.4rem 0.75rem;
		border-radius: 999px;
		background: #fff;
		color: #111;
		font-size: 0.875rem;
		font-weight: 600;
	}

	&__content {
		padding: 1.5rem;

		h3 {
			margin-bottom: 0.5rem;
			font-size: 1.35rem;
			font-weight: 700;
		}
	}

	&__price {
		margin-bottom: 0.35rem;
		font-size: 1.15rem;
		font-weight: 700;
	}

	&__details {
		margin-bottom: 1.25rem;
		color: #555;
	}

	&__button {
		width: 100%;
		border-radius: 0.75rem;
	}


}

.rental-archive__hero {
	padding: 6rem 0;
	background: var(--color-light);
	text-align: center;
}

.rental-archive__hero h1 {
	margin-bottom: 1rem;
}

.rental-archive__intro {
	max-width: 680px;
	margin: 0 auto;
	color: var(--color-muted);
	font-size: 1.1rem;
}

.rental-archive__listings {
	padding: var(--section-spacing) 0;
}

.rental-archive__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
}

.rental-archive__count {
	margin: 0;
	color: var(--color-muted);
	font-weight: 600;
}

.rental-archive__pagination {
	margin-top: 4rem;
}

.rental-archive__pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.rental-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0.5rem 0.8rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-small);
	background: var(--color-white);
	color: var(--color-text);
	text-decoration: none;
}

.rental-archive__pagination .page-numbers:hover,
.rental-archive__pagination .page-numbers.current {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--color-white);
}

.rental-archive__empty {
	max-width: 650px;
	margin: 0 auto;
	padding: 4rem 2rem;
	border-radius: var(--radius-medium);
	background: var(--color-light);
	text-align: center;
}

.why-tosa {
	background: #faf9f7;

	.lead {
		max-width: 700px;
		margin: auto;
		color: #666;
	}
}

.feature-card {

	background: white;

	padding: 2rem;

	border-radius: 20px;

	text-align: center;

	height: 100%;

	transition: .3s ease;

	box-shadow: 0 15px 30px rgba(0,0,0,.05);

	&:hover {

		transform: translateY(-8px);

	}

	&__icon{

		font-size:3rem;

		margin-bottom:1rem;

	}

	h3{

		margin-bottom:.75rem;

		font-size:1.4rem;

	}

	p{

		color:#666;

		margin:0;

	}

}

.explore {
	padding: 7rem 0;

	img {
		width: 100%;
		height: 450px;
		object-fit: cover;
		border-radius: 24px;
	}

	&__content {

		max-width: 500px;

		h2 {
			font-size: clamp(2rem,4vw,3.5rem);
			margin-bottom: 1rem;
			font-weight: 700;
		}

		p {
			color: #666;
			line-height: 1.8;
			margin-bottom: 2rem;
		}
	}
}

.about {

	padding: 7rem 0;

	&__content{

		max-width: 850px;
		margin: auto;

		h2{
			font-size: clamp(2.2rem,4vw,3.5rem);
			margin-bottom:1.5rem;
			font-weight:700;
		}

		p{
			font-size:1.1rem;
			line-height:1.8;
			color:#666;
		}
	}
}

.section-label{

	display:inline-block;

	text-transform:uppercase;

	letter-spacing:.12em;

	font-weight:700;

	color:#b43d2d;

	margin-bottom:1rem;

	font-size:.85rem;
}

.cta{

	padding:6rem 0;

	background:#F7F4F1;

	text-align:center;

	&__wrapper{

		max-width:700px;

		margin:auto;
	}

	h2{

		font-size:clamp(2.5rem,4vw,4rem);

		margin-bottom:1rem;
	}

	p{

		color:#666;

		margin-bottom:2rem;
	}

	&__buttons{

		display:flex;

		justify-content:center;

		gap:1rem;

		flex-wrap:wrap;
	}
}

.site-footer {
	background: #111;
	color: white;
	padding: 5rem 0 2rem;

	a {
		color: white;
		text-decoration: none;

		&:hover {
			opacity: .75;
		}
	}

	h5 {
		margin-bottom: 1rem;
	}

	ul {
		list-style: none;
		padding: 0;
	}

	li {
		margin-bottom: .5rem;
	}
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 2rem;

	a {
		margin-left: 1.5rem;
	}
}

@media (max-width: 768px) {

	.footer-bottom {
		flex-direction: column;
		gap: 1rem;
		text-align: center;

		a {
			margin: 0 .75rem;
		}
	}
}


.single-rental__hero {
	padding: 4rem 0 3rem;
	background: var(--color-light);
}

.single-rental__back {
	display: inline-block;
	margin-bottom: 2rem;
	font-weight: 700;
	text-decoration: none;
}

.single-rental__heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
}

.single-rental__heading h1 {
	margin: 0.75rem 0;
}

.single-rental__location {
	margin: 0;
	color: var(--color-muted);
	font-size: 1.05rem;
}

.single-rental__status {
	display: inline-block;
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
}

.single-rental__status--available {
	background: #e7f5ea;
	color: #246b35;
}

.single-rental__status--occupied {
	background: #f3ece9;
	color: #7d3d33;
}

.single-rental__status--coming_soon {
	background: #fff4d6;
	color: #7a5b09;
}

.single-rental__price {
	margin: 0;
	color: var(--color-primary);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	white-space: nowrap;
}

.single-rental__price span {
	color: var(--color-muted);
	font-size: 1rem;
	font-weight: 600;
}

.single-rental__content {
	padding: var(--section-spacing) 0;
}

.single-rental__featured-image {
	overflow: hidden;
	margin-bottom: 3rem;
	border-radius: var(--radius-large);
	background: var(--color-light);
}

.single-rental__image {
	display: block;
	width: 100%;
	max-height: 680px;
	object-fit: cover;
}

.single-rental__layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	gap: 4rem;
	align-items: start;
}

.single-rental__summary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 0 3rem;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
	list-style: none;
}

.single-rental__summary li {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 1.5rem;
	text-align: center;
}

.single-rental__summary li + li {
	border-left: 1px solid var(--color-border);
}

.single-rental__summary strong {
	font-size: 1.5rem;
}

.single-rental__summary span {
	color: var(--color-muted);
	font-size: 0.9rem;
}

.single-rental__description,
.single-rental__amenities {
	margin-bottom: 3rem;
}

.single-rental__description h2,
.single-rental__amenities h2 {
	margin-bottom: 1.25rem;
}

.single-rental__amenities ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.single-rental__amenities li {
	padding: 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-small);
	background: var(--color-light);
}

.single-rental__inquiry-card {
	position: sticky;
	top: 2rem;
	padding: 2rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-medium);
	background: var(--color-white);
	box-shadow: var(--shadow-medium);
}

.single-rental__inquiry-card h2 {
	font-size: 1.5rem;
}

.single-rental__inquiry-card .btn {
	width: 100%;
	margin-top: 0.75rem;
}

@media (max-width: 991.98px) {
	.single-rental__layout {
		grid-template-columns: 1fr;
	}

	.single-rental__inquiry-card {
		position: static;
	}
}

@media (max-width: 767.98px) {
	.single-rental__heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.single-rental__summary {
		grid-template-columns: 1fr;
	}

	.single-rental__summary li + li {
		border-top: 1px solid var(--color-border);
		border-left: 0;
	}

	.single-rental__amenities ul {
		grid-template-columns: 1fr;
	}
}


/* Single rental header */

.single-rental__hero {
	min-height: 200px;
	padding: 6rem 0 2.5rem;
	background: #222;
	color: #fff;
}

.single-rental__hero h1,
.single-rental__hero h2,
.single-rental__hero p {
	color: #fff;
}

.single-rental__hero a {
	color: rgba(255, 255, 255, 0.8);
}

.single-rental__hero a:hover {
	color: var(--color-primary);
}



@media (max-width: 767.98px) {
	.single-rental__hero {
		min-height: 240px;
		padding: 5rem 0 2rem;
	}
}