/**
 * GIGW 3.0 / STQC / WCAG 2.2 AA Accessibility Stylesheet
 * Cochin Port Authority - Government of India
 */

/* ============================================================
   1. SKIP NAVIGATION
   ============================================================ */
.skip-navigation {
    position: relative;
    z-index: 100000;
}

.skip-navigation a {
    position: absolute;
    left: -9999px;
    top: 0;
    padding: 12px 24px;
    background-color: #000000;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline;
    z-index: 100001;
    border: 2px solid #ffffff;
    border-radius: 0 0 4px 4px;
}

.skip-navigation a:focus {
    left: 10px;
    top: 0;
    outline: 3px solid #ffbf47;
    outline-offset: 2px;
}

/* ============================================================
   2. FOCUS STYLES - Never remove outline (WCAG 2.4.7)
   ============================================================ */
*:focus {
    outline: 3px solid #ffbf47 !important;
    outline-offset: 2px !important;
}

*:focus:not(:focus-visible) {
    outline: none !important;
}

*:focus-visible {
    outline: 3px solid #ffbf47 !important;
    outline-offset: 2px !important;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 3px solid #ffbf47 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(255, 191, 71, 0.4);
}

/* High contrast focus for dark backgrounds */
.footer_area *:focus,
.header_top *:focus {
    outline-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* ============================================================
   3. SCREEN READER ONLY - Visually hidden but accessible
   ============================================================ */
.sr-only,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ============================================================
   4. COLOUR CONTRAST - Minimum 4.5:1 for text (WCAG 1.4.3)
   ============================================================ */
/* Ensure links are distinguishable */
a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:hover {
    text-decoration: none;
}

/* Navigation links exception */
.navbar_nav a,
.header_menu_box a,
.footer_widgets a,
.dropdown-menu a {
    text-decoration: none;
}

.navbar_nav a:hover,
.navbar_nav a:focus,
.footer_widgets a:hover,
.footer_widgets a:focus {
    text-decoration: underline;
}

/* Placeholder contrast fix - WCAG 1.4.3 */
::placeholder {
    color: #595959 !important;
    opacity: 1 !important;
}

/* ============================================================
   5. RESPONSIVE / ZOOM - No horizontal scroll (WCAG 1.4.10)
   ============================================================ */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Table responsive wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ============================================================
   6. KEYBOARD NAVIGATION
   ============================================================ */
/* Dropdown menus keyboard accessible */
.menu-item-has-children:focus-within > .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Modal keyboard trap prevention */
.modal[aria-hidden="true"] {
    display: none;
}

/* ============================================================
   7. ANIMATION / MOTION - Respect reduced motion preference
   ============================================================ */
@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;
    }

    .preloader-wrap {
        display: none !important;
    }
}

/* ============================================================
   8. HIGH CONTRAST MODE SUPPORT
   ============================================================ */
@media (forced-colors: active) {
    a {
        text-decoration: underline;
    }
    
    button,
    .btn,
    .theme-btn {
        border: 2px solid ButtonText;
    }
    
    *:focus {
        outline: 3px solid Highlight !important;
    }
}

/* ============================================================
   9. PRINT STYLES - Accessible printing
   ============================================================ */
@media print {
    .skip-navigation,
    .preloader-wrap,
    .crt_mobile_menu,
    .modal_popup,
    #botmanWidgetRoot,
    .chatbot-widget {
        display: none !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }

    body {
        color: #000 !important;
        background: #fff !important;
    }
}

/* ============================================================
   10. BREADCRUMB STYLING (GIGW Requirement)
   ============================================================ */
.breadcrumb-nav {
    padding: 10px 0;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.breadcrumb-nav ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.breadcrumb-nav li {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}

.breadcrumb-nav li + li::before {
    content: "›";
    padding: 0 8px;
    color: #6c757d;
    font-weight: bold;
}

.breadcrumb-nav li a {
    color: #18608b;
    text-decoration: underline;
}

.breadcrumb-nav li[aria-current="page"] {
    color: #212529;
    font-weight: 600;
}

/* ============================================================
   11. FORM ACCESSIBILITY
   ============================================================ */
.form-error {
    color: #d32f2f;
    font-size: 0.875rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.form-error::before {
    content: "⚠";
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: #d32f2f !important;
    box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.2);
}

label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}

.required-indicator {
    color: #d32f2f;
    margin-left: 2px;
}

/* ============================================================
   12. TABLE ACCESSIBILITY
   ============================================================ */
table {
    border-collapse: collapse;
    width: 100%;
}

table caption {
    caption-side: top;
    text-align: left;
    font-weight: 600;
    padding: 8px 0;
    font-size: 1.1rem;
}

table th {
    background-color: #18608b;
    color: #ffffff;
    font-weight: 600;
    text-align: left;
    padding: 10px 12px;
}

table td {
    padding: 8px 12px;
    border-bottom: 1px solid #dee2e6;
}

/* ============================================================
   13. DOWNLOAD LINKS - File info display (GIGW Requirement)
   ============================================================ */
.download-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.download-link .file-info {
    font-size: 0.8rem;
    color: #555;
    font-weight: normal;
}

/* ============================================================
   14. LAST UPDATED DATE (GIGW Requirement)
   ============================================================ */
.page-metadata {
    padding: 10px 0;
    font-size: 0.85rem;
    color: #555;
    border-top: 1px solid #dee2e6;
    margin-top: 20px;
}

/* ============================================================
   15. EXTERNAL LINK INDICATOR
   ============================================================ */
a[target="_blank"]::after {
    content: " \29C9";
    font-size: 0.7em;
    vertical-align: super;
}

a[target="_blank"][aria-label]::after,
.social_media_v_one a[target="_blank"]::after,
.footer_widgets a[target="_blank"]::after {
    content: none;
}


/* ============================================================
   16. HIGH CONTRAST MODE
   ============================================================ */
body.high-contrast {
    background-color: #000000 !important;
    color: #ffffff !important;
}

body.high-contrast a {
    color: #ffff00 !important;
}

body.high-contrast .header_area,
body.high-contrast .header_top,
body.high-contrast .navbar_outer {
    background-color: #000000 !important;
    border-bottom: 2px solid #ffffff;
}

body.high-contrast .footer_area,
body.high-contrast .footer_widgets_wrap {
    background-color: #1a1a1a !important;
}

body.high-contrast .btn,
body.high-contrast .theme-btn,
body.high-contrast button {
    background-color: #333333 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

body.high-contrast img {
    filter: contrast(1.2);
}

body.high-contrast .price_plan_box,
body.high-contrast .card,
body.high-contrast .grid_box {
    background-color: #1a1a1a !important;
    border: 1px solid #ffffff !important;
}

body.high-contrast input,
body.high-contrast select,
body.high-contrast textarea {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

body.high-contrast table th {
    background-color: #333333 !important;
    color: #ffffff !important;
}

body.high-contrast table td {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #555555 !important;
}

/* ============================================================
   17. FONT SIZE CONTROL BUTTONS STYLING
   ============================================================ */
.font-size-btn,
.contrast-toggle-btn {
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    padding: 2px 8px;
    margin: 0 2px;
    cursor: pointer;
    font-size: 0.85rem;
    border-radius: 3px;
    line-height: 1.4;
    vertical-align: middle;
}

.font-size-btn:hover,
.font-size-btn:focus,
.contrast-toggle-btn:hover,
.contrast-toggle-btn:focus {
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================================
   18. CAROUSEL PAUSE BUTTON
   ============================================================ */
.carousel-pause-btn:focus {
    outline: 3px solid #ffbf47 !important;
    outline-offset: 2px !important;
}

/* ============================================================
   19. FEATURE SECTION LINK STYLING
   ============================================================ */
.icon_box_new_box_link {
    text-decoration: none !important;
    display: block;
}

.icon_box_new_box_link:focus .icon_box_new_box,
.icon_box_new_box_link:hover .icon_box_new_box {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.feature-title {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    margin: 0;
    color: inherit;
}