/* 
    colors based on Ians design
    background: #E0DACA
    AI: #869327
    Strain: #11503D
    Match: #A67B4E
    Let...strain: #6C9A37
*/

:root {
  --green: #0B6E4F;
  --gold: #C9A227;
  --text: #111;
  --bg: #fff;
  --muted: #666;
  --danger: #a33;
  --overlay: rgba(0,0,0,0.70);
  --panel: #111;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Montserrat', sans-serif;
  color: var(--text);
  background: var(--bg);
  height: 100%;
  min-height: 100vh;
}

/* Banner */
.banner {
  background-color: var(--gold);
  color: black;
  text-align: center;
  padding: 10px;
  font-size: 14px;
}

/* Header */
header {
  background: var(--green);
  padding: 12px;
  text-align: center;
  font-size: 34px;
  color: black;
  font-weight: bold;
  border-bottom: 1px solid black;
  font-family: 'Playfair Display', serif;
}

/* Hero Section (Updated for true responsiveness) */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  /* Ensures hero always fills the entire screen */
  height: 100vh;
  width: 100%;
  min-height: 100vh;

  /* RESPONSIVE BACKGROUND */
  background-image: url("../images/strainmatch_design.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  /* Prevents weird gaps on some mobile browsers */
  background-attachment: fixed;
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-text {
  text-align: center;
  z-index: 1;
  max-width: 700px;
  padding-bottom: 60px;
}

.hero-text h1 {
  font-size: 42px;
  margin-bottom: 20px;
  font-family: 'Playfair Display', serif;
}

.hero-text p {
  font-size: 20px;
  margin-bottom: 20px;
  font-family: 'Playfair Display', serif;
}

.cta {
  display: inline-block;
  padding: 6px 18px;
  background-color: rgba(60, 90, 64, 0);
  color: #11503D;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}
.cta:hover {
  background-color: #A67B4E;
  color: #11503D;
}

/* Messages */
.messages {
  margin: 8px auto 0;
  max-width: 720px;
  width: 92%;
}
.msg {
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.msg.info {
  background: rgba(255,255,255,0.6);
  color: #000;
}
.msg.error {
  background: rgba(255, 204, 204, 0.9);
  color: var(--danger);
}

/* Modal overlay */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal {
  background: var(--panel);
  color: #fff;
  width: min(92vw, 560px);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 22px;
}

.modal h2 { margin: 0 0 12px; font-family: 'Playfair Display', serif; }
.modal p { margin: 0 0 10px; color: #ddd; }
.modal .field { margin: 12px 0; }
.modal label { display: block; margin-bottom: 6px; font-size: 14px; color: #ddd; }
.modal input[type="checkbox"] {
  transform: scale(1.2);
  margin-right: 8px;
}
.modal select {
  width: 100%;
  padding: 8px;
  font-size: 16px;
  border-radius: 6px;
  border: 1px solid #444;
  background: #1a1a1a;
  color: #fff;
}

.modal .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.modal .actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  background: #A67B4E;
  color: #000;
  padding: 10px 16px;
  font-weight: bold;
  border-radius: 6px;
  transition: filter .2s ease, transform .02s ease-in;
}

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn:hover:not([disabled]) { filter: brightness(0.95); }
.btn:active:not([disabled]) { transform: translateY(1px); }
.btn-secondary { background: #2a2a2a; color: #fff; }

/* Lock scroll when modal open */
body.modal-open { overflow: hidden; }

/* Floating change-gate link */
.change-gate-link {
  position: fixed;
  bottom: 12px;
  right: 18px;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  text-decoration: underline;
  z-index: 9999;
  background: rgba(0,0,0,0.4);
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
}
.change-gate-link:hover {
  background: rgba(0,0,0,0.7);
  color: #fff;
}

/* -----------------------------
   MOBILE OPTIMIZATIONS
   ----------------------------- */

/* Fix for mobile browsers where 100vh is unreliable */
@media (max-width: 768px) {
  .hero {
    height: 100vh;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll; /* prevents iOS zoom jump */
  }

  .hero-text { padding-bottom: 40px; }
}

/* Very small mobile screens */
@media (max-width: 480px) {
  .hero-text h1 { font-size: 32px; }
  .hero-text p { font-size: 16px; }
}

/* Ultra-wide displays */
@media (min-aspect-ratio: 2/1) {
  .hero {
    background-size: cover;
    background-position: center;
  }
}