/* Additions to site.css (the stylesheet carried over from the original site). */

[hidden] { display: none !important; }

/* Hero slideshow: photos stacked, the active one faded in. */
.hero-slide { opacity: 0; transition: opacity 1.5s ease-in-out; }
.hero-slide.is-active { opacity: 1; }

/* Sections ease in as they scroll into view. Only when the script is running. */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] { opacity: 1; transform: none; transition: none; }
    .hero-slide { transition: none; }
    .animate-marquee { animation-play-state: paused; }
}

/* Photo viewer on the portfolio page. */
.lightbox { opacity: 0; transition: opacity 0.2s ease-out; }
.lightbox.is-open { opacity: 1; }
body.has-lightbox { overflow: hidden; }

/* Contact form */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-notice { border-radius: 0.5rem; padding: 0.85rem 1rem; font-size: 0.9rem; line-height: 1.5; margin-bottom: 1.5rem; }
.form-notice--ok { background: #eaf5ee; color: #1f6b3f; border: 1px solid #bfe3cd; }
.form-notice--error { background: #fdecec; color: #a12626; border: 1px solid #f3c4c4; }

/* Tablets: the full menu bar doesn't fit until 1024px wide (the name wrapped
   over the links and the quote button ran off the edge), so the phone menu
   stays until then, and the header's phone number waits until there is room. */
[data-site-header] .tracking-widest, [data-site-header] a[href^="tel:"] { white-space: nowrap; }
@media (min-width: 48rem) and (max-width: 63.99rem) {
    [data-site-header] nav.md\:flex { display: none; }
    [data-site-header] [data-menu-toggle] { display: inline-flex; }
    [data-site-header] [data-menu-panel]:not([hidden]) { display: flex; }
}
@media (min-width: 64rem) and (max-width: 74rem) {
    [data-site-header] nav a[href^="tel:"] { display: none; }
}

/* The footer's email address is longer than its column is wide at 1024px. */
footer a[href^="mailto:"] { min-width: 0; overflow-wrap: anywhere; }