/* PALETTE  -------------------------------------------------------------- */
:root {
  --bg:             #000;
  --corners:        #be98c9;
  --headline-item:  #9898fc;
  --sidebar:        #9898c9;
  --selected:       #e79868;

  --text-heading:   #e79824;
  --text-numbers:   #b56696;
  --text-main:      var(--sidebar);

  --gap: 10px;
}

/* GLOBAL  --------------------------------------------------------------- */
html { font-size: 16px; }
*   { box-sizing: border-box; }

body{
  margin:0;
  color:#fff;
  font-family: "Roboto", sans-serif;
  background: var(--bg);
  height:100vh;
}

.maincontainer{
  width:90%;
  margin-block:5vw;
  margin-inline:auto;
  display: flex;
  flex-direction: column;
}

.content{ 
  display:flex; 
  flex: 1;
  min-height: 0; /* Important for proper flex shrinking */
}

/* HEADLINE  ------------------------------------------------------------- */
.headline{
  display:flex;
  justify-content:space-between;
  margin-bottom:-1px;
}

.headline__box{
  height:120px;
  background:var(--headline-item);
}

.headline__box:first-child{
  width:200px;
  margin-right:var(--gap);
  border-radius:40px 0 0 0;
  background:var(--corners);
}
.headline__box:nth-child(2){ flex:1 1 0; }
.headline__box:last-child{
  width:40px;
  border-radius:0 40px 40px 0;
}
.headline__box--title{
  margin:0 var(--gap);
  background:var(--bg);
  display:flex;
  justify-content:center;
  align-items:center;
}

.headline__heading{
  color:var(--text-heading);
  text-transform:uppercase;
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:-1px;
}
@media (min-width:768px){
  .headline__heading{ transform:scale(1,2.5); }
}

/* UNDERLINE  ------------------------------------------------------------ */
.underline{
  display:flex;
  height:20px;
  margin:0 0 var(--gap);
}

.underline__box--sidebar{
  width:140px;
  background:var(--corners);
}
.underline__box--round{
  width:20px;
  background:var(--corners);
  display:flex;
  align-items:flex-start;
}
.underline__box--roundinner{
  width:21px;
  aspect-ratio:1 / 1;
  background:var(--bg);
  border-radius:10px 0 0 0;
}
.underline__box--remainder{
  flex:1 1 0;
  background:var(--bg);
}

/* CONTENT GRID --------------------------------------------------------- */
/* --Sidebar */
.content__sidebar{
  min-width:140px;
  display:flex;
  flex-direction:column;
}
.content__sidebaritem{
  height:40px;
  margin:0 0 var(--gap);
  padding:0 var(--gap) 0 var(--gap);
  display:flex;
  justify-content:flex-end;
  align-items:center;
  background:var(--headline-item);
}
.content__sidebaritem--spacer,
.content__sidebaritem--bottom{ background:var(--sidebar); }
.content__sidebaritem--bottom{ flex-grow:1; }
.content__sidebaritem--active{ background:var(--selected); }

.content__sidebartext{
  color:var(--bg);
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:-1px;
  text-align:right;
}

/* --Mid-bar numbers */
.content__midbar{
  width:60px;
  display:flex;
  flex-direction:column;
}

.content__midbaritem{
  height:40px;
  margin:0 0 var(--gap);
  display:flex;
}

.content__midbaritem:hover, .content__sidebaritem--link:hover{
  cursor: pointer;
}

.content__midbartext{
  display:flex;
  align-items:center;
  padding:0 var(--gap);
}

.content__midbarnums{
  color:var(--text-numbers);
  font-weight:900;
  transform:scale(1,2.5);
}

.content__midbar-round{
  flex-grow:1;
  height:40px;
  background:var(--headline-item);
  border-radius:0 20px 20px 0;
}
.content__midbar-round--active{ background:var(--selected); }

/* --Main column */
.content__main{
  flex:1 1 0;
  padding:0 var(--gap);
  margin:0 var(--gap);
  display:flex;
}

.content__mainheading{
  color:var(--text-heading);
  text-transform:uppercase;
  letter-spacing:-1px;
}
.content__mainheadinglink{
  color:#ffb06b;
  text-decoration:none;
}
.content__mainheadinglink:hover{ color:#cb7a34; }

.content__maintext{ color:var(--text-main); margin-right:2rem; }

.content__maintext a{ color:var(--text-main); }

/* Prevent paragraphs from breaking across columns */
.content__maintext p {
  break-inside: avoid;
}

/* OVERLINE  ------------------------------------------------------------ */
.overline{
  display:flex;
  height:20px;
}
.overline__box{ height:20px; }
.overline__box--sidebar{
  width:140px;
  background:var(--corners);
}
.overline__box--round{
  width:20px;
  background:var(--corners);
  display:flex;
  align-items:flex-end;
}
.overline__box--roundinner{
  width:21px;
  aspect-ratio:1 / 1;
  background:var(--bg);
  border-radius:0 0 0 10px;
}
.overline__box--remainder{
  flex:1 1 0;
  background:var(--bg);
}

/* FOOTER BAR ----------------------------------------------------------- */
.bottomline{
  display:flex;
  justify-content:space-between;
  margin-top:-1px;
}

.bottomline__box{
  height:80px;
  background:var(--headline-item);
  color:#000;
}
.bottomline__box a{
  color:#000;
  text-decoration:none;
}
.bottomline__box:first-child{
  width:200px;
  margin-right:var(--gap);
  border-radius:0 0 0 40px;
  background:var(--corners);

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.bottomline__box:nth-child(2){ flex:1 1 0; }
.bottomline__box:last-child{
  width:40px;
  margin-left:var(--gap);
  border-radius:0 40px 40px 0;
}

/* Content section visibility & layout */
.content-section { display:none; }
.content-section.active{
  display:flex;
  flex:1;
  flex-direction:column;
  max-height: calc(100vh - 200px); /* Adjust based on header/footer height */
  overflow-y: auto;
}

/* Bottom-right attribution */
.content__maintext.attribution{
  margin-top:auto;
  align-self:flex-end;
  text-align:right;
  position:static;
}

.last__updated{
  font-size:0.8rem;
  font-style:italic;
}

/* Center middle images horizontally and set size */
.middle_image {
  text-align: center;
}

.middle_image img {
  max-width: 50%;
  height: auto;
}

.invention_name{
  font-size:1.3rem;
  font-weight:800;
}

/* Status lights */
.status-light {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  vertical-align: middle;
}

.status-light--red {
  background-color: #ff4444;
  box-shadow: 0 0 8px #ff4444;
}

.status-light--yellow {
  background-color: #ffaa00;
  box-shadow: 0 0 8px #ffaa00;
}

.status-light--green {
  background-color: #44ff44;
  box-shadow: 0 0 8px #44ff44;
}

/* Use this class instead for the scan line effect */
.initialized {
  animation: tvScanIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
}

.availability_count_break{
  display:none;
}

@media (max-width: 768px) {
  body {
    height: 100vh;
    overflow-x: hidden;
  }
  
  .maincontainer {
    width: 95%;
    margin-block: 2vw;
  }
  
  .content__sidebar {
    min-width: 0;
  }
  
  .content__midbar {
    display: none;
  }
  
  .content-section.active {
    max-height: none; /* Let it fill available space and scroll */
    overflow-y: auto;
  }
  .availability_count_break{
    display:block;
  }
}

/* Desktop 2-column layout for content text */
@media (min-width: 769px) {
  body{ overflow:hidden; }
  .maincontainer{
    height: calc(100vh - 10vw);
  }
  .content{ overflow:auto; }
  .content-section.active:not(:has(#home)) .content__maintext {
    column-count: 2;
    column-gap: 2rem;
    column-fill: balance;
  }
  /* Custom thin scrollbar styling */
  .content::-webkit-scrollbar {
    width: 6px; /* Make scrollbar thinner */
  }

  .content::-webkit-scrollbar-track {
    background: var(--bg); /* Match background color */
  }

  .content::-webkit-scrollbar-thumb {
    background: var(--sidebar); /* Use your sidebar color */
    border-radius: 3px;
  }

  .content::-webkit-scrollbar-thumb:hover {
    background: var(--selected); /* Highlight color on hover */
  }

  /* Firefox scrollbar styling */
  .content {
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar) var(--bg);
  }

  /* Also style scrollbars for content sections */
  .content-section.active::-webkit-scrollbar {
    width: 6px;
  }

  .content-section.active::-webkit-scrollbar-track {
    background: var(--bg);
  }

  .content-section.active::-webkit-scrollbar-thumb {
    background: var(--sidebar);
    border-radius: 3px;
  }

  .content-section.active::-webkit-scrollbar-thumb:hover {
    background: var(--selected);
  }

}

/* Alternative: TV scan line effect */
@keyframes tvScanIn {
  0% {
    opacity: 0;
    transform: scaleY(0.1);
    filter: brightness(200%) contrast(150%);
  }
  20% {
    opacity: 0.3;
    transform: scaleY(0.3);
    filter: brightness(180%) contrast(130%);
  }
  50% {
    opacity: 0.7;
    transform: scaleY(0.8);
    filter: brightness(120%) contrast(110%);
  }
  80% {
    opacity: 0.9;
    transform: scaleY(0.95);
    filter: brightness(105%) contrast(102%);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
    filter: brightness(100%) contrast(100%);
  }
}

/* Add this to your CSS to hide elements initially */
.content__sidebartext,
.content-section {
  opacity: 0;
}

/* Only show them when initialized */
.content__sidebartext.initialized,
.content-section.initialized {
  opacity: 1;
}