body {
    font-family: 'Lora', serif;
    font-weight: 400; /* Set base font weight */
}
h1, h2, h3, h4, h5, h6, nav, button {
    font-family: 'Montserrat', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700; /* Make headings bold, using the weight imported from Google Fonts */
}

#bg-video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    object-fit: cover;
    filter: blur(4px) brightness(0.8);
    transform: scale(1.1);
}

/* Add a subtle scale-in animation for the lightbox image */
#lightbox:not(.hidden) #lightbox-image {
    animation: scaleIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hide all page content by default */
.page-content { 
    display: none;
}

/* Show the active page */
.page-content.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

/* Hide the non-active language within any page */
html[lang="en"] [lang="fr"],
html[lang="fr"] [lang="en"] {
    display: none;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.nav-link {
    position: relative;
    font-weight: 700; /* Make nav links bold for better hierarchy */
    transition: color 0.3s ease, transform 0.3s ease;
}
/* Add a subtle lift effect on hover */
.nav-link:hover {
    transform: translateY(-2px);
}
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 50%;
    background-color: #ffffff;
    transition: all 0.3s ease-in-out;
    transform: translateX(-50%);
}
.nav-link:hover::after {
    width: 100%;
}
/* Make the active link's underline permanently visible and a different color */
.nav-link.active::after {
    width: 100%;
    background-color: #67e8f9; /* Use theme's cyan for active state */
}

/* Improve rendering quality for scaled-down icons */
.service-icon {
    image-rendering: -webkit-optimize-contrast; /* For older browsers */
    image-rendering: crisp-edges;
}

/* --- FAQ Section --- */
.faq-item {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s;
    overflow: hidden; /* Ensures the content slide effect works with border-radius */
}

.faq-item[open] {
    background-color: rgba(0, 0, 0, 0.2);
}

.faq-item summary {
    padding: 1rem;
    cursor: pointer;
    outline: none;
    list-style: none; /* Hide default marker */
    position: relative;
}

/* Custom marker */
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    font-weight: 400;
    transition: transform 0.2s ease-in-out;
}

.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-content {
    /* Animate the opening/closing of the FAQ content */
    padding: 0 1rem; /* Adjust padding for animation */
    line-height: 1.6;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
}

.faq-item[open] .faq-content {
    max-height: 30rem; /* A large enough value to accommodate content */
    padding: 0 1rem 1rem 1rem;
}

/* --- Accessibility Mode --- */

/* Hide video and set a solid background */
body.accessibility-mode #bg-video {
    display: none;
}

body.accessibility-mode {
    background-color: #ffffff; /* Plain white background */
}

/* Simplify the main content container */
body.accessibility-mode main {
    background-color: #f0f0f0 !important; /* Light gray background, !important to override Tailwind */
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: 2px solid #000000 !important;
}

/* High-contrast text for all elements inside main */
body.accessibility-mode main,
body.accessibility-mode main * {
    color: #000000 !important; /* Black text, !important to override Tailwind */
}

/* High-contrast links */
body.accessibility-mode main a.text-cyan-300 {
    color: #0000ee !important; /* Standard high-contrast blue */
    text-decoration: underline;
}

/* Style the portfolio panels for high contrast */
body.accessibility-mode #page-portfolio .bg-slate-600\/50 {
    background-color: #ffffff !important; /* White background for panels */
    border: 1px solid #cccccc !important; /* A light gray border */
}

/* Adjust nav link underline for dark text */
body.accessibility-mode .nav-link::after {
    background-color: #000000 !important;
}
body.accessibility-mode .nav-link.active::after {
    background-color: #0000ee !important; /* Use the same blue as links for consistency */
}

/* Style the buttons for high contrast */
body.accessibility-mode #lang-toggle,
body.accessibility-mode #accessibility-toggle {
    background-color: #e0e0e0 !important; /* Light gray */
    border-color: #000000 !important; /* Ensure border is black */
    color: #000000 !important; /* Black text */
    border: 1px solid #000000 !important;
    box-shadow: none !important;
}

/* Add a hover state for accessibility mode buttons */
body.accessibility-mode #lang-toggle:hover,
body.accessibility-mode #accessibility-toggle:hover {
    background-color: #c7c7c7 !important; /* Slightly darker gray on hover */
}

/* Disable nav link hover animation in accessibility mode */
body.accessibility-mode .nav-link:hover {
    transform: none;
}

/* Accessibility styles for FAQ */
body.accessibility-mode .faq-item {
    background-color: #e9e9e9 !important;
    border-color: #333333 !important;
}

body.accessibility-mode .faq-item[open] {
    background-color: #dcdcdc !important;
}

/* Keyframe animations */
@keyframes scaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* --- General Accessibility Enhancements --- */
/* Default focus style for links and buttons */
:is(a, button):focus-visible {
    outline: 3px solid #67e8f9; /* Uses the theme's new cyan accent color */
    outline-offset: 2px;
}

/* By default, hide the programmatic focus outline on headings */
h1:focus {
    outline: none;
}

/* In accessibility mode, provide a high-contrast focus outline for all interactive elements */
body.accessibility-mode :is(a, button, h1):focus-visible {
    outline: 3px solid #000000 !important; /* Black outline for high contrast */
    outline-offset: 2px;
}