/* Additions for functionality that didn't exist in the original static site
   (rich-text article bodies, a photo slideshow). Kept separate from the
   untouched site.css theme file; reuses its --green custom properties so it
   blends in. Loaded on every potetos/* page, alongside site.css. */

/* Rich-text article body, shared by the public article page and the Tiptap
   editor in the admin forms so editing and reading look the same. */
.rich-text-content {
  color: #2c3b33;
  line-height: 1.7;
  font-size: 17px;
}

.rich-text-content > * + * {
  margin-top: 18px;
}

.rich-text-content h2 {
  font-size: 24px;
  font-weight: 800;
  color: var(--green-dark);
  margin-top: 32px;
}

.rich-text-content h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--green-dark);
  margin-top: 28px;
}

.rich-text-content ul,
.rich-text-content ol {
  padding-left: 22px;
}

.rich-text-content li + li {
  margin-top: 6px;
}

.rich-text-content blockquote {
  border-left: 3px solid var(--green);
  padding-left: 18px;
  color: var(--green-dark);
  font-style: italic;
}

.rich-text-content a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rich-text-content hr {
  border: none;
  border-top: 1px solid #dbe3de;
  margin-block: 28px;
}

.rich-text-content:focus {
  outline: none;
}

/* Keep every public table header filled from edge to edge. The theme uses a
   mix of semantic tables and grid-based table layouts; applying the fill to
   both the header row and its cells prevents white seams caused by grid
   sizing, horizontal overflow or browser table rendering. */
.fixture-table-head,
.training-schedule-head {
  width: 100%;
  box-sizing: border-box;
  background: var(--green-dark);
}

.contribution-table thead,
.contribution-table thead tr,
.contribution-table thead th {
  background: var(--green-dark);
}

.contribution-table thead th:first-child {
  border-top-left-radius: calc(var(--radius) - 1px);
}

.contribution-table thead th:last-child {
  border-top-right-radius: calc(var(--radius) - 1px);
}

/* site.css only ever expected the placeholder ".source-state" markup inside
   the dark ".calm-match-card" (and styles it white accordingly) — it never
   anticipated real content (the "Eerstvolgende wedstrijd" header row, and
   ".sportlink-list" match rows) being shown there once Sportlink was wired
   up. ".match-card-top" and ".sportlink-list" both inherit site.css's
   default muted/dark-green text colours, meant for a white background —
   extend the same white treatment used for ".source-state" to these too, so
   the text stays legible on the dark green background. */
.calm-match-card .match-card-top {
  color: rgba(255, 255, 255, 0.72);
}

.calm-match-card .match-card-top a {
  color: white;
}

.calm-match-card .match-card-top a:hover {
  opacity: 0.8;
}

.next-match-card .sportlink-list article {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.next-match-card .sportlink-list time,
.next-match-card .sportlink-list small {
  color: rgba(255, 255, 255, 0.72);
}

.next-match-card .sportlink-list strong,
.next-match-card .sportlink-list b {
  color: white;
}

/* Featured next match fills the existing card without changing its footprint. */
.featured-match {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.calm-match-card .match-summary {
  min-height: 0;
}

.next-match-card.calm-match-card {
  min-height: 0;
  align-self: start;
}

.calm-match-card .match-kickoff {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.calm-match-card .match-kickoff span,
.calm-match-card .match-kickoff time,
.calm-match-card .match-kickoff strong,
.calm-match-card .duel-team strong,
.calm-match-card .match-card-bottom a,
.calm-match-card .match-location strong {
  color: white;
}

.calm-match-card .match-kickoff strong {
  margin-top: 9px;
  font-size: 12px;
  font-weight: 850;
}

.calm-match-card .match-card-bottom {
  border-color: rgba(255, 255, 255, 0.18);
}

.calm-match-card .duel-team {
  border-bottom: 0;
}

.calm-match-card .team-side {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.82);
}

.calm-match-card .duel-versus {
  margin-top: 0;
  margin-bottom: 0;
  padding-block: 7px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  transform: none;
}

.calm-match-card .match-card-bottom {
  align-items: center;
}

.match-location {
  min-width: 0;
  display: grid;
  gap: 3px;
  text-align: left !important;
}

.match-location small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.match-location strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Article photo slideshow. */
.article-slideshow {
  margin-top: 32px;
}

.article-slideshow-viewport {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--green-mist);
}

.article-slideshow-viewport img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-slideshow-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: rgba(5, 38, 26, 0.55);
  color: white;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-slideshow-nav:hover {
  background: rgba(5, 38, 26, 0.8);
}

.article-slideshow-nav.prev {
  left: 14px;
}

.article-slideshow-nav.next {
  right: 14px;
}

.article-slideshow-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.article-slideshow-dots button {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: none;
  padding: 0;
  background: #cbd8d0;
  cursor: pointer;
}

.article-slideshow-dots button.active {
  background: var(--green);
}

/* Public contact form. */
.contact-form-shell {
  max-width: 980px;
}

.contact-form {
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid #dbe3de;
  border-radius: 22px;
  background: white;
  box-shadow:
    22px 22px 0 #bfdfcf,
    0 18px 50px rgba(5, 38, 26, .07);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 26px;
}

.contact-form label {
  display: grid;
  gap: 8px;
  color: var(--green-dark);
  font-size: 14px;
  font-weight: 800;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd8d0;
  border-radius: 10px;
  background: #fff;
  color: #17251d;
  font: inherit;
  font-weight: 500;
  padding: 12px 14px;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--green);
  outline: 3px solid rgba(17, 108, 65, .14);
}

.contact-form-wide {
  grid-column: 1 / -1;
}

.contact-form-error {
  color: #b42318;
  font-size: 12px;
  font-weight: 700;
}

.contact-form button:disabled {
  cursor: wait;
  opacity: .65;
}

.contact-form-success {
  max-width: 680px;
  margin-inline: auto;
  padding: clamp(32px, 6vw, 64px);
  border-radius: 22px;
  background: white;
  text-align: center;
  box-shadow: 0 18px 50px rgba(5, 38, 26, .08);
}

.contact-form-success img {
  width: 92px;
  height: auto;
  margin: 0 auto 20px;
}

.contact-form-success .eyebrow {
  justify-content: center;
}

.contact-form-success h2 {
  margin-bottom: 14px;
}

@media (max-width: 700px) {
  .contact-form {
    margin-right: 10px;
    margin-bottom: 10px;
    box-shadow:
      12px 12px 0 #bfdfcf,
      0 14px 36px rgba(5, 38, 26, .07);
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-form-wide {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .mobile-action-bar a {
    gap: 4px;
    font-size: 11px;
  }

  .mobile-action-bar a span {
    font-size: 20px;
    line-height: 1;
  }
}

@media (max-width: 390px) {
  .mobile-action-bar a {
    font-size: 10px;
  }
}

/* De Club dropdown and club-content pages. */
.club-nav-dropdown { position: relative; display: flex; align-items: stretch; }
.desktop-nav .club-nav-trigger { display: flex; align-items: center; gap: 8px; }
.club-nav-chevron { width: 7px; height: 7px; display: inline-block; flex: 0 0 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 180ms ease; }
.club-nav-dropdown:hover .club-nav-chevron, .club-nav-dropdown:focus-within .club-nav-chevron, .mobile-nav-group.is-open .club-nav-chevron { transform: translateY(2px) rotate(225deg); }
.club-nav-menu { position: absolute; top: calc(100% - 2px); left: 50%; z-index: 20; display: grid; width: 280px; padding: 10px; border: 1px solid #dbe3de; border-radius: 16px; background: #fff; box-shadow: 0 18px 48px rgba(5,38,26,.16); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: .18s ease; }
.club-nav-dropdown:hover .club-nav-menu, .club-nav-dropdown:focus-within .club-nav-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.desktop-nav .club-nav-menu a { padding: 11px 13px; border-radius: 9px; color: var(--green-dark); white-space: normal; }
.desktop-nav .club-nav-menu a::after { display: none; }
.desktop-nav .club-nav-menu a:hover, .desktop-nav .club-nav-menu a:focus { background: var(--green-mist); color: var(--green); }
.mobile-nav-group { display: grid; }
.mobile-nav-group-trigger { min-height: 52px; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--green-dark); font: inherit; font-size: 14px; font-weight: 850; cursor: pointer; }
.mobile-nav-submenu { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 240ms ease, opacity 180ms ease; }
.mobile-nav-group.is-open .mobile-nav-submenu { max-height: 240px; opacity: 1; }
.mobile-nav-group .mobile-nav-submenu a { min-height: 46px; padding-left: 14px; color: #52645a; font-size: 13px; font-weight: 750; }
@media (max-width: 900px) {
  .mobile-nav.is-open { max-height: calc(100dvh - 110px); overflow-y: auto; }
}
.committee-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.committee-detail-card { padding: clamp(24px, 4vw, 36px); border: 1px solid #dbe3de; border-radius: 20px; background: white; box-shadow: 0 12px 35px rgba(5,38,26,.05); }
.committee-detail-card .committee-number { color: var(--green); font-size: 13px; font-weight: 850; letter-spacing: .12em; }
.committee-detail-card h3 { margin: 8px 0 22px; color: var(--green-dark); font-size: 22px; }
.committee-detail-card div + div { margin-top: 18px; }
.committee-detail-card strong { display: block; margin-bottom: 5px; color: var(--green-dark); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.committee-detail-card p { color: #52645a; line-height: 1.65; }
.honors-grid { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(380px, 1.3fr); gap: clamp(40px, 7vw, 90px); }
.honors-grid h2 { margin-bottom: 24px; }
.honor-list { display: grid; gap: 10px; list-style: none; padding: 0; }
.honor-list-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.honor-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-left: 3px solid var(--green); border-radius: 0 10px 10px 0; background: var(--green-mist); color: var(--green-dark); font-weight: 700; }
.deceased-mark { color: #6d7b74; font-family: Georgia, serif; font-size: 19px; }
@media (max-width: 800px) { .committee-detail-grid, .honors-grid, .honor-list-columns { grid-template-columns: 1fr; } }