/*
Theme Name: Hello Elementor Child - Blend Sales
Theme URI: https://blendsalesinc.com
Description: Child theme for Blend Sales Inc. Replaces Stockholm 8.8, which carried
             unpatched unauthenticated LFI (CVE-2024-34551) and two Stockholm Core LFIs.
             Header and footer are Elementor Pro Theme Builder templates.
Author: Armour Creative
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/*
 * Stockholm zeroed the browser's default heading and paragraph margins, and all
 * vertical rhythm on this site comes from Elementor section/column padding
 * instead. Hello Elementor leaves the defaults in place, which added ~60px to
 * every text block. Measured off blendsalesinc.com: h2 and p both margin 0,
 * small renders at 14.1667px against a 17px base (0.8333em, not Hello's 0.8).
 */
.elementor h1,
.elementor h2,
.elementor h3,
.elementor h4,
.elementor h5,
.elementor h6,
.elementor p {
	margin: 0;
}

.elementor small {
	/*
	 * Live is 0.8333em, which is 14.1667px against the 17px base. That is under
	 * Jason's 16px web-text minimum, and this <small> carries real body copy
	 * ("While this is not a retail website..."), not a legal footnote. Floored
	 * at 16px, so it still reads a touch smaller than the 17px around it.
	 * Live's value is the line above in the comment if this needs reverting.
	 */
	font-size: 16px;
}

/*
 * Stockholm wrapped default-template pages in .container_inner.default_template_holder:
 * max-width 1120px, 44px of top padding. Home and Contact were full-width-template pages
 * with no wrapper, and ran to the kit's 1140. Measured off blendsalesinc.com.
 * Scoped to the page content so the header and footer templates are untouched.
 *
 * 11/11/2026: these used to rely on Home and Contact NOT carrying page-template-default,
 * which was true only while they pointed at Stockholm's full_width.php. Clearing those
 * dead template pointers handed both pages that very class and pulled them into these
 * rules, capping the homepage at 1120 and adding 44px of padding the live site does not
 * have. The two page IDs are now excluded explicitly, so this no longer depends on a
 * template file that was deleted on purpose.
 */
body.page-template-default:not(.page-id-140):not(.page-id-618) [data-elementor-type="wp-page"] {
	max-width: 1120px;
	margin: 0 auto;
	padding-top: 44px;
}

/*
 * Paragraph spacing is not uniform on the live site, so neither is this.
 * Measured on blendsalesinc.com: full-width-template pages (home, contact) run
 * paragraphs flush at margin 0, while default-template pages (vendors and the
 * 23 brand pages) carry Stockholm's 15px bottom margin. Headings are 0 on both.
 */
body.page-template-default:not(.page-id-140):not(.page-id-618) [data-elementor-type="wp-page"] p {
	margin: 0 0 15px;
}

/*
 * Contact Form 7 fields. Stockholm styled these; Hello Elementor does not, which
 * cost the form its 15px field spacing (121px of page height) and its borders.
 * Every value below is measured off the live /contact/ form.
 * ACCESSIBILITY OVERRIDE, Jason 11/6-11/7/2026: "increase it" / "Fix it on local".
 * Live is 13.3333px fields, 12px button, #8d8d8d field text. All three are below
 * standard: the text sizes are under his 16px web minimum, and #8d8d8d on white
 * measures 3.32:1, under the 4.5:1 WCAG AA floor for normal text.
 * So these deliberately DO NOT match live:
 *   font-size 13.3333px -> 16px   (also stops iOS Safari auto-zooming on tap)
 *   button 12px          -> 16px
 *   color #8d8d8d        -> #4f4d51, the brand body colour, 8.36:1 on white
 * The field BOX still matches live exactly at 42px tall: padding drops 10px->8px
 * and line-height rises 18px->22px, so 4 border + 16 padding + 22 line = 42.
 * Everything else below is still measured off the live /contact/ form.
 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	margin: 0 0 15px;
	padding: 8px 17px;	/* was 10px; absorbs the taller line-height, box stays 42px */
	border: 2px solid transparent;
	border-radius: 0;
	background-color: #fff;
	color: #4f4d51;
	font-family: "Didact Gothic", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;	/* was 18px for 13.3333px text; scaled to hold the 42px box */
}

.wpcf7 textarea {
	padding: 15px 17px;
}

.wpcf7 input[type="submit"] {
	margin: 0;
	padding: 0 22px;
	height: 41px;
	border: 2px solid #2d2d2d;
	border-radius: 0;
	background-color: #2d2d2d;
	color: #fff;			/* 13.77:1 on #2d2d2d, passes AA comfortably */
	font-family: "Didact Gothic", sans-serif;
	font-size: 16px;		/* was 12px */
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/*
 * Each field sits inside its own <label>. Live leaves those inline and stretches the
 * controls to the column instead; without the width the inputs shrink-wrap to
 * their label text, so "State" and "Zip" ended up side by side at different
 * widths. Live renders every control at the full 672px column width.
 */
.wpcf7 form {
	line-height: 23px;	/* live; the kit body rule would make it 26 */
}

.wpcf7 label {
	display: inline;	/* Hello sets inline-block, which shrink-wraps the field */
	line-height: 23px;	/* live */
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
}

/*
 * Stockholm's responsive grid ladder (.container_inner, qode_grid_1200).
 * Without it the content wrapper kept its desktop width all the way down and
 * then ran edge to edge on phones -- text sat 10px from the screen edge where
 * live holds a 38px gutter. Every width below was measured off
 * blendsalesinc.com/bissingers/ at that viewport.
 */
@media (max-width: 1300px) {
	body.page-template-default:not(.page-id-140):not(.page-id-618) [data-elementor-type="wp-page"] { max-width: 1100px; }
}

@media (max-width: 1200px) {
	body.page-template-default:not(.page-id-140):not(.page-id-618) [data-elementor-type="wp-page"] { max-width: 950px; }
}

@media (max-width: 1000px) {
	body.page-template-default:not(.page-id-140):not(.page-id-618) [data-elementor-type="wp-page"] { max-width: 768px; }
}

@media (max-width: 768px) {
	body.page-template-default:not(.page-id-140):not(.page-id-618) [data-elementor-type="wp-page"] { max-width: 600px; }
}

@media (max-width: 600px) {
	body.page-template-default:not(.page-id-140):not(.page-id-618) [data-elementor-type="wp-page"] { max-width: 420px; }
}

@media (max-width: 480px) {
	body.page-template-default:not(.page-id-140):not(.page-id-618) [data-elementor-type="wp-page"] { max-width: 300px; }
}

/*
 * Mobile header. Live switches at 1000px (Qode's breakpoint) to a 100px-tall
 * bar with the logo centred and the burger pinned 15px from the left edge.
 * Elementor's nav-menu switches at its own tablet breakpoint (1024) and leaves
 * the logo flush left with the toggle pushed off the right edge of a phone --
 * measured at 375px, the toggle started at x=362 on a 375px screen.
 * Live values: header 100 tall, logo 161x72 centred, burger x=15.
 */
@media (min-width: 1001px) and (max-width: 1024px) {
	/* Live is still showing the desktop nav in this band. */
	[data-elementor-type="header"] .elementor-menu-toggle {
		display: none;
	}

	[data-elementor-type="header"] .elementor-nav-menu--main {
		display: block;
	}
}

@media (max-width: 1000px) {
	[data-elementor-type="header"] > .elementor-section > .elementor-container {
		position: relative;
		min-height: 100px;
		align-items: center;
	}

	[data-elementor-type="header"] .elementor-column:first-child {
		width: 100%;
	}

	/* Beats Elementor's generated .elementor-element-xxx align/width rules. */
	[data-elementor-type="header"] .elementor-widget-image .elementor-widget-container {
		text-align: center;
	}

	[data-elementor-type="header"] .elementor-widget-image .elementor-widget-container img {
		width: 161px;
	}

	[data-elementor-type="header"] .elementor-column:last-child {
		position: absolute;
		top: 0;
		left: 15px;
		width: auto;
		height: 100%;
	}

	[data-elementor-type="header"] .elementor-column:last-child .elementor-widget-wrap {
		align-items: center;
		height: 100%;
		padding: 0;
	}

	/* toggle_align is "right" for desktop; live pins the burger to the left.
	   The widget container is the flex parent, and the desktop -20px pull
	   has to come off too. */
	[data-elementor-type="header"] .elementor-column:last-child .elementor-widget-container {
		justify-content: flex-start;
		margin: 0;
		padding: 0;
	}

	[data-elementor-type="header"] .elementor-column:last-child .elementor-menu-toggle {
		margin: 0;
		padding: 0;
		background-color: transparent;	/* Elementor draws a grey chip; live is a bare icon */
	}
}

/* ---------------------------------------------------------------------------
 * Rescued from the Customizer's Additional CSS, which WordPress keys to the
 * ACTIVE theme's slug. That record is post_name="stockholm", so both rules
 * went dead the moment the theme switched and nothing said so. Geometry checks
 * could not catch it: the overlay is absolutely positioned, so a missing rule
 * does not move document height.
 *
 * Verbatim from wp_posts custom_css (post_name=stockholm). Lives here now so a
 * future theme switch cannot orphan it again.
 * ------------------------------------------------------------------------ */
.wpcf7 form.sent .wpcf7-response-output {
	color: black;
}

.elementor-portfolio-item__overlay {
	position: absolute;
	opacity: 1;
	top: auto;
}

/*
 * The mobile menu toggle renders 123x22. Everything interactive on this site
 * now clears the 24x24 minimum except this, and it misses by 2px on one axis.
 *
 * Measured 11/9/2026 at a 375px viewport: 37 interactive elements, and the only
 * two under 24x24 were this and the skip link, which is 1x1 only while it is
 * unfocused and goes full size the moment it is tabbed to.
 *
 * min-height rather than padding: the toggle is a flex box that centres its
 * icon, so growing the box leaves the icon exactly where it was.
 */
.elementor-menu-toggle {
	min-height: 24px;
	/*
	 * min-width joined it on 11/10/2026. Pulling the open dropdown out of flow
	 * (see the mobile-menu block at the end of this file) let the auto-width
	 * nav column collapse to the burger glyph, so the toggle went from 123x24
	 * to 22x24 and failed on the other axis instead.
	 */
	min-width: 24px;
}

/*
 * Elementor's own default is white button text, and that is what live renders.
 * It only held on live because Stockholm outranked the global kit; with
 * Stockholm gone, `.elementor-kit-386 a{color:#407477}` wins on specificity and
 * every link-button picks up the teal body-link colour. Teal on the button's
 * #69727d grey measures about 1.3:1, against a 4.5:1 floor. White on that grey
 * is 4.82:1, and is byte-for-byte what live shows.
 *
 * Scoped to .elementor-button-link, which is the only set the stray `a` rule can
 * reach: form submits are <button> and were never affected. Two classes outrank
 * the kit's one-class-one-type rule without touching anything Elementor emits
 * per widget, which carries at least three classes.
 */
.elementor-button.elementor-button-link,
.elementor-button.elementor-button-link:hover,
.elementor-button.elementor-button-link:focus,
.elementor-button.elementor-button-link:visited {
	color: #fff;
}

/*
 * Elementor's .elementor-size-sm default is 15px, which is what live renders
 * and which is under the 16px web-text minimum. Same call as the contact form's
 * 12px submit button. The box grows about 7% wider; the labels are short
 * catalogue names and none of them wrap.
 */
.elementor-button.elementor-size-sm {
	font-size: 16px;
}

/*
 * Brand-tile captions. Elementor Pro's own default paints the overlay
 * rgba(105, 114, 125, .8) and the title white; Jason's rescued rule above
 * pins it open at opacity 1, so these names sit on screen permanently rather
 * than on hover. Over a white product photo that overlay composites to
 * #878e97, and white 18px text on it measures 3.30:1 against a 4.5:1 floor.
 * Live does exactly the same thing -- this is not something the theme swap
 * introduced.
 *
 * Darkening the overlay rather than raising its alpha, so the photo keeps
 * showing through, same call as the hero panel. rgba(68, 79, 93, .8) over
 * white composites to #69727d, which is 4.82:1 against white text, and any
 * photo darker than white only improves it. White stays the text colour.
 *
 * 25 names on the homepage grid, 28 portfolio widgets site-wide, all from this
 * one plugin default -- no widget overrides it.
 */
.elementor-portfolio-item__overlay {
	background-color: rgba(68, 79, 93, 0.8);
}

/*
 * Image-carousel pagination dots on the brand pages. Swiper draws them 6x6 on
 * an 18px pitch, which fails WCAG 2.2 AA target size twice over: the target is
 * under 24x24, and the spacing exception does not rescue it either, because
 * 24px circles centred on dots 18px apart overlap each other.
 *
 * The box grows to a real 24x24 and the dot stays 6x6, done with a transparent
 * 9px border rather than a pseudo-element. The border makes the border box
 * 24x24 while leaving a 6x6 content box, background-clip keeps the paint inside
 * that content box, and Swiper's existing border-radius:50% resolves to an
 * inner radius of 12 - 9 = 3px on a 6x6 box, which is still a circle. The
 * element keeps its own background-color and opacity throughout, so Swiper's
 * active/inactive states and anything Jason later sets in Elementor's
 * Pagination controls carry through untouched.
 *
 * A pseudo-element hit area was the first attempt. It works for a real pointer
 * but not for the audit: getBoundingClientRect still reads 6x6, so every
 * automated target-size check still fails it. The box itself has to grow.
 *
 * Gap goes to 0 so the 24px boxes butt together and the pitch is exactly 24.
 * It goes through Swiper's own custom property, which is what Swiper's rule
 * reads; a margin here would not have landed, because e-swiper.css sets the
 * property on .elementor-element and the rule consuming it is
 * .swiper-pagination-horizontal.swiper-pagination-bullets
 * .swiper-pagination-bullet, which outranks a two-class selector.
 *
 * Visible change: the dots sit 24px apart instead of 18, so a six-dot row is
 * 48px wider, still centred. Live has the same 6x6 dots on the same 18px
 * pitch; this is an improvement on live, not a repair.
 */
.elementor-element.elementor-widget-image-carousel {
	--swiper-pagination-bullet-horizontal-gap: 0px;
}

.elementor-widget-image-carousel .swiper-pagination-bullet {
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border: 9px solid transparent;
	background-clip: padding-box;
}

/*
 * Breathing room above the grey footer band.
 *
 * Content ran straight into the band on every page: the footer section's own
 * padding is 21/20, so the copyright line had space but the band itself butted
 * up against whatever the page ended on. Only the homepage had anything in
 * between -- a trailing spacer widget -- and the other 25 pages had nothing.
 *
 * 48px, which is the gap the tidied brand pages now use between their own
 * blocks, doubled. Set on the footer rather than on the pages so it lands
 * everywhere at once and does not depend on a spacer somebody can delete in
 * the editor. Jason 11/10/2026: "add some margin over the footer".
 */
.elementor-location-footer {
	margin-top: 48px;
}

/*
 * The acceptance checkbox on /contact/ renders at the browser's default 13x13,
 * which fails WCAG 2.2 SC 2.5.8 (24x24 minimum). Live has the same checkbox at
 * the same size, so this is an improvement on live, not a repair.
 *
 * Sized rather than hidden-and-redrawn: a real checkbox keeps its native
 * keyboard behaviour, its focus ring and its announcement to a screen reader,
 * all of which a styled pseudo-element replacement has to reimplement. The
 * accent-color keeps the checked state on the brand teal instead of the
 * browser's blue.
 */
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
	width: 24px;
	height: 24px;
	margin: 0 8px 0 0;
	vertical-align: middle;
	accent-color: #407477;
}

/*
 * Mobile menu: keep the open dropdown out of the header's flow.
 *
 * Elementor only gives the dropdown position:absolute when the widget's
 * "stretch" option is on; otherwise it sits in flow and simply pushes the
 * header taller, which is fine in a header whose height is auto.
 *
 * This header's nav column is not: the rule further up pins it absolute at
 * height 100% so the burger can sit left of a centred logo, and Elementor's
 * own generated rule bottom-aligns that column's widget-wrap. Between them an
 * in-flow dropdown grows UPWARD out of the header. Measured at 375px with the
 * menu open: the toggle jumped from top 66 to -114 and the three items landed
 * at -80, -20 and 40, so "Shop Online" was entirely off-screen and "Vendors"
 * was half cut off. Only "Contact Us" was reachable.
 *
 * Taking it out of flow pins it directly under the 100px header and leaves the
 * toggle where it was. left:-15px cancels the column's own left:15px so the
 * panel spans the viewport; both numbers belong to the same block above.
 */
@media (max-width: 1000px) {
	[data-elementor-type="header"] .elementor-nav-menu__container.elementor-nav-menu--dropdown {
		position: absolute;
		top: 100%;
		left: -15px;
		width: 100vw;
		z-index: 9997;
		margin-top: 0;
		background-color: #fff;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
	}
}