/* insurances.co.nz article page: overrides on top of the mcnz article.css */

.article-hero {
  padding-block: 20px 0;
  padding-inline: 50px;
}

.breadcrumbs a {
  color: var(--color-primary);
}

.breadcrumbs a:hover {
  color: var(--color-accent);
}

.article-hero-image {
  margin-block-start: 10px;
}

.article-section {
  padding-block: 30px 60px;
  padding-inline: 50px;
}

/* Share buttons: Elementor "official colour" circles, no label */
.article-share {
  padding-block-start: 106px;
}

.article-share .share-btn {
  width: 34px;
  height: 34px;
  margin-block-end: 17px;
  color: #fff;
}

.article-share .share-btn svg {
  width: 17px;
  height: 17px;
}

.share-btn--facebook { background-color: #3b5998; }
.share-btn--linkedin { background-color: #0077b5; }
.share-btn--x { background-color: #000; }

.share-btn:hover {
  filter: saturate(1.5) brightness(1.2);
}

.article-title {
  font-size: 37px;
  color: var(--color-heading);
  padding-inline-start: 10px;
  border-inline-start: 2px solid var(--color-primary);
  margin-block-end: 6px;
}

.article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-inline-start: 10px;
  font-size: 15px;
}

.article-byline a {
  color: var(--color-primary);
  font-size: 18px;
  line-height: 1.6;
  text-decoration: none;
}

/* The WP site custom CSS hides every post-info widget with
   `.elementor-post-info { display: none !important }`, so the date is in
   the markup but never shown. */
.article-byline time {
  display: none;
}

/* The post body takes the Elementor kit's body size, 17px (16px on tablets
   and phones), not the 18px of the mcnz article. */
.article-body {
  font-size: 17px;
  line-height: 1.8;
}

.article-body li {
  margin-block-end: 0;
}

/* Post headings are Elementor heading widgets with zero margin, spaced only
   by the 20px widget gap. */
.article-body h2,
.article-body h3 {
  margin-block: 20px;
}

/* TablePress, with the theme's navy header row over its default skin. */
.article-body table {
  margin-block: 0;
  font-size: 0.9em;
  line-height: 1.5;
}

.article-body th,
.article-body td {
  padding: 0.5rem;
  border: 0;
  color: #111;
  vertical-align: top;
}

.article-body th {
  background-color: var(--color-heading);
  color: #fff;
  vertical-align: middle;
}

.article-body tbody td {
  border-block-start: 1px solid #ddd;
}

.article-body tbody tr:nth-child(even) td {
  background-color: #f9f9f9;
}

.article-disclaimer {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text);
  margin-block: 40px 20px;
  padding-block: 20px;
  border-block: 1px solid var(--color-border-light);
}

/* Elementor columns: 4% share, 65.665% content with no padding, 30% sidebar
   with a 30px left margin. */
.article-content {
  padding-inline: 0;
}

@media (min-width: 1025px) {
  .article-layout {
    grid-template-columns: 4% 1fr 30%;
  }

  /* The TablePress shortcode widgets keep a 200px right margin on desktop. */
  .article-body table {
    inline-size: calc(100% - 200px);
  }
}

.sidebar-toc {
  margin-block-start: 100px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
}

/* The widget title is an <h5>, so the kit's h5 type applies. */
.sidebar-toc summary {
  padding: 12px;
  border-block-end: 1px solid var(--color-border-light);
  color: var(--color-heading);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.sidebar-toc ul {
  padding: 12px;
}

.sidebar-toc li {
  padding-block: 0;
  margin-block-end: 1em;
}

.sidebar-toc li a {
  color: var(--color-primary);
  line-height: 1.3;
}

.sidebar-toc li a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* The WP toggle question is an h3 whose title link uses the kit's h5 size,
   22px bold at every width. Its text stays navy when open, and only the
   caret is yellow. */
.faq-item summary {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}

.faq-item[open] > summary {
  color: var(--color-heading);
}

.faq-item summary::marker {
  color: var(--color-accent);
}

.related-articles {
  padding-block: 0 100px;
  padding-inline: 50px;
}

.related-articles .article-card img {
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .article-hero,
  .article-section,
  .related-articles {
    padding-inline: 30px;
  }

  .article-hero-image img {
    height: 300px;
  }

  .article-share {
    padding-block-start: 96px;
  }

  .article-title {
    font-size: 34px;
  }

  .article-body {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .article-hero,
  .article-section,
  .related-articles {
    padding-inline: 20px;
  }

  .article-hero-image img {
    height: 179px;
  }

  .article-title {
    font-size: 30px;
  }

  .article-body {
    line-height: 1.7;
  }}