@charset "utf-8";
/**
 * ClientViewAda.css
 * Accessible-mode additions: the "In this scene" section (text equivalents of hotspots, media, links, overlay text and map
 * legends) and the scene info box. Loaded after ClientViewPage.css, which holds the rest of the accessible styles.
 * Plain static CSS: NEVER put PHP tags in this file.
 */

#ada-infobox { margin: 18px 0 0; padding: 12px 14px; background: rgba(0,0,0,0.25); border: 1px solid var(--brand-border); border-left: 4px solid var(--brand-primary); border-radius: 6px; }
#ada-infobox[hidden], #ada-features[hidden] { display: none; }
#ada-infobox-heading { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--brand-label-on-tint); margin: 0 0 6px; font-weight: 700; }
#ada-infobox-heading:focus-visible { outline: 2px solid var(--brand-text-accent); outline-offset: 3px; border-radius: 4px; }
#ada-infobox-text { font-size: 16px; line-height: 1.6; color: #ddd; margin: 0; }

#ada-features { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--brand-border); }
#ada-features-heading { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--brand-label-on-tint); margin: 0 0 10px; font-weight: 700; }
#ada-features-heading:focus-visible { outline: 2px solid var(--brand-text-accent); outline-offset: 3px; border-radius: 4px; }
#ada-features-list { list-style: none; margin: 0; padding: 0; }

.ada-feature { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ada-feature:last-child { border-bottom: none; }
.ada-feature-note { font-size: 15px; color: #ccc; padding: 6px 0; }
.ada-feature-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--brand-num-text); background: var(--brand-num-bg); border-radius: 3px; padding: 2px 7px; }
.ada-feature-text { font-size: 16px; line-height: 1.55; color: #e6e6e6; }
.ada-feature-text a, .ada-feature-desc a { color: var(--brand-text-accent); }
.ada-feature-desc { font-size: 15px; line-height: 1.5; color: #bbb; }

.ada-feature-action { box-sizing: border-box; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.35; text-align: left; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 9px 14px; background: transparent; color: var(--brand-text-accent); border: 2px solid var(--brand-primary); border-radius: 6px; transition: background 0.15s, color 0.15s; }
.ada-feature-action:hover { background: var(--brand-primary); color: var(--brand-on-primary); }
.ada-feature-action:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #000; }
.ada-feature-link .ada-feature-action::after { content: " \2197"; }

@media (max-width: 768px) {
    #ada-infobox-text, .ada-feature-text { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .ada-feature-action { transition: none; }
}