/* Default (light) theme) */
:root {
  /* dynamic theme variables */
  --bg-color: rgb(255, 255, 255);
  --n2nd-bg-color: rgb(235, 235, 235);
  --n3rd-bg-color: rgb(225, 225, 225);
  --primary-text-color: #000000;
  --secondary-text-color: #333333; /* Optional secondary text color */
  --link-color: rgb(0, 136, 255);
  --advertisement-bg-color: rgb(200, 200, 200); /* Background color for the noticeboard */

  /* dynamic screen-size variables */
  --header-footer-side-margin: 10%;
  --main-side-margin: 17%;
  --big-font-image-size-multiplier: 1.0; /* Default font size multiplier */
}

/* Dark theme overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: rgb(34, 34, 34);
    --n2nd-bg-color: rgb(51, 51, 51);
    --n3rd-bg-color: rgb(71, 71, 71); /* Optional third background color */
    --primary-text-color: #ffffff;
    --secondary-text-color: #b1b1b1; /* Optional secondary text color */
    --link-color: rgb(0, 136, 255);
    --advertisement-bg-color: rgb(27, 27, 27); /* Background color for the noticeboard */
  }
}

@media (max-width: 768px) {
  :root {
    --header-footer-side-margin: 5%;
    --main-side-margin: 7%;
    --big-font-image-size-multiplier: 0.9;
    /* Slightly reduce font size */
  }
}




/* General styles across the webpage  (not including test pages) */
* {
  transition: background-color .3s, color .2s;
}

a {
  color: var(--link-color);
}
h1 {
  font-size: calc(2rem * var(--big-font-image-size-multiplier));
}
h2 {
  font-size: calc(1.5rem * var(--big-font-image-size-multiplier));
}
h3 {
  font-size: calc(1.2rem * var(--big-font-image-size-multiplier));
}
p {
  line-height: 1.5;
}

.code-line {
  font-family: monospace;
  background-color: var(--n3rd-bg-color);
  padding: 2px 4px;
  border-radius: 4px;
  white-space: normal;
  overflow-wrap: break-word; 
  word-break: break-all; /* Legacy support for older browsers */
}

.horizontal-line {
  width: 100%;
  height: 1.5px;
  background-color: var(--n2nd-bg-color);
  margin: calc(4rem * var(--big-font-image-size-multiplier)) 0;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--n2nd-bg-color);
  color: var(--primary-text-color);
  overflow-x: hidden;
  /* Hides horizontal overflow content */
}

/* main content area — give it room for our 3vw sidebar */
.main-site-content-a {
  height: 100vh;          /* full height of viewport */
  margin-right: 15vw;      /* leave space on the right for .Noticeboard */
  overflow-y: auto;       /* scroll only this area */
  box-sizing: border-box; /* include padding/borders in the height */
}

/* the fixed noticeboard on the right */
.Noticeboard-a {
  background: var(--advertisement-bg-color);
  position: fixed;  /* remove from flow and pin to viewport */
  top: 0;
  right: 0;
  width: 15vw;
  height: 100vh;
  overflow: hidden; /* if you never want it to scroll; change to auto if you do */
}

header {
  padding: 10px var(--header-footer-side-margin);
  background: var(--n2nd-bg-color);
  margin: 0;
}

.logo-and-title {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: calc(1rem * var(--big-font-image-size-multiplier));
}

.logo-and-title img {
  width: calc(50px * var(--big-font-image-size-multiplier, 1));
  height: auto;
}

.navigation-path-bar {
  background-color: color-mix(in srgb, var(--n2nd-bg-color) 90%, #ffffff 50%);
  padding: 10px var(--header-footer-side-margin)
}

/* dark theme specific classes */
@media (prefers-color-scheme: dark) {
  .navigation-path-bar {
    background-color: color-mix(in srgb, var(--n2nd-bg-color) 90%, #000000 10%);
  }
}

.navigation-path-bar p {
  margin: 0;
  font-size: calc(0.9rem * var(--big-font-image-size-multiplier));
}

main {
  padding: 30px var(--main-side-margin);
  min-height: 75vh;
  background: var(--bg-color);
}

.page-content .section {
  margin-bottom: calc(3rem * var(--big-font-image-size-multiplier));
}

footer {
  padding: 90px var(--header-footer-side-margin);
  min-height: 25vh;
  background: var(--n2nd-bg-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo-and-title-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.logo-and-title-footer img {
  width: calc(200px * var(--big-font-image-size-multiplier, 1));
  height: auto;
}

.logo-and-title-footer p {
  font-size: calc(2rem * var(--big-font-image-size-multiplier));
  font-weight: bold;
  margin: 0 0 calc(1.5rem * var(--big-font-image-size-multiplier));
  text-align: center;
}

.copyright-notice {
  font-size: calc(0.8rem * var(--big-font-image-size-multiplier));
  text-align: center;
  max-width: 800px;
}




/* Component page styles */
.multi-component-view {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: calc(25px * var(--big-font-image-size-multiplier));
}

/* Dynamic theme component container (uses device theme) */
.component-container {
  background: var(--bg-color, #ffffff);
  outline: 1px dashed var(--primary-text-color);
  outline-offset: 1px;
  border-radius: 5px;
  padding: 25px;
  margin: 10px 0 5px;
  min-width: 80px;
  min-height: 80px;

  /* Center the content */
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
/* Light and dark theme specific classes */
.component-container.light-theme {
  background-color: #ffffff;
  color: #000000;
}
.component-container.dark-theme {
  background-color: #222222;
  color: #ffffff;
}

.component-container[data-act="disabled"] span {
    opacity: 0.5;
}

.component-description {
  font-size: calc(0.8rem * var(--big-font-image-size-multiplier));
  margin: 5px 0 0;
  color: var(--secondary-text-color);
}