/* ======================
   General Reset
====================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Let the browser style scrollbars/controls per theme */
:root { color-scheme: light dark; }

/* ======================
   Dark Mode and Light Mode
====================== */
:root{
  /* Surfaces */
  --bg:#ffffff;
  --elevated:#ffffff;
  --elevated-hover:#f6f6f6;

  /* Text */
  --text:#000000;
  --text-muted:#5c5c5c;
  --placeholder:#7a7a7a;

  /* Borders / shadows */
  --border:#dddddd;
  --input-border:#000000;
  --shadow:0 6px 18px rgba(0,0,0,.08);

  /* Buttons */
  --btn-bg:#000000;
  --btn-fg:#ffffff;

  /* Links */
  --link:#003399;

  /* Chips */
  --chip-bg:#ffffff;
  --chip-fg:#000000;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#000000;
    --elevated:#121212;
    --elevated-hover:#1a1a1a;

    --text:#ffffff;
    --text-muted:#cfcfcf;
    --placeholder:#a1a1a1;

    --border:#2a2a2a;
    --input-border:#ffffff;
    --shadow:0 6px 18px rgba(0,0,0,.5);

    --btn-bg:#ffffff;
    --btn-fg:#000000;

    --link:#ffffff;

    --chip-bg:#000000;
    --chip-fg:#ffffff;
  }
}

/* ======================
   Base / Layout
====================== */
body{
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height:1.6;
  text-align:center;
  display:flex; justify-content:center; align-items:center;
  min-height:100vh;

  background-color:var(--bg);
  color:var(--text);
}

.container{ max-width:800px; padding:2rem; }

/* ======================
   Header
====================== */
header h1{ font-size:2.5rem; font-weight:700; margin-bottom:.5rem; }
header .tagline{ font-size:1.2rem; font-weight:300; color:var(--text); }

/* ======================
   Images
====================== */
.responsive-img{
  width:100%; max-width:600px; height:auto; object-fit:cover;
  display:block; margin:0 auto; border-radius:8px;
}

/* ======================
   Intro Section
====================== */
.intro{ margin:3rem 0; }
.intro h2{ font-size:1.8rem; margin-bottom:1rem; font-weight:600; color:var(--text); }
.intro p{ font-size:1rem; max-width:600px; margin:0 auto; color:var(--text); }
.subtitle{ font-style:italic; margin:1rem 0; display:block; }

/* ======================
   Form Section
====================== */
.form-section{ margin:1rem 0; }
.stock-form{ display:flex; flex-direction:column; align-items:center; }
.stock-form label{ margin-bottom:.5rem; font-size:1rem; color:var(--text); }

.stock-form input{
  width: clamp(280px, 92vw, 628px);  /* responsive, never exceeds 628px */
  margin-inline: auto;               /* center horizontally */
  border-radius: 20px;
  padding: .75rem;
  font-size: 1rem;
  margin-bottom: 1rem;
  border: 1px solid var(--input-border);
  background-color: var(--bg);
  color: var(--text);
}

.stock-form input::placeholder{ color:var(--placeholder); }
/* .stock-form input:focus-visible{ outline:2px solid currentColor; outline-offset:2px; } */

.stock-form button{
  padding:.75rem 2rem; border:none; border-radius:8px; font-size:1rem; font-weight:bold;
  cursor:pointer; transition:transform .06s ease, opacity .2s ease;
  background:var(--btn-bg); color:var(--btn-fg);
}
.stock-form button:hover{ opacity:.92; }
.stock-form button:active{ transform:translateY(1px); }

.input-wrapper{ position:relative; width:100%; max-width:600px; margin:0 auto; }

/* ======================
   Autocomplete Suggestions (fixed for dark/light)
====================== */
.suggestions{
  display:none;
  position:absolute; top:100%; left:0; right:0; z-index:1000;
  margin:0; padding:0; list-style:none;

  background:var(--elevated);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:var(--shadow);

  max-height:220px; overflow-y:auto;
}
.suggestions.open{ display:block; }

.suggestions li{
  padding:.65rem .9rem; cursor:pointer; line-height:1.2;
}
.suggestions li:hover,
.suggestions li[aria-selected="true"]{
  background:var(--elevated-hover);
}

/* Scrollbar (WebKit) */
.suggestions::-webkit-scrollbar{ width:10px; }
.suggestions::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }
.suggestions::-webkit-scrollbar-track{ background:transparent; }

/* ======================
   Chips (theme-aware)
====================== */
.chip-container{ min-height:40px; }
.chip{
  background:var(--chip-bg);
  color:var(--chip-fg);
  padding:.35rem .7rem; border-radius:999px;
  border:1px solid var(--border);
}

/* ======================
   Content Sections
====================== */
.content-section{ margin:2rem 0; text-align:left; }
.content-section h2{ margin-bottom:1rem; font-size:1.6rem; font-weight:600; color:var(--text); }
.content-section ul,
.content-section ol{ margin-left:1.5rem; margin-bottom:1rem; }
.content-section table{ width:100%; border-collapse:collapse; margin:1.5rem 0; }
.content-section th,
.content-section td{ border:1px solid var(--border); padding:.5rem; text-align:left; color:var(--text); }

/* ======================
   Footer
====================== */
footer{ margin-top:3rem; font-size:.85rem; color:var(--text); }

/* ======================
   Links Positioning + Colors
====================== */
.top-left{ position:absolute; top:1rem; left:1rem; color:var(--text); }
.bottom-left{ position:absolute; bottom:1rem; left:1rem; color:var(--text); }
.bottom-center{ position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); color:var(--text); }
.bottom-right{ position:absolute; bottom:1rem; right:1rem; color:var(--text); }

a{ text-decoration:underline; color:var(--link); font-size:.9rem; }
a.landing-link{ text-decoration:none; color:var(--text); font-size:.9rem; }

/* Optional: nicer selection */
::selection{ background:rgba(127,127,127,.35); }