/* ==========================================================
   ISO 27001 Certificate Modal
   Shared component — included on all public pages.
   ========================================================== */

/* Make any [data-iso-modal] trigger feel clickable */
[data-iso-modal]{
  cursor:pointer;
  text-decoration:underline;
  text-decoration-color:rgba(0,180,216,.45);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color .15s, text-decoration-color .15s;
}
[data-iso-modal]:hover,
[data-iso-modal]:focus-visible{
  color:var(--cyan-400, #48CAE4);
  text-decoration-color:var(--cyan-400, #48CAE4);
  outline:none;
}

/* Backdrop + dialog wrapper */
.iso-modal{
  position:fixed;inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(4,8,16,.78);
  -webkit-tap-highlight-color:transparent;
}
.iso-modal[aria-hidden="false"]{display:flex}
body.iso-modal-open{overflow:hidden}

/* Dialog card */
.iso-modal__dialog{
  position:relative;
  width:min(960px, 100%);
  max-height:calc(100vh - 48px);
  background:#0b1220;
  border:1px solid var(--bd-2, #1a2236);
  border-radius:6px;
  box-shadow:0 24px 80px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(0,180,216,.06);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:translateY(8px) scale(.985);
  opacity:0;
  transition:transform .22s cubic-bezier(.4,0,.2,1), opacity .22s ease;
}
.iso-modal[aria-hidden="false"] .iso-modal__dialog{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* Header */
.iso-modal__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px 14px;
  border-bottom:1px solid var(--bd-2, #1a2236);
}
.iso-modal__eyebrow{
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size:10px;
  letter-spacing:.18em;
  color:var(--muted, #8a93a6);
  text-transform:uppercase;
}
.iso-modal__title{
  margin:4px 0 0;
  font-size:18px;
  font-weight:600;
  line-height:1.3;
  color:var(--ink, #e9eef7);
  letter-spacing:-.01em;
}
.iso-modal__sub{
  margin:4px 0 0;
  font-size:12.5px;
  color:var(--ink-2, #c3cad9);
}

/* Close button */
.iso-modal__close{
  flex:none;
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  color:var(--ink-2, #c3cad9);
  border:1px solid var(--bd-2, #1a2236);
  border-radius:3px;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
}
.iso-modal__close:hover{
  color:var(--cyan-400, #48CAE4);
  border-color:var(--cyan-500, #00B4D8);
  background:rgba(0,180,216,.04);
}
.iso-modal__close:focus-visible{outline:2px solid var(--cyan-400, #48CAE4);outline-offset:2px}

/* Image area */
.iso-modal__body{
  background:#070b14;
  padding:18px;
  overflow:auto;
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.iso-modal__img{
  display:block;
  max-width:100%;
  max-height:70vh;
  width:auto;height:auto;
  object-fit:contain;
  background:#fff; /* The certificate has a white-ish bg; this keeps edges clean */
  border:1px solid var(--bd-2, #1a2236);
  border-radius:3px;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.5);
}

/* Footer */
.iso-modal__foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 22px;
  border-top:1px solid var(--bd-2, #1a2236);
  background:rgba(255,255,255,.01);
  flex-wrap:wrap;
}
.iso-modal__meta{
  display:flex;align-items:center;gap:10px;
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size:11px;
  color:var(--muted, #8a93a6);
  letter-spacing:.04em;
}
.iso-modal__meta .dot{
  width:6px;height:6px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18);
  display:inline-block;
}
.iso-modal__actions{display:flex;gap:8px;flex-wrap:wrap}
.iso-modal__btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  font-size:12.5px;font-weight:500;
  border-radius:3px;
  text-decoration:none;
  cursor:pointer;
  border:1px solid var(--bd-2, #1a2236);
  background:transparent;
  color:var(--ink-2, #c3cad9);
  transition:background .15s, border-color .15s, color .15s;
}
.iso-modal__btn:hover{
  color:var(--cyan-400, #48CAE4);
  border-color:var(--cyan-500, #00B4D8);
  background:rgba(0,180,216,.04);
}
.iso-modal__btn--primary{
  background:var(--cyan-500, #00B4D8);
  border-color:var(--cyan-500, #00B4D8);
  color:#062032;
  font-weight:600;
}
.iso-modal__btn--primary:hover{
  background:var(--cyan-400, #48CAE4);
  border-color:var(--cyan-400, #48CAE4);
  color:#062032;
}

/* Mobile polish */
@media (max-width:600px){
  .iso-modal{padding:12px}
  .iso-modal__head{padding:14px 16px 12px}
  .iso-modal__body{padding:12px}
  .iso-modal__foot{padding:12px 16px;flex-direction:column;align-items:stretch}
  .iso-modal__actions{justify-content:stretch}
  .iso-modal__btn{justify-content:center;flex:1}
  .iso-modal__img{max-height:60vh}
}

@media (prefers-reduced-motion: reduce){
  .iso-modal__dialog{transition:none}
}