/* ===========================================================================
   SSTGC — plugin compatibility
   File: assets/css/plugin-compat.css   (loads last)

   The previous theme had a static header, so any plugin that fixes a bar to
   the top of the viewport simply sat above it. This theme's header is sticky,
   which is better for a site whose menu is the main way around — but it means
   a fixed bar and the header now compete for the same space.

   Nothing here changes what a plugin does. It gets out of the way of what they
   already do.
   =========================================================================== */

/* ── MyStickymenu Welcome Bar ──────────────────────────────────────────────
   The temple uses this for notices — the lunar eclipse timings, festival
   announcements, closures. It fixes itself to the top of the viewport, so the
   sticky header has to sit below it rather than over it.

   The plugin sets --mystickymenu-height on <html> when the bar is showing; if
   a version does not, the fallback keeps the header clear of a typical bar. */

body.mystickyMenu-welcomebar .site-header,
body:has(#mysticky_welcomebar) .site-header {
  top: var(--welcomebar-height, 48px);
}

/* The bar is the topmost thing on the page — above the header, below a modal. */
#mysticky_welcomebar,
.mysticky-welcomebar-wrap {
  z-index: 120 !important;
}

/* Its own typography, so a notice reads as part of the site rather than as the
   plugin's default. Colours are left alone — the office sets those. */
#mysticky_welcomebar,
#mysticky_welcomebar * {
  font-family: var(--font) !important;
}
#mysticky_welcomebar .mysticky-welcomebar-content,
#mysticky_welcomebar p {
  font-size: var(--t-sm) !important;
  line-height: var(--lh-snug) !important;
}
#mysticky_welcomebar a:not(.mysticky-welcomebar-btn) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The close button is often a bare × with no hit area. */
#mysticky_welcomebar .mysticky-welcomebar-close,
.mysticky-welcomebar-close {
  min-width: 32px;
  min-height: 32px;
  display: grid !important;
  place-items: center;
}

@media (max-width: 640px) {
  /* Two lines of notice on a phone is normal; three pushes the header off. */
  body.mystickyMenu-welcomebar .site-header,
  body:has(#mysticky_welcomebar) .site-header {
    top: var(--welcomebar-height, 64px);
  }
}

/* ── Skip link ─────────────────────────────────────────────────────────────
   Must clear the bar too, or it lands underneath it. */
body:has(#mysticky_welcomebar) .skip-link:focus {
  top: calc(var(--welcomebar-height, 48px) + var(--s-4));
}

/* ── Anchor offset ─────────────────────────────────────────────────────────
   scroll-padding-top in base.css assumes the header alone. With a bar above
   it, an #anchor lands under both. */
body:has(#mysticky_welcomebar) { scroll-padding-top: calc(6rem + var(--welcomebar-height, 48px)); }

/* ── Hide My WP ────────────────────────────────────────────────────────────
   Rewrites /wp-content/ to /core/modules/ and similar. It needs no CSS, but
   it is worth recording here that the paths in the browser will not match the
   paths on disk while it is active — which is confusing when debugging and is
   why an asset 404 may be a rewrite-rule problem rather than a missing file. */

/* ── Contact Form 7 ────────────────────────────────────────────────────────
   Styled in forms.css. Nothing needed here. */

/* ── Simple Calendar (google-calendar-events) ──────────────────────────────
   Active but unused — the Calendar of Events page embeds a Google iframe
   directly. Kept minimal in case a shortcode is added later. */
.simcal-calendar { max-width: none; }
.simcal-current { background: var(--brand-tint) !important; }

/* ── Events promo strip, placed by the theme hook ──────────────────────────
   It renders between the hero and Temple Events, and in `bar` style it is a
   single line of text on white — sitting between a saffron band above and a
   grey band below, with nothing to mark it as its own thing. It read as a
   caption that had come loose.                                              */

.sstgc-promo--bar,
.sstgc-promo {
  border-block: 1px solid var(--brand-line);
  background: var(--brand-tint);
}
.sstgc-promo--bar .sstgc-promo__inner {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}