/*
  Publii Adapter — theme integration CSS.

  NOT Social-Lite core (see assets/css/social-lite.css, copied unmodified
  from the Social-Lite project — never edit that file to fix a theme
  conflict; fix it here instead). Every rule below is justified by an
  actual conflicting rule confirmed by inspecting
  assets/css/beentheretwo-v1-style.css directly — see the comment above
  each one. Nothing here duplicates a rule social-lite.css already
  provides.
*/

/*
  CONFIRMED conflict: beentheretwo-v1-style.css defines
    h1, h2, h3, h4, h5, h6 { color: var(--text); font-family: var(--primary-font); ... }
  (a bare element selector). social-lite.css's own `.sl-slide__heading`
  class rule never sets `color` or `font-family` at all (only
  size/weight/line-height/text-align/margin) — with no class-level rule
  competing for those two specific properties, the theme's element
  selector is the only rule that matches them, so it wins over
  inheriting `.sl-story`'s color/font-family, regardless of class vs.
  element specificity for the properties `.sl-slide__heading` *does* set.
  Restated at the same specificity as social-lite.css's own class rules
  (a class selector) so this participates in the normal cascade rather
  than requiring !important.
*/
.sl-story .sl-slide__heading {
  color: var(--sl-reader-text);
  font-family: var(--sl-font-system);
}

/*
  CONFIRMED conflict: beentheretwo-v1-style.css defines
    ul { margin: 0 0 25px 0; padding-left: 20px; list-style: square outside none; }
  Social-Lite's `.sl-slide__content` is a centered, narrow (34ch) text
  column; the theme's left-indented, square-bulleted list default reads
  inconsistently next to every other centered content type in a slide.
  Left-align list content specifically, rather than trying to center
  list markers.
*/
.sl-story .sl-slide__content ul,
.sl-story .sl-slide__content ol {
  text-align: left;
  margin: 0;
}

/*
  Reader background for the page chrome immediately around the Story —
  the same role demo.css's `body.is-reader` plays in the Social-Lite
  reference site (see social-lite.css's own comment on `.sl-story`:
  "the surrounding page ... recedes into the same dark background").
  Reproduced here, not copied from demo.css, since demo.css is that
  other project's own page shell, not part of Social-Lite core.

  `body.is-reader` is added by publii-social-lite-adapter.js only after
  a successful transform, so it alone would miss the no-JS/pre-transform
  moment when `.sl-story-source` is still on the page. The `:has()`
  variants cover that gap without needing JavaScript, so this one rule
  applies whether or not the adapter has run — the "only body background
  goes dark" limitation this comment used to describe is resolved by the
  chrome-suppression block below, not by this rule alone.
*/
body.is-reader,
body:has(.sl-story-source),
body:has([data-sl-story]) {
  background: var(--sl-reader-bg, #0f0e0c);
  color: var(--sl-reader-text, #f3efe6);
  color-scheme: dark;
}

/*
  Immersive reader shell — full write-up in
  docs/publii-social-lite-integration.md ("Immersive reader
  presentation"). Everything below is scoped to
  `body:has(.sl-story-source, [data-sl-story])`, i.e. only a post with
  the Social-Lite Story setting enabled ever matches, so none of this
  can affect a normal post, page, or archive. `:has()` is used instead
  of a body class from post.hbs specifically because the elements being
  hidden (navbar, footer) render at call sites — {{> navbar}},
  {{> footer-blog-post}} — that are outside the {{#post}} block context,
  where @config.post.socialLiteStory is not reliable (see post.hbs's own
  comment on this); `:has()` sidesteps the question entirely by matching
  on content that is only ever present in this exact branch, regardless
  of where in the document the matched ancestor sits. Supported in all
  current evergreen browsers; where unsupported, chrome simply stays
  visible around the Story (progressive enhancement, not breakage).

  `.sl-reader-main` is a real <main> landmark (post.hbs has no other
  <main> on the post template) so the reader page keeps normal document
  landmark structure — no dialog role, no aria-modal, no focus trap.
  This is a full page, not a modal pretending to be one.
*/
.sl-reader-main {
  min-height: 100vh;
  min-height: 100dvh;
  padding-inline: env(safe-area-inset-left, 0) env(safe-area-inset-right, 0);
  padding-block-end: env(safe-area-inset-bottom, 0);
}

/*
  Return — replaces this integration's previous lack of any exit
  control. Styled after the Social-Lite demo site's own `.reader-exit`
  (demo.css) — small, muted, brightens on hover/focus — rather than a
  prominent button, per CLAUDE.md's "Intent-Driven Interface": a
  reader who's reading shouldn't have a loud control competing with the
  Story, but it still needs to stay in the tab order and reachable while
  scrolling, hence `position: sticky` rather than scrolling away with
  the page.
*/
.sl-reader-return {
  position: sticky;
  top: 0;
  z-index: 1;
  display: inline-block;
  padding: 0.75rem 1rem;
  padding-top: max(0.75rem, env(safe-area-inset-top));
  padding-left: max(1rem, env(safe-area-inset-left));
  background: var(--sl-reader-bg, #0f0e0c);
  color: var(--sl-reader-muted, #9c937f);
  text-decoration: none;
  font-size: 0.875rem;
}

.sl-reader-return:hover {
  color: var(--sl-reader-text, #f3efe6);
}

/* Sits on the always-dark reader background regardless of the site's
   own light/dark styling, so it needs the reader's own non-adaptive
   focus color rather than whatever this theme uses for normal links —
   same reasoning as social-lite.css's own --sl-reader-focus rule. */
.sl-reader-return:focus-visible {
  outline: 3px solid var(--sl-reader-focus, #8fbaff);
  outline-offset: 3px;
}

/*
  Theme chrome suppression. Every selector below is a class confirmed by
  reading post.hbs and partials/navbar.hbs / footer-blog-post.hbs
  directly (see docs/publii-social-lite-integration.md for the full
  list and reasoning) — nothing here is guessed. `display: none` is used
  rather than `visibility: hidden`/`opacity: 0` deliberately: suppressed
  chrome must be unreachable by keyboard, and only `display: none`
  removes an element from both paint and the tab order.
  `!important` guards these specifically because a couple of the
  selectors below (.col-lg-2, .col-lg-4, .row) are also styled by
  Bootstrap utility classes elsewhere in the cascade; nothing else in
  this file needs it.
*/
body:has(.sl-story-source, [data-sl-story]) .cs_site_header,
body:has(.sl-story-source, [data-sl-story]) .cs_hamburger_header,
body:has(.sl-story-source, [data-sl-story]) .cs_modal_search,
body:has(.sl-story-source, [data-sl-story]) .cs_header_height_100,
body:has(.sl-story-source, [data-sl-story]) .cs_footer,
body:has(.sl-story-source, [data-sl-story]) .cs_post_featured_image,
body:has(.sl-story-source, [data-sl-story]) .col-lg-2,
body:has(.sl-story-source, [data-sl-story]) .col-lg-4,
body:has(.sl-story-source, [data-sl-story]) .cs_tags_list_1,
body:has(.sl-story-source, [data-sl-story]) .cs_admin_card_2,
body:has(.sl-story-source, [data-sl-story]) .cs_sl_related_posts,
body:has(.sl-story-source, [data-sl-story]) .cs_sl_adjacent_posts,
/* Every Bootstrap vertical-spacer div on this template (cs_height_92,
   cs_height_95, cs_height_88, cs_height_70, cs_height_80, cs_height_150
   — always the first class listed) exists solely to add margin around
   the chrome blocks above; with that chrome gone, the spacers would
   otherwise leave unwanted empty scroll height behind the Story. */
body:has(.sl-story-source, [data-sl-story]) [class^="cs_height_"] {
  display: none !important;
}

/*
  Reclaim the width the hidden .col-lg-2 (share links) and .col-lg-4
  (sidebar) columns leave behind, so the Story's own centered column
  (social-lite.css's .sl-story { max-width: var(--sl-story-width) })
  sits in a genuinely full-width dark canvas rather than a narrower
  Bootstrap column with blank space where the sidebar used to be.
  Confirmed against bootstrap.min.css: .col-lg-8/.col-lg-10 are plain
  `flex: 0 0 auto; width: <percent>` with no !important, so a later,
  equal-specificity rule here is enough to win without one either.
*/
body:has(.sl-story-source, [data-sl-story]) .col-lg-8,
body:has(.sl-story-source, [data-sl-story]) .col-lg-10 {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

/*
  Same idea for the two nested Bootstrap containers/rows this template
  wraps the post column in — beentheretwo-v1-style.css's own
  `.container-fluid` rule sets 100px side padding and a 1920px max-width
  (50px/15px at narrower breakpoints), and Bootstrap's `.row` sets a
  1.5rem gutter via the `--bs-gutter-x` custom property it already
  reads itself — overriding that variable is preferred here over
  fighting the margin/padding it generates from it.
*/
body:has(.sl-story-source, [data-sl-story]) .container-fluid {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

body:has(.sl-story-source, [data-sl-story]) .row {
  --bs-gutter-x: 0;
}