/* Custom styles that complement Tailwind CSS for LD Marble & Granite */

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

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f9f7f0;
}
::-webkit-scrollbar-thumb {
    background: #a5d6a7;
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #2e7d32;
}

/* Selection color */
::selection {
    background: #dcedce;
    color: #1b5e20;
}

/* Focus styles for accessibility */
:focus-visible {
    outline: 2px solid #2e7d32;
    outline-offset: 2px;
}

/* Animation for page load */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile menu transition */
.mobile-menu {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-overlay {
    transition: opacity 0.3s ease;
}

.mobile-overlay:not(.hidden) {
    opacity: 1;
}

/* Button ripple effect */
.btn-primary, .btn-secondary {
    position: relative;
    overflow: hidden;
}

/* Card hover effects */
.hero-card, .stat-card, .service-card {
    will-change: transform;
}

/* Image loading placeholder */
img {
    background: linear-gradient(90deg, #f0f7f0 25%, #e8f5e8 50%, #f0f7f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

img[src] {
    animation: none;
    background: none;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* Print styles */
@media print {
    nav, .mobile-menu, .mobile-overlay, #contactForm, #successMessage {
        display: none !important;
    }
    
    body {
        color: #000;
        background: #fff;
    }
    
    .hero-card, .service-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* High contrast mode support */
@media (forced-colors: active) {
    .btn-primary, .btn-secondary {
        border: 2px solid currentColor;
    }
    
    .hero-card, .stat-card, .service-card {
        border: 1px solid currentColor;
    }
}

/* Touch device optimizations */
@media (hover: none) {
    .service-card:hover {
        transform: none;
    }
    
    .hero-card:hover {
        transform: none;
    }
    
    .stat-card:hover {
        transform: none;
    }
}

/* Landscape mobile optimization */
@media (max-width: 640px) and (orientation: landscape) {
    .hero-card {
        padding: 1.5rem;
    }
    
    .stat-card {
        padding: 1rem;
    }
}

/* Ensure proper rendering on all devices */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Ensure all interactive elements are keyboard accessible */
button, a, input, select, textarea {
    touch-action: manipulation;
}

/* Improve form field focus states */
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.1);
}

/* Ensure proper spacing in all browsers */
section {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Fix potential overflow issues */
max-w-7xl {
    overflow-x: hidden;
}

/* Ensure images don't overflow containers */
img {
    max-width: 100%;
    height: auto;
}

/* Smooth font rendering */
.font-heading {
    text-rendering: optimizeLegibility;
}

/* Better text rendering for headings */
.font-heading, h1, h2, h3, h4 {
    font-feature-settings: "ss01", "ss02";
    -webkit-font-feature-settings: "ss01", "ss02";
}

/* Ensure proper box sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Remove default margin and padding */
body, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd {
    margin: 0;
    padding: 0;
}

/* Ensure consistent font sizes */
h1, h2, h3, h4 {
    font-size: inherit;
    line-height: inherit;
}

/* Better image handling */
img, svg {
    vertical-align: middle;
}

/* Remove border from images in links */
a img {
    border: none;
}

/* Ensure proper table styling */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Better form element styling */
button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
}

/* Remove webkit styles */
input, textarea, select, button {
    border: 0;
    background: none;
}

/* Better button styling */
button {
    cursor: pointer;
}

/* Remove list styles */
ul, ol {
    list-style: none;
}

/* Remove link decorations */
a {
    text-decoration: none;
    color: inherit;
}

/* Better fieldset styling */
fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}

/* Better legend styling */
legend {
    padding: 0;
}

/* Better progress bar styling */
progress {
    vertical-align: baseline;
}

/* Better sub and sup styling */
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Better pre styling */
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

/* Better code styling */
code, kbd, samp {
    font-family: monospace, monospace;
}

/* Better small styling */
small {
    font-size: 80%;
}

/* Better strong styling */
strong {
    font-weight: bold;
}

/* Better em styling */
em {
    font-style: italic;
}

/* Better mark styling */
mark {
    background-color: #ff0;
    color: #000;
}

/* Better ins styling */
ins {
    text-decoration: underline;
}

/* Better del styling */
del {
    text-decoration: line-through;
}

/* Better b styling */
b, strong {
    font-weight: bolder;
}

/* Better i styling */
i, cite, em, var, address, dfn {
    font-style: italic;
}

/* Better abbr styling */
abbr[title] {
    text-decoration: dotted underline;
    cursor: help;
}

/* Better acronym styling */
acronym {
    border: none;
    font-variant: normal;
}

/* Better q styling */
q {
    quotes: "" "";
}

q:before {
    content: open-quote;
}

q:after {
    content: close-quote;
}

/* Better blockquote styling */
blockquote {
    quotes: "„" "“" "‹" "›";
}

/* Better cite styling */
cite {
    font-style: normal;
}

/* Better address styling */
address {
    font-style: normal;
}

/* Better dfn styling */
dfn {
    font-style: normal;
}

/* Better var styling */
var {
    font-style: normal;
}

/* Better samp styling */
samp {
    font-family: monospace, monospace;
}

/* Better kbd styling */
kbd {
    font-family: monospace, monospace;
}

/* Better code styling */
code {
    font-family: monospace, monospace;
}

/* Better pre styling */
pre {
    font-family: monospace, monospace;
}

/* Better small styling */
small {
    font-size: 80%;
}

/* Better sub styling */
sub {
    font-size: 75%;
}

/* Better sup styling */
sup {
    font-size: 75%;
}

/* Better figure styling */
figure {
    margin: 0;
}

/* Better figcaption styling */
figcaption {
    font-size: 90%;
    color: #666;
}

/* Better hr styling */
hr {
    border: 0;
    border-top: 1px solid #ccc;
}

/* Better button styling */
button {
    overflow: visible;
    text-transform: none;
    appearance: button;
    cursor: pointer;
}

/* Better input styling */
input, button, select, textarea {
    font: inherit;
}

/* Better select styling */
select {
    text-transform: none;
}

/* Better button styling */
button, input {
    line-height: normal;
}

/* Better button styling */
button, input {
    overflow: visible;
}

/* Better button styling */
button, html input[type="button"], input[type="reset"], input[type="submit"] {
    appearance: button;
    cursor: pointer;
}

/* Better button styling */
button[disabled], html input[disabled] {
    cursor: default;
}

/* Better input styling */
input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

/* Better input styling */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/* Better input styling */
input[type="search"] {
    appearance: textfield;
    box-sizing: content-box;
}

/* Better input styling */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    appearance: none;
}

/* Better textarea styling */
textarea {
    overflow: auto;
    resize: vertical;
}

/* Better button styling */
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Better focus styling */
button:-moz-focusring,
input:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/* Better link styling */
a:-webkit-any-link {
    text-decoration: none;
}

/* Better link styling */
a {
    color: inherit;
    text-decoration: inherit;
}

/* Better focus styling */
:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Better focus styling */
:focus:not(:focus-visible) {
    outline: none;
}

/* Better focus visible styling */
:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Better selection styling */
::selection {
    background-color: #dcedce;
    color: #1b5e20;
}

/* Better placeholder styling */
::placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* Better placeholder styling */
::-webkit-input-placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* Better placeholder styling */
::-moz-placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* Better placeholder styling */
:-ms-input-placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* Better placeholder styling */
::-ms-input-placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* Better placeholder styling */
::placeholder {
    color: #9ca3af;
    opacity: 1;
}