/* SEO ROUND 1. The "Popular questions" block on a recipe page.

   IT BORROWS, IT DOES NOT INVENT. Every colour, radius and inset below is a
   custom property recipe-v3.css already defines -- --cream and #e8dfae are the
   nutrition panel's own ground and edge, --pad-l/--pad-r are the one content
   inset every full-width block in the recipe card starts and ends on, and
   --maroon is the heading colour the other block headings use. So the block
   sits on the same two lines as the ingredient box, the tool box and the
   nutrition panel at every width, and a change to the recipe's palette moves
   it with everything else instead of leaving it behind.

   ITS OWN FILE, requested by templates/recipe_v3.html only when the block
   renders, so a recipe with no questions pays nothing for it -- not even the
   request.

   THE ANSWERS ARE IN THE DOCUMENT WHETHER THIS FILE LOADS OR NOT. The markup
   is a <details> per question with the first one open; with no CSS at all the
   browser still draws a working disclosure control and the text is still
   there to be read and crawled. Nothing here hides anything: `display:none`
   on an answer an FAQPage claims is the policy problem this block exists to
   fix. */
.ttc-faq{
  background:var(--cream,#fffeec);
  border:1px solid #e8dfae;
  border-radius:var(--r-md,30px);
  margin-top:38px;
  padding:33px calc(var(--pad-r,56px) - 1px) 26px calc(var(--pad-l,56px) - 1px);
}
.ttc-faq__head{
  font-size:var(--nuthead-size,26px);
  font-weight:var(--nuthead-weight,700);
  color:var(--maroon,#51010e);
  margin:0 0 6px;
}
.ttc-faq__item{
  border-top:1px solid #e8dfae;
  padding:16px 0 2px;
}
.ttc-faq__item:first-of-type{border-top:0}
/* The marker is the arrow, drawn on the summary's own ::after so the row can
   be a flex line with the question on the left and the arrow hard right.
   `list-style:none` plus the WebKit pseudo-element is what removes the
   browser's default triangle in every engine. */
.ttc-faq__q{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:flex-start;
  gap:14px;
  font-size:var(--small-size,17px);
  font-weight:600;
  color:var(--dark,#1d2327);
  line-height:1.45;
}
.ttc-faq__q::-webkit-details-marker{display:none}
.ttc-faq__q::after{
  content:"";
  flex:0 0 auto;
  margin-left:auto;
  margin-top:.45em;
  width:9px;height:9px;
  border-right:2px solid var(--maroon,#51010e);
  border-bottom:2px solid var(--maroon,#51010e);
  transform:rotate(45deg);
  transition:transform .15s ease;
}
.ttc-faq__item[open] .ttc-faq__q::after{transform:rotate(-135deg)}
/* A visible focus ring, because the summary is the control and a keyboard
   reader has to be able to see where it is. */
.ttc-faq__q:focus-visible{outline:2px solid var(--maroon,#51010e);outline-offset:3px}
.ttc-faq__a{padding:4px 0 12px}
.ttc-faq__a p{
  margin:0;
  font-size:var(--small-size,17px);
  color:var(--body,#4e5155);
  line-height:var(--small-line,1.7);
}
@media (max-width:1024px){
  .ttc-faq{padding-left:calc(var(--pad-l,22px) - 1px);padding-right:calc(var(--pad-r,22px) - 1px)}
}
@media (max-width:600px){
  .ttc-faq{padding-top:24px;padding-bottom:18px;border-radius:var(--r-md,22px)}
}
/* Print: every answer open and the arrow gone -- a printed recipe with
   collapsed questions prints the questions and loses the answers. */
@media print{
  .ttc-faq__item{border-top:1px solid #ddd}
  .ttc-faq__a{display:block !important}
  .ttc-faq__q::after{display:none}
}