/* ============================================================
   DIABETES WA — Power Pages event page branding
   Paste this into your Power Pages custom CSS (page or theme).
   It re-skins the page by overriding the portal theme
   variables (--portalThemeColor1..10) used by your existing
   classes (.session-card, #registereventsbtn, .nav-tabs, etc.)
   plus the standard Bootstrap controls.
   ------------------------------------------------------------
   FONTS: DWA uses a licensed rounded sans. The closest free
   match is Poppins (headings) + Mulish (body). Swap the import
   + --dwa-font-* values if you have the brand webfonts.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ---- Brand tokens ---------------------------------------- */
:root {
  --dwa-teal:        #16a6a3;   /* primary brand turquoise   */
  --dwa-teal-dark:   #0e8c8a;   /* hover / pressed           */
  --dwa-teal-deep:   #0e9b98;   /* section headings          */
  --dwa-teal-tint:   #f4fbfb;   /* card / panel backgrounds  */
  --dwa-teal-border: #d5eae9;   /* hairline borders          */
  --dwa-coral:       #e85c2b;   /* accent (use sparingly)    */
  --dwa-slate:       #3c4a4d;   /* body text                 */
  --dwa-slate-soft:  #5a686b;   /* secondary text            */
  --dwa-grey-bg:     #f1f3f3;   /* page section background   */

  --dwa-font-head: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  --dwa-font-body: 'Poppins', 'Segoe UI', Tahoma, sans-serif;

  /* --- Remap the Power Pages theme palette to DWA brand --- */
  --portalThemeColor1:  #d5eae9;   /* light borders            */
  --portalThemeColor2:  #5a686b;   /* secondary / muted text   */
  --portalThemeColor4:  #0e9b98;   /* big section titles       */
  --portalThemeColor6:  #3c4a4d;   /* nav-tab inactive         */
  --portalThemeColor7:  #f4fbfb;   /* card backgrounds         */
  --portalThemeColor10: #16a6a3;   /* primary accent / active  */
}

/* ---- Base typography ------------------------------------- */
body,
.eventfontfamily {
  font-family: var(--dwa-font-body);
  color: var(--dwa-slate);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.jointitle, .no-marginsp, .nottheevent,
.featuredSpeaker, .template-info h4 {
  font-family: var(--dwa-font-head);
  letter-spacing: -0.01em;
}

/* DWA section titles are a light-weight rounded teal */
.jointitle, .no-marginsp {
  color: var(--dwa-teal-deep);
  font-weight: 600;
}
.featuredSpeaker { color: var(--dwa-slate); }

a { color: var(--dwa-teal); }
a:hover { color: var(--dwa-teal-dark); }

/* ---- Page background ------------------------------------- */
.backgroundgradiant {
  background-image: radial-gradient(farthest-corner at 5% 100%,
                    #f4fbfb, #f7feff, #ffffff);
}

/* ---- Filter tabs ----------------------------------------- */
.nav-tabs {
  border-bottom: 2px solid var(--dwa-teal-border);
  gap: .25rem;
}
.nav-tabs .nav-link {
  color: var(--dwa-slate);
  font-family: var(--dwa-font-head);
  font-weight: 500;
  border: none;
  border-bottom: 3px solid transparent;
  padding: .6rem 1.1rem;
  transition: color .15s, border-color .15s;
}
.nav-tabs .nav-link:hover { color: var(--dwa-teal); }
.nav-tabs .nav-link.active {
  color: var(--dwa-teal);
  background: transparent;
  border-bottom-color: var(--dwa-teal);
}

/* ---- Session / speaker cards ----------------------------- */
.session-card {
  border: 1px solid var(--dwa-teal-border);
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 6px 18px rgba(22, 166, 163, .07);
  transition: transform .18s ease, box-shadow .18s ease;
}
.session-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(22, 166, 163, .14);
}
.session-card img {
  border: 2px solid var(--dwa-teal-tint);
}
.session-info h5 {
  font-family: var(--dwa-font-head);
  color: var(--dwa-slate);
}
.session-info p { color: var(--dwa-slate-soft); }

/* ---- Buttons --------------------------------------------- */
/* Primary: Register */
#registereventsbtn,
.btn-primary,
button.button1 {
  background-color: var(--dwa-teal) !important;
  border: 1px solid var(--dwa-teal) !important;
  color: #ffffff !important;
  font-family: var(--dwa-font-head);
  font-weight: 600;
  border-radius: 999px;
  padding: .7rem 1.7rem;
  box-shadow: 0 4px 12px rgba(22, 166, 163, .25);
  transition: background-color .15s, box-shadow .15s, transform .12s;
}
#registereventsbtn:hover,
.btn-primary:hover,
button.button1:hover {
  background-color: var(--dwa-teal-dark) !important;
  border-color: var(--dwa-teal-dark) !important;
  box-shadow: 0 6px 16px rgba(22, 166, 163, .32);
  transform: translateY(-1px);
}
#registereventsbtn:focus,
.btn-primary:focus {
  outline: 3px solid rgba(22, 166, 163, .35);
  outline-offset: 2px;
}

/* Secondary: View all events */
#all-event-btn,
.viewAllEvents {
  border: 1.5px solid var(--dwa-teal) !important;
  color: var(--dwa-teal) !important;
  background-color: #ffffff !important;
  font-family: var(--dwa-font-head);
  font-weight: 600;
  border-radius: 999px;
  transition: background-color .15s, color .15s;
}
#all-event-btn:hover,
.viewAllEvents:hover {
  background-color: var(--dwa-teal) !important;
  color: #ffffff !important;
}

/* ---- "Join" / CTA copy ----------------------------------- */
.custom-color, .custom-colorsp { color: var(--dwa-teal); }
.secondary-colorjoin { color: var(--dwa-slate-soft); }

/* ---- Forms (registration fields) ------------------------- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  border: 1.5px solid var(--dwa-teal-border);
  border-radius: 8px;
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--dwa-teal);
  box-shadow: 0 0 0 3px rgba(22, 166, 163, .15);
}
label, .control-label { color: var(--dwa-slate); font-weight: 500; }

/* ---- Footer template info -------------------------------- */
.template-info h4 { color: var(--dwa-teal-deep); }
.template-info p  { color: var(--dwa-slate-soft); }
.footerCopyrightFonts { color: var(--dwa-slate-soft); }