/* Extra styles for the home page (index.html), kept out of the page so the
   Content-Security-Policy can block inline styles. */
.hero-gradient {
    background: linear-gradient(135deg, #F5F0E1 0%, #A3B18A 100%);
}
.btn-primary {
    background-color: #344E41;
    color: white;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: #2b4234;
    transform: translateY(-2px);
}
.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
body {
    background-color: #F5F0E1;
}
/* Slide-in animations start just off-screen; keep them inside their section so the page can't scroll sideways */
section {
    overflow-x: clip;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
/* Ticked consent boxes in the site green instead of the device's default (usually blue) */
input[type="checkbox"] {
    accent-color: #344E41;
}
/* Clear site-green outline for people using the keyboard (Tab key); mouse and touch users don't see it */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #344E41;
    outline-offset: 2px;
}
footer a:focus-visible {
    outline-color: #F5F0E1;
}
/* Keep whatever has keyboard focus clear of the sticky menu bar at the top (5rem tall). This is set on
   the links, buttons and form fields themselves rather than the whole page, so menu links still land
   with each section's own top spacing tucked under the menu bar, as originally designed. */
a, button, input, select, textarea, [tabindex] {
    scroll-margin-top: 6rem;
}
/* "Skip to main content": hidden until someone presses Tab, then shown at the top left so keyboard
   and screen reader users can jump past the menu */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -10rem;
    z-index: 100;
    background-color: #ffffff;
    color: #344E41;
    font-weight: 600;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.skip-link:focus {
    top: 1rem;
}
/* The main area receives focus from the skip link; it doesn't need an outline of its own */
main:focus {
    outline: none;
}
/* Used by js/site.js to show a section at once (no fade-in) when a menu link jumps to it */
.aos-instant,
.aos-instant[data-aos] {
    transition: none !important;
}
/* Menu and page links glide to their section rather than jumping. This also hides a flash of the
   previous section in Chrome on iPad, which shrinks its toolbar during an instant jump.
   Visitors whose device is set to reduce motion still jump straight there.
   The page starts with class "no-smooth", which js/site.js removes once the page has loaded, so a
   refresh puts you straight back in place instead of gliding (iPads ended up in the wrong place). */
@media (prefers-reduced-motion: no-preference) {
    html:not(.no-smooth) {
        scroll-behavior: smooth;
    }
}
/* The Home link, the logo and refreshing at /#home: stop with the banner's first line just below the
   menu bar. The banner has less space above its text on phones and tablets (4rem) than at 1024px and
   wider (5rem), so it needs a little more room there. */
#home {
    scroll-margin-top: 2rem;
}
@media (min-width: 1024px) {
    #home {
        scroll-margin-top: 1rem;
    }
}