/* Modal style */
/* The wrapper was a made-up <modal> element; it is now <div class="ee-modal">
   (issue #31 item 0). div:where(.ee-modal) keeps each selector's specificity
   exactly what the bare "modal" type selector had, so no rule changes rank. */

div:where(.ee-modal) dialog[open] {
  /* background overlay */
  display: flex;
  flex-direction: column-reverse;
}
/* What sits behind an open popup (2026-10-26). This rule used to be
   `dialog:-internal-dialog-in-top-layer::backdrop`. That selector is one
   browsers keep for themselves, and WebKit (Safari, and every iPhone browser)
   drops any rule that names it, so phones got the default 10% tint and the
   page stayed readable behind the popup. A plain ::backdrop works everywhere. */
div:where(.ee-modal) dialog::backdrop {
  background-color: rgba(12, 18, 44, 0.82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* The page under an open popup stays put: scrolling inside the popup must
   not scroll the page behind it, which on a phone looked like the popup
   sliding off. */
html:has(div.ee-modal dialog[open]) {
  overflow: hidden;
}
div:where(.ee-modal) dialog:modal {
  padding: 0;
  border: none;
  border-radius: 8px;
  width: fit-content;
  max-width: 600px;
  animation: 0.3s fade-in-top ease forwards;
  background-color: #ffffff;
  /* box-shadow: 0 0 0 2.25px #ffffff; */
  margin-top: 5vw;
  cursor: default;
}
div:where(.ee-modal) dialog .content {
  padding: 1.5em;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: auto;
  max-height: 80vh;
}

div:where(.ee-modal) dialog .content h3:first-of-type, 
div:where(.ee-modal) dialog .content .member-role,
div:where(.ee-modal) dialog .content .member-pronouns,
div:where(.ee-modal) .portrait-border {
    margin-left: auto;
    margin-right: auto;
}

div:where(.ee-modal) dialog .content .portrait-border {
    cursor: default;
    margin-bottom: 1rem;
}

div:where(.ee-modal) dialog header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4em;
  background-color: #ffffff;
}
div:where(.ee-modal) dialog header > :first-child {
  padding: 0 1.2em 0 0.4em;
  color: #ffffff;
  margin: 0;
}
div:where(.ee-modal) dialog header .close-btn {
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  text-align: center;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: transparent;
  background-color: transparent;
  fill: #293C8F;
  /* opacity: .7; */
}
/* The popup's top bar: its own row above the scrolling content, divided
   from it by a rule, with a 44px round close button (WCAG 2.5.5's size) that
   reads as a button, not a stray glyph. The bar holds the pointer-only close
   button; keyboard and screen reader users close with Escape or the labelled
   Close button at the end. `> header`, because testimonials have a second
   header inside their content. */
div:where(.ee-modal) dialog > header {
  flex: none;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--bg-light-gray-2);
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
div:where(.ee-modal) dialog > header .close-btn {
  width: 44px;
  height: 44px;
  border: 2px solid transparent;
  background-color: var(--bg-light-gray);
  fill: var(--ee-blue);
  cursor: pointer;
  transition: background-color .15s;
}
div:where(.ee-modal) dialog > header .close-btn svg {
  height: 20px;
  width: auto;
}
div:where(.ee-modal) dialog > header .close-btn:hover {
  background-color: var(--bg-light-gray-2);
  border-color: var(--ee-blue);
}
@media (forced-colors: active) {
  div:where(.ee-modal) dialog > header .close-btn {
    border-color: ButtonText;
    fill: ButtonText;
  }
}
div:where(.ee-modal) > button {
  width: 100%;
  background-color: transparent;
}

dialog, dialog::backdrop {
    overscroll-behavior: contain;
    overflow: hidden;
}


/* testimonial */

div:where(.ee-modal).testimonial-container dialog .content {
  padding: 0 1.5rem 1.5rem 2rem;
}

div:where(.ee-modal) .testimonial-portrait-border img {
  object-position: left center;
}

div:where(.ee-modal) .about-popup-content header {
  justify-content: center;
}

div:where(.ee-modal) .content li {
  font-size: 1rem;
}

div:where(.ee-modal) picture {
  align-content: center;
}

div:where(.ee-modal) img {
  max-height: 100%;
  width: auto;
}

div:where(.ee-modal) .content footer {
  display: flex;
  justify-content: center;
  /* Comment test */
}

div:where(.ee-modal) img.testimonial-company-logo {
    height: fit-content;
    max-width: 80%;
    max-height: 80%;
    margin: auto;
}

div:where(.ee-modal) .content .round-btn-container {
  margin: 0 auto;
}

div:where(.ee-modal) .content_wrap {
  margin-bottom: .3rem;
}

div:where(.ee-modal) .content_wrap .testimonial_question {
  margin-bottom: 1rem;
}


/* After a tap or click opens a popup, the focused name shows no outline
   until a key is pressed (quietFocus in modal.js). */
div:where(.ee-modal) dialog .ee-quiet-focus:focus-visible {
  outline: none;
}

/* Room between the name and the role, so the name's focus outline
   (components/ee-regions.css) does not touch the role line under it. */
div:where(.ee-modal) .popup-info .testimonial_role_wrap {
  margin-top: 6px;
}


/* Phones: a bottom sheet (2026-10-26). A popup that ran edge to edge with a
   strip of page above it read as the page itself. Rising from the bottom
   edge, with rounded top corners, its own top bar and the page dimmed behind
   it, is the shape people know as "this is on top, close it to go back".
   The content scrolls inside the sheet; the top bar stays put.
   `div.ee-modal > dialog` outranks the About page's .member-profile rules
   (pages/ee-about.css, written for an older inline profile), which load
   later and would otherwise add their own margin and padding. */
@media (max-width: 640px) {
  div.ee-modal > dialog:modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 32px);
    margin: auto 0 0;
    padding: 0 0 env(safe-area-inset-bottom);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
    animation: ee-sheet-up 0.25s ease-out;
  }
  div.ee-modal > dialog .content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overscroll-behavior: contain;
    padding: 1rem 1.25rem 1.5rem;
  }
  div.ee-modal.testimonial-container > dialog .content {
    padding: 0 1.25rem 1.5rem;
  }
  /* Smaller portraits, so the name and the first lines of text are on
     screen when the sheet opens. */
  div.ee-modal > dialog .content .portrait-border {
    width: 128px;
    height: 128px;
    padding: 6px;
  }
  /* style.css fixes the photo inside the ring at 160px; fill the ring instead. */
  div.ee-modal > dialog .content .member-img,
  div.ee-modal > dialog .content .member-img img {
    width: 100%;
    height: 100%;
  }
  div.ee-modal > dialog .about-popup-content .testimonial-portrait-border {
    margin-top: 12px;
  }
}

@keyframes ee-sheet-up {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  div.ee-modal > dialog:modal {
    animation: none;
  }
}