/******************* TOWN PAGES (Document pages) *******************/
/* ----- Global styles ----- */
:root {
    --purple: #814B92;
    --magenta: #B41862;
    --blue: #215494;
    --green: #98B62E;
    --orange: #FF8E3C;
    --yellow: #f6b81c;
    --smbc-green: #508328;
    --dark-green: #1c4c1c;
    --dark: #2e2e2e;
    --light: #ffffff;
    --text-colour: #1a1a1a;
    --line-height-body: 1.6;
    --line-height-heading: 1.3;
}
body {
    /*font-family: var(--font-body);*/
    font-size: 18px;
    line-height: var(--line-height-body);
    color: var(--text-colour);
}
h1, h2, h3, h4 {
    /*font-family: var(--font-heading);*/
    line-height: var(--line-height-heading);
    margin: 3rem 0 1.5rem;
}

/* Accessible, child-friendly scale */
h1 {
    font-size: 2.5rem; /* ~40px */
    font-weight: 600;
}

h2 {
    font-size: 2rem; /* ~32px */
    font-weight: 600;
}

h3 {
    font-size: 1.5rem; /* ~24px */
    font-weight: 500;
}

h4 {
    font-size: 1.25rem; /* ~20px */
    font-weight: 500;
}
/* Paragraphs */
p {
    margin-bottom: 1em;
    max-width: 65ch; /* keeps line length readable */
}

/* Lists */
ul, ol {
    margin-bottom: 1em;
}
a {
    color: inherit;
    text-decoration: underline;
    font-weight: 600;
}

a:focus,
button:focus {
  outline: 3px solid #ffbf47; /* high contrast */
  outline-offset: 2px;
}


/* ----- Page styles - Main Column ----- */
section.events {
  background-color: #f5f5f7;
  padding: 1.5rem;
  margin-top: 5rem;
  border-radius: 1rem;
}
section.events h2 {
  color: var(--light);
}
section#oldbury.events {
  background-color: var(--purple);
}
section#rowley.events {
  background-color: var(--magenta);
}

/* EVENT CARD */
    .event-card {
      display: flex;
      background: white;
      border: 6px solid #fff;
      border-radius: 0.75em;
      overflow: hidden;
      margin-bottom: 1.125rem;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .event-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 14px rgba(0,0,0,0.15);
    }

    .event-content {
      width: 80%;
      padding: 1rem;
    }

    .event-image {
      width: 20%;
      background-size: cover;
      background-position: center;
      min-height: 120px;
      border-radius: 0 0.5rem 0 0.5rem;
    }

    .event-title {
      cursor: pointer;
      color: #0b7ea1;
    }

    .event-title:hover {
      text-decoration: underline;
    }

    .tags {
      margin-top: 0.5rem;
    }

    .tag {
      display: inline-block;
      background: #eee;
      padding: 0.25rem 0.5rem;
      border-radius: 4px;
      font-size: 0.8rem;
      margin-right: 5px;
      margin-top: 5px;
    }

    .event-details {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .event-details.open {
      max-height: 200px;
      margin-top: 0.5rem;
    }

/* ----- Page styles - Sidebar ----- */
.supplement__heading, .aside__heading {
    color: var(--text-colour);
}