/* ============================================================
   mobile-coc.css
   Mobile-only redesign for code-of-conduct.html.
   
   The page currently presents the same Code of Conduct twice on
   mobile: an editorial "patron's room" version (§15) and the
   formal/legal Official Text (§16). Total = 24,000+ px scroll.
   
   This file:
     (A) Collapses the entire §16 Official Text behind an
         opt-in reveal button — default hidden, one tap to show.
     (D) Once revealed, each numbered section (§1 Introduction,
         §2 Our Commitment, …) becomes its own tap-to-expand
         accordion. Reader drills into only the sections they
         care about.
   
   JS lives in mobile-coc.js. CSS handles visuals + state.
   ============================================================ */

@media (max-width: 640px) {

  /* ============================================================
     HERO — clear the topnav, add right-edge breathing room so
     the italic 'g' descender in the h1 doesn't graze the screen.
     ============================================================ */
  html body .mtc-hero,
  html body .page-header.mtc-hero {
    padding-top: 128px !important;    /* topnav (73) + breathing room */
    padding-bottom: 48px !important;
    padding-left: 20px !important;
    padding-right: 28px !important;   /* extra on the right for italic descenders */
  }
  html body .mtc-hero h1,
  html body .page-header.mtc-hero h1 {
    font-size: clamp(36px, 11vw, 44px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    padding-right: 4px !important;
    /* Italic descenders sit slightly under the line box; pad bottom */
    padding-bottom: 0.45em !important;
  }
  /* Inline CSS forces .mtc-h1-line to white-space:nowrap so the
     'Make the case to attend.' tagline stays on one line. On CoC
     that pin overflows ("A room worth being in" = 380px). Allow
     wrap on mobile. */
  html body .mtc-hero h1 .mtc-h1-line {
    white-space: normal !important;
    display: inline !important;
  }
  html body .mtc-hero .eyebrow,
  html body .mtc-hero [class*="eyebrow"] {
    font-size: 10px !important;
    letter-spacing: 0.26em !important;
  }


  /* ============================================================
     (A) OFFICIAL-TEXT REVEAL — hide .coc-doc behind a button
     ============================================================ */

  html body .coc-official-wrap .coc-doc {
    display: none !important;
  }
  html body .coc-official-wrap.is-revealed .coc-doc {
    display: block !important;
    margin-top: 24px !important;
  }

  /* Tighten the §16 wrapper itself on mobile */
  html body .coc-official-wrap {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  html body .coc-official-wrap .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body .coc-official-eyebrow {
    margin-bottom: 16px !important;
    gap: 10px !important;
    font-size: 10px !important;
    letter-spacing: 0.26em !important;
  }
  html body .coc-official-intro {
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    margin: 0 0 18px !important;
    color: rgba(40, 28, 12, 0.72) !important;
  }

  /* The reveal button — injected by JS */
  .coc-official-reveal {
    display: block;
    width: 100%;
    text-align: left;
    background: linear-gradient(180deg, rgba(255, 247, 222, 0.7) 0%, rgba(255, 247, 222, 0.3) 100%);
    border: 1px solid rgba(40, 28, 12, 0.18);
    border-radius: 6px;
    padding: 18px 20px;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font: inherit;
    color: rgba(40, 28, 12, 0.92);
    position: relative;
    transition: border-color 200ms ease, background 200ms ease;
  }
  .coc-official-reveal:hover,
  .coc-official-reveal:active {
    border-color: rgba(182, 138, 62, 0.55);
    background: linear-gradient(180deg, rgba(255, 244, 210, 0.85) 0%, rgba(255, 244, 210, 0.4) 100%);
  }
  .coc-official-reveal::before {
    /* Brass-foil top edge — matches the patron-card vocabulary */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(182,138,62,0.45) 18%,
      rgba(229,199,122,0.80) 50%,
      rgba(182,138,62,0.45) 82%,
      transparent 100%);
    border-radius: 6px 6px 0 0;
    pointer-events: none;
  }
  .cor-eyebrow {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--filament-d, #8a6620);
    margin-bottom: 8px;
  }
  .cor-line {
    display: block;
    font-family: 'Newsreader', Georgia, serif;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(40, 28, 12, 0.78);
    margin-bottom: 16px;
  }
  .cor-line em {
    font-style: italic;
    color: rgba(40, 28, 12, 0.92);
  }
  .cor-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 0;
    border-top: 1px dashed rgba(182, 138, 62, 0.35);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--filament-d, #8a6620);
  }
  .cor-cta-chev {
    width: 10px;
    height: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform 220ms ease;
  }
  .coc-official-wrap.is-revealed .coc-official-reveal .cor-cta-chev {
    transform: rotate(-135deg);
    margin-top: 3px;
  }


  /* ============================================================
     (D) PER-SECTION ACCORDION inside .coc-doc
     ============================================================ */

  /* The .coc-doc-head (title block at the top of the doc) stays
     fully visible — it identifies the whole document. Tighten it. */
  html body .coc-doc-head {
    padding: 0 0 16px !important;
    margin: 0 0 16px !important;
    border-bottom: 1px solid rgba(40, 28, 12, 0.18) !important;
  }
  html body .coc-doc-head h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 0 0 6px !important;
  }
  html body .coc-doc-head .coc-doc-meta,
  html body .coc-doc-head .meta {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
  }

  /* Each numbered section — collapsed by default */
  html body .coc-doc-art {
    border-bottom: 1px solid rgba(40, 28, 12, 0.12) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
  }
  /* Hide everything inside the section EXCEPT the h3 */
  html body .coc-doc-art > *:not(h3) {
    display: none !important;
  }
  /* When open, reveal them */
  html body .coc-doc-art.is-open > * {
    display: block !important;
  }
  /* h3 row — the always-visible tap target */
  html body .coc-doc-art > h3 {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    padding: 16px 36px 16px 4px !important;
    margin: 0 !important;
    font-family: 'Newsreader', Georgia, serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
    color: rgba(40, 28, 12, 0.92) !important;
    position: relative !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  html body .coc-doc-art > h3 .n {
    flex: 0 0 auto !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-style: normal !important;
    font-size: 11px !important;
    letter-spacing: 0.16em !important;
    color: var(--filament-d, #8a6620) !important;
    min-width: 22px !important;
    text-align: right !important;
    padding-top: 2px !important;
  }
  /* + / − indicator on the right of each h3 */
  html body .coc-doc-art > h3::after {
    content: '+' !important;
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-style: normal !important;
    font-size: 14px !important;
    color: var(--filament-d, #8a6620) !important;
    border: 1px solid rgba(182, 138, 62, 0.45) !important;
    border-radius: 50% !important;
    transition: transform 220ms ease !important;
    line-height: 1 !important;
  }
  html body .coc-doc-art.is-open > h3::after {
    content: '−' !important;
    background: rgba(26, 18, 8, 0.92) !important;
    color: var(--paper, #FBF5E5) !important;
    border-color: rgba(26, 18, 8, 0.92) !important;
  }
  /* Body copy when expanded */
  html body .coc-doc-art.is-open p,
  html body .coc-doc-art.is-open ul,
  html body .coc-doc-art.is-open ol {
    font-family: 'Newsreader', Georgia, serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: rgba(40, 28, 12, 0.78) !important;
    margin: 0 0 12px !important;
    padding: 0 4px 0 38px !important; /* indent under the number column */
  }
  html body .coc-doc-art.is-open ul,
  html body .coc-doc-art.is-open ol {
    padding-left: 56px !important;
  }
  html body .coc-doc-art.is-open li {
    margin-bottom: 6px !important;
  }
  /* Bottom padding when expanded so the section breathes before
     the divider rule. */
  html body .coc-doc-art.is-open {
    padding-bottom: 14px !important;
  }
}