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

/* ============================================================
   Age verification popup
   Design matched to the age gate on the live site (kratomheads.com):
   dark #111 panel on an 80% black overlay, centred white text, outlined
   pill "Enter" button. Markup comes from the woodmart_age_verify_popup()
   override in functions.php.

   Selectors are deliberately one class heavier than the theme's own
   (.wd-popup.wd-age-verify vs .wd-age-verify) because Woodmart prints
   opt-age-verify.css as an inline style that can land after this file.
   ============================================================ */

/* Overlay — live site uses rgba(0, 0, 0, .8) */
.mfp-bg:has(+ .mfp-wrap.wd-age-verify-wrap) {
	background-color: rgba(0, 0, 0, .8);
}

/* Width is read by .mfp-content off the wrapper. Also stored in the age_verify_width
   theme option, but Woodmart bakes that into a compiled CSS file, so pin it here too. */
.mfp-wrap.wd-age-verify-wrap {
	--wd-popup-width: 540px;
}

.mfp-wrap.wd-age-verify-wrap .wd-popup.wd-age-verify {
	--wd-popup-padding: 40px;

	background-color: #111;
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	text-align: center;
}

/* Title — 24/60 of the live theme's 70px heading scale */
.wd-popup.wd-age-verify h4 {
	color: #fff;
	font-size: 28px;
	font-weight: 500;
	line-height: 1.2;
	margin-bottom: 16px;
}

.wd-popup.wd-age-verify .wd-age-verify-text p {
	color: #fff;
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 0;
}

.wd-popup.wd-age-verify .wd-age-verify-buttons {
	margin-top: 25px;
}

/* Outlined pill button */
.wd-popup.wd-age-verify .wd-age-verify-buttons .btn.wd-age-verify-allowed {
	background-color: transparent;
	border: 1px solid #fff;
	border-radius: 30px;
	box-shadow: none;
	color: #fff;
	font-size: 19px;
	font-weight: 500;
	letter-spacing: normal;
	line-height: 1.25;
	padding: 11px 36px;
	text-transform: none;
	transition: background-color .1s linear, color .1s linear;
}

.wd-popup.wd-age-verify .wd-age-verify-buttons .btn.wd-age-verify-allowed:hover,
.wd-popup.wd-age-verify .wd-age-verify-buttons .btn.wd-age-verify-allowed:focus-visible {
	background-color: #fff;
	border-color: #fff;
	color: #111;
}

/* Live site steps the type down below 1024px */
@media (max-width: 1023px) {
	.wd-popup.wd-age-verify h4 {
		font-size: 23px;
	}

	.wd-popup.wd-age-verify .wd-age-verify-buttons .btn.wd-age-verify-allowed {
		font-size: 17px;
	}
}

@media (max-width: 768.98px) {
	/* Width is read by .mfp-content off the wrapper. Also stored in the age_verify_width
   theme option, but Woodmart bakes that into a compiled CSS file, so pin it here too. */
.mfp-wrap.wd-age-verify-wrap {
	--wd-popup-width: 540px;
}

.mfp-wrap.wd-age-verify-wrap .wd-popup.wd-age-verify {
		--wd-popup-padding: 30px;
	}
}

/* ============================================================
   Slider — dark image overlay
   Matches the live site, where the hero card's image carries
   .card__image--with-overlay: a full-bleed #1d1d1d layer at 36% opacity.
   Without it the white slide title and button sit straight on a bright
   photo and are hard to read.

   Woodmart's slide metabox has no overlay field (only Background color),
   so it is done here. .wd-slide-bg is position:absolute inset:0 around the
   image, and .wd-slide-container is z-index 2, so the layer lands over the
   photo and under the text. Change the value below to retune.
   ============================================================ */
.wd-slide {
	--kh-slide-overlay: rgba(29, 29, 29, .36);
}

.wd-slide .wd-slide-bg::after {
	background-color: var(--kh-slide-overlay);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/* ============================================================
   Newsletter panel
   Matches the newsletter card on the live site: #1d1d1d panel with a 10px
   radius, centred paper-plane icon, heading, joined email + submit control,
   and a muted note underneath. Paste the markup from
   snippets/newsletter.html into an Elementor Text Editor widget (it runs
   shortcodes; the HTML widget does not).

   Measured from kratomheads.com at 1280px: panel radius 10px, content column
   560px, icon 52px, heading 37px/1.2, 41px under the icon and 34px around
   the form, control 55px tall with 1px rgba(255,255,255,.6) borders.
   ============================================================ */
.kh-newsletter {
	background-color: #1d1d1d;
	border-radius: 10px;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-inline: auto;
	max-width: 1200px;
	/* The categories container above is an Elementor v4 atomic container and picks up
	   `padding: 10px` from `.e-flexbox-base`; this newsletter sits in a classic v3
	   container with no padding, so the panel was rendering 20px wider than the card
	   row and overhanging it by 10px each side. Live has the two flush (both 80->1360
	   at 1440px), so inset the panel to match the cards' content box. Not done via the
	   Elementor container because production does not enqueue its generated v4 CSS. */
	width: calc(100% - 20px);
	/* Asymmetric like the live panel, which carries extra trailing spacing. */
	padding: 60px 20px 95px;
	text-align: center;
}

.kh-newsletter > * {
	margin-inline: auto;
	max-width: 560px;
	width: 100%;
}

.kh-newsletter .kh-newsletter__iconwrap {
	line-height: 0;
	margin-bottom: 41px;
}

.kh-newsletter .kh-newsletter__icon {
	color: #fff;
	display: inline-block;
	vertical-align: middle;
}

.kh-newsletter .kh-newsletter__title {
	color: #fff;
	font-size: 37px;
	font-weight: 500;
	line-height: 1.2;
	/* margin-block only — a plain `margin: 0` would cancel the margin-inline:auto
	   from `.kh-newsletter > *` and push the title off centre. */
	margin-block: 0;
}

.kh-newsletter__form {
	margin-top: 34px;
}

.kh-newsletter__note {
	margin-top: 34px;
}

.kh-newsletter__note p {
	color: rgba(255, 255, 255, .6);
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 0;
}

/* --- The MC4WP form ---------------------------------------------------
   The form markup is Woodmart-flavoured (.row / .col / .col-auto), but the
   theme part that gives those classes their flex layout, int-mc4wp.css, is
   NOT loaded on this site: woodmart/inc/enqueue.php force-enqueues it only
   `if ( function_exists( '_mc4wp_load_plugin' ) && ! get_option( 'wd_import_theme_version' ) )`,
   and the demo import set wd_import_theme_version to 8.5.7. The theme
   otherwise pulls it in from its own Mailchimp widget/shortcode/Elementor
   element, none of which we use — this is a raw shortcode in an HTML widget.

   So the flex layout is declared here rather than inherited. Do not delete
   `display: flex` assuming the theme supplies it; without it the two <p>
   halves are block-level and the submit drops onto its own line.

   The live control is a single joined pill, so the gap goes to 0 and the two
   halves share a border: the input loses its right edge, the submit keeps all
   four. */
.kh-newsletter .mc4wp-form .row {
	--wd-gap: 0px;

	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	margin: 0;
}

.kh-newsletter .mc4wp-form .row [class*="col"] {
	margin-bottom: 0;
	padding-inline: 0;
}

.kh-newsletter .mc4wp-form .row .col {
	flex: 1 1 auto;
	min-width: 0;
}

.kh-newsletter .mc4wp-form .row .col-auto {
	flex: 0 0 auto;
}

.kh-newsletter .mc4wp-form p {
	margin-bottom: 0;
}

.kh-newsletter .mc4wp-form input[type="email"] {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 5px 0 0 5px;
	border-right-width: 0;
	box-shadow: none;
	color: #fff;
	font-size: 19px;
	height: 55px;
	padding: 12px;
	width: 100%;
}

.kh-newsletter .mc4wp-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, .6);
	opacity: 1;
}

.kh-newsletter .mc4wp-form input[type="email"]:focus {
	border-color: #fff;
}

.kh-newsletter .mc4wp-form input[type="submit"] {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 0 30px 30px 0;
	box-shadow: none;
	color: #fff;
	font-size: 19px;
	font-weight: 500;
	min-height: 55px;
	padding: 12px 35px;
	text-transform: none;
	transition: background-color .1s linear, color .1s linear;
}

.kh-newsletter .mc4wp-form input[type="submit"]:hover,
.kh-newsletter .mc4wp-form input[type="submit"]:focus-visible {
	background-color: #fff;
	border-color: #fff;
	color: #1d1d1d;
}

.kh-newsletter .mc4wp-response p {
	color: #fff;
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.kh-newsletter {
		padding: 40px 20px 60px;
	}

	.kh-newsletter .kh-newsletter__title {
		font-size: 27px;
	}

	.kh-newsletter .mc4wp-form input[type="email"],
	.kh-newsletter .mc4wp-form input[type="submit"] {
		font-size: 16px;
	}

	.kh-newsletter .mc4wp-form input[type="submit"] {
		padding-inline: 22px;
	}
}

/* Below 576px the live site stops joining the two halves and stacks them:
   a full-width field with a full-width pill button underneath. */
@media (max-width: 575px) {
	.kh-newsletter .mc4wp-form .row {
		flex-wrap: wrap;
	}

	.kh-newsletter .mc4wp-form .row .col,
	.kh-newsletter .mc4wp-form .row .col-auto {
		flex: 1 1 100%;
	}

	.kh-newsletter .mc4wp-form input[type="email"] {
		border-radius: 5px;
		border-right-width: 1px;
	}

	.kh-newsletter .mc4wp-form input[type="submit"] {
		border-radius: 30px;
		margin-top: 10px;
		width: 100%;
	}
}