/* ==========================================================================
 * HCDSB Base — theme.css
 * --------------------------------------------------------------------------
 * The layer between Bootstrap 5 and the child theme. Bootstrap does the
 * heavy lifting; this file holds only what is particular to HCDSB sites:
 * the brand tokens, content typography, the WordPress markup Bootstrap knows
 * nothing about, the header structure, and the theme's own components.
 *
 * CONTENTS
 *  1. Tokens — brand values, and Bootstrap's variables pointed at them
 *  2. Base — type, links, focus, media
 *  3. Forms
 *  4. WordPress — alignment, captions, blocks, embeds, screen readers
 *  5. Layout — content wrapper, sections, title band, breadcrumbs
 *  6. Header — masthead, menus, top bar, side menu, header widgets, mega menu
 *  7. Footer
 *  8. Blog — post list, single post, author, post navigation, pagination
 *  9. Comments
 * 10. Sidebar & widgets
 * 11. Components — quotes and the related-post cards
 * 12. Utilities — reduced motion, back to top
 *
 * CONVENTIONS
 *  - Colours, fonts and radii come from the tokens in section 1. A site (or
 *    the child theme's palettes) changes the brand by overriding --sk-* or
 *    --hcdsb-* values, never by editing rules further down.
 *  - Use Bootstrap's own markup and utilities first. A rule belongs here only
 *    when Bootstrap has no class for it, or for markup WordPress generates.
 *  - The tokens are declared on body, not :root, so a .site-* class on body
 *    that changes --sk-primary changes everything derived from it.
 *  - Explain WHY in comments, not WHAT.
 *
 * Everything the previous Lambda-derived stylesheet carried for plugins and
 * features these sites do not use (Sermon Manager, LayerSlider, WooCommerce,
 * Gravity Forms and Contact Form 7 skins, Flexslider, Isotope, Magnific
 * Popup, Pace, counters, charts, animate.css, the element-* spacing classes,
 * the Feather icon font) is gone. Font Awesome 4 is its own file,
 * font-awesome.css.
 * ========================================================================== */


/* ==========================================================================
 * 1. TOKENS
 * ========================================================================== */

/* Type roles. The site's font pairing (inc/fonts.php, chosen in the
   Customizer's Typography section) prints its own values for these right
   after this file, on :root as here, so they replace these. What is here is
   only the fallback for a page without that: the system font stack.
   Rules below name a role, never a font. */
:root {
  --hcdsb-font-heading: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hcdsb-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hcdsb-font-quote: Georgia, "Times New Roman", Times, serif;
  --hcdsb-font-ui: var(--hcdsb-font-body);
  --hcdsb-heading-weight: 700;
  --hcdsb-heading-tracking: -.01em;
  --hcdsb-heading-case: none;
  --hcdsb-quote-style: italic;
}

body {
  /* Brand. Each falls back to the board palette when the child theme's
     --sk-* token is absent, so the parent renders on its own too. */
  --hcdsb-primary: var(--sk-primary, #1b365d);
  --hcdsb-primary-hover: var(--sk-primary-hover, color-mix(in srgb, var(--hcdsb-primary), #000 18%));
  --hcdsb-accent: var(--sk-accent, #2c5490);
  --hcdsb-heading: var(--sk-heading, var(--hcdsb-primary));
  --hcdsb-link: var(--sk-accent, #2c5490);
  --hcdsb-link-hover: var(--sk-link-hover, #14294a);

  /* Neutrals */
  --hcdsb-text: #212529;
  --hcdsb-muted: #5c6670;
  --hcdsb-surface: #f4f6f9;
  --hcdsb-border: #dfe4ea;

  /* Shape */
  --hcdsb-radius: .5rem;
  --hcdsb-radius-lg: .75rem;
  --hcdsb-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --hcdsb-shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, .12), 0 4px 8px -4px rgba(16, 24, 40, .06);
  --hcdsb-focus-ring: 0 0 0 .25rem color-mix(in srgb, var(--hcdsb-primary) 30%, transparent);

  /* Vertical rhythm between content blocks */
  --hcdsb-flow: 1.25rem;

  /* Bootstrap reads these by name. Pointing them at the tokens is what
     makes its components (nav, tabs, accordion, pagination, alerts,
     dropdowns) come out in the brand colours without restyling each one. */
  --bs-body-font-family: var(--hcdsb-font-body);
  --bs-body-color: var(--hcdsb-text);
  --bs-body-line-height: 1.6;
  --bs-heading-color: var(--hcdsb-heading);
  --bs-link-color: var(--hcdsb-link);
  --bs-link-hover-color: var(--hcdsb-link-hover);
  --bs-secondary-color: var(--hcdsb-muted);
  --bs-border-color: var(--hcdsb-border);
  --bs-border-radius: var(--hcdsb-radius);
  --bs-border-radius-lg: var(--hcdsb-radius-lg);
  --bs-tertiary-bg: var(--hcdsb-surface);
  --bs-primary-text-emphasis: color-mix(in srgb, var(--hcdsb-primary), #000 30%);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--hcdsb-primary) 9%, #fff);
  --bs-primary-border-subtle: color-mix(in srgb, var(--hcdsb-primary) 25%, #fff);
  --bs-focus-ring-color: color-mix(in srgb, var(--hcdsb-primary) 30%, transparent);

  /* theme.json's palette holds the board colours as literal values (the
     editor's swatches need them). Never give a palette colour the slug
     "text" or "border": WordPress names the class for a preset
     .has-{slug}-color, and .has-text-color / .has-border-color are the
     classes it puts on EVERY block with a custom text or border colour. On the page they follow the tokens, so a
     site palette also recolours anything an editor set with a preset. */
  --wp--preset--color--primary: var(--hcdsb-primary);
  --wp--preset--color--accent: var(--hcdsb-accent);
  --wp--preset--color--surface: var(--hcdsb-surface);
  --wp--preset--color--line: var(--hcdsb-border);
  --wp--preset--color--muted: var(--hcdsb-muted);
  --wp--preset--color--dark: var(--hcdsb-text);

  /* Rendering. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Bootstrap compiles these colours into each component as literal values
   rather than reading --bs-primary, so they are pointed at the tokens here. */
.btn-primary {
  --bs-btn-bg: var(--hcdsb-primary);
  --bs-btn-border-color: var(--hcdsb-primary);
  --bs-btn-hover-bg: var(--hcdsb-primary-hover);
  --bs-btn-hover-border-color: var(--hcdsb-primary-hover);
  --bs-btn-active-bg: var(--hcdsb-primary-hover);
  --bs-btn-active-border-color: var(--hcdsb-primary-hover);
  --bs-btn-disabled-bg: var(--hcdsb-primary);
  --bs-btn-disabled-border-color: var(--hcdsb-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--hcdsb-primary);
  --bs-btn-border-color: var(--hcdsb-primary);
  --bs-btn-hover-bg: var(--hcdsb-primary);
  --bs-btn-hover-border-color: var(--hcdsb-primary);
  --bs-btn-active-bg: var(--hcdsb-primary-hover);
  --bs-btn-active-border-color: var(--hcdsb-primary-hover);
  --bs-btn-disabled-color: var(--hcdsb-primary);
  --bs-btn-disabled-border-color: var(--hcdsb-primary);
}
.btn-link {
  --bs-btn-color: var(--hcdsb-link);
  --bs-btn-hover-color: var(--hcdsb-link-hover);
  --bs-btn-active-color: var(--hcdsb-link-hover);
}
.text-bg-primary,
.bg-primary {
  background-color: var(--hcdsb-primary) !important;
}
.text-primary,
.link-primary {
  color: var(--hcdsb-primary) !important;
}
.border-primary {
  border-color: var(--hcdsb-primary) !important;
}
.pagination {
  --bs-pagination-active-bg: var(--hcdsb-primary);
  --bs-pagination-active-border-color: var(--hcdsb-primary);
  --bs-pagination-focus-box-shadow: var(--hcdsb-focus-ring);
  gap: .375rem;
  margin-top: 3rem;
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--hcdsb-primary);
}
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--hcdsb-primary);
}
.btn:focus-visible,
.page-link:focus-visible,
.accordion-button:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: var(--hcdsb-focus-ring);
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: color-mix(in srgb, var(--hcdsb-primary) 50%, #fff);
}
.form-check-input:checked {
  background-color: var(--hcdsb-primary);
  border-color: var(--hcdsb-primary);
}


/* ==========================================================================
 * 2. BASE
 * ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--hcdsb-font-heading);
  font-weight: var(--hcdsb-heading-weight);
  line-height: 1.2;
  letter-spacing: var(--hcdsb-heading-tracking);
  text-transform: var(--hcdsb-heading-case);
  text-wrap: balance;
}
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5em;
}
/* Space above a heading that follows other content. */
:where(.post-body, .type-page, .comment-body) > * + :is(h2, h3, h4, h5, h6) {
  margin-top: 2em;
}
p, ul, ol, dl {
  margin-bottom: var(--hcdsb-flow);
}
/* Fluid from phone to desktop, so headings never need a media query. */
h1, .h1 { font-size: clamp(2rem, 1.55rem + 1.6vw, 2.75rem); }
h2, .h2 { font-size: clamp(1.625rem, 1.35rem + 1vw, 2.125rem); }
h3, .h3 { font-size: clamp(1.3125rem, 1.2rem + .45vw, 1.5rem); }
h4, .h4 { font-size: 1.1875rem; }
h5, .h5 { font-size: 1.0625rem; }
h6, .h6 {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

p,
li {
  text-wrap: pretty;
}

.lead {
  font-size: 1.1875rem;
  font-weight: 400;
  color: var(--hcdsb-muted);
}

/* Links in running text are underlined so they are not told apart by colour
   alone (WCAG 1.4.1): links inside paragraphs, list items, table cells and
   captions in content. Links that are headings (post titles in a list),
   navigation, tabs, buttons and cards set their own. */
a {
  color: var(--hcdsb-link);
  text-decoration: none;
  transition: color .15s ease-in-out;
}
a:hover {
  color: var(--hcdsb-link-hover);
}
:where(.post-body, .type-page, .comment-body, .author-description, .textwidget) :where(p, li, td, th, dd, figcaption, cite) a:not(.btn, .nav-link, .page-link, .dropdown-item, .wp-block-button__link, .wp-element-button, .stretched-link, :is(h1, h2, h3, h4, h5, h6) a) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
:where(.post-body, .type-page, .comment-body, .author-description, .textwidget) :where(p, li, td, th, dd, figcaption, cite) a:not(.btn, .nav-link, .page-link, .dropdown-item, .wp-block-button__link, .wp-element-button, .stretched-link, :is(h1, h2, h3, h4, h5, h6) a):hover {
  text-decoration-thickness: 2px;
}

/* Interface text: the pairing's UI face. Attributions and captions sit with
   the interface, not the quote, so they read as labels. */
.btn,
.wp-block-button__link,
.wp-element-button,
.wp-block-search__button,
.nav-link,
.page-link,
.post-page-numbers,
.breadcrumb,
.badge,
label,
.post-details,
.post-card-meta,
.post-list-date,
.post-navigation-label,
.post-tags a,
.tagcloud a,
.wp-block-tag-cloud a,
.comment-meta,
.sidebar-header,
.blockquote-footer,
.wp-block-quote cite,
.wp-block-pullquote cite,
.wp-element-caption,
.wp-caption-text,
.accordion-button {
  font-family: var(--hcdsb-font-ui);
}
:focus-visible {
  outline: 2px solid var(--hcdsb-accent);
  outline-offset: 2px;
}

::selection {
  background: color-mix(in srgb, var(--hcdsb-primary) 20%, #fff);
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

figure {
  margin: 0 0 var(--hcdsb-flow);
}

hr {
  opacity: 1;
  border-top-color: var(--hcdsb-border);
}

mark {
  padding: .1em .25em;
  background: #fff3bf;
  border-radius: .2em;
}

code,
kbd,
pre {
  font-size: .875em;
}
pre {
  padding: 1rem 1.25rem;
  background: var(--hcdsb-surface);
  border: 1px solid var(--hcdsb-border);
  border-radius: var(--hcdsb-radius);
  white-space: pre-wrap;
}
:not(pre) > code {
  padding: .125em .375em;
  color: #b02a37;
  background: var(--hcdsb-surface);
  border-radius: .25em;
}

blockquote {
  margin: 0 0 var(--hcdsb-flow);
}

/* Tables in post and page content look like Bootstrap's .table, which the
   block editor does not add. */
:where(.post-body, .type-page) table {
  width: 100%;
  margin-bottom: var(--hcdsb-flow);
  border-collapse: collapse;
}
:where(.post-body, .type-page) :is(th, td),
.wp-block-table :is(th, td) {
  padding: .625rem .75rem;
  text-align: start;
  border: 0;
  border-bottom: 1px solid var(--hcdsb-border);
}
:where(.post-body, .type-page) thead th,
.wp-block-table thead {
  border-bottom: 0;
}
:where(.post-body, .type-page) thead th {
  font-weight: 700;
  border-bottom-width: 2px;
  border-bottom-color: currentColor;
}


/* ==========================================================================
 * 3. FORMS
 * Bare inputs from plugins and core widgets pick up Bootstrap's look without
 * needing .form-control. :where() keeps the specificity at zero, so any
 * real Bootstrap or plugin class still wins.
 * ========================================================================== */

:where(input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], input[type="date"], select, textarea):not(.form-control, .form-select) {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  color: var(--hcdsb-text);
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: var(--hcdsb-radius);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
:where(input, select, textarea):not(.form-control, .form-select):focus {
  border-color: color-mix(in srgb, var(--hcdsb-primary) 50%, #fff);
  outline: 0;
  box-shadow: var(--hcdsb-focus-ring);
}
:where(input[type="submit"], button[type="submit"]):not(.btn, .wp-block-search__button, .navbar-toggler, .btn-close) {
  padding: .5rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--hcdsb-primary);
  border: 0;
  border-radius: var(--hcdsb-radius);
  cursor: pointer;
}
:where(input[type="submit"], button[type="submit"]):not(.btn, .wp-block-search__button, .navbar-toggler, .btn-close):hover {
  background: var(--hcdsb-primary-hover);
}
label {
  font-weight: 600;
}


/* ==========================================================================
 * 4. WORDPRESS
 * ========================================================================== */

/* - Alignment - */
.alignleft {
  float: left;
  margin: .375rem 1.5rem 1rem 0;
}
.alignright {
  float: right;
  margin: .375rem 0 1rem 1.5rem;
}
.aligncenter {
  display: block;
  margin-inline: auto;
}
.alignnone {
  margin-bottom: var(--hcdsb-flow);
}
/* On phones a floated image leaves a column too narrow to read, so it stacks.
   Core's block rules (.wp-block-image .alignleft) are more specific than a
   bare class, hence the longer selectors. */
@media (max-width: 575.98px) {
  .alignleft,
  .alignright,
  .wp-block-image.alignleft,
  .wp-block-image.alignright,
  .wp-block-image .alignleft,
  .wp-block-image .alignright {
    float: none;
    margin-inline: 0;
  }
  .wp-block-image.alignleft img,
  .wp-block-image.alignright img {
    width: 100% !important;
  }
}

/* - Captions - */
.wp-caption {
  max-width: 100%;
}
.wp-caption-text,
.wp-element-caption,
.gallery-caption {
  margin-top: .5rem;
  font-size: .875rem;
  color: var(--hcdsb-muted);
  text-align: center;
}

/* - Blocks - */
.wp-block-image img {
  border-radius: var(--hcdsb-radius);
}
.wp-block-quote {
  padding: .25rem 0 .25rem 1.25rem;
  font-family: var(--hcdsb-font-quote);
  font-style: var(--hcdsb-quote-style);
  font-size: 1.1875rem;
  border-inline-start: 4px solid var(--hcdsb-accent);
}
.wp-block-quote cite,
.wp-block-pullquote cite {
  display: block;
  margin-top: .5rem;
  font-size: .875rem;
  font-style: normal;
  color: var(--hcdsb-muted);
}
.wp-block-quote cite::before,
.wp-block-pullquote cite::before {
  content: "\2014\00a0";
}
.wp-block-pullquote {
  padding: 2rem 0;
  text-align: center;
  border-block: 3px solid var(--hcdsb-primary);
}
.wp-block-pullquote blockquote {
  padding: 0;
  margin: 0;
  border: 0;
}
.wp-block-pullquote blockquote p {
  font-family: var(--hcdsb-font-quote);
  font-style: var(--hcdsb-quote-style);
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--hcdsb-heading);
}
.wp-block-separator {
  margin-block: 2rem;
  border: 0;
  border-top: 1px solid var(--hcdsb-border);
}
/* Block buttons follow the theme's buttons rather than core's black pill. */
.wp-block-button__link,
.wp-block-file .wp-block-file__button {
  padding: .625rem 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  background-color: var(--hcdsb-primary);
  border: 1px solid var(--hcdsb-primary);
  border-radius: var(--hcdsb-radius);
  text-decoration: none;
  transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.wp-block-button__link:hover,
.wp-block-file .wp-block-file__button:hover {
  color: #fff;
  background-color: var(--hcdsb-primary-hover);
}
.wp-block-button.is-style-outline > .wp-block-button__link {
  color: var(--hcdsb-primary);
  background: transparent;
  border: 1px solid var(--hcdsb-primary);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  color: #fff;
  background: var(--hcdsb-primary);
}
.wp-block-buttons {
  margin-bottom: var(--hcdsb-flow);
}
.wp-block-file {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  padding: .75rem 1rem;
  background: var(--hcdsb-surface);
  border-radius: var(--hcdsb-radius);
}
.wp-block-file .wp-block-file__button {
  padding: .375rem .875rem;
  font-size: .875rem;
}
.wp-block-details {
  padding: .75rem 1rem;
  margin-bottom: var(--hcdsb-flow);
  border: 1px solid var(--hcdsb-border);
  border-radius: var(--hcdsb-radius);
}
.wp-block-details summary {
  font-weight: 600;
  cursor: pointer;
}
.wp-block-details[open] summary {
  margin-bottom: .5rem;
}
.wp-block-table figcaption {
  text-align: start;
}
.wp-block-gallery {
  margin-bottom: var(--hcdsb-flow);
}

/* - Embeds - */
/* Wraps YouTube, Vimeo and WordPress.tv embeds (hcdsb_add_video_embed_note). */
.video-wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: var(--hcdsb-flow);
}
.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--hcdsb-radius);
}

/* - Audio - */
.mejs-container,
.wp-audio-shortcode {
  margin-bottom: var(--hcdsb-flow);
  border-radius: var(--hcdsb-radius);
}

/* - Screen readers - */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.screen-reader-text:focus {
  top: 5px;
  left: 5px;
  z-index: 100000;
  width: auto;
  height: auto;
  padding: .875rem 1.5rem;
  font-weight: 700;
  color: var(--hcdsb-primary);
  background: #fff;
  border-radius: var(--hcdsb-radius);
  box-shadow: var(--hcdsb-shadow-lg);
  clip-path: none;
}

/* Admin bar: a sticky header and the side menu sit below it. WordPress
   fixes the bar at 32px tall on wide screens and 46px from 600 to 781px;
   narrower than that the bar scrolls away, so the header sticks at the top. */
@media screen and (min-width: 600px) {
  .admin-bar {
    --hcdsb-sticky-top: 46px;
  }
}
@media screen and (min-width: 782px) {
  .admin-bar {
    --hcdsb-sticky-top: 32px;
  }
  .admin-bar #navbar-slide {
    top: 32px !important;
  }
}


/* ==========================================================================
 * 5. LAYOUT
 * ========================================================================== */

/* clip, not hidden: the side menu slides #content sideways and anything
   past the edge must not make the page scroll, but hidden would also break
   position: sticky for anything inside the content. */
#content {
  width: 100%;
  overflow-x: clip;
  transition: opacity .2s;
}

/* - Sections - */
.section {
  position: relative;
}
.container-fullwidth {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
}
/* - Title band (inc/title-band.php) - */
/* The page, blog or archive title, with the breadcrumbs above it. A page
   can turn it off in Page settings when it opens with its own hero. */
.hcdsb-title-band {
  padding-block: 2.5rem 0;
}
.hcdsb-title-band-title {
  margin-bottom: 0;
}
.hcdsb-title-band .breadcrumb-blog {
  margin-bottom: .75rem;
}

/* - Breadcrumbs - */
.breadcrumb-blog {
  --bs-breadcrumb-divider-color: var(--hcdsb-muted);
  --bs-breadcrumb-item-active-color: var(--hcdsb-muted);
  padding: 0;
  margin-bottom: 0;
  background: none;
  font-size: .875rem;
}
.breadcrumb-blog a {
  color: var(--hcdsb-muted);
}
.breadcrumb-blog a:hover {
  color: var(--hcdsb-link-hover);
}
/* Case options (blog/page header "breadcrumbs case"). */
.breadcrumb-blog.text-uppercase,
.breadcrumb-blog.text-capitalize {
  letter-spacing: .02em;
}

/* Small screens centre what the theme marks .small-screen-center. */
@media (max-width: 767.98px) {
  .small-screen-center {
    text-align: center;
  }
}

/* ==========================================================================
 * 6. HEADER
 * Bootstrap 5 navbar markup, one partial per header style
 * (partials/header/header-*.php):
 *
 *   header#masthead.menu.navbar.navbar-expand-lg
 *     .container                        logo, toggler, and the menu when it
 *       a.navbar-brand                  sits in the same row
 *       button.navbar-toggler
 *       nav.navbar-collapse > .menu-container > ul.navbar-nav
 *                           > .menu-sidebar (Menu Bar widgets)
 *
 * The "menu below" styles have two rows: .logo-navbar (logo, Logo Bar
 * widgets, toggler) and a second .container holding the menu. The side menu
 * styles put the menu in nav#navbar-slide, after the header.
 *
 * Every row is a flex row; nothing floats. Bootstrap's own classes carry the
 * state: .show on an open dropdown and its toggle, .active and aria-current
 * on the current page's link, .collapsed/aria-expanded on the toggler.
 * Spacing comes from Bootstrap's navbar and dropdown variables where it has
 * one. Colours, the toggler's bars and the mobile panel are the child theme's
 * (style.css sections 4 and 10).
 * ========================================================================== */

/* - Bar - */
.menu {
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0;
  --bs-navbar-brand-padding-y: 0;
  --bs-navbar-nav-link-padding-x: 20px;
  width: 100%;
  margin-bottom: 0;
  top: 0;
  left: 0;
  border: 0;
  transition: background-color 0.3s, min-height 0.3s, box-shadow 0.3s;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
#masthead {
  z-index: 1000;
}
.menu .container {
  position: relative;
}
.menu .container-fullwidth {
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

/* A row inside the header: the container in single-row styles (Bootstrap
   makes .navbar > .container flex itself), and the logo row of the others. */
.menu .logo-navbar > .container,
.menu .logo-navbar > .container-fullwidth,
.navbar > .container-fullwidth {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}

/* Styles with a second row stack their rows; .navbar-expand-lg would
   otherwise put them side by side from 992px. */
.header-logo-left-menu-below,
.header-logo-right-menu-below,
.header-logo-center-menu-below,
.header-logo-left-sidebar-right,
.header-fixed-left-menu-sidebar,
.header-fixed-right-menu-sidebar {
  flex-direction: column;
  align-items: stretch;
}

/* - Brand - */
.menu .navbar-brand {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0 !important;
  position: relative;
  text-shadow: none;
  transform: translate3d(0, 0, 0);
  transition: height 0.3s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  /* The logo's ceiling: Site Identity > Logo maximum height, printed on
     :root by hcdsb_logo_css(). A logo taller than the row makes the row
     taller. */
  --hcdsb-logo-cap: var(--hcdsb-logo-max, 100px);
  background-size: auto 100%;
  background-position: left;
  background-repeat: no-repeat;
  backface-visibility: hidden;
}
.menu .navbar-brand img {
  display: inline-block;
  position: relative;
  width: auto;
  /* A logo whose size cannot be read (an SVG, a file on another site) is
     drawn at the ceiling. */
  height: var(--hcdsb-logo-cap);
  max-width: 100%;
  margin-right: 4px;
  object-fit: contain; /* never stretched */
  transition: height 0.3s;
}
/* Caps a PNG logo at half its pixel height so a 2x export stays crisp.
   Class and size set by hcdsb_logo_html(). */
.menu .navbar-brand img.hcdsb-logo-sized {
  height: min(var(--hcdsb-logo-h), var(--hcdsb-logo-cap));
}
/* Phones and tablets keep the 100px row whatever the setting. */
@media (max-width: 991.98px) {
  .menu .navbar-brand {
    --hcdsb-logo-cap: min(var(--hcdsb-logo-max, 100px), 100px);
  }
}
.menu .navbar-brand.text-image {
  margin-right: 4px;
}

/* - Toggler - */
/* The bars and their position are the child theme's. Bootstrap's focus ring
   is a box-shadow sized for its own icon; an outline on keyboard focus
   replaces it. */
.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* - Menu - */
.menu .navbar-collapse {
  padding-left: 0;
  padding-right: 0;
}
/* On .navbar-nav, not .menu: Bootstrap sets these on .navbar-nav itself. */
.menu .navbar-nav {
  --bs-nav-link-padding-x: 20px;
}
.menu .navbar-nav > li {
  position: relative;
}
.menu .navbar-nav > li > a {
  text-shadow: none;
  font-style: normal;
  position: relative;
  transition: all 0.3s;
  padding-left: 20px;
  padding-right: 20px;
}
.menu .navbar-nav > li > a:focus {
  outline: none;
}
/* Focus shows as the link's hover state (colour and the bar above it, in the
   child theme), not as Bootstrap's blue ring. */
.menu .navbar-nav > li > a:focus-visible {
  box-shadow: none;
}
.menu .navbar-nav > li > a:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  opacity: 0;
  transition: background 0.3s, width 0.2s;
}
.menu .navbar-nav > li > a.active,
.menu .navbar-nav > li > a.show {
  box-shadow: none;
  background-color: transparent;
}
.menu .nav-highlight > a:after, .menu .nav-highlight-ghost > a:after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  height: 36px;
  top: 50%;
  margin-top: -18px;
  transition: all 0.2s;
  z-index: -1;
}
.menu .nav-highlight > a:before, .menu .nav-highlight-ghost > a:before {
  display: none !important;
}

/* - Navbar text - */
.navbar-text, .menu .sidebar-widget {
  transition: all 0.3s;
}

/* - Dropdowns - */
.menu .dropdown-menu {
  --bs-dropdown-padding-y: 0;
  --bs-dropdown-spacer: 0;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-border-radius: 0;
  --bs-dropdown-item-padding-y: .5rem;
  text-shadow: none;
}
.menu .dropdown-menu > li > a {
  transition: background 0.1s;
}
.menu .dropdown-menu > li > a:focus {
  outline: none;
}
.menu .dropdown-menu .dropdown-menu {
  margin-top: 0;
}

/* "Dropdowns open to the left of their menu item" (Customize → Header). */
@media (min-width: 992px) {
  .menu .navbar-nav > li > .dropdown-menu-end {
    left: auto;
    right: 0;
  }
}

/* - Icons on menus - */
.menu-icon {
  font-size: 0.8em;
  width: 1em;
  margin-right: 3px;
  transition: background 0.1s;
  color: inherit;
}

/* - Labels on menus - */
.menu-label {
  position: relative;
  top: -2px;
  transition: all 0.2s;
  margin-left: 24px;
}

.menu .navbar-nav > li > a > .menu-label {
  margin-left: 16px;
}

/* - Third-level flyouts - */
/* Bootstrap 5 has no nested dropdowns; a second-level item with children
   (.dropdown-submenu) shows its list beside it on hover. */
.menu .dropdown-submenu {
  position: relative;
}

.menu .dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
}

.menu .dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.menu .dropdown-submenu > a:after {
  display: block;
  content: "\f105";
  float: right;
  margin-right: -6px;
  font-family: FontAwesome, sans-serif;
}

/* - Navbar toggle animated - */
/* Removed 2026-08-24 — the mobile toggle is now styled in the child
   theme (.navbar-toggler / .toggler-bar). The rules here used :nth-child(),
   which broke once a visually-hidden span was added as the button's first
   child for its accessible name. Do not reinstate. */

/* - Top bar - */
.top-bar {
  line-height: 36px;
  position: relative;
  z-index: 100;
  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.1) inset;
}
.top-bar > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.top-bar .container-fullwidth {
  position: static;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}
.top-bar .top {
  flex: 0 0 50%;
  text-align: start;
}
.top-bar .top-right {
  text-align: end;
}
.top-bar .navbar-text {
  margin: 0 !important;
}
.top-bar .menu-sidebar {
  display: none;
}

/* - Menu Below types - */
.header-logo-left-menu-below .logo-sidebar, .header-logo-right-menu-below .logo-sidebar, .header-logo-center-menu-below .logo-sidebar {
  display: none;
}

/* - Sticky header -
   CSS position: sticky keeps the header in the flow, so the page below it
   does not jump when it sticks, and it needs no placeholder. theme.js only
   adds classes: .navbar-stuck while stuck, .navbar-scrolled past the shrink
   point. "Sticky header" and "Sticky on mobile" are Customize → Header. */
@media (min-width: 992px) {
  #masthead.navbar-sticky {
    position: sticky;
    top: var(--hcdsb-sticky-top, 0);
    z-index: 1100;
  }

  .menu .navbar-nav {
    --bs-nav-link-padding-y: 1rem;
  }

  /* - Logo and menu in one row - */
  /* A right-aligned menu runs past the container's edge by the gutter, so
     the last link's padding sits outside it and its word lines up with the
     content below. The
     margin is on the menu's last item, which moves the whole group without
     widening the box a mega menu spans. */
  .header-logo-left-menu-right .main-navbar > :last-child,
  .header-logo-right-menu-below .main-navbar > :last-child {
    margin-inline-end: calc(var(--bs-gutter-x, 1.5rem) * -.5);
  }
  .header-logo-right-menu-left .navbar-brand {
    order: 2;
  }

  /* - Menu below types - */
  .header-logo-left-menu-below .logo-navbar, .header-logo-right-menu-below .logo-navbar, .header-logo-center-menu-below .logo-navbar {
    position: relative;
    z-index: 10;
  }
  /* The Logo Bar widgets sit at the far end of the logo row, over it
     rather than in it, so a tall widget does not make the row taller.
     They span the row's height and are centred in it, so they stay level
     with the logo whatever the row's height or the widget's own. */
  .header-logo-left-menu-below .logo-sidebar, .header-logo-right-menu-below .logo-sidebar, .header-logo-center-menu-below .logo-sidebar {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
  }
  .header-logo-right-menu-below .logo-sidebar {
    right: auto;
    left: 0;
  }
  .menu.header-logo-right-menu-below .logo-navbar > div {
    justify-content: flex-end;
  }
  .menu.header-logo-center-menu-below .logo-navbar > div {
    justify-content: center;
  }
  .header-logo-center-menu-below .logo-navbar,
  .header-logo-center-menu-below .nav-container {
    text-align: center;
  }
  /* The mega menu spans the menu row. */
  .nav-container {
    position: relative;
  }
  .nav-container .menu-sidebar .top-search form, .nav-container .menu-sidebar .top-search input {
    height: 100%;
  }
  .nav-container .navbar-text, .nav-container .sidebar-widget,
  .header-logo-right-menu-below .sidebar-widget, .header-logo-center-menu-below .sidebar-widget {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  /* Bootstrap lays the menu and the Menu Bar widgets out in a row from here. */
  .menu .navbar-collapse {
    align-self: stretch;
  }
  .menu-sidebar {
    display: flex;
  }
}
@media (max-width: 991.98px) {
  #masthead.navbar-mobile-stuck {
    position: sticky;
    top: var(--hcdsb-sticky-top, 0);
    z-index: 1100;
  }

  /* A little air above and below the list in the open menu. */
  .menu .navbar-nav {
    margin-top: .5rem;
    margin-bottom: .5rem;
  }
  .menu .navbar-nav > li > a {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .menu .navbar-nav > li > a:before {
    display: none;
  }

  .menu {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .menu .dropdown-menu {
    margin: 0;
    width: 100%;
  }
  .menu .dropdown-menu > li > a {
    padding-left: 20px !important;
  }
  /* An open submenu opens inline, under its parent, with no edge of its own. */
  .menu .navbar-nav .dropdown-menu.show {
    width: auto;
    margin-top: 0;
    border: 0;
    box-shadow: none;
  }

  /* Third level (a submenu's submenu, e.g. About > Staff > ...). On desktop
     it flies out beside its parent; in the collapsed menu there is no room
     beside, and the flyout's left: 100% put it off the edge of the screen.
     Here it is listed under its parent, indented, and always shown while the
     second level is open: the parent stays a link to its own page, so
     tapping it could not also be the way to open the list. The menu is
     limited to three levels (partials/header/nav.php), so this is the deepest. */
  .menu .dropdown-submenu > .dropdown-menu {
    position: static;
    top: auto;
    left: auto;
    display: block;
    width: auto;
    min-width: 0;
    margin: 0 0 0.25rem 1.25rem;
    padding: 0;
    background: none;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: none;
  }
  /* The child repaints open dropdowns (.dropdown-menu.show); the nested
     list sits on its parent's background instead. */
  .menu .dropdown-menu .dropdown-submenu > .dropdown-menu {
    background: transparent;
  }
  .menu .dropdown-submenu > a:after {
    display: none;
  }
}
@media (max-width: 768px) {
  .top-bar .top {
    flex-basis: 100%;
    text-align: center;
  }

  #masthead .navbar-brand {
    max-width: 84%;
  }
}

/* - Side menu (#navbar-slide) - */
/* "Logo left, menu in a drawer" slides it in from the right on every width;
   the two "Fixed side menu" styles show it permanently from 992px. The
   child theme turns it into the ordinary mobile menu below 992px. */
.slide-menu #masthead, .slide-menu #content, .slide-menu #navbar-slide, .slide-menu .top-bar {
  transition: transform .4s;
  transform: translate3d(0, 0, 0);
}

#navbar-slide {
  position: fixed;
  top: 0;
  left: 100%;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
  height: 100% !important;
  z-index: 1110;
  box-sizing: border-box;
  box-shadow: 5px 0px 5px -3px rgba(0, 0, 0, 0.25) inset;
}
#navbar-slide .navbar-brand {
  display: block;
}
#navbar-slide .navbar-nav {
  margin: 24px 0 48px;
  overflow: auto;
}
#navbar-slide .navbar-nav > li > a {
  padding: 8px 0 !important;
  line-height: 1.75;
}
#navbar-slide .navbar-nav > li > a:before {
  display: none;
}
#navbar-slide .navbar-nav > .nav-highlight > a, #navbar-slide .navbar-nav > .nav-highlight-ghost > a {
  padding: 8px 20px !important;
}
#navbar-slide .navbar-nav .dropdown-menu.show,
#navbar-slide .navbar-nav .dropdown-menu.show .dropdown-menu {
  position: static;
  width: auto;
  margin-top: 0;
  border: 0;
  box-shadow: none;
}

.slide-menu #navbar-slide.collapse {
  display: block;
}

#navbar-slide .col-lg-12, #navbar-slide .col-lg-6, #navbar-slide .col-lg-4, #navbar-slide .col-lg-3 {
  width: 100%;
}

.side-menu #masthead {
  transform: translateY(0);
  transition: all .3s;
}

.side-menu-left #navbar-slide {
  z-index: 5;
  left: 0;
  box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.25);
}

.side-menu-right #navbar-slide {
  z-index: 5;
  right: 0;
  left: auto;
  box-shadow: -1px 0px 2px rgba(0, 0, 0, 0.25);
}

/* On desktop the side menu is the header, so the top bar is not shown at
   all (it used to be moved off-screen, with #content pulled up to cover the
   gap, which let the bar's scroll shrink move the page). */
@media (min-width: 992px) {
  .side-menu #masthead {
    display: none;
  }
  .side-menu #navbar-slide.collapse {
    display: block;
  }
  .side-menu .container {
    max-width: 90%;
  }
}
/* ------------ */
/* BOXED LAYOUT */
/* ------------ */
.layout-boxed #masthead, .layout-boxed #content, .layout-boxed .top-bar {
  max-width: 1200px;
  margin: 0 auto;
  right: 0;
}
.layout-boxed .container {
  max-width: 100%;
}

@media (max-width: 1200px) {
  .layout-boxed #masthead, .layout-boxed #content, .layout-boxed .top-bar {
    max-width: 1000px;
  }
}
@media (max-width: 991px) {
  .layout-boxed #masthead, .layout-boxed #content, .layout-boxed .top-bar {
    max-width: 780px;
  }
}
.top-bar .sidebar-widget, #masthead .sidebar-widget {
  margin-bottom: 0;
}
.top-bar .sidebar-widget > *, #masthead .sidebar-widget > * {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.top-bar .sidebar-widget .sidebar-header, #masthead .sidebar-widget .sidebar-header {
  display: none;
}

.top-bar .sidebar-widget {
  display: inline-block;
  vertical-align: top;
  position: relative;
  font-size: 0.9em;
}

#masthead .sidebar-widget {
  padding-left: 6px;
  margin-left: 6px;
}

.top-bar li {
  display: inline-block;
  margin-bottom: 0 !important;
}
.top-bar .widget_recent_entries li, .top-bar .widget_recent_entries .children, .top-bar .widget_recent_comments li, .top-bar .widget_recent_comments .children, .top-bar .widget_archive li, .top-bar .widget_archive .children, .top-bar .widget_categories li, .top-bar .widget_categories .children, .top-bar .widget_meta li, .top-bar .widget_meta .children, .top-bar .widget_pages li, .top-bar .widget_pages .children, .top-bar .widget_nav_menu li, .top-bar .widget_nav_menu .children {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
  border-top: 0 !important;
}
.top-bar .top-left .widget_recent_entries li, .top-bar .top-left .widget_recent_comments li, .top-bar .top-left .widget_archive li, .top-bar .top-left .widget_categories li, .top-bar .top-left .widget_meta li, .top-bar .top-left .widget_pages li, .top-bar .top-left .widget_nav_menu li {
  padding-right: 8px;
  margin-right: 8px;
  border-right-width: 1px;
  border-right-style: solid;
}
.top-bar .top-left .widget_recent_entries li:last-child, .top-bar .top-left .widget_recent_comments li:last-child, .top-bar .top-left .widget_archive li:last-child, .top-bar .top-left .widget_categories li:last-child, .top-bar .top-left .widget_meta li:last-child, .top-bar .top-left .widget_pages li:last-child, .top-bar .top-left .widget_nav_menu li:last-child {
  padding-right: 0px;
  margin-right: 0px;
  border-right-width: 0;
}
.top-bar .top-right .widget_recent_entries li, .top-bar .top-right .widget_recent_comments li, .top-bar .top-right .widget_archive li, .top-bar .top-right .widget_categories li, .top-bar .top-right .widget_meta li, .top-bar .top-right .widget_pages li, .top-bar .top-right .widget_nav_menu li {
  padding-left: 8px;
  margin-left: 8px;
  border-left-width: 1px;
  border-left-style: solid;
}
.top-bar .top-right .widget_recent_entries li:first-child, .top-bar .top-right .widget_recent_comments li:first-child, .top-bar .top-right .widget_archive li:first-child, .top-bar .top-right .widget_categories li:first-child, .top-bar .top-right .widget_meta li:first-child, .top-bar .top-right .widget_pages li:first-child, .top-bar .top-right .widget_nav_menu li:first-child {
  padding-left: 0px;
  margin-left: 0px;
  border-left-width: 0;
}
.top-bar .sub-menu {
  margin: 0;
  padding-left: 0px;
  display: inline-block;
}
.top-bar .sub-menu li {
  padding-left: 8px;
}
.top-bar .sub-menu li:before {
  content: "";
}
.top-bar .widget_search {
  position: inherit;
}

/* Side navigation widgets */
#navbar-slide .sidebar-widget {
  text-align: center;
  clear: both;
  width: 100%;
}
#navbar-slide .widget_social ul.social-icons {
  height: 36px;
  line-height: 36px;
}

@media (max-width: 991.98px) {
  .menu-sidebar .sidebar-widget {
    margin: 12px 0 !important;
    text-align: center;
  }
  .menu-sidebar .top-search form {
    left: 0;
    right: 0;
  }
  .top-bar .top-search form {
    background: none;
  }
}

/* - Search widget in the header or top bar - */
/* On desktop a header Search widget collapses to a magnifier (.search-trigger)
   that theme.js toggles open over the menu (.top-search.active). The
   magnifier and its close state are drawn with borders, not an icon font. */
@media (min-width: 992px) {
  .top-bar .widget_search form,
  #masthead .widget_search form {
    display: none;
  }
  .top-search {
    display: block;
    width: 24px;
    text-align: center;
  }
  .top-search form {
    position: absolute;
    inset: 0 0 auto;
    z-index: 10;
  }
  .top-search .search-trigger {
    position: relative;
    z-index: 10;
    display: block;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .top-search .search-trigger::before,
  .top-search .search-trigger::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transition: all .3s;
  }
  .top-search .search-trigger::before {
    width: 12px;
    height: 12px;
    border: 2px solid;
    border-radius: 50%;
    transform: translate(-8px, -8px);
  }
  .top-search .search-trigger::after {
    width: 2px;
    height: 6px;
    background: currentColor;
    transform: translate(2px, 1px) rotate(-45deg);
  }
  .top-search.active .search-trigger::before,
  .top-search.active .search-trigger::after {
    width: 1px;
    height: 24px;
    border: 0;
    background: currentColor;
  }
  .top-search.active .search-trigger::before {
    transform: translate(0, -50%) rotate(45deg);
  }
  .top-search.active .search-trigger::after {
    transform: translate(0, -50%) rotate(-45deg);
  }
  .top-search input,
  .top-search input:focus {
    border-color: transparent;
    outline: none;
    box-shadow: none;
  }
  .top-search .btn {
    vertical-align: top;
    background: none;
  }
  #masthead .menu-sidebar .top-search input,
  #masthead .logo-sidebar .top-search input {
    font-size: 24px;
  }
  .top-bar .search-trigger {
    height: 36px;
  }
}

/* - Top bar widget dividers - */
@media (min-width: 768px) {
  .top-left .sidebar-widget {
    padding-right: 16px;
    margin-right: 16px;
    border-right: 1px solid;
  }
  .top-left .sidebar-widget:last-child {
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
  }
  .top-right .sidebar-widget {
    padding-left: 6px;
    margin-left: 6px;
    border-left: 1px solid;
  }
  .top-right .sidebar-widget:first-child {
    padding-left: 0;
    margin-left: 0;
    border-left: 0;
  }
}
@media (max-width: 767.98px) {
  .top-bar .sidebar-widget {
    padding-right: 6px;
    margin-left: 6px;
  }
}

/* - Mega menu - */

.menu-item-object-hcdsb_mega_menu {
  position: static !important;
}
/* The columns are Bootstrap 5 grid columns (col-lg-3/4/6) in a .row, and a
   column only sits beside its neighbour inside a flex row; an open
   dropdown (.show) is display: block, which would stack them. */
@media (min-width: 992px) {
  .menu-item-object-hcdsb_mega_menu > .dropdown-menu.show {
    display: flex;
    flex-wrap: wrap;
  }
}
.menu-item-object-hcdsb_mega_menu .dropdown-menu {
  left: 0px !important;
  right: 0px !important;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}
.menu-item-object-hcdsb_mega_menu .dropdown-menu > li {
  position: relative;
}
.menu-item-object-hcdsb_mega_menu .dropdown-menu > li:before {
  content: "";
  position: absolute;
  height: 1000px;
  width: 1px;
  left: 0;
  top: 3px;
}
.menu-item-object-hcdsb_mega_menu .dropdown-menu > li:first-child:before {
  display: none;
}
.menu-item-object-hcdsb_mega_menu .dropdown-menu > li > ul {
  list-style-type: none;
  padding: 0 0 6px;
  overflow: hidden;
}
.menu-item-object-hcdsb_mega_menu .dropdown-menu > li > ul > li {
  padding-bottom: 0px;
}
.menu-item-object-hcdsb_mega_menu .dropdown-menu > li > ul > li > a {
  padding: 8px 0;
  display: block;
  font-size: 14px;
  transition: color 0.1s;
}
.menu-item-object-hcdsb_mega_menu .dropdown-menu > li > strong {
  padding-top: 16px;
  padding-bottom: 8px;
  display: block;
}
.menu-item-object-hcdsb_mega_menu .dropdown-menu > li > p {
  font-size: 14px;
  font-style: italic;
  padding-bottom: 12px;
  margin-bottom: 0px;
  border-bottom: 1px solid;
}

.container-fullwidth .menu-item-object-hcdsb_mega_menu .dropdown-menu {
  margin-left: calc(var(--bs-gutter-x, 1.5rem) * .5) !important;
  margin-right: calc(var(--bs-gutter-x, 1.5rem) * .5) !important;
}

.hcdsb_mega_menu-no-dividers > ul > li:before {
  display: none;
}

.hcdsb_mega_menu-no-dividers > ul > li > p {
  border: 0 !important;
}

@media (max-width: 992px) {
  .menu-item-object-hcdsb_mega_menu {
    position: relative !important;
  }

  .menu-item-object-hcdsb_mega_menu .dropdown-menu {
    background-image: none !important;
  }

  .menu-item-object-hcdsb_mega_menu .dropdown-menu > li > ul > li > a {
    padding-left: 0px;
    padding-right: 0px;
  }
}
/* ----------------- */


/* ==========================================================================
 * 7. FOOTER
 * Colours are the child theme's (--sk-footer); this is structure only.
 * ========================================================================== */

#footer .sidebar-widget {
  margin-bottom: 1.5rem;
}
#footer .sidebar-widget:last-child {
  margin-bottom: 0;
}
.footer-columns-1 > [class*="col-"] {
  text-align: center;
}
@media (min-width: 768px) {
  .footer-columns-2 > [class*="col-"]:last-child {
    text-align: end;
  }
}
/* The sub footer's widgets sit in a row of inline items. */
.subfooter .sidebar-widget {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: top;
}
.subfooter .sidebar-widget > *,
.subfooter p {
  margin-bottom: 0 !important;
}
.subfooter .sidebar-widget li {
  display: inline-block;
  padding-inline-start: 8px;
  margin-bottom: 0;
}
.subfooter .sidebar-widget li:first-child {
  padding-inline-start: 0;
}


/* ==========================================================================
 * 8. BLOG
 * ========================================================================== */

/* - Post in the list and on its own page - */
.post {
  position: relative;
}
/* In the list, posts are separated by a rule and space. */
[class*="blog-list-layout-"] > .post + .post {
  padding-top: 2.5rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--hcdsb-border);
}
.post-media {
  margin-bottom: 1.5rem;
}
.post-media iframe,
.post-media audio {
  width: 100%;
}
.post-figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--hcdsb-radius-lg);
}
.post-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.post-figure-link img {
  transition: transform .4s ease;
}
.post-figure-link:hover img {
  transform: scale(1.03);
}

.post-head {
  margin-bottom: 1.25rem;
}
.post-title {
  margin-bottom: .5rem;
}
.post-title a {
  color: var(--hcdsb-heading);
}
.post-title a:hover {
  color: var(--hcdsb-link);
}
.post-title .fa-external-link {
  font-size: .6em;
  vertical-align: middle;
}
.post-sticky {
  margin-inline-start: .5rem;
  font-size: .75rem;
  vertical-align: middle;
  color: var(--hcdsb-primary);
  background: var(--bs-primary-bg-subtle);
  letter-spacing: .02em;
}

/* "Image left" / "Image right" list layouts (Blog options): the featured
   image beside the text on desktop, above it below 992px. */
@media (min-width: 992px) {
  :is(.blog-list-layout-left, .blog-list-layout-right) > .post:not(.format-audio):has(> .post-media) {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: 2rem;
    align-items: start;
  }
  :is(.blog-list-layout-left, .blog-list-layout-right) > .post:not(.format-audio):has(> .post-media) > * {
    grid-column: 2;
  }
  :is(.blog-list-layout-left, .blog-list-layout-right) > .post:not(.format-audio) > .post-media {
    grid-row: 1 / span 20;
    grid-column: 1;
    margin-bottom: 0;
  }
  .blog-list-layout-right > .post:not(.format-audio):has(> .post-media) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  .blog-list-layout-right > .post:not(.format-audio):has(> .post-media) > * {
    grid-column: 1;
  }
  .blog-list-layout-right > .post:not(.format-audio) > .post-media {
    grid-column: 2;
  }
}

/* Date, author, category, comments. */
.post-details {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  font-size: .875rem;
  color: var(--hcdsb-muted);
}
.post-details a {
  color: inherit;
}
.post-details a:hover {
  color: var(--hcdsb-link-hover);
}
.post-details .fa {
  margin-inline-end: .25rem;
  opacity: .7;
}

.post-body > :last-child {
  margin-bottom: 0;
}
.post-body {
  overflow-wrap: break-word;
}
.single .post-body {
  font-size: 1.0625rem;
}

.post-more {
  margin-top: 1.25rem;
}
.post-more-link:not(.btn) {
  font-weight: 600;
}
.post-more-link:not(.btn)::after {
  content: " \2192";
}

/* - Tags - */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2rem;
}
.post-tags a {
  padding: .25rem .75rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--hcdsb-primary);
  background: var(--bs-primary-bg-subtle);
  border-radius: 50rem;
}
.post-tags a:hover {
  color: #fff;
  background: var(--hcdsb-primary);
}

/* - Author - */
.author-info {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem;
  margin-top: 2.5rem;
  background: var(--hcdsb-surface);
  border-radius: var(--hcdsb-radius-lg);
}
.author-info-archive {
  margin-top: 0;
}
.author-avatar img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}
.author-name {
  margin-bottom: .25rem;
  font-size: 1.125rem;
}
.author-name a {
  color: var(--hcdsb-heading);
}
.author-description {
  margin: 0;
  color: var(--hcdsb-muted);
}
@media (max-width: 575.98px) {
  .author-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* - Previous / next post - */
.post-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}
.post-navigation-link {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem 1.25rem;
  color: var(--hcdsb-heading);
  border: 1px solid var(--hcdsb-border);
  border-radius: var(--hcdsb-radius-lg);
  transition: border-color .15s, box-shadow .15s;
}
.post-navigation-link:hover {
  color: var(--hcdsb-heading);
  border-color: var(--hcdsb-primary);
  box-shadow: var(--hcdsb-shadow);
}
.post-navigation-next {
  grid-column: 2;
  text-align: end;
}
.post-navigation-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--hcdsb-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.post-navigation-title {
  font-weight: 700;
}
@media (max-width: 575.98px) {
  .post-navigation {
    grid-template-columns: 1fr;
  }
  .post-navigation-next {
    grid-column: 1;
  }
}

/* - Pagination (gap and spacing sit with its tokens in section 1) - */
.pagination .page-link {
  min-width: 2.5rem;
  text-align: center;
  border-radius: var(--hcdsb-radius) !important;
}
/* Older / newer posts, and older / newer comments. */
.posts-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
}
.posts-pager > a:only-child[href*="page"]:not(:first-child) {
  margin-inline-start: auto;
}
/* Pages of a post split with \3c !--nextpage-->. */
.page-links {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  align-items: center;
  margin-top: 2rem;
}
.page-links-title {
  margin-inline-end: .5rem;
  font-weight: 600;
}
.post-page-numbers {
  min-width: 2.25rem;
  padding: .25rem .5rem;
  text-align: center;
  border: 1px solid var(--hcdsb-border);
  border-radius: var(--hcdsb-radius);
}
.post-page-numbers.current {
  color: #fff;
  background: var(--hcdsb-primary);
  border-color: var(--hcdsb-primary);
}

/* - Related posts - */
.post-related {
  margin-top: 3rem;
}
.post-related-title {
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
}

/* - Nothing found - */
.no-results .entry-title {
  margin-bottom: 1rem;
}


/* - News as cards (Blog layout "Cards": partials/blog/list/cards.php) - */

/* Controls on the card page (pills, View, pager) take the site's accent, not
   its primary: a school's brand colour belongs in the header, and on some
   palettes it is a red or a gold that makes a poor button. Card titles are
   links and take the link colours like every other link. */
.hcdsb-blog {
  --hcdsb-action: var(--hcdsb-accent);
  --hcdsb-action-strong: var(--hcdsb-link-hover);
  --hcdsb-ink: #334155;
  --hcdsb-card-line: color-mix(in srgb, var(--hcdsb-primary) 12%, transparent);
  padding-block: 2rem 3.5rem;
  background: var(--hcdsb-surface);
}

/* Category pills: links to each category's archive, the current one filled. */
.hcdsb-catbar {
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--hcdsb-card-line);
}
.hcdsb-catbar__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hcdsb-catbar__pill {
  display: inline-block;
  padding: .5rem .875rem;
  border: 1px solid color-mix(in srgb, var(--hcdsb-primary) 22%, transparent);
  border-radius: 999px;
  font-family: var(--hcdsb-font-ui);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1;
  color: var(--hcdsb-ink);
  text-decoration: none;
  transition: background-color .18s, border-color .18s, color .18s;
}
.hcdsb-catbar__pill:hover {
  background: color-mix(in srgb, var(--hcdsb-primary) 7%, transparent);
  color: var(--hcdsb-ink);
}
.hcdsb-catbar__pill[aria-current="page"] {
  background: var(--hcdsb-action);
  border-color: var(--hcdsb-action);
  color: #fff;
}
.hcdsb-catbar__pill[aria-current="page"]:hover {
  background: var(--hcdsb-action-strong);
  border-color: var(--hcdsb-action-strong);
}
.hcdsb-catbar__n {
  margin-inline-start: .3rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  opacity: .55;
}
.hcdsb-catbar__pill[aria-current="page"] .hcdsb-catbar__n {
  opacity: .75;
}

/* The grid: as many 272px-or-wider columns as fit, so it needs no breakpoints
   and works the same beside a sidebar. */
.hcdsb-postgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 1.375rem;
  align-items: start;
}

.hcdsb-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--hcdsb-card-line);
  border-radius: var(--hcdsb-radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 32, 56, .06), 0 6px 16px rgba(16, 32, 56, .07);
  transition: box-shadow .22s, transform .22s, border-color .22s;
}
.hcdsb-pcard:hover,
.hcdsb-pcard:focus-within {
  border-color: color-mix(in srgb, var(--hcdsb-primary) 22%, transparent);
  box-shadow: 0 2px 4px rgba(16, 32, 56, .08), 0 14px 28px rgba(16, 32, 56, .13);
  transform: translateY(-2px);
}
/* The focus ring goes on the card: the stretched link has no box of its own. */
.hcdsb-pcard:focus-within {
  outline: 2px solid var(--hcdsb-action);
  outline-offset: 2px;
}

/* 2:1 whether the image is the hcdsb-card crop or an older full-size upload. */
.hcdsb-pcard__media {
  aspect-ratio: 2 / 1;
  background-color: #dfe4ea;
  border-bottom: 1px solid var(--hcdsb-card-line);
  overflow: hidden;
}
.hcdsb-pcard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hcdsb-pcard__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: .625rem;
  padding: 1rem 1.125rem .25rem;
}
.hcdsb-pcard__chip {
  padding: .3rem .55rem;
  border-radius: .3rem;
  background: color-mix(in srgb, var(--hcdsb-primary) 7%, transparent);
  font-family: var(--hcdsb-font-ui);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--hcdsb-ink);
}
.hcdsb-pcard__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.32;
  text-wrap: balance;
}
.hcdsb-pcard__title a {
  color: var(--hcdsb-link);
  text-decoration: none;
}
/* One link over the whole card: one target, one tab stop. */
.hcdsb-pcard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hcdsb-pcard__title a:focus-visible {
  outline: none;
}
.hcdsb-pcard:hover .hcdsb-pcard__title a {
  color: var(--hcdsb-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.hcdsb-pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1.125rem 1rem;
}
.hcdsb-pcard__foot time {
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--hcdsb-muted);
}
/* Looks like a button; inert (aria-hidden, no href). */
.hcdsb-pcard__view {
  margin-inline-start: auto;
  padding: .5rem .875rem;
  border: 1px solid color-mix(in srgb, var(--hcdsb-action) 35%, transparent);
  border-radius: .45rem;
  font-family: var(--hcdsb-font-ui);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: var(--hcdsb-action);
  transition: background-color .18s, border-color .18s, color .18s;
}
.hcdsb-pcard:hover .hcdsb-pcard__view,
.hcdsb-pcard:focus-within .hcdsb-pcard__view {
  background: var(--hcdsb-action);
  border-color: var(--hcdsb-action);
  color: #fff;
}

.hcdsb-blog .pagination {
  --bs-pagination-active-bg: var(--hcdsb-action);
  --bs-pagination-active-border-color: var(--hcdsb-action);
}

/* Colour plates, for a post with no featured image. Deep enough for white
   type and muted enough to sit beside any palette; the shared hatch and
   corner light make eight colours read as one set. The count is
   HCDSB_CARD_PLATES in inc/blog-cards.php. */
.hcdsb-plate {
  position: relative;
  background-color: var(--hcdsb-primary);
  background-repeat: no-repeat;
  overflow: hidden;
}
.hcdsb-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 120% at 78% 10%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 62%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 10px);
}
.hcdsb-plate-1 { background-image: linear-gradient(152deg, #2f5688, #16294a); }
.hcdsb-plate-2 { background-image: linear-gradient(152deg, #2e6b63, #133532); }
.hcdsb-plate-3 { background-image: linear-gradient(152deg, #7a4a63, #351f2e); }
.hcdsb-plate-4 { background-image: linear-gradient(152deg, #9a7434, #43300f); }
.hcdsb-plate-5 { background-image: linear-gradient(152deg, #47617a, #1f2c38); }
.hcdsb-plate-6 { background-image: linear-gradient(152deg, #8a4a42, #38201d); }
.hcdsb-plate-7 { background-image: linear-gradient(152deg, #4c6b3e, #1f2e1a); }
.hcdsb-plate-8 { background-image: linear-gradient(152deg, #4e4c86, #22203f); }

@media (prefers-reduced-motion: reduce) {
  .hcdsb-pcard,
  .hcdsb-pcard__view,
  .hcdsb-catbar__pill {
    transition: none;
  }
  .hcdsb-pcard:hover,
  .hcdsb-pcard:focus-within {
    transform: none;
  }
}


/* ==========================================================================
 * 9. COMMENTS
 * ========================================================================== */

.comments {
  margin-top: 3rem;
}
.comments-title {
  margin-bottom: 1.5rem;
  font-size: 1.375rem;
}
.comments-list {
  padding: 0;
  margin: 0 0 2rem;
  list-style: none;
}
.media-comment {
  gap: 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--hcdsb-border);
}
/* Replies are nested inside their parent comment's body. */
.media-comment .media-comment {
  padding-bottom: 0;
  margin-top: 1.25rem;
}
.media-comment .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.comment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  align-items: baseline;
  margin-bottom: .375rem;
}
.comment-author a {
  color: var(--hcdsb-heading);
}
.comment-date {
  font-size: .8125rem;
  color: var(--hcdsb-muted);
}
.comment-reply {
  margin-inline-start: auto;
  font-size: .8125rem;
  font-weight: 600;
}
.comment-respond {
  padding: 1.5rem;
  margin-top: 2rem;
  background: var(--hcdsb-surface);
  border-radius: var(--hcdsb-radius-lg);
}
.comment-reply-title {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}
.comment-reply-title small {
  margin-inline-start: .5rem;
  font-size: .8125rem;
}
.comment-form .form-submit {
  margin: 0;
}


/* ==========================================================================
 * 10. SIDEBAR & WIDGETS
 * ========================================================================== */

.sidebar .sidebar-widget {
  margin-bottom: 2.25rem;
}
@media (max-width: 991.98px) {
  .sidebar {
    padding-top: 3rem;
    margin-top: 3rem;
    border-top: 1px solid var(--hcdsb-border);
  }
}
/* Widget titles: classic widgets use .sidebar-header, block widgets a
   heading block. Both are set as small caps labels. */
.sidebar .sidebar-header,
.sidebar .sidebar-widget :is(h2, h3).wp-block-heading {
  margin-bottom: 1rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--hcdsb-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Lists: archives, categories, pages, menus, recent posts. */
.sidebar :is(.widget_archive, .widget_categories, .widget_pages, .widget_meta, .widget_nav_menu, .widget_recent_entries, .widget_recent_comments, .wp-block-archives, .wp-block-categories, .wp-block-latest-posts, .wp-block-page-list) ul,
.sidebar ul:is(.wp-block-archives, .wp-block-categories, .wp-block-latest-posts, .wp-block-page-list) {
  padding: 0;
  margin: 0;
  list-style: none;
}
.sidebar :is(.widget_archive, .widget_categories, .widget_pages, .widget_meta, .widget_nav_menu, .widget_recent_entries, .widget_recent_comments) li,
.sidebar :is(.wp-block-archives, .wp-block-categories, .wp-block-latest-posts, .wp-block-page-list) li {
  padding-block: .5rem;
  border-bottom: 1px solid var(--hcdsb-border);
}
.sidebar :is(.wp-block-archives, .wp-block-categories, .wp-block-latest-posts, .wp-block-page-list) li:last-child,
.sidebar :is(.widget_archive, .widget_categories, .widget_pages, .widget_meta, .widget_nav_menu, .widget_recent_entries, .widget_recent_comments) li:last-child {
  border-bottom: 0;
}
.sidebar :is(.wp-block-archives, .wp-block-categories, .wp-block-latest-posts, .wp-block-page-list, .widget_archive, .widget_categories, .widget_pages, .widget_nav_menu, .widget_recent_entries) a {
  color: var(--hcdsb-text);
}
.sidebar :is(.wp-block-archives, .wp-block-categories, .wp-block-latest-posts, .wp-block-page-list, .widget_archive, .widget_categories, .widget_pages, .widget_nav_menu, .widget_recent_entries) a:hover {
  color: var(--hcdsb-link-hover);
}
.sidebar li ul {
  padding-inline-start: 1rem;
  margin-top: .5rem;
}
.sidebar .wp-block-latest-posts__post-date,
.sidebar .post-date {
  display: block;
  font-size: .8125rem;
  color: var(--hcdsb-muted);
}

/* Tag cloud: pills of one size. */
.wp-block-tag-cloud,
.tagcloud {
  display: flex;
  margin-bottom: 0;
  flex-wrap: wrap;
  gap: .375rem;
}
.wp-block-tag-cloud a,
.tagcloud a {
  padding: .25rem .75rem;
  margin: 0;
  font-size: .8125rem !important;
  color: var(--hcdsb-text);
  background: var(--hcdsb-surface);
  border: 1px solid var(--hcdsb-border);
  border-radius: 50rem;
}
.wp-block-tag-cloud a:hover,
.tagcloud a:hover {
  color: #fff;
  background: var(--hcdsb-primary);
  border-color: var(--hcdsb-primary);
}

/* Calendar */
.wp-calendar-table,
#wp-calendar {
  width: 100%;
  font-size: .875rem;
  text-align: center;
}
.wp-calendar-table caption,
#wp-calendar caption {
  padding-top: 0;
  font-weight: 700;
  color: var(--hcdsb-heading);
  caption-side: top;
}
.wp-calendar-table :is(th, td) {
  padding: .375rem 0;
}
.wp-calendar-table th {
  font-size: .75rem;
  color: var(--hcdsb-muted);
}
.wp-calendar-table td a {
  font-weight: 700;
}
.wp-calendar-table #today {
  font-weight: 700;
  color: var(--hcdsb-primary);
  background: var(--bs-primary-bg-subtle);
  border-radius: var(--hcdsb-radius);
}
.wp-calendar-nav {
  display: flex;
  justify-content: space-between;
  font-size: .875rem;
}

/* Search: the theme's form (hcdsb_custom_search_form) is a Bootstrap input
   group; the block's form gets the same shape. */
.wp-block-search__inside-wrapper {
  display: flex;
}
.wp-block-search__input {
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
}
.wp-block-search__button {
  padding: .5rem 1rem;
  margin: 0;
  font-weight: 600;
  color: #fff;
  background: var(--hcdsb-primary);
  border: 1px solid var(--hcdsb-primary);
  border-radius: 0 var(--hcdsb-radius) var(--hcdsb-radius) 0;
}
.wp-block-search__button:hover {
  background: var(--hcdsb-primary-hover);
}
.wp-block-search__label {
  display: block;
  margin-bottom: .5rem;
}

/* Social links block: brand colours from core, spacing from here. */
.wp-block-social-links {
  gap: .5rem;
  padding: 0;
}


/* ==========================================================================
 * 11. COMPONENTS
 * Buttons, quote-format posts and the related-post cards. Everything else
 * an editor builds (cards, heroes, accordions, tabs, carousels, alerts) is
 * blocks: see blocks.css and the hcdsb-blocks plugin.
 * ========================================================================== */

/* - Buttons - */
.btn {
  font-weight: 600;
}
.btn .fa {
  margin-inline-end: .375rem;
}
.btn-icon-right .fa {
  margin-inline: .375rem 0;
}

/* - Quote: quote-format posts (hcdsb_shortcode_blockquote) - */
.hcdsb-quote {
  padding-inline-start: 1.25rem;
  border-inline-start: 4px solid var(--hcdsb-accent);
}
.hcdsb-quote.text-center,
.hcdsb-quote.text-end {
  padding-inline-start: 0;
  border-inline-start: 0;
}
.hcdsb-quote .blockquote {
  padding: 0;
  margin-bottom: .5rem;
  border: 0;
}
.hcdsb-quote .blockquote p {
  margin: 0;
  font-family: var(--hcdsb-font-quote);
  font-style: var(--hcdsb-quote-style);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--hcdsb-heading);
}
.hcdsb-quote .blockquote-footer {
  margin: 0;
}

/* - Post cards: related posts - */
.post-card {
  overflow: hidden;
  border-color: var(--hcdsb-border);
  border-radius: var(--hcdsb-radius-lg);
  transition: box-shadow .2s, transform .2s;
}
.post-card:hover {
  box-shadow: var(--hcdsb-shadow-lg);
  transform: translateY(-2px);
}
.post-card-media img {
  object-fit: cover;
  border-radius: 0;
}
.post-card-title {
  margin-bottom: .5rem;
  font-size: 1.125rem;
  line-height: 1.3;
}
.post-card-title a {
  color: var(--hcdsb-heading);
}
.post-card:hover .post-card-title a {
  color: var(--hcdsb-link);
}
.post-card .card-text {
  font-size: .9375rem;
  color: var(--hcdsb-muted);
}
.post-card-meta {
  font-size: .8125rem;
  color: var(--hcdsb-muted);
  background: none;
  border-top-color: var(--hcdsb-border);
}
.post-card-quote .hcdsb-quote {
  margin: 0;
}

/* Image style: the photo fills the card, the title sits on a gradient. */
.post-card-overlay {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 16rem;
  overflow: hidden;
  color: #fff;
  background-color: var(--hcdsb-primary);
  background-position: center;
  background-size: cover;
  border-radius: var(--hcdsb-radius-lg);
}
.post-card-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, .05) 65%);
  transition: opacity .2s;
}
.post-card-overlay:hover::before {
  opacity: .85;
}
.post-card-overlay-content {
  position: relative;
  padding: 1.25rem;
}
.post-card-overlay .post-card-title a,
.post-card-overlay .post-card-meta {
  color: #fff;
}

/* List style: thumbnail beside the title. */
.post-list {
  display: flex;
  flex-direction: column;
}
.post-list-item {
  position: relative;
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-block: .875rem;
  border-bottom: 1px solid var(--hcdsb-border);
}
.post-list > :last-child .post-list-item {
  border-bottom: 0;
}
.post-list-image {
  flex: 0 0 4.5rem;
}
.post-list-image img {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: var(--hcdsb-radius);
}
.post-list-title {
  margin: 0 0 .125rem;
  font-size: 1rem;
}
.post-list-title a {
  color: var(--hcdsb-heading);
}
.post-list-item:hover .post-list-title a {
  color: var(--hcdsb-link);
}
.post-list-date {
  font-size: .8125rem;
  color: var(--hcdsb-muted);
}
.post-list-quote {
  margin: 0;
  font-family: var(--hcdsb-font-quote);
  font-style: var(--hcdsb-quote-style);
}


/* ==========================================================================
 * 12. UTILITIES
 * ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .post-figure-link img,
  .post-card {
    transition: none;
  }
  .post-figure-link:hover img,
  .post-card:hover {
    transform: none;
  }
}

/* - Back to top - */
/* theme.js slides it in (bottom, opacity) once the page has scrolled.
   Colours are the child theme's. */
.go-top {
  position: fixed !important;
  inset-inline-end: 1rem;
  bottom: -44px;
  z-index: 100;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.25rem;
  opacity: 0;
  border-radius: var(--hcdsb-radius);
  box-shadow: var(--hcdsb-shadow-lg);
  transition: bottom .4s, opacity .4s;
}
.go-top-circle {
  border-radius: 50%;
}
@media (max-width: 991.98px) {
  .go-top:not(.go-top-mobile) {
    display: none;
  }
}