/**
 * @file
 * Subtheme specific CSS.
 */

.navbar img {
   max-height: 40px;
}

.navbar {
  background-color: #f8f9fa; /* Light background */
  border-bottom: 1px solid #e9ecef; /* Subtle border */
}

.navbar-brand,
.navbar-nav .nav-link {
  color: #343a40; /* Darker text for contrast */
}

/* Adjust for hover/active states if needed */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #007bff; /* Example accent color */
}

#edit-flexbox-tdu-settings {
	flex-wrap: wrap;
}

#edit-flexbox-tdu-settings .inner-block-flex-section {
	min-width: 100%;
}


.inner-block-flex-section {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
	padding: 12px;
	background-color: #e1e1e1;
	border-radius: 12px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        align-content: stretch;
}

#edit-flexbox-tdu-settings {
	background: #cecece;
}

#edit-flexbox-tdu-settings .webform-flex--1 {
	min-width: auto !important;
}

#edit-flexbox-tdu-settings .webform-flex--0 {
	min-width: 100% !important;
}

#edit-flexbox-tdu-settings .webform-flex--0 {
	padding: 0;
	margin: 0;
	background-color: transparent;
}

#edit-flexbox-tdu-settings .container-flex-single-line {
	padding: 0;
	margin: 0;
	background-color: transparent;
  gap:10px;
}

#edit-flexbox-tdu-settings .webform-flex--0 .webform-flex--container {
	padding: 0;
	margin: 0 0.25em;
}

.container-flex-single-line {
	display: flex;
	padding: 0;
	margin: 0;
}



.flex-as-grid-2col {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-full-line {
  flex: 0 0 100%;
} 

.container-rounded-gray {
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 20px;
  padding-bottom: 5px;
}

.webform-submission-form legend {
  margin-bottom: 0;
  font-size: var(--bs-body-font-size);

}

.fieldset-legend {
font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  -webkit-text-size-adjust: 100%;
}

/* Two-column flex layout for webform fields.
   Usage: add the `flex-as-grid-2col` class to a wrapper around
   your form/fields (e.g. the webform elements container).
   Each direct child with class `.webform-flex` becomes a column. */
.flex-as-grid-2col {
	display: flex;
	flex-wrap: wrap;
	gap: 20px; /* space between columns/rows */
	align-items: flex-start; /* align top of columns */
  justify-content: flex-start;
}

.flex-as-grid-2col label {
	line-height: 22px;
}


.flex-as-grid-2col .webform-flex, .flex-as-grid-2col .form-item, .flex-as-grid-2col .js-form-item {
	/* Make each webform-flex a two-column tile that fits content
	   but doesn't shrink below a reasonable width. */
	flex: 0 0 calc(42% - 10px); /* two equal columns (subtract half the gap) */
	/* max-width: calc(50% - 10px); */
	box-sizing: border-box;
	min-width: 220px; /* prevents unusably narrow columns; adjust as needed */
}

.container-flex-single-line .webform-flex, .container-flex-single-line .form-item {
	flex: 0 0 auto;
}


.container-flex-single-line .webform-flexbox {
  flex: auto;
}

.js-webform-select-other .field-suffix {
  font-size: 0.875em;
  color: #6c757d !important;
} 

.js-webform-select-other .mb-3 {
  margin-bottom: 0 !important;
}

/* Admin fixes */
.views-ui-dialog .mb-3 {
  margin-bottom: 0rem !important;
}

.modal-body, .views-ui-dialog .scroll {
  overflow-y: auto;
  max-height: 55vh; /* Adjust height as needed to ensure buttons are visible */
}

.views-exposed-form .d-flex {
  gap: 10px;
}

table.sticky-header thead {
  top: auto !important;
}

/* Animations */


.animated-slides .item-list {
    position: relative;
    overflow: hidden;
    max-width: 220px;
    /* filter: drop-shadow(0 0 5px rgba(0,0,0,0.2)); */
}

.animated-slides .item-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: 0px;
    max-width: 120px;
    max-height: 120px;
    border-radius: 0;
}

.animated-slides img {
    max-width: 100%;
    max-height: 100%; 
}

.animated-slides .item-list ul::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.animated-slides .item-list ul li {
    flex: 0 0 100%;
    min-width: 220px;
    scroll-snap-align: center;
    position: relative;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

/* Auto-scroll animation */
@media (hover: hover) {
    .animated-slides .item-list ul li {
        animation: tonext 5s ease infinite;
    }

    .item-list ul li:last-child {
        animation-name: tostart;
    }
}

@keyframes tonext {
    75% {
        scroll-snap-align: center;
    }
    95% {
        scroll-snap-align: none;
    }
    99% {
        scroll-snap-align: none;
    }
    100% {
        scroll-snap-align: center;
    }
}

@keyframes tostart {
    75% {
        scroll-snap-align: center;
    }
    95% {
        scroll-snap-align: none;
    }
    99% {
        scroll-snap-align: none;
    }
    100% {
        scroll-snap-align: center;
    }
}

/* Adjust animation for 2 images */
.animated-slides .item-list ul:has(li:nth-child(2):last-child) li {
    animation-duration: 4s;
}

/* Single image - no animation */
.animated-slides .item-list ul:has(li:only-child) li {
    animation: none;
}

.flex-as-grid-2col .webform-flex--0 {
    flex: 0 0 100% !important;
    min-width: 100% !important;
}

.flex-inner-block .webform-flex--0 {
    flex: 0 0 100% !important;
    min-width: 100% !important;

    background-color: #cdcdcd;
    padding: 12px;
    border-radius: 12px;
}


.flex-inner-block .webform-flex--0 .mb-3{
    margin-bottom: 0 !important;
}