/*
Theme Name:   HMS Design
Template:     astra
Description:  Child theme for HMS Design. Presentation only: CSS, template overrides and wording; functionality belongs in hms-design-core.
Author:       Norsk Interaktiv AS
Version:      0.2.0
Text Domain:  hms-design-child-theme
*/

/*
 * Semantic colors from the design (green, brown, turquoise) until the saved
 * stylesheet is available. Roboto Slab is self-hosted. LMS theming tokens are
 * not redefined here.
 */

@font-face {
	font-family: "Roboto Slab";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/roboto-slab-400.ttf") format("truetype");
}

@font-face {
	font-family: "Roboto Slab";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/roboto-slab-600.ttf") format("truetype");
}

@font-face {
	font-family: "Roboto Slab";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/roboto-slab-700.ttf") format("truetype");
}

:root {
	--hms-green: #1e6b4f;
	--hms-green-deep: #144a37;
	--hms-brown: #7a5a3a;
	--hms-turquoise: #1c7c86;
	--hms-ink: #1b2a28;
	--hms-muted: #5c6b66;
	--hms-paper: #f7f5f1;
	--hms-white: #ffffff;
	--hms-line: #e4e0d8;
}

body,
.editor-styles-wrapper {
	color: var(--hms-ink);
	font-family: "Roboto Slab", Georgia, serif;
}

h1,
h2,
h3,
.wp-block-heading,
.site-title {
	font-family: "Roboto Slab", Georgia, serif;
	letter-spacing: -0.02em;
}

.ast-primary-header-bar,
.ast-mobile-header-wrap .ast-primary-header-bar {
	background: var(--hms-white);
	border-bottom: 1px solid var(--hms-line);
}

.main-header-menu .menu-link,
.ast-header-break-point .main-header-menu .menu-link,
.site-title a,
.ast-builder-menu-1 .menu-link {
	color: var(--hms-ink);
}

.ast-header-button-1 .ast-custom-button,
.ast-header-button-1 .ast-builder-button-wrap .ast-custom-button {
	background: var(--hms-green);
	border-color: var(--hms-green);
	color: var(--hms-white);
	border-radius: 999px;
	padding: 0.7rem 1.2rem;
}

.site-footer {
	background: var(--hms-ink);
	color: var(--hms-paper);
}

.site-footer a,
.site-footer .ast-footer-copyright {
	color: var(--hms-paper);
}

.hms-kicker {
	color: var(--hms-green-deep);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.85rem;
}

.hms-hero,
.hms-services,
.hms-online,
.hms-page {
	padding: 4.5rem 1.25rem;
}

.hms-hero {
	background: var(--hms-paper);
}

.hms-hero h1 {
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	margin: 0.4rem 0 1rem;
}

.hms-hero-panel {
	background: var(--hms-green-deep);
	color: var(--hms-white);
	border-radius: 1.5rem;
	padding: 2rem;
	min-height: 16rem;
}

.hms-hero-panel h2,
.hms-hero-panel p {
	color: var(--hms-white);
}

.hms-services {
	background: var(--hms-white);
}

.hms-card,
.hms-benefit {
	background: var(--hms-paper);
	border-radius: 1.25rem;
	padding: 1.5rem;
	height: 100%;
}

.hms-num {
	color: var(--hms-green);
	font-weight: 700;
	font-size: 1.4rem;
}

.hms-hr {
	margin-top: 1.5rem;
	padding: 1.5rem;
	border-radius: 1.25rem;
	background: var(--hms-paper);
}

.hms-benefits {
	padding: 4.5rem 1.25rem;
	background: var(--hms-white);
}

.hms-benefit.is-green { background: var(--hms-green); color: var(--hms-white); }
.hms-benefit.is-brown { background: var(--hms-brown); color: var(--hms-white); }
.hms-benefit.is-turquoise { background: var(--hms-turquoise); color: var(--hms-white); }

.hms-benefit.is-green h3,
.hms-benefit.is-brown h3,
.hms-benefit.is-turquoise h3,
.hms-benefit.is-green p,
.hms-benefit.is-brown p,
.hms-benefit.is-turquoise p {
	color: var(--hms-white);
}

.hms-online {
	background: var(--hms-paper);
}

.hms-preview {
	background: var(--hms-white);
	border: 1px solid var(--hms-line);
	border-radius: 1.25rem;
	padding: 1.5rem;
}

.hms-clients,
.hms-course,
.hms-contact {
	padding: 3.5rem 1.25rem;
}

.hms-clients {
	background: var(--hms-white);
	text-align: center;
}

.hms-client-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.hms-client-row p {
	margin: 0;
	padding: 0.7rem 1rem;
	border: 1px solid var(--hms-line);
	border-radius: 999px;
	background: var(--hms-paper);
}

.hms-course {
	background: var(--hms-green-deep);
	color: var(--hms-white);
}

.hms-course h2,
.hms-course p,
.hms-course .hms-kicker {
	color: var(--hms-white);
}

.hms-contact {
	background: var(--hms-paper);
}

.wp-block-button__link {
	border-radius: 999px;
}

.hms-course .wp-block-button__link {
	background: var(--hms-white);
	color: var(--hms-green-deep);
}

.hms-page {
	background: var(--hms-paper);
	min-height: 40vh;
}

.hms-page h1 {
	font-size: clamp(2.2rem, 5vw, 3.6rem);
}