/*
 * Overrides on top of the Start Bootstrap Agency theme (assets/css/styles.css).
 * Keep project tweaks here so the vendored theme file stays replaceable.
 */

/* --- Navbar ---------------------------------------------------------------
   The brand is a long Russian name; at 1.25rem it is 393px wide and spilled
   past a 390px viewport. Shrink it below the lg breakpoint, drop the "Menu"
   word to free up room, and allow wrapping as a last resort on tiny screens. */
@media (max-width: 991.98px) {
  #mainNav .navbar-brand {
    font-size: 0.9rem;
    line-height: 1.3;
    max-width: calc(100% - 4.5rem);
    white-space: normal;
  }
  #mainNav .navbar-toggler-text {
    display: none;
  }
  #mainNav .navbar-toggler {
    min-height: 44px;
    min-width: 44px;
  }
}

/* --- Masthead ------------------------------------------------------------- */
header.masthead {
  position: relative;
}

/* Darken the light background photo so the white heading stays readable. */
header.masthead::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.45);
}

header.masthead .container {
  position: relative;
  z-index: 1;
}

header.masthead .masthead-photo {
  margin-bottom: 2rem;
  border-radius: 0.25rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.35);
}

header.masthead .masthead-heading {
  font-size: 1.75rem;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  text-wrap: balance;
}

header.masthead .masthead-subheading {
  margin-bottom: 2rem;
}

@media (max-width: 767.98px) {
  header.masthead {
    padding-top: 7.5rem;
    padding-bottom: 3.5rem;
  }
  /* Keep the portrait from eating the whole first screen. */
  header.masthead .masthead-photo {
    max-height: 50vh;
    width: auto;
  }
  header.masthead .masthead-subheading {
    font-size: 1.25rem;
    line-height: 1.4;
  }
}

@media (min-width: 768px) {
  /* The theme reserved room for a text-only masthead; with a portrait plus a
     heading and a call button the original 17rem/12.5rem pushed the heading
     and the phone button below the fold on a laptop. */
  header.masthead {
    padding-top: 9rem;
    padding-bottom: 6rem;
  }
  header.masthead .masthead-photo {
    max-height: 55vh;
    width: auto;
  }
  header.masthead .masthead-heading {
    font-size: 2.75rem;
    margin-bottom: 1.5rem;
  }
}

/* Pages without a masthead start right under the fixed navbar. Two classes so
   this outranks the shorthand `padding` in the mobile .page-section rule. */
.page-section.page-section-first {
  padding-top: 9rem;
}

/* --- Section subheadings -------------------------------------------------
   These were <h3> elements used for plain sentences, which broke the heading
   outline. They are now <p>, so restore the theme's styling by class. */
.page-section p.section-subheading {
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  margin-bottom: 3rem;
}

.guarantee-text {
  font-size: 1rem;
  font-style: italic;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #6c757d;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .page-section {
    padding: 4rem 0;
  }
  .page-section h2.section-heading {
    font-size: 2rem;
  }
}

/* --- Certificates -------------------------------------------------------- */
@media (max-width: 575.98px) {
  /* 1.5rem headings wrapped onto four lines on a phone. */
  #portfolio .portfolio-item .portfolio-caption .portfolio-caption-heading {
    font-size: 1.15rem;
  }
  #portfolio .portfolio-item .portfolio-caption {
    padding: 1rem;
  }
}

/* Touch devices have no hover, so show the affordance permanently there. */
@media (hover: none) {
  #portfolio .portfolio-item .portfolio-link .portfolio-hover {
    opacity: 1;
    background: transparent;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0.5rem;
  }
  #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
    padding: 0.4rem 0.55rem;
    border-radius: 0.25rem;
    background-color: rgba(255, 200, 0, 0.95);
  }
  /* The markup carries fa-3x, which is a 48px glyph over the certificate. */
  #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content .fa-3x {
    font-size: 1.1rem;
  }
}

/* 100vw plus the 1rem margins overflowed the viewport inside modals. */
.portfolio-modal .modal-dialog {
  max-width: calc(100vw - 2rem);
}

@media (max-width: 767.98px) {
  .portfolio-modal .modal-content {
    padding-top: 4.5rem;
    padding-bottom: 3rem;
  }
  .portfolio-modal .modal-content h2,
  .portfolio-modal .modal-content .h2,
  .portfolio-modal .modal-content h3 {
    font-size: 1.75rem;
    line-height: 1.25;
  }
  .portfolio-modal .close-modal {
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* --- Contacts ------------------------------------------------------------
   .text-muted (#6c757d) on the near-black contact background failed contrast. */
section#contact .contact-line {
  font-size: 1.05rem;
  font-style: italic;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 1rem;
}

section#contact .contact-link {
  display: inline-block;
  padding: 0.75rem 0.5rem;
  color: #ffc800;
  overflow-wrap: anywhere;
}

section#contact .contact-map {
  border: 0;
  border-radius: 0.25rem;
  margin: 2rem 0 1rem;
}

/* --- Footer -------------------------------------------------------------- */
.footer a {
  color: #ffc800;
}