/* WebCaringSite — supplemental styles. Most styling is Tailwind utility classes. */

html { scroll-behavior: smooth; }

/* Inter for Latin, Noto Sans Thai as fallback so Thai glyphs use the loaded webfont
   (the browser picks the first font in the stack that supports each character). */
body { font-family: 'Inter', 'Noto Sans Thai', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* Smooth fade-up for sections as they enter the viewport (used via .reveal class + JS). */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease-out, transform 600ms ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Subtle hover lift for cards. */
.card-lift { transition: transform 200ms ease, box-shadow 200ms ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 12px 30px -10px rgba(37, 99, 235, 0.25); }

/* Underline-on-hover for nav links. */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  height: 2px; width: 0;
  background: #2563EB;
  transition: width 200ms ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

/* Pricing highlight ribbon. */
.ribbon {
  position: absolute;
  top: 1rem; right: -2.25rem;
  background: #2563EB;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.25rem 2.5rem;
  transform: rotate(35deg);
}

/* FAQ accordion details marker tweak. */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 200ms ease; }

/* TEMPORARILY HIDDEN: portfolio is empty until we have customer work to show.
   Re-enable by deleting this whole block (and removing the `hidden` class on the
   portfolio teaser <section> in index.html). */
a[href="portfolio.html"] { display: none !important; }
li:has(> a[href="portfolio.html"]) { display: none !important; }