/*
  site-shell.css: what the Content module adds to the public shell: the menus (main and footer) and
  the website details (contact bar, footer text, contact column, social links). Colours come from
  tokens only (StyleRules) and layout uses logical properties, so the RTL build needs nothing extra.
*/

/* ---- The contact bar: phone, e-mail and social links between the name and the languages ---- */
.bfau-top-bar-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
}

.bfau-top-bar-contact a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  /* On the dark contact bar: on-photo (light), never on-primary (dark on a light brand colour). */
  color: var(--bfau-on-photo);
  opacity: 0.85;
}

.bfau-top-bar-contact a:hover,
.bfau-top-bar-contact a:focus-visible {
  opacity: 1;
  color: var(--bfau-on-photo);
}

.bfau-top-bar-social {
  display: inline-flex;
  gap: 0.75rem;
  font-size: 1.05rem;
}

/* On a phone the bar keeps the icons and drops the long e-mail address, so it stays one or two lines. */
@media (max-width: 575.98px) {
  .bfau-top-bar-contact a[href^="mailto:"] bdi {
    display: none;
  }
}

/* ---- The main menu ---- */
/* A heading has no address: it only opens its drop-down list. */
.bfau-menu-heading {
  cursor: default;
}

.bfau-menu-external {
  font-size: 0.8em;
  opacity: 0.7;
  margin-inline-start: 0.2rem;
}

/* ---- The footer ---- */
/* The template's footer text is a faint grey on the dark band; the union's own words stay readable. */
.bfau-footer-about {
  white-space: pre-line;
  color: var(--bfau-on-photo);
  opacity: 0.85;
}

.bfau-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.bfau-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bfau-primary) 20%, transparent);
  /* A faint brand tint over the dark footer, so the glyph is light (on-photo); on hover the circle is
     the solid brand colour and the glyph takes on-primary, below. */
  color: var(--bfau-on-photo);
  font-size: 1.1rem;
  transition: background-color 0.15s ease-in-out;
}

.bfau-footer-social a:hover,
.bfau-footer-social a:focus-visible {
  background: var(--bfau-primary);
  color: var(--bfau-on-primary);
}

.bfau-footer-contact .footer-info-contact a {
  word-break: break-word;
}

/* The small headings over each detail ("Our address", "Call us", "E-mail us"): the template paints them
   in the brand colour, which on the dark footer reads 2.5:1 with the default blue. Found by the visual
   guard once its sample site set a phone number (BFAUCRM-187); they take the footer's light text
   colour, as the widget's own heading does. */
.bfau-footer-contact .footer-info-contact h3 {
  color: var(--bfau-on-photo);
}

.bfau-footer-menu .footer-quick-links a.active {
  color: var(--bfau-on-photo);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}