/* ----- Fonts ----- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Music&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* ----- General behaviour ----- */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

body {
  background-color: white;
  color: black;
  font-family: 'Noto Sans', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-content {
  flex: 1;
}

footer {
  background-color: lightgrey;
  padding: 0.5rem 1rem; /* Easy to adjust top/bottom and left/right padding */
}

.footer-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 1rem; /* optional: tweak to match your layout */
  line-height: 1;
}
  /* Decides the distance between elements in the footer */
.footer-content span + span {
  margin-left: 3ch;
}

#reconstruction{
  color: red;
  text-align: center;
}
/* Global rule for <p> to ensure readability */
p {
  max-width: 100ch;
  padding: 0rem;
}

/* ----- Music Symbols ----- */
#music-symbols {
  font-family: 'Noto Music', serif;
  font-size: 3rem;
  line-height: 1.0;
  text-align: center;
  margin-top: 0rem;
}

/* ----- Top Header ----- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem;
}
#top h1, #top h2 {
  margin: 0;
}
#top h1 {
  color: black;
  font-size: larger;
}
#top h2 {
  color: dimgrey;
  font-size: large;
}

/* ----- Link Bar ----- */
#link_bar {
  font-family: 'Noto Sans', sans-serif;
}

a:link,
a:visited {
  color: inherit;
}

/* General link style */
a {
  text-decoration: none; /* Remove underline globally */
  position: relative;
  display: inline-block;
}

/* Inner span (for background + text control) */
a span {
  padding: 0 2px;
  background-color: transparent;
  color: black;
}

/* ----- Bracket Behavior ----- */
/* BrH = Brackets Hidden = Brackets are hidden until hovered */
/* BrS = Brackets Shown = Brackets are always shown */

/* Brackets hidden by default for .BrH */
a.BrH::before,
a.BrH::after {
  visibility: hidden;
  color: black;
}

  /* Show brackets on hover for .BrH */
a.BrH:hover::before,
a.BrH:hover::after {
  visibility: visible;
  color: black;
}

  /* Always show brackets for .BrS */
a.BrS::before,
a.BrS::after {
  visibility: visible;
  color: black;
}

  /* Bracket characters */
a::before {
  content: "[ ";
  margin-right: 0px;
}
a::after {
  content: " ]";
  margin-left: 0px;
}

/* ----- Color Behaviors in links----- */
/* CoC = Color Click = The link text and background changes color on click*/
/* CoH = Color Hover = The link text and background changes color on hover*/

  /* .CoC: */
a.CoC span {
  color: black;
  background-color: transparent;
}
a.CoC:active span {
  color: white;
  background-color: black;
}

/* .CoH: */
a.CoH span {
  color: black;
  background-color: transparent;
}
a.CoH:hover span,
a.CoH:active span {
  color: white;
  background-color: black;
}

/* ----- Space or no space between brackets in links ----- */
/* SY = Space Yes = There is a space between the brackets [] and the link text. */
/* SN = Space No = There is not a space between the brackets [] and the link text. SN is used when the link is part of a paragraph */
a.SY, a.SN {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

  /* Shared bracket styling */
a.SY::before, a.SY::after,
a.SN::before, a.SN::after {
  font-family: inherit;
  display: inline-block;
  vertical-align: middle;
  color: inherit;
  pointer-events: none;
}

  /* Brackets for SY */
a.SY::before {
  content: "[";
  font-size: 1.2em; /* Edit if bicker brackets is wanted. set to 1.2 em earlier*/
  margin-right: 0.25em;
}

a.SY::after {
  content: "]";
  font-size: 1.2em;
  margin-left: 0.25em;
}

  /* Brackets for SN */
a.SN::before {
  content: "[";
  font-size: 1em;
  margin-right: 0em;
}

a.SN::after {
  content: "]";
  font-size: 1em;
  margin-left: 0em;
}

  /* Reset bracket visibility for all links */
a.SY::before, a.SY::after,
a.SN::before, a.SN::after {
  visibility: hidden;
}

  /* Show brackets on hover if BrH is present */
a.BrH.SY:hover::before, a.BrH.SY:hover::after,
a.BrH.SN:hover::before, a.BrH.SN:hover::after {
  visibility: visible;
}

  /* Always show brackets if BrS is present */
a.BrS.SY::before, a.BrS.SY::after,
a.BrS.SN::before, a.BrS.SN::after {
  visibility: visible;
}

  /* Optional: if active state coloring is needed */
a:active span {
  background-color: black;
  color: white;
}

/* Ensure brackets stay colored properly */
a:active.SY::before, a:active.SY::after,
a:active.SN::before, a:active.SN::after {
  color: black;
}

/* Allow SY and SN to work with buttons too */
button.SY::before, button.SY::after,
button.SN::before, button.SN::after {
  font-family: inherit;
  display: inline-block;
  vertical-align: middle;
  color: inherit;
  pointer-events: none;
}

button.SY::before {
  content: "[";
  font-size: 1.2em;
  margin-right: 0.25em;
}

button.SY::after {
  content: "]";
  font-size: 1.2em;
  margin-left: 0.25em;
}

button.SN::before {
  content: "[";
  font-size: 1em;
  margin-right: 0em;
}

button.SN::after {
  content: "]";
  font-size: 1em;
  margin-left: 0em;
}

/* Hide brackets by default for BrH */
button.BrH.SY::before, button.BrH.SY::after,
button.BrH.SN::before, button.BrH.SN::after {
  visibility: hidden;
}

button.BrH.SY:hover::before, button.BrH.SY:hover::after,
button.BrH.SN:hover::before, button.BrH.SN:hover::after {
  visibility: visible;
}

/* ----- Front page ----- */
  /* Portraits */
#portrait1 {
  width: 30%;
  height: auto;
  display: block;
  border-radius: 0.0rem;
  box-sizing: border-box;
  margin: auto;
}

#events h3{
  text-indent: 50px;
}

/* ----- Works Section ----- */
/* h1 = Title of the piece */
/* i = year of the piece */
/* h2 = instrumentation */
/* p = Explenation and links to score and etc. */
.work h1 {
  font-size: larger;
  color: black;
}
.work i {
  color: dimgrey;
  font-size: medium;
  font-weight: normal;
  font-style: normal;
}
.work h2 {
  color: dimgrey;
  font-size: smaller;
}
.work p {
  color: black;
  font-size: small;
}

/* --- Toggle Button Styles --- */
#toggle-buttons {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  padding-left: 1rem
}

.toggle-button {
  all: unset;                /* Remove all default button styles */
  display: inline;           /* Keep buttons inline */
  font-size: 1rem;
  font-family: 'Noto Sans', sans-serif;
  cursor: pointer;
  margin-right: 1ch;
  position: relative;        /* For bracket positioning */
}

/* Span inside button holds text and background */
.toggle-button span {
  display: inline;
  background-color: transparent;
  color: black;
  line-height: 1.2;
  vertical-align: middle;
}

/* Brackets hidden by default */
.toggle-button::before,
.toggle-button::after {
  content: '';
  visibility: hidden;
  position: relative;
  top: -0.05em;             /* Align brackets vertically */
}

/* Show brackets on hover */
.toggle-button:hover::before {
  content: '[ ';
  visibility: visible;
}

.toggle-button:hover::after {
  content: ' ]';
  visibility: visible;
}

/* Active button styles */
.toggle-button.active span {
  background-color: black;
  color: white;
}

.toggle-button.active {
  cursor: default;
  pointer-events: none;     /* Disable clicks */
}



/* ----- About Section ----- */
/* Quote behaviour */
#quote {
color: black;
font-size: 1rem;
}

/* ----- Screensaver ----- */
#screensaver-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  display: none;
}
.bouncing-symbol {
  position: absolute;
  font-family: 'Noto Music', serif;
  font-size: 8rem;
  color: black;
  user-select: none;
  pointer-events: none;
}