/* Olab Reviews site-wide theme for template pages (header.php / footer.php / blog).
   "Space glass" working direction, see the brand-rules block. Loaded via custom_head.
   The homepage (full-HTML landing) uses olab-home.css instead. 2026-11-12 Claude. */

:root {
  --accent: #E3A63B;
  --accent-2: #5CC4BB;
  --bg: #070B18;
  --surface: rgba(255,255,255,.05);
  --text: #EEF1F7;
  --muted: #AAB3C5;
  --border: rgba(255,255,255,.12);
  --olab-amber: #E3A63B;
  --olab-amber-hi: #F2C46B;
  --olab-sea: #2A7F7A;
  --olab-sea-glow: #5CC4BB;
  --olab-clay: #B5523B;
  --olab-ink: #14213D;
}

body {
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", system-ui, sans-serif;
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 500px at 12% -10%, rgba(227,166,59,.10), transparent 60%),
    radial-gradient(800px 600px at 95% 20%, rgba(92,196,187,.08), transparent 60%),
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.35), transparent 2px),
    radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,.25), transparent 2px),
    radial-gradient(1px 1px at 45% 75%, rgba(255,255,255,.25), transparent 2px),
    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.3), transparent 2px);
  background-attachment: fixed;
  color: var(--text);
}

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.01em; }
.rp-page h2, .legal h2, .about h2 { margin-top: 1.6em; }

a { color: var(--olab-sea-glow); }
a:hover { color: var(--olab-amber-hi); }

/* Header: frosted glass bar */
.rp-navbar {
  background: rgba(7,11,24,.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.rp-brand { font-weight: 800; letter-spacing: -.01em; }
.rp-nav a { color: var(--text); }
.rp-nav a:hover { color: var(--olab-amber-hi); }

/* Glass panels */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 30px rgba(0,0,0,.25);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.card h3 { margin-top: 0; }

/* Buttons: glossy amber primary, clear-glass secondary */
.btn { border-radius: 999px; font-weight: 700; padding: 11px 24px; }
.btn-primary, .cf1-btn {
  background: linear-gradient(180deg, var(--olab-amber-hi), var(--olab-amber)) !important;
  color: var(--olab-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 20px rgba(227,166,59,.25);
}
.btn-primary:hover, .cf1-btn:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 26px rgba(227,166,59,.4); text-decoration: none; }
.btn-outline { background: rgba(255,255,255,.06); border-color: var(--border); color: var(--text); }

/* Long-form pages (policies, about, posts) */
.legal, .about { max-width: 820px; }
.about .card-grid, .legal .card-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.legal ul, .legal ol, .about ul { padding-left: 1.2em; }
.legal li, .about li { margin: .3em 0; }
.legal > .card:first-child, .about > .card:first-child,
.rp-page .rp-container > .card:first-child {
  border-color: rgba(227,166,59,.45);
  background: rgba(227,166,59,.08);
  font-size: .95rem;
}

/* Contact form on dark */
.cf1-form label { color: var(--text); }
.cf1-form input:not([type=checkbox]), .cf1-form textarea, .cf1-form select {
  border-color: rgba(255,255,255,.2) !important;
}
.cf1-form input:focus, .cf1-form textarea:focus { outline: 2px solid var(--olab-amber); outline-offset: 1px; }

/* Footer */
footer { background: rgba(7,11,24,.6) !important; border-top: 1px solid var(--border) !important; }
footer a { color: var(--muted) !important; }
footer a:hover { color: var(--olab-amber-hi) !important; }

/* Phones: brand on its own line, menu scrolls sideways instead of overflowing */
@media (max-width: 760px) {
  .rp-navbar-inner { flex-wrap: wrap; gap: 6px 0; padding: 10px 16px; }
  .rp-brand { flex: 1 0 100%; }
  .rp-nav {
    flex: 1 0 100%;
    gap: 18px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .rp-nav::-webkit-scrollbar { display: none; }
  .rp-nav a { flex: 0 0 auto; font-size: 14px; }
  body { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}