/* =====================================================
   GPPC ACCESSIBILITY ENHANCEMENTS
   Optimized for elderly users & browser zoom
   WCAG 2.1 AA/AAA compliance
   ===================================================== */

/* ==================== ZOOM SUPPORT ==================== */

/* Ensure body never has horizontal scroll at any zoom level */
html {
    overflow-x: hidden;
    overflow-y: scroll; /* ALWAYS show vertical scrollbar */
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    overflow-y: auto; /* Allow vertical scrolling */
    /* Prevent text size adjustment in landscape on iOS */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ==================== VISIBLE SCROLLBAR (Critical for Elderly) ==================== */

/* Make scrollbar always visible and wider for elderly users */
::-webkit-scrollbar {
    width: 16px; /* Wider scrollbar for easy visibility */
    height: 16px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Light gray track */
    border-left: 1px solid #ddd;
}

::-webkit-scrollbar-thumb {
    background: var(--turquoise-800); /* Brand turquoise */
    border-radius: 8px;
    border: 3px solid #f1f1f1; /* Padding effect */
}

::-webkit-scrollbar-thumb:hover {
    background: var(--turquoise-900); /* Darker on hover */
}

::-webkit-scrollbar-thumb:active {
    background: var(--navy-800); /* Brand navy when dragging */
}

/* Firefox scrollbar styling */
* {
    scrollbar-width: auto; /* 'auto' or 'thin' - use auto for wider scrollbar */
    scrollbar-color: var(--turquoise-800) #f1f1f1; /* thumb and track color */
}

/* Ensure scrollbar is always visible (override any hiding) */
html::-webkit-scrollbar {
    display: block !important;
}

body::-webkit-scrollbar {
    display: block !important;
}

/* Container width flexibility for zoom */
.container {
    max-width: 100%;
    padding-left: clamp(1rem, 5vw, 3rem);
    padding-right: clamp(1rem, 5vw, 3rem);
}

/* Prevent horizontal overflow on all major containers */
.nav,
.navbar,
.hero,
.section,
footer,
.services-grid,
.insights-grid,
.footer-grid {
    max-width: 100%;
    overflow-x: hidden;
}

/* ==================== MINIMUM TOUCH TARGETS ==================== */

/* WCAG 2.5.5 AAA: Minimum 44x44px touch targets for elderly users */
.btn,
button,
a.nav-link,
.language-toggle a,
.insight-link,
input[type="submit"],
input[type="button"],
select,
.service-link {
    min-height: 44px;
    min-width: 44px;
    /* Add padding if text is short */
    padding: 0.75rem 1.5rem;
}

/* Ensure form inputs are large enough */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    min-height: 48px;
    font-size: 1rem; /* Never smaller than 16px to prevent iOS zoom on focus */
    padding: 0.75rem 1rem;
}

/* ==================== TEXT LEGIBILITY AT ZOOM ==================== */

/* Ensure minimum font size for body text */
body {
    font-size: clamp(1rem, calc(1rem + 0.2vw), 1.125rem);
    line-height: 1.6; /* Improved readability */
}

/* Headings scale gracefully */
h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.3;
}

h3 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.4;
}

/* Paragraph line length for readability (45-75 characters optimal) */
p {
    max-width: 75ch;
}

/* ==================== NAVIGATION ZOOM ADAPTATIONS ==================== */

/* Make navigation wrap on zoom instead of overflow */
.nav-menu {
    flex-wrap: wrap;
    gap: clamp(0.5rem, 2vw, 2rem);
    justify-content: flex-end;
}

/* Stack navigation on severe zoom (200%+) */
@media (max-width: 768px) {
    .nav-menu {
        flex-direction: column;
        align-items: flex-end;
        gap: 1rem;
    }
}

/* Logo scales but maintains visibility */
.logo-img,
.logo-image {
    max-width: 100%;
    height: auto;
    min-height: 40px; /* Maintain minimum visibility */
}

/* ==================== BUTTON & LINK VISIBILITY ==================== */

/* Larger, more visible CTAs for elderly users */
.btn-primary,
.btn-outline {
    font-size: 1.125rem;
    font-weight: 600;
    padding: 1rem 2rem;
    border-width: 2px; /* Thicker borders for visibility */
}

/* Increase hover/focus areas */
.btn,
a {
    position: relative;
}

.btn::before,
a::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    /* Invisible but clickable padding area */
}

/* ==================== FOCUS INDICATORS ==================== */

/* Strong, visible focus indicators for keyboard navigation */
*:focus {
    outline: 3px solid var(--turquoise-800);
    outline-offset: 2px;
}

/* Focus visible for keyboard users only */
*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 3px solid var(--turquoise-800);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(121, 201, 206, 0.2);
}

/* ==================== HIGH CONTRAST MODE SUPPORT ==================== */

/* Windows High Contrast Mode */
@media (prefers-contrast: high) {
    .btn-primary {
        border: 2px solid currentColor;
    }

    .nav-link::after {
        background: currentColor;
    }
}

/* ==================== REDUCED MOTION ==================== */

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

/* ==================== FORM ACCESSIBILITY ==================== */

/* Larger checkboxes and radio buttons */
input[type="checkbox"],
input[type="radio"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

/* Form labels clearly associated and clickable */
label {
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: inline-block;
}

/* Error messages clearly visible */
.error,
.form-error {
    color: var(--error);
    font-size: 1rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* ==================== CARD/GRID LAYOUTS AT ZOOM ==================== */

/* Service cards reflow gracefully */
.services-grid,
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* Ensure cards don't overflow */
.service-card,
.insight-card,
.card {
    max-width: 100%;
    overflow: hidden;
}

/* ==================== IMAGE SCALING ==================== */

/* All images scale within containers */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Hero images don't cause horizontal scroll */
.hero-image,
.service-image,
.insight-thumbnail,
.about-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ==================== TABLE RESPONSIVENESS ==================== */

/* Tables scroll horizontally instead of breaking layout */
table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* ==================== FOOTER AT ZOOM ==================== */

/* Footer grid stacks on zoom */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 2rem;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: left;
    }
}

/* ==================== SKIP TO MAIN CONTENT ==================== */

/* Accessibility: Skip navigation link for keyboard users */
.skip-to-main {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--navy-800);
    color: var(--white);
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 600;
    z-index: 1000;
    border-radius: 0 0 4px 0;
}

.skip-to-main:focus {
    top: 0;
}

/* ==================== PRINT STYLES ==================== */

@media print {
    /* Optimize for printing */
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
    }

    /* Hide non-essential elements */
    nav,
    .btn,
    .language-toggle,
    footer {
        display: none;
    }
}

/* ==================== ZOOM LEVEL SPECIFIC ADJUSTMENTS ==================== */

/* At 150% zoom and above, simplify layout further */
@media (max-width: 1200px) {
    .services-grid,
    .insights-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    }

    /* Reduce complexity in navigation */
    .nav-menu {
        gap: 1rem;
    }
}

/* At 200% zoom (WCAG requirement), stack everything */
@media (max-width: 900px) {
    .services-grid,
    .insights-grid {
        grid-template-columns: 1fr;
    }

    /* Hero content easier to read */
    .hero-content {
        text-align: center;
        padding: 2rem 1rem;
    }

    /* Buttons full width for easy clicking */
    .btn {
        width: 100%;
        text-align: center;
    }
}

/* ==================== TEXT SELECTION ==================== */

/* Comfortable text selection */
::selection {
    background-color: var(--turquoise-300);
    color: var(--navy-900);
}

::-moz-selection {
    background-color: var(--turquoise-300);
    color: var(--navy-900);
}

/* ==================== CURSOR INDICATORS ==================== */

/* Clearer cursor feedback */
button,
a,
label,
select,
input[type="submit"],
input[type="button"] {
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* ==================== LANGUAGE SUPPORT ==================== */

/* Ensure Chinese characters render properly at all sizes */
:lang(zh),
:lang(zh-Hant),
:lang(zh-Hans) {
    font-family: var(--font-chinese);
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Better line breaking for Chinese text */
.chinese-text,
[lang="zh"],
[lang="zh-Hant"],
[lang="zh-Hans"] {
    line-height: 1.8;
    letter-spacing: 0.02em;
}

/* ==================== TOOLTIPS & HELP TEXT ==================== */

/* Larger, more readable tooltips */
[title],
[aria-label] {
    position: relative;
}

/* Custom tooltip styling for better visibility */
.tooltip {
    font-size: 1rem;
    padding: 0.75rem 1rem;
    background: var(--navy-900);
    color: var(--white);
    border-radius: var(--radius-md);
    max-width: 300px;
}