/* Shared policy page styles to match app theme and provide sticky footer */
:root{
  --foreground: #f3f4f6;
  --background: #21262c;
  --primary: #15ed9a;
  --page-max-width: 800px;
  --footer-height: 56px;
}
html,body{
  height:100%;
}
body{
  margin:0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:var(--foreground);
  line-height:1.6;
  /* ensure full viewport height so flex layout can push the footer to the bottom */
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background-color: var(--background);
  /* no bottom padding when using flex-based sticky footer */
}
a {
  color: var(--primary);
}

.text-primary { color: var(--primary); }

.policy-container{
  --policy-container-padding: 36px;
  padding:var(--policy-container-padding);
  display:flex;
  flex-direction:column;
  flex:1 0 auto; /* fill available space and allow main to grow and push footer down */
  max-width:var(--page-max-width);
  margin:0 auto;
}

/* Specific responsive wrapper used by faqs.html when we need a looser width on mobile */
.faq-container {
  width: min(800px, 90vw);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
header{margin-bottom:4px}
/* Ensure injected header row aligns button and title inline */
.policy-header-row{display:flex;align-items:flex-start;gap:6px}

/* Align the injected back button so it lines up with the page gutter.
   Use the container padding variable so responsive padding changes are respected. */
[data-policy-back-button], #policy-back-button {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* headers: use semi-bold (600) instead of full bold */
h1{font-size:1.25rem;margin:0 0 6px 0;color:var(--primary);font-weight:600}
h2{font-size:1.10rem;margin-top:18px;color:var(--primary);font-weight:600}
h3{font-size:1rem;margin-top:8px;margin-bottom:8px;color:var(--secondary);font-weight:600}
/* ensure all heading levels use semi-bold weight */
h1,h2,h3,h4,h5,h6{font-weight:600}
main{flex:1}
/* Flex-based sticky footer (no fixed positioning) */
footer.policy-footer{
  height:var(--footer-height);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f3f4f6;
  font-size:0.9rem;
  border-top: 1px solid color-mix(in oklab, var(--primary) 25%, transparent); /* divider */
  /* background: #14181f; */
  padding: 0 16px;
  box-sizing: border-box;
  margin-top: auto; /* push footer to bottom within the column flex layout */
}

/* Make footer sticky in older browsers: keep at bottom by default; when content grows it flows naturally. */
footer{flex-shrink:0}

/* small responsive tweak */
@media (max-width:640px){
  .policy-container{ --policy-container-padding:20px; padding:var(--policy-container-padding)}
}

/* Lightweight accordion styles for FAQs */
.accordion-button {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  font: inherit;
  text-align: left;
  border-radius: 2px;
}
.accordion-button:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.accordion-panel {
  padding: 0.25rem 0.5rem 0.75rem 0.5rem;
  margin-top: 0.25rem;
}
.accordion-item + .accordion-item {
  margin-top: 0.5rem;
}
.accordion-toggle-icon {
  display: inline-block;
  width: 1.25rem;
  text-align: center;
  transition: transform 0.2s ease;
}
.accordion-button[aria-expanded="true"] .accordion-toggle-icon {
  transform: rotate(45deg);
}
/* Use primary color for the icon */
.accordion-toggle-icon { color: var(--primary); }

/* Header back/close button used on standalone pages (injected by policy.js) */
[data-policy-back-button], #policy-back-button {
  color: var(--foreground);
  background: transparent;
  border-radius: 50%; /* circular */
  transition: background-color 180ms ease, transform 120ms ease;
}
[data-policy-back-button] svg, #policy-back-button svg { color: var(--primary); }
[data-policy-back-button]:focus, #policy-back-button:focus,
[data-policy-back-button]:focus-visible, #policy-back-button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Hover and focus-visible feedback */
[data-policy-back-button]:hover, #policy-back-button:hover,
[data-policy-back-button]:focus-visible, #policy-back-button:focus-visible {
  /* subtle tinted background using primary color at low opacity */
  background-color: rgba(12, 229, 146, 0.08);
  transform: translateX(-1px);
}