/* ============================================================
   accessibility.css — Odisha Tourism Portal
   Adapted from accessibility_tool/style.css for Bootstrap 4
   ============================================================ */

/* ── Google Fonts: Lexend for dyslexia mode ── */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;700&display=swap');

/* ============================================================
   ACCESSIBILITY SIDEBAR (Custom, non-Bootstrap-5 offcanvas)
   ============================================================ */
#accessibilitySidebar {
    position: fixed;
    top: 0;
    right: -420px;
    width: 380px;
    max-width: 95vw;
    height: 100%;
    background: #ffffff;
    z-index: 9999;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -6px 0 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: 3px solid #AF6E20;
}

#accessibilitySidebar.acc-open {
    right: 0;
}

/* Header */
.acc-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: linear-gradient(135deg, #AF6E20 0%, #d97706 100%);
    color: #fff;
    flex-shrink: 0;
}

.acc-sidebar-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.acc-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 1rem;
    transition: background 0.2s;
}

.acc-close-btn:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Body */
.acc-sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Button Grid ── */
.acc-btn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* ── Individual Access Buttons ── */
.acc-btn {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #f9f9f9;
    border: 2px solid #e0e0e0;
    border-radius: 14px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    text-align: center;
    line-height: 1.2;
    padding: 8px 4px;
}

.acc-btn i {
    font-size: 1.3rem;
    color: #AF6E20;
}

.acc-btn:hover {
    background: #fff5e6;
    border-color: #AF6E20;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(175, 110, 32, 0.15);
}

.acc-btn.active {
    background: #fff0d9;
    border-color: #AF6E20;
    color: #7a4800;
    transform: scale(1.04);
    box-shadow: 0 4px 16px rgba(175, 110, 32, 0.25);
}

.acc-btn.active i {
    color: #7a4800;
}

.acc-btn.acc-disabled {
    background: #f0f0f0;
    border-color: #ccc;
    color: #aaa;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Ripple */
.acc-btn::after {
    content: "";
    position: absolute;
    width: 300%;
    height: 300%;
    background: rgba(175, 110, 32, 0.15);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.acc-btn:active::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: 0s;
}

/* ── Step Indicator ── */
.acc-steps {
    display: none;
    gap: 3px;
    justify-content: center;
    margin-top: 2px;
}

.acc-steps.visible {
    display: flex;
}

.acc-step {
    width: 16px;
    height: 4px;
    background: #ddd;
    border-radius: 4px;
    display: inline-block;
}

.acc-step.on {
    background: #AF6E20;
}

/* ── Reset Button ── */
.acc-reset-btn {
    width: 100%;
    padding: 10px;
    border: 2px solid #dc3545;
    border-radius: 10px;
    background: transparent;
    color: #dc3545;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.25s;
}

.acc-reset-btn:hover {
    background: #dc3545;
    color: #fff;
}

/* Backdrop disabled — sidebar slides in without darkening page */
#accBackdrop { display: none !important; }

/* ============================================================
   FLOATING ACCESSIBILITY BUTTON
   Styles defined in styles.css — no overrides needed here
   ============================================================ */

/* ============================================================
   ACCESSIBILITY FEATURE CLASSES
   Applied to <html> or <body> / #acc-main
   ============================================================ */


/* ── Dark Mode (High Contrast #ffff04 on Black) ── */
.acc-dark-mode body:not(#accessibilitySidebar):not(.floating-accessibility):not(.no-accessibility-effect),
.acc-dark-mode #acc-main:not(#accessibilitySidebar):not(.floating-accessibility):not(.no-accessibility-effect) {
    background-color: #000000 !important;
    color: #ffff04 !important;
}

/* Safe universal text color override (doesn't break backgrounds) */
.acc-dark-mode *:not(#accessibilitySidebar):not(#accessibilitySidebar *):not(.floating-accessibility):not(.floating-accessibility *):not(.no-accessibility-effect):not(.no-accessibility-effect *):not(#accBackdrop):not(.map-container):not(.map-container *) {
    color: #ffff04 !important;
    border-color: #ffff04 !important;
}

/* Targeted Background Overrides to prevent hiding images through transparent overlays */
.acc-dark-mode section,
.acc-dark-mode header,
.acc-dark-mode nav,
.acc-dark-mode footer,
.acc-dark-mode .card,
.acc-dark-mode .card-body,
.acc-dark-mode .modal-content,
.acc-dark-mode .bg-light,
.acc-dark-mode .bg-white,
.acc-dark-mode .glass-card,
.acc-dark-mode .tour-card,
.acc-dark-mode .pill,
.acc-dark-mode .expanding-card,
.acc-dark-mode .itin-card,
.acc-dark-mode .insta-card,
.acc-dark-mode .accordion-item,
.acc-dark-mode .offcanvas,
.acc-dark-mode .story-card,
.acc-dark-mode .card-body-custom {
    background: #000000 !important;
}

/* Explicitly protect transparent overlays and card gradients */
.acc-dark-mode .card-gradient,
.acc-dark-mode .expanding-card-overlay,
.acc-dark-mode .expanding-card-content,
.acc-dark-mode .expanding-card-details,
.acc-dark-mode .tour-card-content,
.acc-dark-mode .itin-card .card-content,
.acc-dark-mode .insta-overlay,
.acc-dark-mode .story-img-wrapper,
.acc-dark-mode .position-absolute,
.acc-dark-mode [class*="overlay"] {
    background-color: transparent !important;
    background: transparent !important;
}

/* Form controls need visible backgrounds and borders */
.acc-dark-mode input:not(#accessibilitySidebar *):not(.floating-accessibility *):not(.no-accessibility-effect *),
.acc-dark-mode textarea:not(#accessibilitySidebar *):not(.floating-accessibility *):not(.no-accessibility-effect *),
.acc-dark-mode select:not(#accessibilitySidebar *):not(.floating-accessibility *):not(.no-accessibility-effect *),
.acc-dark-mode button:not(#accessibilitySidebar *):not(.floating-accessibility):not(.no-accessibility-effect) {
    background-color: #000000 !important;
}

/* Restore transparent backgrounds for media/graphics */
.acc-dark-mode img,
.acc-dark-mode video,
.acc-dark-mode iframe,
.acc-dark-mode canvas,
.acc-dark-mode svg,
.acc-dark-mode svg * {
    background-color: transparent !important;
}

/* Ensure SVG and font icons use the contrast color, excluding interactive map elements and accessibility UI */
.acc-dark-mode svg:not(.map-container svg):not(#accessibilitySidebar svg):not(.floating-accessibility svg):not(.no-accessibility-effect svg),
.acc-dark-mode svg *:not(.map-container svg *):not(#accessibilitySidebar svg *):not(.floating-accessibility svg *):not(.no-accessibility-effect svg *),
.acc-dark-mode i:not(#accessibilitySidebar i):not(.floating-accessibility i):not(.no-accessibility-effect i) {
    fill: #ffff04 !important;
    color: #ffff04 !important;
}

/* Form controls need visible borders */
.acc-dark-mode input:not(#accessibilitySidebar *):not(.floating-accessibility *):not(.no-accessibility-effect *),
.acc-dark-mode textarea:not(#accessibilitySidebar *):not(.floating-accessibility *):not(.no-accessibility-effect *),
.acc-dark-mode select:not(#accessibilitySidebar *):not(.floating-accessibility *):not(.no-accessibility-effect *),
.acc-dark-mode button:not(#accessibilitySidebar *):not(.floating-accessibility):not(.no-accessibility-effect) {
    border: 1px solid #ffff04 !important;
}

/* Links */
.acc-dark-mode a:not(#accessibilitySidebar *):not(.floating-accessibility):not(.no-accessibility-effect) {
    color: #ffff04 !important;
    text-decoration: underline !important;
}

/* ── Dyslexia Font ── */
.acc-dyslexia-font body:not(#accessibilitySidebar):not(.floating-accessibility):not(.no-accessibility-effect),
.acc-dyslexia-font body *:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.material-symbols-outlined):not(.material-icons):not(#accessibilitySidebar):not(#accessibilitySidebar *):not(.floating-accessibility):not(.floating-accessibility *):not(.no-accessibility-effect):not(.no-accessibility-effect *) {
    font-family: 'Lexend', 'Comic Sans MS', cursive, sans-serif !important;
}

/* ── Invert Colors ── */
.acc-invert-colors {
    filter: invert(1) hue-rotate(180deg) !important;
}
/* Prevent inversion on sidebar, floating button, and .no-accessibility-effect */
.acc-invert-colors #accessibilitySidebar,
.acc-invert-colors .floating-accessibility,
.acc-invert-colors #accBackdrop,
.acc-invert-colors .no-accessibility-effect {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* ── Hide Images ── */
.acc-hide-images img {
    visibility: hidden !important;
}

.acc-hide-images [style*="background-image"] {
    background-image: none !important;
}

.acc-hide-images video {
    visibility: hidden !important;
}

/* ── Highlight Links ── */
.acc-highlight-links a {
    background-color: #facc15 !important;
    color: #000 !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    text-decoration: underline !important;
}

/* Fix navbar main mega menu toggles */
.acc-highlight-links .nav-item-wrapper > a.nav-link-custom {
    background-color: transparent !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 20px !important; /* keep hover bridge */
    text-decoration: none !important;
}
.acc-highlight-links .nav-item-wrapper > a.nav-link-custom .highlight-text {
    background-color: #facc15 !important;
    color: #000 !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    text-decoration: underline !important;
}

/* Fix mega-menu nested image card links */
.acc-highlight-links .mm-category > a {
    background-color: transparent !important;
    padding: 0 !important;
    text-decoration: none !important;
}
.acc-highlight-links .mm-category > a .mm-category-title {
    background-color: #facc15 !important;
    color: #000 !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    text-decoration: underline !important;
}

/* ── Big Cursor ── */
.acc-big-cursor:not(#accessibilitySidebar):not(.floating-accessibility):not(.no-accessibility-effect),
.acc-big-cursor *:not(#accessibilitySidebar):not(#accessibilitySidebar *):not(.floating-accessibility):not(.floating-accessibility *):not(.no-accessibility-effect):not(.no-accessibility-effect *) {
    cursor: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='64' height='64'><path d='M4 4l6 16 3-7 7-3z' fill='%23000000'/></svg>") 16 16, auto !important;
}

/* Utility class to always exclude from accessibility effects */
.no-accessibility-effect, .no-accessibility-effect * {
    all: unset !important;
    /* Optionally, re-apply your sidebar/button base styles here if needed */
}

/* ── Letter Spacing ── */
.acc-ls-1 body { letter-spacing: 1px !important; }
.acc-ls-2 body { letter-spacing: 2px !important; }
.acc-ls-3 body { letter-spacing: 3px !important; }

/* ── Line Height ── */
.acc-lh-1 body { line-height: 1.75 !important; }
.acc-lh-2 body { line-height: 2 !important; }
.acc-lh-3 body { line-height: 2.75 !important; }