body {
    font-family: "Inter", sans-serif;
}

h1, h2, h3, h4 {
    font-family: "Playfair Display", serif;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}

/* Hero background image positioning */
.hero-bg-img {
    object-position: -150px center;
}

@media (min-width: 768px) {
    .hero-bg-img {
        object-position: center center;
    }
}

/* ------------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------------ */

/* Skip link: visually hidden until it receives keyboard focus.
   Fixed (not absolute) so it is always at the top of the viewport, even when the page
   loaded scrolled to a hash like /#contact. */
.skip-link {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: #C9A84C;
    color: #1A2E4A;
    font-weight: 700;
    border-radius: 0 0 0.375rem 0;
    transform: translateY(-150%);
    transition: transform 0.15s ease;
}

.skip-link:focus {
    transform: translateY(0);
    outline: 3px solid #1A2E4A;
    outline-offset: -3px;
}

/* Visible keyboard focus indicator for all interactive elements.
   Navy on light backgrounds; light gold on navy backgrounds (nav, footer, navy sections). */
:focus-visible {
    outline: 3px solid #1A2E4A;
    outline-offset: 2px;
}

nav :focus-visible,
footer :focus-visible,
.bg-navy :focus-visible {
    outline-color: #F5D76E;
}

/* Targets that receive programmatic focus (skip link / in-page navigation) don't need a ring */
main:focus,
section[tabindex="-1"]:focus,
div[tabindex="-1"]:focus {
    outline: none;
}

/* Keep anchored sections from landing underneath the sticky header.
   --header-height is measured and set by site.js; the fallback covers the no-JS case. */
[id] {
    scroll-margin-top: calc(var(--header-height, 10rem) + 1rem);
}

/* Also keep keyboard-focused controls without an id (links, buttons, inputs) from
   scrolling underneath the sticky header (WCAG 2.2 SC 2.4.11 Focus Not Obscured) */
html {
    scroll-padding-top: calc(var(--header-height, 10rem) + 1rem);
}

/* Respect the user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .btn-red-glass:hover,
    .btn-gold-glass:hover,
    .btn-white-glass:hover {
        transform: none;
    }
}

/* Server-side validation: highlight the erroring field itself, not just the message.
   Element-qualified selectors so they beat Tailwind's .border-gray-* utilities. */
input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: #b91c1c;
}

.field-validation-error {
    display: block;
    margin-top: 0.25rem;
}

/* Placeholder text at >= 4.5:1 on white (Tailwind's default #9CA3AF is 2.5:1) */
form input::placeholder,
form textarea::placeholder {
    color: #6B7280;
    opacity: 1;
}

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */

/* Red Glass CTA Button (all gradient stops keep white text at >= 4.8:1) */
.btn-red-glass {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 40%, #c62828 60%, #dc2626 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.btn-red-glass:hover {
    background: linear-gradient(135deg, #c62828 0%, #dc2626 40%, #b91c1c 60%, #c62828 100%);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    color: #fff;
    transform: translateY(-1px);
}

/* Gold Glass CTA Button */
.btn-gold-glass {
    background: linear-gradient(135deg, #d4af37 0%, #c9a84c 30%, #e8c84a 60%, #f5d76e 100%);
    color: #1A2E4A;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(201, 168, 76, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.btn-gold-glass:hover {
    background: linear-gradient(135deg, #f5d76e 0%, #e8c84a 30%, #d4af37 60%, #c9a84c 100%);
    box-shadow: 0 6px 20px rgba(201, 168, 76, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #1A2E4A;
    transform: translateY(-1px);
}

/* White Glass CTA Button */
.btn-white-glass {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 40%, #ffffff 70%, #f8f8f8 100%);
    color: #1A2E4A;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    text-shadow: none;
    transition: all 0.3s ease;
}

.btn-white-glass:hover {
    background: linear-gradient(135deg, #f8f8f8 0%, #ffffff 40%, #f0f0f0 70%, #ffffff 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    color: #1A2E4A;
    transform: translateY(-1px);
}