/*
  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. The label is compact and muted so
   it does not compete with the brand or nav (and is visually hidden on mobile).
   It is LAST in the DOM, so on desktop the natural source order (brand -> nav ->
   switcher) already matches the visual order — no `order` needed — and the keyboard
   focus order matches too. `margin-left: auto` absorbs the free space before it,
   pinning the switcher to the right of the logo's line at every width; the tablet and
   mobile breakpoints add an `order` to re-pin it AHEAD of the nav (so the nav wraps
   below and the hamburger sits to its right). */
.language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  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.

   Desktop needs no flex `order`: the natural DOM order (brand -> nav -> switcher)
   already sits the nav between the brand and the right-pinned switcher. The tablet and
   mobile breakpoints give it `order: 3` so it drops below the logo, then collapses
   behind the hamburger, while the switcher stays on the logo's line. */

/* 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;
}

/* Captioned figure (e.g. the lead phishing example): image plus its caption. */
.figure {
  margin: 1.5rem 0;
}

.figure img {
  margin: 0;
}

.figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-muted);
}

.figure-disclaimer {
  margin-top: -0.75rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}

/* Click-to-zoom: the build wraps every screenshot in this anchor. It hints the zoom
   affordance and wraps the image tightly without disturbing the framed layout. */
a.lightbox {
  display: inline-block;
  line-height: 0;
  cursor: zoom-in;
}

.figure a.lightbox {
  display: block;
}

/* The reusable screenshot popup: a top-layer modal <dialog> with a dark backdrop, the
   image contained within the viewport, and a styled close control. */
.lightbox-dialog {
  max-width: 92vw;
  max-height: 92vh;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.lightbox-dialog::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.lightbox-dialog__img {
  display: block;
  max-width: 92vw;
  max-height: 92vh;
  margin: 0;
  object-fit: contain;
}

.lightbox-dialog__close {
  position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
}

.lightbox-dialog__close:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Honour reduced-motion: only animate the popup where motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .lightbox-dialog[open] {
    animation: lightbox-fade 0.15s ease-out;
  }

  @keyframes lightbox-fade {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}

/* 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;
  }
}

/* Tablet / tight desktop: once the brand, nav and language switcher no longer fit on
   one row (the longest-translated nav, Polish, runs out of room around 1020px), drop
   the nav onto its own full-width row below the logo while the language switcher stays
   pinned to the right of the logo's line. The nav is still shown in full here; the
   hamburger only appears at the mobile breakpoint below. */
@media (max-width: 63.75rem) {
  /* Re-order so the switcher (2) precedes the nav (3) in flex flow: the switcher then
     anchors the top row on the right and the nav, forced full-width, wraps beneath. */
  .language-switcher {
    order: 2;
  }

  .nav-disclosure {
    order: 3;
    /* Force the nav onto its own row below the brand + switcher line. */
    flex-basis: 100%;
  }
}

/* Narrow screens (mobile): collapse the nav behind the hamburger toggle and split
   the footer onto two lines at its first separator. */
@media (max-width: 41rem) {
  /* Keep the header on one row on mobile: the switcher and hamburger never wrap and
     stay pinned to the right (switcher to the left of the hamburger), so the hamburger
     is always top-right; the brand takes the remaining space and its wordmark
     ellipsises only on the narrowest phones rather than spilling onto a second row. */
  .site-header__inner {
    flex-wrap: nowrap;
    padding-left: 1rem;
    padding-right: 1rem;
    column-gap: 0.6rem;
  }

  .brand {
    font-size: 1.1rem;
    min-width: 0;
  }

  .brand__wordmark {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The switcher sits immediately left of the hamburger again (no full-width nav row);
     keep both from shrinking so the hamburger stays full-size, and let the brand take
     the remaining space instead. */
  .language-switcher {
    flex: none;
  }

  .nav-disclosure {
    flex: none;
    flex-basis: auto;
  }

  /* 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;
  }

  /* The header is tight on phones, so drop the visible "Language" word (still
     announced to screen readers via the associated label); the dropdown itself
     shows the current language's own name, so the control stays self-explanatory. */
  .language-switcher__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .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;
  }
}