/* About page card styles */
.about-page{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:60px 20px;
}

.about-card{
  max-width:900px;
  width:100%;
  /* More transparent and stronger blur for glassmorphism */
  background: rgba(255,255,255,0.55);
  border-radius:16px;
  padding:34px;
  box-shadow: var(--card-shadow, 0 12px 40px rgba(0,0,0,0.12));
  /* Use theme navy for readable text on the translucent card */
  color: var(--navy);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.18);
}

.about-logo{
  display:block;
  margin:0 auto 18px auto;
  width:120px;
  height:auto;
  transform: scale(2.6); /* use scale as requested */
  transform-origin:center center;
}

.about-section{ margin-bottom:20px }
.about-section { margin-bottom:20px }
.about-section h1 { margin:0 0 12px 0; font-size:30px; line-height:1.1; color:var(--deep-orange); font-weight:800; }
.about-section .lede { font-size:16px; color:var(--navy); margin-bottom:12px; font-weight:600 }
.about-section h2{ margin:0 0 8px 0; font-size:22px; color:var(--navy); font-weight:700 }
.about-section h3{ margin:0 0 8px 0; font-size:18px; color:var(--navy); font-weight:700 }
.about-section p{ margin:8px 0; line-height:1.6; color: rgba(15,31,84,0.95) }

/* Replace emoji with a decorative orange dot before headings */
.about-section h2::before,
.about-section h3::before{
  content: '•';
  /* use theme navy (blue) instead of orange */
  color: var(--navy);
  display: inline-block;
  margin-right: 8px; /* slightly closer to heading text */
  font-size: 1.05em;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Do NOT add the decorative dot before the welcome H1 */
.about-section:not(#welcome) h1::before{
  content: '•';
  color: var(--navy);
  display: inline-block;
  margin-right: 8px;
  font-size: 1.05em;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Center the welcome header and lede. Use same font and color as the
   login page tagline (Poppins, white) so the welcome phrase matches. */
#welcome { text-align: center; }
#welcome .lede {
  font-family: 'Space Grotesk', sans-serif; 
  color: #004534; /* match login tagline color */
  font-weight: 800;
  font-size: 25px;
  margin-bottom: 12px;
}

/* Prefix the first paragraph (answer) of each section except welcome with a dash '-' */
.about-section:not(#welcome) p:first-of-type::before{
  /* removed dash as requested; keep the pseudo-element disabled so spacing
     remains controlled by the paragraph padding */
  content: '';
  display: none;
}

/* Indent all paragraphs in non-welcome sections using padding-left so every
   line of the paragraph is moved (not just the first line). */
.about-section:not(#welcome) p{
  padding-left: 2.2em; /* visually like a tab for the whole block */
  position: relative; /* needed for the absolutely positioned ::before dash */
}

/* Ensure list items align with paragraph indentation as part of the answer */
/* List styling: align bullets close to the text and match paragraph indentation.
   Reset default UL padding and set a controlled left padding so bullets sit
   near the text rather than far away. Remove extra padding on LI. */
.about-section:not(#welcome) ul{
  padding-left: 2.2em; /* aligns bullet column with paragraph padding */
  margin: 0 0 1em 0;
  list-style-position: outside;
}
.about-section:not(#welcome) li{
  padding-left: 0; /* no extra gap after bullet */
  margin: 0.35em 0;
}

/* Table of contents */
.about-toc{ margin:6px 0 18px 0; padding:8px 12px; background:transparent }
.about-toc strong{ display:block; margin-bottom:6px }
.about-toc ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px }
.about-toc a{ color:var(--muted, #6b4b3b); text-decoration:none; font-size:14px; opacity:0.9 }
.about-toc a:hover{ text-decoration:underline }

/* Hide the site navbar/brand only on this page (about.css is page-specific) */
nav, .navbar, .navbar-brand, header.site-header { display:none !important }

/* visually-hidden for SEO keywords */
.sr-only{ position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap }

@media (max-width:768px){
  .about-card{ padding:20px }
  .about-logo{ transform: scale(1.6) }
  .about-toc ul{ gap:8px }
  .about-toc a{ font-size:13px }
}

/* Back button and audio control styles */
.about-back-btn{
  display:inline-block;
  margin-bottom:12px;
  color:var(--navy);
  background: rgba(255,255,255,0.06);
  padding:6px 10px;
  border-radius:8px;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.06);
}
.audio-toggle{
  position: absolute;
  right: 20px;
  top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.14);
  color: #05204a; /* darker navy for icon/text contrast */
  padding:8px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  box-shadow: 0 8px 20px rgba(2,24,60,0.12);
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
  backdrop-filter: blur(6px);
}
.audio-toggle:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 28px rgba(2,24,60,0.18);
}
.audio-toggle .icon{ font-size:16px }

/* When the browser blocks autoplay, prompt the user with a subtle pulse */
.audio-toggle.needs-interaction{
  animation: pulse 1.6s infinite ease-in-out;
  box-shadow: 0 10px 30px rgba(2,24,60,0.22), 0 0 0 6px rgba(255,255,255,0.02) inset;
}
.audio-toggle.muted{ opacity: 0.95 }

@keyframes pulse{
  0%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-3px) scale(1.03); }
  100%{ transform: translateY(0) scale(1); }
}

/* Strong CTA used on about/how-to pages */
.cta-strong{
  background: #004534; /* site green */
  color: #ffffff !important;
  font-weight: 700;
  padding: 10px 18px;
  display: inline-block;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,69,52,0.12);
  transition: transform 120ms ease, filter 120ms ease;
}
.cta-strong:hover{ filter: brightness(1.06); transform: translateY(-1px); }