/* ==========================================================================
   Ai & Beyond — Single Article Page
   assets/css/article.css

   Replaces every Tailwind utility class used by single.php.
   All values are taken verbatim from the compiled Tailwind output so the
   rendered page is pixel-for-pixel identical to the previous version.

   Shared utilities (.serif, .mono, .reveal, .grain, .duotone, .img-shade,
   .arc-underline, .btn-gold, .bookmark-btn, .article-content, .toc-item,
   .visually-hidden) remain in style.css and are NOT duplicated here.

   Load order:  style.css → article.css  (Tailwind removed entirely)
   ========================================================================== */

/* ============================================================
   1. READING PROGRESS RING
   ============================================================ */

.article-progress {
  position: fixed;
  top:    16px;
  right:  16px;
  z-index: 50;
  /* pointer-events: none so it never intercepts clicks */
  pointer-events: none;
}

/* ============================================================
   2. SINGLE-ARTICLE HEADER
   Distinct from the shared .site-header used on other pages.
   On single.php the header is self-contained (no get_header()).
   ============================================================ */

.article-header {
  position: fixed;
  top:    0;
  left:   0;
  right:  0;
  z-index: 50;
  /* Glassmorphism — matches Tailwind backdrop-blur-md + bg-inkdeep/70 */
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  background-color: rgba(14, 13, 11, 0.70);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.article-header__inner {
  max-width: 1360px;
  margin:    0 auto;
  padding:   0 24px;
  height:    64px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

/* Brand / logo link */
.article-header__brand {
  display:     flex;
  align-items: center;
  gap:         10px;
}

/* Primary nav — hidden below 768px */
.article-header__nav {
  display:         none; /* default mobile-hidden; shown at 768px+ */
  align-items:     center;
  gap:             36px;
  font-size:       13px;
  color:           #B3AA9B; /* stone */
}

.article-header__nav a {
  color: #B3AA9B;
  transition: color 0.15s ease;
}

.article-header__nav a:hover {
  color: #F6F2EA; /* paper */
}

/* arc-underline is already in style.css */

/* Header actions — subscribe button wrapper */
.article-header__actions {
  display:     flex;
  align-items: center;
  gap:         16px;
}

/* Subscribe button sizing specific to the article header */
.article-header__subscribe {
  /* btn-gold from style.css provides background/shadow/hover.
     These properties add the article-header–specific size. */
  color:         #151515;
  font-size:     13px;
  font-weight:   600;
  padding:       8px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

/* ============================================================
   3. ARTICLE PAGE BODY OFFSET
   Compensates for the fixed header so content starts below it.
   ============================================================ */

.article-page-body {
  /* Nothing structural here — the padding-top on the grid handles offset. */
}

/* ============================================================
   4. ARTICLE LAYOUT GRID
   TOC sidebar (220px) + article column (1fr) on desktop.
   Single column on mobile/tablet.
   ============================================================ */

.article-layout {
  max-width: 1180px;
  margin:    0 auto;
  padding:   0 24px;
  /* Mobile: single column stacked */
  display:         block;
  padding-top:     56px;
  padding-bottom:  96px;
}

/* ============================================================
   5. TOC SIDEBAR
   ============================================================ */

.article-toc-sidebar {
  /* Hidden by default (mobile-first) — revealed at 1024px+ */
  display: none;
}

.article-toc-sidebar__inner {
  position: sticky;
  top:      112px; /* 64px header + 48px breathing room */
}

.article-toc-sidebar__label {
  /* mono already in style.css */
  font-size:      10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          #8a8578;
  margin-bottom:  16px;
}

.article-toc-sidebar__nav {
  /* toc-item links are styled in style.css */
  border-left:  1px solid rgba(21, 21, 21, 0.10);
}

/* ============================================================
   6. ARTICLE MAIN COLUMN
   ============================================================ */

.article-main {
  min-width: 0;    /* prevents flex/grid overflow */
  max-width: 720px;
}

/* ============================================================
   7. ARTICLE CATEGORY LABEL
   (eyebrow above the title)
   ============================================================ */

.article-category-label {
  /* mono from style.css; reveal from style.css */
  display:        block;
  font-size:      11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          #8B806E; /* gold */
  margin-bottom:  20px;
}

.article-category-label a {
  color: inherit;
}

.article-category-label a:hover {
  opacity: 0.75;
}

/* ============================================================
   8. ARTICLE TITLE
   ============================================================ */

.article-title {
  /* serif + reveal from style.css */
  font-weight:   500;
  font-size:     2.1rem;
  line-height:   1.12;
  margin-bottom: 28px;
  /* No margin reset needed — h1 already reset in style.css */
}

/* ============================================================
   9. ARTICLE META ROW
   Avatar · author · date · read time | bookmark | share
   ============================================================ */

.article-meta {
  /* reveal from style.css */
  display:        flex;
  align-items:    center;
  gap:            12px;
  padding-bottom: 32px;
  margin-bottom:  40px;
  border-bottom:  1px solid rgba(21, 21, 21, 0.08);
}

.article-meta__avatar {
  /* img from get_avatar() */
  width:         36px;
  height:        36px;
  border-radius: 9999px;
  flex-shrink:   0;
  object-fit:    cover;
  display:       block;
  /* duotone filter from style.css */
}

.article-meta__byline {
  font-size: 13.5px;
  color:     #6b6659;
}

.article-meta__actions {
  margin-left:  auto;
  display:      flex;
  align-items:  center;
  gap:          16px;
  color:        #8a8578;
}

/* Bookmark button — base styles in style.css (.bookmark-btn).
   Add the hover colour that was previously done by Tailwind hover:text-gold */
.article-meta__actions .bookmark-btn:hover {
  color: #8B806E;
}

/* Share button */
.article-share-btn {
  background:  none;
  border:      none;
  padding:     0;
  color:       inherit;
  cursor:      pointer;
  display:     inline-flex;
  align-items: center;
  transition:  color 0.15s ease;
}

.article-share-btn:hover {
  color: #8B806E; /* gold */
}

/* ============================================================
   10. FEATURED IMAGE
   ============================================================ */

.article-featured-image {
  /* reveal + img-shade from style.css */
  border-radius: 14px;
  overflow:      hidden;
  margin-bottom: 48px;
}

.article-featured-image img {
  /* duotone from style.css */
  width:        100%;
  aspect-ratio: 16 / 9;
  object-fit:   cover;
  display:      block;
}

/* ============================================================
   11. ARTICLE CONTENT TYPOGRAPHY
   the_content() output lives in .article-content.
   Base styles are in style.css; this extends them.
   ============================================================ */

/* style.css already handles:
   .article-content p, h2, blockquote, pre
   No duplication here. */

/* ============================================================
   12. AUTHOR BOX
   ============================================================ */

.article-author {
  /* reveal from style.css */
  margin-top:    64px;
  padding-top:   40px;
  border-top:    1px solid rgba(21, 21, 21, 0.08);
  display:       flex;
  align-items:   flex-start;
  gap:           16px;
}

.article-author__avatar {
  width:       48px;
  height:      48px;
  border-radius: 9999px;
  flex-shrink: 0;
  object-fit:  cover;
  display:     block;
  /* duotone from style.css */
}

.article-author__name {
  /* serif from style.css */
  font-size:   1.05rem;
  font-weight: 400; /* Fraunces already feels medium at this size */
}

.article-author__bio {
  font-size:   13px;
  color:       #6b6659;
  margin-top:  4px;
  line-height: 1.625;
}

/* ============================================================
   13. RELATED ARTICLES SECTION
   ============================================================ */

.article-related {
  border-top:     1px solid rgba(21, 21, 21, 0.08);
  padding-top:    80px;
  padding-bottom: 80px;
}

.article-related__inner {
  max-width: 1180px;
  margin:    0 auto;
  padding:   0 24px;
}

.article-related__label {
  /* mono from style.css */
  font-size:      11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          #8a8578;
  margin-bottom:  32px;
  display:        block;
}

.article-related__grid {
  display: grid;
  gap:     32px;
}

.article-related__card {
  display:         block;
  text-decoration: none;
  color:           inherit;
}

.article-related__card-category {
  /* mono from style.css */
  font-size:      10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          #8B806E; /* gold */
  margin-bottom:  8px;
  display:        block;
}

.article-related__card-title {
  /* serif from style.css */
  font-size:   1.1rem;
  line-height: 1.375;
  transition:  color 0.15s ease;
}

.article-related__card:hover .article-related__card-title {
  color: #8B806E; /* bronze / gold — matches Tailwind group-hover:text-bronze */
}

/* ============================================================
   14. SUBSCRIBE / CTA SECTION
   ============================================================ */

.article-subscribe {
  padding-top:    96px;
  padding-bottom: 96px;
  border-top:     1px solid rgba(21, 21, 21, 0.08);
}

.article-subscribe__inner {
  max-width:  560px;
  margin:     0 auto;
  padding:    0 24px;
  text-align: center;
}

.article-subscribe__eyebrow {
  /* mono from style.css */
  font-size:      11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          #8B806E; /* gold */
  margin-bottom:  20px;
  display:        block;
}

.article-subscribe__heading {
  /* serif from style.css */
  font-weight:   500;
  font-size:     1.8rem;
  line-height:   1.2;
  margin-bottom: 32px;
}

.article-subscribe__form {
  /* newsletter-form class in style.css handles submit behaviour.
     These classes control layout. */
  display:         flex;
  flex-direction:  column;
  gap:             12px;
  justify-content: center;
  max-width:       448px;
  margin:          0 auto;
}

.article-subscribe__input {
  flex:          1 1 0%;
  padding:       14px 16px;
  border-radius: 6px;
  border:        1px solid rgba(21, 21, 21, 0.15);
  background:    transparent;
  font-size:     14px;
  font-family:   inherit;
  color:         inherit;
}

.article-subscribe__input::placeholder {
  color: #B9B2A5;
}

.article-subscribe__input:focus {
  outline:    none;
  box-shadow: 0 0 0 2px rgba(139, 128, 110, 0.40);
}

.article-subscribe__btn {
  /* btn-gold from style.css handles background/shadow/hover.
     These add the specific size for this context. */
  color:         #151515;
  font-size:     14px;
  font-weight:   600;
  padding:       14px 24px;
  border-radius: 6px;
  border:        none;
  cursor:        pointer;
  white-space:   nowrap;
}

/* ============================================================
   15. ARTICLE-PAGE FOOTER
   Self-contained footer used only on single.php.
   ============================================================ */

.article-footer {
  /* grain from style.css */
  background-color: #0E0D0B; /* inkdeep */
  color:            #B3AA9B; /* stone */
  padding-top:      64px;
  padding-bottom:   40px;
}

.article-footer__inner {
  max-width: 1180px;
  margin:    0 auto;
  padding:   0 24px;
}

.article-footer__top {
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  gap:             48px;
  padding-bottom:  48px;
  border-bottom:   1px solid rgba(255, 255, 255, 0.10);
}

.article-footer__brand-logo {
  /* aib-logo--footer size class is in style.css (logo refactor) */
  margin-bottom: 16px;
}

.article-footer__tagline {
  font-size: 13px;
  max-width: 320px;
  color:     #B3AA9B;
}

.article-footer__nav {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   48px;
  font-size:             13px;
}

.article-footer__nav-col-title {
  /* mono from style.css */
  font-size:      10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.35);
  display:        block;
  margin-bottom:  12px;
}

.article-footer__nav-col a {
  display:    block;
  color:      #B3AA9B;
  transition: color 0.15s ease;
}

.article-footer__nav-col a:hover {
  color: #F6F2EA; /* paper */
}

/* vertical rhythm between links — replaces Tailwind space-y-3 */
.article-footer__nav-col a + a {
  margin-top: 12px;
}

.article-footer__copyright {
  padding-top: 32px;
  font-size:   12px;
  color:       rgba(255, 255, 255, 0.40);
}

/* ============================================================
   16. RESPONSIVE OVERRIDES
   Mobile-first → tablet (640px) → desktop (768px, 1024px)
   ============================================================ */

/* --- 640px+ (sm) --- */
@media (min-width: 640px) {
  .article-subscribe__form {
    flex-direction: row;
  }
}

/* --- 768px+ (md) --- */
@media (min-width: 768px) {
  /* Header inner: wider side padding */
  .article-header__inner {
    padding-left:  40px;
    padding-right: 40px;
  }

  /* Header nav: show on tablet+ */
  .article-header__nav {
    display: flex;
  }

  /* Article layout padding */
  .article-layout {
    padding-left:  40px;
    padding-right: 40px;
  }

  /* Article title: larger on tablet+ */
  .article-title {
    font-size: 2.9rem;
  }

  /* Related: 3-column grid */
  .article-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Related inner padding */
  .article-related__inner {
    padding-left:  40px;
    padding-right: 40px;
  }

  /* Subscribe inner padding */
  .article-subscribe__inner {
    padding-left:  40px;
    padding-right: 40px;
  }

  /* Footer inner padding */
  .article-footer__inner {
    padding-left:  40px;
    padding-right: 40px;
  }

  /* Footer top: side-by-side on tablet+ */
  .article-footer__top {
    flex-direction: row;
  }
}

/* --- 1024px+ (lg) --- */
@media (min-width: 1024px) {
  /* Article layout: 2-column grid with sidebar */
  .article-layout {
    display:               grid;
    grid-template-columns: 220px 1fr;
    gap:                   56px;
  }

  /* TOC sidebar: show on desktop */
  .article-toc-sidebar {
    display: block;
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .article-category-label,
  .article-share-btn,
  .article-related__card-title,
  .article-footer__nav-col a {
    transition: none;
  }
}

/* ==========================================================================
   PATCH 1 — Gutenberg List Rendering
   =========================================================================

   The global reset in style.css removes all list styling:
     ul { list-style: none; margin: 0; padding: 0; }

   This is correct for navigation menus, but it strips bullets and
   indentation from every <ul> and <ol> inside Gutenberg article content.

   These rules restore proper editorial list rendering ONLY within
   .article-content, so navigation lists and UI elements are never affected.
   ========================================================================== */

/* ---- Unordered lists ---- */
.article-content ul {
  list-style:    disc;
  margin:        1.4em 0;
  padding-left:  1.75em;
}

/* ---- Ordered lists ---- */
.article-content ol {
  list-style:    decimal;
  margin:        1.4em 0;
  padding-left:  1.75em;
}

/* ---- List items ---- */
.article-content li {
  font-size:   1.08rem;   /* matches .article-content p */
  line-height: 1.8;       /* matches .article-content p */
  color:       #2b2a27;   /* matches .article-content p */
  margin-bottom: 0.45em;
}

/* Last item needs no bottom margin */
.article-content li:last-child {
  margin-bottom: 0;
}

/* ---- Nested lists — second level ---- */
.article-content ul ul,
.article-content ol ul {
  list-style-type: circle;
  margin:          0.5em 0 0.5em 0;
  padding-left:    1.5em;
}

.article-content ul ol,
.article-content ol ol {
  list-style-type: lower-alpha;
  margin:          0.5em 0 0.5em 0;
  padding-left:    1.5em;
}

/* ---- Nested lists — third level ---- */
.article-content ul ul ul,
.article-content ol ol ol,
.article-content ul ol ul,
.article-content ol ul ol {
  list-style-type: square;
  margin:          0.4em 0 0.4em 0;
  padding-left:    1.5em;
}

/* ---- Gutenberg wp-block-list (same rules, different selector) ---- */
.article-content .wp-block-list {
  margin:      1.4em 0;
  padding-left: 1.75em;
}

/* ---- Breathing room after a list that follows a paragraph ---- */
.article-content p + ul,
.article-content p + ol {
  margin-top: 0.75em;
}

/* ---- Breathing room after a list before a paragraph ---- */
.article-content ul + p,
.article-content ol + p {
  margin-top: 1.4em;
}

/* ==========================================================================
   PATCH 2 — TOC Scroll Position Fix
   =========================================================================

   Problem:
   Clicking a TOC link scrolls the target heading to the very top of the
   viewport. The fixed article-header (64px tall) then overlaps the heading,
   hiding it under the navigation bar.

   Solution:
   1. scroll-padding-top on html (scoped via body.aib-single-page so it
      only applies on the single article page and does not affect other
      templates sharing the same HTML element).
   2. scroll-margin-top on every heading level inside .article-content,
      providing an explicit offset equal to the fixed header height (64px)
      plus 24px of comfortable breathing room = 88px total.

   scroll-margin-top is the correct modern approach (supported in all
   browsers since 2019). It is applied to the element being scrolled to,
   not to the scrolling container.
   ========================================================================== */

/*
   Because scroll-padding-top applies to the html element and we can only
   scope it via a descendant selector at the body level, we use the
   .aib-single-page body class added by single.php via body_class().
   This is the cleanest approach without JavaScript.
*/
.aib-single-page {
  /* scroll-padding-top on the body is not the correct property —
     it must be on the root scrolling element. We set it on html
     via a class added by JS, OR we rely entirely on scroll-margin-top
     on the target elements, which is self-contained and requires no JS.
     We use scroll-margin-top below — no html override needed. */
}

/* Apply scroll-margin-top to every heading that can become a TOC anchor.
   single.js assigns IDs to h2 elements; Gutenberg may also output h3–h6.
   64px (header) + 24px (breathing room) = 88px */
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  scroll-margin-top: 88px;
}

/* Also apply to any element that single.js might give an ID to directly */
#article-body [id] {
  scroll-margin-top: 88px;
}

/* ==========================================================================
   PATCH 3 — Desktop Layout Width Increase
   =========================================================================

   Problem:
   At large desktop resolutions (1400px+) the article layout is constrained
   to 1180px with a 220px TOC sidebar, leaving large blank margins. The
   reading column is a maximum of ~900px (1180 - 220 - 56gap) but capped
   to 720px, wasting available screen space.

   Solution:
   Add a new breakpoint at 1400px that:
   • Widens the overall layout to 1500px max
   • Expands TOC to 280px (more breathing room for long section titles)
   • Widens the article column cap to 820px (optimal for long-form reading)
   • Widens related / footer / subscribe inner containers to match
   • Increases header inner max-width to match

   The 768px (tablet) breakpoint is deliberately NOT modified.
   The 1024px (desktop) breakpoint is deliberately NOT modified.
   Only 1400px+ is changed.

   Reading line length:
   820px at 1.08rem (≈17px) ≈ 75–80 characters per line — within the
   ideal 65–80 character range for sustained editorial reading.
   ========================================================================== */

@media (min-width: 1400px) {

  /* Wider layout container */
  .article-layout {
    max-width:             1500px;
    grid-template-columns: 280px 1fr;
    gap:                   72px;
    padding-left:          48px;
    padding-right:         48px;
  }

  /* Wider article reading column */
  .article-main {
    max-width: 820px;
  }

  /* TOC sticky offset stays the same (header is still 64px) */
  .article-toc-sidebar__inner {
    top: 96px; /* slightly more breathing room at large screens */
  }

  /* Widen the header inner container to match layout */
  .article-header__inner {
    max-width:     1500px;
    padding-left:  48px;
    padding-right: 48px;
  }

  /* Widen related articles container */
  .article-related__inner {
    max-width:     1500px;
    padding-left:  48px;
    padding-right: 48px;
  }

  /* Widen the footer inner container */
  .article-footer__inner {
    max-width:     1500px;
    padding-left:  48px;
    padding-right: 48px;
  }

  /* Subscribe section is intentionally narrow (560px max) —
     it is centred text, not a layout container — so it is NOT widened. */

}