/*
Theme Name: Hello Elementor - Shanah City Church
Theme URI: https://shanahchur.libertymstudio.com/
Description: Child theme of Hello Elementor carrying the Shanah City Church design utilities that Elementor Free cannot express through the panel alone. Everything else is set in Elementor Site Settings and on the elements themselves.
Author: Shanah City Church
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-shanah
*/

/* ============================================================
   HOW THIS FILE WORKS

   The Shanah design lives in Elementor Site Settings (Global
   Colors + Global Fonts) and on the individual elements. This
   file only adds the handful of treatments Elementor Free has
   no panel control for, exposed as CSS classes you apply in
   Elementor under Advanced > CSS Classes.

   Every class below is documented with where it is used.
   Colours are read from the Elementor kit variables so that
   changing a Global Color in Elementor updates this file too.
   ============================================================ */

:root{
  --scc-purple:#32145F;
  --scc-purple-dark:#24103F;
  --scc-purple-deepest:#180A2B;
  --scc-purple-800:#2B1150;
  --scc-purple-mid:#4A2080;
  --scc-plum:#581D55;
  --scc-plum-dark:#3F1440;
  --scc-gold:#D5AA52;
  --scc-gold-light:#E8C979;
  --scc-gold-deep:#96702A;
  --scc-navy:#10172B;
  --scc-cream:#F8F3E9;
  --scc-ink:#24103F;
  --scc-body:#3D3A42;
  --scc-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. GLASS PANEL --------------------------------
   Used on: homepage four-pillar panel that overlaps the hero.
   Elementor Free has no backdrop-filter control.            */
.scc-glass{
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* ---------- 2. PHOTO CARD ---------------------------------
   Used on: ministry cards (home + ministries landing).
   The container carries the photo as its background; this
   adds the bottom-up purple scrim and the hover lift.       */
.scc-photocard{
  position:relative;
  overflow:hidden;
  transition:transform .45s var(--scc-ease), box-shadow .45s var(--scc-ease);
}
.scc-photocard::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to top,rgba(24,10,43,.96) 8%,rgba(50,20,95,.78) 42%,rgba(50,20,95,.2) 78%);
  transition:background .45s var(--scc-ease);
}
.scc-photocard > *{position:relative;z-index:1}
.scc-photocard:hover{transform:translateY(-10px);box-shadow:0 30px 70px rgba(24,10,43,.28)}
.scc-photocard:hover::after{
  background:linear-gradient(to top,rgba(24,10,43,.97) 8%,rgba(50,20,95,.86) 46%,rgba(88,29,85,.32) 84%);
}

/* ---------- 3. CARD LIFT ----------------------------------
   Used on: icon boxes, event rows, giving cards, steps.     */
.scc-lift{transition:transform .4s var(--scc-ease), box-shadow .4s var(--scc-ease)}
.scc-lift:hover{transform:translateY(-8px);box-shadow:0 18px 44px rgba(24,10,43,.16)}
.scc-lift-x:hover{transform:translateX(6px);box-shadow:0 18px 44px rgba(24,10,43,.14)}

/* ---------- 4. GOLD RULE ----------------------------------
   Used under every section heading. Applied to the Divider
   widget so the gradient fades at both ends.                */
.scc-rule .elementor-divider-separator{
  background:linear-gradient(90deg,transparent,var(--scc-gold),transparent)!important;
  border:0!important;height:3px!important;
}
.scc-rule-left .elementor-divider-separator{
  background:linear-gradient(90deg,var(--scc-gold),transparent)!important;
  border:0!important;height:3px!important;
}

/* ---------- 5. SCROLL REVEAL ------------------------------
   Applied by shanah.js. Degrades to visible if JS never
   runs, so content is never trapped at opacity 0.           */
.scc-reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--scc-ease),transform .8s var(--scc-ease)}
.scc-reveal.scc-in{opacity:1;transform:none}
.scc-reveal-d1{transition-delay:.09s}
.scc-reveal-d2{transition-delay:.18s}
.scc-reveal-d3{transition-delay:.27s}
.scc-reveal-d4{transition-delay:.36s}

/* ---------- 6. HERO --------------------------------------- */
.scc-hero-script{
  font-family:"Great Vibes",cursive;
  color:var(--scc-gold);
  line-height:1;
  display:block;
}
.scc-hero-title{text-shadow:0 6px 34px rgba(12,4,24,.55)}

/* ---------- 6b. TESTIMONIAL / QUOTE ----------------------- */
.scc-quote blockquote{
  margin:0;font-style:italic;position:relative;
}
.scc-avatar{
  width:48px;height:48px;min-width:48px;border-radius:50%;
  display:flex!important;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--scc-purple),var(--scc-plum));
  font-family:"Cormorant Garamond",Georgia,serif;
}
.scc-avatar .elementor-heading-title{line-height:48px}

/* Second line of the hero H1 sits smaller than the first. */
.scc-hero-l2{display:block;font-size:.72em;letter-spacing:.03em}

/* ---------- 7. EVENT DATE CHIP ---------------------------- */
.scc-datechip{
  background:linear-gradient(150deg,var(--scc-purple),var(--scc-plum));
  border-radius:10px;color:#fff;text-align:center;
}

/* ---------- 8. COUNTDOWN ----------------------------------
   Restyles the ElementsKit countdown to match the design.   */
.scc-countdown .ekit-countdown-item{
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  border:1px solid rgba(213,170,82,.34);
  border-radius:12px;padding:20px 8px;position:relative;overflow:hidden;
}
.scc-countdown .ekit-countdown-item::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--scc-gold),transparent);
}
.scc-countdown .ekit-countdown-count{
  font-family:"Cormorant Garamond",Georgia,serif!important;
  color:#fff!important;font-variant-numeric:tabular-nums;line-height:1;
}
.scc-countdown .ekit-countdown-period{
  color:var(--scc-gold-light)!important;
  font-family:Manrope,sans-serif!important;
  font-size:.64rem!important;font-weight:700!important;
  letter-spacing:.2em!important;text-transform:uppercase!important;
}

/* ---------- 8b. COUNTDOWN (self-contained) ----------------
   Markup lives in an Elementor HTML widget; the deadline is
   the data-deadline attribute on .scc-cd. Driven by shanah.js. */
.scc-cd{display:flex;flex-wrap:wrap;gap:14px}
.scc-cd-cell{
  flex:1 1 100px;min-width:0;text-align:center;padding:20px 8px;border-radius:12px;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  border:1px solid rgba(213,170,82,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  position:relative;overflow:hidden;
}
.scc-cd-cell::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--scc-gold),transparent);
}
.scc-cd-num{
  display:block;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(2rem,4vw,2.9rem);font-weight:600;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums;
}
.scc-cd-lab{
  display:block;margin-top:8px;font-family:Manrope,sans-serif;font-size:.64rem;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--scc-gold-light);
}
.scc-cd-note{
  flex:1 1 100%;margin:14px 0 0;text-align:center;font-family:Manrope,sans-serif;
  font-size:.85rem;color:var(--scc-gold-light);
}
@media (max-width:680px){
  .scc-cd-cell{flex:1 1 calc(50% - 7px);padding:16px 6px}
}

/* ---------- 9. NAVIGATION ---------------------------------
   Refinements to the ElementsKit nav menu widget.           */
.scc-nav .elementskit-navbar-nav > li > a{
  position:relative;
  transition:color .25s var(--scc-ease);
}
.scc-nav .elementskit-navbar-nav > li > a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;
  background:var(--scc-gold);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--scc-ease);
}
.scc-nav .elementskit-navbar-nav > li > a:hover::after,
.scc-nav .elementskit-navbar-nav > li.current-menu-item > a::after{transform:scaleX(1)}
.scc-nav .elementskit-submenu-panel{
  border-top:3px solid var(--scc-gold)!important;
  border-radius:12px!important;overflow:hidden;
  box-shadow:0 30px 70px rgba(24,10,43,.24)!important;
}

/* ---------- 10. BUTTONS ----------------------------------- */
.scc-btn-gold .elementor-button{
  background:linear-gradient(135deg,var(--scc-gold-light),var(--scc-gold))!important;
  box-shadow:0 12px 28px rgba(213,170,82,.34);
  transition:transform .3s var(--scc-ease),box-shadow .3s var(--scc-ease);
}
.scc-btn-gold .elementor-button:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(213,170,82,.46)}
.scc-btn-outline .elementor-button{
  background:transparent!important;border:2px solid rgba(255,255,255,.72)!important;
  color:#fff!important;transition:all .3s var(--scc-ease);
}
.scc-btn-outline .elementor-button:hover{background:#fff!important;color:var(--scc-purple-800)!important;transform:translateY(-3px)}
.scc-btn-outline-gold .elementor-button{
  background:transparent!important;border:2px solid var(--scc-gold)!important;
  color:var(--scc-gold-deep)!important;transition:all .3s var(--scc-ease);
}
.scc-btn-outline-gold .elementor-button:hover{background:var(--scc-gold)!important;color:var(--scc-purple-deepest)!important;transform:translateY(-3px)}

/* ---------- 11. VERSE BLOCK ------------------------------- */
.scc-verse{
  border-left:3px solid var(--scc-gold);
  padding:6px 0 6px 26px;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-style:italic;line-height:1.6;
}

/* ---------- 12. PLACEHOLDER FLAG --------------------------
   Marks unverified content. See PLACEHOLDERS.md.
   Remove the class once the real information is in place.   */
.scc-ph{border-bottom:1px dashed rgba(213,170,82,.75)}

/* ---------- 13. WORLD MAP WASH ---------------------------- */
.scc-mapwash::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../../uploads/2026/08/world-map.jpg) center/cover no-repeat;
  opacity:.13;mix-blend-mode:luminosity;
}
.scc-mapwash > .e-con-inner, .scc-mapwash > *{position:relative;z-index:1}

/* ---------- 14. FORMS (Fluent Forms) ---------------------- */
.scc-form .ff-el-input--label label{
  font-family:Manrope,sans-serif;font-size:.8rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--scc-purple-800);
}
.scc-form input[type=text],.scc-form input[type=email],.scc-form input[type=tel],
.scc-form select,.scc-form textarea{
  border:1.5px solid rgba(50,20,95,.16)!important;border-radius:8px!important;
  padding:14px 16px!important;font-family:Manrope,sans-serif!important;
}
.scc-form input:focus,.scc-form select:focus,.scc-form textarea:focus{
  border-color:var(--scc-gold)!important;box-shadow:0 0 0 4px rgba(213,170,82,.18)!important;outline:0!important;
}
.scc-form .ff-btn-submit{
  background:linear-gradient(135deg,var(--scc-gold-light),var(--scc-gold))!important;
  color:var(--scc-purple-deepest)!important;border:0!important;border-radius:6px!important;
  font-family:Manrope,sans-serif!important;font-weight:700!important;
  letter-spacing:.14em!important;text-transform:uppercase!important;
  padding:17px 34px!important;transition:transform .3s var(--scc-ease);
}
.scc-form .ff-btn-submit:hover{transform:translateY(-3px)}

/* ---------- 15. EVENTS CALENDAR --------------------------- */
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn{
  background-color:var(--scc-gold)!important;color:var(--scc-purple-deepest)!important;
  border-radius:6px!important;font-family:Manrope,sans-serif!important;
  font-weight:700!important;letter-spacing:.1em!important;text-transform:uppercase!important;
}
.tribe-events .tribe-events-calendar-list__event-title a{
  font-family:"Cormorant Garamond",Georgia,serif!important;color:var(--scc-ink)!important;
}
.tribe-events .tribe-events-calendar-list__event-title a:hover{color:var(--scc-purple)!important}
.tribe-events-header,.tribe-events-c-top-bar{background:transparent!important}

/* ---------- 16. ACCESSIBILITY -----------------------------
   Never remove these. Focus must stay visible.              */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--scc-gold)!important;outline-offset:3px!important;border-radius:4px;
}
.scc-skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--scc-gold);color:var(--scc-purple-deepest);
  padding:12px 20px;font-weight:700;
}
.scc-skip-link:focus{left:12px;top:12px}

/* ---------- 17. RESPONSIVE -------------------------------- */
@media (max-width:1024px){
  .scc-pillars-lift{margin-top:-100px!important}
}
@media (max-width:767px){
  .scc-pillars-lift{margin-top:-90px!important}
  .scc-photocard:hover{transform:none}
  .scc-lift:hover,.scc-lift-x:hover{transform:none}
  .scc-countdown .ekit-countdown-item{padding:16px 6px}
}

/* ---------- 18. REDUCED MOTION ----------------------------
   Required by the design. Do not remove.                    */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .scc-reveal{opacity:1!important;transform:none!important}
}

/* ---------- 19. 404 PAGE ----------------------------------
   Styles for the branded 404 template (404.php).           */
.scc-404-hero{position:relative;background-size:cover;background-position:center 40%;padding:120px 24px;text-align:center;overflow:hidden}.scc-404-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(24,10,43,.95),rgba(50,20,95,.9) 55%,rgba(88,29,85,.9))}.scc-404-inner{position:relative;z-index:2;max-width:680px;margin:0 auto}.scc-404-kicker{font-family:Manrope,sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--scc-gold);margin:0 0 14px}.scc-404-title{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(2.4rem,6vw,4rem);font-weight:600;color:#fff;line-height:1.05;margin:0 0 18px}.scc-404-text{font-family:Manrope,sans-serif;font-size:1.05rem;line-height:1.75;color:rgba(255,255,255,.86);margin:0 auto 32px;max-width:560px}.scc-404-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:36px}.scc-404-btn{display:inline-flex;align-items:center;justify-content:center;font-family:Manrope,sans-serif;font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:17px 34px;border-radius:6px;border:2px solid transparent;text-decoration:none;transition:transform .3s var(--scc-ease),box-shadow .3s var(--scc-ease),background .3s,color .3s}.scc-404-btn--gold{background:linear-gradient(135deg,var(--scc-gold-light),var(--scc-gold));color:var(--scc-purple-deepest);box-shadow:0 12px 28px rgba(213,170,82,.34)}.scc-404-btn--gold:hover{transform:translateY(-3px);color:var(--scc-purple-deepest)}.scc-404-btn--ghost{border-color:rgba(255,255,255,.72);color:#fff}.scc-404-btn--ghost:hover{background:#fff;color:var(--scc-purple-800);transform:translateY(-3px)}.scc-404-links{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;margin-bottom:34px}.scc-404-links a{font-family:Manrope,sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--scc-gold-light);text-decoration:none}.scc-404-links a:hover{color:#fff}.scc-404-search{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:460px;margin:0 auto}.scc-404-srlabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.scc-404-search input{flex:1 1 240px;min-width:0;padding:14px 16px;border-radius:8px;border:1.5px solid rgba(213,170,82,.34);background:rgba(255,255,255,.1);color:#fff;font-family:Manrope,sans-serif}.scc-404-search input::placeholder{color:rgba(255,255,255,.55)}.scc-404-search button{padding:14px 26px;border:0;border-radius:6px;background:var(--scc-gold);color:var(--scc-purple-deepest);font-family:Manrope,sans-serif;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;cursor:pointer}@media (max-width:680px){.scc-404-hero{padding:80px 20px}.scc-404-btn{flex:1 1 100%}}

/* ---------- 20. CORMORANT OPTICAL CORRECTION --------------
   Cormorant Garamond renders optically smaller and lighter than
   the font it replaced, so display type gets a small size and
   weight nudge to keep the intended presence.               */
.scc-hero-title .elementor-heading-title,.scc-hero-title{letter-spacing:.01em}h1,h2,h3,.elementor-heading-title{font-feature-settings:"liga" 1,"kern" 1;}.scc-cd-num{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600}.scc-avatar,.scc-leaderphoto{font-family:"Cormorant Garamond",Georgia,serif}