/*
  public.css: what the public shell adds on top of the Huruma template. Colours come from tokens
  only (StyleRules) and layout uses logical properties, so the RTL build needs nothing extra.
*/

/* ---- The union's name as a wordmark, until a logo is chosen ---- */
.bfau-public-wordmark {
  font-family: var(--bfau-font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--bfau-heading);
  text-decoration: none;
}

.bfau-public-wordmark:hover,
.bfau-public-wordmark:focus {
  color: var(--bfau-primary-text);
}

/* ---- The logo (Appearance > Logo and icon): the dark-background one in dark mode ---- */
.bfau-public-logo {
  display: block;
  max-inline-size: 13rem;
  max-block-size: 3.25rem;
  object-fit: contain;
}

/* Logo size (Appearance > Layout > Logo size): only the largest allowed size changes. */
html[data-bfau-public-logo-size="small"] .bfau-public-logo {
  max-inline-size: 9rem;
  max-block-size: 2.25rem;
}

html[data-bfau-public-logo-size="large"] .bfau-public-logo {
  max-inline-size: 17rem;
  max-block-size: 4.25rem;
}

html[data-bfau-public-logo-size="xlarge"] .bfau-public-logo {
  max-inline-size: 21rem;
  max-block-size: 5.25rem;
}

.bfau-public-wordmark .bfau-public-logo.bfau-logo-on-dark,
html[data-bs-theme="dark"] .bfau-public-wordmark .bfau-public-logo.bfau-logo-on-light {
  display: none;
}

/* Huruma hides the brand link's last image for its own two-logo scheme
   (.huruma-nav .navbar .navbar-brand img:last-child); this outranks it in dark mode. */
html[data-bs-theme="dark"] .bfau-public-wordmark img.bfau-public-logo.bfau-logo-on-dark {
  display: block;
}

/* ---- Contact bar above the menu ---- */
.bfau-top-bar {
  padding-block: 0.5rem;
  background: var(--bfau-dark-section);
  /* Light text on the dark band: on-photo, never on-primary (dark on a light brand colour such as
     Beirut gold, which made this bar's text vanish). ThemeContrastTests measures it per preset. */
  color: var(--bfau-on-photo);
  font-size: 0.875rem;
}

.bfau-top-bar-languages {
  display: flex;
  gap: 1rem;
}

.bfau-top-bar-languages a {
  color: var(--bfau-on-photo);
  opacity: 0.8;
}

.bfau-top-bar-languages a.active,
.bfau-top-bar-languages a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ---- Hero of the placeholder home and error pages ---- */
.bfau-hero {
  padding-block: 9rem 6rem;
  background-image: linear-gradient(135deg, var(--bfau-dark-section), var(--bfau-primary));
  color: var(--bfau-on-primary);
}

.bfau-hero h1 {
  color: var(--bfau-on-primary);
  font-size: clamp(2rem, 4vw, 3.25rem);
  margin-block: 0.75rem 1rem;
}

.bfau-hero p {
  color: var(--bfau-on-primary);
  max-inline-size: 42rem;
  font-size: 1.125rem;
  opacity: 0.9;
}

.bfau-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  opacity: 0.9;
}

.bfau-hero-small {
  padding-block: 8rem 4rem;
}

.bfau-coming .icon i {
  font-size: 2.5rem;
  color: var(--bfau-primary-text);
}

/* ---- The back-to-top control is a real button here; keep the template's look ---- */
button.go-top {
  border: 0;
  padding: 0;
}

/* ---- Light / dark switch ---- */
.bfau-mode-switch {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-start: 1.5rem;
  z-index: 1030;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--bfau-dark-section);
  color: var(--bfau-on-photo);
  box-shadow: var(--bfau-shadow);
  font-size: 1.25rem;
}

.bfau-mode-switch:focus-visible {
  outline: 2px solid var(--bfau-primary);
  outline-offset: 2px;
}

[data-bs-theme="dark"] .bfau-mode-switch [data-bfau-mode-icon="light"],
[data-bs-theme="light"] .bfau-mode-switch [data-bfau-mode-icon="dark"] {
  display: none;
}

/* On a phone or tablet the switch sits in the menu bar, beside the menu button; a floating button
   would sit on top of the text. */
.bfau-mode-switch-inline {
  position: absolute;
  /* Level with the menu button, which the menu script places 3px below the bar's top. */
  inset-block-start: 0.4rem;
  inset-inline-end: 3.75rem;
  inset-inline-start: auto;
  z-index: 1000;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  box-shadow: none;
  font-size: 1.1rem;
}

@media (min-width: 992px) {
  .bfau-mode-switch-inline {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .bfau-mode-switch:not(.bfau-mode-switch-inline) {
    display: none;
  }
}

/* ---- "Edit this page" (signed-in staff only): a small pill, stacked above the mode switch on the
   same side so neither ever overlaps the template's own go-top button on the other side. Rendered
   hidden by the server and shown by edit-link.js only once a signed-in staff member's browser is
   confirmed (StaffHintCookie) — see that script for why it can never appear in HTML shared by the
   output cache. ---- */
.bfau-edit-link {
  position: fixed;
  inset-block-end: 5.25rem;
  inset-inline-start: 1.5rem;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-block: 0.5rem;
  padding-inline: 0.9rem;
  border-radius: 999px;
  background: var(--bfau-primary);
  color: var(--bfau-on-primary);
  box-shadow: var(--bfau-shadow);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1;
}

.bfau-edit-link:hover,
.bfau-edit-link:focus {
  color: var(--bfau-on-primary);
  filter: brightness(1.08);
  text-decoration: none;
}

.bfau-edit-link:focus-visible {
  outline: 2px solid var(--bfau-on-primary);
  outline-offset: 2px;
}

.bfau-edit-link i {
  font-size: 1rem;
}

@media (max-width: 575.98px) {
  /* A short label on a phone: the icon alone still carries the meaning, and it stays clear of the
     mobile menu bar and the mode switch below it. */
  .bfau-edit-link span {
    display: none;
  }

  .bfau-edit-link {
    padding: 0.6rem;
    inset-block-end: 5rem;
  }
}

/* ---- The active menu link over the dark banner: the brand colour on the dark band is hard to
   read, so the link stays light and carries a brand-coloured bar instead. Light means on-photo, the
   colour the other links over the photo use: on-primary is the text colour for ON the brand colour,
   and is near-black for a light brand colour (Beirut gold), which painted the page you are on black
   on the dark photo at page load (BFAUCRM-141). Once the bar sticks (white), Huruma's own rule
   colours it again. In dark mode the template's dark sheet forces the active link to the brand
   colour with !important (.theme-dark .huruma-nav … a.active), which beat this rule; it only passed
   while the dark-mode brand colours were light. Since they were darkened for white button text
   (BFAUCRM-146) that read 2.6:1 on the banner, so this rule answers with !important too. ---- */
.navbar-style-three:not(.is-sticky) .navbar .navbar-nav .nav-item a.active {
  color: var(--bfau-on-photo) !important;
  text-decoration: underline;
  text-decoration-color: var(--bfau-primary);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.5rem;
}

/* The contact bar rides at the top of the menu's area; when the menu sticks on scroll, it stays behind. */
.is-sticky .bfau-top-bar {
  display: none;
}

/* ---- Mobile menu (meanmenu): make the phone panel match Huruma's own mobile menu ----
   meanmenu (lib/huruma/js/jquery.meanmenu.js) copies the main menu's markup as-is into a
   `.mean-nav` panel it opens from the hamburger button; the copied `<ul class="navbar-nav">` and
   `<li class="nav-item">` keep their desktop classes. Four vendored-template issues follow from
   that reuse, none fixable by editing lib/huruma by hand (CLAUDE.md §12):

   1. The transparent desktop navbar (navbar-style-three) sets its link colour for the dark hero it
      floats over: `.navbar-style-three .navbar .navbar-nav .nav-item a { color: #fff }`. That
      selector (4 classes) is more specific than meanmenu's own link colour (2 classes), so it wins
      on the white mobile panel too and every link but the active one is invisible.
   2. The template's own rule meant to hide the language switcher inside the mobile panel has a
      class typo — `.others-option`, missing the final "s" (lib/huruma/ltr/style.css) — so it never
      hides. It renders in the panel at its own (wider) width and overflows the panel sideways.
   3. A dropdown child list keeps Bootstrap's `.dropdown-menu { position: absolute }`; nothing in
      the vendored CSS resets it for the mean-menu context, so a submenu paints on top of the
      sibling rows below it instead of pushing them down, which is the "blank rows" part of the bug.
   4. The panel forces `overflow-y: scroll` unconditionally (always shows a scrollbar) and nothing
      clips horizontal overflow, so items 1–3 combined also show as a double scrollbar.

   Fixed here, tokens only, for both light and dark mode (the panel keeps its own readable surface
   rather than the desktop's white-on-dark-hero styling), and direction-agnostic so it holds for RTL
   too. Selectors match/exceed the vendored rules' specificity so this does not depend on load order. */
@media (max-width: 991.98px) {
  .huruma-responsive-nav .huruma-responsive-menu.mean-container .mean-nav .navbar-nav {
    background-color: var(--bfau-surface);
    overflow-x: hidden;
    overflow-y: auto;
    max-inline-size: 100%;
  }

  .huruma-responsive-nav .huruma-responsive-menu.mean-container .mean-nav .navbar-nav .nav-item a {
    color: var(--bfau-text);
    max-inline-size: 100%;
    overflow-wrap: break-word;
  }

  .huruma-responsive-nav .huruma-responsive-menu.mean-container .mean-nav .navbar-nav .nav-item a:hover,
  .huruma-responsive-nav .huruma-responsive-menu.mean-container .mean-nav .navbar-nav .nav-item a:focus {
    color: var(--bfau-primary-text);
  }

  /* Huruma's own rule (lib/huruma/ltr/style.css) already colours the active item; keep it readable
     against our token surface too, in case a preset ever makes the two colours collide. */
  .huruma-responsive-nav .huruma-responsive-menu.mean-container .mean-nav .navbar-nav .nav-item a.active {
    color: var(--bfau-primary-text);
  }

  /* Submenu: back in normal flow (not absolutely positioned over the rows below it), and blended
     into the panel instead of looking like a floating desktop dropdown card. */
  .huruma-responsive-nav .huruma-responsive-menu.mean-container .mean-nav .navbar-nav .dropdown-menu {
    position: static;
    inset: auto;
    float: none;
    min-inline-size: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
  }

  .huruma-responsive-nav .huruma-responsive-menu.mean-container .mean-nav .navbar-nav .dropdown-menu li a {
    color: var(--bfau-text);
  }

  /* The language switcher belongs in the top bar, not repeated inside the mobile panel (the panel
     already opens under the same bar); the real class is plural ("others-options"). */
  .huruma-responsive-nav .huruma-responsive-menu.mean-container .others-options {
    display: none;
  }

  /* 5. meanmenu's own CSS (lib/huruma/css/meanmenu.min.css) makes the "+"/"-" expand toggle it
     injects into a parent row cover the ENTIRE row: `a.mean-expand { width: 100%; position:
     absolute; right: 0; top: 0; z-index: 2 }`, stacked on top of the row's real link. A parent that
     both leads somewhere AND has children (e.g. "The Union's Families" -> /associations) becomes
     unreachable in the phone panel: every click anywhere on the row, including squarely on the
     label text, lands on the invisible full-width toggle instead of the link underneath it, so it
     only ever expands/collapses and never navigates. Good accordion practice (and what the brief
     asks for) is the opposite split: the small expand icon toggles, the label navigates. Shrinking
     the toggle back to the icon's own footprint, right-aligned, restores that — the label's own
     link, covering the rest of the row, is then clickable again. This has no effect on a pure
     heading item (Href null): that row has no link to steal from, so the whole row remaining
     tappable to expand is still correct for it. */
  .huruma-responsive-nav .huruma-responsive-menu.mean-container .mean-nav ul li a.mean-expand {
    inset-inline-end: 0;
    inset-block-start: 0;
    inline-size: 3em;
    max-inline-size: 3em;
  }
}