/* =============================================================================
   RuPress · main.css — orchestrator
   -----------------------------------------------------------------------------
   This file does only four things:
     1. Imports the design system (tokens, primitives, typography, components).
     2. Establishes html/body base styles + global sticky-footer layout.
     3. Defines global page elements that don't fit in any component
        (.left-bar, .wrap, .section, .section::after).
     4. Provides cross-cutting responsive overrides for those page-level
        elements (left-bar hiding, wrap padding shifts, section rhythm).

   Per-component responsive rules live in their respective component files.
   No legacy `--m-*` / `--t-*` magic-number variables, no !important.
============================================================================= */

/* ----- Design system imports -------------------------------------------- */
@import url('_tokens.css');
@import url('_primitives.css');
@import url('_typography.css');

@import url('components/_header.css');
@import url('components/_footer.css');
@import url('components/_cards.css');
@import url('components/_drawer.css');
@import url('components/_topic-page.css');
@import url('components/_back-to-top.css');

/* ----- Base reset + body sticky-footer ---------------------------------- */
html,
body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-page);
  font-family: var(--font-sans);
  color: var(--color-text-primary);
}

html {
  height: 100%;
}

/* Sticky-footer (global): the footer pins to the bottom of the viewport
   even when content is short. Works for both DOM shapes used in the site:
   - flat:        body > main > footer            (news / about / contact / support)
   - .page wrap:  body > .page > {main, footer}   (index)
   In the second form .page itself becomes the flex column so its main
   stretches inside it. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > .page {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body > main,
body > .main,
body > .wrap,
.page > main,
.page > .main,
.page > .wrap {
  flex: 1 0 auto;
  min-width: 0;
}

html,
body {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ----- Global page elements --------------------------------------------- */

/* Left black rail — fixed vertical strip on the left of the desktop layout.
   Sits in the base z-layer, BELOW sticky bars (so the topics-bar burger
   button at left: 0 isn't clipped by the rail) and the drawer overlay.
   Hidden on tablet and mobile (see responsive block below). */
.left-bar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--leftbar-w);
  background: var(--color-bg-inverse);
  z-index: var(--z-base);
}

/* Main content wrapper — width-clamped, centered, page horizontal padding.
   Uses --wrap-* tokens which are responsive: padding tightens on tablet
   and mobile to maximize editorial width on narrow viewports.

   `box-sizing: border-box` is critical: it makes max-width INCLUDE the
   horizontal padding, so .wrap shares the EXACT same right edge as
   .container (which is also border-box). Without this, .wrap extends
   24px further to the right than .container, breaking the alignment of
   topics-bar / logo-bar / content / sidebar on a single vertical rail. */
.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--space-5) var(--wrap-pad-x) var(--space-1);
  box-sizing: border-box;
}

/* Section rhythm — every editorial block on the page is a <section class="section">
   with a hairline divider drawn via ::after. Last section drops its divider —
   the footer (or its absence) provides closure. */
.section {
  position: relative;
  padding-block-end: var(--space-7);
  margin-block-end: var(--space-6);
}

.section::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: var(--color-border-default);
}

.section:last-of-type::after {
  display: none;
}

/* ----- Logo click-fix --------------------------------------------------- */

/* Make the entire logo rectangle clickable, not just the image pixels.
   The <a> sits above shadows and pseudo-elements via z-index; the <img>
   itself is non-interactive so the wrapper catches the click. */
.logo-inner a,
.logo-link {
  display: inline-block;
  line-height: 0;
  cursor: pointer;
  position: relative;
  z-index: var(--z-sticky);
}

.logo-inner a img {
  display: block;
  pointer-events: none;
}

/* Inline-only click target for card/mini titles (keeps the rest of the
   card surface non-clickable except for image + title text). */
.card-title-link,
.mini-title-link {
  display: inline;
}

/* =============================================================================
   Responsive — global page-level overrides only.
   Per-component responsive rules (header, cards, drawer, footer) live in
   their respective component files. This block touches only .left-bar,
   .wrap, .section — the elements defined above.
============================================================================= */

/* iPad landscape touch override: at touch-coarse pointers up to 1366px,
   suppress the left rail. iPad Pro 12.9" landscape reports 1366px width
   and would otherwise show the desktop leftbar — feels out of place on a
   touch device. */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) and (max-width: 1366px) {
  .left-bar {
    display: none;
  }
}

/* Tablet (768–1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  :root {
    --wrap-pad-x: var(--space-2);   /* 8px — tighten content edge on tablet */
  }

  .left-bar {
    display: none;
  }

  .wrap {
    padding-block-start: var(--space-3);
  }

  .section {
    padding-block-end: var(--space-4);
    margin-block-end: var(--space-2);
  }
}

/* Mobile (<768px) */
@media (max-width: 767px) {
  :root {
    --wrap-max: 100%;
    --wrap-pad-x: var(--space-4);   /* 16px — comfortable thumb-edge spacing */
  }

  html,
  body {
    overflow-x: clip;
  }

  .left-bar {
    display: none;
  }

  .section {
    padding-block-end: var(--space-4);
    margin-block-end: var(--space-4);
  }

  .section::after {
    inset-inline: 0;
  }
}