/* ========================= */
/* Root spacing variables    */
/* ========================= */
:root {
  --s: 16px;
  --m: 20px;
  --l: 24px;
  --xl: 60px;

  /* Cursor variables */
  --cursor-src: "../../assets/cursor/cursor.png";
  --cursor-normal: url("../../assets/cursor/cursor.png") 0 0, auto;
  --cursor-flipped: auto; /* unused; kept for compatibility */
}

/* ========================= */
/* General body styles       */
/* ========================= */
body {
  background-color: rgb(246, 251, 240);
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #222222 !important;
  font-family: 'Program', Helvetica, sans-serif;
  font-size: var(--m);
  overflow-x: hidden;
  line-height: 150%;
  cursor: var(--cursor-normal);
}

/* Keep cursor consistent on hover for clickable elements */
a:hover,
button:hover,
[role="button"]:hover {
  cursor: var(--cursor-normal);
}

/* ========================= */
/* Header grid layout        */
/* ========================= */
header {
  width: 100%;
  background: rgb(246, 251, 240);
}

#header-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  margin: 1em 0 0 0;
  padding: 0 1em;
  width: 100%;
  box-sizing: border-box;
  gap: 1em;
}

#mobile-links {
  display: contents;
}

.header-content { grid-column: 1; grid-row: 1; }
#future-events  { grid-column: 2; grid-row: 1; }

.info-trigger    { grid-column: 3; grid-row: 1; }
#reading-trigger { grid-column: 4; grid-row: 1; }
#contact-trigger { grid-column: 5; grid-row: 1; }

.site-title,
.info-trigger,
#future-events {
  font-size: var(--m);
}

.site-branding {
  display: block;
  text-decoration: none;
  color: inherit;
}

.logo {
  width: 10em;
  height: auto;
}

#future-events {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

/* Blinking effect for future events */
@keyframes blink-future {
  0%, 49% { color: black; }
  50%, 100% { color: rgb(197, 254, 81); }
}

#future-events a,
#future-events p {
  margin: 0;
  padding: 0;
  text-decoration: none;
  animation: blink-future 1s infinite;
}

a {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: #222222 !important;
}

p {
  margin: 0;
  padding: 0;
}

.site-title,
#future-events,
#reading-trigger,
.info-trigger,
#contact-trigger,
#mobile-links,
#header-grid a {
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

.header-line {
  border: none;
  border-top: 2px solid #000000;
  margin: 2em 1em;
  box-sizing: border-box;
  position: relative;
}

/* ========================= */
/* Main content styling      */
/* ========================= */
main {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-left: 1em;
  margin-right: 1em;
  font-size: var(--m);
}

#intro-column,
#text-column,
#image-column {
  margin-bottom: var(--m);
}

footer { margin-top: auto; }

.content-line {
  border: none;
  border-top: 2px solid #000000;
  margin: 1em 1em;
  box-sizing: border-box;
}

#info-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-left: 1em;
  margin-right: 1em;
  gap: 1em;
}

/* ========================= */
/* Canvas section            */
/* ========================= */
#canvas {
  width: 100%;
  height: 100vh;
  top: 0px;
  position: absolute;
}

#canvas-button {
  padding: 0.2rem 1rem;
  position: fixed;
  z-index: 9999;
  bottom: 3em;
  background-color: #000000;
  color: rgb(246, 251, 240);
  border: 1px solid black;
  border-radius: 50px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}

#canvas-container.closed { display: none; }
#canvas-container { transition: all 0.3s ease; }

figure { margin: 1rem; }

/* ========================= */
/* Mobile Styles             */
/* ========================= */
@media only screen and (max-width: 768px) {
  #header-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.5em;
    padding: 0 1em;
    margin-top: 1em;
  }

  .site-branding {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
    min-width: 0;
  }

  .site-title {
    grid-column: auto;
    grid-row: auto;
    font-size: var(--m);
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
  }

  .logo {
    width: 2.5em;
    height: auto;
    flex: 0 0 auto;
  }

  #future-events {
    display: block;
    grid-row: 2;
    grid-column: 1;
  }

  #mobile-links {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1em;
    grid-row: 3;
    grid-column: 1;
    flex-wrap: wrap;
  }

  #mobile-links a,
  #mobile-links div {
    font-size: var(--m);
  }

  #canvas {
    width: 100%;
    height: 100vh;
    top: 0px;
    position: absolute;
  }

  #canvas-button { bottom: 1rem; }

  .header-content,
  .info-trigger,
  #reading-trigger,
  #contact-trigger {
    grid-column: auto;
    grid-row: auto;
  }
}