/* Header action buttons (Resume, Contact) + shared modal chrome — same page
   as background.css. Modal styling here is generic (header/body/footer);
   contact-form-specific field styles live in contact.css. */

.header-actions{
  align-self: flex-start;
  display: flex;
  gap: 8px;
}
@media (max-width: 576px){
  /* header.top switches to flex-direction: column-reverse below 576px (see
     background.css) — its cross-axis becomes horizontal, so this pins the
     button row to the right instead of flush left with everything below
     it. This has to live here, after the unconditional rule above, to win
     the cascade tie: same specificity, and resume.css's <link> loads after
     background.css's in the page head. */
  .header-actions{
    align-self: flex-end;
  }
}

.resume-btn,
.contact-btn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--chip-border);
  border-radius: 3px;
  padding: 8px 13px;
  cursor: pointer;
  transition: border-color 150ms ease, transform 150ms ease;
}
.resume-btn:hover,
.contact-btn:hover{ transform: translateY(-1px); border-color: var(--identity); }
.resume-btn:focus-visible,
.contact-btn:focus-visible{ outline: 2.5px solid var(--focus); outline-offset: 2px; }
.resume-btn svg,
.contact-btn svg{ width: 15px; height: 15px; flex: none; }

.modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(20, 18, 15, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal-overlay[hidden]{ display: none; }

.modal{
  width: min(92vw, 680px);
  max-height: min(88vh, 840px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1.5px solid var(--rule-major);
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
}

.modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1.5px solid var(--rule-major);
}
.modal-header h2{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: normal;
  margin: 0;
  color: var(--ink);
}
.modal-x{
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.modal-x:hover{ color: var(--ink); }
.modal-x:focus-visible{ outline: 2.5px solid var(--focus); outline-offset: 2px; }

.modal-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
/* The PDF iframe needs a neutral backdrop behind it; the contact form (see
   contact.css) sits directly on the modal's own surface instead. */
#resume-modal .modal-body{ background: #e9e9e9; }
.modal-body iframe{
  display: block;
  width: 100%;
  height: min(70vh, 640px);
  border: none;
}

.modal-footer{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1.5px solid var(--rule-major);
}

.modal-download,
.modal-close-btn{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
}
.modal-download{
  color: #fff;
  background: var(--identity);
  border: 1.5px solid var(--identity);
}
.modal-download:hover{ opacity: 0.9; }
.modal-download:focus-visible,
.modal-close-btn:focus-visible{ outline: 2.5px solid var(--focus); outline-offset: 2px; }
.modal-close-btn{
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--chip-border);
}
.modal-close-btn:hover{ border-color: var(--ink-soft); }

@media (max-width: 576px){
  .modal{ max-height: 92vh; }
  .modal-body iframe{ height: min(60vh, 520px); }
}