/* ============================================================
   COLUMBIA MICROLEARNING — GLOBAL STYLES
   microlearning.columbia.ca
   File: global.css
   Load via: functions.php (see enqueue snippet)

   BRAND COLOURS:
   Piercing Red:      #D12329
   Effervescent Blue: #003258
   Black:             #1A1A1A
   Suzu Grey:         #A0A2A4

   SECTIONS:
   1. Global Typography (Divi)
   2. Links
   3. Divi Buttons
   4. Divi Header and Navigation
============================================================ */


/* ============================================================
   SECTION 1 — GLOBAL TYPOGRAPHY (Divi)
============================================================ */

body,
p,
li,
td,
.et_pb_text,
.et_pb_blurb_description,
.et_pb_toggle_content {
    font-family: "Open Sans", Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.et_pb_slide_title,
.et_pb_module_header,
.et_pb_title_container h1,
.et_pb_blurb_title,
.et_pb_toggle_title,
.et_pb_tab_title {
    font-family: "Raleway", sans-serif;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.et_pb_fullwidth_header_title,
.et_pb_fullwidth_header_subhead {
    font-family: "Raleway", sans-serif;
}

.et_pb_row h2,
.et_pb_column h2 {
    font-family: "Raleway", sans-serif;
    font-weight: 800;
    color: #1A1A1A;
}

.et_pb_text ul li::marker {
    color: #D12329;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.et_pb_button:focus {
    outline: 3px solid #D12329;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    h1 { font-size: 28px; }
    h2 { font-size: 22px; }
}


/* ============================================================
   SECTION 2 — LINKS
============================================================ */

a {
    color: #003258;
    transition: color 0.2s;
}

a:hover {
    color: #D12329;
}


/* ============================================================
   SECTION 3 — DIVI BUTTONS
============================================================ */

.et_pb_button,
.button,
a.et_pb_promo_button,
a.et_pb_more_button {
    background-color: #D12329 !important;
    color: #ffffff !important;
    font-family: "Raleway", sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    border: none !important;
    transition: background-color 0.2s, transform 0.15s !important;
}

.et_pb_button:hover,
.button:hover,
a.et_pb_promo_button:hover,
a.et_pb_more_button:hover {
    background-color: #A81B20 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

.et_pb_button.cta-ghost {
    background: transparent !important;
    color: #D12329 !important;
    border: 2px solid #D12329 !important;
}

.et_pb_button.cta-ghost:hover {
    background: #D12329 !important;
    color: #fff !important;
}

@media (max-width: 768px) {
    .et_pb_button { width: 100%; text-align: center; }
}


/* ============================================================
   SECTION 4 — DIVI HEADER AND NAVIGATION
============================================================ */

#main-header,
#top-header {
    border-bottom: 3px solid #D12329;
}

#main-header .nav li a,
#top-header .nav li a,
.et_pb_menu__menu li a,
.et-menu li a {
    font-family: "Open Sans", Arial, sans-serif;
    font-size: 14px;
    color: #1A1A1A;
    transition: color 0.2s;
}

#main-header .nav li a:hover,
#top-header .nav li a:hover,
.et_pb_menu__menu li a:hover,
.et-menu li a:hover {
    color: #D12329;
}

.et_pb_blurb_container {
    border-top: 4px solid #D12329;
    border-radius: 0 0 8px 8px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.et_pb_blurb:hover .et_pb_blurb_container {
    transform: translateY(-4px);
    box-shadow: 0 8px 28px rgba(0,50,88,0.12);
}

.et_pb_toggle_title {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    color: #1A1A1A;
}

.et_pb_toggle_title:hover,
.et_pb_toggle_open .et_pb_toggle_title {
    color: #D12329;
}

/* ── Microlearning Hub Global Overrides ── */

/* ================================================
   Microlearning Hub - Global Overrides
   Added: April 2026
   Controls: dark section readability + section spacing
   ================================================ */

/* Dark section text readability */
.cml-pb-body,
.cml-compass-step-desc {
    color: rgba(255,255,255,.65) !important;
}

.cml-pb-count {
    color: rgba(255,255,255,.45) !important;
}

.cml-pb-card-body {
    color: rgba(255,255,255,.65) !important;
}

/* Section spacing - controls padding across all hub sections */
.cml-hero { padding-top: 64px !important; padding-bottom: 64px !important; }
.cml-free-section { padding-top: 56px !important; padding-bottom: 56px !important; }
.cml-creds-section { padding-top: 64px !important; padding-bottom: 64px !important; }
.cml-pb-section { padding-top: 72px !important; padding-bottom: 72px !important; }
.cml-compass-strip { padding-top: 64px !important; padding-bottom: 64px !important; }
.cml-proof-section { padding-top: 64px !important; padding-bottom: 64px !important; }
.cml-bridge-section { padding-top: 56px !important; padding-bottom: 56px !important; }
.cml-cta-section { padding-top: 72px !important; padding-bottom: 72px !important; }

/* Remove Divi default section padding on hub page */
.cml-hero,
.cml-free-section,
.cml-creds-section,
.cml-pb-section,
.cml-compass-strip,
.cml-proof-section,
.cml-bridge-section,
.cml-cta-section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}