/* =========================================================
   File: css/components/popup.css
   Title: Invent City Popup System — Section-Matched Dialog
   Version: 2025-11-21
   Author: Invent City

   PURPOSE
   • Standalone centered popup dialog (no Bootstrap modal JS).
   • Overlay covers viewport; dialog scrolls internally.
   • Dialog theme matches section:
       - .area-light → white bg, black text/borders.
       - .area-dark  → black bg, white text/borders.
   • Cards, tables, and text inside use currentColor so they
     naturally match the section / dialog color.

   RECOMMENDED LOAD ORDER
   1) css/variables.css
   2) css/typography.css
   3) css/components/popup.css   ← this file
   4) css/components/cards.css   ← if you show cards in popups

   HTML PATTERN
   <div class="popup" id="popup-transportation" aria-hidden="true"
        role="dialog" aria-modal="true">
     <div class="popup-dialog">
       <button class="popup-close" data-close aria-label="Close">&times;</button>
       ... content ...
     </div>
   </div>

   JS PATTERN (minimal)
   const trigger = document.querySelector('[data-popup="#popup-transportation"]');
   const dialog  = document.querySelector('#popup-transportation');

   trigger.addEventListener('click', () => {
     dialog.classList.add('show');
     dialog.setAttribute('aria-hidden', 'false');
     document.documentElement.classList.add('popup-lock');
   });

   dialog.querySelector('[data-close]').addEventListener('click', () => {
     dialog.classList.remove('show');
     dialog.setAttribute('aria-hidden', 'true');
     document.documentElement.classList.remove('popup-lock');
   });

========================================================= */


/* ---------------------------------------------------------
   0) PAGE SCROLL LOCK WHEN POPUP IS OPEN
--------------------------------------------------------- */
html.popup-lock,
body.popup-lock {
  overflow: hidden;
  overscroll-behavior: contain;
}


/* ---------------------------------------------------------
   1) OVERLAY LAYER (CENTERED GRID)
--------------------------------------------------------- */
.popup {
  position: fixed;
  inset: 0;
  display: none;                 /* hidden by default */
  place-items: center;           /* centers .popup-dialog */
  background: rgba(255, 255, 255, 0.25); /* overlay tint */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  isolation: isolate;
  z-index: 1001;

  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Visible state */
.popup.show,
.popup[aria-hidden="false"] {
  display: grid;
  opacity: 1;
}


/* ---------------------------------------------------------
   2) DIALOG BOX (SCROLL CONTAINER)
--------------------------------------------------------- */
.popup-dialog {
  position: relative;
  display: block;

  /* Base (dark fallback) — overridden by .area-light/.area-dark */
  background: #000;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 0;

  padding: 1.5rem;
  width: min(92vw, 640px);
  max-width: 640px;

  max-height: min(90vh, 720px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;

  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  text-align: left;
  z-index: 1002;
}

/* Keyboard focus outline */
.popup-dialog:focus {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}


/* ---------------------------------------------------------
   3) SECTION THEME OVERRIDES (OPTION A: MATCH SECTION)
   ---------------------------------------------------------
   .area-light → white dialog, black text, black border.
   .area-dark  → black dialog, white text, white border.

   IMPORTANT:
   • This uses currentColor semantics:
     - In dark sections, currentColor is white.
     - In light sections, currentColor is black.
--------------------------------------------------------- */

/* Light sections */
.area-light .popup-dialog {
  background: #ffffff;
  color: #000000;
  border-color: #000000;
}

/* Dark sections */
.area-dark .popup-dialog {
  background: #000000;
  color: #ffffff;
  border-color: #ffffff;
}

/* Ensure nested elements inherit dialog color by default */
.popup-dialog,
.popup-dialog * {
  color: inherit;
}


/* ---------------------------------------------------------
   4) CONTENT INSIDE DIALOG
--------------------------------------------------------- */
.popup-dialog img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 1rem 0;
  border: 1px solid currentColor;
  border-radius: 0;
}

/* Card body inside popup */
.popup-dialog .card-body {
  padding: var(--card-body-padding, 1rem);
  border-top: 1px solid currentColor;
  background: transparent;
}

/* Tables inside popups inherit currentColor for borders */
.popup-dialog table,
.popup-dialog th,
.popup-dialog td {
  border-color: currentColor !important;
}

.popup-dialog table th {
  text-transform: uppercase;
  font-weight: 600;
  padding-block: 0.75rem;
  border-bottom: 2px solid currentColor !important;
}

.popup-dialog table {
  margin-top: 1rem;
}


/* ---------------------------------------------------------
   5) CLOSE BUTTON
   - Circular button
   - 1px border using currentColor
   - Background matches section theme:
       • area-light → white background, black minus
       • area-dark  → black background, white minus
   - Minus injected via ::before
--------------------------------------------------------- */

.popup-close,
.popup [data-close] {
  appearance: none;
  background: currentColor;          /* overwritten below for clarity */
  border: 1.5px solid currentColor;    /* always uses currentColor */
  color: currentColor;

  border-radius: 50%;
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1003;

  transition: all 0.25s ease;
}

/* Light-section button (white bg, black minus) */
.area-light .popup-close,
.area-light .popup [data-close] {
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* Dark-section button (black bg, white minus) */
.area-dark .popup-close,
.area-dark .popup [data-close] {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Inject the “–” icon */
.popup-close::before,
.popup [data-close]::before {
  content: "\2013";        /* en dash (–) */
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  color: inherit;          /* uses currentColor */
}

/* Hover invert */
.popup-close:hover,
.popup [data-close]:hover {
  background: currentColor !important;
  color: #000000 !important;
}

/* Light-section hover → black bg, white minus */
.area-light .popup-close:hover,
.area-light .popup [data-close]:hover {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

/* Dark-section hover → white bg, black minus */
.area-dark .popup-close:hover,
.area-dark .popup [data-close]:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #000000 !important;
}



/* ---------------------------------------------------------
   6) RESPONSIVE TWEAKS
--------------------------------------------------------- */
@media (max-width: 599.98px) {
  .popup-dialog {
    width: 92vw;
    padding: 1rem;
    max-height: 90vh;
  }
}


/* ---------------------------------------------------------
   7) MINIMAL WHITE/BLACK SCROLLBAR (DIALOG ONLY)
--------------------------------------------------------- */

/* WebKit browsers */
.popup-dialog::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.popup-dialog::-webkit-scrollbar-track {
  background: transparent;
}

.popup-dialog::-webkit-scrollbar-thumb {
  background: currentColor;
  border-radius: 4px;
}

.popup-dialog::-webkit-scrollbar-thumb:hover {
  background: currentColor;
}

/* Firefox */
.popup-dialog {
  scrollbar-width: thin;
  scrollbar-color: currentColor transparent;
}

/* Optional: hide scrollbar corner */
.popup-dialog::-webkit-scrollbar-corner {
  background: transparent;
}


/* =========================================================
   END OF FILE — css/components/popup.css
========================================================= */