/* ==========================================================================
   Useful links / Emergency numbers

   A restyle only. The markup and the wording are unchanged; every rule here
   targets classes the view already has.

   Brings the page onto the same footing as the rest of the site: the sandy
   beige ground, an Amatic SC heading in brand purple, and accordion panels
   as clean cards rather than bare Bootstrap buttons.
   ========================================================================== */

.useful {
  --ul-purple: #7f3f98;
  --ul-ink:    #2b2530;
  --ul-soft:   #6d6577;
  --ul-line:   #e7e2ec;
  --ul-sand:   #faf7f2;

  background-color: var(--ul-sand);
  padding-bottom: 72px;
  color: var(--ul-ink);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------------------------------------------------------------- head -- */

.useful h1 {
  margin: 0;
  padding: 72px 0 28px !important;
  font-family: "Amatic SC", cursive;
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1.02;
  color: var(--ul-purple);
}

/* ------------------------------------------------------------- panels --- */

.useful .q-a > ul { margin: 0; padding: 0 !important; }
.useful .q-a > ul > li { padding-bottom: 14px !important; }

/* The panel header is a full-width button; make it read as a card header. */
.useful .q-a > ul > li > .btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 20px 56px 20px 24px !important;
  border: 1px solid var(--ul-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(43, 37, 48, .04), 0 8px 20px rgba(43, 37, 48, .05);
  text-align: left;
  white-space: normal;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.useful .q-a > ul > li > .btn:hover {
  border-color: var(--ul-purple);
  box-shadow: 0 4px 10px rgba(43, 37, 48, .08), 0 16px 34px rgba(43, 37, 48, .1);
}
.useful .q-a > ul > li > .btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(127, 63, 152, .18); }

/* A chevron that turns as the panel opens, so the control reads as a toggle. */
.useful .q-a > ul > li > .btn::after {
  content: "";
  position: absolute;
  right: 26px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--ul-purple);
  border-bottom: 2px solid var(--ul-purple);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.useful .q-a > ul > li > .btn[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.useful .q-a .btn h4 {
  margin: 0;
  padding: 0 !important;
  font-family: "Amatic SC", cursive;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ul-purple);
}
.useful .q-a .btn h5 {
  margin: 4px 0 0;
  padding: 0 !important;
  color: var(--ul-soft);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
}

/* ------------------------------------------------------------- panels -- */

/* Own classes rather than Bootstrap's .collapse, so neither Bootstrap nor
   Foundation can act on these. Closed by default; JavaScript opens the first
   one. With JS off, no max-height is ever set and every panel stays readable. */
.useful .acc-panel {
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .useful .acc-panel { transition: none; }
}

/* -------------------------------------------------------------- bodies -- */

.useful .q-a .card {
  margin: 8px 0 0;
  padding: 6px 24px !important;
  border: 1px solid var(--ul-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

.useful .q-a .card ul { margin: 0; padding: 0; list-style: none; }

/* One entry per row, with a hairline between. Contacts read as information,
   not fine print - this is a page people use in a hurry. */
.useful .q-a .card li {
  padding: 13px 0;
  border-bottom: 1px solid var(--ul-line);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ul-ink);
}
.useful .q-a .card li:last-child { border-bottom: 0; }

/* The number itself carries the weight. */
.useful .hh-contact { font-weight: 700; white-space: nowrap; }

.useful .q-a .card a { color: var(--ul-purple); font-weight: 600; text-decoration: none; }
.useful .q-a .card a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- aside -- */

.useful aside,
.useful .col-lg-3 { padding-top: 4px; }

.useful aside h3,
.useful aside h4 {
  font-family: "Amatic SC", cursive;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--ul-purple);
}
.useful aside img { border-radius: 14px; }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 768px) {
  .useful h1 { padding-top: 44px !important; }
  .useful .q-a { padding-left: 0 !important; padding-right: 0 !important; }
  .useful .q-a > ul > li > .btn { padding: 16px 48px 16px 18px !important; }
  .useful .q-a .card { padding: 4px 18px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .useful .q-a > ul > li > .btn,
  .useful .q-a > ul > li > .btn::after { transition: none; }
}

/* ------------------------------------------------------- editing rows --- */

/* Removing a row.
   Every row was editable but none could be deleted, so a contact that closed
   down could only be blanked, which left an empty line on the page. The button
   sits on the right of its row and only appears on hover, so the list still
   reads cleanly while editing. */
.useful .q-a .card li { position: relative; padding-right: 34px; }

.useful .hh-del {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: rgba(43, 37, 48, .08);
  color: var(--ul-soft, #6d6577);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}
/* Revealed by hovering the row the button belongs to. Two selectors because
   there are two shapes: on Useful Links the button sits inside a row within the
   card, on the Q&A it sits on the outer panel <li>. Scoping only to the first
   left the Q&A button permanently at opacity 0 -- present, clickable in theory,
   and invisible in practice. */
.useful .q-a .card li:hover .hh-del,
.useful .q-a > ul > li:hover > .hh-del,
.useful .hh-del:focus-visible { opacity: 1; }
.useful .hh-del:hover { background: #b3261e; color: #fff; }

/* Adding one. Sits as the last row of the list, so it reads as part of it. */
.useful .hh-add-row { border-bottom: 0 !important; padding: 10px 0 4px !important; }

.useful .hh-add {
  width: 100%;
  padding: 10px;
  border: 2px dashed var(--ul-line, #e7e2ec);
  border-radius: 12px;
  background: transparent;
  color: var(--ul-soft, #6d6577);
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.useful .hh-add:hover { border-color: var(--ul-purple, #7f3f98); color: var(--ul-purple, #7f3f98); }

/* Mid-delete, so a row that is on its way out cannot be clicked again. */
.useful .q-a .card li.is-removing { opacity: .4; pointer-events: none; }

/* --------------------------------------------------------------- Q & A --- */

/* The Q&A reuses this page's accordion. Two differences: the question is the
   panel heading rather than a section name, and the delete button has to clear
   the heading rather than sit inside a row. */
.useful .q-a > ul > li { position: relative; }

.useful .qa-q {
  color: var(--ul-purple, #7f3f98);
  font-family: "Amatic SC", cursive;
  margin-right: .2em;
}

.useful .qa-del {
  top: 22px;
  right: 14px;
  transform: none;
  z-index: 3;
}

/* A question is a sentence, not a section heading.
   Useful Links styles its panel headings in Amatic SC at up to 2.6rem, which is
   right for a word like "EMERGENCY" and much too large for a line of prose --
   it made every row several times taller than it needed to be. Questions get
   the body face at body size instead. */
.useful .q-a > ul > li > .qa-toggle {
  padding: 13px 46px 13px 18px !important;
}

.useful .q-a .qa-toggle h4 {
  margin: 0;
  padding: 0 !important;
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ul-ink, #2b2530);
}

/* The Q. keeps the brand face, at the size of the text beside it. */
.useful .q-a .qa-q {
  font-family: "Amatic SC", cursive;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ul-purple, #7f3f98);
  margin-right: .25em;
}

.useful .q-a > ul > li.w-100 { padding-bottom: 8px !important; }

/* The chevron was placed for a much taller row. */
.useful .q-a > ul > li > .qa-toggle::after { right: 18px; margin-top: -5px; }
.useful .q-a > ul > li > .qa-toggle[aria-expanded="true"]::after { margin-top: -2px; }

/* Answers are prose, so they get a reading measure rather than the full width
   of the card. */
.useful .q-a .card p {
  max-width: 72ch;
  margin: 0;
  padding: 4px 0 8px;
  color: var(--ul-soft, #6d6577);
  font-size: .9375rem;
  line-height: 1.7;
}

.useful .q-a .card { padding: 4px 18px !important; margin-top: 6px; }

.useful .qa-del { top: 12px; right: 12px; }