/*
 * Shared stylesheet for the static public pages (dobrodosli.html, proba.html
 * and any page src/seo/generateShells.ts generates). Every token below is copied from
 * the app's theme, not invented:
 *
 *   --ground      surface.background            frontend/src/theme/colors.ts
 *   --ink         brand.ink                     "
 *   --moon        brand.moonWhite               "
 *   --gold        secondary[400] / brand.starGold
 *   --text        text.primary                  "
 *   --text-dim    text.secondary                "
 *   --border      surface.border                "
 *   --brand       primary[500]                  "
 *   --brand-dark  primary[700]                  " (Button.tsx primary gradient start)
 *   --brand-light primary[400]                  " (Button.tsx outline text / gradient hover)
 *   --card        surface.card                  "
 *   --text-tertiary  text.tertiary              "
 *   --max         WEB_CONTENT_MAX_WIDTH         frontend/src/hooks/webLayout.ts
 *
 * Button geometry (padding, minHeight, radius) is copied from
 * frontend/src/components/common/Button.tsx's `lg` size and `primary` /
 * `outline` variants. Type sizes are copied from frontend/src/theme/typography.ts.
 */

:root {
  --ground: #0A0A1A;
  --ink: #241247;
  --moon: #F3EFFF;
  --gold: #FBBF24;
  --text: #FFFFFF;
  --text-dim: #A0A0C0;
  --border: #2A2A4A;
  --brand: #7B3FD9;
  --brand-dark: #512399;
  --brand-light: #9963E4;
  --card: #141428;
  --text-tertiary: #8E8EB0;
  --max: 720px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--ground);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Fixed so it sits behind the whole scrolling page, costs no request. */
.stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 6% 12%, #ffffff77, transparent),
    radial-gradient(1px 1px at 14% 64%, #ffffff55, transparent),
    radial-gradient(2px 2px at 20% 30%, #ffffff88, transparent),
    radial-gradient(1px 1px at 27% 82%, #ffffff44, transparent),
    radial-gradient(1px 1px at 33% 18%, #ffffff66, transparent),
    radial-gradient(1px 1px at 39% 91%, #ffffff55, transparent),
    radial-gradient(2px 2px at 45% 70%, #ffffff55, transparent),
    radial-gradient(1px 1px at 52% 8%, #ffffff77, transparent),
    radial-gradient(1px 1px at 58% 46%, #ffffff44, transparent),
    radial-gradient(1px 1px at 64% 88%, #ffffff66, transparent),
    radial-gradient(1px 1px at 70% 12%, #ffffff66, transparent),
    radial-gradient(2px 2px at 76% 60%, #ffffff88, transparent),
    radial-gradient(1px 1px at 82% 24%, #ffffff55, transparent),
    radial-gradient(1px 1px at 85% 55%, #ffffff77, transparent),
    radial-gradient(1px 1px at 88% 95%, #ffffff44, transparent),
    radial-gradient(1px 1px at 91% 38%, #ffffff66, transparent),
    radial-gradient(1px 1px at 12% 80%, #ffffff44, transparent),
    radial-gradient(2px 2px at 96% 70%, #ffffff55, transparent),
    radial-gradient(1px 1px at 3% 45%, #ffffff66, transparent),
    radial-gradient(1px 1px at 97% 10%, #ffffff77, transparent),
    /* CosmicBackdrop.tsx COSMIC_GRADIENT — surface.background, #1a0a2e,
       #0d1b3e, top to bottom, evenly spaced. */
    linear-gradient(180deg, var(--ground) 0%, #1a0a2e 50%, #0d1b3e 100%);
}

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

h1, h2, h3 {
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* displayLarge — frontend/src/theme/typography.ts */
h1 {
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: -0.5px;
  text-align: center;
}

/* headlineSmall — section titles (welcomeTiersTitle, welcomeFaqTitle) */
h2 {
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  text-align: center;
  /* marginBottom spacing.xl (20px) — WelcomeScreen.tsx sectionTitle. */
  margin-bottom: 20px;
}

p {
  margin: 0;
  color: var(--text-dim);
}

/* bodyLarge — tagline, feature text */
.body-lg {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.15px;
}

/* bodySmall — footnotes, trial note */
.body-sm {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
}

a {
  color: var(--brand-light);
}

/* Button base — geometry shared by every variant.
   lg size: paddingVertical 16 / paddingHorizontal 24 / minHeight 56
   (spacing.lg / spacing.xxl, Button.tsx sizeStyles.lg).
   borderRadius.md = 12px. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 16px 24px;
  border-radius: 12px;
  border: none;
  font-family: inherit;
  /* titleMedium — Button.tsx textSizeStyles.lg */
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0.1px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  color: #FFFFFF;
}

.btn--outline {
  background: transparent;
  border: 1.5px solid var(--brand);
  color: var(--brand-light);
}

/* ghost — Button.tsx getVariantStyles 'ghost': transparent, no border,
   primary[400] text. Used only by the soft-exit repeat below the FAQ. */
.btn--ghost {
  background: transparent;
  border: none;
  color: var(--brand-light);
}

/* The corner sign-in control: same outline colours, the tighter sm box
   (spacing.sm / spacing.lg, minHeight 44 — Button.tsx loginCornerTighter)
   with the lg type size kept. */
.btn--corner {
  min-height: 44px;
  padding: 8px 16px;
}

.btn--full {
  width: 100%;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 16px 20px;
  /* Centred, matching WelcomeScreen.tsx tiersValueCell. Only the value
     columns: the label column is pulled back to the left below. */
  text-align: center;
  /* bodySmall */
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.4px;
}

th:first-child, td:first-child {
  text-align: left;
}

/* Column headers only (Besplatno/Premium) — labelMedium. Row headers
   (tbody th, the label column below) are NOT this: they carry the same
   bodySmall/text weight as the value cells beside them, matching
   WelcomeScreen.tsx's tiersLabelText — <th scope="row"> exists here only
   to give the label column a rowheader role for screen readers, not to
   look like a column header. */
thead th {
  /* labelMedium */
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-dim);
}

td,
tbody th {
  color: var(--text);
  font-weight: 400;
  border-top: 1px solid var(--border);
}

.premium-col {
  color: var(--gold);
}

/* --- dobrodosli.html / proba.html page furniture --- */

/* marginTop -spacing.lg (-16px) — WelcomeScreen.tsx:365 loginCorner: pulls
   the control up into the column's own top padding so it reads as chrome,
   not content. */
.login-corner {
  display: flex;
  justify-content: flex-end;
  margin-top: -16px;
  margin-bottom: 8px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* logoCircle — WelcomeScreen.tsx: 88x88, radius 44, primary[500] at 20%
   alpha fill, 2px primary[500] border. */
.mascot-circle {
  width: 88px;
  height: 88px;
  border-radius: 44px;
  background: rgba(123, 63, 217, 0.2);
  border: 2px solid var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.mascot-circle svg {
  width: 72px;
  height: 72px;
}

.tagline {
  color: var(--text-dim);
  text-align: center;
  margin-top: 8px;
}

/* marginTop spacing.xl (20px) / marginBottom spacing.lg (16px) —
   WelcomeScreen.tsx:395 features. */
.features {
  list-style: none;
  margin: 20px 0 16px;
  padding: 0;
}

/* marginBottom spacing.md (12px) only — WelcomeScreen.tsx:404 featureItem
   carries no padding, just the row gap. */
.features li {
  display: flex;
  align-items: center;
  color: var(--text);
  margin-bottom: 12px;
}

/* featureIcon: a 32px column with the glyph centred in it, marginRight
   spacing.md (12px), colour secondary[400]. The glyphs are Ionicons outline
   paths, stroke-width 32 in the 512 viewBox as Ionicons draws them. */
.feature-icon {
  flex: none;
  width: 32px;
  height: 24px;
  margin-right: 12px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 32;
}

/* sunny's disc is ~31% of its glyph box where the other glyphs fill ~80%,
   so at equal size it reads much smaller — compensate optically, the same
   size={30} WelcomeScreen.tsx passes. */
.feature-icon--lg {
  height: 30px;
}

.features li:last-child {
  margin-bottom: 0;
}

/* --- CTA pair — WelcomeScreen.tsx buttonContainer/buttonRow/trialText. --- */

.cta-section {
  /* marginTop: 0 — the features block's own marginBottom is the whole gap
     above (WelcomeScreen.tsx buttonContainer comment). */
  margin-top: 0;
}

/* The /primer link under the feature list — a text link, deliberately not a
   button, so the two real CTAs below keep their weight. Same bottom margin
   as the trial note it precedes. */
.sample-link {
  text-align: center;
  margin-bottom: 24px;
}

.trial-note {
  color: var(--text-tertiary);
  text-align: center;
  /* marginBottom spacing.xxl (24px) — WelcomeScreen.tsx trialText. */
  margin-bottom: 24px;
}

/* buttonRow: flexDirection row, gap spacing.md (12px), alignItems stretch.
   Equal-width flex items (flex-basis 0) so both links carry the same width;
   the media query below switches to a stacked column on narrow screens,
   where align-items: stretch (the flex default) fills the row's own width. */
.cta-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.cta-row a {
  flex: 1 1 0;
}

/* --- Tier table — WelcomeScreen.tsx tiersSection/tiersCard/tiersRow. --- */

.tiers-section {
  /* marginTop spacing.massive (48px) — the below-the-fold break. */
  margin-top: 48px;
}

/* Scrolls independently of the page at narrow widths: a six-row
   three-column table must not push the page sideways. Nested
   inside .card, whose own overflow: hidden only clips content that exceeds
   ITS box — it does not stop this element's own internal scrollbar. */
.table-scroll {
  overflow-x: auto;
}

.tiers-footnote {
  color: var(--text-tertiary);
  text-align: center;
  /* marginTop spacing.lg (16px) — WelcomeScreen.tsx tiersFootnote. */
  margin-top: 16px;
}

/* The charge line and the credits line are one block of fine print, so the
   second sits spacing.xs (4px) under the first rather than a full 16px away.
   A sibling selector because the charge line is conditional (it appears only
   where prices open in dinars): when it is absent the credits line is the
   first .tiers-footnote and keeps the full gap under the card.
   WelcomeScreen.tsx does the same with tiersFootnoteTight. */
.tiers-footnote + .tiers-footnote {
  margin-top: 4px;
}

/* The CTA repeats right after the section that answers the price question —
   WelcomeScreen.tsx repeatCta, marginTop spacing.xxl (24px). Same label as
   the top CTA: a differently-worded button would read as a different
   action. Shared by proba.html for the same job: its single primary CTA
   and its register paragraph both carry this same rhythm below the hero. */
.repeat-cta {
  margin-top: 24px;
}

/* --- FAQ — WelcomeScreen.tsx faqSection/faqItem/faqQuestion/faqAnswer.
   Native <details>/<summary>: needs no script, and the browser's own
   disclosure marker (styled via ::marker below) replaces the RN chevron. --- */

.faq-section {
  /* marginTop spacing.massive (48px), matching .tiers-section. */
  margin-top: 48px;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item:last-child {
  border-bottom: none;
}

/* titleMedium — the row itself is the tap target, 44px minimum height. */
.faq-item summary {
  min-height: 44px;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0.1px;
  color: var(--text);
  cursor: pointer;
}

.faq-item summary::marker {
  color: var(--text-tertiary);
}

/* bodyMedium — faqAnswer; paddingBottom spacing.lg (16px). p's color and
   margin: 0 already come from the base `p` rule above. */
.faq-item p {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  padding-bottom: 16px;
}

/* The soft exit after the FAQ — WelcomeScreen.tsx softExit, marginTop
   spacing.sm (8px), ghost variant so the page ends quietly with both doors
   still open (register above, taste here). Same taste CTA as the top of
   the page. */
.soft-exit {
  margin-top: 8px;
}

/* --- Footer: /privatnost, /uslovi, support address. No RN screen owns this
   furniture — it exists only on the static page — so its spacing is picked
   from the same scale rather than copied from a component. --- */

.site-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  text-align: center;
}

.site-footer a {
  color: var(--text-dim);
  text-decoration: none;
}

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

@media (max-width: 480px) {
  .cta-row {
    flex-direction: column;
  }

  /* Each column's minimum is its longest single word plus 40px of cell
     padding — 'Kompatibilnost', 'Besplatno', 'Neograničeno'. That totals
     344px against the 326px a 390px phone leaves inside .wrap, so the table
     overshoots by 18px and buys a sideways scroll for nothing. Halving the
     horizontal padding frees 60px across the three columns and it fits from
     about 330px up. .table-scroll stays: below that the words alone still
     will not fit, and a table pushing the page sideways is the worse
     failure. Vertical padding is untouched, so row rhythm is unchanged. */
  th, td {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* --- Generated legal documents (privatnost.html, uslovi.html) ---
   Scoped to <main class="legal-doc">, set by src/seo/shellHtml.ts, so the
   hand-written landing pages (dobrodosli.html, proba.html) are untouched —
   their own section-wrapper classes (.features, .tiers-section, etc.) carry
   their margins already, and the base h1/h2/p rules above stay at
   margin: 0 for them.

   Values start from LegalDocument.tsx's StyleSheet (the same document
   rendered in the app) and are every one a step on spacing.ts's scale:
     effective  marginBottom spacing.md  (12px)
     intro      marginBottom spacing.lg  (16px)
     heading    marginTop    spacing.lg  (16px), marginBottom spacing.sm (8px)
     body       lineHeight 22, no margin of its own (one <Text> per section)

   Two web-only facts the RN screen never had to handle:
   - Adjacent margins collapse in normal flow, so a paragraph's margin-bottom
     and the next heading's margin-top resolve to the larger value, not their
     sum — unlike RN, which stacks marginBottom + marginTop. Heading margins
     below are sized up a step from the app's raw numbers to still read as a
     clear break once collapsed against the paragraph above.
   - Each sub-paragraph is now its own <p> (shellContent.ts splits a
     section's body on its \n\n), so consecutive paragraphs need a
     margin-bottom of their own; the app's single <Text> per section never
     needed one. */

.legal-doc h1 {
  /* marginBottom spacing.lg (16px) — the app has no on-page h1 to copy from
     (the title lives in the nav header instead), so this borrows the
     heading's own marginBottom for the same job: separating a title from
     the text that follows it. */
  margin-bottom: 16px;
}

.legal-doc h2 {
  /* marginTop spacing.xxxl (32px) — one step up from the app's spacing.lg
     (16px): margin collapse would otherwise resolve this gap down to
     whatever the preceding paragraph's own margin-bottom is. Nothing
     overrides the base rule's centring or its margin-bottom: a section
     title reads the same on a legal document as on the landing page, and
     the space above stays larger than the space below, so the heading
     belongs to the text under it. */
  margin-top: 32px;
}

.legal-doc p {
  /* marginBottom spacing.md (12px) — the app's effective-date rhythm,
     reused here as the shared paragraph gap: it is what separates the
     effective-date line from the intro, and now also every consecutive
     sub-paragraph within one section from the next. */
  margin-bottom: 12px;
}

.legal-doc p:last-child {
  margin-bottom: 0;
}

/* --- proba.html-only furniture: the pitch page has no feature list or
   trial note above its CTA, so the gaps below are stated directly rather
   than borrowed from a preceding block's own margin, unlike .cta-section
   above. --- */

/* marginTop spacing.xxl (24px) — same rhythm as .repeat-cta below it. */
.taste-preview {
  margin-top: 24px;
}

/* marginBottom spacing.md (12px) — same row gap as .features li. */
.taste-preview p {
  margin-bottom: 12px;
}

.taste-preview p:last-child {
  margin-bottom: 0;
}

/* /primer (src/seo/demoPage.ts): the samples reuse the FAQ's <details>
   styling; only chapter headings and paragraph rhythm are new. */
.demo-page h1 { margin-bottom: 16px; }
/* The chart detail's opening, in order: Big Three cards, the feature card,
   the wheel. Card geometry copies .card; the feature gradient is the app's
   primary 800 -> 600 (StandoutFeatureCard). */
.demo-big3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
.demo-big3-card { padding: 16px 8px; text-align: center; }
.demo-big3-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.demo-big3-glyph { font-size: 28px; line-height: 40px; }
.demo-big3-sign { font-size: 16px; font-weight: 600; color: var(--text); }
.demo-big3-desc { color: var(--text-dim); margin-top: 4px; }
.demo-feature { padding: 20px; margin: 0 0 20px; background: linear-gradient(135deg, #3D1877, #6530BB); border-color: transparent; }
.demo-feature-badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #FCD34D; padding: 4px 8px; border-radius: 999px; background: rgba(252, 211, 77, 0.16); border: 1px solid rgba(252, 211, 77, 0.55); margin-bottom: 8px; }
.demo-feature-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.demo-feature-glyphs { font-size: 18px; color: var(--gold); margin-bottom: 8px; }
.demo-page .demo-feature p { color: var(--text); margin: 0; }
.demo-wheel { display: flex; justify-content: center; margin: 24px 0 8px; }
.demo-wheel svg { max-width: 100%; height: auto; }
.demo-page h2 { margin-top: 32px; }
.demo-page p { margin: 0 0 12px; color: var(--text-dim); }
.demo-page h3 { margin: 24px 0 8px; color: var(--gold); }