/*
Theme Name: wp_punkter (Main)
Author: peter@punkter.net
Description: WordPress theme for punkter.net
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wp_punkter
Tags: responsive, minimalist, custom made
*/

/* #################### F O N T S #################### */
@font-face {
    font-family: 'Rubik-Light';
    src: url('https://punkter.net//wp-content/themes/wp_punkter/fonts/Rubik-Light.woff2') format('woff2');
  }
@font-face {
    font-family: 'Rubik-Regular';
    src: url('https://punkter.net//wp-content/themes/wp_punkter/fonts/Rubik-Regular.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Rubik-Bold';
    src: url('https://punkter.net//wp-content/themes/wp_punkter/fonts/Rubik-Bold.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Rubik-ExtraBold';
    src: url('https://punkter.net//wp-content/themes/wp_punkter/fonts/Rubik-ExtraBold.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Rubik-Black';
    src: url('https://punkter.net//wp-content/themes/wp_punkter/fonts/Rubik-Black.woff2') format('woff2');
  }

/* #################### V A R I A B L E S #################### */
:root {
    /* Colors */
	--color-prim1: oklch(21.78% 0 0);
    --color-prim2: oklch(28.5% 0 0);
    --color-prim3: oklch(71.22% 0 0);
    --color-sec1: oklch(99.7% 0 0);
    --color-sec2: oklch(95.21% 0 0);
	/*--color-sec3: oklch(90.37% 0 0);*/
    --color-acc1: oklch(55.98% 0.188 266.4);
    --color-acc2: oklch(64.41% 0.188 266.4);
	--color-acc3: oklch(75.98% 0.188 266.4);

    /* Font families */
    --font-light: 'Rubik-Light';
    --font-normal: 'Rubik-Regular';
    --font-bold: 'Rubik-Bold';
    --font-xbold: 'Rubik-ExtraBold';
    --font-black: 'Rubik-Black';
    --font-stack: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    /* Font sizes */
    --txt-sm: .8rem;
    --txt-mid: 1rem;
    --txt-lg: 1.6rem;

    /* Line heights */
    --lh-sm: 1.2;
    --lh-mid: 1.6;
    --lh-lg: 2;

    /* Margins and Paddings */
    --margin-width: 8vw;
    --margin-height: 5.6vh;
    --margin-height: 5.6svh;

    /* Other */
    --full-height: 100vh;
    --full-height: 100svh;
    --max-ch: 79ch;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-prim1: oklch(99.7% 0 0);
		--color-prim2: oklch(95.21% 0 0);
		--color-prim3: oklch(71.22% 0 0);
		--color-sec1: oklch(28.5% 0 0);
		--color-sec2: oklch(21.78% 0 0);
		/*--color-sec3: oklch(90.37% 0 0);*/
		--color-acc1: oklch(75.98% 0.188 266.4);
		--color-acc2: oklch(64.41% 0.188 266.4);
		--color-acc3: oklch(55.98% 0.188 266.4);
	}
}

/* #################### R E S E T #################### */
*, *::before, *::after { box-sizing: border-box; }
html, body, div,
section, p, a:not(.btn),
h1:not(.page-title), h2, ul, li {
  margin: 0;
  padding: 0;
}
h1, h2, p,
ul, li { text-wrap: balance;}

/* #################### B A S E #################### */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    min-height: var(--full-height);
    font-size: 100%;
    font-family: var(--font-normal), var(--font-stack);
    color: var(--color-prim2);
    background-color: var(--color-sec1);
    overflow-x: hidden;
}
a {
    color: var(--color-acc1);
    text-decoration: none;
}
a, .btn { cursor: pointer; }
a:hover:not(.menu li a, .btn) { color: var(--color-acc2); }
.btn, .btn-skip:focus {
    display: block;
    background: linear-gradient(48deg, var(--color-acc1) 4%, var(--color-acc3) 96%);
    border: none;
    color: var(--color-sec1);
    font-size: calc(var(--txt-sm) + .4vw);
    text-transform: uppercase;
    letter-spacing: calc(.1rem + .1vw);
    line-height: calc(var(--lh-mid) + 1vw);
    box-shadow: .1rem .1rem .2rem var(--color-prim3);
    background-size: 200% auto;
}
.btn:not(.btn-skip) {
    width: max-content;
    padding: 1rem 4rem;
    border-radius: .4rem;
    transition: all .4s ease-in-out;
}
.btn:hover {
    background-position: center right;
    box-shadow: -.1rem .1rem .2rem var(--color-prim3);
}
.btn-skip { /* a11y function: with monitor readers you skip header and go directly to content */
    position: absolute;
    width: 0;
    height: 1px;
    border-bottom-right-radius: .4rem;
    overflow: hidden;
    white-space: nowrap;
    z-index: 20;
}
.btn-skip:focus {
    position: absolute;
    width: auto;
    height: auto;
    padding: 1rem 4rem;
    left: 0;
    overflow: auto;
    transition: all .4s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .btn:hover {
        background-position: initial;
        box-shadow: .1rem .1rem .2rem var(--color-prim3);
    }
    .btn:not(.btn-skip), .btn-skip:focus { transition-duration: 0.02s; }
}
#navbar, header, footer { padding: var(--margin-height) var(--margin-width); }
header, section, footer:not(.footer_page) { min-height: var(--full-height); }
hr {
    width: 100%;
    height: 1px;
    background-color: var(--color-sec2);
    border: none;
}

/* #################### M E N U #################### */
#navbar {
    position: fixed;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    width: 100vw;
    height: 80px;
    top: 0;
    z-index: 4;
    transition: all .3s ease-in-out;
}
@media (prefers-reduced-motion: reduce) { 
	#navbar {
		top: 0!important;
		transition: none;
	}
}
.navbar-scroll {
    background-color: #fefefeab;
    backdrop-filter: blur(4px);
}
.menu-top-menu-container { align-items: center; }
.menu {
	display: flex;
	flex-grow: 1;
	justify-content: center;
    align-items: flex-start;
    gap: 1.6rem;
    height: 100%;
}
.menu li { list-style: none; }
.menu li a, .logo {
    display: block;
    font-size: calc(var(--txt-sm) + .2vw);
    color: var(--color-prim2);
    letter-spacing: .04rem;
    text-transform: uppercase;
    transition: all .3s ease-in-out;
}
.menu li a { font-family: var(--font-normal), var(--font-stack); }
.logo svg {
	width: calc(1.2rem + 1vw);
	height: auto;
	padding: calc(.2rem + .1vw) calc(.2rem + .1vw) calc(.2rem + .1vw) calc(.23rem + .1vw);
	border-radius: .2rem;
}
.noscroll {
    overflow-y: hidden;
    padding-right: 1rem;
}
mark {
    background-color: transparent;
    border-bottom: .2rem solid var(--color-acc2);
  }

/* #################### M A I N #################### */
main {
    display: flex;
    flex-flow: column;
    flex: 1;
}
.pagination { margin: 0 auto; }

/* #################### F O O T E R #################### */
footer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    background: url("../images/cta-dim.webp") no-repeat center center /cover;
	background-color: var(--color-prim2);
}
.copyright {
    border: none;
    font-size: calc(var(--txt-sm) + .4vw);
    color: var(--color-sec1);
}

/* #################### 4 0 4 #################### */
.fourohfour{
    justify-content: center;
    gap: calc(1rem + 1vw);
    padding: calc(var(--margin-height) * 2) var(--margin-width);
    text-align: center;
}
.fourohfour h1 {
    font-family: var(--font-xbold), var(--font-stack);
    font-size: calc(var(--txt-mid) + 4vw);
    text-transform: uppercase;
}
.fourohfour p {
    font-family: var(--font-light);
    font-size: calc(var(--txt-sm) + 2vw);
  }

/* #################### D A R K #################### */
@media (prefers-color-scheme: dark) {
	/*body { background-color: var(--color-sec2); }*/
	h1, h2, p,
	.menu li a, li, li::marker { color: var(--color-prim1); }
	.navbar-scroll { background-color: #2a2a2aab; }
	.logo svg { background-color: var(--color-prim2); }
	.btn, .btn-skip:focus {
		background: linear-gradient(48deg, var(--color-acc1) 4%, var(--color-acc3) 96%);
		box-shadow: .1rem .1rem .2rem #1a1a1a;
		color: var(--color-prim1);
	}
	.btn:hover { box-shadow: -.1rem .1rem .2rem #1a1a1a; }
	footer { background-color: var(--color-sec1); }
}