/* UGC Ghana - Self-hosted fonts - paste at TOP of /style.css */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/montserrat-v31-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/montserrat-v31-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Quantico';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/quantico-v19-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Quantico';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/quantico-v19-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jost-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jost-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/jost-v20-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/bodoni-moda-v28-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/bodoni-moda-v28-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Oleo Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/oleo-script-v15-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Oleo Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/oleo-script-v15-latin-700.woff2') format('woff2');
}
/* tangerine-regular - latin */
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/tangerine-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* tangerine-700 - latin */
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/tangerine-v18-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}     
      
      * { -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }
        body { font-family: 'Montserrat', sans-serif; top: 0px !important;}
        html {
        scroll-behavior: smooth;}
        .font-display { font-family: 'Bodoni Moda', serif; }

        

        .progress-glow { box-shadow: 0 0 12px rgba(250,204,21,0.8), 0 0 24px rgba(220,38,0.4); }

        
       /* Kempinski menu uses fixed positioning - no height hack */
        
        /* Mobile Links Text Colors - Light & Dark Mode */
        .mobile-link {
            display: block;
            padding: 0.875rem 1rem;
            border-radius: 0.75rem;
            font-weight: 500;
            transition: all 0.2s;
            color: #1f2937; /* light mode */
        }
        .dark .mobile-link {
            color: #e5e7eb; /* dark mode */
        }
        .mobile-link:hover {
            background-color: rgba(220, 38, 0.08);
            color: #fff;
        }
        .dark .mobile-link:hover {
            background-color: rgba(212, 160, 23, 0.15);
            color: #FCD116;
        }
        
        /* Mobile Font Fixes */
        @media (max-width: 640px) {
            html { font-size: 14px; }
            .hero-title { font-size: 2.5rem !important; line-height: 1.1 !important; }
            h1 { font-size: 2rem; }
            h2 { font-size: 1.75rem; }
            .text-5xl { font-size: 2.25rem; }
            .text-6xl { font-size: 2.5rem; }
            #slider1_container {  margin-top: 50px !important;}
        }
        
        .glass {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.text-balance {
  text-wrap: balance;
}
        
        /* Leadership Tabs */
        .tab-btn.active { background: #dc2626; color: white; }
        .dark .tab-btn.active { background: #d4a017; color: #111827; }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; }
        .dark ::-webkit-scrollbar-track { background: #1f2937; }
        ::-webkit-scrollbar-thumb { background: #dc2626; border-radius: 4px; }

@keyframes ugc-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-33.33%); }
}
#ugcWatermark {
  opacity: 1;
  transition: opacity 0.6s ease;
}
/* optional subtle scroll fade - much gentler */
#ugcWatermark.scrolled {
  opacity: 0.7;
}

.quote {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 900;
  font-style: normal; /* not italic */
  font-size: 120px;
  line-height: 1;
  letter-spacing: -0.05em;
  content: "”";
}

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}


/* Force header clearance - your header is ~92px tall */
main {
  padding-top: 110px!important;
}
@media (min-width: 640px) {
  main { padding-top: 128px!important; }
}
@media (min-width: 1024px) {
  main { padding-top: 144px!important; }
}

/* LIGHTBOX CLOSE - bigger and visible */
#lightbox .lb-close {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 48px;
  height: 48px;
  font-size: 36px;
  line-height: 48px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: 0;
  cursor: pointer;
  z-index: 50;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
  border-radius: 0!important; /* keep sharp corners */
}

#lightbox .lb-close:hover {
  background: #CE1126;
  transform: scale(1.05);
}

/* GALLERY TABS */
.tab-btn {
  position: relative;
  color: #374151; /* neutral-700 light */
  transition: color 0.2s ease;
  border-radius: 0!important;
}

.dark .tab-btn {
  color: #9ca3af; /* neutral-400 dark */
}

/* Hover state */
.tab-btn:hover {
  color: #CE1126;
}
.dark .tab-btn:hover {
  color: #FCD116;
}



.tab-btn:hover::after {
  transform: scaleX(1);
  background: rgba(206, 17, 38, 0.5);
}
.dark .tab-btn:hover::after {
  background: rgba(252, 209, 22, 0.5);
}

/* ACTIVE TAB */
.tab-btn.tab-active {
  color: #CE1126!important;
  font-weight: 600;
}
.dark .tab-btn.tab-active {
  color: #FCD116!important;
}

.tab-btn.tab-active::after {
  transform: scaleX(1);
  background: #CE1126;
  height: 3px;
}
.dark .tab-btn.tab-active::after {
  background: #FCD116;
}

/* Dark mode hover = yellow */
.dark #lightbox .lb-close:hover {
  background: #FCD116;
  color: #000;
}

/* Make sure lightbox nav buttons match */
#lightbox .lb-nav {
  width: 48px;
  height: 48px;
  font-size: 28px;
  background: rgba(0,0,0,0.6);
  color: #fff;
}
#lightbox .lb-nav:hover {
  background: #CE1126;
}
.dark #lightbox .lb-nav:hover {
  background: #FCD116;
  color: #000;
}


/* === UGC COOKIEYES - FINAL FIX === */
/* 1. Force full-width bottom banner on ALL screens */
.cky-consent-container,
.cky-consent-container .cky-consent-bar {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important; /* no rounded corners */
  border: none !important;
  border-top: 4px solid #CE1126 !important; /* UGC red top line */
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1) !important;
}

/* 2. Remove ALL blue - UGC colors only */
.cky-btn-accept {
  background:  #CE1126 !important; /* UGC red */
  border: 2px solid #CE1126 !important;
  color: #1a1a1a !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cky-btn-reject {
  background: #d4a017 !important; /* UGC gold */
  border: 2px solid #d4a017 !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  text-transform: uppercase;
}

.cky-btn-customize {
  background: transparent !important;
  border: 2px solid #333 !important;
  color: #333 !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
}

/* 3. Kill blue links and hover states */
.cky-consent-bar a,
.cky-consent-bar a:hover,
.cky-policy,
.cky-show-more {
  color: #CE1126 !important;
}
.cky-btn-accept:hover { background: #b89414 !important; }
.cky-btn-reject:hover { background: #a80e1f !important; }

/* 4. Fix the "Customize" popup too (your 2nd screenshot) */
.cky-modal,
.cky-preference-center {
  border-radius: 0 !important;
}
.cky-modal .cky-btn-accept,
.cky-modal .cky-btn-reject,
.cky-modal .cky-btn-preferences {
  background: #d4a017 !important;
  border-color: #d4a017 !important;
  color: #1a1a1a !important;
  border-radius: 0 !important;
}
.cky-modal .cky-btn-reject { background: #CE1126 !important; border-color: #CE1126 !important; color: #fff !important; }

/* 5. Remove blue scrollbar and borders in popup */
.cky-modal .cky-scrollbar::-webkit-scrollbar-thumb { background: #d4a017 !important; }

/**cookie widget**/
/* === STYLE THE SMALL REVISIT WIDGET (after consent) === */
.cky-revisit-container {
  left: 20px !important;
  bottom: 20px !important;
  right: auto !important;
}

.cky-btn-revisit,
.cky-btn-revisit:hover {
  background: #d4a017 !important; /* UGC gold */
  border: 2px solid #fff !important;
  border-radius: 50% !important; /* square - no round */
  width: 48px !important;
  height: 48px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  padding: 0 !important;
}

/* Change the icon color inside */
.cky-btn-revisit svg,
.cky-btn-revisit img {
  filter: brightness(0) invert(1) !important; /* makes icon white */
  width: 24px !important;
  height: 24px !important;
}

/* Optional: make it red on hover */
.cky-btn-revisit:hover {
  background: #CE1126 !important;
  transform: scale(1.05);
}

/* Hide the "Powered by" text on the small widget */
.cky-revisit-container .cky-revisit-text {
  display: none !important;
}

/* Style Google Translate to look like your screenshot */
#google_translate_element .goog-te-gadget-simple {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0 !important; /* square like your site */
  padding: 6px 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
}

#google_translate_element .goog-te-gadget-simple span {
  color: #1a1a1a !important;
}

/* Hide Google logo and "powered by" */
.goog-logo-link, .goog-te-gadget span { display: none !important; }
.goog-te-gadget { font-size: 0 !important; }

/* Dark mode */
.dark #google_translate_element .goog-te-gadget-simple {
  background: #1f2937 !important;
  border-color: #374151 !important;
}
.dark #google_translate_element .goog-te-gadget-simple span {
  color: #fff !important;
}

/**custom bible widget**/
#ugc-bible-float{position:fixed; bottom: 70px; left: 10px;z-index:1000}
#ugc-bible-btn{
  width:52px;   /* was 46px — added 6px */
  height:52px;  /* was 46px — added 6px */
  border-radius:50%;
  background:#ffffff url('assets/img/ugc-bible-icon-256.png') center/78% no-repeat;
  border:1.5px solid rgba(196,30,58,0.25);
  box-shadow:0 3px 10px rgba(0,0,0,0.15);
  cursor:pointer;
  opacity:0.88;
  transition:all 0.2s ease;
}
#ugc-bible-btn:hover{
  opacity:1;
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 5px 14px rgba(0,0,0,0.2);
}




#ugc-bible-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
#ugc-bible-modal[hidden]{display:none}
.ugc-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ugc-modal{position:relative;background:#fff;width:100%;max-width:520px;border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.2);padding:32px;max-height:90vh;overflow-y:auto;font-family:system-ui,-apple-system,Segoe UI,sans-serif}
.ugc-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:28px;color:#94a3b8;cursor:pointer;line-height:1}
.ugc-modal-header h2{font-family:Georgia,serif;font-size:26px;margin:0 0 4px;color:#0F172A}
.ugc-modal-header p{margin:0 0 20px;color:#64748b;font-size:14px}

#ugc-bible-form{display:flex;gap:8px;margin-bottom:16px}
#ugc-verse-input{flex:1;padding:12px 16px;border:2px solid #e2e8f0;border-radius:8px;font-size:16px;font-family:Georgia,serif}
#ugc-verse-input:focus{outline:none;border-color:#C41E3A}
#ugc-bible-form button{background:#C41E3A;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-weight:600;cursor:pointer}
#ugc-bible-form button:hover{background:#a51730}

.ugc-quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.ugc-quick button{background:#fff;color:#C41E3A;border:1px solid #fecdd3;padding:6px 12px;border-radius:20px;font-size:13px;cursor:pointer}
.ugc-quick button:hover{background:#fff1f2}

#ugc-loading{text-align:center;color:#64748b;padding:20px}
#ugc-result{border-top:1px solid #f1f5f9;padding-top:20px}
.ugc-ref{font-family:Georgia,serif;font-size:14px;color:#C41E3A;font-weight:600;margin-bottom:8px}
.ugc-text{font-family:Georgia,serif;font-size:20px;line-height:1.6;color:#0F172A;font-style:italic;margin-bottom:16px}
.ugc-actions{display:flex;gap:12px}
.ugc-actions a{font-size:13px;color:#475569;text-decoration:none;padding:6px 12px;background:#f8fafc;border-radius:6px}
.ugc-actions a:hover{background:#f1f5f9}

/* Bible widget - fix input text color */
#ugc-verse-input{
  color:#0F172A !important;          /* dark slate text */
  background:#fff !important;
  caret-color:#C41E3A;
}
#ugc-verse-input::placeholder{
  color:#94a3b8;
  opacity:1;
}

/* Stop Google Translate from pushing the page down */
html.translated-ltr body,
html.translated-rtl body {
  top: 0!important;
}

/* Hide the injected banner completely */
.goog-te-banner-frame.skiptranslate,
body >.skiptranslate {
  display: none!important;
  visibility: hidden!important;
}

/* Make sure your header stays on top */
header, nav {
  z-index: 9999!important;
}

/* --- Fix Google Translate breaking the events list --- */
html.translated-ltr,
html.translated-rtl {
  overflow-x: hidden;
}

/* target the national events rows */
#national-events .event-row,
.event-list .event-row {
  display: grid !important;
  grid-template-columns: 1fr; /* stack on mobile */
  gap: 0.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgb(229 231 235 / 0.6);
}

@media (min-width: 640px) {
  #national-events .event-row,
  .event-list .event-row {
    grid-template-columns: 1fr auto; /* side-by-side on desktop */
    align-items: start;
  }
}

/* let translated Twi wrap instead of pushing */
#national-events .event-row > *,
.event-list .event-row > * {
  min-width: 0;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Google's <font> tags inherit the wrap */
font, .goog-text-highlight {
  background: transparent !important;
  box-shadow: none !important;
  max-width: 100% !important;
  white-space: normal !important;
}

/* === UGC Bible Modal - Pastor image (ADDED) === */
/* === UGC Bible Modal - Pastor image (FIXED SCROLL) === */
#ugc-bible-modal .ugc-modal {
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 15px !important;
}

#ugc-bible-modal .ugc-modal-header {
  position: relative;
  padding-top: 8px;
  padding-right: 120px;
  padding-bottom: 16px;
  min-height: 70px;
  overflow: visible;         /* only header can overflow */
}

#ugc-bible-modal .ugc-pastor {
  position: absolute;
  top: -6px;
  right: 16px;
  width: 100px;
  height: auto;
  z-index: 10;               /* above everything */
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.18));
  margin: 4px;
}

.dark #ugc-bible-modal .ugc-pastor {
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35)) brightness(1.06);
}

@media (max-width: 640px) {
  #ugc-bible-modal .ugc-modal { max-height: 88vh; }
  #ugc-bible-modal .ugc-modal-header { padding-right: 100px; min-height: 60px; }
  #ugc-bible-modal .ugc-pastor { width: 85px; top: -2px; right: 12px; }
}

@media (max-width: 480px) {
  #ugc-bible-modal .ugc-modal-header { padding-right: 88px; }
  #ugc-bible-modal .ugc-pastor { width: 76px; top: 0px; right: 10px; }
}

@keyframes ugc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
#ugc-bible-modal .ugc-pastor { animation: ugc-float 5s ease-in-out infinite; }


/* === UGC Banner - full image visible === */
.ugc-banner {
  padding: 48px 20px; /* space around */
  background: transparent;
}

.ugc-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  /* soft card feel to match UGC style */
  background: #fff;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.dark .ugc-banner-inner {
  background: #1f2937; /* dark mode */
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.ugc-banner-img {
  display: block;
  width: 100%;
  height: auto;           /* <-- keeps full image, no crop */
  max-height: 70vh;        /* never taller than screen */
  object-fit: contain;    /* show entire image */
  object-position: center;
  border-radius: 12px;
  margin: 0 auto;
}





/* Tablet */
@media (max-width: 1024px) {
  .ugc-banner { padding: 40px 16px; }
  .ugc-banner-inner { padding: 10px; border-radius: 14px; }

}

/* Mobile */
@media (max-width: 640px) {
  .ugc-banner { padding: 32px 14px; }
  .ugc-banner-inner { padding: 8px; border-radius: 12px; }
  .ugc-banner-img { border-radius: 8px; }

}