/**
 * IP CHAYKA Accessibility - Frontend Styles
 * 
 * @package IP_CHAYKA_Accessibility
 * @version 1.0.7
 */

:root {
    --ipca-font-scale: 1;
    --ipca-bg-color: inherit;
    --ipca-text-color: inherit;
    --ipca-link-color: inherit;
    --ipca-focus-outline-color: #005fcc;
    --ipca-focus-outline-width: 3px;
    --ipca-focus-outline-offset: 2px;
    --ipca-toolbar-bg: #ffffff;
    --ipca-toolbar-text: #333333;
    --ipca-toolbar-border: #dddddd;
    --ipca-toolbar-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --ipca-toolbar-radius: 12px;
    --ipca-toolbar-z: 999990;
    --ipca-btn-bg: #f5f5f5;
    --ipca-btn-hover: #e0e0e0;
    --ipca-btn-active: #005fcc;
    --ipca-btn-active-text: #ffffff;
    --ipca-btn-border: #dddddd;
    --ipca-toggle-bg: #005fcc;
    --ipca-toggle-text: #ffffff;
    --ipca-toggle-size: 56px;
}

html[data-ipca-scale] { font-size: calc(16px * var(--ipca-font-scale)) !important; }

/* Dark Mode Variables */
html[data-ipca-mode="dark"] {
    --ipca-bg-color: #1a1a1a; --ipca-bg-secondary: #2a2a2a;
    --ipca-text-color: #f5f5f5; --ipca-text-muted: #b0b0b0;
    --ipca-link-color: #6db3f2;
    --ipca-border-color: #3a3a3a; --ipca-placeholder-color: #888888;
    --ipca-toolbar-bg: #2a2a2a; --ipca-toolbar-text: #f5f5f5; --ipca-toolbar-border: #3a3a3a;
    --ipca-btn-bg: #3a3a3a; --ipca-btn-hover: #4a4a4a;
}
html[data-ipca-mode="dark"] body, html[data-ipca-mode="dark"] .site-content { background-color: var(--ipca-bg-color) !important; color: var(--ipca-text-color) !important; }
html[data-ipca-mode="dark"] a { color: var(--ipca-link-color) !important; }

/* High Contrast Variables */
html[data-ipca-mode="high-contrast"] {
    --ipca-bg-color: #000000; --ipca-bg-secondary: #000000;
    --ipca-text-color: #ffffff; --ipca-text-muted: #cccccc;
    --ipca-link-color: #ffff00;
    --ipca-border-color: #ffffff; --ipca-placeholder-color: #cccccc;
    --ipca-toolbar-bg: #000000; --ipca-toolbar-text: #ffffff; --ipca-toolbar-border: #ffffff;
    --ipca-btn-bg: #1a1a1a; --ipca-btn-hover: #333333;
}
html[data-ipca-mode="high-contrast"] body, html[data-ipca-mode="high-contrast"] .site-content { background-color: var(--ipca-bg-color) !important; color: var(--ipca-text-color) !important; }
html[data-ipca-mode="high-contrast"] a { color: var(--ipca-link-color) !important; text-decoration: underline !important; }

/* Sepia Variables */
html[data-ipca-mode="sepia"] {
    --ipca-bg-color: #f4ecd8; --ipca-bg-secondary: #e8dcc0;
    --ipca-text-color: #5c4b37; --ipca-text-muted: #8b7355;
    --ipca-link-color: #8b4513;
    --ipca-border-color: #d4c4a8; --ipca-placeholder-color: #8b7355;
    --ipca-toolbar-bg: #e8dcc0; --ipca-toolbar-text: #5c4b37; --ipca-toolbar-border: #d4c4a8;
    --ipca-btn-bg: #e0d4b8; --ipca-btn-hover: #d4c4a8;
}
html[data-ipca-mode="sepia"] body, html[data-ipca-mode="sepia"] .site-content { background-color: var(--ipca-bg-color) !important; color: var(--ipca-text-color) !important; }
html[data-ipca-mode="sepia"] a { color: var(--ipca-link-color) !important; }

/* Focus Indicators */
*:focus-visible { outline: var(--ipca-focus-outline-width) solid var(--ipca-focus-outline-color) !important; outline-offset: var(--ipca-focus-outline-offset) !important; }
*:focus:not(:focus-visible) { outline: none; }

/* Skip Link */
.ipca-skip-link { position: absolute; top: -100px; left: 0; z-index: 100000; padding: 12px 20px; background-color: #005fcc; color: #ffffff; text-decoration: none; font-size: 16px; font-weight: 600; border-radius: 0 0 4px 0; transition: top 0.2s ease; }
.ipca-skip-link:focus { top: 0; outline: 3px solid #ffff00; outline-offset: 2px; }

/* Toggle Button */
.ipca-toolbar-toggle { position: fixed; z-index: var(--ipca-toolbar-z); width: var(--ipca-toggle-size); height: var(--ipca-toggle-size); background-color: var(--ipca-toggle-bg); color: var(--ipca-toggle-text); border: none; border-radius: 50%; box-shadow: var(--ipca-toolbar-shadow); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.ipca-toolbar-toggle:hover { transform: scale(1.1); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); }
.ipca-toolbar-toggle:focus-visible { outline: var(--ipca-focus-outline-width) solid var(--ipca-focus-outline-color); outline-offset: var(--ipca-focus-outline-offset); }
.ipca-toolbar-toggle svg { width: 28px; height: 28px; }
.ipca-toolbar-toggle.ipca-toolbar-bottom-right { bottom: 20px; right: 20px; }
.ipca-toolbar-toggle.ipca-toolbar-bottom-left { bottom: 20px; left: 20px; }
.ipca-toolbar-toggle.ipca-toolbar-top-right { top: 80px; right: 20px; }
.ipca-toolbar-toggle.ipca-toolbar-top-left { top: 80px; left: 20px; }

/* Toolbar Panel */
.ipca-toolbar { position: fixed; z-index: calc(var(--ipca-toolbar-z) + 1); width: 320px; max-width: 90vw; background-color: var(--ipca-toolbar-bg); color: var(--ipca-toolbar-text); border: 2px solid var(--ipca-toolbar-border); border-radius: var(--ipca-toolbar-radius); box-shadow: var(--ipca-toolbar-shadow); opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; }
.ipca-toolbar[aria-hidden="false"] { opacity: 1; visibility: visible; transform: translateY(0); }
.ipca-toolbar.ipca-toolbar-bottom-right { bottom: 90px; right: 20px; }
.ipca-toolbar.ipca-toolbar-bottom-left { bottom: 90px; left: 20px; }
.ipca-toolbar.ipca-toolbar-top-right { top: 150px; right: 20px; }
.ipca-toolbar.ipca-toolbar-top-left { top: 150px; left: 20px; }
.ipca-toolbar-inner { padding: 0; }
.ipca-toolbar-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--ipca-toolbar-border); }
.ipca-toolbar-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--ipca-toolbar-text); }
.ipca-toolbar-close { background: none; border: none; font-size: 28px; line-height: 1; color: var(--ipca-toolbar-text); cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: background-color 0.2s ease; }
.ipca-toolbar-close:hover { background-color: var(--ipca-btn-hover); }
.ipca-toolbar-content { padding: 20px; }
.ipca-control-group { margin-bottom: 20px; }
.ipca-control-group:last-child { margin-bottom: 0; }
.ipca-control-title { margin: 0 0 12px 0; font-size: 14px; font-weight: 600; color: var(--ipca-toolbar-text); text-transform: uppercase; letter-spacing: 0.5px; }
.ipca-font-controls { display: flex; gap: 8px; }
.ipca-font-controls .ipca-btn { flex: 1; }
.ipca-mode-controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

/* Buttons */
.ipca-btn { padding: 12px 16px; background-color: var(--ipca-btn-bg); color: var(--ipca-toolbar-text); border: 1px solid var(--ipca-btn-border); border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
.ipca-btn:hover { background-color: var(--ipca-btn-hover); transform: translateY(-1px); }
.ipca-btn:active { transform: translateY(0); }
.ipca-btn:focus-visible { outline: var(--ipca-focus-outline-width) solid var(--ipca-focus-outline-color); outline-offset: 2px; }
.ipca-btn.active { background-color: var(--ipca-btn-active); color: var(--ipca-btn-active-text); border-color: var(--ipca-btn-active); }
.ipca-btn-font-decrease, .ipca-btn-font-reset, .ipca-btn-font-increase { font-weight: 600; }
.ipca-btn-font-decrease { font-size: 12px; }
.ipca-btn-font-reset { font-size: 14px; }
.ipca-btn-font-increase { font-size: 16px; }
.ipca-btn-mode { flex-direction: column; padding: 10px 8px; }
.ipca-mode-icon { font-size: 20px; margin-bottom: 4px; }
.ipca-mode-label { font-size: 12px; }
.ipca-btn-reset { width: 100%; background-color: #dc3545; color: #ffffff; border-color: #dc3545; }
.ipca-btn-reset:hover { background-color: #c82333; border-color: #c82333; }

/* Screen Reader Only */
.ipca-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; }

/* Mobile */
@media screen and (max-width: 768px) {
    .ipca-toolbar { width: 280px; max-height: calc(100vh - 220px); overflow-y: auto; /* fallback for older browsers */ }
    .ipca-toolbar { max-height: calc(100dvh - 160px); /* modern browsers: accounts for mobile address bar */ }
    .ipca-toolbar-content { padding: 14px; }
    .ipca-toolbar-header { padding: 12px 14px; }
    .ipca-control-group { margin-bottom: 14px; }
    .ipca-control-title { margin-bottom: 8px; font-size: 12px; }
    .ipca-btn { padding: 8px 10px; font-size: 13px; }
    .ipca-btn-mode { padding: 8px 6px; }
    .ipca-mode-icon { font-size: 18px; margin-bottom: 2px; }
    .ipca-mode-label { font-size: 11px; }
    .ipca-toolbar-toggle { width: 48px; height: 48px; }
    .ipca-toolbar-toggle svg { width: 24px; height: 24px; }
    .ipca-toolbar-toggle.ipca-toolbar-bottom-right, .ipca-toolbar-toggle.ipca-toolbar-bottom-left { bottom: 16px; }
    .ipca-toolbar-toggle.ipca-toolbar-bottom-right { right: 16px; }
    .ipca-toolbar-toggle.ipca-toolbar-bottom-left { left: 16px; }
    .ipca-toolbar.ipca-toolbar-bottom-right, .ipca-toolbar.ipca-toolbar-bottom-left { bottom: 76px; }
    .ipca-toolbar.ipca-toolbar-bottom-right { right: 16px; }
    .ipca-toolbar.ipca-toolbar-bottom-left { left: 16px; }
}
@media screen and (max-width: 480px) {
    .ipca-toolbar { width: calc(100vw - 32px); }
    /* Keep 2-column grid on small screens — single column makes toolbar too tall */
    .ipca-mode-controls { grid-template-columns: repeat(2, 1fr); }
}

/* Admin Bar */
.admin-bar .ipca-toolbar-toggle.ipca-toolbar-top-right, .admin-bar .ipca-toolbar-toggle.ipca-toolbar-top-left { top: 112px; }
.admin-bar .ipca-toolbar.ipca-toolbar-top-right, .admin-bar .ipca-toolbar.ipca-toolbar-top-left { top: 182px; }
@media screen and (max-width: 782px) {
    .admin-bar .ipca-toolbar-toggle.ipca-toolbar-top-right, .admin-bar .ipca-toolbar-toggle.ipca-toolbar-top-left { top: 126px; }
    .admin-bar .ipca-toolbar.ipca-toolbar-top-right, .admin-bar .ipca-toolbar.ipca-toolbar-top-left { top: 196px; }
}

/* Print */
@media print { .ipca-toolbar, .ipca-toolbar-toggle, .ipca-skip-link { display: none !important; } }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .ipca-toolbar, .ipca-toolbar-toggle, .ipca-btn, .ipca-skip-link { transition: none !important; animation: none !important; }
    .ipca-toolbar-toggle:hover { transform: none; }
    .ipca-btn:hover { transform: none; }
    .ipca-toolbar[aria-hidden="false"] { transform: translateY(0); }
}