/* Hearth Keeper's website: what the site adds to the design system's hearth-keeper.css.
   Everything here uses the tokens in tokens.css. Change hearth-keeper.css and tokens.css only by copying them from
   Design/ again (see README.md). */

/* MARK: Page */

html { background: var(--surface); }
body.hk-site { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
body.hk-site > main { flex: 1; }

.hk-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Apple's badge comes in black for light pages and white for dark ones; show the one for the theme, as with the icon. */
.hk-app-store-badge .hk-icon-light, .hk-app-store-badge .hk-icon-dark { height: 100%; width: auto; }

/* Four feature cards sit in one row when they fit, and two by two otherwise, never three and one. */
.hk-features--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container hk-site (max-width: 1100px) {
  .hk-features--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container hk-site (max-width: 767px) {
  .hk-features--four { grid-template-columns: minmax(0, 1fr); }
}

/* MARK: Theme switcher */

/* Auto, Light or Dark, in the footer. A radio group styled as a segmented control; js/theme.js shows and wires it. */
.hk-theme { display: flex; align-items: center; flex-wrap: wrap; gap: var(--margin-medium) var(--margin-large); }
.hk-theme[hidden] { display: none; }
.hk-theme__switcher {
  display: inline-flex; gap: 2px; margin: 0; padding: 2px; border: 0; min-inline-size: 0;
  background: var(--surface-sunken); border-radius: var(--radius-capsule);
}
.hk-theme__switcher label { position: relative; display: block; }
.hk-theme__switcher input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hk-theme__switcher span {
  display: block; min-width: 64px; padding: 6px 14px; text-align: center;
  border-radius: var(--radius-capsule); color: var(--ink-secondary); font: 400 13px/20px var(--font-sans);
  transition: background-color 120ms ease, color 120ms ease;
}
.hk-theme__switcher input:hover + span { color: var(--ink); }
.hk-theme__switcher input:checked + span { background: var(--surface-raised); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--hairline); }
.hk-theme__switcher input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }

/* MARK: Reading pages (privacy, support, not found) */

.hk-page { padding-block: 96px var(--web-section-spacing); }
.hk-page .hk-container > * { max-width: var(--web-text-width); margin-inline: auto; }
.hk-page__header { display: grid; gap: var(--margin-large); margin-bottom: 56px; }

.hk-prose { font: 400 17px/26px var(--font-sans); }
.hk-prose > * + * { margin-top: var(--margin-large); }
.hk-prose h2 { font: 700 22px/28px var(--font-sans); margin-top: 48px; }
.hk-prose h3 { font: 600 17px/22px var(--font-sans); margin-top: var(--margin-extraLarge); }
.hk-prose h2 + *, .hk-prose h3 + * { margin-top: var(--margin-medium); }
.hk-prose ul { padding-left: 1.25em; }
.hk-prose li + li { margin-top: var(--margin-medium); }
.hk-prose a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.hk-prose a:hover { text-decoration-thickness: 2px; }
.hk-prose strong { font-weight: 600; }
.hk-prose .hk-secondary { color: var(--ink-secondary); }

/* The support page's ways to get help: the design system's feature cards, with a link at the bottom. */
.hk-page .hk-features { max-width: none; margin-bottom: 64px; }
.hk-feature .hk-link { margin-top: var(--margin-medium); }

@container hk-site (max-width: 767px) {
  .hk-page { padding-block: 48px var(--web-section-spacing-compact); }
  .hk-page__header { margin-bottom: var(--margin-extraLarge); }
  .hk-prose h2 { margin-top: 40px; }
  .hk-page .hk-features { margin-bottom: 48px; }
}