/* Editorial Typography — design.md compliant */

/* Accessible skip link hiding */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Main content typography */
/* Make the main container a centered column so children control width */
#main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
}

#main .entry-content:not(.mailpoet_form),
#main > p,
#main ul {
  font-family: var(--fyc-font-body, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  max-width: var(--fyc-content-width, 960px);
  --flow-space: var(--fyc-flow-space, 1.15rem);

  font-size: 1rem;
  line-height: var(--fyc-line-height, 1.55);
  width: auto;
  min-width: 0;
}

#main .entry-content:not(.mailpoet_form) p,
#main > p {
  text-wrap: pretty;
}

#main .entry-content:not(.mailpoet_form) h1,
#main .entry-content:not(.mailpoet_form) h2,
#main > h1,
#main > h2 {
  text-wrap: balance;
  line-height: calc(1.1 * var(--fyc-heading-tightness, 0.95));
}

#main .entry-content:not(.mailpoet_form) > * + *,
#main > * + * {
  margin-top: var(--flow-space);
}

/* Heading font family */
#main .entry-content:not(.mailpoet_form) h1,
#main .entry-content:not(.mailpoet_form) h2,
#main .entry-content:not(.mailpoet_form) h3,
#main .entry-content:not(.mailpoet_form) h4,
#main .entry-content:not(.mailpoet_form) h5,
#main .entry-content:not(.mailpoet_form) h6,
#main > h1,
#main > h2,
#main > h3,
#main > h4,
#main > h5,
#main > h6,
article h1,
article h2 {
  font-family: var(--fyc-font-heading, serif);
}

/* Article titles - remove underlines */
article h1,
article h2 {
  text-decoration: none;
}

article h2 a {
  text-decoration: none;
  color: var(--fyc-color-darkslategray);
}

article h2 a:hover {
  color: var(--fyc-color-robinsegg);
}

/* Single post and article width to match page content */
article {
  max-width: var(--fyc-content-width, 960px);
  width: auto;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  #main {
    width: 90%;
  }
}