/* =========================================================
   HCN Pilgrim Lookup – Full Stylesheet (Elementor-safe)
   ========================================================= */

/* ===============================
   1) GENERAL & FORM STYLING
   =============================== */
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

/* Info / Error boxes */
.info {
  border: 1px solid;
  margin: 10px 0;
  padding: 15px 10px 15px 50px;
  color: #00529B;
  /* background-color: #BDE5F8; */
}
.error-message {
  border: 1px solid;
  margin: 10px 0;
  padding: 15px 10px 15px 50px;
  color: #ff2d5e;
  background-color: #fff;
}

/* Search form wrapper */
.pl-form {
  margin-bottom: 30px;
  padding: 30px 60px;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  line-height: 1.5;
}

/* Inline form controls */
.passport-lookup-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
.passport-lookup-form input[type="text"] {
  flex: 1 1 800px;
  min-width: 300px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
}
.passport-lookup-form input[type="submit"] {
  padding: 10px 20px;
  font-size: 15px;
  border-radius: 6px;
  border: none;
  background-color: #b38f64;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease;
}
.passport-lookup-form input[type="submit"]:hover {
  background-color: #96784e;
}

/* Mobile form */
@media only screen and (max-width: 600px) {
  .passport-lookup-form { flex-wrap: wrap !important; }
  .passport-lookup-form input[type="text"],
  .passport-lookup-form input[type="submit"] {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
  .passport-lookup-form input[type="submit"] { margin-top: 10px; }
}

/* ===============================
   2) RESULT CARD (HCN Dark Theme)
   =============================== */
.hcnpl-result {
  margin: 30px auto;
  max-width: 1000px;
}

.hcnpl-card {
  background: #0F1220;
  color: #F6F7FB;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  overflow: hidden;
  font-size: 15px;
}

/* Header */
.hcnpl-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 22px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.hcnpl-card__title { min-width: 0; }

/* Default (will be overridden by Elementor-safe rules below) */
.hcnpl-name {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .2px;
}

.hcnpl-agency {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(179,143,100,.12);
  color: #E9D6BD;
  border: 1px solid rgba(179,143,100,.35);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  text-transform: none;
  letter-spacing: .04em;
}
.hcnpl-agency__logo {
  width: 72px;
  min-width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  background: #0b0e1a;
  border: 1px solid rgba(255,255,255,.08);
  display: grid;
  place-items: center;
}
.hcnpl-agency__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Sections */
.hcnpl-section { padding: 18px 22px 6px; }
.hcnpl-section + .hcnpl-section { padding-top: 8px; }
.hcnpl-section__title {
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #B38F64;
}
.hcnpl-section--muted {
  background: rgba(255,255,255,.02);
  border-top: 1px dashed rgba(255,255,255,.08);
}

/* Grid */
.hcnpl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.hcnpl-grid--loose { gap: 14px 20px; }

.hcnpl-grid__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}
.hcnpl-grid__row dt {
  color: #D6DBE1;
  font-size: 12px;
  letter-spacing: .04em;
}
.hcnpl-grid__row dd {
  margin: 0;
  font-size: 14px;
  word-break: break-word;
}
.hcnpl-grid__row a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Update notice inside card */
.hcnpl-card .info {
  background-color: rgba(179,143,100,.1);
  border: 1px solid rgba(179,143,100,.4);
  color: #E9D6BD;
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
  .hcnpl-agency__logo { width: 60px; height: 60px; }
  .hcnpl-grid { grid-template-columns: 1fr; }
  .hcnpl-grid__row { grid-template-columns: 130px 1fr; }
}
@media (max-width: 560px) {
  .hcnpl-card__head { padding: 18px 16px 10px; }
  .hcnpl-section { padding: 14px 16px 4px; }
  .hcnpl-grid__row { grid-template-columns: 120px 1fr; padding: 9px 10px; }
  .hcnpl-name { font-size: 19px; }
}

/* ==========================================
   3) ELEMENTOR OVERRIDES (HIGH SPECIFICITY)
   Forces our colors/typography when Elementor
   has global H2/H3/link styles.
   ========================================== */

/* Full name (H2) */
.hcnpl-result .hcnpl-card h2.hcnpl-name,
.elementor .hcnpl-result .hcnpl-card h2.hcnpl-name {
  color: #F6F7FB !important;
  font-size: 24px !important;
  letter-spacing: .3px !important;
  text-transform: uppercase !important;
  margin: 0 0 6px !important;
  font-weight: 700 !important;
}

/* Section titles (H3) */
.hcnpl-result .hcnpl-card h3.hcnpl-section__title,
.elementor .hcnpl-result .hcnpl-card h3.hcnpl-section__title {
  color: #E9D6BD !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}

/* Email link color (exact request) */
.hcnpl-result .hcnpl-card .hcnpl-grid__row a,
.elementor .hcnpl-result .hcnpl-card .hcnpl-grid__row a {
  color: #B38F64 !important;   /* <- exact brand gold */
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Ensure definition text stays visible on dark */
.hcnpl-result .hcnpl-card .hcnpl-grid__row dt,
.elementor .hcnpl-result .hcnpl-card .hcnpl-grid__row dt {
  color: #D6DBE1 !important;
}
.hcnpl-result .hcnpl-card .hcnpl-grid__row dd,
.elementor .hcnpl-result .hcnpl-card .hcnpl-grid__row dd {
  color: #F6F7FB !important;
}

/* Overige gegevens block – improved contrast */
.hcnpl-section--muted {
  background: rgba(255,255,255,.04) !important;
  border-top: 1px dashed rgba(233,214,189,.35) !important;
}
.hcnpl-grid--loose .hcnpl-grid__row {
  background: rgba(255,255,255,.03) !important;
  border-color: rgba(233,214,189,.25) !important;
}

/* Safety: stop generic Elementor section color bleed */
.elementor .hcnpl-card,
.elementor .hcnpl-card * {
  color: inherit;
}
/* ===== FORCE TITLE + EMAIL VISIBILITY AGAINST ELEMENTOR ===== */

/* Full name title (H2) – absolute win */
body .hcnpl-result .hcnpl-card .hcnpl-card__title h2.hcnpl-name,
body.elementor-kit .hcnpl-result .hcnpl-card .hcnpl-card__title h2.hcnpl-name,
.elementor .hcnpl-result .hcnpl-card .hcnpl-card__title h2.hcnpl-name {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  color: #F6F7FB !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin: 0 0 6px !important;
  letter-spacing: .3px !important;
}

/* Section titles (H3) */
body .hcnpl-result .hcnpl-card h3.hcnpl-section__title,
.elementor .hcnpl-result .hcnpl-card h3.hcnpl-section__title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  color: #E9D6BD !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}

/* Email link color – EXACT (#B38F64) */
body .hcnpl-result .hcnpl-card .hcnpl-grid__row a,
.elementor .hcnpl-result .hcnpl-card .hcnpl-grid__row a {
  color: #B38F64 !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
/* === Round avatar (photo / agency logo / placeholder) === */
.hcnpl-avatar{
  width: 95px;
  min-width: 95px;
  height: 95px;
  border-radius: 9999px;           /* perfect circle */
  overflow: hidden;
  background: #0b0e1a;
  border: 2px solid rgba(233,214,189,.55); /* subtle goldish ring */
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  display: grid;
  place-items: center;
}
.hcnpl-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;               /* nicely cropped face */
  display: block;
}

/* Slightly reduce on tablets */
@media (max-width: 900px){
  .hcnpl-avatar{ width:72px; height:72px; min-width:72px; }
}

/* Elementor-safe title/section/email colors (belt & suspenders) */
.hcnpl-result .hcnpl-card .hcnpl-card__title h2.hcnpl-name,
.elementor .hcnpl-result .hcnpl-card .hcnpl-card__title h2.hcnpl-name{
  color:#F6F7FB !important;
  font-size:24px !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  margin:0 0 6px !important;
  letter-spacing:.3px !important;
}
.hcnpl-result .hcnpl-card h3.hcnpl-section__title,
.elementor .hcnpl-result .hcnpl-card h3.hcnpl-section__title{
  color:#E9D6BD !important;
  font-weight:600 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  margin:0 0 12px !important;
}
.hcnpl-result .hcnpl-card .hcnpl-grid__row a,
.elementor .hcnpl-result .hcnpl-card .hcnpl-grid__row a{
  color:#B38F64 !important;
  font-weight:600 !important;
  text-decoration:underline !important;
  text-underline-offset:3px !important;
}