/*
Theme Name: wp_punkter (Front page)
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
*/

/* #################### H E A D E R #################### */
.header {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.header::before {
  position: absolute;
  content: "";
  width: 100%;
  height: calc(var(--full-height) * 2); /* tole sploh rabim?? */
  left: 0;
  background: url("../images/header_bcg.webp") center center / cover;
}
.headline-wrapper {
  position: sticky;
  display: flex;
  flex-flow: column;
  gap: calc(var(--margin-height) / 2);
}
.headline {
  font-family: var(--font-xbold), var(--font-stack);
  font-size: calc(var(--txt-mid) + 4vw);
}
.headline span { font-family: var(--font-light); }
.header h2 {
  font-family: var(--font-light);
  font-size: calc(var(--txt-sm) + 2vw);
}
@media (prefers-reduced-motion: reduce) {
  .headline-wrapper { transform: none!important; }
  .header { opacity: 1; }
  .header::before { background: url("../images/header_bcg_reduced.webp") center center / cover; }
}
.btn-header_noclick { pointer-events: none; }

/* #################### M A I N #################### */
main { margin-top: 40vh; }
section {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  gap: var(--margin-height);
}
section:not(.cta) { padding: calc(var(--margin-height) * 3.2) var(--margin-width); }
section h1 {
  font-size: calc(var(--txt-mid) + 2vw);
  line-height: calc(var(--lh-sm) + 1vw);
}
.about { color: var(--color-sec1); }
#about {  z-index: 2; }
.about p { font-size: calc(var(--txt-mid) + 1vw); }
.parallax-bcg {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  transform: translatey(calc(var(--margin-height) * 12));
  transition: bottom;
  z-index: -1;
}
.cta {
  padding: calc(var(--margin-height) * 3.2) var(--margin-width) 0;
  background-color: var(--color-sec2);
  color: var(--color-prim2);
  z-index: 2;
  container-type: inline-size;
}
.cta h1, .cta p { width: 100%; }
.cta .btn { z-index: 1; }
.cta img {
  display: block;
  position: relative;
  width: 80%;
  transform: translateX(calc(var(--margin-height) * 3.2));
}
@container (min-width: 520px) {
  .cta { padding: calc(var(--margin-height) * 3.2) var(--margin-width); }
  .cta h1, .cta p { width: 80%; }
  .cta img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    height: calc(var(--full-height) / 1.4);
    transform: none;
  }
}
.works { background-color: var(--color-sec1); }
.fp-articles {
  display: flex;
  flex-flow: column;
  gap: calc(var(--margin-height) / 2);
}
.fp-articles li { list-style: none; }
.fp-article > div {
  display: inline-block;
  width: 100%;
  vertical-align: top;
}
.fp-article > div:first-child { margin-bottom: .4rem; }
@media screen and (min-width: 960px) {
  .fp-article > div:first-child {
    width: 32%;
    margin-right: calc(1rem + 1w);
    margin-bottom: unset;
  }
  .fp-article > div:last-child {
    width: 62%;
    padding-left: 2rem;
  }
}
.fp-articles a, .fp-article p {
  font-size: calc(var(--txt-mid) + .4vw);
  text-wrap: auto;
}
.fp-article span { font-size: var(--txt-sm); }
.fp-articles p { max-width: var(--max-ch); }
.fp-articles hr:last-of-type { display: none; }

/* #################### F O O T E R #################### */
#contact::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
}
.footer-email {
  font-family: var(--font-black), var(--font-stack);
  font-size: calc(var(--txt-lg) + 4vw);
  font-weight: 900;
  opacity: .98;

  background: url("../images/cta-light.webp") no-repeat center center / cover;
  background-clip: text;
  -webkit-background-clip: text;
  background-size: cover;
  color: transparent;
  line-height: calc(var(--lh-sm) + 1vw);
  text-transform: uppercase;
  transition: all .48s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
	.footer-email {
		color: var(--color-acc2);
		opacity: .42;
		transition: none;
	}
}
.footer-email:hover { opacity: .4; }
.copyright {
  position: absolute;
  margin: 0 auto;
  padding: 20px;
  bottom: 0;
}

/* #################### D A R K #################### */
@media (prefers-color-scheme: dark) {
	body { background-color: var(--color-sec1)!important; }
	.header::before { filter: invert(.4); }
	.cta { padding: calc(var(--margin-height) * 3.2) var(--margin-width); }
	.cta img { display: none; }
}