/*
 * Kore Dev shared styles — section frame, two-tone headings, buttons, prose
 * and the contact form. Served directly; npm run build regenerates fallbacks.
 */

/* Section frame -------------------------------------------------------------- */
.kore-section {
	max-width: var(--container-max-width, 1440px);
	margin-inline: auto;
	padding: var(--spacing-20, 80px) var(--section-hr-padding, 64px);
}
.kore-section--narrow { max-width: 960px; }
.kore-section__head { max-width: 820px; margin: 0 auto var(--spacing-12, 48px); text-align: center; }
.kore-section__actions { margin-top: var(--spacing-10, 40px); text-align: center; }
@media (max-width: 767px) {
	.kore-section { padding-top: var(--spacing-16, 64px); padding-bottom: var(--spacing-16, 64px); }
	.kore-section__head { margin-bottom: var(--spacing-8, 32px); }
}

/* Backgrounds ------------------------------------------------------------------ */
.kore-bg--white { background: var(--background, #ffffff); }
.kore-bg--cloud { background: var(--kore-cloud, #f7f7f7); }
.kore-bg--slate { background: var(--kore-slate, #333d47); color: #ffffff; }
.kore-bg--mint { background: var(--brand-500, #7dcab0); color: var(--kore-slate, #333d47); }
.kore-bg--slate a:not(.kore-btn) { color: var(--brand-500, #7dcab0); }
.kore-bg--mint a:not(.kore-btn) { color: var(--kore-slate, #333d47); }

/* Two-tone heading ------------------------------------------------------------- */
.kore-heading { margin: 0; color: var(--kore-slate, #333d47); text-transform: uppercase; }
.kore-heading__accent { color: var(--brand-700, #21735c); }
.kore-bg--slate .kore-heading { color: #ffffff; }
.kore-bg--slate .kore-heading__accent { color: var(--brand-500, #7dcab0); }
.kore-bg--mint .kore-heading,
.kore-bg--mint .kore-heading__accent { color: var(--kore-slate, #333d47); }
.kore-intro { margin-top: var(--spacing-4, 16px); }
.kore-intro p { margin: 0 0 var(--spacing-3, 12px); }
.kore-intro p:last-child { margin-bottom: 0; }

/* Buttons — square, as koredesigngroup.com --------------------------------- */
.kore-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-2, 8px);
	min-height: 48px;
	padding: var(--spacing-3, 12px) var(--spacing-6, 24px);
	border: 2px solid transparent;
	border-radius: var(--radius-button, 0px);
	font-family: var(--font-label, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif);
	font-weight: var(--font-label-weight, 600);
	font-size: var(--font-size-base, 16px);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.kore-btn .icon { --icon-size: 18px; }
.kore-btn:focus-visible { outline: 2px solid var(--ring, #21735c); outline-offset: 3px; }
.kore-btn--primary { background: var(--primary, #7dcab0); border-color: var(--primary, #7dcab0); color: var(--primary-foreground, #333d47); }
.kore-btn--primary:hover { background: var(--primary-hover, #8ad0b7); border-color: var(--primary-hover, #8ad0b7); color: var(--primary-foreground, #333d47); }
.kore-btn--secondary { background: var(--secondary, #333d47); border-color: var(--secondary, #333d47); color: #ffffff; }
.kore-btn--secondary:hover { background: var(--secondary-hover, #262e36); border-color: var(--secondary-hover, #262e36); color: #ffffff; }
.kore-btn--outline { background: transparent; border-color: var(--kore-slate, #333d47); color: var(--kore-slate, #333d47); }
.kore-btn--outline:hover { background: var(--kore-slate, #333d47); color: #ffffff; }
.kore-btn--light { background: #ffffff; border-color: #ffffff; color: var(--kore-slate, #333d47); }
.kore-btn--light:hover { background: transparent; color: var(--kore-slate, #333d47); border-color: var(--kore-slate, #333d47); }
.kore-btn--light-outline { background: transparent; border-color: #ffffff; color: #ffffff; }
.kore-btn--light-outline:hover { background: #ffffff; color: var(--kore-slate, #333d47); }
@media (prefers-reduced-motion: reduce) { .kore-btn { transition: none; } }

/* Prose (WYSIWYG fields) ----------------------------------------------------- */
.kore-prose > :first-child { margin-top: 0; }
.kore-prose > :last-child { margin-bottom: 0; }
.kore-prose p,
.kore-prose ul,
.kore-prose ol { margin: 0 0 var(--spacing-5, 20px); }
.kore-prose ul,
.kore-prose ol { padding-left: 1.25em; }
.kore-prose ul { list-style: disc; }
.kore-prose ol { list-style: decimal; }
.kore-prose li { margin-bottom: var(--spacing-2, 8px); }
.kore-prose li::marker { color: var(--brand-700, #21735c); }
.kore-prose h2,
.kore-prose h3,
.kore-prose h4 { margin: var(--spacing-8, 32px) 0 var(--spacing-3, 12px); color: var(--kore-slate, #333d47); font-family: var(--font-heading, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif); font-weight: var(--font-heading-weight, 700); }
.kore-prose h2, .kore-prose h3 { font-size: var(--font-size-xl, 20px); }
.kore-prose h4 { font-size: var(--font-size-lg, 18px); }
.kore-prose strong { font-weight: 700; color: inherit; }
.kore-bg--slate .kore-prose h2,
.kore-bg--slate .kore-prose h3,
.kore-bg--slate .kore-prose h4 { color: #ffffff; }

/* Contact form ------------------------------------------------------------------ */
.kore-form { display: grid; gap: var(--spacing-5, 20px); }
.kore-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-5, 20px); }
.kore-form__field { display: grid; gap: var(--spacing-2, 8px); }
.kore-form__label { color: inherit; }
.kore-form__req { color: var(--brand-700, #21735c); }
.kore-form__optional { font-weight: 400; opacity: 0.8; }
.kore-form__input {
	width: 100%;
	min-height: 48px;
	padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
	border: 1px solid var(--input, #d6d3d1);
	border-radius: var(--radius-input-select-etc, 4px);
	background: #ffffff;
	color: var(--kore-slate, #333d47);
}
textarea.kore-form__input { min-height: 140px; resize: vertical; }
.kore-form__input:focus-visible { outline: 2px solid var(--ring, #21735c); outline-offset: 1px; border-color: var(--ring, #21735c); }
.kore-form__input[aria-invalid="true"] { border-color: var(--destructive, #dc2626); }
.kore-form__error { margin: 0; color: var(--destructive, #dc2626); }
.kore-form__alert { padding: var(--spacing-3, 12px) var(--spacing-4, 16px); margin-bottom: var(--spacing-5, 20px); border-left: 4px solid var(--destructive, #dc2626); background: #fef2f2; color: #7f1d1d; }
.kore-form__success { display: flex; gap: var(--spacing-3, 12px); align-items: center; padding: var(--spacing-5, 20px); border-left: 4px solid var(--brand-500, #7dcab0); background: rgba(125, 202, 176, 0.12); }
.kore-form__success .icon { --icon-size: 28px; color: var(--brand-500, #7dcab0); }
.kore-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kore-form .kore-btn { justify-self: start; }
.kore-bg--slate .kore-form__req { color: var(--brand-500, #7dcab0); }
.kore-bg--slate .kore-form__error { color: #fca5a5; }
.kore-bg--slate .kore-form__input[aria-invalid="true"] { border-color: #fca5a5; }
@media (max-width: 599px) {
	.kore-form__grid { grid-template-columns: minmax(0, 1fr); }
	.kore-form .kore-btn { justify-self: stretch; }
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Cookie consent banner (functions/consent.php) ------------------------------ */
.kore-consent {
	position: fixed;
	left: var(--spacing-4, 16px);
	right: var(--spacing-4, 16px);
	bottom: var(--spacing-4, 16px);
	z-index: 200;
	max-width: 960px;
	margin-inline: auto;
	background: #ffffff;
	color: var(--kore-text, #494949);
	border-top: 4px solid var(--brand-500, #7dcab0);
	box-shadow: var(--shadow-2xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
}
.kore-consent[hidden] { display: none; }
.kore-consent__inner { display: flex; gap: var(--spacing-6, 24px); align-items: center; padding: var(--spacing-5, 20px) var(--spacing-6, 24px); }
.kore-consent__text { flex: 1 1 auto; }
.kore-consent__title { margin: 0 0 var(--spacing-1, 4px); color: var(--kore-slate, #333d47); }
.kore-consent__text p { margin: 0; }
.kore-consent__actions { display: flex; gap: var(--spacing-3, 12px); flex: none; }
.kore-consent__actions .kore-btn { min-width: 110px; }
.site-footer__consent { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.site-footer__consent:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
@media (max-width: 699px) {
	.kore-consent__inner { flex-direction: column; align-items: stretch; }
	.kore-consent__actions .kore-btn { flex: 1 1 0; }
}

/* Links inside running text are underlined, so they don't rely on colour alone (WCAG 1.4.1). */
p a:not(.btn):not(.kore-btn),
.entry-content li a:not(.btn):not(.kore-btn),
.kore-prose li a:not(.btn):not(.kore-btn) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
p a:not(.btn):not(.kore-btn):hover { border-bottom-color: transparent; text-decoration-thickness: 2px; }