/* Base utilities and components layered over Tailwind */
/* Typography tweaks for Persian RTL */
html, body { scroll-behavior: smooth; }
.nav-link { color: rgb(71 85 105); padding: 0.25rem 0.375rem; border-radius: 0.375rem; }
.nav-link:hover { color: rgb(0 0 139); background-color: rgb(241 245 249); }
.nav-link.active { color: rgb(0 0 139); font-weight: 700; }
.mobile-link { display:block; padding: 0.75rem 1rem; color: rgb(71 85 105); }
.mobile-link:hover { background: rgb(241 245 249); color: rgb(23 37 84); }

/* Buttons */
.btn-primary { display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1rem; background:#00008b; color:#fff; border-radius:.625rem; box-shadow:0 4px 14px rgba(0,0,139,.15); transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow:0 8px 22px rgba(0,0,139,.22); background:#00007a; }
.btn-outline { display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1rem; border:1px solid rgba(0,0,139,.4); color:#00008b; border-radius:.625rem; transition:background-color .15s ease, color .15s ease; }
.btn-outline:hover { background:#00008b; color:#fff; }

/* Cards */
.card { border:1px solid rgb(226 232 240); border-radius: .75rem; padding:1rem; transition: transform .2s ease, box-shadow .2s ease; background:white; }
.card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 16px 30px rgba(2,6,23,.1); }
.card-title { font-weight: 800; color:#00008b; margin-bottom:.375rem; }
.card-text { color: rgb(71 85 105); }

/* Appear animations (initial simple) */
.appear { opacity:0; transform: translateY(12px); animation: rise .6s ease forwards; }
.delay-50 { animation-delay: .05s; }
.delay-100 { animation-delay: .1s; }
@keyframes rise { to { opacity:1; transform: translateY(0); } }

/* Modern reveal utilities */
.reveal { opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .6s ease, transform .6s ease; will-change: transform, opacity; }
.reveal.reveal-up { transform: translateY(18px) scale(.98); }
.reveal.reveal-in { transform: translateY(0) scale(.98); }
.reveal.reveal-zoom { transform: scale(.96); }
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* Fancy link underline */
.link-underline { position: relative; }
.link-underline::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2px; background: #00008b; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.link-underline:hover::after { transform: scaleX(1); }

/* Glass panel helper */
.glass { background: rgba(255,255,255,.6); backdrop-filter: blur(8px); border:1px solid rgba(148,163,184,.35); }

/* Tilt on hover */
.tilt { transition: transform .25s ease; transform-style: preserve-3d; }
.tilt:hover { transform: rotateX(2deg) rotateY(-2deg) translateY(-2px); }

/* Utility helpers */
.container { max-width: 1120px; }

/* Responsive adjustments */
img { max-width: 100%; height: auto; }
section img { display: block; }

/* Improve tap targets on small screens */
@media (max-width: 480px) {
  .nav-link { padding: 0.5rem 0.625rem; }
  .btn-primary, .btn-outline { padding: .625rem .9rem; }
  .card { padding: .875rem; }
}

/* Header spacing and sticky overlap fix */
header nav { min-height: 56px; }

/* Mobile navigation panel */
#mobileNav { position: relative; }
@media (max-width: 768px) {
  #mobileNav { position: fixed; inset: 56px 0 auto 0; background: #fff; max-height: calc(100dvh - 56px); overflow:auto; box-shadow: 0 8px 24px rgba(2,6,23,.12); }
}

/* Table responsiveness helpers */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 640px; }

/* Improve typography scale */
:root { --step--1: .875rem; --step-0: 1rem; --step-1: 1.125rem; --step-2: 1.25rem; --step-3: 1.5rem; --step-4: 1.875rem; --step-5: 2.25rem; }
body { font-size: var(--step-0); line-height: 1.7; }
h1 { font-size: var(--step-4); line-height: 1.25; }
h2 { font-size: var(--step-3); line-height: 1.3; }

@media (max-width: 768px) {
  h1 { font-size: var(--step-3); }
  h2 { font-size: var(--step-2); }
}

/* Make details/summary tap-friendly */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
summary { padding: .5rem 0; }

/* Footer spacing on small screens */
@media (max-width: 768px) {
  footer .container { gap: .75rem; }
}

/* Pricing table: shrink columns on small screens */
@media (max-width: 768px) {
  table { table-layout: fixed; }
  thead th, tbody td { padding: .5rem .375rem; font-size: .875rem; line-height: 1.3; white-space: normal; word-break: break-word; }
  thead th:first-child, tbody td:first-child { width: 38%; }
  thead th:nth-child(2), thead th:nth-child(3), thead th:nth-child(4),
  tbody td:nth-child(2), tbody td:nth-child(3), tbody td:nth-child(4) { width: 20.5%; }
}
@media (max-width: 480px) {
  thead th, tbody td { padding: .375rem .25rem; font-size: .75rem; line-height: 1.25; }
  thead th:first-child, tbody td:first-child { width: 40%; }
  thead th:nth-child(2), thead th:nth-child(3), thead th:nth-child(4),
  tbody td:nth-child(2), tbody td:nth-child(3), tbody td:nth-child(4) { width: 20%; }
}