/* 
 * Custom Styles for The Davenport Merchant
 * Complementary to Tailwind CSS
 */

:root {
    --font-serif: 'DM Serif Display', serif;
    --font-sans: 'Nunito', sans-serif;
}

body {
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: var(--font-serif);
}

/* 
 * Scroll Reveal Animation Styles
 * Content is visible by default (progressive enhancement)
 * JS adds the 'is-visible' class to trigger the animation
 */
.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 
 * Initial state for elements we want to animate in
 * We use JS to add 'reveal' class initially to hide, 
 * then add 'is-visible' to show. 
 * However, per rules, we shouldn't hide above-the-fold.
 * The classes below are applied via JS only after load for below-fold elements.
 */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
}

.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Smooth focus outlines for accessibility */
a:focus-visible, button:focus-visible {
    outline: 2px solid #d65229;
    outline-offset: 4px;
    border-radius: 4px;
}

/* Custom selection color */
::selection {
    background-color: #f2c0b0;
    color: #6c2515;
}