/**
 * Theme name: HMNO
 * Theme URI: https://code.volse.net/wordpress/themes/hmno
 * Description: Custom theme for heavtmetal.no
 * Version: 0.3.1
 * Author: Harald Eilertsen <haraldei@anduin.net>
 * License: GNU AGPL v3.0 or later
 * License URI: https://www.gnu.org/licenses/agpl-3.0.txt
 *
 * SPDX-FileCopyrightText: 2025 Eilertsens Kodeknekkeri
 * SPDX-FileContributor: Harald Eilertsen <haraldei@anduin.net>
 * SPDX-FileContributor: Birgit Fostervold <birgit@sirkel.media>
 * SPDX-FileContributor: Marius Solheim <masteesol@gmail.com>
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */
:root {
    --hmno-color-bg: #131313;
    --hmno-color-bg-main: rgb(19, 18, 18);
    --hmno-color-fg: #988952;
    --hmno-color-link: #a99d74;
    --hmno-color-link-visited: #a99d74;
    --hmno-color-link-focus: #dcd0a8;
}
@font-face {
	font-family: 'archivo';
	src:  url('./assets/fonts/ArchivoBlack-Regular.ttf') format('truetype')
}

/*Layout*/

html {
	color: var(--hmno-color-fg);
	font-family: Arial, Helvetica, sans-serif;

	/* Enable automatic hyphenation.
	 * see https://clagnut.com/blog/2395/ for details.
	 */
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-chars: 6 3 3;
    -webkit-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-last: always;
    -webkit-hyphenate-limit-zone: 8%;

    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;
    hyphenate-limit-zone: 8%;
}

h1, h2, .home-section summary {
	font-family: 'archivo', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;;
}

a {
	color: var(--hmno-color-link);
}
a:visited {
	color: var(--hmno-color-link-visited);
}
a:focus, a:hover {
	color: var(--hmno-color-link-focus);
}

body {
	margin: 0;
	background-color: var(--hmno-color-bg);
	display: flex;
	flex-direction: row;
	justify-content: center;
}


#page {
	max-width: 72rem;
}

main.site-content {
	width: 100%;
}

.wrapper.home {
	width: 100%;
	display: flex;
	flex-direction: row;
	padding-top: 0.5rem;
}


h1 {
	font-size: large;
}

h2 {
	text-align: center;
}

h3, nav li {
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

img {
	max-width: 100%;
}

/*
 * Compatibility with images in posts imported from Refinery.
 */
.image-align-left {
	float: left;
	margin-right: 0.5rem;
}

/*
 * Compatibility with images in posts imported from Refinery.
 */
.image-align-right {
	float: right;
	margin-left: 0.5rem;
}

/*components*/

.site-header {
	background-image: url("./assets/images/header-metal-bg.jpg");
	text-align: center;
	width: 100%;
	padding-bottom: 0.5rem;
	background-position-x: center;
	background-position-y: center;
}

.site-header nav a {
	color: white;
	font-weight: bold;
	text-decoration: none;
	padding: 0.3rem;
	display: flex;
	justify-content: center;
}
.site-header nav a:hover {
	text-decoration: underline;
}

.site-header nav ul, .site-header .col-nav-mobile ul {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.site-header nav li, .site-header .col-nav-mobile li {
	list-style-type: none;
	display: inline;
	margin-left: 1rem;
	margin-right: 1rem;
}

.site-header .site-logo img {
	max-height: 10rem;
}

input[name="site-menu-toggle"] {
	display: none;
}

#site-menu-label label {
	display: none;
}

.site-header .sidebar {
	padding: 0.5rem;
}

.feed-icon {
	height: 1.2em;
	margin-right: 0.3em;
}

.home-section .inner {
	display: flex;
	flex-direction: column;
	overflow: auto;
	padding: 0.5rem;
}

.nyheter {
	flex: 1 1 0;
}

.omtaler {
	flex: 1 1 0;
	order: 2;
}

.intervjuer, .col-main {
	flex: 2 1 0;
	background-color: var(--hmno-color-bg-main);
}

.news-card .post-thumbnail {
	max-width: 40%;
	padding-right: 0.3rem;
	margin-bottom: 0;
	float: left;
}

.news-card .post-meta {
	font-size: smaller;
}

.news-card .post-thumbnail img{
	width: inherit;
}

.news-card {
	padding: 0 0.3rem 1rem;
	box-sizing: border-box;
	min-width: 13rem;
	clear: both;
}

.post > header > h1 {
	margin-top: 0;
}

.current-menu-item {
	text-decoration: underline;
	color: white;
}

.col-nav-mobile li.active, .col-nav-mobile li:hover {
	text-decoration: underline;
}

.col-nav-mobile li {
	cursor: pointer;
}

.col-nav-mobile {
	display: none;
}

.home-section details > summary {
	font-size: large;
	font-weight: bold;
	text-align: center;
}

.pagination {
	clear: both;
	display: flex;
	justify-content: center;
	padding-top: 1rem;
	margin-top: 1rem;
	border-top: 1px var(--hmno-color-fg) solid;
}
.sidebar {
	padding: 1rem;
}
.widget {
	margin-bottom: 0.5rem;
}

.wp-element-caption {
	text-align: center;
}

@media (max-width: 767.98px){
	body {
		display: inherit;
	}
	.wrapper.home {
		flex-direction: column;
	}
	.site-header {
		display: flex;
		flex-direction: column;
		max-height: 25%;
	}
	.site-header .site-menu ul {
		flex-direction: column;
		padding: 0;
	}
	.site-header .site-menu li {
		font-size: large;
		font-weight: bold;
	}
	.site-header .site-nav {
		display: flex;
		flex-direction: column;
		height: 0;
		overflow: hidden;
	}
	#site-menu-label {
		display: flex;
		flex-direction: row;
		justify-content: right;
		padding-right: 0.5em;
	}
	#site-menu-label label {
		display: block;
		padding: 2px;
		width: 35px;
		height: 35px;
	}
	#site-menu-label label svg {
		stroke:white;
		width: 100%;
		height: 100%;
	}
	.menu-open {
		display: none;
	}
	#site-menu-toggle:checked ~ label .menu-closed {
		display: none
	}
	#site-menu-toggle:checked ~ label .menu-open {
		display: block;
	}
	#site-menu-toggle:checked ~ .site-nav {
		height: 100%;
		padding-top: 1em;
		padding-bottom: 1em;
	}
	.site-header .sidebar {
		display: none;
	}

	.home-section .inner {
		flex-direction: row;
		overflow: auto;
	}

	/*
	 * Ignore left/right alignment of images on small screens.
	 */
	.image-align-left,
	.image-align-right {
		float: none;
		display: block;
		width: 100%;
		margin-bottom: 0.5rem;
	}

	.nyheter {
		flex: 1 1 0;
	}

	.omtaler {
		flex: 1 1 0;
		order: inherit;
	}

	.intervjuer {
		flex: 2 1 0;
	}
	.intervjuer .news-card .post-thumbnail {
		max-width: 100%;
	}


	/*
	 * Make admin bar stay on top of site nav on
	 * mobile.
	 */
	#wpadminbar.mobile {
		position: fixed;
	}
}


h1, h2,
h3, nav li {
    font-family: sans-serif;
}
    .post > header > h1 {
        margin-top: 0;
        margin-bottom: 1rem;
        line-height: 1.3;
    }

    h1.masthead {
        padding: 0.5rem;
        background: #988952;
        margin: 0 0.5rem;
        color: #000;
        text-transform: uppercase;
        font-weight: normal;
    }

p {
    line-height: 1.4;
}

.site-header nav li,
.site-header .col-nav-mobile li {
    list-style-type: none;
    display: inline;
    margin-left: 1rem;
    margin-right: 1rem;
    font-size: larger;
}
    .site-header nav a {
        color: #bfc3cb;
        font-weight: bold;
        text-decoration: none;
        padding: 0.3rem 1rem;
        display: flex;
        justify-content: center;
        background: #131313;
        border-radius: 6px;
        margin-bottom: 0.5rem;
    }


#nyheter .news-card,
#omtaler .news-card {
    padding: 0.5rem;
    background: #2c2825;
    margin-bottom: 1rem;
}
    .news-card .post-thumbnail {
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 0.3rem;
        float: none;
    }

    #nyheter .news-card .post-meta {
        margin-bottom: 0.3rem;
    }
    .news-card h1 a {
        text-decoration: none;
    }
    .news-card h1 a:hover {
        text-decoration: underline;
    }

#nyheter h1,
#omtaler h1 {
    font-size: medium;
}

#intervjuer h1 {
    font-size: larger;
}

@media (max-width: 767.98px) {
    .site-header .site-logo img {
        height: auto;
        max-width: 30%;
        margin-top: -20px;
        flex-grow: 2;
    }
    .post > header > h1 {
        margin-bottom: 0.5rem;
    }

    #nyheter .news-card,
    #omtaler .news-card {
        padding: 0.3rem;
        margin: 0 0.4rem 1rem;
    }
    #nyheter .news-card p,
    #omtaler .news-card p {
        font-size: small;
    }
}