/**
 * ISBA base theme styles
 * Derived from Drupal 7 site (2025-06-05)
 */

/* ---------- Custom properties ---------- */

:root {
  /* color-scheme: light dark; */

  /* Weights */
  --font-weight-text: normal;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heading: 600;
  --font-weight-link: 600;
  --font-weight-label: 600;
  --font-weight-button: 600;
  --font-weight-button-link: 700;

  /* Leading */
  --font-lineheight-tallest: 1.8;
  --font-lineheight-taller: 1.65;
  --font-lineheight-normal: 1.5;
  --font-lineheight-shorter: 1.35;
  --font-lineheight-shortest: 1.2;

  /* Absolute font sizes (11-25px) */
  --font-size-minus-4: 0.73334rem;
  --font-size-minus-3: 0.8rem;
  --font-size-minus-2: 0.86666rem;
  --font-size-minus-1: 0.93333rem;
  --font-size-base: 1rem; /* 15px */
  --font-size-plus-1: 1.06666rem;
  --font-size-plus-2: 1.13333rem;
  --font-size-plus-3: 1.2rem;
  --font-size-plus-4: 1.26666rem;
  --font-size-plus-5: 1.33333rem;
  --font-size-plus-6: 1.4rem;
  --font-size-plus-7: 1.46666rem;
  --font-size-plus-8: 1.53333rem;
  --font-size-plus-9: 1.6rem;
  --font-size-plus-10: 1.66666rem;

  /* Relative font sizes */
  --font-size-smaller-2: 0.86666em;
  --font-size-smaller: 0.93333em;
  --font-size-bigger: 1.06666em;
  --font-size-bigger-2: 1.13333em;

  /* Fonts */
  --font-family-text: "Open Sans", sans-serif;
  --font-ligatures-text: normal;
  --font-lineheight-text: var(--font-lineheight-normal);
  --font-size-content: var(--font-size-base);
  --font-text: var(--font-weight-text) var(--font-size-content)/var(--font-lineheight-text) var(--font-family-text);

  --font-family-heading: "Raleway", sans-serif;
  --font-ligatures-heading: no-common-ligatures; /* Prevent "ff" ligatures */
  --font-lineheight-heading: var(--font-lineheight-shortest);
  --font-heading: var(--font-weight-heading) var(--font-size-content)/var(--font-lineheight-heading) var(--font-family-heading);

  /* Colors */
  --color-primary: #910028; /* Brand red */
  --color-primary-light: #b80235;
  --color-primary-dark: #5d0000;

  /* Based on Open Color: https://yeun.github.io/open-color/ */
  --white:   #fff;
  --gray-0:  hsl(202, 1%, 98%);  /* #fafafa */
  --gray-1:  hsl(202, 2%, 95%);  /* #f2f2f3 */
  --gray-2:  hsl(202, 3%, 93%);  /* #ededee */
  --gray-3:  hsl(202, 3%, 89%);  /* #e2e3e4 */
  --gray-4:  hsl(202, 6%, 83%);  /* #d1d4d6 */
  --gray-5:  hsl(202, 8%, 71%);  /* #afb7bb */
  --gray-6:  hsl(202, 11%, 56%); /* #82929b */
  --gray-7:  hsl(202, 14%, 44%); /* #607480 (AA) */
  --gray-8:  hsl(202, 17%, 31%); /* #42535d (AAA) */
  --gray-9:  hsl(202, 19%, 23%); /* #303e46 */
  --gray-10: hsl(202, 20%, 18%); /* #253037 */
  --gray-11: hsl(202, 22%, 15%); /* #1e282f */
  --gray-12: hsl(202, 24%, 12%); /* #172126 */
  --black:   hsl(202, 25%, 9%);  /* #11181d */

  --color-secondary-light: var(--gray-8); /* Brand teal #42535d */
  --color-secondary: var(--gray-9); /* Dark teal */
  --color-secondary-dark: var(--gray-10);

  --color-text-dark: var(--gray-10);   /* or test #161e22 */
  --color-text: var(--gray-9);         /* Previous: #424a52; or test #2e3f49 */
  --color-text-lighter: var(--gray-8);
  --color-text-light: var(--gray-7);   /* Previous: #42535d; or test #445c69 */

  --color-heading: var(--gray-9);

  --color-text-bright: var(--gray-1); /* For always-dark backgrounds */
  --color-text-brighter: var(--gray-0);
  --color-text-brightest: var(--white);

  --color-link: var(--color-primary);
  --color-link-light: var(--color-primary-light);
  --color-link-dark: var(--color-primary-dark);
  --color-link-hover: var(--color-primary);

  --color-button-background: var(--color-primary);
  --color-button-background-hover: var(--color-primary-light);
  --color-button-text: var(--color-text-brightest);
  --color-button-text-hover: var(--color-text-brightest);

  --color-background: var(--white);

  --color-highlight-background: var(--gray-9);
  --color-highlight-background-hover: var(--gray-8);
  --color-highlight-text: var(--color-text-bright);
  --color-highlight-link: var(--color-text-brightest);
  --color-highlight-link-hover: var(--color-text-bright);

  --color-bar-background: var(--color-primary);
  --color-bar-text: var(--color-text-brightest);

  --color-box-background: var(--gray-2);
  --color-box-background-parts: 202, 3%, 93%; /* For translucent boxes */
  --color-box-text: var(--color-text);
  --color-box-sep: var(--gray-1);
  --color-box-hr: var(--gray-1);
  --color-box-background-highlight: var(--gray-0);

  --color-darker-box-background: var(--gray-4);
  --color-dark-box-background: var(--gray-3);

  --color-light-box-background: var(--gray-1);
  --color-light-box-text: var(--color-text);
  --color-light-box-border: var(--gray-2);
  --color-light-box-sep: var(--gray-0);
  --color-light-box-hr: var(--gray-0);

  --color-lightest-box-background: var(--gray-0);

  --color-hr: var(--gray-4); /* Old: d3d8db */
  --color-border: var(--gray-4);
  --color-border-light: var(--gray-2);

  --color-field-background: var(--color-background);
  --color-field-border: var(--gray-4);

  --color-unpublished-background: #fff4f4;
  --color-unpublished-background-dark: #f8d7da;
  --color-unpublished-text: #721c24;

  --color-mark: #feffc8;
}

@media (prefers-color-scheme: ~~~dark) {
  :root {
    --color-text-dark: var(--gray-1);
    --color-text: var(--gray-2);
    --color-text-lighter: var(--gray-3);
    --color-text-light: var(--gray-4);

    --color-heading: var(--gray-2);

    --color-link: #7abfff;
    --color-link-light: #9ccfff;
    --color-link-dark: #57aeff;
    --color-link-hover: #7abfff;

    --color-background: var(--black);

    --color-box-background: var(--gray-10);
    --color-box-background-parts: 202, 20%, 18%; /* For translucent boxes */
    --color-box-sep: var(--gray-11);
    --color-box-hr: var(--gray-11);
    --color-box-background-highlight: var(--gray-12);

    --color-darker-box-background: var(--gray-8);
    --color-dark-box-background: var(--gray-9);

    --color-light-box-background: var(--gray-11);
    --color-light-box-border: var(--gray-10);
    --color-light-box-sep: var(--black);
    --color-light-box-hr: var(--black);

    --color-lightest-box-background: var(--gray-12);

    --color-hr: var(--gray-8);
    --color-border: var(--gray-8);
    --color-border-light: var(--gray-9);

    --color-field-background: var(--color-background);
    --color-field-border: var(--gray-8);

    --color-unpublished-background: #330606;
    --color-unpublished-background-dark: #570c0c;
    --color-unpublished-text: #f4bac0;

    --color-mark: #555;
  }

  /* Dim images */
  main img:not(.no-darkmode) {
    filter: brightness(85%) contrast(115%);
  }

  /* Brighten SVG icons */
  main img[src$=".svg"]:not(.no-darkmode) {
    filter: brightness(220%) contrast(120%);
  }
  /* Except those defined with alternate images (picture > source) */
  main picture > source[media] + img[src$=".svg"] {
    filter: unset;
  }
}



/* --------------- Formatting --------------- */

html {
  font-size: 0.9375em !important; /* 15px base */
  line-height: var(--font-lineheight-text) !important;
  font-family: var(--font-family-text) !important;
  height: 100%;

  /* Prevent iOS text size adjust after orientation change */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--color-background) !important;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--color-text) !important;
  font-family: inherit !important;
  line-height: inherit !important;
}

p, ul, ol, li, dt, dd, td, th {
  line-height: var(--font-lineheight-text);
}
sup,
sub {
  font-size: var(--font-size-minus-4);
}
small > sup,
small > sub {
  font-size: var(--font-size-minus-4);
}

/* --- Links --- */
a {
  text-decoration: none;
  font-weight: var(--font-weight-link);
  color: var(--color-link);
  transition: color 0.2s, background-color 0.2s;
}
a:hover,
a:active {
  text-decoration: underline;
}

/* No color links (typically for redundant heading links) */
a.no-color {
  color: var(--color-text-dark);
}

/* Force breaks in long links */
main a {
  overflow-wrap: break-word;
  word-break: break-word;
}


/* Link button */
.button {
  display: inline-flex; /* Prevent wrapping under icon */
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin: 0;
  padding: 0.8rem 2.2rem;
  cursor: pointer;
  border: none;
  border-radius: 2.14rem;
  background-image: none;
  background-color: var(--color-button-background);
  color: var(--color-button-text);
  font-size: var(--font-size-minus-1);
  font-weight: var(--font-weight-button-link);
  font-family: var(--font-family-text);
  line-height: var(--font-lineheight-shortest);
  text-decoration: none;
  letter-spacing: 0.023rem;
  text-shadow: none;
  text-transform: uppercase;
  text-align: center;
}
  .button:hover,
  .button:focus,
  .button:active {
    background-color: var(--color-button-background-hover);
    border: none;
    color: var(--color-button-text-hover);
    text-decoration: none;
  }
  .button.disabled,
  .button[disabled] {
    opacity: 0.4;
    cursor: default;
  }
  .button.disabled:hover,
  .button.disabled:focus,
  .button.disabled:active,
  .button[disabled]:hover,
  .button[disabled]:focus,
  .button[disabled]:active {
    background-color: var(--color-button-background);
  }

/* Teal color */
.button-highlight {
  background-color: var(--color-highlight-background);
  color: var(--color-highlight-link);
}
.button-highlight:hover,
.button-highlight:focus,
.button-highlight:active {
  background-color: var(--color-highlight-background-hover);
  color: var(--color-highlight-link-hover);
}

/* Font Awesome icons */
.button > svg,
.button > i.fas {
  margin-right: 0.7em;
}

.button.small {
  font-size: var(--font-size-minus-2);
}
.button.big {
  font-size: var(--font-size-plus-2);
}

/* Inline read more links */
.links > .node-readmore .fa-chevron-right {
  margin-left: 0.5em;
  font-size: var(--font-size-minus-4);
  vertical-align: baseline;
}



/* --- Paragraphs and text --- */
p {
  margin: 0 0 1.6em;
}
address {
  font-style: normal;
  margin: 0 0 1.6em;
}

blockquote { /* Just indent */
  display: block;
  margin: 0 0 2rem 2.6rem;
  padding: 0;
}

.pullquote {
  position: relative;
  display: block;
  padding: 1.1rem 1rem 1.1rem 5.2rem;
  margin: 0 0 1.6em;
  border-left: 15px solid var(--color-primary);
  font-size: var(--font-size-plus-2);
}
.pullquote::before {
  content: "\201C";
  position: absolute;
  top: 0;
  left: 1.4rem;
  display: block;
  color: var(--gray-4);
  font: bold 6rem/1 Georgia, serif;
}

blockquote p,
.pullquote p {
  margin-bottom: 0.8em;
}
blockquote > *:last-child,
.pullquote > *:last-child {
  margin-bottom: 0;
}
blockquote.rightbox { /* Within right box */
  padding: 3rem 1.4rem 1.4rem;
}

code {
  margin: 0.6em 0;
}

small,
.small {
  font-size: var(--font-size-minus-2);
}
.intro {
  font-size: var(--font-size-plus-5);
}

big,
.big {
  font-size: var(--font-size-plus-1);
}

.alignleft {
  text-align: left;
}
.aligncenter {
  text-align: center;
}
.alignright {
  text-align: right;
}
.alignjustify {
  text-align: justify;
}

mark {
  background-color: var(--color-mark);
  padding: 0.15em 0.4em;
  color: var(--color-text);
  border-radius: 0.1em;
}


/* --- Images --- */

img {
  max-width: 100%;
  height: auto;
}
a img {
  border: none;
}

/* Floating images */
.floatleft {
  clear: left;
  float: left;
  margin: 0 1em 1em 0;
}
.floatright {
  clear: right;
  float: right;
  margin: 0 0 1em 1em;
}

/* Prevent floating on smaller columns; added by script */
.floatleft.no-float,
.floatright.no-float {
  display: block;
  float: none;
  margin: 0 auto 1.5em;
}
.columns > *:last-child > .no-float:last-child,
.columns > * > *:last-child > .no-float:last-child {
  margin-bottom: 1.5em;
}

figure /* Limit caption width */ {
  display: table;
  margin-left: 0;
  margin-right: 0;
}
figure.image.cke_widget_element { /* CKEditor reset size */
  display: table;
}
body.cke_editable .cke_widget_wrapper.cke_widget_inline.cke_widget_image { /* CKEditor fix for image wrapper */
  display: inline;
}

  /* Allow for centering figures */
  .aligncenter figure,
  .aligncenter figure.image.cke_widget_element,
  figure.aligncenter,
  figure.aligncenter.image.cke_widget_element {
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }

figure.floatright.no-float,
figure.floatleft.no-float {
  display: table;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* Document icons */
a[href$=".pdf"]::after,

a[href$=".doc"]::after,
a[href$=".docx"]::after,
a[href$=".xls"]::after,
a[href$=".xlsx"]::after,
a[href$=".ppt"]::after,
a[href$=".pptx"]::after,
a[href$=".wpd"]::after,
a[href$=".wp5"]::after {
  content: "";
  display: inline-block;
  width: calc(16em / 14);
  height: calc(16em / 14);
  margin: 0 0.3em 0 0.38em;
  vertical-align: baseline;
  transform: translateY(0.2em);
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-print-color-adjust: exact; /* Print background images */
  color-adjust: exact;
}

a[href$=".pdf"]::after{
  background-image: url("https://media.isba.org/drupal/isba2018/icon-pdf.svg");
}
a[href$=".doc"]::after,
a[href$=".docx"]::after {
  background-image: url("https://media.isba.org/drupal/isba2018/icon-word.svg");
}
a[href$=".xls"]::after,
a[href$=".xlsx"]::after {
  background-image: url("https://media.isba.org/drupal/isba2018/icon-excel.svg");
}
a[href$=".ppt"]::after,
a[href$=".pptx"]::after {
  background-image: url("https://media.isba.org/drupal/isba2018/icon-powerpoint.svg");
}

a.no-icon::after { /* Manually remove document icon */
  content: none;
  margin: 0;
  background: none;
}
.field-icon-application-pdf { /* Delete filefield icons */
  display: none;
}


/* --- Separators --- */

hr {
  background-color: var(--color-hr);
  height: 3px;
  margin: 2.5rem 0;
  padding: 0;
  border-width: 0;
  overflow: hidden;
}

hr.light {
  background-color: var(--color-border-light);
  height: 1px;
}

/* *** Still needed? */
hr.break /* Larger break */ {
  margin: 2.5em 0 2em;
}


/* --- Headings --- */

h1, h2, h3, h4, h5, h6, .subheading {
  margin: 0 0 0.6em;
  padding: 0;
  color: var(--color-heading);
  font: var(--font-heading);
  font-variant-ligatures: var(--font-ligatures-heading);
  text-wrap: pretty;
}

/* 48px */
h1,
h2.big {
  margin-bottom: 0.5em;
}
h1,
h2.big,
h2 big,
h2 .big {
  font-size: 3.2rem;
}

/* 32px */
h2,
h1.small,
h1 small,
h1 .small,
h3.big,
.subheading, /* For older IBJ articles */
h3 big,
h3 .big {
  font-size: 2.13333rem;
}

/* 24px */
h3,
h2.small,
h2 small,
h2 .small,
h4.big,
h4 big,
h4 .big {
  font-size: var(--font-size-plus-9);
}

/* 20px */
h4,
h3.small,
h3 small,
h3 .small,
h5.big,
h5 big,
h5 .big {
  font-size: var(--font-size-plus-5);
}

/* 17px */
h5,
h4.small,
h4 small,
h4 .small,
h6.big,
h6 big,
h6 .big {
  font-size: var(--font-size-plus-2);
}

/* 15px */
h6,
h5.small {
  margin-bottom: 0.2em;
}
h6,
h5.small,
h5 small,
h5 .small {
  font-size: var(--font-size-base);
}

/* Wrap long headings */
/* *** Move to mobile styles only on https://new.isbadev.org/leadership */
@media (max-width: 767px) {
  main h2,
  main h3 {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}


/* --- Lists --- */

ul,
.item-list ul,
ul.menu {
  margin: 0 0 2em;
  padding: 0;
  list-style-type: none;
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.2' cy='2.4' r='2.2' fill='%23910028'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: ~~~dark) {
  ul,
  .item-list ul,
  ul.menu {
    list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Ccircle cx='3.2' cy='2.4' r='2.2' fill='%23e2e3e4'/%3E%3C/svg%3E");
  }
}

ul > li,
.item-list ul > li,
ul.menu > li {
  margin: 0 0 0.8em 1.1em;
  padding: 0;
  list-style-type: none;
}

li > ol,
li > ul {
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}

ul.links > li /* Inline links */ {
  background-image: none;
  padding-left: 0;
  margin: 0 1em 0 0;
}
  ul.links > li:last-child {
    margin-right: 0;
}

ul.simple > li /* No bullets */ {
  list-style:none;
  margin-left: 0;
}


/* Ordered lists */
ol {
  margin: 0 0 2em 33px;
  padding-left: 0;
}
ol > li {
  margin-bottom: 0.8em;
  background-image: none;
}


/* Definition lists */
dl {
  margin: 0 0 2em;
}
dl > dt {
  display: block;
  margin: 1em 0 0;
  padding: 0;
  font-weight: var(--font-weight-semibold);
}
dl > dd {
  margin: 0.1em 0 0;
  padding: 0;
}


/* ----- Disclosures ----- */

details {
  margin: 0 0 2rem;
  padding: 0 0 0 1.4rem;
}

details > summary {
  display: block;
  list-style: none;
  margin: 0 0 0 -1.4rem;
  padding: 0 0 0 1.4rem;
  cursor: pointer;
  font: var(--font-heading);
  font-variant-ligatures: var(--font-ligatures-heading);
  font-size: var(--font-size-plus-2); /* <h5> equivalent */
  transition: color 0.2s;
}

details[open] > summary {
  margin-bottom: 1.2rem;
}

/* Change marker for better spacing control */
details summary::-webkit-details-marker,
details summary::marker {
  display: none;
}
details > summary::before {
  content: "\25BC";
  transform: rotate(-90deg);
  display: inline-block;
  width: 0.8rem;
  margin: 0 0.6rem 0 -1.4rem;
  vertical-align: middle;
  font-size: var(--font-size-minus-1);
  will-change: transform;
  transition: transform 0.15s;
}
details[open] > summary::before {
  transform: rotate(0deg) translateY(-1px);
}

details:not([open]) > summary {
  color: var(--color-link);
  transition: color 0.2s;
}
details:not([open]) > summary:hover {
  color: var(--color-link-light);
}

/* Summary content */
details > summary > * {
  display: inline;
  margin-top: 0;
  margin-bottom: 0;
}
details > summary > :is(h2, h3, h4, h5, h6) {
  vertical-align: middle;
  color: inherit;
}

details > *:last-child { /* Reduce bottom padding */
  margin-bottom: 0;
}

/* Additional "read more" button: use data-suffix */
details:not([open]) > summary[data-suffix]::after {
  content: attr(data-suffix);
  display: block;
  max-width: max-content;
  margin: 0.3em 0 0;
  padding: 0.25em 0.75em;
  white-space: nowrap;
  background-color: var(--color-light-box-background);
  border-radius: 2.14rem;
  box-shadow: inset 1px 1px 1px rgb(0 0 0 / 0.03);
  letter-spacing: 0.023rem;
  text-transform: uppercase;
  font-size: var(--font-size-minus-4);
  font-weight: var(--font-weight-button-link);
  color: var(--color-link);
  transition: color 0.2s;
}
details:not([open]) > summary[data-suffix]:hover::after {
  box-shadow: none;
  color: var(--color-link-light);
}


/* Expand/collapse all widget */
.details-all {
  display: flex;
  flex-flow: row wrap;
  max-width: max-content;
  gap: 3px;
  margin: 0 0 2rem;
  color: var(--color-light-box-text);
  border: none;
}
@media print {
  .details-all {
    display: none;
  }
}

.details-open-all,
.details-close-all {
  display: inline-flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0.6rem 1rem;
  background-color: var(--color-box-background);
  cursor: pointer;
  border: none;
  color: var(--color-link);
  font-size: var(--font-size-plus-1);
  font-weight: var(--font-weight-link);
  font-family: var(--font-family-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s, opacity 0.4s;
}
.details-open-all {
  border-radius: 2.14rem 0 0 2.14rem;
}
.details-close-all {
  border-radius: 0 2.14rem 2.14rem 0;
}

.details-open-all:not([disabled]):hover,
.details-close-all:not([disabled]):hover,
.details-open-all:not([disabled]):active,
.details-close-all:not([disabled]):active {
  background-color: var(--color-darker-box-background);
  color: var(--color-link-light);
  text-decoration: none;
}

.details-open-all::before {
  content: "\25BC";
  display: inline-block;
  margin: 0 0.5rem 0 0;
  vertical-align: middle;
  font-size: var(--font-size-minus-1);
}
.details-close-all::before {
  content: "\25BC";  /* 25B6 appears differently on iOS */
  transform: rotate(-90deg);
  display: inline-block;
  margin: 0 0.4rem 0 0;
  vertical-align: middle;
  font-size: var(--font-size-minus-1);
}

/* Disabled state */
.details-open-all[disabled],
.details-close-all[disabled] {
  opacity: 0.5;
}

/* Toggle animation */
.details-open-all[disabled]::before {
  animation: 0.3s disclosureOpenAllToggle ease 1;
}
.details-close-all[disabled]::before {
  animation: 0.3s disclosureCloseAllToggle ease 1;
}

@keyframes disclosureOpenAllToggle {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.3em);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes disclosureCloseAllToggle {
  0% {
    transform: translateX(0) rotate(-90deg);
  }
  50% {
    transform: translateX(0.3em) rotate(-90deg);
  }
  100% {
    transform: translateX(0) rotate(-90deg);
  }
}


/* --- Forms --- */
form {
  margin: 0;
  padding: 0;
}

.form-item {
  margin-top: 1em;
  margin-bottom: 1.6em;
}

label.option { /* Checkbox/radio button labels */
  vertical-align: middle;
}
label:not(.option) {
  clear: both;
  display: block;
  margin-bottom: 0.25em;
  color: var(--color-text-dark);
  font-size: var(--font-size-plus-1);
  font-weight: var(--font-weight-label);
}

button {
  cursor: pointer;
}

/* Scroll snap validation errors below sticky header */
input:invalid,
select:invalid,
textarea:invalid {
  scroll-margin-top: var(--sticky-header-offset, 0px);
}


/* Other radio buttons */
input[type="checkbox"] + label,
input[type="radio"] + label {
  clear: none;
  display: inline-block;
}
.form-checkboxes input[type="checkbox"] + label,
.form-checkboxes input[type="radio"] + label { /* Fix wrapping for lists of multiple checkboxes */
  display: inline;
}

input, select, textarea {
  font: 1em/var(--font-lineheight-shorter) var(--font-family-text);
  color: var(--color-text);
  vertical-align: middle;
}
input.form-text,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="password"] {
  margin-left: 0;
  border: 1px solid var(--color-field-border);
  border-radius: 5px;
}

@media (max-width: 767px) {
  /* Stretch full width on mobile */
  input.form-text,
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="password"] {
    width: calc(100% - 2rem - 2px);
  }
  select {
    width: 100%;
  }
}

textarea {
  width: calc(100% - 2rem - 2px);
  padding: 1rem;
  border: 1px solid var(--color-field-border);
  border-radius: 5px;
}

input.form-text[readonly],
textarea[readonly],
select[readonly] {
  color: var(--gray-6);
}
span.form-required {
  color: #ffae00;
}


/* Submit buttons (minimal change in dark mode) */
input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0.6em 0.9em;
  cursor: pointer;
  border: 1px solid var(--gray-9);
  border-radius: 2.14rem;
  white-space: normal;
  color: var(--gray-9);
  line-height: var(--font-lineheight-shortest);
  font-weight: var(--font-weight-button);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 1px rgb(255 255 255 / 0.8);
  text-decoration: none;
  background-color: var(--gray-4);
  background-image: -webkit-linear-gradient(var(--color-background) 0%, var(--gray-4) 100%);
  background-image: linear-gradient(var(--color-background) 0%, var(--gray-4) 100%);
}

input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active {
  margin: 0;
  padding: 0.6em 0.9em;
  background: var(--gray-4) none;
  border: 1px solid var(--gray-10);
  border-radius: 2.14rem;
  color: var(--gray-10);
  font-weight: var(--font-weight-button);
}

input[type="submit"][disabled] {
  opacity: 0.4;
  cursor: default;
}
input[type="submit"][disabled]:hover,
input[type="submit"][disabled]:focus {
  background-color: var(--gray-4);
  background-image: -webkit-linear-gradient(var(--white) 0%, var(--gray-4) 100%);
  background-image: linear-gradient(var(--white) 0%, var(--gray-4) 100%);
}

@media (prefers-color-scheme: ~~~dark) {
  /* Keep lightish */
  input[type="submit"] {
    background-color: var(--gray-3);
    background-image: -webkit-linear-gradient(var(--gray-2) 0%, var(--gray-5) 100%);
    background-image: linear-gradient(var(--gray-2) 0%, var(--gray-5) 100%);
    border-color: var(--black);
  }
  input[type="submit"]:hover,
  input[type="submit"]:focus,
  input[type="submit"]:active {
    background: var(--gray-3) none;
    border-color: var(--black);
  }
  input[type="submit"][disabled]:hover {
    background-color: var(--gray-3);
    background-image: -webkit-linear-gradient(var(--gray-2) 0%, var(--gray-5) 100%);
    background-image: linear-gradient(var(--gray-2) 0%, var(--gray-5) 100%);
  }
}


/* --------------- Layout --------------- */

/* Main layout wrapper */
:is(.header-container, .footer-container) {
  position: relative;
  width: 1110px;
  margin: 0 auto;
  padding: 0 30px;  /* Keeps whitespace on edges under 1170 pixels */
}
:is(.header-container, .footer-container)::after { /* Clear after floats */
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
}

@media (max-width: 1170px) {
  /* Stretch to full browser width, keeping original 30px of edge padding */
  :is(.header-container, .footer-container) {
    width: auto;
    margin: 0;
  }
}
@media (max-width: 414px) {
  :is(.header-container, .footer-container) {
    padding-left: 20px;
    padding-right: 20px;
  }
}

:is(.header-container, .footer-container) > *:last-child {
  margin-bottom: 0;
}


/* Edge-to-edge sections (within content body or additional sections) */
.edges {
  position: relative;
  padding: 90px 0;
  background-repeat: no-repeat; /* Optional background image */
  background-size: cover;
}
.edges > :is(.header-container, .footer-container) {
  /* Internal padding in section containers */
  padding: 45px;
}
.edges > :is(.header-container, .footer-container) + :is(.header-container, .footer-container) {
  /* Two adjacent containers */
  padding-top: 0;
}

/* Stretched edges within container; main has overflow-x to fix when scrollbars appear */
:is(.header-container, .footer-container) .edges {
  width: 100vw;
  margin-left: -50vw;
  left: 50%;
}


/* Remove vertical padding for non-colored sections */
.edges:not(.light):not(.dark):not(.gradient):not(.photo),
.edges.clear {
  padding-top: 0;
  padding-bottom: 0;
}
.edges.clear > :is(.header-container, .footer-container) {
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 1380px) {
  /* Stretch to full browser width with extra edge padding */
  .edges:not(.clear) > :is(.header-container, .footer-container) {
    width: auto;
    margin: 0 90px;
  }
}

@media (max-width: 1170px) {
  .edges {
    padding: 75px 0;
  }
  .edges:not(.clear) > :is(.header-container, .footer-container) {
    margin: 0 75px;
  }
  .edges.clear > :is(.header-container, .footer-container) {
    /* Default edge padding */
    margin-left: 30px;
    margin-right: 30px;
  }
}
@media (max-width: 910px) {
  .edges {
    padding: 60px 0;
  }
  .edges:not(.clear) > :is(.header-container, .footer-container) {
    margin: 0 60px;
  }
}
@media (max-width: 640px) {
  .edges {
    padding: 45px 0;
  }
  .edges:not(.clear) > :is(.header-container, .footer-container) {
    margin: 0 45px;
  }
}
@media (max-width: 480px) {
  .edges {
    padding: 30px 0;
  }
  .edges:not(.clear) > :is(.header-container, .footer-container) {
    margin: 0 30px;
  }
}
@media (max-width: 414px) {
  .edges.clear > :is(.header-container, .footer-container) {
    /* Default edge padding */
    margin-left: 20px;
    margin-right: 20px;
  }
}


/* Accessible hide */
.sr-only,
.hide:not(.show),
.hide:not(.show) * {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  border: 0;
}

/* Float clearing */
.clear {
  clear: both;
}
.clear-block::after /* Clear after floats */ {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
}


/* ----- Title banner ----- */

/* Title banner */
.title-banner {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin: 0;
  padding: 2.8rem 0 0;
}

.title-banner.size-short { /* Short height */
  min-height: 102px;
  padding: 1.8rem 0;
  background-color: var(--gray-8);
}
.title-banner.size-tall { /* Tall height */
  min-height: 202px;
  padding: 1.8rem 0;
  background-color: var(--gray-8);
}

/* Stretch to edges */
.ui-widget > .title-banner {
  margin-block-start: -16px;
}
.ui-widget > .title-banner:is(.size-short, .size-tall) {
  margin-inline: calc((-100vw + 1110px) / 2);
}
.ui-widget > .title-banner:is(.size-short, .size-tall) > .container {
  width: 1110px;
  margin-inline: auto;
}

@media (max-width: 1142px) {
  .ui-widget > .title-banner:is(.size-short, .size-tall) {
    margin-inline: -16px;
  }
  .ui-widget > .title-banner:is(.size-short, .size-tall) > .container {
    padding-inline: 16px;
  }
}



/* Dim for dark mode */
@media (prefers-color-scheme: dark) {
  .title-banner.size-short::before,
  .title-banner.size-tall::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background-color: rgb(0 0 0 / 0.35);
  }
}

/* Title field */
body .title-banner :is(h1, h2) {
  margin: 0;
  padding: 0;
  background-color: transparent;
  color: var(--color-text-dark);
  font: var(--font-heading);
  font-variant-ligatures: var(--font-ligatures-heading);
  font-size: 3.2rem;
}

.title-banner:is(.size-short, .size-tall) :is(h1, h2) {
  color: var(--color-text-brightest);
  text-shadow: 0 0 7px rgb(0 0 0 / 0.7);
}


/* Subheading above/below title */
.title-banner :is(.title-prefix, .title-suffix) {
  margin: 0 0 0.15rem;
  color: var(--color-text-dark);
  font: var(--font-heading);
  font-variant-ligatures: var(--font-ligatures-heading);
  font-size: var(--font-size-plus-5);
  line-height: var(--font-lineheight-shortest);
}
.title-banner .title-suffix {
  margin: 0.7rem 0 0;
}

.title-banner :is(.title-prefix, .title-suffix) a {
  color: inherit;
  text-decoration: none;
}
.title-banner :is(.title-prefix, .title-suffix) a:is(:hover. :active) {
  color: var(--color-link-hover);
  text-decoration: none;
}

.title-banner:is(.size-short, .size-tall) :is(.title-prefix, .title-suffix) {
  color: var(--color-text-brightest);
  text-shadow: 0 0 7px rgb(0 0 0 / 0.7);
}

.title-banner:is(.size-short, .size-tall) :is(.title-prefix, .title-suffix) a {
  color: var(--color-text-brightest);
}
.title-banner:is(.size-short, .size-tall) :is(.title-prefix, .title-suffix) a:is(:hover, :active) {
  color: rgb(255 255 255 / 0.75);
}


@media (max-width: 910px) {
  .title-banner {
    border-top: 3px solid var(--color-hr);
    min-height: auto;
  }
  .title-banner.size-short {
    border-top: none;
    min-height: 52px;
  }
  .title-banner.size-tall {
    border-top: none;
    min-height: 119px;
  }

  .title-banner .title-prefix {
    margin-bottom: 0.2em;
    font-size: var(--font-size-base);
  }
  body .title-banner :is(h1, h2) {
    font-size: 2.5rem;
  }

  .title-banner .title-prefix,
  .title-banner .title-suffix {
    font-size: var(--font-size-plus-3);
  }
}
@media (max-width: 550px) {
  body .title-banner :is(h1, h2) {
    font-size: 2rem;
  }
  .title-banner :is(.title-prefix, .title-suffix) {
    font-size: var(--font-size-base);
  }
}



/* ----- Fieldset grouping box ----- */
.box {
  clear: both;
  position: relative;
  margin: 0 0 2rem;
  padding: 1.4rem;
  background-color: var(--color-box-background);
  background-image: none;
  color: var(--color-box-text);
  border: none;
  border-radius: 0;
}

/* Clear after floats */
.box::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

/* Reduce bottom padding */
.box > *:last-child,
.box > *:last-child > *:last-child,
.box > *:last-child > *:last-child > *:last-child {
  margin-bottom: 0;
}

.box hr {
  margin: 1.6rem -1.6rem;
  background-color: var(--color-background);
}
.box + .box {
  margin-top: 1.6em;
}
.box .box {
  background-color: var(--color-lightest-box-background);
}



/* ---------- From system.base.css ---------- */

.element-hidden {
  display: none;
}
.element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
}
.element-invisible.element-focusable:active,
.element-invisible.element-focusable:focus {
  position: static !important;
  clip: auto;
  overflow: visible;
  height: auto;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}