@import url('/fonts/Limelight.css');
@import url('/fonts/JosefinSans.css');

:root {
    --gold: #d4a55f;
    --background: #152d4f;
    --foreground: #fdd790;
    --paper: #f1eae0;
    --duration: 75ms;

    --border-color: var(--gold);
    --border-width: 2px;
    --border: var(--border-width) solid var(--gold);

    --fancy-border-width: 14px;
    --fancy-border-texture-width: 20px;
    --fancy-border: var(--fancy-border-width) solid;
    --fancy-border-image: url('/img/border.svg') 20 / var(--fancy-border-texture-width);

    --hexagon-scale: 0.287;

    --gap: var(--fancy-border-width);

    --icon-size: calc(2 * var(--fancy-border-width));
    --bauble-title-width: 30ch;
    --button-height: 2em;
    --header-height: 5rem;
    --header-width: 40ch;
    --main-max-width: 70rem; /* In rem to prevent jumping after loading fonts */
    --navigation-height: 3rem;
    --text-width: 58ch;

    /* Encode SVG to prevent flashes on interaction */
    --border-endcap-offset: 7.46px;
    --border-endcap: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NC4wNnB4IiBoZWlnaHQ9IjMwMHB4IiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgZmlsbC1ydWxlPSJldmVub2RkIiB2aWV3Qm94PSIwIDAgOTQuMDYgMzAwIj48cG9seWdvbiBmaWxsPSIjMTUyZDRmIiBwb2ludHM9IjAsMTQyIDAsMTU4IDEwLjkzLDE1OCA5NC4wNiwzMDAgOTQuMDYsMCAxMC45MywxNDIiLz48cG9seWxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDRBNTVGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIyMi45MjU2IiBwb2ludHM9IjAsMTQ0IDQsMTQ0IDk0LjA2LDMwMCIvPjxwb2x5bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNENEE1NUYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjIyLjkyNTYiIHBvaW50cz0iMCwxNTYgNCwxNTYgOTQuMDYsMCIvPjwvc3ZnPg');
    --border-endcap-active: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NC4wNnB4IiBoZWlnaHQ9IjMwMHB4IiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgZmlsbC1ydWxlPSJldmVub2RkIiB2aWV3Qm94PSIwIDAgOTQuMDYgMzAwIj48cG9seWdvbiBmaWxsPSIjMTUyZDRmIiBwb2ludHM9IjAsMTQyIDAsMTU4IDEwLjkzLDE1OCA5NC4wNiwzMDAgOTQuMDYsMCAxMC45MywxNDIiLz48cG9seWdvbiBmaWxsPSIjZmRkNzkwIiBwb2ludHM9IjUuNDYsMTUwIDk0LjA2LDMwMCA5NC4wNiwwIi8+PHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0Q0QTU1RiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMjIuOTI1NiIgcG9pbnRzPSIwLDE0NCA0LDE0NCA5NC4wNiwzMDAiLz48cG9seWxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDRBNTVGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIyMi45MjU2IiBwb2ludHM9IjAsMTU2IDQsMTU2IDk0LjA2LDAiLz48L3N2Zz4=');
    --border-endcap-hover: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5NC4wNnB4IiBoZWlnaHQ9IjMwMHB4IiBzaGFwZS1yZW5kZXJpbmc9Imdlb21ldHJpY1ByZWNpc2lvbiIgZmlsbC1ydWxlPSJldmVub2RkIiB2aWV3Qm94PSIwIDAgOTQuMDYgMzAwIj48cG9seWdvbiBmaWxsPSIjMTUyZDRmIiBwb2ludHM9IjAsMTQyIDAsMTU4IDEwLjkzLDE1OCA5NC4wNiwzMDAgOTQuMDYsMCAxMC45MywxNDIiLz48cG9seWdvbiBmaWxsPSIjRDRBNTVGIiBwb2ludHM9IjUuNDYsMTUwIDk0LjA2LDMwMCA5NC4wNiwwIi8+PHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0Q0QTU1RiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMjIuOTI1NiIgcG9pbnRzPSIwLDE0NCA0LDE0NCA5NC4wNiwzMDAiLz48cG9seWxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDRBNTVGIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIyMi45MjU2IiBwb2ludHM9IjAsMTU2IDQsMTU2IDk0LjA2LDAiLz48L3N2Zz4=');
}

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
html, body {
    height: 100%;
}
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}
input, button, textarea, select {
    font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/* General declarations */
[hidden] {
    display: none !important;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    width: 100%;
}

body {
    background: var(--background);
    background-size: 3rem;
    background-position: 50%;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 18px;
    color: var(--foreground);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Limelight', serif;
    line-height: 1.2; 
    hyphens: auto;
}

h1 { font-size: 1.75em; }
h2 { font-size: 1.75em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.17em; }
h5 { font-size: 1em; }

h1:not(:last-child),
h2:not(:last-child),
h3:not(:last-child),
h4:not(:last-child),
h4:not(:last-child),
p:not(:last-child),
ul:not(:last-child),
ol:not(:last-child) {
    margin-bottom: 1rem;
}

ol,
ul {
    padding-left: 1em;
}

ul {
    list-style-type: '– ';
}

ol.is-spaced li:not(:last-child),
ul.is-spaced li:not(:last-child) {
    margin-bottom: 1rem;
}

a,
a:visited {
    color: var(--foreground);
}

a,
button {
    cursor: pointer;
}

svg {
    shape-rendering: geometricPrecision;
    text-rendering:  optimizeLegibility;
}

@media (max-width: 900px) {
    body {
        font-size: 16px;
    }

    h1 { font-size: 1.5em; }
    h2 { font-size: 1.5em; }
}

/* Language switch */
html:not([lang^=nl]) [lang=nl] {
    display: none !important;
}

html[lang^=nl] [lang=en] {
    display: none !important;
}

/*******************************************************************************
 * Generic elements
 ******************************************************************************/

.block {
    display: block;
    background: var(--background);
    margin: var(--gap);
    padding: var(--gap);
    max-width: var(--text-width);
    text-align: center;
    border: var(--border-width) solid var(--border-color);
}

.icon {
    fill: currentColor;
    height: var(--icon-size);
    width: var(--icon-size);
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -.1em;
}

/* Button */
:is(button, .button) {
    --height: var(--button-height);
    display: inline-block;
    height: var(--height);
    margin: 0 calc(var(--height) * var(--hexagon-scale));
    padding: 0em .75em;
    position: relative;

    background: var(--background);
    border-top: var(--border);
    border-bottom: var(--border);
    border-left: none;
    border-right: none;

    line-height: calc(var(--height) - var(--border-width)); /* Center text vissually */
    text-decoration: none;
    color: var(--foreground);

    transform-style: preserve-3d;
}

:is(button, .button)::after,
:is(button, .button)::before {
    --cap-translate-x: 0.5;
    --cap-border: 3.5px solid var(--border-color);
    --cap-transform: translateZ(-1px) translateX(calc(var(--height) * var(--cap-translate-x))) scaleX(calc(var(--hexagon-scale) * 2)) scale(0.725) rotate(45deg);

    display: block;
    content: '';
    height: var(--height);
    width: var(--height);
    position: absolute;
    top: calc(-1 * var(--border-width));

    background-color: var(--background);
    border: var(--cap-border);
    transform: var(--cap-transform);
}

:is(button, .button)::after {
    --cap-translate-x: -0.5;
    left: 100%;
}

:is(button, .button)::before {
    right: 100%;
}

:is(button, .button):hover,
:is(button, .button):hover::after,
:is(button, .button):hover::before {
    background-color: var(--gold);
    color: var(--background);
}

:is(button, .button):is(.is-active, :active),
:is(button, .button):is(.is-active, :active)::after,
:is(button, .button):is(.is-active, :active)::before {
    background-color: var(--foreground);
    color: var(--background);
}


/* Stealth button */
:is(button, .button).is-stealth {
    border-top: var(--border-width) solid transparent;
    border-bottom: var(--border-width) solid transparent;
}

:is(button, .button).is-stealth::after,
:is(button, .button).is-stealth::before {
    display: none;
}

:is(button, .button).is-stealth:hover {
    border-top: var(--border);
    border-bottom: var(--border);
}

:is(button, .button).is-stealth:hover,
:is(button, .button).is-stealth:hover::after,
:is(button, .button).is-stealth:hover::before {
    background-color: var(--background);
    color: var(--foreground);
}

:is(button, .button).is-stealth:is(.is-active, :active),
:is(button, .button).is-stealth:is(.is-active, :active)::after,
:is(button, .button).is-stealth:is(.is-active, :active)::before {
    background-color: var(--gold);
    color: var(--background);
}

:is(button, .button).is-stealth:is(.is-active, :hover, :active)::after,
:is(button, .button).is-stealth:is(.is-active, :hover, :active)::before {
    display: block;
}

.toggle {
    --height: var(--button-height);
    padding: 0 calc(var(--height) * var(--hexagon-scale));
    display: flex;
}

.toggle :is(button, .button) {
    margin: 0;
}

.toggle :is(button, .button):not(.is-active):not(:last-child) {
    padding-right: 1em;
}

.toggle :is(button, .button):not(.is-active):not(:first-child) {
    padding-left: 1em;
}

.toggle :is(button, .button).is-active,
.toggle :is(button, .button).is-active::after,
.toggle :is(button, .button).is-active::before {
    background-color: var(--gold);
    color: var(--background);
}

.toggle :is(button, .button):active,
.toggle :is(button, .button):active::after,
.toggle :is(button, .button):active::before {
    z-index: 20;
}

/* Border container */
header,
.bauble-switcher > * {
    --cap-width: calc(var(--hexagon-scale) * var(--height) + var(--border-endcap-offset));
    position: relative;
    height: var(--height);

    border-top: var(--border);
    border-bottom: var(--border);

    background: var(--background);
    color: var(--foreground);
    text-align: center;

    z-index: 10;
}

header::after,
header::before,
.bauble-switcher > ::after,
.bauble-switcher > ::before {
    display: block;
    content: '';

    position: absolute;
    top: calc(-1 * var(--border-width));
    width: var(--cap-width);
    height: var(--height);

    background: var(--border-endcap);
    background-position: left center;
    background-size: auto 300px;
    border: none;

    transform: none;
}

header::after,
.bauble-switcher > ::after {
    left: 100%;
    transform: scaleX(-1);
}

header::before,
.bauble-switcher > ::before {
    right: 100%;
}

/* Border button */
.bauble-switcher > button:hover::after,
.bauble-switcher > button:hover::before,
.bauble-switcher > .button:hover::after,
.bauble-switcher > .button:hover::before {
    background-image: var(--border-endcap-hover);
    background-color: transparent;
}

.bauble-switcher > button:active::after,
.bauble-switcher > button:active::before,
.bauble-switcher > .button:active::after,
.bauble-switcher > .button:active::before {
    background-image: var(--border-endcap-active);
    background-color: transparent;
}


/*******************************************************************************
 * Dialog
 ******************************************************************************/
@keyframes animateZoom {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

dialog {
    background: var(--background);
    margin: auto;
    color: var(--foreground);
    text-align: left;
    max-width: var(--text-width);
    position: relative;
    overflow-y: auto;
    padding: var(--gap);
}

dialog[open] {
    animation: animateZoom var(--duration);
}

/* I hate that positioning the button like this works, but I'll take it */
dialog form[method='dialog'] {
    position: sticky;
    top: 0;
    right: 0;
    text-align: right;
}

dialog form[method='dialog'] button {
    color: var(--foreground);
    position: absolute;
    top: calc(-1 * var(--gap));
    right: calc(-1 * var(--gap));
    background: none;
    border: none;
    padding: calc(0.5 * var(--gap));
    transition: transform var(--duration);
}

dialog form[method='dialog'] button::after,
dialog form[method='dialog'] button::before {
    display: none;
}

dialog form[method='dialog'] button:hover .icon {
    transform: scale(1.05);
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}


@media (max-width: 400px) {
    dialog {
        width: calc(100vw - var(--gap));
    }
}

/*******************************************************************************
 * Layout and main elements
 ******************************************************************************/
main {
    width: 100%;
    max-width: var(--main-max-width);
    margin: 0 auto;
    padding: var(--gap);
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

@media (max-width: 400px) {
    main {
        padding: var(--gap) calc(var(--gap) * 0.5);
    }
}

/* Header */
header {
    --height: var(--header-height);
    width: var(--header-width);

    margin-right: auto;
    margin-bottom: calc(-0.5 * var(--height) - 0.5 * var(--fancy-border-width));
    margin-left: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

header h1 {
    line-height: 1em;
    margin-bottom: 0.2em !important;
}
header p {
    line-height: 1em;
}

@media (max-width: 900px) {
    header {
        max-width: calc(100vw - 2 * var(--cap-width) - 2 * var(--fancy-border-texture-width) - 3 * var(--gap));
    }
}

@media (max-width: 400px) {
    header {
        max-width: calc(100vw - 2 * var(--cap-width) - 2 * var(--fancy-border-texture-width) - 1.5 * var(--gap));
    }
}

/* Animation */
.animation-container {
    --overhead-estimate: 20rem;
    min-height: 25rem;
    flex: 0 0 calc(100vh - var(--overhead-estimate));
    position: relative;

    background-image: url('/img/pattern.svg');
    background-size: 3rem;
    background-position: center top;

    display: flex;
    justify-content: center;
    align-items: center;


    border: var(--fancy-border);
    border-image: var(--fancy-border-image);

    box-shadow: inset -.1vmin .12vmin 3vmin #0008;
}

.animation-container::after,
.animation-container::before {
    --junction-height: 26px;
    --junction-width: 20px;
    display: block;
    content: '';
    height: var(--junction-height);
    width: var(--junction-width);
    position: absolute;
    bottom: calc(-0.5 * var(--fancy-border-width) - 0.5 * var(--junction-height));
    background: url('/img/border_junction.svg');
    z-index: 10;
}

.animation-container::after {
    right: calc(-1 * var(--fancy-border-width));
    transform: scaleX(-1);
}

.animation-container::before {
    left: calc(-1 * var(--fancy-border-width));
}

.animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.animation canvas {
    filter: drop-shadow(-5vmin 6vmin 15vmin #0008);
}


/* Navigation */
.bauble-switcher {
    --height: var(--navigation-height);
    margin-top: calc(-0.5 * var(--height) - 0.5 * var(--fancy-border-width));
    margin-bottom: calc(-0.5 * var(--height));
    display: flex;
    justify-content: center;
    gap: calc(var(--gap) + 2 * var(--border-endcap-offset));
    position: relative;
    z-index: 10;
}

.bauble-switcher > * {
    --height: var(--navigation-height);
    padding: 0;
}

.bauble-switcher .bauble-title {
    width: var(--bauble-title-width);
    display: flex;
    justify-content: center;
    align-items: center;
}

.bauble-switcher .bauble-title h2 {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

.bauble-switcher .bauble-title h2 * {
    /* Make sure everything overflows correctly */
    display: inline;
}

@media (max-width: 900px) {
    .bauble-switcher {
        gap: 0;
    }

    .bauble-switcher > * {
        margin: 0;
    }

    .bauble-switcher > :not(:last-child)::after,
    .bauble-switcher > :not(:first-child)::before {
        display: none;
    }

    .bauble-switcher > :hover {
        z-index: 20;
    }

    .bauble-switcher > :not(:last-child):hover:after,
    .bauble-switcher > :not(:first-child):hover::before {
        display: block;
        background-image: none;
        background-color: var(--gold);
        border: var(--cap-border);
        transform: var(--cap-transform);
        width: var(--height);
    }

    .bauble-switcher > :not(:last-child):active:after,
    .bauble-switcher > :not(:first-child):active::before {
        background: var(--foreground);
    }

    .bauble-switcher > :last-child:hover:after {
        transform: translateZ(-1px) scaleX(-1); /* Fix weird behaviour in Firefox */
    }

    .bauble-switcher .bauble-title {
        max-width: calc(100vw - var(--gap) * 12); /* ✨ Magic ✨ */
    }
}

/* Content */
.content {
    flex: 1 0;
    position: relative;

    margin-top: calc(-0.5 * var(--fancy-border-width));
    padding-top: calc(0.5 * var(--navigation-height) - 0.5 * var(--fancy-border-width));
    padding-right: var(--gap);
    padding-bottom: calc(var(--fancy-border-width)); /* Compensate for border detail */
    padding-left: var(--gap);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background: var(--background);
    border: var(--fancy-border);
    border-image: var(--fancy-border-image);
}

.content::after {
    --detail-width: 76px;
    --detail-height: 42px;
    display: block;
    content: '';

    width: var(--detail-width);
    height: var(--detail-height);

    position: absolute;
    bottom: calc(-0.5 * calc(var(--detail-height) + var(--fancy-border-width)));
    left: calc(50% - 38px);

    background: url('/img/border_detail.svg');
    background-size: auto var(--detail-height);
    z-index: 10;
}

/* Bauble + instructions */
.bauble,
.instructions {
    max-width: var(--text-width);
    margin: var(--gap) auto;
    text-align: center;
}

/* Controls */
.controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
}

.controls .bauble-controls {
    display: contents;
}

/* Footer  */
footer {
    margin-top: var(--gap);
    font-size: 85%;
    position: relative;
}

footer ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    display: flex;
    justify-content: space-between;
}

footer .toggle .button {
    --height: 1.70em;
    font-size: 85%;
}


/*******************************************************************************
 * Overrides
 ******************************************************************************/

#navigation-dialog {
    text-align: center;
}

#navigation-dialog h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1em;
}

#navigation-dialog ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    font-family: 'Limelight', serif;
    line-height: 1.5;
    font-size: 1.5rem;
    padding: 0 1rem;
}

#navigation-dialog ul li:not(:last-child) {
    margin-bottom: .2em;
}

#navigation-dialog .button {
    --height: 1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
}


/*******************************************************************************
 * Template
 ******************************************************************************/
.template {
    display: none;
}

.template svg {
    shape-rendering: geometricPrecision;
    fill: black;
    font-family: 'Josefin Sans';
    font-weight: normal;
}

.template svg .solid {
    fill: black;
}

.template svg .hatch-line {
    stroke: #9e9e9e;
    stroke-width: 1;
}

.template svg .hatch {
    fill: url('#pattern-hatch');
}

.template svg .cut-mark {
    fill: none;
    stroke: black;
    stroke-width: 2.36;
}

.template svg .cut-mark.slot {
    stroke-width: 3.12;
}

.template svg .score-mark {
    fill: none;
    stroke: black;
    stroke-width: 2.36;
    stroke-dasharray: 20.83 10.42;
}

@media print {
    body {
        margin: 0mm;
        background: none;
    }

    main {
        display: none;
    }

    .template {
        display: block;
    }

    .template svg {
        max-height: 100vh;
        max-width: 100vw;
    }
}