/*
styles.css

Shared styling for every page of the MicLocker website (home, privacy, support).

Goals:
- Clean and modern, readable on phone and desktop.
- One small set of reusable classes instead of one-off rules per page.
- Colours live in CSS variables at the top so the whole palette can be
  re-skinned from brand-overrides.css without touching anything below.
*/

/* ---------------------------------------------------------------------------
   Design tokens
   Default palette. brand-overrides.css is loaded after this file and replaces
   these values with the ones sampled from the real app icon.
   --------------------------------------------------------------------------- */

:root {
  --brand-blue: #2f7fc5;
  --brand-blue-dark: #1d5296;
  --brand-blue-light: #6fb2e8;
  --surface: #ffffff;
  --text: #0f1723;
  --text-on-blue: #ffffff;
  --muted: #64748b;
  --hairline: #e5e7eb;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Page shell
   --------------------------------------------------------------------------- */

body.page {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  line-height: 1.6;
  color: var(--text);
  /* Diagonal gradient in the same direction as the app icon's own gradient. */
  background: linear-gradient(
    135deg,
    var(--brand-blue-light) 0%,
    var(--brand-blue) 45%,
    var(--brand-blue-dark) 100%
  );
}

a {
  color: var(--brand-blue-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Visible keyboard focus everywhere, for accessibility. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-blue-dark);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Header and navigation
   --------------------------------------------------------------------------- */

.page-header {
  background: var(--brand-blue-dark);
  color: var(--text-on-blue);
  position: sticky;
  top: 0;
  z-index: 10;
}

.page-header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-on-blue);
}

.brand-link:hover {
  text-decoration: none;
}

.brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.brand-title {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nav {
  display: flex;
  gap: 0.35rem;
  font-size: 0.95rem;
  flex-wrap: wrap;
}

.nav-link {
  color: rgba(255, 255, 255, 0.9);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.12);
  text-decoration: none;
}

.nav-link-active {
  background-color: rgba(255, 255, 255, 0.18);
  color: var(--text-on-blue);
}

/* ---------------------------------------------------------------------------
   Main layout
   --------------------------------------------------------------------------- */

.page-main {
  padding: 1.5rem 1rem 2.5rem;
}

.page-container {
  max-width: 960px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   Cards
   Every block of content on every page sits in a .card, split into one or
   more .card-section children which get an automatic divider between them.
   --------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border-radius: 1rem;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.25);
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
}

.card-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 1.5rem;
  align-items: center;
}

.card-section + .card-section {
  margin-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1.25rem;
}

@media (max-width: 720px) {
  .card-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
   Typography helpers
   --------------------------------------------------------------------------- */

.page-title {
  margin: 0 0 0.5rem;
  font-size: 1.85rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.page-subtitle {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 1.05rem;
}

.section-title {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}

.sub-title {
  margin: 1.25rem 0 0.35rem;
  font-size: 1.02rem;
}

.lead-text {
  font-size: 1.05rem;
}

.muted-text {
  color: #94a3b8;
  font-size: 0.9rem;
}

/* A short pull-quote, used once on the home page for the opening line. */
.pull-quote {
  margin: 0 0 1rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--brand-blue);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text);
}

.bullet-list,
.feature-list,
.step-list {
  padding-left: 1.2rem;
  margin: 0.75rem 0 0;
}

.bullet-list li,
.feature-list li,
.step-list li {
  margin-bottom: 0.4rem;
}

.contact-block {
  font-weight: 500;
}

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.card-hero-media {
  display: flex;
  justify-content: center;
}

.hero-icon {
  width: 128px;
  height: 128px;
  border-radius: 28px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);
}

.hero-actions {
  margin-top: 1rem;
}

.app-store-link {
  display: inline-flex;
}

.app-store-badge {
  height: 50px;
  width: auto;
}

.hero-secondary-links {
  margin-top: 0.85rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.text-link {
  color: var(--brand-blue-dark);
}

.separator-dot {
  margin: 0 0.4rem;
}

/* ---------------------------------------------------------------------------
   Screenshot figure
   --------------------------------------------------------------------------- */

.screenshot-figure {
  margin: 1rem 0 0;
  text-align: center;
}

.screenshot-image {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
  border: 1px solid var(--hairline);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
}

.screenshot-caption {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   FAQ
   Each question is a .section-title inside its own .card-section, so the FAQ
   needs no layout rules of its own beyond tightening the spacing.
   --------------------------------------------------------------------------- */

.faq-answer {
  margin: 0 0 0.5rem;
}

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */

.support-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.form-label {
  font-weight: 500;
  font-size: 0.95rem;
}

.required {
  color: #dc2626;
  font-size: 0.8rem;
}

.optional {
  color: #9ca3af;
  font-size: 0.8rem;
}

.form-input,
.form-textarea {
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  padding: 0.6rem 0.7rem;
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input:focus,
.form-textarea:focus {
  border-color: var(--brand-blue-dark);
  box-shadow: 0 0 0 3px rgba(47, 127, 197, 0.18);
}

.form-actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  padding: 0.6rem 1.3rem;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.05s ease;
}

.btn-primary {
  background-color: var(--brand-blue-dark);
  color: var(--text-on-blue);
  box-shadow: 0 10px 25px rgba(29, 82, 150, 0.35);
}

.btn-primary:hover {
  background-color: var(--brand-blue);
}

.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 6px 16px rgba(29, 82, 150, 0.35);
}

/* Secondary button, used for "Copy email address". */
.btn-secondary {
  background-color: transparent;
  color: var(--brand-blue-dark);
  border: 1px solid var(--brand-blue-dark);
}

.btn-secondary:hover {
  background-color: rgba(47, 127, 197, 0.08);
}

/* Small confirmation text that appears next to the copy button. */
.copy-status {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------------------------------------------------------------------------
   Email fallback
   Holds the inline SVG version of the support address, shown only when
   JavaScript is unavailable. SVG keeps the address out of reach of the
   regex scrapers that harvest plain-text addresses from HTML.
   --------------------------------------------------------------------------- */

.email-fallback {
  display: block;
  margin-top: 0.75rem;
}

.email-fallback svg {
  vertical-align: middle;
}

/* ---------------------------------------------------------------------------
   Alerts
   --------------------------------------------------------------------------- */

.alert {
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 1rem 0 0;
  font-size: 0.93rem;
}

.alert-info {
  background-color: #eff6ff;
  border: 1px solid var(--brand-blue-light);
  color: #0c3f74;
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.page-footer {
  padding: 0.75rem 1rem 1.5rem;
  color: var(--text-on-blue);
}

.page-footer-inner {
  max-width: 960px;
  margin: 0 auto;
  font-size: 0.9rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-text {
  margin: 0;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.92);
}