/*
Theme Name: Mint
Description: Classic theme for mint-innredning.no with block content. Replaces Salient 5.0.
Version: 1.1.0
Requires at least: 6.5
Requires PHP: 8.3
Text Domain: mint
*/

/* Look taken from Salient 5.0 with the site's theme options (accent #27CCC0, header #888) */

/* Full Latin set (from @fontsource/open-sans), so æ ø å ä ö don't fall back to another font */
@font-face { font-family: 'Open Sans'; font-weight: 300; font-display: swap; src: url('fonts/open-sans-latin-300.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-display: swap; src: url('fonts/open-sans-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-display: swap; src: url('fonts/open-sans-latin-600.woff2') format('woff2'); }

:root {
	--mint-accent: #27ccc0;
	--mint-text: #676767;
	--mint-heading: #444;
	--mint-page-bg: #f8f8f8;
	--mint-container: 1245px; /* Salient's "extended responsive": 1425px minus 90px padding each side */
	--mint-gutter: 16px;
}

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

html { -webkit-text-size-adjust: 100%; }

/* Footer stays at the bottom on short pages: main takes up the leftover height */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	overflow-x: hidden;
	background: #fff;
	color: var(--mint-text);
	font: 400 12px/22px 'Open Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; vertical-align: middle; }

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

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 7px;
	color: var(--mint-heading);
	font-weight: 600;
	letter-spacing: -0.5px;
}
h1 { font-size: 30px; line-height: 42px; }
h2 { font-size: 22px; line-height: 36px; margin-bottom: 10px; }
h3 { font-size: 19px; line-height: 34px; }
h4 { font-size: 18px; line-height: 32px; }
h5 { font-size: 16px; line-height: 26px; }
h6 { font-size: 14px; line-height: 24px; }

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: var(--mint-accent); }

p, ul, ol { margin: 0 0 22px; }

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

.alignleft { float: left; margin: 0 20px 10px 0; }
.alignright { float: right; margin: 0 0 10px 20px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* ---------- Layout ---------- */

.admin-bar { min-height: calc(100dvh - 32px); }
@media (max-width: 782px) {
	.admin-bar { min-height: calc(100dvh - 46px); }
}

.site-main { flex: 1 0 auto; background: var(--mint-page-bg); padding-bottom: 40px; }

.mint-container {
	width: 100%;
	max-width: calc(var(--mint-container) + 2 * var(--mint-gutter));
	margin: 0 auto;
	padding: 0 var(--mint-gutter);
}

.mint-page { padding-top: 40px; padding-bottom: 40px; }

.mint-text > :last-child { margin-bottom: 0; }

/* ---------- Page content (core blocks) ---------- */

/*
 * Every top-level group is a full-width section with its content in the container,
 * as Salient's rows were. Sections without their own top padding get Salient's 20px.
 * .is-root-container is the same level in the block editor.
 */
:is(.mint-blocks, .is-root-container) > .wp-block-group {
	padding: 20px max(var(--mint-gutter), (100% - var(--mint-container)) / 2) 0;
}
:is(.mint-blocks, .is-root-container) > .wp-block-cover + .wp-block-group { padding-top: 50px; }
/* A page ending in a coloured section runs straight into the footer */
.site-main:has(> .mint-blocks > .has-background:last-child) { padding-bottom: 0; }
/* Classic themes get the group's inner container on the front end, not in the editor */
:is(.mint-blocks, .is-root-container) > .wp-block-group > :last-child,
.wp-block-group__inner-container > :last-child,
.wp-block-column > :last-child { margin-bottom: 0; }

/* A section with its own text colour (white on teal) colours its headings too */
.has-text-color :is(h1, h2, h3, h4, h5, h6) { color: inherit; }

.wp-block-columns { gap: 35px; margin-bottom: 0; }
.wp-block-column .wp-block-columns { gap: 20px; }

.wp-block-image { margin: 0 0 22px; }

/* Galleries: even 4:3 tiles, and a short last row keeps its tile size instead of stretching */
.wp-block-gallery.has-nested-images figure.wp-block-image { flex-grow: 0; margin: 0; }
.wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image img { aspect-ratio: 4 / 3; }

/* Front page cover, styled as Salient's slider */
.wp-block-cover.alignfull {
	margin: 0;
	padding: 40px max(var(--mint-gutter), (100% - var(--mint-container)) / 2);
	background: #333;
}
.wp-block-cover h2 {
	margin: 0 0 25px;
	color: inherit;
	font-size: 60px;
	font-weight: 300;
	line-height: 80px;
	letter-spacing: 0;
}
.wp-block-cover p { margin: 0; font-size: 22px; font-weight: 300; line-height: 32px; letter-spacing: 0.5px; }

/* ---------- Header ---------- */

.site-header {
	position: relative;
	z-index: 10;
	background: #fff;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.22);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
}
.site-header__logo {
	color: var(--mint-heading);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.5px;
}
.site-header__logo:hover { color: var(--mint-heading); }

.site-nav ul { margin: 0; padding: 0; list-style: none; }
.site-nav > ul { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.site-nav li { position: relative; }
.site-nav a {
	display: block;
	padding: 17px 11px;
	color: #888;
	font-size: 12px;
	line-height: 22px;
}
.site-nav a:hover,
.site-nav .current-menu-item > a { color: var(--mint-accent); }

/* Dropdowns, including WPML's language switcher item */
.site-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 180px;
	background: #1f1f1f;
}
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu { display: block; }
.site-nav .sub-menu a { padding: 10px 15px; color: #ccc; }
.site-nav .sub-menu a:hover { background: #313233; color: var(--mint-accent); }
.site-nav .iclflag { margin-right: 6px; vertical-align: middle; }

.site-nav__toggle {
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background:
		linear-gradient(#888, #888) center 12px / 24px 2px no-repeat,
		linear-gradient(#888, #888) center 19px / 24px 2px no-repeat,
		linear-gradient(#888, #888) center 26px / 24px 2px no-repeat;
	cursor: pointer;
}

/* ---------- Footer ---------- */

.site-footer { background: #313233; color: #ccc; }
.site-footer__widgets {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 35px;
	padding-top: 50px;
	padding-bottom: 40px;
}
.site-footer .widget h4 { margin-bottom: 10px; color: #fff; font-size: 14px; line-height: 22px; letter-spacing: 0; }
.site-footer .widget p { color: #ccc; }
.site-footer .widget ul { margin: 0; padding: 0; list-style: none; }
.site-footer .widget li { padding: 4px 0; }
.site-footer a { color: #ccc; }
.site-footer a:hover { color: var(--mint-accent); }
.site-footer__copyright { padding: 20px 0; background: #1f1f1f; color: #777; }

/* ---------- Contact Form 7 ---------- */

.wpcf7-form p { margin-bottom: 20px; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
	width: 100%;
	padding: 10px;
	border: 2px solid #e0e0e0;
	background: #fff;
	color: inherit;
	font: inherit;
}
.wpcf7 input:focus, .wpcf7 textarea:focus { border-color: #ccc; outline: none; }
.wpcf7 input[type="submit"] {
	padding: 12px 22px;
	border: 0;
	border-radius: 2px;
	background: var(--mint-accent);
	color: #fff;
	font: 600 12px 'Open Sans', sans-serif;
	text-transform: uppercase;
	cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { opacity: 0.8; }

/* ---------- Screen sizes ---------- */

@media (min-width: 1000px) {
	:root { --mint-gutter: 90px; }
}

@media (max-width: 900px) {
	.site-nav__toggle { display: block; }
	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
	}
	.site-nav.is-open { display: block; }
	.site-nav > ul { display: block; padding: 10px var(--mint-gutter); }
	.site-nav a { padding: 10px 0; }
	.site-nav .sub-menu { display: block; position: static; background: none; }
	.site-nav .sub-menu a { color: #888; padding-left: 16px; }
	.site-footer__widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 690px) {
	.wp-block-cover h2 { font-size: 36px; line-height: 44px; }
	.wp-block-cover p { font-size: 18px; }
	.site-footer__widgets { grid-template-columns: minmax(0, 1fr); }
}