:root {
    --color-yellow: rgb(255, 215, 0);
    --color-gray-bg: rgb(243, 243, 243);
    --color-blue-hover: #1971e9;
}

/* Mobile optimizations */
html {
    scroll-behavior: smooth;
    /* Prevent text size adjustment on orientation change */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
    font-weight: 300; /* Light for body */
    /* Improve font rendering on mobile */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure minimum touch target size for mobile (44x44px) */
button,
a,
[role="button"],
input[type="submit"],
input[type="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* Improve scrolling on iOS */
.overflow-y-auto,
[data-nav-panel] {
    -webkit-overflow-scrolling: touch;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
    font-weight: 400; /* Regular for headings */
}

/* Hamburger menu button hover and focus - match focus ring style */
[data-nav-toggle]:hover {
    box-shadow: 0 0 0 2px black, 0 0 0 4px white !important;
}

/* Text hover and focus - underline (except for buttons and case study cards) */
a:hover:not([class*="bg-red"]):not([class*="bg-white"]):not(.btn):not([role="button"]):not(.group),
a:focus:not([class*="bg-red"]):not([class*="bg-white"]):not(.btn):not([role="button"]):not(.group),
a:focus-visible:not([class*="bg-red"]):not([class*="bg-white"]):not(.btn):not([role="button"]):not(.group) {
    text-decoration: underline;
}

/* Case study card links - no underline on hover, only lift effect */
a.group[href*="/case-studies/"]:hover,
a.group[href*="/case-studies/"]:focus,
a.group[href*="/case-studies/"]:focus-visible,
a.group[href*="/case-studies/"] * {
    text-decoration: none !important;
}

/* Override for approach section links - just underline, no color change or outline */
h2 a[href="/about/approach/"]:hover,
h2 a[href="/about/approach/"]:focus,
h2 a[href="/about/approach/"]:focus-visible {
    color: white !important;
    outline: none !important;
    text-decoration: underline;
}

/* Mega menu link cards - restore hover background changes */
[data-submenu] a.group:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* Mega menu links should keep white text on hover */
[data-submenu] a:hover {
    color: white !important;
}

/* Red button hover - keep white text, darken background */
a[class*="bg-red"]:hover,
button[class*="bg-red"]:hover {
    background-color: #c41e1e !important; /* Darker red */
    color: white !important;
}

/* White button hover (exclude nav toggle and mega menu items) */
/* Exclude contact cards by targeting only elements with bg-white (not bg-white/10) */
a[class*="bg-white"]:hover:not([data-nav-toggle]):not([data-submenu] a):not([class*="bg-white/"]),
button[class*="bg-white"]:hover:not([data-nav-toggle]):not([class*="bg-white/"]) {
    background-color: #f3f3f3 !important;
}

/* Button styles - lower corner radius to 4px */
button,
.btn,
a[class*="bg-red"],
a[class*="bg-white"][class*="text-blue"],
a.rounded-lg,
button.rounded-lg,
.rounded-lg[href*="/contact"],
[type="button"],
[type="submit"],
[role="button"] {
    border-radius: 4px !important;
}

/* Sticky CTA - flexible height to fit content */
[data-sticky-cta] {
    min-height: 112px;
}

/* Mega Menu - Full width with blue eyebrow text */
@media (width >= 64rem) {
    /* Make parent menu item relative to viewport */
    [data-menu-item] {
        position: static !important;
    }

    [data-submenu] {
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
    }

    /* Center the content within the mega menu */
    [data-submenu] > div {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Eyebrow text in menus should be white */
    [data-submenu] .text-yellow-300 {
        color: white !important;
    }
}

/* Footer - Extended height */
footer {
    min-height: auto !important;
}

/* Case study background - galaxy pattern */
.case-study-hero {
    background-image: url('../images/header-background.webp') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Accessibility utilities */
.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;
}

.focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* Remove cursor pointer from non-interactive yellow cards */
.group.cursor-pointer:not(a):not(button):not([role="button"]) {
    cursor: default !important;
}

/* Accordion focus states */
[data-accordion-trigger]:focus {
    outline: 2px solid var(--color-blue-hover);
    outline-offset: 4px;
}

[data-accordion-trigger]:focus-visible {
    outline: 2px solid var(--color-blue-hover);
    outline-offset: 4px;
}

/* Prevent background image scaling on accordion expansion */
[data-accordion-content] .bg-cover {
    background-size: cover !important;
    transform: none !important;
}