/* public/pages.css
   Shared chrome for the utility pages: pay, intake, admin, privacy, tokushoho.
   styles.css owns the homepage and the design tokens on :root. This file
   only adds the header/footer/card/button pieces those tokens do not
   already cover, and reuses the same colors rather than inventing new ones.
   Load order: styles.css, then this file, then any page's own stylesheet
   or inline overrides. */

:root {
  /* intake.css still speaks the old token names from before the homepage
     rewrite. Rather than rewrite intake.css (owned by another change),
     alias those names onto the current palette so it keeps working. */
  --color-bg: var(--kinari);
  --color-bg-alt: var(--kinari-deep);
  --color-surface: var(--paper);
  --color-text: var(--sumi);
  --color-text-soft: var(--sumi-soft);
  --color-border: var(--line);
  --color-accent: var(--gold);
  --color-accent-ink: var(--seal);
  --color-accent-soft: #f3e3e0;
  --color-success: #2f7a4d;
  --color-error: #a3342a;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 10px 26px rgba(26, 26, 26, 0.08);
}

/* Header: an opaque version of the homepage brand bar.
   The approved homepage lockup is designed for a dark field. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #1a1a1a;
  border-bottom: 1px solid rgba(246, 241, 233, 0.14);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  padding: 10px var(--gutter);
}

.brand {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: var(--sumi);
  text-decoration: none;
}


.brand-lockup {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.brand-lockup-img {
  display: block;
  width: clamp(126px, 34vw, 142px);
  height: auto;
  max-width: none;
  aspect-ratio: 244 / 112;
  object-fit: contain;
  object-position: left center;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

.header-cta {
  color: rgba(246, 241, 233, 0.78);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.header-cta:hover { color: var(--kinari); }

.lang-toggle {
  min-height: 40px;
  padding: 7px 14px;
  border: 1px solid rgba(246, 241, 233, 0.30);
  border-radius: 999px;
  background: transparent;
  color: var(--kinari);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  cursor: pointer;
}

/* Skip link: styles.css has .skip for the dark hero header; these pages
   sit on plain paper, so it needs its own light-background treatment. */

.skip-link {
  position: fixed;
  left: -9999px;
  top: 12px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--sumi);
  color: var(--kinari);
  text-decoration: none;
}

.skip-link:focus { left: 12px; }

/* Button variants. .btn already gives the pill shape, the arrow and the
   hover lift; these just supply the fill for the old primary/ghost names. */

.btn-primary {
  background: var(--seal);
  color: #fff;
  box-shadow: 0 10px 28px rgba(68, 21, 21, 0.18);
}

.btn-ghost {
  background: transparent;
  color: var(--sumi);
  box-shadow: inset 0 0 0 1px var(--line);
}

.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--sumi-soft); }

/* Utility buttons (admin's copy/cancel/sign-out row) are actions, not
   calls to action, so they lose the arrow .btn adds by default. */

.btn.small::after { content: none; }

/* Page hero: a compact title band for legal pages, not the homepage's
   full-bleed photo. Renamed from "hero" in privacy.html and tokushoho.html
   because the current .hero is specifically the photographic homepage one. */

.page-hero {
  padding: clamp(40px, 9vw, 72px) 0 clamp(28px, 5vw, 44px);
  background: var(--kinari-deep);
  border-bottom: 1px solid var(--line);
}

.hero-subtitle {
  max-width: var(--measure);
  margin: 0.9em 0 0;
  color: var(--sumi-soft);
}

.hero-subtitle a { text-decoration: underline; text-underline-offset: 0.2em; }

/* Section subtitle: the lead paragraph under an h2. */

.section-subtitle {
  max-width: var(--measure);
  margin: 0.7em 0 0;
  color: var(--sumi-soft);
}

/* Card grid: privacy and tokushoho lay their clauses out as small cards. */

.card-grid {
  display: grid;
  gap: 14px;
  margin-top: clamp(28px, 5vw, 44px);
}

.soft-card {
  padding: 20px 20px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.soft-card h3 {
  margin-bottom: 0.5em;
  font-size: 1.02rem;
}

.soft-card p {
  color: var(--sumi-soft);
  font-size: 0.94rem;
}

.soft-card p:last-child { margin-bottom: 0; }

/* card: admin defines its own order/page/inquiry cards inline; this is
   only the fallback so a bare .card is never unstyled elsewhere. */

.card {
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

/* Footer: same dark band as the homepage footer, simplified markup. */

.site-footer {
  padding: clamp(40px, 7vw, 64px) 0 32px;
  background: var(--sumi);
  color: var(--kinari);
}

.site-footer .brand {
  color: var(--kinari);
  font-size: 1.1rem;
}


.site-footer .footer-brand-lockup {
  display: inline-flex;
  margin-bottom: 16px;
}

.site-footer .brand-lockup-img {
  width: 132px;
}

.site-footer p {
  margin: 0 0 10px;
  font-size: 0.88rem;
}

.site-footer a {
  color: rgba(246, 241, 233, 0.78);
  text-decoration: none;
}

.site-footer a:hover { color: var(--kinari); }

.site-footer .footer-rights {
  margin-top: 18px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

@media (min-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}