/* ============================================================================
   COMPONENTS — custom, non-utility styles (decorative backgrounds, the CTA
   gradient, animations, the FAQ accordion, the modal transitions, toasts).
   These are plain CSS (no Tailwind classes) so they work independently of the
   compiled main.css. Loaded after main.css.
   ========================================================================== */

/* Decorative grid background (sections) */
.grid-bg {
  background-color: #f3ebe1;
  background-image:
    linear-gradient(rgba(30, 61, 82, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 61, 82, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.hero-grid::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(30, 61, 82, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 61, 82, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at top, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at top, #000 30%, transparent 75%);
}

/* Gold/terra underline under section headings */
.title-rule::after {
  content: ''; display: block; width: 56px; height: 3px; margin: 18px auto 0;
  border-radius: 3px; opacity: .9;
  background: linear-gradient(90deg, #9a7d26, #b8952f, #c45c3e);
}

/* Button theme — every value is a CSS variable so the admin (Settings →
   Branding) can restyle every button without code. Defaults reproduce the
   original look exactly; js/app.js overrides them from the CMS theme. */
:root {
  --btn-bg: linear-gradient(165deg, #d66f4f 0%, #c45c3e 45%, #a34a31 100%);
  --btn-bg-hover: linear-gradient(165deg, #e07d5c 0%, #a34a31 100%);
  --btn-text: #ffffff;
  --btn-text-hover: #ffffff;
  --btn-radius: 0.75rem;               /* matches the rounded-xl utility */
  --btn-shadow: 0 8px 24px rgba(196, 92, 62, 0.35);
  --btn-shadow-hover: 0 12px 32px rgba(196, 92, 62, 0.42);
  --btn-border: transparent;
  --btn-border-hover: transparent;
  --btn2-bg: #ffffff;                  /* secondary (payment-method tiles) */
  --btn2-text: #1e3d52;
}

/* Primary call-to-action button (hero, header, sticky bar, modal, CTAs) */
.btn-cta {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: var(--btn-radius);
  border: 1px solid var(--btn-border);
  box-shadow: var(--btn-shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn-cta:hover {
  transform: translateY(-2px); box-shadow: var(--btn-shadow-hover);
  background: var(--btn-bg-hover);
  color: var(--btn-text-hover);
  border-color: var(--btn-border-hover);
}
.btn-cta:active { transform: translateY(0); }

/* Secondary buttons (payment-method tiles in the registration modal) */
.pay-method { background: var(--btn2-bg); color: var(--btn2-text); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Live "pulse" ring (live dot + success check) */
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 70% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.pulse-dot { animation: pulse-ring 1.4s ease-in-out infinite; }

/* Continuous announcement marquee — two identical groups, shift one group width (-50%) for a seamless loop */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; will-change: transform; animation: marquee 30s linear infinite; }
.marquee-group { display: inline-flex; align-items: center; flex-shrink: 0; }

/* Premium FAQ accordion — animate grid-template-rows 0fr->1fr to true content height */
.faq-item { transition: border-color .3s ease, box-shadow .35s ease, background-color .3s ease; }
.faq-item.open { border-color: rgba(15, 118, 110, .5); box-shadow: 0 12px 32px rgba(15, 36, 51, .09); }
.faq-ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-ans { grid-template-rows: 1fr; }
.faq-clip { overflow: hidden; min-height: 0; }
.faq-inner { opacity: 0; transform: translateY(6px); transition: opacity .28s ease-out, transform .4s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-inner { opacity: 1; transform: none; transition-delay: .07s; }
.faq-chev { transition: transform .4s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-chev { transform: rotate(180deg); }

/* Hidden scrollbar (testimonial rail) */
.no-bar::-webkit-scrollbar { display: none; }
.no-bar { -ms-overflow-style: none; scrollbar-width: none; }

/* Registration modal */
#regModal { transition: opacity .3s var(--ease); }
#regModal .modal-card { transition: transform .35s var(--ease), opacity .35s var(--ease); }
#regModal.hidden-modal { opacity: 0; pointer-events: none; }
#regModal.hidden-modal .modal-card { transform: translateY(24px) scale(.98); opacity: 0; }

/* Thank-you page entrance */
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.pop { animation: pop .5s cubic-bezier(.22,1,.36,1) both; }

/* ----------------------------------------------------------------- TOASTS */
.toast-host {
  position: fixed; z-index: 400; right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(360px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  border-radius: 12px; padding: 12px 14px;
  font-family: "DM Sans", sans-serif; font-size: 14px; line-height: 1.4; font-weight: 500;
  color: #171412; background: #fff; border: 1px solid #ddd2c4;
  box-shadow: 0 16px 48px rgba(15, 36, 51, 0.18);
  opacity: 0; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.in { opacity: 1; transform: none; }
.toast-msg { flex: 1; min-width: 0; }
.toast-x { flex-shrink: 0; border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: #7a7268; padding: 0 2px; }
.toast-x:hover { color: #171412; }
.toast-error   { border-color: rgba(196, 92, 62, .45); border-left: 4px solid #c45c3e; }
.toast-success { border-color: rgba(15, 118, 110, .45); border-left: 4px solid #0f766e; }
.toast-info    { border-color: rgba(30, 61, 82, .35); border-left: 4px solid #1e3d52; }