:root {
  --most-front: 10000;
  --front: 600;
  --back: 1;
  --light-text: #ffffff;
}

/* --------- TYPEFACE ----------- */

@font-face {
  font-family: 'Digiset';
  src: url('assets/fonts/Digiset-Medium.woff2') format('woff2'),
    url('/assets/fonts/Digiset-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --------- HELPER / BASIC ----------- */

* {
  margin: 0;
  padding: 0;
  font-family: 'Digiset', sans-serif;
  font-size: 16px;
  box-sizing: border-box;
  color: #ffffff;
}

body {
  background-color: black;
}

.hidden {
  display: none;
}

div,
span,
p {
  color: var(--light-text);
}

a,
p {
  text-decoration: none;
}

.no-decoration {
  background: none;
  background-color: transparent;
}

.label {
  display: inline-block;
  width: 8em;
  white-space: nowrap;
  text-align: left;
}

/* --------- START SCREEN ----------- */

/* 
#start-screen {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--back);
  overflow-y: hidden;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  width: 100dvw;
  height: 100dvh;
  background-color: black;
} */


/* --------- HEADER ----------- */
header,
footer {
  height: 3rem;
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #000000;
}


header p {
  position: absolute;
  right: 1rem;
}

/* #btm-navigation {
  position: absolute;
  bottom: 0;
  z-index: var(--most-front);
} */

/* --------- INDEX ----------- */

#start-title {
  /* margin: 1rem;   */
  z-index: var(--front);
  display: flex;
}

#start-title .title-02 {
  margin-left: 3em;
}


.top-box {
  height: calc(80vh - 3rem);
  /* subtract header height */
  width: 100%;
  background: url('assets/home/sw_home.webp') center/cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  background-color: rgb(152, 152, 152);
}

.top-box p {
  position: absolute;
  bottom: 0;
  margin: 1rem;
}

.bottom-boxes {
  display: flex;
  height: 10vh;
  width: 100%;

}

.bottom-box-link {
  width: 50%;
  height: 10vh;
  text-decoration: none;
  display: block;
}

.bottom-box {
  width: 100%;
  height: 100%;
  background-color: #000000;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  color: white;
  padding: 1rem;
}


/* --------- GRID ----------- */


.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  height: calc(100vh - 3rem);
  /* fills rest of screen after header */
  overflow: hidden;
}

.image-grid {
  padding: 1rem;
  gap: 0.2rem;
  height: calc(100vh - 3rem - 2rem);
  /* header + padding */
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

.grid-item {
  height: 100%;
  overflow: hidden;
  display: block;
  color: white;
  text-decoration: none;
}

.grid-item video {
  height: calc(100% - 2rem);
  /* leave space for title */
}

.grid-item img {
  width: 100%;
  height: calc(100% - 1.5rem);
  object-fit: cover;
  display: block;
}

.grid-item p {
  margin-left: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.image-grid .grid-item p {
  margin-left: 0;
  /* remove extra margin, inherits padding */
  margin-top: 0.2rem;
  /* keep some vertical spacing */
  font-size: 0.9rem;
}

/* --------- PROCESS ----------- */

.slider-container {
  height: calc(100vh - 6rem);
  /* full height minus header + footer */
  position: relative;
  overflow: hidden;
}

/* Slider image styling */
.slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slider video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slider video.fit-contain {
  object-fit: contain; /* scales down to show full content */
  background-color: black; /* optional: fill empty space */
}


/* Overlay Text Styling */
.image-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: black;
  font-size: 1rem;
  background-color: transparent;
}

.image-overlay span {
  color: #ffffff;
  text-shadow: 1px 0px 5px rgb(0, 0, 0, 40%);
}

.nav-numbers {
  display: flex;
  gap: 0.2rem;
  align-items: center;
}

.slider-btn {
  background: none;
  border: none;
  color: rgb(141, 141, 141);
  padding: 0.2rem 0rem;
  font-size: 1rem;
  cursor: pointer;
}

.slider-btn.active {
  background: none;
  color: rgb(255, 255, 255);
}



/* --------- COLOR ----------- */


/* --- TOP HALF: VIDEO --- */
.video-half {
  flex: 1;
  overflow: hidden;
}

.video-half video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- BOTTOM HALF: INFO --- */
.info-half {
  flex: 1;
  padding: 0 1rem;
  display: flex;
  align-items: center;
}

.info-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1rem;
}

/* --- LEFT SIDE: TEXT TABLE --- */

.info-table {
  display: flex;
  flex-direction: column;
  flex: 2;
}

.info-table div {
  display: flex;
  tab-size: 3em;
  white-space: pre;
  /* Keeps tab alignment */
}

.label {
  width: 6em;
}

.value {
  flex: 1;
}

.value img {
  height: 4rem;
  vertical-align: left;
  margin-top: 0.5rem;
}

.side-content {
  margin-top: 0.5rem;
  margin-right: 1rem;
}

.plant-month {
  margin-bottom: 2em;
}

.plant-month .plant-label,
.crop-month .crop-label {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* --------- IMPRINT  ----------- */


.imprint-tabs {
  display: flex;
  flex-direction: column;
  gap: 0; /* no spacing between rows */
  width: 100%;
  padding: 0 1rem; /* adjust to match your site margins */
}

.imprint-tab {
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
  /* padding: 0.75rem 0; */
  font-size: 1rem;
  /* line-height: 1.4; */
}

.imprint-tab .label {
  flex-shrink: 0;
  min-width: 8rem; /* gives the label tabbed spacing */
}

.imprint-tab a {
  color: inherit;
}