/* INFO PAGES
   Layout for the Info Page, FAQ and Contact templates (partials/info-page.hbs), matching the
   live unhyd.com static pages. Everything is scoped to .info-page so posts and other pages keep
   the vendor styles. The FAQ accordion also applies to the Newsletters page FAQ (.nl-faq). */


/* Tokens */

.info-page,
.nl-faq {
  --info-column: 45rem;
  --info-text: #444444;
  --info-rule: var(--color-lightest);
  --info-box-bg: #f7f7f5;
  --info-box-border: #e8e8e4;
}

html.theme-dark :is(.info-page, .nl-faq) {
  --info-text: #d9d5d0;
  --info-box-bg: rgba(255, 255, 255, 0.04);
  --info-box-border: var(--color-lightest);
}


/* Layout */

.info-page-inner {
  margin: 0 auto;
  max-width: calc(var(--info-column) + 2rem);
  padding: 4rem 1rem 7rem;
}


/* Header: eyebrow (or back link), title, rule */

.info-page-header {
  border-bottom: 1px solid var(--info-rule);
  margin-bottom: 3rem;
  padding-bottom: 2.5rem;
}

.info-page-eyebrow {
  color: var(--color-lighter);
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.35;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

.info-page-back {
  align-items: center;
  color: var(--color-lighter);
  display: inline-flex;
  font-family: var(--font-accent);
  font-size: 0.875rem;
  gap: 0.5rem;
  margin-bottom: 2rem;
  text-decoration: none;
  transition: color 0.15s ease-out;
}

.info-page-back:hover {
  color: var(--color-titles);
}

.info-page-back svg {
  height: 0.875rem;
  width: 0.875rem;
}

.info-page .info-page-title {
  color: var(--color-titles);
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0;
}

.info-page--faq .info-page-header {
  border-bottom: 0;
  margin-bottom: 1.5rem;
  padding-bottom: 0;
}


/* Content */

.info-page-content {
  color: var(--info-text);
  font-family: var(--gh-font-body, var(--font-body));
  font-size: clamp(18px, 1.125rem, 20px);
  line-height: 1.6;
}

.info-page-content > * {
  margin-bottom: 0;
  margin-top: 1rem;
}

.info-page-content > :first-child {
  margin-top: 0;
}

.info-page-content :is(h2, h3) {
  color: var(--color-titles);
  font-family: var(--gh-font-heading, var(--font-heading));
  font-weight: 600;
}

.info-page-content h2 {
  border-bottom: 1px solid var(--info-rule);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin-top: 3rem;
  padding-bottom: 0.5rem;
}

.info-page-content h3 {
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 1.5rem;
}

.info-page-content h2 + * {
  margin-top: 1rem;
}

.info-page-content h3 + * {
  margin-top: 0.25rem;
}

.info-page-content a {
  color: var(--color-titles);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.info-page-content strong {
  color: var(--color-titles);
  font-weight: 600;
}


/* Masthead entries: an H3 name followed by a paragraph of only italic text (the role).
   Name and role share a line; a rule separates people within a group. */

.info-page-content h3:has(+ p > em:only-child) {
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 1rem;
  margin-right: 0.5rem;
  margin-top: 1.5rem;
}

.info-page-content h3 + p:has(> em:only-child) {
  color: var(--color-lighter);
  display: inline-block;
  font-family: var(--font-accent);
  font-size: 0.875rem;
  margin-top: 0;
}

.info-page-content h3 + p:has(> em:only-child) em {
  font-style: normal;
}

.info-page-content h3 + p:has(> em:only-child) + p {
  border-bottom: 1px solid var(--info-rule);
  margin-top: 0.5rem;
  padding-bottom: 1.5rem;
}

.info-page-content h3 + p:has(> em:only-child) + p:is(:last-child, :has(+ h2)) {
  border-bottom: 0;
  padding-bottom: 0;
}


/* Callout cards: grey = shaded box, white = left-ruled block */

.info-page .kg-callout-card {
  border-radius: 0;
  margin-top: 1rem;
}

/* Matches Ghost's cards.min.css selector shape so it wins over its 0.95em / 1.5em */
.info-page .kg-callout-card div.kg-callout-text {
  color: var(--info-text);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.info-page .kg-callout-card-grey {
  background-color: var(--info-box-bg);
  box-shadow: inset 0 0 0 1px var(--info-box-border);
  padding: 1.25rem 1.5rem;
}

.info-page .kg-callout-card-white {
  background-color: transparent;
  border-left: 2px solid var(--color-titles);
  box-shadow: none;
  padding: 0 0 0 1.25rem;
}

.info-page .kg-callout-card-white + .kg-callout-card-white {
  margin-top: 1.5rem;
}

.info-page .kg-callout-card-white .kg-callout-text > :is(strong, b):first-child {
  color: var(--color-titles);
  font-family: var(--gh-font-heading, var(--font-heading));
  font-size: 1rem;
  font-weight: 600;
}

/* Italic text right after the title reads as a small label, e.g. "Clearly labeled" */
.info-page .kg-callout-card-white .kg-callout-text > :is(strong, b):first-child + :is(em, i) {
  color: var(--color-lighter);
  font-family: var(--font-accent);
  font-size: 0.6875rem;
  font-style: normal;
  letter-spacing: 0.08em;
  margin-left: 0.375rem;
  text-transform: uppercase;
}


/* Button card */

.info-page .kg-button-card {
  margin-top: 1.25rem;
}

.info-page .kg-button-card a.kg-btn {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.75rem 1.25rem;
  text-transform: none;
}


/* Toggle cards: FAQ accordion (Info pages and the Newsletters FAQ) */

:is(.info-page, .nl-faq) .kg-toggle-card {
  margin-top: 0;
}

:is(.info-page, .nl-faq) .kg-toggle-card:not(.kg-toggle-card + .kg-toggle-card) {
  border-top: 0;
  margin-top: 1.5rem;
}

:is(.info-page, .nl-faq) .kg-toggle-heading {
  cursor: pointer;
  padding: 1.25rem 0;
}

/* Questions are re-levelled to H2/H3 by mews.js; undo the section heading rule for them */
:is(.info-page, .nl-faq) .kg-toggle-card .kg-toggle-heading-text {
  border-bottom: 0;
  color: var(--color-titles);
  font-family: var(--gh-font-heading, var(--font-heading));
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.4;
  margin: 0;
  padding-bottom: 0;
}

:is(.info-page, .nl-faq) .kg-toggle-card-icon {
  min-width: 1.5rem;
  width: 1.5rem;
}

/* The vendor MORE / LESS text is dropped here; the chevron carries the state.
   The attribute selector matches the vendor rule's specificity so this wins in both states. */
:is(.info-page, .nl-faq) .kg-toggle-card[data-kg-toggle-state] .kg-toggle-card-icon:before {
  content: none;
}

:is(.info-page, .nl-faq) .kg-toggle-card-icon:focus-visible {
  outline: 2px solid var(--color-titles);
  outline-offset: 4px;
}

:is(.info-page, .nl-faq) .kg-toggle-content {
  color: var(--info-text);
  font-size: 1rem;
  line-height: 1.65;
}


/* Contact and Story templates: form section inside the reading column */

.info-page .info-form-section {
  margin-top: 3rem;
}

.info-page .info-form-title {
  border-bottom: 1px solid var(--info-rule);
  color: var(--color-titles);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
}


@media (max-width: 719.98px) {
  .info-page-inner {
    padding: 2.5rem 1rem 5rem;
  }

  .info-page-header {
    margin-bottom: 2rem;
    padding-bottom: 1.75rem;
  }

  .info-page .info-page-title {
    font-size: 2.25rem;
  }

  .info-page-content h2 {
    margin-top: 2.5rem;
  }
}