/* CalWidgets website styles. See docs/superpowers/plans/2026-08-04-calwidgets-website.md */

:root {
  --bg: #0b0b0f;
  --surface: #16161d;
  --border: #26262f;
  --fg: #f2f2f7;
  --muted: #a0a0ab;
  --accent: #4da3ff;
  --on-accent: #0b0b0f;
  --radius: 16px;
  --maxw: 1100px;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --surface: #f5f5f7;
    --border: #d2d2d8;
    --fg: #1c1c1e;
    --muted: #56565c;
    --accent: #0060df;
    --on-accent: #ffffff;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:focus-visible,
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }

/* Skip link: clipped out of the visual flow (never off-canvas, so it cannot
   widen the page) and revealed on keyboard focus, above the sticky header. */
.skip-link {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 100;
  width: auto; height: auto;
  margin: 0; padding: 10px 18px;
  overflow: visible;
  clip: auto;
  clip-path: none;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.section { padding: clamp(56px, 9vw, 112px) 0; }
.section + .section { border-top: 1px solid var(--border); }

h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 20px; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 16px; }
h3 { font-size: 1.15rem; margin: 0 0 8px; }

.muted { color: var(--muted); }
.lede { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--muted); max-width: 62ch; margin: 0 0 28px; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; gap: 16px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--fg); text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.site-nav { margin-left: auto; display: flex; gap: 20px; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--fg); }

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding: 40px 0; color: var(--muted); font-size: 0.95rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.site-footer nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 20px; }

/* Bits */
.badge {
  display: inline-block; padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); font-weight: 600; font-size: 0.95rem;
}

/* As a <p> the badge is a muted "Coming soon" placeholder; as an <a> it is the
   page's primary action and should read like one. */
a.badge {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); text-decoration: none;
  transition: filter .15s ease;
}
a.badge:hover { filter: brightness(1.08); }
a.badge:active { filter: brightness(0.94); }

/* Apple's official badge, used unmodified per the App Store marketing
   guidelines — no recolouring, no added effects, no distortion, at least 40px
   tall on web with clear space around it. So the pill treatment above is
   switched back off here, and only the height is set: `width: auto` keeps the
   SVG's own 119.664:40 ratio exact rather than rounding it to the integer
   width/height attributes, which are there for layout stability. */
a.badge-appstore {
  padding: 0; border: 0; background: none; border-radius: 0;
  line-height: 0;
}
a.badge-appstore:hover,
a.badge-appstore:active { filter: none; }
a.badge-appstore img { height: 44px; width: auto; }
a.badge-appstore:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
.card img { border-radius: 10px; margin-bottom: 16px; }

.grid-3 { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.grid-2 { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; align-items: center; }

@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .site-footer .wrap { flex-direction: column; align-items: flex-start; }
  .site-footer nav { margin-left: 0; }
}

/* "Calendar Widgets Suite" is too long for one line beside the nav on a phone,
   so it wraps to two. At the body line-height those two lines nearly fill the
   60px header; tightening the leading restores breathing room. */
@media (max-width: 560px) {
  .brand { line-height: 1.15; }
}

/* Progressive enhancement: content is visible by default and only animates
   once JS marks the document. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

.hero { padding-top: clamp(40px, 6vw, 72px); }
.hero .grid-2 { grid-template-columns: 1.05fr 0.95fr; }
.hero-shot img { margin: 0 auto; max-width: 340px; border-radius: 28px; border: 1px solid var(--border); }

@media (max-width: 720px) {
  .hero .grid-2 { grid-template-columns: 1fr; }
  .hero-shot img { max-width: 260px; }
}

.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.pill {
  padding: 7px 14px; border-radius: 999px; font-size: 0.9rem;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}

#customize > .wrap > img { border-radius: var(--radius); border: 1px solid var(--border); margin: 0 0 40px; }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.feature-list li { padding-left: 26px; position: relative; color: var(--muted); }
.feature-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}

.faq { display: grid; gap: 12px; max-width: 800px; }
.faq details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 20px;
}
/* `list-style: none` is what actually suppresses the disclosure triangle in
   current browsers; ::-webkit-details-marker only covers older WebKit, and
   without both the native triangle renders alongside our own +/- affordance.
   Flex rather than `float: right` so the sign stays on the first line when a
   long question wraps. */
.faq summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { color: var(--muted); margin: 12px 0 0; }

.prose { max-width: 720px; }
.prose h2 { font-size: 1.35rem; margin: 40px 0 12px; }
.prose p { color: var(--muted); }
.prose p strong { color: var(--fg); }
.prose ul { color: var(--muted); padding-left: 20px; }
.prose li { margin-bottom: 8px; }