/* ==========================================================================
   framework_reference.css  —  styling for the Framework Reference page
   ==========================================================================

   PURPOSE
     Presentation chrome for the hidden "Framework Reference" page that
     ships with every site. It styles ONLY the demo boxes and labels —
     it contains no layout rules, so it can never affect real pages.

   HOW THE REFERENCE PAGE IS BUILT
     Exactly the way a real page is built in Contao:
       • each ARTICLE is a .row          (set via the Toolbox row option)
       • each CONTENT ELEMENT is a column (col-1-2, col-1-3, …)
     The demo classes below are added in each element's "CSS ID/class"
     field, so the framework classes stay untouched and authentic.

   INSTALL
     Themes → Layouts → External CSS files → add this file alongside
     framework_v3.scss. Only needed on the reference page's layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TWO-COLUMN SHELL — sidebar + content
   --------------------------------------------------------------------------
   The layout uses Contao's LEFT column for the section nav. Contao outputs
   #main BEFORE #left in the source (good for SEO), so the sidebar is pulled
   visually first with order:-1 rather than by reordering the markup.

   #container takes over the max-width, centring and page gutter, so the
   framework's #main > .inside container rule is neutralised below —
   otherwise the gutter would be applied twice.
   -------------------------------------------------------------------------- */
.fw-ref .container_inside {
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.fw-ref #left {
  flex: 0 0 clamp(150px, 15vw, 200px);
  order: -1;
}

.fw-ref #main {
  flex: 1 1 0;
  min-width: 0;      /* lets the content column shrink instead of overflowing */

  /* .bleed-x escapes the page gutter with negative margins, which in a
     sidebar layout would reach across into the nav. Clip at the content
     column so the demo can't overlap the sidebar or add page-wide
     horizontal scroll. (clip does not create a scroll container, so the
     sticky nav is unaffected.) */
  overflow-x: clip;
}

/* The container now supplies the width and gutter — don't repeat them here. */
/* .container_inside supplies the width and gutter for the shell above, so
   the inner column must not repeat them. */
.fw-ref #main > .inside {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Full height so the sticky nav inside has room to travel. #left already
   stretches as a flex item; .inside must follow it. */
.fw-ref #left > .inside {
  height: 100%;
}


/* --------------------------------------------------------------------------
   STICKY SECTION NAV
   -------------------------------------------------------------------------- */
.fw-ref #left .fw-nav {
  position: sticky;
  top: 20px;
}

.fw-nav-title {
  font: 600 11px/1.3 system-ui, -apple-system, sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .55;
  margin: 0 0 8px;
}

.fw-nav-inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid #cfcfcf;
}

.fw-nav-inner li { margin: 0; }

.fw-nav-inner a {
  display: block;
  padding: 5px 0 5px 12px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  border-bottom: 0;                /* beat a themed underline on links */
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
  color: inherit;
}

.fw-nav-inner a:hover,
.fw-nav-inner a:focus-visible {
  border-left-color: #2f6fa8;
  color: #2f6fa8;
}

/* Anchored sections shouldn't land flush against the top of the viewport */
.fw-ref [id^="sec-"] { scroll-margin-top: 24px; }

@media (prefers-reduced-motion: no-preference) {
  html:has(body.fw-ref) { scroll-behavior: smooth; }
}

/* Small screens: sidebar becomes a horizontal chip list above the content */
@media (max-width: 860px) {
  .fw-ref .container_inside { flex-direction: column; }
  .fw-ref #left      { flex: 1 1 auto; }
  .fw-ref #left .fw-nav { position: static; }

  .fw-nav-inner ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-left: 0;
  }
  .fw-nav-inner a {
    margin-left: 0;
    padding: 4px 10px;
    border-left: 0;
    border: 1px solid #cfcfcf;
    border-radius: 3px;
    font-size: 12.5px;
  }
  .fw-nav-inner a:hover,
  .fw-nav-inner a:focus-visible { border-color: #2f6fa8; }
}


/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */
.fw-ref h1 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  margin: 0 0 10px;
}

.fw-ref h2 {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.2;
  margin: 0 0 6px;
  padding-bottom: 8px;
  border-bottom: 2px solid #2f6fa8;
}

.fw-ref h3 {
  font-size: 15px;
  margin: 0 0 4px;
}

/* Documentation prose only — the explanatory blocks and callouts.
   Deliberately NOT `.fw-ref p`: that capped every paragraph on the page at
   78ch and forced 14px, which meant real content elements rendered at the
   reference page's type size instead of the site's. Anything being tested
   here has to render exactly as it would on a real page. */
.fw-ref .fw-head p,
.fw-ref .fw-note p {
  font-size: 14px;
  line-height: 1.6;
  max-width: 78ch;
}

/* Inline class names. `:not(pre) > code` because a bare `code` rule reaches
   INTO a code element's <pre>, where its nowrap collapses every newline and
   renders the whole sample on one line — silently, since the text is all
   still there. code.css owns block code. */
.fw-ref :not(pre) > code {
  font: 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #eef2f6;
  border: 1px solid #dde4ea;
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   COLUMNS ARE VISIBLE BOXES
   --------------------------------------------------------------------------
   Every column on this page gets a light grey background and 15px of
   padding, so the grid structure is legible at a glance. The background
   sits on the COLUMN itself — which is exactly what the gap engine makes
   possible, and what the old padding-gutter engine could not do.
   -------------------------------------------------------------------------- */
/* :not(iframe) because Contao's HTML and unfiltered HTML elements emit their
   markup with no wrapper, so a pasted embed is itself a direct child of the
   row — without this it gets painted as though it were a demo column. */
.fw-ref .row > *:not(iframe) {
  background: #cbcbcb;
  border: 1px solid #b8b8b8;
  padding: 15px;
  border-radius: 2px;
}

/* Second tone, so the two halves of a pair stay distinguishable */
.fw-ref .row > .fw-box-alt {
  background: #c2c8cd;
  border-color: #b8b8b8;
}

.fw-box b,
.fw-box-alt b {
  display: block;
  font: 600 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.fw-box span,
.fw-box-alt span {
  display: block;
  font-size: 11.5px;
  opacity: .75;
  margin-top: 3px;
}

/* The pxc-* demo must show its OWN inner padding, not the 15px default */
.fw-ref .row[class*="pxc-"] > * {
  padding-inline: var(--col-pad-x);
}

/* Tall variant, for demonstrating vertical alignment */
.fw-tall { padding-block: 34px; }

/* --------------------------------------------------------------------------
   Gap reveal — amber behind a ROW, so real gutters are visible.
   Anywhere amber shows through is genuine empty space between columns.
   -------------------------------------------------------------------------- */
.fw-reveal {
  background: repeating-linear-gradient(45deg, #f7c873, #f7c873 6px, #f2b954 6px, #f2b954 12px);
}

/* --------------------------------------------------------------------------
   Cards — a column with a background, the pattern real sites use
   -------------------------------------------------------------------------- */
.fw-ref .row > .fw-card {
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  padding: 18px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 7%);
}

/* --------------------------------------------------------------------------
   Section intro block
   -------------------------------------------------------------------------- */
.fw-head { padding-bottom: 2px; }

.fw-ref .row > .fw-note {
  background: #f5f7f9;
  border-left: 3px solid #2f6fa8;
  padding: 12px 15px;
  font-size: 13px;
  line-height: 1.6;
}

.fw-note strong { display: block; margin-bottom: 3px; }

/* Reference tables (tokens, ramp) */
.fw-ref table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fw-ref th,
.fw-ref td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid #e3e3e3;
  vertical-align: top;
}

.fw-ref th {
  background: #f5f7f9;
  font-weight: 600;
  border-bottom: 2px solid #d3dbe2;
}

.fw-ref td:first-child {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   WHICH FILE AM I IN?
   --------------------------------------------------------------------------
   Every section is tagged with the stylesheet that owns it, so the page
   answers "where do I go to change this?" without a hunt. Tag a section by
   putting a ref-in-* class on the ARTICLE — back end → article → Expert
   settings → CSS class.

   Drawn by CSS rather than added as a content element on purpose: these
   articles ARE the layout demos, and any real element dropped into one
   becomes another flex item inside the row being demonstrated — it would
   change the thing the reader is looking at. A ::before is a single
   predictable full-width item that cannot be dragged into the wrong place
   or edited out, and it ships with the stylesheet, so the labels cannot
   drift out of step per site.
   -------------------------------------------------------------------------- */

.fw-ref [class*="ref-in-"]::before {
  content: var(--ref-file, "");

  /* Its own line whether or not the article is a flex .row; order guards
     against a demo child that sets a negative order. */
  display: block;
  flex: 0 0 100%;
  order: -1;

  /* Same blue keyline as .fw-note, so it reads as page furniture rather
     than as part of the demo. */
  border-left: 3px solid #2f6fa8;
  padding-left: 8px;
  font: 600 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #6b7a88;

  /* A label has to sit nearer the thing it labels than the thing above it.
     Being the row's first flex line put a full row-gap between the chip and
     its own heading while leaving it flush against the END of the previous
     section — so it read as a footnote to the section above, which is the
     opposite of what it says. Cancelling the gap below and moving that space
     above fixes the affinity. */
  margin-top: var(--space-40);
  margin-bottom: calc(2px - var(--gap-y, 0px));
}

.ref-in-framework { --ref-file: "framework_v3.css"; }
.ref-in-standard  { --ref-file: "website_standard.css"; }
.ref-in-website   { --ref-file: "website.css"; }
.ref-in-structure { --ref-file: "website_structure.css"; }
.ref-in-gallery   { --ref-file: "gallery.css"; }
.ref-in-tables    { --ref-file: "tables.css"; }
.ref-in-forms     { --ref-file: "forms.css"; }
.ref-in-accordion { --ref-file: "accordion.css"; }
.ref-in-code      { --ref-file: "code.css"; }

/* A section spanning two files names both. Spelled out, because an element
   has only one ::before to render into — two classes cannot each draw one.
   The compound selector outranks the single-class rules above on
   specificity, so order here does not matter. */
.ref-in-framework.ref-in-website   { --ref-file: "framework_v3.css  +  website.css"; }
.ref-in-framework.ref-in-structure { --ref-file: "framework_v3.css  +  website_structure.css"; }
.ref-in-framework.ref-in-standard  { --ref-file: "framework_v3.css  +  website_standard.css"; }