/* ═══════════════════════════════════════════════════════════════════
   Silver Talkies — Accessibility & i18n Toolbar
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page font-size steps (A / A+ / A++) ───────────────────────────
   Zoom applies only to #st-page-content (not the a11y toolbar).    */
html.st-font-step-0 #st-page-content { zoom: 1; }
html.st-font-step-1 #st-page-content { zoom: 1.1875; }
html.st-font-step-2 #st-page-content { zoom: 1.375; }

@supports not (zoom: 1) {
  html.st-font-step-0 #st-page-content { font-size: 100%; }
  html.st-font-step-1 #st-page-content { font-size: 118.75%; }
  html.st-font-step-2 #st-page-content { font-size: 137.5%; }
}

/* ── Toolbar strip (sits above the navbar) ──────────────────────── */
.st-a11y-bar {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             4px;
  padding:         4px 16px;
  background:      #f2f2f2;
  border-bottom:   1px solid #e0e0e0;
  font-size:       13px;
  flex-wrap:       wrap;
  position:        relative;
  z-index:         1000000000;
}

/* ── Shared button base (excludes font rating badges) ───────────── */
.st-a11y-bar button:not(.st-rating-badge-btn):not(.st-lang-cycle-btn),
.st-lang-btn {
  display:          inline-flex;
  align-items:      center;
  gap:              4px;
  padding:          3px 9px;
  border:           1px solid #ccc;
  border-radius:    4px;
  background:       #fff;
  color:            #333;
  font-size:        12px;
  font-weight:      500;
  cursor:           pointer;
  transition:       background 0.15s, color 0.15s, border-color 0.15s;
  line-height:      1.4;
  white-space:      nowrap;
}

.st-a11y-bar button:not(.st-rating-badge-btn):not(.st-lang-cycle-btn):hover,
.st-lang-btn:hover {
  background:    #ff4775;
  color:         #fff;
  border-color:  #ff4775;
}

/* Active / pressed state */
.st-a11y-active,
.st-lang-active {
  background:   #ff4775 !important;
  color:        #fff    !important;
  border-color: #ff4775 !important;
}

/* ── Font rating badge (single icon — click cycles A / A+ / A++) ── */
.st-a11y-bar .st-rating-badge-btn {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  padding:         0 !important;
  margin:          0 !important;
  border:          none !important;
  background:      transparent !important;
  box-shadow:      none !important;
  width:           52px;
  height:          24px;
  min-width:       52px;
  min-height:      24px;
  overflow:        visible;
  font-size:       0 !important;
  line-height:     0 !important;
  gap:             0 !important;
  cursor:          pointer;
  vertical-align:  middle;
}

.st-a11y-bar .st-rating-badge-btn:hover,
.st-a11y-bar .st-rating-badge-btn:focus {
  background:   transparent !important;
  border:       none !important;
  color:        inherit !important;
  outline:      none;
}

.st-a11y-bar .st-rating-badge-btn:hover .st-rating-badge__shape,
.st-a11y-bar .st-rating-badge-btn:focus .st-rating-badge__shape {
  fill: #34c0c5 !important;
}

.st-a11y-bar .st-rating-badge-btn--active-size {
  outline:        2px solid #ff4775;
  outline-offset: 2px;
  border-radius:  3px;
}

.st-rating-badge__svg {
  display:    block;
  width:      52px;
  height:     24px;
  flex-shrink: 0;
}

.st-rating-badge__shape {
  fill:       #2fadb1;
  transition: fill 0.15s ease;
}

.st-rating-badge__text {
  pointer-events: none;
  user-select:    none;
}

/* ── Divider ────────────────────────────────────────────────────── */
.st-a11y-divider {
  display:     inline-block;
  width:       1px;
  height:      18px;
  background:  #ccc;
  margin:      0 4px;
}

/* ── Icon-only toolbar buttons (contrast, voice) ────────────────── */
#st-contrast-btn.st-icon-btn,
#st-voice-btn {
  padding: 3px 8px !important;
  min-width: 32px;
  justify-content: center;
}

#st-contrast-btn svg {
  width:  18px;
  height: 18px;
  fill:   #2fadb1;
  flex-shrink: 0;
  transition: fill 0.15s ease, background 0.15s ease;
}

#st-contrast-btn:hover svg,
#st-contrast-btn:focus svg {
  fill: #34c0c5;
}

#st-contrast-btn.st-a11y-active {
  background:   #2fadb1 !important;
  border-color: #2fadb1 !important;
  color:        #fff !important;
}

#st-contrast-btn.st-a11y-active svg {
  fill: #ffffff !important;
}

#st-voice-btn {
  position: relative;
}

#st-voice-btn svg {
  width:  18px;
  height: 18px;
  fill:   #2fadb1;
  flex-shrink: 0;
  transition: fill 0.15s ease;
}

#st-voice-btn:hover svg,
#st-voice-btn:focus svg {
  fill: #34c0c5;
}

#st-voice-btn.st-voice-listening {
  animation:      st-voice-pulse 1s ease-in-out infinite;
  background:     #2fadb1 !important;
  border-color:   #2fadb1 !important;
  color:          #fff !important;
}

#st-voice-btn.st-voice-listening svg {
  fill: #ffffff !important;
}

@keyframes st-voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 173, 177, 0.55); }
  50%       { box-shadow: 0 0 0 8px rgba(47, 173, 177, 0); }
}

/* ── Voice toast notification ───────────────────────────────────── */
#st-voice-toast {
  position:      fixed;
  bottom:        24px;
  left:          50%;
  transform:     translateX(-50%) translateY(20px);
  background:    #2fadb1;
  color:         #fff;
  padding:       12px 22px;
  border-radius: 8px;
  font-size:     15px;
  font-weight:   500;
  z-index:       99999999;
  opacity:       0;
  pointer-events:none;
  transition:    opacity 0.25s, transform 0.25s;
  max-width:     90vw;
  text-align:    center;
  line-height:   1.4;
  box-shadow:    0 4px 16px rgba(47, 173, 177, 0.35);
}

#st-voice-toast.st-voice-toast--listening {
  background: #34c0c5;
}

.st-voice-toast--visible {
  opacity:   1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* ── Language dropdown ──────────────────────────────────────────── */
.st-lang-dropdown {
  position: relative;
  display:  inline-flex;
}

.st-lang-dropdown__menu {
  position:      absolute;
  top:           100%;
  right:         0;
  margin:        4px 0 0;
  padding:       4px 0;
  min-width:     130px;
  max-height:    280px;
  overflow-y:    auto;
  list-style:    none;
  background:    #fff;
  border:        1px solid #ccc;
  border-radius: 4px;
  box-shadow:    0 2px 8px rgba(0, 0, 0, 0.12);
  z-index:       1000000001;
}

.st-lang-dropdown__menu[hidden] {
  display: none;
}

.st-lang-dropdown__option {
  padding:    6px 12px;
  font-size:  12px;
  font-weight: 500;
  color:      #333;
  cursor:     pointer;
  line-height: 1.4;
}

.st-lang-dropdown__option:hover {
  background: #ff4775;
  color:      #fff;
}

.st-lang-dropdown__option[aria-selected="true"] {
  background: #f0fafb;
  color:      #2fadb1;
  font-weight: 700;
}

.st-lang-dropdown__option[aria-selected="true"]:hover {
  background: #ff4775;
  color:      #fff;
}

/* ── Language trigger (globe + short label) ─────────────────────── */
.st-lang-cycle-btn {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             4px !important;
  padding:         3px 8px !important;
  min-width:       auto !important;
  font-size:       inherit !important;
  line-height:     1 !important;
  border:          1px solid #ccc !important;
  border-radius:   4px !important;
  background:      #fff !important;
  cursor:          pointer;
}

.st-lang-cycle-btn:hover,
.st-lang-cycle-btn:focus {
  border-color: #34c0c5 !important;
}

.st-lang-cycle-btn__icon {
  width:  16px;
  height: 16px;
  fill:   #2fadb1;
  flex-shrink: 0;
  transition: fill 0.15s ease;
}

.st-lang-cycle-btn__label {
  font-size:      11px;
  font-weight:    700;
  color:          #2fadb1;
  letter-spacing: 0.3px;
  line-height:    1;
}

.st-lang-cycle-btn:hover .st-lang-cycle-btn__icon,
.st-lang-cycle-btn:focus .st-lang-cycle-btn__icon,
.st-lang-cycle-btn:hover .st-lang-cycle-btn__label,
.st-lang-cycle-btn:focus .st-lang-cycle-btn__label {
  fill:  #34c0c5;
  color: #34c0c5;
}

/* ── Toolbar label text ─────────────────────────────────────────── */
.st-a11y-label {
  font-size:   11px;
  color:       #777;
  font-weight: 500;
  padding:     0 2px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   High-contrast mode overrides
   Applied via .st-high-contrast on <body>
   ═══════════════════════════════════════════════════════════════════ */
body.st-high-contrast {
  background: #000 !important;
  color:      #fff !important;
}

body.st-high-contrast a,
body.st-high-contrast p,
body.st-high-contrast h1,
body.st-high-contrast h2,
body.st-high-contrast h3,
body.st-high-contrast h4,
body.st-high-contrast h5,
body.st-high-contrast h6,
body.st-high-contrast li,
body.st-high-contrast span,
body.st-high-contrast label {
  color: #fff !important;
}

body.st-high-contrast a {
  text-decoration: underline;
}

body.st-high-contrast .mynavbar,
body.st-high-contrast .navigation-wrap,
body.st-high-contrast .st-a11y-bar {
  background: #111 !important;
  border-color: #555 !important;
}

body.st-high-contrast .btn-grad-default,
body.st-high-contrast .clearbtn,
body.st-high-contrast .myspecial-loginbtn {
  background:   #ffffff !important;
  color:        #000000 !important;
  border-color: #ffffff !important;
}

body.st-high-contrast img {
  filter: contrast(1.1) brightness(0.9);
}

body.st-high-contrast #section-8,
body.st-high-contrast .testimonial-card-x4,
body.st-high-contrast .x-around-section,
body.st-high-contrast .about-st-w-section {
  background:   #111 !important;
  border-color: #555 !important;
}

body.st-high-contrast .card,
body.st-high-contrast .card-header {
  background: #111 !important;
  border-color: #555 !important;
}

body.st-high-contrast .card-header p button {
  color: #fff !important;
}

body.st-high-contrast .st-a11y-bar button:not(.st-rating-badge-btn):not(.st-lang-cycle-btn),
body.st-high-contrast .st-lang-btn {
  background:   #ffffff !important;
  color:        #000000 !important;
  border-color: #ffffff !important;
}

body.st-high-contrast .st-rating-badge__shape {
  fill: #ffffff !important;
}

body.st-high-contrast .st-rating-badge__text,
body.st-high-contrast .st-rating-badge__text tspan {
  fill: #000000 !important;
}

body.st-high-contrast .st-rating-badge-btn--active-size {
  outline-color: #ffffff !important;
}

body.st-high-contrast .st-a11y-active {
  background:   #ffffff !important;
  color:        #000000 !important;
  border-color: #ffffff !important;
}

body.st-high-contrast .st-lang-cycle-btn {
  background:   #ffffff !important;
  border-color: #ffffff !important;
}

body.st-high-contrast .st-lang-cycle-btn__icon {
  fill: #2fadb1 !important;
}

body.st-high-contrast .st-lang-cycle-btn__label {
  color: #2fadb1 !important;
}

body.st-high-contrast .st-lang-dropdown__menu {
  background:   #ffffff !important;
  border-color: #ffffff !important;
}

body.st-high-contrast .st-lang-dropdown__option {
  color: #000000 !important;
}

body.st-high-contrast .st-lang-dropdown__option[aria-selected="true"] {
  background: #e8e8e8 !important;
  color:      #000000 !important;
}

body.st-high-contrast #st-contrast-btn.st-a11y-active {
  background:   #2fadb1 !important;
  border-color: #2fadb1 !important;
  color:        #ffffff !important;
}

body.st-high-contrast #st-contrast-btn.st-a11y-active svg {
  fill: #ffffff !important;
}

body.st-high-contrast #st-contrast-btn:not(.st-a11y-active) svg {
  fill: #34c0c5 !important;
}

body.st-high-contrast #st-voice-btn svg {
  fill: #34c0c5 !important;
}

body.st-high-contrast #st-voice-btn.st-voice-listening {
  background:   #2fadb1 !important;
  border-color: #2fadb1 !important;
}

body.st-high-contrast #st-voice-btn.st-voice-listening svg {
  fill: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Tablet breakpoint  (768px – 991px gap not covered by Bootstrap md)
   ═══════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 768px) and (max-width: 991px) {
  #section-1 h1      { font-size: 32px; line-height: 44px; }
  #section-2 h2      { font-size: 30px; line-height: 42px; }
  #section-3 h6      { font-size: 28px; line-height: 40px; }
  #section-4 .x-heading-x4 { font-size: 30px; }
  #section-7 .success-stories-heading { font-size: 30px; }
  #section-8 .faq-heading-xp          { font-size: 30px; }
  #section-9 .still-question-heading  { font-size: 30px; }

  #section-5 #testimonial-owl .empower-text { font-size: 18px; line-height: 28px; }

  #section-4 .youtubevideo video,
  #section-5 #testimonial-owl .empower-img {
    min-height: 350px;
    max-height: 350px;
  }

  .st-a11y-bar { justify-content: center; }
}

/* ── Mobile: collapse toolbar neatly ───────────────────────────── */
@media screen and (max-width: 767px) {
  .st-a11y-bar {
    justify-content: center;
    padding:         5px 8px;
    gap:             6px;
  }
  .st-a11y-label { display: none; }
}