/*
 * Kalon base typography + global tokens.
 *
 * Transcribed from the original Elementor Default Kit (post 16004) and
 * stripped of the `.elementor-kit-16004` body-class scope so the rules
 * apply globally without depending on Elementor being active.
 *
 * If you change typography or colors, edit this file directly. There is no
 * editor UI for it (it used to be Elementor's "Site Settings" panel).
 */

/* ── Page wrapper resets ──
 * The hello-elementor parent theme constrains main#content.site-main to
 * max-width: 1140px and adds a fat side margin. Our content is shortcode-
 * rendered and wants the full viewport width (heroes are full-bleed). This
 * resets the wrapper so kalon-* sections can manage their own width.
 *
 * Also kills any stray top/bottom spacing (Cowork audit found a ~24px strip
 * above the nav on every page — defensive nuke of html/body/main margin +
 * padding gets rid of it regardless of source).
 */
html,
body {
	margin: 0 !important;
	padding: 0 !important;
}

main#content,
main#content.site-main,
.kalon-main {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

main#content > .page-header,
main#content .page-header,
.page-template-elementor_header_footer .page-header,
.page-template-elementor_header_footer .entry-title {
	display: none !important;
}

/* ── Global img reset ────────────────────────────────────────
   Replaces Elementor's `img { max-width:100%; height:auto }` which was
   removed when Elementor was deactivated on staging. Without height:auto,
   browsers use the HTML width/height attributes as fixed pixel dimensions
   instead of aspect-ratio hints — every image with explicit HTML
   attributes renders at a wrong aspect ratio (e.g. a 16:9 landscape
   image forced to 800×600 pixels regardless of container width). */
img {
	max-width: 100%;
	height: auto;
}

/* ── Global tokens (formerly --e-global-* vars on .elementor-kit-16004) ── */
:root {
	--e-global-color-primary:   #373A3C;
	--e-global-color-secondary: #58D652;
	--e-global-color-text:      #616161;
	--e-global-color-accent:    #00B3DB;
	--e-global-color-white:     #FFFFFF;
	--e-global-color-light:     #E3E4E4;
	--e-global-color-overlay:   #0000006E;
	--e-global-color-black:     #000000;

	--e-global-typography-primary-font-family:   "Montserrat";
	--e-global-typography-primary-font-weight:   300;
	--e-global-typography-secondary-font-family: "Montserrat";
	--e-global-typography-secondary-font-weight: 500;
	--e-global-typography-text-font-size:        16px;
	--e-global-typography-text-font-weight:      100;
	--e-global-typography-text-letter-spacing:   1px;
	--e-global-typography-accent-font-family:    "Montserrat";
	--e-global-typography-accent-font-weight:    700;
}

/* ── Body base ── */
body {
	color: #282828;
	font-family: "Helvetica", sans-serif;
	font-size: 17px;
	font-weight: normal;
	line-height: 1.4em;
	letter-spacing: 0;
	/* Match live's body background — only visible if a section ever fails to fill the viewport. */
	background-color: #eef2f5;
}

/* ── Headings ── */
h1 {
	color: #373A3C;
	font-family: "Montserrat", sans-serif;
	font-size: 50px;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 1.2em;
	letter-spacing: 10px;
}

h2 {
	color: var(--e-global-color-primary);
	font-family: "Montserrat", sans-serif;
	font-size: 40px;
	font-weight: 300;
	text-transform: uppercase;
	line-height: 1.2em;
	letter-spacing: 5px;
}

h3 {
	color: #373A3C;
	font-family: "Montserrat", sans-serif;
	font-size: 24px;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 1.2em;
	letter-spacing: 2px;
}

h4 {
	color: var(--e-global-color-accent);
	font-family: "Montserrat", sans-serif;
	font-size: 22px;
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.2em;
	letter-spacing: 1.1px;
}

h5 {
	color: #373A3C;
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 500;
}

h6 {
	color: var(--e-global-color-primary);
	font-family: "Montserrat", sans-serif;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
}

/* ── Links ── */
a {
	color: var(--e-global-color-accent);
}

/* ── Paragraphs ── */
p {
	margin-block-end: 0;
}

/* ── Buttons (default styles only — kalon-* mu-plugins override per-component) ── */
button,
input[type="button"],
input[type="submit"] {
	font-family: "Montserrat", sans-serif;
	font-size: 20px;
	font-weight: normal;
	text-transform: uppercase;
	font-style: normal;
	line-height: 1.1em;
	color: var(--e-global-color-white);
	border-radius: 50px;
	padding: 12px 24px;
}

button:hover,
button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background-color: var(--e-global-color-primary);
	color: var(--e-global-color-white);
}

/* ── Responsive — tablet ── */
@media (max-width: 1024px) {
	body { font-size: 18px; }
	h1 { font-size: 55px; }
	h2 { font-size: 28px; }
	h3 { font-size: 24px; }
	h4 { font-size: 20px; }
	button,
	input[type="button"],
	input[type="submit"] { font-size: 18px; }
}

/* ── Responsive — mobile ── */
@media (max-width: 767px) {
	body { font-size: 16px; }
	h1 { font-size: 45px; }
	h2 { font-size: 24px; }
	h3 { font-size: 22px; line-height: 1.2em; }
	h4 { font-size: 18px; line-height: 1.2em; }
	button,
	input[type="button"],
	input[type="submit"] { font-size: 16px; line-height: 1.1em; }
}