/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/


/* =========================================================
   PAAMWOOD LOCATIONS
   WOODMART / ELEMENTOR NATIVE
   ========================================================= */

.pw-locations-wrap {
	width: 100%;
	margin: 0;
	padding: 32px;

	background-color: var(--wd-main-bgcolor, #fff);
	border-radius: var(--wd-brd-radius, 0);

	box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.pw-locations-header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;
	margin: 0 0 24px;

	width: 100%;
	min-width: 0;
}


/* =========================================================
   LOCATION HEADING
   WOODMART TITLE SYSTEM
   ========================================================= */

.pw-location-heading {
	flex: 1 1 auto;
	min-width: 0;

	display: block;

	margin: 0;
	padding: 0;

	color: var(--wd-title-color);
	text-transform: var(--wd-title-transform);

	font-family: var(--wd-title-font);
	font-weight: var(--wd-title-font-weight);
	font-style: var(--wd-title-font-style);

	/*
	 * Keep font-size inherited so Woodmart /
	 * Elementor responsive typography can control it.
	 */
	font-size: inherit;

	line-height: 1.4;

	overflow-wrap: break-word;
	word-wrap: break-word;
}


/* =========================================================
   TOP CONTACT BUTTON
   ORIGINAL PAAMWOOD STYLE
   ========================================================= */

.pw-contact-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	gap: 8px;

	padding: 9px 17px;
	min-height: 34px;

	border: 1px solid transparent;
	border-radius: 50px;

	background: #ffa35f;
	color: #fff;

	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.2;

	text-decoration: none !important;

	transition:
		background-color .25s ease,
		border-color .25s ease,
		color .25s ease;
}


/* TOP BUTTON HOVER */

.pw-contact-button:hover {
	background: var(--wd-primary-color, #333);
	border-color: var(--wd-primary-color, #333);
	color: #fff;
}


/* =========================================================
   MAIN LOCATION CARD
   ========================================================= */

.pw-locations-card {
	display: flex;
	align-items: stretch;

	gap: 28px;

	width: 100%;
	min-width: 0;

	padding: 22px;

	background-color: var(--wd-main-bgcolor, #fff);
	border-radius: var(--wd-brd-radius, 0);

	box-sizing: border-box;
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

.pw-locations-left {
	flex: 1 1 50%;
	min-width: 0;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.pw-locations-right {
	flex: 1 1 50%;
	min-width: 0;

	display: flex;
	align-items: stretch;
}


/* =========================================================
   MAIN IMAGE
   ========================================================= */

.pw-locations-right img {
	display: block;

	width: 100%;
	max-width: 100%;
	height: 315px;

	object-fit: cover;

	border-radius: var(--wd-brd-radius, 0);

	vertical-align: middle;
}


/* =========================================================
   CITY GRID
   ========================================================= */

.pw-city-grid {
	display: grid;

	grid-template-columns: repeat(5, minmax(0, 1fr));

	gap: 25px 8px;

	width: 100%;
	min-width: 0;
}


/* =========================================================
   CITY ITEM
   ========================================================= */

.pw-city-item,
.pw-city-contact {
	display: flex;
	flex-direction: column;
	align-items: center;

	min-width: 0;

	text-align: center;

	color: inherit;
	text-decoration: none !important;
}


.pw-city-item > a {
	display: flex;
	flex-direction: column;
	align-items: center;

	width: 100%;
	min-width: 0;

	color: inherit;
	text-decoration: none !important;
}


/* =========================================================
   CITY IMAGE / CONTACT CIRCLE
   ========================================================= */

.pw-city-item img,
.pw-city-placeholder,
.pw-contact-circle {
	width: 76px;
	height: 76px;

	flex: 0 0 76px;

	box-sizing: border-box;

	border-radius: 50%;
}


/* =========================================================
   CITY IMAGE
   ========================================================= */

.pw-city-item img {
	display: block;

	object-fit: cover;

	border: 1px solid var(
		--wd-form-brd-color,
		rgba(0, 0, 0, .1)
	);

	transition:
		transform .25s ease,
		box-shadow .25s ease;
}


/* CITY IMAGE HOVER */

.pw-city-item:hover img {
	transform: translateY(-3px);
}


/* =========================================================
   EMPTY CITY IMAGE
   ========================================================= */

.pw-city-placeholder {
	border: 1px solid var(
		--wd-form-brd-color,
		rgba(0, 0, 0, .1)
	);

	background-color: transparent;
}


/* =========================================================
   CITY NAME
   WOODMART TEXT SYSTEM
   ========================================================= */

.pw-location-name {
	margin-top: 8px;

	color: var(--wd-text-color);

	font-family: var(--wd-text-font);
	font-weight: var(--wd-text-font-weight);
	font-style: var(--wd-text-font-style);

	font-size: var(--wd-text-font-size);
	line-height: var(--wd-text-line-height);

	text-decoration: none;

	overflow-wrap: break-word;
	word-wrap: break-word;
}


/* =========================================================
   CONTACT CIRCLE
   ========================================================= */

.pw-contact-circle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	background-color: var(
		--bgcolor-gray-200,
		#f1f1f1
	);

	color: var(--wd-text-color);

	transition:
		background-color .25s ease,
		color .25s ease;
}


/* CONTACT CIRCLE TEXT */

.pw-contact-circle strong,
.pw-contact-circle span {
	color: inherit;

	font-family: var(--wd-text-font);
}


/* CONTACT CIRCLE TITLE */

.pw-contact-circle strong {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
}


/* CONTACT CIRCLE SUBTEXT */

.pw-contact-circle span {
	margin-top: 2px;

	font-size: 11px;
	line-height: 1.2;
}


/* CONTACT CIRCLE HOVER */

.pw-city-contact:hover .pw-contact-circle {
	background-color: var(
		--wd-primary-color,
		#333
	);

	color: #fff;
}


/* =========================================================
   BOTTOM ACTION BUTTONS
   ORIGINAL PAAMWOOD STYLE
   ========================================================= */

.pw-location-buttons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	gap: 8px;

	margin-top: 28px;

	width: 100%;
	min-width: 0;
}


/* =========================================================
   LOCATION BUTTON
   ========================================================= */

.pw-location-button {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	gap: 5px;

	padding: 9px 18px;
	min-height: 38px;

	border: 1px solid var(--wd-primary-color, #333);
	border-radius: 50px;

	background: transparent;
	color: var(--wd-primary-color, #333);

	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: 1.2;

	text-decoration: none !important;

	transition:
		background-color .25s ease,
		border-color .25s ease,
		color .25s ease;
}


/* LOCATION BUTTON HOVER */

.pw-location-button:hover {
	background: var(--wd-primary-color, #333);
	border-color: var(--wd-primary-color, #333);
	color: #fff;
}


/* BUTTON CONTENT */

.pw-location-button span,
.pw-contact-button span {
	line-height: 1;
}


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

@media (max-width: 1100px) {

	.pw-locations-wrap {
		padding: 26px;
	}

	.pw-locations-card {
		gap: 22px;
	}

	.pw-city-grid {
		grid-template-columns: repeat(
			4,
			minmax(0, 1fr)
		);
	}

	.pw-locations-right img {
		height: 300px;
	}
}


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

@media (max-width: 767px) {

	.pw-locations-wrap {
		padding: 20px;
	}

	.pw-locations-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.pw-location-heading {
		width: 100%;
		max-width: 100%;
		line-height: 1.4;
	}

	.pw-contact-button {
		align-self: flex-start;
	}

	.pw-locations-card {
		flex-direction: column;
		gap: 25px;
		padding: 18px;
	}

	.pw-locations-left,
	.pw-locations-right {
		width: 100%;
		max-width: 100%;
		flex: 1 1 100%;
	}

	.pw-city-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px 8px;
	}

	.pw-locations-right img {
		width: 100%;
		height: 260px;
	}

	.pw-location-buttons {
		margin-top: 24px;
		width: 100%;
	}
}


/* =========================================================
   WOODMART-LIKE MOBILE TITLE SIZE
   ONLY PAAMWOOD LOCATIONS HEADING
   ========================================================= */

@media (max-width: 576px) {

	.pw-locations-wrap .pw-locations-header .pw-location-heading {
		font-size: 20px !important;
		font-weight: 900 !important;
		line-height: 1.3 !important;
	}
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

	.pw-locations-wrap {
		padding: 15px;
	}

	.pw-locations-card {
		padding: 14px;
	}

	.pw-city-item img,
	.pw-city-placeholder,
	.pw-contact-circle {
		width: 68px;
		height: 68px;

		flex-basis: 68px;
	}

	.pw-location-heading {
		width: 100%;
		max-width: 100%;

		font-size: inherit;
		line-height: 1.4;
	}

	.pw-location-buttons {
		flex-direction: column;
		align-items: stretch;

		width: 100%;
	}

	.pw-location-button {
		width: 100%;
		max-width: 100%;
	}

	.pw-locations-right img {
		width: 100%;
		height: 220px;
	}
}