/* ==========================================================
   AffordableTubal.com — global stylesheet
   Refinements layered on top of the Tailwind CDN build.
   ========================================================== */

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4 { font-family: "Lora", Georgia, serif; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #2c7cc0;
  outline-offset: 2px;
}

.sr-only:not(:focus):not(:focus-within) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Soft card shadow used across the site */
.card-shadow { box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.08); }
.card-shadow-hover { transition: box-shadow .25s ease, transform .25s ease; }
.card-shadow-hover:hover { box-shadow: 0 4px 6px rgba(15,23,42,.05), 0 16px 32px -8px rgba(15,23,42,.14); transform: translateY(-2px); }

/* Fade/slide-in animation for scroll reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Hero gradient */
.hero-gradient {
  background: radial-gradient(1200px 600px at 80% -10%, #eef6fc 0%, rgba(238,246,252,0) 60%),
              linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* Lazy image fade-in */
img[loading="lazy"] { opacity: 0; transition: opacity .4s ease; }
img[loading="lazy"].loaded, img[loading="lazy"].error { opacity: 1; }

/* Prose styling for long-form article content */
.article-prose h2 { font-size: 1.5rem; font-weight: 600; color: #0f172a; margin-top: 2.5rem; margin-bottom: .9rem; scroll-margin-top: 6rem; }
.article-prose h3 { font-size: 1.2rem; font-weight: 600; color: #1e293b; margin-top: 1.75rem; margin-bottom: .6rem; scroll-margin-top: 6rem; }
.article-prose p { margin-bottom: 1.1rem; line-height: 1.8; color: #334155; }
.article-prose ul, .article-prose ol { margin: 0 0 1.1rem 1.4rem; color: #334155; line-height: 1.8; }
.article-prose ul { list-style: disc; }
.article-prose ol { list-style: decimal; }
.article-prose a { color: #1E5C97; text-decoration: underline; text-underline-offset: 2px; }
.article-prose blockquote { border-left: 4px solid #82bce6; padding-left: 1rem; color: #475569; font-style: italic; margin: 1.5rem 0; }

/* Skip-to-content already handled via Tailwind sr-only classes in header.php */

/* Print styles: keep it readable, strip chrome */
@media print {
  #site-header, #back-to-top, footer, .no-print { display: none !important; }
}