/* ==========================================================================
   ARTICLE PAGE STYLES - PIXEL PERFECT FIGMA MATCH
   ========================================================================== */

body.page-article-body {
  background: #FCF8F3 url('../../images/backgrounds/pattern-texture.jpg') repeat;
  margin: 0;
  padding: 0;
  font-family: 'Fredoka', sans-serif;
  direction: rtl;
}

.page-article {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   1. Article Header & Meta Card
   -------------------------------------------------------------------------- */
.article-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 832px;
  gap: 24px;
  margin-top: 100px;
  text-align: center;
}

.article-breadcrumbs {
  font-size: 20px;
  color: #000080;
}

.article-breadcrumbs .active {
  font-weight: 600;
}

.article-title {
  font-size: 60px;
  line-height: 72px;
  font-weight: 400;
  color: #000080;
  margin: 0;
  width: 768px;
}

/* Floating White Card */
.article-meta-card {
  position: relative;
  width: 832px;
  height: 108px;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0px 40px 60px -10px rgba(13, 28, 47, 0.08);
  box-sizing: border-box;
}

.article-meta-card__inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 32px;
  height: 100%;
  box-sizing: border-box;
}

.article-meta-card__icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 20px;
  cursor: pointer;
}

.article-meta-card__tags {
  display: flex;
  gap: 12px;
}

.article-tag {
  display: flex;
  align-items: center;
  padding: 6px 16px;
  background: #CFE7F0;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 500;
  color: #000080;
}

.article-meta-card__info {
  display: flex;
  align-items: center;
  gap: 24px;
}

.article-meta-card__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.article-meta-card__label {
  font-size: 18px;
  line-height: 16px;
  color: #000080;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.article-meta-card__val {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #000080;
}

.article-meta-card__divider {
  width: 1px;
  height: 32px;
  background: rgba(196, 197, 217, 0.3);
}

/* --------------------------------------------------------------------------
   2. Media Section (Hero Image + Audio Player)
   -------------------------------------------------------------------------- */
.article-media-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 1470px;
  gap: 60px;
  margin-top: 60px;
}

.article-hero-image {
  width: 1470px;
  height: 468px;
  border-radius: 20px;
  overflow: hidden;
}

.article-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-audio-player {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16px;
  gap: 24px;
  width: 1470px;
  height: 114px;
  background: #F6F5F5;
  border: 1px solid rgba(196, 197, 217, 0.1);
  border-radius: 8px;
  box-sizing: border-box;
}

.article-audio-player__track {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.article-audio-player__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.article-audio-player__label {
  font-size: 20px;
  font-weight: 500;
  color: #000080;
}

.article-audio-player__time {
  font-size: 18px;
  font-weight: 500;
  color: #000080;
}

.article-audio-player__bar {
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 128, 0.18);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.article-audio-player__progress {
  height: 100%;
  background: #000080;
  position: absolute;
  right: 0;
  top: 0;
}

.article-audio-player__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background: #000080;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   3. Main Content Container
   -------------------------------------------------------------------------- */
.article-content-wrapper {
  width: 1170px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  padding: 40px 35px;
  margin-top: 60px;
  box-sizing: border-box;
}

.article-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 1100px;
  margin: 0 auto;
}

.article-content p {
  font-size: 21px;
  line-height: 32px;
  color: #183B51;
  text-align: right;
  margin: 0;
}

.article-content h2 {
  font-size: 32px;
  line-height: 36px;
  font-weight: 500;
  color: #000080;
  text-align: right;
  margin: 0;
}

.article-blockquote {
  border-right: 4px solid #0196CE;
  padding: 16px 32px 16px 0;
  margin: 0;
}

.article-blockquote p {
  font-size: 30px;
  line-height: 41px;
  color: #000080;
}

.article-inline-image {
  width: 1100px;
  height: 468px;
  border-radius: 20px;
  overflow: hidden;
}

.article-inline-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-list__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  font-size: 21px;
  line-height: 26px;
  color: #183B51;
}

.article-list__icon {
  width: 20px;
  height: 20px;
  /* background: #C22DAF; */
  /* border-radius: 4px; */
}

/* --------------------------------------------------------------------------
   4-5. Courses Section & Additional Tools Section
   MOVED (2026) to shared components so Category.html can reuse them
   without duplicating the CSS:
     - components/_courses-section.css  (.article-courses-*, .article-course-card*)
     - components/_tools-section.css    (.article-tools-*, .article-tool-card*, .tool-tag*, .tool-btn)
   Both are linked in this page's <head>, same as Category.html.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   6. Related Articles Grid
   -------------------------------------------------------------------------- */
.article-related-section {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 100px;
  direction: rtl;
  box-sizing: border-box;
}

.article-related-container {
  width: 100%;
  max-width: 1500px;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  box-sizing: border-box;
}

/* Section Title */
.article-related-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  text-align: right;
  color: #000080;
  margin: 0;
}

.article-related-swiper-outer {
  width: 100%;
  position: relative;
}

/* 3-Column Grid Layout */
.article-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  width: 100%;
}

/* Card Component Container */
.related-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 458px;
  gap: 8px;
  border-radius: 24px;
  box-sizing: border-box;
}

/* Image Media Block */
.related-card__media {
  position: relative;
  width: 458px;
  height: 256px;
  border-radius: 24px;
  overflow: hidden;
  background: #C4C4C4;
}

.related-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay Blur Tag */
.related-card__overlay-tag {
  position: absolute;
  top: 20px;
  right: 20.77px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 8px 16px;
  background: #F7EFE6;
  backdrop-filter: blur(4px);
  border-radius: 8px;
  box-sizing: border-box;
  z-index: 1;
}

.related-card__overlay-tag span {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: right;
  color: #000080;
}

/* Card Content Box */
.related-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: 0px 15px;
  gap: 8px;
  width: 458px;
  min-height: 236px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 25px;
  box-sizing: border-box;
}

/* Card Heading */
.related-card__title {
  width: 100%;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  text-align: right;
  color: #000080;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Card Description Paragraph */
.related-card__desc {
  width: 100%;
  font-family: 'Fredoka', sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 28px;
  text-align: right;
  color: #183B51;
  margin: 0;
  padding: 4px 0px 0px 0px;
  box-sizing: border-box;
}

/* Card Footer (Button & Read Time) */
.related-card__footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0px 0px;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
}

/* Read Time Meta */
.related-card__read-time {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 20px;
  text-align: right;
  color: #3A3A55;
}

/* Button Outline */
.related-card__btn {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 5px 22px;
  gap: 10px;
  height: 40px;
  border: 1px solid #000080;
  filter: drop-shadow(0px 4px 20px rgba(26, 35, 126, 0.1));
  border-radius: 9999px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: #000080;
  text-decoration: none;
  background: transparent;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.related-card__btn:hover {
  background: #000080;
  color: #FFFFFF;
}
/* ==========================================================================
   Swiper Pagination (related — courses/tools pagination now live in
   components/_courses-section.css and components/_tools-section.css)
   ========================================================================== */
.article-related-pagination {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.article-related-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 128, 0.2);
  opacity: 1;
  margin: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}

.article-related-pagination .swiper-pagination-bullet-active {
  background: #C22DAF;
  transform: scale(1.15);
}

/* Related swiper is disabled at >=768px (see modules/carousels.js
   breakpoints), so its dots have no carousel to control there. */
@media (min-width: 768px) {
  .article-related-pagination {
    display: none;
  }
}

/* ==========================================================================
   RESPONSIVE — Article page
   Base rules above use literal Figma pixel widths on fixed 1920px-wide
   sections; these breakpoints make each section fluid on narrower
   viewports without touching the desktop values.
   ========================================================================== */
@media (max-width: 1550px) {
  .article-media-section,
  .article-hero-image,
  .article-audio-player {
    width: 100%;
    max-width: 1470px;
  }
}

@media (max-width: 1023px) {
  .article-header {
    width: 100%;
    max-width: 832px;
    padding: 0 24px;
    box-sizing: border-box;
    margin-top: 48px;
  }

  .article-title {
    width: 100%;
    font-size: 40px;
    line-height: 48px;
  }

  .article-meta-card {
    width: 100%;
    height: auto;
  }

  .article-meta-card__inner {
    flex-direction: column;
    align-items: flex-start; /* RTL: keep each row's content right-aligned */
    gap: 16px;
    padding: 20px;
  }

  .article-media-section {
    padding: 0 24px;
    box-sizing: border-box;
    margin-top: 40px;
    gap: 32px;
  }

  .article-hero-image {
    height: 320px;
  }

  .article-audio-player {
    height: auto;
    flex-wrap: wrap;
  }

  .article-content-wrapper {
    width: 1170px;
    max-width: calc(100% - 40px);
    padding: 32px 24px;
    box-sizing: border-box;
  }

  .article-content {
    width: 100%;
  }

  .article-content h2 {
    font-size: 26px;
    line-height: 32px;
  }

  .article-content p,
  .article-list__item {
    font-size: 18px;
    line-height: 28px;
  }

  .article-blockquote p {
    font-size: 24px;
    line-height: 34px;
  }

  .article-inline-image {
    width: 100%;
    height: 320px;
  }

  /* Courses/tools section rules for this breakpoint now live in
     components/_courses-section.css and components/_tools-section.css. */

  .article-related-container {
    padding: 0 24px;
  }

  .article-related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }

  .related-card,
  .related-card__media,
  .related-card__content {
    width: 100%;
    max-width: none;
    height: auto;
  }
}

@media (max-width: 767px) {
  .article-header {
    margin-top: 32px;
    gap: 16px;
    padding: 0 20px;
  }

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

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

  .article-meta-card__inner {
  }

  .article-meta-card__info {
    flex-wrap: wrap;
    gap: 12px;
  }

  .article-media-section {
    padding: 0 20px;
  }

  .article-hero-image {
    height: 220px;
    border-radius: 14px;
  }

  .article-audio-player {
    padding: 12px;
    gap: 12px;
  }

  .article-audio-player__label,
  .article-audio-player__time {
    font-size: 16px;
  }

  .article-audio-player__btn {
    width: 40px;
    height: 40px;
  }

  .article-content-wrapper {
    padding: 24px 20px;
  }

  .article-inline-image {
    height: 200px;
  }

  /* Courses/tools section rules for this breakpoint now live in
     components/_courses-section.css and components/_tools-section.css. */

  .article-related-title {
    font-size: 26px;
    line-height: 32px;
  }

  .related-card__desc {
    font-size: 17px;
    line-height: 24px;
  }

  .article-related-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 0; /* see initResponsiveCardSwiper in assets/js/components/related-cards.js */
  }

  .related-card {
    width: 100%;
    max-width: 380px;
    flex-shrink: 0;
  }

  .related-card__media {
    width: 100%;
    height: 200px;
  }
}

@media (max-width: 480px) {
  .related-card__footer {
    flex-direction: row;
    align-items: flex-end;
    gap: 10px;
  }
}

/* ==========================================================================
   WordPress — Gutenberg core blocks inside the article body (.article-content)
   Same rules for the editor: assets/css/editor-style.css (keep in sync).
   ========================================================================== */

/* Meta card: <dl> semantics + share <button> */
.article-meta-card__info { margin: 0; }
.article-meta-card__info dd { margin: 0; }

.article-meta-card__icon-wrap {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}
.article-meta-card__icon-wrap:hover,
.article-meta-card__icon-wrap:focus-visible { background-color: rgba(0, 0, 128, 0.06); }

.article-share-status {
  position: absolute;
  inset-inline-end: 24px;
  bottom: -40px;
  padding: 6px 14px;
  border-radius: 12px;
  background: #000080;
  color: #FFFFFF;
  font-size: 15px;
}
.article-share-status[hidden] { display: none; }
.article-meta-card { position: relative; }

.article-hero-image img { display: block; }

/* Paragraphs & inline text */
.article-content > * { margin: 0; max-width: 100%; }
.article-content a { color: #000080; text-decoration: underline; text-underline-offset: 3px; }
.article-content strong { font-weight: 600; }

/* core/heading */
.article-content h2,
.article-content h3,
.article-content h4 {
  font-family: 'Fredoka', var(--font-main);
  font-weight: 500;
  color: #000080;
  text-align: right;
  margin: 0;
}
.article-content h3 { font-size: 26px; line-height: 32px; }
.article-content h4 { font-size: 22px; line-height: 28px; }

/* core/quote + core/pullquote — the design's blockquote: blue stripe + soft background */
.article-content .wp-block-quote,
.article-content .wp-block-pullquote {
  margin: 0;
  padding: 20px 32px 20px 24px;
  border: 0;
  border-right: 4px solid #0196CE;
  border-radius: 0 0 0 16px;
  background: rgba(1, 150, 206, 0.07);
  text-align: right;
}
.article-content .wp-block-pullquote blockquote { margin: 0; }
.article-content .wp-block-quote p,
.article-content .wp-block-pullquote p {
  font-family: 'Fredoka', var(--font-main);
  font-size: 30px;
  line-height: 41px;
  color: #000080;
  margin: 0;
}
.article-content .wp-block-quote p + p { margin-top: 12px; }
.article-content .wp-block-quote cite,
.article-content .wp-block-pullquote cite {
  display: block;
  margin-top: 12px;
  font-size: 18px;
  font-style: normal;
  color: #183B51;
}

/* core/image — rounded, full content width */
.article-content .wp-block-image { margin: 0; }
.article-content .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}
.article-content .wp-block-image figcaption {
  margin-top: 10px;
  font-size: 16px;
  color: #183B51;
  text-align: center;
}

/* core/list — the design's check icon bullets */
.article-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.article-content ul li {
  position: relative;
  padding-inline-start: 32px;
  font-size: 21px;
  line-height: 28px;
  color: #183B51;
}
.article-content ul li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 2px;
  width: 20px;
  height: 24px;
  background: url("data:image/svg+xml,%3Csvg width='20' height='24' viewBox='0 0 20 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M8.6 18.6L15.65 11.55L14.25 10.15L8.6 15.8L5.75 12.95L4.35 14.35L8.6 18.6ZM10 24C8.61667 24 7.31667 23.7375 6.1 23.2125C4.88333 22.6875 3.825 21.975 2.925 21.075C2.025 20.175 1.3125 19.1167 0.7875 17.9C0.2625 16.6833 0 15.3833 0 14C0 12.6167 0.2625 11.3167 0.7875 10.1C1.3125 8.88333 2.025 7.825 2.925 6.925C3.825 6.025 4.88333 5.3125 6.1 4.7875C7.31667 4.2625 8.61667 4 10 4C11.3833 4 12.6833 4.2625 13.9 4.7875C15.1167 5.3125 16.175 6.025 17.075 6.925C17.975 7.825 18.6875 8.88333 19.2125 10.1C19.7375 11.3167 20 12.6167 20 14C20 15.3833 19.7375 16.6833 19.2125 17.9C18.6875 19.1167 17.975 20.175 17.075 21.075C16.175 21.975 15.1167 22.6875 13.9 23.2125C12.6833 23.7375 11.3833 24 10 24ZM10 22C12.2333 22 14.125 21.225 15.675 19.675C17.225 18.125 18 16.2333 18 14C18 11.7667 17.225 9.875 15.675 8.325C14.125 6.775 12.2333 6 10 6C7.76667 6 5.875 6.775 4.325 8.325C2.775 9.875 2 11.7667 2 14C2 16.2333 2.775 18.125 4.325 19.675C5.875 21.225 7.76667 22 10 22Z' fill='%23C22DAF'/%3E %3C/svg%3E") no-repeat center / contain;
}
.article-content ol {
  margin: 0;
  padding-inline-start: 1.4em;
  font-size: 21px;
  line-height: 28px;
  color: #183B51;
}

/* core/audio — native <audio> is replaced by the design player (article.js).
   Without JS the native controls stay, tinted to the palette. */
.page-article .wp-block-audio { margin: 0; }
.page-article .wp-block-audio audio { width: 100%; accent-color: #000080; }
.page-article .wp-block-audio.is-enhanced figcaption,
.page-article .wp-block-audio.is-enhanced audio { display: none; }
.article-content .article-audio-player { width: 100%; height: auto; min-height: 114px; }
/* Leading audio block under the hero image: full media width (design) */
.article-media-section > .wp-block-audio { width: 100%; }
.article-media-section .article-audio-player { width: 100%; }
.article-audio-player__bar { cursor: pointer; }
.article-audio-player__btn:focus-visible,
.article-audio-player__bar:focus-visible { outline: 3px solid #C22DAF; outline-offset: 3px; }

/* core/separator, core/table (basic) */
.article-content hr { border: 0; height: 1px; background: rgba(0, 0, 128, 0.15); }
.article-content table { width: 100%; border-collapse: collapse; font-size: 18px; }
.article-content th, .article-content td { padding: 10px 12px; border-bottom: 1px solid rgba(0, 0, 128, 0.12); text-align: right; }

/* Card images (course / tool) when the item has a featured image */
.article-course-card__illustration img,
.article-tool-card__img img { max-width: 100%; max-height: 120px; width: auto; height: auto; object-fit: contain; }
.article-course-card__author-avatar img { width: 40px; height: 40px; border-radius: 50%; }

@media (max-width: 1024px) {
  .article-content .wp-block-quote p,
  .article-content .wp-block-pullquote p { font-size: 24px; line-height: 34px; }
  .article-content ul li,
  .article-content ol { font-size: 18px; line-height: 28px; }
}

/* WP: favorites heart next to the share button (inc/helpers/favorites.php → personal area "מועדפים") */
.pivot-favorite-icon .pivot-favorite-icon__fill { opacity: 0; transition: opacity .2s ease; }
.pivot-favorite-icon.is-active .pivot-favorite-icon__fill { opacity: 1; }
.pivot-favorite-icon.is-active .pivot-favorite-icon__outline { fill: #C22DAF; }
.pivot-favorite-icon[aria-busy="true"] { opacity: .5; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .pivot-favorite-icon .pivot-favorite-icon__fill { transition: none; } }