/* ============================================================
   site.css - the few components the canonical Sattva stylesheet (css/styles.css, byte-locked to
   builders/sattva-group/theme/) does not have. Linked AFTER styles.css by every page.
   Written whole by themes/sattva.py -> css_patch() on every gen.py run: edit that module, not this file.
   Tokens only: every colour below is one of the canonical custom properties; no literal colour is introduced.
   Names no project and no place.
   ============================================================ */

/* The related-projects block (added later by the fleet tool) reads --font-display; the canonical sheet defines
   --font-headline and --font-body only. */
:root { --font-display: var(--font-headline); }

/* Skip link: first tab stop, visible on focus only. */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 200;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-lg);
  background: var(--brand-primary);
  color: var(--light-secondary);
  font-weight: 700;
  font-size: 0.85rem;
}
.skip-link:focus { top: 0.75rem; }
main:focus { outline: none; }
html { scroll-padding-top: 6rem; }

/* Footer link hover: the canonical sheet turns it --brand-primary, which is 1.71:1 on the footer's near-black
   surface. Stay light on hover and focus; the underline already brightens. */
.footer__links a:hover,
.footer__links a:focus-visible { color: var(--light-secondary); }
.footer__links span {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--light-secondary) 82%, transparent);
}
.footer__disclaimer a,
.footer__brand-desc a {
  color: var(--light-secondary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.footer__disclaimer { max-width: 110ch; margin-bottom: 1.5rem; }

/* The visible "Updated on" line under a page title. */
.page-updated { font-size: 0.78rem; color: var(--dark-secondary); margin-bottom: 1rem; }

/* Inline links outside .rich-content inherit the surrounding colour (a { color: inherit }): give them a
   non-colour cue so they read as links (WCAG 1.4.1). */
.hero__subtitle a,
.page-hero__desc a,
.section-header__desc a,
.cta-section__desc a,
.faq-item a,
.data-table a,
.status-card a,
.not-found__desc a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.faq-item a, .data-table a, .page-hero__desc a { color: var(--brand-primary); }
.faq-item a:hover, .data-table a:hover, .page-hero__desc a:hover { opacity: 0.8; }

/* Long reading blocks keep a readable measure on wide screens; split columns are narrower already. */
.section > .container > .rich-content { max-width: 62rem; }
.section-header--center + .rich-content { margin-inline: auto; }
.section-lede { max-width: 52ch; margin: 0 auto; text-align: center; color: var(--dark-secondary); }
.rich-content ol { margin: 0.75rem 0 1rem 1.25rem; list-style: decimal; }
.rich-content ol li { margin-bottom: 0.35rem; color: var(--dark-secondary); }
.rich-content .data-table { margin: 1.25rem 0 1.75rem; border: 1px solid color-mix(in srgb, var(--dark-primary) 8%, transparent); }
.rich-content .data-table:first-child { margin-top: 0; }
.rich-content td, .rich-content th { vertical-align: top; }
/* Heading cells and the key column never split inside a word; long registration numbers still wrap. */
.data-table th { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.data-table td:first-child { min-width: 7rem; overflow-wrap: normal; word-break: normal; }
/* The canonical cell rule (overflow-wrap: anywhere) lets the table shrink a column below its longest word and split
   it mid-word (Thattamanga-la). A floor on the column width keeps ordinary words whole; only the long registration
   numbers, which have no other break point, still wrap. */
.data-table td { min-width: 6.5rem; }
.data-table[tabindex] td:nth-child(2) { min-width: 9rem; }
.rich-content > :last-child { margin-bottom: 0; }

/* Tables of two or three columns wrap inside a phone; wider ones scroll inside their own wrapper. */
@media (max-width: 640px) {
  .data-table[data-cols="2"] table, .data-table[data-cols="3"] table { min-width: 0; }
  .data-table th, .data-table td { padding: 0.65rem 0.6rem; }
  .data-table[data-cols="2"] td, .data-table[data-cols="3"] td { overflow-wrap: break-word; word-break: normal; }
  /* four or more columns scroll sideways inside their wrapper rather than splitting words in a sliver */
  .data-table:not([data-cols="2"]):not([data-cols="3"]) table { min-width: 40rem; }
}
.data-table:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
/* A table that scrolls sideways shows it: a soft edge shadow on the side that still has content (the classic
   local/scroll background pairing; the cover colour is the table surface). */
.data-table[tabindex] {
  background:
    linear-gradient(to right, var(--light-secondary) 30%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--light-secondary) 30%, transparent) right center / 2.5rem 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--dark-primary) 22%, transparent), transparent) left center / 0.9rem 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--dark-primary) 22%, transparent), transparent) right center / 0.9rem 100% no-repeat scroll,
    var(--light-secondary);
}

/* The status line from the docs, as a plain card (never chrome, never below the fold). */
.status-card {
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--brand-tertiary);
  background: var(--light-secondary);
  color: var(--dark-primary);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--dark-primary) 18%, transparent);
  max-width: 62ch;
  line-height: 1.55;
  font-size: 0.95rem;
}
.status-card p { margin: 0; color: var(--dark-primary); }
.page-hero .status-card { box-shadow: 0 1px 2px color-mix(in srgb, var(--dark-primary) 10%, transparent); border: 1px solid var(--dark-tertiary); border-left: 4px solid var(--brand-tertiary); }
.hero__content .status-card { margin-top: -0.5rem; }

/* A gallery impression used as page art, with its own caption beneath it. */
.art-figure, .location-map-wrap { margin: 0; }
.art-figure { border-radius: var(--radius-lg); overflow: hidden; background: var(--light-secondary); border: 1px solid var(--dark-tertiary); }
.art-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.art-figure__caption { padding: 0.75rem 1rem; font-size: 0.82rem; color: var(--dark-secondary); line-height: 1.5; }
/* The map is shown whole at its own aspect, never cropped. */
.location-map-wrap { border: 1px solid var(--dark-tertiary); background: var(--light-secondary); }
.location-map-wrap img { aspect-ratio: auto; object-fit: contain; }
.location-map-wrap .art-figure__caption { background: var(--light-secondary); }

/* Gallery: the caption sits under each image (hover-only captions are invisible on a phone). */
.gallery-masonry--captioned .gallery-item { cursor: default; background: var(--light-secondary); border: 1px solid var(--dark-tertiary); }
.gallery-masonry--captioned .gallery-item:hover img { transform: none; }
.gallery-masonry--captioned .gallery-item__caption {
  position: static;
  opacity: 1;
  background: var(--light-secondary);
  padding: 0.85rem 1rem;
}
.gallery-masonry--captioned .gallery-item__caption p {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  color: var(--dark-secondary);
  line-height: 1.5;
}
@media (prefers-reduced-motion: no-preference) {
  .gallery-masonry--captioned .gallery-item img { transition: transform 0.6s ease; }
  .gallery-masonry--captioned .gallery-item:hover img { transform: scale(1.03); }
}

/* Hero: the contact form lives in the glass panel. */
.hero__form-title {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  color: var(--light-secondary);
  margin-bottom: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
}
.hero__title { text-wrap: balance; }
.page-hero__title { font-size: clamp(2rem, 4.5vw, 3.75rem); }
.rich-content + .gallery-masonry { margin-top: 2.25rem; }
.hero__subtitle { max-width: 52ch; }
.hero__content { min-width: 0; }
.hero__actions .btn { text-align: center; }
@media (max-width: 640px) { .hero__actions .btn { flex: 1 1 100%; } }

/* Form errors and the status banner read on the light page and on the dark glass panel. */
.field-error { display: block; font-size: 0.78rem; line-height: 1.4; color: var(--state-error); }
.field-error[hidden] { display: none; }
.hero__form-panel .field-error { color: var(--brand-tertiary); }
#form-message:not([hidden]) { display: block; }
.hero__form-panel #form-message { background: var(--light-secondary); }
.form-card__title {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  color: var(--dark-primary);
  margin-bottom: 1.25rem;
  line-height: 1.2;
  font-weight: 700;
}
/* Placeholders count as text: keep them at 4.5:1 or better on both surfaces. */
.form-control::placeholder { color: color-mix(in srgb, var(--dark-secondary) 85%, var(--light-secondary)); opacity: 1; }
.hero__form-panel .form-control::placeholder { color: color-mix(in srgb, var(--light-secondary) 72%, transparent); opacity: 1; }
.breadcrumb__sep { color: var(--dark-secondary); }
/* A form control's boundary must reach 3:1 against the surface it sits on (WCAG 1.4.11). */
.form-control { border-bottom-color: color-mix(in srgb, var(--dark-secondary) 80%, var(--light-secondary)); }
.hero__form-panel .form-control { border-bottom-color: color-mix(in srgb, var(--light-secondary) 55%, transparent); }
.btn:disabled { opacity: 0.7; cursor: progress; transform: none; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; }
.hero :focus-visible, .cta-section :focus-visible, .footer :focus-visible, .navbar :focus-visible { outline-color: var(--light-secondary); }

/* FAQ answers that carry lists. */
.faq-item > ul, .faq-item > ol { margin: 0.75rem 0 0 1.25rem; color: var(--dark-secondary); line-height: 1.65; }
.faq-item > ul { list-style: disc; }
.faq-item > ol { list-style: decimal; }
.faq-item > summary { text-wrap: pretty; }

/* A split's two columns stay top-aligned and the lone figure keeps its own height. */
.split > div { min-width: 0; }

/* 404 */
.not-found__links { max-width: 36rem; margin-top: 2.5rem; text-align: left; }
.not-found__links ul { margin-left: 1.25rem; }
.not-found__links a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
.not-found__desc { max-width: 52ch; }
.not-found__title { font-size: clamp(2rem, 4.5vw, 3.5rem); }

/* The generator's FAQ-closing button row (the canonical sheet has no rule for these two hook classes). */
.section-actions { margin-top: 2rem; }
.section-actions.mt-6 { margin-top: 2rem; }

/* Homepage identity strip: five cells share a tablet row, so the place name must not split mid-word (the canonical
   value rule allows a break anywhere) and the figure scales with the cell instead of the viewport alone. */
.highlights__value { overflow-wrap: break-word; word-break: normal; hyphens: manual; }
@media (min-width: 641px) and (max-width: 1024px) {
  .highlights__value { font-size: clamp(1rem, 2.5vw, 1.6rem); }
}

/* Form fields keep a visible focus ring: the canonical rule removes the outline and recolours a 1px bottom border. */
.form-control:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.hero__form-panel .form-control:focus-visible { outline-color: var(--light-secondary); }

/* The headline sizes: a long keyword heading must wrap, not overflow, on a 320px screen. */
.page-hero__title, .section-header__title, .cta-section__title { text-wrap: balance; }