/* ==============================================================
   vcard-cd.css  -  vCard synced to the bryanjosephlopez.com theme
   Load AFTER style.min.css and cd-bg.css.
   Palette & type match cv-site (assets/css/style.css):
     black page · navy glass rgba(9,32,58,.62) · green #ACC5FF / #ACC5FF
     gold #ffc107 accent · Poppins headings · Open Sans body
   ============================================================== */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|Poppins:400,500,600,700&display=swap");

/* 1. Page */
html, body, #body { background: #000 !important; }
#body { font-family: "Open Sans", sans-serif !important; color: #fff; }

/* 2. Card: same navy glass as cv-site boxes */
main {
  background: rgba(9, 32, 58, .62) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.25rem;
}
.textColor, .cardColor { color: #fff !important; }
.name { font-family: "Poppins", sans-serif; font-size: 1.75rem; color: #dee2e6; }
.jobtitle { font-family: "Poppins", sans-serif; color: #ACC5FF; font-size: 1.05rem; margin-top: .35rem; }
.bizname { color: #ffc107; opacity: 1; font-weight: 600; }
.bizaddr { color: #c8d2ee; opacity: .75; }
.section { font-family: "Poppins", sans-serif; text-transform: uppercase; letter-spacing: 2px;
  font-size: .9rem !important; font-weight: 500 !important; color: #dee2e6 !important; }
.section::after { content: ""; display: block; width: 80px; height: 1px; background: #dee2e6; margin: .6rem auto 0; }

/* 3. Photo: periwinkle ring */
#profilePhoto { border: 3px solid #ACC5FF; box-shadow: 0 0 24px rgba(172, 197, 255, .25); }

/* 4. Buttons: periwinkle (inline gold overridden), dark navy icons for contrast */
#cta, .actionBtn a, #dlKey, #copyURL {
  background-color: #ACC5FF !important;
  box-shadow: 0 0 18px rgba(172, 197, 255, .22);
  transition: background-color .3s, box-shadow .3s, transform .2s;
}
#cta:hover, .actionBtn a:hover, #dlKey:hover, #copyURL:hover {
  background-color: #C9D9FF !important;
  box-shadow: 0 0 26px rgba(172, 197, 255, .45);
  transform: translateY(-1px);
}
.iconColor { filter: none !important; color: #09203a !important; }
#cta svg *, .actionBtn a svg *, #dlKey svg *, #copyURL svg * { stroke: #09203a !important; }
#cta p, #dlKey span, #copyURL span { color: #09203a !important; }
#cta p { font-family: "Poppins", sans-serif; font-weight: 500; }
.actionBtn p { color: #dee2e6 !important; }

/* 5. Text cards (About Me etc.): darker glass, cv-site hover */
.media {
  background: rgba(4, 20, 40, .55) !important;
  border: 1px solid rgba(255, 255, 255, .06);
  transition: background .3s;
}
.media:hover { background: rgba(4, 46, 95, .7) !important; }

/* 6. Media player controls */
.seekbarColor { background: rgba(172, 197, 255, .35) !important; }
input[type="range"]::-webkit-slider-thumb { background: #ACC5FF !important; }
input[type="range"]::-moz-range-thumb { background: #ACC5FF !important; }
.playPause, .dlBtn { background: #ACC5FF !important; }
.playPause svg *, .dlBtn svg * { stroke: #09203a !important; }

/* 7. Share / QR / key sheet: dark glass, above the background */
#modal {
  background: rgba(6, 14, 28, .94) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 2147483300 !important;
  border-radius: 1.25rem 1.25rem 0 0;
  border-top: 1px solid rgba(172, 197, 255, .35);
}
.closeColor { filter: none; }
#qr { background: #fff; }              /* QR stays black-on-white to scan */

/* 8. Taps reach the dots, controls stay clickable */
main a, main button, main input, .media, .controls, #modal, #modal *,
#topActions a, footer a { pointer-events: auto; }

/* 9. Full-screen switch: top-right is taken by Share / QR,
      so it sits top-left, same as on cv-site */
#cd-toggle {
  right: auto !important;
  left: calc(14px + env(safe-area-inset-left)) !important;
  top: calc(14px + env(safe-area-inset-top)) !important;
}
body.cd-full #topActions { opacity: 0; pointer-events: none; transition: opacity .6s; }

/* 10. Background brightness behind the card (cv-site uses .5) */
:root { --cd-dim: .58; }