/*
Theme Name: Heyns Digital
Theme URI: https://heynsdigital.co.za
Author: Heyns Digital
Author URI: https://heynsdigital.co.za
Description: Single-page theme for Heyns Digital, an AI governance and literacy consultancy in Cape Town. Long-form continuous scroll, Apple product-page tone, native Gutenberg block markup, no page-builder dependency.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: heyns-digital
*/

/* =========================================================
   Design tokens
   ========================================================= */
:root {
	--ink: #141413;
	--cream: #F1EEE6;
	--surface: #FBFAF7;
	--body: rgba(20, 20, 19, 0.68);
	--accent: #8A6A2E;
	--border: rgba(20, 20, 19, 0.1);
	--radius: 14px;
	--font-display: 'Montserrat', system-ui, sans-serif;
	--font-body: 'Hanken Grotesk', system-ui, sans-serif;
	--header-height: 136px;
}

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

html {
	scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, p, figure {
	margin: 0;
}

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

button {
	font: inherit;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.screen-reader-text:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 12px 18px;
	background: var(--ink);
	color: var(--cream);
	border-radius: var(--radius);
	z-index: 1000;
}

/* =========================================================
   Base
   ========================================================= */
body {
	background: var(--cream);
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.wp-block-heading {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
	color: var(--ink);
}

a {
	color: inherit;
	text-decoration: none;
}
a:hover {
	color: var(--accent);
}

main {
	display: block;
}

/* =========================================================
   Layout helpers
   ========================================================= */
.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.section {
	padding: 96px 24px;
}

.section--divider {
	border-top: 1px solid var(--border);
}

.section__inner {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.section__inner--wide {
	max-width: 800px;
}

.eyebrow {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--body);
	margin-bottom: 20px;
}

.section h2 {
	font-size: 40px;
	margin-bottom: 24px;
}

.section p {
	font-size: 18px;
	color: var(--body);
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--header-height);
	background: rgba(241, 238, 230, 0.8);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--border);
}

/* WordPress's admin toolbar is fixed at the true top of the viewport for
   logged-in users on screens 783px and wider, so our sticky header needs
   to stick 32px lower to sit below it instead of sliding underneath. Below
   783px the toolbar scrolls with the page instead, so no offset is needed. */
@media screen and ( min-width: 783px ) {
	.admin-bar .site-header {
		top: 32px;
	}
}

.site-header__inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.site-header__brand {
	display: flex;
	align-items: center;
}

.site-header__logo {
	height: 132px;
	width: auto;
}

.site-header__nav {
	display: flex;
	align-items: center;
	gap: 32px;
}

.site-header__nav-link {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	background: var(--ink);
	color: var(--cream);
	border: none;
	border-radius: var(--radius);
	padding: 12px 26px;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.btn:hover {
	opacity: 0.85;
	color: var(--cream);
}

.btn--large {
	padding: 16px 36px;
	font-size: 16px;
}

/* =========================================================
   Hero
   ========================================================= */
.hero {
	padding-top: 140px;
	padding-bottom: 96px;
}

.hero h1 {
	font-size: 56px;
	margin-bottom: 24px;
}

.hero p {
	font-size: 20px;
}

/* =========================================================
   Services
   ========================================================= */
.services {
	max-width: 700px;
	margin: 0 auto;
}

.services__eyebrow {
	text-align: center;
}

.service {
	padding: 44px 0;
	border-top: 1px solid var(--border);
}

.service:last-child {
	border-bottom: 1px solid var(--border);
}

.service h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 22px;
	margin-bottom: 12px;
}

.service p {
	font-family: var(--font-body);
	font-size: 17px;
	color: var(--body);
}

/* =========================================================
   Contact
   ========================================================= */
.contact__form {
	max-width: 560px;
	margin: 48px auto 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
	text-align: left;
}

.contact__form[hidden] {
	display: none;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.field label {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
}

.field input,
.field textarea {
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 14px 16px;
	outline: none;
	transition: border-color 0.15s ease;
}

.field input::placeholder,
.field textarea::placeholder {
	color: rgba(20, 20, 19, 0.4);
}

.field input:focus,
.field textarea:focus {
	border-color: var(--accent);
}

.field textarea {
	min-height: 140px;
	resize: vertical;
}

.contact__submit {
	align-self: center;
	margin-top: 8px;
}

.contact__status {
	text-align: center;
	margin-top: 24px;
	font-size: 17px;
	color: var(--body);
}

.contact__status[hidden] {
	display: none;
}

.contact__status strong {
	display: block;
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
	margin-bottom: 6px;
}

.contact__error {
	color: #A6453F;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
	padding: 48px 24px;
}

.site-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
}

.site-footer__mark {
	height: 40px;
	width: 40px;
}

.site-footer__brand {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.site-footer__copyright {
	font-size: 13px;
	color: var(--body);
}

.site-footer__links {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0;
	padding: 0;
	font-size: 15px;
	color: var(--body);
}

.site-footer__links li {
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.site-footer__links li a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.site-footer__links .social-icon {
	flex-shrink: 0;
	opacity: 0.7;
}

.site-footer__right {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 28px;
}

.site-footer__social {
	list-style: none;
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 0;
}

.site-footer__social a {
	display: inline-flex;
	color: var(--body);
}

.site-footer__social a:hover {
	color: var(--accent);
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 680px) {
	:root {
		--header-height: 68px;
	}

	.section {
		padding: 64px 20px;
	}

	.hero {
		padding-top: 96px;
		padding-bottom: 64px;
	}

	.hero h1 {
		font-size: 36px;
	}

	.hero p {
		font-size: 18px;
	}

	.section h2 {
		font-size: 28px;
	}

	.section p {
		font-size: 17px;
	}

	.site-header .container {
		padding: 0 16px;
	}

	.site-header__inner {
		gap: 12px;
	}

	.site-header__logo {
		height: 44px;
	}

	.site-header__nav {
		gap: 10px;
	}

	.site-header__nav-link {
		font-size: 13px;
	}

	.btn {
		padding: 9px 14px;
		font-size: 13px;
		white-space: nowrap;
	}

	.site-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.site-footer__links {
		flex-direction: column;
		gap: 10px;
	}

	.site-footer__right {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
}

@media (min-width: 681px) and (max-width: 960px) {
	.hero h1 {
		font-size: 46px;
	}

	.section h2 {
		font-size: 34px;
	}
}

/* Offset anchor targets so the sticky header never covers the section top */
#services,
#contact {
	scroll-margin-top: var(--header-height);
}