/**
 * News Article Template Styles
 */

@import "../partials/article-hero.css";
@import "../partials/article-footer.css";
@import "../partials/social-share.css";

/* Container utility */
.news-article-wrap {
  display: block;
  padding: 3.5rem var(--content-gutter, 1.25rem);
  position: relative;
  width: 100%;
}

.news-article-flex {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: flex-start;
  max-width: var(--content-max-width);
  margin: 0 auto;
  position: relative;
}

@media (width >= 1024px) {
  .news-article-flex {
    align-items: flex-start;
    flex-direction: row;
    gap: 4rem;
    justify-content: flex-start;
  }
}

/* Breadcrumbs */
.breadcrumbs__list {
  align-items: flex-start;
  color: var(--color-mist, #76767D);
  display: flex;
  flex-wrap: wrap;
  font-weight: 500;
  font-size: 0.75rem;
  justify-content: flex-start;
  line-height: 1.25em;
  margin: 0 0 1em;
  position: relative;
}

@media (width >= 768px) {
  .breadcrumbs__list {
    font-size: 0.875rem;
  }
}

.breadcrumbs__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumbs__link:hover {
  color: var(--color-evergreen, #20604E);
  text-decoration: underline;
}

/* Article Header */
.news-article__title {
  color: var(--color-evergreen);
  font-family: var(--font-heading-family);
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1em;
  margin: 0 0 .5rem;
  position: relative;
  text-transform: uppercase;
}

@media (width >= 640px) {
  .news-article__title {
  font-size: 3rem;
  }
}

@media (width >= 768px) {
  .news-article__title {
  font-size: 3.5rem;
  }
}

@media (width >= 1024px) {
  .news-article__title {
  font-size: 4rem;
  }
}

@media (width >= 1200px) {
  .news-article__title {
  font-size: 4.5rem;
  }
}

@media (width >= 1536px) {
  .news-article__title {
  font-size: 5rem;
  }
}

.news-article__header-content {
  max-width: var(--article-max-width);
  margin: 0 auto var(--article-spacing);
  padding-inline: var(--spacing-container, 1.5rem);
}

.news-article__category {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.news-article__meta {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin: 1.5rem 0;
  font-size: 0.9375rem;
  color: var(--color-text-secondary, #666);
}

.news-article__author {
  font-weight: 500;
}

.news-article__date {
  font-style: italic;
}

.news-article__excerpt {
  color: var(--color-text-secondary, #666);
  display: none;
  font-size: 1.125rem;
  line-height: 1.6;
  margin-top: 1.5rem;
}

/* Article Content */
.news-article__main {
  display: block;
  position: relative;
  width: 100%;
}

@media (width >= 1024px) {
  .news-article__main {
    margin: 0;
    max-width: var(--article-max-width, 60rem);
    order: 2;
  }
}

/* Typography within content blocks */
.news-article__content h2,
.news-article__content h3,
.news-article__content h4 {
  color: var(--color-evergreen);
  display: block;
  font-family: var(--font-heading-family);
  font-weight: 700;
  line-height: 1em;
  margin: 0 0 .5em;
  text-transform: uppercase;
}

.news-article__content h2 {
  font-size: 1.875rem;
}

.news-article__content h3 {
  font-size: 1.625rem;
}

.news-article__content h4 {
  font-size: 1.375rem;
}

.news-article__content p {
  color: var(--color-slate, #262628);
  display: block;
  font-size: 1rem;
  line-height: 1.625em;
  margin: 0 0 1.5em;
  max-width: 55.25em;
  position: relative;
}

.news-article__content a {
  color: var(--color-evergreen, #20604E);
  text-decoration: underline;
  transition: 0.2s;
}

.news-article__content a:hover {
  color: var(--color-slate, #262628);
}

/* Primary Button */
.news-article__content a.cta-button {
  background-color: var(--color-evergreen);
  border-color: var(--color-evergreen);
  color: var(--color-snow);
}

.news-article__content a.cta-button:hover {
  background-color: transparent;
  color: var(--color-evergreen);
}

/* Ghost Button */
.news-article__content a.cta-button--ghost {
  background-color: transparent;
  border-color: var(--color-evergreen);
  color: var(--color-evergreen);
}

.news-article__content a.cta-button--ghost:hover {
  background-color: var(--color-evergreen);
  color: var(--color-snow);
}

@media (width >= 640px) {
  .news-article__content h2 {
    font-size: 2.25rem;
  }

  .news-article__content h3 {
    font-size: 2rem;
  }

  .news-article__content h4 {
    font-size: 1.6875rem;
  }
}

@media (width >= 768px) {
  .news-article__content h2 {
    font-size: 2.625rem;
  }

  .news-article__content h3 {
    font-size: 2.375rem;
  }

  .news-article__content h4 {
    font-size: 2rem;
  }

  .news-article__content p {
    font-size: 1.125rem;
  }
}

@media (width >= 1024px) {
  .news-article__content h2 {
    font-size: 3rem;
  }

  .news-article__content h3 {
    font-size: 2.625rem;
  }

  .news-article__content h4 {
    font-size: 2.375rem;
  }

  .news-article__content p {
    font-size: 1rem;
  }
}

@media (width >= 1200px) {
  .news-article__content h2 {
    font-size: 3.375rem;
  }

  .news-article__content h3 {
    font-size: 3rem;
  }

  .news-article__content h4 {
    font-size: 2.625rem;
  }

  .news-article__content p {
    font-size: 1.125rem;
  }
}

@media (width >= 1536px) {
  .news-article__content h2 {
    font-size: 3.75rem;
  }

  .news-article__content h3 {
    font-size: 3.375rem;
  }

  .news-article__content h4 {
    font-size: 3rem;
  }
}

/* Lists */
.news-article__content ul,
.news-article__content ol {
  display: block;
  font-size: 1rem;
  margin: 0 0 1.5em 1em;
  max-width: 55.25em;
  padding: 0;
  position: relative;
}

.news-article__content li ul,
.news-article__content li ol {
  margin-top: 1em;
}

.news-article__content li {
  color: var(--color-slate, #262628);
  display: list-item;
  font-size: 1em;
  line-height: 1.625em;
  margin: 0 0 1em;
  padding: 0;
  position: relative;
}

.news-article__content li::marker {
  color: var(--color-evergreen, #20604E);
}

.news-article__content li p {
  font-size: 1em;
}

.news-article__content ul li {
  list-style-type: disc;
}

.news-article__content li ul li {
  list-style-type: circle;
}

.news-article__content li li ul li {
  list-style-type: square;
}

.news-article__content ol li {
  list-style-type: decimal;
}

.news-article__content ol li::marker {
  font-family: var(--font-body-family);
  font-weight: 500;
}

@media (width >= 768px) {
  .news-article__content ul,
  .news-article__content ol {
    font-size: 1.125rem;
    margin-left: 1.5em;
  }
}

@media (width >= 1024px) {
  .news-article__content ul,
  .news-article__content ol {
    font-size: 1rem;
    margin-left: 2em;
  }
}

@media (width >= 1200px) {
  .news-article__content ul,
  .news-article__content ol {
    font-size: 1.125rem;
    margin-left: 2.5em;
  }
}

/* Gutenberg blocks spacing */
.news-article__content .wp-block {
  margin-bottom: 2rem;
}

/* Content block (WYSIWYG) */
.news-article__content .content-block {
  margin-bottom: 2rem;
}

/* Side-by-side block within article */
.news-article__content .side-by-side {
  margin: 3rem 0;
  max-width: 100%;
}

/* Sidebar */
.news-article__sidebar {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: flex-start;
  margin: 0 auto;
  max-width: var(--content-max-width);
  position: relative;
  width: 100%;
}

@media (width >= 1024px) {
  .news-article__sidebar {
    flex-shrink: 0;
    margin: 0;
    width: 17.375rem;
  }
}

.news-article__sidebar-section {
  display: block;
  position: relative;
  width: 100%;
}

@media (width >= 1024px) {
  .news-article__sidebar-section {
    order: 2;
  }

  .news-article__sidebar-section.popular-articles-section {
    order: 1;
  }
}

.news-article__sidebar-heading {
  color: var(--color-mist, #76767D);
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25em;
  margin: 0 0 0.25rem;
  position: relative;
}

@media (width >= 768px) {
  .news-article__sidebar-heading {
    font-size: .875rem;
  }
}

.news-article__sidebar-categories {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
  position: relative;
  width: 100%;
}

/* Hide Popular Articles */
.news-article__sidebar-section.popular-articles-section {
  display: none;
}

/* Component Overrides for News Articles */
.news-article-wrap .blockquote {
  padding-left: 0;
  padding-right: 0;
}

.news-article-wrap .content-block__container {
  padding-left: 0;
  padding-right: 0;
}