/* available on all pages generated by autocat3 */

.page h2 {
    color: black;
    font-size: 1.75em; /* Example: 1em is usually default, so this is larger */
}

/* Spacing between main sections */
.page .box,  /* Advanced Search section */
.page .full-text-search, /* Full Text Search section */
.page .full-text-search + h2 /* "Card Catalog" H2, assuming it's immediately after full-text-search */
{
    margin-top: 60px; /* Increased spacing above these sections */
}

/* Make all tab content sections have consistent responsive behavior */
.tabcontent > div {
    width: 100%;
    max-width: 100%;
}

/* Ensure Advanced Search box matches other sections' responsiveness */
.page .box {
    width: 100%;
    max-width: 100%;
}

/* Advanced Search form styling */
.page .box form .form-group input[type="text"],
.page .box form .form-group select {
    width: 300px; /* Consistent width for inputs and selects */
    display: block; /* Added for centering */
    margin: 0 auto; /* Added for centering */
}

.page .box form .form-group label {
    width: 120px; /* Adjust if needed for the longest label */
    text-align: right;
    position: absolute;
    left: calc(50% - 150px - 18px - 120px); /* 50% - half_input_width - gap - label_width */
    top: 8px; /* Align with div padding */
}

/* New style to center label/input pairs and the submit button */
.page .box form .form-group {
    position: relative; /* For absolute positioning of labels */
    padding: 8px 0; /* Added for spacing */
    margin-bottom: 8px; /* Adjusted vertical spacing */
}

/* Style for the navlinks to add space below icons */
.page .navlinks {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

/* Media query to stack nav icons vertically on smaller screens */
@media screen and (max-width: 735px) {
  .page .navlinks {
    flex-direction: column;
    align-items: center;
    margin-top: 0px;
  }
  
  .page .navlink {
    margin-bottom: 5px;
  }
  
  .page .navlink:last-child {
    margin-bottom: 0;
  }
  
  /* Reduce container padding at smaller screen sizes */
  .page .container {
    padding: 8vh 5vw;
  }
}

/* Tab styling */
.page .tabs-container { /* Renamed from .tabs */
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

/* Hide radio buttons accessibly */
.page .tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.page .tabs-container label { /* Style labels like buttons */
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  flex-grow: 1; /* Make labels share space equally */
  text-align: center; /* Center text within labels */
}

.page .tabs-container label:hover {
  background-color: #C7DDE3;
}

/* Style active label based on the sibling radio's state */
#tab-advanced:checked ~ .tabs-container label[for="tab-advanced"],
#tab-fulltext:checked ~ .tabs-container label[for="tab-fulltext"],
#tab-categories:checked ~ .tabs-container label[for="tab-categories"] {
  background-color: #C7DDE3;
}

.page .tabcontent {
  display: none; /* Hide all tab content by default */
  padding: 6px 12px;
  border-top: none;
  background-color: #f0f0f0;
  width: 100%;
  box-sizing: border-box;
}


.tabcontent > .box,
.tabcontent > .full-text-search {
  margin-top: 0;
}

/* Center headings within tab content */
.tabcontent h2 {
    text-align: center;
}

/* Center content in Full Text Search tab */
.full-text-search {
    text-align: center;
    padding-bottom: 20px; /* Added bottom padding */
}

/* Center added Lorem Ipsum text */
.tabcontent h2 + p {
    text-align: center;
}

/* Custom styles for Full Text Search tab content */
.full-text-search form {
    margin-top: 10px; /* Space between forms or form and paragraph */
    margin-bottom: 10px;
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    gap: 15px; /* Added gap for spacing between form elements */
}

.full-text-search form:first-of-type { /* First form after the intro paragraph */
      margin-top: 20px; 
      margin-bottom: 60px; /* Further increased space between Google and DuckDuckGo forms */
}

.full-text-search form img {
    height: 48px; /* Increased icon height */
    width: auto; /* Maintain aspect ratio */
}

.full-text-search form input[type="text"] {
    width: 300px; /* Match advanced search */
    display: block; /* Make it a block element */
    margin: 0 auto; /* Center it, removed specific bottom margin */
}

.full-text-search form input[type="submit"] {
    padding: 10px 20px; /* Match advanced search button padding */
    font-size: 1em;
    border: 1px solid #bbb; /* Match advanced search button border */
    border-radius: 4px;
    cursor: pointer;
    display: block; /* Make it a block element */
    margin: 0 auto; /* Center the button */
    width: fit-content; /* Adjust width to content */
}

.full-text-search form input[type="submit"]:hover {
    border-color: #888;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Match advanced search button hover */
}

/* Styling for the Advanced Search button */
.page #submit {
  padding: 10px 20px;
  font-size: 1em; /* Adjust as needed */
  border: 1px solid #bbb; /* Subtle border */
  border-radius: 4px; /* Rounded corners */
  cursor: pointer;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.page #submit:hover {
  border-color: #888; /* Darken border on hover */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Add a subtle shadow on hover */
}

.page .highlighted-link {
  background-color: #C7DDE3;
  padding: 0px 0px;
  display: inline-block;
  border-radius: 3px;
  text-decoration: none;
  color: inherit; /* Use the default link color or parent color */
}

/* Ensure last form group (submit button row) is centered */
.page .box form .form-group:last-of-type {
    text-align: center;
    position: static; /* Override position:relative if it causes issues */
    padding: 8px 0; /* Keep consistent padding */
}

/* Media query for responsive design */
@media screen and (max-width: 1200px) {
  .page {
    width: 95%; /* Use 95% width when screen is smaller than 1200px */
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (max-width: 768px) {
  .page .box form .form-group input[type="text"],
  .page .box form .form-group select {
    width: 250px;
  }
  
  .full-text-search form input[type="text"] {
    width: 250px;
  }
}

@media screen and (max-width: 600px) {
  .page .box form .form-group input[type="text"],
  .page .box form .form-group select {
    width: 200px;
  }
}

@media screen and (max-width: 410px) {
  .page .box form .form-group input[type="text"],
  .page .box form .form-group select {
    width: 100%;
  }
  .page .tabs-container label {
      font-size: 16px; /* Smaller font size */
      padding: 10px 8px; /* Reduced padding */
  }
}

/* Further reduce tab button font size on extremely small screens */
@media screen and (max-width: 310px) {
  .page .tabs-container label {
      font-size: 12px; /* Even smaller font size */
      padding: 8px 6px;  /* Further reduced padding */
  }
}

@media screen and (max-width: 768px) {
  .page .box form .form-group label {
    position: static;
    display: block;
    text-align: center;
    margin-bottom: 5px;
    width: 100%; /* Ensure label spans full width for proper centering */
  }
  
  

  /* Adjust spacing for smaller screens */
  .page .box form .form-group {
    margin-bottom: 15px;
  }
}

/* New div containers */
.icons-section {
  max-width: 800px; /* Match menu-and-content */
  width: 90%;       /* Match menu-and-content */
  margin: 0 auto;
  box-sizing: border-box;
  min-width: 300px;
}

.menu-and-content {
  max-width: 800px; /* Changed from width to max-width */
  width: 90%;       /* Added percentage width */
  margin: 0 auto; /* Centering using margin auto */
  box-sizing: border-box;
  min-width: 300px;
}

@media screen and (max-width: 850px) {
  .menu-and-content {
    width: 90%;
  }
}

@media screen and (max-width: 500px) {
  body .page {
    min-width: 320px !important;
  }
  .page .icons-section,
  .page .menu-and-content {
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .page {
    width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 600px) {
  .page .container, .page .icons-section, .page .menu-and-content, .page .narrow, .page .wide, .page .boxed {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .page {
    min-width: 0 !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  .page .icons-section {
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .page .navlinks {
    width: 100% !important;
    justify-content: center !important;
    display: flex !important;
    padding: 0 !important;
  }

}

/* Tab content */
#advanced-search {
  position: relative; /* Needed for absolute positioning of the info icon */
  padding-top: 30px; /* Add some padding to avoid overlap with icon */
}

/* Info icon and modal CSS */
.info-icon-label {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px; /* Increased width */
  height: 28px; /* Increased height */
  line-height: 28px; /* Match height */
  font-size: 20px; /* Increased font size */
  font-weight: bold;
  font-family: serif;
  color: #444;
  background-color: #fff;
  border: 1px solid #bbb;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.info-icon-label:hover {
  background-color: #eee; /* Slightly darker background on hover */
  color: #000; /* Black color on hover */
  border-color: #bbb;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.info-checkbox {
  display: none; /* Hide the actual checkbox */
}

.info-modal-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999; /* Ensure it's on top */
  justify-content: center;
  align-items: center;
}

.overlay-clickable {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.info-modal {
  background-color: white;
  padding: 30px; /* Increased padding */
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  width: 90%;
  max-width: 400px; /* Limit max width */
  max-height: 70vh; /* Limit max height */
  overflow-y: auto; /* Add scroll if content exceeds height */
  box-sizing: border-box;
  cursor: default; /* Reset cursor for modal content */
  z-index: 1000; /* Higher than overlay */
}

.info-modal-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 1.8em; /* Larger close button */
  font-weight: bold;
  color: #888;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}

.info-modal-close:hover {
  color: #333;
}

/* Show modal when checkbox is checked */
.info-checkbox:checked ~ .info-modal-overlay {
  display: flex; /* Use flex to center the modal */
}

/* Reset text alignment for paragraphs inside the modal within the advanced search tab */
#advanced-search .info-modal p {
  text-align: left;
  margin: 0px;
  padding: 4px 0px;
}

@media screen and (max-width: 440px) {
  .info-icon-label {
    width: 22px; /* Increased from 20px */
    height: 22px; /* Increased from 20px */
    line-height: 21px; /* Adjusted line-height */
    font-size: 15px; /* Increased from 13px */
    top: 8px;
    right: 8px;
  }
}

/* New media query to adjust modal position */
@media screen and (max-width: 1025px) {
  .info-modal { /* Target the modal itself */
    margin-top: 50px; /* Push it down from its centered position */
  }
}

@media screen and (max-width: 415px) {
  .info-modal {
    margin-top: 175px; /* Further push it down for smaller screens */
  }
}

/* Show content when corresponding sibling radio is checked */
#tab-advanced:checked ~ #advanced-search,
#tab-fulltext:checked ~ #full-text-search,
#tab-categories:checked ~ #card-catalog {
  display: block;
}


#full-text-search input[type='text'],
#advanced-search .box input[type='text'],
#advanced-search .box select {
height: 36px;
padding: 0 10px;
border-radius: 4px;
border: 1px solid #ccc;
}

#advanced-search .box form .form-group label {
top: 14px;
}

.page #advanced-search,
.page #full-text-search,
.page #card-catalog {
padding: 36px;
border-radius: 24px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
.page #advanced-search,
.page #full-text-search,
.page #card-catalog {
  padding: 16px;
}
}

/* Advanced Search bottom link styling */
.advanced-search-bottom-link {
  text-align: center;
  margin-top: 30px;
}

/* results table */
.pgdbfiles hd, .pgdbfiles td {
  padding: 5px;ß
}