/* Canonical stylesheet for made-with-wewriteweb sites.
   Loaded by BOTH published pages (BlockRenderer.cs emits the same markup) and
   the editor canvas (BlockView.tsx renders the same classes) — keep in lockstep.
   Theme comes in via --ww-* variables (inline <style> on publish; inline style
   attribute on the canvas wrapper in the editor). */

.ww-site {
  margin: 0;
  background: var(--ww-bg, #ffffff);
  color: var(--ww-text, #1f2430);
  font-family: var(--ww-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  line-height: 1.5;
  /* cqw units below measure against this box (viewport when body, canvas in the editor). */
  container-type: inline-size;
  overflow-x: clip;
}
body.ww-site { min-height: 100vh; }

/* Layout is a 12-column grid at every level: the page itself is the centered
   content column; blocks carry `grid-column: span N` (props.span, default 12),
   so blocks with span < 12 sit side by side. Sections span a full row and
   stretch to the .ww-site edges (full-bleed) via container-relative margins. */
.ww-page,
.ww-inner {
  max-width: var(--ww-max-width, 960px);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  display: grid;
  grid-template-columns: repeat(var(--ww-grid-cols, 12), minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
  align-content: start;
}
.ww-page > *, .ww-inner > * { grid-column: 1 / -1; min-width: 0; }
.ww-page > .ww-section {
  grid-column: 1 / -1;
  margin-left: calc(50% - 50cqw);
  margin-right: calc(50% - 50cqw);
}

.ww-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  flex-wrap: wrap;
}
.ww-nav__brand { font-weight: 700; font-size: 1.1rem; }
.ww-nav__links { display: inline-flex; flex-wrap: wrap; gap: 18px; }
.ww-nav__links a { color: inherit; text-decoration: none; }
.ww-nav__links a:hover { color: var(--ww-primary, #2563eb); }

.ww-columns { display: grid; }
.ww-column { min-width: 0; }

.ww-heading { margin: 0 0 .5em; line-height: 1.2; overflow-wrap: break-word; }
h1.ww-heading { font-size: 2.6rem; }
h2.ww-heading { font-size: 1.9rem; }
h3.ww-heading { font-size: 1.35rem; }

.ww-text p { margin: 0 0 1em; line-height: 1.65; overflow-wrap: break-word; }
.ww-text p:last-child { margin-bottom: 0; }

.ww-image { margin: 0 0 1em; }
.ww-image img { max-width: 100%; height: auto; display: inline-block; }
.ww-image img.ww-image--rounded, .ww-image--rounded { border-radius: 12px; }
.ww-image figcaption { font-size: .85rem; opacity: .65; margin-top: .4em; }

.ww-btnwrap { margin: 0 0 1em; }
.ww-btn {
  display: inline-block;
  padding: .7em 1.6em;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: filter .15s ease;
}
.ww-btn:hover { filter: brightness(1.1); }
.ww-btn--primary { background: var(--ww-primary, #2563eb); color: #fff; }
.ww-btn--outline {
  border: 2px solid var(--ww-primary, #2563eb);
  color: var(--ww-primary, #2563eb);
}

.ww-divider {
  border: 0;
  border-top: 1px solid rgba(128, 128, 128, .35);
  margin: 16px auto;
  width: 100%;
}

.ww-embed { min-width: 0; }

/* Logic runtime (pub-site.js): conditional blocks stay invisible until the
   first evaluation to avoid a flash; ww-hidden removes failed conditions. */
body:not(.ww-ready) [data-ww-cond] { visibility: hidden; }
.ww-hidden { display: none !important; }

.ww-toastmsg {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ww-text, #1f2430);
  color: var(--ww-bg, #fff);
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  z-index: 999;
  font-size: .95rem;
  transition: opacity .35s ease;
}
.ww-toastmsg.is-out { opacity: 0; }

/* Container query (.ww-site is the container): collapses on real phones AND in
   the editor's phone-width preview canvas. The media query below is the
   fallback for browsers without container support. */
@container (max-width: 640px) {
  .ww-columns { grid-template-columns: 1fr !important; }
  /* Every block goes full-width on phones (!important beats the inline span). */
  .ww-page > *:not(.ww-section), .ww-inner > * { grid-column: 1 / -1 !important; }
  h1.ww-heading { font-size: 2rem; }
  h2.ww-heading { font-size: 1.55rem; }
}
@media (max-width: 640px) {
  .ww-columns { grid-template-columns: 1fr !important; }
  .ww-page > *:not(.ww-section), .ww-inner > * { grid-column: 1 / -1 !important; }
  h1.ww-heading { font-size: 2rem; }
  h2.ww-heading { font-size: 1.55rem; }
}