html {
    scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}




body {
  font-family: 'Inter', 'Hind', "Helvetica Neue", Helvetica, Arial, sans-serif;
}

[role="complementary"] {
  background-color: #ffffff;
  padding-inline: 1.0rem;
}

/* Fix details summary arrow
   not shown in Firefox
   due to bootstrap
   display: block;
 */
details > summary:first-of-type {
   display: list-item;
}

.event-card {
border-bottom: 1px solid #CCCCCC;
border-radius: 0.5rem;
background-color: #FFFFFF;
box-shadow: 2.5px 5px 10px rgba(0,0,0,0.25);

}

.event-card-image img {

border-bottom-right-radius: 0;
border-bottom-left-radius: 0;

}

.event-card-text {
 line-height: 1.75;
 padding-block: 1em;
 padding-inline: 1em;

}

/* Utility Classes Jan 2026 */
.material-shadow-medium {
  box-shadow: 2.5px 5px 12.5px rgba(0, 0, 0, 0.125);
}

.material-shadow-large {
  box-shadow: 5px 10px 25px rgba(0, 0, 0, 0.25);
}

/* Non-utility! Utility classes end here! */

.testimonial-box {
      font-size: 95%;
      font-style: italic;
      padding: 1em;
      margin: 0; 
      background-color: #FFFFFF;
      background: rgb(255 255 255 / 60%);
      border-radius: 1em;
      border: 0.1em solid #D8BFD8;
      box-shadow: 2.5px 5px 12.5px rgba(0, 0, 0, 0.125);
}

.testimonial-box .attendee {
      font-style: normal;
}

/* Cards */

.card {
    border: 1px solid oklch(0.95 0.0 0.0);
    border-radius: 0.5rem;
    background-color: oklch(0.99 0.0 0.0);
    margin-block: 1rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-auto-rows: minmax(50px, auto);
    box-shadow: 2.5px 5px 12.5px rgba(0, 0, 0, 0.125);
    transition: border 0.25s, box-shadow 0.5s;
}

.card-no-image {
    grid-template-columns: 1fr;
}

.card:hover {
    border: 1px solid oklch(0.9 0.0 0.0);
    box-shadow: 5px 10px 25px rgba(0, 0, 0, 0.25);
}

.card-image {
    border-radius: 0.5rem 0.0rem 0.0rem 0.5rem;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.card-text {
    padding: 1rem;
}

.card-title, .card-text details summary {
    font-size: 1.25rem;
    font-weight: bold;
}

.card-text details summary *:not(:first-child) {
    font-size: 1rem;
    font-weight: normal;
}

ul.positive li::marker {
    content: "✓ ";
}

ul.negative li::marker {
    content: "✗ ";
}

ul.gold-star li::marker {
    content: "\2729";
    margin-right: 1rem;
}

ul.gold-star li {
    padding-left: 0.75rem;
}

ul.celtic li::marker {
    content: "🕈 ";
}

ul.fleur-de-lis li::marker {
    content: "⚜︎ ";
}

@media (width < 480px) {
    .card {
        grid-template-columns: 1fr;
    }
    .card-image {
        border-radius: 0.5rem 0.5rem 0.0rem 0.0rem;
    }
}

@media (max-width: 480px) {
    .card {
        grid-template-columns: 1fr;
    }
    .card-image {
        border-radius: 0.5rem 0.5rem 0.0rem 0.0rem;
    }
}

.content-box {
    margin-block: 2.0rem;
    padding-inline: 2.0rem;
}

/* Mouse tracking */
.reactive-gradient-background {
    transition: background 5.0s;
}

/* <li> spacing */
li {
    margin-block: 1rem;
}

[role="complementary"] ul li {
    margin-block: 0.375rem;
}

.reduce-list-spacing li {
    margin-block: 0.5rem;
}

.speaker-card {
    border: 1px solid oklch(0.95 0.0 0.0);
    border-radius: 0.5rem;
    background-color: oklch(0.99 0.0 0.0);
    padding: 2rem;
    margin-block: 1rem;

    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(100px, 4fr);
    grid-auto-rows: minmax(200px, auto);
    column-gap: 1rem;
    box-shadow: 2.5px 5px 12.5px rgba(0, 0, 0, 0.125);
    transition: border 0.25s, box-shadow 0.5s;
}

.speaker-card-no-image {
    grid-template-columns: 1fr;
}

.speaker-card:hover {
    border: 1px solid oklch(0.9 0.0 0.0);
    box-shadow: 5px 10px 25px rgba(0, 0, 0, 0.25);
}

.speaker-card-portrait {
}

.speaker-card-text-container {
}

.speaker-card-name {
    /* border: 1px solid firebrick; */
    font-weight: bold;
    margin-top: 0;
}

.speaker-card-bio {
    padding-top: 1rem;
}

@media (width < 480px) {
    .speaker-card {
        grid-template-columns: minmax(100px, 1fr);
    }
    h3.speaker-card-name {
        margin-top: 1rem;
    }
}

@media (max-width: 480px) {
    .speaker-card {
        grid-template-columns: minmax(100px, 1fr);
    }
    h3.speaker-card-name {
        margin-top: 1rem;
    }
}