/*
Theme Name: Advantage Happy Knuckles
Theme URI: https://happyknuckles.com/
Author: AdvantageMedia
Description: Lightweight Gutenberg and Advantage Layout Builder theme for Happy Knuckles.
Version: 0.1.10
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Text Domain: advantage-happy-knuckles
License: GPL-2.0-or-later
*/

@font-face {
	font-family: "Comfortaa HK";
	src: url("assets/fonts/comfortaa-regular.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
}

:root {
	--hk-teal: #0b6f61;
	--hk-teal-brand: #0f806f;
	--hk-orange: #b44800;
	--hk-orange-brand: #fc7c28;
	--hk-brown: #7b3f3a;
	--hk-taupe: #7b6c68;
	--hk-ink: #171717;
	--hk-muted: #5a514e;
	--hk-cream: #f7f1eb;
	--hk-white: #fff;
	--hk-radius: 16px;
	--hk-content: 1180px;
	--hk-shadow: 0 18px 45px rgb(23 23 23 / 10%);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 112px;
}

body {
	margin: 0;
	background: var(--hk-white);
	color: var(--hk-ink);
	font-family: "Comfortaa HK", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	text-rendering: optimizeLegibility;
}

img,
svg {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: var(--hk-teal);
	text-decoration-thickness: 0.09em;
	text-underline-offset: 0.16em;
}

a:hover {
	color: #0c655a;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--hk-orange);
	outline-offset: 4px;
}

button,
input,
select,
textarea {
	font: inherit;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	left: 12px;
	padding: 12px 18px;
	top: 12px;
	width: auto;
	z-index: 100000;
}

.hk-site-header {
	background: rgb(255 255 255 / 97%);
	border-bottom: 1px solid rgb(23 23 23 / 8%);
	min-height: 104px;
	position: sticky;
	top: 0;
	z-index: 1000;
}

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

.hk-header-inner {
	align-items: center;
	display: grid;
	gap: 32px;
	grid-template-columns: 180px 1fr auto;
	margin: 0 auto;
	max-width: 1240px;
	min-height: 104px;
	padding: 0 24px;
}

.hk-site-logo {
	align-items: center;
	display: inline-flex;
	height: 88px;
	overflow: hidden;
	width: 164px;
}

.hk-site-logo img {
	height: auto;
	width: 160px;
}

.hk-primary-nav {
	justify-self: center;
}

.hk-primary-nav ul {
	align-items: center;
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hk-primary-nav a {
	color: var(--hk-ink);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.hk-primary-nav a:hover,
.hk-primary-nav a:focus-visible {
	color: var(--hk-teal);
}

.hk-header-cta,
.hk-button,
.wp-block-button__link,
input[type="submit"] {
	align-items: center;
	background: var(--hk-teal);
	border: 2px solid var(--hk-teal);
	border-radius: 6px;
	color: var(--hk-white);
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 700;
	justify-content: center;
	line-height: 1.2;
	min-height: 48px;
	padding: 12px 22px;
	text-decoration: none;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.hk-header-cta:hover,
.hk-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
	background: #137566;
	border-color: #137566;
	color: var(--hk-white);
	transform: translateY(-1px);
}

.hk-button--secondary,
.is-style-outline > .wp-block-button__link {
	background: rgb(23 23 23 / 54%);
	border-color: rgb(255 255 255 / 25%);
	color: var(--hk-white);
}

.hk-menu-toggle {
	align-items: center;
	background: transparent;
	border: 2px solid var(--hk-ink);
	border-radius: 6px;
	color: var(--hk-ink);
	display: none;
	justify-content: center;
	min-height: 46px;
	min-width: 52px;
	padding: 8px 12px;
}

.advantage-builder-canvas,
.site-main {
	min-height: 50vh;
	overflow: clip;
	width: 100%;
}

.site-main > :where(*:not(.alignfull)),
.advantage-builder-canvas > :where(*:not(.alignfull)) {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--hk-content);
}

.ab-section,
.hk-section {
	margin-block: 0;
	padding: clamp(64px, 8vw, 112px) max(24px, calc((100vw - var(--hk-content)) / 2));
	position: relative;
}

.ab-section.alignfull,
.hk-section.alignfull {
	width: 100%;
}

@supports (content-visibility: auto) {
	.ab-section:not(.hk-hero) {
		contain-intrinsic-block-size: auto 900px;
		content-visibility: auto;
	}
}

.hk-eyebrow {
	background: var(--hk-orange);
	border-radius: 999px;
	color: var(--hk-white);
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
	margin: 0 0 18px;
	padding: 5px 11px;
}

.hk-section h1,
.hk-section h2,
.hk-section h3 {
	font-family: "Comfortaa HK", Arial, Helvetica, sans-serif;
	margin-top: 0;
}

.hk-section h1,
.hk-section h2 {
	color: var(--hk-teal-brand);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	line-height: 1.22;
	margin-bottom: 20px;
}

.hk-section h3 {
	color: var(--hk-orange);
	font-size: 1.2rem;
	line-height: 1.35;
}

.hk-lead {
	font-size: clamp(1rem, 1.8vw, 1.28rem);
	max-width: 720px;
}

.hk-hero {
	align-items: center;
	background-color: var(--hk-brown);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--hk-white);
	display: flex;
	min-height: calc(100svh - 104px);
	padding-bottom: clamp(72px, 8vw, 120px);
	padding-top: clamp(72px, 8vw, 120px);
}

.hk-hero::before {
	background: linear-gradient(90deg, rgb(17 10 8 / 75%) 0%, rgb(17 10 8 / 36%) 52%, rgb(17 10 8 / 15%) 100%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}

.hk-hero .wp-block-cover__image-background {
	z-index: 0;
}

.hk-hero .wp-block-cover__background {
	z-index: 1;
}

.hk-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
}

.hk-hero h1 {
	color: var(--hk-white);
	font-size: clamp(2.35rem, 5vw, 4.6rem);
	letter-spacing: -0.03em;
	max-width: 760px;
}

.hk-hero .hk-lead {
	color: #f1e7df;
	max-width: 680px;
}

.advantage-builder-canvas .hk-hero .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: rgb(23 23 23 / 72%) !important;
	border-color: rgb(255 255 255 / 88%) !important;
	color: var(--hk-white) !important;
}

.hk-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}

.hk-proof-list {
	display: flex;
	flex-wrap: wrap;
	font-size: 13px;
	gap: 18px 28px;
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
}

.hk-proof-list li::before {
	color: var(--hk-orange-brand);
	content: "◆";
	font-size: 0.72em;
	margin-right: 8px;
}

.hk-split {
	align-items: center;
	display: grid;
	gap: clamp(32px, 6vw, 80px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.hk-split--reverse .hk-media {
	order: 2;
}

.hk-media img {
	border-radius: var(--hk-radius);
	box-shadow: var(--hk-shadow);
	height: auto;
	width: 100%;
}

.hk-card-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 36px;
}

.hk-card {
	background: var(--hk-white);
	border: 1px solid rgb(23 23 23 / 10%);
	border-radius: var(--hk-radius);
	box-shadow: 0 10px 30px rgb(23 23 23 / 6%);
	padding: 26px;
}

.hk-card p:last-child {
	margin-bottom: 0;
}

.hk-callout {
	background: var(--hk-cream);
	border-left: 5px solid var(--hk-orange-brand);
	border-radius: 0 var(--hk-radius) var(--hk-radius) 0;
	font-size: 1.08rem;
	font-weight: 700;
	margin-top: 28px;
	padding: 22px 26px;
}

.hk-section--cream {
	background: var(--hk-cream);
}

.hk-section--teal {
	background: var(--hk-teal);
	color: var(--hk-white);
}

.hk-section--teal h2,
.hk-section--teal h3 {
	color: var(--hk-white);
}

.hk-pricing-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 40px;
}

.hk-price-card {
	background: var(--hk-white);
	border: 2px solid rgb(36 170 151 / 25%);
	border-radius: var(--hk-radius);
	display: flex;
	flex-direction: column;
	padding: 28px 22px;
}

.hk-price-card h3 {
	min-height: 3.1em;
}

.hk-price {
	color: var(--hk-teal);
	font-size: 2.35rem;
	font-weight: 700;
	line-height: 1;
	margin: 8px 0 22px;
}

.hk-price-card .hk-button {
	margin-top: auto;
}

.hk-badge {
	align-self: flex-start;
	background: var(--hk-orange);
	border-radius: 999px;
	color: var(--hk-white);
	font-size: 11px;
	font-weight: 700;
	margin-bottom: 10px;
	padding: 4px 9px;
}

.hk-faq {
	border-top: 1px solid rgb(23 23 23 / 16%);
}

.hk-faq details {
	border-bottom: 1px solid rgb(23 23 23 / 16%);
	padding: 0;
}

.hk-faq summary {
	color: var(--hk-ink);
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
	list-style-position: outside;
	padding: 20px 8px;
}

.hk-faq details > div {
	padding: 0 8px 22px;
}

.hk-contact-grid {
	display: grid;
	gap: 40px;
	grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
}

.hk-contact-grid label {
	color: var(--hk-ink);
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
}

.hk-contact-grid input:not([type="submit"]),
.hk-contact-grid select,
.hk-contact-grid textarea {
	background: var(--hk-white);
	border: 2px solid #6d625f;
	border-radius: 6px;
	color: var(--hk-ink);
	min-height: 48px;
	padding: 10px 12px;
	width: 100%;
}

.hk-contact-grid a {
	align-items: center;
	display: inline-flex;
	min-height: 44px;
}

.hk-contact-grid textarea {
	min-height: 150px;
	resize: vertical;
}

.hk-map {
	background: var(--hk-cream);
	border-radius: var(--hk-radius);
	min-height: 360px;
	overflow: hidden;
}

.hk-map iframe {
	border: 0;
	height: 100%;
	min-height: 360px;
	width: 100%;
}

.hk-site-footer {
	background: #171717;
	color: var(--hk-white);
	padding: 26px 24px;
}

.hk-footer-inner {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--hk-content);
}

.hk-footer-inner p {
	font-size: 13px;
	margin: 0;
}

.hk-whatsapp {
	align-items: center;
	background: #0f806f;
	border-radius: 999px;
	bottom: 22px;
	box-shadow: var(--hk-shadow);
	color: var(--hk-white);
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	gap: 8px;
	min-height: 48px;
	padding: 10px 18px;
	position: fixed;
	right: 22px;
	text-decoration: none;
	z-index: 800;
}

.hk-whatsapp:hover {
	background: #0b6659;
	color: var(--hk-white);
}

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

	.hk-header-inner {
		grid-template-columns: 150px 1fr auto;
		min-height: 88px;
	}

	.hk-site-logo {
		height: 74px;
		width: 145px;
	}

	.hk-site-logo img {
		width: 142px;
	}

	.hk-menu-toggle {
		display: inline-flex;
		justify-self: end;
	}

	.hk-primary-nav {
		background: var(--hk-white);
		border-top: 1px solid rgb(23 23 23 / 10%);
		display: none;
		grid-column: 1 / -1;
		justify-self: stretch;
		margin: 0 -24px;
		padding: 10px 24px 22px;
	}

	.hk-primary-nav.is-open {
		display: block;
	}

	.hk-primary-nav ul {
		align-items: stretch;
		flex-direction: column;
		gap: 0;
	}

	.hk-primary-nav a {
		display: block;
		font-size: 15px;
		min-height: 48px;
		padding: 13px 4px;
	}

	.hk-header-cta {
		display: none;
	}

	.hk-split,
	.hk-contact-grid {
		grid-template-columns: 1fr;
	}

	.hk-split--reverse .hk-media {
		order: 0;
	}

	.hk-card-grid {
		grid-template-columns: 1fr 1fr;
	}

	.hk-pricing-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	html {
		scroll-padding-top: 94px;
	}

	.hk-header-inner {
		gap: 12px;
		padding: 0 16px;
	}

	.hk-hero {
		background-position: 60% center;
		min-height: calc(100svh - 88px);
	}

	.hk-hero::before {
		background: linear-gradient(180deg, rgb(17 10 8 / 52%) 0%, rgb(17 10 8 / 82%) 72%, rgb(17 10 8 / 90%) 100%);
	}

	.ab-section,
	.hk-section {
		padding: 58px 20px;
	}

	.hk-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.hk-button,
	.wp-block-button,
	.wp-block-button__link {
		width: 100%;
	}

	.hk-card-grid,
	.hk-pricing-grid {
		grid-template-columns: 1fr;
	}

	.hk-price-card h3 {
		min-height: 0;
	}

	.hk-footer-inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.hk-whatsapp {
		bottom: 14px;
		right: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

@media (forced-colors: active) {
	.hk-eyebrow,
	.hk-badge,
	.hk-button,
	.wp-block-button__link,
	.hk-header-cta,
	.hk-whatsapp {
		border: 2px solid ButtonText;
	}
}