/*
  Reveal URLs site styling. A simple, framework-free, responsive brand theme:
  brand-green (#16a34a) accents matching the extension's "match" colour and the
  R-magnifier logo, a system font stack, accessible contrast, and a constrained
  prose width for readability. No JavaScript is required; the site is fully
  functional with styles alone.
*/

/* Brand tokens shared across the site. */
:root {
  --brand:        #16a34a;
  --brand-dark:   #0f7a37;
  --highlight:    #cc0000;
  --ink:          #1a1d21;
  --ink-muted:    #51585f;
  --surface:      #ffffff;
  --surface-alt:  #f4f7f5;
  --border:       #d9e0db;
  --warn:         #cc0000;
  --max-prose:    44rem;
  --max-wide:     64rem;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
          "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Base reset and document rhythm. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
}

/* Skip link, revealed on keyboard focus for accessibility. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: var(--brand);
  color: #fff;
  border-radius: 0 0 0.5rem 0;
}

.skip-link:focus {
  left: 0;
}

/* Links. */
a {
  color: var(--brand-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover,
a:focus {
  color: var(--brand);
}

/* Site header with the logo, wordmark and primary navigation. */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.site-header__inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0.85rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  /* Positioning context for the mobile nav dropdown (absolutely positioned). */
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
}

.brand__logo {
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
}

.brand__wordmark {
  font-family: var(--mono);
  letter-spacing: -0.01em;
}

.highlight {
  color: var(--highlight);
}

/* Manual language switcher in the header: an accessibly-labelled <select> the
   runtime loader (site/scripts/i18n.mjs) drives. It sits with the nav on the right;
   the label is compact and muted so it does not compete with the brand or nav. */
.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* Absorb the free space before it, so the switcher and the nav group together
     on the right of the header (the nav follows it immediately). */
  margin-left: auto;
}

.language-switcher__label {
  color: var(--ink-muted);
  font-size: 0.85rem;
}

.language-switcher__select {
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
}

.language-switcher__select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Mobile navigation uses a native <details> disclosure: the <summary> is the
   hamburger button (it reports aria-expanded to assistive tech with NO JavaScript),
   and the nav is the disclosure's content. On desktop the nav shows in full and the
   summary is hidden; the mobile breakpoint flips that. */
.nav-disclosure {
  /* The language switcher carries the `margin-left: auto`, so the switcher and the
     nav sit together on the right; the nav follows the switcher with a small gap. */
  margin-left: 0.5rem;
}

/* Desktop: always show the nav — overriding the UA rule that hides a CLOSED
   <details>'s content — and hide the hamburger summary. */
.nav-disclosure > .site-nav {
  display: block;
}

/* Modern Chrome hides a closed <details>'s content via ::details-content's
   content-visibility, which the display rule above cannot defeat; force it visible
   so the desktop nav shows regardless of the disclosure's open state. (Older engines
   and Firefox ignore this rule and rely on the display override above. On mobile the
   closed nav is re-hidden by display:none in the media query.) */
.nav-disclosure::details-content {
  content-visibility: visible;
}

.nav-toggle {
  display: none;
  align-items: center;
  padding: 0.35rem 0.5rem;
  border-radius: 0.4rem;
  color: var(--ink-muted);
  cursor: pointer;
  list-style: none;
}

/* Drop the default disclosure triangle (Firefox honours list-style above; WebKit
   needs the pseudo-element). */
.nav-toggle::-webkit-details-marker {
  display: none;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.nav-toggle-icon {
  display: block;
}

/* Primary navigation. */
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.25rem;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.4rem;
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.95rem;
}

/* A leading inline icon in a nav link (e.g. the Source code glyph). */
.nav-icon {
  display: block;
  flex: none;
}

.site-nav a:hover,
.site-nav a:focus {
  color: var(--brand-dark);
  background: var(--surface-alt);
}

.site-nav a[aria-current="page"] {
  color: var(--brand-dark);
  font-weight: 600;
}

/* Main content container, width-constrained for readable prose. */
.site-main {
  max-width: var(--max-prose);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3.5rem;
}

.site-main--wide {
  max-width: var(--max-wide);
}

/* Screenshots embedded in the docs: keep within the prose column and framed. */
.site-main img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
}

/* Headings and prose rhythm. */
h1,
h2,
h3,
h4 {
  line-height: 1.25;
  color: var(--ink);
}

h1 {
  font-size: 2rem;
  margin: 0 0 0.75rem;
}

h2 {
  font-size: 1.45rem;
  margin: 2.25rem 0 0.75rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border);
}

h3 {
  font-size: 1.2rem;
  margin: 1.75rem 0 0.5rem;
}

p,
ul,
ol {
  margin: 0 0 1rem;
}

ul,
ol {
  padding-left: 1.4rem;
}

/* Inline and block code. */
code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface-alt);
  padding: 0.1em 0.35em;
  border-radius: 0.3rem;
}

pre {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem 1.1rem;
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.9rem;
}

blockquote {
  margin: 0 0 1rem;
  padding: 0.25rem 1rem;
  border-left: 3px solid var(--brand);
  color: var(--ink-muted);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 1rem;
}

th,
td {
  border: 1px solid var(--border);
  padding: 0.45rem 0.65rem;
  text-align: left;
}

th {
  background: var(--surface-alt);
}

/* Landing hero. */
.hero {
  text-align: center;
  padding: 1rem 0 2.5rem;
}

.hero__logo {
  width: 5rem;
  height: 5rem;
  border-radius: 1rem;
  margin: 0 auto 1rem;
  display: block;
}

.hero__title {
  font-family: var(--mono);
  font-size: 2.4rem;
  margin: 0 0 0.5rem;
}

.hero__tagline {
  font-size: 1.3rem;
  color: var(--ink-muted);
  margin: 0;
}

/* Generic content card. */
.card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 1.25rem 1.4rem;
  margin: 0 0 1.5rem;
}

.card h2 {
  margin-top: 0;
  border-bottom: none;
  padding-bottom: 0;
}

/* Pill list used for supported targets and quick links. */
.pill-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.95rem;
}

/* Call-to-action button. */
.button {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  background: var(--brand);
  color: #fff;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 600;
}

.button:hover,
.button:focus {
  background: var(--brand-dark);
  color: #fff;
}

/* Footer. */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
}

.site-footer__inner {
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 1.5rem 1.25rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* The unobtrusive version stamp in the footer. */
.site-version {
  font-family: var(--mono);
  opacity: 0.85;
}

/* Respect users who prefer reduced motion (no animations are used, but keep the
   declaration so future additions inherit the courtesy). */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* Narrow screens (mobile): collapse the nav behind the hamburger toggle and split
   the footer onto two lines at its first separator. */
@media (max-width: 38rem) {
  /* Reveal the hamburger summary; the native <details> hides the nav when closed
     and shows it when open (which is what drives the announced aria-expanded). */
  .nav-toggle {
    display: inline-flex;
  }

  .nav-disclosure:not([open]) > .site-nav {
    display: none;
  }

  /* The open menu is a dropdown card below the header, right-aligned and out of
     flow, so opening it neither shifts the hamburger nor reflows the page. */
  .site-nav {
    position: absolute;
    top: 100%;
    right: 1.25rem;
    z-index: 30;
    min-width: 12rem;
    margin-top: 0.25rem;
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: var(--surface);
    box-shadow: 0 6px 20px rgb(26 29 33 / 12%);
  }

  /* Stack the menu items as full-width rows inside the card. */
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
  }

  /* Full-width rows; flex (not block) keeps the Source link's icon + label aligned. */
  .site-nav a {
    display: flex;
  }

  .hero__title {
    font-size: 2rem;
  }

  /* Footer: drop the first separator and stack the copyright above the meta line
     (licence, source, version) when the single line will not fit. */
  .footer-sep {
    display: none;
  }

  .footer-copyright,
  .footer-meta {
    display: block;
  }
}