/* ============================================================
 * widgets.css — newsp-hybrid v3.0.0
 * Single source of truth: world clock, weather widget,
 * local-time timezone tooltip, currency converter,
 * and accessibility panel.
 * ============================================================ */

/* ── WORLD CLOCK STRIP ──────────────────────────────────── */
.world-clock-bar{
    background-color:var(--background-color);
    border-bottom:1px solid var(--border,rgba(128,128,128,.2));
    overflow:hidden;
    min-height:34px;
    height:auto;
    display:flex;
    align-items:center;
    padding:3px 0;
}
.world-clock-inner{
    display:flex;
    align-items:center;
    gap:0;
    white-space:nowrap;
    padding:0 42px;
    max-width:1580px;
    margin:0 auto;
    width:100%;
    box-sizing:border-box;
}
.wc-item{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:0 14px;
    border-right:1px solid var(--border,rgba(128,128,128,.2));
    font-family:var(--font1);
    font-size:11px;
    letter-spacing:.04em;
    line-height:1;
    color:var(--text-color);
}
.wc-item:first-child{padding-left:0;border-left:none}
.wc-city{
    font-weight:700;
    text-transform:uppercase;
    font-size:10px;
    letter-spacing:.08em;
    opacity:.7;
}
.wc-time{font-variant-numeric:tabular-nums}
@media(max-width:991px){.world-clock-bar{min-height:28px;height:auto;padding:2px 0}.wc-item{font-size:10px;padding:0 10px}}
@media(max-width:479px){.world-clock-bar{display:none}}

/* ── WEATHER WIDGET STRIP ───────────────────────────────── */
.weather-bar{
    background-color:var(--background-color);
    border-bottom:1px solid var(--border,rgba(128,128,128,.2));
    overflow:hidden;
    height:36px;
    display:flex;
    align-items:center;
    position:relative;
}
.weather-bar-inner{
    display:flex;
    align-items:center;
    gap:0;
    white-space:nowrap;
    padding:0 42px;
    max-width:1580px;
    margin:0 auto;
    width:100%;
    box-sizing:border-box;
    overflow:hidden;
}
.weather-scroll-track{
    display:flex;
    align-items:center;
    gap:0;
    animation:weather-scroll 60s linear infinite;
    will-change:transform;
}
.weather-scroll-track:hover{animation-play-state:paused}
@keyframes weather-scroll{
    0%{transform:translateX(0)}
    100%{transform:translateX(-50%)}
}
.weather-day{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:0 18px;
    border-right:1px solid var(--border,rgba(128,128,128,.2));
    font-family:var(--font1);
    font-size:11px;
    letter-spacing:.03em;
    line-height:1;
    color:var(--text-color);
    flex-shrink:0;
}
.weather-day:first-child{padding-left:0}
.weather-day-name{
    font-weight:700;
    text-transform:uppercase;
    font-size:10px;
    letter-spacing:.08em;
    opacity:.7;
    min-width:28px;
}
.weather-icon{font-size:14px;line-height:1}
.weather-temps{font-variant-numeric:tabular-nums;white-space:nowrap}
.weather-high{font-weight:600}
.weather-low{opacity:.6}
.weather-location{
    font-size:10px;
    letter-spacing:.06em;
    text-transform:uppercase;
    opacity:.5;
    padding:0 14px;
    flex-shrink:0;
}
.weather-loading{
    font-family:var(--font1);
    font-size:11px;
    opacity:.5;
    padding:0 14px;
    letter-spacing:.04em;
}
/* Footer weather bar */
.footer-weather-bar{
    background-color:var(--background-color);
    border-bottom:1px solid var(--border,rgba(128,128,128,.2));
    overflow:hidden;
    height:36px;
    display:flex;
    align-items:center;
}
@media(max-width:991px){
    .weather-bar{height:32px}
    .weather-day{font-size:10px;padding:0 12px}
}
@media(max-width:479px){
    .weather-bar{display:none}
    .footer-weather-bar .weather-day{font-size:10px;padding:0 10px}
}

/* ── LOCAL TIME / TIMEZONE TOOLTIP ──────────────────────── */
.local-time-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    cursor:default;
    position:relative;
}
.local-time-badge .local-time-icon{
    width:12px;height:12px;
    opacity:.55;
    flex-shrink:0;
}
.local-time-badge .local-time-text{
    font-family:var(--font1);
    font-size:11px;
    line-height:1;
    opacity:.8;
}
/* Tooltip */
.local-time-badge::after{
    content:attr(data-tooltip);
    position:absolute;
    bottom:calc(100% + 6px);
    left:50%;
    transform:translateX(-50%);
    background-color:var(--text-color);
    color:var(--background-color);
    font-family:var(--font1);
    font-size:11px;
    line-height:1.4;
    padding:6px 10px;
    white-space:nowrap;
    pointer-events:none;
    opacity:0;
    transition:opacity .2s ease;
    z-index:100;
    max-width:260px;
    white-space:normal;
    text-align:center;
}
.local-time-badge:hover::after,
.local-time-badge:focus::after{opacity:1}
/* Tooltip caret */
.local-time-badge::before{
    content:'';
    position:absolute;
    bottom:calc(100% + 2px);
    left:50%;
    transform:translateX(-50%);
    border:4px solid transparent;
    border-top-color:var(--text-color);
    pointer-events:none;
    opacity:0;
    transition:opacity .2s ease;
    z-index:101;
}
.local-time-badge:hover::before,
.local-time-badge:focus::before{opacity:1}

/* ── CURRENCY CONVERTER ──────────────────────────────────── */
.currency-converter-wrapper{
    padding:28px 0 36px;
    border-top:3px solid transparent;
    background:
        linear-gradient(var(--background-color),var(--background-color)) padding-box,
        var(--brand-gradient) border-box;
    margin-bottom:32px;
}
.currency-converter-inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    padding:0 4px;
}
.currency-converter-label{
    font-family:var(--font2);
    font-size:15px;
    font-weight:600;
    letter-spacing:.03em;
    color:var(--text-color);
    white-space:nowrap;
}
.currency-converter-select{
    font-family:var(--font1);
    font-size:14px;
    padding:7px 12px;
    border:1px solid var(--border,rgba(128,128,128,.3));
    background-color:var(--background-color);
    color:var(--text-color);
    cursor:pointer;
    min-width:180px;
    outline:none;
    transition:border-color .2s ease;
}
.currency-converter-select:hover,.currency-converter-select:focus{
    border-color:var(--brand-g1,#F545A2);
}
.currency-converter-note{
    font-family:var(--font1);
    font-size:11px;
    opacity:.55;
    letter-spacing:.02em;
}
/* Tier price spans updated by JS */
.tier-price-converted{
    font-size:.85em;
    opacity:.7;
    font-style:italic;
    margin-left:6px;
}
html[data-theme="dark"] .currency-converter-wrapper{
    background:
        linear-gradient(#1a1a1a,#1a1a1a) padding-box,
        var(--brand-gradient) border-box;
}
@media(max-width:479px){
    .currency-converter-inner{flex-direction:column;align-items:flex-start}
    .currency-converter-select{width:100%}
}

/* ── ACCESSIBILITY PANEL ─────────────────────────────────── */
/*
 * Gear icon inverse logic:
 *   Dark mode:  box = #f0f0f0 (light),  icon = #111111 (dark)  — 16.75:1 AAA
 *   Light mode: box = #1a1a1a (dark),   icon = #f4f2ee (light) — 17.5:1  AAA
 *   The box is always the inverse of the page background.
 *   The icon inherits `color` which is always the inverse of the box.
 */
#a11y-fab,
.a11y-fab{
    position:fixed;
    left:max(18px, calc(env(safe-area-inset-left, 0px) + 18px));
    bottom:max(18px, calc(env(safe-area-inset-bottom, 0px) + 18px));
    z-index:10001;
    width:52px;
    height:52px;
    border-radius:14px;
    background:#f0f0f0;
    color:#111111;
    border:1px solid rgba(17,17,17,.16);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 26px rgba(0,0,0,.42);
    transition:transform .2s ease,box-shadow .2s ease,background-color .3s ease,color .3s ease,border-color .3s ease;
    outline:none;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}
html[data-theme="light"] #a11y-fab,
html[data-theme="light"] .a11y-fab{
    background:#1a1a1a;
    color:#f4f2ee;
    border-color:rgba(244,242,238,.16);
    box-shadow:0 10px 24px rgba(0,0,0,.18);
}
#a11y-fab:hover,
.a11y-fab:hover{
    transform:translateY(-1px) scale(1.05);
    box-shadow:0 14px 30px rgba(0,0,0,.46);
}
html[data-theme="light"] #a11y-fab:hover,
html[data-theme="light"] .a11y-fab:hover{
    box-shadow:0 14px 28px rgba(0,0,0,.22);
}
#a11y-fab:focus-visible,
.a11y-fab:focus-visible{outline:3px solid var(--brand-g1,#F545A2);outline-offset:3px}
#a11y-fab svg,
.a11y-fab svg{
    width:26px;
    height:26px;
    fill:currentColor;
    stroke:none;
}
@media (max-width: 479px){
    #a11y-fab,
    .a11y-fab{
        left:max(14px, calc(env(safe-area-inset-left, 0px) + 14px));
        bottom:max(14px, calc(env(safe-area-inset-bottom, 0px) + 14px));
        width:48px;
        height:48px;
        border-radius:12px;
    }
}
.a11y-panel{
    position:fixed;
    bottom:88px;left:28px;
    z-index:9991;
    width:320px;
    max-height:80vh;
    overflow-y:auto;
    background-color:var(--background-color);
    color:var(--text-color);
    border:1px solid var(--text-color);
    box-shadow:0 8px 32px rgba(0,0,0,.22);
    font-family:var(--font1);
    transform:translateY(12px);
    opacity:0;
    pointer-events:none;
    transition:transform .25s ease,opacity .25s ease;
}
.a11y-panel.open{transform:translateY(0);opacity:1;pointer-events:auto}
.a11y-panel-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px 14px;
    border-bottom:1px solid var(--text-color);
}
.a11y-panel-title{
    font-family:var(--font2);font-size:17px;font-weight:600;
    margin:0;letter-spacing:.02em;color:var(--text-color);
}
.a11y-close{
    display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;cursor:pointer;color:var(--text-color);
    opacity:.7;transition:opacity .2s ease;background:none;border:none;padding:0;outline:none;
}
.a11y-close:hover{opacity:1}
.a11y-close:focus-visible{outline:2px solid var(--text-color);outline-offset:2px}
.a11y-panel-body{padding:8px 0}
.a11y-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 20px;gap:12px;
    border-bottom:1px solid rgba(128,128,128,.15);
}
.a11y-row:last-child{border-bottom:none}
.a11y-row-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.a11y-row-label{font-size:14px;font-weight:600;color:var(--text-color);cursor:pointer;line-height:1.3}
.a11y-row-desc{font-size:11px;color:var(--text-color);opacity:.55;line-height:1.4}
.a11y-toggle{background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;outline:none}
.a11y-toggle:focus-visible .a11y-toggle-track{outline:2px solid var(--text-color);outline-offset:2px}
.a11y-toggle-track{
    position:relative;display:block;width:42px;height:24px;border-radius:12px;
    background-color:rgba(128,128,128,.3);transition:background-color .25s ease;
}
.a11y-toggle[aria-checked="true"] .a11y-toggle-track{
    background:linear-gradient(90deg,var(--brand-g1,#F545A2),var(--brand-g3,#9B4DB8));
}
.a11y-toggle-thumb{
    position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
    background-color:#ffffff;transition:transform .25s ease;pointer-events:none;
    box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.a11y-toggle[aria-checked="true"] .a11y-toggle-thumb{transform:translateX(18px)}
.a11y-text-size-controls{display:flex;gap:6px;flex-shrink:0}
.a11y-size-btn{
    background:none;border:1px solid var(--text-color);color:var(--text-color);
    font-family:var(--font2);cursor:pointer;padding:4px 10px;font-size:13px;
    transition:background-color .2s ease,color .2s ease;outline:none;line-height:1.4;
}
.a11y-size-btn:hover,.a11y-size-btn.active{background-color:var(--text-color);color:var(--background-color)}
.a11y-size-btn:focus-visible{outline:2px solid var(--text-color);outline-offset:2px}
.a11y-panel-footer{padding:14px 20px;border-top:1px solid var(--text-color)}
.a11y-reset-btn{
    width:100%;padding:9px 0;background:none;border:1px solid var(--text-color);
    color:var(--text-color);font-family:var(--font1);font-size:13px;
    letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
    transition:background-color .2s ease,color .2s ease;outline:none;
}
.a11y-reset-btn:hover{background-color:var(--text-color);color:var(--background-color)}
.a11y-reset-btn:focus-visible{outline:2px solid var(--text-color);outline-offset:2px}
/* Dark mode panel */
html[data-theme="dark"] .a11y-panel{box-shadow:0 8px 32px rgba(0,0,0,.55)}
html[data-theme="dark"] .a11y-toggle-track{background-color:rgba(255,255,255,.2)}
/* High contrast overrides */
html.a11y-contrast .a11y-fab{background-color:#ffffff!important;color:#000000!important}
html.a11y-contrast .a11y-fab svg{fill:#000000!important;stroke:none!important}
html.a11y-contrast .a11y-panel{background-color:#000000!important;border-color:#ffffff!important}
html.a11y-contrast .a11y-panel *{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;background-color:transparent!important;border-color:#ffffff!important}
html.a11y-contrast .a11y-toggle[aria-checked="true"] .a11y-toggle-track{background:#ffffff!important}
html.a11y-contrast .a11y-toggle-thumb{background-color:#000000!important}
html.a11y-contrast .a11y-size-btn.active,
html.a11y-contrast .a11y-size-btn:hover,
html.a11y-contrast .a11y-reset-btn:hover{background-color:#ffffff!important;color:#000000!important;-webkit-text-fill-color:#000000!important}
@media(max-width:479px){
    .a11y-panel{width:calc(100vw - 32px);left:16px;bottom:80px}
    .a11y-fab{left:16px;bottom:20px;width:44px;height:44px}
}

/* ── LIVE ACCESSIBILITY EFFECTS ───────────────────────────── */
html.a11y-dyslexia body,
html.a11y-dyslexia button,
html.a11y-dyslexia input,
html.a11y-dyslexia select,
html.a11y-dyslexia textarea,
html.a11y-dyslexia .post-content,
html.a11y-dyslexia .post-content * {
    font-family: "OpenDyslexic", "Atkinson Hyperlegible", Arial, sans-serif !important;
}

html.a11y-text-lg {
    font-size: 115%;
}

html.a11y-text-xl {
    font-size: 130%;
}

html.a11y-text-lg body,
html.a11y-text-xl body {
    text-rendering: optimizeLegibility;
}

html.a11y-text-lg .post-content,
html.a11y-text-xl .post-content,
html.a11y-text-lg .post-content p,
html.a11y-text-xl .post-content p,
html.a11y-text-lg .post-content li,
html.a11y-text-xl .post-content li,
html.a11y-text-lg .post-excerpt,
html.a11y-text-xl .post-excerpt,
html.a11y-text-lg .newsletter-heading,
html.a11y-text-xl .newsletter-heading,
html.a11y-text-lg .footer-description-copy,
html.a11y-text-xl .footer-description-copy,
html.a11y-text-lg .section-heading,
html.a11y-text-xl .section-heading,
html.a11y-text-lg .navbar-links a,
html.a11y-text-xl .navbar-links a,
html.a11y-text-lg .account-button-text,
html.a11y-text-xl .account-button-text,
html.a11y-text-lg .post-authors,
html.a11y-text-xl .post-authors,
html.a11y-text-lg .post-tag-list,
html.a11y-text-xl .post-tag-list,
html.a11y-text-lg .sidebar-info-content,
html.a11y-text-xl .sidebar-info-content,
html.a11y-text-lg .subscribe-input,
html.a11y-text-xl .subscribe-input,
html.a11y-text-lg .footer-meta-copy,
html.a11y-text-xl .footer-meta-copy {
    font-size: 1em !important;
}

html.a11y-text-lg h1,
html.a11y-text-lg h2,
html.a11y-text-lg h3,
html.a11y-text-lg h4,
html.a11y-text-lg h5,
html.a11y-text-lg h6,
html.a11y-text-xl h1,
html.a11y-text-xl h2,
html.a11y-text-xl h3,
html.a11y-text-xl h4,
html.a11y-text-xl h5,
html.a11y-text-xl h6,
html.a11y-text-lg .post-title,
html.a11y-text-xl .post-title,
html.a11y-text-lg .big-text,
html.a11y-text-xl .big-text,
html.a11y-text-lg .text-card-heading,
html.a11y-text-xl .text-card-heading {
    line-height: 1.15 !important;
}

html.a11y-spacing body,
html.a11y-spacing p,
html.a11y-spacing li,
html.a11y-spacing blockquote,
html.a11y-spacing .post-content,
html.a11y-spacing .post-content p,
html.a11y-spacing .post-content li,
html.a11y-spacing .footer-description-copy,
html.a11y-spacing .sidebar-info-content,
html.a11y-spacing .card-content,
html.a11y-spacing .post-excerpt {
    line-height: 1.9 !important;
    letter-spacing: 0.02em;
}

html.a11y-spacing .navbar-links a,
html.a11y-spacing .button,
html.a11y-spacing button,
html.a11y-spacing input,
html.a11y-spacing .post-tag,
html.a11y-spacing .footer-meta-copy {
    letter-spacing: 0.03em !important;
}

html.a11y-links a,
html.a11y-links .post-content a,
html.a11y-links .footer-meta-copy a,
html.a11y-links .navbar-links a,
html.a11y-links .post-tag,
html.a11y-links .social {
    text-decoration: underline !important;
    text-decoration-thickness: 0.14em !important;
    text-underline-offset: 0.18em !important;
}

html.a11y-links a:hover,
html.a11y-links a:focus-visible {
    color: var(--brand-g1, #F545A2) !important;
}

html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

html.a11y-grayscale,
html.a11y-grayscale body,
html.a11y-grayscale img,
html.a11y-grayscale video,
html.a11y-grayscale picture,
html.a11y-grayscale .site-content {
    filter: grayscale(1) !important;
}

html.a11y-contrast,
html.a11y-contrast body,
html.a11y-contrast .site-content,
html.a11y-contrast .site-main,
html.a11y-contrast .post-content,
html.a11y-contrast .post-sidebar,
html.a11y-contrast .post-sidebar-info,
html.a11y-contrast .site-footer,
html.a11y-contrast .header,
html.a11y-contrast .navbar-search-overlay,
html.a11y-contrast .card,
html.a11y-contrast .newsletter,
html.a11y-contrast .subscribe-wrapper,
html.a11y-contrast .footer-subscribe-wrapper,
html.a11y-contrast .sidebar-info-content {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
}

html.a11y-contrast a,
html.a11y-contrast p,
html.a11y-contrast li,
html.a11y-contrast h1,
html.a11y-contrast h2,
html.a11y-contrast h3,
html.a11y-contrast h4,
html.a11y-contrast h5,
html.a11y-contrast h6,
html.a11y-contrast span,
html.a11y-contrast strong,
html.a11y-contrast em,
html.a11y-contrast small,
html.a11y-contrast .button,
html.a11y-contrast button,
html.a11y-contrast input,
html.a11y-contrast textarea,
html.a11y-contrast select {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #ffffff !important;
}

html.a11y-contrast a:hover,
html.a11y-contrast a:focus-visible,
html.a11y-contrast button:hover,
html.a11y-contrast button:focus-visible {
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

html.a11y-contrast img,
html.a11y-contrast video {
    filter: grayscale(1) contrast(1.15) !important;
}