/**
 * G A Lesskis site  CSS
* Content TABS styling
*/
.tab-container {
  display: flex;
  flex-wrap: wrap; /* Wraps content divs under the label row */
  max-width: 1600px;
  box-sizing: border-box;
  margin: auto;
}

/* Hide the native radio buttons completely */
.tab-container input[type="radio"] {
  display: none;
}

/* Style the Labels to look like functional Tabs */
.tab-container label {
	width: 25%;
  padding: 12px 24px;
  background: var(--gal-inactive-tab-back-color);
  color: var(--gal-inactive-tab-color);
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  margin-right: 4px;
  transition: background 0.3s ease;
}

.tab-container label:hover {
  background: var(--gal-inactive-tab-back-color-hover);
  color: var(--gal-inactive-tab-color-hover);
}

/* Default Content Box Styling (Hidden by default) */
.tab-container .tab-content {
	margin:auto;
  align-content: center;
  padding: 1rem;
  background: var(--gal-tab-content-back-color);
  #border: 1px solid #ccc;
  #border-radius: 0 4px 4px 4px;
  box-sizing: border-box;
  order: 1; /* Pushes content below all the flexed labels */
  display: none;
}

/* --- THE LOGIC MECHANICS --- */

/* Highlight the label associated with the active/checked radio button */
.tab-container input[type="radio"]:checked + label {
  background: var(--gal-active-tab-back-color);
  color: var(--gal-active-tab-color);
  border: 1px solid #ccc;
  border-bottom: 1px solid var(--gal-tab-content-back-color); /* Blends seamlessly into the content box */
  position: relative;
  z-index: 2;
  margin-bottom: -1px; /* Overlaps content border */
}

/* Reveal the specific content box directly following the checked radio button's label */
.tab-container input[type="radio"]:checked + label + .tab-content {
  display: grid;
}

@media screen  and (max-width: 1000px) {
.tab-container {
    margin-right: 4%;
    margin-left: 4%;
}
.tab-container label {
	width:100%;
}
}


@media screen and (min-width: 601px) and (max-width: 959px) {
.tab-container {
    margin-right: 12%;
    margin-left: 12%;
}
}

@media screen and (min-width: 960px) {
.tab-container {
    margin-right: 16%;
    margin-left: 16%;
}
}