@import url(https://fonts.bunny.net/css?family=lato:400,400i,700,700i|poetsen-one:400);
@import url(/site/templates/fonts/fontello-ee36ad3b/css/fontello.css);

/*
 *
#9d007e
 * z-index:
 * 0
 * 1 raised
 * 10 menu
 *
*/

/* Variables {{{ */
:root {

  --col-warm-grey: #626058;
  --col-dark-grey: #272422;
  --col-bright-blue: #2c98ed;
  --col-bright-blue-bg: #117aca; /* white text passes AA std. */
  --col-dark-blue: #02477d;
  --col-amber: #fc0;
  --col-silver: #fbfbfb;
  --col-eggshell: #fef4f6;
  --col-dawn: #f6fbf6;
  --col-dusk: #e7ecf0;
  --col-pink: #ffaaee;

  --col-text: var(--col-dark-grey);
  --font-display: 'Poetsen One';

  --scroll-fraction: 1;
}
/*
$colourLightBlue  : #88cafe;
$colourLightAmber : #ffe682;
*/
/* }}} */

/* HTML elements {{{ */
*, *::after, *::before { box-sizing: border-box; }

body, h1, h2, h3, h4, h5, h6 {
  font-family: Lato;
}
h2, h3, h4, h5, h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  font-family: var(--font-display);
  &:first-child {
    margin-top:0;
  }
}
h1 {
  color: var(--col-bright-blue);
  font-weight: 400;
  font-family: var(--font-display);
  font-size: clamp(1.6em, 9vw, 2em);
}
h2 {
  color: var(--col-bright-blue);
  font-size: clamp(1.4em, 8vw, 1.5em);
}
body {
  margin: 0;
  padding: 0;
  font-weight: 400;
  color: var(--col-text);
  font-size: clamp(1.1rem, 4vw, 1.2rem);
}

p {
  margin: 0 0 1rem;
  line-height: 1.5;
  &:last-child {
    margin-bottom: 0;
  }
}
dl, ul, ol {
  margin-top: 0;
  margin-bottom: 0;
}
li {
  margin-bottom: 1rem;
}
ul {
  padding-left: 1.5rem;
  margin:0;
  &>li::marker { color: var(--col-amber); }
  &>li ul { list-style: disc; }
 &>li ul>li::marker { color: var(--col-pink); }
}

blockquote {
  font-family: var(--font-display);
  color: var(--col-dark-blue);
}

pre {
  overflow: auto;
  background: var(--col-silver);
  padding: 1em;
  border-radius: 4px;
  border: solid 1px var(--col-dusk);
  color: var(--col-dark-blue);
  font-size: 0.875rem;
}

code {
  background: var(--col-silver);
  padding: 0.05em 0.5em;
  border-radius: 4px;
  display: inline-block;
  border: solid 1px var(--col-dusk);
  color: var(--col-dark-blue);
  font-size: 0.875rem;
}

pre>code {
  display: inline;
  background: none;
  border: none;
  padding: none;
}


strong {
  font-family: var(--font-display);
}
em strong, strong em { font-style: normal; }

a:link,
a:visited,
a:focus,
a:hover,
a:active
{
	color: var(--col-bright-blue-bg);
	text-decoration-style: solid;
	text-decoration-color: var(--col-pink);
	text-decoration-thickness: 3px;
}
a:visited { color: var(--col-dark-blue); }
a:focus, a:hover { text-decoration-color: var(--col-amber); }
a:active { text-decoration-color: var(--col-bright-blue); }

table {
  border-collapse: collapse;
  border: none;
  font-size: 1rem;
}

th, td {
  border: none;
  border-left: solid 1px #eee;
  padding: 0.25rem 0.5rem;
}

td {
  border-top: solid 1px #eee;
}

th:first-child, td:first-child {
  border-left: none;
}

/* }}} */
/* Forms  {{{ */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="password"],
textarea {
  background: var(--col-eggshell);
  padding: 0.5em;
  border: none;
  border-radius: 6px;

  &:focus {
    outline: solid 2px var(--col-pink);
  }
}

label {
  var(--col-bright-blue);
  font-weight: bold;
}

button {
  appearance: none;
  background: none;
  border: none;
  margin: 0;
  padding: 0.25rem 1rem;
  line-height: 1;
  font-size: 1.2rem;
  color: var(--col-dark-blue);
  font-family: var(--font-display);
  border: solid 2px var(--col-amber);
  border-radius: 0.8rem;
  &:hover {
    border-color: var(--col-bright-blue);
    color: var(--col-bright-blue);
  }
}

/* }}} */

/* Functional classes {{{ */
div.overflow-x { overflow-x: scroll; }

.normal-page-width,
.wider-page-width,
.narrow-page-width {
  padding-left: max(0.5rem, 4vw);
  padding-right: max(0.5rem, 4vw);
  margin-left: auto;
  margin-right: auto;
}
.normal-page-width { max-width: 1200px; }
.wider-page-width { max-width: 1400px; }
.narrow-page-width { max-width: 800px; }

.center { text-align: center; }

/* Apply text to a container of bulk text. */
.text {
  p {
    max-width: 65ch;
  }
  li {
    line-height: 1.5;
    max-width: 65ch;
  }
  img {
    max-width: 100%;
  }
}

.white-links {
  a:link, a:visited { color: white; text-decoration:none;}
  a:hover { color: var(--col-amber); }
  a:active { color: var(--col-pink); }
}

.smallprint {
  opacity: 0.8;
  font-size: 0.875rem;
}

.text-on-dark {
  color: var(--col-silver);
}

.layout-lr {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: flex-start;
  gap: 1rem;
}

.pv0 { padding-top: 0; padding-bottom: 4; }
.pv1 { padding-top: 4rem; padding-bottom: 4rem; }
.pv2 { padding-top: 2rem; padding-bottom: 2rem; }
.pv3 { padding-top: 2rem; padding-bottom: 2rem; }
.pv4 { padding-top: 4rem; padding-bottom: 4rem; }
.pt0 { padding-top: 0; }
.pt1 { padding-top: 4rem; }
.pt2 { padding-top: 2rem; }
.pt3 { padding-top: 2rem; }
.pt4 { padding-top: 4rem; }
.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: 4rem; }
.pb2 { padding-bottom: 2rem; }
.pb3 { padding-bottom: 2rem; }
.pb4 { padding-bottom: 4rem; }

/* Flexbox */
.df { flex-wrap: wrap; }
.fjc-sa { justify-content: space-around; }
.fw-w { flex-wrap: wrap; }

/* backgrounds (chop, highlight) {{{*/
.bg-1 {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), 0 100%);
	background-image: linear-gradient(180deg,rgb(255, 255, 255) 0%, rgb(245, 245, 245) 100%);
  padding-bottom: 4rem;
}
.bg-2 {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 2rem));
	background-image: linear-gradient(180deg,rgb(255, 255, 255) 0%, rgb(245, 245, 245) 100%);
  padding-bottom: 4rem;
}
.bg-hl {
	border-image: url('/site/templates/images/bg-hl.svg') 8% 1% fill;
	border-style: solid;
	border-width: 2rem 1rem;
	padding: 2vw 2rem;
  h2, h3 { color: var(--col-dark-blue); }
}
/* }}} */

/* }}} */

/* Component: Admin links {{{ */

#admin-links {
  display:none
}
@media screen and (min-width:768px) {
  body.logged-in {
    margin-left:2rem
  }
  #admin-links {
    background:#354b60;
    bottom:0;
    display:block;
    left:0;
    position:fixed;
    top:0;
    width:2rem;
    z-index: 11; /* header is 10 */
  }
  #admin-links a {
    color:#fff;
    display:block;
    padding:.25rem 0;
    text-align:center;
    text-decoration:none;
    width:2rem
  }
  #admin-links a:hover {
    background:#2a3c4c;
  }
}
/* }}} */
/* Component: animation {{{ */
.pulse { animation: 0.3s pulse; }
@keyframes pulse {
  0% { transform: none; }
  30% { transform: scale(1.1); }
  100% { transform: none; }
}
.slide-pre {  transform: translateY(1rem); opacity: 0;  }
.slide { animation: 0.3s slide forwards; }
@keyframes slide {
  0% { transform: translateY(1rem); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* }}} */
/* Component: blog-index cards {{{ */
.blog-index.cards {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-auto-rows: max-content min-content min-content min-content;

  & > li {
    padding: clamp(1rem, 3vw, 2rem);
    grid-row: span 4;
    display: grid;
    grid-template-rows: subgrid;
    box-shadow:none; /* o/r */
    background-image: conic-gradient(
      at 0 50%,
      color-mix(in oklch, var(--col-amber) 20%, transparent),
      color-mix(in oklch, var(--col-bright-blue) 20%, transparent),
      color-mix(in oklch, var(--col-amber) 20%, transparent)
    );
    background-size: 200% 100%;
    background-position: 6% 0;
    transition: 0.2s background-position;
    border-radius: 0.5rem;
    &:hover {
      background-position: 0 0;
      background-image: conic-gradient(
        at 0 50%,
        color-mix(in oklch, var(--col-amber) 30%, transparent),
        color-mix(in oklch, var(--col-bright-blue) 20%, transparent),
        color-mix(in oklch, var(--col-amber) 30%, transparent)
      );
    }
  }

  article {
    grid-row: span 4; /* img, date, title, tags */
    display: grid;
    grid-template-rows: subgrid;
  }
  .image {
    border-radius: 0.4rem;
    box-shadow: -2px 2px 2px color-mix(in oklch, var(--col-amber) 40%, transparent);
    background:white;
    display: grid;
    place-content: center;
    margin: -0.75rem  -0.75rem 0;
    padding: 0.5rem;
    
    &.no-image {
      box-shadow: none;
      background:transparent;
    }
  }
  .when {
    padding: 0.5em 0;
    font-size: 1rem;
  }
  h1 {
    font-size: clamp(1.4em, 8vw, 1.5em);
    margin: 0;
  }
  /* Compact tags */
  .tags {
    align-self: end;
    padding: 0 0 0 0.5rem;
    margin-bottom: 0;
    font-size: 0.875rem;
    justify-content: flex-start;
  }

}
/* }}} */
/* Component: comments {{{ */
.comments-reply-form {
	background: var(--col-dusk);
	padding: 2rem;
	width: 100%;
  border-radius: 0 1rem 1rem;
  margin: 1rem 0;

  label>span { display: block;}

  input[type=text],
  input[type=email],
  textarea {
    width: 100%;
  }

  .pending.success {
    color: var(--col-bright-blue-bg);
    margin-left:2.5rem;
    &::before {
      content: '✓' / '';
      display: block;
      margin-left: -2.5rem;
      position: absolute;
      background: var(--col-bright-blue);
      border-radius: 2rem;
      line-height: 2rem;
      text-align:center;
      width:2rem;
      height:2rem;
    }

  }
}

.CommentList {
  list-style: none;
  padding-left: 0;
  ul { padding-left: 2rem; }
  .CommentListItem {
    display: grid;
    grid-template-columns: minmax(15ch, 75%) min-content 1fr;
  }
  .CommentHeader,
  .CommentText,
  .CommentFooter {
    margin: 0;
  }
  .CommentCreated {
    font-weight: normal;
    color: var(--col-warm-grey);
  }
  .CommentHeader,
  .CommentFooter {
    grid-row: 1;
    font-size: 1rem;
    line-height: 1rem;
  }
  .CommentHeader {
    grid-column: 1;
    padding: 0.5rem 0 0 0;
    border-radius: 0;
    font-weight: bold;
  }
  .CommentText {
    padding: 1rem;
    color: black;
    grid-column: 1 / 3;
    grid-row: 2;
    border-radius: 0 1rem 1rem 1rem;
    background-color: var(--col-pink);
  }
  .CommentFooter {
    grid-column: 2;
    padding: 0.5rem 1rem 0;
  }
  &>li>.CommentList {
    padding-top: 1rem;
    grid-row: 4;
    grid-column: 1 / 4;
  }
  .comments-reply-form {
    grid-row: 3;
    grid-column: 1 / 3;
    margin-left: 2rem;
  }


}
/* }}} */
/* Component: Custom zip animation {{{ */
#zip-animation { width: 100%;height: 100%; object-fit:contain; }
#zip-left { stroke-dashoffset: 2; }
@keyframes zipr { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 4; } }
@keyframes zipl { 0% { stroke-dashoffset: 2; } 100% { stroke-dashoffset: 6; } }
body.animation-ok {
  #zip-right { animation: 2s infinite zipr linear; }
  #zip-left { animation: 2s infinite zipl linear; }
}
/* }}} */
/* Component: Dialog {{{ */
body:has(dialog[open]) {
  overflow: hidden;
}
/* Make the dialog basically just a transparent overlay. */
dialog {
  background: transparent;
	border:none;
	outline: none;
	&::backdrop { background: transparent; }
  &:modal {
    max-width: none;
    max-height: none;
  }
	width: 100vw;
	height: 100vh;
	padding: 0;
	margin:0;
}
#main-menu .dialog-content {
  padding: 1rem 2rem;
  max-width: clamp(20rem, 100vw, 23rem);
  display: block;
  margin-left: auto;
  background: white;
  border-left: solid 1px var(--col-bright-blue);
	height: 100vh;
}
#main-menu-close-btn {
  margin-left: auto;
  display:block;
}

#contact-form-dialog .dialog-content {
  background-color: white;
  border: solid 2px var(--col-bright-blue);
  padding: 2rem clamp(0.5rem, 4vw, 2rem);
  position: absolute;
  overflow : hidden;
  border-radius : 8px;
}

::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}
::view-transition-image-pair(contact-form) {
  isolation: auto;
}

::view-transition-old(contact-form),
::view-transition-new(contact-form) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}

/* }}} */
/* Component: Footer  {{{ */
#footer {
  background-color: var(--col-bright-blue-bg);
  color: white;
  font-size: 0.875rem;
}
/* }}} */
/* Component: Fluent form  {{{ */
/* leave space for validation error */
fluent-form-simple input,
fluent-form-textarea textarea
{
  margin-bottom: 1.2rem;
}
.iff-validation-error {
  margin-top: -1.2rem;
  position: absolute;
}

.iff-input-wrap {
  margin-bottom: 0.5rem;
}
.iff-text-after {
  font-size: 0.875rem;
}

fluent-form[data-public-id="f4225a815f9a"] textarea {
  min-height: 5rem;
}

/* }}} */
/* Component: Header {{{*/
#header {
  background: white;
  position: sticky;
  top:0;
  z-index: 10;
  box-shadow: 0 0 2rem rgba(0,0,0, calc(0.2 * (1 - var(--scroll-fraction))));
}
#header__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: center;
  transition: padding 0.2s ease-out;
  --pad: clamp(0.5rem, 3vw, calc(1rem + 1rem * var(--scroll-fraction, 1)));
  padding-top: var(--pad);
  padding-bottom: var(--pad);
  margin-bottom: calc(2rem * (1 - var(--scroll-fraction, 1)));
  background: white;
}
#header-logo {
  width: clamp(80px, 60vw, calc(200px + 380px * var(--scroll-fraction, 1)));
  transition: width 0.2s ease-out;
  height: auto;
}
#header__buttons {
  justify-self: end;
  justify-content: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  button {
    flex: 0 0 auto;
  }
}
/* }}} */
/* Component: Pager: .MarkupPagerNav {{{ */
ul.MarkupPagerNav {
  list-style: none;
  display: flex;
  gap: 2em;
  justify-content: center;
  a { display: block; padding: 0.5em 1em; }
  a:hover { background: var(--col-dawn); }
  li[aria-current="true"] a {
    background: var(--col-dawn);
    text-decoration: none;
  }
}
/* }}} */
/* Component: Parts general {{{ */
a.pw-edit-part {
  position: absolute;
  right:0;
  &:hover {
    color: var(--col-pink);
  }
}
/* }}} */
/* Component: part-cards  {{{ */
ul.cards {
  list-style:none;
  padding:0;
  margin:0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr));
  gap: 1rem;

  h3 { margin: 0;}

  & > li {
    padding:2rem clamp(1rem, 3vw, 2rem);
    margin:0;
    display: grid;
    grid-template-rows: subgrid; 
    grid-row: span 3;
    background: white;
    border-radius: 1rem;
    box-shadow: 0.5rem 0.5rem 1rem rgba(0,0,0,0.1);
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}
/* }}} */
/* Component: part-image-grid  {{{ */
.ptn-item.part-image-grid {
  ul {
    list-style: none;
    gap: 2rem;
    display: flex;
    flex-wrap: wrap;

    /* display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, max-content)); */

    justify-content: space-around;
    align-items: center;
    margin:0;
    padding:0;
  }
  li {
    flex: 0 0 200px;
    margin:0;
    padding:0;
  }
  picture { display: block; }
  picture img { display: block; width: 100%; height: 100%; object-fit: contain; }
}
/* }}} */
/* Component: part-text-with-side-image {{{ */

.part-text-with-side-image {
  .columns {
    display: grid;
    gap: 2rem;
    min-width: 0;
  }
  padding-bottom: 2rem;

  .image img { max-width: 100%; height: auto; display: block;  margin: 0 auto ; }
}

@media screen and (min-width:768px) {
  .part-text-with-side-image {

    .image img { max-width: 100%;}

    .columns {
      grid-template-rows: 1fr;
      grid-template-columns: 200px 1fr;
    }
    /* other means text */
    &.cols-small-other .columns  { grid-template-columns: 200px minmax(0, 1fr) ;}
    &.cols-medium-other .columns { grid-template-columns: 300px minmax(0, 1fr) ;}
    &.cols-big-other .columns    { grid-template-columns: 450px minmax(0, 1fr) ;}
    &.cols-other-small .columns  { grid-template-columns: minmax(0, 1fr) 200px ;}
    &.cols-other-medium .columns { grid-template-columns: minmax(0, 1fr) 300px ;}
    &.cols-other-big .columns    { grid-template-columns: minmax(0, 1fr) 450px ;}


  }
}
/* }}} */
/* Component: selector-widget {{{ */
.simple-selection-widget {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(25ch, 1fr));
  gap: 1rem;

  article {
    padding:2rem clamp(1rem, 3vw, 2rem);
    margin:0;
    display: grid;
    grid-template-rows: subgrid; 
    grid-row: span 2;
    background: white;
    border-radius: 1rem;
    box-shadow: 0.5rem 0.5rem 1rem rgba(0,0,0,0.1);
  }
  .info {
    padding-top: 1rem;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  h1 { font-size: 1.2rem; margin: 0; }

}
/* }}} */
/* Component: tags (on full pages) {{{ */
ul.tags {
  display: flex;
  gap: 0.5em 2em;
  flex-wrap: wrap;
  justify-content: center;
  li {
    margin-bottom: 0;
    &::marker {
      content: '# ' / '';
      color: var(--col-bright-blue-bg);
    }
  }
}
/* }}} */

/* vim: set foldmethod=marker : */