/*
  TweetLife Design System (Base Web–inspired)
  File: base.css
  Purpose:
  - Baseline reset
  - RTL-first typography
  - Global focus/interaction ergonomics
  - Safe-area + mobile app-like scaffolding
*/

/* ===============
   Reset
=============== */
*, *::before, *::after{ box-sizing: border-box; }
html, body{ height:100%; }
html{ scroll-behavior:smooth; text-size-adjust:100%; -webkit-text-size-adjust:100%; }
body{ margin:0; overflow-x:hidden; }
img, svg, video{ max-width:100%; height:auto; }
button, input, select, textarea{ font: inherit; color: inherit; }

/* Remove iOS tap flash (app-like) */
*{ -webkit-tap-highlight-color: transparent; }
a, button{ touch-action: manipulation; }

/* ===============
   RTL base
=============== */
html[dir="rtl"]{ direction: rtl; }

/* ===============
   Typography + surfaces
=============== */
body.tl-app{
  font-family: var(--tl-font-sans);
  font-size: var(--tl-text-md);
  line-height: var(--tl-leading-normal);
  color: var(--tl-ink);
  background: var(--tl-color-bg);
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

/* Links */
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

/* Selection */
::selection{ background: rgba(37,188,207,.22); }

/* ===============
   Focus ring (accessible)
=============== */
:focus{ outline: none; }
:focus-visible{
  outline: none;
  box-shadow: var(--tl-focus-ring);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Prevent iOS Safari zoom on focus (inputs must be >=16px) */
@media (max-width: 640px){
  input, textarea, select{ font-size: 16px; }
}

/* ===============
   Page wrapper padding (incremental, safe)
   Keeps existing wrapper names used across the project.
=============== */
.tl-wrap,
.wrap,
.ct-wrap,
.acc-wrap,
.ad-wrap,
.tl-container{
  padding: var(--tl-page-y) var(--tl-page-x) !important;
}

/* Consistent spacing between buttons inside action rows */
.hero-actions,
.cta,
.ct-actions,
.m-actions,
.m-actions2,
.map-tools,
.meta-row{
  gap: var(--tl-gap-inline) !important;
}

/* Consistent spacing between blocks/cards inside common grids */
.cards,
.stats,
.two,
.ct-grid,
.how,
.specs,
.img-grid,
.m-stats{
  gap: var(--tl-gap-block) !important;
}

/* CMS content helpers */
.prose-rtl h1,
.prose-rtl h2,
.prose-rtl h3{
  font-weight: 800;
  line-height: var(--tl-leading-snug);
  margin-top: 1.25rem;
  margin-bottom: .75rem;
}
.prose-rtl p{ margin: .75rem 0; line-height: 2; }
.prose-rtl ul{ margin: .75rem 0; padding-right: 1.25rem; list-style: disc; }
.prose-rtl li{ margin: .35rem 0; }
.prose-rtl a{ text-decoration: underline; }

/* ===============
   Mobile bottom navigation spacing (app-like)
   NOTE: --tl-bottom-nav-h is set in JS (layout).
=============== */
@media (max-width: 1023px), ((hover: none) and (pointer: coarse) and (max-width: 1366px)){
  footer{ display:none !important; }

  main{
    padding-bottom: calc(var(--tl-bottom-nav-h, 74px) + 24px) !important;
  }

  html{
    scroll-padding-bottom: calc(var(--tl-bottom-nav-h, 74px) + 24px);
  }

  body{ padding-bottom: 0 !important; }
}