/*
 * Public site — clickable brand mark, photo-free hero
 * ===================================================
 * Loaded after platform.css, mobile-app.css and compact.css from this checkout's
 * override asset root only, so the shared CodeIgniter tree (and the site on :8030)
 * is untouched. Public-facing pages only.
 *
 * Three changes:
 *
 *  1. The header brand mark was a plain <div> — no link, no handler, cursor:auto.
 *     Visitors try to click a logo to get home. public-polish.js turns it into a
 *     real anchor; the rules here give it the affordance to match.
 *
 *  2. The hero carousel is retired. Those ten photographs now run as a gallery in
 *     the "Why Choose Us" section, and showing them in both places was redundant.
 *
 *  3. The hero copy was hard to read. Retiring the carousel removes most of the
 *     cause; the remainder is fixed explicitly below.
 */

/* ---------------------------------------------------------------------------
 | 1. Brand mark
 --------------------------------------------------------------------------- */

/* The anchor public-polish.js wraps around the logo. */
.brand-home-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
  border-radius: 10px;
  /* Keeps the whole mark a comfortable target without changing the logo's size. */
  padding: 2px 4px;
  margin: -2px -4px;
  transition: opacity .15s ease;
}

.brand-home-link:hover {
  opacity: .82;
}

.brand-home-link:focus-visible {
  outline: 2px solid #2f6fbf;
  outline-offset: 2px;
}

/* The wrapper differs per page (.nav-logo, .about-page-header-brand, and so on), so
   the pointer is set on everything inside rather than on a named container. */
.brand-home-link,
.brand-home-link * {
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 | 2. Hero — carousel retired
 |
 | IMPORTANT: the slides are hidden, NOT removed from the DOM.
 |
 | why-gallery.js builds the "Why Choose Us" gallery by reading the image, title
 | and caption off each .hero-slide. That is deliberate — it means the gallery
 | tracks whatever is configured in Configuration -> Public Hero Slider with no
 | second list to maintain — but it does mean the nodes have to stay queryable.
 | display:none keeps them in the document and out of the picture. The images are
 | not wasted bandwidth either: the gallery below requests the same files, so the
 | browser serves them from cache.
 |
 | If the hero markup is ever genuinely deleted, why-gallery.js must be pointed at
 | getPublicHeroSlides() instead, or the gallery will silently fall back to the
 | single static photograph.
 --------------------------------------------------------------------------- */

.public-page--landing .hero-slider,
.public-page--landing .hero-slider--full,
.public-page--landing .hero-slider-controls,
.public-page--landing .hero-slider-controls--landing,
.public-page--landing .hero-slide-caption {
  display: none !important;
}

/*
 * With no photograph behind it, the hero gets a designed ground of its own rather
 * than whatever the scrim used to sit on.
 */
.public-page--landing .hero.hero-landing {
  background:
    radial-gradient(52% 78% at 88% 30%, rgba(47, 111, 191, .13), rgba(0, 0, 0, 0) 70%),
    linear-gradient(104deg, #f5f9ff 0%, #eaf2fe 46%, #dce9fb 100%);
}

/*
 * The scrim existed to hold a photograph back. There is no photograph now, and its
 * dark navy end would only muddy the flat ground, so it is cleared. The hero's own
 * background above is what shows.
 */
.public-page--landing .hero-overlay--landing {
  background: none;
}

/*
 * The panel carried backdrop-filter: blur(16px) and no background at all — which is
 * why the copy was hard to read over a busy slide. There is nothing behind it to
 * blur any more, so the filter is dropped rather than left costing a compositing
 * layer for no visible effect.
 */
.public-page--landing .hero-content--panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/*
 * The one contrast problem the photograph was not responsible for.
 *
 * .hero-title-accent paints a gradient into the glyphs with background-clip:text,
 * and it ended at rgb(201,168,76) — a khaki gold, about 2.1:1 against the pale
 * ground, well under the 3:1 that large text needs. That is why the second half of
 * "Save Today, Grow Together" faded out no matter what was behind it.
 *
 * The gradient is kept; every stop is now a colour that holds up, so the phrase
 * reads evenly end to end.
 */
.public-page--landing .hero-title-accent {
  background-image: linear-gradient(
    92deg,
    #16447f 0%,
    #2264ac 48%,
    #2f78c9 100%
  );
}

/* Was rgb(74,95,138) at 14px — thin and pale for the society's own name. */
.public-page--landing .hero-brand-mark {
  color: #2b4374;
}

/* Was rgb(66,88,120). A little more weight against the lighter ground. */
.public-page--landing .hero-lead {
  color: #33445f;
}

/*
 * The hero was sized by its photograph; now it is sized by its copy.
 *
 * The 61.6px of bottom padding was reserving room for the carousel arrows and
 * counter that sat along the bottom edge. Those are gone, so that space is just a
 * gap between the chips and the cards below.
 */
.public-page--landing .hero-inner--landing {
  min-height: 0;
  padding-bottom: 1.4rem;
}

/* ---------------------------------------------------------------------------
 | 3. Phones
 --------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .public-page--landing .hero.hero-landing {
    background:
      radial-gradient(70% 50% at 80% 12%, rgba(47, 111, 191, .12), rgba(0, 0, 0, 0) 70%),
      linear-gradient(168deg, #f5f9ff 0%, #eaf2fe 55%, #dce9fb 100%);
  }

  .public-page--landing .hero-inner--landing {
    padding-bottom: .9rem;
  }
}

/* ---------------------------------------------------------------------------
 | 4. Site notice and app downloads
 |
 | Published from System Settings, mounted by public-notices.js. The notice bar sits
 | above everything because it is a warning about the site itself; the download
 | buttons sit beside the hero's own, which is where someone looking for the app
 | would think to look.
 --------------------------------------------------------------------------- */

.sitenotice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem;
  background: #fff8e8;
  border-bottom: 1px solid #e8cf94;
  padding: .55rem 1rem;
  color: #7a5406;
  font-size: .88rem;
  line-height: 1.45;
}

.sitenotice__icon { font-size: 1rem; }

.sitenotice__body {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .6rem;
  min-width: 0;
}

.sitenotice__when {
  font-size: .8rem;
  color: #96703a;
}

.sitenotice__close {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  color: #96703a;
  font-size: 1.3rem;
  line-height: 1;
  /* The project's 44px minimum. */
  width: 44px;
  height: 44px;
  cursor: pointer;
  border-radius: 8px;
}

.sitenotice__close:hover { background: rgba(151, 112, 58, .12); color: #6b4a05; }
.sitenotice__close:focus-visible { outline: 2px solid #96703a; outline-offset: -2px; }

/* --- app download buttons ------------------------------------------------- */

.appdl {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: 0 0 1rem;
}

.appdl__label {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5d6b85;
}

.appdl__row {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.appdl__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 9px;
  border: 1px solid rgba(26, 45, 90, .18);
  background: rgba(255, 255, 255, .9);
  color: #1a2d5a;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.appdl__btn:hover {
  border-color: #2f6fbf;
  color: #2f6fbf;
  background: #fff;
}

.appdl__btn:focus-visible {
  outline: 2px solid #2f6fbf;
  outline-offset: 2px;
}

.appdl__icon { font-size: 1rem; }

@media (max-width: 768px) {
  .sitenotice {
    padding: .5rem .7rem;
    font-size: .82rem;
  }

  .appdl__row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .appdl__btn { justify-content: center; }
}

/* ---------------------------------------------------------------------------
 | The footer's contact entries
 |
 | Five label/value pairs with no margin between them ran together as one block of
 | text: the label of each entry sat directly beneath the value of the last, with
 | nothing to say where one ended and the next began, and the value started back at
 | the left margin while its own label was indented past an icon. On a phone, where
 | the values wrap onto two lines, that is the part of the footer that reads worst.
 |
 | Separating the entries and hanging the icon in a gutter — so a label and its
 | value line up as one block — is the whole change. Nothing is hidden.
 --------------------------------------------------------------------------- */

.footer-contact .footer-contact-line {
  /* The gutter the icon hangs in; 1.4rem is the icon's own width. */
  padding-left: 1.4rem;
  margin: 0 0 .55rem;
  line-height: 1.45;
}

.footer-contact .footer-contact-line:last-child {
  margin-bottom: 0;
}

/* The label steps back out so its icon sits in the gutter and its text aligns
   with the value beneath it. */
.footer-contact .footer-contact-line > strong {
  margin-left: -1.4rem;
}

/*
 * Three identical building icons down one column is a lot of emphasis for
 * decoration. They stay — they mark where an entry starts — but quietly.
 */
.footer-contact .footer-contact-line > strong > .footer-contact-icon {
  opacity: .75;
}

/* A little more room around the heading, so it reads as a heading. */
.footer-contact > h4 {
  margin-bottom: .5rem;
}

@media (max-width: 768px) {
  .footer-contact .footer-contact-line {
    margin-bottom: .65rem;
  }

  /* The two link columns were tighter than the text they hold. */
  .footer-links-row {
    row-gap: .35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-home-link {
    transition: none;
  }
}