/* Sticky footer: ensure footer stays at bottom when content is short */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Make the page root a column flex container so footer can be pushed down */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Keep the server form as the main flex container (already used by page) */
form#form1 {
    display: flex;
    flex-direction: column;
    /* allow form to fill available space */
    flex: 1 0 auto;
    min-height: 0;
}

/* Let the page-content area expand to fill available vertical space */
.page-content {
    flex: 1 0 auto;
    min-height: 0;
}

/* Make footer sit after growing content (push to bottom when content short) */
footer {
    margin-top: auto;
    flex-shrink: 0;
}

/* Make gridview tables expand to fill their container and allow wrapping */
.table,
.table.table-striped {
    width: 100% !important;
    table-layout: fixed;
}

/* Allow cells to wrap long text and break long tokens when needed */
.table th,
.table td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Preserve horizontal scrolling on very small viewports (your page already wraps table in overflow-x auto) */
div[style*="overflow-x: auto"] .table {
    min-width: 100%;
}

/* Modal used for advisory details - Lighthouse / Bootstrap friendly */
.page_modal_wrapper {
    display: none; /* shown by JS */
    position: fixed;
    inset: 0; /* top:0;right:0;bottom:0;left:0; */
    background: rgba(0, 0, 0, 0.45);
    z-index: 2200;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

.page_modal_dialog {
    background: #fff;
    border-radius: 0.5rem;
    max-width: 760px;
    width: 100%;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    max-height: 90vh;
    overflow: auto;
    padding: 1rem;
}

/* Close button style */
.page_modal_close_button {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    background: transparent;
    border: none;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    color: #333;
}

/* Content container inside modal */
.page_modal_content {
    margin-top: 0.5rem;
    color: #222;
}

/* Make tables inside the modal match page tables and be responsive */
.page_modal_content table,
.page_modal_content .table {
    width: 100% !important;
    table-layout: auto; /* let browser size columns naturally */
    border-collapse: collapse;
    line-height: 1.5;
}

/* Left column (labels) should be wide enough and not wrap mid-word */
.page_modal_content td.data_title,
.page_modal_content th.data_title {
    width: 30%;
    min-width: 140px;
    white-space: nowrap;
    font-weight: 600;
    padding: 0.5rem 1rem;
    vertical-align: top;
}

/* Right column (values) */
.page_modal_content td:not(.data_title),
.page_modal_content th:not(.data_title) {
    width: 70%;
    padding: 0.5rem 1rem;
    white-space: normal;
    word-break: break-word;
}

/* Small screens: allow label column to wrap and stack for better legibility */
@media (max-width: 480px) {
    .page_modal_content td.data_title,
    .page_modal_content th.data_title {
        display: block;
        width: 100%;
        white-space: normal;
        padding-top: 0.75rem;
    }
    .page_modal_content td:not(.data_title),
    .page_modal_content th:not(.data_title) {
        display: block;
        width: 100%;
        padding-bottom: 0.75rem;
    }
}

/* Small-screen adjustments */
@media (max-width: 576px) {
    .page_modal_dialog {
        max-width: 100%;
        height: auto;
        padding: 0.75rem;
    }
    .page_modal_close_button {
        font-size: 1.125rem;
    }
}

/* Remove any heavy global container-fluid padding that blocks full-bleed layouts */
.container-fluid.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Optional: constrain readable text blocks inside a wide layout */
.main-content .container {
    max-width: 680px;
}

/* Slightly larger map on larger screens */
@media (min-width: 1200px) {
    #viewDiv {
        height: 80vh;
    }
}

/* Header: increase DNREC logo size and make selected small-title text normal weight */

/* Target header logo(s) - increase default size, keep responsive on small screens */
header .navbar-brand img,
header .navbar-brand-image,
header .img-fluid.d-inline-block.align-text-middle {
    width: 120px;
    height: auto;
}

/* Keep a smaller size on narrow screens */
@media (max-width: 992px) {
    header .navbar-brand img,
    header .navbar-brand-image,
    header .img-fluid.d-inline-block.align-text-middle {
        width: 88px;
    }
}

/* Ensure the "Department of" and "and" (site-title-two) are not bold */
.agency-header-primary .site-identity .site-title-two,
.navbar-brand .site-identity .site-title-two,
.site-identity .site-title-two {
    font-weight: 400 !important;
    font-style: normal;
    /* ensure browser renders the normal weight */
    font-variation-settings: "wght" 400;
}
/* Default: show full text, hide summary */
.hero-full { display: block; }
.hero-summary { display: none; }

/* Mobile: swap to summary */
@media (max-width: 767px) {
  .hero-full { display: none !important; }
  .hero-summary { display: block !important; }

  /* optional: slightly larger summary text on small screens */
  .hero-summary { font-size: 1rem; line-height: 1.4; }
}
/* Make the right-side map fill the height of the left column (equal-height columns) */
.row.align-items-stretch {
  /* ensure the row is a flex container (Bootstrap already makes .row flex) */
}

/* Ensure .map-wrapper is a flexible child that fills its column */
.map-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;     /* allow it to grow to fill column height */
  min-height: 0;      /* allow children to shrink inside flex container */
}

/* Let the map view fill the wrapper */
#viewDiv {
  flex: 1 1 auto;
  min-height: 0;      /* important to allow it to size to the column height */
  height: auto !important;
}

/* If you put the select inside the map-wrapper, keep it above the map but let the map size correctly */
.map-control-select {
  z-index: 2300;
  position: absolute; /* already present in page; keep */
}
/* Responsive legend improvements for mobile */
.map-legend {
  box-sizing: border-box;
  line-height: 1.25;
}

/* Medium phones / small tablets: slightly smaller icons & text, 2 columns */
@media (max-width: 768px) {
  .map-legend {
    padding: 12px 14px;
    font-size: 15px;
  }

  .legend-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 14px;
  }

  .legend-item {
    font-size: 15px;
    gap: 10px;
    align-items: flex-start;
  }

  .legend-item img {
    width: 28px;
    height: auto;
  }
}

/* Small phones: single column, compact spacing, allow text wrap */
@media (max-width: 420px) {
  .map-legend {
    padding: 10px 12px;
    font-size: 14px;
  }

  .legend-grid {
    grid-template-columns: 1fr;
    gap: 8px 12px;
  }

  .legend-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    white-space: normal; /* allow wrapping of long labels */
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .legend-item img {
    width: 24px;
    flex-shrink: 0;
    margin-top: 2px; /* visually align with wrapped text */
  }
}