/*
Theme Name:   Hello Elementor Child
Theme URI:    https://hanfoels.de/
Description:  Child theme for Hello Elementor. Holds custom CSS and PHP for Hemp-Complete so that parent-theme updates never overwrite site-specific work.
Author:       Hemp-Complete
Template:     hello-elementor
Version:      1.4.1
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  hello-elementor-child
*/

/* =========================================================================
 * HEADER
 * Only what Elementor's own controls cannot express. Everything else
 * (colours, spacing, visibility, breakpoints) is set in the Elementor
 * template so it stays editable in the UI.
 * ====================================================================== */

/* Reference order inside the cart toggle is [icon] [price]; Elementor outputs
   [price] [icon]. Flip it rather than restructuring the widget. */
#masthead .elementor-menu-cart__toggle .elementor-button {
	flex-direction: row-reverse;
	gap: 8px;
	align-items: center;
}

/* The count bubble sits over the cart glyph in the reference. */
#masthead .elementor-menu-cart__toggle .elementor-button-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* Below the desktop breakpoint the reference shows icons only — no subtotal. */
@media (max-width: 1024px) {
	#masthead .elementor-menu-cart__toggle .elementor-button-text {
		display: none;
	}
}

/* The logo is now a raster file with an intrinsic size, so it no longer needs
   the `width: 100%` this rule used to carry for the SVG. That declaration also
   sat behind an ID selector, which outranked Elementor's own per-widget width
   and made the logo unsizable from the editor — keep only the safe bits. */
#masthead .elementor-widget-image img {
	height: auto;
	display: block;
}

/* The logo sits in an inline-block <a>, and the widget's own 24px line box
   added ~7px of descender space under it, pushing the row past its min-height.
   Elementor 4 no longer emits .elementor-widget-container, so the line height
   has to be zeroed on the widget element itself for the row height to be
   purely a function of min-height again. */
#masthead .elementor-widget-image,
#masthead .elementor-widget-image a {
	line-height: 0;
}

/* The burger lives in a 25%-wide cell, which would otherwise confine the
   dropdown to that cell. Anchor it to the header row and let it span the
   full viewport, like the reference off-canvas panel. */
@media (max-width: 1024px) {
	#masthead .e-con.e-parent {
		position: relative;
	}

	/* Elementor positions every container and the nav-menu widget itself, so
	   the dropdown was resolving `top: 100%` against the 24px burger cell and
	   opening 24px wide. Taking the intermediate cells out of the positioning
	   chain lets it reach the header row above. */
	#masthead .e-con.e-child,
	#masthead .elementor-widget-nav-menu {
		position: static;
	}

	/* Anchor to the header row rather than 100vw: on a page with a vertical
	   scrollbar, 100vw is wider than the viewport and causes sideways scroll. */
	#masthead .elementor-nav-menu--dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		/* Elementor's dropdown "distance" adds 10px, which reads as a detached
		   floating panel now that the sheet spans the full header width. */
		margin-top: 0;
		background-color: #fff;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
		z-index: 999;
	}

	#masthead .elementor-nav-menu--dropdown a.elementor-item {
		padding: 16px 20px;
		font-size: 16px;
		color: #004c45;
		border-bottom: 1px solid rgba(0, 76, 69, 0.08);
	}
}

/* =========================================================================
 * FOOTER
 * The reference footer has a full-bleed green background with its content
 * capped at 1200px and centred. A fixed width on the row would box the
 * background too, so the cap is done with padding instead.
 * ====================================================================== */

/* HFE nests the rows as footer > .footer-width-fixer > .elementor > .e-con,
   so this must not be written as a direct child of <footer>. Two classes plus
   an element also outranks Elementor's single-class atomic padding rule. */
footer .elementor > .e-con {
	padding-inline: max(20px, calc((100% - 1200px) / 2));
}

/* Reference type scale: headings 16/700 mint, links 16 white, legal 12 mint. */
footer .elementor-nav-menu a.elementor-item {
	padding: 6px 0;
	font-size: 16px;
}

/* =========================================================================
 * PAGE CONTENT — mobile gutter
 * The legal pages put body copy in a boxed container that only carries
 * Elementor's 10px default, so text runs into the screen edge. Scoped to
 * `.site > .elementor` so it cannot reach the header (header#masthead) or
 * the footer (footer#colophon > .footer-width-fixer).
 * ====================================================================== */

@media (max-width: 767px) {
	.site > .elementor > .e-con-boxed {
		padding-inline: 20px;
	}
}

/* =========================================================================
 * CONTACT FORM 7 — Kontaktformular
 *
 * Measured off hemp-complete.de/kontakt/:
 *   label     16px / 400 / #000, 5px below
 *   required  #E01020
 *   input     40px tall, 0 15px, 1px solid #69727D, radius 30px, transparent
 *   textarea  190px tall, 10px 15px, same border, radius 30px
 *   submit    #000 bg, #fff, radius 30px, 15px / 500, UPPERCASE, 40px tall
 *   Name and E-Mail sit at ~66% width; Betreff and Nachricht run full width.
 * ====================================================================== */

/* CF7 wraps every control in an inline-level span, so a width of 100% on the
   input resolves against that span's shrink-to-fit width and the field never
   fills the row. The wrapper has to become block-level first. */
.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.wpcf7 .hc-field {
	margin-bottom: 18px;
}

.wpcf7 .hc-field label {
	display: block;
	margin-bottom: 5px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	color: #000;
}

.wpcf7 .hc-req {
	color: #e01020;
	margin-left: 2px;
}

/* Reference keeps the two short fields at roughly two thirds. */
.wpcf7 .hc-field--narrow .wpcf7-form-control-wrap {
	max-width: 66%;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	border: 1px solid #69727d;
	border-radius: 30px;
	background-color: transparent;
	font: inherit;
	font-size: 16px;
	color: #000;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select {
	height: 40px;
	padding: 0 15px;
}

.wpcf7 textarea {
	height: 190px;
	min-height: 190px;
	padding: 10px 15px;
	resize: vertical;
}

.wpcf7 ::placeholder {
	color: #7a7a7a;
	opacity: 1;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: 2px solid #004c45;
	outline-offset: 1px;
	border-color: #004c45;
}

.wpcf7 .hc-actions {
	margin-top: 22px;
}

.wpcf7 input[type="submit"] {
	width: 100%;
	max-width: 360px;
	height: 40px;
	padding: 0 24px;
	background-color: #000;
	color: #fff;
	border: 0;
	border-radius: 30px;
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus-visible {
	background-color: #004c45;
}

/* CF7 status and per-field validation text. */
.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 14px;
	color: #e01020;
}

.wpcf7 .wpcf7-not-valid {
	border-color: #e01020;
}

.wpcf7 form .wpcf7-response-output {
	margin: 18px 0 0;
	padding: 12px 16px;
	border-width: 1px;
	border-radius: 8px;
	font-size: 15px;
}

/* The spinner is absolutely positioned by default and can overlap the button. */
.wpcf7 .wpcf7-spinner {
	vertical-align: middle;
}

@media (max-width: 767px) {
	/* Everything goes full width on a phone; a 66% cap would look broken. */
	.wpcf7 .hc-field--narrow .wpcf7-form-control-wrap {
		max-width: 100%;
	}

	.wpcf7 input[type="submit"] {
		max-width: 100%;
	}

	.wpcf7 textarea {
		height: 150px;
		min-height: 150px;
	}
}

/* Account icon and cart should sit on one baseline inside the mint pill. */
#masthead .elementor-widget-icon .elementor-icon,
#masthead .elementor-menu-cart__toggle_button {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

/* The burger is a nav-menu in dropdown layout; strip Elementor's default
   button chrome so it reads as a bare icon like the reference. */
#masthead .elementor-menu-toggle {
	background-color: transparent;
	padding: 0;
	border: 0;
}

/* =========================================================================
 * SLIDE CART
 * Elementor's off-canvas cart, opened from the header and after an AJAX add.
 * Site-wide, so it lives here rather than in the product-only stylesheet.
 * ====================================================================== */

/* Elementor's widget stylesheet is enqueued after the theme's, so overriding
   its rules directly loses on source order at equal specificity. It drives the
   footer entirely through custom properties, which is the supported hook and
   wins wherever it is declared:
     --cart-footer-layout   grid-template-columns, default "1fr 1fr"
     --*-button-*-color     the two button colour sets
   Defaults put both buttons side by side, so "Warenkorb anzeigen" wrapped to
   two lines while "Kasse" stayed on one and the pair sat at uneven heights.
   A single column stacks them at a matching width. */
.elementor-menu-cart__wrapper {
	--cart-footer-layout: 1fr;

	--view-cart-button-background-color: #539406;
	--view-cart-button-text-color: #fff;
	--view-cart-button-hover-background-color: #467d05;
	--view-cart-button-hover-text-color: #fff;

	--checkout-button-background-color: #000;
	--checkout-button-text-color: #fff;
	--checkout-button-hover-background-color: #1a1a1a;
	--checkout-button-hover-text-color: #fff;
}

.elementor-menu-cart__footer-buttons .elementor-button {
	transition: background-color 0.18s ease;
}