/* Custom styling for the intro paragraph under your name */

#header .content .inner .tagline {
  font-family: "Open Sans", sans-serif;  /* or a nicer font */
  font-size: 1rem;              /* bump this up or down */
  line-height: 1.6;             /* spacing between lines */
  color: #f5f5f5;               /* light text */
  max-width: 55rem;             /* keep it from stretching too wide */
  margin: 1.5rem auto 0 auto;   /* space above & center it */
  text-align: center;           /* keep it centered under your name */
  text-transform: none !important;
}


/* Contact card: top row (address + logo) */
#contact .contact-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;   /* vertically center logo relative to text */
  gap: 1rem;
  margin-bottom: 1rem; /* space between top row and email */
}

#contact .contact-text {
  flex: 1 1 250px;
}

/* Tighten paragraph spacing inside the address area */
#contact .contact-text p {
  margin: 0;
}

/* Logo on the right */
#contact .contact-image {
  flex: 0 0 auto;
}

#contact .contact-image img {
  max-width: 250px;      /* tweak as you like */
  height: auto;
  object-fit: contain;
  display: block;
}

/* Email block below address+logo */
#contact .contact-email {
  margin-bottom: 1.5rem; /* space between email and form */
}

#contact .contact-email p {
  margin: 0;
}

/* Status text under the form */
#contact .form-status {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-style: italic;
}

/* Mobile: stack address and logo nicely */
@media screen and (max-width: 736px) {
  #contact .contact-top {
    flex-direction: column;
    align-items: flex-start;
  }

  #contact .contact-image img {
    max-width: 140px;
  }
}

/* Make the header content behave better on small screens */
@media screen and (max-width: 736px) {

  /* Stop over-aggressive centering and allow scroll if needed */
  #header .content {
    justify-content: flex-start;
    padding-top: 2rem;
    padding-bottom: 2rem;
    overflow-y: auto;
  }

  /* Remove extra inner padding the template adds */
  #header .content .inner {
    padding: 0;
  }

  /* Shrink the portrait a bit on mobile */
  #header .content .inner img {
    width: 65%;
    height: auto;
    margin-top: 1rem;
  }

  /* Slightly smaller tagline so it fits more comfortably */
  #header .content .inner .tagline {
    font-size: 0.95rem;
    margin-top: 1rem;
  }
}