/* ==========================================================================
   Similius FAQ page — Urenus look & feel
   Target:  https://us.similius.com/faqs-2/     (WordPress page ID 36)
   Model:   https://urenus.com/pages/faqs-2

   Paste into Appearance → Customize → Additional CSS.

   NO MARKUP CHANGES. The questions and answers already match Urenus word for
   word, and they are a Brizy Accordion element, so this is purely a restyle.

   Measured off urenus.com (its FAQ is a Shopify theme section, so these are
   computed values, not an inline stylesheet):
     content column   780px page-width minus 40px padding = 700px, centred
     category heading 32px / 700 / #42434D / DM Sans / line-height 1.2,
                      60px above and 60px below
     row              no box at all: border-bottom 1px rgba(66,67,77,.16)
     question         18px / 700 / #42434D
     row padding      18px 0
     chevron          16px, currentColor
     answer           16px / #42434D, 18px of padding below

   -------------------------------------------------------------------------
   ABOUT THE SELECTORS — read before editing.

   Brizy's own rules look like this:

     .brz .brz-css-d-1re8uxh > .brz-accordion__item            (0,4,0)
     .brz .brz-css-XXXXX > .brz-accordion__item
       > .brz-accordion__nav .brz-accordion__nav-title          (0,5,0)

   A plain `body.page-id-36 .brz-accordion__item` is only (0,2,1) and loses,
   silently. So every rule below is written long enough to out-rank them.

   The `.brz-css-XXXXX` hashes are deliberately NOT used here: Brizy
   regenerates them every time the page is saved in the editor, which would
   break any rule depending on them. The selector *shape* it generates is
   stable, so matching on structure alone keeps working across re-saves.

   `.brz` is a class on <body>, hence `body.page-id-36.brz` — chained, not
   descended. (Writing `body.page-id-36 .brz ...` matches nothing, since body
   is not its own descendant.)
   -------------------------------------------------------------------------

   ONE DELIBERATE DEPARTURE: Urenus sets line-height 1.2 on answer text. Its
   answers are mostly a single line; several Similius answers run four or five
   lines, where 1.2 is genuinely hard to read. Answers use 1.6 here — set
   --faq-answer-lh to 1.2 for an exact match.
   ========================================================================== */

body.page-id-36 {
  --faq-ink: #42434D;                 /* rgb(66, 67, 77) — Urenus text colour */
  --faq-rule: rgba(66, 67, 77, .16);
  --faq-answer-lh: 1.6;

  /* Brizy resolves heading fonts through this variable and marks the
     declaration !important, so redirecting the variable is the only clean way
     in — a direct font-family would need !important of its own. */
  --brz-heading3fontfamily: "DM Sans", sans-serif;
}


/* --- 1. Content column -------------------------------------------------- */
/* Brizy centres .brz-container at 1282px. Urenus runs a 700px measure, and
   that narrow column is most of what makes the page read as Urenus. */

body.page-id-36 .brz-container {
  width: min(700px, calc(100% - 40px));
  max-width: none;
  margin-inline: auto;
}

body.page-id-36 .brz-section__content {
  padding-block: 60px;
}


/* --- 2. Category headings ("Shipping", "Payment", …) -------------------- */
/* Brizy: 28px/700 Overpass at #192a3d. Urenus: 32px/700 DM Sans at #42434D. */

body.page-id-36 .brz-rich-text h3 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--faq-ink);
  letter-spacing: normal;
}

/* Every Brizy element sits in its own .brz-wrapper with a 10px block margin.
   :has() tells the heading wrappers apart from the accordion wrappers. */
body.page-id-36 .brz-wrapper:has(> .brz-rich-text) {
  margin-block: 60px !important;
}

body.page-id-36 .brz-wrapper:has(> .brz-accordion) {
  margin-block: 0 !important;
}


/* --- 3. Rows ------------------------------------------------------------ */
/* Brizy draws every row as a white card: 2px border all round, 3px gap.
   Urenus has no box — one hairline under each row, rows flush together.
   The three states (default / open / hover) are separate Brizy rules, so all
   three are answered here or the box reappears on interaction. */

body.page-id-36.brz .brz-accordion > .brz-accordion__item,
body.page-id-36.brz .brz-accordion > .brz-accordion__item:hover,
body.page-id-36.brz .brz-accordion > .brz-accordion__item.brz-accordion__item--active {
  border: 0;
  border-bottom: 1px solid var(--faq-rule);
  border-radius: 0;
  margin-bottom: 0;
  background: transparent;
  box-shadow: none;
}

body.page-id-36.brz .brz-accordion > .brz-accordion__item > .brz-accordion__nav {
  padding: 18px 0;
  gap: 16px;
  align-items: center;
  background: transparent;
  border-radius: 0;
  color: var(--faq-ink);
  cursor: pointer;
}

/* Question text. Urenus uses 700; this is deliberately one step heavier.

   IMPORTANT: Blocksy only requests DM Sans at wght@400;500;600;700, so a bare
   font-weight:800 would be FAUX bold — the browser smearing the 700 cut, which
   at 18px looks muddy rather than heavier. The real 800 cut has to be loaded:
     - Similius Styles plugin: it prints the extra Google Fonts request already.
     - Still on Additional CSS: Customize → General → Typography → Base Font,
       add weight 800 to DM Sans. (An @import here would not work — @import is
       only valid at the very top of a stylesheet.)
   Verified with document.fonts.check('800 18px "DM Sans"'). */
body.page-id-36.brz .brz-accordion > .brz-accordion__item > .brz-accordion__nav > .brz-accordion__nav-title {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: normal;

  /* Weight alone can read as "darker"; if you want more separation from the
     answer text, swap this for #2b2c48 (the brand navy) or #1a1b2e. */
  color: var(--faq-ink);
}

/* Brizy ships two chevrons per row — one for open, one for closed — at 12px
   and rgba(0,0,0,.7). Urenus uses 16px in the text colour. */
body.page-id-36.brz .brz-accordion .brz-accordion-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: var(--faq-ink);
  flex: 0 0 auto;
}


/* --- 4. Answers --------------------------------------------------------- */

/* DO NOT put padding on .brz-accordion__content.

   Brizy collapses a row by animating this element's height to 0, and it is
   overflow:hidden. CSS clips overflow at the PADDING box, not the content
   box — so a padding-bottom here stays visible at height:0 and leaks an
   18px strip of the answer's first line under every CLOSED question.
   Measured: height:0 still produced an 18px visible box.

   The 18px of breathing room below an open answer therefore goes on the
   inner .brz-accordion__item-content, which is inside the clipped area and
   collapses to nothing with it. That element is also where Brizy puts a
   10px side indent, which would otherwise stop the answer lining up with
   its question — this is the (0,5,0) rule a short selector loses to. */
body.page-id-36.brz .brz-accordion > .brz-accordion__item > .brz-accordion__content {
  padding: 0;
}

body.page-id-36.brz .brz-accordion > .brz-accordion__item > .brz-accordion__content > .brz-accordion__item-content {
  padding: 0 0 18px;
  margin-top: 0;
}

body.page-id-36.brz .brz-accordion .brz-accordion__content .brz-wrapper {
  margin-block: 0 !important;
}

body.page-id-36.brz .brz-accordion .brz-accordion__content p {
  font-size: 16px;
  line-height: var(--faq-answer-lh);
  color: var(--faq-ink);
  margin: 0 0 .8rem;
}

body.page-id-36.brz .brz-accordion .brz-accordion__content p:last-child {
  margin-bottom: 0;
}

/* The answers carry an inline style="color: rgb(102, 102, 102)" written by
   the Brizy editor. Inline styles lose to nothing but !important. */
body.page-id-36.brz .brz-accordion .brz-accordion__content p span[style] {
  color: var(--faq-ink) !important;
}

body.page-id-36.brz .brz-accordion .brz-accordion__content a {
  color: var(--faq-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --- 5. Mobile ---------------------------------------------------------- */

@media (max-width: 640px) {
  body.page-id-36 .brz-container {
    width: calc(100% - 32px);
  }

  body.page-id-36 .brz-section__content {
    padding-block: 36px;
  }

  body.page-id-36 .brz-rich-text h3 {
    font-size: 26px;
  }

  body.page-id-36 .brz-wrapper:has(> .brz-rich-text) {
    margin-block: 36px 28px !important;
  }

  body.page-id-36.brz .brz-accordion > .brz-accordion__item > .brz-accordion__nav {
    padding: 15px 0;
    gap: 12px;
  }

  body.page-id-36.brz .brz-accordion > .brz-accordion__item > .brz-accordion__nav > .brz-accordion__nav-title {
    font-size: 16px;
  }
}