/* sidebar.css — click-to-open notes (.sidebar-trigger + aside.sidebar).
   Used by js/sidebar.js. Two independent modes:

   1. Inline notes (aside.sidebar, toggled with .is-open): in flow below
      1360px; at >=1360px pinned to the right gutter. Gutter mode requires
      the aside to sit inside an .essay-body or .sidebar-anchor that is
      position: relative, or the note opens in the wrong place. sidebar.js
      detects gutter mode via the --sidebar-gutter custom property set in
      that media query, so the 1360px breakpoint lives only in this file.
   2. Column sidebars (.sidebar-layout / .sidebar-column, .sidebar-visible /
      .sidebar-open): Civilly Engaged layout; sidebar.js skips this when
      there is no .sidebar-column.

   Hiding is scoped to `.js aside.sidebar`; the page <head> must set
   class="js" on <html> (see partials/head.html). Without JS the notes
   simply show inline. */

    /* Positioned ancestor for aside.sidebar (gutter pattern) on pages that
       aren't essay-column layouts, so can't use .essay-body for this — see
       the `aside.sidebar` gutter rule (~1360px breakpoint) and sidebar.js,
       which both key off .essay-body/.sidebar-anchor for top alignment. */
    .sidebar-anchor {
      position: relative;
    }

    @media (max-width: 900px) {
      .sidebar-main { padding: 0 24px; }
    }

    /* Sidebar layout (desktop) */
    .sidebar-layout {
      display: grid;
      grid-template-columns: minmax(0, 860px) 340px;
      row-gap: 4px;
      column-gap: 40px;
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 24px;
    }
    .sidebar-full-row {
      grid-column: 1 / -1;
    }
    .sidebar-column {
      position: relative;
    }
    .sidebar {
      display: none;
      position: absolute;
      width: 100%;
      border: 1px solid rgba(0,0,0,0.15);
      border-radius: 10px;
      padding: 20px 22px;
      font-size: 14px;
      line-height: 1.7;
      color: #444;
      background: #fff;
      max-height: calc(100vh - 32px);
      overflow-y: auto;
      box-sizing: border-box;
    }
    .sidebar.sidebar-visible {
      display: block;
      animation: sidebar-fadein 0.3s ease;
      transition: top 0.3s ease;
    }
    @keyframes sidebar-fadein {
      from { opacity: 0; transform: translateX(8px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    .sidebar h2 {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-family: 'Libre Baskerville', serif;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 12px;
      color: #1a1a1a;
    }
    .sidebar p { margin-bottom: 10px; }
    .sidebar p:last-child { margin-bottom: 0; }
    .sidebar a { color: #224488; }
    .sidebar-close {
      font-size: 20px;
      color: #bbb;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      margin-left: 8px;
      line-height: 1;
      flex-shrink: 0;
    }
    .sidebar-close:hover { color: #555; }
    .sidebar-trigger {
      color: #224488;
      text-decoration: underline;
      text-decoration-color: #224488;
      text-decoration-style: dotted;
      text-underline-offset: 3px;
      cursor: pointer;
    }
    .sidebar-trigger::after {
      content: '';
      display: inline-block;
      width: 11px;
      height: 9px;
      margin-left: 5px;
      border: 1.5px solid currentColor;
      border-left-width: 3.5px;
      border-radius: 2px;
      opacity: 0.45;
      vertical-align: middle;
      position: relative;
      top: -1px;
    }
    .sidebar-trigger:hover::after { opacity: 0.85; }

    /* Sidebar as popup (below 900px) */
    @media (max-width: 900px) {
      .sidebar-layout { display: block; padding: 0; }
      .sidebar {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 200;
        overflow-y: auto;
        border-radius: 0;
        border: none;
        border-top: 2px solid rgba(0,0,0,0.12);
        background: #fff;
        padding: 24px 20px 48px;
        animation: none;
      }
      .sidebar.sidebar-open {
        display: block;
        animation: sidebar-slidein 0.28s ease;
      }
      @keyframes sidebar-slidein {
        from { transform: translateY(20px); opacity: 0; }
        to   { transform: translateY(0); opacity: 1; }
      }
    }

  /* the note: hidden until toggled (only when JS is running). Mobile-first:
     full-width, in-flow. */
  aside.sidebar {
    width: auto;
    margin: 18px 0;
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 18px 20px;
    background: #efefef;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #444;
  }
  aside.sidebar { display: block; }
  .js aside.sidebar { display: none; }
  .js aside.sidebar.is-open { display: block; }
    aside.sidebar > .sidebar-close {
    float: right;
    margin: -6px -8px 4px 12px;
    font-size: 22px;
  }
  aside.sidebar .sidebar-title {
    font-family: 'Libre Baskerville', serif;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 10px;
  }
  /* Notes live inside the page body in the DOM but are visually separate:
     paragraphs inherit the aside's type, not the host page's p styles
     (e.g. .statement-body p). */
  aside.sidebar p {
    font: inherit;
    color: inherit;
    margin: 0 0 10px;
  }
  aside.sidebar p:last-child { margin-bottom: 0; }
  aside.sidebar ol { margin: 0 0 10px; padding-left: 20px; }
  aside.sidebar ol:last-child { margin-bottom: 0; }
  aside.sidebar li { margin-bottom: 10px; }
  aside.sidebar li:last-child { margin-bottom: 0; }

  /* wide desktop: pin the note to the right of div.container, in the gutter.
     Needs room for the 700px container plus the note (width + gap) on both
     sides: 748 + 2 * (280 + 24) = 1356, rounded up to 1360. Top is set by
     JS (sidebar.js) relative to .essay-body, which is the positioned ancestor. */
  @media (min-width: 1360px) {
    /* read by sidebar.js to know gutter mode is active */
    :root { --sidebar-gutter: 1; }
    aside.sidebar {
      position: absolute;
      left: 100%;
      margin: 0 0 0 24px;
      width: 400px;
    }
  }