/* PlanRoyal site kit: the platform stylesheet of every custom website. Layers: reset, kit (this file), theme (tokens of the site), site (its own
   stylesheet), block (styles of single blocks), state (editor). Only custom properties of the theme and of the block style (internal/sitestyle) are read. */
@layer reset, kit, theme, site, block, state;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin: 0; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
  ul[role="list"], ol[role="list"], nav ul { margin: 0; padding: 0; list-style: none; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  }
}

@layer kit {
  :root { --tw-gap: var(--space-4, 1rem); --tw-min-col: 16rem; --tw-cols: 3; }
  body { background: var(--c-bg, #fff); color: var(--c-text, #171717); font-family: var(--font-body, system-ui, sans-serif); font-size: var(--text-base, 1rem); }
  h1, h2, h3, h4 { font-family: var(--font-heading, inherit); line-height: 1.15; text-wrap: balance; }
  h1 { font-size: var(--text-4xl, 2.5rem); } h2 { font-size: var(--text-3xl, 2rem); } h3 { font-size: var(--text-xl, 1.4rem); }
  :focus-visible { outline: 2px solid var(--c-primary, #1d4ed8); outline-offset: 3px; }

  /* layout primitives: flexbox and grid, the block style (layout, direction, gap, align, justify, columns, min-col) sets their custom properties */
  .tw-container { width: min(100% - 2 * var(--space-4, 1rem), var(--container, 72rem)); margin-inline: auto; }
  .tw-section { padding-block: var(--space-8, 4rem); }
  .tw-stack { display: flex; flex-direction: column; gap: var(--tw-gap); }
  .tw-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--tw-gap); align-items: center; }
  .tw-cluster { display: flex; flex-wrap: wrap; gap: var(--tw-gap); align-items: center; justify-content: flex-start; }
  .tw-split { display: flex; flex-wrap: wrap; gap: var(--tw-gap); align-items: center; justify-content: space-between; }
  .tw-grid { display: grid; gap: var(--tw-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--tw-min-col)), 1fr)); }
  .tw-grid[data-cols] { grid-template-columns: repeat(var(--tw-cols), minmax(0, 1fr)); }
  .tw-grow { flex: 1 1 0; min-width: 0; }
  .tw-fixed { flex: 0 0 auto; }
  .tw-cover { object-fit: cover; width: 100%; height: 100%; }
  .tw-frame { overflow: hidden; border-radius: var(--radius-md, .5rem); background: var(--c-surface, #f5f5f4); }
  .tw-container-query { container-type: inline-size; }
  @container (max-width: 40rem) { .tw-split { flex-direction: column; align-items: stretch; } }

  /* elements */
  .tw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2, .5rem); min-height: 2.75rem; padding: .5rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius-pill, 999px); font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
  .tw-btn[data-variant="primary"], .tw-btn:not([data-variant]) { background: var(--c-primary, #1d4ed8); color: var(--c-on-primary, #fff); }
  .tw-btn[data-variant="secondary"] { border-color: var(--c-border, #e5e5e5); background: transparent; }
  .tw-btn[data-variant="ghost"] { background: transparent; }
  .tw-btn:hover { filter: brightness(1.08); }
  .tw-btn[data-size="sm"] { min-height: 2.25rem; padding-inline: 1rem; font-size: var(--text-sm, .875rem); }
  .tw-btn[data-size="lg"] { min-height: 3.25rem; padding-inline: 1.75rem; font-size: var(--text-lg, 1.2rem); }
  .tw-card { background: var(--c-surface, #f5f5f4); border: 1px solid var(--c-border, #e5e5e5); border-radius: var(--radius-lg, 1rem); padding: var(--space-5, 1.5rem); }
  .tw-field { display: grid; gap: var(--space-1, .25rem); }
  .tw-field > input, .tw-field > select, .tw-field > textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--c-border, #e5e5e5); border-radius: var(--radius-md, .5rem); background: var(--c-bg, #fff); }
  .tw-eyebrow { font-size: var(--text-sm, .875rem); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted, #5f5f5f); }
  .tw-muted { color: var(--c-muted, #5f5f5f); }
  .tw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@layer kit {
  [data-tw-block]:not([data-tw-styled]):not(.tw-edit-block) { display: contents; }
  [data-tw-device="desktop"] { display: none; }
  [data-tw-device="mobile"] { display: contents; }
  @media (min-width: 641px) { [data-tw-device="desktop"] { display: contents; } [data-tw-device="mobile"] { display: none; } }
}

@layer state {
  [data-tw-edit] [data-tw-block] { outline-offset: -2px; }
}
