/* style.css
    Custom stylesheet for rollershutters.uk
*/

/* Note: Most styling is handled by Tailwind CSS utility classes in the HTML.
  This file contains custom component styles, animations, and other specific rules
  that are cleaner to manage here than inline. The Tailwind configuration itself
  is handled by a script in the HTML file for simplicity.
*/

/* Custom styles for specific components and effects */

.hero-section {
    background: linear-gradient(rgba(26, 26, 26, 0.85), rgba(26, 26, 26, 0.85)), url('https://images.unsplash.com/photo-1599302241595-120275a51988?q=80&w=1974&auto=format&fit=crop') no-repeat center center;
    background-size: cover;
}

.cta-button {
    /* Smooth transition for hover effects */
    transition: all 0.3s ease-in-out;
}

.cta-button:hover {
    /* Lifts the button slightly and adds a more intense glow on hover */
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5);
}

.subtle-link {
    /* Makes the link in the footer look like normal text by default */
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.subtle-link:hover {
    /* Adds a yellow underline on hover to indicate it's clickable */
    text-decoration: underline;
    text-decoration-color: #FFD700; /* Uses brand-yellow color */
}

/* Accessibility Improvement: 
  This rule adds a highly visible focus ring around any element that is
  navigated to using the keyboard (e.g., by pressing the Tab key).
  This is crucial for users who cannot use a mouse.
*/
*:focus-visible {
    outline: 3px solid #FFD700; /* Bright yellow outline */
    outline-offset: 2px;
}