/* Feast Button — sitewide CTA at the "feast-button" module position (base outline).
   Links to the St. Raphael Feast ticket purchase form.
   Color: bright blue #0722CE — this is the site's own link color (see
   content/override.css, `a { color: #0722ce; }`), reused here instead of
   the darker brand navy (#32385A) at the client's request for a brighter
   button.

   Icon: a hand-drawn ticket shape as an inline SVG data URI on ::before —
   NOT a Font Awesome glyph. Loading the FA6 CDN sitewide (to get an FA6
   icon) collided with this site's own, older Font Awesome build and broke
   the Facebook/Instagram icons elsewhere in the header (confirmed 2026-08-07,
   reverted same session). An inline SVG has no font dependency, so it can
   never collide with whatever icon font any given site already loads.

   RESPONSIVE NOTE (verified 2026-08-07 on an isolated preview outline,
   id 11, since deleted): the site's own "toplinks" column (DONATE |
   Catholic Ministries Appeal | Facebook | Instagram) overflows ITS OWN
   .g-block column width — confirmed via inspect: 460px of content inside a
   276px column at tablet width, 523px inside 461px at desktop. This is a
   PRE-EXISTING site bug, unrelated to this component — logged as a site
   note. It means anything sitting next to that column can get visually
   crowded by its overflow independent of how correctly this component's
   own box is sized. Absolute-centering the button (for a nicer vertical
   alignment) makes this worse by taking the button out of normal flow,
   where it can then paint over that overflowing sibling. Mitigation: only
   use position:absolute at a width verified clean by direct screenshot
   (>=1200px, tested at 1280px desktop). Below that, the wrapper stays in
   NORMAL FLOW — a normal-flow block can't overlap a sibling column (worst
   case: the row grows taller), so it degrades safely even where the
   toplinks bug is present, at the cost of being vertically centered
   against its own row only (not perfectly centered against the fuller
   header) below 1200px. Below 767px the whole row stacks anyway (separate
   block below), which sidesteps the issue entirely. */

#g-top .g-block:has(.sc-feast-button-wrap) {
  position: relative;
}

.sc-feast-button-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 6px 10px;
  box-sizing: border-box;
}

@media only screen and (min-width: 1200px) {
  .sc-feast-button-wrap {
    position: absolute;
    top: 50%;
    left: 4px;
    width: calc(100% - 8px);
    transform: translateY(-50%);
  }
}

.sc-feast-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #0722CE;
  color: #ffffff !important;
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: clamp(0.72rem, 1.7vw, 1.05rem);
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  letter-spacing: 0.02em;
  padding: 10px 10px;
  border-radius: 6px;
  border: 2px solid #0722CE;
  box-shadow: 0 2px 4px rgba(7, 34, 206, 0.35);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.sc-feast-button::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M2 8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v2a2 2 0 1 0 0 4v2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-2a2 2 0 1 0 0-4V8z'/%3E%3Cline x1='12' y1='6' x2='12' y2='18' stroke='%230722CE' stroke-width='1.5' stroke-dasharray='2,2'/%3E%3C/svg%3E");
}

.sc-feast-button:hover,
.sc-feast-button:focus {
  background: #2F4AF6;
  border-color: #2F4AF6;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(47, 74, 246, 0.45);
  text-decoration: none !important;
}

.sc-feast-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(7, 34, 206, 0.35);
}

@media only screen and (max-width: 767px) {
  .sc-feast-button {
    width: 100%;
    max-width: 360px;
    text-align: center;
    font-size: 1rem;
    padding: 12px 20px;
  }
}