/*--
  © 2026 Nereus Games – http://nereus.games/
  ❤︎ Sharing is caring. Please share & reuse as you see fit.
  */


/* @group base */

@import url('./reset.css');
@import url('./fonts.css');

:root {
  /* fonts */
  --ng-body:                    'ng-body', serif;
  --ng-titling:                 'ng-titling', sans-serif;
  --ng-ui:                      'ng-ui', sans-serif;
  --mr-body:                    'mr-body', sans-serif;
  --mr-titling:                 'mr-titling', sans-serif;
  /* colours */
  --white:                      #FFFFFF;
  --navy:                       #012D6C;
  --indigo:                     #222255;
  --turquoise:                  #2BA1A1;
  --yellow:                     #DDBB33;
  /* layout */
  --section-width:              min(34rem, 100%);
  --header-clearance:           8rem;
  /* z-index scale */
  --z-progress:                 5;
  --z-credit:                   10;
  --z-header:                   100;
  }

/* @end */
/* @group layout */

body {
  display:                      flex;
  flex-flow:                    column nowrap;
  justify-content:              space-between;
  min-height:                   100vh;
  &.no-scroll {
    overflow:                   hidden;
    & main, & footer {
      visibility:               hidden;
      }
    }
  }
header, nav, nav ul {
  display:                      flex;
  flex-flow:                    row nowrap;
  justify-content:              space-between;
  }
header {
  align-content:                center;
  align-items:                  center;
  position:                     fixed;
  top:                          0;
  left:                         0;
  width:                        100%;
  padding:                      1rem;
  z-index:                      var(--z-header);
  & * {
    list-style:                 none;
    margin:                     0;
    padding:                    0;
    }
  & h1 img {
    max-width:                  8rem;
    }
  @media (max-width: 840px) {
    &:has(button[aria-expanded="false"]) nav {
      display:                  none;
      }
    &:has(button[aria-expanded="true"]) {
      flex-flow:                row wrap;
      align-items:              flex-start;
      align-content:            space-between;
      height:                   95vh;
      & h1, & button {
        align-self:             center;
        }
      & nav, & #menu ul {
        width:                  100%;
        flex-flow:              column nowrap;
        align-items:            center;
        align-content:          center;
        }
      & #menu {
        font-size:              2rem;
        }
      & #b-nav {
        margin-bottom:          2rem;
        }
      }
    }
  @media (min-width: 840px) {
    & button {
      display:                  none;
      }
    }
  }
nav {
  gap:                          1rem;
  & ul {
    gap:                        .2rem;
    }
  }
.waved {
  padding-bottom:               3rem;
  & + * {
    margin-top:                 -5rem;
    }
  }
main {
  flex:                         1;
  padding-top:                  var(--header-clearance);
  }

/* @end */
/* @group theme */

html {
  color:                        var(--navy);
  font-family:                  var(--ng-body);
  font-weight:                  500;
  }
header {
  background:                   var(--white);
  color:                        var(--navy);
  .theme-dark & {
    background:                 var(--navy);
    color:                      var(--white);
    }
  & button {
    background:                 transparent;
    border:                     none;
    color:                      inherit;
    cursor:                     pointer;
    }
  }
nav {
  font-family:                  var(--ng-ui);
  font-size:                    .8rem;
  font-weight:                  700;
  & #lang-choice {
    font-variant:               small-caps;
    text-transform:             lowercase;
    }
  }
main * + *:not(br) {
  margin-top:                   1rem;
  }
h1, h2, h3, h4, h5, h6 {
  font-family:                  var(--ng-titling);
  }
i, em {
  font-style:                   italic;
  }
b, strong {
  font-weight:                  700;
  }
main a {
  text-decoration:              underline;
  }
a:focus, a:hover {
  color:                        var(--turquoise);
  }
footer {
  background:                   var(--navy);
  color:                        var(--white);
  padding:                      1rem;
  & p {
    font-family:                var(--ng-ui);
    font-size:                  .6rem;
    text-align:                 center;
    }
  }

/* @end */
/* @group forms */

/* honeypot anti-spam field: off-screen rather than display:none, so bots
   that skip hidden inputs still fill it. legit users never see/tab to it. */
.honeypot {
  position:                     absolute;
  left:                         -9999px;
  width:                        1px;
  height:                       1px;
  opacity:                      0;
  pointer-events:               none;
  }

/* the rules below only apply to contact and newsletter forms. */
form.reach {
  margin:                       0 auto 1rem;
  width:                        100%;
  max-width:                    min(80%, 30rem);
  & label {
    display:                    block;
    font-size:                  .6rem;
    margin:                     .1rem .3rem;
    }
  & button {
    background:                 var(--navy);
    color:                      var(--white);
    .dark-bg & {
      background:               var(--white);
      color:                    var(--navy);
      }
    &:active {
      background:               var(--turquoise);
      }
    }
  & input, & select, & textarea {
    color:                      var(--navy);
    }
  & input, & button, & select {
    height:                     1.6rem;
    }
  & textarea {
    height:                     6rem;
    }
  & input, & button, & select, & textarea {
    font-size:                  1rem;
    line-height:                1.2rem;
    margin:                     0;
    margin-bottom:              .2rem;
    padding:                    .1rem .2rem;
    border-radius:              .25rem;
    outline:                    1px solid var(--navy);
    border:                     1px solid transparent;
    .dark-bg & {
      outline-color:            var(--white);
      }
    &:hover, &:focus {
      outline-color:            var(--turquoise);
      border-color:             var(--turquoise);
      /*  note: outlines are *outside* borders.
          here, we want to grow the *internal* border, without
          making the content "jump" when hovering/focusing. */
      }
    }
  @media (max-width: 840px) {
    & * {
      width:                    100%;
      }
    & div {
      margin-top:               .4rem;
      }
    & button {
      margin-top:               1rem;
      }
    }
  @media (min-width: 840px) {
    & fieldset {
      display:                  flex;
      flex-flow:                row;
      justify-content:          space-between;
      align-items:              flex-end;
      column-gap:               .4rem;
      & input, & select {
        width:                  100%;
        }
      & > div {
        flex:                   1 1 0;
        min-width:              0;
        transition:             flex-grow 0.3s ease;
        &:has(input:focus) {
          flex-grow:            3;
          }
        }
      & button, & div:has(select) {
        flex:                   none;
        }
      }
    & > div {
      width:                    100%;
      margin-top:               .4rem;
      & textarea {
        width:                  100%;
        }
      }
    & > button {
      display:                  block;
      margin:                   1rem auto 0;
      min-width:                12rem;
      }
    }
  }

/* @end */