/* Cantus Modalis: house style (maroon, cream, rust, olive; Ashbury headings) in a calmer, more readable layout.
   Colour pairs used for text were checked against WCAG 2.2 AA (4.5:1 for text, 3:1 for focus rings and borders). */

@font-face {
  font-family: "Ashbury-Light";
  src: url("../../../../../images/fonts/ashbury/27CC8B_0_0.woff") format("woff"),
       url("../../../../../images/fonts/ashbury/27CC8B_0_0.ttf") format("truetype");
  font-display: swap;
}

:root {
  --cm-maroon: #612c34;
  --cm-maroon-dark: #4a1f27;
  --cm-cream: #faf6d7;
  --cm-paper: #fffdf6;
  --cm-rust: #b15228;
  --cm-rust-dark: #8f3f1c;
  --cm-olive: #b5b55b;
  --cm-olive-light: #eeeccb;
  --cm-olive-dark: #5c5c1f;
  --cm-ink: #2b2522;
  --cm-ink-soft: #4d4542;
  --cm-line: #e4dfc0;
  --cm-focus: #b15228;
  --cm-radius: 8px;
  --cm-shadow: 0 1px 2px rgb(74 31 39 / 6%), 0 4px 16px rgb(74 31 39 / 8%);
  --cm-heading: "Ashbury-Light", Georgia, "Times New Roman", serif;
  --cm-text: Georgia, "Times New Roman", serif;

  --cassiopeia-color-primary: var(--cm-maroon);
  --cassiopeia-color-link: var(--cm-maroon);
  --cassiopeia-color-hover: var(--cm-rust-dark);
  --link-color: var(--cm-maroon);
  --link-color-rgb: 97, 44, 52;
  --link-hover-color: var(--cm-rust-dark);
  --link-hover-color-rgb: 143, 63, 28;
  --body-bg: var(--cm-cream);
  --body-color: var(--cm-ink);
  --body-font-family: var(--cm-text);
  --body-font-size: 1.125rem;
  --body-line-height: 1.65;
}

/* ---------- Base typography ---------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.site {
  background-color: var(--cm-cream);
  color: var(--cm-ink);
  font-family: var(--cm-text);
  font-size: 1.125rem;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.page-header h1, .item-title {
  font-family: var(--cm-heading);
  font-weight: normal;
  color: var(--cm-maroon);
  line-height: 1.2;
  letter-spacing: 0.005em;
  overflow-wrap: break-word;
}
h1, .page-header h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); margin: 0 0 1.25rem; }
h2 { font-size: clamp(1.55rem, 1.3rem + 1vw, 1.9rem); margin: 2.25rem 0 0.75rem; }
h3 { font-size: 1.4rem; margin: 1.75rem 0 0.5rem; }
h4, h5, h6 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }

p, ul, ol, dl, table, blockquote { margin-top: 0; margin-bottom: 1rem; }

a {
  color: var(--cm-maroon);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--cm-rust-dark);
  text-decoration-thickness: 2px;
}

/* One clearly visible focus indicator everywhere (WCAG 2.4.7 / 2.4.11) */
:focus-visible {
  outline: 3px solid var(--cm-focus);
  outline-offset: 3px;
  border-radius: 3px;
  box-shadow: none;
}

::selection { background: var(--cm-olive-light); color: var(--cm-ink); }

/* ---------- Header ---------- */

.container-header {
  background: var(--cm-cream);
  color: var(--cm-maroon);
  box-shadow: none;
}
.container-header .grid-child { padding-top: 0; padding-bottom: 0; }
.container-header .navbar-brand {
  padding: 1.75rem 0 1.25rem;
  margin: 0;
  white-space: normal;
}
.container-header .navbar-brand,
.container-header .navbar-brand a,
.container-header .brand-logo {
  color: var(--cm-maroon);
  font-family: var(--cm-heading);
  font-size: clamp(2.1rem, 1.5rem + 2.5vw, 3rem);
  line-height: 1.1;
  text-decoration: none;
}
.container-header .navbar-brand a:hover { color: var(--cm-rust-dark); }
.container-header .site-description {
  color: var(--cm-ink-soft);
  font-family: var(--cm-text);
  font-size: 1.1rem;
  font-style: italic;
  margin-top: 0.35rem;
}

.container-header .container-nav {
  background-color: var(--cm-maroon);
  border-radius: var(--cm-radius);
  padding: 0.25rem 0.5rem;
  margin-bottom: 2rem;
  align-items: center;
  box-shadow: var(--cm-shadow);
}
.container-header .container-nav :focus-visible,
.container-header .metismenu > li > a:focus-visible,
.container-header .metismenu > li > button:focus-visible,
.mod-languages a:focus-visible {
  outline: 3px solid var(--cm-cream) !important;
  outline-offset: 2px;
}

.container-header .mod-menu,
.container-header .metismenu {
  font-family: var(--cm-text);
  font-size: 1.05rem;
}
.container-header .metismenu > li > a,
.container-header .metismenu > li > button,
.container-header .metismenu > li > .mod-menu__heading {
  color: var(--cm-cream);
  padding: 0.7rem 0.9rem;
  min-height: 44px;
  border-radius: 6px;
  text-decoration: none;
  opacity: 1;
}
/* The whole item (link plus dropdown arrow) is coloured as one piece; Cassiopeia's own item padding
   would only widen the menu, the link padding gives the spacing */
.container-header .metismenu.mod-menu > .metismenu-item { border-radius: 6px; padding: 0; margin: 0 0.1rem; }
/* Between the hamburger breakpoint and wide screens the menu and language switcher must share one row */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container-header .metismenu.mod-menu > .metismenu-item > a { padding-left: 0.6rem; padding-right: 0.6rem; }
  .container-header .metismenu.mod-menu > .metismenu-item.parent > a { padding-right: 0.15rem; }
  .container-header .metismenu.mod-menu > .metismenu-item.parent > button.mm-toggler { min-width: 36px; padding-right: 0.6rem; padding-left: 0.25rem; }
  .mod-languages a { padding-left: 0.55rem; padding-right: 0.55rem; }
}
@media (min-width: 992px) and (max-width: 1079.98px) {
  .container-header .metismenu.mod-menu > .metismenu-item { font-size: 1rem; }
  .container-header .metismenu.mod-menu > .metismenu-item > a { padding-left: 0.45rem; padding-right: 0.45rem; }
  .container-header .container-nav { padding-left: 0.25rem; padding-right: 0.25rem; }
}
.container-header .metismenu.mod-menu > .metismenu-item > a::after,
.container-header .metismenu.mod-menu > .metismenu-item > button::before { display: none; }
.container-header .metismenu > li > a,
.container-header .metismenu > li > button { background-color: transparent; }
.container-header .metismenu > li:hover { background-color: var(--cm-maroon-dark); }
.container-header .metismenu > li:hover > a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.container-header .metismenu > li.active,
.container-header .metismenu > li.current {
  background-color: var(--cm-rust-dark);
}
.container-header .metismenu > li.active > a,
.container-header .metismenu > li.current > a { color: #fff; }

/* Dropdown arrow: room on the right and a 44px target, closer to its label */
.container-header .metismenu > li.parent > a { padding-right: 0.25rem; }
.container-header .metismenu > li.parent > button.mm-toggler {
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.9rem 0 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.container-header .metismenu > li.parent > button.mm-toggler::after { margin-left: 0; }
/* Cassiopeia draws a thin bar under menu items; the coloured background is enough */
.container-header .metismenu > li > a::after,
.container-header .metismenu > li > button::before { background: transparent; }

.container-header .metismenu .mm-collapse {
  background-color: var(--cm-paper);
  border: 1px solid var(--cm-line);
  border-top: 3px solid var(--cm-rust);
  border-radius: 0 0 var(--cm-radius) var(--cm-radius);
  box-shadow: var(--cm-shadow);
  padding: 0.35rem 0;
  min-width: 15rem;
}
.container-header .metismenu .mm-collapse a {
  color: var(--cm-maroon);
  border-top: 0;
  padding: 0.6rem 1rem;
  text-decoration: none;
  display: block;
}
.container-header .metismenu .mm-collapse a:hover,
.container-header .metismenu .mm-collapse a:focus-visible {
  background-color: var(--cm-olive-light);
  color: var(--cm-maroon-dark);
  text-decoration: underline;
}
.container-header .metismenu .mm-collapse :focus-visible { outline-color: var(--cm-focus); outline-offset: -3px; }

.container-header .navbar-toggler {
  color: var(--cm-cream);
  border: 2px solid var(--cm-cream);
  border-radius: 6px;
  min-width: 44px;
  min-height: 44px;
}

/* Language switcher: text links instead of tiny flags */
.container-header .container-search { margin: 0 0 0 auto; }
.mod-languages ul.lang-inline { display: flex; gap: 0.25rem; margin: 0; padding: 0; }
.mod-languages ul.lang-inline li { margin: 0; }
.mod-languages a {
  display: inline-block;
  color: var(--cm-cream);
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  font-size: 1rem;
  text-decoration: none;
}
.mod-languages a:hover { background-color: var(--cm-maroon-dark); color: #fff; text-decoration: underline; }
.mod-languages .lang-active a {
  background-color: var(--cm-cream);
  color: var(--cm-maroon);
}

/* ---------- Page grid: wider reading column, slimmer sidebars ---------- */

@media (min-width: 992px) {
  .wrapper-static .site-grid,
  .site-grid {
    grid-template-columns:
      [full-start] minmax(1rem, 1fr)
      [main-start] minmax(0, 16.5rem) minmax(0, 23.5rem) minmax(0, 23.5rem) minmax(0, 15rem)
      [main-end] minmax(1rem, 1fr) [full-end];
    column-gap: 2rem;
  }
  .container-header .grid-child {
    max-width: calc(77rem + 6rem);
  }
}

.site-grid > .grid-child { padding-top: 0; }

/* ---------- Main content: light reading panel with the rust accent ---------- */

.container-component > main > .com-content-article,
.container-component > main > .item-page,
.container-component > main > .blog,
.container-component > main > .com-content-category,
.container-component > main > .com-content-category-blog,
.container-component > main > .categories-list,
.container-component > main > #icagenda,
.container-component > main > .ic-event,
.container-component > main > .com-icagenda {
  background-color: var(--cm-paper);
  border-left: 6px solid var(--cm-rust);
  border-radius: var(--cm-radius);
  padding: clamp(1.25rem, 0.75rem + 2.5vw, 2.75rem);
  box-shadow: var(--cm-shadow);
  margin-bottom: 2rem;
}

.com-content-article__body,
.blog-item .item-content,
.com-content-category-blog__item {
  max-width: 70ch;
}
.com-content-article__body h2:first-child { margin-top: 0; }

/* Section headings in articles carry a short olive rule, a nod to the old olive panels */
.com-content-article__body h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin-top: 0.5rem;
  background: var(--cm-olive);
  border-radius: 2px;
}

.com-content-article__body img,
.container-component img {
  max-width: 100%;
  height: auto;
}
main img[style*="float: left"],
main img[align="left"] { margin: 0.25rem 1.25rem 1rem 0; }
main img[style*="float: right"],
main img[align="right"] { margin: 0.25rem 0 1rem 1.25rem; }

/* Old Word tables had fixed point widths; let them fit the column */
.com-content-article__body table,
.com-content-article__body td,
.com-content-article__body th {
  max-width: 100%;
}
.com-content-article__body table[style*="width"],
.com-content-article__body td[style*="width"] { width: auto !important; }
.com-content-article__body td,
.com-content-article__body th {
  padding: 0.4rem 0.6rem;
  vertical-align: top;
}
.table, .table > :not(caption) > * > * {
  --table-bg: transparent;
  background-color: transparent;
}

/* Highlighted block on the homepage (Dr. Stewart's essay) */
.cm-feature {
  background: var(--cm-cream);
  border: 1px solid var(--cm-line);
  border-left: 6px solid var(--cm-olive);
  border-radius: var(--cm-radius);
  padding: 1.25rem 1.5rem 0.5rem;
  margin: 1.75rem 0 2rem;
}
.cm-feature__label {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--cm-ink-soft);
  margin-bottom: 0.25rem;
}
.com-content-article__body .cm-feature__title { margin-top: 0; }
.com-content-article__body .cm-feature__title::after { display: none; }
.cm-feature .btn { text-decoration: none; padding: 0.6rem 1.25rem; }

blockquote {
  border-left: 3px solid var(--cm-olive);
  padding-left: 1rem;
  color: var(--cm-ink-soft);
  font-style: italic;
}

hr { border: 0; border-top: 1px solid var(--cm-line); opacity: 1; margin: 2rem 0; }

/* Article meta and blog listings */
.article-info, .com-content-article__info, .article-info-term {
  color: var(--cm-ink-soft);
  font-size: 0.95rem;
}
.blog-item, .com-content-category-blog__item {
  background: transparent;
  border-bottom: 1px solid var(--cm-line);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}
.blog-item:last-child { border-bottom: 0; }
.readmore .btn, .btn-secondary {
  --btn-bg: transparent;
  --btn-color: var(--cm-maroon);
  --btn-border-color: var(--cm-maroon);
  --btn-hover-bg: var(--cm-maroon);
  --btn-hover-color: #fff;
  --btn-hover-border-color: var(--cm-maroon);
}

/* The small Falang credit line under the content: readable size */
.container-component main > div:last-child,
.container-component main > div:last-child a {
  font-size: 0.875rem !important;
  color: var(--cm-ink-soft);
}

/* ---------- Sidebars ---------- */

.container-sidebar-left .card,
.container-sidebar-right .card {
  background-color: var(--cm-paper);
  border: 0;
  border-radius: var(--cm-radius);
  box-shadow: var(--cm-shadow);
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.container-sidebar-left .card-body,
.container-sidebar-right .card-body { padding: 1.1rem 1.25rem; }
.container-sidebar-left .card-header,
.container-sidebar-right .card-header {
  background-color: transparent;
  color: var(--cm-maroon);
  font-family: var(--cm-heading);
  font-size: 1.45rem;
  border-bottom: 0;
  padding: 1.1rem 1.25rem 0;
}
.container-sidebar-left .card-header::after,
.container-sidebar-right .card-header::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-top: 0.4rem;
  background: var(--cm-olive);
  border-radius: 2px;
}
.container-sidebar-left img,
.container-sidebar-right img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
/* Photo-only modules: let the picture fill the card */
.container-sidebar-right .card-body > .mod-custom:only-child,
.container-sidebar-left #mod-custom97 { line-height: 0; }
.container-sidebar-right .card:has(.mod-custom img:only-child) .card-body,
.container-sidebar-left .card:has(#mod-custom97) .card-body { padding: 0; }
.container-sidebar-right .card:has(.mod-custom img:only-child) img,
.container-sidebar-left #mod-custom97 img { border-radius: 0; width: 100%; display: block; }
/* The image sits in a <p>; its bottom margin showed as a light strip under the photo */
.container-sidebar-right .card:has(.mod-custom img:only-child) p,
.container-sidebar-left #mod-custom97 p { margin: 0; }

/* Workshop teaser (module 91): the rust card from the old site */
.container-sidebar-left .card:has(.mod-articlescategory),
.container-sidebar-left .moduletable-91 {
  background: var(--cm-rust-dark);
  color: #fff;
}
.container-sidebar-left .card:has(.mod-articlescategory) .card-header,
.container-sidebar-left .card:has(.mod-articlescategory) a { color: #fff; }
.container-sidebar-left .card:has(.mod-articlescategory) .card-header::after { background: var(--cm-cream); }
.container-sidebar-left .card:has(.mod-articlescategory) :focus-visible { outline-color: #fff; }

/* Login form */
.mod-login .form-control { font-size: 1rem; min-height: 44px; }
.mod-login .btn { min-height: 44px; }

/* ---------- iCagenda ---------- */

#icagenda {
  font-size: 1.05rem;
}
/* Event list module: show nothing at all when there are no upcoming events */
.card:has(.ic_eventlist .ic-msg-no-event) { display: none; }
#icagenda .icinfo,
#icagenda .ic-box,
#icagenda .ic-event {
  background-color: transparent;
  margin-bottom: 1rem;
}
#icagenda .ic-label, #icagenda .ic-info-label { color: var(--cm-ink-soft); }
.ic_eventlist { font-size: 1rem; }
.ic_eventlist .ic-section { padding: 0; }

/* Calendar module: needs about 245px, so less padding around it; no horizontal scrolling */
.card:has(.ic-calendar-main) .card-body { padding-left: 0.5rem; padding-right: 0.5rem; }
.ic-calendar-main { font-size: 1rem; }

/* Newsletter form (embedded by the mail provider, whose own rules use an ID and !important):
   house-coloured button and links with enough contrast */
.com-content-article__body #eprov-fkt3dj0zfw .form button,
.com-content-article__body form button[type="submit"] {
  background-color: var(--cm-maroon) !important;
  border-color: var(--cm-maroon) !important;
  color: #fff !important;
  min-height: 44px;
}
.com-content-article__body #eprov-fkt3dj0zfw .form button:hover,
.com-content-article__body form button[type="submit"]:hover { background-color: var(--cm-rust-dark) !important; }
.com-content-article__body #eprov-fkt3dj0zfw .text a,
.com-content-article__body #eprov-fkt3dj0zfw .form a { color: var(--cm-maroon) !important; }

/* ---------- Buttons and forms ---------- */

.btn { min-height: 44px; border-radius: 6px; }
.btn-primary {
  --btn-bg: var(--cm-maroon);
  --btn-border-color: var(--cm-maroon);
  --btn-hover-bg: var(--cm-rust-dark);
  --btn-hover-border-color: var(--cm-rust-dark);
  --btn-color: #fff;
  --btn-hover-color: #fff;
  background-color: var(--cm-maroon);
  border-color: var(--cm-maroon);
}
.form-control, .form-select { border-color: #8a807a; }

/* ---------- Footer and back-to-top ---------- */

.footer { background: var(--cm-maroon); color: var(--cm-cream); }
.footer a { color: var(--cm-cream); }

.back-to-top-link {
  background-color: var(--cm-maroon);
  border: 2px solid var(--cm-cream);
  color: var(--cm-cream);
  min-width: 44px;
  min-height: 44px;
}
.back-to-top-link:hover { background-color: var(--cm-rust-dark); color: #fff; }

/* Skip-to button (System - Skip To plugin) in house colours */
.skip-to button {
  background: var(--cm-maroon) !important;
  color: #fff !important;
  border-radius: 0 0 6px 6px;
}

/* ---------- Small screens ---------- */

@media (max-width: 991.98px) {
  .container-header .navbar-brand { padding: 1.25rem 0 1rem; }
  .container-header .container-nav { margin-bottom: 1.25rem; }
  .container-header .metismenu > li > a,
  .container-header .metismenu > li > button { display: flex; align-items: center; }
  .container-header .metismenu .mm-collapse { box-shadow: none; border: 0; border-left: 3px solid var(--cm-rust); border-radius: 0; background: var(--cm-maroon-dark); }
  /* Cassiopeia lets the submenu float over the page at every width; in the folded-out mobile menu it should push the rest down */
  .container-header .metismenu.mod-menu .metismenu-item > ul,
  .container-header .metismenu.mod-menu .mm-collapse { position: static; flex-basis: 100%; width: 100%; min-width: 0; margin-top: 0.25rem; }
  .container-header .metismenu.mod-menu > .metismenu-item { flex-wrap: wrap; }
  .container-header .metismenu .mm-collapse a { color: var(--cm-cream); }
  .container-header .metismenu .mm-collapse a:hover,
  .container-header .metismenu .mm-collapse a:focus-visible { background: var(--cm-maroon); color: #fff; }
  .container-header .metismenu .mm-collapse :focus-visible { outline-color: var(--cm-cream); }
  .container-component > main > .com-content-article,
  .container-component > main > .item-page,
  .container-component > main > .blog,
  .container-component > main > #icagenda { border-left-width: 4px; }
  main img[style*="float"],
  main img[align] { float: none !important; display: block; margin: 0 0 1rem; }
}

@media (max-width: 575.98px) {
  body.site { font-size: 1.0625rem; }
  .site-grid { column-gap: 0; }
  .site-grid > .grid-child { padding-left: 0.75rem; padding-right: 0.75rem; }
  .container-header .grid-child { padding-left: 0.75rem; padding-right: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .container-header .container-nav, .container-sidebar-left, .container-sidebar-right, .back-to-top-link { display: none; }
  .container-component > main > * { box-shadow: none; border: 0; padding: 0; }
}