/* ============================================================
   AnAIForMe — CSS theme foundation
   ============================================================
   Source: SITE_THEME.md (Bard's design direction)
   Built by Mary Anne, for the whole site.
   No new colours. No dark mode. Every class from section 5.
   ============================================================ */

/* ---- 0. Tokens from SITE_THEME.md ---- */

:root {
  /* Colours — every one, from the table in section 2 */
  --colour-page-bg:      #F7F8F5;
  --colour-surface:       #FFFFFF;
  --colour-body-text:     #242827;
  --colour-muted-text:    #58605C;
  --colour-headings:      #101615;
  --colour-accent:        #0F766E;
  --colour-accent-hover:  #0B5F59;
  --colour-secondary-accent: #C2410C;
  --colour-link:          #0B625C;
  --colour-link-hover:    #084C47;
  --colour-border:        #D8DDD7;
  --colour-code-surface:  #17211F;
  --colour-code-text:     #E8F1EC;

  /* Spacing from section 4 */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;

  /* Type from section 3 */
  --font-body:  Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: Sora, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body-size: 18px;
  --body-line-height: 1.6;
  --max-line-length: 68ch;

  /* Layout from section 4 */
  --page-max-width: 1120px;

  /* Touch target: Mary Anne's constraint */
  --touch-target: 44px;
  --touch-target-min: 44px; /* literal, for the selector rule */
}

/* ---- 1. Reset / base ---- */

*, *::before, *::after {
  box-sizing: border-box;
}

/* The hidden attribute has to beat any display an author sets on a component. Without this,
   .button's display:inline-flex outranks the UA's [hidden]{display:none} and a button that
   JavaScript marked hidden stays on screen. */
[hidden] {
  display: none !important;
}

/* Never let a wide image or code block force horizontal overflow on mobile */
img {
  max-width: 100%;
  height: auto;
}

.code-sample {
  max-width: 100%;
}

html {
  font-size: var(--body-size);
  background: var(--colour-page-bg);
  color: var(--colour-body-text);
  line-height: var(--body-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--colour-body-text);
  line-height: var(--body-line-height);
}

/* Headings from section 3 */

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--colour-headings);
  line-height: 1.2;
}

h1 {
  font-size: clamp(2.5rem, 4vw, 4.5rem);
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.35rem;
}

/* Links — section 2 colours */

a {
  color: var(--colour-link);
  text-decoration: underline;
}

a:hover,
a:focus-visible {
  color: var(--colour-link-hover);
}

/* Focus states — visible, not flashy */

:focus-visible {
  outline: 2px solid var(--colour-accent);
  outline-offset: 2px;
}

/* ---- 2. Layout ---- */

.content-band {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-2);
}

.content-narrow {
  max-width: var(--max-line-length);
  margin: 0 auto;
}

/* Same readable measure as .content-narrow, but flush left instead of centred — for a section
   whose text sits above full-width cards and has to share their left edge. */
.content-lead {
  max-width: var(--max-line-length);
  margin: 0 auto 0 0;
}

/* ---- 3. Header / nav ---- */

/* Frozen: the bar stays put and the page body scrolls underneath it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--colour-surface);
  border-bottom: 1px solid var(--colour-border);
  padding: var(--space-2) 0;
}

/* An in-page anchor must not land underneath the frozen bar. */
:target {
  scroll-margin-top: 6rem;
}

.nav-wrap {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.brand-lockup {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  text-decoration: none;
  color: var(--colour-headings);
  flex-shrink: 0;
}

.brand-mark {
  display: inline-block;
  vertical-align: middle;
}

.brand-lockup .brand-label {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
}

.brand-lockup .proprietor {
  font-size: 0.8rem;
  color: var(--colour-muted-text);
}

.nav-links,
.nav-links ul {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  display: inline-flex;
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  padding: var(--space-1) 0;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--colour-accent);
}

.nav-link[aria-current="page"],
.nav-link.active {
  color: var(--colour-accent);
  border-bottom-color: var(--colour-accent);
}

/* The Contact link reads as the call to action through weight and colour — no
   underline, and no rule under it unless it is the page you are on. */
.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  padding: var(--space-1) var(--space-2);
  color: var(--colour-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  color: var(--colour-accent-hover);
}

.nav-cta[aria-current="page"],
.nav-cta.active {
  border-bottom-color: var(--colour-accent);
}

/* ---- 4. Page hero ---- */

.page-hero {
  background: var(--colour-surface);
  border-bottom: 1px solid var(--colour-border);
  padding: var(--space-5) 0;
}

.hero-title {
  margin: 0 0 var(--space-2) 0;
}

.hero-copy {
  max-width: var(--max-line-length);
  margin: 0 0 var(--space-3) 0;
}

.eyebrow {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-1) 0;
}

.hero-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* ---- 5. Body text and lists ---- */

.section-title {
  margin: var(--space-5) 0 var(--space-3) 0;
}

.text-list {
  padding-left: var(--space-3);
}

.text-list li {
  margin-bottom: var(--space-1);
}

/* ---- 5a. Icon bullets ----
   A list whose bullet is a drawn mark instead of a disc. The marks are line art in the accent
   colour: stroke follows currentColor, so nothing here needs a second copy per colour. */

.icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.icon-list li:last-child {
  margin-bottom: 0;
}

.icon-bullet {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  color: var(--colour-accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Sit the mark on the first line of text rather than the top of the box. */
  margin-top: -0.1em;
}

/* The one solid mark: a server's power light reads as lit, not as an empty ring. */
.icon-bullet .icon-dot {
  fill: currentColor;
  stroke: none;
}

/* ---- 6. Buttons ---- */

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-body);
  font-size: 1rem;
  /* justify-content centres the text block; this centres the lines inside it when a long
     label wraps on a narrow screen. */
  text-align: center;
  /* A button is a button. The global link underline has no business inside one. */
  text-decoration: none;
  background: var(--colour-surface);
  color: var(--colour-headings);
  border: 2px solid var(--colour-border);
  border-radius: 4px;
  cursor: pointer;
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  min-height: 44px;
  min-width: 44px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.button:hover,
.button:focus-visible {
  border-color: var(--colour-accent);
  color: var(--colour-accent);
}

.button-primary {
  background: var(--colour-accent);
  color: var(--colour-surface);
  border-color: var(--colour-accent);
}

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--colour-accent-hover);
  border-color: var(--colour-accent-hover);
  color: var(--colour-surface);
}

.button-secondary {
  background: transparent;
  border-color: var(--colour-accent);
  color: var(--colour-accent);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  background: var(--colour-accent);
  color: var(--colour-surface);
}

/* ---- 7. Cards / panels ---- */

.panel {
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  padding: var(--space-3);
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}

.proof-panel {
  border-left: 4px solid var(--colour-accent);
}

/* ---- 7a. Avatars and bylines ----
   One 256px square per proprietor, rounded by CSS rather than baked into the file, so the same
   asset serves every size on the site. */

.avatar {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--colour-border);
  /* A ring in the page colour, then the accent — keeps the portrait off the text. */
  box-shadow: 0 0 0 2px var(--colour-page-bg), 0 0 0 3px var(--colour-accent);
}

.avatar-lg {
  width: 72px;
  height: 72px;
}

.avatar-sm {
  width: 32px;
  height: 32px;
}

/* Who is talking: portrait, then name. Used under a quote and beside a heading. */
.byline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0 0;
  font-size: 0.9rem;
  color: var(--colour-muted-text);
}

/* A heading with the speaker's face beside it. */
.byline-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 var(--space-3) 0;
}

.byline-heading .section-title {
  margin: 0;
}

/* ---- 7b. Proprietor cards ----
   The two portraits, given real space. One column below 640px, two above — never three, because
   there are exactly two proprietors and a third column would leave a hole. */

.proprietor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

@media (min-width: 640px) {
  .proprietor-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}

.proprietor-card {
  margin: 0;
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: 10px;
  /* Clips the portrait's corners to the card's, so the image needs no radius of its own. */
  overflow: hidden;
}

.proprietor-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.proprietor-caption {
  padding: var(--space-3);
  border-top: 1px solid var(--colour-border);
}

.proprietor-name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--colour-headings);
}

.proprietor-role {
  margin: var(--space-1) 0 0 0;
  font-size: 0.95rem;
  color: var(--colour-muted-text);
}

/* A quoted panel: the words carry it, the attribution stays quiet underneath.
   Stack several and they space themselves; the last one does not push the section open. */
.quote-panel {
  margin: 0 0 var(--space-3) 0;
  border-left: 4px solid var(--colour-accent);
}

.quote-panel:last-child {
  margin-bottom: 0;
}

.quote-panel blockquote {
  margin: 0;
}

.quote-panel blockquote p {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--colour-headings);
}

.quote-panel blockquote p + p {
  margin-top: var(--space-2);
}

.ethics-panel {
  border-left: 4px solid var(--colour-secondary-accent);
}

/* ---- 8. Ethics callouts / boundary ---- */

.boundary-callout {
  border-left: 4px solid var(--colour-secondary-accent);
  border-radius: 0 6px 6px 0;
  padding: var(--space-3);
  margin: var(--space-3) 0;
}

.do-not-build-list {
  margin: var(--space-2) 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.do-not-build-list li {
  position: relative;
  padding-left: var(--space-2);
  margin-bottom: var(--space-1);
  color: var(--colour-muted-text);
}

.do-not-build-list li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--colour-secondary-accent);
}

/* "What we do not build" — whose line it is, then the lines themselves. */
.no-build-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.no-build-list > li + li {
  margin-top: var(--space-3);
}

.no-build-group {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--colour-headings);
}

.no-build-list ul {
  margin: var(--space-1) 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.no-build-list ul li {
  position: relative;
  padding-left: var(--space-2);
  margin-bottom: var(--space-1);
  color: var(--colour-muted-text);
}

.no-build-list ul li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--colour-secondary-accent);
}

/* ---- 9. Forms ---- */

.contact-form {
  border: 1px solid var(--colour-border);
  border-radius: 6px;
  padding: var(--space-4);
  max-width: 560px;
}

/* Honeypot: kept out of sight and out of the tab order; real people never fill it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field {
  margin-bottom: var(--space-3);
}

.field-label {
  display: block;
  font-weight: 600;
}

.field-input {
  display: block;
  width: 100%;
  padding: var(--space-1) var(--space-2);
  font-size: 1rem;
  font-family: var(--font-body);
  background: var(--colour-page-bg);
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: var(--touch-target);
}

.field-input:focus {
  border-color: var(--colour-accent);
  box-shadow: 0 0 0 2px var(--colour-accent);
  outline: none;
}

.field-input:focus-visible {
  box-shadow: 0 0 0 2px var(--colour-accent);
  outline: none;
}

.field-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.field-input::placeholder {
  color: var(--colour-muted-text);
  opacity: 1;
}

.field-help {
  font-size: 0.85rem;
  margin-top: var(--space-1);
  color: var(--colour-muted-text);
}

/* What is left in the form box once the message has gone. It is the only thing in there by
   then, so it reads at body size rather than as fine print. */
.form-confirmation {
  margin: 0;
  font-size: 1rem;
  color: var(--colour-headings);
}

/* ---- 10. Machine-reader / code ---- */

.machine-note {
  padding: var(--space-2);
  margin: var(--space-2) 0;
  font-size: 0.85rem;
  color: var(--colour-muted-text);
}

.code-sample {
  background: var(--colour-code-surface);
  color: var(--colour-code-text);
  font-family: "JetBrains Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  padding: var(--space-2);
  overflow-x: auto;
}

/* ---- 11. Footer ---- */

.site-footer {
  border-top: 1px solid var(--colour-border);
  padding: var(--space-4) 0;
  margin-top: var(--space-5);
}

.footer-grid {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.footer-links {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin: 0;
}

/* For machine readers only: in the document and crawlable, never rendered for a
   person, never in the tab order, never announced by a screen reader. */
.machine-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- 12. Responsive: nav wraps ---- */

@media (max-width: 640px) {
  .nav-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  /* Brand row stays a tidy row on its own */
  .brand-lockup {
    justify-content: flex-start;
  }

  /* Nav becomes one full-width, evenly-spaced row instead of ragged wrapping */
  .nav-links {
    width: 100%;
  }

  .nav-links ul {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--space-1);
    overflow-x: auto;
  }

  .nav-link,
  .nav-cta {
    min-width: 0;
    padding-left: var(--space-1);
    padding-right: var(--space-1);
    white-space: nowrap;
    font-size: 0.95rem;
  }

  .footer-grid {
    flex-direction: column;
  }
}

/* ---- 13. Visual placeholder — deliberate, not broken-image icon ---- */

.visual-placeholder {
  display: block;
  background: var(--colour-page-bg);
  border: 1px dashed var(--colour-border);
  border-radius: 4px;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-scene {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--colour-border);
}

.placeholder-caption {
  font-size: 0.875rem;
  color: var(--colour-muted-text);
  margin-top: 0.5rem;
}

.placeholder-note {
  font-size: 0.875rem;
  color: var(--colour-muted-text);
}

/* ── Inline disclosure ("What data does this site collect?") ──────────────────
   Opens on hover for pointer users, and on keyboard focus or tap for everyone
   else, so it is not a hover-only secret. No JavaScript. */
.disclosure-line {
  margin-top: var(--space-3);
}
.disclosure {
  position: relative;
  display: inline-block;
  cursor: help;
}
.disclosure-trigger {
  font-size: 0.9375rem;
  color: var(--colour-muted-text);
  border-bottom: 1px dotted var(--colour-border);
}
.disclosure:hover .disclosure-trigger,
.disclosure:focus .disclosure-trigger,
.disclosure:focus-within .disclosure-trigger {
  color: var(--colour-accent);
  border-bottom-color: var(--colour-accent);
}
.disclosure:focus-visible {
  outline: 2px solid var(--colour-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.disclosure-panel {
  display: none;
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.6rem);
  z-index: 20;
  width: max-content;
  max-width: min(38ch, 90vw);
  padding: var(--space-2);
  background: var(--colour-surface);
  color: var(--colour-body-text);
  border: 1px solid var(--colour-border);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(16, 22, 21, 0.12);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.disclosure:hover .disclosure-panel,
.disclosure:focus .disclosure-panel,
.disclosure:focus-within .disclosure-panel {
  display: block;
}
/* On narrow screens a floating panel gets clipped, so let it push the page. */
@media (max-width: 640px) {
  .disclosure-panel {
    position: static;
    margin-top: var(--space-1);
    max-width: none;
    width: auto;
    box-shadow: none;
  }
}