/* ==========================================================================
   Typography - @font-face, headings, body text, links
   ========================================================================== */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,regular,500,600,700,800,900&display=swap');
   
/* --- Headings (exact match cbtm.ca production) --- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-quicksand);
    font-weight: 900;
    line-height: 1.2;
}

h1 {
    font-size: 30px;
    color: var(--color-primary);
}

h2 {
    font-size: 27px;
    color: var(--color-purple-light);
}

h3 {
    font-size: 24px;
    color: var(--color-primary);
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
    color: var(--color-purple-light);
}

h6 {
    font-size: 16px;
}

/* --- Body Text (production: p margin reset to 0, Open Sans 400) --- */

p {
    font-family: var(--font-opensans);
    font-weight: 400;
    font-style: normal;
    color: var(--color-text);
    margin: 0;
    line-height: 1.5;
}

strong, b {
    font-weight: var(--font-weight-bold);
}

em, i {
    font-style: italic;
}

small {
    font-size: var(--font-size-sm);
}

blockquote {
    border-left: 4px solid var(--color-primary);
    font-style: italic;
    color: var(--color-text-muted);
}

code, kbd, pre, samp {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
}

pre {
    overflow-x: auto;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
}

/* --- Entry Content --- */

.entry-content h3,
.entry-content h4 {
    font-weight: 600;
}

.entry-content a {
    text-decoration: none;
    color: var(--color-navy);
}

.entry-content p a {
    font-family: var(--font-opensans);
    font-weight: var(--font-weight-black);
}

@media (any-hover: hover) {
    .entry-content a:hover {
        color: var(--color-purple-light);
    }
}

.entry-content code {
    background-color: var(--color-bg-light);
}

/* --- Lists (within WYSIWYG content) ---
 * Reset zeroes ul/ol padding; we restore an indent here. The amount can
 * be overridden per block via the --list-indent CSS variable (set inline by
 * blocks that expose a "List Indent" ACF field).
 *
 * Selector covers .entry-content (default page content) plus all block
 * BEM containers that render WYSIWYG-authored markup.
 */

.entry-content ul,
.entry-content ol,
.content-block__text ul,
.content-block__text ol,
.content-block__sidebar-content ul,
.content-block__sidebar-content ol,
.text-image__text ul,
.text-image__text ol,
.accordion-youtube__panel-text ul,
.accordion-youtube__panel-text ol,
.split-interest__description ul,
.split-interest__description ol,
.resource-list__description ul,
.resource-list__description ol,
.resource-list__item-desc ul,
.resource-list__item-desc ol,
.material-section__description ul,
.material-section__description ol,
.material-section__item-description ul,
.material-section__item-description ol {
    padding-left: var(--list-indent, 1.5rem);
    margin-bottom: 1rem;
}

.entry-content ul > li,
[class*="__text"] ul > li,
[class*="__content"] ul > li,
[class*="__description"] ul > li,
[class*="__panel-text"] ul > li,
[class*="__sidebar-content"] ul > li,
[class*="__item-desc"] ul > li,
[class*="__item-description"] ul > li {
    list-style-type: disc;
}

.entry-content ol > li {
    list-style-type: decimal;
}

.entry-content ol ul > li,
.entry-content ul ul > li,
[class*="__text"] ul ul > li,
[class*="__content"] ul ul > li,
[class*="__description"] ul ul > li,
[class*="__panel-text"] ul ul > li,
[class*="__sidebar-content"] ul ul > li,
[class*="__item-desc"] ul ul > li,
[class*="__item-description"] ul ul > li {
    list-style-type: circle;
}

.entry-content ul ul ul > li,
.entry-content ol ol ol > li,
[class*="__text"] ul ul ul > li,
[class*="__content"] ul ul ul > li,
[class*="__description"] ul ul ul > li {
    list-style-type: square;
}

.entry-content ol ol,
.entry-content ul ul {
    margin-bottom: 0;
}

.entry-content li {
    font-family: var(--font-opensans);
    font-weight: 400;
    font-style: normal;
    color: var(--color-text);
    line-height: 1.5;
}

/* --- WPForms within entry-content --- */



.entry-content .wpforms-form .wpforms-field {
    clear: both;
    overflow: hidden;
}

.site-container .entry-content .wpforms-form .wpforms-field-label {
    font-weight: var(--font-weight-semibold);
}

.site-container .entry-content .wpforms-form .wpforms-field-sublabel {
    font-size: var(--font-size-sm);
    font-weight: 300;
}

.entry-content .wpforms-form .wpforms-field-hp {
    display: none !important;
    left: -9000px !important;
    position: absolute !important;
}

.site-container .entry-content .wpforms-form textarea {
    padding: 0.9375rem;
}

/* --- Search Form --- */

.entry-content .search-form {
    margin-bottom: 2.5rem;
    width: 50%;
}

/* --- Media --- */

.entry-content .wp-audio-shortcode,
.entry-content .wp-playlist,
.entry-content .wp-video {
    margin: 0 0 1.875rem;
}

.entry-content p.wp-caption-text {
    margin-bottom: 0;
}

/* --- Screen Reader --- */

.screen-reader-text {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--color-bg-light);
    clip: auto !important;
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    height: auto;
    left: 5px;
    line-height: normal;
    padding: var(--spacing-md);
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: var(--z-toast);
}