/* ==========================================================================
   global.css - base typography, layout primitives and utilities.
   Component styles live in components.css; tokens in variables.css.

   Index
    1 Font + body            4 Layout: container, section, grid
    2 Typography + links     5 Composition: stack, cluster, spacing
    3 Forms + tables base    6 Utilities: on-dark, skip-link, visually-hidden
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT + BODY
   Noto Sans Georgian comes from Google Fonts. The <link> tags live in each
   page's <head> (preconnect + stylesheet with display=swap) rather than an
   @import here, because @import would add a serial, render-blocking hop.
   The family name is set once in variables.css (--font-sans) with a
   metric-close Georgian fallback stack for the swap period.
   -------------------------------------------------------------------------- */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
}

::selection {
  background-color: var(--color-primary);
  color: var(--color-on-dark);
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY + LINKS
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  color: var(--color-primary-dark);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-3xl);
}

h2 {
  font-size: var(--fs-xl);
}

h3 {
  font-size: var(--fs-lg);
}

h4 {
  font-size: var(--fs-md);
}

p,
li {
  max-width: var(--measure);
}

/* Lists inside flex/grid components set their own widths */
[role="list"] > li {
  max-width: none;
}

ul:not([role="list"]),
ol:not([role="list"]) {
  padding-left: 1.4em;
}

li + li {
  margin-top: var(--space-1);
}

[role="list"] > li + li {
  margin-top: 0;
}

strong,
b {
  font-weight: var(--fw-semibold);
}

small {
  font-size: var(--fs-sm);
}

/* Links: underlined in running text, components override as needed.
   Components that need a different hover colour set it explicitly so it
   outranks this rule. */
a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration-thickness: 2px;
}

hr {
  height: 1px;
  background-color: var(--color-border);
  border: 0;
}

blockquote {
  padding-left: var(--space-4);
  border-left: 4px solid var(--color-accent);
  color: var(--color-text-muted);
}

code,
kbd {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
}

time {
  white-space: nowrap;
}

.lead {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   3. FORMS + TABLES BASE
   Components add the detailed styling (.field, .data-table).
   -------------------------------------------------------------------------- */
label {
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
}

input[type="file"] {
  cursor: pointer;
}

table {
  width: 100%;
}

th {
  text-align: left;
}

caption {
  text-align: left;
}

details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

/* --------------------------------------------------------------------------
   4. LAYOUT: CONTAINER, SECTION, GRID
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container-w) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow-w) + 2 * var(--gutter));
}

/* Vertical rhythm between page blocks. Alternate surfaces with the two
   modifiers; no two adjacent sections should share a background. */
.section {
  padding-block: var(--space-section);
}

.section--surface {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section--surface + .section--surface {
  border-top: 0;
}

.section--tint {
  background-color: var(--color-primary-tint);
}

/* Thin band for a single notice or banner between two full sections */
.section--compact {
  padding-block: var(--space-5);
}

.section__header {
  margin-bottom: var(--space-6);
}

.section__header > * + * {
  margin-top: var(--space-3);
}

/* Responsive card grid: as many 18rem columns as fit, never a horizontal scroll */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

/* --------------------------------------------------------------------------
   5. COMPOSITION: STACK, CLUSTER, SPACING
   -------------------------------------------------------------------------- */
.stack > * + * {
  margin-top: var(--space-4);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }

.text-center {
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. UTILITIES
   -------------------------------------------------------------------------- */

/* Navy surfaces: light text, white focus ring, lighter link colours.
   Markup: add .on-dark to .hero, .site-footer, .cta-box */
.on-dark {
  color: var(--color-on-dark-muted);
  --color-focus: #FFFFFF;
}

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark strong {
  color: var(--color-on-dark);
}

.on-dark a:not(.btn) {
  color: var(--color-on-dark);
}

.on-dark a:not(.btn):hover {
  color: var(--color-on-dark);
}

/* White cards placed on a navy surface (the hero quote form) restore the
   light-theme tokens for everything inside them. */
.on-dark .lead-form,
.on-dark .lead-form h2,
.on-dark .lead-form h3 {
  color: var(--color-text);
}

.on-dark .lead-form h2 {
  color: var(--color-primary-dark);
}

.on-dark .lead-form a {
  color: var(--color-primary);
}

.on-dark .lead-form a:hover {
  color: var(--color-primary-dark);
}

/* Keyboard users jump straight to <main>; visible only while focused */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: calc(var(--z-sticky) + 1);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-primary-dark);
  color: var(--color-on-dark);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-radius: var(--radius-md);
  transform: translateY(-200%);
}

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

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

/* Print: drop chrome, keep content and link targets */
@media print {
  .disclaimer-bar,
  .site-header,
  .sticky-cta,
  .skip-link,
  .cta-box,
  .site-footer__top nav {
    display: none !important;
  }

  body {
    background: #FFFFFF;
    color: #000000;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}