/* =========================================================
   ZIAA THEME OVERRIDE
   Re-skins the Hopewell base template for the Zimbabwe
   Institute of Auctioneers & Appraisers (ZIAA).
   Load this AFTER assets/style.css
   ========================================================= */
:root {
  --clr-primary: #123B5E;        /* deep institutional navy */
  --clr-primary-dark: #0A2440;
  --clr-primary-light: #E7EEF5;
  --clr-secondary: #C9972B;      /* auction gavel gold */
  --clr-secondary-light: #FBF1DC;
  --clr-accent: #9A2B2B;         /* muted maroon for alerts */
  --clr-bg: #F7F8FA;
  --clr-surface: #ffffff;
  --clr-text: #101828;
  --clr-text-muted: #5b6472;
  --shadow-lift: 0 20px 45px -12px rgba(18, 59, 94, 0.35);
  --font-display: "Poppins", sans-serif;
  --font-body: "Nunito Sans", sans-serif;
}

/* Logo mark */
.hw-logo-mark {
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-dark)) !important;
}
.hw-logo .dot { color: var(--clr-secondary) !important; }

/* Buttons already inherit --clr-primary/--clr-secondary via base stylesheet,
   but a few components hardcode rgba(22,163,74,*) (the old green) -- patch those. */
.cause-progress-fill,
.why-ic,
.hiw-num,
.stat-item .stat-num {
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-secondary)) !important;
}

.testi-section,
.cta-banner {
  background: linear-gradient(135deg, var(--clr-primary-dark), var(--clr-primary)) !important;
}

.footer-hw { background: var(--clr-primary-dark) !important; }
.footer-hw svg path { fill: var(--clr-primary-dark) !important; }

.btn-hw-primary {
  background: var(--clr-primary) !important;
  border-color: var(--clr-primary) !important;
}
.btn-hw-primary:hover {
  background: var(--clr-primary-dark) !important;
}
.btn-cta {
  background: var(--clr-secondary) !important;
  color: var(--clr-primary-dark) !important;
}

.cause-tag { background: var(--clr-secondary) !important; color: #241a05 !important; }

/* Top utility bar for portal login CTA */
.ziaa-utility-bar {
  background: var(--clr-primary-dark);
  color: #cfe0f0;
  font-size: .82rem;
  padding: 6px 0;
}
.ziaa-utility-bar a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.ziaa-utility-bar a:hover { color: var(--clr-secondary); }
.ziaa-utility-bar .sep { opacity:.4; margin: 0 10px; }

/* Portal CTA button in navbar */
.btn-portal {
  background: var(--clr-secondary);
  color: #241a05;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-weight: 700;
  font-size: .88rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-portal:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(201,151,43,.55); color:#241a05; }

/* Simple page header for inner pages (about/courses/membership/contact) */
.page-hero {
  background: linear-gradient(135deg, var(--clr-primary-dark), var(--clr-primary));
  padding: 150px 0 70px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 85% 20%, rgba(201,151,43,.25), transparent 55%);
}
.page-hero h1 { font-family: var(--font-display); font-weight:800; position:relative; z-index:1; }
.page-hero .breadcrumb-ziaa { position:relative; z-index:1; opacity:.85; font-size:.9rem; }
.page-hero .breadcrumb-ziaa a{ color:#fff; }

/* Membership tier card accents */
.tier-card {
  background: var(--clr-surface);
  border-radius: var(--radius);
  padding: 34px 28px;
  box-shadow: var(--shadow-soft);
  height: 100%;
  border: 2px solid transparent;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.tier-card:hover { transform: translateY(-6px); border-color: var(--clr-secondary); }
.tier-card.featured { border-color: var(--clr-secondary); background: linear-gradient(180deg,#fff, var(--clr-secondary-light)); }
.tier-card h4 { font-family: var(--font-display); font-weight:800; }
.tier-card .tier-icon {
  width:56px; height:56px; border-radius:16px;
  background: var(--clr-primary-light); color: var(--clr-primary);
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:16px;
}
.tier-card ul { list-style:none; padding:0; margin: 18px 0 0; }
.tier-card ul li { padding: 6px 0; font-size:.92rem; color:var(--clr-text-muted); display:flex; gap:8px; align-items:flex-start; }
.tier-card ul li i { color: var(--clr-primary); margin-top:3px; }

/* Course badges */
.course-badge {
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; padding: 4px 10px; border-radius: 999px;
  background: var(--clr-primary-light); color: var(--clr-primary);
}
.course-badge.gold { background: var(--clr-secondary-light); color:#7a5a12; }

/* Steps (how to apply) reuse hiw component, already styled */

/* AI + Portal promo panel on homepage */
.portal-promo {
  background: linear-gradient(135deg, var(--clr-primary-dark), var(--clr-primary));
  border-radius: var(--radius);
  color: #fff;
  padding: 46px;
  position: relative;
  overflow: hidden;
}
.portal-promo::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 15% 85%, rgba(201,151,43,.28), transparent 55%);
}
.portal-promo .pf-icon{
  width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:14px;
}