/**
 * recuva.pro — SaaS layout design system
 *
 * Spacing scale (strict, px):
 *   xs   8px   --space-xs
 *   sm  12px   --space-sm
 *   md  16px   --space-md
 *   lg  24px   --space-lg
 *   xl  40px   --space-xl
 *   section rhythm: adjacent section interiors ≈ 40–56px (padding top + bottom)
 *
 * Container: max-width 1140px, horizontal inset --space-md (16px) via section padding.
 * Card grids: .layout-grid-cards → auto-fit minmax(240px, 1fr), gap 16px.
 */

:root {
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;

  --site-max: 71.25rem;
  --section-px: var(--space-md);
  --section-py-sm: 1rem;
  --section-py: 1.5rem;

  --content-stack-gap: var(--space-md);
  --heading-after-label: var(--space-xs);
  --lede-after-heading: 0.625rem;

  --card-pad: var(--space-md);
  --card-gap: var(--space-md);
  --radius-sm: 8px;
  --radius-md: 10px;
  --icon-box: 2.25rem;

  --font-h1: 1.875rem;
  --lh-h1: 1.22;
  --font-h2: 1.625rem;
  --lh-h2: 1.28;
  --font-h3: 1.0625rem;
  --lh-h3: 1.35;
  --font-body: 0.9375rem;
  --lh-body: 1.55;

  --btn-min-h: 44px;
  --btn-px: 1.25rem;
  --btn-py: 0.625rem;
  --btn-fs: 0.875rem;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.max-w-content {
  width: 100%;
  max-width: var(--site-max);
  margin-left: auto;
  margin-right: auto;
}

.section-pad {
  padding: var(--section-py-sm) var(--section-px);
}

@media (min-width: 768px) {
  .section-pad {
    padding: var(--section-py) var(--section-px);
  }
}

#home.hero-flow-surface {
  padding: var(--section-py-sm) var(--section-px);
}

@media (min-width: 768px) {
  #home.hero-flow-surface {
    padding: var(--section-py) var(--section-px);
  }
}

main .section-flow {
  padding: var(--section-py-sm) var(--section-px) !important;
}

@media (min-width: 768px) {
  main .section-flow {
    padding: var(--section-py) var(--section-px) !important;
  }
}

main {
  overflow-x: clip;
}

main img,
main video,
main picture {
  max-width: 100%;
  height: auto;
}

/* ——— Section column: one vertical rhythm ——— */
main > section.section-pad > .max-w-content,
main > section.section-flow > .max-w-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--content-stack-gap);
  text-align: left;
}

main > section.section-pad > .max-w-content.text-center,
main > section.section-flow > .max-w-content.text-center {
  text-align: center;
}

main > section.section-pad > .max-w-content > *,
main > section.section-flow > .max-w-content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: 100%;
}

main > section.section-pad > .max-w-content > .text-center,
main > section.section-flow > .max-w-content > .text-center {
  text-align: center;
}

/* Label → title → lede (tight) */
main > section.section-pad > .max-w-content p.section-label + :is(h2, h3),
main > section.section-pad > .max-w-content header p.section-label + h2,
main > section.section-flow > .max-w-content p.section-label + :is(h2, h3),
main > section.section-flow > .max-w-content header p.section-label + h2 {
  margin-top: var(--heading-after-label) !important;
}

main > section.section-pad .max-w-prose p.section-label + :is(h2, h3),
main > section.section-flow .max-w-prose p.section-label + :is(h2, h3) {
  margin-top: var(--heading-after-label) !important;
}

main > section.section-pad > .max-w-content :is(h2, h3).text-type-h2 + p,
main > section.section-flow > .max-w-content :is(h2, h3).text-type-h2 + p {
  margin-top: var(--lede-after-heading) !important;
}

/* Typography (main) — aligns with Tailwind theme tokens */
main .font-display.text-type-h1,
main h1.text-type-h1,
main .text-type-h1.font-display {
  font-size: var(--font-h1);
  line-height: var(--lh-h1);
}

main .font-display.text-type-h2,
main h2.text-type-h2,
main h2.font-display.text-type-h2 {
  font-size: var(--font-h2);
  line-height: var(--lh-h2);
}

main .text-type-h3,
main h3.text-type-h3,
main h3.font-display.text-type-h3,
main h4.text-type-h3 {
  font-size: var(--font-h3);
  line-height: var(--lh-h3);
}

main .text-type-base.leading-relaxed,
main p.text-type-base.leading-relaxed,
main .text-body-lg {
  font-size: var(--font-body);
  line-height: var(--lh-body);
}

main section a.inline-flex.h-11 {
  min-height: var(--btn-min-h);
  height: auto !important;
  padding: var(--btn-py) var(--btn-px);
  font-size: var(--btn-fs);
  line-height: 1.25;
}

/* ——— Reusable grids ——— */
.layout-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--card-gap);
  align-items: stretch;
}

@media (min-width: 640px) {
  .layout-grid-cards > li.layout-grid-cards--span-row-sm,
  .layout-grid-cards > .layout-grid-cards--span-row-sm {
    grid-column: 1 / -1;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .layout-grid-cards > .layout-grid-cards--full-row-sm-only {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) {
  .layout-grid-cards > li.layout-grid-cards--span-row-md,
  .layout-grid-cards > .layout-grid-cards--span-row-md {
    grid-column: 1 / -1;
  }
}

.layout-grid-split {
  display: grid;
  gap: var(--card-gap);
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .layout-grid-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout-grid-split.layout-grid-split--align-center-lg {
    align-items: center;
  }
}

.layout-grid-asymmetric {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .layout-grid-asymmetric {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
  }
}

.layout-grid-cta {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
  .layout-grid-cta {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.layout-grid-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--card-gap);
}

/* Normalized radius on standard rounded cards (skip .rounded-none hubs) */
main .layout-grid-cards > .rounded-2xl.border,
main .layout-grid-cards > li > .rounded-2xl,
main .layout-grid-split > .rounded-2xl.border {
  border-radius: var(--radius-md);
}

/* Equal-height flex cards in grids */
main > section.section-pad .max-w-content :is(.grid, .layout-grid-cards) > :is(div, article, a, li).flex.flex-col,
main > section.section-flow .max-w-content :is(.grid, .layout-grid-cards) > :is(div, article, a, li).flex.flex-col {
  height: 100%;
  min-height: 0;
}

main > section.section-pad .max-w-content :is(.grid, .layout-grid-cards) > li > a.flex,
main > section.section-flow .max-w-content :is(.grid, .layout-grid-cards) > li > a.flex {
  height: 100%;
  min-height: 0;
}

main > section.section-pad .max-w-content .layout-grid-cards > li.flex,
main > section.section-flow .max-w-content .layout-grid-cards > li.flex {
  min-height: 0;
  align-self: stretch;
}

main > section.section-pad .max-w-content :is(.grid, .layout-grid-cards) > article,
main > section.section-flow .max-w-content :is(.grid, .layout-grid-cards) > article {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Legacy Tailwind .grid: same gap + stretch */
main > section.section-pad .max-w-content .grid:not(.layout-grid-cards),
main > section.section-flow .max-w-content .grid:not(.layout-grid-cards) {
  gap: var(--card-gap);
  align-items: stretch;
}

/* Icon wells in card grids */
main .layout-grid-cards .flex.h-10.w-10,
main .layout-grid-cards .flex.h-11.w-11 {
  width: var(--icon-box);
  height: var(--icon-box);
}

[data-reveal] {
  transform: translateY(var(--space-xs));
}

/* Footer: match main column rhythm */
footer .max-w-content.flex {
  gap: var(--space-md) !important;
}

footer .layout-grid-footer,
footer .grid.grid-cols-2.gap-5 {
  gap: var(--space-md) !important;
}

/* Prose intros: strip redundant top margin when stack is controlled by flex gap */
main .max-w-prose > h2.mt-4:first-child,
main .max-w-prose > h3.mt-4:first-child {
  margin-top: 0 !important;
}

main .max-w-prose > p.section-label + h2,
main .max-w-prose > p.section-label + h3 {
  margin-top: var(--heading-after-label) !important;
}

main .max-w-prose > :is(h2, h3).text-type-h2 + p.mt-4,
main .max-w-prose > :is(h2, h3).font-display.text-type-h2 + p {
  margin-top: var(--lede-after-heading) !important;
}

/* ——— Navbar language dropdown (matches .nav-wave-wrap / .nav-wave tone) ——— */
.lang-switcher {
  position: relative;
}

.lang-switcher > summary.lang-switcher-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
  border-radius: 9999px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(241, 245, 249, 0.92);
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  min-height: 2.5rem;
}

.lang-switcher > summary.lang-switcher-summary::-webkit-details-marker {
  display: none;
}

.lang-switcher > summary.lang-switcher-summary::marker {
  content: "";
}

.lang-switcher[open] > summary.lang-switcher-summary {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

@media (min-width: 1024px) {
  .lang-switcher > summary.lang-switcher-summary:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.92);
  }
}

.lang-switcher-chevron {
  font-size: 0.65rem;
  opacity: 0.75;
  transition: transform 0.2s ease;
}

.lang-switcher[open] .lang-switcher-chevron {
  transform: rotate(180deg);
}

.lang-switcher-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 80;
  min-width: 11rem;
  padding: 0.35rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.1);
}

.lang-switcher-link {
  display: block;
  padding: 0.5rem 0.65rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: color 0.15s ease, background 0.15s ease;
}

.lang-switcher-link:hover {
  color: #0f172a;
  background: rgba(241, 245, 249, 0.95);
}

.lang-switcher-link.is-current {
  color: #1d4ed8;
  font-weight: 600;
  background: rgba(239, 246, 255, 0.95);
}