/* Custom CSS for ESCO Plumbing Website */

/* Google Fonts - Inter is imported in HTML head */

/* Custom Color Palette (using Tailwind's extend in tailwind.config.js usually, but defined here for direct CSS use) */
/*
  --torque-blue-900: #003366;
  --torque-blue-700: #0055AA;
  --torque-blue-500: #0077CC;
  --accent-orange: #FF6600;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
*/

/* Base Styles (apply to all elements) */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Tailwind-like classes for easier theming if not using full Tailwind setup */
/* These are examples and assume you're using Tailwind CDN for core utilities.
   If you were compiling Tailwind, these would be in tailwind.config.js */
.text-torque-blue-900 {
    color: #003366;
}

.text-torque-blue-700 {
    color: #0055AA;
}

.bg-torque-blue-900 {
    background-color: #003366;
}

.bg-torque-blue-700 {
    background-color: #0055AA;
}

.hover\:text-torque-blue-700:hover {
    color: #0055AA;
}

.hover\:bg-torque-blue-700:hover {
    background-color: #0055AA;
}

.border-torque-blue-700 {
    border-color: #0055AA;
}

/* The ring-torque-blue-500 class is a direct Tailwind class and doesn't need @apply here,
   but for consistency with the original intent, if you wanted a custom ring color
   not directly from Tailwind's default palette, you'd define it in a custom class
   or extend Tailwind's config. Since we're using CDN,
   we'll just use a standard Tailwind ring color or define a custom one if needed.
   For now, I'll remove the specific `ring-torque-blue-500:focus` class as it implies
   a custom Tailwind setup not available with CDN. The input styles below will use
   standard Tailwind focus rings.
*/

/* Specific styles for the off-canvas menu overlay */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black overlay */
    z-index: 40; /* Below the menu but above page content */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.overlay.is-active {
    opacity: 1;
    visibility: visible;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Corrected styles for form elements - replaced @apply with direct CSS */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 0.75rem; /* p-3 */
    border: 1px solid #D1D5DB; /* border border-gray-300 */
    border-radius: 0.375rem; /* rounded-md */
    transition: all 0.2s ease-in-out; /* transition duration-200 ease-in-out */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 2px rgba(0, 119, 204, 0.5); /* focus:ring-2 with torque-blue-500-like color */
    border-color: transparent; /* focus:border-transparent */
}


button[type="submit"] {
    background-color: #0055AA; /* bg-torque-blue-700 */
    color: #FFFFFF; /* text-white */
    font-weight: 700; /* font-bold */
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border-radius: 0.375rem; /* rounded-md */
    transition: background-color 0.3s ease-in-out; /* transition duration-300 ease-in-out */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

button[type="submit"]:hover {
    background-color: #003366; /* hover:bg-torque-blue-900 */
}


/* Utility for hiding elements visually but keeping them for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Custom list styles for table of contents */
.list-circle {
    list-style-type: circle;
}

/* Footer link styling for better readability on dark background */
footer a {
    color: #9CA3AF; /* text-gray-300 */
    transition: color 0.3s ease-in-out; /* transition duration-300 ease-in-out */
}

footer a:hover {
    color: #FFFFFF; /* hover:text-white */
}

/* Ensure consistent padding for main content to avoid overlap with fixed nav */
main {
    padding-top: 5rem; /* Adjust based on your fixed nav height */
}

/* Responsive adjustments for hero sections or large text */
@media (max-width: 768px) {
    .text-5xl {
        font-size: 3rem; /* Smaller on mobile */
    }
    .text-xl {
        font-size: 1.125rem; /* Slightly smaller on mobile */
    }
}