/* ============================================================
   D2LAL POP-UPS  —  d2lal-popups.css
   ------------------------------------------------------------
   Drop this into any D2LAL site and every pop-up behaves the
   same: at least 85% of the screen on any device, an X in the
   corner, and the page underneath frozen so the visitor comes
   back exactly where they were.

   Only the five --d2-* variables at the top are meant to be
   changed per site, so each brand keeps its own colours while
   the behaviour stays identical everywhere.
   ============================================================ */

:root{
  --d2-ink:#101010;
  --d2-paper:#ffffff;
  --d2-accent:#FFC800;
  --d2-accent-2:#E02B20;
  --d2-done:#7AB648;
  --d2-radius:14px;
}

body.d2-noscroll{overflow:hidden}

.d2-modal{
  position:fixed;inset:0;z-index:4000;
  background:rgba(10,10,10,.92);
  display:flex;align-items:center;justify-content:center;
  padding:1.6rem 1.2rem;
}
.d2-modal[hidden]{display:none}

.d2-box{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  width:min(1100px,96vw);
  background:var(--d2-paper);
  border:4px solid var(--d2-accent);
  border-radius:var(--d2-radius);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  /* the house rule: never less than 85% of the screen */
  height:88vh;
  height:calc(100dvh - 3.2rem);
  min-height:85vh;
  max-height:none;
}

/* video keeps its shape rather than stretching */
.d2-box.d2-video{height:auto;min-height:0;aspect-ratio:16/9;background:#000;border-radius:var(--d2-radius)}
.d2-box.d2-video .d2-body{padding:0}
.d2-box.d2-video iframe{width:100%;height:100%;border:0;display:block}

/* a message card sizes to its words — a "coming soon" notice
   blown up to full screen would read as an error, not a note */
.d2-box.d2-message{height:auto;min-height:0;width:min(520px,94vw);border-radius:var(--d2-radius)}

.d2-head{
  flex:0 0 auto;background:var(--d2-accent);color:var(--d2-ink);
  border-bottom:4px solid var(--d2-ink);padding:.9rem 3.8rem .9rem 1.2rem;
}
.d2-head[hidden]{display:none}
.d2-title{display:block;font-weight:700;font-size:1rem;line-height:1.25}
.d2-note{display:block;font-size:.83rem;margin-top:.2rem;opacity:.85}

.d2-body{
  flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;background:var(--d2-paper);
}
.d2-body iframe{width:100%;flex:1 1 auto;min-height:0;border:0;display:block;background:var(--d2-paper)}

/* image lightbox */
.d2-box.d2-image .d2-body{align-items:center;justify-content:center;padding:1rem;background:#111}
.d2-box.d2-image img{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:6px}
.d2-cap{flex:0 0 auto;margin-top:.7rem;font-size:.9rem;text-align:center;color:#ddd}
.d2-box.d2-message .d2-cap{color:#555}

/* a note printed under a live preview — what we did for this client */
.d2-under{
  margin:0;padding:.85rem 1.2rem;text-align:center;color:var(--d2-ink);
  background:#F4F2EA;border-top:3px solid var(--d2-ink);font-size:.88rem;line-height:1.5;
}

/* message card body */
.d2-box.d2-message .d2-body{padding:1.3rem 1.4rem;gap:.7rem;font-size:.97rem;line-height:1.65;color:var(--d2-ink)}
.d2-copy{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.4rem}
.d2-copy code{
  flex:1 1 auto;font-size:1.15rem;font-weight:700;letter-spacing:.02em;
  background:#F4F2EA;border:2px solid var(--d2-ink);border-radius:8px;padding:.6rem .8rem;
  user-select:all;-webkit-user-select:all;
}
.d2-copybtn{
  flex:0 0 auto;border:2px solid var(--d2-ink);background:var(--d2-accent);color:var(--d2-ink);
  font:inherit;font-weight:700;padding:.6rem 1.1rem;border-radius:8px;cursor:pointer;
}
.d2-copybtn:hover{background:var(--d2-ink);color:var(--d2-accent)}

/* close X — outside the box on wide screens, tucked inside the
   header on phones so it can never sit off the edge */
.d2-close{
  position:absolute;top:-1.1rem;right:-1.1rem;z-index:3;
  width:2.9rem;height:2.9rem;border-radius:50%;
  background:var(--d2-accent);color:var(--d2-ink);border:3px solid var(--d2-ink);
  font:inherit;font-size:1.6rem;font-weight:700;line-height:1;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
.d2-close:hover{background:var(--d2-accent-2);color:#fff}
.d2-head:not([hidden]) ~ .d2-close{
  top:.55rem;right:.55rem;width:2.4rem;height:2.4rem;font-size:1.35rem;
  background:var(--d2-ink);color:var(--d2-accent);box-shadow:none;
}
.d2-head:not([hidden]) ~ .d2-close:hover{background:var(--d2-accent-2);color:#fff}

.d2-done{
  flex:0 0 auto;width:100%;border:0;border-top:4px solid var(--d2-ink);
  background:var(--d2-done);color:#fff;font:inherit;font-weight:700;
  font-size:.98rem;letter-spacing:.03em;padding:1rem;cursor:pointer;
}
.d2-done:hover{background:var(--d2-ink);color:var(--d2-accent)}
.d2-done[hidden]{display:none}

.d2-modal :focus-visible{outline:3px solid var(--d2-accent);outline-offset:3px;border-radius:6px}

@media(max-width:640px){
  .d2-modal{padding:1rem .6rem}
  .d2-box{height:90vh;height:calc(100dvh - 2rem);min-height:88vh}
  .d2-box.d2-video{height:auto;min-height:0}
  .d2-box.d2-message{height:auto;min-height:0}
  .d2-close{top:-.85rem;right:-.35rem;width:2.5rem;height:2.5rem}
  .d2-head{padding:.75rem 3.4rem .75rem 1rem}
  .d2-title{font-size:.9rem}
  .d2-note{font-size:.77rem}
  .d2-done{padding:.9rem;font-size:.9rem}
  .d2-copy code{font-size:1.05rem}
}

@media (prefers-reduced-motion: reduce){
  .d2-modal,.d2-box{transition:none !important;animation:none !important}
}

/* thumbnails that open the lightbox */
img[data-d2gal]{cursor:zoom-in}
img[data-d2gal]:focus-visible{outline:3px solid var(--d2-accent);outline-offset:3px}

/* ---------- social icons ----------
   Each icon only exists when its address is filled in, so this row
   quietly shrinks to nothing rather than showing dead links. */
.d2-social{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:1.1rem 0 0}
.d2-soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border-radius:50%;
  border:2px solid currentColor;color:inherit;text-decoration:none;
  transition:transform .2s ease, background .2s ease, color .2s ease;
}
.d2-soc:hover{transform:translateY(-3px)}
.d2-soc svg{width:1.15rem;height:1.15rem;display:block}
@media(max-width:640px){
  .d2-social{gap:.5rem}
  .d2-soc{width:2.9rem;height:2.9rem}
}