/* The "Întrebări frecvente" page.
 *
 * Everything is scoped to body.af-faq-page so nothing here can reach another
 * page, and the file is only enqueued on that page anyway.
 *
 * The numbers are set for the reader this shop actually has: a smallholder in
 * their sixties, outdoors, holding a phone. 18px body text, 56px rows, and
 * ink dark enough that the page is readable in daylight - #1d1d1f on white is
 * about 17:1 against a 4.5:1 floor. Nothing here is decorative for its own
 * sake.
 */

body.af-faq-page {
  --af-faq-ink: var(--af-ink, #1d1d1f);
  --af-faq-body: var(--af-body, #3a3a3a);
  --af-faq-muted: var(--af-ink-2, #6e6e73);
  --af-faq-line: var(--af-hairline, #e0e0e0);
  --af-faq-tint: var(--af-parchment, #f5f5f7);
  --af-faq-green: var(--af-accent, #2e7d32);
  --af-faq-green-dark: var(--af-accent-dark, #1b5e20);
  --af-faq-focus: var(--af-focus, #0b65c2);
  --af-faq-row: 56px;
  --af-faq-radius: var(--af-radius-lg, 18px);
}

/* The builder's page was six wrappers deep and every one of them carried a
 * width. The arranged page is gone from all of that, so the containers it now
 * sits in are flattened rather than fought with rule by rule.
 *
 * The .row is named with a descendant combinator rather than a child one, and
 * that is not tidiness: page-af-arranged.php puts .sidebar-position-* between
 * .content-page and the .row, so `.content-page > .row` matched nothing at all
 * - measured on this page, 0 elements. What that cost: at a 390px viewport the
 * .row kept its -15px bootstrap margins and ran from x=-15 to x=405, 420px
 * wide, taking .af-faq and every word on the page out with it. It did not even
 * scroll into view, because ux.css clips the document's overflow-x. The same
 * miss was found and corrected in policy.css; this is the equivalent fix, with
 * the sidebar wrapper flattened too so the width stops at .content-page. */
body.af-faq-page .content-page,
body.af-faq-page .content-page .sidebar-position-without,
body.af-faq-page .content-page .row,
body.af-faq-page .content-page .content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

body.af-faq-page .page-heading {
  margin-bottom: 0;
}

.af-faq {
  /* 68 characters at this size. Past about 75 the eye loses the start of the
   * next line on the way back, which is the one thing a page of long answers
   * cannot afford. */
  max-width: 720px;
  margin: 0 auto;
  padding: 32px var(--af-gutter, 20px) 72px;
  color: var(--af-faq-body);
  font-size: 18px;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
}

/* The lead */

.af-faq__lead {
  margin: 0 0 28px;
}

.af-faq__intro {
  margin: 0 0 12px;
  color: var(--af-faq-ink);
  font-size: 20px;
  line-height: 1.5;
}

.af-faq__intro:last-child {
  margin-bottom: 0;
}

/* The lead pays the site gutter once, not twice.
 *
 * ux.css names .af-faq__intro in the same rule as .af-faq itself and hands
 * both of them `padding-left/right: var(--af-gutter) !important`. The intro
 * is inside .af-faq, so it paid the gutter a second time and the one
 * paragraph that opens the page started further in than everything below it.
 *
 * Measured, left edge of the text: at 390px the lead began at x=32 while
 * "Alege o secțiune", every group heading and every question began at x=16.
 * At 834px it was x=54 against x=27, and at 1440px x=108 against x=62 - the
 * step grows with the gutter, so it is worst on the widest screen and
 * plainly visible on a phone. Alignment is the first thing the eye checks,
 * and this page opens by failing it.
 *
 * ux.css corrects exactly this double-payment for .af-about__hero, __facts
 * and __values in the rule immediately below the one that causes it;
 * .af-faq__intro was simply missed.
 *
 * !important because the declaration being undone is !important, and two
 * classes deep so the rule wins on specificity as well as on order (faq.css
 * is enqueued after ux.css, but this should not depend on that). */
.af-faq__lead .af-faq__intro {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The list of sections
 *
 * Four links, each a full row, each naming how many questions are behind it
 * so the reader can judge whether it is worth the tap before making it. */

.af-faq__jump {
  margin: 0 0 40px;
  padding: 20px;
  background: var(--af-faq-tint);
  border-radius: var(--af-faq-radius);
}

.af-faq__jump-title {
  margin: 0 0 12px;
  color: var(--af-faq-ink);
  font-size: 17px;
  font-weight: 700;
}

.af-faq__jump-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.af-faq__jump-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--af-faq-line);
  border-radius: 12px;
  color: var(--af-faq-ink);
  text-decoration: none;
  font-size: 17px;
  line-height: 1.35;
}

.af-faq__jump-link:hover,
.af-faq__jump-link:focus {
  border-color: var(--af-faq-green);
  color: var(--af-faq-ink);
  text-decoration: none;
}

.af-faq__jump-name {
  font-weight: 600;
}

.af-faq__jump-n {
  flex: none;
  color: var(--af-faq-muted);
  font-size: 15px;
  white-space: nowrap;
}

/* A group of questions */

.af-faq__group {
  margin: 0 0 40px;
  /* The site header is sticky, so a jump link that scrolled a heading to the
   * very top would put it underneath the header. */
  scroll-margin-top: 96px;
}

.af-faq__group-title {
  margin: 0 0 4px;
  color: var(--af-faq-ink);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}

.af-faq__group-note {
  margin: 0 0 8px;
  color: var(--af-faq-muted);
  font-size: 16px;
}

.af-faq__items {
  margin-top: 12px;
  border-top: 1px solid var(--af-faq-line);
}

.af-faq__item {
  border-bottom: 1px solid var(--af-faq-line);
}

/* The question
 *
 * The heading is only there to keep the questions in the page outline; all of
 * the type and spacing belongs to the button inside it, which is the thing
 * the reader touches. */

.af-faq__qh {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.af-faq__q {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: var(--af-faq-row);
  margin: 0;
  padding: 16px 4px;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--af-faq-ink);
  font-family: inherit;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  /* The row is the target, not the words in it. Nobody should have to aim at
   * a line of text on a phone held in one hand. */
  -webkit-tap-highlight-color: rgba(46, 125, 50, .12);
}

.af-faq__q-text {
  flex: 1 1 auto;
}

.af-faq__q-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--af-faq-tint);
  color: var(--af-faq-green-dark);
  transition: transform .18s var(--af-ease, cubic-bezier(.4, 0, .2, 1));
}

.af-faq__q[aria-expanded="true"] .af-faq__q-mark {
  transform: rotate(180deg);
}

.af-faq__q[aria-expanded="true"] {
  color: var(--af-faq-green-dark);
}

.af-faq__q:hover .af-faq__q-mark {
  background: #e4ece4;
}

/* Keyboard focus has to be visible without being on all the time, so it is
 * drawn only for :focus-visible, and it is a ring rather than a colour change
 * because colour alone is not a signal everyone can see. */
.af-faq__q:focus {
  outline: none;
}

.af-faq__q:focus-visible,
.af-faq__jump-link:focus-visible,
.af-faq__btn:focus-visible {
  outline: 3px solid var(--af-faq-focus);
  outline-offset: 2px;
}

/* The answer */

.af-faq__a {
  padding: 0 4px;
}

.af-faq__a-in {
  padding: 0 0 20px;
  /* Was 64ch - about 617px - inside a row measuring 1301px, so a 288
   * character answer broke into four lines with half the row left empty
   * beside it. The owner asked twice for the answer to use the width it
   * has, so it does.
   *
   * The cap was not superstition: past roughly 90 characters the eye
   * struggles to find the start of the next line, and at this width a line
   * runs to about 135. The line-height below is raised to 1.75 to give the
   * return sweep a clearer target, which is the usual mitigation when a
   * measure has to be wide. If it still reads long on a large monitor, the
   * dial to turn is here. */
  max-width: none;
  color: var(--af-faq-body);
  font-size: 17px;
  line-height: 1.75;
  animation: af-faq-open .2s var(--af-ease, cubic-bezier(.4, 0, .2, 1)) both;
}

.af-faq__a-in p {
  margin: 0 0 14px;
}

.af-faq__a-in p:last-child {
  margin-bottom: 0;
}

.af-faq__a-in ul,
.af-faq__a-in ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.af-faq__a-in li {
  margin: 0 0 10px;
}

.af-faq__a-in a {
  color: var(--af-faq-green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@keyframes af-faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* The way out */

.af-faq__help {
  margin: 48px 0 0;
  padding: 28px 24px;
  background: var(--af-faq-tint);
  border-radius: var(--af-faq-radius);
  text-align: center;
}

.af-faq__help-title {
  margin: 0 0 8px;
  color: var(--af-faq-ink);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
}

.af-faq__help-text {
  margin: 0 auto 22px;
  max-width: 44ch;
  font-size: 17px;
}

.af-faq__help-ways {
  display: grid;
  gap: 12px;
}

.af-faq__btn {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 20px;
  background: #fff;
  border: 1px solid var(--af-faq-line);
  border-radius: 14px;
  color: var(--af-faq-ink);
  text-align: left;
  text-decoration: none;
}

.af-faq__btn:hover,
.af-faq__btn:focus {
  text-decoration: none;
  border-color: var(--af-faq-green);
  color: var(--af-faq-ink);
}

/* The telephone is the control most of these customers will use, so it is the
 * filled one and the whole tile dials. */
.af-faq__btn--call {
  background: var(--af-faq-green);
  border-color: var(--af-faq-green);
  color: #fff;
}

.af-faq__btn--call:hover,
.af-faq__btn--call:focus {
  background: var(--af-faq-green-dark);
  border-color: var(--af-faq-green-dark);
  color: #fff;
}

.af-faq__btn-i {
  flex: none;
  display: inline-flex;
}

.af-faq__btn-t {
  display: block;
}

.af-faq__btn-l {
  display: block;
  font-size: 15px;
  opacity: .85;
}

.af-faq__btn-v {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.af-faq__help-hours {
  margin: 18px 0 0;
  color: var(--af-faq-muted);
  font-size: 16px;
}

/* Wider than a phone: the two ways out sit side by side, and the questions
 * get a little more air between them. */
@media (min-width: 700px) {
  .af-faq {
    padding-top: 40px;
    font-size: 18px;
  }

  .af-faq__help-ways {
    grid-template-columns: 1fr 1fr;
  }

  .af-faq__q {
    padding: 20px 8px;
    font-size: 19px;
  }

  .af-faq__a {
    padding: 0 8px;
  }
}

/* Motion is a nicety and some people are made ill by it. Everything above
 * still works with all of it switched off - the chevron simply points the
 * other way and the answer simply appears. */
@media (prefers-reduced-motion: reduce) {
  .af-faq__q-mark {
    transition: none;
  }

  .af-faq__a-in {
    animation: none;
  }
}

/* Windows high-contrast mode throws the palette away, so the row separators
 * and the focus ring are restated in terms it keeps. */
@media (forced-colors: active) {
  .af-faq__item {
    border-bottom: 1px solid CanvasText;
  }

  .af-faq__q:focus-visible,
  .af-faq__jump-link:focus-visible,
  .af-faq__btn:focus-visible {
    outline: 3px solid Highlight;
  }
}