/* Moved from inline <style> in index.html — accessible defaults + gentle background gradients */
:root{
  /* Royal-blue felt theme */
  --bg-top: #0b3d91;    /* rich royal blue */
  --bg-bottom: #06294f; /* deep navy */
  --accent: #e6b800;   /* warm gold accent */
  --accent-2: #9ecbff;  /* pale sky accent for links */
  --text: #f8fbff;      /* near-white text for contrast */
  --muted: #c9d6ee;     /* soft muted text */
  --card: #021427;      /* deep card background to mimic felt surface */
  --shadow: rgba(0,0,0,0.45);
}

html,body{height:100%;}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  /* Full-viewport, fixed felt-like background composed of layered gradients and a subtle diagonal texture */
  background-color: var(--bg-bottom);
  background-image:
    /* soft vignette */
    radial-gradient(60% 50% at 20% 10%, rgba(255,255,255,0.02), transparent 12%),
    radial-gradient(50% 40% at 90% 90%, rgba(0,0,0,0.08), transparent 18%),
    /* diagonal felt texture */
    repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0 1px, rgba(0,0,0,0.02) 1px 6px),
    /* main depth */
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  -webkit-text-size-adjust:100%;
  min-height:100vh;
}

h1,h2{font-weight:600;color:var(--text);margin:0 0 .5rem}
.lead{color:var(--muted);font-size:1.02rem;margin-top:0.2rem}

a{color:var(--accent-2)}
/* Only change color on hover for non-button links so buttons keep their intended text color */
a:not(.btn):hover{color:var(--accent)}
/* Ensure button text color stays consistent on hover/focus */
.btn:hover, .btn:focus { color: #021427; }
/* Keep outlined/alt buttons' text light on hover so they remain readable */
.btn.alt:hover, .btn.alt:focus { color: var(--text); }

/* Buttons */
.btn{background:var(--accent);color:#021427;padding:0.55rem 0.95rem;border-radius:8px;text-decoration:none;display:inline-flex;align-items:center;border:none;font-weight:600}
.btn.alt{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}
.btn.download{background:var(--accent-2)}

/* Hero and layout */
.gradient-hero{padding:2.25rem 0 1rem;background:linear-gradient(135deg, rgba(10,123,214,0.10), rgba(10,77,140,0.03));backdrop-filter:saturate(120%)}
.hero-inner{display:flex;flex-wrap:wrap;gap:2rem;align-items:center;padding:2rem 1rem;max-width:1100px;margin:0 auto}
.hero-inner > div{flex:1 1 360px;min-width:0}

.screen-card{background:var(--card);border-radius:12px;padding:1rem;box-shadow:0 10px 30px var(--shadow);border:1px solid rgba(255,255,255,0.03)}
.hero-peek h4{margin:0 0 .5rem;font-size:.95rem}

/* Make large screenshot previews approximately 60% width on larger viewports
   while keeping them responsive (full width) on small screens. */
.hero-peek img.resp,
.screens .screen-card img.resp {
  width: 60%;
  max-width: 60%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width:720px){
  .hero-peek img.resp,
  .screens .screen-card img.resp {
    width: 100%;
    max-width: 100%;
  }
}

/* Pills */
.pill-row{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.pill-row .pill{flex:0 0 auto;white-space:nowrap;background:rgba(255,255,255,0.06);color:var(--muted);padding:.28rem .7rem;border-radius:999px;margin-right:.5rem;font-size:.78rem;border:1px solid rgba(255,255,255,0.03)}

/* Sections */
.wrapper{padding:1.5rem}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.feature{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));padding:1rem;border-radius:8px;border:1px solid rgba(255,255,255,0.03)}

/* Footer */
.footer-grid{display:grid;grid-template-columns:1fr 220px 1fr;gap:1rem;padding:2rem 1rem;align-items:start}
.footer-title{margin:0 0 .25rem}
.footer-desc{color:var(--muted);margin:0}
.legal.small-print{color:rgba(255,255,255,0.6);font-size:.8rem}
.footer-contact{font-size:.65rem;margin-top:.75rem;opacity:.9}

.note{color:var(--muted)}

/* Accessibility: focus outlines and contrast helpers */
.btn:focus{outline:3px solid rgba(230,184,0,0.22);outline-offset:3px}
.alt:focus{outline:3px solid rgba(158,203,255,0.12);outline-offset:3px}
.support-link:focus{outline:3px solid rgba(158,203,255,0.12);outline-offset:3px}
.small-print, .privacy-copy{color:var(--muted)}

/* Ensure strong contrast for important inline links */
a[href^="mailto:"], a[href^="https://chromewebstore"]{color:var(--accent);font-weight:600}

@media (max-width:720px){
  .hero-inner{padding:1rem}
  .footer-grid{grid-template-columns:1fr}
}

/* Additional classes referenced by index.html */
.btn.download{background:var(--accent-2)}
.support-note{font-size:.7rem;opacity:.8;margin-top:1.25rem}
.support-link{text-decoration:underline}
.footer-contact{font-size:.65rem;margin-top:.75rem;opacity:.8}

/* Donation / support link */
.donate{margin-top:.35rem;font-size:.88rem;color:var(--muted)}
.donate-link{color:var(--accent-2);text-decoration:none;font-weight:600;border-bottom:1px dashed rgba(10,123,214,0.18)}
.donate-link:hover{color:var(--accent);text-decoration:underline;border-bottom-style:solid}
.donate-link:focus{outline:3px solid rgba(10,123,214,0.18);outline-offset:3px}

/* Prominent Venmo CTA in hero */
.btn.venmo{
  display:inline-flex;align-items:center;gap:10px;padding:0.56rem 1rem;border-radius:10px;background:linear-gradient(180deg,#6dd07f,#43b868);color:#021427;font-weight:700;border:none;text-decoration:none;box-shadow:0 10px 28px rgba(47,120,70,0.18);}
.btn.venmo .material-symbols-outlined{flex:0 0 auto;display:block;margin-right:8px}
.btn.venmo .btn-text{font-size:0.98rem}
.btn.venmo:hover{box-shadow:0 14px 36px rgba(47,120,70,0.25)}
.btn.venmo:active{transform:translateY(0)}
.btn.venmo:focus{outline:3px solid rgba(230,184,0,0.18);outline-offset:3px}

/* Firefox CTA styling (matches site theme with a Firefox-leaning accent */
.btn.firefox{
  display:inline-flex;align-items:center;gap:10px;padding:0.56rem 1rem;border-radius:10px;background:linear-gradient(180deg,#ffb366,#ff7a00);color:#021427;font-weight:700;border:none;text-decoration:none;box-shadow:0 10px 28px rgba(170,90,0,0.14);
}
.btn.firefox .material-symbols-outlined{flex:0 0 auto;display:block;margin-right:8px}
.btn.firefox:hover{box-shadow:0 14px 36px rgba(170,90,0,0.22)}
.btn.firefox:active{transform:translateY(0)}
.btn.firefox:focus{outline:3px solid rgba(255,180,90,0.16);outline-offset:3px}

/* CTA row layout: align buttons nicely and allow wrapping on small screens */
.cta-row{display:flex;flex-wrap:wrap;gap:0.6rem;align-items:center;margin-top:1rem}

/* Ensure all buttons align vertically and have consistent sizing */
.btn{display:inline-flex;align-items:center;gap:8px;padding:0 12px;border-radius:8px;min-height:44px;box-sizing:border-box}
.btn .btn-text{display:inline-block}
.btn svg{display:inline-block;vertical-align:middle;height:18px;width:18px}

/* Add a consistent transition and hover lift + shadow for all buttons */
.btn{transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,0.12);opacity:1}

/* Ensure pressing (active) returns the button to its resting position for all buttons */
.btn:active{transform:translateY(0);transition:none}

/* Force button text color to remain visible on hover/focus (highest specificity to avoid accidental overrides) */
.btn, .btn:hover, .btn:focus { color: #021427 !important; }
/* Keep outlined/alt buttons' text light on hover so they remain readable */
.btn.alt, .btn.alt:hover, .btn.alt:focus { color: var(--text) !important; }

/* preserve prior specific button paddings for visual balance */
.btn.alt{padding:0.48rem 0.85rem}
.btn.download{padding:0.56rem 0.95rem}
.btn.venmo{padding:0.52rem 0.95rem;background:linear-gradient(180deg,#6dd07f,#43b868);color:#021427;font-weight:700;border:none;text-decoration:none;box-shadow:0 10px 28px rgba(47,120,70,0.18)}

@media (max-width:640px){
  .cta-row{gap:.6rem}
  .btn{flex:1 1 auto;min-width:0}
  .btn.venmo{width:100%}
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn, .btn:hover, .btn:active, .btn.venmo:hover{transition:none !important;transform:none !important;box-shadow:none !important}
}

/* Prominent GitHub link and footer note styling */
.footer-github{margin-top:.5rem;font-size:.95rem;color:var(--muted)}
.footer-list a[href*="github.com"]{color:var(--accent);font-weight:700}

/* Material Symbols helper */
.material-symbols-outlined{font-family:'Material Symbols Outlined', sans-serif;font-variation-settings:'FILL' 0,'wght' 700,'GRAD' 0,'opsz' 24;vertical-align:middle;margin-right:8px;font-size:18px;display:inline-block}