/* Clean-up on top of the original stylesheets (approved by the owner, October 2026).
   Original breakpoints: 767px (phones), 991px (small tablets), 1199px (laptops). */

/* ---------- Tablet menu ---------- */

/* Between 768px and 1099px the full menu didn't fit beside the logo and ran over it,
   so tablets use the phone menu (which also carries the social and Apparel Shop links). */
@media (min-width: 768px) and (max-width: 1099px) {
  #navbar {
    display: none !important;
  }

  #nav-mobile {
    display: block !important;
  }

  .preheader {
    display: none !important;
  }
}

/* ---------- Home hero on small tablets ---------- */

/* The intro text was set 800px wide inside a 750px page, so it ran off the right edge
   and the whole page scrolled sideways. */
@media (min-width: 768px) and (max-width: 991px) {
  .hero-subhead {
    width: 600px;
  }
}

/* ---------- Inside-page titles ---------- */

/* Thin white titles such as "About BGSA" sat straight on busy photos. A soft shade at the top of
   the photo (where the header and title sit) keeps them readable without hiding the picture. */
.internal-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(12, 15, 36, 0.55) 0%, rgba(12, 15, 36, 0.35) 55%, rgba(12, 15, 36, 0.1) 100%);
  pointer-events: none;
}

.internal-hero-tagline {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* ---------- Meet John Barata ---------- */

/* On phones the floated portrait squeezed the bio into a narrow column beside it. */
@media (max-width: 767px) {
  .bio-photo {
    float: none !important;
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 20px !important;
  }
}

/* The licence certificate photo now sits in its own list item; keep it unmarked and aligned as before. */
.list-image {
  list-style: none;
}

/* ---------- Icons ---------- */

/* The icons used to come from a 400KB icon font; they are now small inline drawings of the same
   Font Awesome icons (src/partials/icons.html). Sized and placed like the font's letters:
   1em tall, as wide as the drawing, sitting 0.125em below the text line.
   (custom.css stretches every svg over its container, so that is undone here.) */
svg.fa,
svg.fa-solid {
  position: static;
  top: auto;
  left: auto;
  display: inline-block;
  width: auto;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* The font's letters snapped to whole pixels, so at the fixed sizes used here they sat a little lower. */
.preheader .preheader-icon svg.fa {
  vertical-align: -2px;
}

.mob-menu-social .preheader-icon svg.fa,
.top-icon svg.fa {
  vertical-align: -3px;
}

.carousel-control svg.fa-solid {
  vertical-align: -4px;
}

/* The "learn more" arrows (phones): the letter also carried the list's 1px letter spacing after it. */
.badge svg.fa {
  padding-right: 1px;
  vertical-align: -2px;
}

/* Bootstrap gives the carousel arrows a text shadow, which doesn't reach drawings. */
.carousel-control .fa-solid {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}

/* ---------- FAQ ---------- */

/* The FAQ's open/close signs were letters from the icon font. They are now the same Font Awesome
   minus and plus shapes, filled with the toggle's colour, in a box the size of the old letter. */
.panel-title a:after,
.panel-title a.collapsed:after {
  content: '';
  width: 0.875em;
  height: 1.1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E") 0 1px / 0.875em 1em no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z'/%3E%3C/svg%3E") 0 1px / 0.875em 1em no-repeat;
}

.panel-title a.collapsed:after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'/%3E%3C/svg%3E");
}

/* ---------- Photo gallery (Meet John Barata) ---------- */

/* The gallery popup (GLightbox) hides its arrows on phones and relies on swiping; the old popup
   showed them, so they stay, placed as on larger screens and 8px from the edges. */
.glightbox-container svg {
  position: static; /* undo custom.css stretching every svg, which pushed the popup's icons into a corner */
}

@media (max-width: 768px) {
  .glightbox-clean .gprev,
  .glightbox-clean .gnext {
    top: 45%;
  }

  .glightbox-clean .gprev {
    left: 8px;
  }

  .glightbox-clean .gnext {
    right: 8px;
  }
}

/* ---------- Keyboard focus ---------- */

/* Bootstrap removes the focus outline from the carousel arrows; show one to keyboard users only. */
.carousel-control:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -6px;
}

/* The phone/tablet menu button can now be reached with the keyboard. */
#toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* ---------- Contact page: phone, email and social links (replaced the form, November 2026) ---------- */
.contact-links {
  margin-top: 25px;
}

.contact-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-links a {
  color: #000;
  font-family: 'Open Sans', sans-serif;
  text-decoration: none;
}

.contact-links a:hover span:last-child,
.contact-links a:focus-visible span:last-child {
  text-decoration: underline;
}

.contact-links .contact-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffcd07;
  color: #000;
}

.contact-links svg.fa {
  height: 18px;
  vertical-align: 0;
}

/* Phone and email: each in its own light grey box. */
.contact-direct li {
  margin: 0 0 12px;
}

.contact-direct a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #f2f2f2;
  font-size: 18px;
  overflow-wrap: break-word;
}

/* Social links: one row of four, under the boxes, with space above. */
.contact-links .contact-social {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 36px;
  padding-bottom: 8px;
}

.contact-social a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  font-size: 15px;
  text-align: center;
}

/* Tablets and phones: the contact column is narrow, so slightly smaller text keeps each line whole. */
@media (max-width: 991px) {
  .contact-direct a {
    gap: 12px;
    padding: 14px 14px;
    font-size: 15px; /* keeps the email address on one line on most phones */
  }

  .contact-links .contact-social {
    gap: 6px;
    margin-top: 28px;
  }

  .contact-social a {
    font-size: 13px;
  }
}

/* Phones: Contact Us first, then the "We're ready..." text (the two columns stack below 768px). */
@media (max-width: 767px) {
  .contact-intro {
    display: flex;
    flex-direction: column;
  }

  .contact-intro .contact-column {
    order: -1;
    margin-bottom: 30px;
  }
}