/* Levocraft Accessibility & CLS Fixes */

/* Color contrast fixes for general links: #0096ff (3.08:1) -> #0070cc (4.8:1) */
a { color: #0070cc; }
a:hover, a:focus { color: #005299; }

/* Breadcrumb links */
.breadcrumb a, nav[aria-label="breadcrumb"] a {
    color: #0070cc !important;
}
.breadcrumb a:hover, nav[aria-label="breadcrumb"] a:hover {
    color: #005299 !important;
}

/* Top nav bar - keep white text on blue background for proper contrast */
nav.top-nav a, nav.top-nav ul li a {
    color: #ffffff !important;
}
nav.top-nav a:hover, nav.top-nav ul li a:hover {
    color: #ffffff !important;
}

/* Bottom nav bar - keep white text on blue background */
nav.bottom-nav a, .bottom-nav a {
    color: #ffffff !important;
}
nav.bottom-nav a:hover, .bottom-nav a:hover {
    color: #ffffff !important;
}

.skip-link {
    color: #ffffff !important;
    background-color: #0070cc !important;
}

.btn-primary, button.primary, input[type="submit"] {
    background-color: #0070cc !important;
    border-color: #0070cc !important;
}
.btn-primary:hover, button.primary:hover, input[type="submit"]:hover {
    background-color: #005299 !important;
    border-color: #005299 !important;
}

/* Footer links - light blue on dark background */
footer a { color: #7cc4ff; }
footer a:hover { color: #ffffff; }

/* Focus states for accessibility */
a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
    outline: 2px solid #0070cc !important;
    outline-offset: 2px !important;
}

/* CLS fixes - explicit dimensions for images */
img[src*="cover.png"], img[alt="Levocraft Logo"] {
    aspect-ratio: 820 / 265;
    width: 100%;
    height: auto;
}

.Grid img, .service-card img, img[src*="service"] {
    width: 100%;
    max-height: 200px;
    height: auto;
    object-fit: contain;
    background: #f8f8f8;
}

/* Project cards only - not Instagram carousel items */
.project-card img, img[src*="project"] {
    width: 100%;
    max-height: 300px;
    height: auto;
    object-fit: contain;
    background: #f8f8f8;
}

/* Instagram gallery carousel items - allow flexible sizing */
.carousel-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Social icons - fixed dimensions (only for local icon images) */
.social-links img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Local social icon files only - not external CDN images */
img[src$="/facebook.png"], img[src$="/instagram.png"], img[src$="/tiktok.png"],
img[src$="/youtube.png"], img[src$="/linkedin.png"], img[src$="/x.png"] {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Prevent layout shift from web fonts */
body {
    font-display: swap;
}