/* =========================================================================
   FKG UNAIR E-Conference — Redesign Stylesheet
   Inspired by the Indonesia Dental Exhibition & Conference (IDEC) look:
   confident navy/blue + teal, bold headlines, card-based content.

   This file is purely additive. It does not modify theme.css,
   theme-elements.css, demo-renewable-energy.css or skin-renewable-energy.css.
   Every class below is uniquely named (ecf- prefix) except for a handful
   of small utility classes already referenced by the sections you kept
   (trust strip / about-workshop search / news), which are defined here
   so those sections keep looking the way you liked.
   ========================================================================= */

/* HEADER — fixed top-bar height so the sticky-header JS (stickySetTop)
   always slides the right amount and never leaves it "half closed". */
#ecfHeaderTopBar{
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

:root{
  --ecf-navy: #0B2340;
  --ecf-blue: #0B5FA5;
  --ecf-teal: #159C8C;
  --ecf-green: #2E9E4F;
  --ecf-coral: #FF6B4A;
  --ecf-gold: #F2B84B;
  --ecf-bg-soft: #F3F8F5;
  --ecf-ink: #1C2B22;
  /* Deep navy easing through blue and teal into FKG UNAIR's signature green */
  --ecf-gradient-1: linear-gradient(135deg, var(--ecf-navy) 0%, var(--ecf-blue) 42%, var(--ecf-teal) 72%, var(--ecf-green) 100%);
  --ecf-gradient-2: linear-gradient(120deg, var(--ecf-blue) 0%, var(--ecf-teal) 55%, var(--ecf-green) 100%);
  --ecf-shadow: 0 20px 45px -20px rgba(11,35,64,0.35);
}

/* -------------------------------------------------------------------------
   Small shared utilities (used by kept sections too)
   ------------------------------------------------------------------------- */
.rounded-xl{ border-radius: 18px; overflow: hidden; }
.shadow-soft{ box-shadow: var(--ecf-shadow); }
.section-eyebrow{
  display:inline-block; letter-spacing:2px; font-size:0.8rem !important;
  color: var(--ecf-green) !important;
}
.bg-gradient-brand-1{ background: var(--ecf-gradient-1) !important; }
.bg-gradient-brand-2{ background: var(--ecf-gradient-2) !important; }
.overlay-brand-gradient::before{ background: var(--ecf-gradient-1); opacity:0.82; }

/* Trust strip (kept section — classes it needs) */
.trust-item{ display:flex; align-items:center; gap:14px; }
.trust-icon{
  flex: 0 0 auto; width:48px; height:48px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: var(--ecf-bg-soft); color: var(--ecf-green); font-size:1.2rem;
}
.trust-item h5{ margin:0 0 2px; font-size:0.95rem; font-weight:700; color:var(--ecf-ink); }
.trust-item p{ margin:0; font-size:0.78rem; color:#7a8595; }

/* News thumbnails (kept section) */
.news-thumb-wrap{ display:block; aspect-ratio: 4/3; }
.news-thumb-wrap img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================================
   HERO
   ========================================================================= */
.ecf-hero{
  position:relative; background: var(--ecf-gradient-1); overflow:hidden;
  padding: 150px 0 90px;
}
.ecf-hero__bg{
  position:absolute; inset:0; background-repeat:no-repeat; background-position:right center;
  background-size:cover; opacity:0.5; mix-blend-mode:soft-light;
}
.ecf-hero__eyebrow{
  display:inline-flex; align-items:center; color:#DCEBFF; font-weight:600;
  font-size:0.85rem; letter-spacing:0.5px; background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.25); padding:8px 18px; border-radius:40px;
}
.ecf-hero__title{
  color:#fff; font-weight:800; font-size:3.4rem; line-height:1.05; margin:22px 0 20px;
}
.ecf-hero__title span{ color: var(--ecf-gold); }
.ecf-hero__subtitle{ color:#CBD9EA; font-size:1.05rem; max-width:520px; margin-bottom:34px; }
.ecf-hero__actions{ display:flex; gap:16px; flex-wrap:wrap; }
.ecf-btn{
  border-radius:40px; padding:14px 30px; font-weight:700; font-size:0.85rem;
  letter-spacing:0.5px; text-transform:uppercase; border:2px solid transparent;
  transition: all .2s ease;
}
.ecf-btn--primary{ background: var(--ecf-coral); color:#fff; }
.ecf-btn--primary:hover{ background:#ff5733; color:#fff; transform: translateY(-2px); }
.ecf-btn--ghost{ border-color:rgba(255,255,255,0.6); color:#fff; }
.ecf-btn--ghost:hover{ background:#fff; color: var(--ecf-navy); }

.ecf-hero__card{
  background:#fff; border-radius:18px; padding:28px; box-shadow: var(--ecf-shadow);
}
.ecf-hero__card-tag{
  display:inline-block; background: var(--ecf-green); color:#fff; font-size:0.7rem;
  font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:5px 12px;
  border-radius:30px; margin-bottom:14px;
}
.ecf-hero__card h5{ font-weight:700; color:var(--ecf-ink); margin-bottom:10px; }
.ecf-hero__card p{ color:#7a8595; font-size:0.9rem; margin-bottom:16px; }
.ecf-hero__card-link{ color: var(--ecf-blue); font-weight:700; font-size:0.85rem; text-decoration:none; }
.ecf-hero__card-link:hover{ color: var(--ecf-coral); }

/* =========================================================================
   EVENTS
   ========================================================================= */
.ecf-events-head h4{ color: var(--ecf-green) !important; }
.ecf-event-card{
  background:#fff; border-radius:18px; box-shadow: var(--ecf-shadow); overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease; height:100%;
}
.ecf-event-card:hover{ transform: translateY(-6px); }
.ecf-event-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.ecf-event-card__media img{ width:100%; height:100%; object-fit:cover; }
.ecf-event-card__tag{
  position:absolute; top:14px; left:14px; background: var(--ecf-coral); color:#fff;
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
  padding:5px 12px; border-radius:30px;
}
.ecf-event-card__body{ padding:22px 22px 24px; }
.ecf-event-card__date{ color: var(--ecf-teal); font-size:0.8rem; font-weight:700; margin-bottom:8px; }
.ecf-event-card__title{ font-weight:700; color:var(--ecf-ink); margin-bottom:14px; min-height:52px; }
.ecf-event-card__link{
  color: var(--ecf-blue); font-weight:700; font-size:0.82rem; text-transform:uppercase;
  text-decoration:none; letter-spacing:0.5px;
}
.ecf-event-card__link:hover{ color: var(--ecf-coral); }
.ecf-event-card__empty{ text-align:center; padding:50px 20px; color:#7a8595; }

/* =========================================================================
   CTA BANNER (Join the Community)
   ========================================================================= */
.ecf-cta-banner{
  background: var(--ecf-gradient-2); position:relative; overflow:hidden;
}
.ecf-cta-banner::before{
  content:""; position:absolute; width:520px; height:520px; border-radius:50%;
  background:rgba(255,255,255,0.08); top:-220px; right:-140px;
}
.ecf-cta-banner h2{ color:#fff; font-weight:800; font-size:2.4rem; line-height:1.15; }
.ecf-cta-banner p{ color:#E4F7F5; }

/* =========================================================================
   FEATURE CARDS
   ========================================================================= */
.ecf-feature-card{
  background:#fff; border-radius:18px; box-shadow: var(--ecf-shadow); padding:36px 30px;
  height:100%; transition: transform .25s ease;
}
.ecf-feature-card:hover{ transform: translateY(-6px); }
.ecf-feature-card__icon{
  width:70px; height:70px; border-radius:20px; background: var(--ecf-bg-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.ecf-feature-card__icon img{ width:34px; height:34px; }
.ecf-feature-card__icon .svg-stroke-color-primary path{ stroke: var(--ecf-green) !important; }
.ecf-feature-card h4{ font-weight:700; color:var(--ecf-ink); }
.ecf-feature-card a{ color: var(--ecf-blue); font-weight:700; font-size:0.8rem; text-decoration:none; text-transform:uppercase; }
.ecf-feature-card a:hover{ color: var(--ecf-coral); }

/* =========================================================================
   SHOWCASE (replaces the old split parallax photo blocks)
   ========================================================================= */
.ecf-showcase{ background: var(--ecf-bg-soft); padding: 90px 0; }
.ecf-showcase__panel{
  background: var(--ecf-gradient-1); border-radius:24px; padding:50px 44px; color:#fff;
  height:100%;
}
.ecf-showcase__panel h3{ font-weight:800; font-size:2rem; margin-bottom:16px; }
.ecf-showcase__panel p{ color:#CBD9EA; margin-bottom:0; }
.ecf-showcase__stats{ display:flex; gap:36px; margin-top:34px; flex-wrap:wrap; }
.ecf-showcase__stats strong{ display:block; font-size:2rem; font-weight:800; color: var(--ecf-gold); }
.ecf-showcase__stats span{ font-size:0.8rem; color:#CBD9EA; }
.ecf-showcase__list{ background:#fff; border-radius:24px; padding:50px 44px; box-shadow: var(--ecf-shadow); height:100%; }
.ecf-showcase__list h3{ font-weight:700; color:var(--ecf-ink); margin-bottom:24px; }
.ecf-showcase__list ul{ list-style:none; padding:0; margin:0; }
.ecf-showcase__list li{ display:flex; gap:14px; align-items:flex-start; padding:12px 0; border-bottom:1px solid #EEF1F4; color:var(--ecf-ink); }
.ecf-showcase__list li:last-child{ border-bottom:none; }
.ecf-showcase__list li i{ color: var(--ecf-teal); margin-top:4px; }

/* =========================================================================
   FAQ
   ========================================================================= */
.ecf-faq .card{ border:none !important; border-radius:14px !important; margin-bottom:14px; box-shadow: 0 6px 18px -12px rgba(11,35,64,0.25); overflow:hidden; }
.ecf-faq .card-header{ background:#fff !important; border:none !important; padding:0; }
.ecf-faq .accordion-toggle{ display:block; padding:18px 22px; color:var(--ecf-ink) !important; }
.ecf-faq .accordion-toggle::after{
  content:"+"; float:right; color: var(--ecf-teal); font-weight:700; font-size:1.2rem;
}
.ecf-faq .accordion-toggle[aria-expanded="true"]::after{ content:"\2212"; }
.ecf-faq .card-body{ padding:0 22px 22px; color:#5a6472; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.ecf-contact{ background: var(--ecf-gradient-1); position:relative; overflow:hidden; }
.ecf-contact h2, .ecf-contact h3{ color:#fff; }
.ecf-contact .ecf-contact__list{ list-style:none; padding:0; margin:20px 0 30px; }
.ecf-contact .ecf-contact__list li{ color:#DCEBFF; padding:8px 0; }
.ecf-contact .ecf-contact__list li i{ color: var(--ecf-gold); margin-right:10px; }
.ecf-contact .card{ border:none !important; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.ecf-footer{ background: var(--ecf-navy) !important; }
.ecf-footer h3{ color:#fff !important; }
.ecf-footer a{ color:#AFC2D8 !important; }
.ecf-footer a:hover{ color: var(--ecf-green) !important; }
.ecf-footer-credit{ color:#7C90A8; font-size:0.82rem; }

@media (max-width: 991px){
  .ecf-hero__title{ font-size:2.4rem; }
  .ecf-hero{ padding:120px 0 70px; text-align:center; }
  .ecf-hero__actions{ justify-content:center; }
  .ecf-showcase__panel, .ecf-showcase__list{ margin-bottom:24px; }
}