/*
Theme Name:   Hello Elementor Child
Theme URI:    https://digitisesa.co.za
Description:  Hello Elementor child theme for Digitise SA — hosts the custom home page template and any other site-specific overrides.
Author:       Digitise SA
Author URI:   https://digitisesa.co.za
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child
*/

/* ── Global brand variables (available to Elementor pages too) ── */
:root {
  --dsa-navy:       #191C4A;
  --dsa-navy-deep:  #111330;
  --dsa-navy-mid:   #1f2460;
  --dsa-gold:       #D7B428;
  --dsa-gold-light: #F0CF5A;
  --dsa-teal:       #21759B;
  --dsa-green:      #1D9E75;
  --dsa-amber:      #C4830A;
}

/* ── Events & Recordings Page ─────────────────────────────── */

/* Hero section */
.events-hero {
  background: var(--dsa-navy);
  padding: 64px 0 56px;
  text-align: center;
  position: relative;
}
.events-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--dsa-gold);
}
.events-hero .section-label,
.events-hero span.section-label {
  color: var(--dsa-gold) !important;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  margin-bottom: 12px;
}
.events-hero h1,
.events-hero .elementor-widget-container h1,
.events-hero .elementor-heading-title {
  color: #ffffff !important;
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 16px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.events-hero p,
.events-hero .elementor-widget-container p {
  color: rgba(255,255,255,.7) !important;
  font-size: 15px;
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto 32px;
}
.events-hero-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Coming soon banner */
.coming-soon-banner {
  background: var(--dsa-gold);
  padding: 28px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.coming-soon-banner h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--dsa-navy);
  margin-bottom: 4px;
}
.coming-soon-banner p {
  font-size: 13px;
  color: rgba(25,28,74,.7);
  margin: 0;
}

/* Event archive cards */
.events-archive {
  padding: 72px 0;
  background: #F7F6F2;
}
.events-archive-header {
  margin-bottom: 48px;
}
.events-archive h2 {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  color: var(--dsa-navy);
  margin-bottom: 8px;
}
.events-archive .section-sub {
  font-size: 14px;
  color: #6B6A7A;
  max-width: 560px;
}
.events-topic-group {
  margin-bottom: 48px;
}
.events-topic-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--dsa-gold);
  border-bottom: 1px solid #E0DDD4;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.event-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.event-archive-card {
  background: #ffffff;
  border: 1px solid #E0DDD4;
  border-radius: 8px;
  padding: 20px;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
}
.event-archive-card:hover {
  box-shadow: 0 8px 24px rgba(25,28,74,.10);
  transform: translateY(-3px);
  border-color: transparent;
}
.event-archive-tag {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.tag-finance  { background: #EDF4F0; color: #0F6E56; }
.tag-digital  { background: #EDF4F8; color: #21759B; }
.tag-marketing{ background: #FDF8EE; color: #C4830A; }
.event-archive-card h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--dsa-navy);
  line-height: 1.4;
  margin-bottom: 8px;
  flex: 1;
}
.event-archive-meta {
  font-size: 11px;
  color: #6B6A7A;
  margin-bottom: 14px;
}
.event-archive-meta span {
  margin-right: 10px;
}
.event-archive-footer {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid #F1EFE8;
}
.btn-watch {
  background: var(--dsa-navy);
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 4px;
  text-decoration: none;
  transition: background .2s;
}
.btn-watch:hover { background: #1f2460; }
.btn-download {
  background: transparent;
  color: var(--dsa-navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid #E0DDD4;
  text-decoration: none;
  transition: all .2s;
}
.btn-download:hover {
  border-color: var(--dsa-navy);
  background: #F7F6F2;
}

/* Specificity guard against parent theme / Elementor anchor color overrides */
a.btn-watch    { color: #ffffff; }
a.btn-download { color: var(--dsa-navy); }

/* Partners strip */
.event-partners {
  padding: 48px 0;
  background: #ffffff;
  border-top: 1px solid #E0DDD4;
  text-align: center;
}
.event-partners h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #6B6A7A;
  margin-bottom: 24px;
}
.partner-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  opacity: .65;
  filter: grayscale(100%);
}
.partner-logos img { height: 32px; width: auto; }

/* Notify section */
.events-notify {
  padding: 72px 0;
  background: var(--dsa-navy);
  text-align: center;
}
.events-notify h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 12px;
}
.events-notify p {
  color: rgba(255,255,255,.65);
  font-size: 14px;
  line-height: 1.75;
  max-width: 480px;
  margin: 0 auto 28px;
}

/* Responsive */
@media (max-width: 1024px) {
  .event-archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .event-archive-grid { grid-template-columns: 1fr; }
  .coming-soon-banner { flex-direction: column; text-align: center; }
  .events-hero-btns { flex-direction: column; align-items: center; }
}