/*
Theme Name:   Kenexx
Theme URI:    https://kenexx.online/
Description:  Kenexx child theme for Neve. Brand colors, Montserrat, buttons and the section styles used by the Elementor home page.
Author:       Tiny Screen Labs
Author URI:   https://tinyscreenlabs.com/
Template:     neve
Version:      1.0.2
Requires at least: 6.8
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  kenexx
*/

/* ---------------------------------------------------------------
   Brand tokens
   --------------------------------------------------------------- */
:root {
	--knx-teal: #00ACBA;
	--knx-teal-dark: #008C98;
	--knx-gold: #F0B030;
	--knx-gold-dark: #D99A1E;
	--knx-orange: #E07B39;
	--knx-dark: #1C2628;
	--knx-grey: #7F9593;
	--knx-light: #F2F2F2;
	--knx-mist: #BECCCA;
	--knx-text: #3A4345;
	--knx-white: #FFFFFF;
	--knx-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Hand the brand to Neve's own variables */
	--nv-primary-accent: var(--knx-teal);
	--nv-secondary-accent: var(--knx-teal-dark);
	--nv-text-color: var(--knx-text);
	--nv-dark-bg: var(--knx-dark);
	--bodyfontfamily: var(--knx-font);
	--headingsfontfamily: var(--knx-font);
}

/* ---------------------------------------------------------------
   Base typography
   --------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
	font-family: var(--knx-font);
}

body {
	color: var(--knx-text);
}

h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title {
	font-family: var(--knx-font);
	font-weight: 400;
	color: inherit;
}

a {
	color: var(--knx-teal);
}

a:hover,
a:focus {
	color: var(--knx-teal-dark);
}

/* ---------------------------------------------------------------
   Buttons: flat, square, Montserrat, like the old site
   --------------------------------------------------------------- */
.button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.elementor-button,
.elementor-widget-button .elementor-button {
	display: inline-block;
	background-color: var(--knx-teal);
	color: var(--knx-white);
	border: 0;
	border-radius: 0;
	font-family: var(--knx-font);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.3;
	letter-spacing: 0.5px;
	text-transform: none;
	padding: 16px 30px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
.elementor-button:focus {
	background-color: var(--knx-teal-dark);
	color: var(--knx-white);
}

/* Gold variant: add the class "knx-btn-gold" to an Elementor button */
.knx-btn-gold .elementor-button,
.button.knx-btn-gold {
	background-color: var(--knx-gold);
}

.knx-btn-gold .elementor-button:hover,
.button.knx-btn-gold:hover {
	background-color: var(--knx-gold-dark);
}

/* Large variant */
.knx-btn-big .elementor-button {
	font-size: 24px;
	padding: 18px 32px;
}

/* ---------------------------------------------------------------
   Header (Neve header builder)
   --------------------------------------------------------------- */
.header-main-inner,
.header-main .header--row-inner,
.hfg_header .header-main-inner {
	background-color: var(--knx-dark);
}

.header .builder-item .nav-ul > li > a,
.header .builder-item .nav-ul > li > .wrap > a,
.header .nav-menu-primary .nav-ul li a {
	font-family: var(--knx-font);
	font-size: 14px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.site-logo img {
	max-height: 44px;
	width: auto;
}

/* ---------------------------------------------------------------
   Footer (Neve footer builder)
   --------------------------------------------------------------- */
.site-footer .footer--row-inner,
.footer-bottom-inner {
	background-color: var(--knx-dark);
	color: #C9D3D2;
}

.site-footer a,
.site-footer .nav-ul li a {
	color: #C9D3D2;
}

.site-footer a:hover,
.site-footer .nav-ul li a:hover {
	color: var(--knx-teal);
}

.site-footer .builder-item.cr {
	font-size: 14px;
}

/* ---------------------------------------------------------------
   Section heading with the teal bar above and gold bar below.
   Add the class "knx-bars" to an Elementor heading widget.
   --------------------------------------------------------------- */
.knx-bars .elementor-heading-title {
	display: inline-block;
	position: relative;
	padding: 22px 0;
	max-width: 100%;
}

.knx-bars .elementor-heading-title::before,
.knx-bars .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 8px;
	border-radius: 4px;
}

.knx-bars .elementor-heading-title::before {
	top: 0;
	background: var(--knx-teal);
}

.knx-bars .elementor-heading-title::after {
	bottom: 0;
	background: linear-gradient(90deg, var(--knx-gold), var(--knx-orange));
}

/* Wide bars: the bars run wider than a short title */
.knx-bars-wide .elementor-heading-title {
	min-width: min(532px, 100%);
}

/* Grey bars on both sides, for "How Kenexx Works" */
.knx-bars-grey .elementor-heading-title::before,
.knx-bars-grey .elementor-heading-title::after {
	background: var(--knx-grey);
	height: 5px;
}

/* ---------------------------------------------------------------
   Diamond icons for icon boxes.
   Add the class "knx-diamond" to an Elementor icon box widget.
   --------------------------------------------------------------- */
.knx-diamond .elementor-icon {
	transform: rotate(45deg);
	background-color: var(--knx-grey);
	border: 3px solid var(--knx-teal);
	outline: 2px solid var(--knx-teal);
	outline-offset: 5px;
	border-radius: 0;
	width: 70px;
	height: 70px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 14px;
}

.knx-diamond .elementor-icon i,
.knx-diamond .elementor-icon svg {
	transform: rotate(-45deg);
}

.knx-diamond .elementor-icon svg {
	fill: var(--knx-white);
	width: 30px;
	height: 30px;
}

.knx-diamond .elementor-icon i {
	color: var(--knx-white);
	font-size: 30px;
}

.knx-diamond .elementor-icon-box-title,
.knx-diamond .elementor-icon-box-title a {
	font-family: var(--knx-font);
	text-transform: uppercase;
	font-weight: 500;
}

/* ---------------------------------------------------------------
   Home page helpers
   --------------------------------------------------------------- */

/* Callouts around the phone on the photo background */
.knx-callout .elementor-icon-box-title {
	color: var(--knx-white);
	font-size: 19px;
	line-height: 1.25;
	margin-bottom: 8px;
}

.knx-callout .elementor-icon-box-description {
	color: #E6EEEE;
	font-size: 14px;
	line-height: 1.45;
	font-weight: 300;
}

/* Benefits grid tiles: photo with a caption strip at the bottom */
.knx-tile {
	overflow: hidden;
}

.knx-tile .elementor-widget-heading {
	width: 100%;
}

.knx-tile .elementor-heading-title {
	display: block;
	margin: 0;
	background: rgba(40, 50, 52, 0.72);
	color: var(--knx-white);
	padding: 14px 20px;
	font-size: 22px;
	line-height: 1.3;
}

/* Nested Accordion in "How Kenexx Works" */
.knx-accordion .e-n-accordion {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.knx-accordion .e-n-accordion-item {
	background: var(--knx-white);
}

.knx-accordion .e-n-accordion-item-title {
	background: var(--knx-white);
	border: 0 !important;
	padding: 18px 20px;
}

.knx-accordion .e-n-accordion-item-title-text {
	font-family: var(--knx-font);
	font-size: 17px;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--knx-dark);
}

.knx-accordion .e-n-accordion-item-title-icon {
	color: var(--knx-teal);
	fill: var(--knx-teal);
}

.knx-accordion .e-n-accordion-item > .e-con {
	border: 0 !important;
	padding: 0 20px 18px;
	background: var(--knx-white);
}

.knx-accordion .elementor-widget-text-editor ul {
	margin: 0 0 12px 1.1em;
	padding: 0;
}

.knx-accordion .elementor-widget-text-editor ul ul {
	margin: 4px 0 4px 1.1em;
}

.knx-accordion .elementor-widget-text-editor p {
	margin: 0 0 12px;
}

/* Video frame in the hero */
.knx-video .elementor-wrapper {
	border: 3px solid var(--knx-teal);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
	.knx-tile .elementor-heading-title {
		font-size: 16px;
		padding: 10px 12px;
	}
}

/* ---------------------------------------------------------------
   Signed-in header items (functions.php adds Cart and My Account)
   --------------------------------------------------------------- */
.knx-cart-count {
	display: inline-block;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	margin-left: 4px;
	border-radius: 10px;
	background: var(--knx-gold);
	color: var(--knx-dark);
	font-size: 12px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
}

.knx-cart-count.is-empty {
	background: rgba(255, 255, 255, 0.18);
	color: var(--knx-white);
}

/* ---------------------------------------------------------------
   WooCommerce and knx-operations pages under Neve
   --------------------------------------------------------------- */

/* Room between page content and the footer on regular pages */
.single-page-container .nv-single-page-wrap,
.woocommerce .neve-main > .container {
	padding-bottom: 60px;
}

/* Account wallet: "Recent activity" sat flush against "Your stores" */
details.knx-account-statement {
	margin: 0 0 32px;
}

details.knx-account-statement > summary {
	cursor: pointer;
}

/* Wallet deposit product: the site sells deposits only, so no category
   line or breadcrumb (the category archive is empty by design) */
.single-product .product_meta,
.single-product .woocommerce-breadcrumb {
	display: none;
}

/* Deposit amount row: form.cart is a wrapping flex row, so the button
   stretched to the amount paragraph plus its 30px bottom margin. Pin the
   select and the button to one height and stop the stretch. */
.single-product form.cart .knx-deposit-amount select {
	height: 52px;
	min-height: 52px;
	box-sizing: border-box;
}

.single-product form.cart .single_add_to_cart_button.button {
	align-self: flex-start;
	height: 52px;
	padding-top: 0;
	padding-bottom: 0;
	box-sizing: border-box;
}

.single-product form.cart .quantity {
	align-self: flex-start;
}

/* Fund wallet: /knx-account/ sits outside WooCommerce's .woocommerce wrapper
   and fell back to the plain button style; match the /my-account/ button. */
.knx-account a.button.knx-fund-wallet {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.6;
	padding: 13px 15px;
}

/* ---------------------------------------------------------------
   Sticky header on every page, desktop and mobile
   --------------------------------------------------------------- */
header.header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--knx-dark);
}

.admin-bar header.header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar header.header {
		top: 46px;
	}
}

/* Below 601px the admin bar scrolls away with the page */
@media (max-width: 600px) {
	.admin-bar header.header {
		top: 0;
	}
}

/* In-page anchors (/#how-it-works) land below the header */
html {
	scroll-padding-top: 72px;
}

html:has(body.admin-bar) {
	scroll-padding-top: 104px;
}

/* ---------------------------------------------------------------
   Contact page (/contact/, Contact Form 7)
   --------------------------------------------------------------- */
.knx-contact {
	max-width: 720px;
	margin: 0 auto;
	padding: 40px 0 20px;
}

.knx-contact-title {
	margin: 0 0 24px;
	font-size: 40px;
	line-height: 1.2;
	color: var(--knx-dark);
}

.knx-contact-title span {
	display: inline-block;
	position: relative;
	padding: 22px 0;
	min-width: min(320px, 100%);
}

.knx-contact-title span::before,
.knx-contact-title span::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 8px;
	border-radius: 4px;
}

.knx-contact-title span::before {
	top: 0;
	background: var(--knx-teal);
}

.knx-contact-title span::after {
	bottom: 0;
	background: linear-gradient(90deg, var(--knx-gold), var(--knx-orange));
}

.knx-contact-intro {
	font-size: 19px;
	line-height: 1.5;
	margin: 0 0 6px;
}

.knx-contact-location {
	color: var(--knx-grey);
	margin: 0 0 32px;
}

.knx-contact .wpcf7 {
	background: var(--knx-light);
	padding: 32px;
}

.knx-contact .wpcf7 label {
	display: block;
	font-weight: 500;
	color: var(--knx-dark);
}

.knx-contact .wpcf7 .knx-req {
	color: var(--knx-orange);
}

.knx-contact .wpcf7 input[type="text"],
.knx-contact .wpcf7 input[type="email"],
.knx-contact .wpcf7 select,
.knx-contact .wpcf7 textarea {
	width: 100%;
	max-width: 100%;
	margin-top: 6px;
	background-color: var(--knx-white);
	font-weight: 400;
}

.knx-contact .wpcf7 textarea {
	height: 180px;
}

.knx-contact .wpcf7 .wpcf7-form-control-wrap {
	display: block;
}

.knx-contact .wpcf7-spinner {
	vertical-align: middle;
}

.knx-contact .wpcf7 form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 12px 16px;
}

/* Honeypot: off-screen, never shown to people */
.knx-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 767px) {
	.knx-contact {
		padding-top: 24px;
	}

	.knx-contact-title {
		font-size: 32px;
	}

	.knx-contact .wpcf7 {
		padding: 20px 16px;
	}
}