/*
 * Copy of the /hire/ pages written with the SEO sheet markup (see
 * App\Support\SheetCopyMarkup). Only pages whose copy uses that markup get the
 * .wm-copy wrapper (inside #sponsors, whose inline h2/h3 sizes it overrides), and only pages with an FAQ heading get .wm-faq, so the
 * others keep their current look. The "Show more" button of the link sections
 * is on every hire page.
 */
:root {
  --wm-ink: #191919;
  --wm-ink-2: #2b2b2b;
  --wm-muted: #77776f;
  --wm-lime: #f1ff78;
  --wm-lime-pale: #fcffe1;
  --wm-grey: #f7f7f5;
  --wm-line: #ecece6;
  /* Hand-drawn yellow underline, as on the blog. */
  --wm-scribble: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20200%2014%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M3%209.5%20C%2030%207%2C%2060%2010.5%2C%2095%208%20S%20160%205.5%2C%20197%207.5%27%20fill%3D%27none%27%20stroke%3D%27%23f1ff78%27%20stroke-width%3D%274.5%27%20stroke-linecap%3D%27round%27/%3E%3Cpath%20d%3D%27M8%2011%20C%2050%209.5%2C%20110%2011.5%2C%20190%209%27%20fill%3D%27none%27%20stroke%3D%27%23f1ff78%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20opacity%3D%27.7%27/%3E%3C/svg%3E");
}

/* ---- Intro and guide ---- */
#sponsors .wm-copy { width: 100%; color: var(--wm-ink-2); }
#sponsors .wm-copy h2 { font-family: "avenirheavy", sans-serif; font-size: 32px; line-height: 1.2; color: var(--wm-ink); margin: 8px 0 16px; }
#sponsors .wm-copy h3 { font-family: "avenirheavy", sans-serif; font-size: 21px; line-height: 1.3; color: var(--wm-ink); margin: 32px 0 10px; }
#sponsors .wm-copy p,
#sponsors .wm-copy li { font-family: "avenir_regularregular", sans-serif; font-size: 17px; line-height: 1.65; color: var(--wm-ink-2); margin: 0 0 12px; }
/* Intro (the block that opens with a lead paragraph): every paragraph at the lead size, so the text above and below the key facts box reads the same */
#sponsors .wm-copy:has(> .wm-lead) > p { font-size: 19px; line-height: 1.6; color: var(--wm-ink); }
#sponsors .wm-copy b { font-family: "avenirheavy", sans-serif; font-weight: normal; color: var(--wm-ink); }
#sponsors .wm-copy ul { list-style: none; padding: 0; margin: 4px 0 16px; }
#sponsors .wm-copy ul li { position: relative; padding-left: 22px; }
#sponsors .wm-copy ul li::before { content: ""; position: absolute; left: 4px; top: .68em; width: 6px; height: 6px; border-radius: 50%; background: var(--wm-ink); }
/* Key facts: the same highlighted box as the blog's short answers. */
#sponsors .wm-copy .wm-facts { background: var(--wm-lime-pale); border-left: 6px solid var(--wm-lime); border-radius: 6px; padding: 20px 22px; margin: 16px 0 18px; }
#sponsors .wm-copy .wm-facts li:last-child { margin-bottom: 0; }

/* ---- Links: bold black, hand-drawn underline in running text ---- */
a.wm-link {
  color: var(--wm-ink);
  font-family: "avenirheavy", sans-serif;
  font-weight: normal;
  text-decoration: none;
  background-image: var(--wm-scribble);
  background-repeat: no-repeat;
  background-size: 100% .55em;
  background-position: 0 100%;
  padding-bottom: .18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
a.wm-link:hover, a.wm-link:focus { color: var(--wm-ink); }
/* In tables and lists the names stay bold; the underline only shows on hover. */
.wm-table a.wm-link, .wm-list a.wm-link { background-size: 0 .55em; padding-bottom: 0; transition: background-size .25s ease; }
.wm-table a.wm-link:hover, .wm-list a.wm-link:hover { background-size: 100% .55em; }

/* ---- Tables ---- */
.wm-table { width: 100%; border-collapse: collapse; background: var(--wm-grey); border-radius: 10px; margin: 14px 0 6px; font-size: 16px; }
.wm-table caption { caption-side: top; text-align: left; font-family: "avenirheavy", sans-serif; color: var(--wm-ink); padding: 0 0 8px; }
.wm-table th, .wm-table td { padding: 10px 18px; text-align: left; vertical-align: top; font-family: "avenir_regularregular", sans-serif; font-weight: normal; color: var(--wm-ink-2); }
.wm-table thead th { font-family: "avenirheavy", sans-serif; color: var(--wm-ink); border-bottom: 1px solid #e2e2dc; }
.wm-table tbody tr + tr th, .wm-table tbody tr + tr td { border-top: 1px solid var(--wm-line); }

/* ---- Visuals built from a table by hire-copy.js ---- */
.wm-viz { background: var(--wm-grey); border-radius: 12px; padding: 18px 20px; margin: 14px 0 8px; }
.wm-viz-title { font-family: "avenirheavy", sans-serif; color: var(--wm-ink); margin-bottom: 12px; }
.wm-bar-row { display: grid; grid-template-columns: 170px 1fr 120px; gap: 12px; align-items: center; padding: 6px 0; }
.wm-bar-label { font-size: 15px; color: var(--wm-ink); line-height: 1.2; }
.wm-bar-label span { display: block; font-size: 12px; color: var(--wm-muted); }
.wm-bar-track { background: var(--wm-line); border-radius: 6px; height: 30px; overflow: hidden; }
.wm-bar { height: 100%; width: 0; background: var(--wm-lime); border-radius: 6px; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-family: "avenirheavy", sans-serif; font-size: 14px; color: var(--wm-ink); white-space: nowrap; animation: wm-grow .9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes wm-grow { to { width: var(--w); } }
.wm-bar-side { font-size: 14px; color: #55554f; text-align: right; line-height: 1.2; }
.wm-bar-side span { display: block; font-size: 12px; color: var(--wm-muted); }
.wm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.wm-viz.wm-cards { padding: 0; background: none; border-radius: 0; }
.wm-card { display: flex; flex-direction: column; gap: 4px; background: #fff; border-radius: 10px; padding: 14px; text-decoration: none; border: 1px solid var(--wm-line); transition: transform .15s, box-shadow .15s, border-color .15s; }
.wm-card, .wm-card:hover, .wm-card:focus { color: var(--wm-ink); text-decoration: none; }
.wm-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.10); border-color: var(--wm-ink); }
.wm-card-photo, .wm-venue-preview-photo { display: block; width: calc(100% + 28px); max-width: none; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: -14px -14px 8px; border-radius: 9px 9px 0 0; background: var(--wm-line); }
.wm-card-area { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--wm-muted); }
.wm-card-name { font-family: "avenirheavy", sans-serif; font-size: 16px; line-height: 1.25; }
.wm-card-name span { background-image: var(--wm-scribble); background-repeat: no-repeat; background-size: 0 .55em; background-position: 0 100%; padding-bottom: .15em; transition: background-size .25s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wm-card:hover .wm-card-name span { background-size: 100% .55em; }
.wm-card-meta { font-size: 14px; color: #55554f; }
/* Venue preview on hover / keyboard focus of a venue link (hire-copy.js) */
.wm-venue-preview { position: absolute; z-index: 1040; display: none; flex-direction: column; gap: 4px; width: 260px; background: #fff; border: 1px solid var(--wm-line); border-radius: 10px; padding: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.16); color: var(--wm-ink); pointer-events: none; }
.wm-venue-preview.is-open { display: flex; }
.wm-venue-preview-photo[hidden] { display: none; }
.wm-table-toggle { margin: 4px 0 6px; }
.wm-table-toggle summary { cursor: pointer; display: inline-block; font-family: "avenirheavy", sans-serif; font-size: 14px; color: var(--wm-ink); padding: 6px 14px; border: 1px solid var(--wm-ink); border-radius: 20px; list-style: none; }
.wm-table-toggle summary::-webkit-details-marker { display: none; }
.wm-table-toggle[open] summary { background: var(--wm-ink); color: #fff; }
.wm-table-toggle .wm-hide, .wm-table-toggle[open] .wm-show { display: none; }
.wm-table-toggle[open] .wm-hide { display: inline; }

/* ---- FAQ with its own heading ---- */
.single_faq.wm-faq .wm-faq-title { font-family: "avenirblack", "avenirheavy", sans-serif; font-size: 34px; line-height: 1.2; color: var(--wm-ink); margin: 0 0 22px; }
.single_faq.wm-faq .accordion-item { padding: 4px 0 !important; }
.single_faq.wm-faq .accordion-button,
.single_faq.wm-faq .accordion-button h3,
.single_faq.wm-faq .accordion-button h3 b { font-family: "avenirheavy", sans-serif !important; font-size: 18px !important; line-height: 1.4 !important; text-transform: none !important; font-weight: normal !important; margin: 0 !important; }
.single_faq.wm-faq .accordion-button { padding: 14px 16px !important; border-radius: 10px; }
.single_faq.wm-faq .accordion-button:hover { background: transparent !important; }
.single_faq.wm-faq .accordion-button h3 b { display: inline; background-image: var(--wm-scribble); background-repeat: no-repeat; background-size: 0 .55em; background-position: 0 100%; padding-bottom: .15em; transition: background-size .3s ease; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.single_faq.wm-faq .accordion-button.collapsed:hover h3 b { background-size: 100% .55em; }
.single_faq.wm-faq .accordion-button::after { transition: transform .25s ease !important; }
.single_faq.wm-faq .accordion-button.collapsed:hover::after { transform: translateY(3px) !important; }
.single_faq.wm-faq .accordion-body,
.single_faq.wm-faq .accordion-body p,
.single_faq.wm-faq .accordion-body li { font-family: "avenir_regularregular", sans-serif !important; font-size: 16px !important; line-height: 1.65 !important; color: var(--wm-ink-2); }
.single_faq.wm-faq .accordion-body { padding: 4px 16px 18px !important; }
.single_faq.wm-faq .accordion-body p { margin: 0 0 10px; }
.single_faq.wm-faq .accordion-body b { font-family: "avenirheavy", sans-serif !important; font-weight: normal; color: var(--wm-ink); }

/* ---- Link sections: Show more ---- */
.wm-show-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; background: none; border: 0; padding: 4px 0; font-family: "avenirheavy", sans-serif; font-size: 16px; color: var(--wm-ink); cursor: pointer; }
.wm-show-more-label { background-image: var(--wm-scribble); background-repeat: no-repeat; background-size: 100% .55em; background-position: 0 100%; padding-bottom: .15em; }

@media (max-width: 600px) {
  #sponsors .wm-copy h2 { font-size: 26px; }
  #sponsors .wm-copy h3 { font-size: 19px; }
  #sponsors .wm-copy p, #sponsors .wm-copy li { font-size: 16px; }
  #sponsors .wm-copy:has(> .wm-lead) > p { font-size: 17px; }
  .wm-table { display: block; overflow-x: auto; font-size: 14px; }
  .wm-table th, .wm-table td { padding: 8px 10px; }
  .wm-bar-row { grid-template-columns: 1fr; gap: 4px; }
  .wm-bar-side { text-align: left; }
  .single_faq.wm-faq .wm-faq-title { font-size: 27px; }
  .single_faq.wm-faq .accordion-button,
  .single_faq.wm-faq .accordion-button h3,
  .single_faq.wm-faq .accordion-button h3 b { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-bar { animation: none; width: var(--w); }
}