/* ==========================================================================
   DLS mobile layer. Loaded after the child theme's style.css.
   Desktop (1240px and up) keeps its look. Nearly every rule sits in a tablet or
   phone media query; the one exception is the readability fix in section 0.
   ========================================================================== */

/* ---------- 0. All sizes: product description was beige text on an off-white panel ---------- */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce-Tabs-panel {
	background-color: #181818 !important;
	color: #cfc9bb;
}
.woocommerce-Tabs-panel h2,
.woocommerce-Tabs-panel h3 {
	color: #ece6d6;
}

/* ---------- 1. Small laptops and large tablets (1024px to 1239px) ----------
   Slider Revolution uses its desktop sizes up to 1240px; shrink the hero title there
   so it stays inside the screen. */
@media only screen and (min-width: 1024px) and (max-width: 1239px) {
	#rev_slider_1_1 .tp-caption[id$="-layer-3"],
	#rev_slider_1_1 .tp-caption[id$="-layer-3"] > div,
	#rev_slider_1_1 .tp-caption[id$="-layer-3"] .tp-splitted {
		font-size: 54px !important;
		line-height: 68px !important;
		letter-spacing: 12px !important;
	}
}

/* ---------- 2. Tablet and phone (1024px and below) ---------- */
@media only screen and (max-width: 1024px) {
	html,
	body,
	.edgt-wrapper,
	.edgt-wrapper-inner {
		background-color: #101010;
	}

	/* Fixed (parallax) backgrounds: iOS ignores them and stretches the image over
	   the whole page height. Scroll with the section instead. */
	.edgt-section,
	.vc_row[data-edgt-parallax-speed],
	.edgt-parallax-section-holder {
		background-attachment: scroll !important;
		background-position: center center !important;
		background-size: cover !important;
	}

	/* Header and slide-out menu: dark, like the rest of the site. The menu used to be
	   pale text on a white panel on most pages. */
	.edgt-mobile-header .edgt-mobile-header-inner,
	.edgt-mobile-header .edgt-mobile-nav {
		background-color: #101010 !important;
		border-bottom: 1px solid #2c2a26;
	}
	.edgt-mobile-header .edgt-mobile-logo-wrapper img {
		filter: invert(1) brightness(1.15); /* dark logo file, shown light on the dark bar */
	}
	.edgt-mobile-header .edgt-mobile-menu-opener a,
	.edgt-mobile-header .edgt-mobile-menu-opener i {
		color: #ece6d6 !important;
		font-size: 22px;
	}
	.edgt-mobile-header .edgt-mobile-menu-opener {
		padding-right: 12px; /* bigger tap area */
	}
	.edgt-mobile-header .edgt-mobile-nav a,
	.edgt-mobile-header .edgt-mobile-nav h4 {
		color: #ece6d6 !important;
		font-size: 16px !important;
		padding-top: 13px !important;
		padding-bottom: 13px !important;
		border-bottom-color: #2c2a26 !important;
	}
	.edgt-mobile-header .edgt-mobile-nav .current-menu-item > a,
	.edgt-mobile-header .edgt-mobile-nav a:hover {
		color: #c8a96a !important;
	}
	.edgt-mobile-header .edgt-mobile-nav .mobile_arrow,
	.edgt-mobile-header .edgt-mobile-nav .mobile_arrow i {
		color: #ece6d6 !important;
	}

	/* 404: the page has no footer, so the white page showed under the message */
	body.error404 .edgt-content {
		background-color: #101010 !important;
	}
}

/* ---------- 2b. Artistry gallery on touch screens ----------
   On a computer with a mouse the gallery scrolls sideways (the theme turns the wheel
   into sideways movement), so it is left alone at every width. Touch tablets have no
   wheel and got a 2500px-wide page; phones showed a cropped corner of each painting.
   On touch screens it becomes a normal vertical gallery. */
@media only screen and (max-width: 1024px) and (hover: none), only screen and (max-width: 750px) {
	body.edgt-horizontally-scrolling-portfolio-list-page {
		overflow-x: hidden !important;
	}
	.edgt-horizontally-scrolling-portfolio-list-page .edgt-mobile-header,
	.edgt-horizontally-scrolling-portfolio-list-page .edgt-mobile-header-inner,
	.edgt-horizontally-scrolling-portfolio-list-page .edgt-mobile-header-holder {
		width: 100% !important;
		display: block !important;
	}
	.edgt-horizontally-scrolling-portfolio-list-holder {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		overflow: visible !important;
	}
	.edgt-horizontally-scrolling-portfolio-list-holder .edgt-hspl-cover-image {
		width: 100% !important;
		height: 56vh !important;
		min-height: 340px;
		max-height: 560px;
		position: relative !important;
		float: none !important;
	}
	.edgt-hspl-images-holder,
	.edgt-hspl-images-row {
		height: auto !important;
		width: 100% !important;
		float: none !important;
		position: static !important;
	}
	.edgt-hspl-images-row {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
		margin-bottom: 6px;
	}
	.edgt-hspl-images-row .edgt-hspl-item {
		width: auto !important;
		height: auto !important;
		float: none !important;
	}
	.edgt-hspl-images-row .edgt-hspl-item a {
		display: block;
		width: 100% !important;
		height: auto !important;
	}
	.edgt-hspl-images-row .edgt-hspl-item img {
		width: 100% !important;
		height: auto !important;
		max-width: 100% !important;
		aspect-ratio: 4 / 3;
		object-fit: cover;
		display: block;
	}
}
@media only screen and (max-width: 600px) {
	.edgt-hspl-images-row {
		grid-template-columns: 1fr;
	}
}

/* ---------- 3. Phone (767px and below) ---------- */
@media only screen and (max-width: 767px) {
	/* Use the screen: 16px side gutters instead of a fixed 300px column */
	.edgt-container-inner,
	.edgt-grid,
	.edgt-grid-section .edgt-section-inner,
	.edgt-title .edgt-title-holder .edgt-container-inner {
		width: calc(100vw - 32px) !important;
	}

	/* Headings: big display titles were wider than the screen (CONTACT US was 100px) */
	.edgt-content h1 {
		font-size: clamp(34px, 13vw, 60px) !important;
		line-height: 1.1 !important;
		overflow-wrap: break-word;
	}
	.edgt-content h2 {
		overflow-wrap: break-word;
	}
	.single-product .edgt-content h1,
	.single-product .product_title,
	.single-product .edgt-single-product-title {
		font-size: 34px !important;
		line-height: 1.15 !important;
	}

	/* Forms: two fields side by side were too narrow to read; stack them */
	.edgt-cf7-50-50 .edgt-cf7-col-left,
	.edgt-cf7-50-50 .edgt-cf7-col-right {
		width: 100% !important;
		float: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.comment-form input[type="text"],
	.comment-form input[type="email"],
	.comment-form input[type="url"] {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="search"],
	textarea,
	select {
		font-size: 16px !important; /* below 16px iPhones zoom the page when you tap a field */
	}

	/* Blog post cast grid: two across instead of one huge picture per screen */
	.dls-cast {
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
	}
}