/* ============================================================
   SITE-LOCK.CSS
   ------------------------------------------------------------
   Shared across EVERY page of the site (linked in <head>).
   Two jobs only:

   1) "Coming Soon" mode — visually disables every ACTION BUTTON
      on the site (Donate, Invite David, Start Journey, form
      submits, etc.) so nothing that triggers an action is usable
      before launch. Regular navigation links (menu items, in-page
      anchors, cross-page links) stay fully clickable so the site
      is still browsable.

      Each locked button shows a small "Coming Soon" pill under
      itself so visitors understand why it does nothing.

   2) A tiny "safety net" of mobile/tablet rules that apply
      site-wide, on top of whatever each page already does,
      so nothing overflows the screen on small devices.

   >>> To turn the whole lock OFF later, delete the <link> to
   >>> this file AND the <script src="js/site-lock.js"> line
   >>> from every page — nothing else needs to change.
   ============================================================ */


/* ---- 1) LOCKED BUTTONS ---- */
/* Any element that visually functions as a button/action. This
   list matches every button-like class actually used across the
   site. If a new button class is added later, add it here too. */

button:not(.hamburger),
input[type="submit"],
input[type="button"],
[role="button"],
.btn-primary,
.btn-nav-donate,
.btn-nav-invite,
.btn-ghost,
.btn-outline-light,
.btn-outline-teal,
.btn-secondary-blue,
.btn-teal,
.btn-speak,
.btn-card,
.btn-amber-bg,
.btn-teal-bg,
.btn-purple-bg,
.submit-btn,
.cta-btn,
.card-link {
  /* Non-interactive */
  pointer-events: none !important;
  cursor: not-allowed !important;
  /* Visually disabled */
  opacity: 0.6 !important;
  filter: grayscale(35%) !important;
  /* Needed so the "Coming Soon" pill can be positioned relative to it */
  position: relative !important;
  /* Keep just enough space under the button for the pill to sit */
  margin-bottom: 22px !important;
}

/* Kill hover transforms/animations on locked buttons — no fake feedback */
button:not(.hamburger):hover,
input[type="submit"]:hover,
input[type="button"]:hover,
[role="button"]:hover,
.btn-primary:hover,
.btn-nav-donate:hover,
.btn-nav-invite:hover,
.btn-ghost:hover,
.btn-outline-light:hover,
.btn-outline-teal:hover,
.btn-secondary-blue:hover,
.btn-teal:hover,
.btn-speak:hover,
.btn-card:hover,
.btn-amber-bg:hover,
.btn-teal-bg:hover,
.btn-purple-bg:hover,
.submit-btn:hover,
.cta-btn:hover,
.card-link:hover {
  transform: none !important;
}


/* ---- "COMING SOON" PILL BELOW EACH LOCKED BUTTON ---- */
/* Uses ::after so it appears automatically without editing any
   page. Note: cannot be attached to <input> elements — those
   are "replaced" elements that don't support pseudo-elements —
   but the site uses <button> for form submissions so this is
   fine in practice. */

button:not(.hamburger)::after,
[role="button"]::after,
.btn-primary::after,
.btn-nav-donate::after,
.btn-nav-invite::after,
.btn-ghost::after,
.btn-outline-light::after,
.btn-outline-teal::after,
.btn-secondary-blue::after,
.btn-teal::after,
.btn-speak::after,
.btn-card::after,
.btn-amber-bg::after,
.btn-teal-bg::after,
.btn-purple-bg::after,
.submit-btn::after,
.cta-btn::after,
.card-link::after {
  content: "Coming Soon" !important;
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  /* Reset any inherited button-text sizing */
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  /* Pill look */
  color: #C49A3C !important;
  background: #1A1715 !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(196,154,60,0.4) !important;
  /* Full opacity even though the parent is dimmed */
  opacity: 1 !important;
  filter: none !important;
  /* Housekeeping */
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* Nav bar buttons are on a dark background — flip pill contrast */
.btn-nav-donate::after,
.btn-nav-invite::after {
  background: #F4EBE1 !important;
  color: #1A1715 !important;
  border-color: rgba(196,154,60,0.55) !important;
}


/* ---- 2) FLOATING PAGE-WIDE "COMING SOON" BADGE ---- */
/* Injected by site-lock.js so it appears on every page without
   editing each file. Sits fixed at the bottom of the viewport. */

.coming-soon-badge {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 999999;
  background: #1A1715;
  color: #F4EBE1;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  border: 1px solid rgba(196,154,60,0.5);
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: center;
  pointer-events: none;
  max-width: calc(100% - 32px);
}
.coming-soon-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C79A3D;
  flex-shrink: 0;
  animation: coming-soon-pulse 1.6s ease-in-out infinite;
}
@keyframes coming-soon-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@media (max-width: 480px) {
  .coming-soon-badge {
    font-size: 11.5px;
    padding: 8px 14px;
    bottom: 12px;
  }
}


/* ---- 3) MOBILE / TABLET SAFETY NET ---- */
/* Generic, page-agnostic fixes so nothing forces a horizontal
   scrollbar or breaks layout on phones/tablets, no matter what
   a specific page's own CSS does. */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Long words never force the page wider than the screen */
p, li, blockquote, h1, h2, h3, h4 {
  overflow-wrap: break-word;
}


/* ============================================================
   ESCAPE HATCH — .btn-live
   ------------------------------------------------------------
   Any button that also has the extra class "btn-live" is
   UNLOCKED — it works normally and no "Coming Soon" pill is
   shown under it. Use this to activate specific buttons one
   at a time before the site is fully launched.

   Example:
     <a href="Purpose-Assessment.html"
        class="btn-primary btn-live">
       Start Your Journey
     </a>
   ============================================================ */

.btn-live {
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important;
  filter: none !important;
  margin-bottom: initial !important;
}

.btn-live::after {
  content: none !important;
  display: none !important;
}