/* ══════════════════════════════════════════════════════
   Legal pages shared styles (terms, privacy)
   Reuses the same variable names as /en/ so that
   navbar + footer classes work identically.
   ══════════════════════════════════════════════════════ */

/* ── Light mode (default) ── */
:root {
  --bg: #fffdec;
  --text: #111;
  --text-secondary: #555;
  --border: #e4e3d7;
  --nav-bg: rgba(255, 253, 236, 0.85);
  --nav-border: rgba(228, 227, 215, 0.6);
  --footer-bg: #fffdec;
  --footer-text: #555;
  --footer-link-hover: #111;
  --footer-border: #e4e3d7;

  /* Spacing (same fluid scale as /en/) */
  --space-xs: clamp(12px, 8.36px + 0.97vw, 18px);
  --space-sm: clamp(16px, 11.14px + 1.3vw, 24px);
  --space-md: clamp(24px, 14.28px + 2.59vw, 40px);
  --space-lg: clamp(32px, 12.55px + 5.19vw, 64px);
  --section-px: clamp(16px, -13.17px + 7.78vw, 64px);

  /* Typography */
  --text-xs: clamp(12px, 11.27px + 0.19vw, 13px);

  /* Radii */
  --radius-8: 0.5rem;
}

/* ── Dark mode (auto) ── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1A1A;
    --text: #f0f0f0;
    --text-secondary: #a0a0a0;
    --border: #333;
    --nav-bg: rgba(26, 26, 26, 0.9);
    --nav-border: rgba(60, 60, 60, 0.6);
    --footer-bg: #1A1A1A;
    --footer-text: #888;
    --footer-link-hover: #fff;
    --footer-border: rgba(255,255,255,0.1);
  }
}

/* ── Dark mode (manual toggle) ── */
html[data-theme="dark"] {
  --bg: #1A1A1A;
  --text: #f0f0f0;
  --text-secondary: #a0a0a0;
  --border: #333;
  --nav-bg: rgba(26, 26, 26, 0.9);
  --nav-border: rgba(60, 60, 60, 0.6);
  --footer-bg: #1A1A1A;
  --footer-text: #888;
  --footer-link-hover: #fff;
  --footer-border: rgba(255,255,255,0.1);
}
html[data-theme="light"] {
  --bg: #fffdec;
  --text: #111;
  --text-secondary: #555;
  --border: #e4e3d7;
  --nav-bg: rgba(255, 253, 236, 0.85);
  --nav-border: rgba(228, 227, 215, 0.6);
  --footer-bg: #fffdec;
  --footer-text: #555;
  --footer-link-hover: #111;
  --footer-border: #e4e3d7;
}


/* ══════════════════════════════════════════════════════
   PAGE BACKGROUND
   ══════════════════════════════════════════════════════ */
.page-wrapper { background: var(--bg); }
body { padding-top: 64px; } /* offset for fixed navbar */


/* ══════════════════════════════════════════════════════
   NAVBAR (same as /en/, minus locale picker + CTA)
   ══════════════════════════════════════════════════════ */
.en-navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--nav-border);
  transition: background 0.3s;
}
.en-navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--section-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.en-navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.en-navbar-logo img {
  height: 40px; width: 40px; flex-shrink: 0;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo-name {
  font-family: 'Champ', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.4px;
  line-height: 1.1;
  color: var(--text);
}
.logo-tagline {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: -0.3px;
  line-height: 1;
  color: var(--text);
  opacity: 0.6;
  margin-top: 1px;
}


/* ══════════════════════════════════════════════════════
   RICH TEXT CONTENT
   ══════════════════════════════════════════════════════ */
.zoou-rich-text { color: var(--text); }
.zoou-rich-text h2 { font-family: 'Champ', sans-serif; color: var(--text); }
.zoou-rich-text h3 { font-family: 'Champ', sans-serif; color: var(--text); }
.zoou-rich-text p { color: var(--text); }
.zoou-rich-text a { color: var(--text); text-decoration: underline; transition: opacity 0.2s; }
.zoou-rich-text a:hover { opacity: 0.7; }
.zoou-rich-text strong { color: var(--text); }


/* ══════════════════════════════════════════════════════
   FOOTER (same structure as /en/)
   ══════════════════════════════════════════════════════ */
.en-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: var(--space-lg) 0 var(--space-md);
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--section-px);
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--footer-border);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.footer-brand img { height: 32px; width: 32px; flex-shrink: 0; }
.footer-brand .logo-name { color: var(--text); }
.footer-brand .logo-tagline { color: var(--text-secondary); opacity: 0.6; }
.footer-stores {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-store-badge {
  height: 40px;
  border-radius: var(--radius-8);
  transition: opacity 0.2s;
}
.footer-store-badge--google {
  height: 60px;
  margin: -10px 0;
}
.footer-store-badge:hover { opacity: 0.8; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-sm);
  font-size: var(--text-xs);
  flex-wrap: wrap;
  gap: 12px;
  color: var(--footer-text);
}
.footer-links {
  display: flex;
  gap: 24px;
}
.footer-links a {
  color: var(--footer-text);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--footer-link-hover); }


/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { padding-top: 56px; }
  .en-navbar-inner { height: 56px; }
  .en-navbar-logo img { height: 30px; width: 30px; }
  .en-navbar-logo { gap: 7px; }
  .logo-name { font-size: 22px; }
  .logo-tagline { font-size: 9.5px; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}