/* sayisalci — site stylesheet (the thin layer over the two generated files).
 *
 * WHY THIS FILE EXISTS. `tokens.css` and `components.css` are generated from
 * `designs/sayisalci/sayisalci-web-modern.html` and are never hand-edited.
 * Everything they cover comes from the design; anything the TEMPLATES need that
 * the design's own markup did not use has to live somewhere that survives
 * regeneration, and that is here.
 *
 * ⚠️ NO RAW HEX, AND NO COLOURS AT ALL. Every value below is either a token
 * (`var(--…)`) or a spacing/size that is already a token. The acceptance rule is
 * "no raw hex outside the token files"; a hex literal here would also silently
 * escape the dark theme, which is the practical reason the rule exists.
 *
 * WHAT IS IN HERE, AND WHY IT IS NOT A DESIGN CHOICE:
 *
 *   .skip-link      The designs are prototypes with no keyboard bypass. A
 *                   sticky header with five nav links sits in front of every
 *                   page, so the bypass is an accessibility requirement — WCAG
 *                   2.4.1 — not decoration. Hidden by transform rather than
 *                   `left: -9999px`, so it cannot be reached by a stray
 *                   horizontal scroll.
 *   section[id]     `scroll-margin-top` so an in-page anchor does not land with
 *                   the heading hidden under the sticky .topnav. The design
 *                   ships no anchors that cross a sticky bar; the site does.
 *   .mlink          The design underlines footer links inline
 *                   (`style="text-decoration: underline"`). A template must not
 *                   carry a style attribute for that, and the rule is used in
 *                   more than one place now, so it is a class.
 *   .composer-note  The mono/muted footnote under the composer's button row.
 *                   The design sizes it inline; the templates reuse it.
 *   .wa-unresolved  The client-side guard message `wa-composer.js` appends when
 *                   the number is still the shipped placeholder. Styling it here
 *                   keeps the script free of inline style.
 *   .visually-hidden  For the "opens in a new tab" hint on the composer button.
 *                   The design has no such hint; a target="_blank" link without
 *                   one is a WCAG 3.2.5 finding.
 *
 * `.wa-composer` and `.wa-send` are JS HOOKS with no visual rules of their own —
 * see the block that names them further down, and do not "fix" the audit hit by
 * adding rules here: the design already styles those elements through `.composer`
 * and `.btn .btn-primary`, which the same markup carries.
 *
 * ⚠️ `core/blocks.py` AND `templates/core/blocks/*.html` ARE SIMILARLY INERT BUT
 * NOT REMOVABLE. Nothing references them since the page models are plain fields
 * rather than a StreamField — but `core/migrations/0001_initial.py` names
 * `core.blocks.RichTextBlockWithAnchor` in its serialised `block_lookup`, and a
 * migration is history. Deleting the module breaks every fresh `migrate` with
 * `ModuleNotFoundError: No module named 'core.blocks'`. They stay until a
 * migration removes the field that references them.
 *
 * If any of these gains a rule in a future generated components.css, the
 * duplicate here should be deleted rather than kept as an override.
 */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--accent-on);
  font-size: 14px;
  border-radius: 0 0 var(--radius) 0;
  transform: translateY(-120%);
  transition: transform 0.12s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* The sticky .topnav is ~62px; the anchor must clear it plus a little air. */
section[id] {
  scroll-margin-top: 84px;
}

/* The design's inline `style="text-decoration: underline"` on footer links. */
.mlink {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mlink:hover {
  color: var(--fg);
}

.composer-note {
  font-size: 13px;
  color: var(--muted);
}

/* Appended by wa-composer.js when the CMS number is still the placeholder. */
.wa-unresolved {
  margin: var(--gap-md) 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* ── JS HOOKS, DELIBERATELY UNSTYLED ────────────────────────────────────────
 *
 * `.wa-composer` and `.wa-send` are SELECTOR HOOKS for `assets/js/wa-composer.js`
 * and carry no visual rules — the design styles their contents through
 * `.composer`, `.btn` and `.btn-primary`, which the markup also carries. A
 * static audit that compares "classes used in templates" against "classes
 * defined in CSS" will flag them, so they are named here rather than left to
 * look like missing styles:
 *
 *   .wa-composer   the container the script reads `data-wa-phone` and
 *                  `data-wa-template` off, and queries for its inputs.
 *                  The design's own class on the same element is `.composer`,
 *                  which IS styled.
 *   .wa-send       the anchor whose `href` the script rewrites. The design's
 *                  own classes on it are `.btn .btn-primary`, which ARE styled.
 *
 * Both are kept as classes rather than ids because there are two composer
 * instances on the site (the home page's `#basla` and /contact/) and the script
 * must find both — `querySelectorAll(".wa-composer")`.
 * `.visually-hidden` IS styled below and is used by the skip link's target
 * labelling pattern.
 */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}