/*
 * The block below the products of brand pages (brand profile, OH-110) and
 * product category pages (guide, OH-112), and below the list of the brands
 * overview (OH-120): one reading column with the text of the brand, category
 * or page and its questions («Häufige Fragen zu Orbitkey», «Häufige
 * Fragen»), printed by inc/woocommerce/term-profile.php. Loaded
 * render-blocking on the first page of such a page when it shows the block,
 * which can be on screen at first paint. The facts of a brand: brand-page.css.
 */

/* ---------- Block and sections ---------- */
.oh-term-profile {
  --oh-term-profile-block: 56px; /* between two sections, on each side of the line */
  --oh-term-profile-title: 32px;
  --oh-term-profile-heading: 26px; /* h2 inside a text, below the size of a section title */
  --oh-term-profile-subheading: 22px;
  --oh-term-profile-text: 16px;
  --oh-term-profile-small: 15px; /* table and the line below the questions */
  margin-top: 40px;
  padding-top: var(--oh-term-profile-block);
  border-top: 1px solid var(--oh-color6);
  color: var(--oh-color4);
  /* «Mehr über …» of a brand jumps here: below the sticky part of the header. */
  scroll-margin-top: calc(var(--oh-hdr-main-h, 74px) + var(--oh-hdr-nav-h, 52px) + 24px);
}
/* The reading column of the product details; the fallback holds for a browser
   that still keeps an older style.css (Known Issues M38). */
.oh-term-profile__section {
  max-width: var(--oh-read-width, 720px);
  margin-inline: auto;
}
.oh-term-profile__section + .oh-term-profile__section {
  margin-top: var(--oh-term-profile-block);
  padding-top: var(--oh-term-profile-block);
  border-top: 1px solid var(--oh-color6);
}
.oh-term-profile__title {
  margin: 0 0 22px;
  font-size: var(--oh-term-profile-title);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--oh-color4);
}

/* ---------- Text: description of the brand or category in wp-admin ----------
   Paragraphs as the description of the product page. A category's guide has
   its own h2 («Leder oder Filz?»), lists and a small table; a brand's text has
   h3 (a bold line of its own, oh_brand_profile_about_html()). */
.oh-term-profile__text {
  font-size: var(--oh-term-profile-text);
  line-height: 1.7;
}
.oh-term-profile__text p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.oh-term-profile__text :is(p, ul, ol, table, figure) + :is(p, ul, ol, table, figure) {
  margin-top: 14px;
}
.oh-term-profile__text h2 {
  margin: 44px 0 14px;
  font-size: var(--oh-term-profile-heading);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--oh-color4);
}
.oh-term-profile__text :is(h3, h4) {
  margin: 34px 0 14px;
  font-size: var(--oh-term-profile-subheading);
  font-weight: 400;
  line-height: 1.3;
  color: var(--oh-color4);
}
.oh-term-profile__text > :first-child {
  margin-top: 0;
}
.oh-term-profile__text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.oh-term-profile__text :is(ul, ol) {
  margin: 0;
  padding-left: 1.25em;
}
.oh-term-profile__text ul {
  list-style: disc;
}
.oh-term-profile__text ol {
  list-style: decimal;
}
.oh-term-profile__text li + li {
  margin-top: 6px;
}
.oh-term-profile__text :is(img, figure) {
  max-width: 100%;
  height: auto;
}
.oh-term-profile__text figure {
  margin-inline: 0;
}

/* A small table, e.g. materials side by side. Long words break with a hyphen
   in the language of the page (as the Journal's tables), and a word that
   cannot be hyphenated (a model name, a number with its unit) breaks anywhere,
   so three columns fit a phone without the page scrolling sideways. */
.oh-term-profile__text table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--oh-term-profile-small);
  line-height: 1.5;
}
.oh-term-profile__text :is(th, td) {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--oh-color6);
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 5;
  hyphenate-limit-chars: 12 5 5;
}
.oh-term-profile__text :is(th, td):last-child {
  padding-inline-end: 0;
}
.oh-term-profile__text th {
  font-weight: 600;
}
.oh-term-profile__text thead th {
  border-bottom-color: var(--oh-color4);
}

/* ---------- Questions: the shop's FAQ (style.css, toggle in custom.js) ----------
   The question is a button inside its h3 and takes font and colour of the h3,
   as on the product page (single-product.css). */
.oh-term-faqs .oh-term-faqs__question {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  text-transform: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.oh-term-faqs .oh-term-faqs__question:focus-visible {
  outline: 2px solid var(--oh-primary);
  outline-offset: 2px;
}
.oh-term-faqs .faq_detail {
  font-size: var(--oh-term-profile-text);
  line-height: 1.7;
}
.oh-term-faqs .faq_detail p {
  font-size: inherit;
  line-height: inherit;
}
.oh-term-faqs .faq_detail p + p {
  margin-top: 10px;
}
.oh-term-faqs .faq_detail a,
.oh-term-faqs__help a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.oh-term-faqs__help {
  margin-top: 20px;
  font-size: var(--oh-term-profile-small);
  line-height: 1.6;
}

@media only screen and (max-width: 767px) {
  .oh-term-profile {
    --oh-term-profile-block: 40px;
    --oh-term-profile-title: 26px;
    --oh-term-profile-heading: 23px;
    --oh-term-profile-subheading: 20px;
    --oh-term-profile-text: 15px;
  }
}