/*
 * Global utility / Gutenberg helper classes for happynectar.
 *
 * Extracted from legacy withministries2023 theme.css. These didn't fit the
 * `.block-*` extraction pattern but are referenced from page content edited
 * in the WP block editor (e.g., `.has-background` is added by core when an
 * editor picks a background color; `.heading-eyebrow` is a brand utility
 * for the small label above big headings).
 */

/* ── Gutenberg `.has-background` utility — adds a brand outline ──────────── */

h1.has-background,
h2.has-background,
h3.has-background,
h4.has-background,
h5.has-background,
h6.has-background,
p.has-background,
*.has-background {
  border: 0.75px solid #000000;
  padding: 0.75em;
  border-radius: 0.5em;
}

/* ── `.heading-eyebrow` — small eyebrow label that sits above a big H1 ───── */

.heading-eyebrow {
  text-align: center;
  margin-bottom: 0;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 0.5em;
  padding-bottom: 40px;
  font-size: 18px;
}

@media only screen and (min-width: 390px) {
  .heading-eyebrow {
    font-size: calc(18px + 6 * (100vw - 390px) / (1280 - 390));
  }
}

@media only screen and (min-width: 1280px) {
  .heading-eyebrow {
    font-size: 24px;
  }
}

.heading-eyebrow.blue {
  background: #BFDBDE;
}

.heading-eyebrow + h1 {
  margin-top: -32px;       /* pulls the H1 up so it "tucks" under the eyebrow */
}

/* ── Brand callouts / cards ─────────────────────────────────────────────── */

.wm_message {
  background: #B8D6A3;
  padding: 0.5em;
  border-radius: 0.5em;
  text-align: center;
  border: 0.75px solid #000000;
}

.border-box {
  margin: 0 auto;
  border: 0.75px solid black;
  padding: 1em;
  border-radius: 1em;
}

.border-box.white {
  background: white;
}

.drop-shadow {
  border: 0.75px solid black;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.13);
  border-radius: 8px;
  overflow: hidden;
}

/* ── Responsive visibility ──────────────────────────────────────────────── */

@media screen and (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .desktop-only {
    display: none !important;
  }
}

/* ── Block / content spacing tweaks ─────────────────────────────────────── */


.wp-block-buttons {
  margin-top: 30px;
}

.wp-block-buttons {
  margin: 1em auto;
}

/* Group block: full-bleed variant + width-constrained inner */
.wp-block-group.wide {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.wp-block-group.wide .wp-block-group__inner-container {
  max-width: 90%;
  margin: 0 auto;
}

/* Wide group with capped 960px inner (used on /equip and similar) */
.wide-equip {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.wide-equip .wp-block-group__inner-container {
  max-width: 960px;
  width: 90%;
}

@media screen and (max-width: 781px) {
  .wide-equip .wp-block-group__inner-container img {
    display: block;
    width: 120px;
    margin: 0 auto;
  }
}

.contrain-50 figure {
  max-width: 50%;
}

/* Core WP File-block download button: center + size */
.wp-block-file * + .wp-block-file__button {
  margin: 1em auto 0;
  display: block;
  width: 12em;
}

/* Smaller minimum width for small CTA buttons in content */
#page-content .smaller .wp-block-button a {
  min-width: 8em;
}

/* ── Responsive embed aspect ratios (legacy padding-top hack) ────────────── */

.wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper,
.wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper,
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper,
.wp-block-embed.wp-embed-aspect-4-3 .wp-block-embed__wrapper,
.wp-block-embed.wp-embed-aspect-1-1 .wp-block-embed__wrapper,
.wp-block-embed.wp-embed-aspect-9-16 .wp-block-embed__wrapper,
.wp-block-embed.wp-embed-aspect-1-2 .wp-block-embed__wrapper {
  position: relative;
  padding-top: 50%;
}

.wp-block-embed.wp-embed-aspect-21-9 iframe,
.wp-block-embed.wp-embed-aspect-18-9 iframe,
.wp-block-embed.wp-embed-aspect-16-9 iframe,
.wp-block-embed.wp-embed-aspect-4-3 iframe,
.wp-block-embed.wp-embed-aspect-1-1 iframe,
.wp-block-embed.wp-embed-aspect-9-16 iframe,
.wp-block-embed.wp-embed-aspect-1-2 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wp-block-embed.wp-embed-aspect-21-9 .wp-block-embed__wrapper { padding-top: 42.85%; }
.wp-block-embed.wp-embed-aspect-18-9 .wp-block-embed__wrapper { padding-top: 50%; }
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper { padding-top: 56.25%; }
.wp-block-embed.wp-embed-aspect-4-3  .wp-block-embed__wrapper { padding-top: 75%; }
.wp-block-embed.wp-embed-aspect-1-1  .wp-block-embed__wrapper { padding-top: 100%; }
.wp-block-embed.wp-embed-aspect-9-6  .wp-block-embed__wrapper { padding-top: 66.66%; }
.wp-block-embed.wp-embed-aspect-1-2  .wp-block-embed__wrapper { padding-top: 200%; }

/* ---------------------------------------------------------------------------
   "My Library" header icon (logged-in users). Lives here, not in theme.css —
   theme.css is a legacy file that enqueues.php intentionally does NOT load.
   Desktop: <li id="nectar-library-link"> in the header button group.
   Mobile:  .mobile-library-link, JS-injected next to .mobile-user-account.
   The SVG uses currentColor so it matches the sibling NB icons. Desktop
   hover label is the CSS tooltip below (native `title` is suppressed by the
   site's accessiBe overlay). pointer-events:none on the icon makes the <a>
   the hover/click target (one tap target + reliable :hover).
--------------------------------------------------------------------------- */
#nectar-library-link .happy-library-icon,
.mobile-library-link .happy-library-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  pointer-events: none;
}
#nectar-library-link .happy-library-icon svg,
.mobile-library-link .happy-library-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* .mobile-library-link is a class NB doesn't know about, so it won't get
   NB's show/hide. Mirror .mobile-user-account exactly: hidden on desktop
   (the #nectar-library-link <li> is shown there instead), revealed at the
   mobile-header breakpoint with the same flex layout/spacing as the
   sibling icons. color:inherit makes the currentColor SVG track the
   header text color across header states. */
#top .mobile-library-link {
  display: none;
  text-align: right;
  z-index: 10000;
}
@media only screen and (max-width: 1024px) {
  #nectar-nav #top .mobile-library-link {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    padding: 0 14px;
    color: inherit;
  }
}

/* ---------------------------------------------------------------------------
   Header icon hover tooltip. Replaces native `title` (the site's accessiBe
   overlay suppresses native browser tooltips). Any header element carrying
   data-happy-tooltip gets a small label bubble below it on hover/focus.
   Currently: #nectar-library-link <a>, #nectar-user-account <a>,
   .mobile-library-link, .mobile-user-account (last two get it via footer JS).
   Bubble points downward — the header sits at the top of the page, so an
   upward tooltip would clip. @media (hover:hover) keeps it desktop-only;
   :focus-visible covers keyboard users.
--------------------------------------------------------------------------- */
#nectar-nav [data-happy-tooltip] {
  position: relative;
}
#nectar-nav [data-happy-tooltip]::after {
  content: attr(data-happy-tooltip);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  margin-top: 6px;
  padding: 6px 9px;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 100000;
}
@media (hover: hover) {
  #nectar-nav [data-happy-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
#nectar-nav [data-happy-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* NB sets `overflow:hidden` on every .sf-menu > li
   (body .sf-menu >li:not(.nectar-woo-cart)... { overflow:hidden }), which
   crops the tooltip bubble on the desktop <li> icons. Re-open overflow on
   just our two items, and only while hovered/focused, so the bubble can
   escape exactly when it's shown without any persistent change to NB's
   header layout. ID-scoped so specificity beats the NB rule (no !important). */
#nectar-nav .sf-menu > li#nectar-library-link:hover,
#nectar-nav .sf-menu > li#nectar-library-link:focus-within,
#nectar-nav .sf-menu > li#nectar-user-account:hover,
#nectar-nav .sf-menu > li#nectar-user-account:focus-within {
  overflow: visible;
}


/* Flodesk newsletter form on the homepage #newsletter row. Flodesk injects
   its own <style> at runtime; the "Sign Me Up" button has NO top margin —
   the gap comes from its wrapper .ff-…__footer (Flodesk default: 10px
   desktop / 25px ≤767px). Force a consistent 10px at all widths. Mirror
   Flodesk's own selector specificity + !important so this wins over its
   injected, non-!important rule. Scoped to this form's hash. */
[data-ff-el="root"].ff-690ccfa7446cc061a40e401f .ff-690ccfa7446cc061a40e401f__footer {
  margin-top: 10px !important;
}
/* Belt-and-suspenders: the button itself already has margin:0 from Flodesk's
   reset, so this is a no-op for the current gap — kept in case another
   stylesheet ever adds top margin directly to the submit button. */
#newsletter button[type="submit"] {
  margin-top: 0 !important;
}