/* Raven Roofing - Custom Brand Styles */

/* This central stylesheet contains all the unique design rules for your brand, 
  such as colours, fonts, and custom component styles. By linking this single file 
  to all your pages, you ensure a consistent look and feel across the entire website.
*/

:root {
    --brand-copper: #B87333; /* A classic, rich copper colour */
    --brand-copper-darker: #9f632d; /* A slightly darker shade for hover effects */
}

/* Applying the fonts to the body for global consistency */
body {
    font-family: 'Inter', sans-serif;
}

/* Custom class for the logo's unique font */
.font-logo {
    font-family: 'Cormorant Garamond', serif;
}

/* Reusable utility classes for your brand's copper colour */
.brand-copper-text {
    color: var(--brand-copper);
}
.brand-copper-bg {
    background-color: var(--brand-copper);
}
.brand-copper-hover-bg:hover {
    background-color: var(--brand-copper-darker);
}

/* Navigation link styling */
.nav-link {
    position: relative;
    padding: 0.5rem 0;
    font-size: 0.875rem; /* 14px */
    font-weight: 700;
    color: white;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

/* REFINED: Added :focus for keyboard navigation accessibility */
.nav-link:hover,
.nav-link:focus {
    color: var(--brand-copper);
}

/* Underline effect for active and hover states */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--brand-copper);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

/* REFINED: Added :focus::after for keyboard navigation accessibility */
.nav-link:hover::after,
.nav-link:focus::after,
.nav-link.active::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Gradient overlay for the hero image for better text readability */
.hero-gradient {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
}

/* Text shadow for hero text to make it pop */
.text-shadow-dark {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.text-shadow-light {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Service card component styling for a consistent look and feel */
.service-card {
    display: block;
    background-color: #f8fafc; /* Tailwind's slate-50 */
    border: 1px solid #e2e8f0; /* Tailwind's slate-200 */
    border-radius: 0.5rem; /* 8px */
    padding: 1.5rem; /* 24px */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* General CTA button transition for a smooth feel */
.cta-button {
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.cta-button:hover {
    transform: scale(1.05);
}

/* NEW: Added :active state for instant feedback on click/tap */
.cta-button:active {
    transform: scale(0.98);
}

/* NEW: Added :focus state for keyboard navigation accessibility */
.cta-button:focus {
    outline: 2px solid var(--brand-copper);
    outline-offset: 2px;
}