/* =========================
   USER PROFILE DISPLAY
========================= */

.info-display {
  background-color: #dd821d; /* brand orange */
  color: #fff;
  padding: 1.25em;
  border-radius: 8px;
  margin-bottom: 1.5em;
}

/* Section label */
.info-display-label {
  color: #fff;
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 0.75em;
  display: block;
}

/* Field labels + values */
.info-display .field__label {
  font-weight: bold;
  margin-bottom: 0.25em;
  display: block;
  color: #fff;
}

.info-display .field-item {
  margin-bottom: 1em;
  color: #fff;
  font-size: 1em;
  line-height: 1.4;
}

/* Links inside profile */
.info-display a {
  color: #fff;
  text-decoration: underline;
}
.info-display a:hover {
  text-decoration: none;
}

/* =========================
   PHOTO BLOCK (lighter background)
========================= */
.user-photo {
  background-color: #eaa15a; /* lighter orange shade */
  padding: 1em;
  border-radius: 8px;
  margin-bottom: 1.5em;
  text-align: left;
}

.user-photo .field__label {
  color: #fff;
  font-weight: bold;
  margin-bottom: 0.5em;
  display: block;
}

.user-photo img {
  border: 4px solid #dd821d; /* darker orange border */
  border-radius: 12px;       /* rounded corners */
  max-width: 220px;
  height: auto;
  display: inline-block;
}

/* =========================
   "MEMBER FOR" BLOCK
========================= */
.js-form-item.form-type-item {
  background-color: #dd821d; /* dark orange */
  color: #fff;
  padding: 1em;
  border-radius: 8px;
  margin-bottom: 1.5em;
}

.js-form-item.form-type-item .label {
  color: #fff;
  font-weight: bold;
  margin-bottom: 0.5em;
  display: block;
}

/* =========================
   RESPONSIVENESS
========================= */
@media (max-width: 600px) {
  .info-display,
  .user-photo,
  .js-form-item.form-type-item {
    padding: 1em;
  }

  .user-photo img {
    max-width: 100%;
  }
}