/*
Theme Name: Kue Pukis
Theme URI: http://www.aldiaz.xyz/about
Version: 1.1
Author: Aldiaz D.
Description: WP theme for Doraemon Hari Ini
Text Domain: kue-pukis
*/

/* Variables  --------------------------------------------------------------- */

/* Custom properties */

:root {
	--font-family: 'aktiv-grotesk';
	--font-family-handwritten: var(--font-family);
	--font-size: 16px;
	--font-size-smaller: .9rem;
	--font-size-h1: 1.8rem;
	--font-size-h2: 1.6rem;
	--font-size-h3: 1.4rem;
	--font-size-h4: 1.2rem;
	--font-size-h5: 1rem;
	--font-size-h6: .8rem;
	--font-weight: 300;
	--line-height: 1.4;
	--line-height-hx: 1.1;
	--letter-spacing: initial;
	--letter-spacing-hx: initial;
	--color-pizzazz: #5781a4;
	--color-contrast: #ffffff;
	--color-contrast-cards: #000000;
	--color-shade: #496f8f;
	--color-tint: #ffffff88;
	--color-soft: #ffffffaa;
	--space: 16px;
	--space-25: calc(0.25 * var(--space));
	--space-50: calc(0.5 * var(--space));
	--space-100: var(--space);
	--space-150: calc(1.5 * var(--space));
	--space-200: calc(2 * var(--space));
	--space-300: calc(3 * var(--space));
	--border-radius: 2px;
	--timing: .4s;
}

/* Vendor */

.container {
	--bs-gutter-x: 3rem;
	max-width: 850px;
}

/* Preliminaries ------------------------------------------------------------ */

/* Global */

* {
	box-sizing: border-box;
}

html, body {
	font-family: var(--font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 'Helvetica Neue', sans-serif;
	font-size: var(--font-size);
	font-weight: var(--font-weight);
	background: var(--color-pizzazz);
	color: var(--color-contrast);
	letter-spacing: var(--letter-spacing);
}

/* Anchors */

a {
	color: var(--color-contrast);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--timing), opacity var(--timing);
}
a:not([no-hover]):hover {
	opacity: .8;
}

/* Headings */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--space);
	padding: 0;
	font-weight: normal;
	line-height: var(--line-height-hx);
	letter-spacing: var(--letter-spacing-hx);
}
h1 {
	font-size: var(--font-size-h1);
	font-weight: bold;
	letter-spacing: var(--letter-spacing-hx);
}
h2 {
	font-size: var(--font-size-h2);
	font-weight: normal;
}
h3 {
	font-size: var(--font-size-h3);
}
h4 {
	font-size: var(--font-size-h4);
}
h5 {
	font-size: var(--font-size-h5);
}
h6 {
	font-size: var(--font-size-h6);
}

/* Rich text */

p, li {
	margin: 0 0 var(--space);
	line-height: var(--line-height);
}

p:last-child {
	margin-bottom: 0 !important;
}

ol, ul {
	margin: 0 0 var(--space-150);
	padding-left: var(--space);
}
ul {
	list-style-type: square;
}
li {
	padding-left: var(--space);
}
li:last-child {
	margin-bottom: 0;
}

blockquote {
	margin: var(--space-200) 0;
	padding-left: var(--space-150);
	border-left: var(--space-50) dotted var(--color-tint);
	color: var(--color-soft);
}
blockquote p {
	margin: var(--space-50) 0;
}

abbr[title] {
	border-bottom: 1px dashed var(--color-soft);
	text-decoration-line: none;
	cursor: help;
}

del {
	color: var(--color-soft);
}

hr {
	height: 1px;
	margin: var(--space-150) 0;
	background-color: var(--color-tint);
	border: 0;
}

img {
	object-fit: contain;
}

/* Selection */

::selection {
	background: var(--color-contrast);
	color: var(--color-pizzazz);
}
::-moz-selection {
	background: var(--color-contrast);
	color: var(--color-pizzazz);
}
::-webkit-selection {
	background: var(--color-contrast);
	color: var(--color-pizzazz);
}

/* Microutilities ----------------------------------------------------------- */

[small] {
	font-size: var(--font-size-smaller);
}

[soft] {
	color: var(--color-soft);
}

[handwritten] {
	font-family: var(--font-family-handwritten);
}

/* Layouts ------------------------------------------------------------------ */

/* Macro */

main {
	--emblem-size: calc(5 * var(--space));
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: var(--space-200) 0 var(--space-300);
}

.flagpole {
	padding-right: var(--space-200);
}

.mobile-elements {
	display: none;
}

/* Header */

.flagpole__emblem {
	width: var(--emblem-size);
	margin-bottom: var(--space-25);
	filter: drop-shadow(var(--space-25) var(--space-25) 0 rgba(0, 0, 0, 0.2));
}

.flagpole__copy {
	margin-bottom: var(--space);
}

/* Navigation */

nav {
	margin: var(--space-200) 0;
}

nav ul {
	list-style-type: none;
	padding-left: 0;
}

nav ul li {
	padding-left: 0;
}

.page {
    position: relative;
}

.page.is-active::before {
	--size: calc(0.4 * var(--space));
	content: '';
	position: absolute;
	top: 50%;
	left: calc(-1 * var(--space));
	width: var(--size);
	height: var(--size);
	background-color: var( --color-contrast);
	border-radius: 50%;
	transform: translateY(-50%);
}

.page .icon {
	width: var(--space-150);
	margin-right: var(--space);
	text-align: center;
	opacity: .5;
}
.page.is-active .icon {
	opacity: 1;
}

/* Content area */

.dispatch__wrapper {
	padding-top: calc(var(--emblem-size) + var(--space));
}

.dispatch__substance {
	padding-bottom: var(--space-200);
}

.icon--vignette {
	opacity: .2;
}

.dispatch a {
	border-bottom: 1px dashed var(--color-soft);
}

.dispatch__heading {
	margin-bottom: var(--space);
	font-size: var(--font-size-h1);
}

.dispatch__title {
	font-weight: bold;
}

/* Vendor: WordPress */

.wp-block-footnotes {
	margin-top: var(--space-300);
    padding-top: var(--space-150);
    border-top: 1px solid var(--color-tint);
    font-size: var(--font-size-smaller);
}

.wp-block-footnotes li {
    margin-bottom: var(--space-50);
    padding-left: var(--space-50);
}

a[aria-label*="footnote"] {
    border-bottom: 0;
    opacity: .25;
}

/* Vendor: Contact Form 7 */

.wpcf7-form {
	--color-primary: #73c2c8;
    color: var(--color-soft);
}

.wpcf7 input,
.wpcf7 textarea {
    width: 100%;
    margin-top: var(--space-25);
    padding: var(--space-25) var(--space-50);
    background-color: var(--color-contrast);
    border: 0;
	border-radius: var(--border-radius);
}

.wpcf7-not-valid-tip {
    margin-top: var(--space-25);
    font-size: var(--font-size-smaller);
    color: var(--color-primary);
}

.wpcf7 input[type="submit"] {
	padding: var(--space);
    background-color: var(--color-primary);
    border-radius: var(--border-radius);
    color: var(--color-contrast);
    font-weight: bold;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.15) 0px calc(-0.2 * var(--space)) 0px inset;
}

/* Footer */

footer {
	margin-top: calc(4 * var(--space));
    font-size: var(--font-size-smaller);
    color: var(--color-soft);
}

/* Home screen -------------------------------------------------------------- */

.cards {
	display: flex;
    flex-flow: row wrap;
    margin-left: calc(-1 * var(--space-50));
    margin-right: calc(-1 * var(--space-50));
}

.cards__extras {
	width: calc(50% - var(--space));
}

.card {
	--size: 8;
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
    width: calc(50% - var(--space));
    height: calc(var(--size) * var(--space));
    margin: var(--space-50);
    padding: var(--space);
    background-color: var(--color-contrast);
	border-radius: var(--border-radius);
    color: var(--color-contrast-cards);
}

.cards__extras .card {
    width: 100%;
    height: calc(50% - var(--space));
}

.card__icon {
    height: calc(3 * var(--space));
    margin-bottom: var(--space-50);
}

.card__handle {
	opacity: .6;
}

.icon--detail {
	--fa-rotate-angle: -45deg;
}

/* Animation ---------------------------------------------------------------- */

@keyframes floating {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(calc(-0.3 * var(--space)));
	}
	100% {
		transform: translateY(0);
	}
}

[animation="floating"] {
	animation: floating calc(10 * var(--timing)) ease-in-out infinite;
}

/* Responsiveness ----------------------------------------------------------- */

@media screen and (max-width: 767px) {
	
	main {
		display: block;
		min-width: 0;
	}

	.flagpole {
		padding-right: initial;
		text-align: center;
	}

	.flagpole__boast {
		max-width: calc(20 * var(--space));
		margin: auto;
		font-size: inherit;
	}

	.wayfinding .pages,
	.wayfinding footer {
		display: none;
	}
	.mobile-elements {
		display: block;
	}

	.dispatch__wrapper {
		padding-top: var(--space-300);
	}

	.card {
		width: 100%;
	}

	.icon--vignette {
		width: 100%;
		text-align: center;
	}

	.mobile-elements .page {
		margin: 0;
	}

	.mobile-elements .page a {
		display: block;
		margin: var(--space-50) 0;
		padding: var(--space);
		border: 1px solid var(--color-soft);
		border-radius: var(--space-25);
		text-align: left;
	}
	.mobile-elements .page.is-active a {
		border-color: var(--color-contrast);
	}

	.mobile-elements .page.is-active::before {
		opacity: 0;
	}

	footer {
		margin-top: 0;
		text-align: center;
	}

	.dispatch {
		padding: var(--space-200);
		background-color: var(--color-shade);
		border-radius: var(--space-25);
	}

}

/* Debugging ---------------------------------------------------------------- */

/* WP admin bar */

html {
	margin-top: 0 !important;
}

#wpadminbar {
	display: none;
}