/**
 * Mobile Section Accordion CSS
 * Scoped to mobile media query (max-width: 767px) for mobile accordion experience.
 * Desktop layout (min-width: 768px) remains completely unchanged.
 */

/* ==========================================================================
   MOBILE ACCORDION (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
  /* Hide desktop sidebar "Contents" on mobile */
  #ez-toc-container,
  .ez-toc-widget-container,
  .share #ez-toc-container {
    display: none !important;
  }

  /* Full width accordion item container */
  .mobile-accordion-item {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 12px;
    background-color: #ffffff;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .mobile-accordion-item.is-open {
    border-color: #cddcf7;
    box-shadow: 0 2px 8px rgba(31, 79, 184, 0.06);
  }

  /* Heading reset: H2 acts as the semantic wrapper for the tappable row */
  .article-post h2.mobile-accordion-heading,
  h2.mobile-accordion-heading {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1rem !important;
    font-weight: normal !important;
    line-height: inherit !important;
    border: none !important;
    background: transparent !important;
  }

  /* Tappable row button */
  .mobile-accordion-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 60px !important;
    padding: 12px 16px !important;
    background-color: #ffffff;
    border: none !important;
    border-radius: 7px;
    outline: none;
    cursor: pointer;
    text-align: left !important;
    box-sizing: border-box !important;
    gap: 12px;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease;
  }

  .mobile-accordion-trigger:focus-visible {
    outline: 2px solid #1f4fb8;
    outline-offset: -2px;
  }

  /* Open rows get a light background (#f6f8fd) */
  .mobile-accordion-trigger[aria-expanded="true"] {
    background-color: #f6f8fd !important;
  }

  /* Left container: indicator (badge/dot) + title */
  .mobile-accordion-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0; /* Essential for text wrapping without overflowing flexbox */
  }

  /* Steps 1 to 6 show a numbered circle badge before the title */
  .mobile-accordion-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    background-color: #e9eefb;
    color: #1f4fb8;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .mobile-accordion-trigger[aria-expanded="true"] .mobile-accordion-badge {
    background-color: #1f4fb8;
    color: #ffffff;
  }

  /* The other sections show a small green dot */
  .mobile-accordion-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    min-width: 9px;
    border-radius: 50%;
    background-color: #0254c0;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
  }

  /* Title on the left (wraps to two lines, no truncation) */
  .mobile-accordion-title {
    display: block;
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    color: #1e293b;
    word-break: normal;
    overflow-wrap: break-word;
    transition: color 0.2s ease;
  }

  /* Open rows get a blue title (#1f4fb8) */
  .mobile-accordion-trigger[aria-expanded="true"] .mobile-accordion-title {
    color: #1f4fb8 !important;
  }

  /* Chevron on the right that rotates when open */
  .mobile-accordion-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    color: #64748b;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
  }

  .mobile-accordion-chevron svg {
    width: 18px;
    height: 18px;
    display: block;
  }

  .mobile-accordion-trigger[aria-expanded="true"] .mobile-accordion-chevron {
    transform: rotate(180deg);
    color: #1f4fb8;
  }

  /* Collapsible content panel */
  .mobile-accordion-panel {
    padding: 16px 16px 20px 16px;
    background-color: #ffffff;
    border-top: 1px solid #edf2f7;
    box-sizing: border-box;
    width: 100%;
  }

  .mobile-accordion-panel[hidden] {
    display: none !important;
  }

  /* Clean spacing for content within panel */
  .mobile-accordion-panel > :first-child {
    margin-top: 0 !important;
  }
  .mobile-accordion-panel > :last-child {
    margin-bottom: 0 !important;
  }
  .mobile-accordion-panel img {
    max-width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   DESKTOP RESET (min-width: 768px)
   Leaves desktop layout completely unchanged
   ========================================================================== */
@media (min-width: 768px) {
  .mobile-accordion-item {
    display: contents !important;
  }

  .mobile-accordion-heading {
    display: block !important;
  }

  .mobile-accordion-trigger {
    all: unset !important;
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    font: inherit !important;
    text-align: inherit !important;
    cursor: default !important;
    pointer-events: none !important;
  }

  .mobile-accordion-left {
    display: inline !important;
  }

  .mobile-accordion-badge,
  .mobile-accordion-dot,
  .mobile-accordion-chevron {
    display: none !important;
  }

  .mobile-accordion-title {
    display: inline !important;
    font: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
  }

  .mobile-accordion-panel,
  .mobile-accordion-panel[hidden] {
    display: contents !important;
  }
}

/* ==========================================================================
   DARK THEME MOBILE ACCORDION (html.dark-mode @media (max-width: 767px))
   ========================================================================== */
@media (max-width: 767px) {
  /* Closed accordion card */
  html.dark-mode .mobile-accordion-item {
    background-color: var(--dm-bg-surface, #1e293b) !important;
    border-color: var(--dm-border-color, #334155) !important;
  }

  html.dark-mode .mobile-accordion-item.is-open {
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
  }

  /* Trigger button */
  html.dark-mode .mobile-accordion-trigger {
    background-color: var(--dm-bg-surface, #1e293b) !important;
  }

  /* Title color when closed */
  html.dark-mode .mobile-accordion-trigger[aria-expanded="false"] .mobile-accordion-title {
    color: var(--dm-text-heading, #f8fafc) !important;
  }

  /* Closed chevron color */
  html.dark-mode .mobile-accordion-chevron {
    color: var(--dm-text-dim, #94a3b8) !important;
  }

  /* Closed numbered badge (Steps 1 to 6) */
  html.dark-mode .mobile-accordion-badge {
    background-color: rgba(37, 99, 235, 0.25) !important;
    color: #60a5fa !important;
  }

  /* Green dot in dark mode */
  html.dark-mode .mobile-accordion-dot {
    background-color: #34d399 !important;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.25) !important;
  }

  /* Open row background in dark mode: refined deep blue tint */
  html.dark-mode .mobile-accordion-trigger[aria-expanded="true"] {
    background-color: #172554 !important;
  }

  /* Open row title in dark mode */
  html.dark-mode .mobile-accordion-trigger[aria-expanded="true"] .mobile-accordion-title {
    color: #60a5fa !important;
  }

  /* Open row badge in dark mode */
  html.dark-mode .mobile-accordion-trigger[aria-expanded="true"] .mobile-accordion-badge {
    background-color: #2563eb !important;
    color: #ffffff !important;
  }

  /* Open row chevron in dark mode */
  html.dark-mode .mobile-accordion-trigger[aria-expanded="true"] .mobile-accordion-chevron {
    color: #60a5fa !important;
  }

  /* Collapsible panel in dark mode */
  html.dark-mode .mobile-accordion-panel {
    background-color: var(--dm-bg-surface, #1e293b) !important;
    border-top: 1px solid var(--dm-border-color, #334155) !important;
    color: var(--dm-text-body, #cbd5e1) !important;
  }

  /* Content inside panel */
  html.dark-mode .mobile-accordion-panel p,
  html.dark-mode .mobile-accordion-panel li,
  html.dark-mode .mobile-accordion-panel div {
    color: var(--dm-text-body, #cbd5e1) !important;
  }
}