/* GranitCorp — small additions on top of @aain/design-system (Navy & Gold).
   Logical properties only, so this file works unmodified in RTL. */

img {
  height: auto;
}

/* --- Nav: the shared bar is nowrap, and a brand + four nav actions
   (theme toggle, two-link language switch, menu button) is too much for
   one unbroken line at a 390px phone width -- wrap instead of overflowing
   the viewport. */
.aain-nav__inner {
  flex-wrap: wrap;
  row-gap: var(--aain-space-1);
}

/* --- Footer: the shared component ships with no inline padding on
   .aain-footer__inner, so on narrow viewports its content touches the
   viewport edge. Add the same inline padding the nav/container use. */
.aain-footer__inner {
  padding-inline: var(--aain-space-3);
}
.aain-footer__meta nav {
  display: flex;
  gap: var(--aain-space-3);
}
/* Plain inline links measure shorter than their line-height at the glyph
   level (no padding, no box of their own) -- inline-flex gives each one a
   real content box so phone tap targets clear 24px in both dimensions. */
.aain-footer__meta a,
.aain-link,
.aain-link--quiet {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.aain-lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  min-width: 24px;
}

/* --- Honeypot: a real hidden form field, not a visually-hidden one --
   screen-reader-only content (clipped but still "visible" to the
   accessibility tree) is the wrong tool here; this field should disappear
   for every real visitor, sighted or not, while staying in the DOM for
   bots that fill every input without checking computed style. */
.form-honeypot {
  position: absolute;
  visibility: hidden;
}

/* --- Generic vertical rhythm for a block of loose elements (heading,
   paragraphs) that isn't already one of the system's spaced components. */
.stack > * + * {
  margin-top: var(--aain-space-3);
}

/* --- Section rhythm: breathing room between stacked page sections, with
   a hairline between them so a long page still reads as distinct parts. */
.gc-section {
  padding-block: var(--aain-space-5);
}
.gc-section + .gc-section {
  border-block-start: 1px solid var(--aain-border);
}

/* --- Theme toggle: a persistent three-state control (system/light/dark),
   kept outside the .aain-btn family on purpose -- .aain-nav__actions hides
   .aain-btn--ghost/.aain-btn--secondary under 560px, and this control must
   stay reachable at every width. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: var(--aain-space-1) var(--aain-space-2);
  background: transparent;
  border: 1px solid var(--aain-border);
  border-radius: var(--aain-radius-pill);
  color: var(--aain-ink-muted);
  font-size: var(--aain-font-small);
  cursor: pointer;
  white-space: nowrap;
}
.theme-toggle:hover {
  border-color: var(--aain-accent-gold);
  color: var(--aain-ink);
}

/* --- Hero capability-map diagram (home hero, split variant) ------------ */
.aain-hero--split .gc-hero-content {
  max-width: 46ch;
}

.gc-hero-diagram {
  background: var(--aain-surface);
  border-radius: var(--aain-radius-lg);
  padding: var(--aain-space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

.gc-diagram {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--aain-space-1);
  width: 100%;
}

.gc-diagram__line {
  flex: 1 1 auto;
  min-width: 10px;
  height: 2px;
  margin-top: 27px;
  background: var(--aain-border);
}

.gc-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--aain-space-1);
  flex: 0 0 auto;
  padding: var(--aain-space-1);
  border-radius: var(--aain-radius-md);
  text-decoration: none;
  color: var(--aain-ink);
}

.gc-node__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--aain-surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
}

.gc-node__icon svg {
  width: 24px;
  height: 24px;
  color: var(--aain-accent-gold);
}

.gc-node__label {
  font-size: var(--aain-font-small);
  line-height: 1.25;
  text-align: center;
  max-width: 96px;
}

.gc-node:hover .gc-node__icon {
  border-color: var(--aain-accent-gold);
}

@media (max-width: 760px) {
  .gc-hero-diagram {
    min-height: 0;
    padding: var(--aain-space-3);
  }
  .gc-diagram {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .gc-diagram__line {
    width: 2px;
    height: 20px;
    min-width: 0;
    margin-top: 0;
    margin-inline: auto;
  }
  .gc-node__label {
    max-width: none;
  }
}

/* --- Contact: full-width closing band, reused on the home page --------- */
.gc-contact-band {
  background: var(--aain-surface);
  border-radius: var(--aain-radius-lg);
  padding: var(--aain-space-5) var(--aain-space-4);
}
.gc-contact-band__actions {
  margin-top: var(--aain-space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aain-space-3);
}
.gc-contact-band__note {
  color: var(--aain-ink-muted);
}

.gc-cta-row {
  margin-top: var(--aain-space-4);
}

/* --- Prose: the system is component-first and deliberately leaves bare
   tags unstyled beyond resets, but the legal pages render plain markdown
   (headings, paragraphs, lists, emphasis, inline links) with no classes
   to hook -- give that content normal reading rhythm and visible links. */
.gc-prose h1 { font-size: var(--aain-font-h2); margin-bottom: var(--aain-space-3); }
.gc-prose h2 { font-size: var(--aain-font-h3); margin-top: var(--aain-space-4); margin-bottom: var(--aain-space-2); }
.gc-prose p, .gc-prose ul, .gc-prose ol { margin-bottom: var(--aain-space-2); }
.gc-prose ul, .gc-prose ol { padding-inline-start: 1.25em; }
.gc-prose li { margin-bottom: var(--aain-space-1); }
.gc-prose a {
  color: var(--aain-accent-gold);
  text-decoration: underline;
  text-decoration-color: var(--aain-border);
  text-underline-offset: 3px;
}
.gc-prose a:hover { text-decoration-color: currentColor; }

/* --- Work page: proof tiles are cards with a screenshot header -------- */
.gc-work-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.gc-work-card__media {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.gc-work-card__media img {
  border-block-end: 1px solid var(--aain-border);
}
.gc-work-card__body {
  padding: var(--aain-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--aain-space-1);
  flex: 1;
}
.gc-work-card__body p {
  flex: 1;
}

.form-note {
  color: var(--aain-ink-muted);
  margin-bottom: var(--aain-space-3);
}

/* --- Contact form status banner: aain-alert's colour comes from a
   variant class, but the state here is already driven by contact.js
   setting data-state on #form-status -- map the same three states onto
   the same tokens instead of introducing a second set of class names. */
#form-status {
  margin-top: var(--aain-space-3);
}
#form-status[data-state="success"] {
  border-color: var(--aain-success-fill);
  color: var(--aain-success-text);
}
#form-status[data-state="error"] {
  border-color: var(--aain-danger-fill);
  color: var(--aain-danger-text);
}
#form-status[data-state="info"] {
  border-color: var(--aain-info-fill);
}