/* ==============================================================
   DIABETES WA — Programs and Events Hub · Brand 2025 master CSS
   By Your Side campaign · SMARTS workshops
   --------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for portal styling.
   This exact file is deployed identically to:
     · every web page's Custom CSS (Home, SMARTS, CarbSMART,
       Events, Events 1, Upcoming Events, Event Calendar,
       Register to Event, Search, Profile, Access Denied,
       Page Not Found)
     · the shared web files diabeteswa.css and dwa-powerpages.css
   Do not fork per page. Edit here, redeploy everywhere.
   --------------------------------------------------------------
   Directives applied (Katie, Jul 2026):
     · NO pill buttons — squared 6px corners
     · NO per-topic colour coding — one palette for all SMARTS
     · Palette held to Forest Jade + blues
     · All buttons: Southern Ocean Turquoise fill
   ============================================================== */

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

/* ---------- DWA Brand 2025 tokens ---------- */
:root {
  /* Primary palette */
  --dwa-forest-jade:     #065056;
  --dwa-southern-ocean:  #2FBCB0;
  /* Secondary palette (blues only in UI per directive) */
  --dwa-sky-blue:        #A2DCE9;
  --dwa-sky-blue-tint:   #ECF8FB;   /* soft section backgrounds */
  --dwa-forest-jade-20:  #CDDFE0;   /* jade tint — panels/borders */
  /* Neutrals */
  --dwa-dark-grey:       #333333;
  --dwa-mid-grey:        #666666;
  --dwa-light-grey:      #E8E8E8;
  --dwa-white:           #FFFFFF;
  /* Functional */
  --dwa-heading-shade:   #043B40;   /* darker jade for hover states */
  --dwa-card-shadow:     rgba(6, 80, 86, 0.08);
  /* Typography — Quicksand Bold headings, Poppins body */
  --dwa-font-heading:    'Quicksand', 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  --dwa-font-body:       'Poppins', 'Segoe UI', Tahoma, sans-serif;
  /* Button geometry — deliberately NOT pill (was 24px/999px) */
  --dwa-btn-radius:      6px;

  /* Legacy aliases — older page markup still references these.
     Kept so nothing silently breaks; all map to brand tokens. */
  --dwa-teal:        var(--dwa-southern-ocean);
  --dwa-teal-dark:   var(--dwa-forest-jade);
  --dwa-teal-deep:   var(--dwa-forest-jade);
  --dwa-teal-tint:   var(--dwa-forest-jade-20);
  --dwa-teal-border: var(--dwa-forest-jade);
  --dwa-slate:       var(--dwa-dark-grey);
  --dwa-slate-soft:  var(--dwa-mid-grey);
  --dwa-font-head:   var(--dwa-font-heading);
  --dwa-sky-blue-20: var(--dwa-sky-blue-tint);   /* old tint name still in page markup */
  --brand:           var(--dwa-southern-ocean);  /* stock-template var, neutralised */
  --brand-2:         var(--dwa-forest-jade);     /* stock-template var, neutralised */

  /* ---- Explicit remap of the full portal theme palette ----
     Every slot defined so no var() ever resolves empty
     (portalThemeColor10–12 ship blank from Microsoft). */
  --portalThemeColor1:  var(--dwa-southern-ocean); /* accents / light borders */
  --portalThemeColor2:  var(--dwa-mid-grey);       /* secondary / muted text  */
  --portalThemeColor3:  var(--dwa-forest-jade-20); /* panel backgrounds       */
  --portalThemeColor4:  var(--dwa-forest-jade);    /* dark bands / big titles */
  --portalThemeColor5:  var(--dwa-white: );  /* soft section bg         */
  --portalThemeColor6:  var(--dwa-forest-jade);    /* nav inactive            */
  --portalThemeColor7:  var(--dwa-sky-blue-tint);  /* card/section bg         */
  --portalThemeColor8:  var(--dwa-sky-blue-tint);  /* card/section bg         */
  --portalThemeColor9:  var(--dwa-forest-jade);    /* deep headings           */
  --portalThemeColor10: var(--dwa-heading-shade);  /* active accent           */
  --portalThemeColor11: var(--dwa-sky-blue);       /* spare — light blue      */
  --portalThemeColor12: var(--dwa-white);          /* hero text on dark bands */
  --portalThemeOnColor4: var(--dwa-white);
  --portalThemeOnColor7: var(--dwa-dark-grey);
  --portalThemeOnColor9: var(--dwa-white);
}

/* ---------- Base typography ---------- */
body,
.eventfontfamily {
  font-family: var(--dwa-font-body);
  font-weight: 300;               /* Poppins Light per brand */
  color: var(--dwa-dark-grey);
  -webkit-font-smoothing: antialiased;
}

body,
.eventfontfamily,
p {
  font-size: 16px;
}

/* Form controls / buttons don't inherit body font — set explicitly */
button, input, select, textarea, optgroup,
p, span, li, td, th, label, small, blockquote, figcaption {
  font-family: var(--dwa-font-body);
}

/* Headings: Quicksand Bold, Forest Jade. Explicit per level —
   no reliance on cascade. */
h1, h1 span {
  font-family: var(--dwa-font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dwa-forest-jade);
}
h2, h2 span {
  font-family: var(--dwa-font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dwa-forest-jade);
}
h3, h3 span {
  font-family: 20px(--dwa-font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--dwa-forest-jade);
}
h4, h5, h6,
h4 span, h5 span, h6 span {
  font-family: var(--dwa-font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--dwa-forest-jade);
}

/* Headings inside dark jade bands stay white */
[data-component-theme="portalThemeColor4"] h1,
[data-component-theme="portalThemeColor4"] h2,
[data-component-theme="portalThemeColor4"] h3,
[data-component-theme="portalThemeColor4"] p,
[data-component-theme="portalThemeColor9"] h1,
[data-component-theme="portalThemeColor9"] h2,
[data-component-theme="portalThemeColor9"] h3,
[data-component-theme="portalThemeColor9"] p {
  color: var(--dwa-white);
}

a { color: var(--dwa-southern-ocean); }
a:hover { color: var(--dwa-forest-jade); }

/* ---------- Page background — flat Sky Blue tint (no gradients) ---------- */
.backgroundgradiant {
  background-image: none !important;
  background-color: var(--dwa-sky-blue-tint) !important;
}

/* ---------- Shared title / CTA classes ---------- */
.center-text, .center-textsp { text-align: center; }

/* Eyebrow / kicker line — turquoise (was Desert Ochre; palette
   now held to jade + blues per directive) */
.custom-color, .custom-colorsp {
  font-family: var(--dwa-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 22px;
  color: var(--dwa-southern-ocean);
}

.secondary-colorjoin {
  font-family: var(--dwa-font-body);
  font-size: 18px;
  font-weight: 300;
  font-style: italic;
  line-height: 26px;
  color: var(--dwa-forest-jade);
}

.jointitle, .no-marginsp {
  margin: 0;
  font-family: var(--dwa-font-heading);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--dwa-forest-jade);
}

.nottheevent {
  font-family: var(--dwa-font-heading);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--dwa-forest-jade);
}

.featuredSpeaker {
  font-family: var(--dwa-font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--dwa-forest-jade);
}

.custom-font-sizesp {
  font-family: var(--dwa-font-body);
  font-size: 17px;
}

.event-title {
  font-family: var(--dwa-font-heading);
  font-size: 2.5rem !important;
  font-weight: 700;
  color: var(--dwa-forest-jade);
  padding-bottom: 16px;
}

.event-subtitle {
  font-family: var(--dwa-font-heading);
  font-size: 1.3rem !important;
  font-weight: 600;
  color: var(--dwa-forest-jade);
  padding-bottom: 8px;
}

.event-description {
  display: -webkit-box;

  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 20em;
  line-height: 22px;
  font-size: 16px;
  font-weight: 300;
  font-family: var(--dwa-font-body);
  color: var(--dwa-dark-grey);
}
.event-description.expanded {
  
  max-height: none;
}

.dwa-forestjade { color: var(--dwa-forest-jade); }
.dwa-turquoise  { color: var(--dwa-southern-ocean); }
.paddingTopForMoreSpace { padding-top: 16px; }

/* ---------- Nav / filter tabs ---------- */
.nav-tabs {
  border-bottom: 2px solid var(--dwa-forest-jade-20);
  gap: .25rem;
}
.nav-tabs .nav-link {
  font-family: var(--dwa-font-body);
  font-weight: 600;
  color: var(--dwa-forest-jade);
  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-southern-ocean); }
.nav-tabs .nav-link.active {
  color: var(--dwa-southern-ocean);
  background: transparent;
  border-bottom-color: var(--dwa-southern-ocean);
}

/* ---------- Session / speaker cards — Sky Blue tint, soft jade shadow ---------- */
.session-card {
  border: 1px solid var(--dwa-light-grey);
  border-radius: 8px;
  background-color: var(--dwa-sky-blue-tint);
  box-shadow: 0 4px 14px var(--dwa-card-shadow);
  font-family: var(--dwa-font-body);
  transition: transform .18s ease, box-shadow .18s ease;
}
.session-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(6, 80, 86, 0.14);
}
.session-card img { border: 2px solid var(--dwa-forest-jade-20); }
.session-info h5 {
  margin: 0;
  font-family: var(--dwa-font-heading);
  font-weight: 700;
  color: var(--dwa-forest-jade);
}
.session-info p {
  margin: 0;
  font-weight: 300;
  color: var(--dwa-dark-grey);
}

/* ============================================================
   BUTTONS — one system, all pages.
   Primary: Southern Ocean Turquoise fill, white text, 6px radius.
   Secondary (View all events): white fill, jade border/text.
   NO pill shapes anywhere.
   ============================================================ */
#registereventsbtn,
#registerbtn,
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active:focus,
.button1,
button.button1,
a.button1 {
  background-color: var(--dwa-southern-ocean) !important;
  border: none !important;
  border-radius: var(--dwa-btn-radius) !important;
  color: var(--dwa-white) !important;
  font-family: var(--dwa-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px;
  padding: 10px 24px !important;
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease;
}
#registereventsbtn:hover,
#registerbtn:hover,
.btn-primary:hover,
button.button1:hover,
a.button1:hover {
  background-color: var(--dwa-forest-jade) !important;
  color: var(--dwa-white) !important;
}
#registereventsbtn:focus,
#registerbtn:focus,
.btn-primary:focus,
button.button1:focus,
a.button1:focus {
  outline: 3px solid rgba(47, 188, 176, .35);
  outline-offset: 2px;
}

/* Secondary: View all events */
#all-event-btn,
.viewAllEvents {
  display: inline-block;
  background-color: var(--dwa-white) !important;
  border: 1.5px solid var(--dwa-forest-jade) !important;
  border-radius: var(--dwa-btn-radius) !important;
  color: var(--dwa-forest-jade) !important;
  font-family: var(--dwa-font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
#all-event-btn:hover,
.viewAllEvents:hover {
  background-color: var(--dwa-forest-jade) !important;
  color: var(--dwa-white) !important;
}

#registerbtn {
  margin-left: auto;
  margin-right: auto;
  padding: 0.8rem 1.6rem !important;
  line-height: 22px;
  width: 350px;
}

.alleventsbtn { margin-left: auto; margin-right: auto; }
.icon-padding { padding-left: 10px; }

/* ---------- Forms (registration fields) ---------- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  border: 1.5px solid var(--dwa-forest-jade-20);
  border-radius: var(--dwa-btn-radius);
  font-family: var(--dwa-font-body);
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--dwa-southern-ocean);
  box-shadow: 0 0 0 3px rgba(47, 188, 176, .18);
}
label, .control-label {
  color: var(--dwa-dark-grey);
  font-weight: 500;
}

/* ---------- Header / banner / logo ---------- */
.portal-logo-img { height: 63px; width: auto; margin: 0 10px; }
.journeyline-img { height: 85px; width: auto; margin-left: auto; margin-right: auto; }
.wrapper-body { display: flex; flex-direction: column; }

#BannerSection {
  flex-wrap: wrap;
  height: 5vh;
  padding: 8px;
  margin: 0px;
  display: flex;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/DiabetesWA-IndigenousArt-TurquoiseCrop.png');
}

/* ---------- Event page misc ---------- */
#eventDetails { text-align: center; }
.event-icon { width: auto; height: 200px; border-radius: 4px; margin: 0 auto; }

/* ---------- Card gallery (PCF) ---------- */
div#CardGallery h4 {
  font-family: var(--dwa-font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--dwa-forest-jade);
}
div#CardGallery p {
  font-family: var(--dwa-font-body);
  font-weight: 400;
  font-size: 14px;
  color: var(--dwa-dark-grey);
}
div#CardGallery .button1 { font-family: var(--dwa-font-body); }
div#CardGallery a { border: 0 !important; }
#galleryIntersectionObserverParent { height: auto !important; }
/* Card gallery section — always white, per approved design */
.dwa-gallery-section,
[data-component-name="Pages.CardGallery"] {
  background-color: var(--dwa-white);
}

/* ---------- Footer ---------- */
footer .footer-bottom {
  background-color: var(--dwa-forest-jade) !important;
  margin-top: auto !important;
  color: var(--dwa-white) !important;
}
.footerCopyrightFonts {
  font-family: var(--dwa-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: center !important;
  margin-top: auto !important;
  color: var(--dwa-white);
}

/* ---------- Template info ---------- */
.template-info { padding: 50px 25px; font-family: var(--dwa-font-body); }
.template-info img { width: 100px; }
.template-info h4 {
  margin-top: 40px;
  font-family: var(--dwa-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--dwa-forest-jade);
}
.template-info p { font-size: 14px; font-weight: 300; color: var(--dwa-dark-grey); }

/* ---------- SMARTS hero band (Events dynamic page) ---------- */
.smarts-hero {
  background-color: var(--dwa-sky-blue-tint);
  padding: 40px 24px;
  text-align: center;
}
.smarts-hero-eyebrow {
  margin: 0 0 10px 0;
  font-family: var(--dwa-font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--dwa-southern-ocean);
}
.smarts-hero-tagline {
  margin: 0;
  font-family: var(--dwa-font-body);
  font-weight: 300;
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--dwa-forest-jade);
}
.smarts-all-events { background-color: var(  --dwa-white); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) and (min-width: 768px) {
  .portal-logo-img { height: 53px; }
  .journeyline-img { height: 65px; }
  .event-icon { height: 150px; }
  .event-title { font-size: 48px; line-height: 54px; }
}
@media (max-width: 767px) {
  .portal-logo-img { height: 43px; }
  .journeyline-img { height: 45px; }
  .event-icon { height: 100px; }
  .event-title { font-size: 32px; line-height: 38px; }
  .paddingLeftForMoreSpace { padding-left: 0px; }
  .text_center-mobile { text-align: center; }
}